/* =====================================================================
   FaceBiometric Admin — design system
   Colors/fonts/radius come from CSS variables set by theme.js, so every
   theme (preset or user-created) and dark mode restyle the whole panel.
   ===================================================================== */

:root {
  --primary: #4f46e5;
  --accent: #06b6d4;
  --radius: 12px;
  --fs: 14px;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-head: 'Poppins', system-ui, sans-serif;

  --primary-dark: color-mix(in srgb, var(--primary) 80%, #000);
  --primary-soft: color-mix(in srgb, var(--primary) 11%, transparent);
  --primary-softer: color-mix(in srgb, var(--primary) 6%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --ring: color-mix(in srgb, var(--primary) 35%, transparent);

  --bg: #f5f6fb;
  --surface: #ffffff;
  --surface-2: #f1f3f9;
  --surface-3: #e9ecf5;
  --border: #e3e6ef;
  --border-strong: #d3d8e6;
  --text: #151a2d;
  --text-dim: #646b84;
  --text-faint: #9aa0b5;

  --good: #12a150;  --good-bg: color-mix(in srgb, var(--good) 13%, transparent);
  --bad: #e03e3e;   --bad-bg: color-mix(in srgb, var(--bad) 12%, transparent);
  --warn: #c27c0e;  --warn-bg: color-mix(in srgb, #f0a020 16%, transparent);
  --info: #2f7ae5;  --info-bg: color-mix(in srgb, var(--info) 12%, transparent);

  --shadow-sm: 0 1px 2px rgba(16, 22, 48, .05);
  --shadow: 0 1px 2px rgba(16, 22, 48, .04), 0 6px 18px rgba(16, 22, 48, .06);
  --shadow-lg: 0 12px 40px rgba(16, 22, 48, .16), 0 2px 6px rgba(16, 22, 48, .06);

  --sidebar-w: 264px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 64px;
  --pad: 20px;
  --ctl-h: 40px;

  --sb-bg: var(--surface);
  --sb-text: var(--text-dim);
  --sb-text-strong: var(--text);
  --sb-hover: var(--surface-2);
  --sb-active-bg: var(--primary-soft);
  --sb-active-text: var(--primary);
  --sb-border: var(--border);
  --switch-off: #cdd2e1;
  color-scheme: light;
}

html[data-mode="dark"] {
  --bg: #0d1020;
  --surface: #151a2e;
  --surface-2: #1c2238;
  --surface-3: #252c46;
  --border: #262d47;
  --border-strong: #343c5c;
  --text: #e8eaf4;
  --text-dim: #a2a8c2;
  --text-faint: #6f7694;
  --primary-dark: color-mix(in srgb, var(--primary) 75%, #fff);
  --primary-soft: color-mix(in srgb, var(--primary) 22%, transparent);
  --primary-softer: color-mix(in srgb, var(--primary) 10%, transparent);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, .5);
  --switch-off: #3a4262;
  color-scheme: dark;
}

html[data-sidebar="dark"] {
  --sb-bg: #111527;
  --sb-text: #9ba2bf;
  --sb-text-strong: #eef0f8;
  --sb-hover: rgba(255, 255, 255, .06);
  --sb-active-bg: color-mix(in srgb, var(--primary) 30%, transparent);
  --sb-active-text: #fff;
  --sb-border: rgba(255, 255, 255, .06);
}
html[data-sidebar="brand"] {
  --sb-bg: linear-gradient(180deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 70%, var(--accent)) 100%);
  --sb-text: rgba(255, 255, 255, .78);
  --sb-text-strong: #fff;
  --sb-hover: rgba(255, 255, 255, .12);
  --sb-active-bg: rgba(255, 255, 255, .2);
  --sb-active-text: #fff;
  --sb-border: rgba(255, 255, 255, .14);
}
html[data-density="compact"] { --pad: 14px; --ctl-h: 34px; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: var(--fs); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-head); margin: 0; letter-spacing: -.01em; color: var(--text); }
a { color: inherit; }
::selection { background: var(--primary-soft); }
svg.i { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Form controls ---------- */
label { display: block; font-size: .93rem; font-weight: 600; margin-bottom: 6px; color: var(--text); }
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]),
select, textarea {
  width: 100%;
  min-height: var(--ctl-h);
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: calc(var(--radius) * .7);
  font-size: 1rem;
  background: var(--surface);
  color: var(--text);
  margin-bottom: 16px;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input[type=file] {
  width: 100%; font: inherit; font-size: .93rem; color: var(--text-dim);
  border: 1px dashed var(--border-strong); border-radius: calc(var(--radius) * .7); padding: 8px; margin-bottom: 16px; background: var(--surface-2);
}
select {
  appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23868ca5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
select[multiple] { background-image: none; padding-right: 12px; }
textarea { resize: vertical; min-height: 70px; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border-strong)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--text-faint); cursor: not-allowed; }
input[type=color] { width: 44px; height: 36px; border: 1px solid var(--border-strong); border-radius: 9px; padding: 3px; background: var(--surface); cursor: pointer; }
input[type=range] { width: 100%; accent-color: var(--primary); }

/* Every checkbox is an on/off toggle switch */
input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  width: 40px !important; height: 22px !important; min-height: 0; margin: 0 !important; padding: 0;
  border: none; border-radius: 99px; background: var(--switch-off);
  position: relative; cursor: pointer; flex-shrink: 0; vertical-align: middle;
  transition: background .2s ease;
}
input[type=checkbox]::before {
  content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .22s cubic-bezier(.3, 1.4, .5, 1);
}
input[type=checkbox]:checked { background: var(--primary); }
input[type=checkbox]:checked::before { transform: translateX(18px); }
input[type=checkbox]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
input[type=checkbox]:disabled { opacity: .5; cursor: not-allowed; }
td input[type=checkbox], th input[type=checkbox] { width: 34px !important; height: 19px !important; }
td input[type=checkbox]::before, th input[type=checkbox]::before { width: 13px; height: 13px; }
td input[type=checkbox]:checked::before, th input[type=checkbox]:checked::before { transform: translateX(15px); }

label.toggle-row {
  display: flex; align-items: center; gap: 12px; font-weight: 500;
  padding: 10px 12px; margin-bottom: 10px; cursor: pointer;
  border: 1px solid var(--border); border-radius: calc(var(--radius) * .7); background: var(--surface);
  transition: border-color .15s, background .15s;
}
label.toggle-row:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
label.toggle-row:has(input:checked) { background: var(--primary-softer); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
label.toggle-row span { font-size: .93rem; color: var(--text-dim); line-height: 1.4; }
label.toggle-row:has(input:checked) span { color: var(--text); }

.field-hint { margin-top: -10px; margin-bottom: 16px; font-size: .86rem; color: var(--text-dim); }

/* ---------- Buttons ---------- */
button { font-family: inherit; }
.btn, button.btn, a.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: var(--ctl-h); padding: 8px 18px;
  border: 1px solid transparent; border-radius: calc(var(--radius) * .7);
  background: var(--primary); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 1rem; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(16, 22, 48, .08), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: background .15s, transform .08s, box-shadow .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--primary-dark); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.btn.small { width: auto; min-height: calc(var(--ctl-h) - 4px); padding: 6px 14px; font-size: .95rem; }
.btn.ghost { background: var(--surface); color: var(--primary); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.btn.ghost:hover { background: var(--primary-softer); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.btn.danger { background: var(--bad); }
.btn.danger:hover { background: color-mix(in srgb, var(--bad) 82%, #000); }
.btn.subtle { background: transparent; color: var(--text-dim); box-shadow: none; }
.btn.subtle:hover { background: var(--surface-2); color: var(--text); }
.btn:disabled[aria-busy="true"]::before, .btn.is-busy::before {
  content: ''; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite;
}
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text-dim); cursor: pointer;
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

.error-box {
  background: var(--bad-bg); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 25%, transparent);
  border-radius: calc(var(--radius) * .7); padding: 10px 12px; font-size: .93rem; margin-bottom: 14px; display: none;
}
.error-box.show { display: block; animation: shake .35s; }

/* ---------- App shell ---------- */
.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 40;
  background: var(--sb-bg); border-right: 1px solid var(--sb-border);
  display: flex; flex-direction: column; color: var(--sb-text);
  transition: width .22s ease, transform .25s ease;
}
.sidebar .brand {
  padding-right: 52px !important;
  display: flex; align-items: center; gap: 10px; height: var(--topbar-h); padding: 0 16px 0 18px; flex-shrink: 0;
  border-bottom: 1px solid var(--sb-border); text-decoration: none;
}
.brand-mark {
  width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; box-shadow: 0 4px 12px var(--ring);
}
.brand-mark svg { width: 20px; height: 20px; }
html[data-sidebar="brand"] .sidebar .brand-mark { background: rgba(255, 255, 255, .2); box-shadow: none; }
.brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--sb-text-strong); white-space: nowrap; }
.brand-name small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .74rem; color: var(--sb-text); letter-spacing: .02em; }
.sidebar .collapse-btn { margin-left: auto; color: var(--sb-text); }
.sidebar .collapse-btn:hover { background: var(--sb-hover); color: var(--sb-text-strong); }
.sidebar .side-scroll { flex: 1; overflow-y: auto; padding: 14px 12px; scrollbar-width: thin; }

