/* ============================================================
   Application shell: left menu bar + topbar + content.
   Org name pinned top, menu scrolls, user block pinned BOTTOM.
   ============================================================ */

#app-root { display: flex; height: 100vh; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: 248px; flex: none;
  background: linear-gradient(178deg, var(--c-menu) 0%, var(--c-menu-deep) 100%);
  color: #cdd7e1;
  display: flex; flex-direction: column; transition: width .16s ease;
  overflow: hidden;
}
.sidebar.collapsed { width: 64px; }

/* Pinned org header (never scrolls) */
.sb-head { flex: none; padding: 16px 14px 12px; }
/* The practice's own name goes here, and a practice's own name is whatever it
   is — "บริษัท รีแอคชั่น เอ็นจิเนียริ่ง คอนซัลแตนท์ จำกัด" does not fit 248px on one
   line. Held on one nowrap line inside an overflow:hidden sidebar it was
   simply cut off mid-word, so the first thing the system showed about the
   organisation was its name wrong. It wraps instead. */
.sb-org {
  display: flex; align-items: flex-start; gap: 10px;
  color: #fff; font-weight: 800; font-size: 15.5px; letter-spacing: -.02em;
}
.sb-org .txt {
  min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.28;
  padding-top: 4px;
}
.sb-org .mark {
  width: 34px; height: 34px; border-radius: 11px; flex: none;
  background: linear-gradient(150deg, var(--c-main), var(--c-main-deep));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 90, 158, .45), inset 0 1px 0 rgba(255,255,255,.2);
}
.sb-org .mark svg { width: 19px; height: 19px; color: var(--c-accent); }
.sidebar.collapsed .sb-org { justify-content: center; }
.sidebar.collapsed .sb-org .txt { display: none; }

/* Scrollable menu list */
.sb-menu { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 10px 12px; }
.sb-menu::-webkit-scrollbar { width: 5px; }
.sb-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

.sb-group {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: #71849a; padding: 14px 9px 5px; white-space: nowrap; font-weight: 700;
}
.sidebar.collapsed .sb-group { padding: 11px 4px 3px; text-align: center; }
.sidebar.collapsed .sb-group .txt { display: none; }
.sidebar.collapsed .sb-group::after { content: "·"; }

.sb-item {
  position: relative;
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 8.5px 10px; border: none; border-radius: 10px; cursor: pointer;
  background: none; color: #c3cfda; font-size: 13px; text-align: left;
  white-space: nowrap; font-weight: 500; letter-spacing: -.006em;
  transition: background .12s, color .12s;
  margin-bottom: 1px;
}
.sb-item svg { width: 17px; height: 17px; flex: none; opacity: .85; }
.sb-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.sb-item.on {
  background: linear-gradient(180deg, var(--c-main), var(--c-main-deep));
  color: #fff; font-weight: 600;
  box-shadow: 0 3px 10px rgba(0, 90, 158, .4);
}
.sb-item.on svg { opacity: 1; }
.sb-item.on::before {
  content: ''; position: absolute; left: -10px; top: 7px; bottom: 7px;
  width: 3px; border-radius: 3px; background: var(--c-accent);
}
.sidebar.collapsed .sb-item { justify-content: center; padding: 9.5px 0; }
.sidebar.collapsed .sb-item .txt { display: none; }
.sidebar.collapsed .sb-item.on::before { left: -6px; }

