/* ============================================================
   VergeHR — single global stylesheet (sectioned by component)
   ============================================================ */

/* --- tokens & reset --- */
:root {
  /* VergeHR's brand palette — the logo's colours (the owner, 2026-10-19, ADR-0049):
     blue #0c64ae (accent) · grey #373737 (ink, headings) · neutral greys.
     --navy-* are the strong-text tokens (the name is historical). */
  --navy-900: #373737;
  --navy-800: #0a528f;
  --navy-700: #4a4a4a;
  --ink: #373737;
  --muted: #5b6472;
  --line: #e3e7ee;
  --bg: #f7f9fc;
  --card: #ffffff;
  --accent: #0c64ae;
  --accent-dark: #0a528f;
  --accent-on-dark: #6fb2ef;   /* the brand blue lightened for dark backgrounds */
  --danger: #c0392b;
  --warn-bg: #fdf6e3;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(16, 32, 54, .08), 0 8px 24px rgba(16, 32, 54, .06);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }   /* the HTML hidden attribute must beat component display rules */
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}
a { color: var(--navy-800); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ============================================================
   APP SHELL — Stripe-style left sidebar (authenticated app only)
   ============================================================ */
body.app { background: var(--bg); }
/* The sidebar's width — 76px when collapsed (html.nav-collapsed, set before
   first paint from localStorage; the toggle is .side-collapse). */
:root { --side-w: 248px; }
html.nav-collapsed { --side-w: 76px; }
.app-sidebar {
  position: fixed; top: 0; inset-inline-start: 0; bottom: 0; width: var(--side-w); z-index: 50;
  background: #fff; border-inline-end: 1px solid var(--line); color: var(--ink);
  display: flex; flex-direction: column; padding: 18px 14px;
}
.side-logo { display: flex; align-items: center; justify-content: center; padding: 0 2px 16px; }
.side-logo:hover { text-decoration: none; }
.side-logo img { width: 100%; height: auto; max-height: 96px; object-fit: contain; display: block; }   /* the full width there is */
.side-logo .side-mark { display: none; }

.side-nav { display: flex; flex-direction: column; gap: 3px; }
.side-divider { height: 1px; background: var(--line); margin: 9px 12px; }

.side-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; color: var(--ink); font-size: .95rem; font-weight: 500; }
.side-item i { width: 18px; text-align: center; font-size: .95rem; color: var(--muted); }
.side-item:hover { background: var(--bg); color: var(--navy-900); text-decoration: none; }
/* Favorite apps under Apps (ADR-0054): an indented, lighter sub-list with a guide line. */
.side-sub { margin: 2px 0 4px; padding-inline-start: 21px; }
.side-sub .side-subitem { display: flex; align-items: center; gap: 10px; padding: 6px 10px; margin-inline-start: 0; border-inline-start: 2px solid var(--line);
  border-radius: 0 7px 7px 0; color: var(--muted); font-size: .86rem; font-weight: 500; }