.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }
.nav-link {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 9px 12px; margin-bottom: 2px;
  border: none; background: none; border-radius: calc(var(--radius) * .75); cursor: pointer; text-align: left;
  font: inherit; font-size: .98rem; font-weight: 500; color: var(--sb-text); text-decoration: none;
  transition: background .15s, color .15s;
}
.nav-link:hover { background: var(--sb-hover); color: var(--sb-text-strong); }
.nav-link .label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-link .chev { width: 16px; height: 16px; transition: transform .2s; opacity: .7; }
.nav-item.open > .nav-link .chev { transform: rotate(180deg); }
.nav-item.active > .nav-link { background: var(--sb-active-bg); color: var(--sb-active-text); font-weight: 600; }
.nav-item.in-path > .nav-link { color: var(--sb-text-strong); }
.side-nav .nav-list .nav-list { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.side-nav .nav-list .nav-list > .nav-sub { overflow: hidden; }
.side-nav .nav-item.open > .nav-list { grid-template-rows: 1fr; }
.side-nav .nav-sub { list-style: none; margin: 0; padding: 2px 0 4px 20px; position: relative; }
.side-nav .nav-sub::before { content: ''; position: absolute; left: 21px; top: 4px; bottom: 8px; width: 1px; background: var(--sb-border); }
.side-nav .nav-sub .nav-link { min-height: 36px; font-size: .94rem; padding: 7px 12px 7px 18px; }
.side-nav .nav-sub .nav-link .i { width: 16px; height: 16px; }
.nav-section { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sb-text); opacity: .7; padding: 14px 12px 6px; font-weight: 700; }

.sidebar-foot { padding: 12px; border-top: 1px solid var(--sb-border); }
.sidebar-foot .mini-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; }
.sidebar-foot .mini-user b { display: block; font-size: .93rem; color: var(--sb-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-foot .mini-user span { font-size: .8rem; text-transform: capitalize; }

.main-wrap { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .22s ease; min-width: 0; }

/* Collapsed (icon rail) sidebar — desktop only */
@media (min-width: 1024px) {
  html[data-collapsed="1"][data-layout="sidebar"] .sidebar { width: var(--sidebar-w-collapsed); }
  html[data-collapsed="1"][data-layout="sidebar"] .main-wrap { margin-left: var(--sidebar-w-collapsed); }
  html[data-collapsed="1"] .sidebar .brand-name,
  html[data-collapsed="1"] .sidebar .nav-link .label,
  html[data-collapsed="1"] .sidebar .nav-link .chev,
  html[data-collapsed="1"] .sidebar .nav-section,
  html[data-collapsed="1"] .sidebar-foot .mini-user > div { display: none; }
  html[data-collapsed="1"] .sidebar .brand { justify-content: center; padding: 0 !important; border-bottom: none; }
  html[data-collapsed="1"] .sidebar .collapse-btn { position: static !important; margin: 0 auto 4px; transform: rotate(180deg); }
  html[data-collapsed="1"] .sidebar .nav-link { justify-content: center; padding: 10px 0; }
  html[data-collapsed="1"] .sidebar .side-scroll { overflow: visible; }
  html[data-collapsed="1"] .side-nav > .nav-list > .nav-item > .nav-list {
    position: absolute; left: calc(100% + 8px); top: 0; min-width: 230px; display: none !important;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; z-index: 60;
  }
  html[data-collapsed="1"] .side-nav > .nav-list > .nav-item:hover > .nav-list { display: block !important; animation: popIn .16s ease; }
  html[data-collapsed="1"] .side-nav > .nav-list > .nav-item > .nav-list .nav-sub { padding: 0; }
  html[data-collapsed="1"] .side-nav > .nav-list > .nav-item > .nav-list .nav-sub::before { display: none; }
  html[data-collapsed="1"] .side-nav > .nav-list > .nav-item > .nav-list .nav-link { color: var(--text-dim); justify-content: flex-start; padding: 8px 12px; }
  html[data-collapsed="1"] .side-nav > .nav-list > .nav-item > .nav-list .nav-link .label,
  html[data-collapsed="1"] .side-nav > .nav-list > .nav-item > .nav-list .nav-link .chev { display: inline; }
  html[data-collapsed="1"] .side-nav > .nav-list > .nav-item > .nav-list .nav-link:hover { background: var(--surface-2); color: var(--text); }
  html[data-collapsed="1"] .side-nav > .nav-list > .nav-item > .nav-list .nav-item.active > .nav-link { background: var(--primary-soft); color: var(--primary); }
  html[data-collapsed="1"] .side-nav .nav-sub .nav-list { display: block; }
}

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar-h);
  display: flex; align-items: center; gap: 10px; padding: 0 24px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(12px); -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar .menu-btn { display: none; }
.topbar .top-brand { display: none; align-items: center; gap: 10px; text-decoration: none; margin-right: 10px; }
.topbar .top-brand .brand-name { color: var(--text); }
.topbar .spacer { flex: 1; }
.who-company {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; max-width: 260px;
  background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: .86rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-btn {
  display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); cursor: pointer; color: var(--text); font: inherit;
  transition: box-shadow .15s, border-color .15s;
}
.user-btn:hover { box-shadow: var(--shadow); border-color: var(--border-strong); }
.user-btn .meta { text-align: left; line-height: 1.15; }
.user-btn .meta b { display: block; font-size: .92rem; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-btn .meta span { font-size: .76rem; color: var(--text-dim); text-transform: capitalize; }
.initials {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; font-weight: 700; font-size: .85rem;
}

/* Horizontal navbar (layout = navbar) */
.top-nav { display: none; }
@media (min-width: 1024px) {
  html[data-layout="navbar"] .sidebar, html[data-layout="navbar"] .sidebar-scrim { display: none; }
  html[data-layout="navbar"] .main-wrap { margin-left: 0; }
  html[data-layout="navbar"] .topbar .top-brand { display: flex; }
  html[data-layout="navbar"] .topbar { background: var(--surface); }
  html[data-layout="navbar"] .top-nav { display: block; }
  .top-nav > .nav-list { display: flex; align-items: center; gap: 2px; }
  .top-nav .nav-link { min-height: 38px; padding: 7px 12px; color: var(--text-dim); margin: 0; font-size: .96rem; }
  .top-nav .nav-link:hover { background: var(--surface-2); color: var(--text); }
  .top-nav .nav-item.active > .nav-link, .top-nav > .nav-list > .nav-item.in-path > .nav-link { background: var(--primary-soft); color: var(--primary); }
  .top-nav .nav-list .nav-list {
    position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px; display: none;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; z-index: 50;
  }
  .top-nav .nav-list .nav-list::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
  .top-nav .nav-sub { list-style: none; margin: 0; padding: 0; }
  .top-nav .nav-sub .nav-list { top: -7px; left: calc(100% + 6px); }
  .top-nav .nav-sub .nav-list::before { top: 0; bottom: 0; left: -10px; width: 10px; height: auto; right: auto; }
  .top-nav .nav-sub .nav-link .chev { transform: rotate(-90deg); }
  .top-nav .nav-item:hover > .nav-list, .top-nav .nav-item.open-pop > .nav-list { display: block; animation: popIn .16s ease; }
  .top-nav .nav-sub .nav-link { width: 100%; }
  html[data-layout="navbar"] .topbar { gap: 6px; }
}
/* Narrower desktops: keep the navbar on one line by dropping secondary bits */
@media (min-width: 1024px) and (max-width: 1365px) {
  html[data-layout="navbar"] .top-nav > .nav-list > .nav-item > .nav-link > .i:first-child,
  html[data-layout="navbar"] .user-btn .meta,
  html[data-layout="navbar"] .user-btn > .chev,
  html[data-layout="navbar"] .who-company { display: none !important; }
  html[data-layout="navbar"] .topbar { padding: 0 14px; }
  html[data-layout="navbar"] .user-btn { padding: 3px; }
}

/* ---------- Page ---------- */
.main { flex: 1; padding: 24px 28px 40px; min-width: 0; width: 100%; max-width: 1560px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { font-size: 1.6rem; font-weight: 700; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: .86rem; color: var(--text-faint); margin-bottom: 4px; flex-wrap: wrap; }
.crumbs svg { width: 13px; height: 13px; }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: var(--pad); min-width: 0;
  animation: rise .35s ease both;
}
.card + .card { margin-top: 16px; }
.card > h2 { font-size: 1.12rem !important; font-weight: 700; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h2 { font-size: 1.12rem; }
.card-sub { color: var(--text-dim); font-size: .93rem; margin: 2px 0 0; }
.muted { color: var(--text-dim); }

.toolbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.toolbar input:not([type=checkbox]), .toolbar select { margin-bottom: 0 !important; width: auto; min-width: 170px; flex: 0 1 220px; }
.toolbar input[type=text], .toolbar input[type=search] { flex: 1 1 240px; }
.toolbar label { margin: 0; color: var(--text-dim); font-weight: 600; font-size: .88rem; }
.toolbar .spacer { flex: 1; }
.toolbar .btn { width: auto; }

/* ---------- Tables ---------- */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: calc(var(--radius) * .7); }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .96rem; }
th {
  text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  color: var(--text-dim); padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap;
}
th:first-child { border-top-left-radius: 9px; } th:last-child { border-top-right-radius: 9px; }
td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr { transition: background .12s; }
tbody tr:hover td { background: var(--primary-softer); }
tr:last-child td { border-bottom: none; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--primary-soft); display: inline-flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 700; color: var(--primary); margin-right: 8px; vertical-align: middle;
}
img.avatar { object-fit: cover; padding: 0; }
button.avatar-btn { border: none; padding: 0; background: none; cursor: zoom-in; vertical-align: middle; border-radius: 50%; }
button.avatar-btn img.avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border); transition: transform .15s; }
button.avatar-btn:hover img.avatar { transform: scale(1.12); }

