/* ===========================================================
   CORTEC IT — Ticketing Portal theme (dark NOC / control-room)
   Brand: black + orange. Adapted from docs/claude-design/tokens.css
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=IBM+Plex+Mono:wght@400;500;600&family=Chakra+Petch:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  --orange: #F7941E;
  --orange-bright: #FFA938;
  --orange-deep: #E07D0A;
  --orange-soft: rgba(247,148,30,0.13);
  --orange-glow: rgba(247,148,30,0.30);
  /* Readable text/detail colour to sit ON the accent. Near-black works on the
     bright default orange; BrandingCss flips it to white for dark accents. */
  --on-accent: #150d00;

  --bg-0: #0a0c0f;
  --bg-1: #0f1216;
  --bg-2: #14181d;
  --bg-3: #1a1f26;
  --bg-4: #222831;

  --line: #232932;
  --line-2: #2e353f;
  --line-3: #3a424d;

  --text: #eef1f4;
  --text-2: #9aa4af;
  --text-3: #626c77;
  --text-4: #444c55;

  --p-critical: #FF4D5E;
  --p-high: #F7941E;
  --p-medium: #FBBF4D;
  --p-low: #6E7A87;

  --s-open: #4DA3FF;
  --s-progress: #B388FF;
  --s-pending: #FBBF4D;
  --s-resolved: #34D399;
  --s-closed: #6E7A87;

  --sla-ok: #34D399;
  --sla-warn: #FBBF4D;
  --sla-risk: #FF4D5E;

  --t-critical: rgba(255,77,94,0.14);
  --t-high: rgba(247,148,30,0.14);
  --t-medium: rgba(251,191,77,0.14);
  --t-low: rgba(110,122,135,0.16);
  --t-open: rgba(77,163,255,0.14);
  --t-progress: rgba(179,136,255,0.16);
  --t-pending: rgba(251,191,77,0.14);
  --t-resolved: rgba(52,211,153,0.14);

  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 14px;

  --sh-1: 0 1px 2px rgba(0,0,0,0.4);
  --sh-2: 0 6px 20px rgba(0,0,0,0.45);
  --sh-orange: 0 6px 24px rgba(247,148,30,0.28);

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Public Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

html, body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { font-family: var(--font-display); letter-spacing: -0.01em; }

a, .btn-link { color: var(--orange); text-decoration: none; }
a:hover { color: var(--orange-bright); }

/* bare <button> elements default to black text — inherit the dark theme instead
   (themed .btn / .btn-primary set their own colour and keep it via specificity) */
button { color: inherit; }

::selection { background: var(--orange-glow); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 2px solid var(--bg-0); }
::-webkit-scrollbar-thumb:hover { background: var(--line-3); }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
h1:focus, h1:focus-visible { outline: none; }

.kicker {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: var(--text-3);
}
.mono { font-family: var(--font-mono); }

@keyframes pulse-dot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp .3s ease both; }

/* ---------- Buttons (override Bootstrap) ---------- */
.btn {
  border-radius: var(--r-sm);
  font-weight: 600;
  font-family: var(--font-body);
  transition: all .15s ease;
}
.btn-primary {
  background: var(--orange);
  border: none;
  color: var(--on-accent);
  font-weight: 700;
}
.btn-primary:hover, .btn-primary:focus { background: var(--orange-bright); color: var(--on-accent); box-shadow: var(--sh-orange); }
.btn-outline-secondary {
  background: transparent;
  color: var(--orange);
  border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent);
}
.btn-outline-secondary:hover { background: var(--orange-soft); color: var(--orange-bright); border-color: var(--orange); }
.btn-secondary, .btn-solid {
  background: var(--bg-3); color: var(--text); border: 1px solid var(--line-2);
}
.btn-secondary:hover { background: var(--bg-4); color: var(--text); border-color: var(--line-3); }
.btn-close { filter: invert(1) grayscale(1) brightness(1.4); }

/* ---------- Cards ---------- */
.card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text);
}
.card-header {
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.card-footer { background: var(--bg-1); border-top: 1px solid var(--line); color: var(--text-3); }
.bg-info-subtle { background: var(--t-open) !important; color: var(--text) !important; }
.border-info { border-color: color-mix(in srgb, var(--s-open) 30%, transparent) !important; }
.border-secondary { border-color: var(--line-2) !important; }

/* ---------- Tables ---------- */
.table {
  color: var(--text);
  border-color: var(--line);
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
}
.table > :not(caption) > * > * { background: transparent; color: var(--text); border-bottom-color: var(--line); padding: 13px 14px; }
.table thead th {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  color: var(--text-3);
  border-bottom: 1px solid var(--line-2);
  font-weight: 600;
}
.table-hover > tbody > tr:hover > * { background: var(--bg-3) !important; color: var(--text); }
.table a { color: var(--text); font-weight: 600; }
.table a:hover { color: var(--orange); }

/* ---------- Forms ---------- */
.form-control, .form-select, textarea.form-control {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  color: var(--text);
  border-radius: var(--r-sm);
}
.form-control:focus, .form-select:focus {
  background: var(--bg-1);
  border-color: var(--orange);
  color: var(--text);
  box-shadow: 0 0 0 2px var(--orange-soft);
}
.form-control::placeholder { color: var(--text-3); }
/* Read-only / locked fields (e.g. sign-in email) stay legible instead of the
   browser's dimmed default. */
.form-control:disabled, .form-control[readonly],
.form-select:disabled {
  color: var(--text-2); background: var(--bg-2);
  cursor: default; opacity: 1; -webkit-text-fill-color: var(--text-2);
}
.form-select option { background: var(--bg-2); color: var(--text); }
.form-label { color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.form-floating > label { color: var(--text-3); }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--text-3); }
.form-check-input { background-color: var(--bg-3); border-color: var(--line-3); }
.form-check-input:checked { background-color: var(--orange); border-color: var(--orange); }
.form-check-label { color: var(--text-2); }
.validation-message, .text-danger { color: var(--p-critical) !important; }
.invalid { outline: 1px solid var(--p-critical); }

/* ---------- Alerts ---------- */
.alert { border-radius: var(--r-md); border: 1px solid var(--line); }
.alert-info { background: var(--t-open); color: var(--text); border-color: color-mix(in srgb, var(--s-open) 26%, transparent); }
.alert-warning { background: var(--t-medium); color: var(--text); border-color: color-mix(in srgb, var(--p-medium) 30%, transparent); }
.text-muted { color: var(--text-3) !important; }
.text-success { color: var(--s-resolved) !important; }

/* ---------- Pills (status / priority) ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  border: 1px solid transparent;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.np::before { display: none; }
.pill-open      { color: var(--s-open);     background: var(--t-open);     border-color: color-mix(in srgb, var(--s-open) 26%, transparent); }
.pill-new       { color: var(--text-2);     background: var(--bg-4);       border-color: var(--line-2); }
.pill-progress  { color: var(--s-progress); background: var(--t-progress); border-color: color-mix(in srgb, var(--s-progress) 26%, transparent); }
.pill-pending   { color: var(--s-pending);  background: var(--t-pending);  border-color: color-mix(in srgb, var(--s-pending) 26%, transparent); }
.pill-resolved  { color: var(--s-resolved); background: var(--t-resolved); border-color: color-mix(in srgb, var(--s-resolved) 26%, transparent); }
.pill-closed    { color: var(--s-closed);   background: var(--t-low);      border-color: var(--line-2); }
.pill-critical  { color: var(--p-critical); background: var(--t-critical); border-color: color-mix(in srgb, var(--p-critical) 30%, transparent); }
.pill-high      { color: var(--p-high);     background: var(--t-high);     border-color: color-mix(in srgb, var(--p-high) 30%, transparent); }
.pill-medium    { color: var(--p-medium);   background: var(--t-medium);   border-color: color-mix(in srgb, var(--p-medium) 30%, transparent); }
.pill-low       { color: var(--p-low);      background: var(--t-low);      border-color: var(--line-2); }
.pill-prio { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; }

/* ---------- Cortec logo wordmark ---------- */
.cortec-logo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; user-select: none; }
.cortec-logo .wordmark {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  letter-spacing: -0.02em; display: flex; gap: 4px;
}
.cortec-logo .wordmark .c1 { color: var(--text); }
.cortec-logo .wordmark .c2 { color: var(--orange); }

/* ---------- Org pill in sidebar ---------- */
.org-pill {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.org-pill .icon {
  width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center;
  background: var(--orange-soft); color: var(--orange); flex-shrink: 0;
}

/* ---------- Stat cards ---------- */
.stat-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; }
.stat-icon { width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center; font-size: 20px; }
.stat-value { font-family: var(--font-display); font-size: 34px; font-weight: 700; margin-top: 14px; line-height: 1; }
.stat-label { font-size: 13px; color: var(--text-2); margin-top: 6px; }

