/* ─── COMPONENTS, LAYOUT, THEME ─── */
.flatpickr-calendar { z-index: 99999 !important; }
.flatpickr-months { overflow: visible !important; position: relative; z-index: 1; }
.flatpickr-month  { overflow: visible !important; }
.flatpickr-current-month { overflow: visible !important; }
/* Dropdown <option> elements can't use CSS variables — hardcode both themes */
.flatpickr-monthDropdown-months option { background: #f8fafc; color: #0f172a; }
[data-theme="dark"] .flatpickr-monthDropdown-months option { background: #111116; color: #f0f4f8; }
</style>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">

<style>
/* ─── RESET & VARS ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ─── UNIFIED THEME SYSTEM ───
 * Design language: dense, professional, amber-accented.
 * Single accent color, no neon glows, tight spacing, sharp 2px radius.
 * Typography: Instrument Serif headings, Geist body, JetBrains Mono for IDs.
 */
:root {
  /* LIGHT MODE */
  color-scheme: light;
  --bg: #e2e8f0;
  --surface: #f8fafc;
  --surface-hover: #f1f5f9;
  --border: #cbd5e1;
  --text: #0f172a;
  --text-muted: #64748b;
  --accent: #0f9b7d;
  --accent-hover: #0c7a62;
  --accent-transparent: rgba(15, 155, 125, 0.12);
  --red: #e11d48;
  --orange: #d97706;
  --green: #059669;
  --blue: #2563eb;
  --purple: #7c3aed;
  --yellow: #eab308;

  --radius: 4px;

  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-feature-settings: 'cv11', 'ss01';
}

[data-theme="dark"] {
  /* DARK MODE — original cyberpunk scheme */
  color-scheme: dark;
  --bg: #07070a;
  --surface: #111116;
  --surface-hover: #1a1a22;
  --border: #232330;
  --text: #f0f4f8;
  --text-muted: #8b8b9f;
  --accent: #00f3ff;
  --accent-hover: #00d1db;
  --accent-transparent: rgba(0, 243, 255, 0.12);
  --red: #ff0055;
  --orange: #ffaa00;
  --green: #00ff88;
  --blue: #0088ff;
  --purple: #b700ff;
  --yellow: #eab308;
}

/* ─── DYNAMIC THEME EFFECTS ─── */
.btn-primary { color: #ffffff !important; box-shadow: 0 4px 6px -1px rgba(15, 155, 125, 0.2); border: none; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 10px -1px rgba(15, 155, 125, 0.3); }
.kpi-card { box-shadow: 0 2px 4px rgba(19, 51, 64, 0.04); transition: all 0.3s ease; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(19, 51, 64, 0.08); border-color: var(--accent); }
.modal { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Dark Mode — original cyberpunk glows */
[data-theme="dark"] .btn-primary { box-shadow: 0 0 12px rgba(0, 243, 255, 0.4); border: 1px solid var(--accent); color: #000 !important; }
[data-theme="dark"] .btn-primary:hover { box-shadow: 0 0 20px rgba(0, 243, 255, 0.7); }
[data-theme="dark"] .kpi-card { background: linear-gradient(145deg, var(--surface), #0a0a0e); box-shadow: 0 8px 24px rgba(0,0,0,0.6); }
[data-theme="dark"] .kpi-card:hover { border-color: var(--text-muted); box-shadow: 0 12px 30px rgba(0,0,0,0.8); }
[data-theme="dark"] .kpi-val-open { text-shadow: 0 0 15px rgba(255, 0, 85, 0.6); }
[data-theme="dark"] .kpi-val-closed { text-shadow: 0 0 15px rgba(0, 255, 136, 0.6); }
[data-theme="dark"] .kpi-val-prog { text-shadow: 0 0 15px rgba(255, 170, 0, 0.6); }
[data-theme="dark"] .modal { border: 1px solid rgba(0, 243, 255, 0.25); box-shadow: 0 25px 50px rgba(0,0,0,0.9), 0 0 30px rgba(0, 243, 255, 0.08); background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); }

body { background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
html { -webkit-overflow-scrolling: touch; }
button, input, select, textarea { font-family: inherit; font-size: inherit; outline: none; border: none; }
button { cursor: pointer; }
button:disabled { opacity: 0.6; cursor: not-allowed; }
.mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ─── TYPOGRAPHY & UTILS ─── */
/* Serif is opt-in via .page-title class only.
 * Do NOT apply to h2/h3 tags globally — they're used structurally inside
 * modals, cards, form sections and must stay neutral. */
.page-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

h1, h2, h3 { font-weight: 600; }

.text-muted { color: var(--text-muted); }
.text-xs { font-size: 12px; }
.text-sm { font-size: 13px; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-4 { gap: 16px; }
.flex-wrap { flex-wrap: wrap; }

/* ─── LAYOUT ─── */
.app-container { display: flex; flex-direction: column; height: 100vh; }
.topbar { background: var(--bg); border-bottom: 1px solid var(--border); padding: 0 24px; display: flex; align-items: center; height: 56px; flex-shrink: 0; z-index: 50; }
/* Desktop: topbar-row1 dissolves via display:contents so brand + user-zone sit directly
   in the outer flex. Order: [brand] [actions flex:1] [user-zone] */
.topbar-row1 { display: contents; }
.topbar-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo-icon { width: 32px; height: 32px; background: var(--accent-transparent); color: var(--accent); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; border: 1px solid var(--accent); }
.topbar-title { font-size: 16px; font-weight: 600; }
.topbar-subtitle { font-size: 12px; color: var(--text-muted); font-weight: 400; margin-top: 2px; }
/* Actions grows to fill the middle. Live indicator left, nav buttons pushed right by spacer */
.topbar-actions { display: flex; align-items: center; gap: 12px; flex: 1; padding: 0 16px; }
/* User zone: pinned far right, separated by a divider line */
.topbar-user { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding-left: 16px; border-left: 1px solid var(--border); }
.hide-desktop-user { display: none; } /* mobile-only user chip inside topbar-row1 */
.live-indicator { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.dot { width: 8px; height: 8px; background: var(--green); border-radius: 50%; }
.main-content { flex: 1; padding: 24px; overflow-y: auto; overflow-x: hidden; }
/* overflow-x hidden: any over-wide child (table, chip row, long input) must
   scroll inside its own wrapper (.table-container etc.) — never pan the page. */

/* ─── BUTTONS & INPUTS ─── */
.btn { padding: 8px 12px; border-radius: var(--radius); font-weight: 500; transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.btn-primary { background: var(--accent); color: #000; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--surface-hover); }
.btn-danger { background: rgba(239, 68, 68, 0.1); color: var(--red); border: 1px solid rgba(239, 68, 68, 0.3); }
.btn-danger:hover { background: rgba(239, 68, 68, 0.2); }
.btn-icon { width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); }
.btn-icon:hover { background: var(--surface-hover); }

input:not([type="checkbox"]):not([type="file"]), select, textarea { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: var(--radius); width: 100%; box-sizing: border-box; }

/* Edge/IE add a NATIVE password reveal ("eye") + clear ("✕") button to password
   inputs. On the fields that ALSO have the app's own show/hide toggle this shows up
   as a duplicate ("two eyes"), so suppress the native control on just those fields.
   Recovery fields (rec-pwd/rec-pwd2) have no app toggle, so they keep the native one. */
#login-password::-ms-reveal, #new-password::-ms-reveal, #confirm-password::-ms-reveal,
#login-password::-ms-clear,  #new-password::-ms-clear,  #confirm-password::-ms-clear { display: none; }

/* Ensure form controls inside any modal respect container width and can shrink */
.modal, .modal * { box-sizing: border-box; }
.modal .modal-body * { min-width: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; line-height: 1.5; }
option { background-color: var(--surface); color: var(--text); }

/* ─── DASHBOARD KPIS ─── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 16px; }
.kpi-card { background: var(--surface); border-radius: var(--radius); padding: 5px; position: relative; overflow: hidden; border: 2px solid var(--border); }
.kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.kpi-card.c-total::before { background: var(--text-muted); }
.kpi-card.c-open::before { background: var(--red); }
.kpi-card.c-prog::before { background: var(--orange); }
.kpi-card.c-reverted::before { background: var(--purple); }
.kpi-card.c-review::before { background: var(--blue); }
.kpi-card.c-closed::before { background: var(--green); }
.kpi-title { font-size: 16px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 8px; }
.kpi-value { font-size: 32px; font-weight: 700; color: var(--text); line-height: 1; }
.kpi-val-open { color: var(--red); }
.kpi-val-prog { color: var(--orange); }
.kpi-val-reverted { color: var(--purple); }
.kpi-val-review { color: var(--blue); }
.kpi-val-closed { color: var(--green); }
.kpi-sub { font-size: 12px; color: var(--text-muted); margin-top: 8px; }

/* ─── FILTERS ─── */
.filter-bar { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px; }
.filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Filter dropdowns: one uniform cell width so a control with long options (e.g.
   Categories) doesn't balloon wider than the rest. The closed control truncates
   the selected value with an ellipsis; hover shows the full value via the title
   attribute set in render. The native option list still opens at its content
   width (Chrome expands the popup past the control), so long options stay
   readable — the cell stays compact, the list does not. */
.filter-row select {
  width: 140px; min-width: 140px; max-width: 140px; flex: 0 0 auto; padding: 6px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Toggles stay on the left; the date+search group is pushed to the right edge. */
.filter-row .filter-io { flex: 0 0 auto; min-width: 0; margin-left: auto; }
/* Uniform cells: date and search share the same fixed width. */
.filter-row .filter-io-date { flex: 0 0 140px; }
.filter-row .filter-io-date #dash-date-range { width: 100%; }
.filter-row .filter-io > .search-input { flex: 0 0 140px; width: 140px; min-width: 0; }
/* Grouped filter controls: date+search together, the two toggles together */
.filter-io { display: flex; align-items: center; gap: 8px; }
.filter-io-date { flex: 0 0 150px; }
.filter-io-date #dash-date-range { width: 100%; box-sizing: border-box; }
.filter-io > .search-input { box-sizing: border-box; }
.filter-toggles { display: flex; align-items: center; gap: 6px; }
/* Bordered toggle pills so each label clearly belongs to its switch */
.toggle-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: var(--radius); padding: 5px 10px; font-size: 13px; color: var(--text-muted); background: var(--bg); cursor: pointer; white-space: nowrap; user-select: none; transition: border-color .15s, color .15s; }
.toggle-pill:hover { border-color: var(--accent); }
.toggle-pill:has(input:checked) { border-color: var(--accent); color: var(--text); }
/* Active (non-default) filter controls highlight with the accent border, matching the toggle pills */
.filter-row select.filter-active,
.filter-row input.filter-active { border-color: var(--accent) !important; color: var(--text); box-shadow: 0 0 0 1px var(--accent) inset; }
/* Unify all filter-bar controls to one compact font, matching the KPI strip text
   scale, so the dropdowns, toggles, date and search box read consistently small. */
.filter-bar select,
.filter-bar input:not([type="checkbox"]):not([type="radio"]),
.filter-bar .toggle-pill,
.filter-bar .search-input { font-size: 12px; }
/* Switch UI (replaces the bare checkbox) */
.switch { position: relative; display: inline-block; width: 34px; height: 18px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.switch .slider { position: absolute; inset: 0; background: var(--border); border-radius: 999px; transition: background .2s; }
.switch .slider::before { content: ''; position: absolute; height: 14px; width: 14px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: transform .2s; }
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(16px); }
.status-pill { padding: 6px 14px; border-radius: var(--radius); font-size: 13px; font-weight: 500; background: transparent; color: var(--text-muted); border: 1px solid var(--border); cursor: pointer; transition: all 0.15s; }
.status-pill:hover { border-color: var(--text-muted); color: var(--text); }
.status-pill.active { background: var(--accent-transparent); color: var(--accent); border-color: var(--accent); }
/* Compact pills for inline sub-filters (e.g. the Requirements status row tucked
   beside the main Projects/Requirements/Sprints tabs). */
.status-pill-sm { padding: 4px 10px; font-size: 12px; }
.tab-subfilters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-left: 12px; margin-left: 8px; border-left: 1px solid var(--border); }
/* Row 1 is a light tab strip, not a second bordered card — no border/background,
   no internal padding, and a small gap to the filter card below it. */
.filter-bar.tab-bar { border: none; background: transparent; padding: 0; margin-bottom: 10px; gap: 0; }
.filter-bar.tab-bar .filter-row.status-row { gap: 8px; }
.search-input { flex: 1; min-width: 140px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 14px; color: var(--text); }

/* Multiselect dropdown (assigned states): a single field that opens a checkbox panel. */
.ms-dropdown { position: relative; }
.ms-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); padding: 6px 10px; font-size: 13px; cursor: pointer; text-align: left; }
.ms-toggle:hover { border-color: var(--accent); }
.ms-caret { opacity: 0.6; font-size: 11px; flex-shrink: 0; }
.ms-panel { display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 220px; max-width: 320px; max-height: 260px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.4); padding: 8px; }
.ms-dropdown.open .ms-panel { display: block; }
.ms-panel-head { display: flex; gap: 12px; padding: 2px 4px 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.ms-panel-head a { font-size: 12px; font-weight: 500; color: var(--accent); }
.ms-panel-head a:last-child { color: var(--text-muted); }
.ms-option { display: flex; align-items: center; gap: 8px; padding: 6px 6px; font-size: 13px; border-radius: 4px; cursor: pointer; }
.ms-option:hover { background: rgba(255,255,255,0.05); }
.ms-option input { width: auto; margin: 0; }

/* Compact invite/promote form: shorter inputs to reduce vertical footprint. */
.admin-invite input, .admin-invite select { padding: 6px 10px; font-size: 13px; }
.admin-invite label { margin-bottom: 3px !important; }

/* Admin sub-tabs: spread to full width with equal-size, centered buttons. */
.admin-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-tabs .admin-tab { flex: 1 1 120px; min-width: 0; text-align: center; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── TABLE ─── */
/* Dense, tool-like tables. Tight row height, monospace IDs, hairline rules. */
.table-container { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; margin-bottom: 20px; }
table { width: 100%; border-collapse: collapse; text-align: left; min-width: 1000px; }
/* Capped-height list with its own vertical scroll and a sticky header, so a long
   internal-users list doesn't stretch the whole page. */
.table-container.users-scroll { max-height: 460px; overflow-y: auto; }
.table-container.users-scroll thead th { position: sticky; top: 0; z-index: 2; }
/* Freeze the Name (first) and Edit/Deactivate Actions (last) columns; the middle
   columns scroll horizontally underneath. Pinned cells need an opaque background
   so scrolling content doesn't show through. Scoped to the users list only. */
.table-container.users-scroll td:first-child,
.table-container.users-scroll th:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--surface);
  border-right: 1px solid var(--border);
}
.table-container.users-scroll td:last-child,
.table-container.users-scroll th:last-child {
  position: sticky; right: 0; z-index: 1; background: var(--surface);
  border-left: 1px solid var(--border);
}
/* Header corner cells sit above both the sticky header row and the pinned cols. */
.table-container.users-scroll thead th:first-child,
.table-container.users-scroll thead th:last-child {
  z-index: 3; background: var(--bg);
}
/* Keep the pinned cells opaque (not see-through) on row hover. */
.table-container.users-scroll tbody tr:hover td:first-child,
.table-container.users-scroll tbody tr:hover td:last-child {
  background: var(--surface-hover);
}
th {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--bg);
}
td {
  padding: 8px 14px;        /* ~32px row height with 13px text */
  border-bottom: 1px solid var(--border);
  vertical-align: center;
  font-size: 13px;
  line-height: 1.4;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--surface-hover); cursor: pointer; }

/* Click-to-copy values (e.g. Case/Loan ID): pointer + subtle hover underline. */
.copy-id { cursor: pointer; }
.copy-id:hover { text-decoration: underline; text-underline-offset: 2px; }

.t-id {
  color: var(--accent);
  font-weight: 500;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: -0.01em;
}

.t-badge { padding: 2px 8px; border-radius: var(--radius); border: 1px solid var(--accent); color: var(--accent); font-size: 11px; background: var(--accent-transparent); text-transform: capitalize; display: inline-block; white-space: nowrap; }
.t-badge-generic { border-color: var(--blue); color: var(--blue); background: rgba(59,130,246,0.08); }
.t-pri-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; }
.pri-high { background: var(--red); } .pri-medium { background: var(--orange); } .pri-low { background: var(--blue); }

/* ─── STATUS INDICATOR ─── 
 * Pattern: small colored dot + text, instead of loud colored pill.
 * Linear / Vercel / Stripe pattern. Reads as a tool, not a toy.
 *
 * The inline `color:` set by render code drives the dot via currentColor.
 * The text is colored to match — which works because the colors are muted
 * (no neon), so the result is subtle and information-dense, not loud.
 *
 * The inline `background:` and `border:` set by older render code are
 * stripped via !important so they don't bring back the pill look. */
.t-status {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.t-status::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.st-open { border: 1px solid var(--red); color: var(--red); background: rgba(239,68,68,0.1); }
.st-progress { border: 1px solid var(--orange); color: var(--orange); background: rgba(245,158,11,0.1); }
.st-reverted { border: 1px solid var(--purple); color: var(--purple); background: rgba(139,92,246,0.1); }
.st-review { border: 1px solid var(--blue); color: var(--blue); background: rgba(59,130,246,0.1); }
.st-resolved { border: 1px solid var(--green); color: var(--green); background: rgba(16,185,129,0.1); }
.t-timeline { color: var(--text-muted); font-size: 11px; line-height: 1.5; white-space: nowrap; }
.t-tat { font-size: 11px; line-height: 1.5; white-space: nowrap; }
.tat-val { color: var(--text); font-weight: 500; }

/* ─── MODALS & FORMS ─── */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px); }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); width: 100%; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); }
.modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border); background: var(--surface); z-index: 10; flex-shrink: 0; }
.modal-body { overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; flex: 1; min-height: 0; padding: 20px 24px; box-sizing: border-box; }

