/* Meet Attendance - one stylesheet, light and dark themes.
   Colors follow the login and the webforce logo: deep blue accent, sky blue highlight. */

/* ---- Tokens ---- */
:root {
  --bg:#f4f6fb; --fg:#1d2330; --muted:#667085; --card:#ffffff; --line:#e4e8f0; --line-strong:#d3d9e6;
  --accent:#2f5bea; --accent-2:#1da1f2; --accent-soft:rgba(47,91,234,.10); --accent-ink:#ffffff;
  --glass:rgba(255,255,255,.80); --glass-sm:rgba(255,255,255,.55);
  --shadow-sm:0 1px 2px rgba(16,24,40,.05); --shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --radius:14px; --radius-sm:10px;
  --danger:#d92d20; --ok:#12805c;
  /* Status colors: validated for color-vision deficiency, ordered best to worst.
     Unknown means "no data": gray with stripes, outside the ordinal scale. */
  --st-ontime:#2a56e0; --st-grace:#5b9cf6; --st-late:#e08e00; --st-absent:#c9295a; --st-unknown:#b8bfcc;
  --sb-collapsed:68px; --sb-expanded:236px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#11141a; --fg:#e8ebf2; --muted:#98a2b3; --card:#1a1e27; --line:#2a303d; --line-strong:#363d4d;
    --accent:#7b9bff; --accent-2:#4cb8f5; --accent-soft:rgba(123,155,255,.14); --accent-ink:#0d1220;
    --glass:rgba(26,30,39,.80); --glass-sm:rgba(26,30,39,.55);
    --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.28);
    --danger:#f97066; --ok:#47cd89;
    --st-ontime:#2f5ae0; --st-grace:#5e92ef; --st-late:#c8830b; --st-absent:#c92a5a; --st-unknown:#4a5263;
  }
}

/* ---- Base ---- */
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--fg); background:var(--bg); }
body.has-sidebar {
  background:
    radial-gradient(1100px 520px at 0% -10%, rgba(47,91,234,.09), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(29,161,242,.08), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
main { max-width:1320px; margin:0 auto; padding:28px 28px 40px; }
a { color:var(--accent); }
h1 { font-size:26px; line-height:1.2; margin:0; letter-spacing:-.01em; }
h2 { font-size:16px; margin:0 0 8px; }
code { font-size:13px; padding:1px 6px; border-radius:6px; background:var(--accent-soft); }
.muted { color:var(--muted); }
.small { font-size:12px; }
.center { text-align:center; }
.error { color:var(--danger); }
.notice { color:var(--ok); font-weight:500; }
img.logo { height:26px; width:auto; display:block; }
.hide-sm { display:inline; }

/* ---- Page header ---- */
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 0 20px; }
.page-head p { margin:6px 0 0; max-width:760px; }
.eyebrow { margin:0 0 6px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.page-head .eyebrow { margin:0 0 6px; }
.head-actions { display:flex; gap:8px; flex-wrap:wrap; }
.head-actions form { display:contents; }
.rules-used { font-size:13px; }

/* ---- Cards ---- */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:18px; box-shadow:var(--shadow); }
.empty-state { text-align:center; padding:40px 20px; }
.empty-state p { margin:4px 0; }

/* ---- Controls ---- */
label { display:flex; flex-direction:column; font-size:12px; font-weight:600; color:var(--muted); gap:6px; }
input, select { font:inherit; font-size:14px; padding:9px 12px; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  background:var(--card); color:var(--fg); transition:border-color .15s, box-shadow .15s; }
input:focus, select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
input:disabled { opacity:.7; }
button, .btn { font:inherit; font-size:14px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 16px; border:0; border-radius:var(--radius-sm); cursor:pointer; text-decoration:none;
  color:#fff; background:linear-gradient(135deg, #2f5bea, #1d8ff2); box-shadow:0 4px 12px rgba(47,91,234,.25);
  transition:transform .12s, box-shadow .15s, filter .15s; }
button:hover, .btn:hover { filter:brightness(1.05); box-shadow:0 6px 16px rgba(47,91,234,.32); }
button:active, .btn:active { transform:translateY(1px); }
button:focus-visible, .btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
button.secondary, .btn-ghost { color:var(--fg); background:var(--card); border:1px solid var(--line-strong); box-shadow:var(--shadow-sm); }
button.secondary:hover, .btn-ghost:hover { background:var(--bg); box-shadow:var(--shadow-sm); filter:none; }
button.link { background:none; color:var(--muted); padding:0; box-shadow:none; }
.inline { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin-top:14px; }
.inline label select { min-width:190px; }
.searchbar { display:flex; align-items:center; gap:12px; margin-top:14px; }
.searchbar input { flex:1; max-width:520px; }

/* ---- Tabs (segmented) ---- */
.tabs { display:inline-flex; gap:4px; padding:4px; border-radius:12px; background:var(--bg); border:1px solid var(--line);
  max-width:100%; overflow-x:auto; scrollbar-width:none; }
.tab { padding:7px 14px; border-radius:9px; text-decoration:none; color:var(--muted); font-size:14px; font-weight:500; white-space:nowrap; flex:none; }
.tab:hover { color:var(--fg); }
.tab.active { background:var(--card); color:var(--accent); font-weight:600; box-shadow:var(--shadow-sm); }

/* ---- Multi-select with autocomplete (templates/_multiselect.html, static/multiselect.js) ---- */
.ms { position:relative; display:flex; flex-direction:column; gap:6px; min-width:220px; flex:1 1 220px; max-width:360px; }
.ms-label { font-size:12px; font-weight:600; color:var(--muted); }
.ms-box { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:4px; min-height:40px; padding:4px 30px 4px 6px;
  border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--card); cursor:text;
  transition:border-color .15s, box-shadow .15s; }
.ms.open .ms-box, .ms-box:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.ms-chips { display:contents; }
.ms-chip { display:inline-flex; align-items:center; gap:4px; max-width:100%; padding:3px 4px 3px 9px; border-radius:999px;
  background:var(--accent-soft); color:var(--fg); font-size:12.5px; font-weight:500; }