/* ---------- Ticket rows ---------- */
.ticket-row {
  display: grid; grid-template-columns: 4px 1fr auto; gap: 16px; align-items: center;
  padding: 15px 18px 15px 16px; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-md); transition: all .15s; text-decoration: none; color: inherit;
}
.ticket-row:hover { border-color: var(--line-2); background: var(--bg-3); color: inherit; }
.ticket-row .bar { width: 4px; height: 38px; border-radius: 3px; }
.ticket-row .subj { font-size: 14.5px; font-weight: 600; color: var(--text); }
.ticket-row .meta { display: flex; align-items: center; gap: 14px; margin-top: 6px; color: var(--text-3); font-size: 12.5px; }

/* priority left-bar colors */
.bar-critical { background: var(--p-critical); }
.bar-high { background: var(--p-high); }
.bar-medium { background: var(--p-medium); }
.bar-low { background: var(--p-low); }

/* ---------- Chat ---------- */
.chat-thread { display: flex; flex-direction: column; gap: 16px; max-height: 460px; overflow-y: auto; padding: 4px; }
.chat-row { display: flex; gap: 12px; }
.chat-row.mine { flex-direction: row-reverse; }
.chat-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 13px;
  background: color-mix(in srgb, var(--s-open) 22%, var(--bg-3)); color: var(--s-open);
  border: 1px solid color-mix(in srgb, var(--s-open) 35%, transparent);
}
.chat-row.mine .chat-avatar { background: color-mix(in srgb, var(--orange) 22%, var(--bg-3)); color: var(--orange); border-color: color-mix(in srgb, var(--orange) 35%, transparent); }
.chat-col { max-width: 78%; display: flex; flex-direction: column; }
.chat-row.mine .chat-col { align-items: flex-end; }
.chat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 12px; }
.chat-name { font-weight: 700; color: var(--text); font-size: 13px; }
.chat-time { color: var(--text-3); }
.chat-bubble {
  padding: 11px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.55;
  background: var(--bg-3); border: 1px solid var(--line); border-top-left-radius: 3px;
  white-space: pre-wrap; color: var(--text);
}
.chat-row.mine .chat-bubble {
  background: color-mix(in srgb, var(--orange) 14%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--orange) 24%, transparent);
  border-top-left-radius: 12px; border-top-right-radius: 3px;
}
.chat-bubble.note {
  background: var(--t-medium); border-color: color-mix(in srgb, var(--p-medium) 30%, transparent);
}
.note-tag {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 10px; font-weight: 700; color: var(--p-medium);
  background: color-mix(in srgb, var(--p-medium) 18%, transparent); padding: 1px 6px; border-radius: 4px;
}
.cortec-tag {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 10px; font-weight: 700; color: var(--orange);
  background: var(--orange-soft); padding: 1px 7px; border-radius: 4px;
}

/* ---------- Meta rows ---------- */
.meta-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.meta-row:last-child { border-bottom: none; }
.meta-row .k { font-size: 12.5px; color: var(--text-3); }
.meta-row .v { font-size: 13px; font-weight: 600; color: var(--text); text-align: right; }

/* ---------- Service banner ---------- */
.service-banner {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--t-resolved), transparent 60%);
  border: 1px solid color-mix(in srgb, var(--s-resolved) 26%, transparent);
}
/* Critical work open: the banner turns amber instead of the calm green, so a
   customer with a live incident isn't shown a reassuring colour (CERT-54). */
.service-banner.is-attention { border-color: color-mix(in srgb, var(--sla-risk) 45%, transparent); background: color-mix(in srgb, var(--sla-risk) 8%, transparent); }
.service-banner.is-attention .dot { background: var(--sla-risk); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sla-risk) 25%, transparent); }
.service-banner .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--s-resolved); box-shadow: 0 0 0 4px color-mix(in srgb, var(--s-resolved) 25%, transparent); }

.blazor-error-boundary { background: #b32121; padding: 1rem; color: white; border-radius: var(--r-sm); }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* =========================================================================
   Phase 1.5 — dashboards, queue, KB, management
   ========================================================================= */

.client-dot { display:inline-block; width:8px; height:8px; border-radius:2px; flex-shrink:0; }
/* nav icons are injected as raw markup, so size them globally (scoped CSS can't reach them).
   Values mirror the design mockup: 18px icons, 10px/13px padding, 12px gap. */
.nav-link { gap:12px !important; padding:10px 13px !important; font-size:13.5px; position:relative; }
.nav-link svg { width:18px !important; height:18px !important; flex-shrink:0; stroke-width:2; }
/* active highlight (kept global so it never depends on the scoped bundle loading) */
.sidebar .nav-link.active { background:color-mix(in srgb, var(--orange) 15%, transparent); color:var(--orange); }
.sidebar .nav-link.active svg { color:var(--orange); }
.sidebar .nav-link.active::before {
    content:""; position:absolute; left:0; top:7px; bottom:7px;
    width:3px; border-radius:0 3px 3px 0; background:var(--orange);
}
.cx-avatar { border-radius:50%; flex-shrink:0; display:inline-grid; place-items:center; font-family:var(--font-display); font-weight:700; letter-spacing:.02em; }
.badge-count { font-size:11px; font-family:var(--font-mono); padding:1px 7px; border-radius:20px; background:var(--bg-4); color:var(--text-3); }
.tag-chip { padding:2px 8px; border-radius:6px; font-size:11px; color:var(--text-2); background:var(--bg-4); border:1px solid var(--line); }

/* ---- stat grid + cards ---- */
.stat-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
@media (max-width:900px){ .stat-grid { grid-template-columns:repeat(2,1fr); } }

/* ---- segmented control ---- */
.seg { display:inline-flex; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-sm); padding:3px; gap:2px; }
.seg-btn { padding:6px 13px; border-radius:5px; font-size:13px; font-weight:600; color:var(--text-3); transition:all .15s; background:none; border:none; cursor:pointer; }
.seg-btn.active { background:var(--bg-4); color:var(--text); box-shadow:var(--sh-1); }

/* compact filter dropdown that matches the segmented control height/look */
.filter-select {
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    height:36px; padding:0 34px 0 13px; font-size:13px; font-weight:600; cursor:pointer;
    background:var(--bg-1); border:1px solid var(--line); color:var(--text); border-radius:var(--r-sm);
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%239aa4af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
    background-repeat:no-repeat; background-position:right 11px center;
}
.filter-select:hover { border-color:var(--line-2); }
.filter-select:focus { outline:none; border-color:var(--line-3); }

/* ---- tabs ---- */
.tabbar { display:inline-flex; gap:4px; background:var(--bg-1); padding:4px; border-radius:var(--r-sm); border:1px solid var(--line); }
.tab { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:6px; font-size:13px; font-weight:600; color:var(--text-3); transition:all .15s; background:none; border:none; cursor:pointer; }
.tab.active { background:var(--bg-4); color:var(--text); }
.tab-count { font-size:11px; font-family:var(--font-mono); padding:1px 6px; border-radius:20px; background:var(--bg-3); color:var(--text-3); }
.tab.active .tab-count { background:var(--orange); color:var(--on-accent); }
.minichip { padding:4px 10px; border-radius:6px; font-size:12px; font-weight:600; color:var(--text-3); background:var(--bg-2); border:1px solid var(--line); }
.minichip.active { background:var(--orange-soft); color:var(--orange); border-color:color-mix(in srgb, var(--orange) 40%, transparent); }

/* ---- inline search ---- */
.search-inline { display:flex; align-items:center; gap:9px; padding:8px 13px; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--text-3); }
.search-inline input { background:none; border:none; outline:none; font-size:13px; width:100%; color:var(--text); }

/* Queue selector dropdown + clickable grid rows */
.queue-select { position:relative; display:inline-flex; align-items:center; }
.queue-select > svg { position:absolute; left:13px; color:var(--text-2); pointer-events:none; }
.queue-select select {
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    background:var(--bg-2); border:1px solid var(--line); color:var(--text);
    border-radius:var(--r-sm); height:40px; padding:0 34px 0 38px; min-width:190px;
    font-size:13.5px; font-weight:600; cursor:pointer;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%239aa4af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
    background-repeat:no-repeat; background-position:right 12px center;
}
.queue-select select:hover { border-color:var(--line-2); }