.form-section { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; box-sizing: border-box; }
.form-section { overflow: hidden; }
.form-section-title { margin-top: 0; margin-bottom: 12px; font-size: 14px; font-weight: 600; color: var(--text); }

.detail-label { font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; letter-spacing: 0.5px; }
.detail-value { font-size: 14px; font-weight: 500; color: var(--text); word-break: break-word; }
.comment-box { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; box-sizing: border-box; }
.comment-box.internal { border-color: var(--orange); background: rgba(245,158,11,0.05); }

/* ─── LAYOUT UTILS ─── */
.split-layout { display: grid; grid-template-columns: 2fr 1fr; padding: 0 !important; }
.main-column { padding: 20px; display: flex; flex-direction: column; gap: 20px; }
/* Ticket detail fixed bottom bar: reply/review (left) + submit (right) */
.ticket-bottom-bar { flex-shrink: 0; position: sticky; bottom: 0; border-top: 1px solid var(--border); background: var(--surface); padding: 10px 16px; display: flex; align-items: flex-end; gap: 12px; justify-content: space-between; z-index: 5; }
.tbb-left { display: flex; align-items: flex-end; gap: 10px; flex: 1; min-width: 0; }
.tbb-input-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tbb-textarea { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; color: var(--text); font-size: 13px; resize: none; max-height: 120px; min-height: 38px; box-sizing: border-box; }
.tbb-internal { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); cursor: pointer; }
.tbb-internal input { width: auto; margin: 0; }
.tbb-right { flex-shrink: 0; }
.side-column { padding: 20px; background: var(--bg); border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }

.split-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.split-form > * { min-width: 0; }
.sidebar-panel { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 16px; }

/* ─── FORM BUILDER ─── */
.builder-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; background: var(--bg); overflow: hidden; }
.builder-card.locked { opacity: 0.8; border-color: rgba(45, 212, 191, 0.2); }
.cat-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; font-size: 13px; margin-bottom: 6px;}

/* ─── LOGIN ─── */
.login-wrap { height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { width: 100%; max-width: 420px; background: var(--surface); padding: 32px; border-radius: 12px; border: 1px solid var(--border); transition: all 0.3s ease; }
.reg-fields { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.4s ease, opacity 0.3s ease; }
.reg-fields.visible { max-height: 600px; opacity: 1; }
.reg-divider { display: flex; align-items: center; gap: 10px; margin: 20px 0; color: var(--text-muted); font-size: 12px; }
.reg-divider::before, .reg-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.login-field { margin-bottom: 12px; min-width: 0; }
.login-field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 5px; }
.login-field input, .login-field select { width: 100%; max-width: 100%; padding: 10px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); transition: border-color 0.2s; box-sizing: border-box; }

/* Constrain all form controls inside form sections to avoid overflow */
.form-section input, .form-section select, .form-section textarea { display: block; width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; }

/* Attachment input inside attach-actions should flex but not overflow */
.attach-actions input { max-width: 100%; box-sizing: border-box; min-width: 0; }

