/* Demandes Dipropneu
   Layout: brand header (logo) + KPI strip, then filter bar over a list/kanban workspace; detail opens in a right drawer.
   Colours come from the Dipropneu logo: navy #004279 (main), blues #0067A8 / #119BDA, orange #F6821F, red #D2242A.
   No web fonts are loaded (nothing leaves the server): Bahnschrift ships with Windows, with condensed fallbacks elsewhere. */

:root {
  --brand-navy: #004279; --brand-blue: #0067A8; --brand-sky: #119BDA; --brand-orange: #F6821F; --brand-red: #D2242A;
  --bg: #EDF1F6; --surface: #FFFFFF; --surface-2: #F3F6FA; --ink: #10233A; --muted: #55667B; --line: #D3DCE7;
  --accent: #004279; --accent-hover: #0067A8; --accent-soft: #E0EBF5; --accent-ink: #FFFFFF;
  --unread: #E2700F;   /* brand orange, darkened for contrast on white */
  --crit: #C21F25; --crit-soft: #FBE3E3; --high: #B85A00; --high-soft: #FDEDDC; --norm: #0067A8; --norm-soft: #E0EEF8;
  --low: #5F6E80; --low-soft: #EDF1F6; --ok: #1E7A49; --ok-soft: #DFF2E7; --wait: #6A55A8; --wait-soft: #ECE8F7;
  --shadow: 0 12px 40px rgba(0, 40, 80, .16);
  --title: #004279; --logo-plate: transparent; --logo-pad: 0; --logo-shift: 0;
  --f-display: "Bahnschrift SemiCondensed", "Bahnschrift", "Roboto Condensed", "Arial Narrow", sans-serif;
  --f-body: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
/* Light by default; dark only when chosen with the light/dark button (assets/js/theme.js). */
:root[data-theme="dark"] {
  --bg: #0A1522; --surface: #102030; --surface-2: #16293D; --ink: #E5EDF6; --muted: #98AABF; --line: #22384F;
  --accent: #3FAEE8; --accent-hover: #6CC3F0; --accent-soft: #10324E; --accent-ink: #04121F;
  --unread: #F6913A;
  --crit: #FF6B6E; --crit-soft: #3D1A1D; --high: #F8A14B; --high-soft: #3A2814; --norm: #6CB8EE; --norm-soft: #13304A;
  --low: #98AABF; --low-soft: #1A2B3D; --ok: #5CC98A; --ok-soft: #153325; --wait: #AE9BEA; --wait-soft: #262140;
  --shadow: 0 12px 40px rgba(0, 0, 0, .55);
  --title: #E5EDF6; --logo-plate: #FFFFFF; --logo-pad: 6px 10px; --logo-shift: -6px -10px;
  color-scheme: dark;
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font-family: var(--f-body); font-size: 15px; line-height: 1.45;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
[hidden] { display: none !important }
img { max-width: 100% }
a { color: var(--accent) }
h1, h2, h3 { font-family: var(--f-display); margin: 0; text-wrap: balance; letter-spacing: .01em }
button, input, select, textarea { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
@media (prefers-reduced-motion: no-preference) { .drawer { animation: slide .18s ease-out } }
@keyframes slide { from { transform: translateX(24px); opacity: .6 } }

/* ---------- utilities ---------- */
.mono { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .02em }
.muted { color: var(--muted) }
.small { font-size: 13px }
.nowrap { white-space: nowrap }
.label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600 }
.stack { display: flex; flex-direction: column; gap: 8px }
.stack-lg { display: flex; flex-direction: column; gap: 14px }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap }
.row-end { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap }
.h-modal { font-size: 24px }
.lede { margin: 0; color: var(--muted) }
/* Administration: invitation form above the accounts */
.invite-box { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); display: grid; gap: 10px }
.invite-box p { margin: 0 }
.invite-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px }
.invite-box details summary { cursor: pointer; color: var(--muted); font-size: 14px }
.invite-box .cats { margin-top: 8px }
.err { color: var(--crit); font-size: 13.5px }
.danger { color: var(--crit) }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100% }

/* ---------- layout ---------- */
/* The logo ring's blue gradient, as a thin band across the top of every screen. */
body::before { content: ""; display: block; height: 5px; background: linear-gradient(90deg, var(--brand-navy), var(--brand-blue) 55%, var(--brand-sky)) }

