/* Tickets screen — "Glass HUD Command Center" visual system, matching
   the dashboard and jobs list (see dashboard.css for the canonical token
   definitions). Scoped entirely to #screen-tickets.tickets-hud so no other
   screen is affected. Token values are mirrored 1:1 from dashboard.css /
   jobs.css rather than shared via a common base, following the same
   self-contained per-screen pattern already established. dashRise/dashPulse
   keyframes are reused by name from dashboard.css (always loaded on this
   page) rather than redefined here. */

#screen-tickets.tickets-hud {
  --dash-bg: #05070B;
  --dash-surface: rgba(18, 24, 34, 0.55);
  --dash-border: rgba(130, 200, 255, 0.10);
  --dash-border-strong: rgba(130, 200, 255, 0.28);
  --dash-cyan: #22D3EE;
  --dash-amber: #FBBF24;
  --dash-red: #FF4757;
  --dash-teal: #34D399;
  --dash-text: #E7EDF5;
  --dash-text-muted: #8B99AC;
  --dash-font-display: 'Chakra Petch', sans-serif;
  --dash-font-mono: 'JetBrains Mono', monospace;
  --dash-font-body: 'Manrope', sans-serif;

  --bg-card: var(--dash-surface);
  --bg-input: rgba(255, 255, 255, 0.05);
  --border: var(--dash-border);
  --border-light: var(--dash-border-strong);
  --text: var(--dash-text);
  --text-muted: var(--dash-text-muted);
  --accent: var(--dash-cyan);
  --accent-light: #67e2f5;
  --accent-dark: #0bb8d9;
  --success: var(--dash-teal);
  --warning: var(--dash-amber);
  --danger: var(--dash-red);
  --info: var(--dash-cyan);
  --radius: 14px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.03) inset;

  position: relative;
  isolation: isolate;
  font-family: var(--dash-font-body);
  color: var(--dash-text);
  background-color: var(--dash-bg);
  background-image:
    radial-gradient(ellipse 900px 520px at 12% -12%, rgba(34, 211, 238, 0.10), transparent 60%),
    radial-gradient(ellipse 700px 480px at 105% 0%, rgba(251, 191, 36, 0.06), transparent 55%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0px, rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 3px);
  background-size: auto, auto, 100% 3px;
  background-repeat: no-repeat, no-repeat, repeat;
  border-radius: 18px;
  padding: 20px;
}

[data-theme="light"] #screen-tickets.tickets-hud {
  --dash-bg: #F4F7FB;
  --dash-surface: rgba(255, 255, 255, 0.72);
  --dash-border: rgba(15, 23, 42, 0.10);
  --dash-border-strong: rgba(15, 23, 42, 0.22);
  --dash-cyan: #0E7490;
  --dash-amber: #B45309;
  --dash-red: #B91C1C;
  --dash-teal: #047857;
  --dash-text: #0F172A;
  --dash-text-muted: #475569;

  --bg-card: var(--dash-surface);
  --bg-input: rgba(15, 23, 42, 0.035);
  --border: var(--dash-border);
  --border-light: var(--dash-border-strong);
  --text: var(--dash-text);
  --text-muted: var(--dash-text-muted);
  --accent: var(--dash-cyan);
  --accent-light: #38BDF8;
  --accent-dark: #075E6D;
  --success: var(--dash-teal);
  --warning: var(--dash-amber);
  --danger: var(--dash-red);
  --info: var(--dash-cyan);
  --radius: 14px;
  --shadow: 0 8px 28px rgba(15, 23, 42, 0.10), 0 1px 0 rgba(255, 255, 255, 0.6) inset;

  color: var(--dash-text);
  background-color: var(--dash-bg);
  background-image:
    radial-gradient(ellipse 900px 520px at 12% -12%, rgba(14, 116, 144, 0.07), transparent 60%),
    radial-gradient(ellipse 700px 480px at 105% 0%, rgba(180, 83, 9, 0.045), transparent 55%),
    repeating-linear-gradient(180deg, rgba(15, 23, 42, 0.012) 0px, rgba(15, 23, 42, 0.012) 1px, transparent 1px, transparent 3px);
}

[data-theme="light"] #screen-tickets.tickets-hud .tickets-hero::before {
  background: radial-gradient(circle, rgba(14, 116, 144, 0.12), transparent 70%);
}

