/* ==================================================================
   TaskFlow stylesheet

   Type scale runs from a 16px base. Body copy is 16px, never below
   13px anywhere, so the system stays readable on a real monitor at
   arm's length rather than only in a screenshot.

   The accent is injected from the brand settings as --accent on
   :root by the page header, so changing the colour in the admin
   screen repaints the whole system.
   ================================================================== */

:root {
    /* ---- Ink and surfaces ---- */
    --ink: #10141b;
    --ink-2: #41506b;
    --muted: #6c7a93;
    --line: #e4e9f0;
    --line-strong: #cfd7e3;
    --canvas: #f3f5f9;
    --surface: #ffffff;
    --surface-sunk: #f8fafc;

    /* ---- Navigation shell ---- */
    --shell: #141a26;
    --shell-2: #232d40;
    --shell-3: #38445c;
    --shell-ink: #c3cddd;

    /* ---- Accent. Overridden inline from the brand settings. ---- */
    --accent: #15655d;
    --accent-dark: #0f4a44;
    --accent-ink: #ffffff;
    --accent-soft: color-mix(in srgb, var(--accent) 10%, #fff);
    --accent-ring: color-mix(in srgb, var(--accent) 22%, transparent);

    /* ---- Semantic ---- */
    --danger: #b3261e;
    --danger-soft: #fdeceb;
    --warn: #8d5400;
    --warn-soft: #fdf4e4;
    --ok: #14703a;
    --ok-soft: #e8f6ed;

    /* ---- Shape ---- */
    --radius-lg: 14px;
    --radius: 10px;
    --radius-sm: 7px;

    --shadow-sm: 0 1px 2px rgba(16, 20, 27, .05);
    --shadow: 0 1px 2px rgba(16, 20, 27, .04), 0 6px 16px -4px rgba(16, 20, 27, .07);
    --shadow-lg: 0 2px 4px rgba(16, 20, 27, .04), 0 18px 40px -12px rgba(16, 20, 27, .16);

    /* ---- Type ---- */
    --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono",
                 Menlo, Consolas, monospace;

    --t-xs: 12.5px;
    --t-sm: 14px;
    --t-base: 16px;
    --t-md: 17px;
    --t-lg: 19px;
    --t-xl: 23px;
    --t-2xl: 28px;
    --t-3xl: 34px;

    /* ---- Spacing ---- */
    --gap: 20px;
    --pad-card: 22px;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--t-base);
    line-height: 1.6;
    color: var(--ink);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-dark); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ==================================================================
   Top bar
   ================================================================== */

.topbar {
    background: var(--shell);
    color: var(--shell-ink);
    position: sticky;
    top: 0;
    z-index: 50;
}

.topbar-inner {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 32px;
    min-height: 64px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-weight: 650;
    font-size: var(--t-md);
    color: #fff;
    text-decoration: none;
    letter-spacing: -.015em;
    white-space: nowrap;
}

