:root {
  color-scheme: light;
  --ink: #111c36;
  --muted: #58677f;
  --panel: #ffffff;
  --page: #f4f7fb;
  --line: #e5eaf2;
  --navy: #0b132b;
  --blue: #2563eb;
  --blue-soft: #edf4ff;
  --cyan: #14b8a6;
  --orange: #f59e0b;
  --red: #e4475d;
  --green: #17a673;
  --radius: 16px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
}

/* Account appearance. System mode follows the device without storing another user's choice. */
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root[data-theme="system"] { color-scheme: dark; } }
:root[data-theme] {
  --ink: light-dark(#202b3c, #e8eef8);
  --muted: light-dark(#58677f, #a8b8ce);
  --panel: light-dark(#ffffff, #1b2432);
  --page: light-dark(#f3f5f9, #101722);
  --line: light-dark(#e3e8f0, #344258);
  --blue: light-dark(#365de0, #729aff);
  --blue-soft: light-dark(#edf1ff, #253653);
  --red: light-dark(#d63850, #ff8296);
  --green: light-dark(#16805c, #6ad5ad);
}
.appearance-settings { min-width:0; margin:0 0 18px; padding:16px; border:1px solid var(--line); border-radius:12px; }
.appearance-settings legend { padding:0 7px; color:var(--ink); font-weight:650; font-size:14px; }
.queue-views { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.current-work-panel:not(:empty) { max-width:1440px; margin:18px auto 0; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; font-size:12px; }
.current-work-item { width:100%; display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; }
.current-work-title { flex:1; min-width:140px; overflow-wrap:anywhere; }
.current-work-panel small { color:var(--muted); }
.current-work-warning { width:100%; margin:0 0 8px; color:var(--red); }
.current-work-target { outline:2px solid var(--blue); outline-offset:2px; }
.chat-audience { grid-column:1 / -1; margin:0; padding:8px 10px; border-radius:8px; background:var(--blue-soft); color:var(--muted); font-size:12px; line-height:1.5; }
.message-form[data-audience="internal"] .chat-audience { color:var(--blue); }
.client-home-hero { margin-top:28px; padding:28px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; }
.client-home-hero h1 { margin:8px 0 10px; font-size:28px; letter-spacing:-.03em; }
.client-home-hero p { max-width:620px; margin:0; line-height:1.6; color:var(--muted); }
.client-home-eyebrow { color:var(--blue); font-size:12px; font-weight:650; }
.client-home-stats { grid-template-columns:repeat(3,minmax(0,1fr)); margin:18px 0; }
.client-home-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:18px; }
.client-request-row { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; }
.client-request-row b,.client-request-row small { display:block; overflow-wrap:anywhere; }
.client-request-row b { margin-top:5px; font-weight:600; }
.client-request-row small,.client-home-links small { color:var(--muted); font-size:12px; line-height:1.5; }
.client-home-links { display:grid; gap:10px; }
.client-home-links button { text-align:left; padding:14px; }
.client-home-links b,.client-home-links small { display:block; }
.client-home-links small { margin-top:5px; font-weight:400; }
@media(max-width:700px) { .client-home-hero { padding:20px; }.client-home-grid { grid-template-columns:1fr; }.client-home-stats { grid-template-columns:1fr; }.client-request-row { align-items:flex-start; flex-wrap:wrap; } }
.queue-views button { min-height:40px; border:1px solid var(--line); }
.queue-views button[aria-pressed="true"] { background:var(--blue-soft); color:var(--blue); border-color:var(--blue); }
.appearance-settings .field-help { font-size:12px; color:var(--muted); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
:root[data-density="compact"] td, :root[data-density="compact"] th { padding-top:8px; padding-bottom:8px; }
@media (pointer:coarse) { :root[data-density="compact"] td, :root[data-density="compact"] th { padding-top:12px; padding-bottom:12px; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--page); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr); }
.login-hero { padding: clamp(36px, 8vw, 110px); color: white; position: relative; overflow: hidden; background: radial-gradient(circle at 10% 30%, light-dark(#1a3975, #14191e) 0, transparent 30%), linear-gradient(135deg, #0b132b, #122a59); }
.login-hero:after { content:""; position:absolute; width: 500px; height:500px; border-radius:50%; border: 1px solid rgba(255,255,255,.12); bottom:-285px; right:-110px; box-shadow: 0 0 0 46px rgba(255,255,255,.035), 0 0 0 92px rgba(255,255,255,.025); }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.04em; }
.brand-mark { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background: linear-gradient(135deg,#43d6c5,#2563eb); color: white; box-shadow:0 10px 20px rgba(20,184,166,.25); }
.login-hero h1 { max-width:680px; margin: 94px 0 20px; font-size:clamp(39px,5vw,72px); line-height:1.02; letter-spacing:-.055em; }
.login-hero p { margin:0; max-width:540px; font-size:18px; line-height:1.65; color: #cdd8ed; }
.hero-points { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); max-width:650px; margin-top:62px; gap:24px; }
.hero-points strong { display:block; font-size:13px; margin-bottom:5px; color: light-dark(#7de6d8, #d2f6f1); }
.hero-points span { font-size:13px; color: #cdd8ed; line-height:1.45; }
.login-panel { align-self:center; padding:clamp(30px,7vw,96px); max-width:560px; width:100%; margin:auto; }
.login-panel h2 { margin:32px 0 8px; font-size:30px; letter-spacing:-.035em; }
.login-panel > p { color: var(--muted); margin:0 0 28px; line-height:1.55; }
.demo-note { margin-top:20px; padding:13px 15px; border-radius:10px; color: light-dark(#49607e, #d7dce3); background: light-dark(#f3f6fb, #1e2124); border: 1px solid light-dark(#e4ebf4, #344258); font-size:12px; line-height:1.55; }
.registration-link { margin-top:17px; font-size:12px; }
.registration-layout { min-height:100vh; padding:44px 20px; display:grid; place-items:center; background: radial-gradient(circle at 92% 2%, light-dark(#e8f2ff, #1d2124) 0, transparent 32%), var(--page); }
.registration-card { width:min(800px, 100%); padding:clamp(24px,5vw,50px); border: 1px solid var(--line); border-radius:22px; background: light-dark(#ffffff, #1e2124); box-shadow:0 16px 45px rgba(31,52,91,.09); }
.registration-card h1 { margin:30px 0 8px; font-size:30px; letter-spacing:-.04em; }.registration-card > p { max-width:610px; margin:0 0 28px; color: var(--muted); line-height:1.55; font-size:14px; }.registration-card form > .text-button { margin-left:13px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 15px; }

.field { display:grid; gap:7px; margin-bottom:16px; }
.field label { font-size:12px; font-weight:700; color: light-dark(#4e5b72, #d8dbe0); }
.field input, .field select, .field textarea { width:100%; border: 1px solid light-dark(#dbe3ee, #344258); border-radius:10px; padding:12px 13px; outline: none; background: light-dark(#ffffff, #1e2124); color: var(--ink); transition:.16s; }
.field textarea { min-height:106px; resize:vertical; line-height:1.45; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: light-dark(#5a8bf5, #344258); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.field.inline { display:flex; align-items:center; gap:8px; margin:0; }
.field.inline input { width:auto; }
.field-help { color: light-dark(#7b899e, #e2e5ea); font-size:10px; line-height:1.35; }

.primary, .secondary, .danger, .text-button { border: 0; border-radius:10px; font-weight:750; transition:.16s; }
.primary { background: #365de0; color: #fff; padding:12px 16px; box-shadow:0 6px 14px rgba(37,99,235,.18); }
.primary:hover { background: #1d4ed8; transform:translateY(-1px); }
.primary:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.secondary { background: light-dark(#edf2f8, #1e2124); color: light-dark(#263754, #cfd3d9); padding:10px 13px; }
.secondary:hover { background: light-dark(#e2eaf4, #1d2124); }
.danger { background: light-dark(#fff0f2, #1e2124); color: light-dark(#c63c51, #ebbbc2); padding:10px 13px; }
.text-button { background: transparent; color: light-dark(#3f6fd9, #bccdf2); padding:4px; }

.shell { min-height:100vh; display:grid; grid-template-columns:250px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; padding:24px 14px; display:flex; flex-direction:column; background: var(--navy); color: white; }
.sidebar .brand { padding:0 10px; }
.workspace { color: light-dark(#9fafd0, #eaedf5); margin:32px 11px 12px; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.nav { display:grid; gap:4px; }
.nav button { width:100%; border: 0; border-radius:10px; padding:11px 11px; display:flex; gap:11px; align-items:center; background: transparent; color: #bfcae2; text-align:left; font-weight:650; }
.nav button:hover, .nav button.active { color: white; background: #1b315f; }
.nav .nav-count { margin-left:auto; min-width:19px; height:19px; display:grid; place-items:center; padding:0 5px; border-radius:10px; background: light-dark(#365a9e, #151a20); font-size:10px; color: #dceaff; }
.sidebar-bottom { margin-top:auto; border-top: 1px solid rgba(205,216,237,.13); padding:16px 10px 0; }
.sidebar .build-info { display:block; margin-bottom:12px; color: light-dark(#aebdd6, #edf0f6); font-size:10px; line-height:1.5; overflow-wrap:anywhere; }
@media (max-width:1000px) { .sidebar .build-info { display:none; } }
.user-chip { display:flex; align-items:center; gap:9px; font-size:12px; }
.avatar { width:31px; height:31px; display:grid; flex:none; place-items:center; border-radius:50%; font-size:11px; font-weight:800; color: light-dark(#16316d, #ccd2df); background: light-dark(#cce5ff, #1c2024); }
.user-chip small { display:block; color: light-dark(#aebbd3, #edf0f5); margin-top:2px; }
.logout { margin:15px 0 0 39px; font-size:11px; color: light-dark(#9fb2d5, #eaeef6); }

.content { min-width:0; padding:0 32px 40px; }
.topbar { height:82px; display:flex; align-items:center; gap:18px; border-bottom: 1px solid var(--line); }
.breadcrumb { color: var(--muted); font-size:13px; margin-right:auto; }
.breadcrumb b { color: var(--ink); }
.socket-state { width:8px; height:8px; border-radius:50%; background: light-dark(#b9c4d6, #1b1f23); box-shadow:0 0 0 3px #e9eef5; }
.socket-state.live { background: var(--green); box-shadow:0 0 0 3px #dff6ed; }
.notification-button { position:relative; background: light-dark(#ffffff, #1e2124); border: 1px solid var(--line); width:35px; height:35px; display:grid; place-items:center; border-radius:10px; color: light-dark(#56647a, #dadde2); }
.notification-button i { position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px; border-radius:9px; display:grid; place-items:center; background:var(--red); color:#fff; font-size:9px; line-height:1; font-style:normal; font-weight:800; }
.topbar .primary { padding:10px 14px; }

.page { max-width:1440px; margin:0 auto; }
.page-title { margin:30px 0 25px; display:flex; align-items:flex-end; justify-content:space-between; gap:18px; }
.page-title h1 { margin:0; font-size:27px; letter-spacing:-.035em; }
.page-title p { margin:5px 0 0; color: var(--muted); font-size:13px; }
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.stat-card { padding:19px; background: var(--panel); border: 1px solid var(--line); border-radius:var(--radius); box-shadow:0 3px 10px rgba(33,49,80,.025); }
.stat-card .stat-heading { display:flex; justify-content:space-between; align-items:center; color: var(--muted); font-size:12px; font-weight:700; }
.stat-card .stat-icon { width:29px; height:29px; display:grid; place-items:center; border-radius:8px; background: var(--blue-soft); color: var(--blue); }
.stat-card strong { display:block; margin-top:15px; font-size:29px; letter-spacing:-.04em; }
.stat-card small { color: light-dark(#71809a, #e0e3e9); font-size:11px; }

.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(310px,.75fr); gap:18px; margin-top:18px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius:var(--radius); box-shadow:0 3px 10px rgba(33,49,80,.025); }
.card-header { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom: 1px solid var(--line); }
.card-header h2 { margin:0; font-size:14px; }
.card-header span { font-size:11px; color: var(--muted); }
.status-bars { padding:11px 20px 19px; }
.status-row { display:grid; grid-template-columns:130px 1fr 22px; gap:12px; align-items:center; padding:9px 0; font-size:12px; color: light-dark(#53617a, #d9dce2); }
.status-bars .progress { height:7px; overflow:hidden; border-radius:7px; background: light-dark(#edf1f6, #1e2124); }
.status-bars .progress b { height:100%; display:block; border-radius:7px; background: linear-gradient(90deg,#3678ee,#5c9bff); }
.status-bars .progress.orange b { background: linear-gradient(90deg,#ec9d1b,#f6b844); }
.status-bars .progress.red b { background: linear-gradient(90deg,#e95367,light-dark(#f37d8c, #1e1c1f)); }
.staff-list, .alert-list, .activity-list { padding:5px 20px 15px; }
.staff-item { display:flex; align-items:center; gap:11px; padding:12px 0; border-bottom: 1px solid light-dark(#eff2f6, #344258); }
.staff-item:last-child { border-bottom: 0; }
.presence { width:8px; height:8px; border-radius:50%; background: var(--green); box-shadow:0 0 0 3px #e5f7ef; }
.presence.break { background: #ec9d1b; box-shadow:0 0 0 3px #fff4db; }
.presence.away { background: light-dark(#a86cd5, #1b1b23); box-shadow:0 0 0 3px #f3e9fb; }
.presence.offline { background: light-dark(#95a0b4, #1a1d21); box-shadow:0 0 0 3px #edf0f4; }
.presence.overload { background: var(--red); box-shadow:0 0 0 3px #fce7eb; }
.staff-item .staff-name { flex:1; font-size:12px; font-weight:700; }
.staff-item small, .alert-list small { display:block; margin-top:2px; color: var(--muted); font-size:10px; }
.staff-item em { color: light-dark(#66748d, #dde0e6); font-style:normal; font-size:11px; }
.alert-item { padding:12px 0; border-bottom: 1px solid light-dark(#eff2f6, #344258); }
.alert-item:last-child { border-bottom: 0; }
.alert-item a { color: var(--ink); text-decoration:none; font-size:12px; font-weight:700; }
.alert-item p { margin:4px 0 0; color: light-dark(#a24a56, #ebd7da); font-size:11px; }
.empty { padding:35px 20px; color: light-dark(#8390a6, #e4e7eb); text-align:center; font-size:13px; }

.queue-layout { display:grid; grid-template-columns:minmax(350px,.9fr) minmax(420px,1.1fr); gap:18px; min-height:calc(100vh - 145px); }
.queue-list { overflow:hidden; }
.filterbar { padding:13px; display:grid; grid-template-columns:1fr 128px; gap:8px; border-bottom: 1px solid var(--line); }
.filterbar input, .filterbar select { border: 1px solid light-dark(#e0e6ee, #344258); border-radius:9px; padding:9px 10px; outline: none; font-size:12px; }
.queue-list .filterbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
.queue-list .filterbar input, .queue-list .filterbar select { min-width:0; width:100%; }
.queue-list #ticket-search, .queue-list #ticket-scope-filter { grid-column:1/-1; }
.tickets { overflow:auto; max-height:calc(100vh - 263px); }
.ticket { width:100%; padding:15px 17px; border: 0; border-bottom: 1px solid light-dark(#eef1f5, #344258); background: light-dark(#ffffff, #1e2124); text-align:left; color: var(--ink); }
.ticket:hover, .ticket.selected { background: light-dark(#f5f8fd, #1e2124); }
.ticket.selected { box-shadow:inset 3px 0 var(--blue); }
.ticket-top { display:flex; justify-content:space-between; gap:9px; align-items:center; }
.ticket-number { color: light-dark(#657592, #dde1e7); font-size:10px; font-weight:800; letter-spacing:.04em; }
.ticket h3 { margin:7px 0; font-size:13px; line-height:1.3; }
.ticket-meta { display:flex; flex-wrap:wrap; gap:6px 10px; color: light-dark(#78859a, #e1e4e9); font-size:10px; }
.tag { display:inline-flex; align-items:center; white-space:nowrap; border-radius:20px; padding:4px 8px; font-size:10px; font-weight:800; }
.tag.new { color: light-dark(#3667b5, #b9cae5); background: light-dark(#e9f2ff, #1d2124); }.tag.progress { color: light-dark(#096e60, #cae6e2); background: light-dark(#e2f7f2, #1d2124); }.tag.wait { color: light-dark(#80560d, #e9decb); background: light-dark(#fff4dd, #1e2123); }.tag.closed { color: light-dark(#5b6473, #dfe1e5); background: light-dark(#edf0f4, #1e2124); }
.priority { font-size:10px; font-weight:800; }.priority.CRITICAL { color: var(--red); }.priority.HIGH { color: light-dark(#d87513, #f1cfac); }.priority.NORMAL { color: light-dark(#3d70cd, #bbcdee); }.priority.LOW { color: light-dark(#63738c, #dde0e6); }

.ticket-detail { overflow:hidden; position:relative; }
.ticket-detail .empty { height:100%; display:grid; place-items:center; }
.detail-head { padding:20px 21px 17px; border-bottom: 1px solid var(--line); }
.detail-number { color: light-dark(#6d7d96, #dfe2e8); font-weight:800; letter-spacing:.06em; font-size:11px; }
.detail-head h2 { margin:7px 0 8px; font-size:20px; line-height:1.2; letter-spacing:-.025em; }
.detail-sub { display:flex; flex-wrap:wrap; gap:7px; color: light-dark(#69768d, #dee1e6); font-size:11px; }
.detail-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:15px; }
.detail-body { display:grid; grid-template-columns:minmax(0,1fr) 215px; min-height:380px; }
.conversation { min-width:0; display:flex; flex-direction:column; border-right: 1px solid var(--line); }
.messages { flex:1; overflow:auto; padding:17px 19px; display:flex; flex-direction:column; gap:13px; }
.message { max-width:85%; display:grid; gap:4px; align-self:flex-start; }
.message.mine { align-self:flex-end; }
.message-meta { font-size:10px; color: light-dark(#77849a, #e1e4e9); }.message.mine .message-meta { text-align:right; }
.bubble { padding:10px 12px; border-radius:11px 11px 11px 3px; background: light-dark(#f1f4f8, #1e2124); font-size:12px; line-height:1.45; white-space:pre-wrap; }.message.mine .bubble { color: #fff; background: #2d6be5; border-radius:11px 11px 3px 11px; }.message.internal .bubble { background: light-dark(#fff5d8, #1e2123); color: light-dark(#775417, #e1d9cc); }
.message-form { padding:12px 14px; display:grid; grid-template-columns:1fr auto; gap:8px; border-top: 1px solid var(--line); background: light-dark(#fbfcfe, #1e2124); }.message-form input { min-width:0; border: 1px solid light-dark(#dfe5ee, #344258); border-radius:9px; padding:10px; outline: none; font-size:12px; }
.ticket-sidebar { padding:17px; overflow:auto; background: light-dark(#fcfdff, #1e2124); }.ticket-sidebar h3 { margin:0 0 12px; font-size:12px; }.info-list { margin:0; display:grid; gap:11px; }.info-list div { display:grid; gap:2px; }.info-list dt { color: light-dark(#8793a7, #e5e7ec); font-size:10px; }.info-list dd { margin:0; color: light-dark(#34415a, #d2d5db); font-size:11px; line-height:1.35; }
.ticket-history { display:grid; gap:8px; margin:0 18px 14px; padding:12px; border: 1px solid light-dark(#e2eaf4, #344258); border-radius:11px; background: light-dark(#fbfcff, #1e2124); }.ticket-history h3 { margin:0; color: light-dark(#304462, #d1d6dc); font-size:11px; }.ticket-history article { display:grid; gap:4px; padding-top:9px; border-top: 1px solid light-dark(#e9eef5, #344258); }.ticket-history article:first-of-type { padding-top:0; border-top: 0; }.ticket-history b { color: light-dark(#2f4668, #d1d6de); font-size:11px; }.ticket-history small { color: light-dark(#76869c, #e1e4e9); font-size:10px; }.ticket-history p { margin:0; color: light-dark(#5d6d83, #dbdfe4); font-size:11px; line-height:1.4; white-space:pre-wrap; }

.client-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.client-card { padding:19px; }.client-card .client-title { display:flex; justify-content:space-between; align-items:start; gap:12px; }.client-card h2 { margin:0; font-size:15px; }.client-card p { margin:7px 0 16px; color: var(--muted); font-size:12px; }.client-list { display:grid; gap:8px; }.client-list div { display:flex; justify-content:space-between; gap:10px; color: light-dark(#58667c, #dadde2); font-size:11px; }.client-list b { color: light-dark(#263550, #cfd3d9); font-weight:700; text-align:right; }.client-card > .button-pair { margin-top:14px; }
.button-pair { display:flex; flex-wrap:wrap; gap:8px; }
.resource-card { padding:19px; }.resource-card h2 { margin:0; font-size:15px; }.resource-card > p { margin:7px 0 15px; color: var(--muted); font-size:12px; }
.resource-list { display:grid; gap:9px; }.resource-row { padding:11px 0; border-bottom: 1px solid light-dark(#edf1f6, #344258); }.resource-row:last-child { border-bottom: 0; }.resource-row b { display:block; color: light-dark(#263550, #cfd3d9); font-size:12px; }.resource-row span { display:block; margin-top:3px; color: light-dark(#78859a, #e1e4e9); font-size:11px; line-height:1.35; }.resource-row .tag { display:inline-flex; width:fit-content; margin-top:6px; font-size:10px; }
.task-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 16px; align-items:start; }.task-row > .task-billing, .task-row > .button-pair { grid-column:1 / -1; }.task-row-tags { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }.task-row-tags .tag { margin:0; }.task-controls { padding-top:2px; }
.task-billing { display:grid; gap:9px; margin-top:2px; padding:11px 12px; border: 1px solid light-dark(#e3eaf4, #344258); border-radius:11px; background: light-dark(#f8fbff, #1e2124); }.task-billing.compact { padding:9px 10px; gap:7px; }.task-billing-meta { display:flex; flex-wrap:wrap; gap:6px 13px; color: light-dark(#697890, #dee1e7); font-size:10px; }.task-billing-meta b { display:inline; color: light-dark(#56667f, #dadde3); font-size:10px; }.task-billing-result { display:flex; align-items:center; justify-content:space-between; gap:10px; }.task-billing-result .tag { margin:0; }.task-billing-result > b { color: light-dark(#1e3e73, #ced5e0); font-size:12px; }.task-execution, .company-work-description, .company-work-checklist { margin:0; color: light-dark(#596980, #dadee3); font-size:11px; line-height:1.5; white-space:pre-wrap; }.task-execution b, .company-work-checklist b { color: light-dark(#34445f, #d2d6dc); }.task-approved { color: light-dark(#59748f, #dae0e6); font-size:10px; }
.task-workflow-indicators { display:block; margin-top:5px; color: light-dark(#647894, #dde1e7); font-size:10px; }.task-detail-modal { width:min(720px,100%); }.task-detail-section { margin-top:20px; padding-top:18px; border-top: 1px solid light-dark(#e7edf5, #344258); }.task-detail-section h3 { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 10px; color: light-dark(#243552, #cfd3d9); font-size:14px; }.task-detail-section h3 span { color: light-dark(#73829a, #e0e4e9); font-size:10px; font-weight:500; }.task-detail-list { border: 1px solid light-dark(#e5edf6, #344258); border-radius:10px; overflow:hidden; }.task-detail-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom: 1px solid light-dark(#edf1f6, #344258); }.task-detail-row:last-child { border-bottom: 0; }.task-detail-row > div { display:grid; gap:2px; min-width:0; }.task-detail-row b { color: light-dark(#1d6fb8, #b0cde6); font-size:10px; }.task-detail-row span { color: light-dark(#34445f, #d2d6dc); font-size:12px; overflow-wrap:anywhere; }.task-detail-row small { color: light-dark(#74839a, #e0e4e9); font-size:10px; }.task-detail-row.done { background: light-dark(#f1fbf7, #1e2124); }.task-detail-row.done span { color: light-dark(#69807a, #dee3e2); text-decoration:line-through; }.task-comments { display:grid; gap:8px; }.task-comment { padding:11px 12px; border: 1px solid light-dark(#e5edf6, #344258); border-radius:10px; background: light-dark(#f9fbfe, #1e2124); }.task-comment b { color: light-dark(#2b3c58, #d0d4da); font-size:12px; }.task-comment small { margin-left:8px; color: light-dark(#7a8799, #e2e5e9); font-size:10px; }.task-comment p { margin:7px 0 0; color: light-dark(#586980, #dadee3); font-size:12px; line-height:1.45; white-space:pre-wrap; }.task-comment-form { display:grid; gap:8px; margin-top:10px; }.task-comment-form textarea { min-height:78px; }
.asset-detail-modal { width:min(720px,100%); }.asset-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:18px; }.asset-detail-grid > div { display:grid; gap:3px; padding:10px; border: 1px solid light-dark(#e5edf6, #344258); border-radius:10px; background: light-dark(#f9fbfe, #1e2124); }.asset-detail-grid small { color: light-dark(#73829a, #e0e4e9); font-size:10px; }.asset-detail-grid b { color: light-dark(#30415f, #d1d5dc); font-size:12px; overflow-wrap:anywhere; }.asset-notes { margin-top:12px; padding:11px 12px; border-radius:10px; background: light-dark(#f7fbff, #1e2124); color: light-dark(#56677f, #dadee3); font-size:12px; }.asset-notes b { color: light-dark(#30415f, #d1d5dc); }.asset-notes p { margin:6px 0 0; white-space:pre-wrap; }.asset-history { margin-top:20px; padding-top:18px; border-top: 1px solid light-dark(#e7edf5, #344258); }.asset-history h3 { margin:0 0 10px; color: light-dark(#243552, #cfd3d9); font-size:14px; }.asset-event { padding:11px 12px; border: 1px solid light-dark(#e5edf6, #344258); border-radius:10px; background: light-dark(#fff, #1e2124); margin-top:8px; }.asset-event > div { display:flex; justify-content:space-between; gap:10px; }.asset-event b { color: light-dark(#2c5b92, #d1dbe7); font-size:12px; }.asset-event small { color: light-dark(#78879c, #e1e5e9); font-size:10px; }.asset-event p { margin:7px 0 0; color: light-dark(#56677f, #dadee3); font-size:12px; line-height:1.45; white-space:pre-wrap; }.asset-event .danger-text { color: light-dark(#bf3850, #e9b9c2); font-weight:700; }.asset-event-links { display:block; margin-top:7px; color: light-dark(#55718f, #dae0e6); }
.visit-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 16px; align-items:start; }.visit-row > .visit-billing, .visit-row > .button-pair { grid-column:1 / -1; }.visit-row small { display:block; margin-top:3px; color: light-dark(#78859a, #e1e4e9); font-size:10px; line-height:1.35; }
.visit-billing { display:grid; gap:9px; margin-top:2px; padding:11px 12px; border: 1px solid light-dark(#d9e9e6, #344258); border-radius:11px; background: light-dark(#f6fcfa, #1e2124); }.visit-billing.compact { padding:9px 10px; gap:7px; }.visit-billing-meta { display:flex; flex-wrap:wrap; gap:6px 13px; color: light-dark(#56746f, #dae0df); font-size:10px; }.visit-billing-meta b { display:inline; color: light-dark(#416762, #d5dedc); font-size:10px; }.visit-billing-result { display:flex; align-items:center; justify-content:space-between; gap:10px; }.visit-billing-result .tag { margin:0; }.visit-billing-result > b { color: light-dark(#176456, #ccddda); font-size:12px; }
.performance-card { display:grid; grid-template-columns:minmax(230px,.8fr) minmax(0,1.2fr); gap:20px; margin:18px 0; padding:20px; overflow:hidden; background: linear-gradient(115deg,light-dark(#f7fbff, #1e2124),light-dark(#f4fcfa, #1e2124)); border-color: light-dark(#dce8f3, #344258); }.performance-main { display:flex; align-items:center; justify-content:space-between; gap:16px; }.performance-main .eyebrow { display:block; color: light-dark(#64758b, #dde1e5); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.performance-main strong { display:block; margin:7px 0 3px; color: light-dark(#173c7c, #ccd4e2); font-size:32px; letter-spacing:-.05em; }.performance-main small { display:block; max-width:275px; color: light-dark(#6a7c93, #dee2e7); font-size:11px; line-height:1.4; }.rating-ring { --rating:0; position:relative; width:72px; height:72px; display:grid; flex:none; place-items:center; border-radius:50%; background: conic-gradient(#2678df calc(var(--rating) * 1%),light-dark(#e7eff9, #1d2124) 0); }.rating-ring:before { content:""; position:absolute; width:57px; height:57px; border-radius:50%; background: light-dark(#f7fbff, #1e2124); }.rating-ring span { z-index:1; color: light-dark(#29547d, #d0d9e2); font-size:12px; font-weight:850; }.performance-metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-self:center; gap:9px; }.performance-metrics div { min-width:0; padding:8px 10px; border-left: 1px solid light-dark(#dce7ef, #344258); }.performance-metrics b { display:block; overflow:hidden; color: light-dark(#29405e, #d0d5dc); font-size:16px; text-overflow:ellipsis; white-space:nowrap; }.performance-metrics small { display:block; margin-top:3px; color: light-dark(#738298, #e0e4e8); font-size:10px; line-height:1.25; }
.dual-resource { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.knowledge-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:16px; }.knowledge-card { padding:19px; }.knowledge-card h2 { margin:7px 0; font-size:15px; }.knowledge-card p { margin:0; color: light-dark(#5f6d82, #dcdfe4); font-size:12px; line-height:1.5; white-space:pre-wrap; }.knowledge-card small { color: light-dark(#8a95a6, #e5e8eb); font-size:10px; }.knowledge-feedback { align-items:center; margin-top:13px; color: light-dark(#74839a, #e0e4e9); font-size:11px; }.knowledge-feedback .text-button.active { color: light-dark(#126c59, #cbdfda); font-weight:800; }
.commercial-stats { margin-bottom:18px; }.commercial-stats strong { font-size:22px; }
.contract-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 16px; align-items:start; }.contract-row > .tag { justify-self:end; margin:0; }.contract-row > .contract-usage { grid-column:1 / -1; }.contract-usage { display:flex; flex-wrap:wrap; align-items:stretch; gap:7px; padding:10px; border: 1px solid light-dark(#e4ebf4, #344258); border-radius:10px; background: light-dark(#f8fbff, #1e2124); }.contract-usage > div { display:grid; gap:2px; min-width:92px; }.contract-usage span,.contract-usage b { display:block; margin:0; }.contract-usage span { color: light-dark(#74839a, #e0e4e9); font-size:10px; }.contract-usage b { color: light-dark(#30415f, #d1d5dc); font-size:11px; }.contract-usage .text-button { align-self:center; margin-left:auto; }.contract-generated { align-self:center; color: light-dark(#57705f, #dae0dc); font-size:10px; }.billing-usage-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0 0 15px; }.billing-usage-grid > div { display:grid; gap:3px; padding:10px; border: 1px solid light-dark(#e3eaf4, #344258); border-radius:10px; background: light-dark(#f8fbff, #1e2124); }.billing-usage-grid span { color: light-dark(#74839a, #e0e4e9); font-size:10px; }.billing-usage-grid b { color: light-dark(#29456e, #d0d6df); font-size:12px; }.billing-period-note { display:grid; gap:4px; margin:0 0 16px; padding:11px 12px; border-radius:10px; background: light-dark(#eef7ff, #1e2124); color: light-dark(#5d708b, #dbe0e5); font-size:11px; line-height:1.4; }.billing-period-note b { color: light-dark(#29456e, #d0d6df); font-size:12px; }
.invoice-row { display:grid; grid-template-columns:minmax(150px,1fr) auto auto; gap:10px 16px; align-items:start; }.invoice-row > .invoice-confirmation, .invoice-row > .text-button { grid-column:1 / -1; }.invoice-row .tag { margin:0; }.invoice-confirmation { display:flex; align-items:center; flex-wrap:wrap; gap:7px 10px; padding:8px 10px; border-radius:9px; background: light-dark(#f7f9fc, #1e2124); color: light-dark(#65748b, #dde0e5); font-size:10px; }.invoice-confirmation.actual { background: light-dark(#effaf6, #1e2124); }.invoice-confirmation .tag { margin:0; }.invoice-confirmation small { color: light-dark(#68778e, #dee1e6); font-size:10px; }.invoice-confirmation .text-button { margin-left:auto; font-size:10px; }.payment-note { display:grid; gap:5px; margin:0 0 18px; padding:15px 18px; border-color: light-dark(#dbe7f8, #344258); color: light-dark(#52657f, #d9dde3); font-size:12px; line-height:1.45; }.payment-note b { color: light-dark(#263d61, #cfd4dc); }
.payment-note .message-form { grid-template-columns:minmax(120px,1fr) minmax(120px,1fr) auto; margin-top:6px; padding:0; border: 0; background: transparent; }
.report-stats { margin-bottom:18px; }.report-sections { margin-bottom:18px; }.report-card .resource-row span small { display:block; margin-top:4px; color: light-dark(#8995a6, #e5e8eb); font-size:10px; }.report-table { margin-top:18px; }.report-table td { white-space:nowrap; }.report-filters { display:grid; gap:12px; margin:0 0 18px; padding:15px 18px; border-color: light-dark(#dbe7f8, #344258); }.report-filters b { color: light-dark(#263d61, #cfd4dc); }.report-filters p { margin:3px 0 0; color: light-dark(#728198, #e0e3e8); font-size:11px; }.report-filter-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:8px; }.report-filter-form input,.report-filter-form select { min-width:0; border: 1px solid light-dark(#dfe5ee, #344258); border-radius:9px; padding:10px; outline: none; background: light-dark(#fff, #1e2124); color: light-dark(#34415a, #d2d5db); font-size:12px; }.report-filter-form .button-pair { grid-column:span 2; align-items:center; }
.company-work-stats { margin-bottom:18px; }.company-work-card { padding:0; overflow:hidden; }.company-work-card .card-header { padding:18px 20px; }.company-work-list { gap:0; }.company-work-item { padding:18px 20px; border-bottom: 1px solid light-dark(#edf1f6, #344258); }.company-work-item:last-child { border-bottom: 0; }.company-work-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }.company-work-head > div:first-child { min-width:0; }.company-work-head b { display:block; color: light-dark(#243552, #cfd3d9); font-size:13px; }.company-work-head small { display:block; margin-top:4px; color: light-dark(#78879c, #e1e5e9); font-size:10px; line-height:1.4; }.company-work-item .task-billing { margin-top:12px; }
.work-log { display:grid; gap:8px; margin-top:12px; padding:11px 12px; border-radius:10px; background: light-dark(#fbfcfe, #1e2124); color: light-dark(#3d4f6b, #d4d8de); font-size:11px; }.work-log > b { color: light-dark(#354967, #d3d7de); font-size:11px; }.work-log > small { color: light-dark(#8490a2, #e4e7eb); }.work-log-entry { padding-top:8px; border-top: 1px solid light-dark(#e8edf4, #344258); }.work-log-entry small { color: light-dark(#78879a, #e1e5e9); font-size:10px; }.work-log-entry p { margin:3px 0 0; color: light-dark(#52627a, #d9dce2); line-height:1.45; white-space:pre-wrap; }.ticket-timers { margin:0; color: light-dark(#5d6e85, #dbdfe4); font-size:10px; line-height:1.45; }
.activity-list { max-width:820px; }.activity { display:grid; grid-template-columns:32px 1fr auto; gap:10px; align-items:center; padding:13px 0; border-bottom: 1px solid light-dark(#edf1f6, #344258); }.activity-icon { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color: light-dark(#3972d8, #bacef1); background: light-dark(#edf4ff, #1e2124); }.activity b { font-size:12px; }.activity p { margin:3px 0 0; color: light-dark(#728096, #e0e3e8); font-size:11px; }.activity time { color: light-dark(#8793a7, #e5e7ec); font-size:10px; }
.admin-stats { margin-bottom:18px; }.admin-users { overflow:hidden; }.table-wrap { overflow:auto; }.admin-users table { width:100%; min-width:810px; border-collapse:collapse; }.admin-users th { padding:11px 17px; color: light-dark(#7c899e, #e2e5ea); background: light-dark(#fbfcfe, #1e2124); text-align:left; font-size:10px; letter-spacing:.04em; text-transform:uppercase; }.admin-users td { padding:13px 17px; border-top: 1px solid light-dark(#edf1f6, #344258); color: light-dark(#526078, #d9dce1); font-size:12px; vertical-align:middle; }.admin-users td > small, .admin-users td small { display:block; margin-top:3px; color: light-dark(#8a95a6, #e5e8eb); font-size:10px; }.user-table { display:flex; gap:10px; align-items:center; min-width:175px; }.user-table b { display:block; color: light-dark(#22324d, #ced2d8); font-size:12px; }.account-status { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:750; }.account-status:before { content:""; width:7px; height:7px; border-radius:50%; background: var(--green); }.account-status.inactive { color: light-dark(#7d8898, #e2e5e8); }.account-status.inactive:before { background: light-dark(#b3bdca, #1b1f22); }

.modal-backdrop { position:fixed; z-index:10; inset:0; display:grid; place-items:center; padding:20px; background: rgba(9,17,37,.46); }.modal { width:min(520px,100%); max-height:calc(100vh - 40px); overflow:auto; padding:23px; border-radius:18px; background: light-dark(#ffffff, #1e2124); box-shadow:0 26px 70px rgba(9,17,37,.28); }.modal h2 { margin:0 0 5px; font-size:20px; }.modal > p { margin:0 0 20px; color: var(--muted); font-size:12px; line-height:1.45; }.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
.toast { position:fixed; z-index:20; right:24px; bottom:23px; max-width:350px; padding:13px 15px; border-radius:11px; background: #172443; color: #fff; box-shadow:0 15px 34px rgba(9,17,37,.24); font-size:12px; animation:slide .2s ease-out; }.toast.error { background: #a73346; } @keyframes slide { from { transform:translateY(10px); opacity:0 } to { transform:none; opacity:1 } }
.work-alert { position:fixed; z-index:30; top:22px; right:24px; width:min(440px,calc(100vw - 32px)); display:grid; grid-template-columns:36px 1fr auto; gap:12px; align-items:center; padding:15px; border: 1px solid light-dark(#b7d3ff, #344258); border-radius:14px; background: light-dark(#fff, #1e2124); box-shadow:0 22px 55px rgba(20,47,98,.22); animation:notice-in .22s ease-out; }
.work-alert-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; background: light-dark(#eaf3ff, #1e2124); color: light-dark(#1764cc, #aec9ed); font-weight:800; }
.work-alert-copy b,.work-alert-copy span { display:block; }.work-alert-copy b { color: light-dark(#172443, #cccfd6); font-size:13px; }.work-alert-copy span { margin-top:3px; color: light-dark(#60708a, #dce0e5); font-size:12px; line-height:1.35; }.work-alert-actions { display:flex; gap:7px; align-items:center; }.work-alert-actions .primary { padding:8px 10px; font-size:11px; }.work-alert-actions .text-button { padding:7px 2px; color: light-dark(#62708a, #dce0e5); font-size:11px; }
.notification-modal { width:min(580px,100%); }.modal-title-row { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }.modal-title-row h2 { margin-bottom:5px; }.modal-title-row .text-button { white-space:nowrap; }.notification-list { margin:3px -4px -6px; max-height:440px; overflow:auto; }.notification-row { width:100%; display:flex; gap:12px; align-items:flex-start; padding:13px 10px; border: 0; border-bottom: 1px solid light-dark(#edf1f6, #344258); background: light-dark(#f5f9ff, #1e2124); text-align:left; cursor:pointer; }.notification-row:hover { background: light-dark(#eaf3ff, #1e2124); }.notification-row.read { background: light-dark(#fff, #1e2124); }.notification-row > span { display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:9px; background: light-dark(#dcecff, #1d2124); color: light-dark(#1764cc, #aec9ed); }.notification-row div { min-width:0; }.notification-row b,.notification-row small { display:block; }.notification-row b { color: light-dark(#1a2742, #cdcfd5); font-size:12px; }.notification-row small { margin-top:3px; color: light-dark(#697894, #dee1e7); font-size:11px; line-height:1.35; }
@keyframes notice-in { from { transform:translateY(-12px); opacity:0; } to { transform:none; opacity:1; } }

/* Compact actions preserve existing controls and their role-based visibility. */
.page-title > div:first-child { min-width:0; flex:1; }
.page-actions { position:relative; flex:none; align-self:center; z-index:4; }
.page-actions-toggle { cursor:pointer; padding:11px 16px; border: 1px solid var(--line); border-radius:10px; background: light-dark(#ffffff, #1e2124); color: var(--ink); font-weight:650; }
.page-actions-toggle[aria-expanded="true"] { border-color: var(--blue); background: var(--blue-soft); }
.page-actions-panel[hidden] { display:none; }
.page-actions-panel { position:absolute; top:calc(100% + 8px); right:0; width:280px; max-width:calc(100vw - 28px); max-height:65vh; overflow:auto; padding:8px; background: light-dark(#ffffff, #1e2124); border: 1px solid var(--line); border-radius:14px; box-shadow:0 16px 45px #14244426; }
.page-actions-panel .button-pair,.page-actions-panel .modal-actions { display:contents; }
.page-actions-panel button,.page-actions-panel a { display:block; width:100%; margin:0; padding:12px; text-align:left; border-radius:8px; box-shadow:none; background: transparent; color: var(--ink); font-size:13px; }
.page-actions-panel button:hover { background: var(--blue-soft); color: var(--blue); }
button:focus-visible,.attachment-button:focus-within { outline: 3px solid light-dark(#8bb6ff, #344258); outline-offset:3px; }
.stat-card { padding:18px; }
.stat-card small,.staff-name small,.staff-item em small { font-size:12px; color: var(--muted); }
.dashboard-grid .empty { min-height:90px; padding:24px 18px; font-size:13px; }
.status-bars .progress.green b { background: linear-gradient(90deg,#139d73,#39be94); }
.mobile-menu-button { display:none; }
.mobile-navigation { margin:0; height:100dvh; max-height:100dvh; width:min(340px,90vw); max-width:90vw; padding:22px 18px; border: 0; background: var(--panel); color: var(--ink); box-shadow:12px 0 50px #0b132b33; }
.mobile-navigation::backdrop { background: #0b132b80; }
.drawer-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.drawer-heading h2 { margin:0; font-size:18px; }
.mobile-navigation > p { font-size:12px; color: var(--muted); margin:16px 0; }
.mobile-navigation nav { display:grid; gap:5px; }
.mobile-navigation nav button { display:flex; align-items:center; gap:14px; text-align:left; padding:13px; background: transparent; border: 0; border-radius:10px; color: var(--ink); }
.mobile-navigation nav button.active { background: var(--blue-soft); color: var(--blue); font-weight:700; }
.drawer-footer { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border: 0; }
.chat-composer { display:grid; grid-template-columns:minmax(0,1fr) 42px auto; gap:8px; align-items:center; }
.attachment-button { display:grid; place-items:center; width:42px; height:42px; border: 1px solid var(--line); border-radius:10px; cursor:pointer; color: var(--blue); background: var(--blue-soft); }
.chat-composer > label:not(.attachment-button),.attachment-preview { grid-column:1 / -1; }
.attachment-preview { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; background: var(--blue-soft); border-radius:10px; }
.attachment-preview[hidden] { display:none; }
.attachment-preview span { overflow-wrap:anywhere; font-size:12px; }
.ticket-detail .detail-body { height:auto; align-items:start; }
.queue-layout { align-items:start; }
.ticket-detail .conversation { height:auto; min-height:0; padding-top:14px; }
.ticket-detail .messages { flex:none; min-height:180px; max-height:380px; overflow:auto; }
.ticket-detail .messages > .empty { height:auto; min-height:150px; padding:18px; }
.conversation > .field-help { padding:0 14px 12px; }
.ticket-attachments { display:block; margin:0 14px 12px; padding:0; }
.ticket-attachments > summary { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px; cursor:pointer; font-size:13px; font-weight:650; list-style:none; }
.ticket-attachments > summary::-webkit-details-marker { display:none; }
.ticket-attachments > summary:before { content:'▸'; color: var(--muted); }
.ticket-attachments[open] > summary:before { content:'▾'; }
.ticket-attachments > summary span { margin-left:auto; font-weight:400; color: var(--muted); font-size:12px; }
.ticket-attachments .task-detail-list { margin:0 12px 10px; }
.ticket-attachments .empty { height:auto; min-height:0; padding:16px; }
.ticket-attachments .field-help { display:block; padding:10px 12px; }
#ticket-attachment-form { grid-template-columns:42px minmax(0,1fr) auto; align-items:center; padding:12px; }
#ticket-attachment-form select { min-width:0; width:100%; border: 1px solid var(--line); border-radius:9px; padding:10px; font:inherit; font-size:12px; background: light-dark(#ffffff, #1e2124); }
#ticket-attachment-form .secondary { padding:11px 14px; }
.ticket-sidebar { position:sticky; top:12px; }
.ticket-support { margin:0 14px 14px; border: 1px solid var(--line); border-radius:11px; background: light-dark(#fbfcff, #1e2124); overflow:hidden; }
.ticket-support-tabs { display:flex; gap:4px; padding:6px; border-bottom: 1px solid var(--line); }
.ticket-support-tabs button { flex:1; padding:10px 8px; border: 0; border-radius:7px; background: transparent; color: var(--muted); font-size:12px; font-weight:650; }
.ticket-support-tabs button[aria-selected="true"] { background: var(--blue-soft); color: var(--blue); }
.ticket-support-tabs button span { display:inline-block; padding:1px 6px; margin-left:4px; border-radius:6px; background: light-dark(#ffffff, #1e2124); font-size:11px; }
.ticket-support [role="tabpanel"][hidden] { display:none; }
.ticket-support .ticket-history { margin:0; padding:12px; border: 0; background: transparent; border-radius:0; }
.ticket-support .card-header { padding:0 0 10px; gap:8px; flex-wrap:wrap; }
.ticket-support .card-header h3 { font-size:12px; }
.ticket-support .empty { height:auto; min-height:0; padding:14px 4px; text-align:left; font-size:12px; }
.ticket-support .text-button { padding:5px 0; font-size:12px; }
.ticket-support article .card-header { padding:0; border: 0; }
@media (max-width:680px) {
  #ticket-attachment-form { grid-template-columns:42px minmax(0,1fr); }
  #ticket-attachment-form > button { grid-column:1 / -1; }
  .ticket-detail .messages { max-height:320px; }
}
@media (max-width:680px) {
  .shell .sidebar { display:none; }
  .shell .content { padding-bottom:24px; }
  .content > .mobile-menu-button { display:block; position:absolute; top:16px; left:14px; padding:9px 10px; }
  .content .topbar { gap:10px; padding-left:96px; }
  .topbar .breadcrumb { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .topbar .socket-state { display:none; }
  .topbar .notification-button { flex:none; }
  .content .topbar .primary { flex:none; font-size:0; color: transparent; overflow:hidden; position:relative; }
  .content .topbar .primary:after { position:absolute; inset:0; display:grid; place-items:center; color: white; }
  .content .page-title { align-items:flex-start; gap:10px; }
  .page-actions-toggle { padding:10px; font-size:12px; white-space:nowrap; }
  .content .chat-composer { grid-template-columns:minmax(0,1fr) 42px; }
  .chat-composer > .primary { grid-column:1 / -1; }
}

@media (max-width:1000px) { .shell { grid-template-columns:70px minmax(0,1fr); }.sidebar { padding:20px 10px; }.sidebar .brand span, .workspace, .nav button span, .nav .nav-count, .user-chip > div, .logout { display:none; }.sidebar .brand { padding:0; justify-content:center; }.nav button { justify-content:center; padding:12px; }.sidebar-bottom { padding:16px 8px 0; }.queue-layout { grid-template-columns:1fr; }.ticket-detail { min-height:600px; }.tickets { max-height:330px; }.detail-body { height:400px; }.stats { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:680px) { .login-layout { grid-template-columns:1fr; }.login-hero { display:none; }.login-panel { padding:46px 26px; }.registration-layout { padding:18px 12px; }.registration-card { padding:25px 20px; }.form-grid { grid-template-columns:1fr; }.registration-card form > .text-button { margin:14px 0 0; }.shell { display:block; }.sidebar { position:fixed; z-index:5; bottom:0; top:auto; width:100%; height:64px; padding:8px; flex-direction:row; }.sidebar .brand, .sidebar-bottom { display:none; }.nav { display:flex; width:100%; gap:2px; overflow-x:auto; scrollbar-width:none; }.nav::-webkit-scrollbar { display:none; }.nav button { flex:0 0 48px; justify-content:center; padding:12px; font-size:18px; }.content { padding:0 14px 85px; }.topbar { height:67px; }.topbar .primary { font-size:0; width:35px; height:35px; padding:0; }.topbar .primary:after { content:"+"; font-size:20px; }.breadcrumb { font-size:12px; }.page-title { margin:21px 0 18px; }.page-title h1 { font-size:23px; }.stats { gap:10px; }.stat-card { padding:13px; }.stat-card strong { margin-top:9px; font-size:23px; }.dashboard-grid, .dual-resource { grid-template-columns:1fr; }.queue-layout { margin-left:-14px; margin-right:-14px; gap:10px; }.queue-list, .ticket-detail { border-radius:0; border-left: 0; border-right: 0; }.detail-body { grid-template-columns:1fr; height:auto; }.ticket-sidebar { display:none; }.conversation { border: 0; height:400px; }.filterbar { grid-template-columns:1fr 120px; }.client-grid { grid-template-columns:1fr; }.task-row, .visit-row, .invoice-row, .contract-row { grid-template-columns:1fr; }.contract-row > .tag { justify-self:start; }.billing-usage-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.task-row-tags { justify-content:flex-start; }.task-billing-result, .visit-billing-result, .company-work-head { align-items:flex-start; flex-direction:column; }.company-work-item { padding:15px; }.performance-card { grid-template-columns:1fr; gap:14px; padding:15px; }.performance-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }.performance-metrics div { padding:7px 8px; }.performance-main strong { font-size:28px; }.payment-note .message-form, .report-filter-form { grid-template-columns:1fr; }.report-filter-form .button-pair { grid-column:auto; } }

/* Unified workspace: one primary action, contextual tools, restrained hierarchy. */
:root { --page:#f5f7fb; --line:#e2e8f0; --ink:#17243c; --muted:#64748b; --radius:14px; font-size:14px; }
[hidden] { display:none !important; }
.primary,.secondary,.danger { min-height:40px; font-size:13px; font-weight:650; border-radius:9px; }
.primary { box-shadow:0 2px 5px #2563eb18; }
.secondary { background: light-dark(#fff, #1e2124); border: 1px solid light-dark(#dbe3ee, #344258); }
.secondary:hover { background: light-dark(#f5f8ff, #1e2124); border-color: light-dark(#afc5ea, #344258); }
.text-button { font-size:12px; font-weight:600; padding:7px 9px; }
button:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.sidebar { padding:24px 16px; }.sidebar .brand { font-size:14px; letter-spacing:0; line-height:1.4; }
.nav { gap:5px; }.nav button { min-height:42px; font-size:13px; font-weight:550; }.nav button.active { background: #1d355a; box-shadow:inset 3px 0 #60a5fa; }
.content { padding:0 28px 36px; }.topbar { height:72px; gap:14px; }
.global-search-button { display:flex; align-items:center; gap:9px; height:38px; padding:0 13px; border: 1px solid var(--line); border-radius:9px; background: light-dark(#fff, #1e2124); color: var(--muted); font-size:12px; }
.global-search-button:hover { border-color: light-dark(#a8bddf, #344258); color: var(--blue); }.notification-button { width:38px; height:38px; }
.page-title { margin:26px 0 22px; align-items:center; flex-wrap:wrap; gap:12px; }.page-title h1 { font-size:25px; font-weight:750; line-height:1.25; }.page-title p { line-height:1.6; max-width:780px; }
.section-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }.button-pair:empty,.modal-actions:empty { display:none; }
.page-title > .button-pair,.page-title > .modal-actions { margin:0; }
.card { box-shadow:0 2px 8px #152b4b04; }.card-header { min-height:62px; padding:16px 20px; gap:14px; }.card-header h2 { font-size:14px; font-weight:700; }
.stat-card { padding:20px; }.stat-card strong { font-size:28px; }.stat-card small { font-size:11px; line-height:1.55; }
.resource-card { overflow:visible; }.resource-row { gap:12px; padding:18px 0; }.resource-row small { line-height:1.55; }.resource-row > div { min-width:0; }.resource-row b { overflow-wrap:anywhere; }
.client-title h2 { font-size:17px; line-height:1.4; }.client-card { padding:20px; position:relative; }.client-list { margin:14px 0; }.client-list b { font-weight:550; overflow-wrap:anywhere; }
.context-actions { position:relative; display:flex; justify-content:flex-end; width:max-content; max-width:100%; margin-left:auto; z-index:5; }
.client-card > .context-actions { margin-top:16px; }.task-row > .context-actions,.visit-row > .context-actions,.invoice-row > .context-actions { grid-column:1/-1; }
.page-actions-toggle { min-height:38px; padding:8px 12px; font-size:12px; color: light-dark(#4b5e7a, #d7dce2); font-weight:650; }
.page-actions-panel { width:260px; z-index:35; padding:6px; border-radius:11px; box-shadow:0 12px 32px #17243c1c; }
.page-actions-panel button { min-height:38px; font-size:12px; font-weight:550; border: 0; }
.page-actions-panel .danger { color: light-dark(#be334b, #e8b8c0); }.page-actions-panel button:focus-visible { outline-offset:-3px; }
.context-actions:has(.page-actions-toggle[aria-expanded="true"]) { z-index:36; }
.detail-actions { align-items:center; }.detail-actions > .context-actions { margin-left:0; }.ticket-detail { overflow:visible; }
.messages { min-height:180px; }.detail-head { padding:20px; }.ticket-sidebar { padding:18px; }.detail-sub { gap:8px; line-height:1.55; }
.task-billing,.visit-billing { border-radius:10px; }.task-billing-meta,.visit-billing-meta { gap:12px; line-height:1.6; }.task-row,.visit-row { padding:18px 0; }
.invoice-row { grid-template-columns:minmax(0,1fr) auto auto; }.invoice-confirmation { grid-column:1/-1; }.invoice-row > .text-button { justify-self:start; }
.workspace-tabs { display:flex; flex-wrap:wrap; gap:5px; margin:22px 0 18px; padding:5px; border: 1px solid var(--line); border-radius:11px; background: light-dark(#eaf0f7, #1e2124); width:fit-content; max-width:100%; }
.workspace-tabs button { min-height:38px; border: 0; padding:9px 17px; border-radius:8px; background: transparent; color: light-dark(#5b6c83, #dbdfe4); font-size:13px; font-weight:600; }
.workspace-tabs button[aria-selected="true"] { background: light-dark(#fff, #1e2124); color: light-dark(#1d4ed8, #b0c1f1); box-shadow:0 1px 5px #152b4b12; }.workspace-tabs button:hover { color: light-dark(#1d4ed8, #b0c1f1); }
.commercial-grid { display:block; }.commercial-grid > .card { margin-top:0; }.admin-users { margin-top:0; }
.table-wrap { overflow:auto; }.admin-users table { min-width:720px; }.admin-users td { vertical-align:middle; }.admin-users td:last-child { min-width:115px; }
.modal { padding:26px; border: 1px solid var(--line); }.modal h2 { font-size:21px; }.modal-actions { align-items:center; flex-wrap:wrap; }.modal .field-help { font-size:11px; }
@media (max-width:1200px) { .queue-layout { grid-template-columns:minmax(280px,.8fr) minmax(430px,1.2fr); }.client-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:1000px) { .content { padding:0 20px 30px; }.queue-layout { grid-template-columns:1fr; }.ticket-detail { min-height:0; }.dual-resource { grid-template-columns:1fr; }.sidebar { padding:20px 10px; } }
@media (max-width:680px) { .content { padding:0 14px 28px; }.topbar { height:64px; gap:10px; }.global-search-button { width:38px; padding:0; justify-content:center; }.global-search-button span { display:none; }.breadcrumb { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.page-title { align-items:flex-start; }.page-title > div:first-child { flex-basis:100%; }.section-toolbar { flex:1; }.section-toolbar > button { flex:1; }.page-actions { align-self:stretch; }.page-actions-toggle { min-height:40px; }.client-grid { grid-template-columns:1fr; }.invoice-row { grid-template-columns:1fr; }.card-header { padding:15px; }.workspace-tabs { width:100%; }.workspace-tabs button { flex:1; padding:9px 10px; }.page-actions-panel { width:240px; }.stats { gap:10px; }.stat-card { padding:14px; }.stat-card strong { font-size:24px; }.client-card { padding:18px; }.queue-layout { margin:0; }.queue-list,.ticket-detail { border: 1px solid var(--line); border-radius:12px; }.modal-backdrop { padding:12px; }.modal { max-height:calc(100dvh - 24px); padding:22px 18px; } }
.client-grid { margin-bottom:20px; }
.resource-card > .card-header { padding:0 0 16px; min-height:42px; }

/* The ticket queue is navigation, the conversation is the workspace. */
.page-tickets { max-width:1380px; margin:0 auto; }
.page-tickets .queue-layout { grid-template-columns:310px minmax(0,1fr); gap:20px; }
.page-tickets .queue-list { min-width:0; }
.page-tickets .filterbar button { font-size:11px; padding:8px; white-space:nowrap; }
.page-tickets .ticket { padding:16px; }
.page-tickets .ticket h3 { font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.page-tickets .ticket-detail .detail-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px 20px; padding:20px; }
.page-tickets .detail-number,.page-tickets .detail-head h2,.page-tickets .detail-sub { grid-column:1; margin:0; }
.page-tickets .detail-head h2 { font-size:21px; line-height:1.4; overflow-wrap:anywhere; }
.page-tickets .detail-actions { grid-column:2; grid-row:1/4; align-self:center; margin:0; justify-content:flex-end; }
@media (max-width:1200px) {
  .page-tickets .queue-layout { grid-template-columns:280px minmax(0,1fr); }
  .page-tickets .detail-actions { grid-column:1/-1; grid-row:auto; justify-content:flex-start; margin-top:6px; }
}
@media (max-width:1000px) { .page-tickets .queue-layout { grid-template-columns:minmax(0,1fr); } }

/* Shared card bodies must align with their headers, not with the outer border. */
.card > .resource-list { padding:4px 20px 16px; gap:0; }
.resource-card > .resource-list { padding:0; }
.company-work-card > .resource-list { padding:0; }
.company-work-card > .card-header { padding:18px 20px; }
.resource-row { padding:14px 0; }
.resource-row small { color: var(--muted); font-size:12px; }
.page-assets .resource-row { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto; align-items:center; gap:16px; }
.page-assets .resource-row.asset-row { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto auto; }
.page > .resource-card + .resource-card { margin-top:20px; }
.page-assets .resource-row small { display:block; margin-top:4px; }
.page-assets .resource-row .tag { align-self:start; }
[id^="commercial-panel-tariffs"] .resource-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; align-items:center; gap:20px; }
.field label { font-size:12px; line-height:1.5; }
.field input,.field select,.field textarea { font-size:13px; line-height:1.5; }
.modal .form-grid { gap:16px; }
.knowledge-search .message-form { grid-template-columns:minmax(0,1fr) auto auto; align-items:center; }
.conversation { container-type:inline-size; }
@container (max-width:400px) {
  .chat-composer { grid-template-columns:minmax(0,1fr) 42px; }
  .chat-composer > .primary { grid-column:1/-1; }
}
@media (max-width:1000px) {
  .page-assets .resource-row,.page-assets .resource-row.asset-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.report-sections { align-items:start; gap:20px; margin:20px 0; }
.report-card { min-width:0; }
.report-empty-summary { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; padding:18px 20px; }
.report-empty-summary h2 { margin:0; font-size:14px; }
.report-empty-summary p { margin:0; font-size:12px; line-height:1.5; color: var(--muted); }
.report-card .card-header { min-height:60px; }
.report-card .empty { padding:24px 0; }
.report-sla-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; }
.report-sla-row b { font-size:13px; font-weight:600; }
.report-sla-row small { display:block; margin-top:5px; font-size:11px; line-height:1.5; }
.report-sla-value { text-align:right; }
.report-sla-value strong { font-size:17px; font-weight:700; color: var(--ink); }
.report-card .report-sla-value span { margin-top:5px; font-size:11px; color: var(--muted); }
.report-finance-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:20px; }
.report-finance-metric { min-width:0; border: 1px solid var(--line); border-radius:10px; padding:16px; background: light-dark(#f8fafc, #1e2124); }
.report-finance-metric span { display:block; color: var(--muted); font-size:12px; }
.report-finance-metric strong { display:block; margin-top:8px; font-size:22px; line-height:1.4; color: var(--ink); overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.report-distribution { display:grid; gap:18px; padding:20px; }
.report-distribution-row > div:first-child { display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:8px; }
.report-distribution-row span { font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.report-distribution-row strong { font-size:17px; color: var(--ink); font-variant-numeric:tabular-nums; }
.report-bar { height:7px; background: light-dark(#edf2f8, #1e2124); border-radius:8px; overflow:hidden; }
.report-bar i { display:block; height:100%; background: #4b83ed; border-radius:inherit; }
.report-table > p { margin:0; padding:14px 20px; color: var(--muted); font-size:12px; line-height:1.65; border-bottom: 1px solid var(--line); }
.report-table .table-wrap { padding:0 8px 8px; }
.report-table th { line-height:1.5; font-size:10px; }
.report-table td { padding:14px 12px; font-size:12px; }
.report-table td small { margin-top:5px; line-height:1.5; }
.report-table td[colspan] { padding:24px 12px; color: var(--muted); text-align:center; }

/* Conversation-first ticket: details and supporting material stay out of the chat. */
.ticket-detail .chat-layout { display:block; min-height:0; }
.ticket-detail .conversation { border: 0; padding:0; }
.conversation-heading { display:flex; align-items:center; justify-content:space-between; padding:16px 20px 8px; gap:12px; }
.conversation-heading h3 { margin:0; font-size:14px; }
.conversation-heading span { color: var(--muted); font-size:11px; }
.ticket-detail .messages { min-height:240px; max-height:440px; padding:20px; gap:18px; background: light-dark(#f8fafc, #1e2124); margin:8px 16px 0; border: 1px solid light-dark(#edf1f6, #344258); border-radius:12px 12px 0 0; }
.chat-empty { min-height:198px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; text-align:center; color: light-dark(#7b8ca8, #e2e6ec); }
.chat-empty svg { box-sizing:content-box; padding:12px; border-radius:15px; background: light-dark(#edf2fa, #1e2124); color: light-dark(#7895c0, #e1e8f1); }
.chat-empty b { font-size:14px; color: light-dark(#435674, #d6dae0); font-weight:600; }
.chat-empty span { max-width:270px; font-size:12px; line-height:1.6; }
.ticket-detail .chat-composer { margin:0 16px; padding:12px; border: 1px solid light-dark(#dfe7f2, #344258); border-top: 0; border-radius:0 0 12px 12px; background: light-dark(#fff, #1e2124); grid-template-columns:38px minmax(0,1fr) auto; gap:10px; }
.ticket-detail .chat-composer > textarea { grid-column:1/-1; width:100%; min-height:64px; max-height:180px; resize:vertical; padding:10px; border: 1px solid transparent; border-radius:8px; font:inherit; font-size:13px; line-height:1.6; color: var(--ink); outline: none; }
.ticket-detail .chat-composer > textarea:focus { border-color: light-dark(#a9c4f4, #344258); background: light-dark(#fbfdff, #1e2124); }
.ticket-detail .chat-composer > .attachment-button { grid-column:1; grid-row:2; width:38px; height:38px; background: light-dark(#f4f7fb, #1e2124); border-color: light-dark(#e0e8f3, #344258); }
.ticket-detail .chat-composer > label:not(.attachment-button) { grid-column:2; grid-row:2; margin:0; font-size:11px; align-self:center; }
.ticket-detail .chat-composer > .primary { grid-column:3; grid-row:2; min-height:38px; padding:8px 14px; }
.ticket-detail .attachment-preview { grid-column:1/-1; margin-top:0; }
.ticket-detail .conversation > .field-help { padding:8px 20px 14px; margin:0; font-size:10px; color: var(--muted); }
.ticket-detail .message { max-width:min(88%,680px); grid-template-columns:32px minmax(0,1fr); gap:6px 10px; }
.message-avatar { grid-column:1; grid-row:1/3; width:32px; height:32px; display:grid; place-items:center; border-radius:11px; background: light-dark(#dce9fc, #1d2024); color: light-dark(#365f9b, #d3dce9); font-size:11px; font-weight:700; }
.ticket-detail .message-meta { grid-column:2; display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 12px; font-size:11px; line-height:1.5; }
.message-meta b { font-weight:600; color: light-dark(#465c7c, #d6dbe2); }.message-meta time { color: light-dark(#52627a, #e4e7eb); font-size:10px; }
.ticket-detail .bubble { grid-column:2; padding:12px 15px; font-size:13px; line-height:1.65; overflow-wrap:anywhere; background: light-dark(#fff, #1e2124); border: 1px solid light-dark(#e5eaf2, #344258); box-shadow:0 1px 3px #17243c05; }
.ticket-detail .message > .task-detail-list { grid-column:2; }
.ticket-detail .message.mine { grid-template-columns:minmax(0,1fr) 32px; }
.message.mine .message-avatar { grid-column:2; background: light-dark(#dbe7ff, #1d2024); color: light-dark(#245bc1, #b2c6e9); }
.ticket-detail .message.mine .message-meta { grid-column:1; justify-content:flex-end; }
.ticket-detail .message.mine .bubble,.ticket-detail .message.mine > .task-detail-list { grid-column:1; }
.ticket-detail .message.mine .bubble { background: #2864dd; border-color: light-dark(#2864dd, #344258); }
.ticket-detail .message.internal .bubble { background: light-dark(#fff7e1, #1e2123); color: light-dark(#775417, #e1d9cc); border-color: light-dark(#f2dfab, #344258); }
.message-private { color: light-dark(#8e6b20, #e6dece); font-size:10px; }
.ticket-context,.ticket-materials { margin:0 16px; border: 1px solid var(--line); border-radius:10px; background: light-dark(#fff, #1e2124); }
.ticket-context { margin-top:14px; }
.ticket-materials { margin-bottom:16px; }
.ticket-context summary,.ticket-materials summary { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 14px; padding:12px 14px; cursor:pointer; list-style:none; }
.ticket-context summary::-webkit-details-marker,.ticket-materials summary::-webkit-details-marker { display:none; }
.ticket-context summary b,.ticket-materials summary b { font-size:12px; }
.ticket-context summary b:before,.ticket-materials summary b:before { content:'›'; display:inline-block; width:14px; color: light-dark(#71839d, #e0e4e9); }
.ticket-context[open] summary b:before,.ticket-materials[open] summary b:before { content:'⌄'; }
.ticket-context summary span,.ticket-materials summary span { font-size:11px; line-height:1.5; color: var(--muted); overflow-wrap:anywhere; }
.ticket-context .info-list { padding:14px; grid-template-columns:repeat(2,minmax(0,1fr)); border-top: 1px solid var(--line); gap:14px; }
.ticket-context .info-list .ticket-description { grid-column:1/-1; }
.ticket-context .info-list dd { font-size:12px; }
.ticket-materials .ticket-history,.ticket-materials .ticket-support { margin:0 12px 12px; }
@media (max-width:680px) {
  .card > .resource-list { padding:4px 16px 12px; }
  .resource-card > .resource-list { padding:0; }
  .company-work-card > .resource-list { padding:0; }
  .report-filter-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .report-filter-form .button-pair { grid-column:1/-1; }
  .knowledge-search .message-form { grid-template-columns:minmax(0,1fr) auto; }
  .knowledge-search .message-form input { grid-column:1/-1; }
  .report-finance-grid,.report-distribution { padding:16px; }
  .report-finance-metric { padding:12px; }
  .report-finance-metric strong { font-size:19px; }
  .report-sla-row { gap:10px; grid-template-columns:minmax(0,1fr); }
  .report-sla-value { text-align:left; }
  .report-table > p { padding:12px 16px; }
  .card-header { flex-wrap:wrap; }
  .page-assets .resource-row,.page-assets .resource-row.asset-row,[id^="commercial-panel-tariffs"] .resource-row { grid-template-columns:minmax(0,1fr); gap:10px; }
  .activity { grid-template-columns:30px minmax(0,1fr); }
  .activity time { grid-column:2; }
  .ticket-sidebar { display:block; border-top: 1px solid var(--line); }
}

/* Messenger workspace: fixed frame, scrolling history, composer always in view. */
.page-tickets { max-width:1440px; }
.account-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start; }
.notification-count { position:absolute;right:-5px;top:-5px;min-width:18px;height:18px;padding:0 4px;display:grid;place-items:center;border-radius:10px;background: #2563eb;color: #fff;font-size:10px;border: 2px solid light-dark(#fff, #344258); }
.account-grid form { display:grid;gap:16px;margin-top:20px; }
.account-identity { display:flex;gap:14px;align-items:center; }
.account-identity .avatar { width:54px;height:54px;font-size:18px; }
.account-identity p { margin:5px 0 0;color: var(--muted); }
.account-switch { display:flex;gap:10px;align-items:center;font-size:13px; }
.account-security { margin-top:24px;padding-top:20px;border-top: 1px solid var(--line); }
.account-security h3 { font-size:14px;margin:0; }
.account-security p { font-size:12px;color: var(--muted); }
.account-links { margin-top:20px;display:flex;gap:12px;flex-wrap:wrap;align-items:center; }
.account-links h2 { width:100%;margin-bottom:8px; }
@media(max-width:850px) { .account-grid { grid-template-columns:1fr; } }
.page-tickets .queue-layout { height:calc(100dvh - 190px); min-height:490px; }
.page-tickets .queue-list { display:flex; flex-direction:column; height:100%; overflow:hidden; }
.page-tickets .filterbar { flex:none; }
.page-tickets .tickets { flex:1; min-height:0; max-height:none; }
.page-tickets .ticket-detail { display:flex; flex-direction:column; height:100%; min-height:0; overflow:hidden; border-radius:14px; }
.page-tickets .detail-head { flex:none; background: light-dark(#fff, #1e2124); }
.page-tickets .ticket-context { flex:none; margin:0; border: 0; border-bottom: 1px solid var(--line); border-radius:0; max-height:210px; overflow:auto; }
.page-tickets .ticket-context summary { padding:10px 20px; background: light-dark(#fafcff, #1e2124); }
.page-tickets .chat-layout { flex:1; min-height:0; display:flex; align-items:stretch; }
.page-tickets .conversation { flex:1; min-height:0; display:flex; flex-direction:column; }
.page-tickets .conversation-heading { display:none; }
.page-tickets .ticket-detail .messages { flex:1; min-height:0; max-height:none; margin:0; padding:24px; border: 0; border-radius:0; background-color: light-dark(#edf3f6, #1e2124); background-image:radial-gradient(#c8d5de55 .7px,transparent .7px); background-size:16px 16px; overscroll-behavior:contain; }
.page-tickets .messages:before { content:''; flex:1 0 0; }
.page-tickets .message { flex:none; }
.page-tickets .bubble { font-size:14px; }
.page-tickets .message-meta { font-size:12px; }
.page-tickets .message-meta time { font-size:11px; }
.page-tickets .message.mine .bubble { background: light-dark(#e0f2e9, #1d2123); border-color: light-dark(#cee5d8, #344258); color: light-dark(#203c31, #ced4d2); }
.page-tickets .message.mine .message-avatar { background: light-dark(#cee7dc, #1c2023); color: light-dark(#367860, #d3e1dc); }
.page-tickets .message.internal .bubble { background: light-dark(#fff5da, #1e2123); border-color: light-dark(#efdba1, #344258); color: light-dark(#775417, #e1d9cc); }
.page-tickets .chat-composer { flex:none; margin:0; border: 0; border-top: 1px solid light-dark(#dfe7ec, #344258); border-radius:0; padding:12px 16px; background: light-dark(#f8fafc, #1e2124); grid-template-columns:38px minmax(0,1fr) auto; gap:8px 12px; }
.page-tickets .ticket-detail .chat-composer > textarea { grid-column:2; grid-row:1; min-height:44px; max-height:120px; height:44px; background: light-dark(#fff, #1e2124); border: 1px solid light-dark(#dce5ee, #344258); border-radius:20px; resize:none; padding:10px 16px; font-size:14px; }
.page-tickets .ticket-detail .chat-composer > .attachment-button { grid-column:1; grid-row:1; align-self:center; border: 0; background: transparent; }
.page-tickets .ticket-detail .chat-composer > .primary { grid-column:3; grid-row:1; border-radius:22px; padding:11px 18px; min-height:44px; align-self:center; }
.page-tickets .ticket-detail .chat-composer > label:not(.attachment-button) { grid-column:2; grid-row:2; font-size:11px; }
.page-tickets .conversation > .field-help { display:none; }
.page-tickets .ticket-materials { flex:none; margin:0; border: 0; border-top: 1px solid var(--line); border-radius:0; max-height:240px; overflow:auto; }
.page-tickets .ticket-materials summary { padding:10px 20px; }
.page-tickets .chat-empty { flex:1; min-height:120px; }
@media (max-width:1000px) {
  .page-tickets .queue-layout { height:auto; min-height:0; }
  .page-tickets .queue-list { height:280px; }
  .page-tickets .ticket-detail { height:660px; }
}
@media (max-width:680px) {
  .page-tickets .ticket-detail { height:calc(100dvh - 90px); min-height:510px; }
  .page-tickets .detail-head h2 { font-size:18px; }
  .page-tickets .ticket-detail .messages { padding:16px 12px; }
  .page-tickets .chat-composer { padding:10px; gap:6px; grid-template-columns:32px minmax(0,1fr) auto; }
  .page-tickets .ticket-detail .chat-composer > .primary { padding:11px 12px; font-size:12px; }
  .page-tickets .ticket-context summary span { display:none; }
}
.subscription-meter { padding: 16px; margin: 12px 0; border: 1px solid light-dark(#dbe6f4, #344258); border-radius: 14px; background: light-dark(#f6f9ff, #1e2124); }
.subscription-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.subscription-values { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.subscription-values span { display: grid; gap: 4px; color: light-dark(#657895, #dde1e8); font-size: 12px; }
.subscription-values b { font-size: 17px; color: light-dark(#162c4f, #ccd1d8); font-variant-numeric: tabular-nums; }
.subscription-meter progress { display: block; width: 100%; height: 9px; margin: 14px 0; accent-color: #2464eb; }
.subscription-meter small { display: block; line-height: 1.5; color: light-dark(#657895, #dde1e8); }
.message-receipt{grid-column:2;font-size:11px;color: light-dark(#52627a, #e0e4e9);text-align:right;margin-top:3px}
.message-receipt.is-read{color: light-dark(#2563eb, #b3c8f8)}
.ticket-detail .message.mine .message-receipt{grid-column:1}
.connection-retry-layout{min-height:100vh;display:grid;place-items:center;padding:24px}
.connection-retry-card{width:min(560px,100%);padding:32px;border-radius:20px}
.connection-retry-card .brand{margin-bottom:28px;color: light-dark(#111c36, #cbcdd3)}
.connection-retry-card h1{font-size:24px;line-height:1.3;margin-bottom:14px}
.connection-retry-card p{font-size:14px;line-height:1.65;color: light-dark(#6b7c99, #dee2e9);margin-bottom:18px}
.connection-retry-card button{margin-top:8px}
@media(max-width:600px){.connection-retry-card{padding:24px}.connection-retry-card h1{font-size:21px}}
.audit-events .activity > div > b { display: block; }
.audit-events .activity > div > small { display: block; margin-top: 3px; }
.system-status-content { padding: 18px 20px; }
.system-status-summary { margin-top: 0; color: light-dark(#173c7c, #ccd4e2); font-weight: 600; }
.system-status-summary[data-status="warning"] { color: light-dark(#b45309, #e5c3a9); }
.system-checks-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.system-checks-grid section { min-width: 0; padding: 14px; border: 1px solid light-dark(#e4ebf4, #344258); border-radius: 12px; background: light-dark(#f8fbff, #1e2124); }
.system-checks-grid h3 { margin: 0 0 10px; font-size: 14px; }
.system-checks-grid p { margin: 7px 0; font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 680px) { .system-checks-grid { grid-template-columns: 1fr; } }
.audit-events .audit-identity-note { margin-top: 5px; color: light-dark(#64748b, #dde0e5); font-size: 10px; }
#assignment-settings-form { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
#assignment-settings-form > label:first-child, #assignment-settings-form > button { grid-column: 1 / -1; }
#assignment-settings-form > button { justify-self: end; }
.assignment-category-field { grid-column: 1 / -1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.assignment-category-field textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 110px; border: 1px solid var(--line); border-radius: 10px; padding: 12px; font: inherit; font-size: 12px; line-height: 1.6; color: var(--ink,light-dark(#152541, #cccfd5)); background: light-dark(#fff, #1e2124); }
.assignment-category-field textarea:focus { outline: 2px solid light-dark(#c8dcff, #344258); outline-offset: 1px; }
.assignment-category-field small { font-size: 11px; line-height: 1.5; color: light-dark(#64748b, #dde0e5); }
@media (max-width: 680px) { #assignment-settings-form { grid-template-columns: minmax(0,1fr); } }
#sla-settings-form { grid-template-columns: minmax(0,1fr); }
#sla-settings-form > label:first-child { display: flex; flex-direction: column; gap: 7px; }
#sla-settings-form select { border: 1px solid var(--line); border-radius: 10px; padding: 10px; font: inherit; background: light-dark(#fff, #1e2124); }
#sla-settings-form > button { justify-self: end; }
.category-sla-toggle { display: flex; align-items: center; gap: 8px; }
.sla-waiting-fields { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 10px; }
.sla-waiting-fields legend { padding: 0 5px; font-size: 13px; }
.sla-waiting-fields small { color: light-dark(#64748b, #dde0e5); font-size: 11px; line-height: 1.5; }
.sla-waiting-fields input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; }
.ticket-assignment-panel { margin-bottom: 16px; padding: 16px; min-width: 0; }
.ticket-assignment-panel summary { cursor: pointer; font-weight: 700; }
.ticket-assignment-panel p { margin: 10px 0; color: var(--muted,light-dark(#64748b, #dde0e5)); font-size: 12px; line-height: 1.5; }
.ticket-assignment-targets { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 8px; max-height: 190px; overflow: auto; padding: 3px; }
.ticket-assignment-target { min-width: 0; display: flex; flex-direction: column; gap: 5px; text-align: left; padding: 12px; border: 1px dashed var(--line); border-radius: 10px; background: light-dark(#fff, #1e2124); color: var(--ink,light-dark(#152541, #cccfd5)); overflow-wrap: anywhere; }
.ticket-assignment-target span { color: light-dark(#64748b, #dde0e5); font-size: 11px; }
.ticket-assignment-target.is-drag-over { border: 2px solid light-dark(#2563eb, #344258); background: light-dark(#eff6ff, #1e2124); }
.ticket-assignment-target:focus-visible { outline: 2px solid light-dark(#2563eb, #344258); outline-offset: 1px; }
.ticket[data-ticket-drag] { cursor: grab; }
.ticket.is-dragging { opacity: .65; outline: 2px solid light-dark(#2563eb, #344258); user-select: none; }
@media (max-width: 480px) { .ticket-assignment-targets { grid-template-columns: 1fr; max-height: 210px; } }
#accounting-preview-result:not(:empty) { padding: 14px; background: var(--blue-soft); border: 1px solid var(--line); border-radius: 12px; font-size: 14px; line-height: 1.6; font-variant-numeric: tabular-nums; }
#accounting-settings-result:empty, #accounting-preview-result:empty { display: none; }
#accounting-settings-form, #accounting-preview-form { min-width: 0; }
.modal.accounting-reconciliation { width: min(1100px, calc(100vw - 32px)); max-width: 1100px; }
.accounting-reconciliation .table-wrap { overflow: auto; max-height: 45vh; border: 1px solid var(--line); border-radius: 12px; }
.accounting-reconciliation table { width: 100%; min-width: 960px; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 13px; }
.accounting-reconciliation th, .accounting-reconciliation td { padding: 13px 14px; border-bottom: 1px solid var(--line); }
.accounting-reconciliation thead { background: var(--page); color: var(--muted); }
.accounting-reconciliation th { font-size: 11px; line-height: 1.5; text-align: right; }
.accounting-reconciliation th:first-child, .accounting-reconciliation td:first-child { text-align: left; min-width: 170px; }
.accounting-reconciliation tfoot td, .accounting-reconciliation tfoot th { border-bottom: 0; }
.accounting-reconciliation td:not(:first-child), .accounting-reconciliation tfoot td { text-align: right; white-space: nowrap; }
.accounting-reconciliation tfoot { font-weight: 700; background: var(--blue-soft); }
.reconciliation-client-link { padding: 0; border: 0; background: none; color: var(--blue); font: inherit; text-align: left; font-weight: 600; }
.reconciliation-client-link:hover, .reconciliation-client-link:focus-visible { text-decoration: underline; }
.accounting-reconciliation .reconciliation-boundary { background: var(--page); font-weight: 600; }
.accounting-reconciliation .reconciliation-boundary td:last-of-type { min-width: 0; }
.reconciliation-detail table { table-layout: fixed; }
.reconciliation-detail th:first-child { width: 120px; min-width: 0; }
.reconciliation-detail thead th:nth-child(2) { width: 240px; text-align: left; }
.reconciliation-detail tbody tr:not(.reconciliation-boundary) td:nth-child(2) { text-align: left; white-space: normal; overflow-wrap: anywhere; }
.reconciliation-detail td:first-child { min-width: 0; white-space: nowrap; }
.invoice-balances { margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.invoice-balances summary { cursor: pointer; color: var(--ink); font-weight: 600; line-height: 1.6; }
.invoice-balances table { table-layout: auto; }
.invoice-balances th:first-child, .invoice-balances td:first-child { width: 220px; white-space: normal; overflow-wrap: anywhere; }
.invoice-balances thead th:nth-child(2), .invoice-balances tbody td:nth-child(2) { width: auto; text-align: left; white-space: nowrap; }
.invoice-balances small { color: var(--muted); font-weight: 400; }
.accounting-data-check table { min-width: 760px; table-layout: fixed; }
.accounting-data-check th, .accounting-data-check td:not(:first-child) { text-align: left; white-space: normal; overflow-wrap: anywhere; }
.accounting-data-check th:first-child { width: 180px; }
.accounting-data-check th:nth-child(3) { width: 150px; }
.payment-ledger th:first-child { min-width: 130px; }
.payment-ledger th:nth-child(2), .payment-ledger td:nth-child(2), .payment-ledger td:nth-child(3) { text-align: left; white-space: normal; overflow-wrap: anywhere; }
.payment-ledger small { color: var(--muted); }
.payment-ledger .form-grid { gap: 10px 14px; }
.payment-ledger .field { margin-bottom: 0; }
.payment-ledger th:nth-child(3) { text-align: left; }
.expense-ledger th:nth-child(4), .expense-ledger td:nth-child(4) { text-align: left; white-space: normal; overflow-wrap: anywhere; }
.invoice-filter-toolbar { padding:16px 0; border-bottom: 1px solid var(--line); }
.invoice-list { max-height:min(60dvh,620px); overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.invoice-row > div > small { display:block; }
.invoice-row > div > small + small { margin-top:3px; }
.invoice-filter-form { display:grid; grid-template-columns:minmax(0,1fr) 180px auto; align-items:end; gap:10px; }
.invoice-filter-form .field { margin:0; min-width:0; }
.invoice-filter-form input,.invoice-filter-form select { width:100%; }
.invoice-filter-toolbar > .field-help { display:block; margin-top:10px; }
.invoice-pagination { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 0; border-top: 1px solid var(--line); color: var(--muted); font-size:12px; }
@media(max-width:680px) { .invoice-filter-form { grid-template-columns:1fr; }.invoice-filter-toolbar,.invoice-pagination { padding:14px 0; }.invoice-filter-form .button-pair { justify-content:flex-end; } }

.event-signal-settings .account-switch { min-height:44px; margin:0; cursor:pointer; }
.event-signal-settings input { flex:0 0 auto; }

.ticket-focus { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0; }
.ticket-focus > div { min-width:0; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--page); }
.ticket-focus dt { margin:0 0 5px; color:var(--muted); font-size:12px; }
.ticket-focus dd { margin:0; font-size:13px; font-weight:600; overflow-wrap:anywhere; }
@media(max-width:700px) { .ticket-focus { grid-template-columns:1fr; gap:8px; } }

.workspace-favorites { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:16px auto; max-width:1440px; }
.workspace-favorites > span { color:var(--muted); font-size:12px; margin-right:4px; }
.workspace-favorites button[aria-current="page"] { border-color:var(--blue); background:var(--blue-soft); }
.workspace-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.workspace-choices .account-switch { min-height:44px; margin:0; }
.workspace-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
@media(max-width:700px) { .workspace-choices { grid-template-columns:1fr; } .workspace-favorites button { min-height:44px; } }

.ticket-next-step { margin:16px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--blue-soft); }
.ticket-next-step h3 { margin:0; font-size:13px; }
.ticket-next-step p { margin:6px 0 0; font-size:13px; line-height:1.5; }
.ticket-next-step button { margin-top:10px; min-height:44px; }

.knowledge-card p { white-space:pre-wrap; overflow-wrap:anywhere; }
.vault-recipient { display:block; padding:7px 0; font-size:13px; }
.vault-recipient input { width:auto; margin-right:7px; }
.vault-row { padding:14px 0; border-bottom:1px solid var(--line); }
[data-knowledge-dialog] { overflow-wrap:anywhere; }

.knowledge-tools { margin:0 0 16px; }

/* Keep account/security/logout reachable when desktop height is limited. */
@media (min-width:1001px) {
  .sidebar { overflow-y:auto; overscroll-behavior:contain; }
  .sidebar > * { flex-shrink:0; }
}

/* Workspace visual system: shared surfaces, readable hierarchy and quiet chrome. */
:root {
  --surface-alt: light-dark(#f8faff, #182231);
  --surface-hover: light-dark(#f0f4fc, #24344b);
  --panel-shadow: 0 2px 8px rgb(15 23 42 / 3%);
}
:root[data-theme] {
  --ink: light-dark(#202c40, #e7edf7);
  --muted: light-dark(#5a6981, #acbdd3);
  --panel: light-dark(#ffffff, #1b2636);
  --page: light-dark(#f4f6fa, #111a28);
  --line: light-dark(#e1e7f0, #35465c);
  --blue: light-dark(#3159d5, #8baeff);
  --blue-soft: light-dark(#eaf0ff, #283c5d);
  --radius: 14px;
}
body { min-width:0; -webkit-font-smoothing:antialiased; }
.sidebar { background:var(--panel); color:var(--ink); border-right:1px solid var(--line); padding-top:26px; overflow-y:auto; }
.sidebar > * { flex-shrink:0; }
.sidebar .brand { font-size:13px; letter-spacing:-.02em; }
.sidebar .brand-mark { box-shadow:none; background:#3159d5; border-radius:9px; }
.workspace-icon { display:block; flex-shrink:0; }
.nav button > b,.mobile-navigation nav button > span { display:grid; place-items:center; width:20px; height:20px; flex:0 0 20px; }
.workspace { color:var(--muted); font-size:10px; letter-spacing:.08em; margin-top:30px; }
.nav { gap:5px; }
.nav button { min-height:43px; font-size:13px; font-weight:550; color:var(--muted); border-radius:9px; }
.nav button:hover { color:var(--ink); background:var(--surface-hover); }
.nav button.active { color:var(--blue); background:var(--blue-soft); box-shadow:inset 3px 0 var(--blue); font-weight:700; }
.nav .nav-count { color:var(--blue); background:var(--blue-soft); font-style:normal; }
.sidebar-bottom { border-color:var(--line); }
.sidebar .build-info { color:var(--muted); }
.user-chip { color:var(--ink); line-height:1.5; }
.user-chip small,.logout { color:var(--muted); }
.avatar { background:var(--blue-soft); color:var(--blue); font-weight:700; }
.topbar { height:76px; margin:0 -28px; padding:0 28px; background:var(--panel); }
.breadcrumb { font-size:12px; }
.notification-button { width:38px; height:38px; color:var(--muted); background:var(--panel); }
.page-title { margin:30px 0 24px; align-items:center; }
.page-title h1 { font-size:30px; font-weight:700; letter-spacing:-.04em; line-height:1.2; }
.page-title p { margin-top:8px; font-size:13px; line-height:1.6; }
.card,.stat-card { box-shadow:var(--panel-shadow); }
.stat-card { padding:22px; }
.stat-card .stat-heading { font-size:13px; font-weight:550; gap:8px; }
.stat-card strong { margin:14px 0 6px; font-size:32px; font-weight:650; font-variant-numeric:tabular-nums; }
.stat-card small { color:var(--muted); font-size:12px; line-height:1.5; }
.stat-card .stat-icon { background:var(--blue-soft); color:var(--blue); font-style:normal; }
.stats.client-home-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
.client-home-grid { align-items:start; }
.card-header { padding:20px 22px; gap:12px; }
.card-header h2 { font-size:15px; font-weight:650; line-height:1.4; }
.card-header span { color:var(--muted); line-height:1.5; }
.primary,.secondary,.danger { min-height:40px; font-size:13px; font-weight:650; box-shadow:none; }
.primary { background:#3159d5; color:white; }
.primary:hover { background:#2548b6; transform:none; }
.secondary { color:var(--ink); background:var(--surface-alt); border:1px solid var(--line); }
.secondary:hover { background:var(--surface-hover); }
.text-button { color:var(--blue); font-weight:600; }
.field label { color:var(--ink); font-weight:600; line-height:1.5; }
.field input,.field select,.field textarea,.filterbar input,.filterbar select,.message-form input {
  color:var(--ink); background:var(--panel); border-color:var(--line); font-size:13px;
}
.field input:focus,.field select:focus,.field textarea:focus,.filterbar input:focus,.filterbar select:focus {
  border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft);
}
.appearance-settings { background:var(--surface-alt); padding:20px; }
.current-work-panel:not(:empty) { border-color:var(--line); border-left:3px solid var(--blue); background:var(--panel); padding:14px 18px; }
.queue-views { gap:8px; }
.queue-views button { border-radius:9px; }
.filterbar { background:var(--surface-alt); padding:14px; }
.ticket { background:var(--panel); border-bottom-color:var(--line); padding:18px; }
.ticket:hover { background:var(--surface-hover); }
.ticket.selected { background:var(--blue-soft); }
.ticket h3 { font-size:14px; font-weight:650; line-height:1.45; }
.ticket-number,.ticket-meta,.detail-number,.detail-sub,.message-meta { color:var(--muted); }
.ticket-meta { font-size:11px; line-height:1.6; }
.tag { font-size:11px; font-weight:650; padding:5px 9px; }
.tag.new { color:light-dark(#244c9f,#acc5ff); background:light-dark(#eaf0ff,#253c62); }
.tag.progress { color:light-dark(#106451,#82e1bc); background:light-dark(#e4f5ee,#173f36); }
.tag.wait { color:light-dark(#825008,#f7d58a); background:light-dark(#fff3d6,#49371e); }
.tag.closed { color:light-dark(#52627b,#bac8da); background:light-dark(#edf1f6,#2b384a); }
.status-bars .progress b { background:var(--blue); }
.status-bars .progress.orange b { background:light-dark(#c98a1d,#e7b85f); }
.status-bars .progress.red b { background:var(--red); }
.socket-state { background:var(--muted); box-shadow:0 0 0 3px var(--surface-alt); }
.socket-state.live { background:var(--green); box-shadow:0 0 0 3px light-dark(#e5f5ee,#1c3e35); }
.detail-head { padding:22px; }
.detail-head h2 { font-size:23px; line-height:1.35; }
.ticket-sidebar,.message-form { background:var(--surface-alt); }
.info-list dt { color:var(--muted); font-size:11px; }
.info-list dd { color:var(--ink); font-size:12px; }
.bubble { background:var(--surface-alt); font-size:13px; line-height:1.65; border:1px solid var(--line); }
.message.mine .bubble { background:#3159d5; color:white; border-color:transparent; }
.message.internal .bubble { border-left:3px solid light-dark(#b07713,#e8b85d); }
th { background:var(--surface-alt); color:var(--muted); font-size:11px; font-weight:650; }
td { font-size:13px; line-height:1.55; }
tbody tr:hover { background:var(--surface-alt); }
.modal { background:var(--panel); border:1px solid var(--line); padding:26px; border-radius:16px; }
.modal h2 { font-size:23px; line-height:1.3; letter-spacing:-.025em; }
.modal > p { font-size:13px; line-height:1.6; }
.empty { color:var(--muted); line-height:1.7; }
.client-card { padding:22px; }
.client-title h2 { font-size:18px; font-weight:650; }
.client-card > p,.client-title p { font-size:12px; line-height:1.6; }
.client-list { gap:12px; margin:20px 0; }
.client-list > div { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start; gap:12px; color:var(--muted); font-size:13px; line-height:1.6; }
.client-list > div > b { min-width:0; color:var(--ink); font-weight:550; overflow-wrap:anywhere; }
.resource-row { padding:18px 0; }
.resource-row b { color:var(--ink); font-size:14px; font-weight:600; line-height:1.5; }
.resource-row span,.resource-row small { color:var(--muted); font-size:12px; line-height:1.6; }
.resource-row .tag { font-size:11px; }
.resource-card > p { font-size:13px; line-height:1.65; }
.knowledge-card { padding:22px; }
.knowledge-card h2 { font-size:17px; line-height:1.4; font-weight:650; margin:10px 0; }
.knowledge-card p { color:var(--ink); font-size:13px; line-height:1.7; }
.knowledge-card small { color:var(--muted); font-size:11px; line-height:1.5; }
.account-grid { grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr); }
.account-grid > .card { min-width:0; }
.account-grid .field { margin:0; }
.account-grid form { gap:18px; }
.account-grid .appearance-settings { margin:0; }
.account-grid .field-help { font-size:12px; line-height:1.65; }
.account-switch { min-height:44px; margin:0; font-size:13px; line-height:1.5; }
.account-switch input { flex-shrink:0; accent-color:var(--blue); }
.account-identity h2 { font-size:19px; line-height:1.4; }
.account-identity p { font-size:13px; line-height:1.6; }
.account-security h3 { font-size:15px; }
.workspace-choices { gap:4px 16px; }
@media (max-width:1000px) {
  .sidebar { padding:20px 10px; }
  .nav button { padding:12px; }
  .topbar { margin:0 -20px; padding:0 20px; }
  .sidebar-bottom { padding:12px 0 0; }
  .sidebar-bottom .user-chip { justify-content:center; }
  .sidebar-bottom > .text-button { display:block; max-width:100%; width:100%; min-height:40px; margin:6px 0 0; padding:7px 1px; white-space:normal; overflow-wrap:anywhere; font-size:10px; }
  .dashboard-grid { grid-template-columns:1fr; }
  .account-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:680px) {
  .sidebar { padding:8px; border-right:0; border-top:1px solid var(--line); }
  .nav button { min-height:44px; font-size:18px; padding:8px 10px; }
  .topbar { height:66px; margin:0 -14px; padding:0 14px; gap:10px; }
  .page-title { margin:22px 0 18px; }
  .page-title h1 { font-size:25px; }
  .stat-card { padding:16px; }
  .stat-card strong { font-size:28px; }
  .card-header { padding:16px; flex-wrap:wrap; }
  .client-card,.knowledge-card { padding:18px; }
  .modal { padding:20px; }
  .detail-head { padding:18px; }
}
@media (max-width:700px) {
  .stats.client-home-stats { grid-template-columns:minmax(0,1fr); }
}

/* Readable workspace: the conversation, rather than nested service panels, is central. */
body { font-size:15px; line-height:1.5; background:radial-gradient(ellipse at 10% 0%,light-dark(#dfecff,#192f46),transparent 55%),var(--page); }
.page { max-width:none; margin-left:0; margin-right:0; }
.nav button { font-size:14px; }
.primary,.secondary,.danger { font-size:14px; }
.text-button { font-size:13px; }
.field label { font-size:13px; }
.field input,.field select,.field textarea,.filterbar input,.filterbar select { font-size:15px; }
.card-header h2 { font-size:16px; }
.card-header span,.stat-card small { font-size:13px; }
.client-list > div,.resource-row span,.resource-row small { font-size:14px; }
.resource-row b { font-size:15px; }
td { font-size:14px; }
th,.report-table th { font-size:12px; }
.tag { font-size:12px; line-height:1.4; }
.page-account { max-width:1120px; margin-left:0; margin-right:auto; }
.account-tab-layout { grid-template-columns:minmax(0,1fr); max-width:960px; }
.page-account .account-links { max-width:960px; margin-top:0; }
.page-account .workspace-tabs { margin:0 0 20px; }
.page-account .workspace-tabs button { min-height:44px; font-size:14px; }
.account-grid .field-help,.account-security p { font-size:13px; }
.account-switch { font-size:14px; }
.account-identity h2 { font-size:22px; }
.ticket-assignment-panel { position:relative; }
summary:focus-visible { outline:3px solid var(--blue); outline-offset:3px; border-radius:6px; }
.queue-filters { grid-column:1/-1; min-width:0; }
.queue-filters > summary { cursor:pointer; padding:8px 2px; font-size:13px; color:var(--muted); }
.queue-filters[open] > summary { color:var(--blue); }
.queue-filter-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding-top:4px; }
.queue-filter-fields #ticket-status-filter,.queue-filter-fields > button { grid-column:1/-1; }
.ticket-assignment-panel summary { display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:14px; list-style:none; }
.ticket-assignment-panel summary::-webkit-details-marker { display:none; }
.ticket-assignment-panel summary::before { content:'›'; font-size:21px; line-height:1; }
.ticket-assignment-panel[open] summary::before { content:'⌄'; }
.assignment-counter { margin-left:auto; padding:2px 8px; border-radius:7px; background:var(--blue-soft); color:var(--blue); font-size:12px; }
.ticket-assignment-panel p { font-size:13px; }
.ticket-assignment-target { background:var(--panel); }
.ticket-assignment-target b { font-size:14px; font-weight:600; }
.ticket-assignment-target span { font-size:12px; color:var(--muted); }
.page-tickets .queue-layout { grid-template-columns:minmax(310px,360px) minmax(0,1fr); min-height:800px; height:calc(100dvh - 170px); }
.page-tickets .ticket { padding:16px 18px; }
.page-tickets .ticket h3 { font-size:15px; line-height:1.5; }
.page-tickets .ticket-number { font-size:12px; font-weight:600; letter-spacing:0; }
.page-tickets .ticket-meta { font-size:12px; line-height:1.6; }
.page-tickets .detail-head { padding:16px 20px; background:var(--panel); }
.page-tickets .ticket-detail .detail-head { padding:14px 20px; gap:6px 18px; }
.page-tickets .ticket-heading { grid-column:1; grid-row:1; display:flex; align-items:baseline; gap:12px; min-width:0; }
.page-tickets .ticket-heading .detail-number { flex:none; }
.page-tickets .ticket-heading h2 { min-width:0; }
.page-tickets .detail-sub { grid-row:2; }
.page-tickets .detail-actions { grid-row:1/3; }
.page-tickets .detail-head h2 { font-size:22px; line-height:1.35; }
.page-tickets .detail-number { font-size:12px; font-weight:600; letter-spacing:.015em; }
.page-tickets .detail-sub { font-size:12px; }
.page-tickets .ticket-focus { flex:none; margin:0; padding:10px 20px; gap:16px; border-bottom:1px solid var(--line); background:var(--surface-alt); }
.page-tickets .ticket-focus > div { padding:0; border:0; border-radius:0; background:transparent; }
.page-tickets .ticket-focus dt { font-size:12px; margin-bottom:2px; }
.page-tickets .ticket-focus dd { font-size:14px; line-height:1.45; font-weight:550; }
.page-tickets .ticket-next-step { flex:none; margin:0; padding:9px 20px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:var(--blue-soft); }
.page-tickets .ticket-next-step h3 { display:inline; font-size:13px; }
.page-tickets .ticket-next-step h3::after { content:': '; }
.page-tickets .ticket-next-step p { display:inline; margin:0; font-size:13px; line-height:1.5; }
.page-tickets .ticket-next-step button { min-height:32px; margin:6px 0 0; font-size:13px; }
.page-tickets .ticket-context summary,.page-tickets .ticket-materials summary { padding:8px 20px; background:var(--panel); }
.page-tickets .ticket-context summary b,.page-tickets .ticket-materials summary b { font-size:13px; font-weight:600; }
.page-tickets .ticket-context summary span { display:none; }
.page-tickets .ticket-context .info-list dd { font-size:14px; }
.page-tickets .ticket-detail .messages { padding:20px 24px; background-color:light-dark(#eaf2fb,#152b40); background-image:radial-gradient(light-dark(#a8c2df55,#7e9ebc22) .8px,transparent .8px); background-size:20px 20px; }
.page-tickets .ticket-detail .message { max-width:min(90%,740px); gap:5px 10px; }
.page-tickets .ticket-detail .bubble { padding:12px 16px; font-size:15px; line-height:1.65; color:var(--ink); background:light-dark(#fff,#243a50); border-color:light-dark(#d7e3ef,#38556e); box-shadow:0 1px 2px rgb(0 0 0 / 4%); }
.page-tickets .ticket-detail .message.mine .bubble { background:light-dark(#dceeff,#24598c); color:light-dark(#17354f,#f0f7ff); border-color:light-dark(#bad7f3,#3976ac); }
.page-tickets .ticket-detail .message.internal .bubble { background:light-dark(#fff2cf,#47391f); color:light-dark(#6c4815,#ffe4ac); border-color:light-dark(#edd598,#796138); }
.page-tickets .message-meta,.page-tickets .message-meta time,.page-tickets .message-private,.page-tickets .message-receipt { font-size:12px; }
.page-tickets .message-meta b { color:var(--ink); }
.page-tickets .message-meta time { color:var(--muted); }
.page-tickets .message-avatar { background:var(--blue-soft); color:var(--blue); }
.page-tickets .chat-composer { padding:10px 16px; gap:6px 10px; background:var(--panel); }
.page-tickets .ticket-detail .chat-composer > textarea { min-height:46px; height:46px; font-size:15px; background:var(--surface-alt); color:var(--ink); border-color:var(--line); border-radius:12px; }
.page-tickets .ticket-detail .chat-composer > label:not(.attachment-button) { font-size:12px; }
.page-tickets .chat-composer-meta { grid-column:1/-1; display:flex; align-items:center; flex-wrap:wrap; gap:4px 16px; }
.page-tickets .chat-composer-meta > label { flex:none; min-height:24px; margin:0; font-size:12px; cursor:pointer; }
.page-tickets .chat-composer-meta > .chat-audience { flex:1; min-width:180px; margin:0; padding:0; }
.page-tickets .chat-composer .chat-audience { padding:4px 0; background:transparent; font-size:12px; line-height:1.5; }
.page-tickets .chat-composer[data-audience="internal"] .chat-audience { color:light-dark(#825008,#f7d58a); font-weight:600; }
@media (min-width:1001px) { .shell { grid-template-columns:224px minmax(0,1fr); } }
@media (min-width:1200px) and (min-height:820px) {
  .content:has(.page-tickets) { --ticket-heading-row:2; --ticket-tools-row:3; --ticket-assignment-row:4; --ticket-body-row:5; height:100dvh; padding:0 20px 14px; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:64px auto auto auto minmax(0,1fr); gap:10px 12px; overflow:hidden; }
  .content:has(.page-tickets):has(> .workspace-favorites) { --ticket-heading-row:3; --ticket-tools-row:4; --ticket-assignment-row:5; --ticket-body-row:6; grid-template-rows:64px auto auto auto auto minmax(0,1fr); }
  .content:has(.page-tickets) > .topbar { grid-column:1/-1; grid-row:1; height:64px; margin:0 -20px; padding:0 20px; }
  .content:has(.page-tickets) > .current-work-panel:empty { display:none; }
  .content:has(.page-tickets) > .current-work-panel:not(:empty) { grid-column:2; grid-row:var(--ticket-heading-row); justify-self:end; max-width:480px; margin:0; padding:7px 12px; font-size:12px; }
  .content:has(.page-tickets) > .workspace-favorites { grid-column:1/-1; grid-row:2; margin:0; }
  .page.page-tickets { display:contents; }
  .page-tickets > .page-title { grid-column:1; grid-row:var(--ticket-heading-row); margin:0; min-height:40px; }
  .page-tickets > .page-title > div:first-child { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 16px; }
  .page-tickets > .page-title h1 { font-size:26px; }
  .page-tickets > .page-title p { margin:0; font-size:13px; }
  .page-tickets > .queue-views { grid-column:1/-1; grid-row:var(--ticket-tools-row); margin:0; align-items:center; }
  .page-tickets > .ticket-assignment-panel { grid-column:1/-1; grid-row:var(--ticket-assignment-row); margin:0; padding:10px 14px; min-width:0; align-self:start; }
  .ticket-assignment-panel[open] > .ticket-assignment-body { display:grid; grid-template-columns:minmax(180px,260px) minmax(0,1fr); gap:16px; min-width:0; padding-top:12px; }
  .ticket-assignment-body > p { margin:0; }
  .ticket-assignment-body > .ticket-assignment-targets { display:flex; min-width:0; max-height:none; overflow-x:auto; overflow-y:hidden; align-items:stretch; }
  .ticket-assignment-body .ticket-assignment-target { flex:0 0 180px; min-width:0; white-space:normal; }
  .ticket-assignment-body .ticket-assignment-target b,.ticket-assignment-body .ticket-assignment-target span { overflow-wrap:anywhere; }
  .page-tickets > .queue-layout { grid-column:1/-1; grid-row:var(--ticket-body-row); min-height:0; height:100%; }
  .page-tickets:not(:has(.ticket-assignment-panel)) > .queue-views { grid-column:1/-1; }
}
@media (max-width:1199px) {
  .page-tickets .queue-layout { grid-template-columns:minmax(280px,330px) minmax(0,1fr); }
}
@media (max-width:1000px) {
  .page-tickets .queue-layout { grid-template-columns:minmax(0,1fr); height:auto; min-height:0; }
  .page-tickets .queue-list { height:340px; }
  .page-tickets .ticket-detail { height:820px; }
}
@media (max-width:700px) {
  .page-account .workspace-tabs { width:100%; }
  .page-account .workspace-tabs button { flex:1 1 100%; }
  .field input,.field select,.field textarea { font-size:16px; }
  .page-tickets .ticket-detail { height:auto; min-height:0; overflow:visible; }
  .page-tickets .ticket-focus { gap:8px; }
  .page-tickets .chat-layout,.page-tickets .conversation { min-height:430px; }
  .page-tickets .ticket-detail .messages { min-height:260px; max-height:60dvh; padding:18px 12px; }
  .page-tickets .detail-head { padding:16px; }
  .page-tickets .ticket-heading { flex-wrap:wrap; gap:4px; }
  .page-tickets .ticket-heading .detail-number { width:100%; }
  .page-tickets .detail-actions { grid-row:auto; }
  .page-tickets .ticket-detail .chat-composer > textarea { font-size:16px; }
  .page-tickets .ticket-detail .chat-composer { padding:10px; }
}

.current-work-panel:not(:empty) { max-width:none; margin-left:0; margin-right:0; }
.content:has(.page-account) > .current-work-panel:not(:empty) { max-width:1120px; }
.page-tickets .messages:focus-visible { outline:3px solid var(--blue); outline-offset:-3px; }
@media (min-width:1200px) and (min-height:820px) { .content:has(.page-tickets) > .current-work-panel:not(:empty) { max-width:480px; } }

/* Unified application frame: one spacing rhythm and one hierarchy across modules. */
:root[data-theme] {
  --radius:10px;
  --page:light-dark(#edf3f9,#101b29);
  --surface-alt:light-dark(#f6f9fc,#192a3b);
  --line:light-dark(#dce5ef,#34485b);
  --blue:light-dark(#176bc1,#8fc6ff);
  --blue-soft:light-dark(#e4f1ff,#203e5c);
  --panel-shadow:0 1px 3px rgb(20 52 87 / 4%);
}
body { background:var(--page); }
.sidebar { background:light-dark(#f4f8fc,#172738); padding:22px 12px 16px; }
.sidebar .brand { padding:0 10px; gap:10px; font-weight:650; }
.sidebar .brand-mark { background:#1674ce; border-radius:8px; }
.workspace { margin:26px 12px 12px; font-size:10px; letter-spacing:.07em; }
.nav { gap:3px; }
.nav button { min-height:42px; padding:10px 12px; border-radius:7px; font-weight:500; }
.nav button.active { background:light-dark(#deedfc,#274867); color:light-dark(#125da5,#d7edff); box-shadow:none; font-weight:650; }
.nav button.active > b { color:light-dark(#126ac1,#a7d4ff); }
.sidebar-bottom { padding:14px 10px 0; }
.topbar { height:64px; background:linear-gradient(105deg,#175fa6,#2373b7); border:0; color:#fff; }
.breadcrumb,.breadcrumb b { color:#fff; font-weight:500; }
.topbar .global-search-button { border-color:#ffffff44; background:#ffffff12; color:#fff; min-height:36px; border-radius:6px; }
.topbar .notification-button { background:#ffffff12; border-color:#ffffff44; color:#fff; border-radius:6px; }
.topbar .socket-state { box-shadow:0 0 0 3px #ffffff20; }
.content { padding:0 24px 28px; }
.topbar { margin:0 -24px; padding:0 24px; }
.page-title { margin:22px 0 18px; gap:12px 20px; }
.page-title h1 { font-size:26px; font-weight:650; letter-spacing:-.025em; }
.page-title p { margin-top:5px; font-size:13px; }
.current-work-panel:not(:empty) { margin:14px 0 0; padding:10px 14px; border-radius:8px; }
.current-work-panel:has(.current-work-empty):not(:has(.current-work-warning)) { padding:7px 0; margin:10px 0 0; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--muted); gap:8px 14px; }
.current-work-panel:has(.current-work-empty) .current-work-empty { color:var(--ink); font-weight:550; }
.card,.stat-card,.client-card,.knowledge-card { border-radius:10px; }
.card-header { min-height:54px; padding:15px 20px; }
.card-header h2 { font-size:16px; font-weight:600; }
.card-header span { font-size:12px; }
.stats { gap:16px; }
.stat-card { padding:18px 20px; }
.stat-card strong { margin:8px 0 4px; font-size:30px; line-height:1.2; }
.stat-card .stat-heading { font-size:13px; }
.stat-card .stat-icon { width:28px; height:28px; border-radius:6px; }
.dashboard-grid,.dual-resource,.client-grid { gap:16px; }
.dashboard-grid { align-items:stretch; margin-top:16px; }
.status-bars { padding:12px 20px 16px; }
.status-row { font-size:13px; padding:10px 0; }
.staff-item { padding:13px 0; }
.staff-item b { font-size:13px; }
.staff-item small { font-size:12px; line-height:1.5; }
.primary,.secondary,.danger,.page-actions-toggle { border-radius:6px; min-height:38px; font-size:13px; font-weight:600; padding:9px 14px; }
.primary { background:#1673c9; box-shadow:none; }
.primary:hover { background:#1262ae; transform:none; }
.secondary { background:var(--panel); border:1px solid var(--line); color:var(--ink); }
.secondary:hover { background:var(--surface-alt); }
.field input,.field select,.field textarea,.filterbar input,.filterbar select { border-radius:6px; padding:10px 12px; }
.field label { font-weight:550; }
.field-help { font-size:12px; line-height:1.6; color:var(--muted); }
.workspace-tabs { width:100%; margin:0 0 18px; padding:0; gap:0 18px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
.workspace-tabs button { min-height:44px; padding:10px 2px; margin-bottom:-1px; border:0; border-bottom:3px solid transparent; border-radius:0; font-size:14px; font-weight:500; color:var(--muted); }
.workspace-tabs button[aria-selected="true"] { color:var(--blue); background:transparent; border-bottom-color:var(--blue); box-shadow:none; font-weight:650; }
.workspace-tabs button:hover { color:var(--blue); }
.resource-card,.knowledge-card,.client-card { padding:20px; }
.resource-card > h2,.account-links > h2 { margin:0 0 6px; font-size:19px; font-weight:650; }
.resource-card > p { margin:0 0 18px; color:var(--muted); }
.resource-row { padding:15px 0; }
.resource-row .button-pair { gap:8px; }
.table-wrap th { background:var(--surface-alt); font-weight:600; font-size:12px; padding:13px 16px; }
.table-wrap td { padding:15px 16px; }
.table-wrap td b { font-weight:600; }
.account-tab-layout { max-width:1120px; }
.account-tab-layout > [role="tabpanel"] { min-width:0; }
.account-tab-layout > [aria-labelledby="account-tab-profile"] { max-width:760px; }
#account-profile-form { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
#account-profile-form > .field:first-child { grid-column:1/-1; }
#account-profile-form > button { grid-column:1/-1; justify-self:start; }
.account-identity { padding-bottom:20px; border-bottom:1px solid var(--line); }
.account-identity h2 { font-size:21px; }
.account-security { margin-top:22px; padding-top:18px; }
.account-settings-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; }
.account-settings-column { display:grid; gap:18px; min-width:0; }
.account-settings-column .appearance-settings { padding:16px; border-radius:8px; background:var(--surface-alt); }
.account-settings-column .form-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
.account-settings-column .account-switch { min-height:36px; font-size:13px; }
.account-settings-actions { padding-top:18px; border-top:1px solid var(--line); }
.page-account .account-links { max-width:1120px; }
.page-account .workspace-tabs button { min-height:44px; }
.page-tickets .queue-views { gap:0 16px; padding:0; border-bottom:1px solid var(--line); }
.page-tickets .queue-views button { border:0; border-bottom:3px solid transparent; border-radius:0; padding:10px 2px; margin-bottom:-1px; background:transparent; font-weight:500; color:var(--muted); }
.page-tickets .queue-views button[aria-pressed="true"] { color:var(--blue); border-bottom-color:var(--blue); font-weight:650; }
.page-tickets .queue-layout { gap:0; grid-template-columns:310px minmax(0,1fr); border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--panel); box-shadow:var(--panel-shadow); }
.page-tickets .queue-list { border:0; border-right:1px solid var(--line); border-radius:0; box-shadow:none; background:var(--panel); }
.page-tickets .ticket-detail { border:0; border-radius:0; box-shadow:none; }
.page-tickets .filterbar { padding:14px; background:var(--panel); }
.page-tickets .ticket { padding:14px 16px; border-left:3px solid transparent; }
.page-tickets .ticket.active { border-left-color:var(--blue); background:var(--blue-soft); }
.page-tickets .ticket h3 { font-size:14px; font-weight:600; margin:6px 0; }
.page-tickets .ticket-number { font-size:11px; }
.page-tickets .ticket-meta { font-size:12px; }
.page-tickets .ticket-detail .detail-head { padding:16px 20px; }
.page-tickets .detail-head h2 { font-size:20px; font-weight:650; }
.page-tickets .ticket-focus { padding:9px 20px; background:var(--panel); }
.page-tickets .ticket-focus dd { font-size:13px; }
.page-tickets .ticket-next-step { padding:9px 20px; background:var(--surface-alt); }
.page-tickets .ticket-context summary,.page-tickets .ticket-materials summary { padding:9px 20px; }
.page-tickets .ticket-assignment-panel { border-radius:7px; box-shadow:none; }
.page-tickets .message.mine .message-avatar { background:var(--blue-soft); color:var(--blue); }
@media (min-width:1200px) and (min-height:820px) {
  .content:has(.page-tickets) { padding:0 20px 18px; gap:12px; }
  .content:has(.page-tickets) > .topbar { height:64px; background:linear-gradient(105deg,#175fa6,#2373b7); }
  .content:has(.page-tickets) > .current-work-panel:has(.current-work-empty):not(:has(.current-work-warning)) { margin:0; padding:7px 0; }
  .page-tickets > .ticket-assignment-panel { padding:9px 12px; }
}
@media (max-width:1199px) and (min-width:1001px) { .page-tickets .queue-layout { grid-template-columns:285px minmax(0,1fr); } }
@media (max-width:1000px) {
  .content { padding:0 20px 24px; }
  .topbar { margin:0 -20px; padding:0 20px; }
  .sidebar { padding:20px 10px; }
  .page-tickets .queue-layout { grid-template-columns:minmax(0,1fr); gap:0; }
  .page-tickets .queue-list { border-right:0; border-bottom:1px solid var(--line); }
}
@media (max-width:800px) { .account-settings-columns { grid-template-columns:minmax(0,1fr); gap:18px; } }
@media (max-width:680px) {
  .content { padding:0 14px 24px; }
  .topbar { margin:0 -14px; padding:0 14px 0 96px; height:64px; }
  .mobile-menu-button { color:#fff; background:#ffffff12; border-color:#ffffff44; }
  .page-title { margin:20px 0 16px; }
  .page-title h1 { font-size:24px; }
  .stat-card { padding:16px; }
  .card-header { padding:14px 16px; flex-wrap:wrap; }
  .resource-card,.knowledge-card,.client-card { padding:16px; }
  #account-profile-form { grid-template-columns:minmax(0,1fr); }
  .page-account .workspace-tabs button { flex:0 1 auto; }
  .workspace-tabs { gap:0 14px; }
  .page-tickets .queue-views { gap:0 14px; }
  .page-tickets .queue-views button { min-height:44px; }
  .page-tickets .ticket-detail .detail-head { padding:16px; }
  .account-settings-column .appearance-settings { padding:12px; }
}
/* Populated records use aligned label/value cells instead of loose inline text. */
.task-billing-meta,.visit-billing-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 16px; }
.task-billing-meta > span,.visit-billing-meta > span { font-size:13px; line-height:1.55; color:var(--ink); overflow-wrap:anywhere; }
.task-billing-meta > span > b,.visit-billing-meta > span > b { display:block; font-size:12px; font-weight:500; color:var(--muted); margin-bottom:2px; }
.task-billing,.visit-billing { background:var(--surface-alt); border-color:var(--line); padding:14px; }
.task-billing-result,.visit-billing-result { padding-top:10px; margin-top:10px; border-top:1px solid var(--line); gap:8px; font-size:13px; }
.task-execution { line-height:1.6; font-size:13px; }
.task-execution > b { display:block; margin-bottom:4px; font-size:12px; color:var(--muted); font-weight:500; }
.task-row > .text-button,.visit-row > .text-button { justify-self:start; text-align:left; }
.page-assets .resource-row > div > small + br { display:none; }
.page-assets .resource-row > div { line-height:1.65; }
.page-assets .resource-row > .tag,.page-assets .resource-row > .text-button { align-self:start; }
.knowledge-card p { max-width:80ch; }
.table-wrap td small { font-size:12px; line-height:1.5; }
.user-table b { font-size:14px; }
.resource-row .tag { font-size:12px; }
.report-filter-form { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; align-items:end; }
.report-filter-form .field { margin:0; }
.report-filter-field { display:grid; gap:6px; min-width:0; }
.report-filter-field > span { font-size:12px; font-weight:550; color:var(--muted); }
.report-filter-form input,.report-filter-form select { width:100%; font-size:14px; border-radius:6px; min-height:42px; }
.report-filters { padding:18px 20px; }
.report-filters p { font-size:12px; line-height:1.6; }
.report-filter-form .button-pair { grid-column:1/-1; }
@media (max-width:1000px) { .report-filter-form { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:680px) { .report-filter-form { grid-template-columns:minmax(0,1fr); }.report-filter-form input,.report-filter-form select { font-size:16px; } }
/* Optional navigation rail and a stable header for asynchronously loaded work. */
.sidebar-toggle { display:flex; align-items:center; gap:10px; width:100%; min-height:36px; margin:18px 0 0; padding:6px 12px; border:1px solid var(--line); border-radius:6px; background:transparent; color:var(--muted); font-size:12px; text-align:left; }
.sidebar-toggle b { font-size:24px; font-weight:400; line-height:1; }
.sidebar-toggle:hover { background:var(--blue-soft); color:var(--blue); }
.sidebar:has(.sidebar-toggle) .workspace { margin-top:16px; }
.current-work-menu { position:relative; flex:none; }
.current-work-menu > summary { display:flex; align-items:center; gap:7px; width:122px; min-height:36px; padding:6px 10px; border:1px solid #ffffff44; border-radius:6px; font-size:13px; color:#fff; cursor:pointer; list-style:none; }
.current-work-menu > summary::-webkit-details-marker { display:none; }
.current-work-menu:has(.tag.progress) > summary { box-shadow:inset 0 -3px #98e8c4; }
.current-work-menu .current-work-panel:not(:empty) { position:absolute; top:calc(100% + 12px); right:0; z-index:50; width:460px; max-width:calc(100vw - 28px); max-height:65dvh; overflow:auto; margin:0; padding:16px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--ink); box-shadow:0 12px 32px #10203533; }
.current-work-menu .current-work-panel small { width:100%; }
.page-tickets .ticket-next-step { display:flex; align-items:center; justify-content:space-between; gap:12px 20px; padding:12px 20px; }
.page-tickets .ticket-next-step-copy { min-width:0; max-width:80ch; }
.page-tickets .ticket-next-step h3 { display:block; margin:0 0 4px; font-size:12px; color:var(--muted); font-weight:600; }
.page-tickets .ticket-next-step h3::after { content:none; }
.page-tickets .ticket-next-step p { display:block; font-size:13px; line-height:1.6; }
.page-tickets .ticket-next-step button { flex:none; margin:0; }
.page-tickets .ticket-focus { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
@media (min-width:1001px) {
  .shell.sidebar-collapsed { grid-template-columns:68px minmax(0,1fr); }
  .sidebar-collapsed .sidebar { padding-left:8px; padding-right:8px; }
  .sidebar-collapsed .brand { padding:0; justify-content:center; }
  .sidebar-collapsed .brand > span:last-child,.sidebar-collapsed .workspace,.sidebar-collapsed .nav button > span,.sidebar-collapsed .nav-count,.sidebar-collapsed .user-chip > div,.sidebar-collapsed .build-info,.sidebar-collapsed .sidebar-toggle > span { display:none; }
  .sidebar-collapsed .nav button { justify-content:center; padding:11px; }
  .sidebar-collapsed .sidebar-toggle { justify-content:center; padding:6px; }
  .sidebar-collapsed .sidebar-bottom { padding:12px 0 0; }
  .sidebar-collapsed .user-chip { justify-content:center; }
  .sidebar-collapsed .sidebar-bottom > .text-button { display:block; margin:8px 0 0; width:100%; font-size:10px; padding:6px 0; min-height:32px; overflow-wrap:anywhere; }
}
@media (min-width:1200px) and (min-height:820px) { .content:has(.page-tickets) .page-title { grid-column:1/-1; } }
@media (min-width:681px) and (max-width:1000px) { .sidebar-toggle { justify-content:center; padding:6px; }.sidebar-toggle span { display:none; } }
@media (max-width:1000px) { .sidebar-toggle { display:none; } }
@media (max-width:680px) {
  .current-work-menu > summary { width:34px; padding:6px; justify-content:center; font-size:18px; }
  .current-work-menu > summary span { display:none; }
  .topbar { gap:7px; }
  .topbar .socket-state { display:none; }
  .current-work-menu .current-work-panel:not(:empty) { position:fixed; top:72px; right:14px; }
  .page-tickets .ticket-next-step { align-items:flex-start; flex-direction:column; padding:12px 16px; }
}
/* Messenger first: a single compact header; case guidance lives behind Details. */
.page-tickets .ticket-detail { position:relative; }
.page-tickets .ticket-detail > .ticket-context { position:static; border:0; padding:0; margin:0; max-height:none; overflow:visible; }
.page-tickets .ticket-detail > .ticket-context > summary { position:absolute; top:16px; right:16px; z-index:3; display:flex; align-items:center; justify-content:center; width:94px; height:36px; padding:6px 10px; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--ink); list-style:none; }
.page-tickets .ticket-context > summary::-webkit-details-marker { display:none; }
.page-tickets .ticket-context > summary b { font-size:12px; font-weight:600; }
.page-tickets .ticket-context[open] > summary { color:var(--blue); background:var(--blue-soft); }
.page-tickets .ticket-info-content { max-height:280px; overflow:auto; border-bottom:1px solid var(--line); background:var(--panel); }
.page-tickets .ticket-info-content .info-list { padding:14px 20px; }
.page-tickets .ticket-detail .detail-head { min-height:76px; padding:12px 16px; padding-right:122px; gap:4px 14px; }
.page-tickets .ticket-heading { gap:10px; }
.page-tickets .detail-head h2 { font-size:18px; line-height:1.35; }
.page-tickets .detail-sub { gap:6px; font-size:11px; }
.page-tickets .detail-sub .tag { font-size:11px; padding:3px 8px; }
.page-tickets .detail-actions > button { min-height:34px; padding:7px 11px; }
.page-tickets .ticket-next-step-copy { max-width:80ch; }
@media (max-width:700px) {
  .page-tickets .ticket-detail .detail-head { padding:12px; padding-right:112px; min-height:84px; }
  .page-tickets .ticket-context > summary { top:12px; right:12px; width:88px; }
  .page-tickets .ticket-heading h2 { font-size:17px; }
  .page-tickets .ticket-heading .detail-number { font-size:10px; }
  .page-tickets .detail-actions { grid-column:1/-1; margin-right:-100px; flex-wrap:wrap; }
  .page-tickets .ticket-info-content { max-height:45dvh; }
}

.page-tickets .ticket-heading h2 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:700px) { .page-tickets .ticket-detail .detail-head { padding-right:60px; }.page-tickets .ticket-context > summary { width:36px; }.page-tickets .ticket-context > summary b { font-size:0; }.page-tickets .ticket-context > summary b::after { content:'i'; font-size:18px; }.page-tickets .detail-actions { margin-right:-48px; } }

@media (max-width:700px) { .page-tickets .ticket-detail > .ticket-context > summary { top:12px; right:12px; width:36px; }.page-tickets .ticket-detail .detail-head { grid-template-columns:minmax(0,1fr); }.page-tickets .ticket-heading { display:block; }.page-tickets .ticket-heading h2 { margin-top:4px; }.page-tickets .detail-sub { grid-row:2; }.page-tickets .detail-actions { grid-row:3; } }
/* A touch-friendly compact header keeps one existing work action; others stay in More. */
.ticket-full-title dd { overflow-wrap:anywhere; white-space:normal; }
@media (max-width:700px) {
  .page-tickets .ticket-detail .detail-head { padding-right:12px; gap:6px; }
  .page-tickets .ticket-heading { padding-right:48px; }
  .page-tickets .detail-sub > span:not(.tag) { display:none; }
  .page-tickets .detail-actions { margin-right:0; display:flex; justify-content:flex-end; gap:8px; }
  .page-tickets .detail-actions > button,.page-tickets .detail-actions .page-actions-toggle { min-height:38px; padding:8px 12px; }
  .page-tickets .ticket-heading .detail-number { line-height:1.3; }
}

@media (max-width:700px) { .page-tickets .ticket-detail .detail-head { grid-template-columns:minmax(0,1fr) auto; }.page-tickets .ticket-heading { grid-column:1/-1; }.page-tickets .detail-sub { grid-column:1; grid-row:2; min-width:0; }.page-tickets .detail-sub .tag { white-space:normal; }.page-tickets .detail-actions { grid-column:2; grid-row:2; } }

.ticket-resolution { flex:none; align-self:stretch; max-width:740px; margin:16px auto 0; padding:14px 16px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--ink); }
.ticket-resolution h3 { margin:0 0 6px; color:var(--green); font-size:13px; font-weight:600; }
.ticket-resolution p { margin:0; font-size:14px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }

.send-message svg { display:none; }
@media (max-width:700px) { .page-tickets .ticket-detail .chat-composer > .send-message { width:40px; height:40px; min-height:40px; padding:0; display:grid; place-items:center; }.send-message > span { display:none; }.send-message svg { display:block; }.page-tickets .ticket-detail .chat-composer > textarea { min-height:44px; border-radius:12px; padding:10px 12px; }.page-tickets .chat-composer-meta > .chat-audience { min-width:0; flex-basis:auto; } }
/* On a phone/tablet, the selected conversation replaces the list instead of stacking below it. */
.ticket-back-button { display:none; }
.ticket-heading-text { display:flex; align-items:baseline; gap:10px; min-width:0; flex:1; }
.ticket-heading-text h2 { min-width:0; }
@media (max-width:1000px) {
  .ticket-back-button { display:grid; place-items:center; flex:0 0 34px; width:34px; height:38px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--blue); }
  .ticket-back-button:hover { background:var(--blue-soft); }
  .content:has(.page-tickets .detail-head) { height:100dvh; min-height:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:64px minmax(0,1fr); overflow:hidden; }
  .content:has(.page-tickets .detail-head) > .topbar { grid-row:1; grid-column:1; height:64px; margin:0; padding:0 14px; min-width:0; }
  .content:has(.page-tickets .detail-head) > .workspace-favorites { display:none; }
  .page.page-tickets:has(.detail-head) { display:contents; }
  .page-tickets:has(.detail-head) > .page-title,.page-tickets:has(.detail-head) > .queue-views,.page-tickets:has(.detail-head) > .ticket-assignment-panel { display:none; }
  .page-tickets:has(.detail-head) > .queue-layout { grid-row:2; grid-column:1; height:100%; min-height:0; margin:0; border:0; border-radius:0; display:flex; overflow:hidden; }
  .page-tickets:has(.detail-head) .queue-list { display:none; }
  .page-tickets:has(.detail-head) .ticket-detail { width:100%; flex:1; height:100%; min-height:0; border:0; border-radius:0; overflow:hidden; }
  .page-tickets:has(.detail-head) .chat-layout,.page-tickets:has(.detail-head) .conversation { min-height:0; }
  .page-tickets:has(.detail-head) .messages { min-height:0; max-height:none; }
  .page-tickets .ticket-heading { align-items:center; }
}
@media (max-width:700px) {
  .content:has(.page-tickets .detail-head) > .topbar { padding-left:96px; }
  .page-tickets .ticket-heading { display:flex; gap:6px; }
  .ticket-heading-text { flex-direction:column; align-items:flex-start; gap:3px; }
  .page-tickets .ticket-heading-text h2 { width:100%; margin:0; }
  .page-tickets .ticket-heading-text .detail-number { width:100%; }
}

@media (min-width:701px) and (max-width:1200px) { .page-tickets .ticket-detail .detail-head { padding-right:16px; }.page-tickets .ticket-heading { grid-column:1/-1; grid-row:1; padding-right:110px; }.page-tickets .detail-sub { grid-column:1; grid-row:2; min-width:0; }.page-tickets .detail-sub > span:not(.tag):not(.priority) { display:none; }.page-tickets .detail-actions { grid-column:2; grid-row:2; margin:0; justify-content:flex-end; } }

@media (max-width:1000px) { .content:has(.page-tickets .detail-head) { grid-template-rows:minmax(0,1fr); }.content:has(.page-tickets .detail-head) > .topbar,.content:has(.page-tickets .detail-head) > .mobile-menu-button { display:none; }.page-tickets:has(.detail-head) > .queue-layout { grid-row:1; } }
.page-tickets .messages > .ticket-history { flex:none; width:100%; margin:16px 0 0; background:var(--panel); }

@media (max-width:700px) { #ticket-rating-form { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }#ticket-rating-form > input,#ticket-rating-form > select { width:100%; min-width:0; font-size:16px; }#ticket-rating-form > button { justify-self:start; } }

.equipment-public-status { margin:8px 0; padding:10px 12px; border-left:3px solid var(--blue); border-radius:6px; background:var(--blue-soft); font-size:13px; }.equipment-public-status p { margin:5px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }.equipment-job form,.equipment-job fieldset { display:grid; gap:12px; min-width:0; }.equipment-job label { display:grid; gap:6px; min-width:0; }.equipment-job input,.equipment-job select,.equipment-job textarea { width:100%; min-width:0; }.equipment-job textarea { min-height:80px; }.equipment-job fieldset { margin:0; padding:14px; border:1px solid var(--line); border-radius:8px; }.equipment-storage-list { display:grid; gap:12px; }.equipment-check { display:grid; grid-template-columns:minmax(180px,1fr) minmax(0,2fr); gap:12px; }@media(max-width:700px){.equipment-check { grid-template-columns:minmax(0,1fr); }.equipment-job input,.equipment-job select,.equipment-job textarea { font-size:16px; }}

.equipment-job details p,.equipment-public-view p { white-space:pre-wrap; overflow-wrap:anywhere; }
.diagnostic-template-item{display:grid;grid-template-columns:minmax(180px,2fr) minmax(150px,1fr) auto auto;gap:12px;align-items:end;padding:16px 0;border-bottom:1px solid var(--line)}
.diagnostic-template-item label{display:flex;flex-direction:column;gap:6px;min-width:0}
.diagnostic-template-item input:not([type=checkbox]),.diagnostic-template-item select{width:100%}
@media(max-width:700px){.diagnostic-template-item{grid-template-columns:minmax(0,1fr)}.diagnostic-template-item input,.diagnostic-template-item select{font-size:16px}}
.service-workflow{display:grid;gap:12px;min-width:0;margin:12px 0}.service-workflow form{display:grid;gap:12px;margin:12px 0}.service-workflow label{display:grid;gap:6px;min-width:0}.service-workflow input,.service-workflow textarea,.service-workflow select{width:100%;min-width:0}.service-phase-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}.service-phase-list li{padding:6px 10px;border:1px solid var(--line);border-radius:8px}.service-phase-list [aria-current=step]{background:var(--blue-soft);border-color:var(--blue);font-weight:700}.service-workflow progress{width:100%}.service-quote-line{display:grid;grid-template-columns:minmax(100px,1fr) minmax(160px,2fr) minmax(80px,1fr) minmax(90px,1fr) auto;gap:8px;align-items:end;margin-bottom:12px}.service-workflow textarea{min-height:80px}@media(max-width:700px){.service-quote-line{grid-template-columns:minmax(0,1fr)}.service-workflow input,.service-workflow textarea,.service-workflow select{font-size:16px}}
.service-control-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:16px 0}.service-control-metrics p{padding:12px;border:1px solid var(--line);border-radius:8px}.service-control-metrics b{font-size:20px}
.repair-reception,.repair-workspace{width:min(1080px,calc(100vw - 32px));font-size:14px;line-height:1.5}
.repair-reception fieldset{min-width:0;border:1px solid var(--line);border-radius:12px;margin:16px 0;padding:16px}
.repair-reception legend{font-size:16px;font-weight:700;padding:0 6px}
.repair-reception label,.repair-card-actions form{display:grid;gap:8px;margin:12px 0;min-width:0}
.repair-reception input:not([type=checkbox]),.repair-reception select,.repair-reception textarea,.repair-card-actions input,.repair-card-actions select,.repair-card-actions textarea{width:100%;min-width:0}
.repair-reception textarea{min-height:80px;resize:vertical}
.repair-reception input:not([type=checkbox]),.repair-reception select,.repair-reception textarea,.repair-workspace input:not([type=checkbox]):not([type=file]),.repair-workspace select,.repair-workspace textarea{font:inherit;font-size:14px;line-height:1.5;min-height:42px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);max-width:100%;box-sizing:border-box}
.repair-reception input:focus-visible,.repair-reception select:focus-visible,.repair-reception textarea:focus-visible,.repair-workspace input:focus-visible,.repair-workspace select:focus-visible,.repair-workspace textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.repair-reception output{display:block;padding:12px;border-radius:9px;background:var(--blue-soft);color:var(--ink)}
.repair-reception [hidden]{display:none!important}
.repair-reception .account-switch{display:flex;align-items:flex-start}
.repair-reception .account-switch input{flex:none;margin-top:5px}
.repair-workspace>.modal-title-row{position:sticky;top:-24px;z-index:2;background:var(--panel);padding:16px 0;border-bottom:1px solid var(--line)}
.repair-identity{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:20px;background:var(--blue-soft);border:1px solid var(--line);border-radius:12px}
.repair-identity div{display:grid;gap:4px;min-width:0}.repair-identity small{font-size:12px;color:var(--muted)}.repair-identity strong{font-size:15px;overflow-wrap:anywhere}
.repair-card-actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;margin:16px 0}
.repair-card-actions>form{margin:0}.repair-card-actions>details{flex:1;min-width:min(240px,100%);border:1px solid var(--line);border-radius:10px;padding:12px}
.repair-workspace details>summary{cursor:pointer;font-weight:600;padding:10px 0;overflow-wrap:anywhere}
.repair-workspace .equipment-job>details{margin:16px 0;border:1px solid var(--line);border-radius:12px;padding:0 16px}
.repair-workspace .equipment-job form{margin:12px 0}.repair-workspace .equipment-job fieldset{min-width:0}
.repair-workspace .task-detail-section{margin-top:16px;padding-top:16px}.repair-workspace label{font-size:14px}
@media(max-width:700px){.repair-reception,.repair-workspace{width:100%;padding:16px;max-height:calc(100dvh - 24px)}.repair-identity{grid-template-columns:minmax(0,1fr);gap:12px;padding:16px}.repair-reception .form-grid{grid-template-columns:minmax(0,1fr)}.repair-reception input,.repair-reception select,.repair-reception textarea,.repair-workspace input,.repair-workspace select,.repair-workspace textarea{font-size:16px}.repair-workspace>.modal-title-row{top:-16px}.repair-card-actions{display:grid;grid-template-columns:minmax(0,1fr)}.repair-card-actions>details{min-width:0}.repair-workspace .message-form{flex-wrap:wrap}}

@media(max-width:700px){.repair-reception input:not([type=checkbox]),.repair-workspace input:not([type=checkbox]):not([type=file]),.repair-reception select,.repair-reception textarea,.repair-workspace select,.repair-workspace textarea{font-size:16px}}
@media(max-width:700px){.repair-workspace>.modal-title-row{position:static;padding:0 0 12px}.repair-workspace>.modal-title-row h2{font-size:19px}.repair-workspace>.modal-title-row p{font-size:13px;line-height:1.4}}
@media(max-width:700px){.repair-workspace .message-form{display:grid;grid-template-columns:minmax(0,1fr)}.repair-workspace .message-form>*{min-width:0;max-width:100%}.repair-workspace .message-form input[type=file]{width:100%}}
.debt-summary-card,.client-debt-alert{border-left:4px solid #d99a2b}.debt-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:12px 0}.debt-summary-grid b{display:block;font-size:1.25rem}.debt-summary-grid small{color:var(--muted)}.client-debt-alert{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:16px 0;padding:18px}.client-debt-alert.is-blocked{border-left-color:#c94747}.client-debt-alert h2{margin:4px 0}.client-debt-alert p{margin:0}.client-debt-alert .secondary{white-space:nowrap}@media(max-width:640px){.client-debt-alert{align-items:flex-start;flex-direction:column}.client-debt-alert .secondary{width:100%;text-align:center}}

/* Local redesign preview: visual skin only. Original layout and responsive rules stay intact. */
:root{--radius:14px;--blue:#2563d8;--blue-soft:#e8f0ff;--line:#dfe6f0}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
.sidebar{background:#0f1b2d;box-shadow:8px 0 24px rgba(15,27,45,.08)}
.sidebar .brand,.sidebar .workspace,.sidebar .sidebar-bottom,.sidebar .sidebar-bottom *{color:#fff}
.nav button{border-radius:10px}.nav button.active{background:#214b7b;box-shadow:none}
.primary{background:#2563d8;border-radius:9px;box-shadow:0 6px 14px rgba(37,99,216,.16)}
.secondary{border-radius:9px}
.card,.stat-card,.resource-card{border-radius:14px;box-shadow:0 3px 14px rgba(38,58,91,.045)}
.field input,.field select,.field textarea{border-radius:9px}
.topbar .breadcrumb,.topbar .breadcrumb b{color:var(--ink)}
.topbar .global-search-button,.topbar .current-work-menu>summary,.topbar .notification-button{color:var(--ink);border-color:var(--line)}
.topbar .global-search-button:hover,.topbar .current-work-menu>summary:hover,.topbar .notification-button:hover{background:var(--blue-soft);color:var(--blue)}
.login-hero{background:linear-gradient(145deg,#0f1b2d 0%,#173763 100%)}

/* Full local redesign: Workspace UI. Layout is desktop-only here; the original
   responsive rules remain the source of truth below 1000px. */
:root[data-theme="light"],:root[data-theme="system"]{color-scheme:light;--ink:#15233b;--muted:#66758d;--panel:#fff;--page:#f4f7fb;--line:#dfe7f1;--blue:#2463d7;--blue-soft:#eaf2ff;--navy:#101d31;--green:#178b6b;--red:#d94c60}
:root[data-theme="dark"]{color-scheme:dark;--ink:#eaf1fb;--muted:#a6b6ca;--panel:#17253a;--page:#0d1726;--line:#30445f;--blue:#78adff;--blue-soft:#1d3555;--navy:#091321;--green:#68d3ad;--red:#ff8296}
body{background:var(--page);color:var(--ink)}
@media (min-width:1001px){
  .shell{grid-template-columns:220px minmax(0,1fr);background:#f4f7fb}
  .sidebar{padding:22px 14px 18px;background:#101d31;border:0;box-shadow:14px 0 35px rgba(16,29,49,.09)}
  .sidebar .brand{padding:3px 9px 20px;font-size:14px;letter-spacing:-.02em}.sidebar .brand-mark{border-radius:10px;background:linear-gradient(145deg,#62d9e8,#2463d7);box-shadow:0 8px 18px rgba(36,99,215,.22)}
  .sidebar .workspace{margin:12px 8px 10px;color:#8fa2bd;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
  .nav{gap:4px;margin-top:8px}.nav button{min-height:42px;padding:11px 12px;border:0;border-radius:11px;color:#aebdd2;font-size:13px;font-weight:650;transition:.16s}
  .nav button:hover{background:#1a304d;color:#fff}.nav button.active{background:linear-gradient(100deg,#245b93,#214a78);color:#fff;box-shadow:inset 3px 0 #7fd5ff}
  .sidebar-bottom{border-top:1px solid rgba(159,182,211,.2);padding-top:16px}.sidebar-bottom .avatar{background:#d8e6fa;color:#1c4c8d}.sidebar-bottom .text-button{color:#9ec6ff}
  .content{padding:0 30px 42px;background:#f4f7fb}.topbar{height:76px;padding:0 2px;border-bottom:1px solid #dfe7f1;background:#fff}
  .breadcrumb{font-size:12px;color:#6b7c94}.breadcrumb b{color:#1d3554}
  .global-search-button{height:38px;border:1px solid #dfe7f1;border-radius:11px;background:#fff;color:#7a8aa0;padding:0 14px}.global-search-button:hover{background:#eaf2ff;color:#2463d7}
  .current-work-menu>summary,.notification-button{border:1px solid #dfe7f1;border-radius:11px;background:#fff;color:#294364}.current-work-menu>summary{height:38px;width:128px}.notification-button{width:38px;height:38px}
  .page-title{margin:30px 0 22px}.page-title h1{font-size:31px;letter-spacing:-.04em;color:#14243c}.page-title p{color:#728198}
  .stats{gap:14px}.stat-card{position:relative;min-height:125px;padding:20px;background:#fff;border:1px solid #dfe7f1;border-radius:16px;box-shadow:0 7px 22px rgba(42,64,95,.06);overflow:hidden}.stat-card:after{content:"";position:absolute;right:-28px;bottom:-36px;width:100px;height:100px;border:14px solid #edf4ff;border-radius:50%}.stat-card .stat-heading{position:relative;z-index:1;color:#6b7d95}.stat-card .stat-icon{position:relative;z-index:1;background:#e9f2ff;color:#2463d7}.stat-card strong{position:relative;z-index:1;margin-top:17px;color:#14243c;font-size:30px}.stat-card small{position:relative;z-index:1;color:#7a899d}
  .performance-card{border:1px solid #d9e6f2;border-radius:18px;background:linear-gradient(115deg,#fff,#eef7ff);box-shadow:0 7px 22px rgba(42,64,95,.06)}
  .performance-main strong{color:#1c5cb5}.performance-main small,.performance-main .eyebrow{color:#71839a}.performance-metrics div{border-left-color:#dfe7f1}.performance-metrics b{color:#1a3555}.performance-metrics small{color:#7c8ba0}
  .card,.resource-card{background:#fff;border:1px solid #dfe7f1;border-radius:16px;box-shadow:0 7px 22px rgba(42,64,95,.05)}.card-header{background:#fff;border-bottom:1px solid #e8eef5}.card-header h2{color:#1a304c}.card-header span{color:#7b8ba0}
  .status-bars .progress{background:#edf2f8}.status-bars .progress b{background:linear-gradient(90deg,#3985e8,#6db1ff)}
  .ticket,.task-row,.visit-row,.invoice-row{background:#fff;border-color:#e5ebf3}.ticket:hover,.ticket.selected{background:#f7fbff}
  .queue-layout{border:1px solid #dfe7f1;border-radius:16px;box-shadow:0 7px 22px rgba(42,64,95,.05);overflow:hidden}.queue-list,.ticket-detail{background:#fff}.ticket-sidebar{background:#f9fbfe;border-left:1px solid #e8eef5}
  .primary{background:#2463d7;border-radius:10px;box-shadow:0 7px 15px rgba(36,99,215,.2)}.secondary{border-color:#dfe7f1;border-radius:10px;background:#fff;color:#294364}
  .field input,.field select,.field textarea{background:#fff;border-color:#dfe7f1;border-radius:10px}.field input:focus,.field select:focus,.field textarea:focus{border-color:#73a9f2;box-shadow:0 0 0 3px #e5f0ff}
}
@media (max-width:1000px){
  body{background:#f4f7fb}.sidebar{background:#101d31}.content{background:#f4f7fb}.topbar{background:#fff}.nav button.active{background:#24527f}.card,.stat-card,.resource-card{background:#fff}
}

/* Dark workspace variant. The same layout remains usable in both themes. */
@media (min-width:1001px){
  :root[data-theme="dark"] body,:root[data-theme="dark"] .content{background:#0d1726;color:#eaf1fb}
  :root[data-theme="dark"] .topbar,:root[data-theme="dark"] .card,:root[data-theme="dark"] .stat-card,:root[data-theme="dark"] .resource-card,:root[data-theme="dark"] .queue-layout,:root[data-theme="dark"] .queue-list,:root[data-theme="dark"] .ticket-detail{background:#17253a;border-color:#30445f;color:#eaf1fb}
  :root[data-theme="dark"] .topbar{border-color:#30445f}
  :root[data-theme="dark"] .breadcrumb,:root[data-theme="dark"] .breadcrumb b,:root[data-theme="dark"] .page-title h1,:root[data-theme="dark"] .card-header h2,:root[data-theme="dark"] .stat-card strong{color:#eaf1fb}
  :root[data-theme="dark"] .page-title p,:root[data-theme="dark"] .card-header span,:root[data-theme="dark"] .stat-card small{color:#a6b6ca}
  :root[data-theme="dark"] .global-search-button,:root[data-theme="dark"] .current-work-menu>summary,:root[data-theme="dark"] .notification-button,:root[data-theme="dark"] .secondary{background:#17253a;border-color:#30445f;color:#d8e6f8}
  :root[data-theme="dark"] .global-search-button:hover,:root[data-theme="dark"] .current-work-menu>summary:hover,:root[data-theme="dark"] .notification-button:hover{background:#1d3555;color:#fff}
  :root[data-theme="dark"] .card-header{background:#17253a;border-color:#30445f}
  :root[data-theme="dark"] .ticket,:root[data-theme="dark"] .task-row,:root[data-theme="dark"] .visit-row,:root[data-theme="dark"] .invoice-row{background:#17253a;border-color:#30445f;color:#eaf1fb}
  :root[data-theme="dark"] .ticket:hover,:root[data-theme="dark"] .ticket.selected{background:#1d3555}
  :root[data-theme="dark"] .field input,:root[data-theme="dark"] .field select,:root[data-theme="dark"] .field textarea{background:#111e31;border-color:#30445f;color:#eaf1fb}
  :root[data-theme="dark"] .performance-card{background:linear-gradient(115deg,#17253a,#15324b);border-color:#30445f}
  :root[data-theme="dark"] .status-bars .progress{background:#26384f!important}
  :root[data-theme="dark"] .stat-card:after{border-color:#223c60}
}
@media (max-width:1000px){
  :root[data-theme="dark"] body,:root[data-theme="dark"] .content{background:#0d1726;color:#eaf1fb}
  :root[data-theme="dark"] .topbar,:root[data-theme="dark"] .card,:root[data-theme="dark"] .stat-card,:root[data-theme="dark"] .resource-card{background:#17253a;border-color:#30445f;color:#eaf1fb}
}

/* V2 shell: a new information hierarchy around the unchanged CRM actions. */
.v2-brand{display:flex;align-items:center;gap:10px}.v2-brand>span:last-child{display:grid;gap:1px}.v2-brand b{font-size:15px;letter-spacing:-.02em}.v2-brand small{font-size:10px;color:#9eb1c9;letter-spacing:.04em}.v2-collapse{margin-top:4px}.v2-nav button{min-height:44px}.v2-nav button b{display:grid;place-items:center;width:24px;height:24px}.v2-account{margin-top:auto}.v2-topbar{justify-content:space-between;gap:18px}.v2-breadcrumb{display:grid;gap:2px}.v2-crumb-kicker{font-size:10px;color:#8a9bb0;text-transform:uppercase;letter-spacing:.08em}.v2-breadcrumb b{font-size:14px}.v2-topbar-actions{display:flex;align-items:center;gap:9px}.v2-action{display:flex;align-items:center;justify-content:center;gap:8px}.v2-action kbd{padding:2px 5px;border:1px solid var(--line);border-radius:4px;font-size:10px;color:var(--muted);background:var(--page)}.v2-favorites{display:flex;align-items:center;gap:8px;margin:14px 0 4px;padding:7px 0}.v2-favorites>span{margin-right:5px;color:var(--muted);font-size:11px;font-weight:700}.v2-favorites button{padding:7px 10px;font-size:11px}.v2-page>.page-title h1{font-size:34px}.v2-page>.page-title{margin-top:27px}
@media (max-width:1000px){.v2-topbar{padding:0 14px}.v2-topbar-actions{gap:6px}.v2-action kbd{display:none}.v2-crumb-kicker{display:none}.v2-page>.page-title h1{font-size:26px}.v2-favorites{overflow:auto;white-space:nowrap}.v2-favorites>span{flex:none}.v2-brand small{display:none}}

.v2-welcome{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:30px 0 22px}.v2-welcome h1{margin:4px 0 6px;font-size:36px;letter-spacing:-.045em}.v2-welcome p{margin:0;color:var(--muted);font-size:14px}.v2-eyebrow{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#6f91b9}.v2-welcome-actions{display:flex;gap:8px;flex:none}.v2-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.v2-kpi{position:relative;display:grid;gap:7px;min-height:130px;padding:18px;text-align:left;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--ink);box-shadow:0 8px 22px rgba(36,60,94,.06);cursor:pointer;overflow:hidden}.v2-kpi:hover{border-color:var(--blue);transform:translateY(-2px)}.v2-kpi span{font-size:12px;color:var(--muted)}.v2-kpi strong{font-size:32px;letter-spacing:-.04em}.v2-kpi small{color:var(--muted)}.v2-kpi>b{position:absolute;right:17px;bottom:17px;color:var(--blue);font-size:18px}.v2-main-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:14px;margin-bottom:14px}.v2-card-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 20px 16px;border-bottom:1px solid var(--line)}.v2-card-heading h2{margin:4px 0 0;font-size:17px}.v2-card-heading>span{color:var(--muted);font-size:11px}.v2-queue{padding:18px 20px 10px}.v2-queue-row{display:grid;grid-template-columns:92px minmax(0,1fr);gap:14px;align-items:center;margin-bottom:17px;font-size:12px}.v2-queue-row>span{color:var(--muted)}.v2-queue-row>div{display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:10px;align-items:center}.v2-track{display:block;height:8px;background:var(--blue-soft);border-radius:99px;overflow:hidden}.v2-track b{display:block;height:100%;border-radius:99px;background:#4d9bf2}.v2-track b.cyan{background:#35c6c0}.v2-track b.amber{background:#e6aa39}.v2-track b.muted{background:#9baabd}.v2-queue-row strong{font-size:12px}.v2-link{margin:0 20px 18px;font-size:12px}.v2-people{padding:4px 20px}.v2-person{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:10px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}.v2-person:last-child{border-bottom:0}.v2-person>span{display:grid;gap:3px}.v2-person b{font-size:12px}.v2-person small,.v2-person em{font-size:11px;color:var(--muted);font-style:normal}.v2-person em{color:var(--green)}.v2-sla,.v2-quick{min-height:210px}.v2-alert{width:100%;display:flex;justify-content:space-between;gap:12px;padding:14px 20px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);text-align:left;cursor:pointer}.v2-alert:hover{background:var(--blue-soft)}.v2-alert span{display:grid;gap:3px}.v2-alert small,.v2-alert em{font-size:11px;color:var(--muted);font-style:normal}.v2-danger{color:var(--red)!important}.v2-ok{color:var(--green)!important}.v2-empty-state{display:grid;gap:5px;padding:28px 20px;color:var(--muted);font-size:12px}.v2-empty-state b{color:var(--ink)}.v2-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:16px 20px}.v2-quick-grid button{display:grid;gap:4px;padding:14px;border:1px solid var(--line);border-radius:11px;background:var(--page);color:var(--ink);text-align:left;cursor:pointer}.v2-quick-grid button:hover{border-color:var(--blue);background:var(--blue-soft)}.v2-quick-grid b{font-size:12px}.v2-quick-grid small{font-size:10px;color:var(--muted)}
@media (max-width:1000px){.v2-welcome{align-items:flex-start;flex-direction:column;margin:22px 0 16px}.v2-welcome h1{font-size:28px}.v2-welcome-actions{width:100%}.v2-welcome-actions>*{flex:1}.v2-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.v2-main-grid{grid-template-columns:minmax(0,1fr)}.v2-kpi{min-height:112px}.v2-card-heading{padding:16px}.v2-queue{padding:16px}.v2-link{margin-left:16px;margin-right:16px}}
@media (max-width:520px){.v2-kpis{gap:8px}.v2-kpi{padding:13px;min-height:100px}.v2-kpi strong{font-size:26px}.v2-welcome-actions{display:grid;grid-template-columns:1fr}.v2-quick-grid{grid-template-columns:minmax(0,1fr)}}