.side-sub .side-subitem i { width: 16px; text-align: center; font-size: .85rem; }
.side-sub .side-subitem span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-sub .side-subitem:hover { background: var(--bg); color: var(--navy-900); text-decoration: none; }
.side-sub .side-subitem.active { border-inline-start-color: var(--accent); color: var(--accent-dark); background: #f1f6fc; font-weight: 600; }
[data-theme="dark"] .side-sub .side-subitem.active { background: rgba(76, 155, 224, .12); color: #9cc9f0; }
/* A section caption at the top of the sidebar nav (CS, ADR-0026). */
.side-label { padding: 2px 12px 8px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.side-item:hover i { color: var(--navy-800); }
.side-item.active { background: #e8f1fa; color: var(--accent-dark); }
.side-item.active i { color: var(--accent); }

/* Global search (ADR-0034) under the logo. */
.side-search { position: relative; margin: -6px 0 14px; }
.gs-toggle { display: none; }
.gs-field { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg); cursor: text; }
.gs-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(12, 100, 174, .12); }
.gs-field i { color: var(--muted); font-size: .85rem; }
.gs-field input { border: 0; outline: 0; background: transparent; padding: 0; font: inherit; font-size: .9rem; color: var(--ink); flex: 1; min-width: 0; }
.gs-field input::-webkit-search-cancel-button { display: none; }
.gs-results { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; width: 360px; max-height: 70vh; overflow-y: auto; z-index: 120;
  background: var(--card, #fff); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(15, 23, 42, .16); padding: 6px; }
.gs-group { padding: 8px 10px 4px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gs-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--ink); }
.gs-item:hover, .gs-item.on { background: var(--bg); text-decoration: none; }
.gs-item.on { box-shadow: inset 3px 0 0 var(--accent); }
.gs-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.gs-ico { width: 30px; text-align: center; color: var(--muted); flex: none; }
.gs-text { display: flex; flex-direction: column; min-width: 0; }
.gs-label { font-weight: 600; color: var(--navy-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-sub { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-tag { font-size: .7rem; font-weight: 600; color: var(--muted); }
.gs-empty { padding: 14px; color: var(--muted); font-size: .9rem; }

/* The organization's logo (ADR-0034), above the user menu's line. */
.side-orglogo { display: flex; align-items: center; justify-content: center; padding: 10px 8px 12px; }
.side-orglogo img { max-width: 100%; max-height: 52px; width: auto; height: auto; object-fit: contain; display: block; }
.side-orglogo-add { gap: 8px; margin: 0 4px 10px; padding: 9px 8px; border: 1px dashed var(--line); border-radius: 9px; color: var(--muted); font-size: .82rem; }
.side-orglogo-add:hover { color: var(--accent-dark); border-color: var(--accent); text-decoration: none; }
.org-logo-card { max-width: 640px; }
.org-logo-preview { display: flex; align-items: center; justify-content: center; min-height: 110px; padding: 18px; margin-bottom: 14px;
  border: 1px dashed var(--line); border-radius: 12px; background: var(--bg); }
.org-logo-preview img { max-width: 100%; max-height: 90px; object-fit: contain; }
.org-logo-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }

/* A short window (zoomed in, a laptop screen): the nav list scrolls and the
   profile stays pinned at the bottom, never pushed off-screen. */
.side-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; margin-inline: -4px; padding-inline: 4px; }
.side-bottom { flex: none; margin-top: auto; padding-top: 8px; }
@media (min-width: 821px) and (max-height: 760px) {
  .app-sidebar { padding-top: 12px; padding-bottom: 10px; }
  .side-logo { padding-bottom: 10px; }
  .side-logo img { max-height: 60px; }
  .side-item { padding-top: 6px; padding-bottom: 6px; }
  .side-divider { margin: 5px 12px; }
}
.side-user { position: relative; padding-top: 10px; border-top: 1px solid var(--line); }
.user-pill { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; border: none; background: transparent; color: var(--ink); cursor: pointer; text-align: start; font-family: inherit; }
.user-pill:hover, .user-pill.open { background: var(--bg); }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; flex-shrink: 0; }
.user-pill-meta { display: flex; flex-direction: column; overflow: hidden; flex: 1; min-width: 0; }
.user-pill-name { font-size: .85rem; font-weight: 600; color: var(--navy-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-pill-sub { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-pill > i { color: var(--muted); font-size: .72rem; }

.user-menu { position: absolute; z-index: 60; bottom: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 10px 34px rgba(30, 30, 30, .22); padding: 6px; }
.user-menu-head { padding: 9px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.user-menu-name { font-weight: 700; color: var(--navy-900); font-size: .9rem; }
.user-menu-mail { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.user-menu a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 7px; color: var(--ink); font-size: .9rem; }
.user-menu a:hover { background: var(--bg); text-decoration: none; }
.user-menu a i { width: 16px; text-align: center; color: var(--muted); }
.user-menu a.danger { color: var(--danger); }
.user-menu a.danger i { color: var(--danger); }

.app-main { margin-inline-start: var(--side-w); min-height: 100vh; }

/* A module's sub-menu (Employees: Dashboard · Employees) — a second fixed column
   beside the sidebar, Avalon's pattern. Items reuse the .anav style. */
.app-subnav { position: fixed; top: 0; bottom: 0; inset-inline-start: var(--side-w); width: 232px; z-index: 40;
  background: #fff; border-inline-end: 1px solid var(--line); padding: 22px 14px; overflow-y: auto; }
.app-subnav-title { display: flex; align-items: center; gap: 10px; font-size: 1.08rem; font-weight: 700;
  color: var(--navy-900); padding: 4px 10px 16px; }
.app-subnav-title i { color: var(--accent); }
/* A sub-menu's title over a faint illustration of its module (preview on Payroll: --subnav-art set by payroll_base.html). */
.app-subnav-title.has-art { position: relative; align-items: flex-end; height: 96px; margin: -10px 0 10px; padding-bottom: 12px; }
.app-subnav-title.has-art::before { content: ""; position: absolute; inset: 0 -6px 0 30px; pointer-events: none; z-index: 0;
  background: var(--subnav-art) right center / contain no-repeat; opacity: var(--subnav-art-o); }
.app-subnav-title.has-art > * { position: relative; z-index: 1; }
:root { --subnav-art-o: .5; }
.app-subnav-nav { display: flex; flex-direction: column; gap: 3px; }
.app.has-subnav .app-main { margin-inline-start: calc(var(--side-w) + 232px); }

/* Collapsing the sidebar: a round button on its edge (desktop only). */
.side-collapse { position: absolute; top: 30px; inset-inline-end: -13px; width: 26px; height: 26px; border-radius: 50%; z-index: 3;
  border: 1px solid var(--line); background: var(--card, #fff); color: var(--muted); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; font-size: 1rem; line-height: 1; padding-bottom: 2px; box-shadow: 0 2px 6px rgba(15, 23, 42, .1); }
.side-collapse:hover { color: var(--accent); border-color: var(--accent); }
.side-collapse .sc-when-collapsed { display: none; }
html.nav-collapsed .side-collapse .sc-when-collapsed { display: inline; }
html.nav-collapsed .side-collapse .sc-when-open { display: none; }
[dir="rtl"] .side-collapse { transform: scaleX(-1); }
.app-sidebar, .app-main, .app-subnav { transition: width .18s ease, margin .18s ease, inset .18s ease; }
@media (prefers-reduced-motion: reduce) { .app-sidebar, .app-main, .app-subnav { transition: none; } }
@media (min-width: 821px) {
  html.nav-collapsed .app-sidebar { padding-inline: 10px; }
  html.nav-collapsed .side-logo .side-full { display: none; }
  html.nav-collapsed .side-logo .side-mark { display: block; width: 48px; height: 48px; }
  html.nav-collapsed .side-logo { padding-bottom: 14px; }
  html.nav-collapsed .side-item { justify-content: center; padding-inline: 0; }
  html.nav-collapsed .side-item span, html.nav-collapsed .side-label { display: none; }
  html.nav-collapsed .side-item i { font-size: 1.05rem; width: auto; }
  html.nav-collapsed .side-sub { padding-inline-start: 0; }
  html.nav-collapsed .side-sub .side-subitem { justify-content: center; border-inline-start: 0; border-radius: 7px; padding-inline: 0; }
  html.nav-collapsed .side-sub .side-subitem span { display: none; }
  html.nav-collapsed .side-divider { margin-inline: 6px; }
  /* search: an icon that opens the box beside the sidebar */
  html.nav-collapsed .side-search { margin: -4px 0 12px; display: flex; justify-content: center; }
  html.nav-collapsed .gs-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 36px; border: 1px solid var(--line);
    border-radius: 9px; background: var(--bg); color: var(--muted); cursor: pointer; }
  html.nav-collapsed .side-search .gs-field { display: none; }
  html.nav-collapsed .side-search.open .gs-field { display: flex; position: absolute; top: 0; inset-inline-start: calc(100% + 18px); width: 320px;
    z-index: 121; background: var(--card, #fff); box-shadow: 0 10px 30px rgba(15, 23, 42, .16); }
  html.nav-collapsed .side-search .gs-results { inset-inline-start: calc(100% + 18px); top: 48px; }
  html.nav-collapsed .side-orglogo-add, html.nav-collapsed .side-orglogo { display: none; }
  html.nav-collapsed .user-pill { justify-content: center; padding: 6px 0; }
  html.nav-collapsed .user-pill-meta, html.nav-collapsed .user-pill > i { display: none; }
  html.nav-collapsed .user-menu { inset-inline-start: calc(100% + 18px); right: auto; bottom: 0; width: 250px; }
}
@media (max-width: 820px) { .side-collapse { display: none; } }
body.app .container { max-width: none; width: 100%; margin: 0; padding: 30px 44px; }
body.app .page-head { margin-top: 4px; }
.user-avatar { overflow: hidden; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-menu .menu-btn { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 7px; color: var(--ink); font-size: .9rem; width: 100%; border: none; background: none; cursor: pointer; text-align: start; font-family: inherit; }
.user-menu .menu-btn:hover { background: var(--bg); }
.user-menu .menu-btn i { width: 16px; text-align: center; color: var(--muted); }

/* --- settings modal (Stripe/Slack-style, section nav) --- */
.modal-overlay { position: fixed; inset: 0; background: rgba(30, 30, 30, .5); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; }
.modal-card { background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(30, 30, 30, .35); position: relative; }
.modal-close { position: absolute; top: 12px; inset-inline-end: 12px; width: 32px; height: 32px; border: none; background: #eef1f6; border-radius: 50%; color: var(--muted); cursor: pointer; z-index: 2; }
.modal-close:hover { background: #e2e6ee; color: var(--navy-900); }
.photo-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.photo-avatar { width: 68px; height: 68px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.3rem; overflow: hidden; flex-shrink: 0; }
.photo-avatar img { width: 100%; height: 100%; object-fit: cover; }
.set-msg { margin-inline-start: 12px; font-size: .85rem; font-weight: 600; }
.set-msg:empty { display: none; }
.set-msg.ok { color: #0d7a56; }
.set-msg.err { color: var(--danger); }

@media (max-width: 820px) {
  .app-sidebar { position: sticky; top: 0; width: auto; flex-direction: row; align-items: center; padding: 10px 14px; border-inline-end: none; border-bottom: 1px solid var(--line); }
  .side-logo { padding: 0; padding-inline-end: 8px; }
  .side-logo img { height: 34px; width: auto; max-height: none; }
  .side-nav { flex-direction: row; gap: 2px; margin-inline-start: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-item span { display: none; }
  .side-user { margin-top: 0; margin-inline-start: auto; padding-top: 0; border-top: none; }
  /* Phone: search is an icon that opens a full-width bar; the org logo hides. */
  .side-search { margin: 0; position: static; flex: none; }
  .gs-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 8px;
    background: transparent; color: var(--muted); cursor: pointer; }
  .side-search .gs-field { display: none; }
  .side-search.open .gs-field { display: flex; position: absolute; top: 100%; left: 0; right: 0; margin: 0; border-radius: 0; z-index: 121;
    background: var(--card, #fff); border-inline: 0; padding: 12px 16px; }
  .side-search .gs-results { left: 8px; right: 8px; width: auto; top: calc(100% + 54px); }
  .side-orglogo { display: none; }
  .side-bottom { margin-top: 0; }
  .user-pill-meta, .user-pill > i { display: none; }
  .user-pill { padding: 4px; background: transparent; }
  .user-menu { inset-inline-start: auto; inset-inline-end: 0; bottom: auto; top: calc(100% + 8px); width: 240px; }
  .app-main { margin-inline-start: 0; }
  body.app .container { padding: 20px; }
  /* The sub-menu becomes a strip under the top bar. */
  .app-subnav { position: static; width: auto; border-inline-end: none; border-bottom: 1px solid var(--line); padding: 10px 14px; }
  .app-subnav-title { display: none; }
  .app-subnav-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .app-subnav-nav .anav span { display: inline; }
  .app.has-subnav .app-main { margin-inline-start: 0; }
}

/* --- top navigation --- */
.nav {
  background: var(--navy-900);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 70px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
}
.nav-logo:hover { text-decoration: none; }
.nav-logo img { height: 26px; width: auto; display: block; }
/* Full VergeHR wordmark rendered white for the dark nav/footer. */
/* White wordmark (logo_white.png) on the dark nav/footer — the file is already white, so no filter (a filter would bleach the coloured mark too). */
.nav-logo-full { height: 48px !important; width: auto; display: block; }   /* 60% bigger than 30px (owner, 2026-10-19) */
.footer-brand .nav-logo-full { height: 34px !important; }
.nav-logo em { color: var(--accent-on-dark); font-style: normal; }
.nav-links { display: flex; gap: 18px; align-items: center; margin-inline-start: auto; }
.nav-links a { color: #d7e6f4; font-size: .95rem; }
.nav-links a:hover { color: #fff; text-decoration: none; }
.nav-links a.active { color: #fff; font-weight: 600; }

/* --- buttons ---
   One sizing standard (QA 2026-10-28, Screen25c), the same for <a>, <button> and
   <input type=submit>, filled or outline:
     .btn      ~41px tall — 15.2px text on a fixed 22px line, 8.5px padding + the border top and bottom
     .btn-sm   ~33px tall — 13.6px text on a 19px line, 6px padding + the border
   (the 1.5px border paints as 1px on a 1x screen — hence 41 / 33 there)
   Every .btn carries a 1.5px border (transparent unless outlined) so filled and
   outline buttons match, and a fixed line-height + font-family so a link and a
   button side by side are the same height. Module CSS may change a button's
   colours, display or width — not its padding-block, font-size or line-height. */
.btn {
  display: inline-block;
  vertical-align: middle;
  padding: 8.5px 20px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  font-family: inherit;
  font-size: .95rem;
  line-height: 22px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.btn:hover { text-decoration: none; filter: brightness(1.05); }
.btn-primary { background: var(--accent); color: #fff; }

.btn-outline { background: transparent; color: var(--navy-800); border: 1.5px solid var(--navy-800); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: 6px 14px; font-size: .85rem; line-height: 19px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
/* Submit once (ui.js, QA Screen29): the clicked button while its form is on its way. */
.is-submitting, .is-submitting[disabled] { opacity: .8; cursor: progress; pointer-events: none; }
.is-submitting > i, .is-submitting > svg { display: none; }
.is-submitting::before { content: ""; display: inline-block; flex: none; width: .95em; height: .95em; margin-inline-end: 6px; vertical-align: -2px;
  border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: submit-spin .7s linear infinite; }
@keyframes submit-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .is-submitting::before { animation-duration: 2s; } }
/* The page loader (static/js/loader.js, QA Screen46a): a thin bar along the top while a page,
   a form or a fetch is on its way. Above everything, never in the way of a click. */
.vh-loader { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2147483000; pointer-events: none; opacity: 0;
  transition: opacity .3s ease; }
.vh-loader.is-on { opacity: 1; transition: none; }
.vh-loader.is-done { opacity: 0; transition: opacity .3s ease .1s; }
.vh-loader span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .2s ease-out; box-shadow: 0 0 8px rgba(12, 100, 174, .45); }
[dir="rtl"] .vh-loader span { transform-origin: 100% 50%; }
[data-theme="dark"] .vh-loader span { background: var(--accent-on-dark); box-shadow: 0 0 8px rgba(111, 178, 239, .5); }
@media (prefers-reduced-motion: reduce) { .vh-loader, .vh-loader.is-done, .vh-loader span { transition: none; } }

/* --- hero (marketing) --- */
.hero {
  background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 70%, var(--navy-700) 100%);
  color: #fff;
  padding: 84px 0 72px;
}
.hero h1 {
  font-size: 2.7rem;
  line-height: 1.15;
  letter-spacing: -.02em;
  max-width: 640px;
}
.hero h1 em { color: var(--accent-on-dark); font-style: normal; }

/* --- sections --- */
.section { padding: 64px 0; }
.section.alt { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section h2 { font-size: 1.9rem; letter-spacing: -.02em; color: var(--navy-900); }
.section .sub { color: var(--muted); margin: 8px 0 34px; max-width: 620px; }

/* --- cards & grids --- */
.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
/* Stacked boxes on an app page are 20px apart, everywhere (QA Screen90 — spacing was set per module and
   uneven; the employee record already used 20px). Block flow, so a module's own margin merges with it
   rather than adding to it; boxes side by side in a grid keep the grid's gap. */
.app-main .container > :is(.card, .alert, .tv-sec, .help-warn) + :is(.card, .alert, .tv-sec, .help-warn) { margin-top: 20px; }
.card h3 { font-size: 1.08rem; color: var(--navy-900); margin-bottom: 8px; }
.card p { font-size: .93rem; color: var(--muted); }
.card .meta { font-size: .8rem; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.badge {
  display: inline-block;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: .75rem;
  font-weight: 600;
}

/* --- steps (how it works) --- */
.steps { counter-reset: step; }
.step { position: relative; padding-inline-start: 0; }

/* --- pricing --- */
.price-card { text-align: start; position: relative; }
.price-card.featured { border-color: var(--accent); border-width: 2px; }
.price-card .plan { font-weight: 700; color: var(--navy-900); }
.price-card .price { font-size: 2rem; font-weight: 700; margin: 10px 0; color: var(--navy-900); }
.price-card .price small { font-size: .9rem; color: var(--muted); font-weight: 400; }
.price-card .price .per { font-size: .95rem; font-weight: 600; color: var(--muted); }

/* the premium (Enterprise) tier */
.price-card.price-premium { border-color: var(--accent); }
.plan-tag { display: inline-block; margin-inline-start: 6px; padding: 2px 7px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: .64rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.price-card ul { list-style: none; margin: 16px 0 22px; }
.price-card li { padding: 5px 0; padding-inline-start: 24px; position: relative; font-size: .92rem; color: var(--ink); }
.price-card li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--accent); font-weight: 700; }

/* --- forms (inputs) --- */
.form-card { max-width: 460px; margin: 56px auto; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 5px; color: var(--navy-900); }
.field .help { font-size: .8rem; color: var(--muted); margin-top: 3px; }
.field .help.help-warn { color: #8a5a00; background: var(--warn-bg); border-radius: 6px; padding: 5px 8px; }
[data-theme="dark"] .field .help.help-warn { color: #e8c171; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-size: .95rem;
  font-family: inherit;
  background-color: var(--card, #fff);   /* -color: a shorthand would wipe the list boxes' chevron */
}
/* Every text box, list box and text area — not only those inside .field — looks
   the same (the owner, 2026-10-19). :where() keeps this at zero specificity, so a
   component's own styling (the search box, the feed composer…) still wins. */
:where(input:not([type]), input[type="text"], input[type="email"], input[type="number"], input[type="search"],
       input[type="password"], input[type="tel"], input[type="url"], input[type="date"], input[type="time"],
       input[type="datetime-local"], input[type="month"], input[type="week"], select, textarea) {
  padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 8px; font-family: inherit; font-size: .92rem;
  line-height: 1.4; color: var(--ink); background-color: var(--card, #fff); max-width: 100%; box-sizing: border-box;
  transition: border-color .12s, box-shadow .12s;
}
:where(select) { padding-inline-end: 30px; cursor: pointer; }
/* List boxes (Screen17 #4): one look everywhere — the text boxes' height, border,
   radius and focus ring (above), our own chevron instead of the platform's, which
   flips side in RTL and lightens in dark mode. The chevron rule is zero-specificity
   on purpose so a component with its own arrow (.cx-select, .fr-select…) keeps it;
   page rules must set background-color, not the background shorthand, or the
   chevron goes. The room for it beats a page's padding so text never runs under it.
   Where the browser has customizable selects (appearance: base-select, Chromium
   135+) the open list is drawn too — the same card as the row menus — and the
   platform's list is used elsewhere. Multi-selects stay native lists, styled. */
select:where(:not([multiple]):not([size])) {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235b6472' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 14px 14px;
  text-overflow: ellipsis; white-space: nowrap;
}
[dir="rtl"] select:where(:not([multiple]):not([size])) { background-position: left 11px center; }
[data-theme="dark"] select:where(:not([multiple]):not([size])) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239fb0c4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}
select:not([multiple]):not([size]) { padding-inline-end: 34px; }
:where(select):hover:not(:disabled):not(:focus-visible) { border-color: #c5cdd9; }
[data-theme="dark"] :where(select):hover:not(:disabled):not(:focus-visible) { border-color: rgba(255,255,255,.22); }
:where(select):disabled { opacity: .75; }
[data-theme="dark"] :is(input, select, textarea):disabled { background-color: rgba(255,255,255,.04); }
:where(select[multiple], select[size]) { padding: 6px; background-image: none; }
:where(select[multiple], select[size]) option { padding: 5px 8px; border-radius: 5px; }
:where(select[multiple]) option:checked { background: #dbe9f7 linear-gradient(#dbe9f7, #dbe9f7); color: var(--accent-dark); }
[data-theme="dark"] :where(select[multiple]) option:checked { background: #23405e linear-gradient(#23405e, #23405e); color: #cfe4f8; }
@supports (appearance: base-select) {
  select:where(:not([multiple]):not([size])), ::picker(select) { appearance: base-select; }
  select:where(:not([multiple]):not([size]))::picker-icon { display: none; }
  ::picker(select) {
    margin-block: 4px; padding: 6px; max-block-size: min(360px, 60vh); overflow-y: auto; overscroll-behavior: contain;
    background: var(--pop-bg, #fff); color: var(--ink); border: 1px solid var(--pop-border, var(--line)); border-radius: var(--pop-radius, 10px);
    box-shadow: var(--pop-shadow, 0 12px 30px rgba(16,32,54,.16));
  }
  select:where(:not([multiple]):not([size])) option {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; min-block-size: 0;
    font-size: .9rem; color: var(--ink); background: none; cursor: pointer; white-space: normal;
  }
  select:where(:not([multiple]):not([size])) option::checkmark { order: 1; margin-inline-start: auto; color: var(--accent); font-weight: 700; }
  select:where(:not([multiple]):not([size])) option:hover,
  select:where(:not([multiple]):not([size])) option:focus-visible { background: var(--pop-hover, #f1f5fa); outline: none; }
  select:where(:not([multiple]):not([size])) option:checked { color: var(--accent-dark); font-weight: 600; }
  select:where(:not([multiple]):not([size])) option:disabled { color: var(--muted); opacity: .6; cursor: not-allowed; }
  select:where(:not([multiple]):not([size])) optgroup { font-size: .76rem; font-weight: 700; color: var(--muted); padding: 6px 4px 2px; }
  [data-theme="dark"] select:where(:not([multiple]):not([size])) option:checked { color: #a3cdf5; }
}
:where(textarea) { resize: vertical; }
:where(input, select, textarea):focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(12, 100, 174, .14); }
:where(input, select, textarea):disabled { background-color: var(--bg); color: var(--muted); cursor: not-allowed; }
:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) { accent-color: var(--accent); }
/* A range slider with a filled track: the page sets --pct (0%–100%, from the value)
   and keeps it current on input. The fill is drawn on the track itself up to --pct,
   so 0% is empty and 100% is full to the end — the thumb always sits over the edge
   of the fill (the native fill stops at the thumb's centre and leaves a gap at max). */
input[type="range"].range-fill { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; padding: 0; margin: 4px 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; }
[data-theme="dark"] input[type="range"].range-fill, [data-theme="dark"] .field input[type="range"].range-fill { background: transparent; border: 0; }
input[type="range"].range-fill:disabled { cursor: not-allowed; opacity: .6; }
input[type="range"].range-fill::-webkit-slider-runnable-track { height: 6px; border-radius: 999px;
  background: linear-gradient(to right, var(--accent) var(--pct, 0%), var(--line) var(--pct, 0%)); }
input[type="range"].range-fill::-moz-range-track { height: 6px; border-radius: 999px;
  background: linear-gradient(to right, var(--accent) var(--pct, 0%), var(--line) var(--pct, 0%)); }
input[type="range"].range-fill::-moz-range-progress { background: transparent; }
input[type="range"].range-fill::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 18px; height: 18px; margin-top: -6px;
  border-radius: 50%; border: 2px solid var(--card, #fff); background: var(--accent); box-shadow: 0 1px 3px rgba(16, 32, 54, .3); }
input[type="range"].range-fill::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--card, #fff);
  background: var(--accent); box-shadow: 0 1px 3px rgba(16, 32, 54, .3); }
input[type="range"].range-fill:focus-visible { outline: none; box-shadow: none; }
input[type="range"].range-fill:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(12, 100, 174, .25); }
input[type="range"].range-fill:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(12, 100, 174, .25); }
input[type="file"] { font-family: inherit; font-size: .88rem; color: var(--muted); max-width: 100%; }
input[type="file"]::file-selector-button { margin-inline-end: 10px; padding: 7px 14px; border: 1.5px solid var(--line); border-radius: 8px;
  background: var(--card, #fff); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; transition: border-color .12s, color .12s; }
input[type="file"]::file-selector-button:hover { border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] input[type="file"]::file-selector-button { background: #1c2836; }

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(12, 100, 174, .14);
}

.field-check { display: flex; align-items: center; gap: 8px; }
.field-check input { width: auto; }

/* --- alerts --- */
.alert { border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; font-size: .92rem; }
.alert-error { background: #fdecea; color: var(--danger); border: 1px solid #f5c6c0; }
.alert-success { background: #e2f5ec; color: #0d7a56; border: 1px solid #bfe8d9; }
.alert-warn { background: #fff5e0; color: #8a5a00; border: 1px solid #f3dca8; }
[data-theme="dark"] .alert-warn { background: rgba(240, 180, 70, .13); color: #f2cd80; border: 1px solid rgba(240, 180, 70, .3); }
.alert-info { background: var(--accent-soft, #e8f1fa); color: var(--accent-dark); border: 1px solid var(--accent-line, #c4daf0); }
[data-theme="dark"] .alert-info { background: rgba(76, 155, 224, .12); color: #a3cdf5; border-color: rgba(76, 155, 224, .3); }

/* --- tables --- */
.table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.table th { text-align: start; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fbfcfe; }
.table td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: .93rem; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: #fafbfd; }

/* --- app layout --- */
.page-head { display: flex; align-items: center; justify-content: space-between; margin: 40px 0 24px; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: 1.6rem; color: var(--navy-900); letter-spacing: -.02em; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 30px; }

.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; }
.stat .n { font-size: 1.9rem; font-weight: 700; color: var(--navy-900); }

/* --- text helpers --- */
.muted { color: var(--muted); font-size: .88rem; }
.crumbs { font-size: .88rem; color: var(--muted); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.crumbs strong { color: var(--navy-900); }

.empty-contents { text-align: center; padding: 54px 20px; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
/* Only the state's own icon (a direct child) — not one inside its button. */
.empty-contents > i,
.empty-contents > svg { font-size: 3.25rem; color: #c4d9ee; display: block; margin: 0 auto 16px; }

.fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.linklike { background: none; border: none; color: var(--navy-800); cursor: pointer; font-size: .85rem; text-decoration: underline; padding: 0; font-family: inherit; }

/* --- footer --- */
.footer { background: var(--navy-900); color: #9fb0c6; margin-top: 72px; padding: 44px 0 30px; font-size: .9rem; }
.footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 26px; }
.footer h4 { color: #fff; font-size: .95rem; margin-bottom: 10px; }
.footer-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.footer-brand img { height: 22px; width: auto; }

.footer a { color: #9fb0c6; display: block; padding: 2px 0; }
.footer a:hover { color: #fff; text-decoration: none; }
.footer .fine { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 18px; font-size: .8rem; }

/* --- cookie consent (ADR-0015) ---
   A card pinned to the foot of the public pages, never a full-screen wall: the
   page stays readable behind it. Above the page, below any modal (200). */
.cookie-consent {
  position: fixed; inset-inline: 16px; bottom: 16px; z-index: 150;
  max-width: 880px; margin-inline: auto;
  display: flex; align-items: center; gap: 22px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 2px 6px rgba(16, 32, 54, .10), 0 18px 48px rgba(16, 32, 54, .22);
  padding: 18px 22px;
  animation: cookie-consent-in .28s ease-out;
}
.cookie-consent-text { flex: 1; min-width: 0; }
.cookie-consent h2 { font-size: 1rem; color: var(--navy-900); margin-bottom: 3px; }
.cookie-consent p { font-size: .88rem; line-height: 1.5; color: var(--muted); }
.cookie-consent p a { color: var(--accent); font-weight: 600; white-space: nowrap; }
.cookie-consent-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; flex-shrink: 0; }
/* Same box for both choices — refusing is not the smaller button. */
.cookie-consent-actions .btn { min-width: 138px; border: 1.5px solid transparent; }
.cookie-consent-actions .btn-outline { border-color: var(--navy-800); }
.cookie-consent-actions .btn:focus-visible { outline: 3px solid rgba(12, 100, 174, .35); outline-offset: 2px; }
@keyframes cookie-consent-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cookie-consent { animation: none; } }
@media (max-width: 720px) {
  .cookie-consent { flex-direction: column; align-items: stretch; gap: 14px; inset-inline: 10px; bottom: 10px; padding: 16px; }
  .cookie-consent-actions .btn { min-width: 0; }
}
@media print { .cookie-consent { display: none; } }

/* --- responsive --- */
@media (max-width: 860px) {
  .grid-3{ grid-template-columns: 1fr 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 2.1rem; }
  .stats { grid-template-columns: 1fr; }

.fields-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid-3{ grid-template-columns: 1fr; }
  .nav-links { gap: 12px; }
  .nav-links a.nav-secondary { display: none; }
}

/* premium features (ADR-0007) — kebab count chip + the grant checklist modal */
.feat-count { display: inline-block; min-width: 17px; padding: 0 5px; margin-inline-start: 2px;
  border-radius: 999px; background: var(--accent); color: #fff;
  font-size: .68rem; font-weight: 700; line-height: 17px; text-align: center; }
.feat-list { display: flex; flex-direction: column; gap: 2px; text-align: start; }
.feat-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.feat-row:hover { border-color: var(--accent); background: var(--accent-tint, #f3f8fd); }
.feat-row input { width: auto; margin-top: 2px; flex: none; }
.feat-name { display: block; font-weight: 600; font-size: .92rem; color: var(--navy-900); }
.feat-desc { display: block; font-size: .8rem; color: var(--muted); margin-top: 2px; line-height: 1.45; }

/* impersonation banner */
.imp-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #3a2a00; color: #ffe9b0; border: 1px solid #6b5100;
  padding: 10px 16px; border-radius: 10px; margin-bottom: 18px; font-size: .92rem;
}
.imp-banner a { color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.imp-banner a:hover { text-decoration: underline; }

/* admin panel */
.admin-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }

/* admin left sub-nav */
.admin-layout { display: grid; grid-template-columns: 210px 1fr; gap: 26px; align-items: start; margin-top: 18px; }
.admin-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 84px; }
.anav {
  display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: 9px;
  text-decoration: none; color: var(--muted); font-weight: 600; font-size: .92rem;
  border: 1px solid transparent; transition: background .12s, color .12s;
  /* also used as <button> (Settings sections) — neutralize UA button styles */
  background: none; font-family: inherit; cursor: pointer; text-align: start;
}
.anav i { width: 18px; text-align: center; color: var(--muted); font-size: 1rem; }
.anav:hover { background: var(--hover, #f1f4f9); color: var(--ink); }
.anav:hover i { color: var(--accent); }
.anav.on { background: var(--accent-soft, #e8f1fa); color: var(--accent); border-color: var(--accent-line, #c4daf0); }
.anav.on i { color: var(--accent); }
[data-theme="dark"] .anav:hover { background: rgba(255,255,255,.05); color: var(--ink); }
.admin-content { min-width: 0; }
.utabs { display: flex; gap: 4px; margin: 4px 0 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.utab {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  font-family: inherit; font-size: .9rem; font-weight: 600; color: var(--muted);
}
.utab:hover { color: var(--navy-900); }
.utab.on { color: var(--accent-dark); border-bottom-color: var(--accent); }
/* A third level of left nav inside a section (Settings → Organization /
   Settings, ADR-0045): a slim list beside the content, its own left rule so
   it reads as one level under the section nav. */
.nav3-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; align-items: start; }
.nav3 { display: flex; flex-direction: column; gap: 2px; padding-inline-start: 10px; border-inline-start: 1px solid var(--line);
  position: sticky; top: 84px; }
.nav3-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; position: relative;
  color: var(--muted); font-weight: 600; font-size: .88rem; text-decoration: none; transition: background .12s, color .12s; }
button.nav3-item { border: 0; background: none; font-family: inherit; line-height: inherit; cursor: pointer; text-align: start; width: 100%; }
.nav3-item i { width: 16px; text-align: center; font-size: .92rem; }
.nav3-item:hover { background: var(--hover, #f1f4f9); color: var(--ink); text-decoration: none; }
.nav3-item.on { color: var(--accent); background: var(--accent-soft, #e8f1fa); }
.nav3-item.on::before { content: ""; position: absolute; inset-inline-start: -11px; top: 7px; bottom: 7px; width: 2px;
  border-radius: 2px; background: var(--accent); }
.nav3-n { margin-inline-start: auto; min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line);
  font-size: .72rem; line-height: 18px; text-align: center; color: var(--muted); }
.nav3-item.on .nav3-n { border-color: var(--accent-line, #c4daf0); color: var(--accent); background: var(--card, #fff); }
[data-theme="dark"] .nav3-item:hover { background: rgba(255,255,255,.05); }
[data-theme="dark"] .nav3-item.on { background: rgba(76, 155, 224, .12); }
.nav3-content { min-width: 0; container-type: inline-size; }

@media (max-width: 1100px) {
  .nav3-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .nav3 { min-width: 0; }
  .nav3 { flex-direction: row; overflow-x: auto; position: static; border-inline-start: 0; padding-inline-start: 0;
    border-bottom: 1px solid var(--line); padding-bottom: 6px; scrollbar-width: thin; }
  .nav3-item { white-space: nowrap; }
  .nav3-item.on::before { inset-inline-start: 10px; inset-inline-end: 10px; top: auto; bottom: -7px; width: auto; height: 2px; }
}
.settings-card { max-width: 560px; }
.org-profile-card { margin-bottom: 18px; }
/* Settings → Organization: lists and their records (ADR-0048). */
.org-list-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.org-list-head p { margin: 2px 0 0; font-size: .86rem; }
.org-list-head .btn { white-space: nowrap; flex: none; }
.org-list td { vertical-align: middle; }
.org-list tr.org-inactive td { color: var(--muted); }
/* Screen17 #3: beside two nav columns the list was ~40px wider than its card, so
   the ⋮ column sat under the card's edge and opening it scrolled the table
   sideways. Tighter cells fit it at desktop widths; where it still scrolls (a
   phone) the ⋮ column stays pinned at the end, always in view. */
.org-list th, .org-list td { padding-inline: 12px; }
.table.org-list { overflow: clip; }   /* clip, not hidden: keeps the round corners without becoming the sticky cells' scroll box */
.org-list th.row-menu-h, .org-list td.row-menu { position: sticky; inset-inline-end: 0; z-index: 1; background-color: var(--card); }
.org-list thead th.row-menu-h { background-color: #fbfcfe; }
.org-list tr.menu-open td.row-menu { background-color: var(--bg); }
[data-theme="dark"] .org-list thead th.row-menu-h { background: #232b37; }
[data-theme="dark"] .table.org-list tr:hover td.row-menu, [data-theme="dark"] .org-list tr.menu-open td.row-menu { background: #262e3a; }
.org-empty { text-align: center; padding: 22px 0 8px; }
.org-form-head { margin-bottom: 8px; }
.org-back { font-size: .85rem; font-weight: 600; text-decoration: none; }
.org-form .field-group { margin-top: 18px; }
.org-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 18px 0 4px; font-size: .86rem; color: var(--muted); }
.org-meta strong { color: var(--ink); font-weight: 600; }
.org-form-actions { display: flex; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
/* Settings → Settings (ADR-0047): switches, people pickers, a segmented choice. */
.sys-form .field-group:first-child { margin-top: 0; }
.sw-row { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; cursor: pointer; }
.sw { position: relative; flex: none; width: 40px; height: 22px; margin-top: 1px; }
.sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.sw-track { position: absolute; inset: 0; border-radius: 999px; background: #cfd6e1; transition: background .15s; }
.sw-track::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.sw input:checked + .sw-track { background: var(--accent); }
.sw input:checked + .sw-track::after { transform: translateX(18px); }
[dir="rtl"] .sw input:checked + .sw-track::after { transform: translateX(-18px); }
.sw input:focus-visible + .sw-track { outline: 2px solid var(--accent); outline-offset: 2px; }
[data-theme="dark"] .sw-track { background: #3a4757; }
.sw-text { display: flex; flex-direction: column; gap: 2px; }
.sw-label { font-weight: 600; font-size: .92rem; color: var(--ink); }
.sw-help { font-size: .82rem; color: var(--muted); }
.pick { border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: var(--card); }
.pick-find { width: 100%; margin-bottom: 6px; }
.pick-list { max-height: 190px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px 10px; }
.pick-item { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; font-size: .88rem; font-weight: 500; cursor: pointer; }
.pick-item:hover { background: var(--hover, #f1f4f9); }
/* Inside a .field, its label and input rules (a block label, a full-width box) would put the tick box above the name. */
.field .pick-item { display: flex; margin: 0; font-weight: 500; font-size: .88rem; color: var(--ink); }
.field .pick-item input { width: auto; margin: 0; padding: 0; flex: none; border: 0; }
.pick-count { display: block; font-size: .8rem; margin-top: 4px; min-height: 1em; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; flex-wrap: wrap; }
.seg label { display: flex; align-items: center; gap: 8px; padding: 8px 14px; cursor: pointer; font-weight: 500; font-size: .9rem; }
.seg label + label { border-inline-start: 1px solid var(--line); }
.seg label:has(input:checked) { background: var(--accent-soft, #e8f1fa); color: var(--accent-dark); }
.sys-banner-preview { height: 110px; border-radius: 12px; border: 1px dashed var(--line); background: var(--bg) center / cover no-repeat;
  display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.sys-banner-preview[style] { border-style: solid; }
.sys-locked { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 4px 0 8px; }
.sys-locked-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.sys-locked strong { display: block; margin-bottom: 4px; font-size: .88rem; }
.sys-ip { font-size: .86rem; color: var(--muted); }
.sys-ip code { font-size: .86rem; color: var(--ink); background: var(--bg); padding: 2px 6px; border-radius: 6px; }
.nav3-content > .card + .card { margin-top: 18px; }
.cf-filter { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.rm-when { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rm-when input { width: 80px; }
.rm-when select { width: auto; }
.rm-vars { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: .86rem; }
.rm-vars select { max-width: 380px; }
.cf-filter select, .cf-filter input { max-width: 320px; }
.nav3-content .org-logo-card { max-width: 560px; }
.settings-card h3 { margin-top: 0; color: var(--navy-900); }
/* Read-only facts shown in a form (username, email) — visibly not editable. */
.field input:disabled { background: var(--bg); color: var(--muted); cursor: not-allowed; }
[data-theme="dark"] .field input:disabled { background: transparent; color: var(--muted); border-style: dashed; }
@media (max-width: 760px) {
  .admin-layout { grid-template-columns: 1fr; gap: 14px; }
  .admin-nav { flex-direction: row; flex-wrap: wrap; position: static; }
  .anav span { display: none; }
  .anav { padding: 9px 12px; }
}

.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.kpi {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; position: relative;
}
.kpi-ic { color: var(--accent); font-size: 1.1rem; margin-bottom: 6px; }
.kpi-val { font-size: 1.9rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.kpi-lbl { color: var(--muted); font-size: .82rem; margin-top: 4px; }
.kpi-warn .kpi-val { color: #b0620a; }
.kpi-warn .kpi-ic { color: #b0620a; }

.admin-table td, .admin-table th { vertical-align: middle; }
.admin-table .admin-actions { text-align: end; white-space: nowrap; }
/* Let row kebab menus escape the table box (the base .table clips with
   overflow:hidden for its rounded corners; re-round the corner cells here). */
.admin-table { overflow: visible; }
.admin-table tr:first-child th:first-child { border-start-start-radius: var(--radius); }
.admin-table tr:first-child th:last-child { border-start-end-radius: var(--radius); }
.admin-table tr:last-child td:first-child { border-end-start-radius: var(--radius); }
.admin-table tr:last-child td:last-child { border-end-end-radius: var(--radius); }

/* status / role pills (data-driven, Fasana convention) */
.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.5;
}
.pill.admin        { background: rgba(143,106,0,.14);  color: #8a6a00; }
.pill.owner        { background: rgba(12, 100, 174,.12); color: var(--accent); }

.pill.subuser      { background: #eef1f6;              color: var(--muted); }
.pill.active       { background: rgba(13,122,86,.14);  color: #0d7a56; }
.pill.pending      { background: rgba(176,98,10,.14);  color: #b0620a; }
.pill.disabled     { background: rgba(204,47,66,.12);  color: #c22f42; }
.pill.access-full  { background: rgba(13,122,86,.12);  color: #0d7a56; }
.pill.access-view  { background: #eef1f6;              color: var(--muted); }

/* kebab row menu (native <details>) */
.kebab { position: relative; display: inline-block; }
.kebab > summary {
  list-style: none; cursor: pointer; width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted);
  font-size: 1.15rem; user-select: none;
}
.kebab > summary::-webkit-details-marker { display: none; }
.kebab > summary:hover { background: #eef1f6; color: var(--ink); }
.kebab-menu {
  position: absolute; inset-inline-end: 0; top: 34px; z-index: 40; min-width: 184px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(16,32,54,.16); padding: 6px; text-align: start;
}
/* An open menu floats above the page (VergeHRMenu in rowmenu.js): the top layer
   via popover="manual", or position:fixed where the Popover API is missing, so
   no overflow container, card, sticky bar or sidebar can clip or cover it.
   Undo the UA [popover] box (inset:0, margin:auto, Canvas colours). */
.kebab-menu.is-floating {
  position: fixed; inset: auto; margin: 0; z-index: 1000; color: var(--ink);
  max-width: calc(100vw - 16px); overflow-y: auto; overscroll-behavior: contain;
}
details.kebab:not([open]) > .kebab-menu { display: none; }
.kebab-menu form { margin: 0; }
/* A menu's forms fill its row even inside toolbars that make forms inline (.dsh-actions, .page-actions, .pr-actions …) — QA 2026-10-28. */
.kebab .kebab-menu form, .kebab-menu.is-floating form { display: block; }
.kebab-menu button {
  width: 100%; text-align: start; background: none; border: 0; cursor: pointer;
  padding: 8px 10px; border-radius: 7px; font-size: .88rem; color: var(--ink);
  display: flex; align-items: center; gap: 9px;
}
.kebab-menu button:hover { background: #f2f5fa; }
.kebab-menu button.danger { color: #c22f42; }
/* Danger items hover red-tinted across the whole row, in every menu (same as the right-click menu). */
.kebab-menu button.danger:hover, .kebab-menu a.danger:hover { background: #fdecea; }
[data-theme="dark"] .kebab-menu button.danger:hover, [data-theme="dark"] .kebab-menu a.danger:hover { background: rgba(239,123,112,.16); color: #f19d95; }
.kebab-menu button i { width: 15px; text-align: center; }
/* An item that can't be used here: greyed, with the reason under it (QA Screen53 — a menu that only
   showed Rename looked broken). */
.kebab-menu button.is-disabled { color: var(--muted); cursor: default; opacity: .8; }
.kebab-menu button.is-disabled:hover { background: none; }
.kebab-menu button.is-disabled span { display: flex; flex-direction: column; }
.kebab-menu button.is-disabled small { font-size: .74rem; line-height: 1.3; max-width: 220px; white-space: normal; }

/* Row menus on every data table (_row_menu.html, rowmenu.js) */
th.row-menu-h, td.row-menu { width: 44px; text-align: end; white-space: nowrap; padding-inline: 6px !important; }
td.row-menu .kebab-menu { text-align: start; }
.kebab[open] > summary { background: #eef1f6; color: var(--ink); }
[data-theme="dark"] .kebab[open] > summary { background: rgba(255,255,255,.08); }
.kebab-menu a.danger, .kebab-menu a.danger i { color: #c22f42; }
tr.menu-open > td { background: var(--bg); }

/* ---------- Context menu (VergeHRCtx, static/js/ui.js) ---------- */
.ctx { position: fixed; z-index: 300; min-width: 194px; background: #fff; border: 1px solid var(--line);
  border-radius: 11px; box-shadow: 0 4px 10px rgba(30, 30, 30,.14), 0 12px 34px rgba(30, 30, 30,.16); padding: 6px; }
.ctx[hidden] { display: none; }
.ctx-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: start; border: 0; background: none;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); padding: 9px 11px; border-radius: 8px; cursor: pointer; }
.ctx-item i { width: 16px; text-align: center; color: var(--muted); }
.ctx-item:hover { background: #e8f1fa; }
.ctx-item:hover i { color: var(--accent); }
.ctx-item.danger { color: var(--danger); }
.ctx-item.danger i { color: var(--danger); }
.ctx-item.danger:hover { background: #fdecea; }
.ctx-sep { height: 1px; background: var(--line); margin: 5px 6px; }

/* ---------- Toasts (VergeHR.Toast, static/js/ui.js) ----------
   Every action's result — success, error, warning, info — as a card in one stack
   at the top right (top left in RTL, top centre on a phone). z-index sits above
   every overlay (modals 200-320, SweetAlert 1060, floating menus 1000). */
/* Top centre: the top right holds page actions and the Dashboard's clock-in button, which a toast would cover. */
/* Server flash boxes that ui.js turns into toasts stay invisible until it has run
   (html.flash-done), so "Added." doesn't show inline for a frame and then again as
   a toast. visibility (not display) keeps them measurable for ui.js; boxes it keeps
   inline appear once it's done. */
html:not(.flash-done) .app-main :is([class="alert alert-success"], [class="alert alert-error"], .alert[data-flash]) {
  visibility: hidden; position: absolute;
}
.app-toast-wrap { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 2000; width: min(420px, calc(100vw - 32px));
  display: flex; flex-direction: column; align-items: stretch; gap: 10px; pointer-events: none; }
.app-toast { --tc: #0d7a56; --tbg: #e6f5ee; position: relative; overflow: hidden; pointer-events: auto;
  display: flex; align-items: flex-start; gap: 11px; padding-block: 13px; padding-inline: 14px 10px;
  background: var(--card, #fff); color: var(--ink); border: 1px solid var(--line); border-inline-start: 4px solid var(--tc);
  border-radius: 10px; box-shadow: 0 4px 12px rgba(16, 32, 54, .08), 0 16px 36px rgba(16, 32, 54, .16);
  font-size: .9rem; font-weight: 500; line-height: 1.4; animation: app-toast-in .2s ease-out; }
.app-toast.is-error { --tc: #c0392b; --tbg: #fdecea; }
.app-toast.is-warning { --tc: #b0620a; --tbg: #fdf3e3; }
.app-toast.is-info { --tc: #0c64ae; --tbg: #e8f1fa; }
.app-toast-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  margin-top: -3px; border-radius: 50%; background: var(--tbg); color: var(--tc); }
.app-toast-text { flex: 1; min-width: 0; padding-top: 1px; overflow-wrap: anywhere; }
.app-toast-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  margin-block: -3px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; }
.app-toast-x:hover { background: var(--bg); color: var(--ink); }
.app-toast-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.app-toast-bar { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--tc); opacity: .55;
  transform-origin: left center; animation: app-toast-bar var(--toast-ms, 4200ms) linear forwards; }
[dir="rtl"] .app-toast-bar { transform-origin: right center; }
.app-toast.is-paused .app-toast-bar { animation-play-state: paused; }
.app-toast.is-out { animation: app-toast-out .22s ease-in forwards; }
@keyframes app-toast-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes app-toast-out { to { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes app-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 640px) {
  .app-toast-wrap { top: 10px; left: 12px; right: 12px; transform: none; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .app-toast, .app-toast.is-out { animation: none; } .app-toast-bar { display: none; } }
/* A flash box that became a toast (ui.js) leaves no gap behind. */
.alert[data-toasted] { display: none !important; }

.field .help.is-err { color: var(--danger); font-weight: 600; }

/* ---------- Confirm / alert / prompt dialogs (static/js/ui.js) ----------
   The app's replacement for native confirm()/alert()/prompt(). Built on
   .modal-overlay/.modal-card so it inherits the card, shadow and dark theme
   the settings modal already uses. */
.dlg-overlay { z-index: 500; }          /* above every modal — a modal may raise one */
.dlg-card { width: min(440px, 100%); padding: 26px 24px 22px; }
.dlg-head { display: flex; gap: 14px; align-items: flex-start; padding-inline-end: 26px; }
.dlg-icon { width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex;
  align-items: center; justify-content: center; font-size: 1.05rem; }
.dlg-icon.tone-warn { background: #fdf3e0; color: #b57b12; }
.dlg-icon.tone-danger { background: #fdecea; color: var(--danger); }
.dlg-icon.tone-info { background: #e8f1fa; color: var(--accent); }
.dlg-icon.tone-ok { background: #e7f5ec; color: #1d8a4c; }
.dlg-copy { min-width: 0; flex: 1; padding-top: 2px; }
.dlg-card h3 { margin: 0; font-size: 1.12rem; color: var(--navy-900); line-height: 1.35; }
/* Messages quote user-typed names — wrap them instead of overflowing the card. */
.dlg-text { margin: 7px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.5;
  white-space: pre-line; overflow-wrap: anywhere; }
.dlg-text[hidden] { display: none; }
.dlg-field { margin: 18px 0 0; }
.dlg-field.is-err input { border-color: var(--danger); }
.dlg-field.is-err .help { color: var(--danger); font-weight: 600; }
.dlg-field label[hidden] { display: none; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.dlg-actions .btn[hidden] { display: none; }
@media (max-width: 460px) {
  .dlg-actions { flex-direction: column-reverse; }
  .dlg-actions .btn { width: 100%; }
  .dlg-actions.safe-first { flex-direction: column; }   /* Leave Without Saving?: Stay on This Page on top */
}

.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 4px; }

.pager .btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }
/* Page numbers under a server-paged list (templates/_pager.html) */
.pager-nums { flex-wrap: wrap; gap: 8px; }
.pager-pages { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.pager-n { min-width: 34px; height: 34px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; font-size: .88rem; }
.pager-n:hover { border-color: var(--accent); color: var(--accent); }
.pager-n.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.pager-gap { color: var(--muted); padding: 0 2px; }
.pager-info { text-align: center; font-size: .82rem; margin: 6px 0 0; }
/* Showing 1–25 of 150 · Per Page 10 25 50 100 (QA Screen130) */
.pager-foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 0; }
.pager-foot .pager-info { margin: 0; }
.pager-size { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; }
.pager-size > .muted { margin-inline-end: 4px; }
.pager-size .pager-n { min-width: 30px; height: 28px; font-size: .8rem; }
@media (max-width: 560px) { .pager-nums .btn { padding-inline: 10px; } .pager-n { min-width: 30px; height: 30px; } }

.kebab-menu a {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px;
  font-size: .88rem; color: var(--ink); text-decoration: none;
}
.kebab-menu a:hover { background: #f2f5fa; }
.kebab-menu a i, .kebab-menu button i { width: 15px; text-align: center; }
.kebab-menu button[disabled] { opacity: .45; cursor: not-allowed; }

/* team management (settings modal) */
.team-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.team-row {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.team-who { display: flex; flex-direction: column; margin-inline-end: auto; min-width: 0; }
.team-name { font-weight: 600; color: var(--ink); }
.team-mail { font-size: .8rem; color: var(--muted); }

.team-count { font-size: .82rem; }
.team-list { display: flex; flex-direction: column; gap: 8px; }
.team-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.team-add { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 14px; }
.team-kebab { flex-shrink: 0; }
.linklike.danger { color: #c22f42; }

/* ---------- Duotone icons in the brand accent (fa-duotone fa-light) ---------- */
.fa-duotone {
  --fa-primary-color: var(--accent);
  --fa-secondary-color: var(--accent);
  --fa-secondary-opacity: 0.32;
}
/* Keep icons legible where they sit on a filled/colored surface, or must match
   the element's own colour (white on buttons, red on danger items). */
.btn-primary .fa-duotone, .btn-danger .fa-duotone,
.danger .fa-duotone, .ctx-item.danger .fa-duotone, .kebab-menu .danger .fa-duotone,
.imp-banner .fa-duotone, .side-logo .fa-duotone {
  --fa-primary-color: currentColor;
  --fa-secondary-color: currentColor;
}

/* ---------- Dashboard charts (Home) ---------- */
.dash-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin: 22px 0; }

/* ---- social sign-in (Google / Apple) on login + signup ---- */
.social-auth { margin-top: 18px; }
.social-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .82rem; margin: 4px 0 16px; }
.social-divider::before, .social-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.gsi-wrap { display: flex; justify-content: center; }
/* Apple sign-in button — sized to match the 300px Google button below it */
.apple-signin-btn { display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 300px; margin: 10px auto 0; padding: 0; height: 40px; border-radius: 4px;
  background: #000; color: #fff; border: 1px solid #000; cursor: pointer;
  font-size: 15px; font-weight: 500; font-family: inherit; }
.apple-signin-btn:hover { background: #1a1a1a; }
[data-theme="dark"] .apple-signin-btn { background: #fff; color: #000; border-color: #fff; }
[data-theme="dark"] .apple-signin-btn:hover { background: #e8e8e8; }

/* ---- account pages: story on one side, form on the other (auth_base.html, ADR-0014) ---- */
body.auth-page .footer { display: none; }
.auth-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: calc(100vh - 70px); }
.auth-art { position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(1200px 600px at 10% 0%, #1f7fcf 0%, transparent 60%),
              radial-gradient(900px 500px at 100% 100%, #1670bd 0%, transparent 55%),
              linear-gradient(160deg, #373737 0%, #0f2d4c 55%, #12314f 100%); }
.auth-art-glow { position: absolute; width: 520px; height: 520px; inset-inline-end: -160px; top: -140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 178, 239,.35), transparent 65%); filter: blur(10px); }
.auth-art-inner { position: relative; max-width: 560px; margin: 0 auto; padding: 64px 48px; display: flex; flex-direction: column; gap: 22px; height: 100%; justify-content: center; }
.auth-art-eyebrow { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: .8rem; font-weight: 600; letter-spacing: .02em;
  padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #d9ebfb; }
.auth-art-title { font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.14; letter-spacing: -.02em; font-weight: 800; color: #fff; text-wrap: balance; }
.auth-art-title span { background: linear-gradient(90deg, #8cc2f0, #a3cdf5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-art-lede { color: #c9ddf1; font-size: 1.02rem; line-height: 1.6; }
.auth-art-points { list-style: none; display: grid; gap: 10px; margin-top: 4px; }
.auth-art-points li { display: flex; align-items: center; gap: 12px; color: #e6f0fb; font-size: .95rem; }
.auth-art-points i, .auth-art-points svg { color: #8cc2f0; width: 18px; flex-shrink: 0; }
/* The art sits on dark blue whatever the theme, so its duotone icons take the light blue rather than --accent. */
.auth-art .fa-duotone { --fa-primary-color: currentColor; --fa-secondary-color: currentColor; }

/* the product illustration: three people rows and the notification that went out
   (class names kept from the original design — they are generic window/row styles) */
.mock-vault { background: rgba(255,255,255,.97); color: #1d2a3a; border-radius: 16px; padding: 14px 16px 16px; box-shadow: 0 30px 70px rgba(0,0,0,.35);
  display: flex; flex-direction: column; gap: 8px; font-size: .88rem; }
.mock-bar { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid #edf0f5; margin-bottom: 2px; }
.mock-bar span { width: 9px; height: 9px; border-radius: 50%; background: #e4e8ef; }
.mock-bar em { margin-inline-start: 8px; font-style: normal; font-size: .76rem; color: #6b7686; font-weight: 600; }
.mock-doc { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; background: #f4f7fb; }
.mock-doc > i, .mock-doc > svg { color: #0c64ae; width: 18px; flex-shrink: 0; }
.mock-doc-name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-pill { flex-shrink: 0; font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.mock-pill.ok { background: #e2f5ec; color: #0d7a56; }
.mock-pill.warn { background: #fdf1d8; color: #8a5a12; }
.mock-pill.stop { background: #fdecea; color: #c0392b; }
.mock-remind { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 9px 12px; border-radius: 10px;
  background: #0c64ae; color: #fff; font-size: .8rem; font-weight: 600; }

.auth-panel { display: flex; align-items: center; justify-content: center; padding: 48px 24px; background: var(--card); }
.auth-box { width: min(440px, 100%); }
.auth-title { font-size: 1.7rem; line-height: 1.25; margin-bottom: 6px; color: var(--navy-900); letter-spacing: -.01em; }
.auth-sub { color: var(--muted); margin-bottom: 22px; line-height: 1.5; }
.auth-title + .alert, .auth-title + form { margin-top: 18px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); margin-bottom: 30px; }
.auth-tab { text-align: center; padding: 10px; border-radius: 9px; font-weight: 600; font-size: .92rem; color: var(--muted); }
.auth-tab:hover { color: var(--navy-900); text-decoration: none; }
.auth-tab.on { background: var(--card); color: var(--navy-900); box-shadow: 0 1px 3px rgba(30, 30, 30,.12), 0 1px 1px rgba(30, 30, 30,.06); }
.auth-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.auth-label-row a { font-size: .82rem; }
.auth-submit { display: block; width: 100%; margin-top: 22px; padding-top: 12px; padding-bottom: 12px; }
.auth-submit i, .auth-submit svg { margin-inline-start: 6px; }
.auth-switch { margin-top: 20px; font-size: .9rem; color: var(--muted); text-align: center; }
.auth-inline { margin: -6px 0 16px; }
.auth-box .social-auth { margin-top: 22px; }

@media (max-width: 900px) {
  .auth-split { grid-template-columns: 1fr; min-height: 0; }
  .auth-art-inner { padding: 36px 24px; gap: 14px; }
  .auth-art .mock-vault, .auth-art-points { display: none; }
  .auth-panel { padding: 36px 20px 56px; align-items: flex-start; }
}
@media (max-width: 560px) {
  .auth-art-lede { display: none; }
  /* The tabs already offer both, and the phone nav has no room for them. */
  body.auth-page .nav-links > a[href$="/login"], body.auth-page .nav-links > a[href$="/signup"] { display: none; }
  .auth-art-inner { padding: 26px 20px; }
}

/* ============================================================
   MARKETING SITE v2 — dark hero landing
   ============================================================ */
.home-hero-dark .nav { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: transparent; border-bottom: none; }
.home-hero-dark .nav .nav-logo span,
.home-hero-dark .nav .nav-links a { color: #fff; }
.home-hero-dark .nav .nav-links a.btn-primary { color: #fff; }
.home-hero-dark .nav .nav-links a:not(.btn):hover { color: #d6e9fb; }

.m-container { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

/* ---- hero ---- */
.hero-v2 { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
  background: var(--navy-900); color: #fff; overflow: hidden; isolation: isolate; }
.hero-v2-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 120% at 80% 0%, #16324e 0%, #373737 55%); }

.hero-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .hero-bg-video { display: none; } }

.hero-v2-inner { position: relative; z-index: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 150px 32px 110px; }
/* No overlay filter over the hero background — keep text legible with a shadow on the text only. */
.hero-v2-copy { max-width: 660px; text-shadow: 0 2px 16px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45); }
.hero-v2-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .82rem; font-weight: 600;
  letter-spacing: .02em; color: #d6e9fb; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  padding: 7px 14px; border-radius: 999px; }
.hero-v2-pulse { width: 8px; height: 8px; border-radius: 50%; background: #6fb2ef; box-shadow: 0 0 0 0 rgba(111, 178, 239,.6); animation: heroPulse 2s infinite; }
@keyframes heroPulse { 0% { box-shadow: 0 0 0 0 rgba(111, 178, 239,.55); } 70% { box-shadow: 0 0 0 9px rgba(111, 178, 239,0); } 100% { box-shadow: 0 0 0 0 rgba(111, 178, 239,0); } }
.hero-v2-title { font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.08; font-weight: 800; margin: 20px 0 0; letter-spacing: -.02em; }
.hero-v2-title .grad {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: #eef3f9;                       /* bright, so it always reads on the dark hero */
  animation: gradGlow 3.2s ease-in-out infinite;
}
@keyframes gradGlow {
  0%, 100% { text-shadow: 0 2px 12px rgba(0,0,0,.6), 0 0 14px rgba(111, 178, 239,.45); }
  50%      { text-shadow: 0 2px 12px rgba(0,0,0,.6), 0 0 30px rgba(127,227,214,.9), 0 0 60px rgba(111, 178, 239,.5); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-v2-title .grad { animation: none; text-shadow: 0 2px 12px rgba(0,0,0,.6), 0 0 20px rgba(127,227,214,.7); }
}
.hero-v2-lede { font-size: 1.12rem; line-height: 1.62; color: #d8e7f5; margin: 20px 0 0; max-width: 600px; }
.hero-v2-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-v2-proof { list-style: none; display: flex; flex-wrap: wrap; gap: 20px; margin: 26px 0 0; padding: 0; }
.hero-v2-proof li { font-size: .92rem; color: #d6e9fb; display: flex; align-items: center; gap: 8px; }
.hero-v2-proof i { color: #6fb2ef; }

/* ---- buttons ---- */
.btn-v2 { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 11px; font-weight: 600;
  font-size: .96rem; text-decoration: none; transition: transform .12s, box-shadow .12s, background .12s; border: 1px solid transparent; }
.btn-v2:hover { text-decoration: none; transform: translateY(-1px); }
.btn-v2-primary { background: #fff; color: var(--navy-900); box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.btn-v2-primary:hover { background: #e8f1fa; color: var(--navy-900); }
.btn-v2-ghost { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.22); }
.btn-v2-ghost:hover { background: rgba(255,255,255,.18); color: #fff; }
.btn-v2-ghost-dark { background: transparent; color: var(--accent); border-color: var(--line); }
.btn-v2-ghost-dark:hover { background: var(--bg); color: var(--accent-dark); }

/* ---- section rhythm ---- */
.section-v2 { padding: 92px 0; }
.section-v2-alt { background: #fafbfd; }
.section-v2-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.eyebrow-v2 { display: inline-block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--accent); margin-bottom: 12px; }
.eyebrow-v2.on-dark { color: #8cc2f0; }
.title-v2 { font-size: clamp(1.7rem, 3.3vw, 2.4rem); line-height: 1.16; font-weight: 800; color: var(--navy-900); letter-spacing: -.02em; }
.title-v2.on-dark { color: #fff; }
.lede-v2 { font-size: 1.05rem; line-height: 1.6; color: var(--muted); margin-top: 14px; }
.lede-v2.on-dark { color: #cbdcef; }

/* ---- trust strip ---- */
.strip-v2 { background: #f6f8fb; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; }
.strip-v2 .m-container { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.strip-v2-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.strip-v2-langs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; }
.strip-v2-langs li { font-size: .92rem; font-weight: 600; color: var(--navy-800); display: flex; align-items: center; gap: 8px; }
.strip-v2-langs i { color: var(--accent); }

/* ---- how it works ---- */
.how-v2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.how-v2-step { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px; transition: transform .15s, box-shadow .15s; }
.how-v2-step:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.how-v2-num { font-size: 1.6rem; font-weight: 800; color: var(--accent); opacity: .35; }
.how-v2-body h3 { color: var(--navy-900); font-size: 1.12rem; margin: 8px 0 8px; display: flex; align-items: center; gap: 9px; }
.how-v2-body h3 i { color: var(--accent); }
.how-v2-body p { color: var(--muted); font-size: .95rem; line-height: 1.55; }

/* ---- quote band ---- */
.quote-band { background: var(--navy-900); color: #fff; padding: 60px 0; }
.quote-big { text-align: center; font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: -.01em; color: #e8f1fa; max-width: 900px; margin: 0 auto; }

/* ---- bento ---- */
.bento-v2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bento-v2-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px; transition: transform .15s, box-shadow .15s; }
.bento-v2-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.bento-v2-card-lg { grid-column: span 2; background: linear-gradient(135deg, #0c64ae, #16324e); color: #fff; border-color: transparent; }
.bento-v2-icon { width: 46px; height: 46px; border-radius: 12px; background: #e8f1fa; color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 14px; }
.bento-v2-card-lg .bento-v2-icon { background: rgba(255,255,255,.16); color: #fff; }
.bento-v2-card h3 { color: var(--navy-900); font-size: 1.15rem; margin-bottom: 8px; }
.bento-v2-card-lg h3 { color: #fff; font-size: 1.4rem; }
.bento-v2-card p { color: var(--muted); font-size: .95rem; line-height: 1.55; }
.bento-v2-card-lg p { color: #d8e7f5; }

/* ---- who ---- */
.who-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.who-card { text-align: center; padding: 28px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.who-card i { font-size: 1.9rem; color: var(--accent); }
.who-card h3 { color: var(--navy-900); font-size: 1.1rem; margin: 14px 0 8px; }
.who-card p { color: var(--muted); font-size: .9rem; line-height: 1.5; }

/* ---- security band ---- */
.security-band { background: var(--navy-900); color: #fff; padding: 84px 0; }
.security-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; }
.security-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.security-list li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #e8f1fa; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 14px 16px; font-size: .92rem; }
.security-list i { color: #6fb2ef; font-size: 1.05rem; }

/* ---- stats ---- */
.stat-v2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stat-v2-n { font-size: 1.9rem; font-weight: 800; color: var(--accent); letter-spacing: -.01em; }
.stat-v2-l { color: var(--muted); font-size: .9rem; margin-top: 6px; }

/* ---- FAQ ---- */
.faq-v2 { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 4px 18px; }
.faq-item summary { cursor: pointer; font-weight: 600; color: var(--navy-900); padding: 14px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; font-weight: 400; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { color: var(--muted); font-size: .95rem; line-height: 1.6; padding: 0 0 16px; margin: 0; }

/* ---- CTA band ---- */
.cta-v2 { padding: 90px 0; text-align: center; background: radial-gradient(120% 120% at 50% 0%, #e8f1fa 0%, #fff 60%); }
.cta-v2-title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; color: var(--navy-900); letter-spacing: -.02em; }
.cta-v2-lede { color: var(--muted); font-size: 1.08rem; margin: 14px auto 30px; max-width: 560px; }

@media (max-width: 900px) {
  .how-v2, .bento-v2, .who-grid, .stat-v2-grid { grid-template-columns: 1fr 1fr; }
  .bento-v2-card-lg { grid-column: span 2; }
  .security-inner { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .how-v2, .bento-v2, .who-grid, .stat-v2-grid { grid-template-columns: 1fr; }
  .bento-v2-card-lg { grid-column: span 1; }
  .security-list { grid-template-columns: 1fr; }
  .hero-v2-inner { padding: 120px 22px 80px; }
}

/* Match SweetAlert2 inputs/selects to the app's field styling (admin + settings dialogs).
   The side inset matters: `margin: 6px 0` with `width: 100%` made the field span
   the popup edge to edge while the title and text above it stayed inset, so it
   looked wedged into the corners. 1.6em is SweetAlert2's own content inset. */
.swal2-popup .swal2-input,
.swal2-popup .swal2-select {
  width: calc(100% - 3.2em); box-sizing: border-box; height: auto; margin: 6px 1.6em 0;
  padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 8px;
  font-size: .95rem; font-family: inherit; color: var(--ink); background: #fff; box-shadow: none;
}
.swal2-popup .swal2-input:focus,
.swal2-popup .swal2-select:focus { outline: none; border-color: var(--navy-700); box-shadow: none; }

/* ============================================================
   DARK MODE — applied only when <html data-theme="dark">.
   Only the authenticated app shell (app_base.html) sets the
   attribute, so the public marketing site stays light.
   ============================================================ */
:root[data-theme="dark"] {
  --navy-900: #eaf1f8;   /* these read as strong TEXT in the app → flip light */
  --navy-800: #cfe2f5;
  --navy-700: #a9cbee;
  --ink: #e3e6ea;
  --muted: #93a1b3;
  --line: #2b3644;
  --bg: #0e1621;
  --card: #161f2b;
  --accent: #4c9be0;
  --accent-dark: #8cc2f0;
  --accent-on-dark: #6fb2ef;
  --danger: #ef7b70;
  --warn-bg: #2b2617;
  --shadow: 0 1px 3px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.45);
}

/* App-chrome surfaces that hardcode white in light mode. */
[data-theme="dark"] .app-sidebar,
[data-theme="dark"] .app-subnav{ background: var(--card); }
:root[data-theme="dark"] { --subnav-art-o: .28; }

/* Elevated popovers/menus/modals — one step lighter than the page. */
[data-theme="dark"] .user-menu,
[data-theme="dark"] .modal-card,
[data-theme="dark"] .ctx,
[data-theme="dark"] .kebab-menu{ background: #1c2735; }

/* Form fields. */
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select,
[data-theme="dark"] textarea { background-color: #1c2836; color: var(--ink); border-color: var(--line); }
[data-theme="dark"] ::placeholder { color: var(--muted); opacity: .85; }
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.8); }

/* SweetAlert dialogs. */
[data-theme="dark"] .swal2-popup { background: #1c2735; color: var(--ink); }
[data-theme="dark"] .swal2-title, [data-theme="dark"] .swal2-html-container { color: var(--ink); }
[data-theme="dark"] .swal2-input, [data-theme="dark"] .swal2-select, [data-theme="dark"] .swal2-textarea {
  background: #1c2836; color: var(--ink); border-color: var(--line); }

/* VergeHR dialogs — the card itself is covered by the .modal-card rule above;
   only the icon badge needs its own (tinted, not washed-out) dark values. */
[data-theme="dark"] .dlg-icon.tone-warn { background: rgba(255,193,7,.14); color: #e8c07a; }
[data-theme="dark"] .dlg-icon.tone-danger { background: rgba(192,57,43,.18); color: #ef8a7d; }
[data-theme="dark"] .dlg-icon.tone-info { background: rgba(12, 100, 174,.20); color: #8cc2f0; }
[data-theme="dark"] .dlg-icon.tone-ok { background: rgba(29,138,76,.18); color: #6fc793; }

[data-theme="dark"] .btn-outline { border-color: var(--line); }

/* Sidebar + row states (light tints → subtle dark-accent). */
[data-theme="dark"] .side-item.active { background: rgba(76, 155, 224,.16); color: var(--accent-dark); }
[data-theme="dark"] .side-item:hover { background: rgba(255,255,255,.05); }
[data-theme="dark"] .side-item.active i { color: var(--accent-dark); }
[data-theme="dark"] .table tr:hover td{ background: rgba(255,255,255,.03); }

/* The dark-mode toggle button in the user menu. */
.menu-btn .fa-moon, .menu-btn .fa-sun-bright { width: 16px; }

/* ---- Dark-mode polish: tinted chips, badges, alerts, hovers, panels ---- */
/* Neutral gray chips / hovers → subtle raised surface. */
[data-theme="dark"] .modal-close,
[data-theme="dark"] .pill.subuser,
[data-theme="dark"] .pill.access-view,
[data-theme="dark"] .table th { background: rgba(255,255,255,.06); color: var(--muted); }
[data-theme="dark"] .modal-close:hover,
[data-theme="dark"] .kebab > summary:hover,
[data-theme="dark"] .kebab-menu button:hover,
[data-theme="dark"] .kebab-menu a:hover,
[data-theme="dark"] .table tr:hover td { background: rgba(255,255,255,.08); }

/* Accent tints. */
[data-theme="dark"] .anav.on,
[data-theme="dark"] .ctx-item:hover{ background: rgba(76, 155, 224,.16); color: var(--accent-dark); }

/* Success / green. */
[data-theme="dark"] .alert-success { background: rgba(63,174,134,.14); color: #6fd0a6; border: 1px solid rgba(63,174,134,.3); }

/* Danger / red. */
[data-theme="dark"] .ctx-item.danger:hover{ background: rgba(239,123,112,.16); color: #f19d95; }
[data-theme="dark"] .alert-error { background: rgba(239,123,112,.14); color: #f19d95; border: 1px solid rgba(239,123,112,.3); }

/* Toasts: the raised popover surface, with each kind's colour lightened. */
[data-theme="dark"] .app-toast { --tc: #4fc79b; --tbg: rgba(63,174,134,.16); background: #1c2735; border-color: rgba(255,255,255,.1);
  box-shadow: 0 4px 12px rgba(0,0,0,.3), 0 16px 36px rgba(0,0,0,.45); }
[data-theme="dark"] .app-toast.is-error { --tc: #f19d95; --tbg: rgba(239,123,112,.16); }
[data-theme="dark"] .app-toast.is-warning { --tc: #e8c07a; --tbg: rgba(255,193,7,.14); }
[data-theme="dark"] .app-toast.is-info { --tc: #6fb2ef; --tbg: rgba(76,155,224,.16); }
[data-theme="dark"] .app-toast-x:hover { background: rgba(255,255,255,.08); }
[data-theme="dark"] .set-msg.ok { color: #4fc79b; }

/* White logo on the dark sidebar. */
[data-theme="dark"] .side-logo .side-full { content: url("/static/images/logo_white.png"); }   /* swap to the white wordmark — a filter would bleach the coloured mark */

/* ===================== Admin Users — search / filters / pagination ===================== */
.admin-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; }
.admin-search { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; max-width: 380px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px; }
.admin-search i { color: var(--muted); font-size: .9rem; }
.admin-search input { border: none; outline: none; background: transparent; flex: 1; min-width: 0; color: var(--ink); font-size: .88rem; }
.admin-filter { border: 1px solid var(--line); border-radius: 8px; background-color: var(--card); color: var(--ink);
  padding: 9px 12px; font-size: .84rem; cursor: pointer; }
.admin-count { margin-inline-start: auto; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.admin-empty { text-align: center; color: var(--muted); padding: 26px 10px; font-size: .9rem; }
.admin-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0 4px; }
.admin-pageinfo { font-size: .82rem; color: var(--muted); }
.admin-pager .btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }
[data-theme="dark"] .admin-search, [data-theme="dark"] .admin-filter { background: var(--card); }

/* Links inside kebab menus behave like the buttons */
.kebab-menu a {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px;
  font-size: .88rem; color: var(--ink); text-decoration: none;
}
.kebab-menu a:hover { background: #f2f5fa; }
.kebab-menu a i { width: 15px; text-align: center; }

/* Employees (ADR-0027): the list and the record page */
.card-title { margin: 0 0 16px; font-size: 1.05rem; color: var(--navy-900); display: flex; align-items: center; gap: 8px; }
.card-title i { color: var(--accent); }
.form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.btn-outline.danger { color: var(--danger); border-color: var(--danger); }
.emp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.emp-layout.is-new { grid-template-columns: minmax(0, 760px); }
/* A new transfer / promotion / termination / resignation / contract: no side column, so the form takes
   the page width (capped), its fields two to a row — one on phones via .fields-2 (QA 2026-10-28). */
.emp-layout.ax-new { grid-template-columns: minmax(0, 1fr); max-width: 1040px; }
.ax-intro { margin: -4px 0 16px; }   /* the form's note, clear of the first field (QA Screen44) */
.emp-side { display: flex; flex-direction: column; gap: 22px; }
.emp-sep { border: none; border-top: 1px solid var(--line); margin: 16px 0; }
.emp-table .emp-row { cursor: pointer; }
.emp-who { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.emp-who:hover { text-decoration: none; }
.emp-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; display: flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: .78rem; flex-shrink: 0; }
.emp-avatar > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.emp-name { display: block; font-weight: 600; color: var(--navy-900); }
.emp-code { display: block; font-size: .78rem; color: var(--muted); }
.emp-table .pill + .pill { margin-inline-start: 4px; }
/* Employee actions (ADR-0033) */
.ax-table td { vertical-align: middle; }
.ax-clip { display: inline-block; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* On a table cell it must stay a cell — inline-block broke the row (blank, white-patched Note columns, QA 2026-10-28). */
td.ax-clip { display: table-cell; vertical-align: middle; }
.ax-resign { margin-bottom: 20px; max-width: 760px; }
.ax-resign summary { cursor: pointer; font-weight: 600; color: var(--navy-900); }
.ax-resign form { margin-top: 14px; }
.ax-facts p { margin: 0 0 12px; }
.emp-view { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 8px 18px; margin: 4px 0 12px; font-size: .9rem; }
.emp-view dt { color: var(--muted); font-weight: 600; }
.emp-view dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .emp-view { grid-template-columns: 1fr; gap: 2px 0; } .emp-view dd { margin-bottom: 8px; } }
/* A read-only field (view mode, or no Update permission): the value as text, no input. */
.field.field-ro .field-label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 3px; color: var(--muted); }
.field.field-ro .field-value { font-size: .95rem; color: var(--ink); min-height: 1.4em; overflow-wrap: anywhere; }
.field.field-ro .field-value.is-multiline { white-space: pre-line; }
.emp-mode { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
/* Back · Message · Edit in one row (QA Screen115): same height, same baseline. */
.emp-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.emp-actions .emp-mode, .emp-actions .emp-msg { margin-top: 0; }
.emp-actions > .btn, .emp-actions .emp-mode > .btn { min-height: 34px; }
.ax-facts dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: .88rem; }
.ax-facts dt { color: var(--muted); }
.ax-facts dd { margin: 0; }
.ax-pre { white-space: pre-line; }
.ax-doc-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ax-doc-list li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .9rem; }
.ax-doc-list li > a:not(.btn) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-doc-list li > i { color: var(--accent); }
.ax-doc-list .muted { font-size: .8rem; white-space: nowrap; }
.ax-inline { display: inline; margin: 0; }
.ax-danger { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ax-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--line); }
.ax-timeline li { position: relative; display: flex; gap: 16px; padding: 0 0 18px 6px; flex-wrap: wrap; }
.ax-timeline li::before { content: ""; position: absolute; left: -25px; top: 5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px var(--card, #fff); }
.ax-timeline li.ax-tl-cancelled::before, .ax-timeline li.ax-tl-withdrawn::before, .ax-timeline li.ax-tl-rejected::before { background: var(--line); }
.ax-tl-date { min-width: 96px; color: var(--muted); font-size: .85rem; }
.ax-tl-body { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; flex: 1; }
.ax-tl-body a, .ax-tl-body strong { font-weight: 600; }

/* Dashboard tabs (ADR-0035) */
.dash-tabs { margin: -4px 0 20px; }
.dash-tabs .utab { text-decoration: none; }
/* Phones: one row that scrolls sideways (like the employee tabs), not two wrapped rows. */
@media (max-width: 600px) { .dash-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0; } .dash-tabs .utab { white-space: nowrap; flex: none; padding-inline: 10px; } }

/* Onboarding (ADR-0031) */
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* The Back button on sub-pages (static/js/pageback.js): left-most of the header's
   actions; on its own (or before bare buttons) it is pushed to the end of the header. */
.pg-back { white-space: nowrap; }
.pg-back i { margin-inline-end: 4px; }
.page-head > .pg-back-solo { margin-inline-start: auto; }
.ob-progress { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.ob-progress-bar { width: 120px; height: 8px; border-radius: 99px; background: var(--bg); overflow: hidden; border: 1px solid var(--line); }
.ob-progress-bar span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.ob-progress-n { font-size: .82rem; font-weight: 600; color: var(--navy-900); }
.ob-summary { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.ob-welcome { white-space: pre-line; margin: 0; color: var(--ink); }
.ob-summary .ob-welcome { flex-basis: 100%; font-size: .9rem; }
.ob-task-title { font-weight: 600; color: var(--navy-900); display: flex; gap: 8px; align-items: baseline; }
.ob-task-title i { color: var(--accent); }
.ob-task-sub { font-size: .8rem; margin-top: 2px; }
.emp-list-table.ob-tasks td:first-child { white-space: normal; min-width: 220px; }
.ob-tasks td.emp-row-actions { white-space: nowrap; }
.ob-template-side { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start; margin-top: 20px; }
.ob-template-side .fields-2 .field-wide { grid-column: 1 / -1; }
@media (max-width: 760px) { .ob-template-side { grid-template-columns: 1fr; } }
.ob-tasks tr.ob-done .ob-task-title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }
.ob-overdue { color: var(--danger); font-weight: 600; }
.ob-cancel { margin-top: 4px; }
.ob-task-form .ob-due { display: flex; align-items: center; gap: 10px; }
.ob-task-form .ob-due input { max-width: 110px; }
.ob-task-form .ob-due span { font-size: .8rem; }
.ob-checks { display: flex; gap: 18px; flex-wrap: wrap; }
.ob-remove-task { display: flex; gap: 10px; justify-content: flex-end; margin-top: -42px; }
.ob-instructions { max-width: 760px; margin-bottom: 20px; }
.ob-instructions-text { white-space: pre-line; line-height: 1.6; }
.ob-task-page .emp-section, .ob-task-page .emp-list { margin-bottom: 20px; }
.ob-task-page .card { max-width: 900px; }
.ob-dash { margin-bottom: 22px; }
.ob-dash-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ob-dash-head .card-title { margin-bottom: 8px; }
.ob-dash .ob-welcome { margin: 4px 0 14px; padding: 12px 14px; border-radius: 10px; background: var(--bg); }
.ob-dash-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ob-dash-tasks li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ob-dash-tasks li i { color: var(--accent); width: 18px; text-align: center; }
.ob-dash-tasks li a { font-weight: 600; }
.ob-dash-tasks li.ob-done span { color: var(--muted); text-decoration: line-through; }

/* Settings has three levels of nav beside its tables (ADR-0045), so it gets more room. */
.container.settings-page { max-width: 1320px; }
@media (min-width: 761px) { .settings-page .admin-layout { grid-template-columns: 180px minmax(0, 1fr); gap: 20px; } }
.nav3-content > .card { padding: 20px; }

/* The employee record's tabs (ADR-0028) */
.emp-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; margin-bottom: 20px; }
.emp-tabs .utab { white-space: nowrap; text-decoration: none; padding: 9px 10px; font-size: .86rem; }
.emp-tabs { gap: 0; }
@media (min-width: 901px) { .emp-tabs { flex-wrap: wrap; overflow: visible; } }
.ob-exit { margin-bottom: 20px; }
.emp-section { max-width: 900px; }
/* QA Screen38b: every card on the record sits 20px from the next — a field tab's form, its lists (Job: Indirect Managers), History */
.emp-section, .emp-list, .emp-history { margin-bottom: 20px; }
.field-group { margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .82rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.card-title + .field-group, .emp-private + .field-group, .emp-same + .field-group { border-top: none; padding-top: 0; margin-top: 4px; }
.fields-2 .field-wide { grid-column: 1 / -1; }
.field .req { color: var(--danger); }
.field.has-err input, .field.has-err select { border-color: var(--danger); }
.emp-private { margin: -8px 0 14px; font-size: .82rem; }
.emp-same { margin: 0 0 4px; }
.emp-list { margin-bottom: 20px; }
.emp-count { font-size: .85rem; font-weight: 500; }
.emp-list-scroll { overflow-x: auto; margin-bottom: 12px; }
.emp-list-table { box-shadow: none; border: 1px solid var(--line); }
.emp-list-table td { font-size: .9rem; padding: 10px 14px; }
.emp-list-table th { white-space: nowrap; }
.emp-list-table td.is-date, .emp-list-table td.is-short, .emp-list-table td:first-child { white-space: nowrap; }
.emp-row-actions { white-space: nowrap; text-align: end; }
.emp-row-actions form { display: inline; margin-inline-start: 10px; }
.emp-list-table tr.is-editing td { background: var(--bg); }
.emp-edit-row td { background: var(--bg); padding: 16px; }
.emp-edit-row:hover td { background: var(--bg) !important; }
.emp-remove { margin-inline-start: auto; }
.emp-add > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.emp-add > summary::-webkit-details-marker { display: none; }
.emp-add[open] > summary { margin-bottom: 14px; }
.emp-add form { border: 1px solid var(--line); border-radius: 10px; padding: 16px; background: var(--bg); }
.emp-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 22px; }
.emp-kpis a.kpi { text-decoration: none; color: inherit; }
.emp-dash { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.emp-bars { display: flex; flex-direction: column; gap: 10px; }
.emp-bar { display: grid; grid-template-columns: minmax(90px, 160px) 1fr 34px; gap: 10px; align-items: center; font-size: .9rem; }
.emp-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp-bar-track { height: 8px; border-radius: 99px; background: var(--bg); overflow: hidden; }
.emp-bar-fill { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.emp-bar-n { text-align: end; font-weight: 600; color: var(--navy-900); }
.emp-recent { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 960px) {
  .emp-layout, .emp-dash { grid-template-columns: 1fr; }
  .emp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emp-table th:nth-child(3), .emp-table td:nth-child(3), .emp-table th:nth-child(4), .emp-table td:nth-child(4) { display: none; }
  /* a Delete Selected tick column first (ADR-0121) moves the same two columns one along */
  .emp-table:has(th.bulk-h) th:nth-child(3), .emp-table:has(th.bulk-h) td:nth-child(3) { display: table-cell; }
  .emp-table:has(th.bulk-h) th:nth-child(5), .emp-table:has(th.bulk-h) td:nth-child(5) { display: none; }
}
/* The Employees list at phone width: Sign-In goes too, so the row fits without a sideways scroll (2026-10-28). */
@media (max-width: 560px) { .emp-main th:nth-child(5), .emp-main td:nth-child(5) { display: none; } }

/* Settings page (/settings): the Account section (delete account) */
.anav-danger, .anav-danger i { color: #c22f42; }
.anav-danger.on { background: rgba(204,47,66,.08); border-color: rgba(204,47,66,.25); }
.anav-danger.on i { color: #c22f42; }
.danger-zone { border: 1px solid rgba(204,47,66,.35); background: rgba(204,47,66,.05);
  border-radius: 12px; padding: 16px 18px; font-size: .92rem; color: var(--ink); }

/* ============================================================
   Language switcher (ADR-0012) — public nav, globe pill + dropdown menu
   ============================================================ */
.lang-switch { position: relative; }
.lang-switch summary { list-style: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px;
  color: #e8eef7; font-size: .85rem; font-weight: 600; line-height: 1.3; white-space: nowrap;
  cursor: pointer; user-select: none; transition: background .15s, border-color .15s; }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:hover,
.lang-switch[open] summary { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); color: #fff; }
.lang-switch summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lang-switch summary .fa-globe { font-size: .95rem; }
.lang-switch .lang-caret { font-size: .62rem; opacity: .8; transition: transform .2s; }
.lang-switch[open] .lang-caret { transform: rotate(180deg); }

/* Same card look as the app's .user-menu. */
.lang-menu { position: absolute; z-index: 60; top: calc(100% + 8px); inset-inline-end: 0;
  min-width: 190px; padding: 6px; background: #fff; border: 1px solid var(--line);
  border-radius: 11px; box-shadow: 0 10px 34px rgba(30, 30, 30, .22);
  animation: lang-menu-in .14s ease-out; }
@keyframes lang-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Scoped under .nav .nav-links (and the dark home hero) so it beats the nav's
   white link colour rules. */
.nav .nav-links .lang-menu a,
.home-hero-dark .nav .nav-links .lang-menu a { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 9px 12px; border-radius: 7px; color: var(--ink); font-size: .9rem; font-weight: 500; }
.nav .nav-links .lang-menu a:hover,
.home-hero-dark .nav .nav-links .lang-menu a:hover { background: var(--bg); color: var(--navy-900); text-decoration: none; }
.nav .nav-links .lang-menu a.active,
.home-hero-dark .nav .nav-links .lang-menu a.active { color: var(--navy-800); font-weight: 700; }
.lang-menu a i { font-size: .8rem; color: var(--navy-700); }
.lang-names { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.lang-english { font-size: .74rem; font-weight: 400; color: var(--muted); }

/* ===== Right-to-left (ADR-0012) =====
   Most direction handling above uses logical properties (margin-inline-*,
   inset-inline-*, text-align:start/end ...), which render identically in LTR
   and mirror automatically under <html dir="rtl">. This section covers what
   logical properties cannot express: transforms, gradients angled along the
   x-axis, icon mirroring, LTR islands (emails, codes), and Arabic typography.
   Everything here is scoped to [dir="rtl"] / [lang="ar"], so it never
   affects English. Arabic is kept as the worked example for when a
   right-to-left language is added (see lang/README.md). */

/* Directional icons (chevrons, arrows) marked up with class "rtl-flip". */
[dir="rtl"] .rtl-flip { transform: scaleX(-1); }

/* LTR islands: emails, passwords, phone numbers, URLs and code stay
   left-to-right (so "@", "." and digits don't reorder) but hug the RTL
   inline end like the surrounding fields. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"],
[dir="rtl"] .user-menu-mail,
[dir="rtl"] .user-pill-sub,
[dir="rtl"] .team-mail { direction: ltr; text-align: end; }
[dir="rtl"] code { direction: ltr; unicode-bidi: isolate; }

/* Arabic typography — Noto Sans Arabic is loaded in <head> when Lang is 'ar'. */
html[lang="ar"] body,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea,
html[lang="ar"] button { font-family: "Noto Sans Arabic", "Segoe UI", system-ui, -apple-system, sans-serif; }

/* Arabic is a joined script: any letter-spacing breaks the joins, and it has
   no letter case. Neutralise the selectors that set either. */
html[lang="ar"] .nav-logo,
html[lang="ar"] .hero h1,
html[lang="ar"] .section h2,
html[lang="ar"] .card .meta,
html[lang="ar"] .plan-tag,
html[lang="ar"] .table th,
html[lang="ar"] .page-head h1,
html[lang="ar"] .hero-v2-eyebrow,
html[lang="ar"] .hero-v2-title,
html[lang="ar"] .eyebrow-v2,
html[lang="ar"] .title-v2,
html[lang="ar"] .strip-v2-label,
html[lang="ar"] .quote-big,
html[lang="ar"] .stat-v2-n,
html[lang="ar"] .cta-v2-title{ letter-spacing: normal; text-transform: none; }

/* ===== Legal pages: Terms of Service, Privacy Policy ===== */
.legal { max-width: 860px; margin: 0 auto 64px; }
.legal .legal-meta { color: var(--muted); font-size: .9rem; margin: -12px 0 20px; }
.legal .legal-note { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; font-size: .9rem; margin-bottom: 20px; }
.legal .legal-body { padding: 28px 32px; line-height: 1.65; color: var(--ink); }
.legal .legal-body h2 { font-size: 1.2rem; color: var(--navy-900); margin: 34px 0 10px; scroll-margin-top: 90px; }
.legal .legal-body h2:first-of-type { margin-top: 8px; }
.legal .legal-body h3 { font-size: 1rem; color: var(--navy-900); margin: 22px 0 8px; }
.legal .legal-body p { margin: 0 0 12px; }
.legal .legal-body ul, .legal .legal-body ol { margin: 0 0 14px; padding-inline-start: 22px; }
.legal .legal-body li { margin: 0 0 6px; }
.legal .legal-body strong { color: var(--navy-900); }

.legal .legal-toc { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px; margin: 0 0 8px; }
.legal .legal-toc-title { font-weight: 600; color: var(--navy-900); margin-bottom: 8px; }
.legal .legal-toc ol { columns: 2; column-gap: 28px; margin: 0; font-size: .92rem; }
.legal .legal-toc li { break-inside: avoid; }
.legal .legal-table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: .9rem; }
.legal .legal-table th, .legal .legal-table td { border: 1px solid var(--line); padding: 8px 10px; text-align: start; vertical-align: top; }
.legal .legal-table th { background: var(--bg); color: var(--navy-900); font-weight: 600; }
.legal .legal-table-wrap { overflow-x: auto; }
@media (max-width: 640px) {
  .legal .legal-body { padding: 20px 16px; }
  .legal .legal-toc ol { columns: 1; }
}

/* Signup's agreement line (Terms / Privacy). */
.auth-legal { font-size: .8rem; color: var(--muted); text-align: center; margin: 14px 0 0; line-height: 1.5; }
.auth-legal a { color: var(--accent); }

/* --- home: module cards (one per HR module) --- */
.home-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.home-module { display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px; color: var(--ink);
  transition: border-color .15s, transform .15s; }
.home-module:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); }
.home-module-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; background: rgba(12, 100, 174,.10);
  color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.home-module-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.home-module-title { font-weight: 700; color: var(--navy-900); font-size: 1.02rem; }
.home-module-text { font-size: .9rem; color: var(--muted); line-height: 1.5; }
.home-module-go { flex: none; color: var(--muted); margin-top: 4px; transition: color .15s; }
.home-module:hover .home-module-go { color: var(--accent); }
[data-theme="dark"] .home-module-icon { background: rgba(76, 155, 224,.14); }
@media (prefers-reduced-motion: reduce) { .home-module, .home-module:hover { transition: none; transform: none; } }

/* Employees → Groups and Teams (ADR-0053). */
.grp-switch a { display: flex; align-items: center; padding: 8px 16px; font-weight: 600; font-size: .9rem; color: var(--muted); text-decoration: none; }
.grp-switch a + a { border-inline-start: 1px solid var(--line); }
.grp-switch a.on { background: var(--accent-soft, #e8f1fa); color: var(--accent-dark, var(--accent)); }
.grp-intro { margin: -6px 0 16px; font-size: .9rem; max-width: 720px; }
.grp-table tr[data-href] { cursor: pointer; }
.grp-name { font-weight: 600; color: var(--navy-900); text-decoration: none; }
.grp-name:hover { color: var(--accent); }
.grp-desc { font-size: .82rem; margin-top: 2px; }
.grp-faces { display: inline-flex; vertical-align: middle; margin-inline-end: 8px; }
.grp-faces .emp-avatar { width: 28px; height: 28px; font-size: .68rem; border: 2px solid var(--card, #fff); }
.grp-faces .emp-avatar + .emp-avatar { margin-inline-start: -8px; }
.grp-faces .grp-more { background: var(--bg); color: var(--muted); }
.grp-count { font-size: .86rem; color: var(--muted); white-space: nowrap; }
/* Phones (QA 2026-10-29): a team list (name, lead, members, status, menu) was ~85px wider than the
   screen — the faces and the no-wrap count. Tighter cells, the count alone, and it may wrap. */
@media (max-width: 600px) {
  .grp-table th, .grp-table td { padding: 10px 8px; }
  .grp-table .grp-faces { display: none; }
  .grp-table .grp-count { white-space: normal; }
  .grp-table td { overflow-wrap: anywhere; }
}
.grp-form { max-width: 980px; }
.grp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 18px; }
.grp-grid .field-wide { grid-column: 1 / -1; }
.grp-members-h { margin-top: 6px; display: flex; align-items: baseline; gap: 10px; }
.grp-count-live { font-size: .85rem; font-weight: 500; }
.grp-pick { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.grp-pick-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); background: var(--bg); }
.grp-find { flex: 1 1 240px; margin: 0; }
.grp-only { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 500; white-space: nowrap; cursor: pointer; }
.grp-pick-list { max-height: 420px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px; padding: 8px; }
.grp-person { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; min-width: 0; }
.grp-person:hover { background: var(--hover, #f1f4f9); }
.grp-person:has(input:checked) { background: var(--accent-soft, #e8f1fa); border-color: rgba(12, 100, 174, .25); }
.grp-person[hidden] { display: none; }
.grp-person .emp-avatar { width: 30px; height: 30px; font-size: .72rem; }
.grp-person-text { display: flex; flex-direction: column; min-width: 0; font-size: .82rem; }
.grp-person-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-person-name { font-weight: 600; font-size: .9rem; color: var(--navy-900); }
.grp-empty, .grp-none { grid-column: 1 / -1; margin: 10px 4px; }
.grp-meta { font-size: .82rem; margin-inline-start: auto; }
.emp-group-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.emp-group-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: .84rem; font-weight: 600;
  background: var(--accent-soft, #e8f1fa); color: var(--accent-dark, var(--accent)); text-decoration: none; }
.emp-group-chip.group { background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
a.emp-group-chip:hover { filter: brightness(.96); }
.emp-group-lead { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; background: var(--accent); color: #fff; border-radius: 999px; padding: 1px 6px; }
.emp-group-links { margin: 12px 0 0; font-size: .84rem; }
[data-theme="dark"] .grp-switch a.on, [data-theme="dark"] .grp-person:has(input:checked), [data-theme="dark"] .emp-group-chip.team { background: rgba(76, 155, 224, .16); color: #9cc9f0; }
[data-theme="dark"] .grp-faces .emp-avatar { border-color: #1c2735; }
@media (max-width: 760px) {
  .grp-pick-list { grid-template-columns: 1fr; max-height: 360px; }
  .grp-meta { margin-inline-start: 0; flex-basis: 100%; }
}

/* Integrations (ADR-0055). */
.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.int-card { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.int-head { display: flex; align-items: center; gap: 14px; }
.int-logo { width: 56px; height: 56px; border-radius: 14px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; flex-shrink: 0; }
.int-logo img { width: 32px; height: 32px; }
.int-title { display: flex; flex-direction: column; }
.int-name { font-weight: 700; font-size: 1.05rem; color: var(--navy-900); }
.int-cat { font-size: .8rem; color: var(--muted); }
.int-blurb { margin: 0; font-size: .9rem; color: var(--ink); flex: 1; }
.int-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.int-more { margin-top: 18px; font-size: .88rem; }

/* Documents (ADR-0057): a record's folders and files in a modal — and the
   shared file-type / folder icons, also used by Files. */
.doc-ico { flex-shrink: 0; display: block; }
.doc-ico-folder .f-back { fill: #8aa4c2; }
.doc-ico-folder .f-front { fill: #0c3d6e; }
.doc-ico-folder.amber .f-back { fill: #ffc069; }
.doc-ico-folder.amber .f-front { fill: #f59e0b; }
[data-theme="dark"] .doc-ico-folder .f-back { fill: #5c7da3; }
[data-theme="dark"] .doc-ico-folder .f-front { fill: #4c9be0; }

.docs-modal { width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 18px;
  background: var(--card, #fff); color: var(--ink); box-shadow: 0 30px 80px rgba(15, 23, 42, .35); overflow: hidden; }
.docs-modal::backdrop { background: rgba(15, 23, 42, .55); }
/* Centered in the window whatever the page's margins reset says (owner, 2026-10-19). */
.docs-modal[open] { position: fixed; inset: 0; margin: auto; }
@media (min-width: 761px) { .docs-modal[open] { height: fit-content; } }
.docs-close { position: absolute; top: 12px; inset-inline-end: 14px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); font-size: 1.7rem; line-height: 1; cursor: pointer; }
.docs-close:hover { background: var(--bg); color: var(--ink); }
.docs-host { max-height: calc(100vh - 48px); overflow-y: auto; }
.docs-host.is-busy { opacity: .6; pointer-events: none; transition: opacity .15s; }
.docs-body { padding: 22px 26px 26px; }
.docs-loading { min-height: 320px; background: linear-gradient(90deg, transparent, rgba(12, 100, 174, .06), transparent) 0 0 / 200% 100%;
  animation: docsShimmer 1.2s infinite linear; }
@keyframes docsShimmer { to { background-position: -200% 0; } }

.docs-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-inline-end: 40px; }
.docs-title { flex: 1 1 220px; min-width: 0; }
.docs-title h2 { margin: 0; font-size: 1.6rem; font-weight: 700; color: var(--navy-900); }
.docs-sub { font-size: .88rem; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-sub strong { color: var(--ink); font-weight: 600; }
.docs-search { position: relative; flex: 0 1 260px; }
.docs-search input { width: 100%; padding-inline-end: 36px; }
.docs-search svg { position: absolute; inset-inline-end: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.docs-upload { margin: 0; }
.docs-upload label.btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; margin: 0; }

.docs-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin: 16px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.docs-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .9rem; min-width: 0; }
.docs-crumbs a { color: var(--accent); font-weight: 600; text-decoration: none; }
.docs-crumbs a:hover { text-decoration: underline; }
.docs-sep { color: var(--muted); }
.docs-newfolder { position: relative; }
.docs-newfolder > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.docs-newfolder > summary::-webkit-details-marker { display: none; }
.docs-newfolder[open] > .docs-inline { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 3; width: 300px;
  background: var(--card, #fff); border: 1px solid var(--line); border-radius: 12px; padding: 10px; box-shadow: 0 12px 30px rgba(15, 23, 42, .15); }
.docs-inline { display: flex; gap: 8px; align-items: center; margin: 0; }
.docs-inline input { flex: 1; min-width: 0; }

.docs-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.docs-main.has-pane { grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); }
.docs-list { border-radius: 12px; min-height: 160px; transition: background .12s, outline-color .12s; outline: 2px dashed transparent; outline-offset: 4px; }
.docs-list.is-over { background: rgba(12, 100, 174, .05); outline-color: var(--accent); }
.docs-row { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding: 4px 4px; border-radius: 8px; }
.docs-row:hover { background: var(--bg); }
.docs-row.is-on { background: #eef5fc; }
.docs-row-link { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; padding: 8px 6px; border: 0; background: none;
  font: inherit; color: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.docs-row-text { display: flex; flex-direction: column; min-width: 0; }
.docs-name { font-weight: 600; font-size: 1rem; color: var(--navy-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-row.is-folder .docs-name { font-size: 1.05rem; }
.docs-meta { font-size: .82rem; color: var(--muted); }
.docs-hidden { color: #9a6700; }
.docs-exp.soon { color: #b45309; }
.docs-exp.expired { color: #c0392b; font-weight: 600; }
.docs-size { font-size: .9rem; color: var(--ink); white-space: nowrap; }
.docs-menu { position: relative; }
.docs-menu > summary { list-style: none; cursor: pointer; padding: 6px; border-radius: 8px; color: var(--accent); display: grid; place-items: center; }
.docs-menu > summary::-webkit-details-marker { display: none; }
.docs-menu > summary:hover { background: rgba(12, 100, 174, .08); }
.docs-menu-pop { position: absolute; inset-inline-end: 0; top: calc(100% + 4px); z-index: 4; width: 260px; display: grid; gap: 8px; padding: 10px;
  background: var(--card, #fff); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(15, 23, 42, .16); }
.docs-menu-pop form { margin: 0; }
.docs-menu-item { display: block; padding: 7px 10px; border-radius: 8px; color: var(--ink); font-weight: 500; text-decoration: none; }
.docs-menu-item:hover { background: var(--bg); text-decoration: none; }
.docs-edit { display: grid; gap: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.docs-edit label { display: grid; gap: 3px; font-size: .78rem; font-weight: 600; color: var(--muted); }
.docs-edit .docs-check { display: flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--ink); font-weight: 500; }
.docs-edit .btn { justify-self: start; }
.docs-empty { display: grid; justify-items: center; gap: 8px; padding: 44px 16px; text-align: center; color: var(--muted); }
.docs-empty p { margin: 0; max-width: 360px; }

.docs-preview { border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px;
  background: var(--bg); align-self: start; position: sticky; top: 0; }
.docs-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.docs-preview-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--navy-900); }
.docs-x { border: 0; background: none; font-size: 1.4rem; line-height: 1; color: var(--muted); cursor: pointer; }
.docs-preview-frame { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 10px; min-height: 260px; display: grid; place-items: center; overflow: hidden; }
.docs-preview-frame img { max-width: 100%; max-height: 52vh; display: block; }
.docs-preview-frame iframe { width: 100%; height: 52vh; border: 0; }
.docs-nopreview { margin: 0; padding: 20px; text-align: center; color: var(--muted); font-size: .9rem; }
.docs-preview-meta { font-size: .8rem; word-break: break-all; }
.docs-preview-actions { display: flex; gap: 8px; }
[data-theme="dark"] .docs-row.is-on { background: rgba(76, 155, 224, .12); }
[data-theme="dark"] .docs-menu-pop, [data-theme="dark"] .docs-newfolder[open] > .docs-inline { background: #1c2735; }

@media (max-width: 760px) {
  .docs-modal { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
  .docs-host { max-height: 100vh; }
  .docs-body { padding: 18px 16px; }
  .docs-search { flex-basis: 100%; }
  .docs-main.has-pane { grid-template-columns: minmax(0, 1fr); }
  .docs-preview { position: static; }
  .docs-size { display: none; }
}

/* Quick icons under the left nav's search (ADR-0058). */
.side-quick { display: flex; gap: 6px; margin: -6px 0 14px; padding: 0 2px; }
.side-quick-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--muted);
  background: var(--bg); border: 1px solid var(--line); transition: color .12s, border-color .12s, background .12s; }
.side-quick-btn:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
/* The page you're on: a blue outline, not a filled tile (owner, 2026-10-19). */
.side-quick-btn.on { color: var(--accent); background: var(--card); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
[data-theme="dark"] .side-quick-btn.on { color: var(--accent-on-dark); border-color: var(--accent-on-dark); box-shadow: inset 0 0 0 1px var(--accent-on-dark); }
@media (min-width: 821px) {
  html.nav-collapsed .side-quick { flex-direction: column; align-items: center; margin: -4px 0 12px; }
}
@media (max-width: 820px) {
  .side-quick { margin: 0; padding: 0; }
  .side-quick-btn { width: 36px; height: 36px; background: transparent; border-color: transparent; }
}

/* Employee Directory (ADR-0058, Screen5a / 5b). */
.dir-letters { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 14px; padding: 8px; background: var(--card, #fff);
  border: 1px solid var(--line); border-radius: 12px; }
.dir-letters a, .dir-letters span { min-width: 30px; padding: 6px 8px; text-align: center; border-radius: 8px; font-weight: 600; font-size: .88rem; }
.dir-letters a { color: var(--navy-900); text-decoration: none; }
.dir-letters a:hover { background: var(--bg); }
.dir-letters a.on { background: var(--accent); color: #fff; }
.dir-letters .is-empty { color: var(--line); }
.dir-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.dir-search { position: relative; flex: 1 1 280px; max-width: 460px; }
.dir-search svg { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.dir-search input { width: 100%; padding-inline-start: 38px; }
.dir-filters select { flex: 0 1 220px; }
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.dir-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 14px; background: var(--card, #fff);
  border: 1px solid var(--line); color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s, border-color .15s; min-width: 0; }
.dir-card:hover { box-shadow: 0 10px 26px rgba(15, 23, 42, .1); transform: translateY(-2px); border-color: var(--accent); text-decoration: none; }
.dir-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, .15); }
.dir-initials { display: grid; place-items: center; font-weight: 700; font-size: 1.3rem; color: #fff;
  background: linear-gradient(135deg, hsl(var(--h, 210) 62% 48%), hsl(calc(var(--h, 210) + 40) 62% 38%)); }
.dir-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dir-name { font-weight: 700; font-size: 1.04rem; color: var(--navy-900); }
.dir-pill { align-self: flex-start; background: var(--accent); color: #fff; font-size: .74rem; font-weight: 600; padding: 2px 8px; border-radius: 6px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-line { display: flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--ink); min-width: 0; }
.dir-line svg { flex-shrink: 0; color: var(--muted); }
.dir-email { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.dir-email svg { vertical-align: -2px; margin-inline-end: 4px; }

.dir-back { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.dir-banner { position: relative; display: flex; align-items: center; gap: 24px; padding: 28px 32px; border-radius: 18px; overflow: hidden; color: #fff;
  background: radial-gradient(120% 140% at 85% 0%, #f6b84b 0%, rgba(246, 184, 75, 0) 45%),
              radial-gradient(90% 120% at 10% 100%, #5fb3f5 0%, rgba(95, 179, 245, 0) 55%),
              linear-gradient(120deg, #0c64ae, #0a4f8a 55%, #373737); margin-bottom: 20px; }
.dir-banner::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.18) 0 2px, transparent 3px) 0 0 / 38px 38px; opacity: .6; pointer-events: none; }
.dir-banner-photo { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; border: 5px solid rgba(255, 255, 255, .9); flex-shrink: 0;
  font-size: 2.6rem; position: relative; z-index: 1; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.dir-banner-text { position: relative; z-index: 1; min-width: 0; }
.dir-banner-text h1 { margin: 0; color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; }
.dir-banner-text p { margin: 4px 0 0; color: rgba(255, 255, 255, .9); font-size: 1rem; }
.dir-banner-mail { display: inline-block; margin-top: 8px; color: #fff; opacity: .9; font-size: .9rem; }
.dir-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.dir-info dl { margin: 0; }
.dir-info-row { padding: 9px 0; border-bottom: 1px solid var(--line); }
.dir-info-row:last-child { border-bottom: 0; }
.dir-info-row dt { font-weight: 600; font-size: .86rem; color: var(--navy-900); }
.dir-info-row dd { margin: 2px 0 0; font-size: .88rem; color: var(--ink); }
.dir-sub { display: block; font-size: .78rem; color: var(--muted); }
.dir-main, .dir-side { display: grid; gap: 18px; }
.dir-main .card, .dir-side .card, .dir-info { margin: 0; }
.dir-item { display: flex; gap: 12px; padding: 8px 0; }
.dir-item-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); margin-top: 6px; flex-shrink: 0; }
.dir-item-dot.is-green { background: #15803d; border-radius: 50%; }
.dir-none { margin: 0; }
.dir-bday { text-align: center; background: linear-gradient(180deg, #fff, #fdf2f5); }
.dir-bday-art { width: 140px; height: auto; display: block; margin: 0 auto; }
.dir-bday-date { font-size: 2rem; font-weight: 300; color: var(--navy-900); margin-top: 4px; }
.dir-bday-label { display: inline-block; margin-top: 8px; padding: 4px 18px; background: #f28b9c; color: #fff; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; font-size: .8rem; border-radius: 4px; }
.dir-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
[data-theme="dark"] .dir-bday { background: linear-gradient(180deg, #1c2735, #2a2130); }
@media (max-width: 1180px) { .dir-layout { grid-template-columns: 280px minmax(0, 1fr); } .dir-side { grid-column: 1 / -1; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }
@media (max-width: 760px) {
  .dir-layout { grid-template-columns: minmax(0, 1fr); }
  .dir-banner { flex-direction: column; text-align: center; padding: 24px 16px; }
  .dir-banner-photo { width: 104px; height: 104px; }
  .dir-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The employee's profile photo, top right of their record (owner, 2026-10-19). */
.emp-photo-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.emp-photo { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #0c64ae, #5b8fd6);
  color: #fff; font-size: 2rem; font-weight: 700; letter-spacing: .02em; box-shadow: 0 6px 18px rgba(15, 23, 42, .15); border: 3px solid var(--card); }
.emp-photo img { width: 100%; height: 100%; object-fit: cover; }
.emp-photo-form { position: absolute; top: 66px; inset-inline-end: -4px; margin: 0; }
.emp-photo-btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--card); color: var(--accent);
  border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(15, 23, 42, .15); cursor: pointer; }
.emp-photo-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.emp-photo-rm { border: 0; background: none; color: var(--muted); font: inherit; font-size: .78rem; cursor: pointer; padding: 2px 6px; }
.emp-photo-rm:hover { color: var(--danger); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 600px) { .emp-photo { width: 72px; height: 72px; font-size: 1.5rem; } .emp-photo-form { top: 44px; } }

/* A bubble with the name under each quick icon (owner, 2026-10-19); beside it when the sidebar is collapsed. */
.side-quick-btn[data-tip] { position: relative; }
.side-quick-btn[data-tip]::after, .side-quick-btn[data-tip]::before { position: absolute; left: 50%; pointer-events: none; opacity: 0; z-index: 60;
  transition: opacity .15s ease .25s, transform .15s ease .25s; }
.side-quick-btn[data-tip]::after { content: attr(aria-label); top: calc(100% + 9px); transform: translate(-50%, -3px); padding: 6px 10px; border-radius: 8px;
  background: #0f2742; color: #fff; font-size: .78rem; font-weight: 600; line-height: 1.2; white-space: nowrap; box-shadow: 0 6px 18px rgba(15, 23, 42, .25); }
.side-quick-btn[data-tip]::before { content: ""; top: calc(100% + 3px); transform: translate(-50%, -3px); border: 6px solid transparent; border-top: 0;
  border-bottom-color: #0f2742; }
.side-quick-btn[data-tip]:hover::after, .side-quick-btn[data-tip]:hover::before,
.side-quick-btn[data-tip]:focus-visible::after, .side-quick-btn[data-tip]:focus-visible::before { opacity: 1; transform: translate(-50%, 0); }
[data-theme="dark"] .side-quick-btn[data-tip]::after { background: #e8eef6; color: #0f2742; }
[data-theme="dark"] .side-quick-btn[data-tip]::before { border-bottom-color: #e8eef6; }
@media (min-width: 821px) {
  html.nav-collapsed .side-quick-btn[data-tip]::after { top: 50%; left: calc(100% + 10px); transform: translate(-3px, -50%); }
  html.nav-collapsed .side-quick-btn[data-tip]::before { top: 50%; left: calc(100% + 4px); transform: translate(-3px, -50%); border: 6px solid transparent; border-left: 0;
    border-right-color: #0f2742; }
  html.nav-collapsed .side-quick-btn[data-tip]:hover::after, html.nav-collapsed .side-quick-btn[data-tip]:hover::before,
  html.nav-collapsed .side-quick-btn[data-tip]:focus-visible::after, html.nav-collapsed .side-quick-btn[data-tip]:focus-visible::before { transform: translate(0, -50%); }
}
@media (max-width: 820px) { .side-quick-btn[data-tip]::after, .side-quick-btn[data-tip]::before { display: none; } }

/* Unread counts on the quick icons (ADR-0070/0071). */
.qb-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e5484d; color: #fff;
  font-size: .66rem; font-weight: 700; line-height: 18px; text-align: center; border: 2px solid var(--card); box-sizing: content-box; }
.qb-badge.is-waiting { background: #f59e0b; }

/* ---- Settings → Approval System and the approval trail on requests (ADR-0077) ---- */
.apr-chain { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.apr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 4px; border-radius: 999px; background: rgba(12, 100, 174, .09);
  color: var(--accent-dark); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.apr-chip b, .apr-node b, .apr-step-no { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent);
  color: #fff; font-size: .68rem; font-weight: 700; }
.apr-chip-warn { background: var(--warn-bg); color: #8a5a00; }
.apr-arrow { color: var(--muted); font-size: .62rem; opacity: .7; }
.apr-why { display: block; margin-top: 2px; color: #8a5a00; }
[data-theme="dark"] .apr-why { color: #f2c46d; }
.apr-auto { display: inline-flex; align-items: center; gap: 5px; }
.apr-mod { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--muted); }
.apr-mod i { color: var(--accent); }
.apr-help { font-size: .78rem; margin-top: 2px; }
.apr-table td { vertical-align: middle; }
.apr-levels { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px; }
.apr-level { position: relative; cursor: pointer; }
.apr-level input { position: absolute; opacity: 0; pointer-events: none; }
.apr-level span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  font-weight: 600; font-size: .86rem; color: var(--ink); transition: background .15s, border-color .15s, color .15s; }
.apr-level:hover span { border-color: var(--accent); }
.apr-level input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.apr-level input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.apr-steps { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 0; }
.apr-step { display: grid; grid-template-columns: 30px 1fr; gap: 12px; position: relative; padding-bottom: 14px; }
.apr-step:not(:last-child)::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: var(--line); }
.apr-step-no { width: 30px; height: 30px; font-size: .86rem; }
.apr-step-body { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 2px; background: var(--card); min-width: 0; }
.apr-step-title { font-weight: 700; margin-bottom: 6px; }
.apr-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 14px; margin: 4px 0 10px; border: 1px dashed var(--line);
  border-radius: var(--radius); background: var(--bg); }
.apr-preview > span[data-apr-preview] { display: contents; }
.apr-node { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line);
  font-size: .82rem; font-weight: 600; }
.apr-node i { color: var(--accent); }
.apr-node-done i { color: #0d7a56; }
.apr-rules { margin: 0 0 6px; padding-left: 18px; font-size: .82rem; display: grid; gap: 3px; }
/* the trail on a request */
.apr-trail { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.apr-t { display: grid; grid-template-columns: 22px 1fr; gap: 10px; position: relative; padding-bottom: 10px; font-size: .86rem; }
.apr-t:not(:last-child)::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--line); }
.apr-t-dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 700;
  background: #eef1f6; color: var(--muted); }
.apr-t.approved .apr-t-dot { background: rgba(13, 122, 86, .14); color: #0d7a56; }
.apr-t.approved:not(:last-child)::before { background: rgba(13, 122, 86, .35); }
.apr-t.rejected .apr-t-dot { background: rgba(204, 47, 66, .12); color: #c22f42; }
.apr-t.current .apr-t-dot { background: rgba(176, 98, 10, .14); color: #b0620a; box-shadow: 0 0 0 3px rgba(176, 98, 10, .12); }
.apr-t.skipped .apr-t-dot, .apr-t.not-reached .apr-t-dot { opacity: .6; }
.apr-t-main { min-width: 0; }
.apr-t-head { font-weight: 600; }
.apr-t-sub { color: var(--muted); font-size: .8rem; }
.apr-t-note { margin-top: 3px; padding: 4px 8px; border-left: 3px solid var(--line); color: var(--ink); font-size: .82rem; white-space: pre-wrap; }
.apr-status { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; color: #b0620a; font-weight: 600; }
.apr-status i { font-size: .74rem; }
[data-theme="dark"] .apr-chip { background: rgba(76, 155, 224, .14); color: #a3cdf5; }
[data-theme="dark"] .apr-chip-warn { background: rgba(176, 98, 10, .2); color: #f0c37a; }
[data-theme="dark"] .apr-t-dot { background: rgba(255, 255, 255, .08); }
/* An approval level's Approver and Person side by side (QA 2026-10-28, Screen36): the
   columns may shrink below their content, and a long "Name — Job Title" ends in "…"
   inside its own box — a customizable select (appearance: base-select) doesn't clip
   its text, so it ran out past the border and under the chevron. Both help lines
   start on the same baseline whatever their length. */
.apr-step-body .fields-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.apr-step-body .field { min-width: 0; }
.apr-step-body .field select { display: block; width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* …clipped at the text area's edge, so it never runs under the chevron */
@supports (overflow-clip-margin: content-box) { .apr-step-body .field select { overflow: clip; overflow-clip-margin: content-box; } }
.apr-step-body .field .help { display: block; line-height: 1.4; }
@media (max-width: 600px) { .apr-level span { padding: 7px 11px; font-size: .8rem; } .apr-step-body .fields-2 { grid-template-columns: minmax(0, 1fr); } }
.apr-more { margin-top: 4px; font-size: .8rem; }
.apr-more > summary { cursor: pointer; color: var(--accent); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.apr-more > summary::-webkit-details-marker { display: none; }
.apr-more > summary::after { content: "▾"; font-size: .7rem; }
.apr-more[open] > summary::after { content: "▴"; }
.apr-more .apr-trail { min-width: 220px; }

/* A record's Approval Status card (templates/_approvals.html approval_card, ADR-0113): the overall state,
   "Level 1 of 2", every level, and the decision for whoever may decide now. Row menus and approval
   emails land on it at #approval — scrolled clear of the sticky app bar, and briefly highlighted. */
.apr-card { scroll-margin-top: 84px; }
.apr-card:target { box-shadow: 0 0 0 2px var(--accent); }
.apr-card-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -2px 0 6px; }
.apr-badge { display: inline-flex; align-items: center; gap: 5px; }
.apr-card-lvl { font-weight: 600; font-size: .86rem; }
.apr-card-with { margin: 0 0 4px; color: #b0620a; font-weight: 600; font-size: .86rem; display: flex; gap: 6px; align-items: baseline; }
.apr-card-note { margin: 4px 0 0; font-size: .82rem; }
.apr-card-ro i { margin-inline-end: 3px; }
.apr-decide { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.apr-decide .field textarea { width: 100%; }
.apr-behalf { margin: 0 0 10px; font-size: .85rem; }
.apr-decide-btns { display: flex; flex-wrap: wrap; gap: 8px; }
[data-theme="dark"] .apr-card-with { color: #f0c37a; }
/* A request's own page (templates/request_view.html): its facts as label / value */
.rq-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 18px; align-items: start; }
.rq-side { display: grid; gap: 18px; min-width: 0; }
.rq-facts { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 10px 18px; margin: 0; }
.rq-facts dt { color: var(--muted); font-size: .86rem; }
.rq-facts dd { margin: 0; overflow-wrap: anywhere; }
.rq-facts dd.rq-pre { white-space: pre-line; }
.rq-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.rq-acts form { display: contents; }
@media (max-width: 860px) { .rq-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .rq-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; } .rq-facts dd { margin-bottom: 10px; } }

/* "Message" — opens Messenger with this person (ADR-0070). */
.btn-msg { display: inline-flex; align-items: center; gap: 7px; }
.btn-msg svg { flex: none; }
.dir-banner-acts { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.emp-msg { margin-top: 10px; }

/* ---- Apps → find an app (2026-10-19): a centred hero with the search ---- */
.apps-hero { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: 40px 24px 28px; margin: 4px 0 8px;
  border-radius: 24px; border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(12, 100, 174, .10) 0%, rgba(124, 58, 237, .08) 45%, rgba(236, 72, 153, .08) 100%), var(--card); }
.apps-hero-blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(42px); opacity: .55; pointer-events: none; }
.apps-hero-blob.b1 { width: 260px; height: 260px; left: -70px; top: -110px; background: #6fb2ef; }
.apps-hero-blob.b2 { width: 220px; height: 220px; right: -60px; bottom: -120px; background: #f0a1d0; }
.apps-hero-blob.b3 { width: 160px; height: 160px; right: 22%; top: -90px; background: #c4b5fd; opacity: .4; }
.apps-hero-title { margin: 0 0 6px; font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.apps-hero-sub { margin: 0 auto 20px; color: var(--muted); font-size: .98rem; max-width: 520px; }
.apps-find { position: relative; display: flex; align-items: center; max-width: 680px; margin: 0 auto; }
.apps-find-icon { position: absolute; left: 22px; color: var(--accent); pointer-events: none; }
.apps-find-input { width: 100%; height: 62px; padding: 0 58px 0 58px; border: 1.5px solid transparent; border-radius: 999px; background: var(--card);
  color: var(--ink); font-size: 1.1rem; box-shadow: 0 10px 30px rgba(16, 32, 54, .12), 0 2px 6px rgba(16, 32, 54, .06);
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.apps-find-input::placeholder { color: var(--muted); opacity: .85; }
.apps-find-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 5px rgba(12, 100, 174, .14), 0 12px 32px rgba(16, 32, 54, .14); }
.apps-find-input::-webkit-search-cancel-button { cursor: pointer; margin-right: 4px; }
.apps-find-kbd { position: absolute; right: 22px; min-width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 7px; font: 600 .8rem/1 ui-monospace, monospace; color: var(--muted); background: var(--bg); pointer-events: none; }
.apps-find:focus-within .apps-find-kbd { display: none; }
.apps-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px auto 0; max-width: 680px; }
.apps-chip { border: 1px solid var(--line); background: rgba(255, 255, 255, .75); color: var(--ink); border-radius: 999px; padding: 6px 14px;
  font-size: .84rem; font-weight: 600; cursor: pointer; backdrop-filter: blur(6px); transition: border-color .15s, color .15s, transform .15s, background .15s; }
.apps-chip:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.apps-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.apps-find-meta { text-align: center; margin: 4px 0 18px; font-size: .82rem; min-height: 1.2em; }
.apps-find-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 16px; text-align: center; color: var(--muted); }
.apps-find-empty strong { color: var(--ink); font-size: 1.05rem; }
.app-tile-wrap[hidden] { display: none !important; }
[data-theme="dark"] .apps-hero { background: linear-gradient(135deg, rgba(76, 155, 224, .14) 0%, rgba(124, 58, 237, .12) 45%, rgba(236, 72, 153, .10) 100%), var(--card); }
[data-theme="dark"] .apps-hero-blob { opacity: .25; }
[data-theme="dark"] .apps-find-input { border-color: var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
[data-theme="dark"] .apps-find-input:focus { border-color: var(--accent-on-dark); box-shadow: 0 0 0 5px rgba(76, 155, 224, .2), 0 10px 30px rgba(0, 0, 0, .35); }
[data-theme="dark"] .apps-find-icon { color: var(--accent-on-dark); }
[data-theme="dark"] .apps-chip { background: rgba(255, 255, 255, .06); }
@media (max-width: 600px) {
  .apps-hero { padding: 26px 14px 20px; border-radius: 18px; }
  .apps-hero-title { font-size: 1.25rem; }
  .apps-hero-sub { font-size: .88rem; margin-bottom: 14px; }
  .apps-find-input { height: 54px; font-size: 1rem; padding: 0 18px 0 50px; }
  .apps-find-icon { left: 18px; } .apps-find-kbd { display: none; }
  .apps-chip { padding: 5px 11px; font-size: .8rem; }
}

/* Settings shown read-only — a section the person's role lets them see, not change (ADR-0082) */
.set-ro { border: 0; padding: 0; margin: 0; min-width: 0; }
.set-ro:disabled .btn-primary, .set-ro:disabled .org-logo-form, .set-ro:disabled .danger { display: none; }
.set-ro-note i { margin-inline-end: 4px; }

/* Records open read-only (templates/_viewmode.html, ADR-0107): the same form, locked in a disabled
   fieldset — fields read as values (no box, no chevron), buttons and .form-actions hide until Edit. */
.vm-lock { border: 0; padding: 0; margin: 0; min-width: 0; }
/* QA Screen102 sweep: where the lock wraps a two-column editor's columns (HR Letters template, Survey builder), it
   lets them through to the grid, so the side panel sits beside the editor and stays in view, not under it. */
.tr-editor > .vm-lock, .sv-builder > .vm-lock { display: contents; }
.vm-lock[disabled] :is(button, .form-actions, .vm-edit-only, input[type="submit"], input[type="file"]) { display: none !important; }
.vm-lock[disabled] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  background-color: transparent; background-image: none; border-color: transparent; color: var(--ink);
  cursor: default; opacity: 1; padding-inline-start: 0; box-shadow: none; resize: none; }
.vm-lock[disabled] :is(input[type="checkbox"], input[type="radio"]) { cursor: default; }
.vm-lock[disabled] ::placeholder { color: transparent; }
[data-theme="dark"] .vm-lock[disabled] :is(input, select, textarea) { background-color: transparent; border-color: transparent; }
.vm-mode { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- The Dashboard banner's My Team and My Info pop-ups (static/js/bannerpop.js, QA 2026-10-27) ---- */
.mt-card { width: min(520px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; padding: 22px 22px 18px; }
.mt-card .card-title { padding-inline-end: 36px; }
.mt-body { overflow-y: auto; margin: 4px -6px 0; padding: 0 6px; }
.mt-group { margin-top: 14px; }
.mt-group h4 { margin: 0 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.mt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mt-person { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 10px; color: inherit; text-decoration: none; }
a.mt-person:hover { background: rgba(12, 100, 174, .07); text-decoration: none; }
.mt-me .mt-person { background: rgba(12, 100, 174, .07); }
.mt-av { position: relative; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff; flex: none;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; overflow: hidden; }
.mt-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mt-who { min-width: 0; display: flex; flex-direction: column; }
.mt-who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-who small { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-more { margin: 6px 8px 0; font-size: .85rem; }
.mt-foot { margin-top: 16px; display: flex; justify-content: flex-end; }
[data-theme="dark"] a.mt-person:hover, [data-theme="dark"] .mt-me .mt-person { background: rgba(255, 255, 255, .06); }
.mt-foot { gap: 8px; flex-wrap: wrap; }
.mi-head { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 10px; border-radius: 12px; background: rgba(12, 100, 174, .07); }
.mi-head .mt-av { width: 56px; height: 56px; font-size: 1.1rem; }
.mi-head .mt-who b { font-size: 1.05rem; }
.mi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 14px 0 0; }
.mi-row { min-width: 0; }
.mi-row dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 2px; }
.mi-row dd { margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
.mi-bals { display: flex; flex-wrap: wrap; gap: 8px; }
.mi-bal { display: flex; flex-direction: column; min-width: 96px; padding: 8px 12px; border: 1px solid var(--line); border-left: 4px solid var(--c);
  border-radius: 10px; color: inherit; text-decoration: none; }
.mi-bal:hover { text-decoration: none; background: rgba(12, 100, 174, .05); }
.mi-bal strong { font-size: 1.15rem; }
.mi-bal span { font-size: .78rem; }
.mi-note { margin: 14px 0 0; font-size: .85rem; }
@media (max-width: 480px) { .mi-grid { grid-template-columns: minmax(0, 1fr); } }
[data-theme="dark"] .mi-head { background: rgba(255, 255, 255, .06); }

/* ===================== Dropdown popovers — one look (Screen17 #4) =====================
   The row / kebab menu, the right-click menu (VergeHRCtx), the user menu, global
   search results, the Documents menu and an open list box (::picker(select), with
   the select rules near the top) share one surface: the same card, radius, shadow,
   item padding, hover and danger red. */
:root {
  --pop-bg: #fff; --pop-border: var(--line); --pop-radius: 10px;
  --pop-shadow: 0 4px 12px rgba(16, 32, 54, .08), 0 14px 34px rgba(16, 32, 54, .16);
  --pop-hover: #f1f5fa; --pop-danger: #c22f42; --pop-danger-hover: #fdecea;
}
[data-theme="dark"] {
  --pop-bg: #1c2735; --pop-border: rgba(255, 255, 255, .1);
  --pop-shadow: 0 4px 12px rgba(0, 0, 0, .3), 0 14px 34px rgba(0, 0, 0, .45);
  --pop-hover: rgba(255, 255, 255, .08); --pop-danger: #f19d95; --pop-danger-hover: rgba(239, 123, 112, .16);
}
.kebab-menu, .ctx, .user-menu, .gs-results, .docs-menu-pop {
  background: var(--pop-bg); border: 1px solid var(--pop-border); border-radius: var(--pop-radius); box-shadow: var(--pop-shadow);
}
[data-theme="dark"] .kebab-menu, [data-theme="dark"] .ctx, [data-theme="dark"] .user-menu { background: var(--pop-bg); }
.kebab-menu, .ctx, .user-menu { padding: 6px; }
.kebab-menu a, .kebab-menu button, .ctx-item, .user-menu a, .user-menu .menu-btn {
  padding: 8px 10px; border-radius: 7px; font-size: .88rem; font-weight: 500; color: var(--ink); gap: 10px;
}
.kebab-menu a i, .kebab-menu button i, .kebab-menu a svg, .kebab-menu button svg,
.ctx-item i, .ctx-item svg, .user-menu a i, .user-menu .menu-btn i { width: 16px; text-align: center; color: var(--muted); flex: none; }
.kebab-menu a:hover, .kebab-menu button:hover:not([disabled]), .ctx-item:hover, .user-menu a:hover, .user-menu .menu-btn:hover,
[data-theme="dark"] .kebab-menu a:hover, [data-theme="dark"] .kebab-menu button:hover, [data-theme="dark"] .ctx-item:hover {
  background: var(--pop-hover); color: var(--ink); text-decoration: none;
}
.kebab-menu a:focus-visible, .kebab-menu button:focus-visible, .ctx-item:focus-visible, .user-menu a:focus-visible, .user-menu .menu-btn:focus-visible {
  outline: none; background: var(--pop-hover); box-shadow: inset 0 0 0 2px rgba(12, 100, 174, .35);
}
.kebab-menu a.danger, .kebab-menu button.danger, .ctx-item.danger, .user-menu a.danger,
.kebab-menu a.danger i, .kebab-menu button.danger i, .ctx-item.danger i, .user-menu a.danger i { color: var(--pop-danger); }
.kebab-menu a.danger:hover, .kebab-menu button.danger:hover, .ctx-item.danger:hover, .user-menu a.danger:hover,
[data-theme="dark"] .ctx-item.danger:hover { background: var(--pop-danger-hover); color: var(--pop-danger); }
.kebab-menu .ctx-sep, .ctx-sep, .user-menu-head { border-color: var(--pop-border); }
.kebab-menu .ctx-sep, .ctx-sep { background: var(--pop-border); margin: 5px 4px; }

/* A username field only the browser's password manager uses (Settings → Password, QA Screen76): visually hidden but
   present, so autofill pairs the saved username with it instead of the sidebar Search. */
.sr-hide-user { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; pointer-events: none; }

/* ===================== Side panels scroll to their end (QA Screen102, ADR-0118) =====================
   --agent-clear is the room the AI launcher (Vee, agent.css: 74px at 22px from the corner, 60px at 12px
   on phones) takes at the bottom-right. A panel that ends at the bottom of the window pads its scroll by it,
   so its last control can always be scrolled above the launcher. .pane-scroll is the shared look for a
   panel with its own scroll: a scrollbar that is always drawn (thin, not an overlay that hides until
   hovered) and a wheel that stays in the panel at its ends. */
:root { --agent-clear: 104px; }
@media (max-width: 600px) { :root { --agent-clear: 84px; } }
.pane-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 55%, transparent) transparent; }
/* The sticky side columns (the AI panels of the course, letter, cycle, goal, review, asset and budget
   editors; the survey builder's side; the policy editor's AI panel; a ticket's details; the recognition
   side; the report picker) never grow past the window on desktop: when their content is taller, they
   scroll inside themselves, so the last control is reachable while the page is anywhere, not only at its
   end. Below 1101px they stack under the content (each module's own rule) and this cap doesn't apply. */
@media (min-width: 1101px) {
  .tr-side, .sv-side, .pol-ai, .hd-side, .rc-side, .rep-picker {
    max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 55%, transparent) transparent; }
  .tr-side, .sv-side, .hd-side, .rc-side, .rep-picker { padding: 2px 6px 8px; margin: -2px -6px -8px; }
  /* the course / survey style editors keep a save bar stuck to the bottom: stop above it */
  .tr-side, .sv-side { max-height: calc(100vh - 112px); max-height: calc(100dvh - 112px); }
}

/* ===== Delete Selected on list tables (templates/_bulk.html, static/js/bulkselect.js, ADR-0121) =====
   A tick column first, and above the table a bar while rows are ticked. The tick's <label> fills its
   cell, so a click beside the box ticks it rather than opening the row. */
th.bulk-h, td.bulk-c { width: 40px; padding: 0 !important; text-align: center; vertical-align: middle; }
.bulk-hit { display: flex; align-items: center; justify-content: center; min-width: 40px; min-height: 44px; margin: 0; cursor: pointer; }
.bulk-hit input { width: 17px; height: 17px; margin: 0; cursor: pointer; }
.table tr.is-picked td { background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.table tr.is-picked:hover td { background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 10px; padding: 8px 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: var(--radius); position: sticky; top: 8px; z-index: 5; }
.bulk-bar[hidden] { display: none; }
.bulk-n { font-weight: 600; color: var(--navy-900); margin-inline-end: auto; }
[data-theme="dark"] .bulk-bar { background: color-mix(in srgb, var(--accent-on-dark) 12%, var(--card)); border-color: color-mix(in srgb, var(--accent-on-dark) 35%, var(--line)); }
[data-theme="dark"] .table tr.is-picked td { background: color-mix(in srgb, var(--accent-on-dark) 12%, var(--card)); }
@media (max-width: 820px) { .bulk-bar { position: static; } }   /* the app bar is stuck to the top there */
@media (max-width: 600px) {
  .bulk-bar { padding: 8px 10px; }
  .bulk-n { flex-basis: 100%; }
  th.bulk-h, td.bulk-c { width: 32px; }
  .bulk-hit { min-width: 32px; }
  .table th.bulk-h + th, .table td.bulk-c + td { padding-inline-start: 4px; }   /* the tick's cell is its gutter */
}

/* ---------------------------------------------------------------------------
   Date and time pickers (static/js/pickers.js, QA Screen113 / Screen114, ADR-0122).
   One look in every browser: a text box (.vp-text) over the page's own date / time
   input (.vp-native — invisible, still holds and submits the value), and our own
   calendar / list of times (.vp-pop). The popup takes its colours from the text box
   it opens under (--vp-*), so it matches the app, dark mode and a form's theme.
   --------------------------------------------------------------------------- */
.vp { position: relative; display: inline-block; vertical-align: middle; max-width: 100%; box-sizing: border-box; }
.vp.vp-date { width: 11.5em; }
.vp.vp-time { width: 8.75em; }
.vp.vp-dt { display: inline-flex; gap: 8px; width: 21em; }
.vp.vp-block, .vp.vp-probe { display: block; width: 100%; }
.vp.vp-dt.vp-block { display: flex; }
.vp[hidden] { display: none !important; }
.vp-face { position: relative; display: block; min-width: 0; }
.vp-dt > .vp-face:first-child { flex: 1.35 1 0; }
.vp-dt > .vp-face + .vp-face { flex: 1 1 0; }
.vp-face > .vp-text { display: block; width: 100%; max-width: none; margin: 0; box-sizing: border-box; padding-inline-end: 34px; text-overflow: ellipsis; }
.vp-btn { position: absolute; top: 1px; bottom: 1px; inset-inline-end: 2px; width: 30px; display: flex; align-items: center; justify-content: center;
  padding: 0; margin: 0; border: 0; border-radius: 6px; background: none; color: var(--muted, #5b6472); cursor: pointer; }
.vp-btn svg { width: 17px; height: 17px; }
.vp-btn:hover:not(:disabled), .vp-btn.vp-on { color: var(--accent, #0c64ae); }
.vp-btn:disabled { cursor: default; opacity: .45; }
.vp:not(.vp-probe) > .vp-native { position: absolute !important; inset-inline-start: 0; bottom: 0; width: 100% !important; height: 100% !important;
  min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; pointer-events: none !important; }
.vp.vp-probe > .vp-face { display: none !important; }
.vp-invalid .vp-text { border-color: #c0392b; }
/* A record in view mode (ADR-0107): the value reads as text — no button, no room kept for it. */
.vm-lock[disabled] .vp-face > .vp-text { padding-inline-end: 0; text-overflow: clip; }
.vp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.vp-pop { position: fixed; z-index: 100000; inset: auto; margin: 0; box-sizing: border-box; overflow: visible;
  background: var(--vp-bg, #fff); color: var(--vp-ink, #373737); border: 1px solid var(--vp-line, #e3e7ee); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .08); padding: 6px; font-size: .9rem; line-height: 1.3; text-align: start; }
.vp-pop.vp-dark { box-shadow: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .3); }
.vp-pop button { font: inherit; color: inherit; background: none; border: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vp-pop button:disabled { cursor: default; }
.vp-times { max-height: min(280px, 50vh); overflow-y: auto; overscroll-behavior: contain; }
.vp-opt { padding: 8px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vp-touch .vp-opt { padding: 11px 14px; }
.vp-opt:hover { background: color-mix(in srgb, var(--vp-accent) 9%, var(--vp-bg)); }
.vp-opt.vp-active { background: color-mix(in srgb, var(--vp-accent) 16%, var(--vp-bg)); }
.vp-opt[aria-selected="true"] { background: var(--vp-accent); color: #fff; font-weight: 600; }
.vp-empty { padding: 10px 12px; opacity: .7; }
.vp-cal { padding: 10px; }
.vp-head { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.vp-pop .vp-title { flex: 1; padding: 6px 8px; border-radius: 6px; font-weight: 600; font-size: .95rem; text-align: center; }
.vp-pop .vp-nav { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 6px; }
.vp-nav svg { width: 16px; height: 16px; }
.vp-pop .vp-nav:hover:not(:disabled), .vp-pop .vp-title:hover, .vp-pop .vp-link:hover:not(:disabled) { background: color-mix(in srgb, var(--vp-accent) 9%, var(--vp-bg)); }
.vp-pop .vp-nav:disabled { opacity: .3; }
.vp-grid { display: grid; gap: 2px; }
.vp-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.vp-wk span { text-align: center; font-size: .74rem; font-weight: 600; opacity: .6; padding: 4px 0; }
.vp-row > span[role="gridcell"] { display: block; }
.vp-pop .vp-day { display: block; width: 100%; height: 34px; padding: 0; border-radius: 8px; font-size: .88rem; font-variant-numeric: tabular-nums; }
.vp-touch .vp-day { height: 40px; }
.vp-pop .vp-day:hover:not(:disabled) { background: color-mix(in srgb, var(--vp-accent) 9%, var(--vp-bg)); }
.vp-pop .vp-day.vp-out { opacity: .45; }
.vp-pop .vp-day.vp-today { box-shadow: inset 0 0 0 1.5px var(--vp-accent); }
.vp-pop .vp-day.vp-active { background: color-mix(in srgb, var(--vp-accent) 18%, var(--vp-bg)); }
.vp-pop .vp-day.vp-sel { background: var(--vp-accent); color: #fff; font-weight: 600; opacity: 1; }
.vp-pop .vp-day:disabled { opacity: .25; }
.vp-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px 0; }
.vp-pop .vp-cell { height: 44px; border-radius: 8px; }
.vp-pop .vp-cell:hover:not(:disabled) { background: color-mix(in srgb, var(--vp-accent) 9%, var(--vp-bg)); }
.vp-pop .vp-cell.vp-active { background: var(--vp-accent); color: #fff; font-weight: 600; }
.vp-pop .vp-cell:disabled { opacity: .3; }
.vp-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--vp-line); }
.vp-pop .vp-link { color: var(--vp-accent); font-weight: 600; font-size: .85rem; padding: 6px 10px; border-radius: 6px; }
.vp-dark .vp-link { color: color-mix(in srgb, var(--vp-accent) 50%, #fff); }
.vp-pop .vp-link:disabled { opacity: .4; }