.brand .mark {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(145deg,
                color-mix(in srgb, var(--accent) 72%, #fff),
                var(--accent));
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-ink);
    flex: none;
    letter-spacing: -.02em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

.nav {
    display: flex;
    gap: 3px;
    flex: 1;
    flex-wrap: wrap;
}

.nav a {
    color: var(--shell-ink);
    text-decoration: none;
    padding: 8px 13px;
    border-radius: 8px;
    font-size: var(--t-sm);
    font-weight: 520;
    white-space: nowrap;
    transition: background .13s, color .13s;
}

.nav a:hover { background: var(--shell-2); color: #fff; }

.nav a.is-active {
    background: var(--shell-2);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--shell-3);
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.topbar-user .who { text-align: right; line-height: 1.3; }

.topbar-user .who strong {
    display: block;
    color: #fff;
    font-size: var(--t-sm);
    font-weight: 570;
}

.topbar-user .who span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #8495b0;
    font-weight: 600;
}

.topbar-user a.signout {
    color: #93a2bb;
    font-size: var(--t-sm);
    text-decoration: none;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid #2f3b51;
    transition: color .13s, border-color .13s, background .13s;
}

.topbar-user a.signout:hover { color: #fff; border-color: #4a5a76; background: var(--shell-2); }

/* ==================================================================
   Layout
   ================================================================== */

.page {
    max-width: 1340px;
    margin: 0 auto;
    padding: 30px 24px 80px;
}

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.page-head h1 {
    margin: 0;
    font-size: var(--t-2xl);
    font-weight: 660;
    letter-spacing: -.025em;
    line-height: 1.22;
}

.page-head .sub {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: var(--t-base);
}

.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 336px;
    gap: var(--gap);
    align-items: start;
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.card + .card { margin-top: var(--gap); }

.card-head {
    padding: 16px var(--pad-card);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--surface-sunk);
}

.card-head h2 {
    margin: 0;
    font-size: var(--t-xs);
    font-weight: 680;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-2);
}

.card-body { padding: var(--pad-card); }

/* ==================================================================
   Stat tiles
   ================================================================== */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .14s, transform .14s, border-color .14s;
}

.stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--stat, var(--line-strong));
}

.stat:hover {
    box-shadow: var(--shadow);
    transform: translateY(-1px);
    border-color: var(--line-strong);
}

.stat:visited { color: inherit; }

.stat .n {
    font-size: var(--t-3xl);
    font-weight: 630;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.03em;
    display: block;
    line-height: 1.08;
    color: var(--ink);
}

.stat .k {
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--muted);
    font-weight: 630;
    margin-top: 3px;
    display: block;
}

/* ==================================================================
   Work order rank badge
   ================================================================== */

.rank {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 7px;
    border-radius: 9px;
    font-size: var(--t-sm);
    font-weight: 680;
    font-variant-numeric: tabular-nums;
    background: #eef1f6;
    color: var(--ink-2);
    border: 1px solid var(--line-strong);
    flex: none;
    line-height: 1;
}

/* The next three jobs up are worth spotting from across the room. */
.rank-top {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--accent) 36%, transparent);
}

.rank-none {
    background: transparent;
    color: #a6b1c4;
    border-style: dashed;
    font-weight: 500;
}

.rank-lg { min-width: 38px; height: 38px; font-size: var(--t-md); border-radius: 11px; }

/* ==================================================================
   Ticket rows
   ================================================================== */

.ticket-list { display: flex; flex-direction: column; }

.ticket-row {
    display: grid;
    grid-template-columns: 34px 92px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 16px 22px 16px 19px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    border-left: 3px solid var(--sig, transparent);
    transition: background .12s;
}

.ticket-row:last-child { border-bottom: 0; }
.ticket-row:hover { background: var(--surface-sunk); }
.ticket-row:visited { color: inherit; }

/* Grid children need this or long titles push the row wider than the card. */
.ticket-row > * { min-width: 0; }

.ticket-row .no {
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

.ticket-row .title {
    font-weight: 570;
    font-size: var(--t-md);
    letter-spacing: -.01em;
    margin: 0 0 3px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink);
}

