/* ---------------------------------------------------------------------------
   zerroDesk design system

   Plain CSS on purpose. No build step, no bundler, no node_modules - so the
   application stays deployable over FTP to a host with no shell, which is the
   actual deployment constraint (see DEPLOYMENT.md).

   The accent colour is injected as a custom property from settings by the
   layout, so an organisation can rebrand without touching this file.
   --------------------------------------------------------------------------- */

:root {
    /* Neutrals - warm greys, easier on the eye than pure neutral for a tool
       people stare at all day. */
    --bg:            #f6f7f8;
    --surface:       #ffffff;
    --surface-sunk:  #f0f2f4;
    --border:        #e3e6ea;
    --border-strong: #cfd4da;
    --text:          #191c1f;
    --text-muted:    #676f78;
    --text-faint:    #939ba4;

    /* Accent - overridden inline from settings. */
    --accent:        #2f6f4f;
    --accent-text:   #ffffff;
    --accent-sunk:   #eef4f0;

    /* Status. Deliberately not pure red/green: these appear as small pills in
       dense tables, where saturated colour is noisy. */
    --ok:      #1f7a45;
    --ok-bg:   #e8f4ec;
    --warn:    #9a5b09;
    --warn-bg: #fdf1de;
    --danger:  #b3261e;
    --danger-bg: #fceceb;
    --info:    #1f5f9e;
    --info-bg: #e9f1fa;

    --radius:    10px;
    --radius-sm: 7px;
    --shadow:    0 1px 2px rgba(16, 20, 24, .05), 0 2px 8px rgba(16, 20, 24, .04);

    --sidebar-w: 224px;
    --header-h:  56px;

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:            #121517;
        --surface:       #191d20;
        --surface-sunk:  #14181a;
        --border:        #292f34;
        --border-strong: #3a4147;
        --text:          #e7eaec;
        --text-muted:    #9aa3ab;
        --text-faint:    #6f7880;

        --accent-text:   #ffffff;
        --accent-sunk:   #1b2620;

        --ok:      #52c98a;  --ok-bg:     #14261d;
        --warn:    #e0a44a;  --warn-bg:   #2a2013;
        --danger:  #f08a83;  --danger-bg: #2b1817;
        --info:    #74aae3;  --info-bg:   #16212c;

        --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 10px rgba(0, 0, 0, .3);
    }
}

/* --------------------------------------------------------------- base ---- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.55 var(--font);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.35rem; letter-spacing: -.021em; margin: 0 0 4px; }
h2 { font-size: 1.0rem;  letter-spacing: -.012em; margin: 0 0 10px; }
h3 { font-size: .875rem; margin: 0 0 8px; }

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

/* Visible focus everywhere. Keyboard users are agents working a queue at
   speed - this is a productivity feature, not just compliance. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link - the agent queue has a long sidebar to tab past. */
.skip-link {
    position: absolute; left: 8px; top: -60px; z-index: 100;
    background: var(--surface); color: var(--text); padding: 10px 14px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    transition: top .15s;
}
.skip-link:focus { top: 8px; }

/* -------------------------------------------------------------- layout --- */

.app { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    flex: none;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar__brand {
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 680;
    letter-spacing: -.02em;
    color: var(--text);
    flex: none;
}
.sidebar__brand:hover { text-decoration: none; }
.sidebar__brand img { max-height: 24px; max-width: 130px; }
.sidebar__brand .mark {
    width: 24px; height: 24px; border-radius: 6px; flex: none;
    background: var(--accent); color: var(--accent-text);
    display: grid; place-items: center; font-size: 13px; font-weight: 700;
}

.sidebar__nav { padding: 12px 10px; overflow-y: auto; flex: 1; }

.nav-group + .nav-group { margin-top: 18px; }
.nav-group__label {
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-faint);
    padding: 0 8px 6px;
}

.icon { width: 18px; height: 18px; flex: none; }