.pill { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.pill.active { background: var(--good-bg); color: var(--good); }
.pill.disabled { background: var(--bad-bg); color: var(--bad); }
.pill.manual, .pill.noface { background: var(--warn-bg); color: var(--warn); }
.pill.device { background: var(--surface-3); color: var(--text-dim); }

.row-actions { white-space: nowrap; text-align: right; }
.row-actions button {
  background: none; border: 1px solid transparent; cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--primary);
  padding: 5px 10px; border-radius: 8px; transition: background .15s;
}
.row-actions button:hover { background: var(--primary-soft); }
.row-actions button.danger { color: var(--bad); }
.row-actions button.danger:hover { background: var(--bad-bg); }

.empty-state { text-align: center; color: var(--text-dim); padding: 46px 0; font-size: 1rem; }
.empty-state::before {
  content: ''; display: block; width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: var(--surface-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%239aa0b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}

.pagination { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 14px; font-size: .93rem; flex-wrap: wrap; }
.pagination button {
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: 9px; padding: 6px 14px;
  cursor: pointer; font-weight: 600; transition: background .15s;
}
.pagination button:hover:not(:disabled) { background: var(--primary-soft); color: var(--primary); }
.pagination button:disabled { opacity: .4; cursor: not-allowed; }

.bulk-bar {
  display: none; align-items: center; gap: 12px; background: var(--primary-softer);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); border-radius: calc(var(--radius) * .7);
  padding: 10px 14px; margin-bottom: 14px; font-size: .96rem; flex-wrap: wrap;
}
.bulk-bar.show { display: flex; animation: rise .2s ease; }
.bulk-bar .spacer { flex: 1; }
.bulk-bar button { border: 1px solid var(--border-strong); border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--primary); background: var(--surface); }
.bulk-bar button.danger { color: var(--bad); }

.import-table-wrap { max-height: 460px; overflow: auto; border: 1px solid var(--border); border-radius: calc(var(--radius) * .7); margin-bottom: 16px; }
.import-table-wrap table { font-size: .9rem; }
.import-table-wrap th { position: sticky; top: 0; z-index: 1; border-radius: 0 !important; }
.import-table-wrap td input, .import-table-wrap td select { margin-bottom: 0 !important; min-height: 30px !important; padding: 4px 7px !important; font-size: .88rem !important; min-width: 90px; }
.import-table-wrap tr.row-error td { background: var(--bad-bg); }
.import-table-wrap td.row-status { font-size: .8rem; white-space: nowrap; }
.import-summary { display: flex; gap: 16px; font-size: .93rem; color: var(--text-dim); margin-bottom: 14px; flex-wrap: wrap; }
.import-summary b { color: var(--text); }
.dropzone {
  border: 2px dashed var(--border-strong); border-radius: var(--radius); padding: 26px; text-align: center;
  color: var(--text-dim); font-size: .96rem; cursor: pointer; margin-bottom: 16px; transition: border-color .15s, background .15s, color .15s;
}
.dropzone:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-softer); }

/* Tables become stacked cards on phones (labels added by ui.js) */
@media (max-width: 760px) {
  table.rt thead { display: none; }
  table.rt, table.rt tbody, table.rt tr, table.rt td { display: block; width: 100%; }
  table.rt tr {
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
    padding: 6px 14px; margin-bottom: 10px; box-shadow: var(--shadow-sm);
  }
  table.rt tbody tr:hover td { background: transparent; }
  table.rt td {
    display: flex; justify-content: space-between; align-items: center; gap: 14px; text-align: right;
    border-bottom: 1px dashed var(--border); padding: 9px 0; min-height: 40px; word-break: break-word;
  }
  table.rt tr td:last-child { border-bottom: none; }
  table.rt td::before {
    content: attr(data-label); text-align: left; flex-shrink: 0; max-width: 45%;
    font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim);
  }
  table.rt td[data-label=""]::before { content: none; }
  table.rt td[data-label=""] { justify-content: flex-end; }
  table.rt td[colspan] { display: block; text-align: center; border: none; }
  table.rt td[colspan]::before { content: none; }
  table.rt td.row-actions { justify-content: flex-end; flex-wrap: wrap; gap: 4px; }
  table.rt td.row-actions::before { content: none; }
  .import-table-wrap { max-height: none; border: none; overflow: visible; }
  .import-table-wrap table.rt th { position: static; }
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(9, 12, 28, .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; padding: 20px; z-index: 200;
}
.modal-backdrop.show { display: flex; animation: fadeIn .18s ease; }
.modal {
  position: relative; width: 100%; max-width: 480px; background: var(--surface); border-radius: calc(var(--radius) + 4px);
  padding: 24px; box-shadow: var(--shadow-lg); border: 1px solid var(--border);
  max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain;
}
.modal-backdrop.show .modal { animation: popIn .26s cubic-bezier(.2, 1.1, .4, 1); }
.modal h2 { font-size: 1.28rem; margin-bottom: 18px; padding-right: 32px; }
.modal .modal-x { position: absolute; top: 14px; right: 14px; }
.modal .actions {
  display: flex; gap: 10px; margin: 8px -24px -24px; padding: 14px 24px; border-top: 1px solid var(--border);
  background: var(--surface-2); position: sticky; bottom: -24px; border-radius: 0 0 calc(var(--radius) + 4px) calc(var(--radius) + 4px);
}
.modal .actions button { flex: 1; }
.modal.wide { max-width: 900px; }
.modal .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 640px) {
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal, .modal.wide {
    max-width: 100%; border-radius: 20px 20px 0 0; padding: 20px 18px 18px;
    max-height: 94vh; max-height: 94dvh; border-bottom: none;
  }
  .modal::before { content: ''; display: block; width: 42px; height: 5px; border-radius: 99px; background: var(--border-strong); margin: -6px auto 14px; }
  .modal-backdrop.show .modal { animation: sheetUp .3s cubic-bezier(.2, 1, .3, 1); }
  .modal .actions { margin: 8px -18px -18px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); bottom: -18px; border-radius: 0; }
  .modal .grid-2 { grid-template-columns: 1fr; }
}