.ticket-row .meta {
    font-size: var(--t-sm);
    color: var(--muted);
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.ticket-row .meta b { font-weight: 570; color: var(--ink-2); }

.ticket-row .right {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
}

/* ==================================================================
   Chips, tags, pills
   ================================================================== */

.chip {
    display: inline-block;
    font-size: var(--t-xs);
    font-weight: 630;
    padding: 4px 11px;
    border-radius: 20px;
    color: var(--chip, #667085);
    background: color-mix(in srgb, var(--chip, #667085) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--chip, #667085) 24%, #fff);
    white-space: nowrap;
    letter-spacing: -.005em;
}

.priority-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--t-sm);
    font-weight: 570;
    color: var(--ink-2);
    white-space: nowrap;
}

.priority-tag .signal {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: var(--sig, #667085);
    flex: none;
}

.pill {
    display: inline-block;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 3px 9px;
    border-radius: 6px;
    background: #eef1f6;
    color: var(--ink-2);
    font-weight: 650;
    white-space: nowrap;
}

.pill.overdue { background: var(--danger-soft); color: var(--danger); }
.pill.due-soon { background: var(--warn-soft); color: var(--warn); }

/* ==================================================================
   Avatars
   ================================================================== */

.avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    font-size: var(--t-xs);
    font-weight: 680;
    color: #fff;
    background: hsl(var(--hue, 200) 36% 41%);
    flex: none;
    letter-spacing: .02em;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.avatar.lg { width: 42px; height: 42px; font-size: var(--t-sm); }
.avatar.sm { width: 26px; height: 26px; font-size: 10.5px; }

/* ==================================================================
   Forms
   ================================================================== */

.field { margin-bottom: 19px; }

.field label,
.label {
    display: block;
    font-size: var(--t-xs);
    font-weight: 650;
    color: var(--ink-2);
    margin-bottom: 7px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="search"],
input[type="number"],
input[type="color"],
input[type="file"],
select,
textarea {
    width: 100%;
    font-family: inherit;
    font-size: var(--t-base);
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 10px 13px;
    transition: border-color .13s, box-shadow .13s;
}

input[type="file"] {
    padding: 9px 12px;
    font-size: var(--t-sm);
    background: var(--surface-sunk);
    cursor: pointer;
}

input[type="color"] { padding: 4px; height: 44px; cursor: pointer; }

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%236c7a93' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 36px;
    cursor: pointer;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3.5px var(--accent-ring);
}

input::placeholder, textarea::placeholder { color: #9aa6ba; }

textarea { resize: vertical; min-height: 96px; line-height: 1.6; }

.hint {
    font-size: var(--t-sm);
    color: var(--muted);
    margin-top: 7px;
    line-height: 1.5;
}

.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
}

/* A checkbox sits beside its wording, not above it. */
.check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-transform: none;
    font-size: var(--t-base);
    letter-spacing: 0;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 10px;
    cursor: pointer;
}

.check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex: none;
    accent-color: var(--accent);
    cursor: pointer;
}

/* ==================================================================
   Buttons
   ================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: var(--t-sm);
    font-weight: 580;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    transition: background .13s, border-color .13s, box-shadow .13s, transform .08s;
}

.btn:hover { background: var(--surface-sunk); border-color: #b9c3d4; color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 30%, transparent);
}

.btn-primary:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    color: var(--accent-ink);
}

.btn-danger { color: var(--danger); border-color: #ebcdca; background: #fff; }
.btn-danger:hover { background: var(--danger-soft); border-color: #dfb2ad; color: var(--danger); }

.btn-sm { padding: 7px 13px; font-size: var(--t-xs); }
.btn-lg { padding: 13px 24px; font-size: var(--t-base); }
.btn-block { width: 100%; }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ==================================================================
   Search and filters
   ================================================================== */

.searchbar {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    margin-bottom: var(--gap);
    box-shadow: var(--shadow);
}

.searchbar .row-1 {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.searchbar .row-1 input { flex: 1; }

.filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 13px;
    align-items: end;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.filters .label { margin-bottom: 6px; font-size: 11.5px; }
.filters select, .filters input { font-size: var(--t-sm); padding: 9px 12px; }
.filters select { padding-right: 34px; }

/* ==================================================================
   Ticket thread

   Every written message is its own card with air around it, so a long
   conversation reads as a stack of sections rather than one wall of
   text. System notes sit between those cards on a quiet rail.
   ================================================================== */

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

.entry {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* The original request leads the thread, so it carries the accent.
   Drawn as an overlay rather than an inset shadow, because the header
   band paints its own background over anything inset. */
.entry.is-opening { position: relative; }

.entry.is-opening::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent);
    z-index: 1;
}