.wrap { max-width: 1280px; margin: 0 auto; padding-inline: 20px; padding-block: 20px 60px; display: flex; flex-direction: column; gap: 18px }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap }
.brand { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; min-width: 0 }
.brand-text { display: flex; flex-direction: column; gap: 2px; padding-left: 18px; border-left: 2px solid var(--line) }
.brand h1 { font-size: 28px; font-weight: 700; color: var(--title) }
.brand h1 span { color: var(--brand-orange) }
/* Transparent logo: on dark screens it sits on a white plate so the navy stays readable. */
/* Dark mode: a white plate behind the logo, spread around it (negative margin) so nothing moves when switching modes. */
.logo { display: block; height: 46px; width: auto; border-radius: 8px; background: var(--logo-plate); padding: var(--logo-pad); margin: var(--logo-shift); box-sizing: content-box }
.top-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
@media (max-width: 560px) { .brand-text { padding-left: 0; border-left: 0 } .logo { height: 38px } }

.btn { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 8px 14px; cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px }
a.btn { color: var(--ink); text-decoration: none }
.btn:hover { border-color: var(--accent) }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink) }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover) }
.btn.ghost { background: transparent; border-color: transparent }
.btn.ghost:hover { background: var(--surface-2) }
.btn.sm { padding: 5px 10px; min-height: 30px; font-size: 13.5px }
.btn:disabled { opacity: .5; cursor: not-allowed }

.banner { border-radius: 10px; padding: 12px 16px; background: var(--high-soft) }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden }
.kpi { background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.kpi b { font-family: var(--f-display); font-size: 30px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums }
.kpi[data-tone="crit"] b { color: var(--crit) }
.kpi[data-tone="high"] b { color: var(--high) }
.kpi[data-tone="ok"] b { color: var(--ok) }
@media (max-width: 820px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) } .kpi:last-child { grid-column: 1 / -1 } }

/* ---------- filters ---------- */
.bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.search { flex: 1 1 240px; min-width: 0; position: relative }
.search input { width: 100%; padding: 9px 12px 9px 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface) }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted) }
select.f { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); min-height: 38px; max-width: 100% }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: hidden }
.seg button { border: 0; background: transparent; padding: 8px 12px; cursor: pointer; font-weight: 500; color: var(--muted); min-height: 36px }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink) }

/* ---------- chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor }
.p-p1 { color: var(--crit); background: var(--crit-soft) }
.p-p2 { color: var(--high); background: var(--high-soft) }
.p-p3 { color: var(--norm); background: var(--norm-soft) }
.p-p4 { color: var(--low); background: var(--low-soft) }
.s-nouveau { color: var(--norm); background: var(--norm-soft) }
.s-encours { color: var(--high); background: var(--high-soft) }
.s-attente { color: var(--wait); background: var(--wait-soft) }
.s-resolu { color: var(--ok); background: var(--ok-soft) }
.s-ferme { color: var(--low); background: var(--low-soft) }
.age { font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums }
.age.old { color: var(--crit); font-weight: 600 }
.age.aging { color: var(--high); font-weight: 600 }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--unread); flex: none; margin-right: 4px }

/* ---------- people ---------- */
.who { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap }
.av { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; flex: none; letter-spacing: .02em }
.av-lg { width: 26px; height: 26px; font-size: 11px }
.av-0 { background: #2C68A8 } .av-1 { background: #A85600 } .av-2 { background: #23804A } .av-3 { background: #6E58A8 }
.av-4 { background: #B0343F } .av-5 { background: #2B7F86 } .av-6 { background: #7A5C2E } .av-7 { background: #4E5B6A }

/* ---------- list ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden }
.tscroll { overflow-x: auto }
table { width: 100%; border-collapse: collapse }
.tickets { min-width: 1040px }
th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2) }
td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle }
tr:last-child td { border-bottom: 0 }
.th-sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap }
.th-sort:hover, .th-sort.on { color: var(--ink) }
.th-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px }
.th-sort .arrow { font-size: 9px; min-width: 9px }
.tickets tbody tr { cursor: pointer }
.tickets tbody tr:hover td { background: var(--surface-2) }
.t-title { font-weight: 600; display: block }
.t-sub { font-size: 13px; color: var(--muted) }
tr.unread .t-title, .card.unread .ttl { font-weight: 700 }
tr.unread td:first-child { box-shadow: inset 3px 0 0 var(--unread) }

/* ---------- board ---------- */
.board { display: grid; grid-auto-columns: minmax(230px, 1fr); grid-auto-flow: column; gap: 12px; overflow-x: auto; padding-bottom: 6px }
.col { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; min-height: 200px }
.col.over { outline: 2px dashed var(--accent); outline-offset: -4px }
.col-h { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line) }
.col-h h3 { font-size: 16px; font-weight: 600 }
.col-b { display: flex; flex-direction: column; gap: 8px; padding: 10px }
.col-empty { font-size: 13px; padding: 4px; color: var(--muted) }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden }
.card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px }
.card[data-p="p1"]::before { background: var(--crit) }
.card[data-p="p2"]::before { background: var(--high) }
.card[data-p="p3"]::before { background: var(--norm) }
.card[data-p="p4"]::before { background: var(--low) }
.card:hover { border-color: var(--muted) }
.card .row { display: flex; justify-content: space-between; align-items: center; gap: 8px }
.card .ttl { font-weight: 600; line-height: 1.3 }