.ms-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:200px; }
button.ms-remove { width:18px; height:18px; padding:0; border-radius:50%; font-size:14px; line-height:1; color:var(--muted);
  background:transparent; box-shadow:none; }
button.ms-remove:hover { background:var(--accent); color:#fff; filter:none; box-shadow:none; }
.ms-input { flex:1 1 80px; min-width:80px; border:0; padding:5px 4px; background:transparent; box-shadow:none; font-size:14px; }
.ms-input:focus { box-shadow:none; }
.ms-caret { position:absolute; right:12px; top:50%; width:8px; height:8px; margin-top:-6px; border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .15s; pointer-events:none; }
.ms.open .ms-caret { transform:rotate(225deg); margin-top:-2px; }
.ms-list { position:absolute; z-index:30; top:100%; left:0; right:0; margin:6px 0 0; padding:6px; list-style:none; max-height:300px;
  overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 32px rgba(16,24,40,.16); }
.ms-list[hidden] { display:none; }
.ms-option { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; font-size:14px; cursor:pointer; }
.ms-option[hidden] { display:none; }
.ms-option.active { background:var(--accent-soft); }
.ms-check { flex:none; width:16px; height:16px; border:1.5px solid var(--line-strong); border-radius:4px; position:relative; }
.ms-option.selected .ms-check { background:linear-gradient(135deg, #2f5bea, #1d8ff2); border-color:transparent; }
.ms-option.selected .ms-check::after { content:""; position:absolute; left:4.5px; top:1px; width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.ms-text { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ms-count { flex:none; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.ms-empty { padding:10px; font-size:13px; color:var(--muted); text-align:center; }
.filters { align-items:flex-start; }
/* Same top as the boxes (label height + gap), so a box that grows with chips moves nothing. */
.filters #clear-filters { height:40px; margin-top:24px; }

/* ---- Status chips and pills ---- */
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; flex:none; }
.chip { display:inline-flex; align-items:center; gap:7px; }
.pills { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.pill { display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:999px; border:1px solid var(--line);
  background:var(--card); font-size:13px; cursor:pointer; transition:border-color .15s, background .15s; }
.pill:hover { border-color:var(--accent); }
.pill .n { font-weight:700; font-variant-numeric:tabular-nums; }
.pill.off { opacity:.5; border-style:dashed; }
.pill.off .label { text-decoration:line-through; }
.pill:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.b-on_time { fill:var(--st-ontime); background:var(--st-ontime); }
.b-within_grace { fill:var(--st-grace); background:var(--st-grace); }
.b-late { fill:var(--st-late); background:var(--st-late); }
.b-absent { fill:var(--st-absent); background:var(--st-absent); }
.b-unknown { fill:var(--st-unknown); background:repeating-linear-gradient(135deg, var(--st-unknown) 0 3px, transparent 3px 6px); }

/* ---- Tables ---- */
.table-wrap { overflow:auto; max-height:70vh; padding:0; }
table { border-collapse:collapse; width:100%; font-size:13px; }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
th { position:sticky; top:0; z-index:1; background:var(--card); color:var(--muted); font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.03em; cursor:pointer; user-select:none; box-shadow:inset 0 -1px 0 var(--line-strong); }
tbody tr { transition:background .1s; }
tbody tr:hover td { background:var(--accent-soft); }
tbody tr:last-child td { border-bottom:0; }
tr[hidden] { display:none; }
td.num { font-variant-numeric:tabular-nums; }
table.resizable { table-layout:fixed; }
table.resizable th, table.resizable td { overflow:hidden; text-overflow:ellipsis; }
.resizer { position:absolute; top:0; right:0; width:7px; height:100%; cursor:col-resize; }
.resizer:hover, body.resizing .resizer { background:var(--accent); opacity:.4; }
body.resizing { cursor:col-resize; user-select:none; }
.th-inner { display:flex; align-items:center; gap:6px; min-width:0; padding-right:8px; }
.th-label { overflow:hidden; text-overflow:ellipsis; min-width:0; }
.info { flex:none; display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%;
  border:1px solid var(--muted); color:var(--muted); font:italic 700 10px/1 Georgia,serif; cursor:help; text-transform:none; }
.info:hover, .info:focus { color:var(--accent); border-color:var(--accent); outline:none; }
.tooltip { position:fixed; z-index:50; max-width:340px; padding:9px 11px; border-radius:8px; background:#111827; color:#f9fafb;
  font:12.5px/1.45 system-ui,sans-serif; box-shadow:0 6px 20px rgba(0,0,0,.28); pointer-events:none; white-space:normal; }
.tooltip[hidden] { display:none; }

/* ---- Reports list ---- */
.day-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(255px, 1fr)); gap:12px; }
.day-card { display:flex; flex-direction:column; gap:10px; padding:13px 14px; border-radius:var(--radius); background:var(--card);
  border:1px solid var(--line); box-shadow:var(--shadow); color:var(--fg); text-decoration:none;
  transition:transform .15s, box-shadow .15s, border-color .15s; }
.day-card:hover { transform:translateY(-2px); border-color:var(--accent); box-shadow:0 12px 28px rgba(47,91,234,.14); }
.day-card-head { display:flex; align-items:center; gap:10px; }
.day-card-head div { display:flex; flex-direction:column; flex:1; min-width:0; }
.day-card-head .muted { font-size:12px; }
.day-cal { flex:none; width:40px; border-radius:8px; overflow:hidden; text-align:center; border:1px solid var(--line); background:var(--card); }
.day-cal span { display:block; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#fff;
  background:linear-gradient(135deg, #2f5bea, #1da1f2); padding:2px 0; }
.day-cal strong { display:block; font-size:16px; line-height:1.4; }
.day-pct { font-size:18px; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
.day-pct small { display:block; margin-top:-2px; font-size:9px; font-weight:700; color:var(--muted); text-transform:uppercase;
  letter-spacing:.06em; text-align:right; }
.legend.day-parts { margin-top:-4px; gap:4px 10px; font-size:11px; flex-wrap:nowrap; }
.legend.day-parts li { gap:5px; white-space:nowrap; }
.day-parts .swatch { width:9px; height:9px; }
.day-parts strong { color:var(--fg); font-variant-numeric:tabular-nums; }
.day-stats dt .swatch { width:8px; height:8px; margin-right:5px; vertical-align:1px; }
.day-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin:0; }
.day-stats div { padding:5px 8px; border-radius:8px; background:var(--bg); }
.day-stats dt { font-size:10px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.day-stats dd { margin:0; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }
/* Today and yesterday: a tag next to the weekday; today also gets an accent frame. */
.day-card-today { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--shadow);
  background:linear-gradient(160deg, var(--accent-soft), transparent 70%), var(--card); }
.day-card-yesterday { border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
.day-tag { display:inline-block; margin-top:2px; padding:1px 7px; border-radius:999px; font-size:10px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; vertical-align:1px; }
.day-tag-today { color:#fff; background:linear-gradient(135deg, #2f5bea, #1d8ff2); }
.day-tag-yesterday { color:var(--accent); background:var(--accent-soft); }

/* ---- Meetings tab ---- */
.tiles { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; margin:18px 0 12px; }
.tile { position:relative; display:flex; flex-direction:column; gap:2px; padding:14px 16px; border-radius:12px; border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(47,91,234,.07), rgba(29,161,242,.03)); overflow:hidden; }
.tile::after { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(#2f5bea, #1da1f2); }
.tile-label { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.tile-value { font-size:30px; font-weight:700; line-height:1.15; font-variant-numeric:tabular-nums; }
.tile-sub { font-size:12px; color:var(--muted); }
.legend { list-style:none; display:flex; flex-wrap:wrap; gap:6px 16px; margin:0; padding:0; font-size:12px; color:var(--muted); }
.legend li { display:flex; align-items:center; gap:6px; }
.swatch { width:12px; height:12px; border-radius:3px; display:inline-block; }
td.breakdown { min-width:150px; }

/* ---- People report ---- */
.people-form { margin-top:0; }
.people-form .ms { max-width:none; flex:3 1 320px; }
.people-form .btn { height:40px; }
.ms-hint { flex:none; max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--muted); }
.people-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; margin:0 0 18px; }
.person { gap:6px; background-color:var(--card); }
.person-name { font-size:16px; overflow-wrap:anywhere; }
.person-stats { display:flex; gap:24px; margin:4px 0; }
.person-stats > div { display:flex; flex-direction:column; }
.person-stats small { font-size:16px; color:var(--muted); font-weight:600; }
svg.stack { display:block; width:100%; height:10px; border-radius:5px; overflow:hidden; background:var(--line); }
svg.stack rect { stroke:var(--card); stroke-width:2px; vector-effect:non-scaling-stroke; }

/* ---- Settings ---- */
.settings { max-width:820px; }
.settings .rule { display:grid; grid-template-columns:1fr 200px; gap:20px; align-items:start; padding:18px 0; border-bottom:1px solid var(--line); }
.settings .rule:first-of-type { padding-top:0; }
.settings .rule label { font-size:15px; color:var(--fg); font-weight:600; }
.settings .rule-group { font-size:16px; margin:28px 0 2px; }
.settings .rule-group:first-of-type { margin-top:0; }
.settings .rule-group + .muted { margin:0 0 6px; }
.settings .rule p { margin:4px 0 0; }
.rule-input { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rule-input input { width:110px; font-size:16px; font-weight:600; text-align:right; }
.rule-input input[type=checkbox] { width:18px; height:18px; }
.rule-input .unit { color:var(--muted); font-size:13px; }
.rule-input .error { flex-basis:100%; font-size:12px; }
.settings .actions { display:flex; gap:8px; margin-top:20px; }

/* ---- Users ---- */
.users .add-user { margin:0 0 18px; padding:16px; border-radius:12px; background:var(--bg); border:1px solid var(--line); }
.users .add-user label:first-of-type { flex:1 1 260px; }
.users .row-form { display:flex; gap:6px; align-items:center; margin:0; }
.users .row-form select, .users .row-form button { padding:5px 10px; font-size:13px; }
.users td { vertical-align:middle; }
tr.inactive td { color:var(--muted); }

/* ---- Sidebar: icons only, expands on hover or keyboard focus ---- */
body.has-sidebar { padding-left:var(--sb-collapsed); }
.sidebar { position:fixed; top:0; bottom:0; left:0; z-index:40; width:var(--sb-collapsed); display:flex; flex-direction:column; gap:6px;
  padding:14px 12px; background:var(--glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-right:1px solid var(--line); overflow:hidden; transition:width .18s ease, box-shadow .18s ease; }
.sidebar:hover, .sidebar:focus-within { width:var(--sb-expanded); background:var(--card); box-shadow:10px 0 30px rgba(16,24,40,.12); }
.sb-brand { display:flex; align-items:center; height:48px; margin-bottom:14px; text-decoration:none; color:var(--muted); }
.sb-mark img { width:44px; height:44px; display:block; }
.sb-full { display:none; flex-direction:column; gap:3px; padding-left:4px; }
.sb-full img.logo { height:26px; }
.sb-full small { font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.sidebar:hover .sb-mark, .sidebar:focus-within .sb-mark { display:none; }
.sidebar:hover .sb-full, .sidebar:focus-within .sb-full { display:flex; }
.sb-nav { display:flex; flex-direction:column; gap:4px; }
.sb-item { display:flex; align-items:center; gap:14px; height:44px; padding:0 12px; border-radius:10px; color:var(--muted);
  text-decoration:none; font:500 14px/1 system-ui,sans-serif; white-space:nowrap; }
button.sb-item { width:100%; justify-content:flex-start; background:none; border:0; box-shadow:none; cursor:pointer; }
button.sb-item:hover { filter:none; box-shadow:none; }
.sb-item svg { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.sb-item:hover { background:var(--accent-soft); color:var(--fg); }
.sb-item.active { background:linear-gradient(135deg, #2f5bea, #1d8ff2); color:#fff; font-weight:600; box-shadow:0 4px 12px rgba(47,91,234,.3); }
.sb-item:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.sb-label { opacity:0; transition:opacity .12s ease; }
.sidebar:hover .sb-label, .sidebar:focus-within .sb-label { opacity:1; transition-delay:.06s; }
.sb-account { margin-top:auto; display:flex; flex-direction:column; gap:4px; border-top:1px solid var(--line); padding-top:10px; }
.sb-user { display:flex; align-items:center; gap:12px; height:44px; padding:0 4px; }
.sb-avatar { flex:none; width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg, #2f5bea, #1da1f2); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; }
.sb-who { display:flex; flex-direction:column; gap:2px; min-width:0; font-size:13px; }
.sb-who span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:160px; }
.sb-who small { color:var(--muted); text-transform:capitalize; }
.mobile-top { display:none; }

/* ---- Public pages of the Chrome extension (no sign-in) ---- */
.doc-body main { max-width:800px; padding:24px 16px 40px; }
.pub-head { display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; margin-bottom:18px; }
.pub-brand img.logo-login { max-width:170px; }
.pub-nav { display:flex; flex-wrap:wrap; gap:4px; }
.pub-nav a { padding:7px 12px; border-radius:999px; color:var(--fg); text-decoration:none; font-weight:600; font-size:14px; }
.pub-nav a:hover { background:var(--accent-soft); }
.pub-nav a[aria-current=page] { background:var(--accent); color:var(--accent-ink); }
.doc-page { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px 32px; }
.doc-page h2 { font-size:17px; margin:24px 0 6px; }
.doc-page ul, .doc-page ol { margin:0; padding-left:22px; }
.doc-page li { margin:4px 0; }
.doc-page .lead { font-size:17px; margin:10px 0 18px; }
.ext-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.ext-actions .btn, .contact-card .btn { text-decoration:none; }
.ext-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin:26px 0 4px; }
.ext-grid section, .contact-card { background:var(--accent-soft); border-radius:var(--radius-sm); padding:14px 16px; }
.ext-grid h2 { margin:0 0 4px; font-size:15px; }
.ext-grid p { margin:0; font-size:14px; }
.doc-page ol.steps { list-style:none; padding:0; counter-reset:step; margin-top:22px; }
.steps > li { counter-increment:step; position:relative; padding:0 0 18px 46px; margin:0; }
.steps > li::before { content:counter(step); position:absolute; left:0; top:0; width:30px; height:30px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink); font-weight:700; display:flex; align-items:center; justify-content:center; }
.steps h2 { margin:3px 0 4px; font-size:16px; }
.steps p { margin:4px 0; }
.contact-card { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:18px 0 6px; }
.contact-card h2 { margin:0 0 4px; }
.contact-card p { margin:0 0 4px; }
.faq dt { font-weight:600; margin-top:14px; }
.faq dd { margin:2px 0 0; }
.pub-foot { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; margin-top:18px; }
@media (max-width:640px) {
  .doc-page { padding:20px 16px; }
  .ext-grid { grid-template-columns:1fr; }
  .contact-card { flex-direction:column; align-items:stretch; }
  .pub-head { justify-content:center; }
  .pub-nav { display:grid; grid-template-columns:repeat(4, auto); justify-content:center; gap:0; }
  .pub-nav a { padding:6px 8px; font-size:12.5px; white-space:nowrap; }
}

/* ---- Login ---- */
body.login-body {
  min-height:100vh;
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(47,91,234,.10), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgba(29,161,242,.12), transparent 60%),
    url("bg-light.svg") repeat,
    var(--bg);
}
@media (prefers-color-scheme: dark) {
  body.login-body {
    background:
      radial-gradient(900px 500px at 10% 0%, rgba(123,155,255,.12), transparent 60%),
      radial-gradient(700px 500px at 100% 100%, rgba(29,161,242,.10), transparent 60%),
      url("bg-dark.svg") repeat,
      var(--bg);
  }
}
.login-body main { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px 16px; max-width:none; }
.login-page { display:grid; grid-template-columns:1.15fr 1fr; width:100%; max-width:980px; background:var(--glass);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 20px 50px rgba(16,24,40,.10); }
.login-hero { padding:40px; background:linear-gradient(160deg, rgba(47,91,234,.08), rgba(29,161,242,.04)); border-right:1px solid var(--line); }
.login-hero h2 { font-size:24px; line-height:1.25; margin:0 0 24px; }
.demo-card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; box-shadow:0 6px 18px rgba(16,24,40,.06); }
.demo-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.demo-head div { display:flex; flex-direction:column; gap:2px; }
.demo-head .muted { font-size:12px; }
.demo-check { width:28px; height:28px; border-radius:50%; background:#1da1f2; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.demo-scale { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin:0 100px 4px 40px; }
.demo-rows { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.demo-rows li { display:grid; grid-template-columns:30px 1fr 90px; align-items:center; gap:10px; }
.avatar { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; }
.a1 { background:#2f5bea; } .a2 { background:#7a5af8; } .a3 { background:#ee6c4d; } .a4 { background:#98a2b3; }
.bar { position:relative; height:10px; border-radius:6px; background:var(--line); overflow:hidden; }
.seg { position:absolute; top:0; bottom:0; border-radius:6px; }
.s-full { left:0; width:100%; background:var(--st-ontime); }
.s-grace { left:7%; width:93%; background:var(--st-grace); }
.s-late1 { left:37%; width:33%; background:var(--st-late); }
.s-late2 { left:77%; width:23%; background:var(--st-late); }
.tag { font-size:11px; font-weight:600; padding:3px 8px; border-radius:999px; text-align:center; white-space:nowrap; color:var(--fg); background:var(--bg);
  display:inline-flex; align-items:center; justify-content:center; gap:5px; }
.tag::before { content:""; width:7px; height:7px; border-radius:50%; flex:none; }
.t-ontime::before { background:var(--st-ontime); }
.t-grace::before { background:var(--st-grace); }
.t-late::before { background:var(--st-late); }
.t-absent::before { background:var(--st-absent); }
.features { list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14px; }
.features li { display:flex; gap:10px; align-items:flex-start; }
.features .dot { width:20px; height:20px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.login-panel { padding:48px 40px; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.login-logo { display:flex; justify-content:center; }
img.logo-login { width:100%; max-width:260px; height:auto; display:block; }
.login-panel h1 { text-align:center; margin:4px 0 0; font-size:22px; }
.login-panel p { margin:0; }
.login-panel form { margin:12px 0 4px; }
.login-mini { display:none; }
/* Google sign-in button (Google branding: neutral fill, standard "G" mark). */
button.gsi-btn { width:100%; height:44px; gap:12px; background:#fff; color:#1f1f1f; border:1px solid #747775; border-radius:22px; padding:0 16px;
  font:500 15px/1 Roboto, system-ui, sans-serif; letter-spacing:.2px; box-shadow:none; transition:background .15s, box-shadow .15s; }
button.gsi-btn:hover { background:#f8f9fa; box-shadow:0 1px 3px rgba(60,64,67,.3); filter:none; }
.gsi-icon { width:20px; height:20px; flex:none; }
@media (prefers-color-scheme: dark) {
  button.gsi-btn { background:#131314; color:#e3e3e3; border-color:#8e918f; }
  button.gsi-btn:hover { background:#1f1f20; }
}

/* ---- Tablets ---- */
@media (max-width: 1024px) {
  .tiles { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  /* Login on phones: only the sign-in, on a more transparent card. */
  .login-page { grid-template-columns:1fr; max-width:420px; background:var(--glass-sm); box-shadow:0 10px 30px rgba(16,24,40,.08); }
  .login-hero { display:none; }
  .login-panel { padding:32px 20px; }
  .login-panel .muted { color:var(--fg); opacity:.75; }
  .login-mini { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:18px; }
  .settings .rule { grid-template-columns:1fr; gap:10px; }
}

/* ---- Phones ---- */
@media (max-width: 720px) {
  main { padding:16px 14px 24px; }
  h1 { font-size:21px; }
  .page-head { margin-bottom:14px; align-items:flex-start; }
  .head-actions { width:100%; }
  .head-actions .btn { flex:1; }
  .card { padding:14px; border-radius:12px; }
  .hide-sm { display:none; }
  .tabs { display:grid; grid-template-columns:repeat(4, 1fr); width:100%; }
  .tab { padding:7px 2px; font-size:12px; text-align:center; }
  .inline { flex-direction:column; align-items:stretch; }
  .inline label, .inline select, .inline > input, .inline > button { width:100%; }
  .ms { max-width:none; flex:none; }
  .filters #clear-filters { margin-top:0; }
  .searchbar { flex-wrap:wrap; }
  .searchbar input { max-width:none; flex:1 1 100%; }
  .table-wrap { max-height:65vh; }
  .tile-value { font-size:24px; }
  .day-grid { grid-template-columns:1fr; }

  /* Users: each row becomes a card. */
  table.stack, table.stack tbody, table.stack tr, table.stack td { display:block; width:100%; }
  table.stack thead { display:none; }
  table.stack tr { border:1px solid var(--line); border-radius:10px; padding:8px 12px; margin-bottom:10px; }
  table.stack td { display:flex; justify-content:space-between; align-items:center; gap:12px; border:0; padding:6px 0; white-space:normal; }
  table.stack td::before { content:attr(data-label); color:var(--muted); font-size:12px; font-weight:600; flex:none; }
  table.stack td:empty, table.stack td.none { display:none; }
  tbody tr:hover td { background:none; }
  .users .row-form { justify-content:flex-end; }

  /* No hover on phones: the sidebar becomes a bottom bar with labels. */
  body.has-sidebar { padding-left:0; padding-bottom:72px; }
  .sidebar, .sidebar:hover, .sidebar:focus-within { top:auto; right:0; width:auto; height:64px; flex-direction:row; align-items:center;
    padding:6px 8px; background:var(--glass); border-right:0; border-top:1px solid var(--line); box-shadow:0 -4px 16px rgba(16,24,40,.06); }
  .sb-brand, .sb-user { display:none; }
  .sb-nav { flex-direction:row; flex:1; justify-content:space-around; }
  .sb-account { margin:0; border:0; padding:0; }
  .sb-item { flex-direction:column; justify-content:center; gap:4px; height:52px; padding:0 14px; font-size:11px; }
  button.sb-item { justify-content:center; }
  .sb-label, .sidebar:hover .sb-label { opacity:1; }
  .mobile-top { display:flex; justify-content:center; padding:12px; background:var(--glass); -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; }
  .mobile-top img.logo { height:24px; }
}

label.type-toggle { display:flex; flex-direction:row; align-items:center; justify-content:flex-start;
  gap:8px; margin-top:12px; font-size:14px; font-weight:500; text-align:left; cursor:pointer; color:var(--fg); }
label.type-toggle input { flex:none; width:16px; height:16px; margin:0; accent-color:var(--accent); }
label.type-toggle .muted { font-weight:400; }

/* ---- Report runs: Runs page, banner on the list of days and the Run report dialog ---- */
.run-hint { font-size:12px; margin:8px 0 0; }
.run-banner { padding:12px 20px; }
.run-banner p { margin:0; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.run-details summary { cursor:pointer; color:var(--accent); font-size:13px; }
.run-details ul { margin:6px 0 0; padding-left:18px; font-size:12px; white-space:normal; min-width:260px; max-width:420px; }
.run-dialog { width:min(540px, calc(100vw - 32px)); padding:0; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card); color:var(--fg); box-shadow:var(--shadow); }
.run-dialog::backdrop { background:rgba(10,14,22,.55); }
.run-dialog form { display:flex; flex-direction:column; gap:12px; padding:20px; }
.run-dialog p { margin:0; }
.run-dialog .run-hint { margin:-6px 0 0; }
.run-dialog label.type-toggle { margin-top:0; }
.dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dialog-head h2 { margin:0; font-size:18px; }
.dialog-close { font-size:24px; line-height:1; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:4px; }
.run-day-state { display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-radius:var(--radius-sm);
  background:var(--bg); border:1px solid var(--line); font-size:13px; }
.run-day-state:empty { display:none; }
.run-state { font-weight:600; }
.run-state-exists { color:var(--accent); }
.run-state-new { color:var(--ok); }
button:disabled { opacity:.55; cursor:not-allowed; filter:none; }
.range-inputs { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; }
.run-dialog [hidden] { display:none !important; }
.run-dialog .range-toggle { align-self:flex-start; color:var(--accent); font-size:13px; font-weight:600; }
.range-extra { display:flex; flex-direction:column; gap:10px; }
.week-picks { display:flex; flex-direction:column; gap:6px; }
.week-picks > div { display:flex; flex-wrap:wrap; gap:6px; }
.run-dialog button.week-chip { padding:5px 12px; font-size:13px; font-weight:500; border-radius:999px; color:var(--fg);
  background:var(--card); border:1px solid var(--line-strong); box-shadow:none; }
.run-dialog button.week-chip:hover { background:var(--bg); filter:none; }
.run-dialog button.week-chip.active { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
.run-day-list { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:3px; }
.run-day-list li strong { font-weight:600; margin-right:8px; }
.run-day-list li span { font-size:12px; }
.table-scroll { overflow-x:auto; }
table.runs td, table.runs th { white-space:nowrap; }
table.runs td.num { text-align:right; }
.run-status { display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:600;
  border:1px solid var(--line-strong); }
.run-succeeded { color:var(--ok); border-color:currentColor; }
.run-failed { color:var(--danger); border-color:currentColor; }
.run-running, .run-queued { color:var(--accent); border-color:currentColor; }
.run-error { white-space:normal; max-width:420px; font-size:12px; margin-top:4px; }

/* Sort direction: outside the label, so a truncated title never hides it. */
th.sorted-asc .th-inner::after, th.sorted-desc .th-inner::after { flex:none; color:var(--accent); font-size:10px; }
th.sorted-asc .th-inner::after { content:"\25B2"; }
th.sorted-desc .th-inner::after { content:"\25BC"; }

.delivery-head { margin-top: 28px; }
.rule-input.wide { flex-direction: column; align-items: stretch; width: min(440px, 100%); flex: none; }
.rule-input.wide input[type=password] { width: 100%; }
label.inline-check { display:flex; flex-direction:row; align-items:center; gap:6px; font-weight:400; margin-top:6px; }

/* ---- Day page: date picker, compact tiles and the one-line toolbar ---- */
.day-title { display:flex; align-items:center; gap:4px; margin-left:-6px; }
.day-title h1 { display:flex; }
button.day-pick { font:inherit; font-weight:700; letter-spacing:inherit; color:var(--accent); background:none; box-shadow:none;
  padding:2px 8px; border-radius:10px; gap:8px; }
button.day-pick:hover { background:var(--accent-soft); box-shadow:none; filter:none; }
button.day-pick svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; flex:none; }
.day-step { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; flex:none; border-radius:8px;
  font-size:22px; line-height:1; color:var(--accent); text-decoration:none; }
a.day-step:hover { background:var(--accent-soft); }
span.day-step { color:var(--muted); opacity:.35; }

.tabs-row { display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; }
.pills-compact { margin-top:0; gap:6px; }
.pills-compact .pill { padding:3px 10px; gap:6px; font-size:12px; }
.pills-compact .pill .dot { width:8px; height:8px; }
.tiles-compact { gap:10px; margin:14px 0 4px; }
.tiles-compact .tile { padding:9px 14px; gap:0; }
.tiles-compact .tile-value { font-size:22px; }
.tile-line { display:flex; align-items:baseline; gap:8px; min-width:0; }
.tile-line .tile-sub { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* One line on wide screens: the filter summary shrinks with an ellipsis instead of wrapping. */
.toolbar { display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:nowrap; }
.toolbar > * { flex-shrink:0; }
.toolbar input[type=search] { flex:1 1 240px; min-width:160px; max-width:420px; }
.toolbar svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; }
.filters-summary { flex:0 1 auto; min-width:0; max-width:460px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:13px; cursor:pointer; flex-shrink:1 !important; }
.toolbar #table-count { margin-left:auto; white-space:nowrap; }
.badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:var(--accent); color:var(--accent-ink); font-size:11px; font-weight:700; }
.badge[hidden] { display:none; }

/* Dialogs of the day page (filters and date picker). */
.app-dialog { width:min(520px, calc(100vw - 32px)); padding:0; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card); color:var(--fg); box-shadow:var(--shadow); }
.app-dialog::backdrop { background:rgba(10,14,22,.55); }
.app-dialog .dialog-body { display:flex; flex-direction:column; gap:14px; padding:20px; }
.app-dialog .dialog-actions { margin-top:0; }
/* The filter lists open over the dialog edge instead of scrolling inside it. */
.filters-dialog { overflow:visible; }
.filters-dialog .ms { max-width:none; flex:none; }
.filters-dialog label.type-toggle { margin-top:0; }
.dialog-section { display:flex; flex-direction:column; gap:12px; padding-top:14px; border-top:1px solid var(--line); }
.dialog-head + .dialog-section { padding-top:0; border-top:0; }
.dialog-section-title { margin:0; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }

.days-dialog { width:min(380px, calc(100vw - 32px)); }
.cal-title { flex:1; text-align:center; }
button.cal-nav { width:34px; height:34px; padding:0; font-size:20px; line-height:1; }
button.cal-nav:disabled { opacity:.35; cursor:default; }
.cal { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; }
.cal-wd { font-size:11px; font-weight:700; color:var(--muted); text-align:center; text-transform:uppercase; letter-spacing:.04em; padding-bottom:2px; }
.cal-day { display:flex; align-items:center; justify-content:center; aspect-ratio:1; border-radius:8px; font-size:14px;
  color:var(--muted); opacity:.5; font-variant-numeric:tabular-nums; }
.cal-blank { visibility:hidden; }
a.cal-day { opacity:1; color:var(--accent); background:var(--accent-soft); font-weight:700; text-decoration:none; }
a.cal-day:hover, a.cal-day:focus-visible { background:var(--accent); color:var(--accent-ink); outline:none; }
.cal-day.current { opacity:1; color:#fff; background:linear-gradient(135deg, #2f5bea, #1d8ff2); }
.cal-day.today { box-shadow:inset 0 0 0 1.5px var(--accent); }
.cal-hint { display:flex; align-items:center; gap:8px; margin:0; font-size:12px; }
.cal-swatch { background:var(--accent-soft); border:1px solid var(--accent); }

@media (max-width: 720px) {
  .day-title h1 { font-size:21px; }
  .toolbar { flex-wrap:wrap; }
  .toolbar input[type=search] { max-width:none; flex:1 1 100%; }
  .filters-summary { display:none; }
  .toolbar #table-count { margin-left:0; }
  .tile-line { flex-direction:column; align-items:flex-start; gap:0; }
  .tile-line .tile-sub { white-space:normal; }
}

/* ---- Pager (home page) ---- */
.pager { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:20px; font-size:13px; }
.pager-links { display:flex; align-items:center; gap:4px; }
.pager-link { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 8px;
  border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--card); color:var(--fg);
  font-weight:600; text-decoration:none; font-variant-numeric:tabular-nums; }
a.pager-link:hover { border-color:var(--accent); color:var(--accent); }
.pager-link.current { color:#fff; border-color:transparent; background:linear-gradient(135deg, #2f5bea, #1d8ff2); }
.pager-link.disabled { opacity:.4; }
.pager-gap { padding:0 4px; color:var(--muted); }

/* ---- Agents pages (roster, agent, attendance grid, recruiting, setup) ---- */
input::placeholder { color:var(--muted); opacity:.75; font-weight:400; }
:root {
  /* Agent status. Justified is its own hue, apart from the report's ordinal scale. */
  --ag-onboarded:var(--st-ontime); --ag-process:var(--st-late); --ag-candidate:var(--st-grace); --ag-off:var(--st-unknown);
  --st-justified:#7a5af5; --warn-bg:rgba(224,142,0,.12); --ok-bg:rgba(18,128,92,.10); --err-bg:rgba(217,45,32,.10);
}
@media (prefers-color-scheme: dark) {
  :root { --st-justified:#9b85ff; --warn-bg:rgba(200,131,11,.16); --ok-bg:rgba(71,205,137,.12); --err-bg:rgba(249,112,102,.12); }
}
.st-onboarded { background:var(--ag-onboarded); }
.st-in-process { background:var(--ag-process); }
.st-candidate { background:var(--ag-candidate); }
.st-off-boarded { background:var(--ag-off); }

.flashes { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.flash { margin:0; padding:10px 14px; border-radius:var(--radius-sm); font-weight:500; }
.flash-ok { background:var(--ok-bg); color:var(--ok); }
.flash-error { background:var(--err-bg); color:var(--danger); }
.warn { background:var(--warn-bg); padding:8px 12px; border-radius:var(--radius-sm); margin:12px 0 0; }

.btn-sm, button.btn-sm { padding:5px 10px; font-size:12px; }
.card h2 { font-size:17px; margin:0 0 12px; }
.card h3 { font-size:14px; margin:18px 0 8px; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.card-head h2 { margin:0; }
section.card.inactive { opacity:.7; }
.two-col { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:0 18px; align-items:start; }
.chips-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.tag-soft { display:inline-block; padding:2px 10px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:12px; font-weight:600; }
.roster-filters { margin-top:0; }
.roster-filters .ms { flex:1 1 200px; max-width:320px; }
td.wrap { white-space:normal; min-width:180px; }
.table-wrap.plain { max-height:none; box-shadow:none; border:0; margin:0; }

/* Facts list (profile). */
.facts { display:grid; gap:10px; margin:0 0 14px; }
.facts div { display:grid; grid-template-columns:140px 1fr; gap:12px; }
.facts dt { color:var(--muted); font-size:12px; font-weight:600; padding-top:2px; }
.facts dd { margin:0; overflow-wrap:anywhere; }

/* Forms in cards and dialogs. */
details.edit > summary { cursor:pointer; color:var(--accent); font-weight:600; margin-top:4px; }
details.edit[open] > summary { margin-bottom:12px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-grid .dialog-head, .form-grid .span-2, .form-grid .form-actions, .form-grid .dialog-actions,
.form-grid input[type=hidden] + .dialog-head { grid-column:1 / -1; }
.form-grid .form-actions { display:flex; justify-content:flex-end; }
.inline.compact { margin-top:12px; gap:8px; }
.inline label.grow { flex:1 1 320px; }
.inline label.grow select { width:100%; }
.line-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); margin:0; }
.line-item.inactive span { color:var(--muted); text-decoration:line-through; }
.row-form { display:inline-flex; gap:6px; margin:0; }
.row-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.row-actions form { display:inline-flex; gap:6px; align-items:center; margin:0; }
.link-form input { width:220px; padding:5px 10px; font-size:13px; }
td select, td input:not([type=checkbox]) { padding:5px 8px; font-size:13px; }

/* Recruiting sessions. */
details.session > summary { cursor:pointer; display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; list-style:none; }
details.session > summary::before { content:"▸"; color:var(--muted); }
details.session[open] > summary::before { content:"▾"; }
details.session[open] > summary { margin-bottom:12px; }
.add-member { border-top:1px solid var(--line); padding-top:14px; }
.add-member .or { align-self:center; }

/* Attendance grid: frozen agent column, one narrow column per day. */
.grid-wrap { max-height:75vh; }
table.grid { width:auto; font-size:12px; }
table.grid th, table.grid td { padding:4px 6px; }
table.grid th.day { text-align:center; font-weight:600; line-height:1.25; min-width:34px; }
table.grid th.weekend { color:var(--accent-2); }
table.grid .sticky-col { position:sticky; left:0; z-index:2; background:var(--card); min-width:200px; max-width:260px;
  overflow:hidden; text-overflow:ellipsis; box-shadow:1px 0 0 var(--line); }
table.grid thead .sticky-col { z-index:3; }
table.grid tbody tr:hover .sticky-col { background:var(--bg); }
.gc { display:inline-flex; align-items:center; justify-content:center; position:relative; width:26px; height:24px; padding:0;
  border-radius:6px; border:1px dashed var(--line-strong); background:transparent; color:#fff; font-size:12px; font-weight:700;
  box-shadow:none; cursor:default; }
button.gc { cursor:pointer; }
button.gc:hover { outline:2px solid var(--accent); outline-offset:1px; filter:none; }
.gc[class*="gc-"] { border:0; }
.gc-present { background:var(--st-ontime); }
.gc-late { background:var(--st-late); }
.gc-absent { background:var(--st-absent); }
.gc-justified { background:var(--st-justified); }
.gc-unknown { background:repeating-linear-gradient(135deg, var(--st-unknown) 0 3px, transparent 3px 6px); color:var(--fg); }
/* Typed marks carry a corner, so they can be told apart from the report. */
.gc.typed::after { content:""; position:absolute; top:0; right:0; border-style:solid; border-width:0 8px 8px 0;
  border-color:transparent var(--card) transparent transparent; border-top-right-radius:6px; }
.grid-legend { margin-top:14px; }
.grid-legend .gc { width:20px; height:18px; font-size:11px; }
.mark-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mark-option { flex-direction:row; align-items:center; gap:8px; font-size:14px; color:var(--fg); font-weight:500;
  padding:8px 10px; border:1px solid var(--line); border-radius:var(--radius-sm); cursor:pointer; }
.mark-option:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); }
.mark-option input { margin:0; }

@media (max-width: 720px) {
  .form-grid { grid-template-columns:1fr; }
  .facts div { grid-template-columns:1fr; gap:2px; }
  .two-col { grid-template-columns:1fr; }
  table.grid .sticky-col { min-width:130px; max-width:150px; }
  .mark-options { grid-template-columns:1fr; }
  .link-form input { width:100%; }
}

/* Key meetings: link kinds, day and range shortcuts, totals row of the grid. */
.kind-meet_code, .kind-meeting { background:var(--warn-bg); color:var(--fg); }
.day-chips, .range-presets { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.range-presets { margin:12px 0 0; }
.pill-link { padding:4px 10px; border-radius:999px; border:1px solid var(--line); font-size:12px; text-decoration:none;
  color:var(--fg); background:var(--card); white-space:nowrap; }
.pill-link:hover { border-color:var(--accent); }
.pill-link.current { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:600; }
.notice-bar { background:var(--warn-bg); padding:10px 14px; border-radius:var(--radius-sm); margin:0 0 16px; }
table.grid tfoot th { position:sticky; bottom:0; z-index:1; background:var(--card); border-top:2px solid var(--line-strong); }
table.grid tfoot .sticky-col { z-index:3; }
table.grid .day-total { text-align:center; font-weight:700; color:var(--fg); }
table.grid .day-total .muted { font-weight:400; }
.outside-form { flex-wrap:nowrap; }
.outside-form select { width:auto; max-width:200px; }
@media (max-width: 720px) { .outside-form { flex-wrap:wrap; } }

/* ---- Sidebar groups: a dropdown of related pages (People: attendance by person, agents, users) ---- */
.sb-group > summary { list-style:none; cursor:pointer; }
.sb-group > summary::-webkit-details-marker { display:none; }
.sb-caret { margin-left:auto; width:16px !important; height:16px !important; opacity:0; transition:transform .15s ease, opacity .12s ease; }
.sidebar:hover .sb-caret, .sidebar:focus-within .sb-caret { opacity:.8; }
.sb-group[open] .sb-caret { transform:rotate(180deg); }
/* The group shows that one of its pages is open, even with the sidebar collapsed. */
.sb-group-head.has-active { background:var(--accent-soft); color:var(--accent); font-weight:600; }
.sb-children { display:flex; flex-direction:column; gap:2px; margin:2px 0 4px; }
.sb-sub { height:38px; font-size:14px; }
@media (min-width: 721px) {
  .sb-sub { margin-left:14px; padding-left:12px; border-left:2px solid var(--line); border-radius:0 10px 10px 0; }
  .sb-sub svg { width:18px; height:18px; }
  /* Collapsed sidebar: only the group icon; its pages appear when the sidebar opens. */
  .sidebar:not(:hover):not(:focus-within) .sb-children { display:none; }
}
@media (max-width: 720px) {
  .sb-group { position:relative; display:flex; }
  .sb-caret { display:none; }
  .sb-children { position:absolute; bottom:60px; left:50%; transform:translateX(-50%); min-width:210px; padding:6px;
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); z-index:50; }
  .sb-children .sb-sub { flex-direction:row; justify-content:flex-start; gap:12px; height:42px; font-size:14px; }
}

/* ---- Columns: hidden columns, header drag and drop, and the Columns dialog (table.js) ---- */
th.col-hidden, td.col-hidden { display:none; }
#data-table th[draggable="true"] { cursor:grab; }
#data-table th.dragging { opacity:.45; }
#data-table th.drop-before { box-shadow:inset 3px 0 0 var(--accent); }
#data-table th.drop-after { box-shadow:inset -3px 0 0 var(--accent); }
.columns-btn .n { color:var(--muted); font-weight:400; }
.columns-dialog .dialog-body { max-height:min(80vh, 720px); }
.columns-list { list-style:none; margin:0; padding:0; overflow-y:auto; border:1px solid var(--line); border-radius:var(--radius-sm); }
.columns-list li { display:flex; align-items:center; gap:8px; padding:7px 10px; border-bottom:1px solid var(--line);
  background:var(--card); cursor:grab; }
.columns-list li:last-child { border-bottom:0; }
.columns-list li.dragging { opacity:.45; }
.columns-list li.drop-before { box-shadow:inset 0 3px 0 var(--accent); }
.columns-list li.drop-after { box-shadow:inset 0 -3px 0 var(--accent); }
.columns-list .grip { color:var(--muted); font-size:16px; line-height:1; }
.columns-list label { flex:1; display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; }
.columns-list .move { padding:2px 6px; font-size:14px; }
.columns-list .move:disabled { opacity:.3; cursor:default; }