/* ---------- Toasts ---------- */
.toast-stack {
  position: fixed; top: 16px; right: 16px; z-index: 1000; display: flex; flex-direction: column; gap: 10px;
  width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  pointer-events: auto; position: relative; overflow: hidden; display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 14px 14px 16px; animation: toastIn .42s cubic-bezier(.2, 1.3, .4, 1) both;
}
.toast.leaving { animation: toastOut .3s ease forwards; }
.toast .t-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.toast .t-icon svg { width: 17px; height: 17px; }
.toast.success .t-icon { background: var(--good-bg); color: var(--good); }
.toast.error .t-icon { background: var(--bad-bg); color: var(--bad); animation: shake .45s .2s; }
.toast.warning .t-icon { background: var(--warn-bg); color: var(--warn); }
.toast.info .t-icon { background: var(--info-bg); color: var(--info); }
.toast .t-body { flex: 1; min-width: 0; font-size: .95rem; line-height: 1.4; padding-top: 4px; word-wrap: break-word; }
.toast .t-body b { display: block; margin-bottom: 2px; }
.toast .t-close { border: none; background: none; color: var(--text-faint); cursor: pointer; padding: 2px; border-radius: 6px; }
.toast .t-close:hover { color: var(--text); background: var(--surface-2); }
.toast .t-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; animation: shrink linear forwards; }
.toast.success .t-bar { background: var(--good); } .toast.error .t-bar { background: var(--bad); }
.toast.warning .t-bar { background: #f0a020; } .toast.info .t-bar { background: var(--info); }
.toast:hover .t-bar { animation-play-state: paused; }
@media (max-width: 640px) { .toast-stack { top: 10px; right: 12px; width: calc(100vw - 24px); } }

/* Confirm / prompt dialog */
.dialog .d-icon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; margin: 4px auto 14px; animation: popIn .4s cubic-bezier(.2, 1.6, .4, 1) .05s both; }
.dialog .d-icon svg { width: 26px; height: 26px; }
.dialog .d-icon.danger { background: var(--bad-bg); color: var(--bad); }
.dialog .d-icon.info { background: var(--primary-soft); color: var(--primary); }
.dialog h2 { text-align: center; padding: 0; margin-bottom: 6px; }
.dialog p.d-msg { text-align: center; color: var(--text-dim); margin: 0 0 18px; line-height: 1.5; }

/* ---------- Dropdown menu ---------- */
.dropdown { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 250px; z-index: 80; display: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px;
}
.menu.show { display: block; animation: popIn .16s ease; transform-origin: top right; }
.menu .menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.menu .menu-head b { display: block; }
.menu .menu-head span { font-size: .85rem; color: var(--text-dim); word-break: break-all; }
.menu button, .menu a {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: none; background: none;
  font: inherit; font-size: .96rem; color: var(--text); text-decoration: none; border-radius: 8px; cursor: pointer; text-align: left;
}
.menu button:hover, .menu a:hover { background: var(--surface-2); }
.menu button .i, .menu a .i { color: var(--text-dim); }
.menu .sep { height: 1px; background: var(--border); margin: 6px 0; }
.menu button.danger { color: var(--bad); } .menu button.danger .i { color: var(--bad); }

/* ---------- Appearance panel (slide-over) ---------- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(9, 12, 28, .4); z-index: 220; opacity: 0; pointer-events: none; transition: opacity .2s; }
.drawer-backdrop.show { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); z-index: 230; background: var(--surface);
  box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .9, .3, 1);
  display: flex; flex-direction: column;
}
.drawer.show { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.drawer-head h2 { font-size: 1.2rem; }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px 20px 30px; }
.drawer-foot { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; }
.drawer-foot .btn { flex: 1; }
.ap-section { margin-bottom: 22px; }
.ap-section > h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); margin-bottom: 10px; font-family: var(--font-body); font-weight: 700; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.choice {
  border: 2px solid var(--border); border-radius: var(--radius); padding: 10px; cursor: pointer; background: var(--surface);
  text-align: center; font-size: .9rem; font-weight: 600; color: var(--text); transition: border-color .15s, transform .12s; position: relative;
}
.choice:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.choice.on { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.choice.on::after {
  content: ''; position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center no-repeat;
}
.choice .mini-layout { height: 58px; border-radius: 8px; background: var(--surface-2); margin-bottom: 8px; display: flex; overflow: hidden; border: 1px solid var(--border); }
.choice .mini-layout i { display: block; }
.mini-layout.side i:first-child { width: 26%; background: var(--primary-soft); }
.mini-layout.side i:last-child { flex: 1; }
.mini-layout.top { flex-direction: column; }
.mini-layout.top i:first-child { height: 26%; background: var(--primary-soft); }
.swatch { height: 46px; border-radius: 9px; margin-bottom: 8px; display: flex; overflow: hidden; }
.swatch i { flex: 1; }
.swatch i.sb { flex: 0 0 26%; }
.choice .del { position: absolute; top: 4px; left: 4px; border: none; background: var(--surface); color: var(--bad); border-radius: 6px; width: 22px; height: 22px; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .15s; }
.choice:hover .del { opacity: 1; }
.seg { display: inline-flex; background: var(--surface-2); border-radius: 10px; padding: 3px; gap: 2px; width: 100%; }
.seg button { flex: 1; border: none; background: none; padding: 7px 10px; border-radius: 8px; font: inherit; font-size: .92rem; font-weight: 600; color: var(--text-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.seg button.on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }
.creator { border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 14px; background: var(--surface-2); }
.creator .row { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.creator .row label { margin: 0; min-width: 96px; font-weight: 500; color: var(--text-dim); }
.creator input[type=text] { margin-bottom: 12px !important; }
.font-preview { border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--surface-2); margin-top: 4px; }
.font-preview h4 { font-size: 1.15rem; margin-bottom: 4px; }
.font-preview p { margin: 0; color: var(--text-dim); font-size: .93rem; }

/* Password strength */
.pw-field { position: relative; }
.pw-field input { padding-right: 44px !important; }
.pw-field .eye { position: absolute; right: 4px; top: 2px; }
.pw-meter { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin: -8px 0 8px; }
.pw-meter i { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .3s, background .3s; }
.pw-rules { list-style: none; padding: 0; margin: 0 0 16px; font-size: .88rem; color: var(--text-dim); display: grid; gap: 4px; }
.pw-rules li { display: flex; align-items: center; gap: 8px; transition: color .2s; }
.pw-rules li::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); flex-shrink: 0; transition: all .2s; }
.pw-rules li.ok { color: var(--good); }
.pw-rules li.ok::before { border-color: var(--good); background: var(--good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center no-repeat; }

/* ---------- Auth screen ---------- */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; background: var(--bg); }
.auth-art {
  position: relative; overflow: hidden; padding: 48px; color: #fff; display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--accent) 70%, transparent) 0, transparent 45%),
              radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--accent) 45%, transparent) 0, transparent 40%),
              linear-gradient(140deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 60%, #000) 100%);
}
.auth-art::after {
  content: ''; position: absolute; inset: 0; opacity: .14;
  background-image: radial-gradient(rgba(255, 255, 255, .9) 1px, transparent 1px); background-size: 22px 22px;
}
.auth-art > * { position: relative; z-index: 1; }
.auth-art .brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; }
.auth-art .brand .brand-mark { background: rgba(255, 255, 255, .18); box-shadow: none; }
.auth-art h2 { color: #fff; font-size: 2.3rem; line-height: 1.15; max-width: 460px; }
.auth-art p { opacity: .85; max-width: 440px; line-height: 1.6; }
.auth-feats { display: grid; gap: 12px; margin-top: 22px; }
.auth-feats div { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.auth-feats svg { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .16); }
.auth-side { display: flex; align-items: center; justify-content: center; padding: 28px 20px; }
.auth-card {
  width: 100%; max-width: 410px; background: var(--surface); border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 6px); box-shadow: var(--shadow-lg); padding: 34px 30px; animation: rise .45s ease both;
}
.auth-card h1 { font-size: 1.7rem; font-weight: 700; margin-bottom: 6px; }
.auth-card p.hint { color: var(--text-dim); font-size: .96rem; margin: 0 0 22px; }
.auth-card .btn { min-height: 44px; }
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-art { padding: 26px 22px; min-height: 0; }
  .auth-art h2, .auth-art p, .auth-feats { display: none; }
  .auth-side { align-items: flex-start; padding-top: 26px; }
}

/* ---------- Misc existing components ---------- */
.logo-picker { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.logo-picker img { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; border: 1px solid var(--border); }
.logo-placeholder {
  width: 54px; height: 54px; border-radius: 12px; border: 1px dashed var(--border-strong); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: .72rem; color: var(--text-dim); text-align: center;
}
.logo-picker input[type="file"] { flex: 1; margin-bottom: 0; }
.row-logo { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; border: 1px solid var(--border); display: block; }
.row-logo-placeholder { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); }

.autocomplete-wrap { position: relative; }
.autocomplete-results {
  position: absolute; top: calc(100% - 12px); left: 0; right: 0; z-index: 10;
  background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius) * .7);
  box-shadow: var(--shadow-lg); max-height: 240px; overflow-y: auto; animation: popIn .14s ease;
}
.autocomplete-results .opt { padding: 9px 12px; cursor: pointer; font-size: .96rem; }
.autocomplete-results .opt:hover, .autocomplete-results .opt.active { background: var(--primary-softer); }
.autocomplete-results .opt .sub { color: var(--text-dim); font-size: .85rem; }
.autocomplete-results .empty { padding: 9px 12px; color: var(--text-dim); font-size: .93rem; }
.selected-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--primary-softer); border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); border-radius: calc(var(--radius) * .7);
  padding: 9px 12px; margin-bottom: 16px; font-size: .96rem; font-weight: 500;
}
.selected-chip button { background: none; border: none; color: var(--primary); cursor: pointer; font-size: .9rem; font-weight: 600; }