/* Ticket-queue data grid */
.tq-card { background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.tq-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.tq-table th {
    text-align:left; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em;
    font-size:10px; color:var(--text-3); font-weight:600; padding:12px 16px; border-bottom:1px solid var(--line);
}
.tq-table td { padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tq-table tbody tr { cursor:pointer; transition:background .12s; }
.tq-table tbody tr:hover { background:var(--bg-3); }
.tq-table tbody tr:last-child td { border-bottom:none; }
/* Compact row density — persisted per engineer (see Queue.razor). */
.tq-table.tq-compact th { padding:8px 16px; }
.tq-table.tq-compact td { padding:6px 16px; }
.tq-table.tq-compact .tq-title { font-size:12.5px; }
.tq-table.tq-compact .tq-subj { gap:9px; }
.tq-table.tq-compact .tq-subj .ref { margin-top:1px; }
.tq-table.tq-compact .tq-bar { min-height:22px; }
.tq-col-ticket { width:auto; }

/* Custom-fields admin grid: compact on/off toggle */
.cf-switch { position:relative; display:inline-block; width:36px; height:20px; cursor:pointer; }
.cf-switch input { opacity:0; width:0; height:0; position:absolute; margin:0; }
.cf-switch > span { position:absolute; inset:0; background:var(--line-3); border-radius:999px; transition:background .15s; }
.cf-switch > span::before { content:''; position:absolute; width:14px; height:14px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .15s; }
.cf-switch input:checked + span { background:var(--orange); }
.cf-switch input:checked + span::before { transform:translateX(16px); }
.cf-grid th { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em; font-size:10px; color:var(--text-3); }
.tq-col-client { width:190px; }
.tq-col-status { width:120px; }
.tq-col-pri    { width:104px; }
.tq-col-sla    { width:118px; }
.tq-col-threads{ width:86px; }
.tq-col-owner  { width:80px; }
.tq-threads { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--text-2); }
.tq-threads svg { color:var(--text-3); }
.tq-threads.is-empty { color:var(--text-4); }
.tq-threads.is-empty svg { color:var(--text-4); }
.tq-subj { display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none; }
.tq-subj:hover { color:inherit; }
.tq-subj:hover .tq-title { color:var(--orange); }
.tq-bar { width:3px; align-self:stretch; min-height:30px; border-radius:3px; flex-shrink:0; }
.tq-title { font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tq-subj .ref { font-size:11px; color:var(--text-3); margin-top:2px; font-family:var(--font-mono); }
.tq-client { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.tq-owner-empty { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; border:1px dashed var(--line-3); color:var(--text-3); font-size:15px; }

/* ---- SLA clock ---- */
.sla-clock { display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:600; white-space:nowrap; }
.sla-ok { color:var(--sla-ok); }
.sla-soon { color:var(--orange); }
.sla-risk { color:var(--sla-risk); }
.sla-breach { color:var(--sla-breach); }
/* On hold: waiting on someone else, so it reads as neutral rather than
   urgent — an engineer can't act on it and shouldn't be nagged (CERT-55). */
.sla-paused { color: var(--text-3); background: color-mix(in srgb, var(--text-3) 12%, transparent); border-color: color-mix(in srgb, var(--text-3) 26%, transparent); }

/* ---- donut ---- */
.donut { position:relative; display:grid; place-items:center; }
.donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.donut-value { font-family:var(--font-display); font-size:26px; font-weight:700; }
.donut-cap { font-size:11.5px; color:var(--text-3); }

/* ---- priority queue rows ---- */
.pq-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--r-sm); transition:background .15s; color:inherit; }
.pq-row:hover { background:var(--bg-3); color:inherit; }
.pq-bar { width:4px; align-self:stretch; min-height:30px; border-radius:3px; flex-shrink:0; }
.pq-subj { font-size:13.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pq-meta { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-3); margin-top:2px; }
.unassigned-dot { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; border:1px dashed var(--line-3); color:var(--text-3); font-size:16px; flex-shrink:0; }

/* ---- category bars ---- */
.catbar-row { display:flex; align-items:center; gap:10px; }
.catbar-ic { color:var(--text-2); font-size:15px; display:grid; place-items:center; width:18px; }
.catbar-label { font-size:12.5px; color:var(--text-2); flex:0 0 150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.catbar-track { flex:1; height:8px; background:var(--bg-4); border-radius:6px; overflow:hidden; }
.catbar-fill { display:block; height:100%; background:var(--orange); border-radius:6px; }
.catbar-num { font-size:12px; color:var(--text-2); flex:0 0 34px; text-align:right; }

/* ---- ops wall ---- */
.opswall-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
@media (max-width:900px){ .opswall-stats { grid-template-columns:repeat(2,1fr); } }
.ow-tile { background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); padding:20px; text-align:center; }
.ow-val { font-family:var(--font-display); font-size:38px; font-weight:700; line-height:1; }
.ow-lbl { font-size:11px; color:var(--text-3); text-transform:uppercase; letter-spacing:.1em; margin-top:8px; }
.health-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.health-cell { display:flex; align-items:center; gap:9px; }

/* ---- KB ---- */
.kb-mini { display:flex; gap:12px; padding:11px 10px; border-radius:var(--r-sm); transition:background .15s; color:inherit; }
.kb-mini:hover { background:var(--bg-3); color:inherit; }
.kb-mini + .kb-mini { border-top:1px solid var(--line); }
.kb-mini-ic { width:32px; height:32px; border-radius:8px; display:grid; place-items:center; background:var(--bg-4); color:var(--text-2); flex-shrink:0; font-size:16px; }
.kb-mini-title { font-size:13.5px; font-weight:600; color:var(--text); line-height:1.35; }
.kb-hero { text-align:center; padding:32px 20px 8px; background:radial-gradient(600px 220px at 50% 0, var(--orange-soft), transparent 70%); border-radius:var(--r-lg); }
.kb-search { max-width:640px; margin:0 auto; display:flex; align-items:center; gap:12px; padding:14px 18px; background:var(--bg-2); border:1px solid var(--line-2); border-radius:999px; color:var(--text-3); }
.kb-search input { background:none; border:none; outline:none; font-size:14px; width:100%; color:var(--text); }
.chip { padding:8px 16px; border-radius:999px; font-size:13px; font-weight:600; color:var(--text-2); background:var(--bg-2); border:1px solid var(--line); }
.chip.sel { background:var(--orange); color:var(--on-accent); border-color:var(--orange); }
.kb-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:800px){ .kb-grid { grid-template-columns:1fr; } }
.kb-card { display:flex; gap:14px; padding:18px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); transition:all .15s; color:inherit; }
.kb-card:hover { border-color:var(--line-2); background:var(--bg-3); color:inherit; }
.kb-card-ic { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:var(--bg-4); color:var(--text-2); flex-shrink:0; font-size:18px; }
.kb-card-title { font-size:14.5px; font-weight:600; color:var(--text); margin-bottom:6px; }

/* ---- new request tiles ---- */
.tile-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:800px){ .tile-grid { grid-template-columns:repeat(2,1fr); } }
.tile { display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 10px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); transition:all .15s; }
.tile:hover { border-color:var(--line-2); }
.tile.sel { border-color:var(--orange); background:var(--orange-soft); }
.tile-ic { font-size:22px; color:var(--text-2); display:grid; place-items:center; }
.tile.sel .tile-ic { color:var(--orange); }
.tile-label { font-size:12.5px; font-weight:600; text-align:center; color:var(--text); }
.urgency-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:800px){ .urgency-grid { grid-template-columns:repeat(2,1fr); } }
.urgency { display:flex; flex-direction:column; gap:6px; align-items:flex-start; padding:14px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); text-align:left; transition:all .15s; }
.urgency:hover { border-color:var(--line-2); }
.urgency.sel { border-color:var(--orange); background:var(--orange-soft); }
.dropzone { border:1.5px dashed var(--line-3); border-radius:var(--r-md); padding:28px; text-align:center; display:flex; flex-direction:column; gap:6px; align-items:center; color:var(--text-2); }

/* ---- QuickGrid ---- */
.cx-grid ::deep table, .cx-grid table { width:100%; border-collapse:collapse; }
.cx-grid ::deep th, .cx-grid th { text-align:left; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-size:10.5px; color:var(--text-3); padding:10px 12px; border-bottom:1px solid var(--line-2); font-weight:600; }
.cx-grid ::deep td, .cx-grid td { padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.cx-grid ::deep tbody tr:hover, .cx-grid tbody tr:hover { background:var(--bg-3); }
.cx-grid ::deep .col-subj { width:46%; }
.grid-subj { display:flex; align-items:stretch; gap:10px; color:inherit; }
.grid-subj:hover { color:inherit; }
.grid-subj .pq-bar { min-height:32px; }
.cx-grid ::deep .paginator, .cx-grid .paginator { color:var(--text-2); font-size:13px; }

/* ---- kanban ---- */
.kanban { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; align-items:start; }
@media (max-width:1100px){ .kanban { grid-template-columns:repeat(2,1fr); } }
.kan-col { background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-md); }
.kan-head { display:flex; justify-content:space-between; align-items:center; padding:12px; border-bottom:1px solid var(--line); }
.kan-body { padding:10px; display:flex; flex-direction:column; gap:8px; min-height:60px; }
.kan-card { display:block; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:11px; transition:all .15s; color:inherit; }
.kan-card:hover { border-color:var(--line-2); background:var(--bg-3); color:inherit; }

