/* ==========================================================================
   BSB Support Portal — theme + components (light & dark)
   Brand: navy #16223d · fire red #9e1b1b · cream #f7f1e6 · gold #c2a14d
   Fonts: Bitter (display) · Source Sans 3 (body)
   ========================================================================== */

:root {
  /* Brand constants */
  --brand-navy: #16223d;
  --brand-red: #9e1b1b;
  --brand-red-600: #7d1414;
  --brand-gold: #c2a14d;

  /* Light theme (default) */
  --canvas: #eef1f6;
  --surface: #ffffff;
  --surface-2: #f7f4ec;
  --surface-3: #f0ece0;
  --sidebar-bg: #16223d;
  --sidebar-fg: rgba(233, 238, 247, 0.72);
  --sidebar-fg-strong: #ffffff;
  --sidebar-active-bg: rgba(255, 255, 255, 0.08);
  --sidebar-hover-bg: rgba(255, 255, 255, 0.05);
  --sidebar-accent: var(--brand-red);
  --topbar-bg: rgba(255, 255, 255, 0.85);
  --text: #1b2438;
  --text-soft: #4c586e;
  --text-mute: #8a93a5;
  --border: #e2e6ee;
  --border-soft: #edf0f5;
  --accent: #9e1b1b;
  --accent-fg: #ffffff;
  --accent-soft: rgba(158, 27, 27, 0.09);
  --ring: rgba(158, 27, 27, 0.28);
  --shadow-sm: 0 1px 2px rgba(22, 34, 61, 0.06), 0 1px 3px rgba(22, 34, 61, 0.05);
  --shadow-md: 0 10px 24px -12px rgba(22, 34, 61, 0.22);
  --shadow-lg: 0 30px 60px -30px rgba(22, 34, 61, 0.40);
  --bubble-in: #ffffff;
  --bubble-out: #eef4ff;
  --bubble-note: #fbf4e6;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --font-display: "Bitter", Georgia, serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, sans-serif;
  --sidebar-w: 248px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --canvas: #0d1420;
  --surface: #151f33;
  --surface-2: #1a2540;
  --surface-3: #1f2c49;
  --sidebar-bg: #0a1120;
  --sidebar-fg: rgba(200, 210, 227, 0.66);
  --sidebar-fg-strong: #f2f6fc;
  --sidebar-active-bg: rgba(255, 255, 255, 0.07);
  --sidebar-hover-bg: rgba(255, 255, 255, 0.045);
  --sidebar-accent: #d8493f;
  --topbar-bg: rgba(19, 29, 51, 0.82);
  --text: #e7ecf5;
  --text-soft: #a9b4c9;
  --text-mute: #6c7893;
  --border: #26324c;
  --border-soft: #202b43;
  --accent: #d8493f;
  --accent-fg: #ffffff;
  --accent-soft: rgba(216, 73, 63, 0.14);
  --ring: rgba(216, 73, 63, 0.34);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 28px -14px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 30px 60px -28px rgba(0, 0, 0, 0.7);
  --bubble-in: #1a2540;
  --bubble-out: #1c2f52;
  --bubble-note: #2a2417;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0d1420; --surface: #151f33; --surface-2: #1a2540; --surface-3: #1f2c49;
    --sidebar-bg: #0a1120; --sidebar-fg: rgba(200,210,227,.66); --sidebar-fg-strong: #f2f6fc;
    --sidebar-active-bg: rgba(255,255,255,.07); --sidebar-hover-bg: rgba(255,255,255,.045);
    --sidebar-accent: #d8493f; --topbar-bg: rgba(19,29,51,.82);
    --text: #e7ecf5; --text-soft: #a9b4c9; --text-mute: #6c7893;
    --border: #26324c; --border-soft: #202b43;
    --accent: #d8493f; --accent-fg: #fff; --accent-soft: rgba(216,73,63,.14); --ring: rgba(216,73,63,.34);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 12px 28px -14px rgba(0,0,0,.6); --shadow-lg: 0 30px 60px -28px rgba(0,0,0,.7);
    --bubble-in: #1a2540; --bubble-out: #1c2f52; --bubble-note: #2a2417; color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--canvas);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; margin: 0; line-height: 1.2; }
::selection { background: var(--accent-soft); }

/* ---------- Shell ---------- */
.sd-shell { display: flex; min-height: 100vh; }
.sd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sd-content { padding: 26px clamp(18px, 3vw, 40px) 60px; flex: 1; }

/* ---------- Sidebar ---------- */
.sd-sidebar {
  width: var(--sidebar-w); flex: none; background: var(--sidebar-bg);
  color: var(--sidebar-fg); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  border-right: 1px solid rgba(0,0,0,.2);
}
.sd-brand {
  display: flex; align-items: center; gap: 11px; padding: 20px 22px 18px;
  color: var(--sidebar-fg-strong);
}
.sd-brand-mark {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(150deg, var(--brand-red), #c22b2b);
  color: #fff; box-shadow: 0 6px 16px -6px rgba(158,27,27,.7);
}
.sd-brand-text { font-family: var(--font-display); font-size: 1.12rem; letter-spacing: .01em; }
.sd-brand-text b { font-weight: 700; }
.sd-nav { padding: 6px 12px; flex: 1; }
.sd-nav-group {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.34); font-weight: 700; padding: 16px 12px 7px;
}
.sd-nav-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px;
  color: var(--sidebar-fg); font-weight: 600; font-size: .92rem; margin: 1px 0;
  transition: background .14s, color .14s; position: relative;
}
.sd-nav-item:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-fg-strong); }
.sd-nav-item.is-active { background: var(--sidebar-active-bg); color: var(--sidebar-fg-strong); }
.sd-nav-item.is-active::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--sidebar-accent);
}
.sd-nav-ico { display: grid; place-items: center; opacity: .92; }
.sd-nav-item.is-active .sd-nav-ico { color: var(--sidebar-accent); opacity: 1; }
.sd-sidebar-foot { padding: 10px 12px 16px; border-top: 1px solid rgba(255,255,255,.07); }

