/* Redepos Support web UI — dark only, tokens from the approved mockups. */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: #0e1013;
  color: #e7eaee;
  font-size: 14px;
}
a { color: #9ecbff; text-decoration: none; }
a:hover { color: #c4dfff; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
@keyframes flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.flash { animation: flash 1.2s infinite; }
.mono { font-family: ui-monospace, Consolas, monospace; }

.shell { min-height: 100vh; display: flex; flex-direction: column; }
.page { flex-grow: 1; padding: 0 28px 24px; }

/* Top bar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; border-bottom: 1px solid #262b33; background: #101318;
  gap: 14px; flex-wrap: wrap;
}
/* A link back to the board, but it must not read as one: colour is pinned
   against the global blue anchor rule. */
.brand { display: flex; align-items: baseline; gap: 14px; color: #e7eaee; }
.brand:hover .brand-name { color: #fff; }
.brand-name { font-weight: 700; font-size: 22px; letter-spacing: -0.4px; }
.brand-name span { color: #8b94a1; font-weight: 500; }
/* RED red, EPOS white, SUPPORT muted. */
.brand-name .brand-red { color: #f4564e; font-weight: 700; }
.brand-url { color: #8b94a1; font-size: 13px; }
.topbar-right { display: flex; align-items: center; gap: 18px; }
.tabs { display: flex; gap: 4px; background: #15181d; border: 1px solid #262b33; border-radius: 8px; padding: 4px; }
.tab { padding: 6px 14px; border-radius: 6px; color: #8b94a1; font-size: 13px; }
.tab:hover { color: #c9ced6; }
.tab.active { background: #262b33; color: #e7eaee; font-weight: 600; }
.signout-form { margin: 0; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: #1b1f26;
  border: 1px solid #262b33; font-size: 13px; font-weight: 600; color: #e7eaee;
}
.avatar:hover { background: #262b33; }

/* Toolbar (chips, group, search, new job) */
.toolbar { display: flex; align-items: center; gap: 12px; padding: 16px 0; flex-wrap: wrap; }
.chipset { display: flex; gap: 4px; background: #15181d; border: 1px solid #262b33; border-radius: 8px; padding: 4px; }
.chip { padding: 5px 12px; border-radius: 6px; color: #8b94a1; font-size: 12px; }
.chip:hover { color: #c9ced6; }
.chip.active { background: #262b33; color: #e7eaee; font-weight: 600; }
.chip.chip-overdue { color: #f4564e; font-weight: 600; }
.chip.chip-overdue.active { background: #262b33; }
.chip-label { padding: 5px 4px 5px 12px; color: #8b94a1; font-size: 12px; }
.toolbar-spacer { flex-grow: 1; }
.search-form { display: flex; }
.search-input {
  background: #15181d; border: 1px solid #262b33; border-radius: 8px;
  padding: 8px 14px; width: 220px; color: #e7eaee; font-size: 13px;
}
.search-input::placeholder { color: #8b94a1; }
.btn-primary {
  display: inline-block; background: #e7eaee; color: #0e1013; border: 0;
  border-radius: 8px; padding: 9px 16px; font-size: 13px; font-weight: 600;
}
.btn-primary:hover { background: #fff; color: #0e1013; }
.btn {
  background: #1b1f26; border: 1px solid #262b33; border-radius: 7px;
  padding: 6px 11px; font-size: 12px; font-weight: 600; color: #e7eaee;
}
.btn:hover { background: #262b33; }
.btn-green { background: #34d17b; color: #06130b; border: 0; border-radius: 8px; padding: 10px 0; font-size: 13px; font-weight: 700; width: 100%; }
.btn-green:hover { background: #46e08c; }
.btn-danger {
  background: #f4564e; border: 0; border-radius: 7px;
  padding: 7px 14px; font-size: 12px; font-weight: 700; color: #fff;
}
.btn-danger:hover { background: #ff6d63; }

/* Ticket list */
.list-head {
  display: flex; gap: 12px; padding: 0 16px 8px; color: #7f8998;
  font-size: 11px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase;
}
.rows { display: flex; flex-direction: column; gap: 8px; }
.group-head { color: #8b94a1; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; padding: 10px 16px 0; text-transform: uppercase; }
.t-row {
  display: flex; align-items: center; gap: 12px; background: #15181d;
  border: 1px solid #262b33; border-left: 4px solid #262b33; border-radius: 10px;
  padding: 14px 16px; color: inherit;
}
a.t-row:hover { background: #1b1f26; color: inherit; }
.col-time { width: 90px; flex-shrink: 0; font-family: ui-monospace, Consolas, monospace; font-weight: 600; font-size: 14px; }
.col-type { width: 60px; flex-shrink: 0; }
.col-cust { width: 200px; flex-shrink: 0; font-weight: 600; font-size: 14px; }
.col-job { flex-grow: 1; font-size: 14px; color: #c9ced6; min-width: 0; }
.col-recv { width: 130px; flex-shrink: 0; color: #8b94a1; font-size: 12px; }
.col-meta { width: 92px; flex-shrink: 0; display: flex; justify-content: flex-end; align-items: center; gap: 4px; color: #7f8998; font-size: 12px; }
.job-sub { color: #8b94a1; font-size: 12px; }

/* Urgency: text colour on the countdown, left border on the row */
.c-green, .u-green { color: #34d17b; }
.c-yellow, .u-yellow { color: #f0b429; }
.c-red, .u-red { color: #f4564e; }
.u-flash { color: #f4564e; animation: flash 1.2s infinite; }
.c-overdue { color: #ff2d20; }
.u-overdue { color: #ff6d63; }
.t-row.u-green { border-left-color: #34d17b; }
.t-row.u-yellow { border-left-color: #f0b429; }
.t-row.u-red, .t-row.u-flash { border-left-color: #f4564e; }
/* urgency classes on the ROW drive the border only — not text colour/flash */
.t-row.u-green, .t-row.u-yellow, .t-row.u-red, .t-row.u-flash, .t-row.u-overdue { color: #e7eaee; animation: none; }
.t-row.u-overdue { border-left-color: #ff2d20; background: #1c1214; border-color: #5c2320; border-left-width: 4px; }
.t-row.u-trip { border-left-color: #f97316; }
.col-time.u-trip { color: #f97316; }
.t-row.row-hidden {
  background: #101318; border-style: dashed; border-left-width: 1px; opacity: 0.55;
}
.t-row.row-hidden .col-time { color: #7f8998; font-weight: 500; font-size: 13px; }
.t-row.row-done { border-left-color: #262b33; opacity: 0.75; }
.reason-chip {
  background: #ff2d20; color: #fff; border-radius: 6px; padding: 4px 6px;
  font-size: 10px; font-weight: 700; text-align: center; line-height: 1.2;
}
.bubble { display: flex; align-items: center; gap: 4px; }
.empty-note { color: #7f8998; padding: 24px 16px; font-size: 13px; }

/* Badges */
.badge { border-radius: 5px; padding: 3px 8px; font-size: 11px; font-weight: 600; white-space: nowrap; }
/* Magenta, not violet: violet sat too close to FIX's blue at badge size. */
.b-prg { background: rgba(232, 121, 249, 0.15); color: #e879f9; }
.b-fix { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }
.b-trip { background: rgba(249, 115, 22, 0.15); color: #f97316; }
/* Visits: DEMO teal, CALL OUT orange - both distinct from PRG and FIX. */
.b-demo { background: rgba(45, 212, 191, 0.15); color: #2dd4bf; }
.b-callout { background: rgba(249, 115, 22, 0.15); color: #f97316; }

/* Panels / forms */
.panel { background: #15181d; border: 1px solid #262b33; border-radius: 12px; padding: 14px 16px; }
.panel-inset { background: #101318; border: 1px solid #262b33; border-radius: 8px; }
.side-label { font-size: 11px; color: #7f8998; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; margin: 0 0 6px; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field label { font-size: 12px; color: #8b94a1; }
.input, textarea.input, select.input {
  background: #101318; border: 1px solid #262b33; border-radius: 8px;
  padding: 9px 12px; color: #e7eaee; font-size: 13px; width: 100%;
}
.input:focus { outline: 1px solid #38424f; }
textarea.input { resize: vertical; min-height: 74px; }
.banner-error {
  background: rgba(244, 86, 78, 0.12); border: 1px solid #5c2320; color: #ff6d63;
  border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px;
}
.banner-ok {
  background: rgba(52, 209, 123, 0.1); border: 1px solid #1f3d2a; color: #34d17b;
  border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px;
}
.hint { font-size: 11px; color: #7f8998; }

/* Login */
.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 70vh; }
.login-card { width: 340px; }
.login-card .panel { padding: 22px; }
.login-title { font-weight: 700; font-size: 20px; letter-spacing: -0.3px; margin: 0 0 4px; }
.login-sub { color: #8b94a1; font-size: 13px; margin: 0 0 18px; }

/* Ticket detail */
.detail-grid { display: flex; gap: 0; align-items: flex-start; }
.detail-main { flex-grow: 1; padding: 22px 28px 22px 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.detail-side { width: 340px; flex-shrink: 0; border-left: 1px solid #262b33; background: #101318; padding: 22px; display: flex; flex-direction: column; gap: 18px; margin-right: -28px; min-height: calc(100vh - 140px); }
.detail-title { display: flex; align-items: center; gap: 14px; padding: 18px 0 0; flex-wrap: wrap; }
.detail-title h1 { font-size: 18px; letter-spacing: -0.25px; font-weight: 700; margin: 0; }
.comment { background: #15181d; border: 1px solid #262b33; border-radius: 12px; padding: 14px 16px; }
.comment-head { display: flex; justify-content: space-between; margin-bottom: 5px; gap: 10px; }
.comment-author { font-size: 12px; font-weight: 600; color: #8b94a1; }
.comment-time { font-size: 12px; color: #7f8998; white-space: nowrap; }
.comment-body { font-size: 14px; color: #c9ced6; white-space: pre-wrap; overflow-wrap: break-word; }
.comment.k-system { background: #12161c; border-style: dashed; border-color: #38424f; padding: 12px 16px; }
.comment.k-system .comment-body { font-size: 12px; color: #8b94a1; }
.comment-form { display: flex; gap: 10px; align-items: flex-start; }
.comment-form textarea { flex-grow: 1; min-height: 46px; }
.btn-post { background: #e7eaee; color: #0e1013; border: 0; border-radius: 12px; padding: 13px 22px; font-size: 14px; font-weight: 600; }
.btn-post:hover { background: #fff; }
.deadline-big { font-family: ui-monospace, Consolas, monospace; font-size: 24px; font-weight: 600; }
.deadline-meta { font-size: 12px; color: #8b94a1; margin: 8px 0; }
.extend-btns { display: flex; gap: 5px; flex-wrap: wrap; }
/* A field with its own save button, stacked in a side panel. */
.stack-form { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }

/* Date-and-time field: the input, a calendar button, and what it now holds. */
.dt-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dt-row .input { flex: 1 1 200px; }
.pick-btn {
  background: #1b1f26; border: 1px solid #262b33; border-radius: 8px;
  padding: 8px 12px; font-size: 16px; line-height: 1; cursor: pointer;
}
.pick-btn:hover { background: #262b33; }
.pick-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.dt-echo { color: #38bdf8; font-size: 12px; font-weight: 600; white-space: nowrap; }
.kv { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; gap: 10px; }
.kv .k { color: #8b94a1; flex-shrink: 0; }
.kv .v { text-align: right; overflow-wrap: anywhere; }
.close-panel { background: rgba(18, 24, 18, 0.6); border: 1px solid #1f3d2a; border-radius: 12px; padding: 14px 16px; }
.close-panel h3 { font-size: 13px; font-weight: 600; color: #34d17b; margin: 0 0 8px; }
details.custom-extend { margin-top: 8px; }
details.custom-extend summary { cursor: pointer; font-size: 12px; color: #8b94a1; }
details.custom-extend .row { display: flex; gap: 6px; margin-top: 8px; }

/* Calendar */
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; flex-wrap: wrap; gap: 10px; }
.cal-title { font-weight: 700; font-size: 18px; }
.cal-nav { display: flex; gap: 4px; }
.cal-nav a { width: 30px; height: 30px; border: 1px solid #262b33; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #8b94a1; font-size: 14px; }
.cal-nav a:hover { background: #1b1f26; }
.legend { display: flex; gap: 14px; color: #8b94a1; font-size: 12px; align-items: center; flex-wrap: wrap; }
.legend .sw { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: -1px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cal-dow { color: #7f8998; font-size: 11px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; padding: 0 2px 6px; }
.cal-day {
  background: #15181d; border: 1px solid #262b33; border-radius: 10px;
  padding: 8px 10px 34px; min-height: 92px; position: relative;
}
.cal-day .d { font-size: 12px; color: #8b94a1; }
/* Bottom right of the day, always visible - a hover-only control is invisible
   on a touchscreen. */
.day-add {
  position: absolute; right: 8px; bottom: 8px;
  width: 28px; height: 28px; border-radius: 8px;
  background: #1b1f26; border: 1px solid #262b33; color: #8b94a1;
  font-size: 20px; line-height: 26px; text-align: center;
}
.day-add:hover { background: #38bdf8; border-color: #38bdf8; color: #0e1013; }
.cal-day.other { background: #101318; border-color: #1b1f26; }
.cal-day.other .d { color: #7f8998; }
.cal-day.today { border-color: #38424f; }
.cal-day.today .d { color: #e7eaee; font-weight: 700; }
.cal-entry { margin-top: 5px; border-radius: 5px; padding: 4px 7px; font-size: 11px; border-left: 3px solid #7f8998; display: block; color: inherit; overflow-wrap: anywhere; }
a.cal-entry:hover { filter: brightness(1.2); color: inherit; }
.e-trip { background: rgba(249, 115, 22, 0.16); border-left-color: #f97316; }
.e-demo { background: rgba(45, 212, 191, 0.15); border-left-color: #2dd4bf; }
.e-sched { background: rgba(139, 124, 246, 0.14); border-left-color: #8b7cf6; }
.e-green { background: rgba(52, 209, 123, 0.1); border-left-color: #34d17b; }
.e-yellow { background: rgba(240, 180, 41, 0.12); border-left-color: #f0b429; }
.e-red { background: rgba(244, 86, 78, 0.14); border-left-color: #f4564e; }
.e-hidden { background: none; border: 1px dashed #7f8998; border-radius: 5px; color: #8b94a1; }

/* Tables (customers, history) */
.table { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.table th { text-align: left; color: #7f8998; font-size: 11px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; padding: 0 12px 0; }
.table td { background: #15181d; border-top: 1px solid #262b33; border-bottom: 1px solid #262b33; padding: 12px; font-size: 13px; vertical-align: middle; }
.table td:first-child { border-left: 1px solid #262b33; border-radius: 10px 0 0 10px; }
.table td:last-child { border-right: 1px solid #262b33; border-radius: 0 10px 10px 0; }
.inline-form { display: flex; gap: 6px; align-items: center; margin: 0; }
/* Customers: a name is one card that opens onto its records and its jobs,
   mirroring the phone app's customers screen. */
.cust-group {
  background: #15181d; border: 1px solid #262b33; border-left: 4px solid #262b33;
  border-radius: 12px; margin-bottom: 8px;
}
.cust-group[open] { border-left-color: #38bdf8; }
.cust-group.review { border-left-color: #f0b429; }
.cust-group summary {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 16px; cursor: pointer; list-style: none;
}
.cust-group summary::-webkit-details-marker { display: none; }
.cust-group summary::before { content: '▸'; color: #7f8998; font-size: 12px; }
.cust-group[open] summary::before { content: '▾'; }
.cust-name { font-size: 15px; font-weight: 600; color: #e7eaee; }
.cust-counts { font-size: 12px; color: #8b94a1; }
.records-chip {
  background: rgba(56, 189, 248, 0.14); color: #38bdf8; border-radius: 5px;
  padding: 3px 8px; font-size: 11px; font-weight: 600;
}
.cust-body { padding: 0 16px 14px; }
.cust-record { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; }
.tick { display: flex; align-items: center; gap: 6px; color: #7f8998; font-size: 11px; }
.tick input { width: 17px; height: 17px; accent-color: #38bdf8; }
.mini-job {
  display: flex; align-items: center; gap: 10px; margin: 6px 0 0 22px;
  background: #101318; border: 1px solid #1b1f26; border-radius: 9px;
  padding: 8px 12px; color: inherit; font-size: 13px;
}
.mini-job:hover { border-color: #262b33; color: inherit; }
.mini-job.done { opacity: 0.55; }
.mini-title { flex: 1; overflow-wrap: anywhere; }
.mini-when { color: #7f8998; font-size: 11px; white-space: nowrap; }
.mini-time { font-family: ui-monospace, Consolas, monospace; font-weight: 600; white-space: nowrap; }
.mini-empty { color: #7f8998; font-size: 12px; font-style: italic; margin-left: 22px; padding: 6px 0; }
.group-row {
  background: #101318; color: #c9ced6; font-size: 12px; font-weight: 600;
  letter-spacing: 0.4px; padding: 8px 12px;
}
.input:disabled { opacity: 0.45; cursor: not-allowed; }
.review-chip { background: rgba(240, 180, 41, 0.15); color: #f0b429; border-radius: 5px; padding: 3px 8px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.muted { color: #8b94a1; }
.dim { color: #7f8998; }

/* Footer */
.foot { display: flex; justify-content: space-between; gap: 14px; padding: 14px 28px; border-top: 1px solid #262b33; color: #7f8998; font-size: 12px; flex-wrap: wrap; }

/* Error pages */
.error-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.error-card { text-align: center; color: #8b94a1; }
.error-card h1 { color: #e7eaee; font-size: 42px; letter-spacing: -1.2px; margin: 0 0 8px; }

/* New job form */
/* Centred, not pinned left: the form is the whole task on this page, so it
   sits in the middle of the space rather than hugging one edge. */
.form-card { max-width: 620px; margin: 0 auto; }
.form-row { display: flex; gap: 12px; }
.form-row .field { flex: 1; }

/* --- Liquid Glass ---------------------------------------------------------
   Apple's iOS 26 material, translated to CSS: a translucent layer that samples
   what scrolls behind it, a specular hairline along its top edge, and tinted
   interactive controls.

   Chrome only. Job rows, urgency accents and badges keep their solid fills on
   purpose - the colour IS the signal on this board, and a sampled tint behind
   a row makes red-at-a-glance unreliable. Everything here degrades to the
   previous solid colours through the @supports block at the end. */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(16, 19, 24, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
}
.tabs, .chipset, .search-input {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
}
/* Tinted, not filled: the selected control glows rather than turning grey. */
.tab.active, .chip.active:not(.chip-overdue) {
  background: rgba(56, 189, 248, 0.20);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
  color: #fff;
}
.chip.chip-overdue.active {
  background: rgba(244, 86, 78, 0.20);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.detail-side {
  background: rgba(16, 19, 24, 0.66);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
}
.detail-side .panel, .cust-group, .login-card .panel {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
}
.day-add, .pick-btn {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: #101318; border-bottom-color: #262b33; box-shadow: none; }
  .tabs, .chipset, .search-input { background: #15181d; border-color: #262b33; }
  .tab.active, .chip.active:not(.chip-overdue) { background: #262b33; color: #e7eaee; box-shadow: none; }
  .chip.chip-overdue.active { background: #262b33; box-shadow: none; }
  .detail-side { background: #101318; }
  .detail-side .panel, .cust-group, .login-card .panel { background: #15181d; box-shadow: none; }
  .day-add, .pick-btn { background: #1b1f26; border-color: #262b33; box-shadow: none; }
}

/* --- Accessibility --------------------------------------------------------
   Keyboard focus was invisible on everything except inputs, and the <=4h flash
   ran regardless of the system's Reduce Motion setting. The colour still says
   "under four hours" when the animation stops. */
a:focus-visible, button:focus-visible, summary:focus-visible,
.input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .flash, .u-flash { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* --- Response -------------------------------------------------------------
   Feedback belongs on the press, not on the release: a control that waits for
   the click to finish reads as dead. 90ms is under the threshold where a delay
   becomes perceptible, and the transform is small enough to feel like a key
   travelling rather than a thing resizing. */
.btn, .btn-primary, .btn-green, .btn-danger, .chip, .tab, .avatar,
.day-add, .pick-btn, .mini-job, .cust-group summary, .t-row {
  transition: transform 90ms cubic-bezier(0.2, 0, 0, 1),
              background-color 90ms linear, border-color 90ms linear;
}
.btn:active, .btn-primary:active, .btn-green:active, .btn-danger:active,
.avatar:active, .day-add:active, .pick-btn:active {
  transform: scale(0.965);
}
.chip:active, .tab:active { transform: scale(0.97); }
/* Rows are large, so they need far less travel to register as pressed. */
.t-row:active, .mini-job:active, .cust-group summary:active { transform: scale(0.994); }

/* Scroll edge, not a rule: content fades under the glass bar instead of being
   cut off by a hairline that fights the material. */
.topbar { border-bottom: 0; }
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 18px;
  background: linear-gradient(to bottom, rgba(14, 16, 19, 0.55), rgba(14, 16, 19, 0));
  pointer-events: none;
}

/* --- Accessibility: the settings the glass made relevant --------------------
   Reduced transparency means frost it solid rather than remove the surface;
   more contrast means near-solid with a border that is actually visible. */
@media (prefers-reduced-transparency: reduce) {
  .topbar, .tabs, .chipset, .search-input, .detail-side, .detail-side .panel,
  .cust-group, .login-card .panel, .day-add, .pick-btn, .sheet {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .topbar { background: #101318; border-bottom: 1px solid #262b33; }
  .topbar::after { display: none; }
  .tabs, .chipset, .search-input { background: #15181d; border-color: #262b33; }
  .detail-side { background: #101318; }
  .detail-side .panel, .cust-group, .login-card .panel { background: #15181d; box-shadow: none; }
  .day-add, .pick-btn { background: #1b1f26; border-color: #262b33; box-shadow: none; }
}
@media (prefers-contrast: more) {
  .topbar, .detail-side { background: #0e1013; }
  .tabs, .chipset, .search-input, .panel, .cust-group, .t-row, .btn {
    background: #15181d; border-color: #5a6472;
  }
  .tab.active, .chip.active:not(.chip-overdue) { background: #0b5f86; color: #fff; }
  .muted, .side-label, .col-recv, .job-sub { color: #b6bec9; }
  a { text-decoration: underline; }
}

/* --- The one thing on the web worth animating -----------------------------
   A customer card opening is occasional (not the 100-a-day board), and its
   job is to stop a block of jobs teleporting into place. Accordions are the
   one case where animating height is sanctioned - there is no transform that
   does it. Browsers without ::details-content simply open instantly, exactly
   as they did before. */
:root { interpolate-size: allow-keywords; }
.cust-group::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 220ms cubic-bezier(0.23, 1, 0.32, 1),
              content-visibility 220ms allow-discrete;
}
.cust-group[open]::details-content { block-size: auto; }
.cust-group summary::before { transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1); }
.cust-group[open] summary::before { transform: rotate(0deg); }

@media (prefers-reduced-motion: reduce) {
  .cust-group::details-content { transition: none; }
}

/* A back link that reads as the way out: a lone arrow was a 12px target with
   no label, on the one page you always have to leave. */
.back-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px; padding: 9px 15px; min-height: 40px;
  color: #e7eaee; font-size: 13px; font-weight: 600;
  transition: transform 90ms cubic-bezier(0.2, 0, 0, 1), background-color 90ms linear;
}
.back-btn:hover { background: rgba(255, 255, 255, 0.11); color: #fff; }
.back-btn:active { transform: scale(0.965); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .back-btn { background: #1b1f26; border-color: #262b33; }
}

/* --- Ticket reference -----------------------------------------------------
   The number identifies the job; it is not the headline. Monospace with
   tabular figures so a column of them lines up, muted so it sits behind the
   title on the board, and given real presence on the ticket itself, which is
   where it gets read out to a customer. */
.ticket-ref {
  font-family: ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px; color: #7f8998; margin-right: 8px;
}
.ticket-ref-big {
  font-family: ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 600; color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 8px; padding: 5px 10px;
  user-select: all; /* one click selects the whole reference to copy */
}

/* A number staff can actually ring. Tabular figures so a column of them lines
   up, and an underline on hover because it is a link, not a label. */
.kv .tel {
  font-family: ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  color: #9ecbff;
}
.kv .tel:hover { text-decoration: underline; }

/* The job title is the headline of its own page. Large text takes negative
   tracking; the customer sits under it as a byline. */
.job-headline {
  font-size: 30px; font-weight: 700; letter-spacing: -0.6px; line-height: 1.15;
  margin: 14px 0 0; overflow-wrap: anywhere;
}
.job-byline { color: #8b94a1; font-size: 15px; margin: 4px 0 0; }
.detail-title { padding-top: 22px; }