:root{
  --bg:#1c0d10;
  --panel:#2a1318;
  --panel-2:#341a20;
  --line:rgba(255,255,255,.10);
  --ink:#f6ece9;
  --muted:#c7a9a3;
  --accent:#7a1f2b;
  --accent-2:#a8323f;
  --good:#2f7d52;
  --warn:#b9892f;
  --bad:#b23b46;
  --radius:14px;
  --shadow:0 10px 40px rgba(0,0,0,.35);
  font-synthesis-weight:none;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:radial-gradient(1200px 600px at 70% -10%, #3a181d 0%, var(--bg) 60%) fixed;
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
a{color:var(--accent-2);text-decoration:none}
/* A person's name is data, not an alert. In the data tables it reads as ink and
   carries an underline instead of the accent red — which fought the country
   chips beside it and looked like a warning. The underline is what keeps it
   recognisable as a link once the colour is gone. */
a.plain{
  color:var(--ink);text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.30);text-underline-offset:3px;
  transition:text-decoration-color .18s ease
}
a.plain:hover{text-decoration-color:var(--ink)}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:"Playfair Display",Georgia,serif;font-weight:600;letter-spacing:.2px;margin:0 0 .4em}
h1{font-size:1.7rem}
.muted{color:var(--muted)}
.small{font-size:.82rem}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* layout */
.wrap{max-width:1080px;margin:0 auto;padding:24px}
.center{min-height:100vh;display:grid;place-items:center;padding:24px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card .pad{padding:26px}
.auth{width:100%;max-width:400px}
.brandmark{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.brandmark b{font-family:"Playfair Display",serif;font-size:1.15rem}
.dot{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--accent-2),var(--accent));display:grid;place-items:center;color:#fff;font-weight:700;font-family:"Playfair Display",serif}
.brandmark .logo{width:38px;height:38px;border-radius:9px;object-fit:cover;display:block}
.auth-slogan{font-family:"Playfair Display",Georgia,serif;font-size:.96rem;font-style:italic;color:var(--ink);margin:2px 0 20px;line-height:1.4;opacity:.92}

/* top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-bottom:1px solid var(--line);background:rgba(0,0,0,.15);position:sticky;top:0;z-index:5;backdrop-filter:blur(6px)}
.topbar nav a{color:var(--muted);margin-right:18px;font-weight:500}
.topbar nav a.active,.topbar nav a:hover{color:var(--ink);text-decoration:none}

/* forms */
label{display:block;font-size:.8rem;color:var(--muted);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.6px}
input,select,textarea{
  width:100%;padding:11px 12px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:10px;color:var(--ink);font:inherit;outline:none
}
input:focus,select:focus{border-color:var(--accent-2);box-shadow:0 0 0 3px rgba(168,50,63,.2)}
.btn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:1px solid transparent;
  border-radius:10px;padding:11px 16px;font:inherit;font-weight:600;color:#fff;
  background:linear-gradient(135deg,var(--accent-2),var(--accent));
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 2px 8px rgba(0,0,0,.28);
  transition:filter .18s ease, box-shadow .18s ease, transform .06s ease,
             background-color .18s ease, border-color .18s ease;
  text-decoration:none;line-height:1.2;
  /* Comfortable hit area even for the small variant. */
  min-height:38px
}
.btn:hover{filter:brightness(1.12);box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 4px 14px rgba(0,0,0,.36)}
/* Pressed: sink rather than scale, so nothing around it shifts. */
.btn:active{transform:translateY(1px);filter:brightness(.96)}
/* The ring has to clear 3:1 against BOTH the dark panel and the button's own
   maroon fill — the accent colour manages neither (2.4:1 and 1.0:1). Ink does:
   13.8:1 and 5.7:1. */
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
:where(input,select,textarea,summary,a):focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;filter:none;transform:none}
.btn.full{width:100%;justify-content:center}

/* Ghost: the border used to be rgba(255,255,255,.10) on a dark panel — all but
   invisible, so half the actions in the back office did not read as buttons. */
.btn.ghost{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.22);color:var(--ink);
  box-shadow:none
}
.btn.ghost:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.38);filter:none}
.btn.ghost:active{background:rgba(255,255,255,.07)}