/* Your own replies are tinted, so you can find yourself in a long thread. */
.entry.is-mine .entry-head { background: var(--accent-soft); }

.entry-head {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px var(--pad-card);
    border-bottom: 1px solid var(--line);
    background: var(--surface-sunk);
}

.entry-who {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.entry-head .name {
    font-weight: 640;
    font-size: var(--t-base);
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.entry-label {
    font-size: var(--t-xs);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 620;
}

.entry-head .when {
    font-size: var(--t-xs);
    color: var(--muted);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    align-self: flex-start;
    padding-top: 2px;
}

.entry-body { padding: var(--pad-card); }

/* ---- System notes ----
   A rail of small events between the message cards. Consecutive notes
   are grouped by the page, so a burst of admin actions reads as one
   step rather than several. */

.system-rail {
    position: relative;
    margin: -4px 0 -4px 20px;
    padding-left: 22px;
    border-left: 2px solid var(--line-strong);
    display: flex;
    flex-direction: column;
}

.system-note {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 0;
    font-size: var(--t-sm);
    color: var(--ink-2);
}

/* flex-basis 0 lets the text wrap inside itself rather than being
   pushed onto a line below the avatar. */
.system-text { flex: 1 1 0; min-width: 0; }
.system-note .when { margin-left: auto; }

/* The thread is no longer one card, so the reply box sets its own gap. */
.reply-box { margin-top: 22px; }

/* ---- Rendered editor output ---- */

.rich {
    font-size: var(--t-base);
    line-height: 1.68;
    overflow-wrap: break-word;
    color: var(--ink);
}

.rich > :first-child { margin-top: 0; }
.rich > :last-child { margin-bottom: 0; }
.rich p { margin: 0 0 .8em; }

.rich img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    display: block;
    margin: 16px 0;
    cursor: zoom-in;
    box-shadow: var(--shadow-sm);
}

.rich ul, .rich ol { padding-left: 25px; margin: 0 0 .8em; }
.rich li { margin-bottom: .32em; }

.rich blockquote {
    margin: 0 0 .8em;
    padding: 3px 0 3px 17px;
    border-left: 3px solid var(--line-strong);
    color: var(--ink-2);
}

.rich pre {
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 15px 17px;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    line-height: 1.6;
}

.rich code {
    font-family: var(--font-mono);
    font-size: .92em;
    background: #eff2f7;
    padding: 2px 6px;
    border-radius: 4px;
}

.rich pre code { background: none; padding: 0; font-size: inherit; }

.rich table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 0 .8em;
    font-size: var(--t-sm);
}

.rich th, .rich td { border: 1px solid var(--line-strong); padding: 8px 11px; text-align: left; }
.rich th { background: var(--surface-sunk); font-weight: 630; }

.rich h1, .rich h2, .rich h3, .rich h4 {
    margin: 1.3em 0 .5em;
    line-height: 1.32;
    letter-spacing: -.015em;
}

.rich h1 { font-size: var(--t-xl); }
.rich h2 { font-size: var(--t-lg); }
.rich h3 { font-size: var(--t-md); }
.rich h4 { font-size: var(--t-base); }

/* ==================================================================
   Side panel properties
   ================================================================== */

.prop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--t-sm);
}

.prop:last-child { border-bottom: 0; }

.prop .k {
    color: var(--muted);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 650;
    flex: none;
}

.prop .v {
    text-align: right;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    font-size: var(--t-sm);
    font-weight: 520;
}

.prop .v.mono { font-variant-numeric: tabular-nums; }

/* A plain row for the status breakdown, where the label is the content. */
.prop.plain .k {
    text-transform: none;
    font-size: var(--t-sm);
    letter-spacing: 0;
    font-weight: 520;
    color: var(--ink);
    display: flex;
    align-items: center;
}

/* ==================================================================
   Activity feed
   ================================================================== */

