/* Ello HR */
:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --ink: #0f1f2e;
  --ink-2: #334556;
  --muted: #647585;
  --border: #e2e7ec;
  --border-strong: #cfd7df;
  --navy: #0b2a3c;
  --navy-2: #123a52;
  --teal: #0c7a83;
  --teal-2: #0a666e;
  --teal-soft: #e4f3f4;
  --sand: #efe6d6;
  --gold: #c69a4b;
  --focus: #2b8cff;

  --pending: #a8620a; --pending-bg: #fff4de; --pending-bd: #f4d9a4;
  --approved: #0c6fa8; --approved-bg: #e5f1fa; --approved-bd: #b9d9ef;
  --suspended: #b3261e; --suspended-bg: #fdeceb; --suspended-bd: #f3c1bd;
  --paid: #17804a; --paid-bg: #e5f5ec; --paid-bd: #b5e0c7;
  --pop: #7446b0; --pop-bg: #f1eafb; --pop-bd: #d8c6f1;
  --draft: #56626e; --draft-bg: #eef1f4; --draft-bd: #d6dce2;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(15, 31, 46, .06);
  --shadow: 0 1px 3px rgba(15, 31, 46, .06), 0 6px 20px rgba(15, 31, 46, .06);
  --shadow-lg: 0 20px 60px rgba(8, 24, 38, .25);
  --sidebar: 244px;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); color: var(--ink); background: var(--bg); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