.btn.sm{padding:7px 11px;font-size:.82rem;border-radius:8px;min-height:32px}
.btn.danger{background:linear-gradient(135deg,#b23b46,#7a1f2b)}

/* Row actions sit inside dense tables; keep them legible but quiet. */
td .btn.sm{white-space:nowrap}

@media (prefers-reduced-motion: reduce){
  .btn{transition:none}
  .btn:active{transform:none}
}

/* tables */
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:13px 12px;vertical-align:middle}

/* Rows used to be divided by --line (white at 10%), which on this panel is a
   1.33:1 edge — technically present, invisible in practice. At 26% it is
   2.31:1 and you can see where one person's row ends. */
td{border-bottom:2px solid rgba(255,255,255,.30)}
th{
  color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.6px;font-weight:600;
  /* Stays a step heavier than the row rule, so the header still reads as the
     header once the rows are 2px too. */
  border-bottom:3px solid rgba(255,255,255,.42)
}
tr:last-child td{border-bottom:0}
/* A cell must stay a table-cell. Making one a flex/grid box drops it out of
   table layout and its border lands a pixel off, which reads as a broken
   divider at that column — put the flex box on a DIV inside instead. */
td.flex,th.flex,td.grid,th.grid{display:table-cell}

/* The line alone is not enough where a row is several lines tall (Customers
   carries inputs inside it). Banding gives each row a body, so the eye groups
   it without tracing the divider. */
tr:nth-child(even) td{background:rgba(255,255,255,.028)}
tr:hover td{background:rgba(255,255,255,.06)}

/* misc */
.flash{padding:12px 14px;border-radius:10px;margin-bottom:16px;border:1px solid var(--line)}
.flash.ok{background:rgba(47,125,82,.15);border-color:rgba(47,125,82,.4)}
.flash.err{background:rgba(178,59,70,.15);border-color:rgba(178,59,70,.4)}
.flash.info{background:rgba(185,137,47,.12);border-color:rgba(185,137,47,.35)}
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.74rem;font-weight:600;border:1px solid var(--line)}
.badge.ok{background:rgba(47,125,82,.18);color:#9be3b8}
.badge.warn{background:rgba(185,137,47,.18);color:#f0cf8f}
.badge.bad{background:rgba(178,59,70,.18);color:#f3a9b0}
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.tile{padding:18px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line)}
.tile .n{font-family:"Playfair Display",serif;font-size:2rem;line-height:1}
.copyrow{display:flex;gap:8px}
.copyrow input{font-size:.82rem}
.flex{display:flex;align-items:center;gap:10px}
.between{justify-content:space-between}
@media(max-width:760px){.grid.cols-3{grid-template-columns:1fr}}

/* ---- Date picker (assets/js/datepicker.js) ---- */
.dp-pop{
  position:absolute;z-index:60;width:254px;padding:12px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);color:var(--ink);font-size:.86rem
}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dp-title{font-weight:600}
.dp-nav{
  width:28px;height:28px;border-radius:8px;border:1px solid var(--line);
  background:transparent;color:var(--ink);cursor:pointer;font-size:1rem;line-height:1
}
.dp-nav:hover{background:rgba(255,255,255,.06)}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.dp-dow{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.4px;padding:4px 0}
.dp-day{
  height:30px;border:0;border-radius:8px;background:transparent;color:var(--ink);
  cursor:pointer;font:inherit
}
.dp-day:hover{background:rgba(255,255,255,.08)}
.dp-day.is-today{box-shadow:inset 0 0 0 1px var(--line);color:var(--accent-2);font-weight:600}
.dp-day.is-sel{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff;font-weight:600}
.dp-foot{display:flex;justify-content:space-between;margin-top:10px}
.dp-foot button{
  border:1px solid var(--line);background:transparent;color:var(--muted);
  border-radius:8px;padding:5px 10px;cursor:pointer;font:inherit;font-size:.78rem
}
.dp-foot button:hover{color:var(--ink)}

/* ---- Country chips (helpers.php::country_badge) ----
   Colours come from each flag as inline --cty / --cty-rim. The dot carries the
   colour; the NAME stays in full-contrast ink, so the chip is never
   colour-only. */
.cty{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:3px 10px 3px 8px;border-radius:999px;font-size:.78rem;font-weight:600;
  color:var(--ink);
  background:color-mix(in srgb, var(--cty) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--cty) 45%, transparent)
}
.cty i{
  width:10px;height:10px;border-radius:50%;flex:0 0 auto;
  background:var(--cty);
  /* The rim is the flag's second colour — what tells the three reds and the
     two blues apart without reading the label. */
  box-shadow:inset 0 0 0 2.5px var(--cty-rim), 0 0 0 1px rgba(0,0,0,.35)
}
/* color-mix is widely supported but not universal; without it the chip still
   reads as a bordered pill with a coloured dot. */
@supports not (background: color-mix(in srgb, red 10%, transparent)){
  .cty{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.22)}
}
td .cty{font-size:.76rem}

/* Filter-bar selects on the Sessions page. */
.filt{padding:6px 7px;border:1px solid var(--line,#d8d8de);border-radius:7px;font:inherit}

/* A group's inner session table is nested inside one <td>: it must not repeat
   the outer table's dividers, and its own last row must not draw one either. */
td > table{margin:0;background:rgba(255,255,255,.02)}
td > table tr:last-child td{border-bottom:0}