.feed-item {
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--t-sm);
}

.feed-item:last-child { border-bottom: 0; padding-bottom: 0; }
.feed-item:first-child { padding-top: 0; }

.feed-ref { font-weight: 630; text-decoration: none; }
.feed-ref:hover { text-decoration: underline; }
.feed-text { margin-top: 3px; line-height: 1.5; }

/* ==================================================================
   Ticket header block
   ================================================================== */

.ticket-title-block {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
}

.ticket-no-big {
    font-family: var(--font-mono);
    font-size: var(--t-xl);
    font-weight: 650;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.025em;
}

/* ==================================================================
   Alerts
   ================================================================== */

.alert {
    padding: 14px 17px;
    border-radius: var(--radius);
    margin-bottom: var(--gap);
    font-size: var(--t-sm);
    border: 1px solid;
    line-height: 1.55;
}

.alert-success { background: var(--ok-soft); border-color: #bfe4cd; color: #0f5c2e; }
.alert-error   { background: var(--danger-soft); border-color: #f0c7c3; color: var(--danger); }
.alert-info    { background: #edf4fc; border-color: #c7dcf2; color: #19497a; }
.alert-warning { background: var(--warn-soft); border-color: #eed9b4; color: var(--warn); }

.alert a { color: inherit; font-weight: 600; }

/* ==================================================================
   Tables
   ================================================================== */

.table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }

.table th {
    text-align: left;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    font-weight: 680;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-sunk);
    white-space: nowrap;
}

.table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-sunk); }
.table td.mono { font-variant-numeric: tabular-nums; }

.table .actions { text-align: right; white-space: nowrap; }

/* The inline delete forms would otherwise sit a couple of pixels low. */
.table .actions form { display: inline-flex; vertical-align: middle; }
.table .actions .btn { vertical-align: middle; }
.table .actions .btn + form { margin-left: 7px; }

.swatch {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    vertical-align: -2px;
    margin-right: 9px;
    border: 1px solid rgba(0, 0, 0, .1);
    flex: none;
}

/* ==================================================================
   Empty state
   ================================================================== */

.empty { padding: 64px 28px; text-align: center; color: var(--muted); }

.empty h3 {
    margin: 0 0 8px;
    font-size: var(--t-lg);
    color: var(--ink-2);
    font-weight: 630;
    letter-spacing: -.015em;
}

.empty p { margin: 0 0 20px; font-size: var(--t-base); }

/* ==================================================================
   Pagination
   ================================================================== */

.pager {
    display: flex;
    gap: 7px;
    justify-content: center;
    padding: 20px;
    flex-wrap: wrap;
    align-items: center;
    border-top: 1px solid var(--line);
}

.pager a, .pager span {
    font-size: var(--t-sm);
    font-variant-numeric: tabular-nums;
    padding: 8px 13px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink-2);
    background: var(--surface);
    font-weight: 540;
}

.pager a:hover { border-color: var(--line-strong); background: var(--surface-sunk); }

.pager .is-current {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    font-weight: 630;
}

.pager .gap { border: 0; background: none; color: var(--muted); padding: 8px 4px; }

/* ==================================================================
   Sign in
   ================================================================== */

.auth-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px;
    background:
        radial-gradient(900px 420px at 50% -8%,
            color-mix(in srgb, var(--accent) 11%, var(--canvas)) 0%,
            transparent 70%),
        var(--canvas);
}

.auth-card {
    width: 100%;
    max-width: 426px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    padding: 36px 36px 30px;
}

.auth-card .brand { color: var(--ink); font-size: var(--t-lg); margin-bottom: 2px; }

.auth-card h1 {
    font-size: var(--t-xl);
    margin: 22px 0 5px;
    font-weight: 650;
    letter-spacing: -.025em;
}

.auth-card .sub { color: var(--muted); font-size: var(--t-base); margin: 0 0 26px; }

.demo-keys {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    color: var(--muted);
    line-height: 2;
}