/* ---------- empty states ---------- */
.empty { padding: 48px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px }
.empty h2 { font-size: 24px }
.empty p { max-width: 52ch; margin: 0; color: var(--muted) }

/* ---------- overlays ---------- */
.scrim { position: fixed; inset: 0; background: rgba(10, 12, 16, .45); z-index: 20 }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--surface); z-index: 21; box-shadow: var(--shadow); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px) }
.d-h { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: flex-start; justify-content: space-between }
.d-h > div { min-width: 0 }
.d-h h2 { font-size: 22px; font-weight: 600; line-height: 1.2; margin-top: 4px; overflow-wrap: anywhere }
.d-b { overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 18px }
.meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px }
.meta > div { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.meta select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface) }
.desc { white-space: pre-wrap; background: var(--surface-2); border-radius: 9px; padding: 12px 14px; margin: 0; overflow-wrap: anywhere }
.feed { display: flex; flex-direction: column; gap: 10px }
.ev { display: flex; gap: 10px; font-size: 14px }
.ev .bub { background: var(--surface-2); border-radius: 9px; padding: 8px 12px; flex: 1; min-width: 0 }
.ev .bub p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere }
.ev.sys { color: var(--muted); font-size: 13px; padding-left: 36px }
textarea, .in { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); resize: vertical }
.composer { display: flex; flex-direction: column; gap: 8px; align-items: flex-end }
.composer .label { align-self: flex-start }

.picker { position: relative }
.pick-pop { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; width: min(300px, 80vw); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; gap: 4px }
.pick-list { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto }
.pick-foot { display: flex; gap: 6px; border-top: 1px solid var(--line); padding-top: 6px }
.opt { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 6px 8px; border-radius: 6px; cursor: pointer; text-align: left }
.opt:hover { background: var(--surface-2) }

.modal { position: fixed; z-index: 21; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(680px, calc(100% - 32px)); max-height: calc(100% - 40px); overflow-y: auto; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); padding: 22px }
.modal.wide { width: min(980px, calc(100% - 32px)) }
.modal form { display: flex; flex-direction: column; gap: 16px }
.field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0 }
.field legend { margin-bottom: 6px; padding: 0 }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px }
@media (max-width: 560px) { .grid2, .meta { grid-template-columns: 1fr } }
.prios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
@media (max-width: 560px) { .prios { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.prio-opt { position: relative; background: none }
.prio-opt input { position: absolute; opacity: 0 }
.prio-opt label { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; cursor: pointer }
.prio-opt input:checked + label { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor }
.prio-opt input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px }
.prio-opt label b { font-family: var(--f-display); font-size: 16px }
.prio-opt label small { color: var(--muted) }
.check { display: flex; align-items: center; gap: 8px; cursor: pointer }
.cats { display: flex; flex-wrap: wrap; gap: 6px }
.cats label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 3px 10px; cursor: pointer }

/* ---------- files ---------- */
.files { display: flex; flex-direction: column; gap: 8px }
.file { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; min-width: 0 }
.thumb { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; flex: none; background: var(--surface-2) }
.ico { width: 44px; height: 44px; border-radius: 6px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 11px; color: var(--muted); flex: none; text-transform: uppercase }
.file-meta { display: flex; flex-direction: column; min-width: 0 }
.file-meta a { font-weight: 600; overflow-wrap: anywhere; text-decoration: none }
.file-meta a:hover { text-decoration: underline }
.drop { border: 1.5px dashed var(--line); border-radius: 9px; padding: 12px; text-align: center; color: var(--muted); font-size: 13.5px; cursor: pointer }
.drop.over { border-color: var(--accent); background: var(--accent-soft) }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden }
.drop { position: relative }
.drop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px }