[data-theme="light"] #screen-tickets.tickets-hud .dash-hero-value {
  background: linear-gradient(180deg, #0F172A 0%, var(--dash-cyan) 140%);
  -webkit-background-clip: text;
  background-clip: text;
}

[data-theme="light"] #screen-tickets.tickets-hud .dash-alert-chip {
  border-color: rgba(185, 28, 28, 0.32);
  background: rgba(185, 28, 28, 0.08);
}

[data-theme="light"] #screen-tickets.tickets-hud .dash-hero-link:hover {
  background: rgba(14, 116, 144, 0.08);
}

[data-theme="light"] #screen-tickets.tickets-hud .badge-cyan,
[data-theme="light"] #screen-tickets.tickets-hud .badge-blue {
  background: rgba(14, 116, 144, 0.10);
  border-color: rgba(14, 116, 144, 0.28);
}

[data-theme="light"] #screen-tickets.tickets-hud .badge-orange {
  background: rgba(180, 83, 9, 0.10);
  border-color: rgba(180, 83, 9, 0.28);
}

[data-theme="light"] #screen-tickets.tickets-hud .badge-red {
  background: rgba(185, 28, 28, 0.10);
  border-color: rgba(185, 28, 28, 0.28);
}

[data-theme="light"] #screen-tickets.tickets-hud .badge-green {
  background: rgba(4, 120, 87, 0.10);
  border-color: rgba(4, 120, 87, 0.28);
}

[data-theme="light"] #screen-tickets.tickets-hud .badge-grey {
  background: rgba(71, 85, 105, 0.08);
  border-color: rgba(71, 85, 105, 0.20);
}

[data-theme="light"] #screen-tickets.tickets-hud .table-wrapper tbody tr:hover {
  background: rgba(14, 116, 144, 0.06);
}

[data-theme="light"] #screen-tickets.tickets-hud .dash-stage-col:hover {
  background: rgba(14, 116, 144, 0.05);
}

[data-theme="light"] #screen-tickets.tickets-hud .kanban-items {
  background: var(--bg-card);
}

@media (prefers-reduced-motion: no-preference) {
  #screen-tickets.tickets-hud {
    animation: dashMeshDrift 24s ease-in-out infinite alternate;
  }
}

/* ── Typography ── */
#screen-tickets.tickets-hud h3,
#screen-tickets.tickets-hud .dash-heading,
#screen-tickets.tickets-hud .dash-display {
  font-family: var(--dash-font-display);
  letter-spacing: 0.01em;
}

#screen-tickets.tickets-hud .dash-figure {
  font-family: var(--dash-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Glass panels ── */
#screen-tickets.tickets-hud .card {
  background: var(--bg-card);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
  position: relative;
}

/* ── Load-in sequence — reuses dashRise (defined in dashboard.css) ── */
@media (prefers-reduced-motion: no-preference) {
  #screen-tickets.tickets-hud .tickets-anim {
    animation: dashRise 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  #screen-tickets.tickets-hud .tickets-hero { animation-delay: 0ms; }
  #screen-tickets.tickets-hud .tickets-breakdown-card { animation-delay: 70ms; }
  #screen-tickets.tickets-hud .tickets-filter-card { animation-delay: 120ms; }
  #screen-tickets.tickets-hud .tickets-controls-bar { animation-delay: 170ms; }
  #screen-tickets.tickets-hud .tickets-table-card { animation-delay: 220ms; }
  #screen-tickets.tickets-hud .tickets-kanban-panel { animation-delay: 220ms; }
}

@media (prefers-reduced-motion: reduce) {
  #screen-tickets.tickets-hud .tickets-anim { animation: none !important; }
}

/* ── Hero panel: open tickets anchors the screen, SLA breaches dominate as
   an alert chip, rail shows the New/In Progress/Resolved breakdown ── */
#screen-tickets.tickets-hud .tickets-hero {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 28px;
  padding: 28px 32px;
  overflow: hidden;
  margin-bottom: 16px;
}

#screen-tickets.tickets-hud .tickets-hero::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -8%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.20), transparent 70%);
  pointer-events: none;
}

#screen-tickets.tickets-hud .tickets-hero-primary { flex: 1 1 260px; min-width: 220px; }

#screen-tickets.tickets-hud .dash-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--dash-cyan);
  margin-bottom: 10px;
}