/* ---- Cortex AI mascot ---- */
.cortex-mark {
    display:inline-grid; place-items:center; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg, var(--orange-bright), var(--orange-deep));
    color:var(--on-accent); box-shadow:0 0 12px color-mix(in srgb, var(--orange) 55%, transparent);
}
.cortex-chip {
    display:inline-flex; align-items:center; gap:7px; padding:3px 11px 3px 4px; border-radius:999px;
    background:var(--orange-soft); color:var(--orange); border:1px solid color-mix(in srgb, var(--orange) 30%, transparent);
    font-family:var(--font-display); font-weight:700; font-size:11.5px; letter-spacing:.04em;
}
.cortex-chip .cortex-mark { width:18px; height:18px; }
.cortex-card { background:linear-gradient(150deg, var(--orange-soft), transparent 70%); border-color:color-mix(in srgb, var(--orange) 22%, var(--line)); }
.cortex-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px; border-radius:var(--r-md); background:linear-gradient(120deg, var(--orange-soft), transparent 80%); border:1px solid color-mix(in srgb, var(--orange) 22%, var(--line)); }

/* Cortex suggested-reply banner above the composer */
.cortex-suggest-bar {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 12px; margin-bottom:8px; border-radius:var(--r-sm); font-size:12.5px; color:var(--text-2);
  background:linear-gradient(120deg, var(--orange-soft), transparent 85%);
  border:1px solid color-mix(in srgb, var(--orange) 22%, var(--line));
}
.cortex-suggest-bar .btn-close { font-size:11px; flex-shrink:0; }
.cortex-thinking { color:var(--text-3); animation:cortexPulse 1.4s ease-in-out infinite; }
@keyframes cortexPulse { 0%,100% { opacity:.55; } 50% { opacity:1; } }
textarea.is-suggestion { border-color:color-mix(in srgb, var(--orange) 35%, var(--line-2)); background:color-mix(in srgb, var(--orange) 5%, var(--bg-1)); }

/* Composer input: comfortable height that scrolls internally instead of needing a manual drag */
textarea.chat-input { min-height:140px; max-height:300px; overflow-y:auto; resize:vertical; line-height:1.5; }

/* ---- management rows ---- */
.org-row { display:flex; align-items:center; gap:11px; width:100%; padding:9px 11px; border-radius:var(--r-sm); transition:background .15s; background:transparent; }
.org-row:hover { background:var(--bg-3); }
.org-row.sel { background:var(--orange-soft); }

.ga-badge { font-size:9.5px; font-weight:700; color:var(--orange); background:var(--orange-soft); border:1px solid color-mix(in srgb, var(--orange) 30%, transparent); padding:1px 6px; border-radius:4px; text-transform:uppercase; letter-spacing:0.04em; margin-left:6px; vertical-align:middle; white-space:nowrap; }
.spec-row { transition:background .12s; }
.spec-row:hover { background:var(--bg-3); }

/* ---------- Service catalogue ---------- */
.cat-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
@media (max-width:900px){ .cat-grid { grid-template-columns:1fr; } }
.cat-card { display:flex; flex-direction:column; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); padding:20px; cursor:pointer; transition:border-color .14s, transform .14s; text-decoration:none; color:inherit; }
.cat-card:hover { border-color:color-mix(in srgb, var(--orange) 40%, transparent); transform:translateY(-2px); color:inherit; }

/* ---------- Toggle switch ---------- */
.cx-toggle { width:42px; height:24px; border-radius:20px; background:var(--bg-4); border:none; position:relative; transition:background .18s; flex-shrink:0; cursor:pointer; padding:0; }
.cx-toggle.on { background:var(--orange); }
.cx-toggle span { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--text-2); transition:left .18s, background .18s; }
.cx-toggle.on span { left:21px; background:var(--on-accent); }

/* ---------- Ticket detail workspace ---------- */
.td-topbar { display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.td-back { display:inline-flex; align-items:center; gap:6px; color:var(--text-3); font-size:13px; font-weight:600; text-decoration:none; }
.td-back:hover { color:var(--text); }
.td-meta { display:flex; align-items:center; gap:16px; margin-top:9px; font-size:12.5px; color:var(--text-3); flex-wrap:wrap; }
.td-meta .it { display:inline-flex; align-items:center; gap:6px; }
.td-support { display:flex; align-items:center; gap:12px; margin:16px 0 18px; padding:11px 14px; border-radius:var(--r-sm); font-size:12.5px;
    background:color-mix(in srgb, var(--sla-ok) 9%, var(--bg-2)); border:1px solid color-mix(in srgb, var(--sla-ok) 26%, transparent); }
.td-support .ic { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex-shrink:0;
    background:color-mix(in srgb, var(--sla-ok) 18%, transparent); color:var(--sla-ok); }
.td-rail-card { background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); padding:15px; }
.td-reqchip { display:flex; align-items:center; gap:8px; margin-top:12px; padding:9px 12px; background:var(--bg-1); border-radius:var(--r-sm); border:1px solid var(--line); }

/* ---------- Email-style ticket thread ---------- */
.mail-thread { display:flex; flex-direction:column; gap:14px; }
.mail-msg { background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.mail-msg.outbound { border-color:color-mix(in srgb, var(--orange) 22%, var(--line)); }
.mail-msg.note { background:color-mix(in srgb, var(--p-medium) 7%, var(--bg-2)); border-color:color-mix(in srgb, var(--p-medium) 26%, transparent); }
.mail-head { display:flex; align-items:center; gap:11px; padding:11px 15px; border-bottom:1px solid var(--line); }
.mail-head .nm { font-size:13.5px; font-weight:600; }
.mail-who { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:1px 7px; border-radius:4px; white-space:nowrap; }
.mail-who.client { color:var(--s-open); background:var(--t-open); }
.mail-who.cortec { color:var(--orange); background:var(--orange-soft); }
.mail-who.note { color:var(--p-medium); background:color-mix(in srgb, var(--p-medium) 14%, transparent); }
.mail-time { margin-left:auto; font-size:11px; color:var(--text-3); white-space:nowrap; }
.mail-body { padding:14px 16px; font-size:13.5px; line-height:1.6; color:var(--text); white-space:pre-wrap; }

/* ---------- Raised-by header ---------- */
.raised-by { display:flex; align-items:center; gap:13px; padding:13px 16px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:16px; }
.raised-by .rb-main { flex:1; min-width:0; }
.raised-by .rb-name { font-size:14px; font-weight:600; }
.raised-by .rb-sub { font-size:12px; color:var(--text-3); margin-top:1px; }
.raised-by .rb-meta { text-align:right; font-size:11.5px; color:var(--text-3); }

/* ---------- Ticket forms / checklists ---------- */
.tform { border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; margin-bottom:12px; }
.tform-head { display:flex; align-items:center; gap:10px; padding:11px 15px; background:var(--bg-1); border-bottom:1px solid var(--line); }
.tform-head .nm { font-size:13.5px; font-weight:700; font-family:var(--font-display); flex:1; }
.tform-body { padding:14px 15px; display:flex; flex-direction:column; gap:13px; }
.tform-field .lbl { font-size:12.5px; font-weight:600; margin-bottom:5px; display:block; }
.tform-field .req { color:var(--p-critical); margin-left:3px; }
.tform-badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.tform-badge.done { color:var(--sla-ok); background:color-mix(in srgb, var(--sla-ok) 14%, transparent); }
.tform-badge.todo { color:var(--sla-risk); background:color-mix(in srgb, var(--sla-risk) 14%, transparent); }

/* ---------- Wizard step indicator ---------- */
.wiz-steps { display:flex; align-items:center; margin-bottom:28px; }
.wiz-step { display:flex; align-items:center; gap:10px; }
.wiz-step .num { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:13px; font-family:var(--font-display); background:var(--bg-3); color:var(--text-3); border:1px solid var(--line-2); flex-shrink:0; transition:all .2s; }
.wiz-step.active .num { background:var(--orange); color:var(--on-accent); border-color:var(--orange); }
.wiz-step.done .num { background:var(--orange-soft); color:var(--orange); border-color:color-mix(in srgb, var(--orange) 40%, transparent); }
.wiz-step .lbl { font-size:13px; font-weight:600; color:var(--text-3); white-space:nowrap; }
.wiz-step.active .lbl, .wiz-step.done .lbl { color:var(--text); }
.wiz-line { flex:1; height:1px; background:var(--line-2); margin:0 14px; min-width:18px; }
.wiz-line.done { background:color-mix(in srgb, var(--orange) 45%, transparent); }
.wiz-body { min-height:120px; }
.wiz-review-row { display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); }
.wiz-review-row .k { font-size:12.5px; color:var(--text-3); }
.wiz-review-row .v { font-size:13px; font-weight:600; text-align:right; }