/* Pinned user footer (never scrolls) — below the menus by design */
.sb-foot {
  flex: none; padding: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
}
.sb-user { display: flex; align-items: center; gap: 10px; }
.sb-avatar {
  width: 36px; height: 36px; border-radius: 12px; flex: none;
  background: linear-gradient(150deg, var(--c-navy), var(--c-main));
  color: #fff; font-weight: 700; font-size: 13.5px;
  display: flex; align-items: center; justify-content: center;
}
.sb-user .info { min-width: 0; flex: 1; }
.sb-user .name {
  color: #fff; font-weight: 600; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: none; border: none; cursor: pointer; padding: 0;
  display: block; width: 100%; text-align: left; font-family: inherit;
}
.sb-user .name:hover { color: var(--c-accent); }
.sb-user .role { font-size: 11px; color: #8a9ab0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user .logout {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  background: rgba(255,255,255,.06); border: none; border-radius: 9px;
  color: #9fb0c0; cursor: pointer; transition: background .12s, color .12s;
}
.sb-user .logout:hover { background: rgba(240,90,90,.2); color: #ff9c9c; }
.sb-user .logout svg { width: 15px; height: 15px; }
.sidebar.collapsed .sb-user { flex-direction: column; gap: 8px; }
.sidebar.collapsed .sb-user .info { display: none; }

/* ---------- Main column ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Topbar: collapse button + current menu + refresh (max 1 line) */
.topbar {
  flex: none; height: 50px; background: var(--topbar-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  position: relative; z-index: var(--z-topbar);
}
.topbar .title { font-size: 15px; font-weight: 700; letter-spacing: -.015em; color: var(--heading); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .btn-refresh {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: 9px;
  color: var(--c-main); font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; cursor: pointer; transition: background .12s, border-color .12s;
}
.topbar .btn-refresh:hover { background: rgba(0,112,192,.06); border-color: var(--c-main); }
.topbar .btn-refresh svg { width: 14px; height: 14px; }

.view { flex: 1; overflow: auto; padding: 20px 22px; }

/* ---------- Authority matrix ---------- */
/* Two decisions per module — a ladder and a switch — drawn as one table.
   The modal is wider than the standard wide modal because forty rows of
   ladder deserve room; on a phone the table scrolls sideways inside
   .auth-wrap and the page itself never does. */
.modal.auth-modal { width: min(1150px, 96vw); }
.auth-head { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-end;
  justify-content: space-between; margin-bottom: 10px; }
.auth-intro { max-width: 560px; font-size: 13px; line-height: 1.5; }
.auth-intro .muted { display: block; font-size: 12px; margin-top: 2px; }
.auth-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.auth-copy { min-width: 210px; }
.auth-search input { width: 170px; }

/* a field the context decided: shown, filled, and plainly not yours to change */
.locked-field { position: relative; }
.locked-field input { padding-right: 32px; cursor: not-allowed; }
.locked-field svg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--text-dim); pointer-events: none; }

/* the named-exceptions strip under the authority matrix */
.auth-vis { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.auth-vis-h { font-weight: 700; font-size: 13px; margin-bottom: 3px; }
.auth-vis > .muted { display: block; font-size: 12px; line-height: 1.5; margin-bottom: 9px; }
.auth-vis-row { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.auth-vis-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; flex: 1; min-width: 200px; }
.auth-vis-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px 4px 10px;
  border: 1px solid var(--border-strong); border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--surface-2); }
.auth-vis-x { border: 0; background: transparent; cursor: pointer; font-size: 15px; line-height: 1;
  color: var(--text-dim); padding: 1px 4px; border-radius: 50%; }
.auth-vis-x:hover { color: var(--c-red); background: var(--row-hover); }
.auth-vis-add { min-width: 210px; }
.auth-wrap { max-height: min(62vh, 640px); overflow: auto;
  border: 1px solid var(--border); border-radius: 10px; }

.auth-matrix { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.auth-matrix th { position: sticky; top: 0; z-index: 2; background: var(--surface-2);
  padding: 8px 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim); border-bottom: 1px solid var(--border); white-space: nowrap; }
.auth-matrix th.am-mod, .auth-matrix td.am-mod { text-align: left; padding-left: 12px;
  position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 168px; }
.auth-matrix th.am-mod { background: var(--surface-2); z-index: 3; }
.auth-matrix td { padding: 3px 4px; text-align: center; border-bottom: 1px solid var(--border); }

.am-group td { position: sticky; left: 0; text-align: left; background: var(--surface-3);
  color: var(--text-dim); font-weight: 700; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .05em; padding: 7px 12px; }
.am-row.am-off .am-name { color: var(--text-dim); }
.am-name { font-weight: 600; }
.am-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-orange); margin-left: 7px; vertical-align: 2px; }
/* display:inline-block above would beat the browser's [hidden] rule */
.am-dot[hidden] { display: none; }

