:root {
  --brand: #bc2336;
  --brand-dark: #961b2b;
  --ink: #1f2328;
  --muted: #6b7280;
  --line: #e3e5e8;
  --bg: #f6f7f9;
  --card: #ffffff;
  --open: #1d6fd8;
  --pending: #b7791f;
  --closed: #6b7280;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 "Segoe UI", system-ui, sans-serif; color: var(--ink); background: var(--bg); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.4rem; margin: .2rem 0 .6rem; }
h2 { font-size: 1.1rem; margin: 0 0 .6rem; }
main { max-width: 1200px; margin: 0 auto; padding: 1.2rem 1rem 3rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* header */
.top { display: flex; align-items: center; gap: 1.8rem; padding: .55rem 1.2rem; background: var(--brand); color: #fff; }
.top a { color: #fff; }
.brand { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: .75rem; }
.brand:hover { text-decoration: none; }
.brand img { display: block; height: 40px; width: auto; }
.brand span { padding-left: .75rem; border-left: 1px solid rgba(255,255,255,.45); line-height: 1.2; }
.login-logo { display: block; margin: 0 auto 1rem; height: 57px; width: auto; }
.top nav { display: flex; gap: 1.1rem; }
.top .right { margin-left: auto; display: flex; align-items: center; gap: .8rem; }
.top .linkbtn { color: #fff; }
.mailbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .4rem 1.2rem; font-size: .85rem;
           background: #fff; border-bottom: 1px solid var(--line); color: var(--muted); }
.mailbar.bad { background: #fdecee; color: var(--brand-dark); }
.mailbar form { margin-left: auto; }

/* buttons & forms */
button { font: inherit; cursor: pointer; border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: .4rem .9rem; }
button.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
button.primary:hover { background: var(--brand-dark); }
.linkbtn { border: 0; background: none; padding: 0; color: var(--brand); text-decoration: underline; }
.linkbtn.danger { color: var(--brand-dark); }
form { margin: 0; }
label { display: block; margin-bottom: .8rem; font-weight: 600; font-size: .9rem; }
input, select { display: block; width: 100%; margin-top: .25rem; font: inherit; padding: .45rem .6rem;
                border: 1px solid var(--line); border-radius: 6px; background: #fff; }
input:focus, select:focus { outline: 2px solid var(--brand); outline-offset: -1px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1.4rem; }
.card.narrow { max-width: 380px; margin: 3rem auto; }
.card.narrow.left { margin: 1.5rem 0; }
.flash { padding: .6rem .9rem; border-radius: 6px; margin-bottom: 1rem; }
.flash.ok { background: #e7f6ec; color: #1e6b3a; }
.flash.error { background: #fdecee; color: var(--brand-dark); }

/* ticket list */
.toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.tabs { display: flex; gap: .3rem; flex-wrap: wrap; }
.tab { padding: .35rem .8rem; border-radius: 999px; color: var(--ink); border: 1px solid var(--line); background: #fff; }
.tab:hover { text-decoration: none; border-color: var(--brand); }
.tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.count { font-size: .8rem; opacity: .75; margin-left: .2rem; }
.search { display: flex; gap: .4rem; }
.search input { margin: 0; width: 260px; }

table.list { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.list th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted);
           padding: .6rem .8rem; border-bottom: 1px solid var(--line); background: #fafbfc; }
.list td { padding: .6rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.list tbody tr:last-child td { border-bottom: 0; }
.list:not(.static) tbody tr { cursor: pointer; }
.list:not(.static) tbody tr:hover { background: #fbf4f5; }
.num { text-align: right; }
.empty { padding: 2rem; text-align: center; color: var(--muted); background: #fff; border: 1px dashed var(--line); border-radius: 10px; }

.pill { display: inline-block; padding: .05rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: #fff; }
.pill.open { background: var(--open); }
.pill.pending { background: var(--pending); }
.pill.closed { background: var(--closed); }
.pill.auto { background: #e5e7eb; color: var(--muted); }

/* ticket view */
.back { display: inline-block; margin-bottom: .6rem; }
.ticket-head { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start; margin-bottom: 1.2rem; }
.ref { color: var(--brand); font-weight: 700; }
.status-form select { width: auto; min-width: 140px; }
.msg { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 8px; margin-bottom: 1rem; }
.msg.auto { border-left-color: var(--line); opacity: .8; }
.msg header { padding: .7rem 1rem; border-bottom: 1px solid var(--line); }
.msg .when { float: right; color: var(--muted); font-size: .85rem; }
.msg .body { padding: 1rem; white-space: pre-wrap; word-wrap: break-word; }
.attach { padding: .5rem 1rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }

@media (max-width: 700px) {
  .top { flex-wrap: wrap; gap: .6rem; }
  .search input { width: 100%; }
  .ticket-head { flex-direction: column; }
  .list th:nth-child(5), .list td:nth-child(5) { display: none; }
}

/* resolutions & fix library */
textarea { display: block; width: 100%; margin-top: .25rem; font: inherit; padding: .5rem .6rem;
           border: 1px solid var(--line); border-radius: 6px; resize: vertical; }
textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
label.check { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
label.check input { width: auto; margin: 0; }
.status-form { display: flex; align-items: center; gap: .6rem; }
.close-box, .resolution, .similar { background: #fff; border: 1px solid var(--line); border-radius: 8px;
           padding: .9rem 1rem; margin-bottom: 1rem; }
.close-box summary, .resolution summary { cursor: pointer; font-weight: 600; color: var(--brand); }
.close-box[open] summary { margin-bottom: .8rem; }
.resolution { border-left: 4px solid #1e6b3a; }
.resolution h2, .similar h2 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.resolution .body, .fixcard .body { white-space: pre-wrap; margin-bottom: .4rem; }
.resolution details { margin-top: .6rem; }
.resolution details[open] summary { margin-bottom: .8rem; }
.similar { border-left: 4px solid var(--pending); background: #fffaf0; }
.similar .fix { padding: .5rem 0; border-top: 1px solid var(--line); }
.similar .fix:first-of-type { border-top: 0; }
.fix-text { white-space: pre-wrap; color: var(--ink); margin-top: .2rem; font-size: .92rem; }
.pill.cat { background: #eef0f3; color: var(--ink); font-weight: 500; }
.pill.lib { background: #e7f6ec; color: #1e6b3a; }
.fixcard { background: #fff; border: 1px solid var(--line); border-radius: 8px; margin-bottom: .8rem; }
.fixcard header { padding: .7rem 1rem; border-bottom: 1px solid var(--line); }
.fixcard .when { float: right; color: var(--muted); font-size: .85rem; }
.fixcard .body { padding: .8rem 1rem; }

label input, label textarea, label select { font-weight: 400; }

.live-banner { background: #fff4d6; border: 1px solid #f0d78c; color: #6b4e00; padding: .6rem .9rem; border-radius: 6px; margin-bottom: 1rem; }
.live-banner[hidden] { display: none; }

/* assignment, in progress, settings */
.pill.in-progress { background: #7c3aed; }
.pill.warn { background: #b7791f; }
.pill.bad { background: var(--brand-dark); }
.ticket-controls { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
label.inline { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .85rem; }
label.inline select { width: auto; min-width: 150px; margin: 0; }
.hint { text-align: right; }
.msg.out { border-left-color: #7c3aed; background: #faf8ff; }
.who { margin-left: auto; }
.small-tab { font-size: .85rem; padding: .25rem .7rem; }
.inline-edit { display: flex; gap: .4rem; }
.inline-edit input { margin: 0; min-width: 180px; }
.inline-edit button { padding: .3rem .7rem; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1.2rem; margin-bottom: 1.2rem; }
.settings-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; }
.settings-grid h3 { font-size: .95rem; margin: 0 0 .5rem; }
.settings-grid table { margin-bottom: 1rem; }
.btn-row { display: flex; gap: .5rem; }
.email-preview { border: 1px solid var(--line); border-radius: 8px; padding: .8rem 1rem; background: #fafbfc; }
.email-preview .body { white-space: pre-wrap; margin-top: .5rem; font-size: .92rem; }
code { background: #f1f2f4; padding: .05rem .35rem; border-radius: 4px; font-size: .88em; }
@media (max-width: 800px) {
  .settings-grid { grid-template-columns: 1fr; }
  .ticket-controls { align-items: stretch; }
  .hint { text-align: left; }
}

/* ---------------- analytics ---------------- */
.viz-root {
  --series-1: #2a78d6;   /* received - categorical slot 1 (validated with slot 2 on white) */
  --series-2: #eb6834;   /* closed   - categorical slot 2 */
  --grid: #eceef1;
  --good: #0ca30c; --warning: #fab219; --critical: #d03b3b;
}
.period-label { font-size: 1rem; font-weight: 400; margin-left: .4rem; }
.filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.range { display: flex; gap: .4rem; align-items: center; }
.range input { width: auto; margin: 0; padding: .3rem .5rem; }
.range button { padding: .3rem .8rem; }
.sla-note { margin: -.4rem 0 1rem; }
.kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: .8rem; margin-bottom: 1.2rem; }
.tile { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .9rem 1rem; }
.tile-label { font-size: .85rem; color: var(--muted); }
.tile-value { font-size: 1.9rem; font-weight: 600; line-height: 1.25; margin: .15rem 0; }
.tile-sub { font-size: .82rem; color: var(--muted); }
.meter { height: 6px; border-radius: 3px; background: #e6eefa; margin-top: .6rem; overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 3px; }
.meter .good { background: var(--good); } .meter .warning { background: var(--warning); } .meter .critical { background: var(--critical); }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.legend { display: flex; gap: 1rem; font-size: .85rem; color: var(--ink); }
.legend .key, .tip-row .key { display: inline-block; width: 14px; height: 2px; border-radius: 1px; vertical-align: middle; margin-right: .4rem; }
.chart-wrap { width: 100%; overflow: hidden; }
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot, .chart .hover-dot { stroke: #fff; stroke-width: 2; pointer-events: none; }
.chart .end-label { fill: var(--ink); font-size: 12px; }
.chart .hit { fill: transparent; }
.chart .crosshair { stroke: #c9ccd1; stroke-width: 1; pointer-events: none; }
.chart .bar { fill: var(--series-1); }
.chart .bar:hover { opacity: .85; }
.chart .cat-label { fill: var(--ink); font-size: 12px; }
.chart .value { fill: var(--ink); font-size: 12px; font-weight: 600; }
.chart-tip { position: fixed; z-index: 10; background: #fff; border: 1px solid var(--line); border-radius: 8px;
             box-shadow: 0 4px 14px rgba(0,0,0,.1); padding: .5rem .7rem; font-size: .85rem; pointer-events: none; }
.chart-tip[hidden] { display: none; }
.tip-head { color: var(--muted); margin-bottom: .2rem; }
.tip-row strong { font-variant-numeric: tabular-nums; }
.table-view { margin-top: .6rem; }
.table-view summary { cursor: pointer; color: var(--brand); font-size: .85rem; }
.table-view table { margin-top: .5rem; max-width: 420px; }
.list.small td, .list.small th { padding: .35rem .6rem; }
.list td.num, .list th.num { font-variant-numeric: tabular-nums; }
.muted-row td { color: var(--muted); }
.sla-pill { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.sla-pill.critical { background: #fbe7e7; color: #9f2323; }
.sla-pill.warning { background: #fff3d6; color: #7a5200; }
.inline-pill { margin-left: .3rem; }
.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.2rem; }
.two-col .panel { margin-bottom: 0; }
.sla-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 1rem; }
fieldset.days { border: 0; padding: 0; margin: 0 0 .8rem; display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
fieldset.days legend { font-weight: 600; font-size: .9rem; margin-bottom: .3rem; padding: 0; }
@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .two-col, .sla-grid { grid-template-columns: 1fr; }
}
.mailbar.demo { background: #eef4fd; color: #184f95; }
.table-scroll { overflow-x: auto; }
.top nav { flex-wrap: wrap; row-gap: .3rem; }
@media (max-width: 700px) {
  .chart-wrap { overflow-x: auto; }
  .chart-wrap .chart { min-width: 600px; }
  .kpis .tile-value { font-size: 1.5rem; }
}
.two-col > *, .kpis > *, .panel { min-width: 0; }
.range { flex-wrap: wrap; }
@media (max-width: 700px) { .range input[type=date] { flex: 1 1 130px; min-width: 0; } }
.list th.num { text-align: right; }
.preview-subject { margin-bottom: .4rem; }
.email-frame { width: 100%; height: 620px; border: 1px solid var(--line); border-radius: 8px; background: #f4f5f7; }
.pill.on-hold { background: #6b7280; }
.hold-banner { background: #f1f2f4; border: 1px solid #d6d9de; border-left: 4px solid #6b7280; border-radius: 8px; padding: .8rem 1rem; margin-bottom: 1rem; }
.history { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: .7rem 1rem; margin-bottom: 1rem; }
.history summary { cursor: pointer; font-weight: 600; color: var(--brand); font-size: .9rem; }
.history[open] summary { margin-bottom: .6rem; }
.history table { margin-bottom: .5rem; }
.email-frame.tall { height: 900px; }
.ph-title { margin-top: 1.2rem; }
.email-opts { background: #fafbfc; border: 1px solid var(--line); border-radius: 6px; padding: .6rem .8rem; margin-bottom: .8rem; }
.email-opts label { margin-bottom: .3rem; }
.email-opts label.sub { margin-left: 1.6rem; color: var(--muted); }
.feedback-panel { background: #fff; border: 1px solid var(--line); border-left: 4px solid #1e7b34; border-radius: 8px; padding: .9rem 1rem; margin-bottom: 1rem; }
.feedback-panel h2 { font-size: 1rem; margin-bottom: .4rem; }
.fb-row { padding: .35rem 0; }
.fb-row + .fb-row { border-top: 1px solid var(--line); }
.fb-pill { display: inline-block; padding: .1rem .6rem; border-radius: 999px; font-weight: 600; font-size: .85rem; margin-right: .4rem; }
.fb-pill.good { background: #e3f4e7; color: #1e6b3a; }
.fb-pill.ok { background: #fff3d6; color: #7a5200; }
.fb-pill.poor { background: #fbe7e7; color: #9f2323; }
.fb-comment { margin-top: .3rem; font-style: italic; }
.fb-mini { margin-left: .3rem; font-size: .95rem; }
.fb-totals { display: flex; gap: .4rem; flex-wrap: wrap; }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.msg.note { border-left-color: #b7791f; background: #fffbea; }
.reply-box { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: 8px; padding: 1rem; margin: 1.2rem 0 2rem; }
.reply-head { margin-bottom: .6rem; display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; }
.reply-box textarea { margin: 0 0 .7rem; }
.reply-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.reply-actions label.check { margin: 0; }
.reply-actions .spacer { flex: 1; }
/* cleaned-up incoming emails */
.msg .body.clean { white-space: pre-wrap; }
.msg .body.clean a { word-break: break-word; }
.quote-head { white-space: normal; margin: 1rem -1rem .8rem; padding: .45rem 1rem; background: #f4f5f7;
              border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .88rem; color: var(--muted); }
.quote-head strong { color: var(--ink); }
.quote-subj { font-size: .82rem; }
.msg .fold summary, .msg details.original summary { cursor: pointer; color: var(--brand); font-size: .85rem; white-space: normal; }
.msg details.original { padding: .2rem 1rem .8rem; }
.msg .body.raw { padding: .6rem 0 0; font-size: .8rem; color: var(--muted); max-height: 420px; overflow: auto; word-break: break-all; }
.msg details.quoted { margin-top: .6rem; white-space: normal; }
.msg details.quoted > summary { cursor: pointer; color: var(--muted); font-size: .85rem; }
.msg details.quoted[open] > summary { margin-bottom: .4rem; }
.msg .quoted-body { white-space: pre-wrap; color: var(--muted); border-left: 3px solid var(--line); padding-left: .8rem; }
.thread-head { margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .04em; }
.pill.orig { background: #eef0f3; color: var(--ink); margin-right: .3rem; }
.reply-box { margin: 1.2rem 0 1rem; }
.toggle-row { margin: -.2rem 0 1rem; }
/* attachments */
.attach-list { padding: .6rem 1rem .9rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.att-thumb img { display: block; max-height: 140px; max-width: 220px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.att-thumb:hover img { border-color: var(--brand); }
.att-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: #fafbfc; font-size: .88rem; color: var(--ink); }
.att-chip:hover { border-color: var(--brand); text-decoration: none; }
.att-chip.missing { color: var(--muted); }
.att-dl { margin: 0 .4rem 0 -.2rem; }
.inline-form { display: inline; }
.attach-pick { font-weight: 400; font-size: .9rem; display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; cursor: pointer; }
.attach-pick input[type=file] { width: auto; margin: 0; padding: .2rem; font-size: .85rem; }
.picked { margin: .3rem 0 .6rem; min-height: 1em; }
.ph-title { margin-top: 1.4rem; }
.backup-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.5rem; }
.backup-grid p { margin: .3rem 0; }
@media (max-width: 800px) { .backup-grid { grid-template-columns: 1fr; } }

/* licence */
.mailbar.warn { background: #fff4e0; color: #7a4b00; }
.lock-card p { margin: .6rem 0; }
.lock-card .contact { font-size: 1.05rem; }
.lock-card .discreet { margin-top: 1.6rem; font-size: .75rem; }
.lock-card .discreet a { color: var(--muted, #888); }
.lic-code { width: 100%; min-height: 6rem; font-family: ui-monospace, Consolas, monospace; font-size: .8rem; word-break: break-all; }
.lic-facts { margin: .8rem 0; }
.lic-facts dt { font-weight: 600; }
.lic-facts dd { margin: 0 0 .4rem 0; }

/* bookings */
.booking-panel { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .8rem 1.1rem; margin: 1rem 0; }
.booking-panel.is-booked { border-left: 4px solid var(--brand); }
.booking-panel h2 { font-size: 1.05rem; margin: .2rem 0 .5rem; }
.booking-panel details summary { cursor: pointer; }
.booking-panel .book-start summary { font-weight: 600; }
.book-for { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.book-for .check { flex-basis: 100%; }
.inline-form { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin: .5rem 0; }
.book-mini { font-size: .8rem; color: var(--brand-dark); margin-top: .15rem; }
.diary-day { font-size: .95rem; margin: 1rem 0 .3rem; }
.nowrap { white-space: nowrap; }
.dayoff-form { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; margin-top: .8rem; }
.dayoff-form label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; }

.book-wrap { max-width: 760px; margin: 0 auto; }
.book-head { display: flex; gap: 1.2rem; align-items: center; margin: .5rem 0 1.2rem; }
.book-head h1 { margin: .1rem 0 0; font-size: 1.35rem; }
.book-wrap .intro { font-size: 1.02rem; line-height: 1.5; }
.slot-day { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .7rem 1rem 1rem; margin: .8rem 0; }
.slot-day h3 { margin: .2rem 0 .6rem; font-size: 1rem; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; }
.slot { padding: .65rem .4rem; font-size: 1rem; border: 1px solid var(--brand); color: var(--brand); background: #fff; border-radius: 6px; cursor: pointer; }
.slot:hover, .slot:focus { background: var(--brand); color: #fff; }
.booked-card { text-align: center; padding: 1.6rem 1.2rem; }
.booked-card .tick { font-size: 2.4rem; color: #1e7b34; }
.booked-card .big { font-size: 1.45rem; font-weight: 700; margin: .4rem 0; }
.book-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; align-items: center; margin-top: 1rem; }
.btn { display: inline-block; padding: .55rem 1rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
.btn:hover { border-color: var(--brand); color: var(--brand); }
@media (max-width: 560px) { .book-head { flex-direction: column; align-items: flex-start; } }
.book-for select { display: inline-block; width: auto; min-width: 16rem; margin: 0; }
.dayoff-form label { margin-bottom: 0; }
.dayoff-form input, .dayoff-form select { width: auto; margin-top: 0; }
.inline-form .check, .book-for .check { margin: 0; font-weight: 400; }
.dayoff-form .part-day { align-self: center; margin-bottom: .4rem; }
.part-times { display: contents; }
.part-times[hidden] { display: none; }
.team-notice { background: #fff4e0; color: #5c3b00; border-left: 4px solid #e0a030; border-radius: 6px; padding: .8rem 1rem; margin: .8rem 0 1rem; line-height: 1.5; }
.team-notice ul { margin: .3rem 0 .3rem 1.2rem; padding: 0; }
.who-pick { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .6rem 0 .2rem; }
.who-pick span { font-weight: 600; margin-right: .2rem; }
.chip { padding: .35rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.slot small { display: block; font-size: .72rem; opacity: .85; margin-top: .1rem; }
.slot.one { border-style: dashed; }
.warn-text { color: #7a4b00; }
.inline-edit input[name=email] { min-width: 15rem; }
.sub-h { font-size: .95rem; margin: 1.2rem 0 .2rem; }
.day-hours { width: auto; margin: .4rem 0 .6rem; }
.day-hours input { width: 5.5rem; margin: 0; }

/* menu: Ticketing dropdown */
.top nav { align-items: center; }
.top nav > a.here, .navdrop.here > summary { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.navdrop { position: relative; }
.navdrop > summary { list-style: none; cursor: pointer; color: #fff; user-select: none; }
.navdrop > summary::-webkit-details-marker { display: none; }
.navdrop .caret { font-size: .7rem; opacity: .85; }
.navmenu { position: absolute; top: calc(100% + .6rem); left: -.6rem; z-index: 50; min-width: 12rem; background: #fff;
           border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: .35rem 0; }
.top .navmenu a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem 1rem; color: var(--ink); white-space: nowrap; }
.top .navmenu a:hover { background: var(--bg); color: var(--brand); }
.nav-badge { display: inline-block; min-width: 1.2rem; padding: 0 .35rem; margin-left: .2rem; border-radius: 999px;
             background: #fff; color: var(--brand); font-size: .72rem; font-weight: 700; text-align: center; line-height: 1.2rem; }

/* IT requests */
.req-wrap { max-width: 780px; margin: 0 auto; }
.req-form .req-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.2rem 1.1rem; margin: 0 0 1rem; }
.req-card h2 { font-size: 1.05rem; margin: .1rem 0 .8rem; display: flex; align-items: center; gap: .5rem; }
.req-card .num { display: inline-flex; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--brand); color: #fff;
                 align-items: center; justify-content: center; font-size: .85rem; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.narrow-field { max-width: 14rem; }
.radio-row { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin-bottom: .8rem; }
.req-cat { border: 0; padding: 0; margin: 0 0 1rem; }
.req-cat legend { font-weight: 700; font-size: .9rem; color: var(--brand-dark); margin-bottom: .4rem; }
.tick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .45rem; }
label.tick { display: flex; align-items: center; gap: .55rem; margin: 0; padding: .55rem .7rem; border: 1px solid var(--line);
             border-radius: 8px; background: #fff; font-weight: 400; cursor: pointer; }
label.tick input { width: auto; margin: 0; transform: scale(1.2); accent-color: var(--brand); }
label.tick:has(input:checked) { border-color: var(--brand); background: #fbf1f2; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.big-btn { font-size: 1.05rem; padding: .7rem 1.8rem; }
.confirm-list { text-align: left; display: inline-block; margin: .4rem 0 1rem; }
textarea { width: 100%; font: inherit; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 6px; }
.req-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-bottom: .6rem; }
.req-top h1 { margin: 0; }
.form-link { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.form-link input { width: auto; min-width: 20rem; margin: 0; font-size: .85rem; background: var(--bg); }
.req-status { display: inline-block; padding: .1rem .6rem; border-radius: 999px; font-size: .8rem; color: #fff; background: #6b7280; white-space: nowrap; }
.req-status.s-new { background: #1d6fd8; }
.req-status.s-waiting-for-info { background: #b7791f; }
.req-status.s-approved { background: var(--brand); }
.req-status.s-ordered { background: #6b4bb8; }
.req-status.s-done { background: #1e7b34; }
.pill.reply { background: #fff4e0; color: #7a4b00; border: 1px solid #e0a030; font-size: .7rem; margin-left: .3rem; }
tr.has-reply td { background: #fffaf0; }
td.late, dd.late { color: var(--brand-dark); font-weight: 600; }
td.what { max-width: 22rem; }
.req-detail, .req-items { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .8rem 1.1rem; margin: 1rem 0; }
.req-detail dl { display: grid; grid-template-columns: 8rem 1fr; gap: .35rem 1rem; margin: 0; }
.req-detail dt { color: var(--muted); }
.req-detail dd { margin: 0; }
.req-detail dd.pre { white-space: pre-wrap; }
.req-items h2 { font-size: 1.05rem; margin: .2rem 0 .6rem; }
.item-row { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.item-row .tickbox { width: 1.6rem; height: 1.6rem; padding: 0; display: inline-flex; align-items: center; justify-content: center;
                     border: 2px solid var(--brand); color: #fff; font-weight: 700; }
.item-row.done .tickbox { background: #1e7b34; border-color: #1e7b34; }
.item-row.done .item-name { text-decoration: line-through; color: var(--muted); }
.add-item { margin-top: .6rem; }
@media (max-width: 640px) { .two { grid-template-columns: 1fr; } .form-link input { min-width: 0; width: 100%; } }
.navdrop > summary .nav-badge { margin-left: .15rem; }
.menu-count { margin-left: auto; font-size: .75rem; color: var(--brand); font-weight: 600; }
.nav-badge[hidden], .menu-count[hidden] { display: none; }
@keyframes badge-pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,.9); }
                         50% { transform: scale(1.35); box-shadow: 0 0 0 6px rgba(255,255,255,0); }
                         100% { transform: scale(1); } }
.nav-badge.pulse { animation: badge-pulse .9s ease-out 2; }
.email-tip { background: #fff4e0; color: #5c3b00; border-left: 4px solid #e0a030; border-radius: 6px; padding: .55rem .8rem; font-size: .85rem; margin: .2rem 0 0; }

/* employees & assets */
.btn.primary-btn { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn.primary-btn:hover { background: var(--brand-dark); color: #fff; }
.tag { display: inline-block; font-size: .68rem; font-weight: 700; padding: 0 .35rem; margin-left: .3rem; border-radius: 4px;
       background: #eef4fd; color: #184f95; vertical-align: middle; }
.person-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
.person-grid .card { margin: 0 0 1rem; }
.side-col .card h2, .person-grid .card h2 { font-size: 1.05rem; margin: .1rem 0 .7rem; }
.emp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.emp-form .wide { grid-column: 1 / -1; }
.emp-form .checks { display: flex; gap: 1.2rem; align-items: center; margin-bottom: .8rem; }
.emp-form .checks .check { margin: 0; }
.form-actions { display: flex; justify-content: flex-end; }
.danger-row { margin-top: .6rem; text-align: right; }
.kit-row { padding: .4rem 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; }
.kit-row:first-of-type { border-top: 0; }
.kit-icon { font-size: 1.05rem; }
.kit-icon.big { font-size: 1.4rem; }
.side-col .inline-form select { flex: 1; min-width: 12rem; margin: 0; }
.asset-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.asset-filters input, .asset-filters select { width: auto; margin: 0; }
.asset-filters input[name=q] { min-width: 18rem; }
.results-line { margin: .2rem 0 .6rem; }
.list th a { color: inherit; }
.astatus { display: inline-block; padding: .1rem .6rem; border-radius: 999px; font-size: .78rem; white-space: nowrap; }
.astatus.s-in-stores { background: #e3f9e5; color: #1b6b32; }
.astatus.s-assigned { background: #fff4d6; color: #8a5a00; }
.astatus.s-allocated { background: #eef4fd; color: #184f95; }
.astatus.s-retired { background: #e4e7eb; color: #4b5563; }
.move-form { display: flex; gap: .5rem; align-items: flex-end; margin-bottom: .7rem; }
.move-form label { flex: 1; margin: 0; }
.move-form select, .move-form input { margin-top: .2rem; }
.retire summary { cursor: pointer; color: var(--brand-dark); font-size: .9rem; margin: .4rem 0; }
.danger-btn { border-color: var(--brand-dark); color: var(--brand-dark); }
.bitlocker-note { background: var(--bg); border-radius: 6px; padding: .5rem .7rem; margin-bottom: .8rem; }
.lists-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; align-items: start; }
.lists-grid .card { margin: 0; }
.list-item { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; border-top: 1px solid var(--line); }
.list-item span { flex: 1; }
.icon-input { width: 2.6rem !important; text-align: center; padding: .2rem !important; margin: 0 !important; font-size: 1rem; }
.icon-input::placeholder { opacity: .45; }
@media (max-width: 860px) { .person-grid { grid-template-columns: 1fr; } .emp-form { grid-template-columns: 1fr; } }

/* starters & leavers */
.job-boards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
.job-col { background: #f4f5f7; border-radius: 10px; padding: .9rem; }
.job-col-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.job-col-head h2 { margin: .2rem 0; font-size: 1.1rem; }
.new-job { position: relative; }
.new-job summary { list-style: none; cursor: pointer; }
.new-job summary::-webkit-details-marker { display: none; }
.new-job-form { position: absolute; right: 0; top: 2.6rem; z-index: 5; width: 300px; background: #fff; border: 1px solid var(--line);
                border-radius: 10px; padding: 1rem; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.job-card { display: block; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 8px;
            padding: .7rem .9rem; margin-bottom: .6rem; color: var(--ink); }
.job-card:hover { text-decoration: none; border-color: var(--brand); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.job-card.overdue { border-left-color: #d97706; }
.job-card-top { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.job-date { font-size: .82rem; white-space: nowrap; }
.late { color: #b45309; font-weight: 600; }
.job-progress { height: 6px; background: #e5e7eb; border-radius: 999px; overflow: hidden; margin: .5rem 0 .3rem; }
.job-progress span { display: block; height: 100%; background: var(--brand); transition: width .25s; }
.job-progress.big { height: 10px; }
.all-done { color: #1b6b32; font-weight: 600; }
.task-row { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; border-top: 1px solid var(--line); }
.task-row:first-child { border-top: 0; }
.task-row .tick-form { flex: 1; }
.task-check { display: flex; align-items: center; gap: .6rem; margin: 0; font-weight: 400; cursor: pointer; }
.task-check input { width: 1.1rem; height: 1.1rem; margin: 0; flex: none; accent-color: var(--brand); }
.task-row.complete .task-check span { text-decoration: line-through; color: var(--muted); }
.add-task { display: flex; gap: .5rem; margin: .8rem 0 .5rem; }
.add-task input { margin: 0; }
.add-task button { white-space: nowrap; }
.tpl-layout { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; align-items: start; }
.tpl-roles h2 { font-size: 1rem; margin: 0 0 .5rem; }
.tpl-roles > a { display: flex; justify-content: space-between; padding: .35rem .6rem; border-radius: 6px; color: var(--ink); }
.tpl-roles > a:hover { background: #fbf4f5; text-decoration: none; }
.tpl-roles > a.on { background: var(--brand); color: #fff; }
.tpl-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.tpl-lists .card h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.copy-row { margin-top: .7rem; }
.req-actions-bar { background: #eef4fd; border-radius: 8px; padding: .6rem .9rem; margin: 0 0 1rem; display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.req-actions-bar form { display: flex; gap: .5rem; align-items: center; }
.req-actions-bar select { width: auto; margin: 0; }
@media (max-width: 860px) { .job-boards, .tpl-layout, .tpl-lists { grid-template-columns: 1fr; } }

/* vault, account */
.pre { white-space: pre-wrap; }
.mono { font-family: Consolas, "Cascadia Mono", Menlo, monospace; font-size: .92em; }
.vault-card { max-width: 520px; }
.vault-actions { display: flex; gap: .6rem; align-items: center; }
.vault-list .pw { display: inline-block; min-width: 8rem; }
.vault-list td { vertical-align: middle; }
.vault-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; align-items: start; }
.vault-foot summary { cursor: pointer; }
.vault-form-card { max-width: 760px; }
.pw-input { display: flex; gap: .4rem; margin-top: .25rem; }
.pw-input input { margin: 0; }
.pw-input button { white-space: nowrap; font-size: .85rem; }
.bl-key { background: #fff8e1; border: 1px dashed #d9a400; border-radius: 6px; padding: .5rem .7rem; margin: .3rem 0 .6rem; word-break: break-all; }
.vault-open-dot { font-size: .8rem; margin-left: .1rem; }
.steps { padding-left: 1.2rem; }
.steps li { margin-bottom: 1rem; }
.qr-box { background: #fff; display: table; padding: .3rem; border: 1px solid var(--line); border-radius: 8px; margin: .5rem 0; }
.qr-box svg { display: block; }
.setup-key { display: table !important; font-size: 1.05rem; letter-spacing: .05em; background: var(--bg); padding: .4rem .6rem; border-radius: 6px; display: inline-block; margin-top: .2rem; }
.top a.who { color: #fff; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.6); }

/* home dashboard */
.home-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.home-head h1 { margin: 0; }
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.tile { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-top: 4px solid #cbd5e1; border-radius: 10px;
        padding: .7rem .9rem; color: var(--ink); line-height: 1.3; }
.tile:hover { text-decoration: none; border-color: var(--brand); }
.tile .n { font-size: 1.9rem; font-weight: 700; }
.tile small { color: var(--muted); margin-top: .25rem; font-size: .76rem; }
.tile.hot { border-top-color: var(--brand); }
.tile.hot .n { color: var(--brand); }
.tile.warn { border-top-color: #d97706; }
.away-bar { background: #fff8e1; border-radius: 8px; padding: .5rem .9rem; margin-bottom: 1rem; font-size: .9rem; }
.home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.home-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.home-row .push { margin-left: auto; display: inline-flex; gap: .4rem; align-items: center; }
.home-grid .card, .cal-card { padding: 1rem 1.1rem; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin-bottom: .4rem; }
.card-head h2 { font-size: 1.05rem; margin: 0; }
.card-head > a, .card-head .cal-nav a { font-size: .85rem; }
.home-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; padding: .45rem .3rem; border-top: 1px solid var(--line); color: var(--ink); border-radius: 4px; }
.home-row:first-of-type { border-top: 0; }
.home-row:hover { background: #fbf4f5; text-decoration: none; }
.home-row .req-status { font-size: .7rem; padding: 0 .45rem; }
.job-progress.slim { display: inline-block; width: 70px; height: 5px; margin: 0; vertical-align: middle; }
.kind-tag { font-size: .7rem; font-weight: 700; padding: 0 .4rem; border-radius: 4px; }
.kind-tag.starter { background: #e3f9e5; color: #1b6b32; }
.kind-tag.leaver { background: #fdecee; color: var(--brand-dark); }
.today-tag { color: var(--brand); font-weight: 700; }
.chips-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.count-chip { border: 1px solid var(--line); border-radius: 999px; padding: .15rem .7rem; font-size: .85rem; color: var(--ink); background: #fff; }
.count-chip:hover { border-color: var(--brand); text-decoration: none; }
.small-head { font-size: .85rem; margin: .9rem 0 .2rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.cal-nav { display: flex; gap: .8rem; }
.cal-key { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .5rem; }
.cal-key .ev { display: inline-block; }
table.cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal th { font-size: .75rem; color: var(--muted); text-transform: uppercase; padding: .3rem; text-align: left; }
.cal td { border: 1px solid var(--line); height: 92px; vertical-align: top; padding: .25rem; overflow: hidden; }
.cal td.blank { background: #fafbfc; }
.cal td.today { background: #fff7f8; box-shadow: inset 0 0 0 2px var(--brand); }
.cal .dn { font-size: .78rem; color: var(--muted); font-weight: 600; }
.ev { display: block; font-size: .72rem; line-height: 1.3; padding: .05rem .35rem; border-radius: 4px; margin-top: 2px; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.ev:hover { text-decoration: none; filter: brightness(.95); }
.ev.starter { background: #e3f9e5; }
.ev.leaver { background: #fdecee; }
.ev.booking { background: #eef4fd; }
.ev.warranty { background: #fff4d6; }
.ev.away { background: #eceff3; color: #4b5563; }

/* tips & updates */
.tip-card { margin-bottom: .6rem; padding: .8rem 1.1rem; }
.tip-card > summary { cursor: pointer; display: flex; gap: .6rem; align-items: baseline; }
.tip-body { margin: .6rem 0; line-height: 1.55; }
.tip-edit summary { cursor: pointer; color: var(--brand); }
.tip-form { margin-top: .6rem; }
.tip-form textarea { width: 100%; font: inherit; padding: .5rem; border: 1px solid var(--line); border-radius: 6px; }
.tip-actions { justify-content: space-between; }
.update-run { margin-bottom: 1rem; }
.update-run .task-row.complete { display: none; }
.update-run.show-ticked .task-row.complete { display: flex; }
.show-done { display: inline-flex !important; gap: .3rem; align-items: center; font-weight: 400; margin: 0; }
.show-done input { width: auto; margin: 0; }

@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .home-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .tiles { grid-template-columns: 1fr 1fr; } .home-grid, .vault-foot { grid-template-columns: 1fr; }
  .cal td { height: 60px; } .ev { font-size: 0; height: 6px; padding: 0; } .cal-key .ev { font-size: .72rem; height: auto; padding: .05rem .35rem; } }

/* ===================================================================== layout v2: sidebar
   One bold idea: the sidebar's red "main" runs down the menu like sprinkler pipework,
   and the page you're on is the head lit up on it. Everything else stays quiet. */
:root {
  --ink: #1d232a;
  --muted: #5f6873;
  --line: #e1e4e8;
  --bg: #eef0f3;
  --steel: #22282f;
  --steel-2: #2c333b;
  --steel-ink: #c3cad2;
  --side-w: 248px;
}
body { font: 15px/1.5 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; }
h1, h2 { font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; letter-spacing: -.01em; }
h1 { font-size: 1.55rem; font-weight: 650; margin: .1rem 0 .8rem; }
h2 { font-weight: 650; }
.n, .nav-badge, .count, .tile .n { font-variant-numeric: tabular-nums; }

body.app { padding-left: var(--side-w); }
.side { position: fixed; inset: 0 auto 0 0; width: var(--side-w); background: var(--steel); color: var(--steel-ink);
        display: flex; flex-direction: column; z-index: 60; }
.side .brand { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.1rem .9rem; color: #fff; font-weight: 650; }
.side .brand:hover { text-decoration: none; }
.side .brand img { height: 34px; width: auto; display: block; }
.side .brand span { border-left: 1px solid rgba(255,255,255,.3); padding-left: .7rem; line-height: 1.15; font-size: .98rem; }
.side-nav { position: relative; flex: 1; overflow-y: auto; padding: .4rem .6rem 1rem 1.4rem; }
.side-nav::before { content: ""; position: absolute; left: 1.15rem; top: .9rem; bottom: 1rem; width: 2px;
                    background: linear-gradient(var(--brand), rgba(188,35,54,.35)); border-radius: 2px; }
.nav-group { font-size: .76rem; color: #8b949e; margin: .85rem 0 .2rem .9rem; font-weight: 600; }
.nav-item { position: relative; display: flex; align-items: center; gap: .65rem; padding: .36rem .6rem .36rem .9rem; margin: 1px 0;
            border-radius: 7px; color: var(--steel-ink); font-size: .92rem; }
.nav-item:hover { background: var(--steel-2); color: #fff; text-decoration: none; }
.nav-item .ic { width: 18px; height: 18px; flex: none; opacity: .8; }
.nav-item .nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item.here { background: #fff; color: var(--ink); font-weight: 600; }
.nav-item.here .ic { opacity: 1; color: var(--brand); }
.nav-item.here::before { content: ""; position: absolute; left: -.48rem; top: 50%; width: 10px; height: 10px; margin-top: -5px;
                         border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--steel), 0 0 0 5px rgba(188,35,54,.45); }
.nav-item .nav-badge { margin: 0; background: var(--brand); color: #fff; font-size: .74rem; font-weight: 700; min-width: 1.35rem; text-align: center; }
.nav-item.here .nav-badge { background: var(--brand); color: #fff; }
.nav-note { font-size: .72rem; padding: 0 .4rem; border-radius: 999px; }
.nav-note.open { background: #fff4d6; color: #7a5200; }
.side-foot { display: flex; align-items: center; gap: .4rem; padding: .7rem .8rem; border-top: 1px solid rgba(255,255,255,.08); }
.side-foot .who { flex: 1; display: flex; align-items: center; gap: .6rem; color: #fff; min-width: 0; border: 0; padding: .3rem; border-radius: 7px; }
.side-foot .who:hover { background: var(--steel-2); text-decoration: none; }
.side-foot .who small { display: block; color: #8b949e; font-size: .74rem; }
.side-foot .who > span:last-child { line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 8px; border: 0; background: transparent; color: inherit; }
.icon-btn .ic, .menu-btn .ic { width: 20px; height: 20px; }
.side-foot .icon-btn { color: var(--steel-ink); }
.side-foot .icon-btn:hover { background: var(--steel-2); color: #fff; }
.ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.shell { min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: .8rem; height: 50px; padding: 0 1.6rem;
          background: rgba(238,240,243,.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.topbar .status { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.menu-btn { display: none; }
.chip { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; padding: .15rem .65rem; border-radius: 999px; background: #fff;
        border: 1px solid var(--line); color: var(--muted); white-space: nowrap; cursor: default; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.green { color: #1e6b3a; }
.chip.amber { color: #8a5a00; background: #fff8e6; border-color: #f1dca8; }
.chip.red { color: var(--brand-dark); background: #fdecee; border-color: #f4c4cb; }
.chip.blue { color: #184f95; background: #eef4fd; border-color: #c8dbf6; }
.alert { margin: 1rem 1.6rem 0; padding: .6rem .9rem; border-radius: 8px; font-size: .9rem; }
.alert.bad { background: #fdecee; color: var(--brand-dark); }
.alert.warn { background: #fff4e0; color: #7a4b00; }
main { max-width: 1280px; margin: 0; padding: 1.4rem 1.6rem 3rem; }
body:not(.app) main { margin: 0 auto; }

/* quieter surfaces: panels get a hairline, no heavy boxes */
.card { border-radius: 10px; border-color: var(--line); box-shadow: 0 1px 1px rgba(29,35,42,.03); }
button { border-radius: 8px; padding: .42rem .95rem; }
.btn { border-radius: 8px; }
input, select, textarea { border-radius: 8px; }
table.list { border-radius: 10px; }
.list th { text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 600; background: #f7f8fa; }
.small-head { text-transform: none; letter-spacing: 0; font-weight: 600; }
.cal th { text-transform: none; }
.tab { border-radius: 8px; }
.flash { border-radius: 8px; }

/* home: one summary strip instead of six boxes */
.tiles { gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tile { border: 0; border-left: 1px solid var(--line); border-radius: 0; border-top: 3px solid transparent; padding: .8rem 1rem .9rem; }
.tile:first-child { border-left: 0; }
.tile:hover { background: #fafbfc; border-color: var(--line); border-top-color: transparent; }
.tile.hot { border-top-color: var(--brand); }
.tile.warn { border-top-color: #d97706; }
.tile .n { font-size: 2rem; line-height: 1.1; font-weight: 650; }
.home-grid .card, .cal-card { padding: 1rem 1.15rem; }
.card-head { border-bottom: 1px solid var(--line); padding-bottom: .55rem; margin-bottom: .3rem; }
.home-row:first-of-type { border-top: 0; }

@media (max-width: 900px) {
  body.app { padding-left: 0; }
  .side { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.25); }
  body.nav-open .side { transform: none; }
  .side-scrim { display: none; }
  body.nav-open .side-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 55; }
  .menu-btn { display: inline-grid; }
  .topbar { padding: 0 .8rem; }
  .alert { margin: .8rem .8rem 0; }
  main { padding: 1rem .9rem 3rem; }
  .tile { border-left: 0; border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { .side { transition: none; } .nav-badge.pulse { animation: none; } }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.side a:focus-visible, .side button:focus-visible { outline-color: #fff; }
.nav-admin { margin-top: .7rem; }
.nav-admin > summary { list-style: none; cursor: pointer; }
.nav-admin > summary::-webkit-details-marker { display: none; }
.nav-admin > summary .caret { font-size: .7rem; opacity: .7; transition: transform .15s; }
.nav-admin[open] > summary .caret { transform: rotate(180deg); }
.nav-admin > a.nav-item { padding-left: 1.5rem; }
.nav-admin .admin-here { color: #fff; }

/* who's asking (ticket) */
.who-panel { display: grid; grid-template-columns: minmax(200px, 1.1fr) 1.4fr 1.2fr 1.2fr; gap: 1.2rem; background: #fff; border: 1px solid var(--line);
             border-radius: 10px; padding: .9rem 1.1rem; margin: 0 0 1rem; }
.who-main { display: flex; gap: .7rem; align-items: flex-start; }
.avatar.big { width: 40px; height: 40px; font-size: 1.05rem; }
.avatar.grey { background: #9aa3ad; }
.who-label { font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: .3rem; }
.who-col { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.kit-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .84rem; color: var(--ink); background: #f4f5f7; border-radius: 6px;
            padding: .12rem .5rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kit-chip:hover { background: #fbf4f5; text-decoration: none; }
.kit-chip.expired { background: #fff4e0; }
.warn-dot { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #d97706; color: #fff; font-size: .68rem; font-weight: 700; }
.mini-link { font-size: .84rem; color: var(--ink); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-link:hover { color: var(--brand); }
@media (max-width: 1100px) { .who-panel { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .who-panel { grid-template-columns: 1fr; } }

/* saved replies picker */
.saved-pick { display: flex; align-items: center; gap: .6rem; margin: .2rem 0 .5rem; }
.saved-pick select { width: auto; min-width: 16rem; margin: 0; font-size: .9rem; padding: .3rem .5rem; }
code { background: #f1f3f5; padding: 0 .3rem; border-radius: 4px; font-size: .88em; }

/* renewals */
.ren-summary { display: flex; flex-wrap: wrap; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 1rem; }
.ren-summary > div { flex: 1; min-width: 140px; padding: .7rem 1rem; border-left: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.ren-summary > div:first-child { border-left: 0; }
.ren-summary .n { display: block; font-size: 1.6rem; font-weight: 650; color: var(--ink); line-height: 1.15; }
.ren-summary .n.late { color: var(--brand); }
.ren-summary .n.due-n { color: #b45309; }
.ren-flag { display: inline-block; font-size: .74rem; font-weight: 600; padding: 0 .45rem; border-radius: 999px; margin-left: .3rem; }
.ren-flag.overdue { background: #fdecee; color: var(--brand-dark); }
.ren-flag.due { background: #fff4d6; color: #8a5a00; }
.ren-flag.ended { background: #eceff3; color: #4b5563; }
tr.ren-ended td { color: var(--muted); }
.inline-check { display: inline-flex !important; align-items: center; gap: .35rem; margin: 0; font-weight: 400; white-space: nowrap; }
.inline-check input { width: auto; margin: 0; }
.ren-when { text-align: right; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .6rem 1rem; min-width: 160px; }
.ren-when strong { display: block; font-size: 1.25rem; }
.ren-when.ren-overdue { border-color: #f4c4cb; background: #fdf3f4; }
.ren-when.ren-overdue .small { color: var(--brand-dark); font-weight: 600; }
.ren-when.ren-due { border-color: #f1dca8; background: #fffaf0; }
.ren-renewed label { margin: .4rem 0 .6rem; }
.ren-end { margin-top: .6rem; }
.file-row { display: flex; align-items: center; gap: .5rem; padding: .45rem 0; border-top: 1px solid var(--line); }
.file-row:first-of-type { border-top: 0; }
.file-open { flex: 1; display: flex; gap: .6rem; align-items: center; color: var(--ink); min-width: 0; }
.file-open:hover { text-decoration: none; color: var(--brand); }
.file-open > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.file-open strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-kind { flex: none; width: 40px; height: 46px; border-radius: 5px; display: grid; place-items: end center; padding-bottom: 5px;
             font-size: .64rem; font-weight: 700; color: #fff; background: #6b7280; position: relative; }
.file-kind.pdf { background: #c0392b; }
.file-kind.img { background: #2f7d6d; }
.file-kind.doc { background: #2f5fa7; }
.file-kind::before { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 10px 10px 0; border-color: transparent #fff transparent transparent; opacity: .9; }
.upload-form { display: flex; gap: .5rem; align-items: center; margin-top: .7rem; flex-wrap: wrap; }
.upload-form input[type=file] { flex: 1; min-width: 12rem; margin: 0; padding: .3rem; font-size: .85rem; }
.viewer-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.viewer-head h1 { margin: 0; font-size: 1.25rem; word-break: break-word; }
.viewer-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.viewer-actions select { width: auto; margin: 0; }
.doc-frame { width: 100%; height: calc(100vh - 190px); min-height: 520px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.img-frame { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1rem; text-align: center; }
.img-frame img { max-width: 100%; height: auto; }
.ev.renewal { background: #efe9fb; }
.nav-item .nav-badge.amber { background: #d97706; }
.morning-form { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.morning-form label { margin: 0; display: inline-flex; align-items: center; gap: .4rem; }
.morning-form input[type=time] { width: auto; margin: 0; }
.fix-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem 1rem; border-top: 1px solid var(--line); background: #fafbfc; border-radius: 0 0 8px 8px; }
.fix-remove { margin-top: .2rem; }
.replaces { background: #fafbfc; border: 1px dashed var(--line); border-radius: 8px; padding: .5rem .7rem; margin: .2rem 0 .7rem; }
.removed-fixes { margin-top: 1rem; }
.removed-fixes summary { cursor: pointer; }
.fix-removed-note { margin: 0 0 .5rem; }

/* search, outages, new ticket, merge */
.side-search { padding: 0 .9rem .5rem; }
.side-search input { margin: 0; background: var(--steel-2); border: 1px solid transparent; color: #fff; font-size: .88rem; padding: .4rem .7rem; }
.side-search input::placeholder { color: #8b949e; }
.side-search input:focus { outline: none; border-color: #fff; }
.big-search { margin-bottom: 1rem; }
.big-search input { width: min(520px, 100%); }
.search-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 1rem; align-items: start; }
.search-grid .card { padding: 1rem 1.1rem; }
.alert.outage { background: #fff4e0; color: #7a4b00; border-left: 4px solid #d97706; }
.outage-strip { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: #fff4e0; border: 1px solid #f1dca8;
                border-radius: 8px; padding: .5rem .9rem; margin-bottom: .8rem; color: #7a4b00; }
.outage-strip.fixed { background: #eef7f0; border-color: #cfe7d6; color: #1e6b3a; }
.outage-link-form { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; color: var(--muted); }
.outage-link-form select { width: auto; margin: 0; font-size: .85rem; padding: .2rem .4rem; }
.outage-card { display: block; color: var(--ink); margin-bottom: .7rem; border-left: 4px solid #d97706; }
.outage-card:hover { text-decoration: none; border-color: #d97706; }
.known-problem { background: #fff4e0; border-left: 4px solid #d97706; border-radius: 8px; padding: .7rem 1rem; margin: 0 0 1rem; color: #5c3b00; }
.merged-banner { background: #eef4fd; }
.merge-form label { margin-bottom: .6rem; }
.other-who .inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }

/* Kit audit (Assets > Audit) - made for a phone */
.audit-box { margin-bottom: 1rem; max-width: 760px; }
.audit-start { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; margin-bottom: .8rem; }
.audit-start label { flex: 1 1 260px; display: flex; flex-direction: column; gap: .25rem; font-weight: 600; }
.audit-start select { font-size: 1rem; padding: .55rem; }
.big-btn { font-size: 1rem; padding: .65rem 1.4rem; }
.audit-pick { display: flex; flex-direction: column; padding: .6rem .2rem; border-bottom: 1px solid var(--line); color: var(--ink); }
.audit-pick:last-child { border-bottom: 0; }
.audit-pick:hover { text-decoration: none; background: var(--bg); }
.bad-text { color: var(--brand-dark); font-weight: 600; }
.audit-progress { font-size: 1.05rem; }
.audit-list { list-style: none; padding: 0; margin: 0 0 1rem; max-width: 760px; }
.audit-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem;
  background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--line); border-radius: 10px;
  padding: .75rem .9rem; margin-bottom: .55rem; scroll-margin-top: 80px; }
.audit-item.is-seen { border-left-color: #1b8a3c; background: #f0faf3; }
.audit-item.is-missing { border-left-color: var(--brand); background: #fdf0f2; }
.audit-what { display: flex; align-items: center; gap: .7rem; min-width: 0; flex: 1 1 220px; }
.audit-btns { display: flex; gap: .5rem; flex: 0 0 auto; }
.audit-btns button { min-width: 7.2rem; min-height: 3rem; font-size: 1rem; font-weight: 600; border-width: 2px; }
.audit-seen { border-color: #1b8a3c; color: #1b8a3c; }
.audit-missing { border-color: var(--brand); color: var(--brand); }
.is-seen .audit-seen { background: #1b8a3c; color: #fff; }
.is-missing .audit-missing { background: var(--brand); color: #fff; }
.audit-result { font-weight: 700; }
.is-missing .audit-result { color: var(--brand-dark); }
.is-seen .audit-result { color: #1b8a3c; }
.audit-finish { margin: 1.2rem 0 .6rem; max-width: 760px; }
@media (max-width: 600px) {
  .audit-btns { width: 100%; }
  .audit-btns button { flex: 1; }
}