/* ---------- Roles grid (matches users grid) ---------- */
.roles-grid th:last-child, .roles-grid td:last-child { width:1%; white-space:nowrap; }
.roles-grid .btn-sm { padding:3px 10px; font-size:12px; }

/* ---------- Modal ---------- */
.cx-modal-overlay {
    position: fixed; inset: 0; z-index: 200;
    display: grid; place-items: center; padding: 24px;
    background: rgba(5, 7, 9, 0.66); backdrop-filter: blur(3px);
    animation: fadeUp .16s ease both;
}
.cx-modal {
    /* Wider on desktop so edit forms need far less scrolling; still full-width
       (minus overlay padding) on mobile via width:100%. */
    width: 100%; max-width: 640px;
    background: var(--bg-2); border: 1px solid var(--line-2);
    border-radius: var(--r-lg); box-shadow: var(--sh-2);
    max-height: 90vh; display: flex; flex-direction: column;
}
.cx-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--line);
    font-family: var(--font-display); font-weight: 700; font-size: 15px;
}
.cx-modal-x { background: none; border: none; color: var(--text-3); font-size: 15px; cursor: pointer; line-height: 1; }
.cx-modal-x:hover { color: var(--text); }
.cx-modal-body { padding: 20px; overflow-y: auto; }
.cx-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); }

/* --- Repo rule: edit modals should NOT scroll on desktop ---
   Long single-column edit forms waste the horizontal space on desktop and
   force vertical scrolling. Instead give a form-heavy modal `cx-modal--wide`
   and lay its sections out with `cx-modal-cols` so they sit side by side.
   Both collapse to a single, scrollable column on mobile (where that's fine).
   Prefer this over a tall one-column modal for any edit form with more than a
   few fields or multiple sections (profile + roles, details + settings, …). */
.cx-modal--wide { max-width: 880px; }
.cx-modal-cols {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; align-items: start;
}
.cx-modal-cols > * { min-width: 0; }
/* A child that should span both columns (e.g. a full-width header or footer note). */
.cx-modal-cols > .cx-col-span { grid-column: 1 / -1; }
@media (max-width: 720px) {
    .cx-modal-cols { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Users grid ---------- */
.users-grid th:last-child, .users-grid td:last-child { width: 1%; white-space: nowrap; }
.users-grid .btn-sm { padding: 3px 10px; font-size: 12px; }

/* ---------- CRM / Accounts ---------- */
.acct-row { transition:background .12s; }
.acct-row:hover { background:var(--bg-3); }
/* Tab strip wraps onto extra rows rather than scrolling on smaller monitors. */
.acct-tabs { display:flex; flex-wrap:wrap; gap:2px; border-bottom:1px solid var(--line); margin-bottom:22px; }
.acct-tab { display:inline-flex; align-items:center; gap:8px; padding:11px 16px; font-size:13.5px; font-weight:600; white-space:nowrap; color:var(--text-3); border:none; background:transparent; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; }
.acct-tab:hover { color:var(--text-2); }
.acct-tab.sel { color:var(--text); border-bottom-color:var(--orange); }
.acct-tab-badge { font-size:10.5px; font-family:var(--font-mono); padding:1px 6px; border-radius:20px; background:var(--bg-4); color:var(--text-3); }
@media (max-width: 1680px) {
    .acct-tab { padding:10px 11px; font-size:12.5px; gap:6px; }
}
@media (max-width: 1360px) {
    .acct-tab { padding:9px 8px; font-size:12px; gap:5px; }
    .acct-tab-badge { padding:1px 5px; font-size:10px; }
}
.form-control-color { width:46px; padding:4px; height:38px; background:var(--bg-1); border:1px solid var(--line-2); }

/* ---- Admin & Settings ---- */
.back-link { display:inline-block; font-size:12px; color:var(--text-3); text-decoration:none; margin-bottom:14px; transition:color .15s; }
.back-link:hover { color:var(--orange); }

/* ---------- Blazor reconnection overlay (Cortec-themed) ---------- */
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: grid;
    place-items: center;
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(5, 7, 9, 0.72);
    backdrop-filter: blur(4px);
}
.reconnect-card {
    width: 100%;
    max-width: 460px;
    margin: 24px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
    padding: 30px 28px;
    text-align: center;
    font-family: var(--font-body);
}
.reconnect-spinner {
    width: 44px; height: 44px; margin: 0 auto 18px;
    border-radius: 50%;
    border: 3px solid var(--line-2);
    border-top-color: var(--orange);
    animation: reconnect-spin .8s linear infinite;
}
@keyframes reconnect-spin { to { transform: rotate(360deg); } }
.reconnect-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--text); margin: 0 0 10px; }
.reconnect-body { font-size: 13.5px; line-height: 1.6; color: var(--text-2); margin: 0 0 12px; }
.reconnect-help { font-size: 12.5px; color: var(--text-3); margin: 0 0 8px; }
.reconnect-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.02em;
    color: var(--orange);
    text-decoration: none;
}
.reconnect-phone::before {
    content: '';
    width: 16px; height: 16px;
    background: var(--orange);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.reconnect-actions { display: none; gap: 10px; justify-content: center; margin-top: 18px; }
.reconnect-btn { padding: 9px 16px; border-radius: var(--r-sm); font-weight: 700; font-size: 13px; border: none; background: var(--orange); color: var(--on-accent); cursor: pointer; }
.reconnect-btn:hover { background: var(--orange-bright); }
.reconnect-btn-ghost { background: var(--bg-3); color: var(--text); border: 1px solid var(--line-2); }
.reconnect-btn-ghost:hover { background: var(--bg-4); }

/* state-specific: spinner + "reconnecting" text while retrying;
   failed/rejected swap to the retry message and action buttons. */
.reconnect-failed-text { display: none; }
#components-reconnect-modal.components-reconnect-failed .reconnect-reconnecting,
#components-reconnect-modal.components-reconnect-rejected .reconnect-reconnecting { display: none; }
#components-reconnect-modal.components-reconnect-failed .reconnect-failed-text,
#components-reconnect-modal.components-reconnect-rejected .reconnect-failed-text { display: block; }
#components-reconnect-modal.components-reconnect-failed .reconnect-spinner,
#components-reconnect-modal.components-reconnect-rejected .reconnect-spinner { display: none; }
#components-reconnect-modal.components-reconnect-failed .reconnect-actions,
#components-reconnect-modal.components-reconnect-rejected .reconnect-actions { display: flex; }

/* ---------- "Something stopped" card ----------
   The shared shape behind every dead end: the unhandled-error overlay and the
   /Error page. Same language as the reconnection overlay above — centred card,
   display face, one clear action — because to the person reading it these are
   the same event, and three different-looking failures read as three bugs. */
.stopcard {
    width: 100%;
    max-width: 460px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
    padding: 30px 28px;
    text-align: center;
    font-family: var(--font-body);
}
.stopcard-icon {
    width: 52px; height: 52px; margin: 0 auto 18px;
    display: grid; place-items: center; border-radius: 50%;
    color: var(--p-critical);
    background: color-mix(in srgb, var(--p-critical) 14%, transparent);
}
.stopcard-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--text); margin: 0 0 10px; }
.stopcard-body { font-size: 13.5px; line-height: 1.6; color: var(--text-2); margin: 0 0 12px; }
.stopcard-help { font-size: 12.5px; color: var(--text-3); line-height: 1.6; margin: 14px 0 0; }
.stopcard-ref {
    display: inline-block; margin: 2px 0 4px; padding: 7px 11px;
    font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2);
    background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-sm);
    word-break: break-all;
}
.stopcard-ref-label { display: block; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-4); margin-bottom: 6px; }
.stopcard-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.stopcard-btn {
    display: inline-block; padding: 9px 16px; border: none; border-radius: var(--r-sm);
    font-family: inherit; font-weight: 700; font-size: 13px; text-decoration: none; cursor: pointer;
    background: var(--orange); color: var(--on-accent);
}
.stopcard-btn:hover { background: var(--orange-bright); color: var(--on-accent); }
.stopcard-btn-ghost { background: var(--bg-3); color: var(--text); border: 1px solid var(--line-2); }
.stopcard-btn-ghost:hover { background: var(--bg-4); color: var(--text); }