/* Modal footer / actions — keep buttons aligned and spaced nicely */
.modal .flex.justify-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; border-top: 1px solid var(--border); box-sizing: border-box; }
.modal .flex.justify-between .btn { margin: 0; }
.modal .flex.justify-between .btn-secondary { padding: 8px 12px; min-width: 90px; }
.modal .flex.justify-between .btn-primary { width: auto !important; min-width: 140px; max-width: 220px; }

/* Ensure the submit button doesn't stretch on small screens */
@media (max-width: 520px) {
  .modal { width: 95vw; }
  .modal .flex.justify-between { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .modal .flex.justify-between .btn-primary { width: 100% !important; }
}
.login-field input:focus, .login-field select:focus { border-color: var(--accent); }
.state-notice { background: rgba(45,212,191,0.08); border: 1px solid rgba(45,212,191,0.2); border-radius: var(--radius); padding: 10px 14px; font-size: 12px; color: var(--accent); margin-bottom: 16px; }

/* ─── UTILS ─── */
.toast { position: fixed; bottom: 24px; right: 24px; padding: 12px 20px; border-radius: var(--radius); font-weight: 500; z-index: 9999; animation: slideUp 0.3s ease; box-shadow: 0 10px 25px rgba(0,0,0,0.5); max-width: 90vw; word-wrap: break-word; }
.toast-success { background: var(--accent); color: #000; }
.toast-error { background: var(--red); color: #fff; }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
.hide-desktop { display: none; }
.empty-state { text-align: center; padding: 64px 20px; color: var(--text-muted); }

/* ── Flatpickr: full theme override for light + dark ── */
/* ── Flatpickr: full custom theme ── */
/* ─── FLATPICKR: full custom theme ─────────────────────────────────────────── */

/* Calendar shell
   7 cols × 39px cell = 273px + 2×12px side padding = 297px.
   Use a fixed width that actually fits all 7 columns. */
.flatpickr-calendar {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08) !important;
  border-radius: 12px !important;
  color: var(--text) !important;
  padding: 8px 12px !important;
  font-family: 'Geist', system-ui, sans-serif !important;
  width: 300px !important;
}
[data-theme="dark"] .flatpickr-calendar {
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,243,255,0.08) !important;
}

/* Header */
.flatpickr-months {
  background: transparent !important;
  padding: 4px 0 8px !important;
  align-items: center !important;
}
.flatpickr-month {
  background: transparent !important;
  color: var(--text) !important;
  fill: var(--text) !important;
  height: 36px !important;
}

/* Nav arrows */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  fill: var(--text-muted) !important;
  color: var(--text-muted) !important;
  padding: 6px 10px !important;
  top: 8px !important;
  border-radius: 6px !important;
  transition: background 0.15s, fill 0.15s !important;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background: var(--accent-transparent) !important;
  fill: var(--accent) !important;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 14px !important;
  height: 14px !important;
}

/* Month + year row */
.flatpickr-current-month {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  padding-top: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 3px 6px !important;
  cursor: pointer !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: var(--accent-transparent) !important;
  border-color: var(--accent) !important;
}

/* Year input — show spinner arrows in both themes */
.flatpickr-current-month .numInputWrapper {
  position: relative !important;
}
.flatpickr-current-month input.cur-year {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 3px 6px !important;
  width: 60px !important;
}
.flatpickr-current-month input.cur-year:focus {
  border-color: var(--accent) !important;
  outline: none !important;
}
/* Always show the up/down arrows; colour them to match the theme text */
.flatpickr-current-month .numInputWrapper span {
  opacity: 1 !important;
  border-color: var(--border) !important;
  background: var(--bg) !important;
}
.flatpickr-current-month .numInputWrapper span.arrowUp::after {
  border-bottom-color: var(--text) !important;
}
.flatpickr-current-month .numInputWrapper span.arrowDown::after {
  border-top-color: var(--text) !important;
}
.flatpickr-current-month .numInputWrapper span:hover {
  background: var(--accent-transparent) !important;
}
.flatpickr-current-month .numInputWrapper span:hover::after {
  border-bottom-color: var(--accent) !important;
  border-top-color: var(--accent) !important;
}