.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border-radius: 99px; padding: 4px 6px 4px 12px; font-size: .9rem; font-weight: 600; }
.chip button { border: none; background: none; cursor: pointer; font-size: 1.05rem; line-height: 1; color: var(--text-dim); }

/* Dashboard */
.dash-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.dash-banner .when { font-size: 1.08rem; font-weight: 600; }
.dash-banner .daytype { font-size: .84rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: var(--surface-2); color: var(--text-dim); margin-left: 8px; }
.dash-banner .daytype.off { background: var(--warn-bg); color: var(--warn); }
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 16px; }
.dash-tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; text-align: left;
  font: inherit; color: inherit; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); animation: rise .4s ease both;
}
.dash-tile::after { content: ''; position: absolute; right: -18px; top: -18px; width: 70px; height: 70px; border-radius: 50%; background: var(--primary-softer); }
button.dash-tile { cursor: pointer; transition: box-shadow .15s, transform .15s; }
button.dash-tile:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.dash-tile .label { font-size: .8rem; color: var(--text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.dash-tile .value { font-size: 2rem; font-weight: 700; margin-top: 4px; line-height: 1.1; font-family: var(--font-head); }
.dash-tile .hint { font-size: .82rem; color: var(--text-dim); margin-top: 6px; }
.dash-tile.present { border-left: 4px solid var(--good); } .dash-tile.present .value { color: var(--good); }
.dash-tile.absent { border-left: 4px solid var(--bad); } .dash-tile.absent .value { color: var(--bad); }
.dash-tile.leave { border-left: 4px solid #f0a020; } .dash-tile.leave .value { color: var(--warn); }
.dash-grid { display: grid; grid-template-columns: 280px 1fr; gap: 16px; margin-bottom: 16px; }
.dash-grid .card + .card { margin-top: 0; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }
.donut { width: 176px; height: 176px; border-radius: 50%; margin: 6px auto 12px; position: relative; }
.donut::after { content: ''; position: absolute; inset: 24px; background: var(--surface); border-radius: 50%; }
.donut .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; }
.donut .center b { font-size: 1.85rem; font-family: var(--font-head); }
.donut .center span { font-size: .8rem; color: var(--text-dim); }
.legend { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-size: .86rem; color: var(--text-dim); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.bar-row { display: grid; grid-template-columns: minmax(70px, 140px) minmax(80px, 1fr) auto; gap: 12px; align-items: center; padding: 8px; border-radius: 9px; width: 100%; background: none; border: none; font: inherit; color: inherit; text-align: left; }
button.bar-row { cursor: pointer; }
button.bar-row:hover { background: var(--surface-2); }
.bar-row .name { font-size: .93rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .counts { font-size: .86rem; color: var(--text-dim); text-align: right; white-space: nowrap; }
@media (max-width: 600px) { .bar-row { grid-template-columns: 1fr; gap: 4px; } .bar-row .counts { text-align: left; } }
.bar-track { height: 14px; border-radius: 99px; background: var(--surface-2); overflow: hidden; display: flex; }
.bar-track span { display: block; height: 100%; transition: width .6s ease; }
.seg-present { background: var(--good); } .seg-absent { background: var(--bad); } .seg-leave { background: #f0a020; }
.seg-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.seg-tabs button {
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: 99px; padding: 6px 15px;
  font: inherit; font-size: .93rem; font-weight: 600; cursor: pointer; transition: all .15s;
}
.seg-tabs button:hover { border-color: var(--primary); color: var(--primary); }
.seg-tabs button.on { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 4px 12px var(--ring); }

/* Photo lightbox */
.photo-lightbox { position: fixed; inset: 0; z-index: 900; background: rgba(8, 10, 22, .94); color: #fff; display: flex; flex-direction: column; animation: fadeIn .2s ease; }
.photo-lightbox-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; flex-wrap: wrap; }
.photo-lightbox-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 20px 20px; }
.photo-lightbox-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 14px; background: #000; animation: popIn .3s ease; }
.photo-lightbox .btn.ghost { color: var(--primary); }

/* Report tabs */
.report-tabs {
  display: flex; gap: 6px; overflow-x: auto; padding: 4px; margin-bottom: 16px; scrollbar-width: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); box-shadow: var(--shadow-sm);
  position: sticky; top: calc(var(--topbar-h) + 8px); z-index: 20;
}
.report-tabs::-webkit-scrollbar { display: none; }
.report-tabs button {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; border: none; background: none; padding: 9px 14px; border-radius: var(--radius);
  font: inherit; font-size: .95rem; font-weight: 600; color: var(--text-dim); cursor: pointer; white-space: nowrap; transition: all .15s;
}
.report-tabs button:hover { background: var(--surface-2); color: var(--text); }
.report-tabs button.on { background: var(--primary); color: #fff; box-shadow: 0 4px 12px var(--ring); }
.report-card[hidden] { display: none; }

/* ---------- Graph reports ---------- */
.gr-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.gr-layout .card + .card { margin-top: 0; }
@media (max-width: 1100px) { .gr-layout { grid-template-columns: 1fr; } }
.gr-builder { position: sticky; top: calc(var(--topbar-h) + 12px); max-height: calc(100vh - var(--topbar-h) - 24px); overflow-y: auto; }
@media (max-width: 1100px) { .gr-builder { position: static; max-height: none; } }
.gr-builder label { font-size: .86rem; color: var(--text-dim); }
.gr-builder .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.chart-types { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 16px; }
.chart-types button {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); color: var(--text-dim); font: inherit; font-size: .7rem; font-weight: 600; cursor: pointer; transition: all .15s;
}
.chart-types button:hover { border-color: var(--primary); color: var(--primary); }
.chart-types button.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.chart-types svg { width: 22px; height: 22px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.chips button {
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-dim); border-radius: 99px; padding: 4px 11px;
  font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; transition: all .15s;
}
.chips button:hover, .chips button.on { border-color: var(--primary); color: var(--primary); background: var(--primary-softer); }
details.more { border: 1px solid var(--border); border-radius: calc(var(--radius) * .7); padding: 0 12px; margin-bottom: 14px; }
details.more summary { cursor: pointer; padding: 10px 0; font-weight: 600; font-size: .93rem; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: '+'; font-size: 1.2rem; color: var(--text-dim); }
details.more[open] summary::after { content: '–'; }
.chart-box { position: relative; height: 420px; }
@media (max-width: 640px) { .chart-box { height: 320px; } }
.gr-empty { display: grid; place-items: center; text-align: center; color: var(--text-dim); min-height: 360px; }
.gr-empty svg { width: 64px; height: 64px; color: var(--text-faint); margin-bottom: 10px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.kpi { background: var(--surface-2); border-radius: calc(var(--radius) * .8); padding: 12px 14px; }
.kpi span { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); font-weight: 700; }
.kpi b { display: block; font-size: 1.45rem; font-family: var(--font-head); margin-top: 2px; }
table.pivot { font-size: .9rem; }
table.pivot th, table.pivot td { white-space: nowrap; }
table.pivot td.num, table.pivot th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.pivot tr.total td, table.pivot td.total { font-weight: 700; background: var(--surface-2); }
table.pivot th:first-child, table.pivot td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }
table.pivot thead th:first-child { background: var(--surface-2); }
table.pivot tbody tr:hover td:first-child { background: var(--surface); }
.saved-views { display: flex; gap: 8px; align-items: center; }
.saved-views select { margin-bottom: 0 !important; flex: 1; }

/* ---------- Responsive shell ---------- */
.sidebar-scrim { display: none; }
@media (max-width: 1023px) {
  .sidebar { transform: translateX(-100%); width: min(300px, 86vw); box-shadow: var(--shadow-lg); z-index: 150; }
  html.nav-open .sidebar { transform: none; }
  .sidebar .collapse-btn { display: none; }
  .sidebar-scrim { display: block; position: fixed; inset: 0; background: rgba(9, 12, 28, .45); z-index: 140; opacity: 0; pointer-events: none; transition: opacity .2s; }
  html.nav-open .sidebar-scrim { opacity: 1; pointer-events: auto; }
  html.nav-open { overflow: hidden; }
  .main-wrap { margin-left: 0 !important; }
  .topbar { padding: 0 14px; }
  .topbar .menu-btn { display: inline-flex; }
  .topbar .top-brand { display: flex; }
  .main { padding: 18px 16px 32px; }
}
@media (max-width: 640px) {
  :root { --topbar-h: 58px; }
  .user-btn .meta, .topbar .top-brand .brand-name { display: none; }
  .user-btn { padding: 3px; }
  .who-company { max-width: 140px; font-size: .78rem; }
  .page-head h1 { font-size: 1.35rem; }
  .card { padding: 16px; }
  .toolbar { gap: 8px; }
  .toolbar input:not([type=checkbox]), .toolbar select { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .toolbar input[type=text], .toolbar input[type=search] { flex-basis: 100%; }
  .toolbar .btn { flex: 1 1 auto; }
  .toolbar .spacer { display: none; }
  .toolbar > label { flex: 0 0 auto; }
  .pagination { justify-content: center; }
  .pagination > span { width: 100%; text-align: center; }
  .gr-builder .grid-2 { grid-template-columns: 1fr; }
}

/* ---------- Motion ---------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: scale(.94) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes toastIn { from { opacity: 0; transform: translateX(110%) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(110%); height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -10px; } }
@keyframes shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) { @keyframes toastIn { from { opacity: 0; transform: translateY(-40px) scale(.95); } to { opacity: 1; transform: none; } } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

@media print {
  .sidebar, .topbar, .gr-builder, .report-tabs, .toast-stack, .no-print { display: none !important; }
  .main-wrap { margin: 0 !important; }
  .gr-layout { grid-template-columns: 1fr; }
  .card { box-shadow: none; border: none; }
}

/* Name cells with a photo/initials avatar stay on one line */
td:has(> .avatar), td:has(> .avatar-btn) { white-space: nowrap; }

/* Attendance: scan photo vs registered photo */
.photo-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; width: 100%; max-width: 980px; height: 100%; align-items: center; }
.photo-compare figure { margin: 0; display: flex; flex-direction: column; gap: 10px; min-height: 0; height: 100%; justify-content: center; }
.photo-compare .pc-frame {
  position: relative; flex: 1; min-height: 0; max-height: calc(100vh - 170px); aspect-ratio: 1 / 1; margin: 0 auto; width: 100%;
  display: grid; place-items: center; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); overflow: hidden;
}
.photo-compare img { width: 100%; height: 100%; object-fit: contain; background: #000; cursor: zoom-in; animation: popIn .3s ease; }
.photo-compare .pc-msg { color: rgba(255, 255, 255, .7); font-size: .95rem; text-align: center; padding: 20px; }
.photo-compare figcaption { text-align: center; line-height: 1.35; }
.photo-compare figcaption b { display: block; font-size: 1rem; }
.photo-compare figcaption span { font-size: .85rem; opacity: .75; }
@media (max-width: 700px) {
  .photo-compare { grid-template-columns: 1fr; gap: 14px; height: auto; align-items: start; }
  .photo-lightbox-stage { overflow-y: auto; align-items: flex-start; }
  .photo-compare .pc-frame { max-height: 38vh; width: auto; height: 38vh; }
  .photo-compare figure { height: auto; }
}
/* Super-admin face check */
button.fc-pill { border: none; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 700; }
.fc-score { margin-left: 6px; font-size: .78rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.fc-pending { animation: fcPulse 1.4s ease-in-out infinite; }
@keyframes fcPulse { 50% { opacity: .45; } }
.fc-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 20px 12px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12);
}
.fc-bar .fc-verdict { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.fc-bar .fc-score { color: rgba(255, 255, 255, .7); }
.fc-bar .fc-actions { display: flex; gap: 8px; }
.fc-bar .btn { width: auto; }
/* API Access docs */
code { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: .88em; background: var(--surface-2); padding: 1px 6px; border-radius: 5px; }
pre.code {
  background: #0f1324; color: #dbe2ff; border-radius: calc(var(--radius) * .8); padding: 14px 16px; overflow-x: auto;
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: .84rem; line-height: 1.55; margin: 0 0 14px; white-space: pre;
}
.code-line { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: calc(var(--radius) * .7); padding: 8px 8px 8px 14px; margin-bottom: 16px; }
.code-line code { flex: 1; background: none; padding: 0; font-size: .92rem; overflow-x: auto; }
.code-line .btn { width: auto; flex-shrink: 0; }
.doc-h { font-size: 1rem; margin: 18px 0 6px; }
/* API Access: "how syncing works" steps */
.sync-explainer { border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); background: var(--primary-softer); border-radius: var(--radius); padding: 14px 16px 16px; margin-bottom: 18px; }
.sync-steps { list-style: none; counter-reset: step; margin: 10px 0 12px; padding: 0; display: grid; gap: 10px; }
.sync-steps li { counter-increment: step; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; align-items: start; }
.sync-steps li::before {
  content: counter(step); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: #fff; font-weight: 700; font-size: .85rem;
}
.sync-steps li b { font-size: .96rem; }
.sync-steps li span { color: var(--text-dim); font-size: .92rem; line-height: 1.5; }


/* Permission gates (shell.js sets html[data-deny]) */
html[data-deny~="attendance.manage"] [data-perm="attendance.manage"],
html[data-deny~="leave.manage"] [data-perm="leave.manage"],
html[data-deny~="members.manage"] [data-perm="members.manage"],
html[data-deny~="devices.manage"] [data-perm="devices.manage"],
html[data-deny~="reports.export"] [data-perm="reports.export"],
html[data-deny~="users.manage"] [data-perm="users.manage"],
html[data-deny~="companies.manage"] [data-perm="companies.manage"] { display: none !important; }
html.fb-denied .main { visibility: hidden; }
.is-readonly input:disabled, .is-readonly select:disabled, .is-readonly textarea:disabled { color: var(--text); background: var(--surface-2); cursor: default; opacity: 1; }
.is-readonly label.toggle-row { cursor: default; }
.view-badge { display: inline-flex; margin-left: 8px; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--surface-3); color: var(--text-dim); vertical-align: middle; }

