/* KTE Service — styles */
:root {
  --ink: #1f2937; --muted: #6b7280; --line: #d9dee5; --line-strong: #b9c2ce; --bg: #f5f7fa; --surface: #fff;
  --primary: #1b3a5c; --primary-dark: #132b45; --primary-soft: #e8edf3; --link: #2f6fb0;
  --danger: #b42318;
  --radius: 10px; --radius-sm: 6px;
  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color-scheme: light; /* always the light look, even when the phone is in dark mode */
}
:root { box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html { scroll-padding-top: env(safe-area-inset-top, 0px); background: var(--bg); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { font: 15px/1.5 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { line-height: 1.25; margin: 0; }
h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 1.02rem; font-weight: 700; margin-bottom: 12px; }
h2 small { font-weight: 500; margin-left: 6px; }
p { margin: 0 0 8px; }
a { color: var(--link); }
small { font-size: 0.82rem; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.block { display: block; }
.mt { margin-top: 22px; }
.loading, .empty { padding: 28px; text-align: center; color: var(--muted); }
.empty { background: var(--bg); border: 1px dashed var(--line); border-radius: var(--radius); padding: 18px; }
.empty.error { color: var(--danger); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--link) 55%, transparent); outline-offset: 2px; }

/* buttons */
.btn { font: 600 0.9rem var(--font); border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  padding: 9px 16px; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.btn:hover { border-color: var(--line-strong); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-dark); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.ghost { background: transparent; }
.btn.small { padding: 5px 11px; min-height: 32px; font-size: 0.82rem; }
.btn.wide { width: 100%; justify-content: center; }
.btn:disabled { opacity: 0.6; cursor: wait; }
.danger-text { color: var(--danger); }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--link); cursor: pointer; text-align: left; }
.link.danger { color: var(--danger); }
.icon-btn { background: none; border: 0; font-size: 1rem; cursor: pointer; color: var(--muted); padding: 6px; }