/* The /Error page: its own centred shell, since it renders on a bare layout. */
.stop-page { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; background: var(--bg-1); }

/* ---------- Blazor unhandled-error overlay ----------
   Global rather than per-layout scoped CSS: three shells render this element
   and AuthLayout styled it nowhere, so the raw strip sat permanently on the
   sign-in page. Blazor shows it by setting an INLINE display:block, which
   would beat any flex/grid centring here — so the container stays a plain
   box and the card centres itself with absolute positioning. */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3100;
    background: rgba(5, 7, 9, 0.72);
    backdrop-filter: blur(4px);
}
#blazor-error-ui .stopcard {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 48px);
}

/* The favicon preview, deliberately shown at roughly tab size — a wordmark
   that reads well in a header is a smudge at 16px, and the only way to know
   is to see it small before you ship it. */
.favicon-drop {
    width:52px; height:52px; flex-shrink:0; display:grid; place-items:center;
    background:var(--bg-1); border:1px dashed var(--line-2); border-radius:var(--r-sm);
}
.favicon-drop img { width:22px; height:22px; object-fit:contain; }

/* ---------- Ticket view header (CERT-110) ----------
   One block carrying who, what and where it stands. Same reading idiom as the
   settings hub: a quiet label over a scannable value, so the page answers
   before it asks. */
.tv-head {
    background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md);
    padding:16px 18px 4px; margin-bottom:18px;
}
.tv-head-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tv-ref { font-size:13px; color:var(--text-3); }
.tv-title {
    font-family:var(--font-display); font-weight:600; font-size:21px; line-height:1.3;
    color:var(--text); margin:12px 0 14px; max-width:70ch;
}
.tv-facts {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:2px 20px; border-top:1px solid var(--line); padding-top:12px;
}
.tv-fact { display:flex; flex-direction:column; gap:2px; padding:6px 0 10px; min-width:0; }
.tv-fact .k {
    font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--text-4);
}
.tv-fact .v {
    font-size:13px; font-weight:600; color:var(--text);
    display:flex; align-items:center; gap:6px; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tv-fact .sub {
    font-size:11.5px; color:var(--text-3); text-decoration:none;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
a.sub:hover { color:var(--orange); }
/* Pills sit inside a value, so they shouldn't also carry the value's weight. */
.tv-fact .v .pill { font-weight:700; }

@media (max-width: 700px) {
    .tv-title { font-size:18px; }
    .tv-facts { grid-template-columns:repeat(auto-fit, minmax(128px, 1fr)); }
}

/* ---------- Admin hub, concept 1c (CERT-98) ----------
   Search first, then journeys. The old grid is kept below because other
   screens still use .admin-card. */
.ah-masthead {
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:0 0 18px; margin-bottom:26px; border-bottom:1px solid var(--line);
}
.ah-tenant { font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--text); }
.ah-kicker { font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); margin-top:2px; }
.ah-poweredby { font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-4); }

.ah-search-wrap { max-width:720px; margin:0 auto 40px; text-align:center; }
.ah-search-title { font-family:var(--font-display); font-weight:600; font-size:27px; margin:0 0 16px; color:var(--text); }
.ah-search {
    display:flex; align-items:center; gap:10px; padding:0 14px;
    background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-md);
    transition:border-color .15s;
}
.ah-search:focus-within { border-color:color-mix(in srgb, var(--orange) 55%, var(--line-2)); }
.ah-search-ic { color:var(--text-3); display:flex; flex-shrink:0; }
.ah-search-input {
    flex:1; background:none; border:none; outline:none; color:var(--text);
    font-family:var(--font-body); font-size:15px; padding:14px 0;
}
.ah-search-input::placeholder { color:var(--text-4); }
.ah-search-clear { background:none; border:none; color:var(--text-3); cursor:pointer; font-size:13px; padding:4px; }
.ah-search-clear:hover { color:var(--text); }

.ah-recent { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 14px; margin-top:14px; }
.ah-recent-label { font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-4); }
.ah-recent-item { font-size:12px; color:var(--text-2); }
.ah-recent-when { color:var(--text-4); }

.ah-journey { margin-bottom:34px; }
.ah-journey-title { font-family:var(--font-display); font-weight:700; font-size:16px; margin:0 0 3px; color:var(--text); }
.ah-journey-blurb { font-size:12.5px; color:var(--text-3); margin:0 0 14px; max-width:70ch; }

/* Rows, not cards: 35 equal cards is a wall, and a row leaves room for the
   value to sit beside the name where it can actually be read. */
.ah-rows { display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:2px; }
.ah-row {
    display:flex; align-items:center; gap:12px; padding:11px 13px;
    border-radius:var(--r-sm); text-decoration:none; color:inherit;
    border:1px solid transparent; transition:background .12s, border-color .12s;
}
a.ah-row:hover { background:var(--bg-2); border-color:var(--line); }
.ah-row.is-planned { opacity:.5; }
.ah-row-ic { flex-shrink:0; width:30px; height:30px; display:grid; place-items:center; border-radius:var(--r-sm);
             color:var(--orange); background:var(--orange-soft); }
.ah-row-body { min-width:0; flex:1; display:flex; flex-direction:column; gap:1px; }
.ah-row-title { font-size:13px; font-weight:600; color:var(--text); }
.ah-row-value { font-size:11.5px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width: 700px) {
    .ah-search-title { font-size:22px; }
    .ah-rows { grid-template-columns:1fr; }
}

.admin-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:14px; }
.admin-card {
    display:flex; gap:13px; padding:15px; border-radius:var(--r-md); text-decoration:none; color:inherit;
    background:var(--bg-2); border:1px solid var(--line); transition:border-color .15s, background .15s, transform .15s;
}
a.admin-card:hover { border-color:color-mix(in srgb, var(--orange) 40%, var(--line)); background:var(--bg-3); transform:translateY(-1px); }
.admin-card.is-planned { opacity:.62; }
.admin-card-ic {
    flex-shrink:0; width:38px; height:38px; display:grid; place-items:center; border-radius:var(--r-sm);
    background:var(--orange-soft); color:var(--orange); border:1px solid color-mix(in srgb, var(--orange) 22%, var(--line));
}
.admin-card-body { min-width:0; flex:1; }
.admin-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.admin-card-title { font-weight:700; font-size:13.5px; }
.admin-card-desc { color:var(--text-2); font-size:12px; line-height:1.45; margin:5px 0 8px; }
.admin-card-meta { display:flex; align-items:center; gap:6px; font-size:10.5px; color:var(--text-3); }
.admin-card-meta .mono { font-family:var(--font-mono); color:var(--text-2); }
.dot-sep { color:var(--text-4); }

.admin-badge {
    flex-shrink:0; font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
    padding:2px 7px; border-radius:999px; border:1px solid transparent;
}
.admin-badge.ok { color:var(--s-resolved); background:var(--t-resolved); border-color:color-mix(in srgb, var(--s-resolved) 30%, transparent); }
.admin-badge.warn { color:var(--p-medium); background:var(--t-medium); border-color:color-mix(in srgb, var(--p-medium) 30%, transparent); }
.admin-badge.muted { color:var(--text-3); background:var(--bg-3); border-color:var(--line-2); }

/* Two-up form field grid used in the user create/edit modal. */
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px) { .field-grid { grid-template-columns:1fr; } }
.form-hint { font-size:11px; color:var(--text-3); margin-top:5px; }

/* Bootstrap's own hint class, which this app never themed — so it kept
   Bootstrap's light-theme grey and rendered grey-on-grey wherever it was used
   (seven screens, mostly admin). Same treatment as .form-hint rather than
   rewriting every call site, so the two are interchangeable from here on. */
.form-text { color: var(--text-3); }
.form-label .opt { font-weight:400; color:var(--text-3); font-size:11px; margin-left:4px; }
.modal-section-line { border:none; border-top:1px solid var(--line); margin:18px 0 16px; }

/* Scaffold notice banner */
.scaffold-notice {
    display:flex; align-items:flex-start; gap:11px; padding:11px 14px; margin-bottom:18px; border-radius:var(--r-md);
    background:var(--t-medium); border:1px solid color-mix(in srgb, var(--p-medium) 28%, var(--line));
}
.scaffold-notice strong { display:block; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--p-medium); margin-bottom:2px; }
.scaffold-notice span { font-size:12.5px; color:var(--text-2); }
.scaffold-dot { flex-shrink:0; width:9px; height:9px; margin-top:4px; border-radius:50%; background:var(--p-medium); box-shadow:0 0 8px var(--p-medium); }