/* ---------- Topbar ---------- */
.sd-topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px;
  padding: 12px clamp(18px, 3vw, 40px); background: var(--topbar-bg);
  backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--border);
}
.sd-topbar-title { font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; white-space: nowrap; }
.sd-topsearch {
  flex: 1; max-width: 460px; margin-left: 6px; display: flex; align-items: center; gap: 9px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 15px; color: var(--text-mute);
}
.sd-topsearch input { border: none; background: none; outline: none; flex: 1; color: var(--text); font: inherit; }
.sd-topsearch input::placeholder { color: var(--text-mute); }
.sd-topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sd-icon-btn {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid transparent; background: transparent; color: var(--text-soft); cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.sd-icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.sd-has-badge { position: relative; }
.sd-badge-dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--topbar-bg); }
.sd-theme-moon { display: none; }
:root[data-theme="dark"] .sd-theme-sun { display: none; }
:root[data-theme="dark"] .sd-theme-moon { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sd-theme-sun { display: none; } :root:not([data-theme="light"]) .sd-theme-moon { display: block; } }
.sd-user { display: flex; align-items: center; gap: 10px; padding-left: 6px; }
.sd-user-meta { display: flex; flex-direction: column; line-height: 1.15; }
.sd-user-meta b { font-size: .88rem; }
.sd-user-meta small { color: var(--text-mute); font-size: .74rem; }
.sd-menu-toggle { display: none; }

/* ---------- Avatars ---------- */
.sd-avatar {
  display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden;
  flex: none; font-weight: 700; font-family: var(--font-body); color: #fff; line-height: 1;
}
.sd-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sd-avatar-initials {
  background: linear-gradient(150deg, hsl(var(--h,220) 46% 46%), hsl(var(--h,220) 52% 34%));
}

/* ---------- Chips ---------- */
.sd-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600;
  padding: 3px 10px 3px 8px; border-radius: 999px; white-space: nowrap;
  color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 26%, transparent);
}
.sd-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.sd-priority .sd-bars { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 11px; }
.sd-bars i { width: 2.5px; background: color-mix(in srgb, var(--c) 30%, transparent); border-radius: 1px; }
.sd-bars i:nth-child(1){height:3px} .sd-bars i:nth-child(2){height:5px} .sd-bars i:nth-child(3){height:7px}
.sd-bars i:nth-child(4){height:9px} .sd-bars i:nth-child(5){height:11px}
.sd-bars[data-lvl="1"] i:nth-child(-n+1),
.sd-bars[data-lvl="2"] i:nth-child(-n+2),
.sd-bars[data-lvl="3"] i:nth-child(-n+3),
.sd-bars[data-lvl="4"] i:nth-child(-n+4),
.sd-bars[data-lvl="5"] i:nth-child(-n+5) { background: var(--c); }

