/* Duty Roster — design tokens, layout and components.
   Colours are defined once here; dark mode just swaps the tokens. */
:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --border: #e2e5ea;
  --border-strong: #cfd4dc;
  --text: #18202e;
  --text-2: #465061;
  --muted: #6b7486;
  --primary: #2952cc;
  --primary-hover: #2145b0;
  --primary-weak: #ebf0fd;
  --on-primary: #ffffff;
  --success: #0f7a52;   --success-weak: #e5f5ee;
  --danger: #c0352b;    --danger-weak: #fdeceb;
  --warning: #a45a00;   --warning-weak: #fdf3e2;

  /* one colour pair per duty, used everywhere a shift appears */
  --morning: #06603f;  --morning-bg: #b9e8cf;
  /* extra colours for duty types a department adds */
  --teal: #0b5e63;  --teal-bg: #b5e4e6;  --rose: #8f1d4f;  --rose-bg: #f6c3d8;  --slate: #333f52;  --slate-bg: #d3d9e3;
  --evening: #173f9e;  --evening-bg: #c3d6fb;
  --night:   #4c26a6;  --night-bg:   #d6c8fb;
  --leave:   #971b1b;  --leave-bg:   #f6c0c0;
  --free:    #744300;  --free-bg:    #f6d898;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-lg: 0 16px 40px rgba(16, 24, 40, .16);
  --font: "Segoe UI", "Nirmala UI", "Noto Sans Bengali", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#0f1319; --surface:#171c24; --surface-2:#1e242e; --border:#2a313d; --border-strong:#3a4250; --text:#e6e9ee; --text-2:#b7bec9; --muted:#8a93a2; --primary:#6f95ff; --primary-hover:#86a6ff; --primary-weak:#1d2742; --on-primary:#0c1220;
    --success:#4cc494; --success-weak:#12291f; --danger:#f07b72; --danger-weak:#321816; --warning:#e5a44b; --warning-weak:#2e2210;
    --teal:#8fe6ea; --teal-bg:#17555a; --rose:#ffb0d0; --rose-bg:#6e2242; --slate:#d4dbe6; --slate-bg:#3a4557;
    --morning:#8ef0c3; --morning-bg:#185c40; --evening:#b8ceff; --evening-bg:#24407e; --night:#d6c7ff; --night-bg:#452d8a; --leave:#ffb3b3; --leave-bg:#7a2424; --free:#ffd98f; --free-bg:#6e4a0c;
    --shadow: none; --shadow-lg: 0 16px 40px rgba(0,0,0,.5); color-scheme: dark; }
}
:root[data-theme="dark"] { --bg:#0f1319; --surface:#171c24; --surface-2:#1e242e; --border:#2a313d; --border-strong:#3a4250; --text:#e6e9ee; --text-2:#b7bec9; --muted:#8a93a2; --primary:#6f95ff; --primary-hover:#86a6ff; --primary-weak:#1d2742; --on-primary:#0c1220;
  --success:#4cc494; --success-weak:#12291f; --danger:#f07b72; --danger-weak:#321816; --warning:#e5a44b; --warning-weak:#2e2210;
  --teal:#8fe6ea; --teal-bg:#17555a; --rose:#ffb0d0; --rose-bg:#6e2242; --slate:#d4dbe6; --slate-bg:#3a4557;
  --morning:#8ef0c3; --morning-bg:#185c40; --evening:#b8ceff; --evening-bg:#24407e; --night:#d6c7ff; --night-bg:#452d8a; --leave:#ffb3b3; --leave-bg:#7a2424; --free:#ffd98f; --free-bg:#6e4a0c;
  --shadow: none; --shadow-lg: 0 16px 40px rgba(0,0,0,.5); color-scheme: dark; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 14px/1.5 var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--primary); }
svg[aria-hidden] { width: 18px; height: 18px; flex: none; }
.notice-bar svg { width: 20px; height: 20px; margin-top: 2px; color: var(--warning); }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 22px; font-weight: 650; }
h2 { font-size: 16px; font-weight: 650; }
h3 { font-size: 14px; font-weight: 650; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }

/* ---------- layout ---------- */
.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font-weight: 700; font-size: 14px; letter-spacing: .5px; }
.brand b { display: block; font-size: 15px; }
.brand span { font-size: 12px; color: var(--muted); }
/* The logo above the name (sidebar, login): black, or white in dark mode. */
.brand.has-logo { flex-direction: column; align-items: flex-start; gap: 8px; }
.brand .logo { height: 30px; width: auto; display: block; }
.login .brand .logo { height: 46px; }
.logo-light { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-dark { display: none !important; }
  :root:not([data-theme="light"]) .logo-light { display: block !important; }
}
:root[data-theme="dark"] .logo-dark { display: none !important; }
:root[data-theme="dark"] .logo-light { display: block !important; }
/* Super Admin: department switcher under the brand */
.dept-pick { padding: 0 14px 10px; }
.dept-pick .select { width: 100%; font-weight: 600; }
.dept-pick .super-link { width: 100%; justify-content: center; margin-bottom: 8px; }
/* Super Admin Panel: same layout, darker brand mark so it is clearly not a department */
.app.super .brand-mark { background: var(--text); color: var(--surface); }
.app.super .brand-mark svg { width: 18px; height: 18px; }
/* Page choices with a short description under each (Super Admin Panel, Logins & Access) */
.feature-boxes { gap: 8px 16px; }
.feature-box { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.feature-box:has(input:checked) { border-color: var(--primary); background: var(--primary-weak); }
.feature-box input { margin-top: 3px; flex: none; }
.feature-box span { display: grid; gap: 2px; min-width: 0; }
.feature-box small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.nav { flex: 1; overflow-y: auto; padding: 6px 10px 12px; }
.nav-group { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; padding: 14px 10px 6px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text-2); text-decoration: none; font-weight: 500; }
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.on { background: var(--primary-weak); color: var(--primary); }
/* How many wait there (e.g. new Online Requests). */
.nav-count { margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11.5px; font-weight: 700; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.nav-count[hidden] { display: none; }
/* Battery Charging: today's row. */
.list-table tr.is-today td { background: var(--primary-weak); }
.nav svg { width: 18px; height: 18px; flex: none; }
.me { border-top: 1px solid var(--border); padding: 12px; }
.me-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; background: none; border-radius: var(--radius-sm); cursor: pointer; text-align: left; }
.me-btn:hover { background: var(--surface-2); }
.me-btn .who { min-width: 0; flex: 1; }
.me-btn b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-btn span { font-size: 12px; color: var(--muted); }
.avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; object-fit: cover; background: var(--primary-weak); color: var(--primary); display: grid; place-items: center; font-weight: 700; }
.avatar.lg { width: 96px; height: 96px; font-size: 32px; margin: 0 auto; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 14px 28px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.topbar .title { flex: 1; min-width: 0; }
.topbar .title .muted { font-size: 12px; }
.btn.menu-btn { display: none; }
/* Every page uses the whole screen width. */
.view { padding: 24px 28px 48px; width: 100%; }
/* Big grids (roster, fine grid, archives) also use the whole height; so do list pages
   whose table is fitted to the window (fitTables in app.js). */
.view.wide, .view.fit { padding-bottom: 16px; }
.view.wide .roster-wrap { max-height: calc(100vh - 185px); }
.backdrop { display: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 50; left: 0; top: 0; width: 264px; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow-lg); }
  .app.nav-open .sidebar { transform: none; }
  .app.nav-open .backdrop { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(10, 14, 20, .4); }
  .btn.menu-btn { display: inline-flex; }
  .topbar { padding: 12px 16px; }
  .view { padding: 16px 16px 40px; }
}

/* ---------- building blocks ---------- */
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.span2 { grid-column: span 2; }
@media (max-width: 1100px) { .g4, .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .span2 { grid-column: auto; } }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.card-h .muted { font-size: 12px; font-weight: 400; }
.card-b { padding: 16px 18px; }
/* Overview: a card that opens its list. */
a.work-card { display: grid; gap: 6px; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.work-card:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); }
/* Coloured cards: the whole card in its colour (--c), the text in the page colour on top, so it reads in light and dark. */
.tinted, a.work-card.tinted { background: var(--c); border-color: var(--c); color: var(--surface); }
.tinted .muted, .tinted .small.muted { color: inherit; opacity: .82; }
a.work-card.tinted:hover { border-color: var(--c); filter: brightness(1.08); }
.tinted .wc-num { color: inherit; font-size: 26px; font-weight: 700; }
.tinted .num.muted { opacity: .7; }
.wc-head { gap: 8px; align-items: center; font-size: 13px; font-weight: 600; }
.wc-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--surface) 22%, transparent); color: inherit; flex: none; }
.wc-icon svg { width: 16px; height: 16px; }
.tinted .badge.danger { background: var(--surface); color: var(--danger); }
.card-b.flush { padding: 0; }