/* Toggle / switch rows */
.toggle-row { display:flex; align-items:center; gap:11px; width:100%; padding:10px 11px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--bg-2); cursor:pointer; }
.toggle-row input[type=checkbox] { width:18px; height:18px; accent-color:var(--orange); flex-shrink:0; }

/* Priority pill (SLA editor) */
.pri-pill { font-weight:700; font-size:12.5px; }

/* Category icon picker (Categories & Channels admin) */
.cat-icon-grid { display:flex; flex-wrap:wrap; gap:8px; }
.cat-icon-pick { width:38px; height:38px; display:grid; place-items:center; font-size:16px; border-radius:var(--r-sm); background:var(--bg-2); border:1px solid var(--line); color:var(--text-2); cursor:pointer; transition:border-color .15s, color .15s; }
.cat-icon-pick:hover { border-color:var(--line-3); color:var(--text); }
.cat-icon-pick.sel { border-color:var(--orange); box-shadow:0 0 0 1px var(--orange); color:var(--orange); background:var(--orange-soft); }

/* Branding theme presets */
/* ---- Branding & white-label (CFG-BRD-01) ---- */
.theme-presets { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:10px; }
.theme-swatch { display:flex; flex-direction:column; gap:5px; padding:9px; border-radius:var(--r-sm); background:var(--bg-2); border:1px solid var(--line); cursor:pointer; transition:border-color .15s; }
.theme-swatch:hover { border-color:var(--line-3); }
.theme-swatch.sel { border-color:var(--orange); box-shadow:0 0 0 1px var(--orange); }
.theme-bar { height:12px; border-radius:3px; }
.theme-name { font-size:11.5px; font-weight:600; color:var(--text-2); }

/* ---- "Coming soon" gating (CERT-12) ---- */
.soon-pill { display:inline-flex; align-items:center; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); background:var(--bg-4); border:1px solid var(--line); padding:1px 7px; border-radius:999px; white-space:nowrap; }
.nav-link .soon-pill { margin-left:auto; }
.soon-hero { display:flex; flex-direction:column; align-items:center; gap:10px; padding:64px 32px; text-align:center; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); }
.soon-hero-ic { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:var(--bg-4); color:var(--text-2); }
.soon-hero-title { font-family:var(--font-display); font-weight:700; font-size:19px; }
.soon-hero-body { max-width:520px; font-size:13px; color:var(--text-3); line-height:1.55; }

.text-warn { font-size:12px; color:var(--p-medium); }

.logo-drop { width:150px; height:56px; flex-shrink:0; display:grid; place-items:center; border-radius:var(--r-sm); background:var(--bg-1); border:1px solid var(--line-2); overflow:hidden; }
.logo-drop img { max-width:130px; max-height:44px; object-fit:contain; }

.accent-swatches { display:flex; flex-wrap:wrap; align-items:center; gap:11px; }
.accent-swatch { width:40px; height:40px; padding:0; border-radius:50%; border:3px solid transparent; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.accent-swatch:hover { border-color:var(--line-3); }
.accent-swatch.sel { border-color:var(--text); box-shadow:0 0 0 2px var(--orange-glow); }
.accent-custom { background:none; border:1px solid var(--line-2); }
.accent-custom::-webkit-color-swatch-wrapper { padding:3px; }
.accent-custom::-webkit-color-swatch { border:none; border-radius:50%; }

.font-picks { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:10px; }
.font-pick { text-align:left; padding:12px 14px; border-radius:var(--r-md); background:var(--bg-2); border:1px solid var(--line); cursor:pointer; transition:border-color .15s; }
.font-pick:hover { border-color:var(--line-3); }
.font-pick.sel { border-color:var(--orange); box-shadow:0 0 0 1px var(--orange); }
.font-sample { display:block; font-size:20px; font-weight:700; margin-bottom:2px; }
.font-name { font-size:11.5px; font-weight:600; color:var(--text-2); }

/* Mini portal mock on the branding screen — colours are inlined from the edited
   (unsaved) settings so it previews without touching the real theme. */
.brand-mini { display:flex; height:210px; border:1px solid var(--line-2); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-2); }
.brand-mini-side { width:132px; flex-shrink:0; padding:12px 10px; display:flex; flex-direction:column; gap:6px; }
.brand-mini-logo { max-height:24px; max-width:104px; object-fit:contain; align-self:flex-start; margin-bottom:8px; }
.brand-mini-name { font-weight:700; font-size:12.5px; margin-bottom:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brand-mini-nav { display:flex; align-items:center; gap:7px; padding:6px 8px; border-radius:6px; font-size:10.5px; font-weight:600; }
.brand-mini-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.brand-mini-main { flex:1; padding:14px; min-width:0; }
.brand-mini-row { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px; margin-bottom:7px; }
.brand-mini-bar { width:4px; height:20px; border-radius:3px; flex-shrink:0; }
.brand-mini-skel { height:7px; flex:1; border-radius:3px; opacity:.55; }
.brand-mini-chip { font-size:9px; font-weight:700; padding:2px 7px; border-radius:20px; flex-shrink:0; }
.brand-mini-btn { display:inline-flex; padding:6px 12px; border-radius:6px; color:var(--on-accent); font-size:10.5px; font-weight:700; margin-top:2px; }

/* ---- Roles & permissions editor ---- */
.perm-group { margin-bottom:14px; }
.perm-group-head { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin:0 0 6px 2px; }
.perm-group .toggle-row { margin-bottom:6px; }
.role-badges { display:flex; flex-wrap:wrap; gap:5px; }
.role-chip { font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--bg-3); border:1px solid var(--line-2); color:var(--text-2); }

/* =========================================================================
   Auth forms — shared by Login / Register / verify / reset pages
   ========================================================================= */
.auth-head { margin-bottom: 26px; }
.auth-head .kicker { display:block; margin-bottom:10px; }
.auth-head h1 { font-size:30px; font-weight:700; letter-spacing:-0.02em; margin:0 0 8px; }
.auth-head p { margin:0; color:var(--text-2); font-size:14px; line-height:1.55; }

.auth-field { margin-bottom:16px; }
.auth-field > label { display:block; margin-bottom:7px; color:var(--text-2); font-size:12.5px; font-weight:600; }

.auth-input { position:relative; display:flex; align-items:center; }
.auth-input .lead-ic { position:absolute; left:13px; width:18px; height:18px; color:var(--text-3); pointer-events:none; }
.auth-input .form-control { padding-left:40px; height:46px; }
.auth-input .form-control[type=password],
.auth-input .form-control.has-reveal { padding-right:42px; }

.auth-reveal {
    position:absolute; right:8px; display:grid; place-items:center;
    width:30px; height:30px; padding:0; border:none; background:none;
    color:var(--text-3); cursor:pointer; border-radius:var(--r-sm);
}
.auth-reveal:hover { color:var(--text); }
.auth-reveal svg { width:18px; height:18px; }

.auth-row { display:flex; justify-content:space-between; align-items:center; margin:4px 0 20px; }
.auth-check { display:inline-flex; align-items:center; gap:8px; margin:0; cursor:pointer; color:var(--text-2); font-size:13px; }
.auth-check .form-check-input { margin:0; float:none; }
.auth-row a { font-size:13px; font-weight:600; }

.auth-submit {
    width:100%; height:48px; display:inline-flex; align-items:center; justify-content:center; gap:9px;
    font-size:15px; border-radius:var(--r-sm);
}
.auth-submit svg { width:18px; height:18px; }

.auth-divider { display:flex; align-items:center; gap:12px; margin:18px 0; }
.auth-divider span { flex:1; height:1px; background:var(--line); }
.auth-divider .auth-divider-label { flex:0; padding:0 2px; font-size:11px; text-transform:uppercase; letter-spacing:0.12em; color:var(--text-3); }
.auth-sso { gap:10px; }
.auth-sso svg { width:18px; height:18px; }
.auth-soon {
    display:none; align-items:center; gap:8px; margin-top:10px; padding:9px 12px;
    border-radius:var(--r-sm); font-size:12.5px; color:var(--text-2);
    background:var(--t-medium); border:1px solid color-mix(in srgb, var(--p-medium) 30%, transparent);
}
.auth-soon svg { color:var(--p-medium); flex-shrink:0; }

.auth-alt { text-align:center; margin-top:22px; font-size:13.5px; color:var(--text-2); }
.auth-alt a { font-weight:600; margin-left:4px; }
.auth-alt-sub { text-align:center; margin-top:10px; font-size:12.5px; }
.auth-alt-sub a { color:var(--text-3); }
.auth-alt-sub a:hover { color:var(--orange); }