/* Users: per-area No access / View / Manage */
.perm-matrix { display: grid; gap: 8px; margin-bottom: 16px; }
.perm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: calc(var(--radius) * .7); flex-wrap: wrap; }
.perm-name { min-width: 0; flex: 1 1 180px; }
.perm-name b { display: block; font-size: .95rem; }
.perm-name span { display: block; font-size: .8rem; color: var(--text-dim); line-height: 1.35; }
.perm-seg { width: 100%; flex: 1 1 100%; }
.perm-seg button { padding: 6px 10px; font-size: .84rem; white-space: nowrap; }
.perm-seg button[data-level=""].on { color: var(--text-dim); }
.perm-seg button[data-level="manage"].on { background: var(--primary); color: #fff; }
.is-readonly .perm-seg button { cursor: default; }

/* Dashboard trend charts */
.trend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.trend-grid .card + .card { margin-top: 0; }
@media (max-width: 1000px) { .trend-grid { grid-template-columns: 1fr; } }
.trend-card .card-head { margin-bottom: 8px; }
.trend-card .card-head h2 { font-size: 1rem; }
.trend-seg { width: auto; }
.trend-seg button { padding: 5px 12px; font-size: .84rem; }
.trend-box { position: relative; height: 260px; }
.trend-box.tall { height: 320px; }
@media (max-width: 640px) { .trend-box { height: 230px; } .trend-box.tall { height: 280px; } }
/* Feature gates (shell.js sets html[data-features-off]) */
html[data-features-off~="audit_log"] [data-feature="audit_log"],
html[data-features-off~="device_monitoring"] [data-feature="device_monitoring"],
html[data-features-off~="member_profile"] [data-feature="member_profile"],
html[data-features-off~="self_settings"] [data-feature="self_settings"],
html[data-features-off~="shifts"] [data-feature="shifts"],
html[data-features-off~="leave_requests"] [data-feature="leave_requests"] { display: none !important; }

/* Company features modal */
.feat-list { display: grid; gap: 10px; margin-bottom: 8px; }
.feat { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; transition: border-color .15s, background .15s; }
.feat.on { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); background: var(--primary-softer); }
.feat-top { display: flex; align-items: flex-start; gap: 12px; }
.feat-top input[type=checkbox] { margin-top: 3px !important; }
.feat-top b { display: block; }
.feat-top span { display: block; font-size: .86rem; color: var(--text-dim); line-height: 1.4; }
.feat-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 12px; margin: 10px 0 0 52px; }
.feat-settings label { font-size: .84rem; color: var(--text-dim); font-weight: 500; }
.feat-settings input, .feat-settings select, .feat-settings textarea { margin-bottom: 8px !important; }
.feat:not(.on) .feat-settings { display: none; }
@media (max-width: 640px) { .feat-settings { margin-left: 0; } }