.stat { padding: 14px 16px; }
.stat .k { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.stat .v { font-size: 26px; font-weight: 650; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat .s { font-size: 12px; color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-weight: 550; cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn.primary:hover { background: var(--primary-hover); }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: var(--danger-weak); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn.icon { width: 36px; padding: 0; }
.btn.lg { height: 44px; padding: 0 20px; font-size: 15px; }
.btn svg { width: 16px; height: 16px; }

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > span { font-size: 12px; font-weight: 550; color: var(--text-2); }
.field small { color: var(--muted); font-size: 12px; }
.input, .select, textarea.input { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); }
textarea.input { height: auto; min-height: 96px; padding: 8px 10px; resize: vertical; }
.input:focus, .select:focus, .btn:focus-visible, .nav a:focus-visible, .duty-select:focus { outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 1px; }
.check { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--primary); }

.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.badge.primary { background: var(--primary-weak); color: var(--primary); }
.badge.success { background: var(--success-weak); color: var(--success); }
.badge.danger { background: var(--danger-weak); color: var(--danger); }
.badge.warning { background: var(--warning-weak); color: var(--warning); }
.badge.info { background: var(--primary-weak, var(--surface-2)); color: var(--primary); }
/* Online Requests: the status chosen on the row, tinted like a badge. */
.select.wr-status { width: auto; min-width: 140px; height: 30px; font-size: 13px; font-weight: 600; border-color: transparent; }
.select.wr-status.warning { background: var(--warning-weak); color: var(--warning); }
.select.wr-status.danger { background: var(--danger-weak); color: var(--danger); }
.select.wr-status.success { background: var(--success-weak); color: var(--success); }
.select.wr-status.info { background: var(--primary-weak, var(--surface-2)); color: var(--primary); }
.select.wr-status option { background: var(--surface); color: var(--text); }
.badge.yellow { background: var(--free-bg); color: var(--free); }
.badge.dark { background: var(--slate); color: var(--surface); }

/* duty chips + colour-coded duty dropdowns */
.duty { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--surface-2); color: var(--muted); }
.d-Morning { background: var(--morning-bg); color: var(--morning); }
.d-Evening { background: var(--evening-bg); color: var(--evening); }
.d-Night { background: var(--night-bg); color: var(--night); }
.d-Leave { background: var(--leave-bg); color: var(--leave); }
.d-Free { background: var(--free-bg); color: var(--free); }
.d-Teal { background: var(--teal-bg); color: var(--teal); }
.d-Rose { background: var(--rose-bg); color: var(--rose); }
.d-Slate { background: var(--slate-bg); color: var(--slate); }
.c-Teal { background: var(--teal); } .c-Rose { background: var(--rose); } .c-Slate { background: var(--slate); }
.c-Morning { background: var(--morning); } .c-Evening { background: var(--evening); } .c-Night { background: var(--night); } .c-Leave { background: var(--leave); } .c-Free { background: var(--free); }
.duty-select { appearance: none; -webkit-appearance: none; width: 88px; height: 28px; padding: 0 6px; border: 1px solid transparent; border-radius: 6px; font-size: 12px; font-weight: 600; text-align: center; text-align-last: center; cursor: pointer; background: var(--surface); color: var(--muted); border-color: var(--border); }
.duty-select.d-Morning { background: var(--morning-bg); color: var(--morning); border-color: transparent; }
.duty-select.d-Evening { background: var(--evening-bg); color: var(--evening); border-color: transparent; }
.duty-select.d-Night { background: var(--night-bg); color: var(--night); border-color: transparent; }
.duty-select.d-Leave { background: var(--leave-bg); color: var(--leave); border-color: transparent; }
.duty-select.d-Free { background: var(--free-bg); color: var(--free); border-color: transparent; }
.duty-select.d-Teal { background: var(--teal-bg); color: var(--teal); border-color: transparent; }
.duty-select.d-Rose { background: var(--rose-bg); color: var(--rose); border-color: transparent; }
.duty-select.d-Slate { background: var(--slate-bg); color: var(--slate); border-color: transparent; }
.duty-select:not([class*="d-"]) { border-style: dashed; }
.duty-select option { background: var(--surface); color: var(--text); }

/* tables */
.table-wrap { overflow: auto; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.table th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--text-2); font-weight: 600; font-size: 12px; text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.table .r { text-align: right; }
.table .c { text-align: center; }
.table .nowrap { white-space: nowrap; }
/* Office lists (New Connections, Location Change, …): set column widths, room to breathe, text that wraps evenly. */
.list-table { font-size: 13.5px; line-height: 1.5; }
.list-table.fixed { table-layout: fixed; min-width: 1180px; }
.list-table th { padding: 11px 14px; white-space: nowrap; line-height: 1.3; vertical-align: middle; }
.list-table td { padding: 12px 14px; }
/* Column sort: click a column name (A to Z, Z to A, own order). */
/* Page numbers under a list table. */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pager-pages { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.pager-pages .btn { min-width: 34px; justify-content: center; }
.pager-size { display: flex; align-items: center; gap: 6px; }
.pager-size .select { width: auto; height: 30px; }
.list-table th.col-filter { cursor: pointer; user-select: none; }
.list-table th.col-filter::after { content: " ⇅"; color: var(--muted); font-size: 11px; }
.list-table th.col-filter[data-sort="▲"]::after { content: " ▲"; }
.list-table th.col-filter[data-sort="▼"]::after { content: " ▼"; }
.list-table th.col-filter:hover { color: var(--text); }
.list-table th.col-filter.on, .list-table th.col-filter.on::after { color: var(--primary); }
.list-table td.wrap { white-space: normal; overflow-wrap: anywhere; }
.list-table td b { font-weight: 600; }
/* A plain date lines up with the coloured ones (same size as a badge). */
.date-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; }

/* monthly roster grid */
.roster-wrap { max-height: calc(100vh - 230px); border-radius: 0 0 var(--radius) var(--radius); }
.roster { font-size: 12px; }
.roster th, .roster td { padding: 5px 6px; text-align: center; border-right: 1px solid var(--border); }
.roster th { z-index: 3; }
.roster .sticky1, .roster .sticky2 { position: sticky; background: var(--surface); z-index: 2; }
.roster .sticky1 { left: 0; min-width: 44px; }
.roster .sticky2 { left: 44px; min-width: 46px; box-shadow: 1px 0 0 var(--border); }
.roster th.sticky1, .roster th.sticky2 { z-index: 5; background: var(--surface-2); }
.roster tr.weekend .sticky1, .roster tr.weekend .sticky2 { color: var(--danger); }
.roster tr.today td { background: var(--primary-weak) !important; }
.roster tr.picked td { box-shadow: inset 0 1px 0 var(--primary), inset 0 -1px 0 var(--primary); }
.table tfoot .total-row td { background: var(--surface-2); border-top: 2px solid var(--border-strong); }
.roster .total { font-weight: 650; min-width: 54px; font-variant-numeric: tabular-nums; }
.roster th.total { font-size: 11px; }

/* lists */
.list { display: flex; flex-direction: column; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--border); }
.list-item:last-child { border-bottom: 0; }
.list-item .grow { flex: 1; min-width: 0; }
.empty { padding: 28px 18px; text-align: center; color: var(--muted); }