/* ---------- Buttons ---------- */
.sd-btn {
  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600;
  padding: 9px 16px; border-radius: 10px; cursor: pointer; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); transition: all .14s;
}
.sd-btn:hover { border-color: var(--text-mute); }
.sd-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.sd-btn-primary:hover { background: var(--brand-red-600); border-color: var(--brand-red-600); }
.sd-btn-ghost { background: transparent; }

/* ---------- Flash ---------- */
.sd-flash { padding: 11px 16px; border-radius: 10px; margin-bottom: 16px; font-weight: 600; border: 1px solid; }
.sd-flash-error { background: #fdecec; border-color: #f4c9c9; color: #9e1b1b; }
.sd-flash-success { background: #e9f7ee; border-color: #bfe6cd; color: #15803d; }

/* ---------- Page heading ---------- */
.sd-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
.sd-page-head h1 { font-size: 1.62rem; }
.sd-page-head .sub { color: var(--text-soft); margin-top: 3px; font-size: .95rem; }
.sd-eyebrow { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--accent); }

/* ---------- Cards ---------- */
.sd-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.sd-card-pad { padding: 18px 20px; }
.sd-card-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--border-soft); }
.sd-card-head h3 { font-size: 1rem; }
.sd-card-head .sd-icon-btn { width: 30px; height: 30px; }

/* ---------- Dashboard grid ---------- */
.sd-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 22px; }
.sd-stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px 18px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.sd-stat .ico { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--sc, var(--accent)); background: color-mix(in srgb, var(--sc, var(--accent)) 13%, transparent); }
.sd-stat .val { font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1; margin-top: 4px; }
.sd-stat .lbl { color: var(--text-soft); font-size: .86rem; font-weight: 600; }
.sd-stat .delta { font-size: .78rem; margin-top: 8px; font-weight: 600; color: var(--text-mute); display: inline-flex; gap: 5px; align-items: center; }
.sd-stat .delta.up { color: #15803d; } .sd-stat .delta.down { color: var(--accent); }

.sd-dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; }
.sd-dash-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 1080px) { .sd-dash-grid { grid-template-columns: 1fr; } }

/* Bar chart */
.sd-bar-list { display: flex; flex-direction: column; gap: 13px; }
.sd-bar-row { display: grid; grid-template-columns: 130px 1fr 34px; align-items: center; gap: 12px; font-size: .88rem; }
.sd-bar-row .nm { color: var(--text-soft); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-bar-track { height: 9px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.sd-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, var(--brand-gold)), var(--accent)); }
.sd-bar-row .ct { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Donut (status) */
.sd-donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sd-donut { --size: 148px; width: var(--size); height: var(--size); border-radius: 50%; flex: none; position: relative; }
.sd-donut::after { content: ""; position: absolute; inset: 22px; background: var(--surface); border-radius: 50%; box-shadow: inset 0 0 0 1px var(--border-soft); }
.sd-donut .center { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; text-align: center; }
.sd-donut .center b { font-family: var(--font-display); font-size: 1.7rem; display: block; line-height: 1; }
.sd-donut .center small { color: var(--text-mute); font-size: .72rem; font-weight: 600; }
.sd-legend { display: flex; flex-direction: column; gap: 7px; font-size: .84rem; }
.sd-legend .li { display: flex; align-items: center; gap: 8px; }
.sd-legend .sw { width: 10px; height: 10px; border-radius: 3px; }
.sd-legend .li .n { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-soft); }

/* Trend sparkline */
.sd-trend { width: 100%; height: 120px; }
.sd-trend .area { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
.sd-trend .line { fill: none; stroke: var(--accent); stroke-width: 2; }
.sd-trend .dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }

/* Workload rows */
.sd-people { display: flex; flex-direction: column; }
.sd-person-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.sd-person-row:last-child { border-bottom: none; }
.sd-person-row .nm { font-weight: 600; font-size: .9rem; }
.sd-person-row .cap { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.sd-cap-track { width: 92px; height: 7px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.sd-cap-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.sd-person-row .ct { font-weight: 700; font-variant-numeric: tabular-nums; width: 20px; text-align: right; }

/* ---------- Ticket list ---------- */
.sd-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.sd-tabs { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
.sd-tab { padding: 6px 14px; border-radius: 8px; font-weight: 600; font-size: .88rem; color: var(--text-soft); cursor: pointer; }
.sd-tab.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.sd-tab .n { color: var(--text-mute); font-weight: 700; margin-left: 5px; }

.sd-tickets { overflow: hidden; }
.sd-trow {
  display: grid; grid-template-columns: 54px 1fr auto; gap: 14px; align-items: center;
  padding: 13px 20px; border-bottom: 1px solid var(--border-soft); transition: background .12s;
}
.sd-trow:last-child { border-bottom: none; }
.sd-trow:hover { background: var(--surface-2); }
.sd-trow .prio-rail { width: 4px; height: 40px; border-radius: 3px; background: var(--pc, var(--text-mute)); }
.sd-trow .tk-main { min-width: 0; }
.sd-trow .tk-num { font-size: .74rem; font-weight: 700; color: var(--text-mute); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.sd-trow .tk-title { font-weight: 600; font-size: .98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-trow .tk-meta { display: flex; align-items: center; gap: 12px; margin-top: 4px; color: var(--text-mute); font-size: .8rem; flex-wrap: wrap; }
.sd-trow .tk-meta span { display: inline-flex; align-items: center; gap: 5px; }
.sd-trow .tk-right { display: flex; align-items: center; gap: 14px; }
.sd-overdue { color: var(--accent); font-weight: 700; }

/* ---------- Ticket view ---------- */
.sd-ticket-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 1120px) { .sd-ticket-layout { grid-template-columns: 1fr; } }

.sd-ticket-header { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.sd-ticket-header .h-main { min-width: 0; flex: 1; }
.sd-ticket-header .num { font-size: .8rem; font-weight: 700; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.sd-ticket-header h1 { font-size: 1.5rem; margin-top: 3px; }
.sd-ticket-header .h-chips { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }

/* Timeline */
.sd-timeline { position: relative; padding-left: 4px; }
.sd-tl-day { text-align: center; margin: 18px 0; position: relative; }
.sd-tl-day span { background: var(--surface-3); color: var(--text-soft); font-size: .74rem; font-weight: 700; padding: 3px 12px; border-radius: 999px; }

.sd-msg { display: flex; gap: 12px; margin-bottom: 16px; }
.sd-msg .who { flex: none; }
.sd-msg .bubble { flex: 1; min-width: 0; background: var(--bubble-in); border: 1px solid var(--border); border-radius: 4px 14px 14px 14px; box-shadow: var(--shadow-sm); }
.sd-msg.is-out { flex-direction: row-reverse; }
.sd-msg.is-out .bubble { background: var(--bubble-out); border-radius: 14px 4px 14px 14px; border-color: color-mix(in srgb, var(--accent) 16%, var(--border)); }
.sd-msg.is-note .bubble { background: var(--bubble-note); border-color: color-mix(in srgb, var(--brand-gold) 40%, var(--border)); border-style: dashed; }
.sd-bubble-head { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--border-soft); font-size: .82rem; flex-wrap: wrap; }
.sd-bubble-head b { font-weight: 700; }
.sd-bubble-head .role { color: var(--text-mute); }
.sd-bubble-head .when { margin-left: auto; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.sd-bubble-head .kindtag { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: var(--kc, var(--text-mute)); background: color-mix(in srgb, var(--kc, var(--text-mute)) 13%, transparent); }
.sd-bubble-body { padding: 12px 15px; font-size: .93rem; color: var(--text); }
.sd-bubble-body p { margin: 0 0 9px; } .sd-bubble-body p:last-child { margin: 0; }
.sd-bubble-body img { max-width: 100%; border-radius: 8px; }

/* Timeline "event" (non-message) — compact centered marker */
.sd-event { display: flex; align-items: center; gap: 11px; margin: 6px 0 6px 46px; color: var(--text-soft); font-size: .85rem; }
.sd-event .ev-ico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--ec, var(--text-mute)); background: color-mix(in srgb, var(--ec, var(--text-mute)) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ec, var(--text-mute)) 26%, transparent); }
.sd-event .ev-when { margin-left: auto; color: var(--text-mute); font-size: .78rem; }
.sd-event b { color: var(--text); font-weight: 700; }

/* Reply composer */
.sd-composer { margin-top: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.sd-composer-tabs { display: flex; border-bottom: 1px solid var(--border-soft); }
.sd-composer-tab { padding: 11px 18px; font-weight: 600; font-size: .9rem; color: var(--text-soft); cursor: pointer; border-bottom: 2px solid transparent; }
.sd-composer-tab.is-active { color: var(--text); border-bottom-color: var(--accent); }
.sd-composer textarea { width: 100%; border: none; outline: none; resize: vertical; min-height: 96px; padding: 14px 16px; background: transparent; color: var(--text); font: inherit; }
.sd-composer-foot { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border-soft); }
.sd-composer-foot .tools { display: flex; gap: 4px; color: var(--text-mute); }

/* Right rail */
.sd-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 74px; }
.sd-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.sd-panel-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); font-weight: 700; font-size: .84rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); }
.sd-panel-head .cnt { margin-left: auto; background: var(--surface-3); color: var(--text-soft); border-radius: 999px; padding: 1px 8px; font-size: .72rem; }
.sd-panel-body { padding: 6px 16px 14px; }
.sd-field { display: grid; grid-template-columns: 100px 1fr; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: .88rem; }
.sd-field:last-child { border-bottom: none; }
.sd-field .k { color: var(--text-mute); font-weight: 600; font-size: .82rem; }
.sd-field .v { font-weight: 600; }