/* Weekday row */
.flatpickr-weekdays {
  background: transparent !important;
  margin-bottom: 4px !important;
}
span.flatpickr-weekday {
  background: transparent !important;
  color: var(--text-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Day grid — match the calendar's inner width exactly */
.flatpickr-innerContainer,
.flatpickr-rContainer,
.dayContainer {
  background: transparent !important;
  width: 276px !important;
  min-width: 276px !important;
  max-width: 276px !important;
}

/* Individual day cells: 276px ÷ 7 = 39.4px each */
.flatpickr-day {
  color: var(--text) !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  height: 36px !important;
  line-height: 36px !important;
  max-width: 39px !important;
  transition: background 0.12s, color 0.12s !important;
}
.flatpickr-day:hover {
  background: var(--accent-transparent) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.flatpickr-day.today {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
  background: var(--accent-transparent) !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(15,155,125,0.35) !important;
}
[data-theme="dark"] .flatpickr-day.selected,
[data-theme="dark"] .flatpickr-day.startRange,
[data-theme="dark"] .flatpickr-day.endRange {
  color: #000 !important;
  box-shadow: 0 0 12px rgba(0,243,255,0.4) !important;
}
.flatpickr-day.inRange {
  background: var(--accent-transparent) !important;
  border-color: transparent !important;
  color: var(--text) !important;
  border-radius: 0 !important;
}
.flatpickr-day.startRange { border-radius: 8px 0 0 8px !important; }
.flatpickr-day.endRange   { border-radius: 0 8px 8px 0 !important; }
.flatpickr-day.startRange.endRange { border-radius: 8px !important; }

/* Show overflow days from adjacent months at low opacity — keeps grid full and square */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  opacity: 0.25 !important;
  color: var(--text-muted) !important;
}

.flatpickr-day.flatpickr-disabled {
  color: var(--text-muted) !important;
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}
.flatpickr-day.flatpickr-disabled:hover { background: none !important; border-color: transparent !important; }

/* ─── MOBILE RESPONSIVENESS ─── */
@media(max-width: 768px) {
  .hide-mobile { display: none !important; }
  .hide-desktop { display: flex !important; }

  /* ── Topbar: 2-row mobile layout ────────────────────────────
     Row 1: [brand flex:1]  [user name+role]  [logout btn]
     Row 2: [live] [spacer] [theme] [admin] [esc] [proj] [raise]  (scrollable)
  ── */
  .topbar {
    padding: 10px 14px;
    flex-direction: column;
    height: auto;
    gap: 0;
    align-items: stretch;
  }
  /* Row 1 wrapper — override display:contents from desktop */
  .topbar-row1 {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    min-width: 0;
  }
  .topbar-brand {
    flex: 1;
    min-width: 0;
  }
  .topbar-brand .topbar-title {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar-brand .topbar-subtitle { font-size: 11px; }

  /* On mobile: show the inline (row-1) user chip, hide the standalone desktop one */
  .hide-desktop-user { display: flex !important; }  /* show mobile user chip */
  /* topbar-user without hide-desktop-user = desktop-only version; hidden on mobile by hide-mobile */
  .topbar-user {
    padding-left: 0;
    border-left: none;
    gap: 8px;
  }
  .topbar-user .user-name  { font-size: 12px; font-weight: 600; white-space: nowrap; }
  .topbar-user .user-role  { font-size: 10px; color: var(--text-muted); text-transform: capitalize; }

  /* Row 2: action strip — full width, horizontally scrollable */
  .topbar-actions {
    width: 100%;
    padding: 8px 0 2px;
    margin-top: 8px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .topbar-actions::-webkit-scrollbar { display: none; }
  .topbar-actions .live-indicator {
    flex-shrink: 0;
    font-size: 11px;
    gap: 4px;
  }
  /* Compact buttons on mobile */
  .topbar-actions .btn {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 12px;
    padding: 6px 10px;
  }
  .topbar-actions .btn-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
  }
  
  .main-content { padding: 16px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kpi-card { padding: 16px; }
  .kpi-card.c-total { grid-column: span 2; }
  .kpi-value { font-size: 24px; }
  
  .filter-bar { padding: 12px; }
  .filter-row.status-row { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; justify-content: flex-start; }
  .status-pill { flex-shrink: 0; white-space: nowrap; }
  .filter-row.action-row { flex-direction: column; align-items: stretch; gap: 12px; }
  /* Two-column grid for filter controls — saves vertical space (like the KPI chips) */
  .filter-row.action-row > div.flex { display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: 100%; gap: 10px; }
  .filter-row select, .filter-row input:not([type="checkbox"]):not([type="radio"]), #dash-date-range { width: 100% !important; max-width: 100%; min-width: 0; }
  /* The date+search group and the toggle group each take a full row, split 50/50 */
  .filter-row.action-row > div.flex > .filter-io,
  .filter-row.action-row > div.flex > .filter-toggles { grid-column: 1 / -1; }
  /* Equal halves for date + search, with matching size so they look uniform */
  .filter-io { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; align-items: stretch; }
  .filter-io-date { flex: none; }
  .filter-io > .search-input { width: 100% !important; min-width: 0 !important; max-width: none !important; padding: 8px 12px; font-size: 13px; }
  .filter-toggles { gap: 8px; }
  .filter-toggles > .toggle-pill { flex: 1 1 0; min-width: 0; justify-content: center; gap: 6px; padding: 6px 8px; font-size: 12px; }
  /* Smaller switch on mobile so the longer label ("Assigned to me") fits */
  .filter-toggles .switch { width: 30px; height: 16px; }
  .filter-toggles .switch .slider::before { height: 12px; width: 12px; }
  .filter-toggles .switch input:checked + .slider::before { transform: translateX(14px); }
  .filter-row.action-row > div.flex > div[style*="flex:1"] { display: none; }
  
  .overlay { 
    padding: 0;
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal::after {
    content: '';
    display: block;
    height: max(env(safe-area-inset-bottom), 32px);
    background: var(--surface);
  }
  .modal { 
    max-height: none;
    height: auto;
    width: 100% !important; 
    max-width: 100% !important;
    min-height: 100vh;
    border-radius: 0;
    border: none;
    display: flex; 
    flex-direction: column; 
    overflow: visible;
    flex-shrink: 0;
  }
  .modal-header { 
    padding: 14px 16px; 
    position: sticky;
    top: 0; 
    z-index: 20; 
    background: var(--surface); 
    border-bottom: 1px solid var(--border); 
    flex-shrink: 0; 
  }
  .modal-body { 
    padding: 0; 
    overflow: visible !important;
    flex: none;
  }
  
  .split-layout { display: flex; flex-direction: column; height: auto !important; overflow: visible !important; }
  .main-column, .side-column { 
    height: auto !important; 
    overflow: visible !important; 
    padding: 16px; 
    border-left: none; 
    width: 100%; 
    box-sizing: border-box;
    gap: 16px; 
  }
  .side-column { border-top: 1px solid var(--border); }
  .activity-log-wrapper { 
    flex: none !important; 
    height: auto !important; 
    overflow: visible !important; 
    min-height: 0 !important; 
    padding-bottom: 48px !important;
  }
  
  .split-form { grid-template-columns: 1fr; gap: 20px; }
  .form-section { padding: 16px; }
  
  .detail-side-by-side { flex-wrap: wrap; }
}

/* ─── CUSTOM FLATPICKR MONTH PICKER ─── */
.fp-month-btn {
  background: var(--bg) !important; border: 1px solid var(--border) !important;
  border-radius: 6px !important; color: var(--text) !important; font-weight: 600 !important;
  font-size: 13px !important; padding: 3px 8px !important; cursor: pointer !important;
  font-family: inherit !important;
}
.fp-month-btn:hover { background: var(--accent-transparent) !important; border-color: var(--accent) !important; color: var(--accent) !important; }
.fp-month-popup {
  position: fixed; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  z-index: 999999; box-shadow: 0 8px 24px rgba(0,0,0,0.4); min-width: 168px;
}
.fp-month-popup button {
  background: transparent !important; border: 1px solid transparent !important;
  border-radius: 4px !important; color: var(--text) !important; padding: 6px 4px !important;
  font-size: 12px !important; cursor: pointer !important; font-family: inherit !important;
  text-align: center !important; font-weight: 500 !important;
}
.fp-month-popup button:hover, .fp-month-popup button.active {
  background: var(--accent-transparent) !important; border-color: var(--accent) !important;
  color: var(--accent) !important; font-weight: 700 !important;
}

/* ─── KANBAN BOARD ─── */
.kanban-board { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 16px; align-items: flex-start; -webkit-overflow-scrolling: touch; }
.kanban-col { flex: 0 0 260px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; max-height: calc(100vh - 280px); }
.kanban-col-header { padding: 10px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.kanban-col-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.kanban-col-count { font-size: 11px; background: rgba(255,255,255,0.08); border-radius: 10px; padding: 1px 8px; color: var(--text-muted); }
.kanban-col-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; }
.kanban-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; cursor: pointer; transition: border-color 0.15s, transform 0.1s; }
.kanban-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.kanban-card-id { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--accent); font-weight: 600; margin-bottom: 4px; }
.kanban-card-title { font-size: 13px; font-weight: 500; line-height: 1.4; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kanban-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.kanban-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.kanban-empty { text-align: center; padding: 24px 12px; color: var(--text-muted); font-size: 12px; }
/* View toggle pills */
.view-toggle { display: flex; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.view-toggle-btn { padding: 5px 12px; font-size: 12px; background: transparent; border: none; color: var(--text-muted); cursor: pointer; transition: all 0.15s; }
.view-toggle-btn.active { background: var(--accent-transparent); color: var(--accent); font-weight: 600; }
.view-toggle-btn:hover:not(.active) { background: var(--surface-hover); color: var(--text); }
/* View switcher dropdown (styled to read as a button) */
.view-dropdown { width: 118px; padding: 6px 8px; font-size: 12px; font-weight: 600; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.view-dropdown:hover { background: var(--surface-hover); border-color: var(--accent); }
/* "⋯ More" actions popover */
.more-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; min-width: 180px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.35); padding: 4px; }
.more-menu button { display: block; width: 100%; text-align: left; padding: 8px 12px; font-size: 13px; background: transparent; border: none; border-radius: 6px; color: var(--text); cursor: pointer; white-space: nowrap; }
.more-menu button:hover { background: var(--surface-hover); color: var(--accent); }
/* Per-assignee status-count strip in team-board column headers */
.kanban-col-kpi { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.kanban-kpi-item { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.kanban-kpi-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
@media(max-width:768px) {
  .kanban-board { gap: 10px; padding-bottom: 12px; }
  .kanban-col { flex: 0 0 220px; max-height: calc(100vh - 320px); }
}

/* ─── PROJECT DETAIL ─── */
.proj-meta-lower { display: grid; grid-template-columns: 1fr 900px; gap: 50px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
@media (max-width: 640px) {
  .proj-meta-lower { grid-template-columns: 1fr; }
  .proj-attach-strip { flex-direction: row !important; overflow-x: auto; }
}

/* ════════════════════════════════════════════════════════════
   PHASE 1 UX — SLA, board extras, bulk, skeleton, mobile cards
   ════════════════════════════════════════════════════════════ */

/* ─── SLA badge + manager strip ─── */
.sla-badge { display:inline-flex; align-items:center; font-size:10px; font-weight:600; padding:2px 7px; border-radius:10px; white-space:nowrap; }
.sla-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px; }
.sla-stat { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--radius); padding:12px 14px; }
.sla-stat-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); }
.sla-stat-value { font-size:22px; font-weight:700; line-height:1.2; margin-top:2px; }
.sla-stat-sub { font-size:11px; color:var(--text-muted); margin-top:2px; }

/* ─── Bulk action bar (fixed bottom) ─── */
.bulk-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--accent); border-radius:var(--radius);
  box-shadow:0 4px 16px rgba(0,0,0,0.18); padding:10px 14px; margin-bottom:14px; }
.bulk-bar .bulk-count { font-size:13px; font-weight:700; color:var(--accent); white-space:nowrap; margin-right:2px; }
.bulk-bar select { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); padding:7px 10px; font-size:13px; min-width:150px; }
.bulk-bar .bulk-spacer { flex:1; }
.row-selected { outline:2px solid var(--accent); outline-offset:-2px; background:var(--accent-transparent) !important; }
.bulk-check { width:18px; height:18px; cursor:pointer; }