/* duty columns on the dashboard */
.duty-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.duty-col { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; min-width: 0; }
.duty-col h3 { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; font-size: 13px; }
.duty-col ol { margin: 0; padding: 6px 10px 10px 28px; font-size: 13px; }
.duty-col li { padding: 1px 0; }
@media (max-width: 1100px) { .duty-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .duty-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: var(--radius-sm); }
.tabs button { border: 0; background: none; padding: 5px 12px; border-radius: 5px; cursor: pointer; font-weight: 550; color: var(--muted); }
.tabs button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.notice-bar { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--radius); background: var(--warning-weak); color: var(--text); border: 1px solid color-mix(in srgb, var(--warning) 25%, transparent); }
.notice-bar b { color: var(--warning); }
.hero { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero h1 { font-size: 24px; }
.clock-card { display: flex; align-items: center; gap: 16px; padding: 14px 16px; }
.clock-card .times { display: flex; gap: 18px; }
.clock-card .times div span { display: block; font-size: 11px; color: var(--muted); }
.clock-card .times div b { font-size: 15px; font-variant-numeric: tabular-nums; }
.clock-card .times div span, .clock-card > div > .small { white-space: nowrap; }
@media (max-width: 700px) {
  .hero > .card { width: 100%; }
  .clock-card { flex-wrap: wrap; justify-content: space-between; }
  .clock-card .btn { width: 100%; }
  .tabs { max-width: 100%; overflow-x: auto; }
  .tabs button { white-space: nowrap; }
}
/* Phones: the top bar in rows - menu, title, language, refresh; then the page's buttons on rows of their
   own, big enough to tap. */
@media (max-width: 700px) {
  .topbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .topbar .title { order: 1; flex: 1 1 0; }
  .topbar .title h1 { font-size: 18px; line-height: 1.25; }
  .topbar .title .muted { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .topbar > .menu-btn { order: 0; }
  .topbar > div.no-print:not(#top-actions) { order: 2; }
  .topbar > #refresh-btn { order: 3; }
  .topbar #top-actions { order: 4; flex: 0 0 100%; flex-wrap: wrap; gap: 8px; }
  .topbar #top-actions:empty { display: none; }
  .topbar .btn { min-height: 40px; white-space: nowrap; flex: none; }
  .topbar .btn.icon { min-width: 40px; }
}

.status-dot { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; }
.status-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-dot.on { color: var(--success); }
.status-dot.off { color: var(--muted); }

/* modal + toast */
.modal-bg { position: fixed; inset: 0; z-index: 100; background: rgba(10, 14, 20, .45); display: grid; place-items: center; padding: 16px; }
.modal { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg); }
.modal.wide { width: min(820px, 100%); }
.modal-h { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-b { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.modal-f { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); }
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); max-width: 380px; animation: pop .15s ease-out; }
.toast.err { background: var(--danger); color: #fff; }
.toast.ok { background: var(--success); color: #fff; font-weight: 600; }
/* The entry just saved: shown on its page, lit up for a moment. */
@keyframes just-saved { from { background: var(--success-weak); } to { background: transparent; } }
.list-table tr.just-saved td { animation: just-saved 4s ease-out; }
.list-table tr.just-saved td:first-child { box-shadow: inset 4px 0 0 var(--success); }
@keyframes pop { from { transform: translateY(6px); opacity: 0; } }
.menu { position: absolute; z-index: 60; min-width: 200px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; }
.menu button { display: flex; width: 100%; align-items: center; gap: 8px; padding: 8px 10px; border: 0; background: none; border-radius: 6px; cursor: pointer; text-align: left; }
.menu button:hover { background: var(--surface-2); }

.skeleton { height: 120px; border-radius: var(--radius); background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.error-box { padding: 14px 16px; border-radius: var(--radius); background: var(--danger-weak); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent); }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login .card { width: min(400px, 100%); padding: 28px; }
.login .brand { padding: 0 0 22px; }

@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  .app { display: block; }
  .roster-wrap { max-height: none; overflow: visible; }
}

/* One entry of an office-wide list: details | history & comments */
.modal.record-modal { max-width: 920px; width: calc(100vw - 32px); }
.record-modal .modal-h { padding: 10px 16px; }
.record-modal .modal-h h2 { font-size: 15px; }
.record-modal .modal-b { padding: 12px 16px; gap: 10px; }
.record-modal .modal-f { padding: 10px 16px; align-items: center; }
.record-modal .modal-f .record-actions { margin: 0 auto 0 0; }
.record { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; }
.record-fields { display: grid; gap: 5px; align-content: start; }
.rf { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; font-size: 13px; }
.rf > span { color: var(--muted); }
.rf > div { white-space: pre-wrap; overflow-wrap: anywhere; }
.record-side h3 { margin: 0 0 8px; font-size: 14px; }
/* Files attached to an entry (under its fields). */
.record-files { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); display: grid; gap: 8px; }
.record-files h3 { font-size: 14px; display: flex; align-items: center; gap: 6px; }
.record-files h3 svg, .clip-count svg { width: 15px; height: 15px; }
.file-list { display: grid; gap: 6px; }
.file-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.file-row .small { flex: 1; min-width: 140px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--primary); font: inherit; font-weight: 600; cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.link-btn:hover { text-decoration: underline; }
.table tr.group-row td { background: var(--surface-2); font-weight: 600; font-size: 12.5px; padding-top: 7px; padding-bottom: 7px; color: var(--text-2); }
/* A branch's own row in the branch table on its Home. */
.table tr.mine-row td { background: var(--primary-weak); }
.clip-count { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); font-size: 12px; font-weight: 500; margin-left: 6px; vertical-align: middle; }
/* Why a charge is what it is: offer / reference / referral, each with its own colour. */
.kind-text { font-weight: 600; margin-top: 2px; }
.kind-text.kind-offer { color: var(--success); }
.kind-text.kind-reference { color: var(--primary); }
.kind-text.kind-referral { color: var(--warning); }
.badge.kind-offer { background: var(--success-weak); color: var(--success); }
.badge.kind-reference { background: var(--primary-weak); color: var(--primary); }
.badge.kind-referral { background: var(--warning-weak); color: var(--warning); }
.badge.kind-sme { background: color-mix(in srgb, #7c3aed 12%, var(--surface)); color: #7c3aed; white-space: normal; }
.timeline { max-height: 34vh; overflow: auto; display: grid; gap: 10px; padding-right: 4px; align-content: start; }
.tl-item { border-left: 3px solid var(--border); padding: 2px 0 2px 10px; font-size: 12.5px; }
.tl-item.tl-create { border-color: var(--success); }
.tl-item.tl-comment { border-color: var(--primary); }
.tl-item ul { margin: 4px 0 0; padding-left: 16px; display: grid; gap: 2px; }
.tl-text { background: var(--primary-weak); padding: 6px 10px; border-radius: 8px; white-space: pre-wrap; margin-top: 4px; }
.comment-box { display: grid; gap: 6px; margin-top: 8px; }
.comment-box textarea.input { min-height: 38px; }
.comment-box button { justify-self: end; }
.record-actions { gap: 8px; flex-wrap: wrap; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--surface-2); }
@media (max-width: 800px) { .record { grid-template-columns: 1fr; } .rf { grid-template-columns: 1fr; gap: 2px; } }

/* Home: battery card, LED team tiles, duty counts coloured by their duty */
.battery-today { gap: 14px; flex-wrap: wrap; align-items: center; border-left: 4px solid var(--warning); }
.battery-today.is-done { border-left-color: var(--success); }
.bt-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--warning-weak); color: var(--warning); }
.battery-today.is-done .bt-icon { background: var(--success-weak); color: var(--success); }
.bt-icon svg { width: 22px; height: 22px; }
.team-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.team-tile { border-radius: 12px; overflow: hidden; border: 1px solid var(--cb); background: var(--surface); }
.tt-h { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; background: var(--c); color: var(--surface); }
.tt-h b { font-size: 14px; } .tt-h span { font-size: 12px; opacity: .85; }
.tt-people { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 12px; }
.tt-p { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--cb); color: var(--c); font-size: 13px; font-weight: 600; }
.tt-p i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 700; background: var(--c); color: var(--surface); }
.tt-p em { font-style: normal; font-size: 10px; font-weight: 600; opacity: .8; }
.stat.toned { border-top: 4px solid var(--c); }
.stat.toned .v { color: var(--c); }
.stat .share { height: 5px; border-radius: 3px; background: var(--surface-2); margin: 8px 0 6px; overflow: hidden; }
.stat .share span { display: block; height: 100%; background: var(--c); border-radius: 3px; }
.stat.zero { opacity: .62; }
.tt-loc { display: flex; align-items: center; gap: 8px; padding: 9px 12px 0; font-weight: 600; color: var(--c); }
.tt-loc svg { width: 16px; height: 16px; flex: none; }
.tl-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.tl-chip:disabled { cursor: default; }
.tl-chip svg { width: 14px; height: 14px; }
table.list-table tbody tr[data-open] { cursor: pointer; }
.fine-cell { min-width: 56px; height: 28px; border: 1px dashed var(--border); border-radius: 6px; background: transparent; cursor: pointer; font: inherit; }
.fine-cell:hover { border-color: var(--primary); }
.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { .g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .g6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
button.card.stat { font: inherit; color: inherit; border: 1px solid var(--border); }

/* My Movement quick card (branch home and My Movement): who is out now, Going out / Taking leave / I'm back. */
.card.mvq { padding: 16px 18px; display: grid; gap: 12px; }
.mvq-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mvq-title { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 10px; }
.mvq-title b { font-size: 16px; }
.mvq-pin { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-weak); font-size: 18px; flex: none; }
.mvq-ok { color: var(--success); font-weight: 600; }
.mvq-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.mvq-big { font-size: 15px; padding: 10px 16px; height: auto; }
.mvq-list { display: grid; gap: 8px; }
.mvq-item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.mvq-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--on-primary, #fff); font-weight: 700; font-size: 14px; flex: none; }
.mvq-main { flex: 1; min-width: 220px; display: grid; gap: 6px; }
.mvq-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mvq-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 12.5px; }
.mvq-chip.late { color: var(--danger); border-color: var(--danger); }
@media (max-width: 600px) { .mvq-actions, .mvq-actions .btn, .mvq-item .mvq-big { width: 100%; } .mvq-actions { display: grid; grid-template-columns: 1fr 1fr; } }