#screen-tickets.tickets-hud .dash-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dash-cyan);
  box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.6);
}

@media (prefers-reduced-motion: no-preference) {
  #screen-tickets.tickets-hud .dash-live-dot { animation: dashPulse 2.2s ease-out infinite; }
}

#screen-tickets.tickets-hud .dash-hero-value {
  font-weight: 700;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 1;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #ffffff 0%, var(--dash-cyan) 140%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--dash-font-display);
}

#screen-tickets.tickets-hud .dash-hero-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 4px;
}

#screen-tickets.tickets-hud .dash-hero-sub { font-size: 15px; color: var(--text); margin-top: 6px; }

#screen-tickets.tickets-hud .dash-hero-rail {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  border-left: 1px solid var(--border);
  padding-left: 28px;
  min-width: 190px;
}

#screen-tickets.tickets-hud .dash-rail-item { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
#screen-tickets.tickets-hud .dash-rail-count { font-size: 19px; font-weight: 700; color: var(--text); }
#screen-tickets.tickets-hud .dash-rail-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }

@media (max-width: 1100px) {
  #screen-tickets.tickets-hud .tickets-hero { flex-direction: column; }
  #screen-tickets.tickets-hud .dash-hero-rail {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border-left: none;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 20px;
    min-width: 0;
    width: 100%;
  }
}

#screen-tickets.tickets-hud .dash-alert-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dash-red);
  border: 1px solid rgba(255, 71, 87, 0.35);
  background: rgba(255, 71, 87, 0.08);
  padding: 5px 10px;
  border-radius: 999px;
}

#screen-tickets.tickets-hud .dash-hero-link {
  font-size: 12px;
  color: var(--dash-cyan);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 999px;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}

#screen-tickets.tickets-hud .dash-hero-link:hover {
  background: rgba(34, 211, 238, 0.08);
  border-color: var(--dash-cyan);
}

#screen-tickets.tickets-hud .tickets-hero-cta {
  font-size: 13px;
  font-weight: 700;
  color: #05070B;
  background: var(--dash-cyan);
  text-decoration: none;
  border: 1px solid var(--dash-cyan);
  padding: 8px 18px;
  border-radius: 999px;
  text-align: center;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}

#screen-tickets.tickets-hud .tickets-hero-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* ── Stage/status breakdown: horizontal cards with vertical dividers,
   same component as the dashboard's stage widgets (dash-stage-row /
   dash-stage-col), scoped here to #screen-tickets. No "Value" line —
   tickets have no natural per-bucket £ metric, so count + % only. ── */
#screen-tickets.tickets-hud .tickets-breakdown-card { padding: 20px; margin-bottom: 16px; }

#screen-tickets.tickets-hud .dash-stage-row {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}

#screen-tickets.tickets-hud .dash-stage-col {
  flex: 1 1 110px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 16px;
  border-left: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s ease;
}

#screen-tickets.tickets-hud .dash-stage-col:first-child {
  border-left: none;
  padding-left: 2px;
}

#screen-tickets.tickets-hud .dash-stage-col:hover { background: var(--bg-input); }

#screen-tickets.tickets-hud .dash-stage-top { display: flex; align-items: center; gap: 8px; }
#screen-tickets.tickets-hud .dash-stage-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
#screen-tickets.tickets-hud .dash-stage-count { font-size: 24px; font-weight: 700; color: var(--text); font-family: var(--dash-font-mono); }
#screen-tickets.tickets-hud .dash-stage-label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
#screen-tickets.tickets-hud .dash-stage-pct { font-size: 12px; font-weight: 700; font-family: var(--dash-font-mono); margin-top: 4px; }

@media (max-width: 640px) {
  #screen-tickets.tickets-hud .dash-stage-col {
    flex: 1 1 45%;
    border-left: none;
    border-top: 1px solid var(--border);
    padding: 12px 4px 4px;
  }
  #screen-tickets.tickets-hud .dash-stage-col:first-child { padding-top: 4px; border-top: none; }
}

/* ── Search + filter bar: one row of pill controls that wraps, with the
   search field taking whatever width is left over. Sits under the status
   breakdown so the queue can be narrowed before scrolling anywhere. ── */
#screen-tickets.tickets-hud .tickets-filter-card { padding: 16px 20px; margin-bottom: 16px; }