.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: var(--radius-sm);
    color: var(--text-muted); font-size: 14px; font-weight: 500;
    margin-bottom: 1px; position: relative;
}
.nav-item .icon { opacity: .75; }
.nav-item:hover .icon, .nav-item[aria-current="page"] .icon { opacity: 1; }
.nav-item__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item:hover { background: var(--surface-sunk); color: var(--text); text-decoration: none; }
.nav-item[aria-current="page"] {
    background: var(--accent-sunk); color: var(--accent); font-weight: 600;
}
.nav-item .count {
    margin-left: auto; font-size: 11.5px; font-variant-numeric: tabular-nums;
    color: var(--text-faint); background: var(--surface-sunk);
    padding: 1px 7px; border-radius: 999px;
}
.nav-item[aria-current="page"] .count { background: var(--surface); color: var(--accent); }

.sidebar__foot { padding: 10px; border-top: 1px solid var(--border); flex: none; }

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

.topbar {
    height: var(--header-h);
    display: flex; align-items: center; gap: 12px;
    padding: 0 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 20;
}
.topbar__title { font-weight: 620; font-size: 15px; letter-spacing: -.01em; }
.topbar__spacer { flex: 1; }

.content { padding: 22px 20px 64px; max-width: 1180px; width: 100%; }
.content--narrow { max-width: 760px; }

.page-head {
    display: flex; align-items: flex-start; gap: 16px;
    margin-bottom: 18px; flex-wrap: wrap;
}
.page-head__sub { color: var(--text-muted); font-size: 13.5px; }
.page-head__actions { margin-left: auto; display: flex; gap: 8px; }

/* Mobile: sidebar becomes a top bar of icons-with-labels that scrolls. */
@media (max-width: 860px) {
    .app { flex-direction: column; }
    .sidebar {
        width: 100%; height: auto; position: static;
        border-right: 0; border-bottom: 1px solid var(--border);
    }
    .sidebar__nav {
        display: flex; gap: 4px; overflow-x: auto; padding: 8px 10px;
    }
    .nav-group { display: flex; gap: 4px; }
    .nav-group + .nav-group { margin-top: 0; }
    .nav-group__label { display: none; }
    .nav-item { white-space: nowrap; margin-bottom: 0; }
    .sidebar__foot { display: none; }
    .content { padding: 16px 14px 48px; }
}

/* ---------------------------------------------------------------- card --- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.card__head {
    padding: 14px 18px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 12px;
}
.card__head h2 { margin: 0; }
.card__body { padding: 18px; }
.card__body--flush { padding: 0; }
.card + .card { margin-top: 16px; }

/* --------------------------------------------------------------- stats --- */

.stats {
    display: grid; gap: 12px; margin-bottom: 18px;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
.stat {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 13px 15px; box-shadow: var(--shadow);
}
.stat:hover { text-decoration: none; border-color: var(--border-strong); }
.stat__n {
    font-size: 25px; font-weight: 640; letter-spacing: -.025em;
    font-variant-numeric: tabular-nums; line-height: 1.15;
}
.stat__l {
    font-size: 11px; font-weight: 650; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-faint); margin-top: 3px;
}
.stat--alert .stat__n { color: var(--danger); }

/* --------------------------------------------------------------- table --- */

.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }

thead th {
    text-align: left; font-size: 11px; font-weight: 680;
    letter-spacing: .045em; text-transform: uppercase;
    color: var(--text-faint); padding: 10px 14px;
    border-bottom: 1px solid var(--border); white-space: nowrap;
    background: var(--surface-sunk);
}
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-sunk); }

.row-link { color: var(--text); font-weight: 550; }
.row-link:hover { color: var(--accent); }

.ref {
    font-family: var(--mono); font-size: 12.5px; color: var(--text-muted);
    white-space: nowrap;
}

/* ---------------------------------------------------------------- pill --- */

.pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 999px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
    background: var(--surface-sunk); color: var(--text-muted);
}
.pill::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex: none;
}
.pill--plain::before { display: none; }

.pill--open        { background: var(--info-bg);   color: var(--info); }
.pill--in_progress { background: var(--accent-sunk); color: var(--accent); }
.pill--waiting_on_requester { background: var(--warn-bg); color: var(--warn); }
.pill--resolved    { background: var(--ok-bg);     color: var(--ok); }
.pill--closed      { background: var(--surface-sunk); color: var(--text-faint); }

.pill--urgent { background: var(--danger-bg); color: var(--danger); }
.pill--high   { background: var(--warn-bg);   color: var(--warn); }
.pill--normal { background: var(--surface-sunk); color: var(--text-muted); }
.pill--low    { background: var(--surface-sunk); color: var(--text-faint); }

.pill--overdue { background: var(--danger-bg); color: var(--danger); }
.pill--active  { background: var(--ok-bg);     color: var(--ok); }
.pill--inactive{ background: var(--surface-sunk); color: var(--text-faint); }

/* -------------------------------------------------------------- button --- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 8px 15px; border-radius: var(--radius-sm);
    border: 1px solid transparent; background: var(--accent); color: var(--accent-text);
    font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    white-space: nowrap; transition: filter .12s, background .12s;
}
.btn:hover { filter: brightness(1.07); text-decoration: none; }
.btn:active { filter: brightness(.95); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.btn--ghost {
    background: var(--surface); color: var(--text); border-color: var(--border-strong);
}
.btn--ghost:hover { background: var(--surface-sunk); filter: none; }

.btn--quiet { background: transparent; color: var(--text-muted); }
.btn--quiet:hover { background: var(--surface-sunk); color: var(--text); filter: none; }

.btn--danger { background: var(--danger); }
.btn--sm { padding: 5px 11px; font-size: 13px; }
.btn--block { width: 100%; }

.btn-link {
    background: none; border: 0; padding: 0; font: inherit; font-size: 13px;
    color: var(--accent); cursor: pointer; text-decoration: underline;
}

/* ---------------------------------------------------------------- form --- */

.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field > label {
    display: block; font-size: 13px; font-weight: 620; margin-bottom: 5px;
}
.field__help { font-size: 12.5px; color: var(--text-muted); margin-top: 5px; }
.field__error { font-size: 12.5px; color: var(--danger); margin-top: 5px; font-weight: 550; }

/* Styled by EXCLUSION, not by listing types.
 *
 * `input[type=text]` does not match `<input name="x">` - an input with no type
 * attribute defaults to text but has no type to select on - so any field
 * written without one rendered completely unstyled. It also silently missed
 * type=date, and would have missed tel, url, datetime-local and anything added
 * later.
 *
 * Excluding the handful of inputs that need their own treatment is the
 * selector that cannot fall out of date. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not([type=range]):not([type=color]):not([type=hidden]),
select, textarea {
    width: 100%; padding: 9px 11px; font: inherit; font-size: 14px;
    color: var(--text); background: var(--bg);
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}

/* Date and time pickers render their own indicator; keep it visible in dark. */
input[type=date], input[type=time], input[type=datetime-local] { min-height: 38px; }
@media (prefers-color-scheme: dark) {
    input[type=date]::-webkit-calendar-picker-indicator,
    input[type=time]::-webkit-calendar-picker-indicator,
    input[type=datetime-local]::-webkit-calendar-picker-indicator { filter: invert(0.75); }
}
textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
input[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--danger); }

input[type=color] { width: 46px; height: 36px; padding: 2px; cursor: pointer; }

.check { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; }
.check input { margin-top: 3px; flex: none; }

.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.form-actions {
    display: flex; gap: 8px; align-items: center;
    padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--border);
}

/* -------------------------------------------------------------- alerts --- */