/* Device health */
.health { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .82rem; white-space: nowrap; }
.health i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.health.online { color: var(--good); } .health.online i { background: var(--good); box-shadow: 0 0 0 0 var(--good); animation: pulse 2s infinite; }
.health.offline { color: var(--bad); } .health.offline i { background: var(--bad); }
.health.never, .health.disabled { color: var(--text-faint); } .health.never i, .health.disabled i { background: var(--text-faint); }
.health-sub { display: block; font-size: .76rem; color: var(--text-dim); font-weight: 500; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.dash-alert { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 16px; border-radius: var(--radius); background: var(--bad-bg); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 25%, transparent); font-weight: 600; animation: rise .3s ease; }
.dash-alert a { margin-left: auto; color: inherit; }

/* Member profile */
.mp-head { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.mp-photo .mp-img { width: 96px; height: 96px; border-radius: 20px; object-fit: cover; box-shadow: var(--shadow); }
.mp-info { flex: 1; min-width: 240px; }
.mp-info h2 { font-size: 1.4rem; margin-bottom: 6px; }
.mp-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.mp-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 18px; }
.mp-meta span { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); font-weight: 700; }
.mp-meta b { font-weight: 600; word-break: break-word; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-h { text-align: center; font-size: .76rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase; padding: 4px 0; }
.cal-d { min-height: 62px; border-radius: 10px; padding: 6px 8px; background: var(--surface-2); display: flex; flex-direction: column; justify-content: space-between; border: 1px solid transparent; }
.cal-d b { font-size: .95rem; }
.cal-d small { font-size: .72rem; font-weight: 600; }
.cal-d.empty { background: transparent; }
.cal-d.future { opacity: .45; }
.st-present { background: var(--good-bg); color: var(--good); }
.st-late { background: var(--warn-bg); color: var(--warn); }
.st-absent { background: var(--bad-bg); color: var(--bad); }
.st-leave { background: color-mix(in srgb, #8b5cf6 15%, transparent); color: #8b5cf6; }
.st-holiday { background: var(--info-bg); color: var(--info); }
.st-off { background: var(--surface-3); color: var(--text-faint); }
.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: .84rem; color: var(--text-dim); }
.cal-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 5px; vertical-align: -1px; }
@media (max-width: 640px) { .cal { gap: 3px; } .cal-d { min-height: 46px; padding: 4px; } .cal-d small { display: none; } }

/* Login: forgot password */
.auth-link { display: block; text-align: right; margin: -8px 0 14px; font-size: .9rem; color: var(--primary); cursor: pointer; background: none; border: none; width: 100%; font-family: inherit; }
/* Notifications page */
.nf-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.nf-ch { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; background: var(--surface-2); }
.nf-ch.on { background: var(--good-bg); border-color: color-mix(in srgb, var(--good) 30%, var(--border)); }
.nf-ch small { grid-column: 1 / -1; color: var(--text-dim); font-size: .82rem; }
.nf-h { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); margin: 22px 0 10px; font-family: var(--font-body); }
.nf-rule { margin-top: 12px; }
.nf-rule + .nf-rule { margin-top: 12px; }
.nf-rule-head { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.nf-rule-head .btn { width: auto; }
.nf-rule-body { margin: 14px 0 0 52px; }
.nf-rule:not(.on) .nf-rule-body { display: none; }
.nf-rule.on { border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.nf-chks { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.nf-chk { margin: 0 !important; padding: 6px 10px !important; }
.nf-chk.off { opacity: .5; }
.nf-dim { opacity: .5; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; }
.nf-savebar { position: sticky; bottom: 0; z-index: 15; display: flex; justify-content: flex-end; align-items: center; gap: 14px; padding: 12px 0; margin: 12px 0 16px; background: linear-gradient(transparent, var(--bg) 30%); }
.nf-stats { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 760px) { .nf-rule-body { margin-left: 0; } .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.st-half { background: color-mix(in srgb, #f97316 16%, transparent); color: #ea580c; }

/* Attendance photo preview: member details + previous / next */
.photo-lightbox-stage { position: relative; }
.lb-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; font-size: .9rem; }
.lb-meta span { opacity: .95; }
.lb-meta small { display: inline-block; margin-right: 5px; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; opacity: .6; font-weight: 700; }
.lb-tools { display: flex; align-items: center; gap: 12px; }
.lb-count { font-size: .85rem; opacity: .75; white-space: nowrap; }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .12); color: #fff; font-size: 30px; line-height: 1;
  cursor: pointer; display: grid; place-items: center; transition: background .15s, opacity .15s; backdrop-filter: blur(4px);
}
.lb-nav:hover:not(:disabled) { background: rgba(255, 255, 255, .25); }
.lb-nav:disabled { opacity: .25; cursor: default; }
.lb-nav.prev { left: 14px; }
.lb-nav.next { right: 14px; }
@media (max-width: 700px) { .lb-nav { top: auto; bottom: 10px; transform: none; width: 44px; height: 44px; position: fixed; } }
/* ======================= Phase 4 + 5 ======================= */
.text-bad { color: var(--bad); }
.text-good { color: var(--good); }
.pf-sub { display: block; font-size: .78rem; color: var(--text-dim); font-weight: 500; margin-top: 2px; }
.notice-box { background: var(--warn-bg); color: var(--text); border-radius: calc(var(--radius) * .8); padding: 12px 14px; margin-bottom: 12px; font-size: .93rem; }
.notice-box a { color: var(--primary); font-weight: 600; }
label.toggle-row span small { display: block; font-size: .8rem; color: var(--text-dim); margin-top: 2px; }
.kpi.good b { color: var(--good); } .kpi.bad b { color: var(--bad); } .kpi.warn b { color: var(--warn); }

/* global search */
.search-trigger {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 8px 0 12px; border-radius: 999px; min-width: 220px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); font: inherit; font-size: .9rem; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.search-trigger:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.search-trigger .i { width: 17px; height: 17px; }
.search-trigger .st-label { flex: 1; text-align: left; white-space: nowrap; }
kbd { font-family: inherit; font-size: .72rem; font-weight: 700; padding: 2px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); }
@media (max-width: 900px) { .search-trigger { min-width: 0; width: 38px; padding: 0; justify-content: center; } .search-trigger .st-label, .search-trigger kbd { display: none; } }
.cmdk-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(10, 12, 24, .45); display: none; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; }
.cmdk-backdrop.show { display: flex; animation: fadeIn .12s ease; }
.cmdk { width: 100%; max-width: 620px; background: var(--surface); border-radius: calc(var(--radius) * 1.1); box-shadow: 0 24px 60px rgba(0, 0, 0, .28); overflow: hidden; animation: popIn .16s ease; display: flex; flex-direction: column; max-height: 76vh; }
.cmdk-input { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--border); }
.cmdk-input .i { width: 20px; height: 20px; color: var(--text-dim); flex-shrink: 0; }
.cmdk-input input { border: none !important; box-shadow: none !important; background: none; margin: 0 !important; padding: 16px 0; font-size: 1.05rem; flex: 1; }
.cmdk-list { overflow-y: auto; padding: 6px; }
.cmdk-group { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); padding: 10px 10px 4px; }
.cmdk-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: none; background: none; border-radius: 10px; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.cmdk-item .i { width: 18px; height: 18px; color: var(--text-dim); flex-shrink: 0; }
.cmdk-item .t { flex: 1; min-width: 0; }
.cmdk-item .t b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-item .t small { display: block; color: var(--text-dim); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-item.on { background: var(--primary-soft); }
.cmdk-item.on .i { color: var(--primary); }
.cmdk-empty { padding: 22px 12px; text-align: center; color: var(--text-dim); }
.cmdk-empty.small { font-size: .88rem; padding: 14px 12px; }
.cmdk-foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--border); font-size: .78rem; color: var(--text-dim); }
.cmdk-foot kbd { margin-right: 3px; }
@media (max-width: 640px) { .cmdk-backdrop { padding: 0; } .cmdk { max-width: none; max-height: 100vh; height: 100%; border-radius: 0; } .cmdk-foot { display: none; } }

/* subscription banner */
.lic-banner { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: calc(var(--radius) * .8); margin-bottom: 14px; font-size: .93rem; font-weight: 500; animation: rise .3s ease; }
.lic-banner .i { width: 20px; height: 20px; flex-shrink: 0; }
.lic-banner span { flex: 1; }
.lic-banner.warn { background: var(--warn-bg); color: var(--text); } .lic-banner.warn .i { color: var(--warn); }
.lic-banner.bad { background: var(--bad-bg); color: var(--text); } .lic-banner.bad .i { color: var(--bad); }
.lic-banner .icon-btn { width: 28px; height: 28px; }