/* shell */
.shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.sidebar { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 20px 14px; position: sticky; top: env(safe-area-inset-top, 0px); height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 22px; }
.brand b { display: block; font-size: 1rem; }
.brand small { color: var(--muted); display: block; font-size: 0.76rem; }
.brand-logo { height: 34px; width: auto; flex: none; display: block; }
.top-signout { display: none; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar nav a { padding: 9px 12px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-weight: 500; }
.sidebar nav a:hover { background: var(--bg); }
.sidebar nav a.active { background: var(--primary); color: #fff; font-weight: 600; }
.me { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; border-top: 1px solid var(--line); padding: 14px 6px 0; }
.me .btn { grid-column: 1 / -1; justify-content: center; }
.me-text b { display: block; font-size: 0.88rem; }
.me-text small { color: var(--muted); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-weight: 700; font-size: 0.8rem; }
main { padding: 28px 32px 60px; max-width: 1200px; width: 100%; outline: none; }

/* page parts */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head p { margin: 4px 0 0; }
.back { display: inline-block; margin-bottom: 12px; font-size: 0.88rem; text-decoration: none; }
.back::before { content: "‹ "; }
.lead { font-size: 1.05rem; color: var(--muted); margin-top: 2px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.two-col .panel { margin-bottom: 0; }
.two-col + .panel, .panel + .two-col { margin-top: 18px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* dashboard tiles */
.tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 18px; }
.tiles-7 { grid-template-columns: repeat(7, 1fr); }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; text-decoration: none; color: var(--ink); }
.tile b { display: block; font-size: 1.9rem; line-height: 1.1; font-weight: 700; }
.tile span { color: var(--muted); font-size: 0.84rem; }
.tile:hover { border-color: var(--line-strong); }
.tile-alert { border-color: #f1b3ab; background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.tile-alert b { color: var(--danger); }

/* status pill: colours come from STAGE_COLORS in app/js/ui.js; Overdue is a separate badge */
.status { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.status-pill { display: inline-block; padding: 3px 10px; border-radius: 99px; font-weight: 600; font-size: 0.78rem; line-height: 1.35; background: var(--pill-bg); color: var(--pill-fg); }
.status-due { color: var(--muted); font-size: 0.76rem; }

/* filters & tabs */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.filters input[type="search"] { flex: 1 1 260px; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; min-height: 40px; width: 100%; }
.filters select { width: auto; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; }
.check input { width: 18px; min-height: 18px; accent-color: var(--primary); }
.tabs { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px; margin-bottom: 14px; width: fit-content; }
.tabs button { font: 600 0.9rem var(--font); border: 0; background: none; padding: 8px 16px; border-radius: var(--radius-sm); cursor: pointer; color: var(--muted); }
.tabs button[aria-selected="true"] { background: var(--primary); color: #fff; }
.tabs button small { font-weight: 500; opacity: 0.8; margin-left: 2px; }

/* complaint rows */
.count { margin: 0 0 8px; }
.rows { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.rows > li + li { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 118px minmax(0, 1fr) 170px 250px; gap: 16px; align-items: center; padding: 13px 16px; text-decoration: none; color: var(--ink); }
a.row:hover { background: var(--bg); }
.row small { display: block; color: var(--muted); }
.row-ref b { white-space: nowrap; font-size: 0.9rem; }
.row-main b { display: block; }
.row-main small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-people { font-size: 0.86rem; display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: baseline; }
.row-people small { font-size: 0.74rem; }
.users .row { grid-template-columns: minmax(0, 1fr) 190px 120px auto; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.inactive { opacity: 0.55; }

/* task list (dashboard) */
.task-list { list-style: none; margin: 0; padding: 0; }
.task-list li + li { border-top: 1px solid var(--line); }
.task-list a { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; text-decoration: none; color: var(--ink); }
.task-list .ref { font-weight: 700; font-size: 0.84rem; white-space: nowrap; }
.task-main b { display: block; }
.task-main small { color: var(--muted); }

/* detail page */
.detail-head { align-items: flex-start; }
.detail-status { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.complaint-text p { font-size: 1.05rem; margin: 0; white-space: pre-wrap; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 0; }
.facts dt { font-size: 0.78rem; color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.plain-list li:last-child { border-bottom: 0; }
.plain-list p { margin: 6px 0 0; }
.tag { display: inline-block; font-size: 0.74rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); vertical-align: middle; }
.tag-int, .tag-admin { background: var(--primary-soft); border-color: #c9d5e3; color: var(--primary); }
.tag-manager { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.tag-technician { background: #e2f3ef; border-color: #bfe3da; color: #0e6157; }

/* timeline */
.timeline { list-style: none; margin: 0 0 16px; padding: 0; }
.timeline li { display: grid; grid-template-columns: 14px 1fr; gap: 12px; position: relative; padding-bottom: 14px; }
.timeline li::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: 0; width: 2px; background: var(--line); }
.timeline li:last-child::before { display: none; }
.ev-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 3px solid #9aa8b8; margin-top: 3px; }
.ev-stage_change .ev-dot, .ev-created .ev-dot { border-color: var(--primary); }
.ev-assigned .ev-dot { border-color: #14897a; }
.ev-comment .ev-dot { border-color: #c58614; }
.timeline p { margin: 0; }
.comment { display: flex; gap: 10px; align-items: flex-end; border-top: 1px solid var(--line); padding-top: 14px; }
.comment .field { flex: 1; margin: 0; }

/* customers */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.card-actions { display: flex; gap: 6px; flex-shrink: 0; }
.sites { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sites li { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 10px; display: flex; flex-direction: column; }
.sites .link { font-weight: 600; }
.chips-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pill { font: 600 0.82rem var(--font); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 10px; cursor: pointer; color: var(--ink); display: inline-flex; gap: 6px; align-items: baseline; }
.pill small { color: var(--muted); font-weight: 500; font-size: 0.72rem; }
.pill:hover { border-color: var(--line-strong); }

/* forms & dialogs */
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 0.84rem; font-weight: 600; margin-bottom: 5px; }
.field small { display: block; color: var(--muted); margin-top: 4px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-error { color: var(--danger); font-size: 0.88rem; min-height: 1.2em; margin: 0; padding: 0 22px; }
.dialog { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 40px); color: var(--ink); box-shadow: 0 8px 24px rgba(17, 24, 39, 0.12); }
.dialog::backdrop { background: rgba(17, 24, 39, 0.4); }
.dialog form { display: flex; flex-direction: column; max-height: calc(100vh - 40px); }
.dialog header { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px 8px; }
.dialog header h2 { margin: 0; font-size: 1.15rem; }
.dialog-body { padding: 8px 22px 4px; overflow-y: auto; }
.dialog footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 22px 18px; }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: var(--bg); }
.login-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 32px 28px; width: min(400px, 100%); }
.login-logo { text-align: center; padding: 0 0 22px; }
.login-logo img { display: block; width: 160px; height: auto; margin: 0 auto 6px; }
.login-logo small { color: var(--muted); }
.login-card h1 { font-size: 1.35rem; margin-bottom: 18px; }
.login-card .form-error { padding: 0 0 10px; }
.login-card p.small { margin: 14px 0 0; text-align: center; }

/* toast */
#toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); background: #1f2937; color: #fff; padding: 11px 18px; border-radius: 8px; font-size: 0.9rem; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 50; max-width: calc(100vw - 32px); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.error { background: var(--danger); }
#toast.warn { background: #7a4f0a; }

/* tablets */
@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .row { grid-template-columns: 100px minmax(0, 1fr) 230px; }
  .row-people { display: none; }
}
/* phones */
@media (max-width: 820px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }

  .sidebar { position: sticky; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px; gap: 8px; z-index: 5; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 0; flex: 1; min-width: 0; }
  .brand-logo { height: 32px; }
  .login-logo img { width: 120px; }
  .me { border: 0; padding: 0; display: flex; }
  .me .avatar, .me-text { display: none; }
  .sidebar nav { order: 3; flex: 1 0 100%; flex-direction: row; overflow-x: auto; gap: 4px; }
  .sidebar nav a { white-space: nowrap; padding: 7px 12px; }
  main { padding: 18px 14px 50px; }
  h1 { font-size: 1.35rem; }
  .two-col, .grid-2, .facts { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .row, .users .row { grid-template-columns: 1fr; gap: 8px; }
  .row-ref { display: flex; gap: 10px; align-items: baseline; }
  .row-stage { order: -1; }
  .task-list a { grid-template-columns: 1fr; gap: 6px; }
  .detail-status { align-items: flex-start; }
  .comment { flex-direction: column; align-items: stretch; }
  .card-head { flex-direction: column; }
  .filters select { flex: 1 1 45%; }
}
@media (prefers-reduced-motion: reduce) { #toast { transition: none; } }

/* case page: activity feed + side panel */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.case-head { margin-bottom: 16px; }
.case-head p { margin: 0 0 4px; }
.case-head h1 { font-size: 1.45rem; }
.case { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 18px; align-items: start; }
.case .panel { margin: 0; }
.said { background: var(--bg); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 18px; }
.said p { margin: 2px 0 0; font-size: 1.02rem; white-space: pre-wrap; }
.show-more { font-weight: 600; font-size: 0.88rem; margin-bottom: 8px; }
.feed { list-style: none; margin: 0 0 14px; padding: 0; }
.msg { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.msg p { margin: 4px 0 0; white-space: pre-wrap; }
.msg-head { margin: 0 !important; }
.msg-head .muted { font-size: 0.82rem; }
.avatar.tech { background: #e2f3ef; color: #0e6157; }
.msg-reminder .avatar { background: #fbf0dc; color: #7a4f0a; }
.sys { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 6px 0; font-size: 0.84rem; color: var(--muted); }
.sys-dot { width: 8px; height: 8px; border-radius: 50%; background: #b5c1ce; justify-self: center; }
.sys .muted { font-size: 0.78rem; white-space: nowrap; }
.side-panel { position: sticky; top: 20px; }
.side-panel .status-pill { font-size: 0.84rem; }
.waiting { margin: 10px 0 4px; font-size: 0.9rem; color: var(--muted); }
.waiting b { color: var(--ink); }
.side { margin: 0; }
.side-row { padding: 9px 0; border-bottom: 1px solid var(--line); }
.side-row dt { font-size: 0.76rem; color: var(--muted); }
.side-row dd { margin: 1px 0 0; font-weight: 600; font-size: 0.92rem; }
.jc-list { display: flex; flex-wrap: wrap; gap: 4px; }
.side-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.side-actions .btn { justify-content: center; }
@media (max-width: 1100px) { .case { grid-template-columns: minmax(0, 1fr) 270px; } }
@media (max-width: 820px) {
  .case { grid-template-columns: 1fr; }
  .side-panel { position: static; order: -1; }
  .sys { grid-template-columns: 34px 1fr; }
  .sys .muted { grid-column: 2; white-space: normal; }
}
.case-head .said { background: var(--surface); border: 1px solid var(--line); margin: 12px 0 0; }
@media (max-width: 820px) { .side-row.is-empty { display: none; } }

/* technician bottom tab bar: phone only */
.tabbar { display: none; }

/* list rows that are buttons or links (customers, branches, equipment, brands) */
button.row { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
button.row:hover { background: var(--bg); }
.item-row { grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr); }
.cust-row { grid-template-columns: minmax(0, 1fr) 110px 220px; }
.branch-row { grid-template-columns: minmax(0, 1fr) 180px 140px; }
.rows.flat { border: 0; border-radius: 0; margin: 0 -20px -18px; border-top: 1px solid var(--line); }
.item-name b { font-weight: 600; }
.flags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.flag { display: inline-block; background: #faeeda; color: #633806; border-radius: 99px; padding: 2px 9px; font-size: 0.74rem; font-weight: 600; white-space: nowrap; }
.flag-line { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 0.9rem; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.page-head h1 .tag { font-size: 0.8rem; vertical-align: 4px; }
.tag-on { background: var(--primary-soft); border-color: #c9d5e3; color: var(--primary); display: inline-flex; align-items: center; gap: 4px; }
.tag-on small { font-size: 0.68rem; opacity: 0.8; }
.chip-x { border: 0; background: none; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 0 0 2px; }
.chosen { min-height: 30px; align-items: center; }
.mt-s { margin-top: 12px; }

/* searchable pick list */
.picker-input:disabled { background: var(--bg); color: var(--muted); cursor: not-allowed; }
.picker-list { list-style: none; margin: 4px 0 0; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); max-height: 232px; overflow-y: auto; background: var(--surface); }
.picker-list li { padding: 8px 10px; border-radius: 4px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.picker-list li small { color: var(--muted); margin: 0; }
.picker-list li.active, .picker-list li:hover { background: var(--primary-soft); }
.picker-list li[aria-selected="true"] { font-weight: 700; }
.picker-list .picker-create { color: var(--link); font-weight: 600; }
.picker-list .picker-empty { color: var(--muted); cursor: default; background: none; }
.add-link { display: inline-block; margin-top: 6px; font-weight: 600; }
.dym { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }

/* phones: technician tab bar and stacked rows */
@media (max-width: 820px) {
  .role-technician .sidebar nav, .role-technician .me, .role-technician main .job-tabs { display: none; }
  .top-signout { display: inline-flex; margin-left: auto; flex: none; }
  .role-technician main { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .tabbar a, .tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; padding: 6px 4px; font: 600 0.76rem var(--font); color: var(--muted); text-decoration: none; background: none; border: 0; border-top: 3px solid transparent; cursor: pointer; }
  .tabbar [aria-current="page"] { color: var(--primary); border-top-color: var(--primary); }
  /* icons stay on one line even when a label ("My Complaints") needs two lines on narrow phones */
  .tabbar-tech a { justify-content: flex-start; padding: 9px 2px 6px; font-size: clamp(0.68rem, 2.9vw, 0.76rem); line-height: 1.15; text-align: center; }
  .panel-head > a { display: inline-flex; align-items: center; min-height: 36px; }
  .cust-row, .branch-row, .item-row { grid-template-columns: 1fr; gap: 6px; }
  .flags { justify-content: flex-start; }
  .head-actions { width: 100%; }
  .head-actions .btn { flex: 1; justify-content: center; }
  .rows.flat { margin: 0 -20px -18px; }
}

/* free plan usage + cleanup (Manager) */
.usage h2 { font-size: 0.95rem; }
.usage-row + .usage-row { margin-top: 10px; }
.usage-label { display: flex; justify-content: space-between; gap: 10px; font-size: 0.86rem; font-weight: 600; margin-bottom: 4px; flex-wrap: wrap; }
.usage-bar { height: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.usage-bar span { display: block; height: 100%; border-radius: 99px; }
.lvl-green { background: #3b7d1a; }
.lvl-amber { background: #c98a1b; }
.lvl-red { background: #b42318; }
.usage-warn { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: #fcebeb; color: #791f1f; font-size: 0.9rem; }
.usage-warn a { color: #791f1f; font-weight: 700; }
.crumb { margin: 0 0 2px; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.74rem; }
.ok-note { background: #eaf3de; color: #27500a; border-radius: var(--radius-sm); padding: 10px 12px; font-weight: 600; }
.steps { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; }
.steps:disabled { opacity: 0.5; }
.step { border-top: 1px solid var(--line); padding: 14px 0 4px; }
.step h3 { font-size: 0.95rem; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.step-no { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-size: 0.78rem; }
.step .field { max-width: 320px; }

/* ---------- batch 3 ---------- */
.search-box { margin-bottom: 12px; }
.search-box input { min-height: 46px; font-size: 1rem; padding: 10px 14px; }
.match-line { display: block; margin-top: 3px; font-size: 0.8rem; color: var(--link); font-weight: 600; }
.main-col { min-width: 0; }
.space-notice { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fcebeb; color: #791f1f; padding: 8px 16px; font-size: 0.9rem; font-weight: 600; }
.space-notice a { color: #791f1f; }
.sub-h { font-size: 0.92rem; margin: 16px 0 8px; }
.choice { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px 10px; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.choice legend { font-size: 0.84rem; font-weight: 600; padding: 0 4px; }

/* technician home: big tap targets, high contrast */
.tech-sec { margin-bottom: 22px; }
.tech-sec h2 { font-size: 1.1rem; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.count-badge { background: var(--primary); color: #fff; border-radius: 99px; font-size: 0.78rem; padding: 1px 9px; }
.sec-sub { margin: -4px 0 8px; }
.sec-ready .job-card { border-color: #7cc7ae; background: #f1fbf7; border-left: 5px solid #0f8a66; }
.sec-ready .count-badge { background: #085041; }
.job-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.job-card { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; min-height: 64px; text-decoration: none; color: var(--ink); }
.job-card:hover, .job-card:focus-visible { border-color: var(--primary); }
.job-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.job-top .status { margin-left: auto; align-items: flex-end; }
.job-top > .status-pill { margin-left: auto; }
.job-main { font-weight: 700; font-size: 1.05rem; }
.job-sub { color: #374151; font-size: 0.92rem; }
.wait-line { font-weight: 600; color: #633806; }
.job-no { width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.done-tick { background: #eaf3de; color: #27500a; font-weight: 700; font-size: 0.8rem; border-radius: 99px; padding: 2px 9px; }
.job-card.is-done { background: #fafcf7; }
.job-card.is-done .job-no { background: #27500a; }

/* pinned headers (technician job + office complaint) */
.job-pin, .case-pin { position: sticky; top: 0; z-index: 6; background: var(--bg); padding: 10px 0 12px; margin: -10px 0 14px; border-bottom: 1px solid var(--line); }
.job-pin .back, .case-pin .back { margin-bottom: 6px; }
.pin-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1.1rem; }
.pin-sub { font-weight: 700; font-size: 1.05rem; margin: 4px 0 10px; }
.pin-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn.big { min-height: 52px; font-size: 1rem; padding: 12px 20px; }
.started { font-weight: 700; color: #085041; background: #e1f5ee; border-radius: var(--radius-sm); padding: 8px 12px; }
.pin-error:empty { display: none; }
.pin-error { padding: 8px 0 0 !important; font-weight: 600; }
.visit-form h2 { margin-bottom: 10px; }
.result-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.result-btn { min-height: 60px; font: 700 1rem var(--font); border: 2px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--radius); cursor: pointer; }
.result-btn[aria-checked="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.part-row { display: grid; grid-template-columns: minmax(0, 1.2fr) 70px minmax(0, 2fr) 36px; gap: 6px; margin-bottom: 6px; align-items: center; }
.part-row .p-no { text-transform: uppercase; font-weight: 600; }
.fold summary { cursor: pointer; font-weight: 700; min-height: 32px; display: flex; gap: 8px; align-items: center; }
.fold[open] summary { margin-bottom: 10px; }

/* office complaint page */
.case-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.case-name p { margin: 0 0 2px; }
.case-name h1 { font-size: 1.3rem; }
.case-status { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; flex: none; max-width: 45%; }
.pin-note { margin: 8px 0 0; font-weight: 600; color: #085041; }
.case-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.acts-sec { display: contents; }
.more-toggle { display: none; }
.case-body .panel { margin-bottom: 14px; }
.facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.parts-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.parts-table th { text-align: left; font-size: 0.76rem; color: var(--muted); font-weight: 600; padding: 4px 8px 6px 0; border-bottom: 1px solid var(--line); }
.parts-table td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.parts-edit li { display: flex; justify-content: space-between; gap: 10px; }
.history { list-style: none; margin: 0; padding: 0; }
.history li { padding: 10px 0 10px 14px; border-left: 2px solid var(--line); position: relative; }
.history li::before { content: ""; position: absolute; left: -6px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid #9aa8b8; }
.history .h-stage_change::before { border-color: var(--primary); }
.history .h-visit::before { border-color: #0f8a66; }
.h-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 0.8rem; color: var(--muted); }
.h-who { font-weight: 600; color: var(--ink); }
.h-what { margin-top: 2px; }
.h-note { margin: 3px 0 0; color: #374151; font-size: 0.9rem; white-space: pre-wrap; }
.how { font-size: 0.7rem; font-weight: 700; border-radius: 99px; padding: 1px 8px; }
.how-auto { background: #f1efe8; color: #444441; }
.how-next { background: #e6f1fb; color: #0c447c; }
.how-manual { background: #faeeda; color: #633806; }

/* schedule */
.sched-pick .field { margin: 0; min-width: 200px; }
.sched { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.sched .panel { margin: 0; }
.sched-list { list-style: none; margin: 0; padding: 0; }
.sched-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); background: var(--surface); }
.sched-list li:first-child { border-top: 0; }
.sched-list.day li { cursor: grab; }
.sched-list li.dragging { opacity: 0.4; }
.sj { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sj-sub { color: var(--muted); font-size: 0.86rem; }
.sj-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.sj-btns { display: flex; gap: 2px; }
.sj-btns .icon-btn { min-width: 36px; min-height: 36px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.sj-btns .icon-btn:disabled { opacity: 0.3; }
.drag { color: var(--muted); letter-spacing: -2px; }
.tag-assigned { background: #e6f1fb; border-color: #c4dcf2; color: #0c447c; }
.tag-revisit_required { background: #faeeda; border-color: #efd6ac; color: #633806; }
.tag-parts_received, .tag-repair_visit { background: #e1f5ee; border-color: #b4e2d2; color: #085041; }
.later { margin: 12px 0 0; }

/* performance */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-bottom: 12px; }
.kpi-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; }
.kpi-card:hover, .kpi-card:focus-visible { border-color: var(--primary); }
.kpi-card.is-total { cursor: default; background: var(--primary-soft); border-color: #c9d5e3; }
.kpi-card h3 { font-size: 1rem; margin: 0 0 10px; }
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kpi { display: flex; flex-direction: column; gap: 2px; }
.kpi-v { font-size: 1.45rem; font-weight: 700; line-height: 1.1; }
.kpi-l { font-size: 0.74rem; color: var(--muted); display: flex; gap: 4px; align-items: center; }
.kpi-green .kpi-v { color: #27500a; }
.kpi-amber .kpi-v { color: #8a5a0a; }
.kpi-red .kpi-v { color: #b42318; }
.kpi-more { margin: 12px 0 0; display: grid; gap: 6px; font-size: 0.86rem; }
.kpi-more div { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 6px; }
.kpi-more dt { color: var(--muted); display: flex; gap: 4px; align-items: center; }
.kpi-more dd { margin: 0; font-weight: 600; text-align: right; }
.info { position: relative; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); font: 700 0.62rem/1 var(--font); cursor: help; padding: 0; flex: none; }
.info:hover::after, .info.show::after { content: attr(data-info); position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); width: 220px; background: #1f2937; color: #fff; font: 500 0.76rem/1.35 var(--font); padding: 7px 9px; border-radius: 6px; text-align: left; white-space: normal; }
.late-list { list-style: none; margin: 0; padding: 0; }
.late-list li + li { border-top: 1px solid var(--line); }
.late-list a { display: flex; flex-direction: column; padding: 8px 0; color: var(--ink); text-decoration: none; }
.kpi-detail .kpi-card { cursor: default; }

@media (max-width: 820px) {
  .shell:has(.case-pin, .job-pin) .sidebar { position: static; }
  .result-grid { grid-template-columns: 1fr 1fr; }
  .part-row { grid-template-columns: minmax(0, 1fr) 64px 36px; }
  .part-row .p-desc { grid-column: 1 / 3; grid-row: 2; }
  .pin-actions .btn { flex: 1 1 40%; justify-content: center; }
  .pin-actions .btn.primary { flex-basis: 100%; }
  .pin-actions #cancel { flex: 0 0 auto; }
  .case-title { flex-direction: column; gap: 6px; }
  .case-status { align-items: flex-start; text-align: left; max-width: none; }
  .case-name h1 { font-size: 1.1rem; }
  .case-actions .act-next:first-child { flex: 1 1 100%; justify-content: center; min-height: 48px; }
  .case-actions .act-next ~ .act-next { flex: 1 1 auto; }
  .more-toggle { display: inline-flex; flex: 1 1 auto; justify-content: center; }
  .acts-sec { display: none; }
  .case-actions.open .acts-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1 1 100%; }
  .case-actions.open .acts-sec .btn { justify-content: center; }
  .facts-grid { grid-template-columns: 1fr; }
  .sched { grid-template-columns: 1fr; }
  .sched-pick .field { flex: 1 1 45%; min-width: 0; }
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .job-main { font-size: 1.08rem; }
}

/* ---------- batch 4 ---------- */
.status-line { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.overdue-badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-weight: 700; font-size: 0.72rem; background: #FCEBEB; color: #791F1F; border: 1px solid #f3c9c9; }
.av { border-radius: 50%; object-fit: cover; flex: none; display: inline-block; vertical-align: middle; background: var(--bg); }
.av-initials { display: inline-grid; place-items: center; color: #fff; font-weight: 700; letter-spacing: 0.02em; }
.me .av { margin: 0; }
.row-main.user-main { display: flex; gap: 12px; align-items: center; }
.row-main.user-main small { display: block; }


/* complaint page */
.next-btn { background: #0F766E; border-color: #0F766E; color: #fff; font-weight: 700; min-height: 44px; padding: 10px 20px; font-size: 0.95rem; }
.next-btn:hover { background: #0B5E58; border-color: #0B5E58; }
.menu-wrap { position: relative; }
.menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.12); padding: 4px; display: flex; flex-direction: column; }
.menu button { text-align: left; background: none; border: 0; padding: 10px 12px; font: 500 0.9rem var(--font); color: var(--ink); border-radius: 4px; cursor: pointer; }
.menu button:hover, .menu button:focus-visible { background: var(--bg); }
.case-actions .more-toggle { display: inline-flex; }
.case-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.case-side .panel, .case-main .panel { margin-bottom: 14px; }
.case-side h2, .case-main h2 { font-size: 0.98rem; }
.case-side .side-row dd { font-size: 0.9rem; }
.pre { white-space: pre-wrap; font-weight: 500; }
.history li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-left: 0; border-top: 1px solid var(--line); }
.history li:first-child { border-top: 0; }
.history li::before { display: none; }
.h-flow { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.h-arrow { color: var(--muted); }
.h-note.is-comment { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; margin-top: 6px; color: var(--ink); font-size: 0.94rem; }
.comment-box { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }
.comment-box .field { margin-bottom: 6px; }
.comment-box .form-error { padding: 0 0 6px; }
.contact-main { margin: 0; }
.tel { font-weight: 700; font-size: 1rem; text-decoration: none; }
.tel::before { content: "☎ "; font-weight: 400; }
.tel-list li { padding: 6px 0; }
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.people li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: start; }
.people .inv { margin-top: 4px; }
.tag-current { background: #E6F1FB; border-color: #c4dcf2; color: #0C447C; }
.aging { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.aging li { display: grid; grid-template-columns: 1fr; gap: 3px; font-size: 0.84rem; }
.aging li.is-current .ag-label { font-weight: 700; }
.ag-label { display: flex; justify-content: space-between; }
.ag-bar { height: 8px; border-radius: 99px; overflow: hidden; display: block; }
.ag-bar span { display: block; height: 100%; border-radius: 99px; }
.ag-val { color: var(--muted); font-size: 0.78rem; }
.alt-action { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 12px; }
.choice-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.choice-card { border: 2px solid var(--line); border-radius: var(--radius); padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card b { font-size: 1.05rem; }
.choice-card small { color: var(--muted); }
.choice-card.ok:has(input:checked) { border-color: #27500A; background: #EAF3DE; }
.choice-card.no:has(input:checked) { border-color: #791F1F; background: #FCEBEB; }
.choice-card:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--link) 55%, transparent); }

/* new complaint: compact two-column form */
.dialog-wide { width: min(880px, calc(100vw - 24px)); }
.nc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.nc-grid .field { margin-bottom: 10px; }
.nc-grid .field > span { margin-bottom: 3px; }
.nc-wide { grid-column: 1 / -1; }
.nc-row4 { display: grid; grid-template-columns: 0.8fr 1.3fr 1.2fr auto; gap: 0 16px; align-items: end; }
.nc-warranty { margin-bottom: 18px; white-space: nowrap; }
.nc-grid textarea { min-height: 58px; }
.nc-grid .picker { position: relative; }
.nc-grid .picker-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; box-shadow: 0 8px 24px rgba(17, 24, 39, 0.12); max-height: 220px; }
.dialog-wide .dialog-body { overflow: visible; }
.dialog-wide.dialog { overflow: visible; }
.dialog-wide header { padding-top: 14px; }
.dialog-wide footer { padding-top: 6px; padding-bottom: 14px; }

/* complaints list: optional Days Open column */
.rows.with-days .row { grid-template-columns: 118px minmax(0, 1fr) 170px 70px 250px; }
.row-days { text-align: center; }
.row-days b { display: block; font-size: 1.05rem; }
.carried-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: #FCEBEB; color: #791F1F; }

/* schedule week grid */
.week-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.week-label { margin: -8px 0 10px; }
.week-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.week-grid { width: 100%; border-collapse: collapse; min-width: 720px; }
.week-grid th, .week-grid td { border-bottom: 1px solid var(--line); padding: 4px; text-align: center; font-size: 0.84rem; }
.week-grid thead th { font-weight: 600; color: var(--muted); padding: 10px 4px; }
.week-grid thead th small { display: block; color: var(--primary); font-weight: 700; }
.week-grid tbody th { text-align: left; font-weight: 600; padding: 6px 10px; white-space: nowrap; }
.week-grid tr:last-child > * { border-bottom: 0; }
.wg-tech { display: flex; gap: 8px; align-items: center; }
.week-grid .is-today { background: #EEF4FB; }
.week-grid thead .is-today { color: var(--primary); }
.week-grid .is-fri { background: repeating-linear-gradient(135deg, #f3f4f6 0 6px, #eceef1 6px 12px); color: #9ca3af; }
.wg-cell { width: 100%; min-height: 52px; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; font: inherit; color: var(--ink);
  background: rgba(27, 58, 92, var(--shade, 0)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.wg-cell:hover { border-color: var(--line-strong); }
.wg-cell.is-sel { border: 2px solid var(--primary); }
.wg-cell b { font-size: 1.05rem; }
.wg-sub { display: flex; gap: 6px; font-size: 0.74rem; font-weight: 700; }
.wg-done { color: #27500A; font-weight: 700; }
.wg-miss { color: #B42318; font-weight: 700; }
.sched-panels { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 14px; }
.sched-panels .panel { margin: 0; }
.day-head { display: flex; gap: 10px; align-items: center; }

/* performance */
.kpi-head { display: flex; gap: 10px; align-items: center; }
.tiles-5 { grid-template-columns: repeat(5, 1fr); }
.tiles-6 { grid-template-columns: repeat(6, 1fr); }
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chart-card { margin: 0; }
.chart-card.wide { grid-column: 1 / -1; }
.chart-box { position: relative; height: 240px; }
.chart-box.tall { height: 300px; }
.chart-empty { color: var(--muted); text-align: center; padding: 40px 0; margin: 0; }
.photo-edit { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.photo-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.photo-actions small { flex-basis: 100%; }

@media (max-width: 1100px) {
  .case-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .rows.with-days .row { grid-template-columns: 100px minmax(0, 1fr) 70px 230px; }
  .tiles-5, .tiles-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .me .av { display: none; }
  .case-grid { grid-template-columns: 1fr; }
  .case-side { order: -1; }
  .case-actions .next-btn { flex: 1 1 auto; justify-content: center; min-height: 50px; }
  .menu { left: auto; right: 0; }
  .rows.with-days .row { grid-template-columns: 1fr; }
  .row-days { text-align: left; display: flex; gap: 6px; align-items: baseline; }
  .row-days b { display: inline; font-size: 0.9rem; }
  .nc-grid, .nc-row4 { grid-template-columns: 1fr; }
  .dialog-page { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; }
  .dialog-page form { max-height: 100dvh; height: 100%; }
  .dialog-page .dialog-body { overflow-y: auto; flex: 1; }
  .dialog-page footer { border-top: 1px solid var(--line); background: var(--surface); }
  .dialog-page .nc-grid .picker-list { position: static; box-shadow: none; }
  .dialog-wide.dialog { overflow: hidden; }
  .sched-panels { grid-template-columns: 1fr; }
  .chart-grid { grid-template-columns: 1fr; }
  .tiles-5, .tiles-6 { grid-template-columns: repeat(2, 1fr); }
  .choice-cards { grid-template-columns: 1fr 1fr; }
}

/* ---------- batch 5: AMC (planned maintenance) – visually distinct from complaint jobs ---------- */
.tag-supervisor { background: #EEEDFE; border-color: #d6d3f7; color: #3C3489; }
.amc-tag { display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; padding: 1px 6px; border-radius: 4px; background: #0B4F63; color: #fff; vertical-align: 1px; }
.amc-link { font-weight: 600; font-size: 0.86rem; text-decoration: none; }
.amc-summary { margin: 0 0 12px; color: var(--muted); }
.amc-summary b { color: var(--ink); }
.amc-zone h2 { display: flex; gap: 8px; align-items: baseline; }
.amc-rows { border: 0; border-radius: 0; margin: 0 -20px -18px; border-top: 1px solid var(--line); }
.amc-row { grid-template-columns: minmax(0, 1fr) 110px 190px auto; }
.amc-type { font-size: 0.86rem; color: var(--muted); }
.amc-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.amc-cal { width: 100%; border-collapse: collapse; min-width: 860px; font-size: 0.82rem; }
.amc-cal th, .amc-cal td { border-bottom: 1px solid var(--line); padding: 3px; text-align: center; }
.amc-cal thead th { color: var(--muted); font-weight: 600; padding: 8px 3px; }
.amc-cal thead th.is-today { color: var(--primary); background: #EEF4FB; }
.amc-cal tbody th { text-align: left; font-weight: 500; padding: 5px 10px; min-width: 220px; }
.amc-cal tbody th b { display: block; font-weight: 600; }
.amc-cal tbody th small { color: var(--muted); }
.amc-cal .zone-row th { background: var(--bg); font-weight: 700; color: var(--primary); padding: 8px 10px; }
.cal-cell { width: 34px; height: 30px; border: 0; border-radius: 6px; font: 700 0.82rem var(--font); cursor: pointer; }
.cal-cell:hover, .cal-cell:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.amc-pin .case-actions .btn { min-height: 44px; }
.amc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.amc-grid .panel { margin-bottom: 14px; }
.amc-item { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 36px; gap: 0 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.amc-item .it-wide { grid-column: 1 / 5; }
.amc-item .it-rm { grid-column: 5; grid-row: 1; margin-top: 26px; }
.amc-item .picker { position: relative; }
.amc-item .picker-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; box-shadow: 0 8px 24px rgba(17, 24, 39, 0.12); }
.amc-cases li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
/* My AMC: a calm checklist (a full month on day one is normal, not a backlog) */
.amc-progress p { margin: 0 0 8px; }
.progress { display: block; height: 8px; border-radius: 99px; background: #E6EDF3; overflow: hidden; }
.progress > span { display: block; height: 100%; background: #0B4F63; border-radius: 99px; }
.amc-checklist { list-style: none; margin: 0 0 16px; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.amc-checklist li + li { border-top: 1px solid var(--line); }
.amc-check { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 16px; min-height: 60px; text-decoration: none; color: var(--ink); }
.amc-check:hover { background: var(--bg); }
.check-mark { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #9fb3c4; display: grid; place-items: center; font-weight: 800; color: #fff; }
.amc-check.is-done .check-mark { background: #0B4F63; border-color: #0B4F63; }
.amc-check.is-done b { color: var(--muted); }
.amc-check-main b { display: block; }
.amc-check-main small { color: var(--muted); }
.amc-overdue { color: #B42318; font-weight: 700; }
.sup-card { margin-bottom: 16px; }
.sec-amc .job-card { border-left: 5px solid #0B4F63; }
.amc-badge { background: #0B4F63; }
.amc-card .job-top b { font-size: 1rem; }
.amc-dash { display: grid; gap: 10px; text-decoration: none; color: var(--ink); }
.amc-dash:hover { border-color: var(--line-strong); }
.amc-dash-title { font-weight: 700; }
.amc-dash-kpis { display: flex; flex-wrap: wrap; gap: 8px 28px; color: var(--muted); }
.amc-dash-kpis b { font-size: 1.4rem; color: var(--ink); margin-right: 4px; }
.amc-dash-kpis .amc-overdue b { color: #B42318; }
.amc-line { margin: 0 0 16px; font-weight: 600; }
.amc-line a { text-decoration: none; }
@media (max-width: 1100px) { .amc-grid { grid-template-columns: minmax(0, 1fr) 280px; } }
@media (max-width: 820px) {
  .amc-row { grid-template-columns: 1fr; gap: 6px; }
  .amc-row .row-actions { justify-content: flex-start; }
  .amc-grid { grid-template-columns: 1fr; }
  .amc-item { grid-template-columns: 1fr 36px; }
  .amc-item > .field, .amc-item .it-wide { grid-column: 1; }
  .amc-item .it-rm { grid-column: 2; grid-row: 1; }
  .amc-item .picker-list { position: static; box-shadow: none; }
  .tabbar a, .tabbar button { font-size: 0.7rem; }
}

/* ---------- batch 6 ---------- */
/* settings strip and hub */
.subnav { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 10px 28px 0; }
.subnav a { padding: 6px 12px; border-radius: var(--radius-sm); color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.88rem; border: 1px solid transparent; }
.subnav a[aria-current="page"] { background: var(--surface); border-color: var(--line); color: var(--primary); }
.subnav .subnav-home { color: var(--ink); padding-left: 0; }
.subnav .subnav-home::after { content: "›"; margin-left: 10px; color: var(--muted); }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.settings-card { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); margin: 0; }
.settings-card:hover, .settings-card:focus-visible { border-color: var(--primary); }
.sla-table { width: 100%; border-collapse: collapse; }
.sla-table th, .sla-table td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); }
.sla-table thead th { font-size: 0.76rem; color: var(--muted); font-weight: 600; }
.sla-days { max-width: 130px; }
.ok-text { color: #27500a; font-weight: 600; }
.warn-note { background: #faeeda; color: #633806; border-radius: var(--radius-sm); padding: 10px 12px; font-weight: 600; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.team-card { margin: 0; }
.person { display: inline-flex; align-items: center; gap: 8px; }
.member-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }

/* ownership */
.unclaimed { color: #8a3b06; font-weight: 600; }
.owner-line { font-size: 0.86rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.owner-line b { color: var(--ink); }
.task-list li.with-claim { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }

/* complaint page: compact header */
.case-name h1 { font-size: 1.2rem; margin: 0; }
.case-ref { color: var(--primary); margin-right: 4px; }
.case-eq { margin: 2px 0 0; font-weight: 600; font-size: 0.92rem; }
.case-summary { margin: 2px 0 0; color: var(--muted); font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70ch; }
.case-name { min-width: 0; }
.case-actions { margin-top: 10px; }
.refs-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.ref-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 14px; display: flex; flex-direction: column; min-width: 150px; }
.ref-box span { font-size: 0.74rem; color: var(--muted); font-weight: 600; }
.ref-box b { font-size: 1.05rem; }
.ref-box.ref-quote { border-color: #b9b5f0; background: #f6f5ff; }
.ref-box.ref-quote b { font-size: 1.25rem; color: #3c3489; }
.visit-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.visit-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface); }
.visit-card header { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.visit-who { display: flex; align-items: center; gap: 8px; margin: 6px 0; flex-wrap: wrap; font-size: 0.9rem; }
.visit-work { margin: 0; font-size: 0.9rem; white-space: pre-wrap; }
.visit-parts { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.result-tag { font-size: 0.74rem; font-weight: 700; border-radius: 99px; padding: 2px 8px; background: #f1efe8; color: #444441; }
.result-rectified { background: #eaf3de; color: #27500a; }
.result-revisit { background: #fdebd8; color: #8a3b06; }
.result-need_parts { background: #efe6dd; color: #5c3d22; }
.result-not_repairable { background: #faece7; color: #712b13; }
#more-history { margin: 6px 0 4px; font-weight: 600; }
.clarify-box { border-color: #d8c3f0; background: #fbf7ff; }
.clarify-box h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.clarify-box .pre { white-space: pre-wrap; }
.sec-clarify .job-card { border-color: #d8c3f0; border-left: 5px solid #5b2a86; background: #fbf7ff; }
.sec-clarify .count-badge { background: #5b2a86; }

/* visit logging */
.block-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ids-line { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin: 0 0 12px; }
.also-list li { padding: 6px 0; }
.also-list .check { align-items: center; flex-wrap: wrap; }
.branch-work li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.branch-work li:last-child { border-bottom: 0; }
.pool-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
@media (max-width: 820px) {
  .subnav { padding: 8px 16px 0; }
  .case-summary { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .case-status { max-width: none; align-items: flex-start; text-align: left; }
  .owner-line { justify-content: flex-start; }
}
.details-grid .side-row:has(.pre) { grid-column: 1 / -1; }
@media (max-width: 1100px) { .details-grid { grid-template-columns: 1fr; } }
.gs-more { margin: 10px 0 0; font-weight: 600; }
.tabs { max-width: 100%; overflow-x: auto; }
@media (max-width: 820px) { .tabs button { padding: 8px 11px; white-space: nowrap; } }

/* ---------- active filters: blue when away from the default ---------- */
.filters select.is-active, .search-box.is-active input { background: #EAF1F9; border-color: #2F6FB0; color: #1F4E80; font-weight: 600; box-shadow: inset 0 0 0 1px #2F6FB0; }
.filters .check.is-active { background: #EAF1F9; border: 1px solid #2F6FB0; color: #1F4E80; font-weight: 600; border-radius: var(--radius-sm); padding: 4px 10px; }
.clear-filters { border-color: #2F6FB0; color: #2F6FB0; }
.filter-summary { margin: 0 0 8px; padding: 8px 12px; background: #EAF1F9; border-left: 3px solid #2F6FB0; border-radius: var(--radius-sm); color: #1F2937; font-size: 0.9rem; }
.search-box { position: relative; }
.search-box input[type="search"] { padding-right: 40px; }
.search-box input[type="search"]::-webkit-search-cancel-button { display: none; }
.search-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 1rem; cursor: pointer; }
.search-x:hover, .search-x:focus-visible { background: var(--bg); color: var(--ink); }
/* AMC zone groups */
.fold-btn { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); width: 26px; height: 26px; cursor: pointer; color: var(--primary); font-size: 0.8rem; vertical-align: 1px; }
.zone-count { font-weight: 500; color: var(--muted); }
.amc-overdue-text { color: #C0392B; font-weight: 600; }
.inline-search { flex: 1 1 260px; margin: 0; } .inline-search input { min-height: 40px; font-size: 0.95rem; }

/* ---------- phone review: safe areas, tap targets, fitting the screen ---------- */
/* pinned headers stay below the notch / status bar */
.job-pin, .case-pin { top: env(safe-area-inset-top, 0px); }
.dialog { max-height: calc(100dvh - 40px); }
.dialog form { max-height: calc(100dvh - 40px); }
input::placeholder, textarea::placeholder { text-overflow: ellipsis; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .parts-table { min-width: 520px; }
/* grids never force the page wider than the screen */
.chart-grid > *, .team-grid > *, .case-grid > *, .two-col > *, .amc-grid > *, .sched-panels > * { min-width: 0; }
.team-grid { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.team-card .panel-head { flex-wrap: wrap; }
/* wide tables scroll inside their own box; the name column stays in view */
.amc-cal tbody th, .amc-cal thead th:first-child, .week-grid tbody th, .week-grid thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.amc-cal .zone-row th { position: static; }
.amc-cal .zone-row .zone-label { position: sticky; left: 10px; display: inline-block; max-width: calc(100vw - 60px); white-space: normal; }
.amc-cal .zone-row th { background: var(--bg); }
.amc-cal, .week-wrap { -webkit-overflow-scrolling: touch; }
@media (max-width: 820px) {
  .dialog-page form { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
  /* comfortable tap targets (about 40px) */
  .back { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding-right: 12px; margin-bottom: 4px; }
  .job-pin .back, .case-pin .back { margin-bottom: 0; }
  a.tel { display: inline-flex; align-items: center; min-height: 40px; }
  .check { min-height: 40px; }
  .icon-btn { min-width: 40px; min-height: 40px; }
  .fold-btn { width: 36px; height: 36px; }
  .info::before { content: ""; position: absolute; inset: -12px; }
  .cal-cell { width: 38px; height: 36px; }
  .link.small { min-height: 40px; }
  .branch-work li a, .amc-cases li a, .sj-main a, .gs-more a { display: inline-flex; align-items: center; min-height: 40px; }
  /* staff menu: every item visible (wraps instead of hiding items off to the side) */
  .sidebar nav { flex-wrap: wrap; overflow-x: visible; }
  .sidebar nav a { padding: 8px 10px; min-height: 40px; display: inline-flex; align-items: center; }
  /* tab strips fit a small phone */
  .tabs { width: 100%; }
  .tabs button { flex: 1 1 auto; padding: 8px 8px; font-size: 0.84rem; min-height: 40px; }
  /* shorter pinned headers leave more room for the page */
  .btn.big { min-height: 46px; padding: 10px 14px; }
  .job-pin, .case-pin { padding: 6px 0 8px; }
  .case-name h1 { font-size: 1.05rem; }
  .case-actions { margin-top: 6px; }
  /* AMC maintenance record: one field per line */
  .amc-item { grid-template-columns: minmax(0, 1fr) 40px; }
  .amc-item > .field, .amc-item .it-wide { grid-column: 1 / 2; }
  .amc-item .it-rm { grid-column: 2; grid-row: 1; align-self: start; margin-top: 22px; }
  .amc-cal tbody th { min-width: 130px; max-width: 150px; white-space: normal; }
  .week-grid tbody th { white-space: normal; min-width: 120px; }
}
.fold-btn { flex: none; }
@media (max-width: 820px) {
  /* the staff top bar scrolls away on phones so it never covers the page */
  .shell:not(.role-technician) .sidebar { position: static; }
}
@media (max-width: 560px) {
  .chart-card .chart-box { height: 320px; }
}
@media (max-width: 380px) {
  .tabs button { padding: 8px 5px; font-size: 0.78rem; }
}
.claimed-by { display: block; color: var(--muted); }

/* ---------- label | value rows: fixed label column, values on one line (full text on hover) ---------- */
.kv { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 3px 8px; margin: 0; font-size: 0.86rem; align-items: baseline; }
.kv dt { color: var(--muted); font-size: 0.76rem; font-weight: 500; white-space: nowrap; }
.kv dd { margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.kv dd.is-late { color: #B42318; font-weight: 700; }
.kv dd.muted { color: var(--muted); }

/* complaints list: fixed columns so details, days open and status line up on every row */
.c-list .row { grid-template-columns: 96px minmax(0, 1fr) 230px 230px; }
.rows.with-days .c-list .row { grid-template-columns: 96px minmax(0, 1fr) 230px 76px 230px; }
.row-days small { white-space: nowrap; }
.c-list .row .row-people { display: grid; grid-template-columns: 80px minmax(0, 1fr); width: 230px; }
.c-list .row-end { display: contents; }
.row-stage { min-width: 0; }

/* complaint page: one tidy status block, top in line with the SR number */
.case-status { width: 280px; flex: none; max-width: none; display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: left; margin-top: 2px; }
.case-status .status-line { align-self: flex-start; }
.case-status #claim { align-self: flex-start; }
.case-status .amc-link { align-self: flex-start; }

@media (max-width: 1100px) {
  .c-list .row { grid-template-columns: 92px minmax(0, 1fr) 210px 200px; }
  .c-list.with-days .row { grid-template-columns: 92px minmax(0, 1fr) 210px 72px 190px; }
  .c-list .row .row-people { display: grid; width: 210px; }
}
/* narrow screens: each complaint is a card */
@media (max-width: 1000px) {
  .c-list .row, .c-list.with-days .row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .row-ref { display: flex; gap: 10px; align-items: baseline; }
  .row-ref small { display: inline; }
  .row-stage { order: 0; }
  .c-list .row .row-people { width: auto; max-width: 360px; }
  .c-list .row-end { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
  .row-days { display: flex; gap: 6px; align-items: baseline; text-align: left; }
  .row-days b { display: inline; font-size: 0.95rem; }
  .row-days small { display: inline; }
  .row-end .row-stage:only-child { margin-left: 0; }
}
@media (max-width: 820px) {
  .case-status { width: 100%; max-width: 360px; margin-top: 0; }
}
/* visit entry in Status History */
.h-visit-head { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.h-kv { margin-top: 6px; max-width: 520px; }
.h-kv dd { white-space: normal; overflow: visible; }
.h-kv .chips-list { display: inline-flex; flex-wrap: wrap; gap: 4px; }
@media (max-width: 820px) {
  .h-kv { grid-template-columns: 56px minmax(0, 1fr); }
}

/* ---------- AMC Due This Month: one slim line per visit ---------- */
.amc-summary-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.amc-summary-bar .amc-summary { margin: 0; }
.fold-all { display: inline-flex; gap: 6px; }
.amc-zone { padding: 12px 18px; margin-bottom: 10px; }
.amc-zone h2 { margin: 0; font-size: 1rem; align-items: center; }
.amc-zone h2 small { font-weight: 500; }
.amc-rows { margin: 10px -18px -12px; }
.amc-noteam { color: #8A3B06; font-weight: 600; }
.amc-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 260px 170px; gap: 12px; align-items: center; padding: 6px 18px; min-height: 44px; }
.amc-row + .amc-row { border-top: 1px solid var(--line); }
.amc-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.92rem; }
.amc-name .muted { font-size: 0.86rem; }
.amc-type { font-size: 0.84rem; color: var(--muted); white-space: nowrap; }
.amc-state { display: flex; align-items: center; gap: 8px; min-width: 0; }
.amc-state small { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.8rem; }
.amc-row .row-actions { justify-content: flex-end; gap: 6px; }
.amc-row .row-actions .btn { min-height: 32px; padding: 4px 12px; }
@media (max-width: 1100px) {
  .amc-row { grid-template-columns: minmax(0, 1fr) 84px 200px 160px; }
}
@media (max-width: 820px) {
  .amc-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "name name act" "type state act"; gap: 2px 8px; padding: 8px 18px; }
  .amc-name { grid-area: name; }
  .amc-type { grid-area: type; }
  .amc-state { grid-area: state; }
  .amc-row .row-actions { grid-area: act; flex-direction: column; align-items: stretch; }
  .amc-row .row-actions .btn { min-height: 40px; }
}
@media (max-width: 820px) {
  .amc-state { flex-wrap: wrap; row-gap: 2px; }
  .amc-state small { flex-basis: 100%; }
  .amc-zone h2 { flex-wrap: wrap; row-gap: 0; }
  .amc-zone h2 small { flex-basis: 100%; padding-left: 44px; }
}

/* complaints list: status column right-aligned so every pill and due line share the card's right edge */
.c-list .row .row-stage { justify-self: stretch; text-align: right; }
.c-list .row .row-stage .status { display: flex; align-items: flex-end; width: 100%; }
.c-list .row .row-stage .status-line { justify-content: flex-end; }
.c-list .row .row-days { justify-self: center; }
@media (max-width: 1000px) {
  .c-list .row .row-stage { text-align: left; }
  .c-list .row .row-stage .status { align-items: flex-end; }
}

/* dashboard lists: short SR column, one-line details, status column right-aligned on a straight edge */
.task-list a { grid-template-columns: 72px minmax(0, 1fr) 210px; }
.task-list .task-main { min-width: 0; }
.task-list .task-main b, .task-list .task-main small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-list .status { width: 100%; align-items: flex-end; text-align: right; }
.task-list .status-line { justify-content: flex-end; }
@media (max-width: 1100px) { .task-list a { grid-template-columns: 72px minmax(0, 1fr) 170px; } }
@media (max-width: 820px) {
  .task-list a { grid-template-columns: minmax(0, 1fr); }
  .task-list .status { align-items: flex-start; text-align: left; }
  .task-list .status-line { justify-content: flex-start; }
}
.job-flag { display: block; }

/* users list: fixed columns so the role tag and date line up on every row, whatever buttons a row has */
.users .row { grid-template-columns: minmax(0, 1fr) 200px 100px 430px; }
.users .row .row-actions .btn { padding: 4px 9px; }
.users .row .row-actions { justify-content: flex-end; flex-wrap: nowrap; }
@media (max-width: 1100px) {
  .users .row { grid-template-columns: minmax(0, 1fr) 200px 110px; }
  .users .row .row-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 820px) { .users .row { grid-template-columns: 1fr; } }
.status-pill { white-space: nowrap; }
@media (max-width: 1300px) { .users .row { grid-template-columns: minmax(0, 1fr) 200px 110px; } .users .row .row-actions { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; } }
.sla-table .status-pill { white-space: normal; }
.note { margin: 4px 0 0; padding: 8px 12px; background: #EAF1F9; border-left: 3px solid #2F6FB0; border-radius: var(--radius-sm); font-size: 0.88rem; color: var(--ink); }
.uname-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 600; }
input[readonly] { background: var(--bg); color: var(--muted); cursor: default; }
input[readonly]:focus { box-shadow: none; border-color: var(--line); }

/* ---------- phones: no sideways scrolling ---------- */
/* iPhone Safari zooms in when a text box or dropdown with text under 16px is tapped, and stays zoomed
   (the page then drags left and right). 16px form text on touch screens prevents that zoom. */
@media (max-width: 820px), (pointer: coarse) {
  input, select, textarea, .picker-input { font-size: 16px; }
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* safety net: the page itself never scrolls sideways (wide tables scroll inside their own box) */
html, body { overflow-x: clip; }