/* ─── Loading skeleton ─── */
@keyframes skel-shimmer { 0%{background-position:-400px 0;} 100%{background-position:400px 0;} }
.skel { border-radius:6px; background:linear-gradient(90deg, var(--border) 25%, rgba(255,255,255,0.06) 37%, var(--border) 63%); background-size:800px 100%; animation:skel-shimmer 1.4s ease infinite; }
.skel-wrap { padding:0; }
.skel-topbar { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border); }
.skel-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; padding:20px; }
.skel-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
.skel-table { padding:0 20px 20px; display:flex; flex-direction:column; gap:10px; }
.skel-row { display:flex; gap:16px; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
.skel-row .skel { flex-shrink:0; }

/* ─── MOBILE: dashboard table → compact 2x2 card (scoped to .cards-on-mobile only) ─── */
/* Card layout:  [Ticket ID]        [Status]
                 [Reported by]      [Assigned to]
   Tapping the card opens full ticket detail. Other columns hidden on mobile. */
@media(max-width:768px) {
  .cards-on-mobile { border:none; background:transparent; overflow:visible; margin-bottom:12px; }
  .cards-on-mobile table { display:block; width:100%; min-width:0; }   /* min-width:0 cancels the desktop 1000px floor */
  .cards-on-mobile thead { position:absolute; left:-9999px; }          /* hide header row, keep for a11y */
  .cards-on-mobile tbody { display:block; }
  .cards-on-mobile tr {
    display:grid; grid-template-columns:1fr auto; gap:10px 12px; align-items:start;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    margin-bottom:10px; padding:13px 14px; cursor:pointer;
  }
  .cards-on-mobile tr:active { border-color:var(--accent); }
  .cards-on-mobile tr:hover td { background:transparent; }             /* cancel desktop row-hover bg on touch */
  .cards-on-mobile td { display:block; border:none !important; padding:0; }
  /* Hide non-essential columns on mobile */
  .cards-on-mobile td[data-label="Team"],
  .cards-on-mobile td[data-label="State"],
  .cards-on-mobile td[data-label="Category"],
  .cards-on-mobile td[data-label="Description"],
  .cards-on-mobile td[data-label="Timeline"] { display:none; }
  /* Place the four key fields in a 2x2 grid */
  .cards-on-mobile td[data-label="ID"]          { grid-column:1; grid-row:1; }
  .cards-on-mobile td[data-label="Status"]      { grid-column:2; grid-row:1; justify-self:end; text-align:right; }
  .cards-on-mobile td[data-label="Reported By"] { grid-column:1; grid-row:2; }
  .cards-on-mobile td[data-label="Assigned To"] { grid-column:2; grid-row:2; justify-self:end; text-align:right; }
  /* Small labels only on the bottom row (ID and Status are self-evident) */
  .cards-on-mobile td[data-label="Reported By"]::before,
  .cards-on-mobile td[data-label="Assigned To"]::before {
    content:attr(data-label); display:block; font-size:9px; font-weight:600;
    text-transform:uppercase; letter-spacing:0.4px; color:var(--text-muted); margin-bottom:3px;
  }
  .cards-on-mobile td[data-label="ID"] .t-id { font-size:15px; }
  .cards-on-mobile td[data-label="ID"] .text-muted { font-size:11px; }
  .cards-on-mobile td[data-label="Status"] .sla-badge { margin-top:5px; }
  .bulk-bar { gap:8px; padding:9px 12px; }
  .bulk-bar select { flex:1 1 auto; min-width:0; }
  .bulk-bar .bulk-spacer { display:none; }
}

/* ─── Attachment row: file picker + camera button ─── */
.attach-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.attach-cam-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 14px; border:1px solid var(--border); background:rgba(255,255,255,0.02); border-radius:var(--radius); cursor:pointer; font-size:13px; color:var(--text); white-space:nowrap; }
.attach-cam-btn:hover { border-color:var(--accent); color:var(--accent); }
.attach-count { font-size:11px; color:var(--accent); font-weight:600; }