.sd-actor { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.sd-actor .meta { min-width: 0; } .sd-actor .meta b { font-size: .9rem; display: block; }
.sd-actor .meta small { color: var(--text-mute); font-size: .78rem; }
.sd-actor .rl { margin-left: auto; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-mute); }

.sd-asset { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.sd-asset:last-child { border-bottom: none; }
.sd-asset .ai { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.sd-asset .an { font-weight: 700; font-size: .9rem; }
.sd-asset .ad { color: var(--text-mute); font-size: .78rem; margin-top: 2px; }
.sd-asset .ad span { margin-right: 10px; }

.sd-task { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: .88rem; }
.sd-task:last-child { border-bottom: none; }
.sd-task .box { width: 18px; height: 18px; padding: 0; border-radius: 5px; border: 1.5px solid var(--border); flex: none; display: grid; place-items: center; color: transparent; background: var(--surface-2); cursor: pointer; }
.sd-task .box:hover { border-color: #16a34a; }
.sd-task.done .box { background: #16a34a; border-color: #16a34a; color: #fff; }
.sd-task.done .tt { text-decoration: line-through; color: var(--text-mute); }
.sd-task .est { margin-left: auto; color: var(--text-mute); font-size: .78rem; }

.sd-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-tags .tg { font-size: .78rem; font-weight: 600; color: var(--text-soft); background: var(--surface-3); padding: 3px 10px; border-radius: 999px; }

/* SLA meter */
.sd-sla { padding: 4px 0; }
.sd-sla .row { display: flex; justify-content: space-between; font-size: .82rem; margin-bottom: 5px; }
.sd-sla-track { height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.sd-sla-fill { height: 100%; border-radius: 999px; }

/* ---------- Login ---------- */
.sd-login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background:
  radial-gradient(1200px 600px at 70% -10%, color-mix(in srgb, var(--brand-navy) 12%, transparent), transparent),
  var(--canvas); }
.sd-login-card { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.sd-login-top { background: var(--brand-navy); color: #fff; padding: 28px 30px 24px; }
.sd-login-top .mk { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(150deg, var(--brand-red), #c22b2b); display: grid; place-items: center; margin-bottom: 14px; box-shadow: 0 8px 20px -8px rgba(158,27,27,.8); }
.sd-login-top h1 { font-size: 1.4rem; } .sd-login-top p { color: rgba(255,255,255,.66); margin: 5px 0 0; font-size: .92rem; }
.sd-login-body { padding: 26px 30px 30px; display: flex; flex-direction: column; gap: 14px; }
.sd-login-body .field label { font-size: .8rem; font-weight: 700; color: var(--text-soft); display: block; margin-bottom: 5px; }
.sd-login-body input[type=password], .sd-login-body input[type=text] { width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); font: inherit; }
.sd-btn-ms { justify-content: center; padding: 12px; width: 100%; background: var(--brand-navy); color: #fff; border-color: var(--brand-navy); font-size: .98rem; }
.sd-btn-ms:hover { background: #0f1830; border-color: #0f1830; }
.sd-login-sep { display: flex; align-items: center; gap: 12px; color: var(--text-mute); font-size: .78rem; font-weight: 600; }
.sd-login-sep::before, .sd-login-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.sd-login-note { font-size: .8rem; color: var(--text-mute); text-align: center; }

/* ---------- Empty state ---------- */
.sd-empty { text-align: center; padding: 60px 20px; color: var(--text-mute); }
.sd-empty svg { opacity: .4; margin-bottom: 12px; }

/* ---------- Linked asset cards (AM live) ---------- */
@keyframes sd-pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 4px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.sd-asset-card { border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; margin-bottom: 10px; background: var(--surface-2); }
.sd-asset-top { display: flex; gap: 10px; align-items: flex-start; }
.sd-asset-top .ai { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.sd-asset-top .an { font-weight: 700; font-size: .92rem; display: flex; align-items: center; gap: 6px; }
.sd-asset-ext { color: var(--text-mute); display: inline-flex; }
.sd-asset-ext:hover { color: var(--accent); }
.sd-asset-top .ad { color: var(--text-mute); font-size: .78rem; margin-top: 2px; }
.sd-asset-top .ad span { margin-right: 9px; }
.sd-asset-x { flex: none; width: 26px; height: 26px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--text-mute); cursor: pointer; display: grid; place-items: center; }
.sd-asset-x:hover { background: var(--accent-soft); color: var(--accent); }
.sd-asset-live { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sd-asset-live .sd-chip { font-size: .72rem; }
.sd-asset-meta { margin-top: 10px; display: grid; gap: 5px; }
.sd-asset-meta > div { display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; }
.sd-asset-meta .k { color: var(--text-mute); font-weight: 600; flex: none; }
.sd-asset-meta .v { color: var(--text); font-weight: 600; text-align: right; min-width: 0; }

/* Asset typeahead */
.sd-asset-search { position: relative; margin-top: 8px; }
.sd-asset-search-box { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-mute); }
.sd-asset-search-box input { border: none; outline: none; background: none; flex: 1; color: var(--text); font: inherit; font-size: .88rem; }
.sd-asset-results { position: absolute; z-index: 30; left: 0; right: 0; margin-top: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); overflow: hidden; max-height: 320px; overflow-y: auto; }
.sd-asset-hit { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border: none; background: transparent; cursor: pointer; border-bottom: 1px solid var(--border-soft); font: inherit; color: var(--text); }
.sd-asset-hit:last-child { border-bottom: none; }
.sd-asset-hit:hover { background: var(--surface-2); }
.sd-asset-hit .hit-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sd-asset-hit .hit-main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.sd-asset-hit .hit-main b { font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-asset-hit .hit-main small { color: var(--text-mute); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-asset-hit .hit-status { font-size: .72rem; color: var(--text-mute); flex: none; }
.sd-asset-empty { padding: 12px; color: var(--text-mute); font-size: .85rem; text-align: center; }

/* ---------- Resources AJAX loading ---------- */
#sd-resources { transition: opacity .15s; }
#sd-resources.is-loading { opacity: .55; pointer-events: none; }

/* ---------- Toasts ---------- */
#sd-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: min(360px, 90vw); }
.sd-toast { padding: 11px 15px; border-radius: 10px; font-size: .88rem; font-weight: 600; color: #fff; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(8px); transition: opacity .22s, transform .22s; }
.sd-toast.in { opacity: 1; transform: none; }
.sd-toast-success { background: #16794a; }
.sd-toast-error { background: var(--brand-red); }

/* ---------- Consumable lines ---------- */
.sd-consumable-line { display: flex; align-items: flex-start; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.sd-consumable-line:last-of-type { border-bottom: none; }
.sd-consumable-line .cl-qty { flex: none; min-width: 34px; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: #0d9488; background: color-mix(in srgb, #0d9488 12%, transparent); border-radius: 8px; padding: 4px 6px; }
.sd-consumable-line .cl-qty small { font-size: .7rem; opacity: .7; }
.sd-consumable-line .cl-main { flex: 1; min-width: 0; }
.sd-consumable-line .cl-name { font-weight: 600; font-size: .9rem; }
.sd-consumable-line .cl-sub { color: var(--text-mute); font-size: .78rem; margin-top: 2px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sd-consumable-line .cl-target { display: inline-flex; align-items: center; gap: 4px; color: var(--text-soft); font-weight: 600; }
.sd-consumable-line .cl-cost { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.sd-consumable-total { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 2px; margin-top: 4px; border-top: 1px dashed var(--border); font-size: .86rem; }
.sd-consumable-total span { display: inline-flex; align-items: center; gap: 6px; color: var(--text-soft); font-weight: 600; }
.sd-consumable-total b { font-family: var(--font-display); font-size: 1.05rem; }

/* Chosen consumable chip */
.sd-consumable-chosen { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid color-mix(in srgb, #0d9488 30%, var(--border)); background: color-mix(in srgb, #0d9488 7%, transparent); border-radius: 10px; margin-top: 6px; }
.sd-consumable-chosen .cc-main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.sd-consumable-chosen .cc-main b { font-size: .88rem; }
.sd-consumable-chosen .cc-main small { color: var(--text-mute); font-size: .76rem; }
.sd-consumable-chosen .cc-stock { font-size: .74rem; font-weight: 700; color: #0f766e; white-space: nowrap; }
.sd-consumable-chosen .cc-stock.low { color: #d97706; }
.sd-consumable-chosen .cc-clear { flex: none; width: 22px; height: 22px; border-radius: 6px; border: none; background: transparent; color: var(--text-mute); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.sd-consumable-chosen .cc-clear:hover { background: var(--accent-soft); color: var(--accent); }

.sd-consumable-fields { display: flex; flex-direction: column; gap: 11px; margin-top: 11px; }
.sd-consumable-row { display: flex; flex-direction: column; gap: 5px; }
.sd-consumable-row .sd-flabel { font-size: .76rem; }
.sd-consumable-results { position: absolute; z-index: 30; left: 0; right: 0; margin-top: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); overflow: hidden; max-height: 300px; overflow-y: auto; }
.sd-consumable-search { position: relative; }
.sd-consumable-apply { justify-content: center; margin-top: 2px; }

/* Quantity stepper */
.sd-qty { display: flex; align-items: center; gap: 0; }
.sd-qty-btn { width: 34px; height: 36px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; display: grid; place-items: center; }
.sd-qty-btn:first-child { border-radius: 9px 0 0 9px; }
.sd-qty-btn:hover { background: var(--surface-3); }
.sd-qty-input { width: 72px; height: 36px; text-align: center; border-radius: 0 !important; border-left: none; border-right: none; }
.sd-qty-btn + .sd-qty-input { border-left: none; }
.sd-qty .sd-qty-btn[data-step="1"] { border-radius: 0 9px 9px 0; }
.sd-qty-unit { margin-left: 10px; color: var(--text-mute); font-size: .84rem; font-weight: 600; }

/* ---------- Ticket header actions ---------- */
.sd-ticket-header .h-actions { display: flex; gap: 8px; flex: none; align-items: center; }
.sd-btn-mini { padding: 6px 11px; font-size: .84rem; border-radius: 8px; }

/* ---------- Inline editable controls (rail) ---------- */
.sd-il-form { margin: 0; display: inline-flex; width: 100%; justify-content: flex-end; }
.sd-il-select, .sd-il-input {
  font: inherit; font-size: .86rem; font-weight: 600; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 9px; max-width: 100%; cursor: pointer; transition: border-color .14s, box-shadow .14s;
  text-align: right; text-align-last: right;
}
.sd-il-input { cursor: text; text-align: left; text-align-last: left; font-weight: 500; }
.sd-il-select:hover, .sd-il-input:hover { border-color: var(--text-mute); }
.sd-il-select:focus, .sd-il-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); background: var(--surface); }
.sd-field .v .sd-il-select { width: 100%; }
.sd-uip { display: grid; grid-template-columns: 100px 1fr; gap: 10px 10px; align-items: center; }
.sd-uip .k { grid-column: 1; }
input[type="datetime-local"].sd-il-input { min-width: 0; flex: 1; }

/* Mini disclosure editors */
.sd-mini { margin-top: 8px; }
.sd-mini summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; color: var(--accent); padding: 6px 0; }
.sd-mini summary::-webkit-details-marker { display: none; }
.sd-mini[open] summary { color: var(--text-soft); }
.sd-mini-form { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 4px; }
.sd-mini-form .sd-il-input { width: 100%; }

/* Composer note-mode accent */
.sd-composer.is-note-mode { border-color: color-mix(in srgb, var(--brand-gold) 45%, var(--border)); }
.sd-composer.is-note-mode textarea { background: color-mix(in srgb, var(--brand-gold) 6%, transparent); }

/* ---------- Create ticket ---------- */
.sd-newticket { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 20px; align-items: start; }
@media (max-width: 1000px) { .sd-newticket { grid-template-columns: 1fr; } }
.sd-newticket-main { display: flex; flex-direction: column; gap: 18px; }
.sd-newticket-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 74px; }
.sd-newticket textarea.sd-input { resize: vertical; line-height: 1.5; font-size: .95rem; }

/* ---------- Admin / settings ---------- */
.sd-admin-grid { display: grid; grid-template-columns: 224px 1fr; gap: 22px; align-items: start; }
@media (max-width: 820px) { .sd-admin-grid { grid-template-columns: 1fr; } }
.sd-admin-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 74px; }
@media (max-width: 820px) { .sd-admin-nav { position: static; flex-direction: row; flex-wrap: wrap; } }
.sd-admin-navitem { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: 10px; font-weight: 600; font-size: .92rem; color: var(--text-soft); border: 1px solid transparent; }
.sd-admin-navitem:hover { background: var(--surface-2); color: var(--text); }
.sd-admin-navitem.is-active { background: var(--surface); color: var(--accent); border-color: var(--border); box-shadow: var(--shadow-sm); }
.sd-admin-navitem.is-active svg { color: var(--accent); }

.sd-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.sd-form-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--border-soft); }
.sd-form-head h3 { display: flex; align-items: center; gap: 9px; font-size: 1.08rem; }
.sd-form-head p { color: var(--text-soft); font-size: .88rem; margin: 4px 0 0; max-width: 46ch; }
.sd-form-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 18px; }
.sd-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .sd-form-grid { grid-template-columns: 1fr; } }
.sd-form-rule { border: none; border-top: 1px solid var(--border-soft); margin: 2px 0; }
.sd-form-actions { display: flex; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--border-soft); background: var(--surface-2); }

.sd-frow { display: flex; flex-direction: column; gap: 6px; }
.sd-flabel { font-size: .82rem; font-weight: 700; color: var(--text-soft); display: flex; align-items: center; gap: 8px; }
.sd-flabel .req { color: var(--accent); }
.sd-saved { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #15803d; background: color-mix(in srgb, #16a34a 14%, transparent); padding: 1px 7px; border-radius: 999px; }
.sd-unset { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-mute); background: var(--surface-3); padding: 1px 7px; border-radius: 999px; }
.sd-input { width: 100%; padding: 10px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); font: inherit; font-size: .94rem; transition: border-color .14s, box-shadow .14s; }
.sd-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); background: var(--surface); }
.sd-input[readonly] { color: var(--text-soft); cursor: text; }
.sd-help { font-size: .8rem; color: var(--text-mute); margin: 0; line-height: 1.45; }
.sd-help code, .sd-callout code { background: var(--surface-3); padding: 1px 5px; border-radius: 4px; font-size: .82em; }

.sd-frow-toggle { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 0; }
.sd-switch { position: relative; display: inline-block; width: 44px; height: 26px; flex: none; cursor: pointer; }
.sd-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.sd-switch-track { position: absolute; inset: 0; background: var(--surface-3); border: 1px solid var(--border); border-radius: 999px; transition: background .16s, border-color .16s; }
.sd-switch-track::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .16s; }
.sd-switch input:checked + .sd-switch-track { background: var(--accent); border-color: var(--accent); }
.sd-switch input:checked + .sd-switch-track::before { transform: translateX(18px); }
.sd-switch input:focus-visible + .sd-switch-track { box-shadow: 0 0 0 3px var(--ring); }

.sd-copy { display: flex; gap: 8px; }
.sd-copy .sd-input { font-family: var(--font-body); }
.sd-copy-btn { flex: none; padding: 10px 15px; }

.sd-status-pill { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; padding: 4px 11px; border-radius: 999px; border: 1px solid; }
.sd-status-pill .dot { width: 7px; height: 7px; border-radius: 50%; }
.sd-status-pill.ok { color: #15803d; background: color-mix(in srgb, #16a34a 12%, transparent); border-color: color-mix(in srgb, #16a34a 30%, transparent); }
.sd-status-pill.ok .dot { background: #16a34a; }
.sd-status-pill.off { color: var(--text-mute); background: var(--surface-3); border-color: var(--border); }
.sd-status-pill.off .dot { background: var(--text-mute); }

.sd-callout { display: flex; gap: 12px; padding: 14px 16px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 12px; font-size: .88rem; color: var(--text-soft); }
.sd-callout svg { color: var(--accent); flex: none; margin-top: 1px; }
.sd-callout b { color: var(--text); }

.sd-diag { display: flex; flex-direction: column; }
.sd-diag-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); font-size: .9rem; }
.sd-diag-row:last-child { border-bottom: none; }
.sd-diag-row .k { color: var(--text-soft); font-weight: 600; }
.sd-diag-row .v { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .sd-sidebar { position: fixed; left: 0; top: 0; z-index: 50; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow-lg); }
  .sd-shell.nav-open .sd-sidebar { transform: none; }
  .sd-menu-toggle { display: grid; }
  .sd-topbar-title { display: none; }
  .sd-user-meta { display: none; }
  .sd-nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 40; }
}