/* Online Requests: headings on one line. */
.wr-table th { white-space: nowrap; }
/* Online Requests: the ⋯ menu beside Add (Forward / Turn down). */
.wr-menu { position: fixed; z-index: 60; min-width: 200px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); display: grid; gap: 2px; }
.wr-menu button { all: unset; cursor: pointer; padding: 9px 12px; border-radius: 7px; font-size: 14px; }
.wr-menu button:hover, .wr-menu button:focus-visible { background: var(--surface-2); }
.wr-menu button.danger { color: var(--danger); }
/* Home duty lists (today): the check-in time beside each name. */
.duty-col li.has-in { display: list-item; }
.duty-col li .in-at { float: right; margin-left: 8px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--success); }
.duty-col li .in-at.late { color: var(--danger); font-weight: 600; }
/* Messages: the chats on the left, the open chat on the right. */
.chat { display: grid; grid-template-columns: 290px 1fr; height: calc(100vh - 150px); min-height: 460px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.chat-list { border-right: 1px solid var(--border); overflow-y: auto; padding: 8px; display: grid; align-content: start; gap: 2px; }
.chat-sep { padding: 10px 10px 4px; text-transform: uppercase; letter-spacing: .04em; }
.chat-item { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; width: 100%; }
.chat-item:hover { background: var(--surface-2); }
.chat-item.on { background: var(--primary-weak); }
.chat-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-weight: 700; font-size: 13px; flex: none; }
.chat-item.on .chat-av { background: var(--primary); color: var(--on-primary, #fff); }
.chat-who { flex: 1; min-width: 0; display: grid; }
.chat-who b, .chat-who span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-unread { background: var(--danger); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; }
.chat-main { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; min-height: 0; }
.chat-head { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 15px; }
.chat-msgs { overflow-y: auto; padding: 14px 16px; display: grid; align-content: start; gap: 6px; background: var(--bg); }
.chat-day { text-align: center; margin: 8px 0 2px; }
.chat-msg { display: grid; justify-items: start; }
.chat-msg.mine { justify-items: end; }
.chat-from { margin: 0 0 2px 8px; color: var(--primary); font-weight: 600; }
.chat-bubble { max-width: min(560px, 80%); background: var(--surface); border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; padding: 8px 12px; display: grid; gap: 4px; }
.chat-msg.mine .chat-bubble { background: var(--primary-weak); border-color: transparent; border-radius: 14px 14px 4px 14px; }
.chat-text { white-space: normal; overflow-wrap: anywhere; }
.chat-time { color: var(--muted); justify-self: end; font-size: 11px; }
.chat-del { all: unset; cursor: pointer; color: var(--muted); padding: 0 3px; font-weight: 700; }
.chat-del:hover { color: var(--danger); }
.chat-img { max-width: 260px; max-height: 260px; border-radius: 10px; cursor: zoom-in; display: block; }
.chat-file { all: unset; cursor: pointer; color: var(--primary); }
.chat-send { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--border); }
.chat-input { flex: 1; display: grid; gap: 4px; }
.chat-input textarea { resize: none; min-height: 40px; height: 40px; padding-top: 9px; }
@media (max-width: 760px) { .chat { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: calc(100vh - 130px); } .chat-list { border-right: 0; border-bottom: 1px solid var(--border); max-height: 170px; } }
/* The top bar's Messages icon with its unread number. */
.top-chat { position: relative; }
.top-count { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--surface); }
.top-count[hidden] { display: none; }
/* The 🔔 list. */
.bell-menu { position: fixed; z-index: 70; width: min(360px, calc(100vw - 16px)); max-height: min(520px, 75vh); display: grid; grid-template-rows: auto 1fr; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.16); overflow: hidden; }
.bell-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.bell-list { overflow-y: auto; }
.bell-item { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 2px; width: 100%; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.bell-item:hover { background: var(--surface-2); }
.bell-item.new { background: var(--primary-weak); }
.bell-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* An item with its ✓ (mark read) on the right. */
.bell-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
.bell-row .bell-item { flex: 1; min-width: 0; border-bottom: 0; }
.bell-read { all: unset; box-sizing: border-box; cursor: pointer; width: 40px; display: grid; place-items: center; color: var(--muted); font-weight: 700; }
.bell-read:hover { background: var(--surface-2); color: var(--primary); }
.bell-head { flex-wrap: wrap; gap: 6px; }
/* Online Requests: the call-back time under the status. */
.cb-chip { display: inline-block; margin-top: 4px; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--primary-weak); color: var(--primary); cursor: pointer; white-space: nowrap; }
.cb-chip.due { background: var(--danger-weak); color: var(--danger); font-weight: 600; }
.cb-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.btn.cb-set { margin-left: 4px; height: 24px; width: 26px; font-size: 12px; opacity: .55; }
.btn.cb-set:hover { opacity: 1; }
.chat-find { margin: 2px 2px 8px; width: calc(100% - 4px); height: 34px; }
.chat-list > [data-list] { display: grid; gap: 2px; }
/* Messages, WhatsApp style: the patterned chat background, green bubbles of one's own, ✓✓ ticks, a menu on each message. */
.chat.wa { --wa-head: #f0f2f5; --wa-bg: #efeae2; --wa-in: #fff; --wa-out: #d9fdd3; --wa-text: #111b21; --wa-sub: #667781; --wa-green: #00a884; --wa-tick: #53bdeb; --wa-hover: #f5f6f6; --wa-on: #f0f2f5; --wa-line: #e9edef; --wa-quote: rgba(11,20,26,.05);
  --wa-doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' fill='none' stroke='%23000' stroke-opacity='.06' stroke-width='1.5'%3E%3Ccircle cx='14' cy='14' r='6'/%3E%3Cpath d='M50 8l8 8-8 8-8-8z'/%3E%3Cpath d='M10 56q8-10 16 0t16 0'/%3E%3Crect x='54' y='50' width='14' height='10' rx='3'/%3E%3Cpath d='M34 34l4 6h-8z'/%3E%3C/svg%3E");
  grid-template-columns: 340px 1fr; border-color: var(--wa-line); color: var(--wa-text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chat.wa { --wa-head: #202c33; --wa-bg: #0b141a; --wa-in: #202c33; --wa-out: #005c4b; --wa-text: #e9edef; --wa-sub: #8696a0; --wa-hover: #202c33; --wa-on: #2a3942; --wa-line: #222d34; --wa-quote: rgba(255,255,255,.07);
  --wa-doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' fill='none' stroke='%23fff' stroke-opacity='.05' stroke-width='1.5'%3E%3Ccircle cx='14' cy='14' r='6'/%3E%3Cpath d='M50 8l8 8-8 8-8-8z'/%3E%3Cpath d='M10 56q8-10 16 0t16 0'/%3E%3Crect x='54' y='50' width='14' height='10' rx='3'/%3E%3Cpath d='M34 34l4 6h-8z'/%3E%3C/svg%3E"); } }
:root[data-theme="dark"] .chat.wa { --wa-head: #202c33; --wa-bg: #0b141a; --wa-in: #202c33; --wa-out: #005c4b; --wa-text: #e9edef; --wa-sub: #8696a0; --wa-hover: #202c33; --wa-on: #2a3942; --wa-line: #222d34; --wa-quote: rgba(255,255,255,.07);
  --wa-doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' fill='none' stroke='%23fff' stroke-opacity='.05' stroke-width='1.5'%3E%3Ccircle cx='14' cy='14' r='6'/%3E%3Cpath d='M50 8l8 8-8 8-8-8z'/%3E%3Cpath d='M10 56q8-10 16 0t16 0'/%3E%3Crect x='54' y='50' width='14' height='10' rx='3'/%3E%3Cpath d='M34 34l4 6h-8z'/%3E%3C/svg%3E"); }
.chat.wa .chat-list { padding: 0; background: var(--surface); border-color: var(--wa-line); gap: 0; align-content: start; }
.chat.wa .wa-find { padding: 8px 12px; border-bottom: 1px solid var(--wa-line); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.chat.wa .chat-find { margin: 0; width: 100%; border-radius: 8px; background: var(--wa-on); border-color: transparent; height: 36px; }
.chat.wa .chat-list > [data-list] { gap: 0; }
.chat.wa .chat-sep { color: var(--wa-green); font-weight: 600; padding: 14px 16px 6px; }
.chat.wa .chat-item { border-radius: 0; padding: 0 0 0 14px; gap: 14px; height: 70px; }
.chat.wa .chat-item:hover { background: var(--wa-hover); }
.chat.wa .chat-item.on { background: var(--wa-on); }
.chat.wa .chat-item .chat-who { height: 100%; align-content: center; padding-right: 14px; border-bottom: 1px solid var(--wa-line); gap: 2px; }
.chat.wa .chat-av { width: 46px; height: 46px; font-size: 16px; }
.chat.wa .chat-item.on .chat-av { color: #fff; }
.wa-row1, .wa-row2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wa-row1 b { flex: 1; min-width: 0; font-weight: 500; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-when { font-size: 12px; color: var(--wa-sub); flex: none; }
.wa-when.new { color: var(--wa-green); font-weight: 600; }
.wa-prev { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wa-sub) !important; font-size: 14px; }
.chat.wa .chat-unread { background: var(--wa-green); color: #fff; min-width: 20px; text-align: center; padding: 2px 6px; }
.chat.wa .chat-head { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--wa-head); border-color: var(--wa-line); min-height: 60px; box-sizing: border-box; }
.chat.wa .chat-head .chat-av { width: 40px; height: 40px; }
.chat.wa .chat-head .chat-who { display: grid; }
.chat.wa .chat-head .chat-who b { font-weight: 500; font-size: 16px; }
.chat.wa .chat-head .chat-who span { color: var(--wa-sub); }
.chat.wa .chat-main { position: relative; }
.chat.wa .chat-msgs { background: var(--wa-bg) var(--wa-doodle); padding: 12px 6% 16px; gap: 2px; }
.chat.wa .chat-day { margin: 10px 0 6px; text-align: center; }
.chat.wa .chat-day span { display: inline-block; background: var(--wa-in); color: var(--wa-sub); font-size: 12.5px; padding: 5px 12px; border-radius: 8px; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.chat.wa .chat-msg { position: relative; }
.chat.wa .chat-msg.first { margin-top: 8px; }
.chat.wa .chat-msg.flash .chat-bubble { box-shadow: 0 0 0 3px var(--wa-tick); }
.chat.wa .chat-bubble { position: relative; display: block; max-width: min(560px, 75%); background: var(--wa-in); color: var(--wa-text); border: 0; border-radius: 8px; padding: 6px 8px 8px 9px; box-shadow: 0 1px .5px rgba(11,20,26,.13); font-size: 14.2px; line-height: 19px; }
.chat.wa .chat-msg.mine .chat-bubble { background: var(--wa-out); border-radius: 8px; }
.chat.wa .chat-msg.first:not(.mine) .chat-bubble { border-top-left-radius: 0; }
.chat.wa .chat-msg.first.mine .chat-bubble { border-top-right-radius: 0; }
.chat.wa .chat-msg.first:not(.mine) .chat-bubble::before { content: ""; position: absolute; top: 0; left: -8px; border-style: solid; border-color: transparent var(--wa-in) transparent transparent; border-width: 0 8px 10px 0; }
.chat.wa .chat-msg.first.mine .chat-bubble::before { content: ""; position: absolute; top: 0; right: -8px; border-style: solid; border-color: transparent transparent transparent var(--wa-out); border-width: 0 0 10px 8px; }
.chat.wa .chat-from { margin: 0 0 2px; font-size: 12.8px; font-weight: 500; padding-right: 18px; }
.wa-unit { color: var(--wa-sub); font-weight: 400; }
.chat.wa .chat-text { overflow-wrap: anywhere; }
.chat.wa .chat-text a { color: #027eb5; }
.chat.wa .chat-time { float: right; margin: 8px 0 -6px 10px; position: relative; top: 2px; font-size: 11px; color: var(--wa-sub); display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.wa-tick { color: #8696a0; display: inline-flex; vertical-align: middle; }
.wa-tick.read { color: #53bdeb; }
.wa-menu-btn { all: unset; cursor: pointer; position: absolute; top: 2px; right: 3px; width: 22px; height: 20px; text-align: center; font-size: 15px; line-height: 14px; color: var(--wa-sub); border-radius: 50%; opacity: 0; background: inherit; z-index: 1; }
.chat.wa .chat-bubble:hover .wa-menu-btn, .wa-menu-btn:focus-visible { opacity: 1; }
@media (hover: none) { .wa-menu-btn { opacity: .7; } }
.wa-fwd { color: var(--wa-sub); font-style: italic; font-size: 12.5px; margin-bottom: 2px; padding-right: 18px; }
.wa-quote { cursor: pointer; display: grid; gap: 1px; background: var(--wa-quote, rgba(11,20,26,.05)); border-left: 4px solid var(--qc); border-radius: 6px; padding: 5px 10px 6px 8px; margin: 2px 0 5px; font-size: 13px; min-width: 120px; }
.wa-quote b { color: var(--qc); font-weight: 500; font-size: 12.8px; }
.wa-quote span { color: var(--wa-sub); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.chat.wa .chat-img { max-width: 300px; max-height: 300px; border-radius: 6px; margin: 0 0 4px; }
.chat.wa .chat-file { display: flex; gap: 10px; align-items: center; background: var(--wa-quote); border-radius: 6px; padding: 8px 10px; margin-bottom: 4px; color: var(--wa-text); min-width: 220px; box-sizing: border-box; }
.wa-doc { font-size: 26px; }
.wa-reacts { display: flex; gap: 2px; margin: -6px 10px 4px; position: relative; z-index: 1; cursor: pointer; }
.chat-msg.mine .wa-reacts { justify-content: flex-end; }
.wa-reacts span { background: var(--wa-in); border-radius: 999px; padding: 1px 6px; font-size: 14px; box-shadow: 0 1px 3px rgba(11,20,26,.2); display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--wa-line); }
.wa-reacts span.mine { border-color: var(--wa-green); }
.wa-reacts small { font-size: 11px; color: var(--wa-sub); }
.wa-menu { position: absolute; z-index: 30; background: var(--surface); color: var(--text); border-radius: 12px; box-shadow: 0 8px 28px rgba(11,20,26,.25); padding: 6px 0; min-width: 210px; display: grid; }
.wa-menu > button { all: unset; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 9px 18px; font-size: 14.5px; }
.wa-menu > button:hover { background: var(--surface-2); }
.wa-menu > button span { width: 20px; text-align: center; }
.wa-emojis { display: flex; gap: 2px; padding: 4px 10px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.wa-emojis button { all: unset; cursor: pointer; font-size: 22px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; transition: transform .1s; }
.wa-emojis button:hover { transform: scale(1.2); background: var(--surface-2); }
.wa-emojis button.on { background: var(--primary-weak); }
.chat.wa .wa-compose { background: var(--wa-head); border-top: 1px solid var(--wa-line); }
.wa-quote-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px 0 70px; }
.wa-quote-bar[hidden] { display: none; }
.wa-quote-bar .wa-quote { flex: 1; margin: 0; cursor: default; background: var(--surface); }
.chat.wa .chat-send { border: 0; padding: 8px 14px; align-items: flex-end; }
.chat.wa .chat-input textarea { border-radius: 10px; border: 0; background: var(--surface); min-height: 42px; height: 42px; padding: 10px 14px; line-height: 20px; }
.wa-round { all: unset; cursor: pointer; flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--wa-sub); }
.wa-round:hover { background: var(--wa-on); }
.wa-round svg { width: 22px; height: 22px; }
.wa-send { background: var(--wa-green); color: #fff; }
.wa-send:hover { background: #008f72; }
.wa-send:disabled { opacity: .6; }
.wa-person { display: flex; align-items: center; gap: 12px; padding: 6px 2px; }
label.wa-person { cursor: pointer; }
.wa-person .chat-av { width: 34px; height: 34px; font-size: 12px; }
.wa-fwd-list { max-height: 46vh; overflow-y: auto; }
.wa-info-msg { background: #d9fdd3; color: #111b21; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 120px; overflow-y: auto; }
.wa-info-h { display: flex; align-items: center; gap: 6px; margin: 12px 0 4px; font-size: 13px; color: var(--muted); font-weight: 600; }
@media (max-width: 760px) { .chat.wa { grid-template-columns: 1fr; } .chat.wa .chat-msgs { padding: 10px 10px 14px; } .chat.wa .chat-bubble { max-width: 85%; } .wa-quote-bar { padding-left: 14px; } .chat.wa .chat-item { height: 62px; } }
/* Messages on a phone, as in WhatsApp: the chat list fills the screen; a chat opens over it with a green head and ←. */
.wa-head-in { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.wa-head-in .chat-who b, .wa-head-in .chat-who span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-back { display: none; }
@media (max-width: 760px) {
  .chat.wa { margin: -16px -16px -40px; border: 0; border-radius: 0; grid-template-columns: 1fr; grid-template-rows: 1fr; min-height: 0; height: calc(100dvh - 90px); }
  .chat.wa .chat-list { max-height: none; border: 0; }
  .chat.wa.show-chat .chat-list { display: none; }
  .chat.wa:not(.show-chat) .chat-main { display: none; }
  .chat.wa .wa-find { padding: 8px 12px; }
  .chat.wa .chat-find { height: 40px; border-radius: 20px; padding-left: 16px; }
  .chat.wa .chat-item { height: 72px; padding-left: 12px; gap: 12px; }
  .chat.wa .chat-item.on { background: transparent; }
  .chat.wa .chat-item:active { background: var(--wa-on); }
  .chat.wa .chat-av { width: 50px; height: 50px; }
  .chat.wa .chat-head { background: #008069; color: #fff; border: 0; padding: 6px 10px 6px 4px; gap: 2px; min-height: 58px; }
  .chat.wa .chat-head .chat-who span { color: rgba(255,255,255,.82); }
  .chat.wa .chat-head .chat-av { width: 38px; height: 38px; font-size: 14px; }
  .chat.wa .wa-head-in { gap: 10px; }
  .wa-back { all: unset; cursor: pointer; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none; color: inherit; }
  .wa-back:active { background: rgba(255,255,255,.15); }
  .chat.wa .chat-msgs { padding: 8px 10px 10px; }
  .chat.wa .chat-bubble { max-width: 85%; font-size: 15px; line-height: 20px; }
  .chat.wa .chat-msg { -webkit-touch-callout: none; }
  .chat.wa .chat-img { max-width: 100%; }
  .wa-menu-btn { display: none; }
  .chat.wa .wa-compose { background: var(--wa-bg) var(--wa-doodle); border: 0; }
  .wa-quote-bar { padding: 6px 60px 0 10px; }
  .wa-quote-bar .wa-quote { border-radius: 12px; }
  .chat.wa .chat-send { padding: 6px 6px 8px; gap: 6px; }
  .chat.wa .chat-send > .wa-round:first-child { background: var(--wa-in); box-shadow: 0 1px .5px rgba(11,20,26,.13); }
  .chat.wa .chat-input textarea { border-radius: 22px; min-height: 44px; height: 44px; padding: 11px 16px; font-size: 16px; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
  .wa-round { width: 44px; height: 44px; }
  .wa-send { width: 48px; height: 48px; }
  .wa-menu { position: fixed; left: 12px !important; right: 12px; top: auto !important; bottom: 12px; min-width: 0; border-radius: 16px; padding: 8px 0; z-index: 80; }
  .wa-menu > button { padding: 13px 22px; font-size: 16px; }
  .wa-emojis { justify-content: space-around; }
  .wa-emojis button { width: 44px; height: 44px; font-size: 28px; }
}
@media (max-width: 760px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chat.wa .chat-head { background: var(--wa-head); } }
@media (max-width: 760px) { :root[data-theme="dark"] .chat.wa .chat-head { background: var(--wa-head); } }
/* Voice messages: the mic in place of ➤ while there is nothing to send; the recording bar; the player in a message. */
.chat-send:not(.can-send) button[type="submit"] { display: none; }
.chat-send.can-send .wa-mic { display: none; }
.wa-rec { display: none; flex: 1; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px 0 4px; background: var(--surface); border-radius: 22px; }
.chat-send.recording .wa-rec { display: flex; }
.chat-send.recording > label.wa-round, .chat-send.recording .chat-input { display: none; }
.wa-rec .wa-round { width: 36px; height: 36px; font-size: 18px; }
.wa-rec b { font-variant-numeric: tabular-nums; min-width: 38px; }
.wa-rec-hint { color: var(--wa-sub, var(--muted)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wa-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #f15c6d; animation: wa-blink 1s infinite; flex: none; }
@keyframes wa-blink { 50% { opacity: .2; } }
.wa-voice { --p: 0%; display: flex; align-items: center; gap: 8px; min-width: 230px; padding: 2px 0 0; }
.wa-voice-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #00a884; font-size: 18px; flex: none; }
.chat-msg.mine .wa-voice-av { background: #06cf9c; }
.wa-play { all: unset; cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; font-size: 18px; color: var(--wa-sub); flex: none; }
.wa-vbar { position: relative; flex: 1; height: 16px; cursor: pointer; }
.wa-vbar::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 3px; border-radius: 2px; background: var(--wa-sub); opacity: .35; }
.wa-vfill { position: absolute; left: 0; top: 7px; height: 3px; border-radius: 2px; width: var(--p); background: #00a884; }
.wa-vknob { position: absolute; top: 3px; left: calc(var(--p) - 6px); width: 12px; height: 12px; border-radius: 50%; background: #00a884; }
.chat-msg.mine .wa-vfill, .chat-msg.mine .wa-vknob { background: #53bdeb; }
.wa-vtime { font-size: 11.5px; color: var(--wa-sub); min-width: 32px; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .wa-voice { min-width: 210px; } .wa-rec { min-height: 44px; } }
.wa-seen-at { margin-left: auto; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
/* Messages: photos in the avatars; a person's photo beside their messages in a group; the 📷 for the group photo. */
.chat-av.has-img { background: none !important; overflow: hidden; }
.chat-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.chat.wa .chat-msg:not(.mine) { padding-left: 38px; }
.chat.wa .wa-msg-av { position: absolute; left: 0; top: 0; width: 30px !important; height: 30px !important; font-size: 11px !important; }
.chat.wa .wa-find { display: flex; gap: 8px; align-items: center; }
.wa-ph-btn { width: 36px; height: 36px; font-size: 18px; }
/* Messages: "… লিখছে…" in the chat's head and in the list, green as on WhatsApp. */
.wa-typing { color: #00a884 !important; font-weight: 500; font-style: normal; }
.chat.wa .chat-head .wa-typing { color: #00a884 !important; }
@media (max-width: 760px) { .chat.wa .chat-head .wa-typing { color: #d9fdd3 !important; } }
/* Messages: a CMS entry's card (how it stands now; a tap opens it). */
.wa-card { cursor: pointer; display: grid; gap: 2px; background: var(--wa-quote, rgba(11,20,26,.05)); border-left: 4px solid #2952cc; border-radius: 6px; padding: 7px 10px; margin: 2px 0 6px; font-size: 13px; min-width: 230px; }
.wa-card:hover { filter: brightness(.97); }
.wa-card-h { font-weight: 600; color: #2952cc; }
.wa-card-about { color: var(--wa-sub, var(--muted)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.wa-card-s { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 3px; }
.wa-card-status { background: #2952cc; color: #fff; border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 600; }
.wa-card.mini { display: block; min-width: 0; padding: 4px 8px; font-size: 12.5px; }
/* Messages: @mentions — the picker over the box, the marked names, the "@" in the list. */
.chat.wa .wa-compose { position: relative; }
.wa-mention { position: absolute; left: 12px; bottom: calc(100% + 4px); z-index: 25; width: min(340px, calc(100% - 24px)); max-height: 300px; overflow-y: auto; background: var(--surface); border-radius: 10px; box-shadow: 0 8px 28px rgba(11,20,26,.25); padding: 4px 0; }
.wa-mention[hidden] { display: none; }
.wa-pick { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 12px; }
.wa-pick .chat-av { width: 32px !important; height: 32px !important; font-size: 12px !important; }
.wa-pick:hover, .wa-pick.on { background: var(--surface-2); }
.wa-at { color: #027eb5; font-weight: 600; }
.chat-msg.mine .wa-at { color: #0b7a5a; }
.wa-at-badge { background: #00a884; color: #fff; border-radius: 50%; width: 20px; height: 20px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.chat.wa .chat-msg.at-me .chat-bubble { box-shadow: 0 0 0 2px rgba(0,168,132,.35), 0 1px .5px rgba(11,20,26,.13); }
/* Messages: a photo's preview before sending; a photo opened big. */
.wa-att-prev { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: 10px; padding: 6px 8px; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.wa-att-prev img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; }
.wa-att-prev div { display: grid; min-width: 0; flex: 1; }
.wa-att-prev b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-viewer { position: fixed; inset: 0; z-index: 200; background: rgba(11,20,26,.92); display: grid; grid-template-rows: auto 1fr; cursor: zoom-out; }
.wa-viewer > img { max-width: 96vw; max-height: calc(100vh - 70px); margin: auto; object-fit: contain; border-radius: 4px; }
.wa-viewer-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; color: #e9edef; }
.wa-viewer-bar span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-viewer-bar .wa-round { color: #e9edef; font-size: 18px; }
.chat.wa .chat-img { cursor: zoom-in; }
/* Messages: the filter chips (All, Unread, Favourites, one's own lists) and the ☆ on a chat. */
.wa-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px 12px 10px; border-bottom: 1px solid var(--wa-line, var(--border)); }
.wa-chip { all: unset; cursor: pointer; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); font-size: 13px; color: var(--text-2, var(--text)); background: var(--surface); white-space: nowrap; }
.wa-chip:hover { background: var(--surface-2); }
.wa-chip.on { background: #d9fdd3; border-color: #9fdc96; color: #0b6b4d; font-weight: 600; }
:root[data-theme="dark"] .wa-chip.on { background: #0a3d33; border-color: #136c58; color: #7ee0c3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wa-chip.on { background: #0a3d33; border-color: #136c58; color: #7ee0c3; } }
.wa-chip small { background: #00a884; color: #fff; border-radius: 999px; padding: 0 6px; margin-left: 3px; font-size: 11px; }
.wa-chip.add { width: 28px; padding: 4px 0; text-align: center; font-size: 15px; }
.chat.wa .chat-head .wa-fav { margin-left: auto; font-size: 20px; color: var(--wa-sub); }
.chat.wa .chat-head .wa-fav.on { color: #f5b300; }
.chat.wa .chat-find { flex: 1; }
/* Messages: pins — the 📌 in the list and on the head, and the bar of pinned messages under the head. */
.wa-pin-ico { font-size: 12px; flex: none; opacity: .75; }
.chat.wa .chat-head .wa-pinbtn { font-size: 16px; opacity: .45; filter: grayscale(1); }
.chat.wa .chat-head .wa-pinbtn.on { opacity: 1; filter: none; }
.chat.wa .chat-head .wa-fav { margin-left: 0; }
.chat.wa .chat-head .wa-pinbtn { margin-left: auto; }
.wa-pinbar { display: flex; align-items: center; gap: 10px; padding: 7px 16px; background: var(--wa-head, var(--surface-2)); border-bottom: 1px solid var(--wa-line, var(--border)); cursor: pointer; font-size: 13.5px; }
.wa-pinbar[hidden] { display: block; height: 0; padding: 0; border: 0; overflow: hidden; }   /* keeps its grid row */
.wa-pin-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat.wa .chat-main { grid-template-rows: auto auto 1fr auto; }
/* Online Requests: who has taken a request. */
.wr-own { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--success-weak, #dcfce7); color: var(--success, #15803d); font-size: 12.5px; font-weight: 600; vertical-align: middle; }
.wr-taken { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--warning-weak, #fef3c7); color: var(--warning, #b45309); font-size: 12.5px; font-weight: 600; vertical-align: middle; margin-right: 4px; }
.btn.wr-let { padding: 0 8px; margin: 0 4px; }
tr.wr-row-taken td { background: color-mix(in srgb, var(--warning-weak, #fef3c7) 35%, transparent); }
/* A click outside an open window: a small shake (it stays open). */
@keyframes modal-nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.modal.nudge { animation: modal-nudge .25s ease; }
/* Login: the brand on the left (blue), the form on the right; a phone gets the form alone. */
.login2 { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 1fr) minmax(380px, 1.05fr); background: var(--bg); }
.login-side { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 44px 52px; color: #fff;
  background: radial-gradient(circle at 15% 15%, rgba(255,255,255,.14), transparent 40%), radial-gradient(circle at 90% 85%, rgba(14,165,233,.45), transparent 45%), linear-gradient(140deg, #1e3a8a 0%, #2952cc 55%, #1d4ed8 100%); }
.login-side::after { content: ""; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%; border: 60px solid rgba(255,255,255,.06); }
.login-logo { height: 54px; width: auto; align-self: flex-start; position: relative; z-index: 1; }
.login-hero { position: relative; z-index: 1; max-width: 460px; }
.login-hero h1 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; margin: 0 0 12px; letter-spacing: -.01em; }
.login-hero p { font-size: 16px; opacity: .88; margin: 0 0 26px; }
.login-hero ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.login-hero li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; }
.login-hero li svg { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: rgba(255,255,255,.14); flex: none; box-sizing: border-box; }
.login-foot { font-size: 12.5px; opacity: .7; position: relative; z-index: 1; }
.login-main { display: grid; place-items: center; padding: 32px 20px; }
.login-card { width: min(400px, 100%); display: grid; gap: 16px; }
.login-top { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 40px; }
.login-mobile-logo, .login-mobile-name { display: none; }
.login-mobile-name { font-weight: 700; font-size: 15px; color: var(--primary); margin-top: -6px; }
.login-mobile-logo .logo { height: 40px; }
.login-card h2 { margin: 0 0 4px; font-size: 26px; }
.login-card .muted { margin: 0; }
.login-input { position: relative; }
.login-input > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.login-input .input { height: 46px; padding-left: 40px; padding-right: 44px; border-radius: 10px; font-size: 15px; }
.login-eye { all: unset; cursor: pointer; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--muted); }
.login-eye:hover, .login-eye.on { color: var(--primary); background: var(--primary-weak); }
.login-go { height: 48px; font-size: 16px; border-radius: 10px; box-shadow: 0 8px 20px -8px var(--primary); }
.login-app { text-align: center; font-size: 13px; color: var(--muted); text-decoration: none; padding: 10px; border: 1px dashed var(--border-strong); border-radius: 10px; }
.login-app:hover { color: var(--primary); border-color: var(--primary); }
@media (max-width: 860px) {
  .login2 { grid-template-columns: 1fr; }
  .login-side { display: none; }
  .login-mobile-logo, .login-mobile-name { display: block; }
  .login-mobile-logo { margin-right: auto; }
  .login-main { align-items: start; padding-top: 40px; }
}
/* Home: the greeting as a blue banner (with the Check In card in it), soft-coloured duty counts, rounder cards. */
.home { gap: 18px; }
.home .hero { position: relative; overflow: hidden; padding: 24px 28px; border-radius: 18px; color: #fff;
  background: radial-gradient(circle at 12% 10%, rgba(255,255,255,.16), transparent 42%), radial-gradient(circle at 92% 120%, rgba(14,165,233,.5), transparent 50%), linear-gradient(135deg, #1e3a8a 0%, #2952cc 60%, #1d4ed8 100%);
  box-shadow: 0 12px 30px -16px rgba(30,58,138,.55); }
.home .hero::after { content: ""; position: absolute; right: -90px; top: -110px; width: 300px; height: 300px; border-radius: 50%; border: 48px solid rgba(255,255,255,.06); pointer-events: none; }
.home .hero > * { position: relative; z-index: 1; }
.home .hero h1 { font-size: 28px; color: #fff; letter-spacing: -.01em; }
.home .hero > div > .muted { color: rgba(255,255,255,.82); font-size: 14.5px; margin-top: 2px; }
.home .hero .clock-card { color: var(--text); border: 0; border-radius: 14px; box-shadow: 0 10px 28px -12px rgba(0,0,0,.35); }
.home .card { border-radius: 14px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 2px 6px -2px rgba(16,24,40,.06); }
.home .card-h h2 { display: flex; align-items: center; gap: 8px; }
.home .card-h h2::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--primary); }
.home .stat.toned { border-top: 0; border-radius: 14px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, var(--surface)) 0%, var(--surface) 70%); transition: transform .15s, box-shadow .15s; }
.home .stat.toned::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.home .stat.toned:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--c) 60%, transparent); }
.home .stat .v { font-size: 30px; }
.home .notice-bar { border-radius: 14px; }
/* The sidebar: the long name on one or two small lines. */
.sidebar .brand b, .side .brand b { font-size: 13.5px; line-height: 1.25; }
/* Sidebar: icons in little rounded boxes; the open page a blue pill; group names with a fine rule; the profile as a card. */
.sidebar { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 5%, var(--surface)) 0%, var(--surface) 160px); }
.sidebar .brand { padding: 20px 18px 14px; }
.sidebar .brand span { display: block; margin-top: 2px; }
.dept-pick .select { border-radius: 10px; height: 38px; }
.dept-pick .super-link { border-radius: 10px; border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); color: var(--primary); background: var(--primary-weak); }
.nav { padding: 4px 12px 14px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.nav-group { display: flex; align-items: center; gap: 8px; padding: 16px 8px 6px; font-size: 10.5px; letter-spacing: .8px; }
.nav-group::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.nav a { gap: 11px; padding: 6px 8px; margin: 1px 0; border-radius: 10px; transition: background .15s, color .15s; }
.nav a svg { width: 30px; height: 30px; padding: 6px; box-sizing: border-box; border-radius: 8px; background: var(--surface-2); color: var(--muted); transition: background .15s, color .15s; }
.nav a:hover { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.nav a:hover svg { background: var(--primary-weak); color: var(--primary); }
.nav a.on { background: linear-gradient(135deg, #2952cc, #3b6cf0); color: #fff; box-shadow: 0 6px 16px -8px rgba(41,82,204,.7); }
.nav a.on svg { background: rgba(255,255,255,.18); color: #fff; }
.nav a.on .nav-count { background: #fff; color: var(--danger); }
.me { padding: 10px 12px 12px; }
.me-btn { background: var(--surface-2); border-radius: 12px; padding: 8px 10px; }
.me-btn:hover { background: var(--primary-weak); }
/* Top bar: frosted white with a soft shadow; the page name with a blue mark; round soft icon buttons. */
.topbar { background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(12px) saturate(1.4); border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  box-shadow: 0 1px 0 rgba(16,24,40,.02), 0 6px 18px -14px rgba(16,24,40,.35); }
.topbar .title h1 { font-size: 21px; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.topbar .title h1::before { content: ""; width: 5px; height: 22px; border-radius: 3px; background: linear-gradient(180deg, #3b6cf0, #2952cc); flex: none; }
.topbar .title .muted { margin-left: 15px; }
.topbar > .btn.icon, .topbar > div > .btn.icon, .topbar .top-chat { width: 40px; height: 40px; border-radius: 12px; border-color: transparent; background: var(--surface-2); color: var(--text-2); transition: background .15s, color .15s, transform .15s; }
.topbar > .btn.icon:hover, .topbar .top-chat:hover { background: var(--primary-weak); color: var(--primary); transform: translateY(-1px); }
.topbar [data-lang] { height: 40px; border-radius: 12px; padding: 0 14px; border-color: transparent; background: var(--surface-2); font-weight: 600; }
.topbar [data-lang]:hover { background: var(--primary-weak); color: var(--primary); }
.topbar .top-count { border-color: var(--surface); }
@media (max-width: 760px) {
  .topbar .title h1::before { height: 18px; width: 4px; }
  .topbar .title h1 { gap: 7px; font-size: 17px; }
  .topbar .title .muted { margin-left: 0; }
  .topbar > .btn.icon, .topbar > div > .btn.icon, .topbar .top-chat { width: 34px; height: 34px; min-height: 34px; border-radius: 10px; }
  .topbar [data-lang] { height: 34px; min-height: 34px; padding: 0 10px; border-radius: 10px; font-size: 12.5px; }
  .topbar { gap: 6px; }
}
/* Tables: a soft header with small caps-like labels, gentle row stripes, a clear row on hover (the roster grid keeps its own look). */
.table:not(.roster) th { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 6%, var(--surface)), color-mix(in srgb, var(--primary) 3%, var(--surface)));
  color: var(--text-2); font-size: 11.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; border-bottom: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); }
.table:not(.roster) th:first-child { padding-left: 16px; }
.table:not(.roster) td:first-child { padding-left: 16px; }
.table:not(.roster) td { border-bottom-color: color-mix(in srgb, var(--border) 65%, transparent); }
.table:not(.roster) tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.table:not(.roster) tbody tr { transition: background .12s; }
.table:not(.roster) tbody tr:hover td { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.table:not(.roster) tbody tr[data-open]:hover td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.card > .table-wrap:first-child, .card > .table-wrap:only-child { border-radius: inherit; }
.table-wrap { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.table-wrap::-webkit-scrollbar { height: 8px; width: 8px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.table .badge { border-radius: 999px; }
.list-table th.col-filter::after { opacity: .55; }
.table:not(.roster) tbody tr.is-today td { background: var(--primary-weak); }
.table:not(.roster) tbody tr.wr-row-taken td { background: color-mix(in srgb, var(--warning-weak, #fef3c7) 45%, var(--surface)); }
.table:not(.roster) tbody tr.group-row td { background: var(--surface-2); }
.table:not(.roster) tbody tr.mine-row td { background: var(--primary-weak); }
/* Forms and buttons: rounder boxes with a blue glow when in use; the main button a blue gradient; windows rounder, the page behind blurred. */
.input, .select, textarea.input { border-radius: 10px; border-color: color-mix(in srgb, var(--border-strong) 85%, transparent); transition: border-color .15s, box-shadow .15s, background .15s; }
.input:hover, .select:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border-strong)); }
.input:focus, .select:focus, textarea.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent); }
.input::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.field > span { font-size: 12.5px; font-weight: 600; color: var(--text-2); letter-spacing: .1px; }
.btn { border-radius: 10px; font-weight: 600; transition: background .15s, border-color .15s, box-shadow .15s, transform .12s, color .15s; }
.btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--primary) 30%, var(--border-strong)); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.sm { border-radius: 8px; }
.btn.primary { background: linear-gradient(135deg, #3b6cf0, #2952cc); border-color: transparent; color: #fff; box-shadow: 0 6px 14px -8px rgba(41,82,204,.75); }
.btn.primary:hover:not(:disabled) { background: linear-gradient(135deg, #4a78f5, #2148bf); box-shadow: 0 8px 18px -8px rgba(41,82,204,.85); }
.btn.danger { border-color: color-mix(in srgb, var(--danger) 30%, var(--border-strong)); }
.btn.danger:hover:not(:disabled) { border-color: var(--danger); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
.modal-bg { background: rgba(10, 14, 20, .38); backdrop-filter: blur(4px); }
.modal { border-radius: 18px; border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); box-shadow: 0 24px 60px -20px rgba(10,14,20,.45); }
.modal-h { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 6%, var(--surface)), var(--surface)); }
.modal-h h2 { display: flex; align-items: center; gap: 9px; font-size: 17px; }
.modal-h h2::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: linear-gradient(180deg, #3b6cf0, #2952cc); flex: none; }
.modal-h .btn.icon { border-color: transparent; background: var(--surface-2); border-radius: 10px; }
.modal-f { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
/* ---------- The rest, polished together: page background, cards, tabs, badges, toasts, empty and error boxes, pager, bell ---------- */
html { background: var(--bg); }
body { background: radial-gradient(1200px 400px at 70% -120px, color-mix(in srgb, var(--primary) 7%, transparent), transparent 70%), var(--bg); }
.card { border-radius: 14px; border-color: color-mix(in srgb, var(--border) 80%, transparent); box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 2px 6px -2px rgba(16,24,40,.06); }
.card-h h2 { display: flex; align-items: center; gap: 8px; }
.card-h h2::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: linear-gradient(180deg, #3b6cf0, #2952cc); flex: none; }
.tabs { padding: 4px; gap: 3px; border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 85%, var(--primary-weak)); }
.tabs button { padding: 6px 14px; border-radius: 9px; transition: background .15s, color .15s; }
.tabs button:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.tabs button.on { color: var(--primary); font-weight: 650; box-shadow: 0 2px 8px -3px rgba(16,24,40,.22); }
.badge { height: 23px; padding: 0 10px; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent); }
.toasts { right: 22px; bottom: 22px; }
.toast { border-radius: 12px; padding: 11px 16px; box-shadow: 0 14px 34px -14px rgba(10,14,20,.5); display: flex; align-items: center; gap: 10px; font-weight: 500; }
.toast::before { content: "ℹ️"; }
.toast.ok::before { content: "✅"; }
.toast.err::before { content: "⚠️"; }
.empty { margin: 14px; padding: 34px 18px; border: 1px dashed var(--border-strong); border-radius: 14px; background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.empty::before { content: "🗂️"; display: block; font-size: 28px; margin-bottom: 6px; opacity: .8; }
.error-box { border-radius: 12px; border-left: 4px solid var(--danger); }
.notice-bar { border-radius: 14px; border-left: 4px solid var(--warning); }
.skeleton { border-radius: 14px; }
.pager-pages .btn { border-radius: 9px; }
.bell-menu { border-radius: 16px; box-shadow: 0 20px 50px -20px rgba(10,14,20,.45); }
.bell-head { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 6%, var(--surface)), var(--surface)); }
.bell-item { transition: background .12s; }
.feature-box { border-radius: 10px; transition: border-color .15s, background .15s; }
.feature-box:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.record-fields .rf > span { font-weight: 600; }
/* Phones: nothing may be wider than the screen — long badges wrap, boxes stay within it, a long tabs row wraps. */
@media (max-width: 760px) {
  .badge { white-space: normal; height: auto; min-height: 23px; line-height: 1.35; padding-top: 2px; padding-bottom: 2px; max-width: 100%; text-align: left; }
  .table .badge { white-space: nowrap; }
  .select, .input { max-width: 100%; }
  .tabs { display: flex; flex-wrap: wrap; max-width: 100%; }
  .tabs button { flex: 1 1 auto; }
}
@media (max-width: 760px) { .update-bar { left: 12px !important; right: 12px !important; transform: none !important; max-width: none !important; justify-content: space-between; } }

/* Online Requests: a long offer or referral tag wraps inside its box (taller, not clipped). */
.badge.kind-offer, .badge.kind-referral { height: auto; min-height: 23px; white-space: normal; max-width: 180px; padding: 3px 10px; line-height: 1.35; border-radius: 10px; overflow-wrap: anywhere; }

/* Popups inside the page (a new message, a sign-up, a call-back): cards at the bottom corner, the newest lowest. */
.pop-stack { position: fixed; right: 18px; bottom: 18px; z-index: 900; display: grid; gap: 10px; width: min(360px, calc(100vw - 32px)); }
.pop-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px 12px 12px 14px; border-radius: 16px; background: var(--surface); color: var(--text); cursor: pointer;
  border: 1px solid var(--border); box-shadow: 0 18px 40px -16px rgba(16,24,40,.45), 0 2px 8px rgba(16,24,40,.08); animation: pop-in .28s cubic-bezier(.2,.9,.3,1.2); }
.pop-card.pop-msg { border-left: 4px solid #25d366; }
.pop-card.out { opacity: 0; transform: translateY(8px); transition: opacity .22s, transform .22s; }
.pop-icon { font-size: 22px; line-height: 1; margin-top: 2px; }
.pop-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pop-body b { font-size: 14px; } .pop-body span { font-size: 13px; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.pop-x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; padding: 2px 4px; border-radius: 6px; }
.pop-x:hover { background: var(--surface-2); }
@keyframes pop-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .pop-stack { right: 12px; left: 12px; width: auto; bottom: 12px; } }

/* Messages found by searching: the words marked, two lines of the text. */
.wa-hit .wa-hit-text { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.wa-hit mark { background: #fde68a; color: inherit; border-radius: 3px; padding: 0 1px; }
@media (prefers-color-scheme: dark) { .wa-hit mark { background: #854d0e; } }

/* Searching inside the open chat: a bar under its head; the words marked in the messages. */
.chat.wa .wa-insearch[hidden] { display: none; }
.chat.wa .wa-insearch { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--surface); border-bottom: 1px solid var(--border); }
.chat.wa .wa-insearch .input { flex: 1; min-width: 0; height: 36px; }
.chat.wa .wa-insearch [data-insearch-n] { min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; }
mark.wa-mark { background: #fde68a; color: inherit; border-radius: 3px; padding: 0 1px; }
@media (prefers-color-scheme: dark) { mark.wa-mark { background: #854d0e; } }

/* WhatsApp Inbox: the chats on the left, the open one on the right (on a phone, one at a time). */
.wi { display: grid; grid-template-columns: 320px 1fr; gap: 12px; height: calc(100vh - 170px); min-height: 420px; }
.wi-list, .wi-thread { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.wi-list { padding: 10px; gap: 8px; }
.wi-status:empty { display: none; }
.wi-status { color: var(--danger); }
.wi-chats { overflow-y: auto; flex: 1; margin: 0 -10px -10px; }
.wi-chat { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: 10px; align-items: center; width: 100%; padding: 9px 12px; border-top: 1px solid var(--border); }
.wi-chat:hover { background: var(--surface-2); }
.wi-chat.on { background: var(--primary-weak); }
.wi-chat.unread b { color: var(--primary); }
.wi-av { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: #25d36622; color: #128c4b; text-transform: uppercase; }
.wi-mid { flex: 1; min-width: 0; display: grid; }
.wi-mid > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wi-end { flex: none; display: grid; justify-items: end; gap: 2px; }
.wi-n { background: #25d366; color: #fff; border-radius: 999px; font-size: 11px; padding: 0 7px; line-height: 18px; }
.wi-none { margin: auto; padding: 20px; text-align: center; }
.wi-head { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.wi-back { display: none; }
.wi-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 6px; background: var(--surface-2); }
.wi-day { align-self: center; font-size: 12px; color: var(--muted); background: var(--surface); border-radius: 999px; padding: 1px 10px; margin: 6px 0; }
.wi-msg { align-self: flex-start; max-width: min(75%, 560px); background: var(--surface); border-radius: 12px 12px 12px 4px; padding: 7px 10px; display: grid; gap: 2px; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.wi-msg.me { align-self: flex-end; background: #d9fdd3; border-radius: 12px 12px 4px 12px; }
.wi-meta { font-size: 11px; color: var(--muted); justify-self: end; }
.wi-send { display: flex; gap: 8px; align-items: flex-end; padding: 10px; border-top: 1px solid var(--border); }
.wi-send textarea { flex: 1; resize: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wi-msg.me { background: #144d37; } }
:root[data-theme="dark"] .wi-msg.me { background: #144d37; }
@media (max-width: 760px) {
  .wi { grid-template-columns: 1fr; height: calc(100vh - 150px); }
  .wi.open .wi-list, .wi:not(.open) .wi-thread { display: none; }
  .wi-back { display: inline-flex; }
}