/* ─── Compact KPI bar (replaces tall SLA strip + KPI grid) ─── */
.kpi-bar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; align-items:stretch; }
.kpi-chip { display:flex; align-items:baseline; gap:8px; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--text-muted); border-radius:var(--radius); padding:9px 13px; min-width:96px; flex:1 1 auto; }
.kpi-chip-val { font-size:20px; font-weight:700; line-height:1; }
.kpi-chip-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; color:var(--text-muted); }
.kpi-divider { width:1px; background:var(--border); margin:2px 4px; align-self:stretch; }
@media(max-width:768px){
  .kpi-bar { gap:6px; }
  .kpi-chip { min-width:0; flex:1 1 calc(33.333% - 6px); padding:7px 9px; }
  .kpi-chip-val { font-size:16px; }
  .kpi-chip-label { font-size:9px; }
  .kpi-divider { display:none; }
}

/* ─── Clickable KPI chips (status + SLA filters) ─── */
.kpi-chip-btn { cursor:pointer; transition:background .15s ease, border-color .15s ease; user-select:none; }
.kpi-chip-btn:hover { background:rgba(255,255,255,0.05); }
.kpi-chip.active { background:rgba(255,255,255,0.06); }
/* Label-only variant shown to users without KPI-number permission — reads as a filter pill */
.kpi-chip.compact { padding:8px 14px; align-items:center; min-width:0; flex:0 1 auto; }
.kpi-chip.compact .kpi-chip-label { font-size:12px; text-transform:none; letter-spacing:0; color:var(--text); }
.kpi-chip.compact.active .kpi-chip-label { font-weight:700; }
@media(max-width:768px){
  .kpi-chip.compact { flex:0 1 auto; padding:7px 12px; }
}

/* ─── KPI coachmark (one-time clickable-hint) ─── */
.kpi-wrap { position:relative; }
.coachmark { position:absolute; left:50%; top:-52px; transform:translateX(-50%) translateY(6px); z-index:60;
  background:var(--accent); color:#04201a; font-weight:600; font-size:13px; padding:10px 14px; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.35); max-width:min(90vw,460px); text-align:center;
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; }
.coachmark.show { opacity:1; transform:translateX(-50%) translateY(0); }
.coachmark::after { content:''; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%);
  border-left:8px solid transparent; border-right:8px solid transparent; border-top:8px solid var(--accent); }
.kpi-help { cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--text-muted);
  border-radius:50%; width:22px; height:22px; font-size:12px; line-height:1; padding:0; vertical-align:middle; margin-left:8px; }
.kpi-help:hover { color:var(--accent); border-color:var(--accent); }

/* ─── Filter-applied mini toast (2s) ─── */
#evfin-filter-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(10px);
  background:var(--surface); border:1px solid var(--border); color:var(--text); padding:10px 16px; border-radius:999px;
  font-size:13px; box-shadow:0 8px 24px rgba(0,0,0,.35); opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease; z-index:9999; white-space:nowrap; max-width:90vw; overflow:hidden; text-overflow:ellipsis; }
#evfin-filter-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ─── Persistent active-filter bar (safeguard) ─── */
.active-filter-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--accent-transparent); border:1px solid var(--accent); border-radius:var(--radius);
  padding:8px 12px; margin:10px 0 4px; font-size:13px; }
.active-filter-bar .aff-label { color:var(--accent); font-weight:600; }
.active-filter-bar .aff-pill { background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:3px 10px; display:inline-flex; align-items:center; gap:6px; }
.active-filter-bar .aff-x { cursor:pointer; opacity:.7; }
.active-filter-bar .aff-x:hover { opacity:1; }
.active-filter-bar .aff-clear { margin-left:auto; cursor:pointer; color:var(--accent); text-decoration:underline; background:none; border:none; font-size:13px; white-space:nowrap; }
@media(max-width:768px){
  .coachmark { font-size:12px; padding:8px 12px; top:-58px; }
  .active-filter-bar .aff-clear { margin-left:0; }
}

/* ─── CEO master dashboard ─── */
.ceo-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:820px){ .ceo-grid { grid-template-columns:1fr; } }
.ceo-grid .panel, .panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
.sticky-kpi { position:sticky; top:0; z-index:30; background:var(--bg); margin:0 -24px; padding:14px 24px 12px; border-bottom:1px solid var(--border); }
.main-content.kpi-flush { padding-top:0; }
.main-content.kpi-flush > .kpi-page-head { padding-top:18px; }
@media(max-width:768px){ .sticky-kpi { margin:0 -16px; padding:12px 16px 10px; } .main-content.kpi-flush > .kpi-page-head { padding-top:14px; } }
.ceo-ctl { background:transparent; border:1px solid var(--border); border-radius:var(--radius); padding:8px 10px; color:var(--text); font-size:13px; }

/* ─── CEO / Overview dashboard — mobile ─── */
@media (max-width: 768px) {
  /* Cancel the global 1000px table floor so the scorecard fits the viewport
     (the .table-container wrapper still scrolls horizontally if a row is wider). */
  .ceo-scorecard table { min-width: 0; font-size: 12px; }
  .ceo-scorecard th, .ceo-scorecard td { padding: 9px 7px; }
  /* Header: title and controls stack cleanly */
  .ceo-header-row { gap: 8px; }
  .ceo-header-row > div:last-child { width: 100%; }
}

/* CEO Company Overview — compact KPI grid on mobile so the sticky bar doesn't
   dominate the screen. Desktop/web layout is unchanged. Scoped to .ceo-kpi-grid
   so other .kpi-card uses (ageing, attention) are unaffected. */
@media (max-width: 768px) {
  .ceo-kpi-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
  .ceo-kpi-grid .kpi-card { padding: 7px 8px !important; }
  .ceo-kpi-grid .kpi-title { font-size: 8.5px !important; margin-bottom: 2px !important; line-height: 1.15; }
  .ceo-kpi-grid .kpi-value { font-size: 16px !important; }
  .ceo-kpi-grid .kpi-sub { display: none !important; }
}