.alert {
    border-radius: var(--radius-sm); padding: 11px 14px; font-size: 14px;
    margin-bottom: 16px; border: 1px solid;
}
.alert--error   { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.alert--success { background: var(--ok-bg);     border-color: var(--ok);     color: var(--ok); }
.alert--info    { background: var(--info-bg);   border-color: var(--info);   color: var(--info); }
.alert--warn    { background: var(--warn-bg);   border-color: var(--warn);   color: var(--warn); }

/* --------------------------------------------------------------- empty --- */

.empty { text-align: center; padding: 52px 20px; color: var(--text-muted); }
.empty__icon {
    width: 40px; height: 40px; margin: 0 auto 12px; border-radius: 50%;
    background: var(--surface-sunk); display: grid; place-items: center;
    color: var(--text-faint); font-size: 19px;
}
.empty h3 { color: var(--text); margin-bottom: 4px; }

/* -------------------------------------------------------- conversation --- */

.thread { display: flex; flex-direction: column; gap: 14px; }

.msg { display: flex; gap: 11px; }
.msg__avatar {
    width: 31px; height: 31px; border-radius: 50%; flex: none;
    background: var(--surface-sunk); color: var(--text-muted);
    display: grid; place-items: center; font-size: 12px; font-weight: 680;
}
.msg__body { flex: 1; min-width: 0; }
.msg__meta { font-size: 12.5px; color: var(--text-muted); margin-bottom: 4px; }
.msg__meta strong { color: var(--text); font-weight: 620; }
.msg__bubble {
    background: var(--surface-sunk); border-radius: var(--radius-sm);
    padding: 11px 13px; font-size: 14px; white-space: pre-wrap; word-wrap: break-word;
}
/* Internal notes must be unmistakable - posting one publicly is the costly
   mistake in a helpdesk. */
.msg--internal .msg__bubble {
    background: var(--warn-bg); border: 1px dashed var(--warn); color: var(--text);
}
.msg--internal .msg__avatar { background: var(--warn-bg); color: var(--warn); }

/* ------------------------------------------------------------- details --- */

.detail-grid { display: grid; gap: 16px; grid-template-columns: 1fr 268px; align-items: start; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }

.props { display: grid; gap: 12px; }
.prop__k {
    font-size: 11px; font-weight: 680; letter-spacing: .045em;
    text-transform: uppercase; color: var(--text-faint); margin-bottom: 3px;
}
.prop__v { font-size: 14px; }

/* ------------------------------------------------------------ toolbars --- */

.toolbar {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin-bottom: 14px;
}
.toolbar input[type=search] { min-width: 210px; width: auto; flex: 1 1 210px; max-width: 340px; }
.toolbar select { width: auto; min-width: 130px; }

/* ----------------------------------------------------------- paginator --- */

.pager { padding: 14px 18px; border-top: 1px solid var(--border); font-size: 13.5px; }
.pager svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------- misc ---- */

.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.small { font-size: 13px; }
.stack > * + * { margin-top: 12px; }
.row { display: flex; align-items: center; gap: 8px; }
.wrap-anywhere { overflow-wrap: anywhere; }

/* ------------------------------------------------------- guest layout ---
   Sign-in, setup and the standalone error pages. Kept here rather than in an
   inline <style> so there is one stylesheet to cache and one place to look. */

.guest { min-height: 100vh; display: grid; place-items: center; padding: 24px 18px 48px; }
.guest__inner { width: 100%; max-width: 400px; }
.guest__inner--wide { max-width: 640px; }

.guest__brand { text-align: center; margin-bottom: 20px; }
.guest__brand .mark {
    width: 44px; height: 44px; border-radius: 11px; margin: 0 auto 12px;
    background: var(--accent); color: var(--accent-text);
    display: grid; place-items: center; font-size: 20px; font-weight: 700;
}
.guest__brand img { max-height: 46px; max-width: 190px; margin-bottom: 12px; }
.guest__brand h1 { font-size: 1.3rem; }
.guest__brand p { color: var(--text-muted); font-size: 13.5px; margin: 4px 0 0; }

.guest__foot { text-align: center; color: var(--text-faint); font-size: 12.5px; margin-top: 20px; }

/* The sign-in page's "or continue with" divider. */
.guest__divider {
    display: flex; align-items: center; gap: 10px;
    color: var(--text-faint); font-size: 12px; margin: 18px 0 14px;
}
.guest__divider::before, .guest__divider::after {
    content: ""; flex: 1; height: 1px; background: var(--border);
}

/* --------------------------------------------------- setup diagnostics ---
   The environment checklist on /setup. Named distinctly from `.check`, which
   is the checkbox row - two different things called the same name is how one
   quietly restyles the other. */

.env-check {
    display: flex; gap: 10px; padding: 9px 0; font-size: 14px;
    border-top: 1px solid var(--border);
}
.env-check:first-child { border-top: 0; }
.env-check__mark { width: 18px; flex: none; font-weight: 700; }
.env-check__mark--ok { color: var(--ok); }
.env-check__mark--no { color: var(--danger); }
.env-check__detail {
    color: var(--text-muted); font-size: 13px; margin-top: 1px;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------- collapsible sidebar ---
   Collapsed, the sidebar becomes an icon rail with a tooltip on hover and on
   keyboard focus. The label stays in the DOM and is only visually hidden, so
   screen readers still announce the destination - hiding it with display:none
   would remove it from the accessibility tree and leave an unlabelled link. */

.sidebar__brand-name { overflow: hidden; white-space: nowrap; }

.sidebar__who { padding: 0 10px 8px; font-size: 13px; color: var(--text-muted); }
.sidebar__who-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__who-role { font-size: 12px; }

.sidebar__signout {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 7px 10px; border: 0; border-radius: var(--radius-sm);
    background: none; color: var(--text-muted); font: inherit; font-size: 14px;
    font-weight: 500; cursor: pointer; position: relative;
}
.sidebar__signout:hover { background: var(--surface-sunk); color: var(--text); }
.sidebar__signout .icon { opacity: .75; }

.sidebar__toggle {
    display: flex; align-items: center; gap: 10px; width: 100%;
    margin-top: 6px; padding: 7px 10px; border: 0; border-radius: var(--radius-sm);
    background: none; color: var(--text-faint); font: inherit; font-size: 13px;
    cursor: pointer; position: relative;
}
.sidebar__toggle:hover { background: var(--surface-sunk); color: var(--text); }

/* --- collapsed state --------------------------------------------------- */

.sidebar-collapsed .sidebar { --sidebar-w: 60px; }

.sidebar-collapsed .nav-item,
.sidebar-collapsed .sidebar__toggle,
.sidebar-collapsed .sidebar__signout,
.sidebar-collapsed .sidebar__brand { justify-content: center; padding-left: 0; padding-right: 0; }

.sidebar-collapsed .nav-item__label,
.sidebar-collapsed .sidebar__brand-name,
.sidebar-collapsed .sidebar__who,
.sidebar-collapsed .nav-group__label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* A count with no room for a label becomes a dot on the icon. */
.sidebar-collapsed .nav-item .count {
    position: absolute; top: 3px; right: 8px; margin: 0;
    min-width: 15px; padding: 0 4px; font-size: 10px; line-height: 15px;
    text-align: center; background: var(--accent); color: var(--accent-text);
}
.sidebar-collapsed .nav-item[aria-current="page"] .count { background: var(--accent); color: var(--accent-text); }

.sidebar-collapsed .nav-group + .nav-group {
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
}

.sidebar-collapsed .sidebar__toggle .icon { transform: rotate(180deg); }

/* --- tooltips ----------------------------------------------------------- */

.sidebar-collapsed [data-tip]::after {
    content: attr(data-tip);
    position: absolute; left: calc(100% + 10px); top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: var(--text); color: var(--bg);
    padding: 5px 9px; border-radius: 6px;
    font-size: 12.5px; font-weight: 550; white-space: nowrap;
    opacity: 0; pointer-events: none; z-index: 60;
    transition: opacity .12s ease, transform .12s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
/* The little arrow. */
.sidebar-collapsed [data-tip]::before {
    content: ""; position: absolute; left: calc(100% + 4px); top: 50%;
    transform: translateY(-50%) translateX(-4px);
    border: 5px solid transparent; border-right-color: var(--text);
    opacity: 0; pointer-events: none; z-index: 60;
    transition: opacity .12s ease, transform .12s ease;
}
.sidebar-collapsed [data-tip]:hover::after,
.sidebar-collapsed [data-tip]:hover::before,
.sidebar-collapsed [data-tip]:focus-visible::after,
.sidebar-collapsed [data-tip]:focus-visible::before {
    opacity: 1; transform: translateY(-50%) translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-collapsed [data-tip]::after,
    .sidebar-collapsed [data-tip]::before { transition: none; }
}

/* Collapsing is a desktop affordance. On mobile the sidebar is already a
   horizontal strip, where a rail would make no sense. */
@media (max-width: 860px) {
    .sidebar-collapsed .sidebar { --sidebar-w: 100%; }
    .sidebar-collapsed .nav-item__label,
    .sidebar-collapsed .sidebar__brand-name {
        position: static; width: auto; height: auto; margin: 0;
        overflow: visible; clip: auto; white-space: nowrap;
    }
    .sidebar-collapsed .nav-item { justify-content: flex-start; padding: 7px 10px; }
    .sidebar-collapsed .nav-item .count { position: static; background: var(--surface-sunk); color: var(--text-faint); }
    .sidebar-collapsed [data-tip]::after, .sidebar-collapsed [data-tip]::before { display: none; }
    .sidebar__signout {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 7px 10px; border: 0; border-radius: var(--radius-sm);
    background: none; color: var(--text-muted); font: inherit; font-size: 14px;
    font-weight: 500; cursor: pointer; position: relative;
}
.sidebar__signout:hover { background: var(--surface-sunk); color: var(--text); }
.sidebar__signout .icon { opacity: .75; }

.sidebar__toggle { display: none; }
}

/* --------------------------------------------------------- attachments --- */

.attachments { display: grid; gap: 6px; }

.attachment {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--surface-sunk);
    font-size: 13.5px;
}
.attachment .icon { width: 15px; height: 15px; color: var(--text-faint); flex: none; }
.attachment__name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 550; }
.attachment__meta { color: var(--text-faint); font-size: 12.5px; white-space: nowrap; }
.attachment__remove { flex: none; }

.attachment-field {
    border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
    padding: 12px; background: var(--surface-sunk);
}
.attachment-field input[type=file] {
    width: 100%; font: inherit; font-size: 13.5px; color: var(--text-muted);
}

/* ------------------------------------------------------------- reports --- */

.report-grid {
    display: grid; gap: 16px; margin-top: 16px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.report-grid .card + .card { margin-top: 0; }

/* A bar chart in plain CSS. No charting library: it would be the single
   largest dependency in the application, for one chart, on a deployment with
   no build step. The figures are also available as a table below it. */
.chart {
    display: flex; align-items: flex-end; gap: 2px;
    height: 140px; padding: 0 2px;
}
.chart__col { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 3px; }
.chart__bar {
    width: 100%; background: var(--accent); border-radius: 2px 2px 0 0;
    opacity: .8; transition: opacity .12s;
}
.chart__col:hover .chart__bar { opacity: 1; }
.chart__axis {
    display: flex; justify-content: space-between;
    margin-top: 8px; font-size: 12px; color: var(--text-muted);
}

.meter { height: 7px; background: var(--surface-sunk); border-radius: 999px; overflow: hidden; }
.meter__fill { height: 100%; background: var(--accent); opacity: .55; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
    .chart__bar { transition: none; }
}