/* ---------- alerts ---------- */
.bell-wrap { position: relative }
.bell { position: relative }
.badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--crit); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; border: 2px solid var(--bg) }
.alerts { position: absolute; right: 0; top: calc(100% + 8px); z-index: 15; width: min(400px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; max-height: min(560px, 75vh) }
.al-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); gap: 8px }
.al-h h3 { font-size: 18px; font-weight: 600 }
.al-list { overflow-y: auto; display: flex; flex-direction: column }
.al-item { display: flex; gap: 10px; align-items: flex-start; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 10px 14px; cursor: pointer; width: 100% }
.al-item:hover { background: var(--surface-2) }
.al-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.al-tx b { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere }
.al-tx span { font-size: 13px; color: var(--muted) }
.al-empty { padding: 22px 14px; color: var(--muted); text-align: center }

/* ---------- admin ---------- */
.adm { min-width: 680px }
.adm td, .adm th { padding: 8px 10px; font-size: 14px }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 14px }
.tabs button { border: 0; background: transparent; padding: 8px 12px; cursor: pointer; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent) }

/* ---------- sign-in ---------- */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding-inline: 16px; padding-block: 32px }
.auth-card { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px 24px; display: flex; flex-direction: column; gap: 18px; box-shadow: var(--shadow) }
.auth-card .brand h1 { font-size: 28px }
.auth-form { display: flex; flex-direction: column; gap: 14px }
.auth-links { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px }
.auth-msg { border-radius: 9px; padding: 10px 12px; font-size: 14px; background: var(--crit-soft) }
.auth-msg[data-kind="ok"] { background: var(--ok-soft) }

.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--surface); padding: 10px 16px; border-radius: 9px; z-index: 30; font-weight: 500; max-width: calc(100% - 32px) }

/* ---------- two-factor ---------- */
.h-step { font-size: 22px }
.code-in { font-family: var(--f-mono); font-size: 22px; letter-spacing: .2em; text-align: center }
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; background: var(--surface-2); border-radius: 10px; padding: 14px 16px; font-size: 15px; user-select: all }

/* ---------- several assignees, visibility ---------- */
.people { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.person-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 999px; padding: 2px 4px 2px 3px; font-size: 13.5px }
.person-chip button { border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: 50%; width: 22px; height: 22px; line-height: 1 }
.person-chip button:hover { background: var(--crit-soft); color: var(--crit) }
.person-chip.is-lead { border-color: var(--high) }
.person-chip .lead-btn { font-size: 14px }
.person-chip .lead-btn:hover { background: var(--high-soft); color: var(--high) }
.lead-badge { font-size: 11.5px; font-weight: 700; color: var(--high); background: var(--high-soft); border-radius: 999px; padding: 1px 7px; white-space: nowrap }
.lead-star { color: var(--high); margin-right: 3px }
td.num { font-variant-numeric: tabular-nums; text-align: center }
.stack-av { display: inline-flex }
.stack-av .av + .av { margin-left: -7px; box-shadow: 0 0 0 2px var(--surface) }
.scope-note { margin: -6px 0 0; font-size: 13px; color: var(--muted) }
.team-cell { min-width: 200px }
.team-cell .cats { margin-bottom: 6px }

/* ---------- brand on the sign-in card ---------- */
.auth-card { border-top: 4px solid var(--brand-navy) }
.auth-card .brand { flex-direction: column; align-items: flex-start; gap: 14px }
.auth-card .brand-text { padding-left: 0; border-left: 0 }
.auth-card .logo { height: 52px }

/* ---------- light / dark button ---------- */
.icon-btn { padding: 8px 10px }
.i-sun { display: none }
:root[data-theme="dark"] .i-sun { display: block }
:root[data-theme="dark"] .i-moon { display: none }
.auth-card { position: relative }
.auth-card .theme-corner { position: absolute; top: 14px; right: 14px }

/* ---------- files waiting to be sent with a new ticket ---------- */
.pending { display: flex; flex-direction: column; gap: 6px }
.pending:empty { display: none }
.pending-head { font-size: 13px; font-weight: 600; color: var(--ok) }
.p-name { font-weight: 600; overflow-wrap: anywhere }
@media (prefers-reduced-motion: no-preference) { .file.is-new { animation: just-added 1.6s ease-out } }
@keyframes just-added { 0%, 35% { background: var(--accent-soft); border-color: var(--accent) } 100% { background: transparent } }