/* ── Mobile fit: Escalations & Projects header rows were forcing the page
   wider than the viewport (title + Quick start + Saved views + Raise +
   Export in one no-wrap row), which let the whole document pan horizontally.
   Fix: clamp panning at the root, and let header action rows wrap. ── */
html { overflow-x: hidden; }
@media (max-width: 768px) {
  .kpi-page-head { flex-wrap: wrap; row-gap: 10px; }
  .kpi-page-head > div { flex-wrap: wrap; row-gap: 8px; max-width: 100%; }
  /* esc/proj date-range + search inputs stretch like the tickets filter bar */
  #esc-date-range, #proj-date-range, #req-date-range {
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
  }
  .filter-bar .search-input { min-width: 0 !important; max-width: 100% !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   MOTION LAYER — balanced, purposeful. Self-disables under reduced-motion.
   ════════════════════════════════════════════════════════════════════════ */
@keyframes fadeInUp   { from { opacity:0; transform:translateY(8px); }  to { opacity:1; transform:none; } }
@keyframes scaleIn    { from { opacity:0; transform:scale(.96); }        to { opacity:1; transform:scale(1); } }
@keyframes popPulse   { 0%{transform:scale(1);} 35%{transform:scale(1.12);} 100%{transform:scale(1);} }
@keyframes rowFlash   { 0%{background:rgba(26,214,232,.16);} 100%{background:transparent;} }
@keyframes overlayIn  { from{opacity:0;} to{opacity:1;} }
@keyframes confettiFall { to { transform:translateY(105vh) rotate(var(--cf-r,540deg)); opacity:0; } }

/* App view transition: each top-level render fades content up a touch */
.app-container { animation: fadeInUp .28s ease both; }

/* Modal: overlay fades, card scales in */
.modal-overlay { animation: overlayIn .2s ease both; }
.modal { animation: scaleIn .26s cubic-bezier(.2,.8,.25,1) both; }

/* Toast: keep slideUp, add a left accent bar that draws attention */
.toast { border-left: 3px solid var(--accent); }
.toast-error { border-left-color: var(--red); }

/* Table rows / kanban cards stagger in (cheap: only animates transform+opacity) */
tbody tr { animation: fadeInUp .22s ease both; }
.kanban-card { animation: fadeInUp .24s ease both; }
/* Stagger the first handful; later rows just appear (keeps long lists snappy) */
tbody tr:nth-child(1){animation-delay:.00s} tbody tr:nth-child(2){animation-delay:.03s}
tbody tr:nth-child(3){animation-delay:.06s} tbody tr:nth-child(4){animation-delay:.09s}
tbody tr:nth-child(5){animation-delay:.12s} tbody tr:nth-child(6){animation-delay:.15s}
tbody tr:nth-child(7){animation-delay:.18s} tbody tr:nth-child(8){animation-delay:.21s}

/* Button press feedback */
.btn:active { transform: translateY(1px) scale(.985); }
.btn-primary, .btn.go { transition: all .2s, box-shadow .2s; }
.btn-primary:hover { box-shadow: 0 4px 14px rgba(26,214,232,.28); }

/* KPI chips: lift on hover, and pop when their value changes (JS toggles .kpi-pop) */
.kpi-chip { transition: transform .15s ease, box-shadow .15s ease; }
.kpi-chip-btn:hover { transform: translateY(-2px); }
.kpi-chip-val.kpi-pop { animation: popPulse .45s ease; display:inline-block; }

/* A row whose status just changed (JS adds .row-just-changed) */
.row-just-changed { animation: rowFlash 1.2s ease; }

/* Nav buttons + status pills */
.btn-secondary:hover { transform: translateY(-1px); }
.status-pill:active { transform: scale(.96); }

/* Login card entrance */
.login-card { animation: scaleIn .4s cubic-bezier(.2,.8,.25,1) both; }

/* Confetti (resolve celebration) — pure CSS pieces positioned by JS */
.cf-layer { position:fixed; inset:0; pointer-events:none; z-index:99997; overflow:hidden; }
.cf-piece { position:absolute; top:-14px; width:9px; height:14px; border-radius:1px;
  animation: confettiFall var(--cf-d,2.4s) cubic-bezier(.15,.6,.5,1) forwards; }

/* ── Respect the user's OS setting: motion off = everything instant ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .cf-layer { display:none !important; }
}

/* ── User hover contact card (2s dwell on a .uhover name) ── */
.uhover { cursor: help; border-bottom: 1px dotted transparent; transition: border-color .15s; }
.uhover:hover { border-bottom-color: var(--text-muted); }
/* Anchored quick-guide tooltips (triggered by the "?" next to the page title) */
.guide-pop { position: fixed; z-index: 99999; max-width: 250px; background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,0.45); padding: 10px 12px; display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: var(--text); animation: guidePopIn .18s ease; }
.guide-pop-body { flex: 1; }
.guide-pop-x { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px; flex-shrink: 0; }
.guide-pop-x:hover { color: var(--red); }
.guide-highlight { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; transition: outline-color .15s; }
@keyframes guidePopIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.user-hovercard {
  position: fixed; z-index: 99998; min-width: 220px; max-width: 300px;
  background: var(--surface, #1a1f2e); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  animation: scaleIn .14s ease both; font-size: 13px;
}
.user-hovercard .uhc-name { font-weight: 600; font-size: 14px; color: var(--text); }
.user-hovercard .uhc-desg { font-size: 11px; color: var(--text-muted); text-transform: capitalize; margin-bottom: 8px; }
.user-hovercard .uhc-row {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
  color: var(--accent); text-decoration: none; word-break: break-all;
}
.user-hovercard a.uhc-row:hover .uhc-txt { text-decoration: underline; }
.user-hovercard .uhc-row.uhc-muted { color: var(--text-muted); }
.user-hovercard .uhc-ic { width: 16px; text-align: center; flex-shrink: 0; }
.user-hovercard .uhc-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--orange); background: rgba(245,165,36,.14); padding: 1px 6px; border-radius: 6px; vertical-align: middle; margin-left: 4px; }

/* ── Mobile bottom-sheet variant of the contact card ── */
.uhc-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 99997; animation: overlayIn .15s ease both; }
.user-hovercard.uhc-sheet {
  position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto !important;
  width: 100%; max-width: 100%; min-width: 0;
  border-radius: 16px 16px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  z-index: 99998; animation: fadeInUp .2s ease both;
}
.user-hovercard.uhc-sheet .uhc-name { font-size: 16px; }
.user-hovercard.uhc-sheet .uhc-row { padding: 10px 0; font-size: 15px; }
.user-hovercard.uhc-sheet .uhc-close {
  margin-top: 12px; width: 100%; padding: 11px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text-muted); border-radius: 10px; font-size: 14px; cursor: pointer;
}