/* A navigation the app started itself (saving branding, heading to Stripe) tears
   down the Blazor circuit on purpose. Without this, the reconnect overlay flashes
   up saying we've lost the connection — for an action that just succeeded. */
html.certra-reloading #components-reconnect-modal {
    display: none !important;
}

/* ---- Queue bulk actions (CERT-67) ------------------------------------- */
/* The selection column is deliberately narrow: it earns its place on a screen
   people stare at all day only by staying out of the way until used. */
.tq-col-select { width:36px; text-align:center; }
.tq-col-select input { cursor:pointer; }
.tq-row.is-selected { background:color-mix(in srgb, var(--orange) 7%, transparent); }

.tq-bulkbar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 14px; margin-bottom:12px;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-sm);
}
.tq-bulkcount { font-size:12.5px; font-weight:700; color:var(--orange); white-space:nowrap; }

.tq-bulkresult {
  padding:11px 14px; margin-bottom:12px; border-radius:var(--r-sm);
  border:1px solid var(--line);
}
.tq-bulkresult.is-ok {
  background:color-mix(in srgb, var(--sla-ok) 10%, transparent);
  border-color:color-mix(in srgb, var(--sla-ok) 30%, transparent);
}
/* Amber rather than red: a partly-applied batch is a normal outcome to read,
   not a failure to panic about. */
.tq-bulkresult.is-partial {
  background:color-mix(in srgb, var(--sla-risk) 10%, transparent);
  border-color:color-mix(in srgb, var(--sla-risk) 30%, transparent);
}

/* ---- Ticket history lines in the thread (CERT-68) ---------------------- */
/* Deliberately quieter than a message: these are the connective tissue between
   what people said, not the conversation itself. */
.mail-event {
  display:flex; align-items:center; gap:10px;
  padding:7px 12px; margin:6px 0;
  font-size:12px; color:var(--text-3);
  border-left:2px solid var(--line-2);
}
.mail-event-ic {
  display:grid; place-items:center; width:22px; height:22px; flex-shrink:0;
  border-radius:50%; background:var(--bg-4); color:var(--text-2);
}
.mail-event-txt { flex:1; min-width:0; }
.mail-event-txt strong { color:var(--text-2); font-weight:600; }
/* An override is the one history line worth interrupting for: a gate said no
   and somebody went ahead. */
.mail-event-note {
  display:block; margin-top:2px; font-size:11px;
  color:var(--sla-risk); font-style:italic;
}

/* ---- Logging a call (CERT-73) ------------------------------------------ */
/* Two columns: the conversation on the left, who-and-where on the right.
   One screen because the form is the review when all of it is visible. */
.nt-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:28px; align-items:start; }
@media (max-width: 900px) { .nt-grid { grid-template-columns:1fr; } }

.nt-search { position:relative; }
.nt-results {
  position:absolute; left:0; right:0; z-index:30; margin-top:4px;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-sm);
  box-shadow:var(--sh-1); overflow:hidden;
}
.nt-result {
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:9px 12px; background:none; border:none; border-bottom:1px solid var(--line);
  cursor:pointer;
}
.nt-result:last-child { border-bottom:none; }
.nt-result:hover { background:var(--bg-3); }
.nt-result-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.nt-result-name { font-size:13px; font-weight:600; color:var(--text); }
.nt-result-sub { font-size:11.5px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* "3 open" on a caller is a tap on the shoulder: they may be ringing about
   a ticket that already exists. */
.nt-result-open {
  font-size:10.5px; font-weight:700; color:var(--sla-warn); white-space:nowrap;
  text-decoration:none;
}

.nt-chip {
  display:flex; align-items:center; gap:11px; padding:10px 12px;
  background:color-mix(in srgb, var(--sla-ok) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--sla-ok) 30%, transparent);
  border-radius:var(--r-sm);
}

.nt-footer { border-top:1px solid var(--line); padding-top:14px; }

/* ==========================================================================
   Mobile (CERT-110)
   One block, at the end, so what a phone gets is in one place rather than
   scattered through the file. Breakpoint 700px, matching the layout's.
   ========================================================================== */
@media (max-width: 700px) {

    /* ---- Tables, tier 1: the queue-style tables become cards -------------
       .tq-table is table-layout:fixed with percentage column widths, so on a
       phone eight columns turn into unreadable slivers. Rows become cards
       instead: the header disappears, each cell stacks, and the first cell —
       always the identifying one — carries the weight. No per-cell markup
       needed, so this holds for every page using the class and any added
       later. */
    .tq-table { table-layout: auto; }
    .tq-table thead { display: none; }

    /* A flex card rather than stacked blocks: the identifying cell takes the
       full width and everything else — client, status, priority, SLA — flows
       onto a second line. Stacking each cell on its own row made a five-line
       card out of five short values. */
    .tq-table tbody tr {
        display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
        padding: 12px 14px; margin-bottom: 8px;
        border: 1px solid var(--line); border-radius: var(--r-sm);
        background: var(--bg-2);
    }
    .tq-table tbody tr:last-child { margin-bottom: 0; }
    .tq-table td {
        display: inline-flex; align-items: center; width: auto !important;
        padding: 0; border-bottom: none; text-align: left !important;
    }
    .tq-table td.tq-col-ticket { flex: 0 0 100%; font-weight: 700; font-size: 14px; }

    /* Bulk select is a desktop idiom — you can't rubber-band a phone, and the
       row is now a card you tap. Same for an empty cell, which is furniture
       left over from the column layout. */
    .tq-table td.tq-col-select { display: none; }
    .tq-table td:empty { display: none; }

    /* An empty-state row spans the whole card. */
    .tq-table td[colspan] { flex: 0 0 100%; justify-content: center; }

    /* ---- Tables, tier 2: everything else scrolls inside its card ---------
       Twenty-eight admin tables can't each have a hand-built card layout and
       stay consistent. Scrolling INSIDE the card is the honest compromise:
       the page itself never scrolls sideways, which is the symptom that makes
       an app feel broken. */
    /* Whatever element directly holds the table becomes its scroll container.
       Targeting the container BY STRUCTURE rather than by class because the
       33 table pages use at least three different wrappers (.tq-card, .card,
       and some with neither) — enumerating them would miss the next one
       somebody writes. :where() keeps this at zero specificity so a page can
       still override it. */
    :where(div, section, main):has(> table.table) { overflow-x: auto; }
    table.table { min-width: 560px; }

    /* Tier 1 opts out: it becomes cards, so it has no width to preserve. */
    .tq-table, :where(div, section):has(> .tq-table) { min-width: 0; overflow-x: visible; }

    /* ---- Tab strips ------------------------------------------------------
       .seg is inline-flex with no wrap, so the ticket page's five tabs ran
       off the side. Scroll them rather than wrapping: a wrapped segmented
       control stops reading as one control. */
    .seg {
        display: flex; max-width: 100%; overflow-x: auto;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .seg::-webkit-scrollbar { display: none; }
    .seg-btn { flex: 0 0 auto; }

    /* ---- Page furniture --------------------------------------------------
       !important, reluctantly and deliberately: most page headings carry an
       inline style="font-size:28px", and an inline style beats any rule
       without it. The alternative was editing ~40 pages to move one number
       into a class. */
    h1 { font-size: 21px !important; }
    .kicker { font-size: 10px; }

    /* Modals: the overlay padding is wasted space on a phone. */
    .cx-modal-overlay { padding: 8px; align-items: flex-start; }
    .cx-modal { max-height: 94vh; }
    .cx-modal--wide { max-width: 100%; }
    .cx-modal-cols { grid-template-columns: 1fr; }

    /* Buttons in a row wrap rather than overflow. */
    .card-header { flex-wrap: wrap; gap: 8px; }

    /* Anything laid out as a fixed multi-column grid collapses. */
    .admin-grid, .stat-grid, .tile-grid, .urgency-grid, .cat-grid, .kb-grid, .nt-grid,
    .opswall-stats { grid-template-columns: 1fr !important; }
    .kanban { grid-template-columns: 1fr !important; }

    /* The time planner is a grid of 50px + one column per day; seven days on a
       phone gives each about 48px, narrower than the text inside it. Give the
       columns a readable minimum and let the grid scroll. */
    .tp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tp-wrap { min-width: 620px; }

    /* Global search keeps its place but stops demanding half the bar. Its
       results panel is positioned relative to this wrapper, so hiding it
       outright would lose the feature rather than shrink it. */
    .gs-wrap { max-width: none; min-width: 0; }
}

/* Never let a page scroll sideways — the symptom that makes an app feel
   broken on a phone before any individual screen is even judged. */
@media (max-width: 700px) {
    html, body { overflow-x: hidden; }
}