#screen-tickets.tickets-hud .tickets-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* flex-basis keeps the search field on the same line as the selects on a wide
   screen, and drops it to a full-width row of its own once they no longer fit. */
#screen-tickets.tickets-hud .tickets-search { flex: 1 1 260px; min-width: 200px; }

#screen-tickets.tickets-hud .tickets-search input {
  border-radius: 999px;
  font-family: var(--dash-font-body);
}

#screen-tickets.tickets-hud .tickets-filter-row .form-control {
  width: auto;
  min-width: 140px;
  font-size: 12px;
  padding: 8px 14px;
}

#screen-tickets.tickets-hud .tickets-filter-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

#screen-tickets.tickets-hud .tickets-filter-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 12px;
}

@media (max-width: 640px) {
  #screen-tickets.tickets-hud .tickets-filter-row .form-control { flex: 1 1 140px; min-width: 0; }
  #screen-tickets.tickets-hud .tickets-search { flex: 1 1 100%; }
}

/* ── Controls bar: view toggle + Check Emails ── */
#screen-tickets.tickets-hud .tickets-controls-bar { margin-bottom: 16px; }

#screen-tickets.tickets-hud .form-control {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  font-family: var(--dash-font-body);
}

#screen-tickets.tickets-hud .form-control:focus {
  outline: none;
  border-color: var(--dash-cyan);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
}

/* ── Buttons inside the HUD scope pick up the accent family ── */
#screen-tickets.tickets-hud .btn-primary {
  background: var(--dash-cyan);
  border-color: var(--dash-cyan);
  color: #05070B;
}

#screen-tickets.tickets-hud .btn-secondary {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
}

/* ── List view: table card ── */
#screen-tickets.tickets-hud .tickets-table-card { padding: 0; overflow: hidden; }

#screen-tickets.tickets-hud .table-wrapper table {
  border-collapse: separate;
  border-spacing: 0;
}

#screen-tickets.tickets-hud .table-wrapper thead th {
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border-light);
  padding: 12px 14px;
  white-space: nowrap;
}

#screen-tickets.tickets-hud .table-wrapper tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.12s ease;
}

#screen-tickets.tickets-hud .table-wrapper tbody tr:hover { background: rgba(34, 211, 238, 0.04); }

#screen-tickets.tickets-hud .table-wrapper tbody td {
  padding: 11px 14px;
  color: var(--text);
  font-size: 13px;
}

/* ── Kanban view: glass column surfaces + HUD semantic header colors.
   The header colors are set directly in index.html via var() references
   (cyan family for new/open/in_progress, amber for pending, teal for
   resolved, grey for closed) so they already resolve correctly here —
   this block only handles column chrome/surface. ── */
#screen-tickets.tickets-hud .kanban-col {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

#screen-tickets.tickets-hud .kanban-header {
  font-family: var(--dash-font-display);
  letter-spacing: 0.02em;
}

#screen-tickets.tickets-hud .kanban-items {
  background: var(--bg-card) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border);
  border-top: none;
}

#screen-tickets.tickets-hud .kanban-items .card {
  background: var(--bg-input);
}

/* ── Badges: same semantic remap as the dashboard/jobs —
   cyan=live/in-progress, amber=pending/awaiting, red=urgent/overdue,
   teal=resolved/done, grey=closed/neutral ── */
#screen-tickets.tickets-hud .badge {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

#screen-tickets.tickets-hud .badge-cyan,
#screen-tickets.tickets-hud .badge-blue {
  background: rgba(34, 211, 238, 0.12);
  color: var(--dash-cyan);
  border-color: rgba(34, 211, 238, 0.30);
}

#screen-tickets.tickets-hud .badge-orange {
  background: rgba(251, 191, 36, 0.12);
  color: var(--dash-amber);
  border-color: rgba(251, 191, 36, 0.30);
}

#screen-tickets.tickets-hud .badge-red {
  background: rgba(255, 71, 87, 0.12);
  color: var(--dash-red);
  border-color: rgba(255, 71, 87, 0.30);
}

#screen-tickets.tickets-hud .badge-green {
  background: rgba(52, 211, 153, 0.12);
  color: var(--dash-teal);
  border-color: rgba(52, 211, 153, 0.30);
}

#screen-tickets.tickets-hud .badge-grey {
  background: rgba(139, 153, 172, 0.10);
  color: var(--dash-text-muted);
  border-color: rgba(139, 153, 172, 0.22);
}