/* the ladder: reached rungs fill in behind the active one */
.am-step { width: 34px; height: 28px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--text-dim); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.am-step svg { width: 14px; height: 14px; }
.am-step:hover { border-color: var(--c-main); color: var(--c-main); }
.am-step.reached { background: color-mix(in srgb, var(--c-main) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--c-main) 35%, var(--border)); color: var(--c-main); }
.am-step.on { background: var(--c-main); border-color: var(--c-main); color: #fff; }
.am-step.zero { background: var(--surface-3); color: var(--text-dim); border-style: dashed; }

.am-seg { white-space: nowrap; }
.am-seg button { font-size: 11.5px; padding: 4px 9px; }
.am-seg.disabled { opacity: .35; pointer-events: none; }

.am-shield { width: 34px; height: 28px; border: 1px dashed var(--border); border-radius: 7px;
  background: var(--surface); color: var(--text-dim); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.am-shield svg { width: 14px; height: 14px; }
.am-shield:hover { border-color: var(--c-red); color: var(--c-red); }
.am-shield.on { background: var(--c-red); border-color: var(--c-red); color: #fff; border-style: solid; }

@media (max-width: 700px) {
  .auth-intro { max-width: none; }
  .auth-search input { width: 120px; }
}

/* ---------- Month calendar ---------- */
/* The wall-calendar shape: weeks as rows, Sunday first. Bars span the days
   they cover and stack into at most four lanes; the "+n" chip carries the
   overflow. Columns are minmax(0,1fr) so long titles ellipsize instead of
   widening the page — the one sin a calendar must not commit on a phone. */
.cal { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.cal-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-title { margin: 0 4px; font-size: 16px; min-width: 150px; text-align: center; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 5px 12px; font-size: 11.5px; color: var(--text-dim); }
.cal-key { display: inline-flex; align-items: center; gap: 4px; }
.cal-key svg { width: 13px; height: 13px; }
.cal-key.cal-task svg { color: var(--c-main); }
.cal-key.cal-meeting svg { color: var(--c-purple); }
.cal-key.cal-milestone svg { color: var(--c-navy); }
.cal-key.cal-training svg { color: var(--c-green); }
.cal-key.cal-deliverable svg { color: var(--c-orange); }
.cal-key.cal-issue svg { color: var(--c-red); }
.cal-empty { padding: 8px 14px; font-size: 12.5px; }

.cal-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--border); background: var(--surface-2); }
.cal-head div { padding: 6px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-dim); }
.cal-head div:first-child, .cal-head div:last-child { color: var(--c-red); opacity: .75; }

.cal-week { position: relative; min-height: 96px; border-bottom: 1px solid var(--border); }
.cal-week:last-child { border-bottom: 0; }
.cal-bg { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-bg .cal-day { border-right: 1px solid var(--border); }
.cal-bg .cal-day:last-child { border-right: 0; }
.cal-bg .cal-day.wknd { background: var(--wknd); }
.cal-bg .cal-day.off { background: var(--surface-2); opacity: .55; }
.cal-bg .cal-day.today { box-shadow: inset 0 3px 0 var(--c-main); }

.cal-grid { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 22px; gap: 2px 0; padding-bottom: 4px; }
.cal-num { font-size: 11.5px; padding: 4px 7px 0; color: var(--text-dim); }
.cal-num.off { opacity: .45; }
.cal-num.today { color: var(--c-main); font-weight: 800; }

.cal-ev { display: flex; align-items: center; gap: 4px; margin: 0 3px; padding: 1px 6px;
  border: 0; border-radius: 5px; font-size: 11.5px; line-height: 18px; text-align: left;
  cursor: pointer; overflow: hidden; white-space: nowrap; min-width: 0; color: #fff; }
.cal-ev .cal-t { overflow: hidden; text-overflow: ellipsis; }
.cal-ev .cal-time { font-weight: 700; font-size: 10.5px; flex: none; }
.cal-ev.cont { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.cal-ev.tail { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.cal-ev.cal-task { background: var(--c-main); }
.cal-ev.cal-task.done { background: var(--c-green); opacity: .75; }
.cal-ev.cal-task.late { background: var(--c-red); }
.cal-ev.cal-meeting { background: var(--c-purple); }
.cal-ev.cal-training { background: var(--c-green); }
.cal-ev.cal-deliverable { background: var(--c-orange); }
.cal-ev.cal-deliverable.done { opacity: .6; }
.cal-ev.cal-issue { background: var(--c-red); }

/* a milestone is a moment: diamond + label, no bar */
.cal-ev.cal-milestone { background: transparent; color: var(--text); font-weight: 600; }
.cal-dia { flex: none; width: 9px; height: 9px; background: var(--c-navy); transform: rotate(45deg); border-radius: 2px; }
.cal-ev.cal-milestone.done .cal-dia { background: var(--c-green); }
.cal-ev.cal-milestone.late .cal-dia { background: var(--c-red); }
.cal-ev.cal-milestone.late { color: var(--c-red); }

.cal-more { border: 0; background: transparent; color: var(--link); font-size: 11px;
  cursor: pointer; text-align: left; padding: 0 7px; }

/* the crowded-day list */
.cal-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px;
  border: 0; background: transparent; border-radius: 8px; cursor: pointer; text-align: left; font-size: 13px; }
.cal-row:hover { background: var(--row-hover); }
.cal-row svg { width: 15px; height: 15px; flex: none; }
.cal-row.cal-task svg { color: var(--c-main); }
.cal-row.cal-meeting svg { color: var(--c-purple); }
.cal-row.cal-milestone svg { color: var(--c-navy); }
.cal-row.cal-training svg { color: var(--c-green); }
.cal-row.cal-deliverable svg { color: var(--c-orange); }
.cal-row.cal-issue svg { color: var(--c-red); }
.cal-row-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 700px) {
  .cal-week { min-height: 84px; }
  .cal-ev .cal-time { display: none; }
  .cal-title { font-size: 14px; min-width: 0; }
}


/* ---------- the send: a small ceremony ---------- */
.fly-plane { position: fixed; left: 40%; top: 60%; z-index: 4000; color: var(--c-main);
  pointer-events: none; animation: fly-off 1.1s cubic-bezier(.3,.1,.3,1) forwards; }
.fly-plane svg { width: 34px; height: 34px; }
@keyframes fly-off {
  0%   { transform: translate(0, 0) rotate(8deg) scale(.8); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(48vw, -42vh) rotate(24deg) scale(1.1); opacity: 0; }
}

/* ============================================================
   Motion. One vocabulary for the whole app: things ARRIVE (rise
   and fade, top-level blocks a beat apart), progress FILLS from
   zero so a bar is seen becoming its value, and live counters
   COUNT. Everything here is decoration on top of true content —
   and the prefers-reduced-motion block in responsive.css turns
   all of it off at once.
   ============================================================ */

/* every page arrives: the view's top-level blocks rise in, a beat apart */
.view > * { animation: rise-in .34s cubic-bezier(.2,.7,.25,1) backwards; }
.view > *:nth-child(2) { animation-delay: 60ms; }
.view > *:nth-child(3) { animation-delay: 120ms; }
.view > *:nth-child(4) { animation-delay: 180ms; }
.view > *:nth-child(n+5) { animation-delay: 230ms; }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } }

/* cards and task tiles take one extra beat each inside their grid */
.quest, .kpi, .hero-stat { animation: rise-in .4s cubic-bezier(.2,.7,.25,1) backwards; }
.quest:nth-child(2), .kpi:nth-child(2), .hero-stat:nth-child(2) { animation-delay: 70ms; }
.quest:nth-child(3), .kpi:nth-child(3), .hero-stat:nth-child(3) { animation-delay: 140ms; }
.quest:nth-child(4), .kpi:nth-child(4), .hero-stat:nth-child(4) { animation-delay: 210ms; }
.quest:nth-child(n+5), .kpi:nth-child(n+5) { animation-delay: 280ms; }

/* table rows deal themselves out — brief, so searching never feels laggy */
table.data tbody tr { animation: row-in .28s ease-out backwards; }
table.data tbody tr:nth-child(1) { animation-delay: 0ms; }
table.data tbody tr:nth-child(2) { animation-delay: 25ms; }
table.data tbody tr:nth-child(3) { animation-delay: 50ms; }
table.data tbody tr:nth-child(4) { animation-delay: 75ms; }
table.data tbody tr:nth-child(5) { animation-delay: 100ms; }
table.data tbody tr:nth-child(6) { animation-delay: 125ms; }
table.data tbody tr:nth-child(7) { animation-delay: 150ms; }
table.data tbody tr:nth-child(8) { animation-delay: 175ms; }
/* Everything below the eighth row arrives together, AFTER the dealt rows —
   without this the bottom of the table appeared before the top had finished,
   which read as the page loading upside-down. */
table.data tbody tr:nth-child(n+9) { animation-delay: 200ms; }
@keyframes row-in { from { opacity: 0; transform: translateY(5px); } }

/* progress is seen filling to its value, never just sitting there */
.progress-fill { animation: bar-fill .9s cubic-bezier(.25,.8,.3,1) backwards; }
@keyframes bar-fill { from { width: 0; } }

/* the dashboard ring sweeps round to its percentage */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
.hero .ring { animation: ring-sweep 1.1s cubic-bezier(.25,.8,.3,1) backwards; }
@keyframes ring-sweep { from { --p: 0; } }

/* the menu: the active item carries a sliding accent, hovers nudge */
.sb-item { transition: background .15s, transform .15s; position: relative; }
.sb-item:hover { transform: translateX(2px); }
.sb-item::before { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 2px; background: var(--c-accent);
  transform: scaleY(0); transition: transform .2s ease-out; }
.sb-item.on::before { transform: scaleY(1); }

/* buttons acknowledge the hand */
.btn, .icon-btn { transition: transform .12s, box-shadow .15s, background .15s; }
.btn:active, .icon-btn:active { transform: scale(.96); }
.btn:not(.secondary):not(.ghost):hover { box-shadow: 0 3px 10px rgba(0,0,0,.18); transform: translateY(-1px); }

/* something waiting for you quietly insists */
.bell .badge { animation: badge-breathe 3s ease-in-out infinite; }
@keyframes badge-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* calendar bars grow into place */
.cal-ev { animation: cal-in .35s cubic-bezier(.2,.7,.25,1) backwards; transform-origin: left center; }
@keyframes cal-in { from { opacity: 0; transform: scaleX(.6); } }

/* the front door: a slow drift behind the card, and the card arrives */
/* The whole stack restated (background-image overrides the theme's
   shorthand wholesale), with %-sized glows so the slow drift reads as the
   light moving across the room rather than the wallpaper sliding. */
.login-screen {
  background-image:
    radial-gradient(55% 45% at 85% 0%, rgba(0, 112, 192, .35), transparent 60%),
    radial-gradient(45% 45% at 0% 100%, rgba(246, 192, 42, .14), transparent 55%),
    radial-gradient(40% 40% at 55% 60%, rgba(46, 158, 143, .10), transparent 65%),
    linear-gradient(150deg, #1d2f42 0%, #16232f 60%, #101a24 100%);
  background-size: 160% 160%;
  animation: login-drift 20s ease-in-out infinite alternate;
}
@keyframes login-drift { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }
.login-card { animation: card-arrive .5s cubic-bezier(.2,.7,.25,1) backwards; }
@keyframes card-arrive { from { opacity: 0; transform: translateY(18px) scale(.985); } }

/* dropdown lists unfold instead of appearing */
.sdd-list { animation: drop-in .16s ease-out; transform-origin: top; }
@keyframes drop-in { from { opacity: 0; transform: scaleY(.92) translateY(-3px); } }

/* record pages: detail header avatar pops once */
.detail-avatar { animation: pop-in .45s cubic-bezier(.3,1.4,.4,1) backwards; }
@keyframes pop-in { from { opacity: 0; transform: scale(.7); } }

/* ---------- Sticky table column ---------- */
/* A column marked sticky stays put while the table scrolls sideways, so the
   reader never loses which row they are on. Solid backgrounds are the whole
   trick: a see-through sticky cell lets the scrolled text ghost underneath. */
table.data th.col-stick, table.data td.col-stick {
  position: sticky; left: 0; z-index: 2;
  background: var(--surface);
  box-shadow: 6px 0 8px -6px rgba(0, 0, 0, .25);
}
table.data thead th.col-stick { background: var(--surface-2); z-index: 3; }
table.data tr.clickable:hover td.col-stick { background: var(--row-hover); }
@media (max-width: 700px) {
  /* card layout on phones — nothing scrolls sideways, nothing to stick */
  table.data th.col-stick, table.data td.col-stick { position: static; box-shadow: none; }
}

/* ---------- File card on document records ---------- */
.file-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 16px; }
.fc-main { display: flex; gap: 16px; align-items: flex-start; }
.fc-preview { display: block; flex: none; width: 220px; border-radius: 9px; overflow: hidden;
  border: 1px solid var(--border); cursor: pointer; }
.fc-preview img { display: block; width: 100%; height: auto; }
.fc-icon { flex: none; width: 56px; height: 56px; border-radius: 12px; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.fc-icon svg { width: 26px; height: 26px; }
.fc-meta { min-width: 0; }
.fc-name { font-weight: 700; margin-bottom: 2px; overflow-wrap: anywhere; }
.fc-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.fc-revs { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 10px; }
.fc-revs-h { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-dim); margin-bottom: 6px; }
.fc-rev { display: flex; gap: 9px; align-items: center; width: 100%; padding: 7px 9px;
  border: 0; background: transparent; border-radius: 8px; cursor: pointer; text-align: left; font-size: 12.5px; }
.fc-rev:hover { background: var(--row-hover); }
.fc-rev svg { width: 14px; height: 14px; flex: none; color: var(--text-dim); }
.fc-rev-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-rev .muted { margin-left: auto; white-space: nowrap; font-size: 11.5px; }
@media (max-width: 700px) { .fc-main { flex-wrap: wrap; } .fc-preview { width: 100%; } }

/* the same file, seen from the edit window */
.form-file-strip { display: flex; gap: 12px; align-items: center; padding: 24px 16px;
  border: 1px dashed var(--border); border-radius: 10px; margin-bottom: 12px; font-size: 13px; }
.form-file-strip svg { width: 19px; height: 19px; color: var(--text-dim); flex: none; }
.ffs-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; margin-right: auto; }

