/* LLL HR — tokens and components follow DESIGN.md. Plain CSS, no build step. */
:root {
  --primary: #1f7a4d; --primary-hover: #17603c; --primary-soft: #e8f3ec;
  --canvas: #f6f7f6; --surface: #fff; --sidebar: #fbfcfb;
  --ink: #111827; --secondary: #4b5563; --muted: #6b7280;
  --border: #e5e7eb; --control: #d1d5db;
  --success: #166534; --success-bg: #dcfce7;
  --warning: #854d0e; --warning-bg: #fef3c7;
  --danger: #991b1b; --danger-bg: #fee2e2;
  --neutral: #374151; --neutral-bg: #f3f4f6;
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --shadow: 0 1px 2px rgb(17 24 39 / .04);
  --overlay: 0 10px 30px rgb(17 24 39 / .12);
  --sidebar-w: 248px; --topbar-h: 56px;
}
* { box-sizing: border-box; }
html { scrollbar-color: var(--control) transparent; }
[hidden] { display: none !important; }  /* a class with its own display (.pill) must not beat the hidden attribute */
body { margin: 0; font: 15px/1.6 "Noto Sans Thai", system-ui, sans-serif; color: var(--ink); background: var(--canvas); font-variant-numeric: tabular-nums; accent-color: var(--primary); caret-color: var(--primary); }
::selection { background: var(--primary-soft); color: var(--primary-hover); }
h1 { font-size: 1.5rem; font-weight: 600; line-height: 1.4; margin: 0; text-wrap: balance; }
h2 { font-size: 1rem; font-weight: 600; line-height: 1.5; margin: 0; }
p { margin: 0; }
a { color: var(--primary); text-underline-offset: 3px; }
small, .muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- shell ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--sidebar); border-right: 1px solid var(--border); padding: var(--s4) var(--s3); overflow-y: auto; }
.brand { display: flex; gap: var(--s3); align-items: center; padding: var(--s1) var(--s2) var(--s4); text-decoration: none; color: var(--ink); }
.brand b, .user-name b { display: block; font-weight: 600; line-height: 1.3; }
.brand small, .user-name small { display: block; line-height: 1.3; }
.logo { width: 32px; height: 32px; border-radius: var(--r-md); background: var(--primary); color: #fff; display: grid; place-items: center; }
.logo .i { width: 18px; height: 18px; }
.menu { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.menu-label { font-size: .8125rem; font-weight: 500; color: var(--muted); padding: var(--s4) var(--s2) var(--s1); }
.menu-label:first-child { padding-top: 0; }
.menu a { display: flex; gap: var(--s3); align-items: center; min-height: 38px; padding: 0 var(--s3); border-radius: var(--r-md); color: var(--secondary); text-decoration: none; font-weight: 500; }
.menu a:hover { background: var(--neutral-bg, #f3f4f6); color: var(--ink); }
.menu a[aria-current] { background: var(--primary-soft); color: var(--primary); }
.user { display: flex; gap: var(--s3); align-items: center; padding: var(--s3) var(--s2) 0; margin-top: var(--s4); border-top: 1px solid var(--border); }
.user form { margin-left: auto; }
.user-name { min-width: 0; font-size: .875rem; }
.user-name b { overflow: hidden; text-overflow: ellipsis; }
.avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.avatar.sm { width: 32px; height: 32px; font-size: .875rem; }
.avatar.lg { width: 72px; height: 72px; font-size: 1.75rem; }
.avatar.lg.photo { width: 112px; height: 112px; object-fit: cover; }
.main { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 10; height: var(--topbar-h); display: flex; gap: var(--s3); align-items: center; padding: 0 var(--s5); background: var(--surface); border-bottom: 1px solid var(--border); }
.crumbs { flex: 1; min-width: 0; font-size: .875rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { margin: 0 var(--s2); }
.crumbs b { color: var(--ink); font-weight: 500; }
.topbar-end { flex: none; display: flex; gap: var(--s2); align-items: center; justify-content: flex-end; }  /* the crumb takes the room */
.content { max-width: 1360px; margin: 0 auto; padding: var(--s5); }
.topbar .menu-btn, .scrim { display: none; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; background: none; border: 1px solid transparent; border-radius: var(--r-md); color: var(--secondary); cursor: pointer; }
.icon-btn:hover { background: var(--neutral-bg, #f3f4f6); color: var(--ink); }
#nav-toggle:focus-visible ~ .app .menu-btn { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (max-width: 1023px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 272px; transform: translateX(-100%); transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
  #nav-toggle:checked ~ .app .sidebar { transform: none; box-shadow: var(--overlay); }
  #nav-toggle:checked ~ .app .scrim { display: block; position: fixed; inset: 0; z-index: 20; background: rgb(17 24 39 / .35); }
  .topbar .menu-btn { display: inline-grid; margin-left: calc(var(--s2) * -1); }
  .topbar { padding: 0 var(--s4); }
  .content { padding: var(--s4); }
}
@media (max-width: 767px) {
  .clip { max-width: 13rem; }
  .topbar-end .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }  /* icon-only buttons; the text stays for screen readers */
}

/* ---------- page header ---------- */
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.filter-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; justify-content: flex-end; margin-bottom: var(--s4); }
.actions select, .filter-row select { width: auto; min-width: 160px; }

/* ---------- buttons, controls ---------- */
button, .btn { display: inline-flex; gap: var(--s2); align-items: center; justify-content: center; min-height: 38px; padding: 0 var(--s4); font: inherit; font-weight: 500; color: #fff; background: var(--primary); border: 1px solid var(--primary); border-radius: var(--r-md); cursor: pointer; text-decoration: none; }
button:hover, .btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn .i, button .i { width: 16px; height: 16px; }
.btn-secondary { color: var(--ink); background: var(--surface); border-color: var(--control); }
.btn-secondary:hover { background: var(--neutral-bg, #f3f4f6); border-color: var(--control); }
.btn-danger { color: var(--danger); background: var(--surface); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); }
.icon-btn:hover { border-color: transparent; }
input, select, textarea { width: 100%; min-height: 38px; font: inherit; padding: var(--s2) var(--s3); color: var(--ink); background: var(--surface); border: 1px solid var(--control); border-radius: var(--r-md); }
textarea { min-height: 84px; resize: vertical; }
input::placeholder { color: var(--muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 0; border-color: var(--primary); }
input[type=checkbox] { width: auto; min-height: 0; }
label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: var(--s1); }
.req { color: var(--danger); }
.help { display: block; margin-top: var(--s1); font-size: .8125rem; color: var(--muted); }
.errorlist { list-style: none; margin: var(--s1) 0 0; padding: 0; color: var(--danger); font-size: .875rem; }
.alert { padding: var(--s3) var(--s4); margin-bottom: var(--s4); color: var(--danger); background: var(--danger-bg); border-radius: var(--r-md); }
.alert .errorlist { margin: 0; }
.notice { padding: var(--s3) var(--s4); margin: 0 0 var(--s4); color: var(--warning); background: var(--warning-bg); border-radius: var(--r-md); }
.notice a { color: inherit; font-weight: 600; }
.btn-sm { min-height: 30px; padding: 0 var(--s3); font-size: .8125rem; }
.notify summary { display: inline-flex; gap: var(--s1); align-items: center; cursor: pointer; list-style: none; }
.notify summary::-webkit-details-marker { display: none; }
.notify summary .i { width: 14px; height: 14px; color: var(--muted); }
.notify-form { display: flex; gap: var(--s2); margin-top: var(--s2); }
.notify-form input { width: 9.5rem; min-height: 30px; padding: 0 var(--s2); }

/* ---------- card ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: var(--s5); margin-bottom: var(--s4); }
.card.flush { padding: 0; overflow: hidden; }
.card-head { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); justify-content: space-between; align-items: center; margin-bottom: var(--s4); }
.card-head p { color: var(--muted); font-size: .875rem; }
.flush .card-head { padding: var(--s4) var(--s5); margin: 0; border-bottom: 1px solid var(--border); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s4); align-items: start; margin-bottom: var(--s4); }
.grid-3 > .card { margin: 0; }

/* ---------- badges, pills ---------- */
.badge, .pill { display: inline-flex; gap: 6px; align-items: center; padding: 1px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.green, .pill.is-green { background: var(--success-bg); color: var(--success); }
.badge.yellow, .pill.is-yellow, .badge.expiry { background: var(--warning-bg); color: var(--warning); }
.badge.red, .pill.is-red { background: var(--danger-bg); color: var(--danger); }
.badge.TH, .pill.is-neutral { background: var(--neutral-bg, #f3f4f6); color: var(--neutral); }
.chip { display: inline-flex; padding: 0 var(--s2); border-radius: 999px; font-size: .8125rem; background: var(--neutral-bg, #f3f4f6); color: var(--secondary); }
.tag { display: inline-flex; padding: 1px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 500; white-space: nowrap; background: var(--tag-bg); color: var(--tag-fg); }
/* tag colours: c0..c7, assigned by the |tone filter in templatetags/chips.py */
.c0 { --tag-bg: #dbeafe; --tag-fg: #1e40af; }
.c1 { --tag-bg: #e0e7ff; --tag-fg: #3730a3; }
.c2 { --tag-bg: #ede9fe; --tag-fg: #5b21b6; }
.c3 { --tag-bg: #fce7f3; --tag-fg: #9d174d; }
.c4 { --tag-bg: #cffafe; --tag-fg: #155e75; }
.c5 { --tag-bg: #ccfbf1; --tag-fg: #115e59; }
.c6 { --tag-bg: #e2e8f0; --tag-fg: #334155; }
.c7 { --tag-bg: #ffedd5; --tag-fg: #9a3412; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: var(--s2); }
.dot.green { background: #16a34a; } .dot.yellow { background: #f59e0b; } .dot.red { background: #dc2626; } .dot.TH { background: #94a3b8; }

/* ---------- KPI ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s4); margin-bottom: var(--s4); }
.kpi { display: block; margin: 0; padding: var(--s4) var(--s5); color: var(--ink); text-decoration: none; transition: border-color .15s; }
.kpi:hover { border-color: var(--primary); }
.kpi-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s3); }
.kpi-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--primary-soft); color: var(--primary); }
.kpi-icon.is-red { background: var(--danger-bg); color: var(--danger); }
.kpi-icon.is-yellow { background: var(--warning-bg); color: var(--warning); }
.kpi-val { display: block; font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.kpi-label { display: block; margin-top: var(--s1); font-size: .875rem; color: var(--secondary); }

/* ---------- donuts, expiry list ---------- */
.donut-wrap { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; justify-content: center; }
.donut { position: relative; display: grid; place-items: center; width: 168px; aspect-ratio: 1; border-radius: 50%; }
.donut::before { content: ""; position: absolute; inset: 26px; border-radius: 50%; background: var(--surface); }
.donut div { position: relative; text-align: center; line-height: 1.3; }
.donut b { display: block; font-size: 1.75rem; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: .875rem; }
.legend li { display: flex; align-items: center; }
.legend b { margin-left: auto; padding-left: var(--s5); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s3) var(--s5); border-top: 1px solid var(--border); }
.rows li:first-child { border-top: 0; }
.rows .kpi-icon { background: var(--neutral-bg, #f3f4f6); color: var(--secondary); }
.rows a { font-weight: 500; text-decoration: none; color: var(--ink); }
.rows a:hover { color: var(--primary); }
.rows small { display: block; }
.empty { padding: var(--s6) var(--s5); text-align: center; color: var(--muted); }
.rows li.empty { display: block; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; background: var(--neutral-bg); border-radius: var(--r-md); }
.seg a { padding: var(--s1) var(--s3); border-radius: var(--r-sm); color: var(--secondary); text-decoration: none; font-size: .875rem; font-weight: 500; }
.seg a:hover { color: var(--ink); }
.seg a[aria-current] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.more { display: block; padding: var(--s3) var(--s5); border-top: 1px solid var(--border); font-size: .875rem; font-weight: 500; text-align: center; text-decoration: none; }

/* ---------- toolbar + table ---------- */
.toolbar { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s2); align-items: center; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border); }
.toolbar .search { position: relative; }
.toolbar .search .i { position: absolute; left: var(--s3); top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.toolbar .search input { padding-left: 36px; }
.toolbar .reset { font-size: .875rem; text-align: center; }
.tbl-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); justify-content: space-between; align-items: center; padding: var(--s3) var(--s5); font-size: .875rem; color: var(--muted); border-bottom: 1px solid var(--border); }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th { height: 44px; padding: 0 var(--s4); background: #f9fafb; font-size: .8125rem; font-weight: 500; color: var(--muted); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border); }
td { height: 52px; padding: var(--s2) var(--s4); border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: middle; }
th:first-child, td:first-child { padding-left: var(--s5); }
th:last-child, td:last-child { padding-right: var(--s5); }
tbody tr:hover td { background: #fafafa; }
tbody tr:last-child td { border-bottom: 0; }
td.av { width: 1%; padding-right: 0; }
tbody tr { position: relative; }
td.go { width: 1%; color: var(--muted); }
.row-link { color: inherit; }
.row-link::after { content: ""; position: absolute; inset: 0; }
.row-link:focus-visible { outline: none; }
.row-link:focus-visible::after { outline: 2px solid var(--primary); outline-offset: -2px; }
td > a:not(.row-link) { color: var(--ink); font-weight: 500; text-decoration: none; }
td > a:not(.row-link):hover { color: var(--primary); }
td small { display: block; line-height: 1.3; }
.clip { display: block; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  /* a very long name must not push the other columns off screen */
.pager { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); justify-content: space-between; align-items: center; padding: var(--s3) var(--s5); border-top: 1px solid var(--border); font-size: .875rem; color: var(--muted); }
.pager .btn { min-height: 34px; padding: 0 var(--s3); }
.pager .off { opacity: .45; pointer-events: none; }

/* ---------- profile ---------- */
.profile-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--s5); align-items: start; }
.profile-card { text-align: center; }
.profile-card .avatar { margin: 0 auto var(--s3); }
.profile-card h1 { font-size: 1.25rem; }
.profile-card .code { color: var(--muted); }
.profile-card .badge { margin-top: var(--s3); }
.profile-card .left { margin-top: var(--s1); color: var(--muted); font-size: .875rem; }
.facts { margin: var(--s4) 0; padding-top: var(--s4); border-top: 1px solid var(--border); display: grid; gap: var(--s3); text-align: left; font-size: .875rem; }
.facts div { display: flex; gap: var(--s3); align-items: center; }
.facts .i { width: 16px; height: 16px; color: var(--muted); }
.profile-card .actions { justify-content: center; }
.tabbar { display: flex; gap: var(--s5); margin-bottom: var(--s4); border-bottom: 1px solid var(--border); }
.tabbar a { padding: var(--s2) 0 var(--s3); margin-bottom: -1px; color: var(--muted); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; }
.tabbar a:hover { color: var(--ink); }
.tabbar a[aria-current] { color: var(--primary); border-bottom-color: var(--primary); }
.info { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s4) var(--s5); margin: 0; }
.info dt { font-size: .8125rem; color: var(--muted); }
.info dd { margin: 0; overflow-wrap: anywhere; }
.info .wide { grid-column: 1 / -1; }
.doc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s3); }
.doc-tile { padding: var(--s4); border: 1px solid var(--border); border-radius: var(--r-md); }
.doc-tile .type { font-size: .8125rem; color: var(--muted); }
.doc-tile .num { font-weight: 600; margin: 2px 0; overflow-wrap: anywhere; }
.doc-tile .pill { margin-top: var(--s2); }
.doc-tile.none .num { color: var(--muted); font-weight: 400; }
.panel { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--border); }
.panel > summary { cursor: pointer; font-weight: 600; color: var(--primary); list-style: none; display: flex; gap: var(--s2); align-items: center; }
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary .i { width: 16px; height: 16px; transition: rotate .15s; }
.panel[open] > summary .i { rotate: 90deg; }
.panel > :not(summary) { margin-top: var(--s4); }
.fields > .panel { grid-column: 1 / -1; }
.fields > .panel:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.danger-zone { border-color: #fecaca; }
.danger-zone h2 { color: var(--danger); }
.mini td, .mini th { height: 40px; }
.mini th:first-child, .mini td:first-child { padding-left: 0; }

/* ---------- forms ---------- */
/* one column: section title on top, fields stacked, short related fields share a .row. Control width follows the content (w-* classes set in forms.py). */
.form, .form-section, .error-summary { max-width: 760px; }
.form { margin-inline: auto; }  /* the headcount round card is not inside .form: it stays left, above the full-width table */
.form-head { margin-bottom: var(--s4); }
.form-head p { margin-top: var(--s1); font-size: .875rem; color: var(--muted); }
.fields { display: grid; gap: var(--s4); align-content: start; }
.fields .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--s4); align-items: start; }
.req-note { margin: 0 0 var(--s4); font-size: .875rem; color: var(--muted); }
input.w-date { max-width: 11rem; } input.w-num { max-width: 7rem; } input.w-code { max-width: 16rem; }
.field.has-error :is(input, select, textarea) { border-color: var(--danger); }
.error { display: flex; gap: var(--s2); align-items: flex-start; margin: var(--s1) 0 0; font-size: .875rem; color: var(--danger); }
.error .i { width: 16px; height: 16px; margin-top: 3px; }
fieldset.field { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.field legend { padding: 0; margin-bottom: var(--s1); font-size: .875rem; font-weight: 500; }
fieldset.field > div:not(.error) { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s1); }  /* radio options: one bordered box each, native radio kept visible */
fieldset.field > div:not(.error) > div { display: contents; }
fieldset.field label { display: flex; gap: var(--s2); align-items: center; min-height: 40px; margin: 0; padding: 0 var(--s4); font-weight: 400; background: var(--surface); border: 1px solid var(--control); border-radius: var(--r-md); cursor: pointer; }
fieldset.field label:hover { background: var(--neutral-bg); }
fieldset.field label:has(input:checked) { font-weight: 600; background: var(--primary-soft); border-color: var(--primary); color: var(--primary-hover); }
fieldset.field input[type=radio] { width: 16px; height: 16px; margin: 0; }
fieldset.field.has-error label { border-color: var(--danger); }
.error-summary { margin-bottom: var(--s4); padding: var(--s4); color: var(--danger); background: var(--danger-bg); border: 1px solid var(--danger); border-radius: var(--r-md); }
.error-summary h2 { display: flex; gap: var(--s2); align-items: center; font-size: 1rem; }
.error-summary ul { margin: var(--s2) 0 0; padding-left: var(--s5); }
.error-summary a { color: inherit; font-weight: 500; }
.error-summary:focus { outline: none; }  /* focus lands here only to announce it; the box itself is the marker */
/* document and notify groups: a bordered block, the whole summary row is the tap target */
.fields > .panel { margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-md); }
.fields > .panel > summary { min-height: 44px; padding: 0 var(--s4); }
.fields > .panel > :not(summary) { margin: 0; padding: 0 var(--s4) var(--s4); }
.fields > .panel[open] > summary { margin-bottom: var(--s3); }
.panel.bare { margin-top: 0; padding-top: 0; border: 0; }  /* the leave panel sits alone in its card */
.actionbar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: var(--s2); justify-content: flex-end; padding: var(--s3) 0; margin-top: var(--s4); background: var(--canvas); border-top: 1px solid var(--border); }
@media (max-width: 767px) { .profile-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 768px) and (max-width: 1023px) { .profile-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- login ---------- */
.login { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.login-brand { display: flex; flex-direction: column; justify-content: space-between; padding: var(--s6); background: var(--primary); color: #fff; }
.login-brand .logo { background: #fff; color: var(--primary); }
.login-brand .brand { color: #fff; padding: 0; }
.login-brand .brand small { color: #d1e7da; }
.login-brand p { max-width: 24ch; font-size: 1.75rem; font-weight: 600; line-height: 1.4; }
.login-form { display: grid; place-items: center; padding: var(--s5); }
.login-form form { width: min(360px, 100%); display: grid; gap: var(--s4); }
.login-form button { width: 100%; }
.google-login { width: min(360px, 100%); display: grid; gap: var(--s4); justify-items: start; }
@media (max-width: 767px) { .login { grid-template-columns: minmax(0, 1fr); } .login-brand { display: none; } }

/* daily headcount (PRD 5.4): compact so the whole report fits a 360px screenshot */
.neg { color: var(--danger); font-weight: 600; }
.card.hc { padding: var(--s3); }
.hc table { font-size: .8125rem; }
.hc th, .hc td { height: auto; padding: var(--s2) 4px; text-align: right; white-space: normal; }
.hc th:first-child, .hc td:first-child { text-align: left; padding-left: var(--s2); min-width: 6.5rem; }
.hc th:last-child, .hc td:last-child { padding-right: var(--s2); }
.hc tr.sub td { background: var(--neutral-bg, #f3f4f6); font-weight: 600; }
.hc tr.grand td { background: var(--border); }
.hc .info { margin-top: var(--s4); }
/* report entry: one table, like the Excel; first column sticks while the reason columns scroll on a phone.
   Reason and note boxes stay faint until the row needs them (hover, focus, or a reason still owed), so a full page is not a wall of boxes. */
table.entry { font-size: .875rem; }
.entry th, .entry td { height: auto; padding: var(--s1) var(--s2); text-align: center; white-space: normal; }
.entry th { vertical-align: bottom; font-size: .8125rem; line-height: 1.3; }
.entry th.dept, .entry td.dept { position: sticky; left: 0; z-index: 1; min-width: 9rem; text-align: left; padding-left: var(--s4); background: var(--surface); }
.entry thead th.dept { background: #f9fafb; }
.entry th.group { text-align: center; color: var(--secondary); border-bottom: 1px solid var(--border); }
.entry td[data-roster] { color: var(--secondary); background: var(--neutral-bg); }
.entry .neg { color: var(--danger); }
.entry tr.sec th { height: 30px; text-align: left; padding-left: var(--s4); background: var(--neutral-bg); color: var(--secondary); font-weight: 600; position: static; }
.entry th.present, .entry td.present { background: var(--primary-soft); }
.entry td.present input { width: 5rem; font-weight: 600; }
.entry td.gap, .entry th.gap { min-width: 7.5rem; white-space: nowrap; }
.entry td.gap .pill { margin-left: var(--s1); }
.entry input { width: 4.25rem; min-height: 32px; padding: 0 var(--s2); text-align: center; transition: border-color .15s, background-color .15s; -moz-appearance: textfield; appearance: textfield; }
.entry input::-webkit-outer-spin-button, .entry input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.entry td[data-col^="c"] input { width: 3.5rem; }
.entry input::placeholder { text-align: center; }
.entry input.warn { border-color: var(--warning); background: var(--warning-bg); }
.entry tr:not(:hover):not(.open) :is(td[data-col^="c"], td.note) input:placeholder-shown:not(:focus) { border-color: transparent; background: transparent; }
.entry tr:not(:hover):not(.open) td.note input:placeholder-shown:not(:focus)::placeholder { color: transparent; }
.entry td.note, .entry th.note { text-align: left; }
.entry td.note input { width: 9rem; text-align: left; }
.entry td.note input::placeholder { text-align: left; }
.entry tfoot td { height: 38px; font-weight: 600; background: var(--neutral-bg); }
.entry tfoot td.dept { background: var(--neutral-bg); }
.entry tfoot td.dept small { font-weight: 400; color: var(--warning); }
.entry-warn { margin: 0; padding: var(--s2) var(--s4); background: var(--warning-bg); color: var(--warning); font-size: .875rem; }
/* saw-table panel beside the round info (edit page); the detail page reuses .hc */
table.saw { font-size: .875rem; }
.saw th, .saw td { height: auto; padding: var(--s1) var(--s2); text-align: left; white-space: normal; }
.saw th:first-child, .saw td:first-child { padding-left: var(--s4); }
.saw td[data-mirror] { text-align: center; font-weight: 600; background: var(--primary-soft); min-width: 5.5rem; }
.saw th:nth-child(2) { text-align: center; }
.saw td input { width: 100%; min-width: 8rem; min-height: 32px; padding: 0 var(--s2); }
.hc td.txt, .hc th.txt { text-align: left; }

/* narrow screens: must come after the base rules above */
@media (max-width: 767px) {
  .toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--s4); }
  .toolbar .search { grid-column: 1 / -1; }
  .toolbar button { grid-column: 1 / -1; }
  .toolbar .reset { grid-column: 1 / -1; }
  .rows li, .pager, .tbl-meta { padding-left: var(--s4); padding-right: var(--s4); }
}

/* movements: month picker + table titles */
.toolbar-inline { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.toolbar-inline input[type="month"] { width: auto; min-width: 0; flex: 1 1 9rem; }
.table-head { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); align-items: baseline; justify-content: space-between; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border); }
.table-head .desc { color: var(--secondary); }

/* dashboard: dense, full width. Status hexes match DONUT in views.py */
.content.wide { max-width: none; }
.asof { font-size: .875rem; white-space: nowrap; }
@media (max-width: 767px) { .topbar-end select { min-width: 0; max-width: 8rem; } }

@media (max-width: 899px) { .asof { display: none; } }  /* no room beside the crumb and the select */
.kpis.compact { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); margin-bottom: var(--s3); }
.kpis.compact .kpi { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s2); align-items: baseline; padding: var(--s3) var(--s4); }
.kpis.compact .kpi-label { grid-column: 1 / -1; margin: 0 0 var(--s1); font-size: .8125rem; font-weight: 500; }
.kpis.compact .kpi-val { font-size: 1.5rem; }
.kpis.compact .kpi small { font-size: .8125rem; color: var(--secondary); }
@media (min-width: 700px) { .kpis.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1480px) { .kpis.compact { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.kpi.is-green .kpi-val { color: var(--success); }
.kpi.is-yellow .kpi-val, .kpi.is-expiry .kpi-val { color: var(--warning); }
.kpi.is-red .kpi-val { color: var(--danger); }
.kpi.is-green { background: var(--success-bg); color: var(--success); }
.kpi.is-yellow, .kpi.is-expiry { background: var(--warning-bg); color: var(--warning); }
.kpi.is-red { background: var(--danger-bg); color: var(--danger); }
.kpis.compact .kpi[class*="is-"] .kpi-label, .kpis.compact .kpi[class*="is-"] small { color: inherit; }  /* tinted from the tile's own hue, never grey on colour */
.kpi.zero { background: var(--surface); color: var(--ink); }  /* nothing to act on: a 0 stays white */
.kpis.compact .kpi.zero .kpi-label, .kpis.compact .kpi.zero small { color: var(--secondary); }
.kpi.zero .kpi-val { color: var(--muted); }
.dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); align-items: start; }
.dash-main > .card, .dash-side > .card { margin: 0; }
.dash-main, .dash-side { display: grid; gap: var(--s3); min-width: 0; }
.board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .board { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } }
.board-col { min-width: 0; border-left: 1px solid var(--border); }
.board-col:nth-child(odd) { border-left: 0; }
@media (min-width: 768px) { .board-col:nth-child(odd) { border-left: 1px solid var(--border); } .board-col:first-child { border-left: 0; } }
.board-col h3 { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); margin: 0; padding: var(--s2) var(--s3); font-size: .8125rem; font-weight: 600; }
.board-col h3 small { color: inherit; font-weight: 500; white-space: nowrap; }
.board-col.green h3 { background: var(--success-bg); color: var(--success); }
.board-col.yellow h3 { background: var(--warning-bg); color: var(--warning); }
.board-col.red h3 { background: var(--danger-bg); color: var(--danger); }
.board-col.TH h3 { background: var(--neutral-bg); color: var(--neutral); }
.board ul { list-style: none; margin: 0; padding: var(--s1) 0 var(--s2); font-size: .8125rem; line-height: 1.35; }
.board li { padding: 2px var(--s3); overflow-wrap: anywhere; }
.board a { color: var(--ink); text-decoration: none; }
.board a:hover { color: var(--primary); text-decoration: underline; }
.khmer { background: #ede9fe; color: #5b21b6; }
.board li.khmer a { color: #5b21b6; font-weight: 600; }
p .khmer { padding: 0 var(--s2); border-radius: 4px; font-weight: 600; }
@media (min-width: 1200px) { .dash { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); } }
.dash .card-head { margin-bottom: var(--s3); }
.dash .flush .card-head { padding: var(--s3) var(--s4); margin: 0; }
table.dense th { height: 34px; padding: 0 var(--s3); }
table.dense td { height: 34px; padding: var(--s1) var(--s3); }
table.dense th:first-child, table.dense td:first-child { padding-left: var(--s4); }
table.dense th:last-child, table.dense td:last-child { padding-right: var(--s4); }
table.dense .num { text-align: right; }
table.dense .zero { color: var(--muted); }
table.dense td.green a, table.dense td.yellow a, table.dense td.red a { font-weight: 600; text-decoration: none; }
table.dense td.green a { color: var(--success); } table.dense td.yellow a { color: var(--warning); } table.dense td.red a { color: var(--danger); }
table.dense .barcol { width: 24%; min-width: 100px; }
.dash table.dense .num { width: 1%; white-space: nowrap; }  /* counts hug their digits; the department name takes the slack */
table.dense tfoot td { background: var(--neutral-bg); border-top: 1px solid var(--control); border-bottom: 0; font-weight: 600; }
.sbar { display: flex; gap: 2px; height: 8px; border-radius: 999px; overflow: hidden; }
.sbar i.green { background: #16a34a; } .sbar i.yellow { background: #f59e0b; } .sbar i.red { background: #dc2626; }
.donut.sm { width: 132px; } .donut.sm::before { inset: 22px; } .donut.sm b { font-size: 1.5rem; }
.dash .donut-wrap { gap: var(--s4); }
.rows.dense li { grid-template-columns: minmax(0, 1fr) auto; padding: var(--s2) var(--s4); }

/* print: names only, one column, no chrome */
.print-names { display: none; }
@media print {
  .sidebar, .topbar, .scrim { display: none !important; }
  .app { display: block; }
  .content { padding: 0; }
  .print-90 .toolbar, .print-90 .tbl-meta, .print-90 .scroll { display: none; }
  .print-names { display: block; margin: 0; padding-left: 2rem; columns: 1; font-size: 1.125rem; line-height: 1.8; }
}

/* roll sheet (/employees/roll/): blank boxes to tick by hand on paper */
.roll-bar { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.roll-bar select, .roll-bar input[type=month] { width: auto; }
.roll-bar .check { display: inline-flex; gap: var(--s1); align-items: center; font-size: .875rem; }
.roll-count { margin-left: auto; font-size: .875rem; color: var(--muted); }
.roll-title { display: none; margin: 0 0 var(--s2); font-weight: 600; }
table.roll { border-collapse: collapse; width: 100%; table-layout: fixed; min-width: calc(2rem + 36px + 17rem + 32 * 26px); }  /* fixed: every เช้า/บ่าย box the same width */
table.roll th, table.roll td { border: 1px solid var(--control); padding: 2px 4px; height: 32px; font-size: .8125rem; text-align: center; }
table.roll .nm { width: 17rem; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.roll .no { width: 2rem; font-variant-numeric: tabular-nums; }
table.roll .pic { width: 36px; padding: 1px; } table.roll .pic img { display: block; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; margin: auto; }
table.roll td.box { min-width: 26px; }
table.roll tr.band th { background: var(--neutral-bg); text-align: left; font-weight: 600; }
@media print {
  @page { size: A4 landscape; margin: 8mm; }
  .sheet-page.roll-page { display: block; height: auto; }
  .roll-bar, .roll-page .alert { display: none; }
  .roll-title { display: block; }
  table.roll thead { display: table-header-group; }
  table.roll { table-layout: fixed; width: 100%; }  /* 16 days with photos must fit the page width: boxes share what the first columns leave */
  table.roll .no { width: 8mm; } table.roll .pic { width: 9mm; } table.roll .nm { width: 62mm; white-space: normal; }
  table.roll th.day, table.roll th.half { font-size: 7pt; padding: 0; }
  table.roll tr { break-inside: avoid; }
  table.roll tr.band { break-after: avoid; }
  table.roll th, table.roll td { border-color: #000; font-size: 9pt; height: 7mm; padding: 0 3px; }
  table.roll th { height: 5mm; }
  .roll-page .scroll { overflow: visible; max-height: none; }
  /* with photos: 12 people a page, bigger photos; each department starts a new page */
  table.roll.with-pic .pic { width: 15mm; } table.roll.with-pic .pic img { width: 13mm; height: 13mm; }
  table.roll.with-pic td { height: 15.5mm; }
  table.roll.with-pic tr.pg, table.roll.with-pic tbody:not(:last-of-type) { break-after: page; }
}

/* dashboard status board: filters sit in the card header and toggle on click (done in the browser, see reports.html) */
.board-head { flex-wrap: wrap; }
.board-tools { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-left: auto; }
.board-tools .search { position: relative; width: 11rem; }
.board-tools .search .i { position: absolute; left: var(--s3); top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.board-tools .search input { min-height: 32px; padding: 0 var(--s3) 0 34px; font-size: .875rem; }
.fgroup { display: inline-flex; gap: var(--s1); }
.fchip { min-height: 32px; padding: 0 var(--s3); font-size: .875rem; font-weight: 500; color: var(--secondary); background: var(--surface); border: 1px solid var(--control); border-radius: 999px; }
.fchip:hover { color: var(--ink); background: var(--neutral-bg); border-color: var(--control); }
.fchip[aria-pressed="true"], .fchip[aria-expanded="true"] { color: var(--primary-hover); background: var(--primary-soft); border-color: var(--primary); }
.fchip.clear { color: var(--primary); border-color: transparent; background: none; }
.fchip .sw { width: 10px; height: 10px; margin-right: var(--s1); border-radius: 3px; background: #ede9fe; border: 1px solid #5b21b6; }  /* the purple row colour, so กัมพูชา doubles as the legend */
.board-depts { display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); }
.board-depts[hidden], .board-tools [hidden] { display: none; }
.board li[hidden] { display: none; }

/* dashboard rule table: which documents decide the status (the status column is computed in views._status_rules) */
.rules th.grp { height: 28px; text-align: center; color: var(--secondary); border-bottom: 1px solid var(--border); }
.rules th, .rules td { padding-left: var(--s2); padding-right: var(--s2); }
.rules td.c { text-align: center; }
.rules .i { width: 16px; height: 16px; vertical-align: middle; }
.rules .i.yes { color: var(--success); } .rules .i.no { color: var(--danger); }
.rules-note { margin: 0; padding: var(--s3) var(--s4); font-size: .8125rem; color: var(--secondary); border-top: 1px solid var(--border); }

/* employee sheet: the old Google Sheet's columns. The wrapper scrolls both ways, so the header sticks to it (not the page)
   and the name column sticks while the document columns scroll. Compact: one line per person, small type.
   Sections look like the Sheet: a strong header colour (--h), a lighter sub-header (--h2), a faint tint down the body (--h3),
   and a coloured rule where each section starts. Passport and visa share the Sheet's teal; --h/--h2/--h3 are set per section. */
.sheet-wrap { max-height: calc(100vh - 16rem); min-height: 12rem; overflow: auto; }
table.sheet { font-size: .75rem; width: max-content; min-width: 100%; }
.sheet th, .sheet td { height: 26px; padding: 2px var(--s2); }
.sheet thead th { position: sticky; top: 0; z-index: 2; height: 26px; font-size: .75rem; text-align: center; color: var(--secondary); }
.sheet thead tr:nth-child(2) th { top: 26px; }
.g-passport, .g-visa { --h: #0f766e; --h2: #99f6e4; --h3: #f0fdfa; }
.g-pink { --h: #be185d; --h2: #fbcfe8; --h3: #fdf2f8; }
.g-wp { --h: #c2410c; --h2: #fed7aa; --h3: #fff7ed; }
.g-r90 { --h: #475569; --h2: #cbd5e1; --h3: #f1f5f9; }
.sheet thead th:not(.grp)[class*="g-"] { background: var(--h2); color: var(--ink); }
.sheet thead th.grp { background: var(--h); color: #fff; font-weight: 600; }
.sheet td[class*="g-"] { background: var(--h3); }
.sheet .gs { border-left: 2px solid var(--h); }
.sheet tbody tr:hover td { filter: brightness(.96); }
.sheet th.name, .sheet td.name { position: sticky; left: 0; min-width: 12rem; text-align: left; padding-left: var(--s3); background: var(--surface); box-shadow: 1px 0 0 var(--border); }
.sheet thead th.name { z-index: 3; background: #f3f4f6; }
.sheet tbody tr:hover td.name { background: #fafafa; }
.sheet td.name .clip { display: inline-block; vertical-align: bottom; max-width: 14rem; }
.sheet td small { display: inline; margin-left: var(--s1); font-size: .6875rem; }
.sheet .tag, .sheet .badge, .sheet .chip { padding: 0 8px; font-size: .6875rem; }
.sheet td.late { background: var(--danger-bg); color: var(--danger); font-weight: 600; }
.sheet td.soon { background: var(--warning-bg); color: var(--warning); font-weight: 600; }
.sheet td.name a { text-decoration: none; font-weight: 600; }
.sheet td.name a.st-green { color: var(--success); } .sheet td.name a.st-yellow { color: var(--warning); } .sheet td.name a.st-red { color: var(--danger); }  /* the name wears the document status; TH stays ink */
.sheet td.name a:hover { text-decoration: underline; }

/* a page that is one table fills the area under the topbar: no card, no page padding; only the table scrolls */
.content.bleed { max-width: none; padding: 0; }
.sheet-page { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h)); background: var(--surface); }
.sheet-page .sheet-wrap { flex: 1; min-height: 0; max-height: none; }
.sheet-page .toolbar { flex: none; }
.sheet-page .actionbar { flex: none; margin: 0; padding: var(--s3) var(--s5); }
.sheet-page > .error-summary, .sheet-page > .alert { flex: none; margin: var(--s3) var(--s5); }
/* edit-in-table: small boxes that fit the columns */
.sheet-edit td { height: auto; vertical-align: top; padding: var(--s1) var(--s2); }
.sheet-edit td input, .sheet-edit td select { min-height: 26px; padding: 0 var(--s2); font-size: .75rem; }
.sheet-edit td input.w-date { width: 6.25rem; max-width: none; }
.sheet-edit td input:not(.w-date) { width: 7.5rem; }
.sheet-edit td.name { min-width: 27rem; }
.sheet-edit .nm { display: flex; gap: var(--s1); align-items: center; }
.sheet-edit .nm input:nth-child(1) { width: 11rem; } .sheet-edit .nm input:nth-child(2) { width: 5.5rem; } .sheet-edit .nm input:nth-child(3) { width: 7rem; }
.sheet-edit td select { width: 6.5rem; }
.sheet-edit .cell-err { display: block; color: var(--danger); white-space: normal; max-width: 12rem; }
.sheet-edit input[aria-invalid], .sheet-edit td:has(.cell-err) input { border-color: var(--danger); }
.sheet-page .toolbar { padding: var(--s2) var(--s4); }
.sheet-page .toolbar :is(input, select, button) { min-height: 32px; }
.sheet-page .tbl-meta { padding: var(--s1) var(--s4); }
.sheet-page .pager { padding: var(--s2) var(--s4); }
/* sortable headings: the arrow is a CSS triangle, faint on a column that is not the sort */
.sheet th a.sort { display: inline-flex; gap: 5px; align-items: center; color: inherit; text-decoration: none; }
.sheet th a.sort:hover { text-decoration: underline; }
.sheet th a.sort.on { font-weight: 700; }
.arr { width: 0; height: 0; border-inline: 4px solid transparent; opacity: .3; border-top: 5px solid currentColor; }
a.sort:hover .arr { opacity: .6; }
.arr.asc, .arr.desc { opacity: 1; }
.arr.asc { border-top: 0; border-bottom: 5px solid currentColor; }
/* headcount list: morning over afternoon inside one cell, one record per day */
.hc-pair > div { min-height: 30px; display: flex; align-items: center; gap: 4px; }
.hc-pair > div + div { border-top: 1px dashed var(--border); margin-top: 4px; padding-top: 4px; }
.hc-pair form { margin: 0; }