/* companies: license fieldset */
.lic-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px 4px; margin: 6px 0 16px; }
.lic-box legend { font-weight: 700; padding: 0 6px; }
.lic-box .grid-2 input, .lic-box .grid-2 select { margin-bottom: 12px; }
.lic-usage { font-size: .88rem; color: var(--text-dim); margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.lic-usage:empty { display: none; }
.lic-usage b { color: var(--text); }

/* platform overview */
.pf-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-bottom: 16px; }
.pf-grid .card + .card { margin-top: 0; }
@media (max-width: 1000px) { .pf-grid { grid-template-columns: 1fr; } }
.pf-alerts { display: grid; gap: 8px; max-height: 330px; overflow-y: auto; }
.pf-alert { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font: inherit; color: var(--text); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.pf-alert:hover { border-color: var(--border-strong); background: var(--surface-2); }
.pf-alert .i { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.pf-alert.bad .i { color: var(--bad); } .pf-alert.warn .i { color: var(--warn); }
.pf-alert b { display: block; font-size: .92rem; }
.pf-alert span { font-size: .88rem; color: var(--text-dim); }
.pf-chart { height: 230px; }
.pf-bars { display: flex; align-items: flex-end; gap: 10px; height: 100%; padding-top: 18px; }
.pf-bar { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.pf-bar i { display: block; width: 100%; max-width: 46px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--primary), var(--accent)); animation: rise .5s ease both; }
.pf-bar .v { font-size: .78rem; font-weight: 700; }
.pf-bar .d { font-size: .74rem; color: var(--text-dim); text-align: center; line-height: 1.2; }
.pf-college { display: flex; align-items: center; gap: 10px; min-width: 170px; }
.pf-college img { width: 34px; height: 34px; border-radius: 8px; object-fit: contain; background: #fff; border: 1px solid var(--border); }
.pf-use { display: inline-flex; flex-direction: column; gap: 4px; font-weight: 600; white-space: nowrap; }
.pf-use small { font-size: .74rem; color: var(--text-dim); font-weight: 500; }
.pf-use i { display: block; width: 74px; height: 5px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.pf-use i b { display: block; height: 100%; background: var(--good); border-radius: 99px; }
.pf-use.warn i b { background: var(--warn); } .pf-use.bad i b { background: var(--bad); } .pf-use.bad { color: var(--bad); }
.pf-spark { color: var(--primary); }
.spark { display: block; }
tr.is-off td { opacity: .6; }
.pf-recent { list-style: none; margin: 0; padding: 0; }
.pf-recent li { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--border); font-size: .9rem; align-items: baseline; }
.pf-recent li:last-child { border-bottom: none; }
.pf-recent small { color: var(--text-dim); white-space: nowrap; }
@media (max-width: 640px) { .pf-recent li { grid-template-columns: 1fr; gap: 2px; } }

/* webhooks */
.wh-url { font-size: .82rem; word-break: break-all; display: inline-block; min-width: 210px; max-width: 340px; }
.wh-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.wh-chips .chip { padding: 2px 8px; font-size: .76rem; font-weight: 600; }
.wh-events { display: grid; gap: 6px; margin-bottom: 14px; }
.wh-events label.toggle-row { margin: 0; }
.wh-events code { font-size: .84rem; }
.wh-docs { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.wh-docs summary { cursor: pointer; font-weight: 600; color: var(--primary); }
.wh-docs[open] summary { margin-bottom: 10px; }
.deliv-list { display: grid; gap: 6px; max-height: 60vh; overflow-y: auto; }
.deliv { border: 1px solid var(--border); border-radius: 10px; }
.deliv summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; cursor: pointer; font-size: .9rem; list-style: none; }
.deliv summary::-webkit-details-marker { display: none; }
.deliv .deliv-id { margin-left: auto; color: var(--text-dim); font-size: .8rem; }
.deliv-body { padding: 0 12px 12px; }
.deliv-body pre.code { max-height: 260px; overflow: auto; }

/* holiday calendar */
.hol-cal-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.hol-cal-head b { font-size: 1.05rem; min-width: 150px; text-align: center; }
.hol-legend { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--text-dim); }
.hol-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-left: 8px; }
.hol-legend i.h { background: var(--bad); } .hol-legend i.w { background: var(--surface-3); } .hol-legend i.t { border: 2px solid var(--primary); }
.hol-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 8px; }
.hol-month { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 10px 8px; background: var(--surface); }
.hol-month h4 { margin: 0 0 6px; font-size: .95rem; display: flex; justify-content: space-between; }
.hol-month h4 small { color: var(--bad); font-weight: 700; }
.hol-dow, .hol-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.hol-dow span { font-size: .7rem; color: var(--text-dim); font-weight: 700; padding-bottom: 2px; }
.hol-days button { aspect-ratio: 1; border: none; background: none; border-radius: 7px; font: inherit; font-size: .8rem; color: var(--text); cursor: pointer; padding: 0; }
.hol-days button:hover { background: var(--primary-soft); }
.hol-days button.w { background: var(--surface-2); color: var(--text-dim); }
.hol-days button.h { background: var(--bad); color: #fff; font-weight: 700; }
.hol-days button.t { box-shadow: inset 0 0 0 2px var(--primary); }
html[data-deny~="leave.manage"] .hol-days button { cursor: default; }
.hol-names { list-style: none; margin: 6px 0 0; padding: 6px 0 0; border-top: 1px dashed var(--border); font-size: .8rem; }
.hol-names li { display: flex; gap: 6px; padding: 1px 0; }
.hol-names b { color: var(--bad); min-width: 18px; }
.hol-preview { margin: 10px 0; }
.hol-preview tr.bad td { color: var(--bad); }
#holText { font-family: ui-monospace, Consolas, monospace; font-size: .9rem; }

/* data & privacy */
.pv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pv-grid .card + .card { margin-top: 0; }
@media (max-width: 900px) { .pv-grid { grid-template-columns: 1fr; } }
.pv-rules { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: .92rem; color: var(--text-dim); }
.pv-rules b { color: var(--text); }
.erase-list { margin: 0 0 12px; padding-left: 18px; font-size: .9rem; color: var(--text-dim); display: grid; gap: 4px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.pager .btn { width: auto; }

/* Hindi: Devanagari needs a little more line height */
html.lang-hi body { line-height: 1.6; }

/* devices: phone binding */
.phone-link { font-weight: 600; white-space: nowrap; }
.phone-warn { display: inline-flex; margin-top: 4px; white-space: nowrap; }

/* Data & Privacy: consent */
.pv-bulk { background: var(--surface-2); border-radius: 12px; padding: 8px 12px; }
.pv-bulk .btn { width: auto; }
.pv-set-sum { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
.pv-set-sum::-webkit-details-marker { display: none; }
.pv-set-sum::after { content: '+'; margin-left: auto; font-size: 1.4rem; color: var(--primary); transition: transform .2s; }
#pvSettings[open] .pv-set-sum::after { transform: rotate(45deg); }
.pv-set-body { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 16px; }
.pv-set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px 16px; margin-bottom: 10px; }
.pv-set-grid label.toggle-row { margin-bottom: 10px; }
.pv-text-wrap { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; }
.pv-text-wrap textarea { font-size: .92rem; line-height: 1.55; }
.pv-template { background: var(--surface-2); border-radius: var(--radius); padding: 16px; align-self: start; }
.pv-template h3 { font-size: 1rem; margin: 0 0 6px; }
.pv-template .btn { width: auto; }
@media (max-width: 900px) { .pv-text-wrap { grid-template-columns: 1fr; } }
.cc-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; }
.cc-facts div { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.cc-facts span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); font-weight: 700; }
@media (max-width: 640px) { .cc-facts { grid-template-columns: 1fr; } }
.cc-small { font-size: .88rem; }
.cc-section { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; }
.cc-section:empty { display: none; }
.cc-section h3 { font-size: 1rem; margin: 0 0 6px; }
.cc-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cc-buttons .btn { width: auto; }
.cc-history { display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; }
.cc-log { margin: 4px 0 10px; font-size: .86rem; }
.cc-log th { width: 160px; color: var(--text-dim); font-weight: 600; background: none; text-transform: none; letter-spacing: 0; }
.cc-log td { word-break: break-word; }
.cc-text summary { cursor: pointer; color: var(--primary); font-weight: 600; font-size: .88rem; margin-top: 8px; }
.cc-text-body { white-space: pre-wrap; font-size: .86rem; background: var(--surface-2); border-radius: 10px; padding: 12px; margin-top: 6px; max-height: 240px; overflow-y: auto; }

/* demo requests */
.ld-info p { margin: 0 0 8px; }
.ld-msg { white-space: pre-wrap; background: var(--surface-2); border-radius: 10px; padding: 10px 12px; font-size: .92rem; }