.demo-keys b {
    color: var(--ink-2);
    font-weight: 650;
    font-family: var(--font-ui);
    font-size: var(--t-sm);
}

/* ==================================================================
   Attachments and lightbox
   ================================================================== */

.attach-grid { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 16px; }

.attach-grid a {
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    line-height: 0;
    box-shadow: var(--shadow-sm);
    transition: border-color .13s;
}

.attach-grid a:hover { border-color: var(--accent); }
.attach-grid img { width: 88px; height: 88px; object-fit: cover; }

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(12, 16, 23, .9);
    display: grid;
    place-items: center;
    padding: 36px;
    z-index: 900;
    backdrop-filter: blur(3px);
}

.lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--radius);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}

.lightbox .close {
    position: absolute;
    top: 20px;
    right: 26px;
    color: #fff;
    background: none;
    border: 0;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    padding: 6px 14px;
}

/* ==================================================================
   Utilities
   ================================================================== */

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-16 { margin-top: 16px; }
.flex { display: flex; align-items: center; gap: 11px; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

/* Utilities have to outrank element selectors such as `.field label`. */
.hide { display: none !important; }

/* Present for screen readers, invisible on screen. */
.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;
}

/* ==================================================================
   Responsive
   ================================================================== */

@media (max-width: 1000px) {
    .split { grid-template-columns: 1fr; }

    /* On most screens the side panel is the form you came to use, so it
       leads once the columns stack. */
    .split .side { order: -1; }

    /* A ticket is the exception: people come to read the conversation,
       not to scroll past three panels of metadata to reach it. */
    .split.content-first .side { order: 0; }
}

@media (max-width: 680px) {
    :root {
        --gap: 16px;
        --pad-card: 18px;
        --t-3xl: 30px;
        --t-2xl: 24px;
    }

    .topbar-inner {
        flex-wrap: wrap;
        padding: 12px 16px 0;
        gap: 12px;
        min-height: 0;
    }

    /* Brand and account on the first line, nav scrolls underneath. */
    .brand { margin-right: auto; }

    .nav {
        order: 3;
        flex: 0 0 100%;
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 10px;
    }

    .nav::-webkit-scrollbar { display: none; }

    .topbar-user .who { display: none; }

    .page { padding: 20px 16px 56px; }

    .searchbar .row-1 { flex-wrap: wrap; }
    .searchbar .row-1 input { flex: 1 0 100%; }

    .ticket-row {
        grid-template-columns: 34px 1fr;
        gap: 8px 14px;
        padding: 16px 16px 16px 13px;
    }

    /* The rank keeps its own column; everything else stacks beside it. */
    .ticket-row .no { grid-column: 2; }
    .ticket-row .body { grid-column: 2; }
    .ticket-row .right { grid-column: 2; justify-content: flex-start; }

    /* Long titles wrap on a narrow screen instead of being clipped. */
    .ticket-row .title { white-space: normal; overflow: visible; }

    .prop { flex-direction: column; align-items: flex-start; gap: 5px; }
    .prop .v { justify-content: flex-start; text-align: left; }

    /* Narrower screens cannot spare the full rail indent. */
    .thread { gap: 14px; }
    .system-rail { margin-left: 8px; padding-left: 14px; }
    .system-note { gap: 9px; flex-wrap: wrap; }
    .system-note .when { margin-left: 35px; }

    /* The timestamp drops under the name rather than squeezing it. */
    .entry-head { flex-wrap: wrap; }
    .entry-head .when { margin-left: 0; padding-left: 55px; flex-basis: 100%; }

    .table { display: block; overflow-x: auto; white-space: nowrap; }

    .auth-card { padding: 28px 24px 24px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    .stat:hover { transform: none; }
}

/* ==================================================================
   Print
   ================================================================== */

@media print {
    .topbar, .side, .btn, .pager, .searchbar { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; border-color: #ccc; }
}