h1 { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 17px; font-weight: 650; }
h3 { font-size: 14px; font-weight: 650; }
.tnum, .amount, td.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- App shell ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }
.sidebar { background: var(--navy); color: #d5e2ea; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { padding: 20px 20px 18px; border-bottom: 1px solid rgba(255,255,255,.08); display: flex; gap: 12px; align-items: center; }
.brand-mark { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--teal), #13a0a8); display: grid; place-items: center; flex: none; }
.brand-mark svg { width: 22px; height: 22px; }
.brand-mark img { width: 100%; height: 100%; display: block; border-radius: inherit; }
.brand-name { font-weight: 750; letter-spacing: .08em; font-size: 12.5px; color: #fff; }
.brand-sub { font-size: 11px; color: #8fb0c2; letter-spacing: .06em; text-transform: uppercase; }
.nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-section { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #6f93a8; padding: 14px 12px 6px; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 8px; color: #cfdde6; font-weight: 500; font-size: 13.5px; }
.nav a svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.nav a:hover { background: rgba(255,255,255,.06); text-decoration: none; color: #fff; }
.nav a.active { background: rgba(19, 160, 168, .18); color: #fff; box-shadow: inset 3px 0 0 #2fc3c9; }
.nav .badge-count { margin-left: auto; background: #e24c3f; color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.sidebar-foot { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; color: #8fb0c2; }
.sidebar-foot .who { color: #fff; font-weight: 600; font-size: 13px; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 60px; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 14px; padding: 0 28px; position: sticky; top: 0; z-index: 20; }
.topbar .crumb { font-size: 12px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.topbar .spacer { flex: 1; }
.bell.menu-btn { display: none; }
.bell { position: relative; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--ink-2); }
.bell:hover { background: var(--surface-2); }
.bell svg { width: 20px; height: 20px; }
.bell .dot { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #e24c3f; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--surface); }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 4px; border-radius: 10px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--sand); color: var(--navy); font-weight: 700; display: grid; place-items: center; font-size: 13px; flex: none; }
.user-chip .nm { font-weight: 600; font-size: 13px; }
.user-chip .rl { font-size: 11.5px; color: var(--muted); }
.content { padding: 26px 28px 60px; max-width: 1440px; width: 100%; }

/* ---------- Page header ---------- */
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head .grow { flex: 1; min-width: 240px; }
.eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-bottom: 6px; }
.subtle { color: var(--muted); }
.page-head p { margin: 6px 0 0; color: var(--muted); }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-pad { padding: 18px 20px; }
.card-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.card-head h2, .card-head h3 { flex: 1; }
.card + .card, .stack > * + * { margin-top: 16px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Hero (payments this period) ---------- */
.hero { background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 55%, #0f5663 100%); color: #fff; border-radius: 16px; padding: 24px 28px; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.hero::after { content: ""; position: absolute; right: -60px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(47,195,201,.25), transparent 65%); pointer-events: none; }
.hero-top { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; position: relative; z-index: 1; }
.hero-label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #9fd3d8; font-weight: 700; }
.hero-count { font-size: 15px; color: #d7e7ee; margin-top: 8px; }
.hero-amount { font-size: 40px; font-weight: 750; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.hero-amount .alt { display: block; font-size: 22px; font-weight: 650; color: #cfe6ea; margin-top: 2px; }
.hero-period { margin-left: auto; text-align: right; }
.hero-period .lbl { font-size: 11.5px; color: #9fc3cf; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.hero-period .rng { font-size: 16px; font-weight: 650; margin-top: 4px; }
.hero-period .nav-arrows { display: inline-flex; gap: 6px; margin-top: 10px; }
.hero-period .nav-arrows button { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; width: 34px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 16px; }
.hero-period .nav-arrows button:hover { background: rgba(255,255,255,.2); }
.hero-bars { display: flex; height: 8px; border-radius: 99px; overflow: hidden; margin-top: 18px; background: rgba(255,255,255,.12); position: relative; z-index: 1; }
.hero-bars span { display: block; height: 100%; }

/* ---------- Status cards ---------- */
.status-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.scard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px 15px; text-align: left; cursor: pointer; font: inherit; color: inherit; position: relative; transition: transform .08s, box-shadow .15s, border-color .15s; box-shadow: var(--shadow-sm); }
.scard::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c); }
.scard:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.scard.on { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.scard .t { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--c); display: flex; align-items: center; gap: 6px; }
.scard .n { font-size: 26px; font-weight: 750; margin-top: 6px; font-variant-numeric: tabular-nums; }
.scard .a { font-size: 13.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.scard .a + .a { margin-top: 1px; }
.scard .hint { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.c-pending { --c: var(--pending); } .c-approved { --c: var(--approved); } .c-suspended { --c: var(--suspended); }
.c-paid { --c: var(--paid); } .c-pop { --c: var(--pop); } .c-draft { --c: var(--draft); } .c-all { --c: var(--teal); }

/* ---------- Period selector ---------- */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 7px 12px; border-radius: 7px; font: inherit; font-size: 13px; font-weight: 550; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.seg button:hover { background: var(--surface-2); }
.seg button.on { background: var(--navy); color: #fff; }
.seg button .cnt { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 99px; background: var(--draft-bg); color: var(--ink-2); }
.seg button.on .cnt { background: rgba(255,255,255,.2); color: #fff; }
.custom-range { display: inline-flex; gap: 6px; align-items: center; }

/* ---------- Banner ---------- */
.banner { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 10px; border: 1px solid; margin-top: 14px; font-size: 13.5px; }
.banner svg { width: 20px; height: 20px; flex: none; }
.banner.warn { background: var(--pending-bg); border-color: var(--pending-bd); color: #7a4706; }
.banner.danger { background: var(--suspended-bg); border-color: var(--suspended-bd); color: #8b1c16; }
.banner.info { background: var(--approved-bg); border-color: var(--approved-bd); color: #0a4e78; }
.banner.ok { background: var(--paid-bg); border-color: var(--paid-bd); color: #0f5b33; }
.banner .grow { flex: 1; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: separate; border-spacing: 0; }
table.data th { text-align: left; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 10px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; }
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover { color: var(--ink); }
table.data th .arr { opacity: .35; margin-left: 4px; }
table.data th.sorted .arr { opacity: 1; color: var(--teal); }
table.data { font-size: 13.5px; }
table.data td { padding: 11px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data tbody tr { transition: background .1s; }
table.data tbody tr.click { cursor: pointer; }
table.data tbody tr.click:hover { background: #f5fafb; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; }
table.data tfoot td { padding: 12px 14px; font-weight: 700; background: var(--surface-2); border-top: 2px solid var(--border-strong); }
.cell-main { font-weight: 600; color: var(--ink); }
.cell-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.due-over { color: var(--suspended); font-weight: 650; }
.due-soon { color: var(--pending); font-weight: 650; }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); }
.empty svg { width: 42px; height: 42px; color: #b6c3ce; margin-bottom: 8px; }
.empty .big { font-size: 15px; font-weight: 600; color: var(--ink-2); }

/* ---------- Status pills ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; padding: 3px 10px 3px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.SUBMITTED { color: var(--pending); background: var(--pending-bg); border-color: var(--pending-bd); }
.pill.APPROVED { color: var(--approved); background: var(--approved-bg); border-color: var(--approved-bd); }
.pill.SUSPENDED { color: var(--suspended); background: var(--suspended-bg); border-color: var(--suspended-bd); }
.pill.PAID { color: var(--paid); background: var(--paid-bg); border-color: var(--paid-bd); }
.pill.POP { color: var(--pop); background: var(--pop-bg); border-color: var(--pop-bd); }
.pill.DRAFT, .pill.CANCELLED { color: var(--draft); background: var(--draft-bg); border-color: var(--draft-bd); }
.pill.lg { font-size: 14px; padding: 6px 14px 6px 12px; }
.tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--draft-bg); color: var(--ink-2); letter-spacing: .03em; }
.tag.red { background: var(--suspended-bg); color: var(--suspended); }
.tag.teal { background: var(--teal-soft); color: var(--teal-2); }
.tag.gold { background: #fbf1dc; color: #8a6420; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 600; font-size: 13.5px; padding: 9px 16px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap; text-decoration: none !important; transition: background .12s, border-color .12s, box-shadow .12s; }
.btn:hover { background: var(--surface-2); border-color: #b8c3cd; }
.btn svg { width: 16px; height: 16px; }
.btn.primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn.primary:hover { background: var(--teal-2); }
.btn.dark { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.dark:hover { background: var(--navy-2); }
.btn.danger { color: var(--suspended); border-color: var(--suspended-bd); }
.btn.danger:hover { background: var(--suspended-bg); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.sm { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }
.btn.lg { padding: 12px 22px; font-size: 15px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--teal); cursor: pointer; font-weight: 600; }
.link-btn:hover { text-decoration: underline; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .lbl { font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.field .req { color: var(--suspended); }
.field .help { font-size: 12px; color: var(--muted); }
.input, select.input, textarea.input { font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 9px; background: #fff; color: var(--ink); width: 100%; transition: border-color .12s, box-shadow .12s; }
.input:hover { border-color: #b3bfca; }
.input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(12,122,131,.15); }
.input.sm { padding: 6px 10px; font-size: 13px; }
textarea.input { min-height: 90px; resize: vertical; }
.input-group { display: flex; }
.input-group .input:first-child { border-radius: 9px 0 0 9px; }
.input-group .input:last-child { border-radius: 0 9px 9px 0; border-left: 0; }
.input-group select.input { width: auto; flex: none; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.form-grid .full { grid-column: 1 / -1; }
.form-section { padding: 20px; }
.form-section + .form-section { border-top: 1px solid var(--border); }
.form-section h3 { margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.form-section h3 .num { width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 12px; display: grid; place-items: center; }
.err-text { color: var(--suspended); font-size: 12.5px; }
.checkbox { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.checkbox input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--teal); }
.radio-card { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 10px; cursor: pointer; }
.radio-card:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); }
.radio-card input { accent-color: var(--teal); width: 17px; height: 17px; }
.radio-list { display: grid; gap: 8px; }

.dropzone { border: 2px dashed var(--border-strong); border-radius: 12px; padding: 22px; text-align: center; color: var(--muted); cursor: pointer; background: var(--surface-2); transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone.over { border-color: var(--teal); background: var(--teal-soft); }
.dropzone svg { width: 30px; height: 30px; color: var(--teal); }
.dropzone .t { font-weight: 650; color: var(--ink-2); margin-top: 4px; }
.file-list { margin-top: 10px; display: grid; gap: 6px; }
.file-item { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--border); border-radius: 9px; background: #fff; font-size: 13px; }
.file-item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.file-item svg { width: 18px; height: 18px; color: var(--teal); flex: none; }

/* ---------- Detail page ---------- */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.action-panel { position: sticky; top: 80px; }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 10px 16px; font-size: 13.5px; }
.kv dt { color: var(--muted); font-weight: 550; }
.kv dd { margin: 0; font-weight: 550; word-break: break-word; }
.big-amount { font-size: 32px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bank-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.bank-num { font-family: var(--mono); font-size: 16px; letter-spacing: .06em; font-weight: 600; }
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline li { position: relative; padding: 0 0 16px 28px; }
.timeline li::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: -2px; width: 2px; background: var(--border); }
.timeline li:last-child::before { display: none; }
.timeline .dot { position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 3px solid var(--c, var(--teal)); }
.timeline .what { font-weight: 600; }
.timeline .when { font-size: 12px; color: var(--muted); }
.timeline .why { margin-top: 4px; font-size: 13px; background: var(--surface-2); border-radius: 8px; padding: 8px 10px; border: 1px solid var(--border); }
.doc-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.doc-row:last-child { border-bottom: 0; }
.doc-icon { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal); flex: none; }
.doc-icon.pop { background: var(--pop-bg); color: var(--pop); }
.doc-icon svg { width: 18px; height: 18px; }
.doc-row .nm { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Slide to confirm ---------- */
.slider { --c: var(--teal); position: relative; height: 58px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, #fff); border: 1px solid color-mix(in srgb, var(--c) 35%, #fff); user-select: none; touch-action: none; overflow: hidden; }
.slider.approve { --c: #0f8a53; }
.slider.suspend { --c: var(--suspended); }
.slider.paid { --c: var(--approved); }
.slider .fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--c) 28%, #fff); border-radius: 999px; width: 58px; }
.slider .label { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 15px; color: var(--c); letter-spacing: .01em; padding-left: 50px; pointer-events: none; }
.slider .label span { background: linear-gradient(90deg, var(--c) 0%, var(--c) 40%, color-mix(in srgb, var(--c) 30%, #fff) 50%, var(--c) 60%, var(--c) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 2.6s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.slider .knob { position: absolute; top: 4px; left: 4px; width: 50px; height: 50px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; cursor: grab; box-shadow: 0 3px 10px color-mix(in srgb, var(--c) 45%, transparent); z-index: 2; }
.slider .knob:active { cursor: grabbing; }
.slider .knob svg { width: 22px; height: 22px; }
.slider.done .label span { animation: none; color: var(--c); background: none; }
.slider.anim .knob, .slider.anim .fill { transition: left .25s ease, width .25s ease; }
.slider.disabled { opacity: .5; pointer-events: none; }
.action-stack { display: grid; gap: 12px; }
.action-note { font-size: 12.5px; color: var(--muted); text-align: center; }

/* ---------- Modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(8, 24, 38, .55); backdrop-filter: blur(2px); z-index: 100; display: grid; place-items: center; padding: 20px; animation: fade .15s ease; }
.modal { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow: auto; animation: pop .18s ease; }
.modal.wide { max-width: 980px; }
.modal-head { padding: 20px 24px 6px; display: flex; gap: 12px; align-items: flex-start; }
.modal-head h2 { flex: 1; font-size: 19px; }
.modal-body { padding: 12px 24px 20px; }
.modal-foot { padding: 14px 24px 20px; display: grid; gap: 12px; }
.modal-close { border: 0; background: var(--surface-2); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 18px; color: var(--muted); }
.confirm-box { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.confirm-box .row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 16px; border-bottom: 1px solid var(--border); }
.confirm-box .row:last-child { border-bottom: 0; }
.confirm-box .row span:first-child { color: var(--muted); }
.confirm-box .row span:last-child { font-weight: 650; text-align: right; }
.confirm-box .row.total { background: var(--surface-2); font-size: 17px; }
.preview-frame { width: 100%; height: 72vh; border: 0; border-radius: 10px; background: #525659; }
.preview-img { max-width: 100%; max-height: 72vh; display: block; margin: 0 auto; border-radius: 8px; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ---------- Toast ---------- */
.toasts { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: grid; gap: 10px; }
.toast { background: var(--navy); color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: var(--shadow-lg); font-weight: 550; display: flex; gap: 10px; align-items: center; max-width: 420px; animation: pop .2s ease; }
.toast.ok { background: #145f3b; }
.toast.err { background: #8e1f19; }
.toast svg { width: 18px; height: 18px; flex: none; }

/* ---------- Notifications dropdown ---------- */
.notif-panel { position: absolute; top: 54px; right: 90px; width: 400px; max-height: 70vh; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); z-index: 50; }
.notif-item { display: block; padding: 14px 16px; border-bottom: 1px solid var(--border); color: inherit; position: relative; }
.notif-item:hover { background: var(--surface-2); text-decoration: none; }
.notif-item.unread { background: #f3fafb; }
.notif-item.unread::before { content: ""; position: absolute; left: 6px; top: 20px; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.notif-title { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; color: var(--teal-2); }
.notif-title.INVOICE_SUSPENDED { color: var(--suspended); }
.notif-title.INVOICE_PAID { color: var(--paid); }
.notif-title.INVOICE_APPROVED { color: var(--approved); }
.notif-body { display: grid; grid-template-columns: 110px 1fr; gap: 2px 8px; font-size: 13px; margin-top: 6px; }
.notif-body span:nth-child(odd) { color: var(--muted); }
.notif-body span:nth-child(even) { font-weight: 600; }
.notif-meta { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--muted); }
.notif-meta b { color: var(--teal); }

/* ---------- Auth pages ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-art { background: linear-gradient(160deg, #06202f 0%, var(--navy) 40%, #0e5561 100%); color: #fff; padding: 48px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.auth-art .waves { display: none; }
.auth-art h1 { font-size: 38px; letter-spacing: -.02em; margin-top: auto; max-width: 480px; line-height: 1.12; }
.auth-art p { color: #b5d2dc; max-width: 440px; font-size: 15px; margin-top: 14px; }
.auth-art .feats { display: grid; gap: 10px; margin: 28px 0 64px; position: relative; z-index: 1; }
.auth-art .feat { display: flex; gap: 10px; align-items: center; color: #d9eaf0; font-size: 14px; }
.auth-art .feat svg { width: 18px; height: 18px; color: #4fd1d6; }
.auth-form { display: grid; place-items: center; padding: 40px 24px; background: var(--surface); }
.auth-box { width: 100%; max-width: 380px; }
.auth-box h2 { font-size: 24px; margin-bottom: 6px; }
.auth-box .subtle { margin-bottom: 26px; }
.auth-box .field + .field { margin-top: 16px; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 64px; }
.pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--teal); font-weight: 650; font-size: 12.5px; cursor: pointer; padding: 6px; }
.alert { padding: 11px 14px; border-radius: 9px; font-size: 13.5px; margin-bottom: 16px; border: 1px solid; }
.alert.err { background: var(--suspended-bg); border-color: var(--suspended-bd); color: #8b1c16; }
.alert.ok { background: var(--paid-bg); border-color: var(--paid-bd); color: #0f5b33; }
.alert.info { background: var(--approved-bg); border-color: var(--approved-bd); color: #0a4e78; }
.secure-note { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); margin-top: 26px; }
.secure-note svg { width: 15px; height: 15px; }
.pw-meter { height: 5px; border-radius: 9px; background: var(--border); overflow: hidden; margin-top: 6px; }
.pw-meter span { display: block; height: 100%; transition: width .2s, background .2s; }

/* ---------- Misc ---------- */
.muted-box { background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: 10px; padding: 14px 16px; color: var(--muted); font-size: 13px; }
.stat-inline { display: flex; gap: 28px; flex-wrap: wrap; }
.stat-inline .s .l { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.stat-inline .s .v { font-size: 20px; font-weight: 750; margin-top: 2px; font-variant-numeric: tabular-nums; }
.bar { height: 8px; background: var(--border); border-radius: 99px; overflow: hidden; display: flex; }
.bar span { height: 100%; }
.pager { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.filters { display: grid; grid-template-columns: 2fr repeat(5, minmax(0, 1fr)); gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.filters .field > label { font-size: 11.5px; }
.chip-x { display: inline-flex; align-items: center; gap: 6px; background: var(--teal-soft); color: var(--teal-2); padding: 4px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 600; border: 0; cursor: pointer; }
.loading { padding: 40px; text-align: center; color: var(--muted); }
.spinner { width: 22px; height: 22px; border: 3px solid var(--border); border-top-color: var(--teal); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, #eef1f4, #f7f9fa, #eef1f4); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 8px; }
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.kbd { font-family: var(--mono); font-size: 11px; padding: 1px 5px; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--surface-2); }
.mono { font-family: var(--mono); font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.mt-0 { margin-top: 0 !important; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.flex { display: flex; gap: 10px; align-items: center; } .flex.wrap { flex-wrap: wrap; } .grow { flex: 1; }
.divider { height: 1px; background: var(--border); margin: 16px 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .status-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detail-grid { grid-template-columns: 1fr; }
  .action-panel { position: static; order: -1; }
  .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filters .q { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 270px; z-index: 90; transform: translateX(-100%); transition: transform .2s ease; }
  .shell.nav-open .sidebar { transform: none; box-shadow: var(--shadow-lg); }
  .shell.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(8,24,38,.4); z-index: 80; }
  .bell.menu-btn { display: grid; }
  .topbar { padding: 0 16px; }
  .content { padding: 18px 16px 60px; }
  .grid-2, .grid-3, .grid-4, .form-grid { grid-template-columns: 1fr; }
  .status-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-amount { font-size: 30px; }
  .hero-period { margin-left: 0; text-align: left; }
  .auth { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .user-chip .txt { display: none; }
  .notif-panel { right: 12px; left: 12px; width: auto; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 8px; }
  .filters { grid-template-columns: 1fr 1fr; }
  table.data.responsive thead { display: none; }
  table.data.responsive tr { display: grid; grid-template-columns: 1fr auto; padding: 10px 14px; border-bottom: 1px solid var(--border); gap: 2px 10px; }
  table.data.responsive td { border: 0; padding: 2px 0; }
  table.data.responsive td[data-hide-sm] { display: none; }
}

@media print {
  .sidebar, .topbar, .no-print, .toasts { display: none !important; }
  .shell { display: block; }
  .content { padding: 0; }
  .card { box-shadow: none; }
  .hero { color: #000; background: #fff; border: 1px solid #ccc; }
  body { background: #fff; }
}

/* list rows (clickable) */
.list-row { display: flex; gap: 14px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--border); color: inherit; }
.list-row:last-child { border-bottom: 0; }
a.list-row:hover { background: var(--surface-2); text-decoration: none; }
.card-head h2 svg { width: 18px; height: 18px; vertical-align: -3px; color: var(--teal); }
.card-head h2 svg.warn-ic { color: var(--suspended); }
.ic-sm { width: 15px; height: 15px; vertical-align: -2px; }
.timeline li .dot { border-color: var(--c, var(--teal)); }
a.list-link { color: inherit; transition: box-shadow .15s, transform .08s; }
a.list-link:hover { text-decoration: none; box-shadow: var(--shadow); transform: translateY(-1px); }
a.list-link svg { width: 26px; height: 26px; color: var(--teal); }
tr.sel td { background: var(--teal-soft); }
.tag + .tag { margin-left: 4px; }

table.data td:first-child, table.data th:first-child { padding-left: 18px; }
table.data td:last-child, table.data th:last-child { padding-right: 18px; }
td .cell-main.nw, td.nowrap { white-space: nowrap; }
.card-head .input, .btn-row .input, .toolbar .input { width: auto; }
.card-head select.input { max-width: 220px; }
.next-nav { display: flex; justify-content: space-between; gap: 8px; }
.gap-lg { gap: 32px; }
table.imp td:nth-child(2) { min-width: 320px; }
table.imp select.dept { min-width: 170px; }
.imp-warn { font-size: 12px; color: #8a5a00; background: var(--pending-bg); border-radius: 6px; padding: 3px 8px; margin-top: 5px; display: inline-block; }
/* keep the Action column on screen even with long invoice numbers / supplier names */
table.data td .cell-main.nw { white-space: normal; overflow-wrap: anywhere; max-width: 150px; }
table.data.responsive td:nth-child(2) { max-width: 230px; }
table.data td:last-child .btn { padding: 6px 10px; }
@media (max-width: 1500px) { table.data.responsive th, table.data.responsive td { padding-left: 8px; padding-right: 8px; } }

/* =================== Ello HR additions =================== */
.mb-16 { margin-bottom: 16px; }
.m-16 { margin: 16px 16px 0; }
.pre { white-space: pre-wrap; }
.alert.warn { background: var(--pending-bg); border-color: var(--pending-bd); color: #7a4706; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.card-head.wrap { flex-wrap: wrap; }
.card-head .spacer { flex: 1; }
.input.search { width: 260px; max-width: 100%; }
.back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.back svg { width: 16px; height: 16px; }
h3 > .num { width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 12px; display: inline-grid; place-items: center; flex: none; }
.avatar.sm { width: 32px; height: 32px; font-size: 12px; }
.avatar.xl { width: 72px; height: 72px; font-size: 24px; background: linear-gradient(135deg, var(--sand), #f6efe2); border: 2px solid #fff; box-shadow: var(--shadow-sm); }
.person { display: flex; gap: 10px; align-items: center; }
.subtle.grow { flex: 1; }

/* hero (HR) */
.hero-amount .alt { display: inline-block; font-size: 18px; margin-left: 10px; color: #9fd3d8; }
.hero-sub { font-size: 13.5px; color: #cfe6ea; margin-top: 6px; }
.hero-sub b { color: #fff; }
.hero-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; position: relative; z-index: 1; }
.hero-legend a { color: #d7e7ee; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.hero-legend a:hover { color: #fff; }
.hero-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
a.scard { text-decoration: none !important; display: block; }

/* feed */
.feed { list-style: none; margin: 0; padding: 4px 0; }
.feed li { padding: 9px 20px; border-bottom: 1px solid var(--border); font-size: 13px; }
.feed li:last-child { border-bottom: 0; }
.card-pad .list-row { padding: 6px 0; justify-content: space-between; font-size: 13px; }
.lbl { display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; color: var(--muted); }

/* directory */
.dir { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; align-items: start; }
.dept-rail { padding: 8px; position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; }
.dept-rail a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--ink-2); font-size: 13.5px; font-weight: 550; }
.dept-rail a:hover { background: var(--surface-2); text-decoration: none; }
.dept-rail a.on { background: var(--teal-soft); color: var(--teal-2); }
.dept-rail a b { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 650; }
.dept-rail a.warn span { color: var(--suspended); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--border); }
.chip { font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 99px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.chip:hover { border-color: var(--teal); }
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* departments */
.dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.dept-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; color: inherit; text-decoration: none !important; transition: box-shadow .15s, transform .08s; }
.dept-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.dept-card.warn { border-color: var(--suspended-bd); }
.dc-head { display: flex; gap: 12px; align-items: center; }
.dc-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--teal-soft); color: var(--teal); display: grid; place-items: center; flex: none; }
.dept-card.warn .dc-icon { background: var(--suspended-bg); color: var(--suspended); }
.dc-icon svg { width: 20px; height: 20px; }
.dc-n { font-size: 28px; font-weight: 750; color: var(--navy); font-variant-numeric: tabular-nums; }
.dc-people { font-size: 13px; color: var(--ink-2); min-height: 36px; }
.dc-flags { display: flex; gap: 6px; flex-wrap: wrap; }

/* profile */
.profile-head { display: flex; gap: 18px; align-items: center; padding: 20px 22px; flex-wrap: wrap; }
.profile-head h1 { font-size: 26px; }
.ph-sub { color: var(--ink-2); margin-top: 4px; }
.ph-flags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.ph-actions { margin-left: auto; }
.folders { display: grid; gap: 14px; }
.folder .card-head { padding: 12px 16px; }
.folder-ic { width: 30px; height: 30px; border-radius: 8px; background: #fbf1dc; color: #8a6420; display: grid; place-items: center; flex: none; }
.folder-ic svg { width: 17px; height: 17px; }
.folder[data-group="DISCIPLINARY"] .folder-ic { background: var(--pending-bg); color: var(--pending); }
.folder[data-group="EXIT"] .folder-ic { background: var(--suspended-bg); color: var(--suspended); }
.folder[data-group="EMPLOYMENT"] .folder-ic { background: var(--teal-soft); color: var(--teal-2); }
.folder[data-group="PERSONAL"] .folder-ic { background: var(--pop-bg); color: var(--pop); }
.folder.empty-folder { opacity: .85; }
.folder.empty-folder .card-head { border-bottom: 0; }
.folder.empty-folder .card-pad { padding-top: 0; font-size: 13px; }
.docs { list-style: none; margin: 0; padding: 4px 8px; }
.doc { display: flex; align-items: center; gap: 6px; border-radius: 9px; }
.doc + .doc { border-top: 1px solid var(--border); }
.doc:hover { background: var(--surface-2); }
.doc.arch { opacity: .7; }
.doc-main { flex: 1; min-width: 0; display: flex; gap: 12px; align-items: center; text-align: left; background: none; border: 0; padding: 10px 8px; font: inherit; color: inherit; cursor: pointer; }
.doc-main .grow { min-width: 0; display: flex; flex-direction: column; }
.doc-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-kind { flex: none; width: 46px; text-align: center; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; padding: 6px 0; border-radius: 6px; background: var(--draft-bg); color: var(--ink-2); }
.doc-kind.k-PDF { background: var(--suspended-bg); color: var(--suspended); }
.doc-kind.k-Word { background: var(--approved-bg); color: var(--approved); }
.doc-kind.k-Excel { background: var(--paid-bg); color: var(--paid); }
.doc-kind.k-Image { background: var(--pop-bg); color: var(--pop); }
.doc-acts { display: flex; gap: 2px; flex: none; opacity: .55; transition: opacity .1s; }
.doc:hover .doc-acts, .doc:focus-within .doc-acts { opacity: 1; }
.archived summary { cursor: pointer; list-style: none; }
.case-list { list-style: none; margin: 0; padding: 0; }
.case-list li a { display: block; padding: 11px 18px; border-bottom: 1px solid var(--border); color: inherit; font-size: 13px; }
.case-list li:last-child a { border-bottom: 0; }
.case-list li a:hover { background: var(--surface-2); text-decoration: none; }
.cl-top { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.timeline.compact { padding: 12px 18px; }
.timeline.compact li { padding-bottom: 12px; }
.timeline li::after { content: ""; position: absolute; left: 3px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.t-title { font-weight: 600; font-size: 13px; }

/* case detail */
.stepper { list-style: none; display: flex; gap: 0; margin: 0 0 6px; padding: 0; counter-reset: s; }
.stepper li { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); position: relative; padding: 10px 0; }
.stepper li + li::before { content: ""; position: absolute; left: -12px; right: calc(100% + 4px); top: 50%; height: 2px; background: var(--border); }
.stepper li span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--border-strong); font-size: 12px; flex: none; }
.stepper li.done { color: var(--paid); }
.stepper li.done span { background: var(--paid); border-color: var(--paid); color: #fff; }
.stepper li.now { color: var(--navy); }
.stepper li.now span { border-color: var(--teal); color: var(--teal); box-shadow: 0 0 0 4px var(--teal-soft); }
.decide { border-color: var(--pop-bd); box-shadow: 0 0 0 3px var(--pop-bg); }
.decide .card-head h2 { display: flex; gap: 8px; align-items: center; }
.decide .card-head svg { width: 18px; height: 18px; color: var(--pop); }
.rec { background: var(--pop-bg); border-radius: 10px; padding: 12px 14px; font-size: 12px; color: var(--pop); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.rec .big { font-size: 19px; color: var(--ink); text-transform: none; letter-spacing: 0; margin-top: 2px; }
.action-panel h3 { display: flex; gap: 8px; align-items: center; }

/* forms, import, reports */
.form-narrow { max-width: 760px; }
.ticks { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.small-list { font-size: 12.5px; max-height: 300px; overflow: auto; }
.hbars { display: grid; gap: 8px; }
.hb-row { display: grid; grid-template-columns: 150px 1fr 34px; gap: 10px; align-items: center; font-size: 13px; }
.hb-l { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-track { height: 14px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.hb-stack { display: flex; height: 100%; }
.hb-stack i { display: block; height: 100%; }
.hb-n { text-align: right; font-variant-numeric: tabular-nums; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: -1px; }

@media (max-width: 1100px) {
  .dir { grid-template-columns: 1fr; }
  .dept-rail { position: static; max-height: none; display: flex; flex-wrap: wrap; gap: 4px; }
  .dept-rail a { border: 1px solid var(--border); }
  .ph-actions { margin-left: 0; width: 100%; }
}
@media (max-width: 700px) {
  .stepper li { font-size: 0; } .stepper li span { font-size: 12px; }
  .hb-row { grid-template-columns: 90px 1fr 28px; }
  .input.search { width: 100%; }
}

/* ---- photos ---- */
img.avatar.photo { object-fit: cover; object-position: center 25%; background: var(--sand); }
.ph-photo { position: relative; flex: none; }
.ph-photo .avatar.xl { width: 96px; height: 96px; border-radius: 20px; }
.ph-cam { position: absolute; right: -6px; bottom: -6px; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; cursor: pointer; border: 2px solid #fff; }
.ph-cam svg { width: 14px; height: 14px; }

/* ---- leave ---- */
.tabs-line { display: flex; gap: 2px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tabs-line a { padding: 10px 16px; font-weight: 600; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs-line a:hover { color: var(--ink); text-decoration: none; }
.tabs-line a.on { color: var(--navy); border-bottom-color: var(--teal); }
.month-title { min-width: 170px; text-align: center; }
.pad-x { padding: 10px 20px 0; margin-top: 0; }
.legend .hol-sw { background: repeating-linear-gradient(45deg, #f3d9a7, #f3d9a7 3px, #fff7e6 3px, #fff7e6 6px); }
.type-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 7px; vertical-align: 0; }
.wall-wrap { overflow-x: auto; padding: 10px 0 4px; }
table.wall { border-collapse: separate; border-spacing: 0; font-size: 12px; min-width: 100%; }
table.wall th, table.wall td { padding: 0; text-align: center; border-bottom: 1px solid var(--border); }
table.wall thead th { font-weight: 650; color: var(--ink-2); padding: 4px 0 6px; min-width: 26px; font-variant-numeric: tabular-nums; }
table.wall thead th span { display: block; font-size: 10px; color: var(--muted); font-weight: 600; }
table.wall .who { text-align: left; padding: 7px 14px 7px 20px; min-width: 210px; max-width: 240px; position: sticky; left: 0; background: var(--surface); z-index: 2; border-right: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.wall .who .cell-sub { font-size: 11px; }
table.wall td { height: 40px; position: relative; }
table.wall .we { background: var(--surface-2); }
table.wall .hol { background: repeating-linear-gradient(45deg, #fbecd0, #fbecd0 3px, #fffaf0 3px, #fffaf0 6px); }
table.wall .today { box-shadow: inset 2px 0 0 var(--teal), inset -2px 0 0 var(--teal); }
table.wall thead th.today { color: var(--teal); }
.bar-seg { position: absolute; left: 0; right: 0; top: 10px; bottom: 10px; cursor: pointer; opacity: .92; }
.bar-seg.f { left: 3px; border-radius: 6px 0 0 6px; }
.bar-seg.l { right: 3px; border-radius: 0 6px 6px 0; }
.bar-seg.f.l { border-radius: 6px; }
.bar-seg:hover { opacity: 1; filter: brightness(1.08); }
table.wall tfoot td { font-weight: 700; color: var(--ink-2); padding: 8px 0; background: var(--surface-2); font-variant-numeric: tabular-nums; }
table.wall tfoot td.hi { color: var(--suspended); background: var(--suspended-bg); }
table.wall tfoot .who { background: var(--surface-2); font-size: 12px; }
.leave-calc { background: var(--teal-soft); color: var(--teal-2); border-radius: 9px; padding: 10px 14px; font-size: 13.5px; }
table.data.sheet td, table.data.sheet th { white-space: nowrap; }
td.flag-red { color: var(--suspended); font-weight: 750; background: var(--suspended-bg); }
.input.ent { width: 100px; text-align: right; }
.leave-sum { font-size: 13px; border-bottom: 1px solid var(--border); }
.lv-row { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.case-list li { padding: 0; }
.case-list li > .lv-row, .case-list li > .btn { margin: 0 18px; }
.case-list li:has(.lv-row) { padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.ret-list { list-style: none; margin: 0; padding: 4px 0; }
.ret-list li { display: flex; gap: 10px; align-items: center; padding: 9px 18px; border-bottom: 1px solid var(--border); }
.ret-list li:last-child { border-bottom: 0; }
.ret-list li.late { background: var(--suspended-bg); }
.ret-list li.today { background: var(--pop-bg); }
.ret-list .grow { min-width: 0; }
.dept-count { list-style: none; margin: 0; padding: 6px 0; columns: 1; }
.dept-count a { display: flex; gap: 10px; align-items: center; padding: 7px 18px; color: inherit; font-size: 13.5px; }
.dept-count a:hover { background: var(--surface-2); text-decoration: none; }
.dept-count i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.dept-count b { font-variant-numeric: tabular-nums; }
.detail-grid > * { min-width: 0; }
.folders { grid-template-columns: minmax(0, 1fr); }
.dropzone { display: block; }
.profile-head .grow { min-width: 0; }

/* ===== Forms & letters ===== */
.section-title { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 22px 0 10px; color: var(--ink-2); }
.section-title svg { width: 18px; height: 18px; color: var(--teal); }
.form-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.form-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: #fff; border: 1px solid #dfe6ec; border-radius: 12px; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.form-card:hover { border-color: var(--teal); box-shadow: 0 4px 14px rgba(12,122,131,.12); }
.form-card b { font-size: 14.5px; }
.form-card span { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.forms-layout { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 18px; align-items: start; }
.forms-layout .form-grid { grid-template-columns: 1fr; }
.checks { display: flex; flex-direction: column; gap: 6px; }
.checks .checkbox { align-items: flex-start; }
.letter-wrap { position: sticky; top: 12px; background: #e9edf0; border-radius: 12px; padding: 18px; max-height: calc(100vh - 40px); overflow: auto; }
.letter { background: #fff; width: 100%; max-width: 794px; min-height: 1000px; margin: 0 auto; padding: 34px 56px 40px; box-shadow: 0 6px 24px rgba(15,31,46,.15); color: #1f2a33; font-family: Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; }
.lt-head { text-align: center; border-bottom: 1.5px solid #5a2e27; padding-bottom: 8px; margin-bottom: 18px; }
.lt-head img { width: 150px; height: auto; display: block; margin: 0 auto 8px; }
.lt-head .lt-co { font-size: 20px; font-weight: 700; color: #4a221c; letter-spacing: .02em; margin: 4px 0 6px; }
.lt-head div { font-size: 10px; color: #5b6770; }
.lt-body { flex: 1; }
.lt-body p { margin: 0 0 9px; }
.lt-date { text-align: right; }
.lt-conf { font-weight: 700; color: #5a2e27; font-size: 11px; letter-spacing: .03em; }
.lt-title { text-align: center; color: #5a2e27; font-size: 16px; margin: 6px 0 12px; }
.lt-re { font-weight: 700; }
.lt-h { font-size: 13px; margin: 10px 0 4px; }
.lt-indent { padding-left: 16px; }
.lt-small { font-size: 11.5px; }
.lt-body ul { margin: 0 0 10px; padding-left: 26px; }
.lt-body li { margin-bottom: 3px; }
.lt-fields { border-collapse: collapse; margin: 0 0 12px; }
.lt-fields th { text-align: left; color: #5b6770; font-weight: 700; padding: 1px 18px 1px 0; vertical-align: top; white-space: nowrap; }
.lt-fields td { padding: 1px 0; }
.lt-lines span { display: block; border-bottom: 1px solid #9aa4ab; height: 24px; }
.lt-lines { margin-bottom: 12px; }
.lt-sign { margin-top: 14px; }
.lt-sigspace { height: 58px; display: flex; align-items: flex-end; }
.lt-sigspace img { height: 56px; width: auto; }
.lt-sigline { width: 230px; border-top: 1px solid #1f2a33; margin-bottom: 4px; }
.lt-ack { border-top: 1px solid #c9b8b4; margin-top: 16px; padding-top: 10px; }
.lt-ack h4 { color: #5a2e27; font-size: 12px; margin: 0 0 4px; }
.lt-ackline { display: flex; align-items: flex-end; gap: 10px; margin: 12px 0 0; }
.lt-ackline span { width: 110px; }
.lt-ackline i { flex: 0 0 280px; border-bottom: 1px solid #9aa4ab; height: 14px; }
.lt-cc { color: #5b6770; font-size: 11.5px; margin-top: 10px; }
.lt-table { width: 100%; border-collapse: collapse; font-size: 11px; margin: 4px 0 12px; }
.lt-table th, .lt-table td { border: 1px solid #9aa4ab; padding: 5px 6px; vertical-align: top; text-align: left; }
.lt-table th { background: #f3ece9; }
.lt-table td { height: 26px; }
.lt-signoff div { margin-top: 26px; }
.lt-signoff i { display: block; width: 320px; border-top: 1px solid #1f2a33; }
.lt-signoff span { font-size: 11px; color: #5b6770; }
/* office-only notes inside a letter preview (policy reminders): never printed */
.lt-office { margin: 0 0 12px; padding: 8px 10px; border-left: 4px solid #0369a1; background: #eff6ff; font-size: 12px; line-height: 1.45; color: #1f2a33; }
.lt-office.warn { border-left-color: #b45309; background: #fffbeb; }
/* Acknowledgement of Debt (template call-outs, two-column details, signature + date lines) */
.lt-center { text-align: center; }
.lt-callout { margin: 0 0 12px; padding: 8px 10px 8px 12px; border-left: 3px solid #4a221c; background: #f6f1ef; font-size: 12px; line-height: 1.45; }
.lt-pairs { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 12px; }
.lt-pairs td { width: 50%; padding: 6px 12px 3px 0; border-bottom: 1px solid #9aa4ab; vertical-align: bottom; }
.lt-pairs b { color: #5b6770; }
.lt-sigrow { display: flex; gap: 28px; margin-top: 10px; break-inside: avoid; }
.lt-sigcol { flex: 0 1 300px; min-width: 0; display: flex; flex-direction: column; }
.lt-sigcol.lt-sigdate { flex: 1 1 auto; }
.lt-sigcol i { display: block; border-top: 1px solid #1f2a33; }
.lt-sigcol span { font-size: 11px; color: #5b6770; }
.lt-sigcol small { font-size: 10px; color: #5b6770; }
.lt-foot { border-top: 1px solid #c9b8b4; margin-top: 18px; padding-top: 6px; text-align: center; font-size: 10px; color: #5b6770; }
/* Onboarding & Contract templates (Ello's own agreement and annexures) */
.lt-band { background: #d9d9d9; padding: 8px 10px; margin: 0 0 12px; }
.lt-band-1 { font-size: 17px; font-weight: 700; }
.lt-band-2 { font-size: 13px; font-weight: 700; }
.lt-band-i { font-size: 10.5px; font-style: italic; }
.lt-band-p { font-size: 11px; }
.lt-bar { background: #f2f2f2; font-weight: 700; font-size: 11.5px; padding: 4px 6px; margin: 12px 0 6px; }
.lt-h1 { border-bottom: 1px solid #8c7a76; padding-bottom: 2px; font-size: 13.5px; margin-top: 14px; }
.lt-i { font-style: italic; }
.lt-b { font-weight: 700; }
.lt-kv, .lt-grid { width: 100%; border-collapse: collapse; font-size: 11px; margin: 4px 0 12px; }
.lt-kv th, .lt-kv td, .lt-grid th, .lt-grid td { border: 1px solid #b7bdc2; padding: 4px 6px; vertical-align: top; text-align: left; white-space: pre-wrap; }
.lt-kv th, .lt-grid th { background: #f2f2f2; }
.lt-kv th { width: 38%; }
.lt-kv td { height: 22px; }
.lt-grid-cat { background: #e7e9eb; font-weight: 700; }
.lt-sigcols { display: flex; border: 1px solid #b7bdc2; margin: 8px 0 14px; break-inside: avoid; }
.lt-sigbox { flex: 1 1 50%; min-width: 0; padding: 8px 10px; font-size: 11px; }
.lt-sigbox + .lt-sigbox { border-left: 1px solid #b7bdc2; }
.lt-sigl { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; }
.lt-sigl span { flex: 0 0 72px; color: #5b6770; font-weight: 700; }
.lt-sigl i { flex: 1 1 auto; border-bottom: 1px solid #9aa4ab; height: 14px; }
.lt-sigl em { font-style: normal; }
.lt-sigl-img i { height: 40px; display: flex; align-items: flex-end; }
.lt-sigl-img img { max-height: 38px; max-width: 160px; width: auto; }
.lt-pagebreak { border-top: 2px dashed #c9b8b4; margin: 18px 0; }
.ff-grid { display: flex; flex-direction: column; gap: 6px; }
.ff-grow { display: grid; grid-template-columns: 2fr 2fr 70px auto; gap: 6px; align-items: center; }
.pack-list { margin: 6px 0 0; padding-left: 18px; }
.pack-list li { margin-bottom: 4px; }
/* E-signing (office + staff phone) */
.es-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.es-f { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 550; text-decoration: none; cursor: pointer; }
.es-f b { font-size: 11px; padding: 0 6px; border-radius: 99px; background: var(--draft-bg); }
.es-f.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.es-f.on b { background: rgba(255,255,255,.2); }
.es-doc { max-height: 52vh; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: #e9ecef; padding: 12px; }
.es-doc .letter { margin: 0 auto; }
.es-signbox { margin-top: 14px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; }
.es-how { display: flex; gap: 18px; flex-wrap: wrap; }
.es-docs { padding-left: 18px; }
.es-docs li { margin-bottom: 8px; }
.es-table .tag { white-space: nowrap; }
.es-st { min-width: 220px; max-width: 320px; }
.es-act { text-align: right; white-space: nowrap; }
.es-act .btn { margin: 2px 0 2px 4px; }
.sigpad { position: relative; border: 2px dashed var(--border-strong, #9aa4ab); border-radius: 12px; background: #fff; }
.sigpad-canvas { display: block; width: 100%; height: 160px; touch-action: none; cursor: crosshair; border-radius: 10px; }
.sigpad-line { position: absolute; left: 16px; right: 16px; bottom: 34px; border-bottom: 1px solid #c3c9ce; pointer-events: none; }
.lt-sigdate em, .lt-ackline i { font-style: normal; }
.lt-ackline-img i { height: 40px; display: flex; align-items: flex-end; }
.lt-ackline-img img, .lt-sigspace img { max-height: 46px; width: auto; }
/* staff phone: Sign document */
.sd-back { margin-bottom: 8px; }
.sd-h { font-size: 19px; margin: 4px 0 6px; }
.sd-note { display: flex; gap: 8px; align-items: center; color: var(--teal-2, #0f766e); font-size: 14px; margin: 4px 0 8px; }
.sd-note svg { width: 18px; height: 18px; flex: 0 0 auto; }
.sd-scroll { max-height: 70vh; overflow: auto; border: 1px solid var(--border); border-radius: 12px; -webkit-overflow-scrolling: touch; }
.letter.sd-letter { max-width: none; min-height: 0; padding: 14px 14px 18px; box-shadow: none; font-size: 12.5px; }
.sd-letter .lt-head .lt-co { font-size: 16px; }
.sd-letter .lt-kv th { width: 44%; }
.sd-letter .lt-sigcols { flex-direction: column; }
.sd-letter .lt-sigbox + .lt-sigbox { border-left: 0; border-top: 1px solid #b7bdc2; }
.sd-letter .lt-pagebreak { margin: 12px 0; }
.sd-agree { font-size: 18px; font-weight: 650; padding: 12px; border: 2px solid var(--border-strong, #9aa4ab); border-radius: 12px; align-items: center; }
.sd-agree input { width: 26px; height: 26px; flex: 0 0 26px; }
.sd-padlabel { font-weight: 650; margin: 14px 0 6px; font-size: 15px; }
.sd-pad .sigpad-canvas { height: 200px; }
.sd-clear { margin-top: 8px; min-height: 48px; font-size: 16px; }
.sd-go { margin-top: 12px; }
.sd-decline { margin-top: 14px; }
.sd-decline summary { cursor: pointer; color: var(--ink-2); padding: 10px 0; font-size: 15px; }
@media print { .lt-pagebreak { border: 0; margin: 0; break-after: page; } .lt-kv tr, .lt-grid tr { break-inside: avoid; } }
.lt-empty { margin: auto; text-align: center; color: var(--muted); }
.lt-empty svg { width: 40px; height: 40px; }
@media (max-width: 1100px) { .forms-layout { grid-template-columns: 1fr; } .letter-wrap { position: static; max-height: none; } }

@page { size: A4; margin: 12mm 14mm; }
@media print {
  body:has(#letter) { background: #fff !important; }
  body:has(#letter) * { visibility: hidden; }
  body:has(#letter) #letter, body:has(#letter) #letter * { visibility: visible; } /* must out-rank the hide-everything rule above */
  #letter { position: absolute; left: 0; top: 0; width: 100%; max-width: none; min-height: 0; margin: 0; padding: 0; box-shadow: none; font-size: 12pt; }
  .letter-wrap { position: static; background: none; padding: 0; max-height: none; overflow: visible; }
  .lt-foot { position: fixed; bottom: 0; left: 0; right: 0; }
  .lt-sign, .lt-ack, .lt-table tr { break-inside: avoid; }
}
.form-card:hover, .form-card:hover * { text-decoration: none; }
.handbook-hero .card-pad { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.handbook-hero h2 { margin: 2px 0 4px; font-size: 19px; }
.handbook-hero p { margin: 0 0 4px; }
.hh-icon { width: 56px; height: 56px; border-radius: 14px; background: #f3ece9; color: #5a2e27; display: grid; place-items: center; flex: none; }
.hh-icon svg { width: 28px; height: 28px; }

/* ================= Time & attendance ================= */
.tag.green { background: var(--paid-bg); color: var(--paid); }
.center { text-align: center; }
.rchip { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 3px 7px; border-radius: 6px; font-size: 12px; font-weight: 700; color: #fff; background: var(--teal); letter-spacing: .02em; }
.rchip.off { background: var(--draft-bg); color: var(--draft); border: 1px solid var(--draft-bd); }
.brushes { display: flex; flex-wrap: wrap; gap: 6px; }
.brush { display: inline-flex; gap: 6px; align-items: center; font: inherit; font-size: 12.5px; padding: 5px 9px 5px 5px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; color: var(--ink-2); }
.brush svg { width: 16px; height: 16px; margin-left: 4px; }
.brush.on { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy) inset; background: var(--surface-2); }
.brush .bl { display: inline-flex; gap: 4px; align-items: baseline; }
.roster-wrap { max-height: calc(100vh - 260px); overflow: auto; }
table.roster { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.roster th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); font-weight: 650; padding: 9px 6px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; }
table.roster th.rn, table.roster td.rn { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 190px; padding: 7px 12px; border-right: 1px solid var(--border); }
table.roster th.rn { z-index: 3; background: var(--surface-2); }
table.roster td { border-bottom: 1px solid var(--border); }
td.rc { text-align: center; height: 42px; min-width: 64px; position: relative; user-select: none; -webkit-user-select: none; touch-action: none; }
table.roster.editable td.rc { cursor: crosshair; }
table.roster.editable td.rc:hover { background: var(--teal-soft); }
td.rc.today, th.today { background: #f2fbfb; }
th.today { color: var(--teal-2); }
td.rc.leave { background: repeating-linear-gradient(135deg, #f1f3f5 0 6px, #e6e9ed 6px 12px); }
.rleave { font-size: 11px; color: var(--muted); font-weight: 600; }
.came { position: absolute; right: 3px; top: 3px; color: var(--paid); }
.came svg { width: 12px; height: 12px; }
tr.rgroup td { background: var(--navy); color: #fff; font-weight: 650; padding: 6px 12px; position: sticky; left: 0; }
tr.rgroup .cell-sub { color: #b9cad6; }
td.rtot { text-align: center; padding: 6px 2px; vertical-align: top; }
.rt { display: inline-block; margin: 1px; padding: 1px 5px; border-radius: 5px; font-size: 11px; font-weight: 700; color: #fff; }
table.roster tfoot td { position: sticky; bottom: 0; background: var(--surface-2); border-top: 1px solid var(--border); }
.print-title { display: none; }
.att-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); border-top: 1px solid var(--border); }
.att-stat { padding: 12px 14px; border-right: 1px solid var(--border); }
.att-stat .n { font-size: 24px; font-weight: 750; font-variant-numeric: tabular-nums; }
.att-stat .l { font-size: 12px; color: var(--muted); font-weight: 600; }
.att-stat.IN .n { color: var(--paid); } .att-stat.NOT_IN .n, .att-stat.LATE .n { color: var(--pending); } .att-stat.ABSENT .n { color: var(--suspended); }
.ap-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.ap-list .card + .card { margin-top: 0; }
.ap-top { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.ap-when { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.ap .kv { grid-template-columns: 96px 1fr; }
.slips { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.slip { border: 1.5px dashed var(--border-strong); border-radius: 10px; padding: 12px 14px; break-inside: avoid; }
.slip-h { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.slip-n { font-weight: 700; margin: 4px 0 8px; }
.slip-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.slip-row .big { font-size: 22px; letter-spacing: .15em; }
.slip-u { font-size: 11.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.4; }
@media print {
  .print-title { display: block; font-weight: 700; margin-bottom: 8px; }
  .roster-wrap { max-height: none; overflow: visible; }
  table.roster th, table.roster td.rn, table.roster tfoot td { position: static; }
  .rchip, .rt, tr.rgroup td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.printing-slips * { visibility: hidden; }
  body.printing-slips #slips, body.printing-slips #slips * { visibility: visible; }
  body.printing-slips #slips { position: absolute; left: 0; top: 0; width: 100%; }
}

/* ---------- staff phone (clock-in) ---------- */
.clock-app { max-width: 480px; margin: 0 auto; padding: 14px 14px 40px; min-height: 100vh; }
.clk-login { padding: 28px 6px; }
.clk-login h1 { font-size: 28px; margin: 28px 0 4px; }
.clk-brand { display: flex; gap: 12px; align-items: center; }
.clk-brand .brand-name { color: var(--navy); } .clk-brand .brand-sub { color: var(--muted); }
.clk-brand .brand-mark { background: var(--navy); color: #fff; }
.input.lg { font-size: 18px; padding: 13px 14px; }
.input.pin { letter-spacing: .4em; font-size: 22px; text-align: center; }
.clk-top { display: flex; gap: 12px; align-items: center; padding: 4px 2px 12px; }
.clk-top .nm { font-weight: 700; font-size: 16px; }
.clk-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.clk-card h3 { margin: 0 0 8px; font-size: 15px; }
.hero-clock { background: linear-gradient(160deg, var(--navy), var(--navy-2)); color: #fff; border: 0; text-align: center; }
.clk-date { font-size: 14px; color: #b9cad6; }
.clk-time { font-size: 46px; font-weight: 750; letter-spacing: .02em; margin: 2px 0 8px; }
.clk-shift { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: 15px; }
.clk-shift .cell-sub { color: #b9cad6; }
.shift-chip { width: 12px; height: 12px; border-radius: 4px; display: inline-block; background: var(--teal); }
.clk-status { display: flex; gap: 10px; align-items: center; text-align: left; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.08); }
.clk-status svg { width: 22px; height: 22px; flex: none; }
.clk-status .cell-sub { color: #cfdde7; }
.clk-status.in svg { color: #5ee0a0; } .clk-status.pending svg { color: #ffd27a; }
.loc { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: 14px; margin-bottom: 14px; }
.loc > svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.loc > div { flex: 1; }
.loc.ok { background: var(--paid-bg); border-color: var(--paid-bd); } .loc.ok > svg { color: var(--paid); }
.loc.warn { background: var(--pending-bg); border-color: var(--pending-bd); } .loc.warn > svg { color: var(--pending); }
.loc.bad { background: var(--suspended-bg); border-color: var(--suspended-bd); } .loc.bad > svg { color: var(--suspended); }
.clk-btn { display: block; width: 100%; font: inherit; font-size: 22px; font-weight: 750; padding: 22px; border-radius: 16px; border: 0; color: #fff; cursor: pointer; letter-spacing: .02em; }
.clk-btn.in { background: var(--paid); } .clk-btn.out { background: var(--suspended); }
.clk-btn:disabled { opacity: .55; cursor: default; }
.clk-btn .spinner { border-color: rgba(255,255,255,.4); border-top-color: #fff; }
.clk-list { list-style: none; margin: 0; padding: 0; }
.clk-list li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px; align-items: center; }
.clk-list li:last-child { border-bottom: 0; }
.clk-list li.today { font-weight: 700; }
.clk-list li > span:last-child { text-align: right; display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.howto { margin-top: 8px; font-size: 13px; } .howto summary { cursor: pointer; font-weight: 600; } .howto p { margin: 6px 0; }
.modal .chips { border: 0; padding: 0; }
@media (max-width: 720px) { .ap-list { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }
.tabs-line a { display: inline-flex; align-items: center; gap: 6px; } .tabs-line a svg { width: 16px; height: 16px; }

.slip-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.slip-qr { width: 64px; height: 64px; flex: none; }
.slip-d { font-size: 11.5px; color: var(--muted); margin: -6px 0 6px; }
ol.slip-u { padding-left: 16px; margin: 8px 0 4px; } ol.slip-u li { margin: 1px 0; }
.slip-f { font-size: 10.5px; color: var(--muted); border-top: 1px dashed var(--border); padding-top: 5px; margin-top: 6px; }
@media print {
  body.printing-slips #app, body.printing-slips .toasts { display: none !important; }
  body.printing-slips .modal-backdrop { position: static; background: none; display: block; padding: 0; overflow: visible; }
  body.printing-slips .modal { position: static; max-width: none; width: 100%; max-height: none; overflow: visible; box-shadow: none; border: 0; transform: none; }
  body.printing-slips .modal-body { overflow: visible; max-height: none; padding: 0; }
  body.printing-slips .modal-head, body.printing-slips .modal-foot, body.printing-slips .no-print { display: none !important; }
  body.printing-slips #slips { position: static; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6mm; }
  body.printing-slips .slip { break-inside: avoid; page-break-inside: avoid; }
  body.printing-slips * { visibility: visible; }
}
@media print {
  body.printing-slips #slips { gap: 4mm; }
  body.printing-slips .slip { padding: 3mm 4mm; font-size: 8.5pt; border-width: 1px; }
  body.printing-slips .slip-h { font-size: 6.5pt; }
  body.printing-slips .slip-n { margin: 1mm 0 1.5mm; font-size: 9.5pt; }
  body.printing-slips .slip-qr { width: 17mm; height: 17mm; }
  body.printing-slips .slip-row .big { font-size: 15pt; }
  body.printing-slips ol.slip-u { font-size: 7pt; margin: 1.5mm 0 1mm; line-height: 1.3; }
  body.printing-slips .slip-f { font-size: 6.5pt; padding-top: 1mm; margin-top: 1mm; }
}

/* ---------- weekly timesheet ---------- */
table.timesheet { font-size: 12.5px; }
table.timesheet th { text-align: center; white-space: nowrap; }
table.timesheet th.rn, table.timesheet td.rn { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 180px; }
table.timesheet thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); }
table.timesheet thead th.rn { z-index: 3; }
td.ts-c { text-align: center; vertical-align: top; min-width: 78px; padding: 6px 4px; position: relative; border-left: 1px solid var(--border); line-height: 1.35; }
.ts-c.ok { background: #effaf4; } .ts-c.late { background: #fff6e5; } .ts-c.abs { background: #fdeeed; } .ts-c.lv { background: #eef4fb; }
.ts-c.off { background: var(--surface-2); color: var(--muted); } .ts-c.xtra { background: #f4effc; } .ts-c.up { color: var(--muted); }
.ts-t { font-variant-numeric: tabular-nums; margin-top: 3px; } .ts-h { font-weight: 700; } .ts-l { font-size: 11.5px; font-weight: 600; margin-top: 2px; }
.ts-c.abs .ts-l { color: var(--suspended); } .ts-late { font-size: 11px; color: var(--pending); font-weight: 700; }
.ts-flag { position: absolute; top: 3px; right: 3px; color: var(--pending); } .ts-flag svg { width: 13px; height: 13px; }
.ts-legend { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 12px; margin-top: 10px; color: var(--ink-2); }
.ts-legend .ts-c { display: inline-block; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border); }
.ts-legend svg { width: 13px; height: 13px; color: var(--pending); vertical-align: -2px; }
.ts-card .card-head { flex-wrap: wrap; gap: 8px; }
.ts-card .card-head h2 { display: inline-flex; gap: 8px; align-items: center; }
.ts-card .card-head h2 svg { width: 18px; height: 18px; }
table.timesheet.one td.ts-c { min-width: 70px; height: 74px; }
.ts-sum { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 12px 20px; font-size: 13.5px; border-top: 1px solid var(--border); }
.ts-hist { border-top: 1px solid var(--border); }
.ts-hist summary { padding: 12px 20px; cursor: pointer; font-weight: 600; font-size: 13.5px; }
tr.clickable { cursor: pointer; } tr.clickable:hover td { background: var(--surface-2); }
@media print { table.timesheet th.rn, table.timesheet td.rn, table.timesheet thead th { position: static; } .ts-c { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.ts-on { color: var(--paid); font-weight: 700; font-size: 11px; }

.att-dash .card-head { flex-wrap: wrap; gap: 8px; } .att-dash .card-head h2 { display: inline-flex; gap: 8px; align-items: center; } .att-dash .card-head h2 svg { width: 18px; height: 18px; }
.att-bar-cell { min-width: 180px; white-space: nowrap; }
.att-bar { display: inline-flex; width: 110px; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-right: 8px; vertical-align: middle; border: 1px solid var(--border); }
.att-bar .on { background: var(--paid); } .att-bar .ros { background: #f4d9a4; }
tr.tot td { background: var(--surface-2); border-top: 2px solid var(--border-strong); }
ol.imp-steps { padding-left: 18px; margin: 0 0 14px; } ol.imp-steps li { margin-bottom: 10px; }
.push-banner svg { width: 20px; height: 20px; flex: none; }
#push-dash .banner { margin-top: 0; margin-bottom: 14px; }

.bio-hero { width: 64px; height: 64px; border-radius: 18px; background: var(--navy); color: #fff; display: grid; place-items: center; margin-top: 26px; }
.bio-hero svg { width: 34px; height: 34px; }
.clk-login .bio-hero + h1 { margin-top: 14px; }
.bio-points { padding-left: 18px; font-size: 14px; color: var(--ink-2); } .bio-points li { margin: 6px 0; }
.bio-note { display: flex; gap: 6px; align-items: center; justify-content: center; font-size: 12.5px; color: var(--paid); margin-top: 8px; }
.bio-note svg { width: 15px; height: 15px; }

/* camera face check */
.cam { position: relative; width: 100%; max-width: 360px; margin: 0 auto; aspect-ratio: 3/4; background: #000; border-radius: 16px; overflow: hidden; }
.cam video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.cam-oval { position: absolute; left: 50%; top: 46%; width: 62%; height: 62%; transform: translate(-50%, -50%); border: 3px solid rgba(255,255,255,.85); border-radius: 50%; box-shadow: 0 0 0 999px rgba(0,0,0,.35); }
.cam-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; gap: 8px; justify-content: center; }
.cam-dots i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.45); } .cam-dots i.on { background: #3ddc84; }
.cam-status { text-align: center; font-weight: 700; margin: 12px 0 4px; }
.checkbox.consent { font-size: 13px; line-height: 1.45; align-items: flex-start; margin-top: 12px; }
.ap-faces { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.ap-faces figure { margin: 0; text-align: center; } .ap-faces img { width: 84px; height: 100px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); display: block; }
.ap-faces figcaption { font-size: 11px; color: var(--muted); margin-top: 3px; }
.ap-match { font-weight: 700; font-size: 13px; display: flex; flex-direction: column; } .ap-match span { font-weight: 500; font-size: 11.5px; color: var(--muted); }
.ap-match.ok { color: var(--paid); } .ap-match.bad { color: var(--suspended); }
.selfie-th { width: 30px; height: 36px; object-fit: cover; border-radius: 6px; vertical-align: middle; margin-right: 6px; border: 1px solid var(--border); }

.ts-face { display: flex; gap: 14px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.ts-face figure { margin: 0; text-align: center; } .ts-face figure img, .ts-face .nf { width: 64px; height: 76px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); display: grid; place-items: center; font-size: 11px; color: var(--muted); background: var(--surface-2); }
.ts-face figcaption { font-size: 11px; color: var(--muted); margin-top: 3px; max-width: 90px; }
.ts-selfies { display: flex; gap: 6px; flex-wrap: wrap; } .ts-selfies a { position: relative; } .ts-selfies img { width: 44px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; }
.ts-selfies span { position: absolute; right: -4px; bottom: -4px; width: 17px; height: 17px; border-radius: 50%; font-size: 10px; display: grid; place-items: center; color: #fff; font-weight: 700; }
.ts-selfies span.ok { background: var(--paid); } .ts-selfies span.bad { background: var(--suspended); }

/* ---------- staff app: bottom tabs, leave, handbook ---------- */
.clock-app { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.clk-nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px; display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(0,0,0,.06); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); z-index: 40; }
.clk-nav button { background: none; border: 0; font: inherit; font-size: 12px; font-weight: 650; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px; border-radius: 10px; cursor: pointer; }
.clk-nav button svg { width: 22px; height: 22px; }
.clk-nav button.on { color: var(--navy); background: var(--teal-soft); }
a.clk-btn { text-align: center; text-decoration: none; }
.clk-btn svg { width: 22px; height: 22px; vertical-align: -3px; margin-right: 6px; }
.clk-btn.mt-8 { margin-top: 8px; font-size: 19px; padding: 18px; }
.lv-bal { padding: 8px 0; border-bottom: 1px solid var(--border); }
.lv-bal:last-of-type { border-bottom: 0; }
.lv-bal-top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.lv-bar { height: 8px; background: var(--border); border-radius: 99px; overflow: hidden; margin: 6px 0 4px; }
.lv-bar i { display: block; height: 100%; border-radius: 99px; }
.lv-req .link-btn { margin-left: 6px; }
.hb-title { font-size: 18px; margin: 4px 0; }
.tab-count:not(:empty) { display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 6px; border-radius: 99px; background: var(--suspended); color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.cam-oval.good { border-color: #3ddc84; box-shadow: 0 0 0 999px rgba(0,0,0,.35), 0 0 24px rgba(61,220,132,.6); }
.bio-note.warn { color: var(--suspended); text-align: center; }

/* Smart assist */
.sa-ask { display: flex; gap: 8px; }
.sa-answer p { margin: 0 0 6px; }
.sa-list { margin: 4px 0 8px; padding-left: 18px; }
.sa-list li { margin: 2px 0; }
.sa-table { margin-top: 8px; }
.sa-table summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.sa-table .table-wrap { max-height: 280px; overflow: auto; margin-top: 6px; }
.sa-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.sa-kpis div { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px; text-align: center; }
.sa-kpis b { display: block; font-size: 20px; }
.sa-kpis span { font-size: 12px; color: var(--muted); }
.sa-roster { max-height: 55vh; overflow: auto; }
.sa-roster td.sa-c { text-align: center; }
.sa-roster td.sa-c.existing { opacity: .4; }
.sa-roster td.sa-c.rest-day, .sa-roster td.sa-c.leave { background: var(--surface-2); }
.sa-pre { white-space: pre-wrap; font-size: 12px; max-height: 260px; overflow: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
.sa-draft .kv dd { white-space: pre-wrap; }
@media (max-width: 600px) { .sa-kpis { grid-template-columns: repeat(2, 1fr); } }
.card-pad .chips { border: 0; padding: 0; }
.link-btn + .link-btn { margin-left: 14px; }
.mb-8 { margin-bottom: 8px; }
/* Roster written as times, like the paper roster */
.rtime { display: inline-block; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--ink); padding: 3px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); }
.rtime.off { color: var(--muted); background: transparent; border-style: dashed; }
.rtime.split { white-space: normal; max-width: 124px; line-height: 1.3; text-align: left; font-size: 11.5px; }
.ts-parts { font-size: 11px; font-weight: 600; line-height: 1.3; margin-top: 2px; }
.ts-pt { font-variant-numeric: tabular-nums; font-size: 11.5px; }
table.roster th.rdes, table.roster td.rdes { text-align: left; white-space: nowrap; color: var(--ink-2); padding: 7px 10px; border-right: 1px solid var(--border); font-size: 12.5px; }
table.roster td.rn { min-width: 150px; }
table.roster td.rtot .cell-sub { font-size: 10.5px; line-height: 1.3; }
@media print { .rtime { border: 0; background: none; padding: 0; } table.roster td.rn a { color: inherit; text-decoration: none; } }
/* Notification archive */
.notif-row { position: relative; }
.notif-x { position: absolute; top: 10px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.notif-x svg { width: 14px; height: 14px; }
.notif-x:hover { border-color: var(--teal); color: var(--teal); }
.notif-row .notif-item { padding-right: 96px; }

/* phone checklist on PIN slips, staff set-up card */
.slip-ph { font-size: 11px; border-top: 1px dashed var(--border); margin-top: 6px; padding-top: 5px; color: var(--ink-2); }
.slip-ph ol { margin: 2px 0 0; padding-left: 16px; line-height: 1.3; } .slip-ph li { margin: 0; }
@media print {
  body.printing-slips .slip-ph { font-size: 6.2pt; padding-top: 1mm; margin-top: 1mm; }
  body.printing-slips .slip-ph ol { padding-left: 3.5mm; margin: .5mm 0 0; line-height: 1.22; }
}
.setup-list { list-style: none; margin: 0; padding: 10px 20px 14px; display: grid; gap: 8px; }
.setup-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; }
.setup-mark { width: 20px; height: 20px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; border: 1.5px solid var(--border-strong); color: var(--muted); }
.setup-list li.ok .setup-mark { background: var(--paid-bg); color: var(--paid); border-color: transparent; }
.setup-list li.todo .setup-mark { background: #fbf1dc; color: #8a6420; border-color: transparent; }

/* Outside the work site — clocking blocked */
.loc.out-area { border: 2px solid #b3261e; background: #fdecea; flex-direction: column; align-items: stretch; }
.out-area-big { display: flex; align-items: center; gap: 10px; font-size: 1.9rem; font-weight: 800; color: #b3261e; letter-spacing: .02em; line-height: 1.1; }
.out-area-big svg { width: 34px; height: 34px; flex: none; }
.out-area-hint { color: #b3261e; font-weight: 700; }
.out-area-modal .modal-head, .out-area-modal .modal-header { display: none; }
.out-area-screen { text-align: center; padding: 18px 6px 6px; }
.out-area-screen svg { width: 64px; height: 64px; color: #b3261e; }
.out-area-title { font-size: 2.6rem; font-weight: 900; color: #b3261e; letter-spacing: .03em; margin: 8px 0 12px; line-height: 1.05; }
.out-area-screen p { font-size: 1.05rem; margin: 6px 0; }

/* Letters: print on one clean A4 page — no browser date/URL header or footer, black text. */
@media print {
  @page { size: A4; margin: 0; }
  body.printing-letter #letter { width: 210mm; min-height: 0; height: auto; padding: 14mm 17mm 12mm; color: #000; font-size: 14px; }
  body.printing-letter #letter * { color: #000 !important; }
  body.printing-letter #letter .lt-title, body.printing-letter #letter .lt-conf { color: #4a221c !important; }
  body.printing-letter #letter .lt-foot { position: static; }
  body.printing-letter #letter .lt-office { display: none !important; }
  body.printing-letter .letter-wrap { padding: 0; }
}

/* ---------- Live staff map ---------- */
.lm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.lm-map { height: 70vh; min-height: 420px; background: #dfe7ea; border-radius: var(--radius); z-index: 0; }
.lm-map.lm-compact { height: 320px; min-height: 0; border-radius: 0 0 var(--radius) var(--radius); }
.lm-mapcard { overflow: hidden; }
.lm-side { display: flex; flex-direction: column; max-height: 70vh; min-height: 420px; }
.lm-tools { padding: 12px; display: grid; gap: 8px; border-bottom: 1px solid var(--border); }
.lm-sel { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lm-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.lm-item { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.lm-item input { margin-top: 3px; flex: none; }
.lm-item .grow { min-width: 0; }
.lm-name { font-weight: 600; text-align: left; }
.lm-name:disabled { color: var(--ink-2); cursor: default; text-decoration: none; }
.lm-none-txt { font-style: italic; }
.lm-trail { font-size: 12px; }
.lm-empty { padding: 16px; }
.lm-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 10px 12px; border-top: 1px solid var(--border); }
.lm-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 5px 6px 0 0; flex: none; background: #8a96a3; }
.lm-legend .lm-dot { margin: 0 5px 0 0; }
.lm-dot.lm-in { background: #17804a; } .lm-dot.lm-out { background: #b3261e; } .lm-dot.lm-stale, .lm-dot.lm-none { background: #8a96a3; }
.lm-pin { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .45); color: #fff; font: 700 11px/26px var(--font); text-align: center; background: #8a96a3; }
.lm-pin.lm-in { background: #17804a; } .lm-pin.lm-out { background: #b3261e; } .lm-pin.lm-stale { background: #8a96a3; }
.lm-pop { font-size: 12.5px; line-height: 1.5; }
.lm-pop b { font-size: 13.5px; }
.clk-share { display: flex; align-items: center; gap: 6px; margin-top: 8px; text-align: left; }
.clk-share svg { width: 14px; height: 14px; flex: none; }
@media (max-width: 900px) {
  .lm-layout { grid-template-columns: 1fr; }
  .lm-map { height: 55vh; min-height: 320px; }
  .lm-side { max-height: none; min-height: 0; }
  .lm-list { max-height: 420px; }
}
.hero-clock .clk-share { color: #cfdde7; }

/* Dashboard: on duty now, per department */
.onduty .card-head { gap: 12px; flex-wrap: wrap; }
.onduty .card-head h2 { display: flex; align-items: center; gap: 8px; }
.od-total { background: var(--paid-bg, #e3f4ec); color: var(--paid, #157347); border-radius: 999px; padding: 1px 10px; font-size: 15px; }
.onduty .card-head .cell-sub { flex: 1; }
.od-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; padding: 14px 18px 18px; }
.od-tile { display: block; border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px 10px; color: inherit; background: var(--surface); transition: box-shadow .15s, transform .08s; }
.od-tile:hover { text-decoration: none; box-shadow: var(--shadow); transform: translateY(-1px); }
.od-tile.on { border-color: #9fd6bd; background: #f3fbf7; }
.od-name { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.od-n { font-size: 26px; font-weight: 800; line-height: 1.15; margin-top: 2px; }
.od-n span { font-size: 13px; font-weight: 500; color: var(--muted); }
.od-tile:not(.on) .od-n { color: var(--muted); }
.od-bar { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; margin: 6px 0 6px; }
.od-bar span { display: block; height: 100%; background: #2e9e6b; border-radius: 3px; }
.od-sub { font-size: 12px; color: var(--muted); }
.od-late { color: #b45309; font-weight: 600; }

/* GM force clock-out button on the Today list and live map */
.fo-btn { margin-top: 4px; white-space: nowrap; }

/* Weekly executive report (Reports page, GM only) */
.wr-card { margin-bottom: 16px; }
.wr-intro { margin: 0 0 12px; }
.wr-patrol { margin: 0 0 14px; }
.wr-patrol summary { cursor: pointer; font-weight: 600; font-size: 13.5px; padding: 6px 0; }
.wr-pgrid { margin: 10px 0; gap: 18px; }
.wr-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.wr-inc { margin: 6px 0 12px; }
.wr-actions { margin-bottom: 14px; }
.wr-frame { width: 100%; height: 900px; border: 1px solid var(--border-strong); border-radius: 8px; background: #eef1f4; display: block; }

/* Scan from printer */
.scan-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.scan { display: grid; gap: 14px; }
.scan-steps { margin: 0; padding-left: 22px; display: grid; gap: 7px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.scan-steps li::marker { color: var(--teal); font-weight: 700; }
.scan-alt { margin: 0; font-size: 13px; color: var(--muted); }
.scan-alt:empty { display: none; }
.scan-box { border: 1px solid var(--border); background: var(--surface-2); border-radius: 12px; padding: 14px 16px; display: grid; gap: 10px; justify-items: start; }
.scan-h { font-weight: 650; color: var(--ink); font-size: 14px; }
.scan-wait { display: flex; gap: 12px; align-items: center; }
.scan-found { display: flex; gap: 12px; align-items: center; width: 100%; }
.scan-found > svg { width: 28px; height: 28px; color: var(--teal); flex: none; }
.scan-found .grow { min-width: 0; overflow-wrap: anywhere; }
.scan-thumb { width: 56px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); flex: none; background: #fff; }

/* Dashboard: waiting for your approval */
.gq .card-head h2 { display: flex; align-items: center; gap: 8px; }
.gq-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0; }
.gq-group { padding: 12px 20px 14px; border-top: 1px solid var(--line, #e6e9ee); }
.gq-gh { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.gq-gh .btn { margin-left: auto; }
.gq-list { list-style: none; margin: 0; padding: 0; }
.gq-list li a { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 7px 0; border-bottom: 1px dashed var(--line, #e6e9ee); color: inherit; text-decoration: none; }
.gq-list li:last-child a { border-bottom: 0; }
.gq-list li a:hover .gq-who { text-decoration: underline; }
.gq-who { font-weight: 600; }
.gq-what { grid-column: 1; }
.gq-age { grid-column: 2; grid-row: 1; white-space: nowrap; }
.gq-more a { display: block; padding-top: 6px; }
.gq-ok { display: flex; align-items: center; gap: 12px; }
.gq-ok svg { width: 22px; height: 22px; color: var(--ok, #15803d); flex: none; }
/* Approvals line inside the "Staff on the books" banner */
.hero-gq:empty { display: none; }
.hero-gq { margin-top: 12px; }
.gq-pill { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 12px; border-radius: 999px; background: rgba(245, 158, 11, 0.16); border: 1px solid rgba(245, 158, 11, 0.45); color: #fde68a; font-size: 13px; }
.gq-pill svg { width: 15px; height: 15px; flex: none; }
.gq-pill b { color: #fff; font-weight: 600; }
.gq-pill a { color: #fde68a; text-decoration: none; }
.gq-pill a:hover { text-decoration: underline; }
.gq-pill .gq-go { color: #fff; font-weight: 600; }

/* ---- day detail dialog (timesheet cells) ---- */
td.ts-click { cursor: pointer; } td.ts-click:hover { box-shadow: inset 0 0 0 2px var(--teal); } td.ts-click:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
td.ts-click .ts-flag { cursor: pointer; }
.de-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 13.5px; }
.de-date { font-weight: 500; font-size: 14px; }
.de-h { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 0 8px; }
.de-prob { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.de-prob li { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-radius: 9px; font-size: 13.5px; border: 1px solid var(--pending-bd); background: var(--pending-bg); color: #7a4706; }
.de-prob li.bad { border-color: var(--suspended-bd); background: var(--suspended-bg); color: #8b1c16; }
.de-prob li.info { border-color: var(--approved-bd); background: var(--approved-bg); color: #0a4e78; }
.de-prob li svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.de-ev { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; font-size: 13.5px; }
.de-ev.rej { opacity: .7; }
.de-ev-top { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; } .de-time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; }
.de-line { margin-top: 4px; } .de-btns { margin-top: 8px; }
.de-form:not(:empty) { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.de-form .btn { margin-top: 10px; } .de-form .cell-sub { margin-top: 6px; }

/* ---- staff notices: phone gate (staff side) ---- */
.ntc-app { padding: 0 0 calc(150px + env(safe-area-inset-bottom)); }
.ntc-screen { position: relative; padding: 0 18px; }
.ntc-band { height: 8px; margin: 0 -18px 14px; background: var(--teal); }
.ntc-screen.urgent .ntc-band { background: #c8281f; } .ntc-screen.important .ntc-band { background: #d98a12; }
.ntc-top { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.ntc-top .brand-name { color: var(--navy); } .ntc-top .brand-sub { color: var(--muted); } .ntc-top .brand-mark { background: var(--navy); color: #fff; }
.ntc-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ntc-count { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.ntc-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; padding: 4px 11px; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase; background: var(--teal-soft); color: var(--teal-2); }
.ntc-badge svg { width: 15px; height: 15px; }
.ntc-badge.urgent { background: #c8281f; color: #fff; } .ntc-badge.important { background: #fbe3b0; color: #7a4706; }
.ntc-title { font-size: 28px; line-height: 1.2; margin: 14px 0 8px; color: var(--navy); overflow-wrap: anywhere; }
.ntc-screen.urgent .ntc-title { color: #a01f18; }
.ntc-from { font-size: 14px; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--border); line-height: 1.6; }
.ntc-from b { color: var(--ink); }
.ntc-body { font-size: 19px; line-height: 1.55; color: var(--ink); padding: 16px 0 8px; overflow-wrap: anywhere; }
.ntc-end { height: 1px; }
.ntc-foot { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px; padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(15,31,46,.08); z-index: 5; }
.ntc-btn { display: flex; gap: 10px; align-items: center; justify-content: center; width: 100%; font: inherit; font-size: 21px; font-weight: 750; padding: 20px; border-radius: 16px; border: 0; color: #fff; background: var(--paid); cursor: pointer; }
.ntc-btn svg { width: 24px; height: 24px; }
.ntc-btn:disabled { background: #9aa8b4; cursor: default; }
.ntc-hint { text-align: center; font-size: 13px; color: var(--muted); margin-top: 8px; } .ntc-hint.bad { color: var(--suspended); font-weight: 650; }
.ntc-screen.preview .ntc-foot, .ntc-screen.preview .ntc-btn { position: static; transform: none; }
.ntc-screen.preview .ntc-foot { padding: 10px 0 0; background: none; border: 0; box-shadow: none; max-width: none; }

/* ---- staff notices: HR tab ---- */
.nt-prog { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.nt-bar { flex: 1; height: 8px; background: var(--draft-bg); border-radius: 99px; overflow: hidden; min-width: 70px; }
.nt-bar i { display: block; height: 100%; background: var(--teal); border-radius: 99px; }
.nt-bar.done i { background: var(--paid); }
.nt-prog span { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.nt-pri { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 6px; letter-spacing: .04em; text-transform: uppercase; background: var(--teal-soft); color: var(--teal-2); }
.nt-pri.urgent { background: #c8281f; color: #fff; } .nt-pri.important { background: #fbe3b0; color: #7a4706; }
table.data tr.nt-row { cursor: pointer; } table.data tr.nt-row:hover td { background: var(--surface-2); }
.nt-form { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 26px; align-items: start; }
.nt-fields { display: grid; gap: 14px; }
.nt-pick { border: 1px solid var(--border-strong); border-radius: 10px; padding: 8px; max-height: 210px; overflow: auto; display: grid; gap: 2px; background: #fff; }
.nt-pick label { display: flex; gap: 9px; align-items: center; padding: 5px 8px; border-radius: 7px; cursor: pointer; font-size: 13.5px; }
.nt-pick label:hover { background: var(--surface-2); }
.nt-pick input { accent-color: var(--teal); width: 16px; height: 16px; }
.nt-pick .n { margin-left: auto; color: var(--muted); font-size: 12px; }
.nt-radio { display: flex; gap: 8px; flex-wrap: wrap; }
.nt-radio label { display: inline-flex; gap: 7px; align-items: center; padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: 9px; cursor: pointer; font-weight: 600; font-size: 13.5px; background: #fff; }
.nt-radio label:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); color: var(--teal-2); }
.nt-radio input { accent-color: var(--teal); }
.nt-sel { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.nt-phone-wrap { position: sticky; top: 12px; }
.nt-phone { width: 300px; margin: 0 auto; border: 9px solid #17212b; border-radius: 34px; background: #fff; overflow: hidden; box-shadow: var(--shadow-lg); }
.nt-phone-in { height: 560px; overflow: hidden; position: relative; }
.nt-phone .ntc-screen { padding: 0 14px; } .nt-phone .ntc-band { margin: 0 -14px 10px; height: 7px; }
.nt-phone .ntc-top { margin-bottom: 10px; } .nt-phone .ntc-top .brand-name { font-size: 11px; } .nt-phone .ntc-top .brand-sub { font-size: 10px; }
.nt-phone .ntc-top .brand-mark { width: 30px; height: 30px; } .nt-phone .ntc-top .brand-mark svg { width: 16px; height: 16px; }
.nt-phone .ntc-count { font-size: 10px; } .nt-phone .ntc-badge { font-size: 10px; padding: 3px 8px; }
.nt-phone .ntc-title { font-size: 20px; margin: 10px 0 6px; } .nt-phone .ntc-from { font-size: 11.5px; padding-bottom: 9px; }
.nt-phone .ntc-body { font-size: 14px; padding-top: 10px; }
.nt-phone .ntc-btn { font-size: 15px; padding: 13px; border-radius: 12px; } .nt-phone .ntc-btn svg { width: 18px; height: 18px; }
.nt-phone .ntc-hint { font-size: 10.5px; }
.nt-phone-cap { text-align: center; font-size: 12px; color: var(--muted); margin-top: 8px; }
.nt-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.nt-people h3 { margin: 0 0 8px; font-size: 14px; }
.nt-msg { white-space: pre-wrap; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
@media (max-width: 900px) { .nt-form, .nt-people { grid-template-columns: 1fr; } .nt-phone-wrap { position: static; } }
.nt-people > .card { margin: 0; align-self: start; }
.nt-people .table-wrap { max-height: 420px; overflow: auto; }

/* Attendance › Face check (Oct 2026) */
.fa-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.fa-tile { background: var(--card, #fff); border: 1px solid var(--line, #e5e1dc); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.fa-tile b { font-size: 26px; line-height: 1.1; }
.fa-tile span { font-weight: 600; }
.fa-tile small { color: var(--mute, #6b6b6b); }
.fa-tile.warn b { color: #9a6200; } .fa-tile.bad b { color: #b42318; }
.fa-thr { font-size: 20px; min-width: 52px; text-align: center; }
.fa-consent { display: inline-flex; margin-right: 8px; font-size: 13px; }
.ok-t { color: #0f7a3f; } .bad-t { color: #b42318; }
.seg a { padding: 7px 12px; border-radius: 7px; font-size: 13px; font-weight: 550; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.seg a.on { background: var(--navy); color: #fff; }

/* ---- My file, Ask Ello, KPIs & reviews, staff copies (Oct 2026) ---- */
.clk-nav.four { grid-template-columns: repeat(4, 1fr); }
.clk-top .ask-btn { color: var(--teal); background: var(--teal-soft); border-color: #c4e3e5; margin-right: 4px; }
.clk-top .ask-btn.on { background: var(--teal); color: #fff; }
.mf-hero { background: linear-gradient(160deg, var(--navy), var(--navy-2)); color: #fff; border: 0; display: flex; gap: 18px; align-items: center; }
.mf-ring-wrap { position: relative; width: 96px; height: 96px; flex: none; }
.mf-ring { width: 96px; height: 96px; }
.mf-ring circle { fill: none; stroke-width: 9; }
.mf-ring .bg { stroke: rgba(255,255,255,.14); }
.mf-ring .fg { stroke: var(--gold); stroke-linecap: round; }
.mf-ring-n { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; font-weight: 800; }
.mf-eyebrow { font-size: 13px; color: #b9cfdb; }
.mf-band { font-size: 21px; font-weight: 800; margin: 2px 0 4px; }
.mf-change { font-size: 13.5px; color: #b9cfdb; }
.mf-change.up { color: #7fd8b4; } .mf-change.down { color: #f2a99f; }
.mf-h { margin: 0 0 6px; font-size: 16px; }
.mf-kpi { padding: 11px 0; border-bottom: 1px solid var(--border); }
.mf-kpi:last-child { border-bottom: 0; }
.mf-kpi-top { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.mf-val { font-weight: 600; }
.mf-kpi-sub { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 13px; margin: 3px 0 7px; }
.mf-kpi-sub span:last-child { text-align: right; }
.mf-bar { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.mf-bar i { display: block; height: 100%; background: var(--teal); border-radius: 99px; }
.mf-bar i.warn { background: var(--gold); }
.mf-auto { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: var(--teal-2); background: var(--teal-soft); border-radius: 6px; padding: 1px 6px; }
.mf-row { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--border); padding: 11px 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.mf-row:last-child { border-bottom: 0; }
.mf-row .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mf-ico { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); display: grid; place-items: center; flex: none; color: var(--navy); }
.mf-ico svg { width: 18px; height: 18px; }
.mf-chev { color: var(--muted); font-size: 22px; }
.mf-pill { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 8px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.mf-pill.gold { background: #fbefd7; color: #8a6420; } .mf-pill.green { background: #e3f4ea; color: #1e7a45; }
.mf-back { margin: 0 0 10px; }
.mf-eyebrow2 { color: var(--muted); font-size: 13.5px; }
.mf-h2 { margin: 4px 0 12px; font-size: 21px; }
.mf-scale, .mf-rate { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px; }
.mf-scale span, .mf-rate button { border: 1px solid var(--border); border-radius: 10px; text-align: center; padding: 9px 0; font-weight: 700; background: var(--surface); font: inherit; font-weight: 700; }
.mf-scale span.on, .mf-rate button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.mf-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mf-tiles div { border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; background: var(--surface-2); }
.mf-tiles span { display: block; color: var(--muted); font-size: 12.5px; }
.mf-tiles b { font-size: 20px; }
.mf-outcome { margin-top: 10px; font-weight: 700; color: var(--teal-2); }
.mf-quote { border: 1px solid var(--border); background: var(--surface-2); border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; }
.mf-comment { width: 100%; }
.mf-ack { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-top: 10px; cursor: pointer; }
.mf-ack input { width: 20px; height: 20px; accent-color: var(--teal); margin-top: 2px; flex: none; }
.mf-ack > span { display: flex; flex-direction: column; gap: 3px; }
.mf-lock { display: flex; gap: 10px; background: #fbf3e2; border: 1px solid #ecd9b0; border-radius: 12px; padding: 12px; margin-bottom: 12px; font-size: 14px; }
.mf-lock svg { width: 20px; height: 20px; flex: none; color: #8a6420; margin-top: 1px; }
.mf-paper { background: #fff; color: #111; border: 1px solid var(--border); border-radius: 6px; padding: 18px 16px; margin-bottom: 12px; font-family: Georgia, 'Times New Roman', serif; font-size: 13.5px; line-height: 1.55; box-shadow: var(--shadow-sm); }
.mf-paper p { margin: 0 0 4px; }
.mf-redact { display: inline-block; height: 1.05em; background: #111; vertical-align: -0.15em; border-radius: 1px; min-width: 2.2em; }
.mf-page-img { width: 100%; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 12px; background: #fff; }
.mf-foot { margin: 4px 0 6px; }
.ak-chat { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.ak-bot, .ak-me { max-width: 88%; border-radius: 16px; padding: 11px 13px; font-size: 14.5px; line-height: 1.45; }
.ak-bot { background: var(--surface); border: 1px solid var(--border); align-self: flex-start; }
.ak-me { background: var(--navy); color: #fff; align-self: flex-end; }
.ak-src { border-top: 1px solid var(--border); margin-top: 9px; padding-top: 7px; font-size: 12.5px; color: var(--muted); }
.ak-src b { color: var(--teal-2); }
.ak-sugg { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin-top: 10px; }
.ak-chip { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 13.5px; font-weight: 650; color: var(--navy); cursor: pointer; text-align: left; }
.ak-actions { display: flex; gap: 8px; margin-top: 10px; }
.ak-form { display: flex; gap: 8px; margin-bottom: 12px; }
.ak-form .input { flex: 1; }
.ak-hr { padding: 8px 0; border-bottom: 1px solid var(--border); }
.ak-hr:last-child { border-bottom: 0; }
.kp-wrap { max-width: 760px; }
.kp-head { display: flex; gap: 12px; align-items: center; margin: 16px 0 12px; flex-wrap: wrap; }
.kp-head h2 { margin: 0; font-size: 20px; }
.kp-head .input.sm { width: auto; }
.kp-card { margin-bottom: 14px; padding: 16px; }
.kp-person { display: flex; align-items: center; justify-content: space-between; }
.kp-person h3 { margin: 0; font-size: 18px; }
.kp-state { font-size: 12.5px; font-weight: 700; background: #fbefd7; color: #8a6420; padding: 3px 10px; border-radius: 8px; }
.kp-state.sent { background: var(--teal-soft); color: var(--teal-2); }
.kp-table, .kp-team { width: 100%; border-collapse: collapse; margin-top: 10px; }
.kp-table th, .kp-team th { text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 6px; border-bottom: 1px solid var(--border); }
.kp-table td, .kp-team td { padding: 10px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.kp-table .input.sm { max-width: 130px; }
.kp-rate { display: inline-grid; grid-template-columns: repeat(5, 32px); gap: 5px; }
.kp-rate button { height: 32px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-weight: 700; cursor: pointer; }
.kp-rate button.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.kp-fields { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.kp-fields label { font-weight: 600; font-size: 13.5px; }
.kp-score { margin: 12px 0 4px; }
.kp-btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.kp-btns .btn.primary { flex: 1.4; } .kp-btns .btn { flex: 1; }
.kp-team tbody tr { cursor: pointer; }
.kp-team tbody tr.on { background: var(--teal-soft); }
.kp-band { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 8px; border: 1px solid currentColor; }
.kp-band i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.kp-band.green { color: #1e7a45; background: #e9f6ee; } .kp-band.red { color: #b3261e; background: #fdeceb; }
.kp-band.none { color: var(--ink-2); background: var(--surface-2); border-color: transparent; }
.kt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; margin-top: 12px; }
.kt-list { list-style: none; margin: 0; padding: 0 16px; }
.kt-list li { display: flex; gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); }
.kt-list li .grow { display: flex; flex-direction: column; gap: 2px; }
.kt-list li.off { opacity: .55; }
.kt-scorers { font-size: 13.5px; }
.kt-deps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sc-list { list-style: none; margin: 10px 0 0; padding: 0; }
.sc-list li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 9px 0; border-bottom: 1px solid var(--border); }
.sc-list li .grow { display: flex; flex-direction: column; min-width: 180px; }
.sc-preview { max-height: 55vh; overflow: auto; background: var(--surface-2); padding: 12px; border-radius: 10px; margin: 12px 0; }
.aq-q { font-size: 15px; margin: 8px 0; }
@media (max-width: 640px) { .kt-grid { grid-template-columns: 1fr; } .kp-rate { grid-template-columns: repeat(5, 28px); } .kp-table .input.sm { max-width: 100px; } }
.mf-h.mt-16 { margin-top: 16px; }
.kt-list li .grow > .mf-auto, .kt-list li .grow > .tag { align-self: flex-start; }
.kt-grid > .card { margin: 0; }
.fa-signed { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.fa-signed .input.sm { width: auto; }
.mb-0 { margin-bottom: 0; }

/* ---------- Pay & rewards (Oct 2026) ---------- */
.py-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.py-lock { display: flex; gap: 8px; align-items: center; background: #f6f2e9; border: 1px solid #eadfc8; color: #6b5320; border-radius: 12px; padding: 9px 12px; font-size: 13px; margin: 16px 0; }
.py-warn { color: #a8620a; }
.py-bad { color: var(--suspended); }
.py-band { position: relative; height: 10px; width: 170px; background: var(--draft-bg); border-radius: 6px; }
.py-band.wide { width: 100%; margin-top: 8px; }
.py-band i { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, #bfe6ee, #7fcfdf); border-radius: 6px; }
.py-band u { position: absolute; top: -4px; width: 4px; height: 18px; margin-left: -2px; border-radius: 2px; background: var(--ink); text-decoration: none; }
.py-band u.out { background: var(--suspended); }
.py-list { list-style: none; margin: 0; padding: 0; }
.py-list > li { display: flex; align-items: flex-start; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.py-list > li:first-child { border-top: 0; }
.py-flags { margin: 6px 0; padding-left: 18px; color: #8a6420; font-size: 13px; }
.py-lines { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.py-line { display: grid; grid-template-columns: 170px 1fr 130px auto; gap: 6px; align-items: center; }
.py-total { margin-top: 8px; font-size: 14px; }
.py-rules { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-end; margin: 10px 0; }
.py-rule { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.py-rule .input { width: 70px; }
.py-rule .input-group b, .py-pct b { display: flex; align-items: center; padding: 0 8px; border: 1px solid var(--border-strong); border-left: 0; border-radius: 0 9px 9px 0; background: var(--surface-2); font-size: 12.5px; }
.py-pct { justify-content: flex-end; }
.py-pct .input { width: 64px; }
.py-budget { display: flex; gap: 16px; margin: 14px 0 6px; }
.py-bar { height: 12px; background: var(--draft-bg); border-radius: 8px; overflow: hidden; margin: 8px 0 4px; }
.py-bar.sm { height: 8px; width: 140px; margin: 0; }
.py-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #13A7C0, #3E7CC0); }
.py-bar.over i { background: linear-gradient(90deg, #F6B44A, #E2553F); }
.py-rule-box { margin-top: 10px; }
.py-rule-box summary { cursor: pointer; font-size: 13px; }
.py-total-row td { background: var(--surface-2); }
.py-amt { width: 110px; }
.py-file { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; }
.py-comp td { padding: 7px 4px; }
.py-facts { margin-top: 16px; background: var(--surface-2); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; }
.py-facts ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.8; }
.py-tl { list-style: none; margin: 0; padding: 0; }
.py-tl li { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--border); }
.py-tl li:last-child { border-bottom: 0; }
.py-tl .dot { width: 12px; height: 12px; border-radius: 50%; background: #9aa8b5; margin-top: 4px; flex: none; }
.py-tl li.up .dot { background: #13A7C0; }
.py-tl li.bonus .dot { background: #F6B44A; }
.py-tl .cell-sub { display: block; }
.py-amt-t { font-weight: 700; margin-left: 4px; }
.mf-pay { border-left: 4px solid #F6B44A; }
@media (max-width: 760px) { .py-file { grid-template-columns: 1fr; } .py-line { grid-template-columns: 1fr 1fr; } .py-band { width: 120px; } }
/* ---------- Phase 2: staff app offline mode ---------- */
.offline-bar { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--pending-bg); border: 1px solid var(--pending-bd); color: #7a4706; font-size: 13.5px; margin-bottom: 12px; }
.offline-bar svg { width: 22px; height: 22px; flex: none; color: var(--pending); }
.offline-bar b { display: block; font-size: 14px; }
.queue-item { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.queue-item:last-child { border-bottom: 0; }
.queue-item > svg { width: 18px; height: 18px; color: var(--pending); flex: none; }
.queue-item .grow { flex: 1; min-width: 0; }
.check-ok { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; color: var(--paid); font-weight: 650; margin-right: 8px; }
.check-ok svg { width: 13px; height: 13px; }

/* ---------- Phase 2: staff app tabs (short labels, as many columns as tabs), News ---------- */
.clk-nav { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; }
.clk-nav button { font-size: 11.5px; padding: 7px 2px; min-width: 0; position: relative; }
.clk-nav button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.clk-nav .nav-dot { position: absolute; top: 3px; left: calc(50% + 7px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--suspended); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.clk-card.news { padding: 14px 16px; }
.clk-card.news.unread { border-color: var(--pending-bd); box-shadow: 0 0 0 3px var(--pending-bg); }
.news-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.clk-card.news h3 { font-size: 16px; margin: 0 0 6px; }
.news-body { margin: 0; color: var(--ink-2); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.news-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.read-mark { display: inline-flex; gap: 5px; align-items: center; color: var(--paid); font-size: 12.5px; font-weight: 650; }
.read-mark svg { width: 15px; height: 15px; }

/* ---------- Phase 2: notices — WhatsApp share (WhatsApp green on this one button only), paper reads, print ---------- */
.btn.wa { background: #1f8f4e; border-color: #1f8f4e; color: #fff; }
.btn.wa:hover { background: #197a42; border-color: #197a42; }
td.nt-tick { width: 34px; }
td.nt-tick input { width: 18px; height: 18px; }
.print-sheet { display: none; }
@media print {
  body.print-notice > *:not(.print-sheet) { display: none !important; }
  body.print-notice { background: #fff; }
  body.print-notice .print-sheet { display: block; padding: 0; font-size: 12.5px; color: #000; }
  .print-sheet .brand-mark { background: var(--navy); color: #fff; }
  .print-sheet h1 { font-size: 22px; margin: 16px 0 4px; }
  .print-sheet .ps-body { white-space: pre-wrap; font-size: 14px; margin: 14px 0; }
  .print-sheet .ps-sign { width: 100%; border-collapse: collapse; margin-top: 10px; }
  .print-sheet .ps-sign th, .print-sheet .ps-sign td { border: 1px solid #999; padding: 9px 6px; text-align: left; }
  .print-sheet .ps-sign th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; background: #f1f3f5; }
  .print-sheet .ps-sign td:last-child { width: 36%; }
  @page { size: A4; margin: 16mm; }
}
.nt-detail-head { flex-wrap: wrap; row-gap: 8px; }
.nt-people .tag { white-space: nowrap; }

/* ---------- Phase 2: staff Shifts tab, swap sheet, Approvals inbox ---------- */
.sh-day { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); min-height: 58px; }
.sh-day:last-of-type { border-bottom: 0; }
.sh-date span { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.sh-date b { display: block; font-size: 17px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sh-day.today .sh-date b { color: var(--teal); }
.sh-time { font-weight: 650; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.sh-day.off .sh-time { color: var(--muted); font-weight: 550; }
.icon-btn { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn svg { width: 18px; height: 18px; }
svg.ic-inline { width: 14px; height: 14px; vertical-align: -2px; }
.open-sh { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: var(--teal-soft); margin-top: 8px; }
.open-sh .grow { flex: 1; min-width: 0; } .open-sh b { font-size: 15px; }
.req-row { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.req-row:last-child { border-bottom: 0; } .req-row .grow { flex: 1; min-width: 0; }
.steps { display: flex; gap: 4px; margin-top: 6px; }
.steps i { height: 4px; flex: 1; border-radius: 99px; background: var(--border); }
.steps i.done { background: var(--paid); } .steps i.now { background: var(--pending); }
.rule-ok, .rule-bad { display: inline-flex; gap: 5px; align-items: flex-start; font-size: 12.5px; font-weight: 650; }
.rule-ok { color: var(--paid); } .rule-bad { color: var(--suspended); }
.rule-ok svg, .rule-bad svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.ack-card { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(12,122,131,.12); }
.bsheet-bg { position: fixed; inset: 0; background: rgba(8,24,38,.5); z-index: 90; animation: fade .15s ease; }
.bsheet { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px; background: var(--surface); border-radius: 20px 20px 0 0; box-shadow: var(--shadow-lg);
  padding: 10px 18px calc(22px + env(safe-area-inset-bottom)); max-height: 88vh; overflow: auto; z-index: 91; }
.bsheet::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 99px; background: var(--border-strong); margin: 0 auto 14px; }
.bsheet h2 { font-size: 20px; }
.sheet-help { margin-bottom: 10px; }
.pick { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--border-strong); border-radius: 12px; margin-bottom: 8px; cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.pick.on { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(12,122,131,.15); }
.pick.no { opacity: .62; background: var(--surface-2); cursor: not-allowed; }
.pick .grow { flex: 1; min-width: 0; }
.pick .radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-strong); flex: none; }
.pick.on .radio { border: 6px solid var(--teal); }
.flow { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); margin-top: 12px; justify-content: center; flex-wrap: wrap; }
.flow b { color: var(--ink-2); } .flow svg { width: 14px; height: 14px; flex: none; }
.mb-14 { margin-bottom: 14px; }
.appr-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.card.appr { padding: 14px 16px; }
.appr-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 4px; }
.appr-who { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; min-width: 0; }
.appr-who svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.appr-kv.kv { grid-template-columns: 92px 1fr; gap: 6px 10px; font-size: 13px; margin: 10px 0; }
.appr-trail { margin-top: 4px; }
.card.appr .btn-row .btn { flex: 1; }

/* ---------- Phase 2: asset register (manager page + staff "confirm you received") ---------- */
.asset-row { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); }
.asset-row:last-child { border-bottom: 0; }
.asset-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--teal-soft); color: var(--teal-2); display: grid; place-items: center; flex: none; }
.asset-ic svg { width: 18px; height: 18px; }
.asset-row .grow { flex: 1; min-width: 0; display: block; }
.asset-row b { font-size: 14px; display: block; overflow-wrap: anywhere; }
.asset-row .cell-sub { display: block; }
.as-list { padding: 2px 16px; }
button.asset-row { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--border); font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.asset-row:last-child { border-bottom: 0; }
button.asset-row:hover b { color: var(--teal-2); }
.as-counts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.as-counts .chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.as-counts .chip .cnt { font-size: 11px; font-weight: 700; margin-left: 4px; opacity: .8; }
.filters { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.filters .input { flex: 1; min-width: 150px; }

/* ---------- Phase 2: onboarding / exit checklists ---------- */
.ob-bar { height: 10px; background: var(--border); border-radius: 99px; overflow: hidden; margin: 2px 0 6px; }
.ob-bar i { display: block; height: 100%; background: var(--teal); border-radius: 99px; }
.ck-card .card-head { justify-content: space-between; }
.ck-tasks { list-style: none; margin: 10px 0 0; padding: 0; }
.ck-tasks.card-pad { margin: 0; }
.task { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.task:last-child { border-bottom: 0; }
.task .box { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--border-strong); display: grid; place-items: center; margin-top: 1px; }
.task.done .box { background: var(--paid); border-color: var(--paid); color: #fff; }
.task .box svg { width: 13px; height: 13px; }
.task .ck-box { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--paid); cursor: pointer; }
.task .t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; }
.task .t .tt { overflow-wrap: anywhere; }
.task .t .auto, .task .t .cell-sub, .task .t .link-btn { flex-basis: 100%; }
.task.done .tt { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--border-strong); }
.task.late .due { color: var(--suspended); font-weight: 650; }
.owner { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; padding: 1px 6px; border-radius: 5px; background: var(--draft-bg); color: var(--ink-2); text-transform: uppercase; }
.task .due { font-size: 12px; color: var(--muted); white-space: nowrap; }
.task .auto { font-size: 11.5px; color: var(--teal-2); }
.ct-row { display: grid; grid-template-columns: minmax(160px, 2fr) 130px 80px minmax(150px, 1.6fr) 36px; gap: 6px; margin-top: 6px; align-items: center; }
@media (max-width: 720px) { .ct-row { grid-template-columns: 1fr 1fr; } .ct-row input[data-f="title"], .ct-row select[data-f="auto_key"] { grid-column: 1 / -1; } }

/* ---------- Phase 2 + My file: six staff tabs (Clock in · Shifts · News · Leave · My file · Handbook) ---------- */
.clk-nav.six { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: row; gap: 1px; padding-left: 4px; padding-right: 4px; }
.clk-nav.six button { font-size: 11px; padding: 7px 1px; letter-spacing: -.01em; min-width: 0; min-height: 52px; }
.clk-nav.six button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
.clk-nav.six button svg { width: 21px; height: 21px; }
@media (max-width: 340px) { .clk-nav.six button { font-size: 10px; } .clk-nav.six button svg { width: 20px; height: 20px; } }

/* ---------- Phase 3: roster rule alerts (warnings only) ---------- */
.ra-card .ra-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
.ra-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.ra-item:last-of-type { border-bottom: 0; }
.ra-item > svg { width: 18px; height: 18px; color: var(--pending); flex: none; margin-top: 2px; }
.ra-item.n > svg { color: var(--muted); }
.ra-item .grow { flex: 1; min-width: 0; }
table.roster td.rc.ralert { box-shadow: inset 0 0 0 2px var(--pending); background: var(--pending-bg); }
table.roster td.rn.ralert-row { box-shadow: inset 3px 0 0 var(--pending); }
table.roster td.rn.ralert-row::after { content: " ⚠"; color: var(--pending); }
@keyframes ra-flash { from { box-shadow: inset 0 0 0 3px var(--teal); } to { box-shadow: inset 0 0 0 2px var(--pending); } }
table.roster td.rc.ra-focus { animation: ra-flash 1.6s ease-out 2; }
@media print { table.roster td.rc.ralert { box-shadow: none; background: none; } table.roster td.rn.ralert-row::after { content: ""; } }
.ra-notes { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.ra-notes summary { cursor: pointer; font-weight: 600; color: var(--muted); padding: 6px 0; }

/* ===== Phase 3: labour cost (GM only) and shared Phase 3 pieces ===== */
.p3-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.p3-kpi { background: var(--surface); border-radius: var(--panel-r, 14px); box-shadow: var(--sky-shadow, var(--shadow-sm)); padding: 12px 14px; }
.p3-kpi span { display: block; font-size: 12px; color: var(--ink-3, var(--muted)); letter-spacing: .02em; }
.p3-kpi b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.p3-kpi small { font-size: 12px; color: var(--ink-3, var(--muted)); }
@media (min-width: 900px) { .p3-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.p3-dept { padding: 14px 16px; margin-bottom: 10px; }
.p3-dept-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.p3-dept-top b { font-size: 16px; }
.p3-money { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.p3-bars { display: grid; gap: 4px; margin: 10px 0 8px; }
.p3-bar { height: 8px; border-radius: 99px; background: var(--line, var(--border)); overflow: hidden; }
.p3-bar i { display: block; height: 100%; border-radius: 99px; background: var(--sea-ink, var(--teal)); }
.p3-bar.r i { background: var(--line-2, #b9c6cf); }
.p3-dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; font-size: 12.5px; color: var(--ink-3, var(--muted)); }
.p3-dl b { display: block; color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.p3-dept .cell-sub svg { width: 13px; height: 13px; vertical-align: -2px; }
.p3-gm { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--ink-3, var(--muted)); margin: -6px 0 14px; }
.p3-gm svg { width: 14px; height: 14px; }
.p3-occ td input { width: 64px; padding: 6px 8px; font: inherit; font-size: 14px; border: 1px solid var(--line-2, var(--border-strong)); border-radius: 8px; text-align: right; }
.p3-ed { padding: 4px 9px; font-size: 12.5px; color: var(--sea-ink, var(--teal-2)); }
.p3-ed svg { width: 14px; height: 14px; }
.p3-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.p3-h h2 { margin: 0; }
.p3-occ-grid { display: grid; grid-template-columns: 64px repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center; }
.p3-occ-grid > b { font-size: 12px; color: var(--ink-3, var(--muted)); text-transform: uppercase; letter-spacing: .04em; text-align: right; }
.p3-occ-grid > span { font-weight: 600; font-size: 14px; white-space: nowrap; }
.p3-occ-grid .input { text-align: right; padding: 8px 10px; min-width: 0; }

/* ===== Phase 3: toggles and run panels ===== */
.p3-switch { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--pending-bg); border: 1px solid var(--pending-bd); color: #7a4706; font-size: 13.5px; margin-bottom: 14px; }
.p3-switch .grow { flex: 1; min-width: 0; }
.p3-switch .tg { width: 44px; height: 26px; border-radius: 99px; background: #cfd7df; position: relative; flex: none; }
.p3-switch .tg::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: left .15s; }
.p3-switch.on { background: var(--teal-soft); border-color: transparent; color: var(--ink); }
.p3-switch.on .tg { background: var(--sea-ink, var(--teal)); }
.p3-switch.on .tg::after { left: 21px; }
.p3-run { padding: 12px 16px; border-top: 1px solid var(--border); }
.p3-sc .p3-kpis { margin: 8px 0; }

/* ===== Phase 3: hiring (public vacancy page + pipeline) ===== */
body.jobs-body { background: var(--bg, #f4f6f8); }
.p3-job { max-width: 480px; margin: 0 auto; padding: 22px 16px 40px; min-height: 100vh; }
.p3-job .brand-row { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.p3-job .bm { width: 40px; height: 40px; border-radius: 11px; background: var(--navy); padding: 6px; }
.p3-job .jb-name { letter-spacing: .08em; font-size: 12.5px; }
.p3-job h1 { font-size: 28px; margin: 6px 0 4px; }
.p3-job h2 { margin: 0 0 10px; }
.p3-job .jb-desc { margin: 14px 0; line-height: 1.55; }
.p3-job .field { margin-bottom: 12px; }
.p3-job .jb-block { display: block; }
.p3-file { display: flex; gap: 10px; align-items: center; padding: 14px; border: 2px dashed var(--line-2, var(--border-strong)); border-radius: 12px; color: var(--ink-2); cursor: pointer; }
.p3-file svg { width: 22px; height: 22px; flex: none; }
.jb-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.p3-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.p3-stages { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; }
.p3-stages .chip { white-space: nowrap; }
.p3-cand { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line, var(--border)); color: inherit; text-decoration: none; }
.p3-cand:last-child { border-bottom: 0; }
.p3-cand .grow { flex: 1; min-width: 0; }
.p3-score { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; font-size: 14px; margin: 8px 0; }
.p3-dots { display: flex; gap: 4px; }
.p3-dots button { width: 26px; height: 26px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line-2, var(--border-strong)); padding: 0; cursor: pointer; font-size: 11px; color: var(--muted); }
.p3-dots button.on { background: var(--sea-ink, var(--teal)); border-color: var(--sea-ink, var(--teal)); color: #fff; }
.p3-vac { padding: 4px 16px; }
.p3-vacard { display: block; color: inherit; text-decoration: none; }

/* ===== Phase 3: training ===== */
.p3-cert { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line, var(--border)); }
.p3-cert:last-child { border-bottom: 0; }
.p3-cert .ci { width: 38px; height: 38px; border-radius: 10px; background: var(--teal-soft); color: var(--teal-2); display: grid; place-items: center; flex: none; }
.p3-cert .ci svg { width: 18px; height: 18px; }
.p3-cert .grow { flex: 1; min-width: 0; }
.p3-lesson { line-height: 1.55; margin: 8px 0; }
.p3-q { font-size: 16px; font-weight: 600; margin: 0 0 12px; }
.p3-prog { display: flex; gap: 4px; margin: 4px 0 14px; }
.p3-prog i { flex: 1; height: 4px; border-radius: 99px; background: var(--line, var(--border)); }
.p3-prog i.d { background: var(--sea-ink, var(--teal)); }
.p3-quiz label { display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line-2, var(--border-strong)); border-radius: 12px; margin-bottom: 8px; font-size: 14.5px; cursor: pointer; }
.p3-quiz label.on { border-color: var(--sea-ink, var(--teal)); box-shadow: 0 0 0 3px rgba(12, 122, 131, .15); }
.p3-quiz input { position: absolute; opacity: 0; pointer-events: none; }
.p3-quiz .rd { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2, var(--border-strong)); flex: none; }
.p3-quiz .on .rd { border: 6px solid var(--sea-ink, var(--teal)); }
.p3-qed { border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.p3-qed .p3-opt { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.p3-qed .p3-opt .input { flex: 1; }

/* ===== Phase 3: data protection ===== */
.p3-count { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--suspended); }
.p3-count.over { animation: ra-flash 1.2s ease-in-out 3; }

/* ===== Upload Agent: "Read it for me" batch queue, page strip, people, history & pattern ===== */
.ua-more { font-weight: 500; color: var(--muted); }
.ua-qsum { font-size: 13px; color: var(--ink-2); padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ua-qsum[hidden] { display: none; }
.ua-afsw { font-size: 13px; color: var(--ink-2); }
.ua-afsw[hidden] { display: none; }
.ua-afsw .ua-afsw-l { align-items: center; }
.ua-retry { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ua-retry .ua-retry-btn { margin-left: auto; }
.ua-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-top: 12px; overflow: hidden; }
.ua-item:first-child { margin-top: 0; }
.ua-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); min-width: 0; }
.ua-head > svg { width: 16px; height: 16px; flex: none; color: var(--teal); }
.ua-head .ua-name { font-weight: 600; font-size: 13.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.ua-head .cell-sub { margin: 0; white-space: nowrap; }
.ua-head .ua-st { margin-left: auto; }
.ua-item[data-state="wait"] .ua-body:empty { display: none; }
.ua-body { padding: 14px; }
.ua-body > .loading { padding: 6px 0; }
.ua-form[hidden] { display: none; }
.ua-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.ua-pages-n { font-size: 12.5px; font-weight: 650; color: var(--ink-2); margin-right: 2px; }
.ua-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 9px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2); text-decoration: none; }
.ua-chip b { font-weight: 700; color: var(--teal-2); }
a.ua-chip:hover { border-color: var(--teal); }
.ua-chip.reporter { background: var(--teal-soft); border-color: transparent; }
.ua-chip.reporter b, .ua-chip.mentioned b { color: var(--ink); font-weight: 600; }
.ua-trunc { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; color: #7a4706; margin-top: 6px; }
.ua-trunc svg, .ua-notes svg, .ua-note svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.ua-notes { list-style: none; margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid var(--border-strong); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.ua-notes li { display: flex; gap: 8px; font-size: 13px; color: var(--ink-2); padding: 3px 0; }
.ua-notes svg { color: var(--muted); }
.ua-people, .ua-alts, .ua-pick, .ua-evs, .ua-aw { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.ua-lbl { font-size: 12px; color: var(--muted); }
.ua-alts .chip, .ua-pick .chip { font-size: 12px; padding: 3px 10px; }
.ua-pick { padding: 8px 10px; background: var(--pending-bg); border: 1px solid var(--pending-bd); border-radius: var(--radius-sm); }
.ua-pick .ua-lbl { color: #7a4706; font-weight: 600; width: 100%; }
.ua-off b, .ua-cm b { color: var(--ink); }
.ua-cm[hidden], .ua-draft[hidden] { display: none; }
.ua-draft { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.ua-draft .cell-sub { flex: 1; min-width: 200px; }
.ua-draft .btn svg, .ua-draft .cell-sub svg { width: 14px; height: 14px; }
.ua-hint { color: #7a4706; }
.ua-why { margin-top: 10px; font-size: 13px; }
.ua-why summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.ua-why ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); }
.ua-auto .btn-row { flex-wrap: wrap; }
/* History & pattern (GM + HR only) */
.ua-hist { margin-top: 14px; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--surface); }
.ua-hist-h { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.ua-hist-h h3 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 6px; color: var(--navy); }
.ua-hist-h h3 svg { width: 16px; height: 16px; color: var(--teal); }
.ua-next { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.ua-next-l { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ua-next-s { font-size: 15.5px; font-weight: 650; color: var(--navy); margin: 2px 0 4px; }
.ua-next-r { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.ua-flags { list-style: none; margin: 10px 0 0; padding: 0; }
.ua-flag { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; }
.ua-flag:first-child { border-top: 0; }
.ua-flag .tag { flex: none; margin-top: 1px; }
.ua-flag .grow { flex: 1; min-width: 0; }
.ua-ev { font-size: 12px; color: var(--teal-2); text-decoration: none; padding: 2px 8px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface-2); }
.ua-ev:hover { border-color: var(--teal); }
.ua-ctx { margin-top: 8px; font-size: 13px; }
.ua-ctx summary { cursor: pointer; font-weight: 600; color: var(--muted); padding: 4px 0; }
.ua-ctx .ua-flag { color: var(--ink-2); }
.ua-note { display: flex; gap: 6px; align-items: flex-start; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border-strong); font-size: 12.5px; color: var(--muted); }
@media (max-width: 700px) {
  .ua-head { flex-wrap: wrap; }
  .ua-head .ua-name { flex: 1 1 60%; }
  .ua-body { padding: 12px 10px; }
  .ua-hist { padding: 10px; }
  .ua-flag { flex-direction: column; gap: 4px; }
}

/* ---------- Interview guide (Hiring: pages/interview.js) ---------- */
.ig-candrow { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); }
.ig-candrow:last-child { border-bottom: 0; }
.ig-candrow .p3-cand { flex: 1; min-width: 0; border-bottom: 0; }
.ig-candact { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ig-acts { justify-content: flex-end; }
.ig-chip { white-space: nowrap; }
.ig-cv-off { background: var(--suspended-bg); color: var(--suspended); }

.ig-cand { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 16px; align-items: center; padding: 16px 20px; margin-bottom: 14px; }
.ig-av { width: 48px; height: 48px; font-size: 16px; }
.ig-cand h1 { font-size: 22px; }
.ig-cand-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.ig-cand-meta b { color: var(--ink); font-weight: 600; }
.ig-cand-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.ig-ctrl { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; margin-bottom: 14px; padding: 14px 20px; }
.ig-ctrl .field { min-width: 200px; }
.ig-time { flex: 1 1 260px; margin: 0 0 9px; }
.ig-draft { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ig-draft .grow { flex: 1; min-width: 200px; }

.ig-switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--ink-2); padding-bottom: 8px; position: relative; }
.ig-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ig-switch .tg { width: 40px; height: 24px; border-radius: 99px; background: var(--border-strong); position: relative; flex: none; transition: background .15s; }
.ig-switch .tg::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: left .15s; }
.ig-switch input:checked + .tg { background: var(--teal); }
.ig-switch input:checked + .tg::after { left: 19px; }
.ig-switch input:focus-visible + .tg { outline: 3px solid var(--focus); outline-offset: 2px; }
.ig-switch input:disabled + .tg { opacity: .45; }
.ig-switch.sm { padding-bottom: 0; font-size: 12.5px; }
.ig-switch.sm .tg { width: 34px; height: 20px; }
.ig-switch.sm .tg::after { width: 14px; height: 14px; }
.ig-switch.sm input:checked + .tg::after { left: 17px; }

.ig-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.ig-main { padding: 4px 20px 22px; min-width: 0; }
.ig-main.ig-busy { opacity: .55; pointer-events: none; }
.ig-recmain { min-width: 0; }
.ig-side { min-width: 0; position: sticky; top: 76px; }
.ig-sum-h { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.ig-step { padding-top: 20px; }
.ig-step-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ig-step-h h2 { font-size: 16px; }
.ig-num { font: 700 11.5px/1 var(--mono); color: #fff; background: var(--navy); border-radius: 5px; padding: 4px 6px; }
.ig-sub { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.ig-note { border-left: 3px solid var(--teal); background: var(--teal-soft); border-radius: 0 8px 8px 0; padding: 8px 12px; font-size: 13.5px; margin: 8px 0; }
.ig-note.warn { border-color: var(--pending); background: var(--pending-bg); color: #7a4706; }
.ig-p { font-size: 13.5px; margin: 6px 0; line-height: 1.5; }
.ig-lbl { display: block; margin: 14px 0 4px; }
.ig-closing { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; font-size: 13.5px; margin: 8px 0 0; }
.ig-crit { color: var(--suspended); font-weight: 600; }

.ig-ticks { list-style: none; margin: 0; padding: 0; }
.ig-ticks li { border-bottom: 1px solid var(--border); }
.ig-ticks label { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 9px 0; font-size: 13.5px; cursor: pointer; align-items: start; }
.ig-ticks input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--teal); }
.ig-ticks input:checked + span { color: var(--muted); }
.ig-ticks.ko input { accent-color: var(--suspended); }
.ig-ticks.ko input:checked + span { color: var(--suspended); font-weight: 650; }

.ig-mq { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; background: var(--surface); }
.ig-mq.scored { border-color: var(--border-strong); box-shadow: inset 3px 0 0 var(--teal); }
.ig-mq.skipped { background: var(--surface-2); }
.ig-mq.skipped .ig-qt { color: var(--muted); text-decoration: line-through; }
.ig-mq.gm { border-left: 3px solid var(--gold); }
.ig-mq-top { display: flex; gap: 10px; align-items: flex-start; }
.ig-n { font: 600 12.5px/1.7 var(--mono); color: var(--muted); min-width: 22px; }
.ig-mq-main { flex: 1; min-width: 0; }
.ig-qt { font-size: 15px; font-weight: 600; margin: 0; line-height: 1.4; }
.ig-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; align-items: center; }
.ig-c { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--draft-bg); color: var(--ink-2); letter-spacing: .02em; }
.ig-c.must { background: var(--teal-soft); color: var(--teal-2); }
.ig-c.sup { background: var(--approved-bg); color: var(--approved); }
.ig-c.gm { background: #fbf1dc; color: #8a6420; }
.ig-c.builtin { background: var(--paid-bg); color: var(--paid); }
.ig-c.hid { background: var(--suspended-bg); color: var(--suspended); }
.ig-c.type { background: transparent; border: 1px solid var(--border); color: var(--muted); font-weight: 600; }
.ig-bid { font: 600 11.5px var(--mono); color: var(--muted); }
.ig-more { margin-top: 8px; font-size: 13px; }
.ig-more > summary { cursor: pointer; font-weight: 600; color: var(--teal-2); padding: 3px 0; }
.ig-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 8px 0 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ig-guide > div { padding: 8px 12px; }
.ig-guide > div + div { border-left: 1px solid var(--border); }
.ig-guide dt { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ig-guide dd { margin: 2px 0 0; font-size: 13px; }
.ig-guide .rf dt { color: var(--suspended); }
.ig-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; margin-top: 12px; align-items: start; }
.ig-row.notes-only { grid-template-columns: minmax(0, 1fr); }
textarea.input.ig-notes, textarea.input.ig-ta { min-height: 62px; }
.ig-score { display: flex; flex-direction: column; gap: 6px; }
.ig-sbtns { display: flex; gap: 4px; }
.ig-sbtns input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ig-sbtns label { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 8px; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; background: var(--surface); color: var(--ink-2); }
.ig-sbtns label:hover { border-color: var(--teal); }
.ig-sbtns input:checked + label { background: var(--teal); border-color: var(--teal); color: #fff; }
.ig-sbtns input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.ig-sbtns input:disabled + label { opacity: .4; cursor: not-allowed; }
.ig-skip { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.ig-skip input { margin: 0; accent-color: var(--muted); }
.ig-anchors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.ig-anchor { display: flex; gap: 8px; font-size: 12.5px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; color: var(--ink-2); background: var(--surface-2); }
.ig-anchor b { font-variant-numeric: tabular-nums; color: var(--muted); }
.ig-anchor.on { border-color: var(--teal); background: var(--teal-soft); color: var(--ink); }
.ig-anchor.on b { color: var(--teal-2); }
.ig-moreq { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 10px; }
.ig-moreq > summary { cursor: pointer; font-weight: 650; font-size: 15px; padding: 6px 0; }
.ig-moreq > div { padding-top: 8px; }

.ig-pf { list-style: none; margin: 0; padding: 0; }
.ig-pf li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.ig-pfseg { display: flex; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.ig-pfseg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ig-pfseg label { padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; min-width: 58px; text-align: center; background: var(--surface); }
.ig-pfseg label + input + label { border-left: 1px solid var(--border-strong); }
.ig-pfseg input:checked + label.pass { background: var(--paid); color: #fff; }
.ig-pfseg input:checked + label.fail { background: var(--suspended); color: #fff; }
.ig-pfseg input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: -3px; }

.ig-verdict { border-radius: 10px; padding: 11px 14px; margin-bottom: 12px; font-size: 13.5px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-2); }
.ig-verdict strong { display: block; font-size: 15.5px; color: var(--ink); margin-bottom: 2px; }
.ig-verdict.bad { background: var(--suspended-bg); border-color: var(--suspended-bd); color: #8b1c16; }
.ig-verdict.bad strong { color: var(--suspended); }
.ig-verdict.warn { background: var(--pending-bg); border-color: var(--pending-bd); color: #7a4706; }
.ig-verdict.good { background: var(--paid-bg); border-color: var(--paid-bd); color: #0f5b33; }
.ig-verdict.good strong { color: var(--paid); }
.ig-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.ig-stat > span:first-child { flex: 1; min-width: 0; }
.ig-stat small { display: block; font-size: 11.5px; color: var(--muted); }
.ig-stat b { font-variant-numeric: tabular-nums; font-size: 14.5px; text-align: right; }
.ig-stat b.ok { color: var(--paid); } .ig-stat b.bad { color: var(--suspended); }
.ig-big { font-size: 28px !important; line-height: 1; color: var(--navy); }
.ig-bar { display: block; height: 6px; background: var(--border); border-radius: 99px; overflow: hidden; margin-top: 6px; max-width: 160px; }
.ig-bar i { display: block; height: 100%; width: 0; background: var(--teal); transition: width .2s; }
.ig-alert { margin: 8px 0 0; }
.ig-recs { margin-top: 14px; }
.ig-recs .lbl { display: block; margin-bottom: 6px; }
.ig-recseg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border-strong); border-radius: 9px; overflow: hidden; }
.ig-recseg button { border: 0; background: var(--surface); font: inherit; font-size: 13px; font-weight: 650; padding: 9px 6px; cursor: pointer; color: var(--ink-2); }
.ig-recseg button + button { border-left: 1px solid var(--border-strong); }
.ig-recseg button:hover:not(:disabled) { background: var(--surface-2); }
.ig-recseg button.on { background: var(--navy); color: #fff; }
.ig-recseg button.hire.on { background: var(--paid); }
.ig-recseg button.no.on { background: var(--suspended); }
.ig-recseg button:disabled { color: var(--border-strong); cursor: not-allowed; text-decoration: line-through; }
.ig-save { width: 100%; margin-top: 12px; }
.ig-rule { font-size: 12px; color: var(--muted); margin: 12px 0 0; line-height: 1.45; }
.ig-foot { display: none; }

.ig-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 4px 0 12px; }
.ig-kpis > div { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.ig-kpis span { display: block; font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.ig-kpis b { display: block; font-size: 18px; line-height: 1.25; font-variant-numeric: tabular-nums; margin-top: 2px; }
.ig-kpis b.ok { color: var(--paid); } .ig-kpis b.bad { color: var(--suspended); }
.ig-kpis small { font-size: 11.5px; color: var(--muted); }
.ig-kolist { margin: 6px 0 0; padding-left: 20px; font-size: 13.5px; display: grid; gap: 4px; }
.ig-ans { list-style: none; margin: 0; padding: 0; }
.ig-ans li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 11px 20px; border-bottom: 1px solid var(--border); }
.ig-ans li:last-child { border-bottom: 0; }
.ig-ans-q { display: flex; gap: 10px; font-size: 13.5px; font-weight: 550; }
.ig-ans-q .ig-bid { flex: none; padding-top: 1px; }
.ig-ans-v { display: flex; gap: 6px; align-items: flex-start; justify-content: flex-end; flex-wrap: wrap; }
.ig-ans-n { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--ink-2); background: var(--surface-2); border-radius: 8px; padding: 7px 10px; white-space: pre-wrap; }
.ig-hist { list-style: none; margin: 0; padding: 0; }
.ig-hist li { border-bottom: 1px solid var(--border); }
.ig-hist li:last-child { border-bottom: 0; }
.ig-hist a { display: flex; gap: 10px; align-items: center; padding: 9px 6px; color: inherit; border-radius: 8px; }
.ig-hist a:hover { background: var(--surface-2); text-decoration: none; }
.ig-hist li.on a { background: var(--teal-soft); }
.ig-hist .grow { min-width: 0; display: flex; flex-direction: column; font-size: 13px; }

/* question bank */
.ig-btool { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin-bottom: 14px; }
.ig-btool .field { min-width: 240px; }
.ig-btool .field.grow { flex: 1; }
.ig-dhead { margin-bottom: 12px; }
.ig-dhead-t { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 4px; }
.ig-fchips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.ig-fchips .ig-cnt { font-size: 11px; font-weight: 700; opacity: .75; margin-left: 2px; }
.ig-sec { margin-bottom: 12px; }
.ig-sec + .ig-sec { margin-top: 0; }
.ig-qlist { list-style: none; margin: 0; padding: 0; }
.ig-q { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--border); }
.ig-q:last-child { border-bottom: 0; }
.ig-q .ig-bid { padding-top: 3px; }
.ig-q.off { background: var(--surface-2); }
.ig-q.off .ig-qt { color: var(--muted); }
.ig-q-body { min-width: 0; }
.ig-q-acts { margin-top: 10px; gap: 8px 12px; }
.ig-check { display: inline-flex !important; flex-direction: row; gap: 8px; align-items: center; cursor: pointer; }
.ig-check input { width: 17px; height: 17px; margin: 0; accent-color: var(--teal); }
.ig-addform { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(12, 122, 131, .1); }

@media (max-width: 1100px) {
  .ig-layout { grid-template-columns: minmax(0, 1fr); }
  .ig-side { position: static; order: -1; }
  .ig-recmain ~ .ig-side { order: 0; } /* record view: the record first, history after */
  .ig-foot { display: block; margin-top: 14px; }
  .ig-foot .ig-save { margin-top: 0; }
}
@media (max-width: 700px) {
  .ig-cand { grid-template-columns: auto minmax(0, 1fr); padding: 14px 16px; }
  .ig-cand h1 { font-size: 19px; }
  .ig-cand-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .ig-ctrl { padding: 12px 16px; }
  .ig-ctrl .field, .ig-btool .field { min-width: 0; width: 100%; }
  .ig-main { padding: 0 12px 18px; }
  .ig-mq { padding: 12px; }
  .ig-mq-top { gap: 6px; }
  .ig-row { grid-template-columns: minmax(0, 1fr); }
  .ig-anchors, .ig-guide { grid-template-columns: minmax(0, 1fr); }
  .ig-guide > div + div { border-left: 0; border-top: 1px solid var(--border); }
  .ig-pf li { grid-template-columns: minmax(0, 1fr); }
  .ig-pfseg { justify-self: start; }
  .ig-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ig-ans li { padding: 10px 14px; grid-template-columns: minmax(0, 1fr); }
  .ig-ans-v { justify-content: flex-start; }
  .ig-q { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 14px; }
  .ig-candrow { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 10px; }
  .ig-candact { justify-content: flex-start; padding-left: 50px; }
  .ig-acts { justify-content: flex-start; }
}
@media print { .ig-foot, .ig-ctrl, .ig-recs, .ig-save { display: none !important; } .ig-side { position: static; } }
/* Interview guide, review fixes: inline department confirm, mobile decision footer, offer warning (additive). */
.ig-confirm-host { flex-basis: 100%; }
.ig-confirm-host:empty { display: none; }
.ig-confirm { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0 0; flex-basis: 100%; }
.ig-confirm .grow { flex: 1; min-width: 220px; }
.ig-foot:not(.on) { display: none !important; }
.ig-foot.on .ig-recs { margin-top: 0; }
.ig-offerwarn { margin: 10px 0 0; }
.modal .ig-offerwarn { margin: 0 0 12px; }

/* ===== Wave 2B: passkeys (login button, My Account card, "Set up your passkey" step) ===== */
.auth-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.pk-login-btn { gap: 10px; border-color: var(--teal); color: var(--teal-2); background: var(--surface); }
.pk-login-btn:hover { background: var(--teal-soft); }
.pk-login-btn svg { width: 18px; height: 18px; }
.pk-intro { margin: 0 0 14px; color: var(--ink-2); max-width: 640px; }
.pk-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pk-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.pk-row:last-child { border-bottom: 0; }
.pk-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--teal-soft); color: var(--teal-2); }
.pk-ic svg { width: 17px; height: 17px; }
.pk-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pk-setting h3 { font-size: 15px; margin: 0 0 10px; }
.pk-setup { max-width: 560px; margin: 24px auto; }
.pk-setup h1 { font-size: 24px; margin: 0; }
.pk-setup p { margin: 0; }
.pk-setup-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--teal-soft); color: var(--teal-2); }
.pk-setup-ic svg { width: 28px; height: 28px; }
.pk-steps { margin: 0; padding-left: 20px; line-height: 1.8; }
@media (max-width: 560px) {
  .pk-row { flex-wrap: wrap; }
  .pk-actions { width: 100%; justify-content: flex-start; padding-left: 46px; }
}