/* ---------- Audit-log pager ---------- */
.al-size { display: flex; gap: 7px; align-items: center; font-size: 12.5px; color: var(--text-dim); }
.al-size select { width: auto; padding: 5px 8px; }
.al-pager { display: flex; gap: 6px; align-items: center; justify-content: center;
  padding: 14px 0 4px; flex-wrap: wrap; }
.al-pager .muted { margin-left: 8px; font-size: 12px; }

/* ---------- Type-to-confirm ---------- */
.type-confirm { margin-top: 12px; }
.type-confirm label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }

/* ---------- Column resize grips ---------- */
table.data th { position: relative; }
.th-grip { position: absolute; top: 0; right: -4px; width: 9px; height: 100%;
  cursor: col-resize; z-index: 4; touch-action: none; }
.th-grip:hover::after, .th-grip:active::after { content: ''; position: absolute;
  top: 15%; bottom: 15%; right: 4px; width: 2px; border-radius: 1px; background: var(--c-main); }
table.data.resized { table-layout: fixed; }
table.data.resized td { overflow: hidden; text-overflow: ellipsis; }
.tbl-pager { justify-content: center; }
.tbl-top { display: flex; justify-content: flex-start; margin-bottom: 8px; }
@media (max-width: 700px) { .th-grip { display: none; } }

/* ---------- Drop zone on document forms ---------- */
.form-file-strip.droppable { cursor: pointer; }
.form-file-strip.drag-over { border-color: var(--c-main); border-style: solid;
  background: color-mix(in srgb, var(--c-main) 7%, var(--surface)); }

/* quick filters in list toolbars */
.qf-select { width: auto; max-width: 210px; padding: 7px 9px; font-size: 12.5px; }
.qf-select.on { border-color: var(--c-main); color: var(--c-main); font-weight: 600; }

/* the audit log as a table: the diff unfolds under its row */
.al-diff-row td { background: var(--surface-2); padding: 12px 16px; }
.al-row-when { white-space: nowrap; }