/* ════════════════════════════════════════════════════════════════════
   SUPPORT TICKET SYSTEM
   ════════════════════════════════════════════════════════════════════ */

/* ── Priority badge (inline chip) ───────────────────────────────── */
.priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
}
.priority-badge.priority-critical { background: #fee2e2; color: #b91c1c; }
.priority-badge.priority-high     { background: #ffedd5; color: #c2410c; }
.priority-badge.priority-medium   { background: #dbeafe; color: #1d4ed8; }
.priority-badge.priority-low      { background: #dcfce7; color: #15803d; }

/* ── Header eyebrow row (ID + badge inline) ─────────────────────── */
.support-header-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

/* ── Command strip ──────────────────────────────────────────────── */
.support-command-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.support-command-grid .panel {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  position: relative;
  border-radius: 18px;
  transition: box-shadow .15s, transform .15s;
}
.support-command-grid .panel:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(20,31,57,.09); }
.support-command-grid .panel:focus-within { box-shadow: 0 0 0 3px rgba(109,93,252,.18); }

/* Card head — icon + label */
.scard-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.scard-head svg { width: 13px; height: 13px; flex: none; }

.scard-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}

.scard-sub {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
}

/* SLA card — gradient by tone */
.support-sla-card {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border-color: rgba(34,197,94,.2) !important;
}
.support-sla-card .scard-head svg { color: #16a34a; }

.sla-amber.support-sla-card {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border-color: rgba(245,158,11,.2) !important;
}
.sla-amber.support-sla-card .scard-head svg { color: #d97706; }

.sla-red.support-sla-card {
  background: linear-gradient(135deg, #fff5f5, #fee2e2);
  border-color: rgba(239,68,68,.2) !important;
}
.sla-red.support-sla-card .scard-head svg { color: #dc2626; }

.sla-muted.support-sla-card {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}

/* Route card */
.support-route-card {
  background: linear-gradient(135deg, #faf5ff, #ede9fe);
  border-color: rgba(109,93,252,.15) !important;
}
.support-route-card .scard-head svg { color: var(--purple); }

/* Risk card — gradient by priority */
.support-risk-card { background: linear-gradient(135deg, #fffbeb, #fef3c7); border-color: rgba(245,158,11,.2) !important; }
.support-risk-card .scard-head svg { color: #d97706; }
.support-risk-card.priority-critical { background: linear-gradient(135deg, #fff5f5, #fee2e2); border-color: rgba(239,68,68,.2) !important; }
.support-risk-card.priority-critical .scard-head svg { color: #dc2626; }
.support-risk-card.priority-high { background: linear-gradient(135deg, #fff7ed, #ffedd5); border-color: rgba(249,115,22,.2) !important; }
.support-risk-card.priority-high .scard-head svg { color: #ea580c; }
.support-risk-card.priority-medium { background: linear-gradient(135deg, #eff6ff, #dbeafe); border-color: rgba(59,130,246,.15) !important; }
.support-risk-card.priority-medium .scard-head svg { color: #2563eb; }
.support-risk-card.priority-low { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border-color: rgba(34,197,94,.15) !important; }
.support-risk-card.priority-low .scard-head svg { color: #16a34a; }

/* Rating card */
.support-rating-card {
  background: linear-gradient(135deg, #fefce8, #fef9c3);
  border-color: rgba(234,179,8,.2) !important;
}
.support-rating-card .scard-head svg { color: #ca8a04; }

/* ── SLA progress bar ───────────────────────────────────────────── */
.support-progress {
  height: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  overflow: hidden;
  margin-top: auto;
}
.support-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #16a34a, #84cc16);
  transition: width .5s ease;
}
.sla-amber.support-sla-card .support-progress i { background: linear-gradient(90deg, #d97706, #f59e0b); }
.sla-red.support-sla-card   .support-progress i { background: linear-gradient(90deg, #b91c1c, #ef4444); }
.sla-muted.support-sla-card .support-progress i { background: #94a3b8; }

/* ── Layout ─────────────────────────────────────────────────────── */
.ticket-detail-layout main { min-width: 0; }

/* Panel h2 icons */
.ticket-detail-layout .panel-header h2 {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ticket-detail-layout .panel-header h2 svg {
  width: 14px;
  height: 14px;
  color: var(--purple);
  opacity: .8;
  flex: none;
}

/* ── Conversation thread ─────────────────────────────────────────── */
.support-thread-list article {
  align-items: flex-start;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid transparent;
  transition: background .12s;
  margin: 0 4px 4px;
}
.support-thread-list article.internal-note {
  background: #fffbeb;
  border-color: rgba(245,158,11,.2);
}

/* Internal badge */
.internal-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  background: #fef3c7;
  color: #92400e;
}
.internal-badge svg { width: 10px; height: 10px; }

/* Thread empty state */
.thread-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 16px;
  text-align: center;
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
}
.thread-empty svg { width: 30px; height: 30px; color: #cbd5e1; }

/* ── Reply form ─────────────────────────────────────────────────── */
.support-reply-form {
  border-top: 1px solid var(--line);
  padding: 16px;
  margin-top: 4px;
}

/* ── Locked / view-only notes ───────────────────────────────────── */
.support-locked-note {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 8px 16px 16px;
  padding: 12px 14px;
  border: 1px solid #fde68a;
  border-radius: 14px;
  background: #fffbeb;
  color: #92400e;
  font-weight: 800;
  font-size: 12px;
}
.support-locked-note.support-view-only {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}
.support-locked-note svg { width: 16px; height: 16px; flex: none; }

/* ── Assignment / rating buttons ────────────────────────────────── */
.support-assignment-form button,
.support-rating-form button { width: 100%; justify-content: center; }

/* ── Detail DL ──────────────────────────────────────────────────── */
.support-detail-dl { display: grid; gap: 0; }
.support-detail-dl > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
}
.support-detail-dl > div:last-child { border-bottom: 0; }
.support-detail-dl dt { font-size: 11px; font-weight: 700; color: var(--muted); }
.support-detail-dl dd { font-size: 12px; font-weight: 700; color: var(--ink); text-align: right; margin: 0; }

/* ── Response team list ─────────────────────────────────────────── */
.support-team-list { display: grid; gap: 8px; padding: 0 16px 16px; }
.support-team-list span {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcff;
}
.support-team-list strong { font-size: 12px; }
.support-team-list small { grid-column: 2; color: var(--muted); font-weight: 700; font-size: 10px; }
.avatar-sm { width: 30px; height: 30px; font-size: 11px; }

/* ── Rating widget ──────────────────────────────────────────────── */
.rating-choice-list {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.rating-choice-list li { margin: 0; }
.rating-choice-list label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcff;
  font-weight: 900;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.rating-choice-list label:hover { background: #f7f5ff; border-color: #c9c2ff; }
.rating-choice-list label:focus-within { outline: 2px solid var(--purple); outline-offset: 2px; }
.rating-choice-list input { accent-color: var(--purple); }

/* ── Support module dashboard queue ─────────────────────────────── */
.support-dashboard-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}

.support-queue-list { display: grid; gap: 8px; padding: 0 14px 14px; }
.support-queue-list a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcff;
  color: inherit;
  text-decoration: none;
  transition: background .12s, border-color .12s, transform .1s;
}
.support-queue-list a:hover { border-color: #c9c2ff; background: #f7f5ff; transform: translateX(2px); }
.support-queue-list a:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; border-color: rgba(109,93,252,.4); }
.support-queue-list strong { display: block; font-size: 11px; }
.support-queue-list small { display: block; color: var(--muted); font-weight: 700; font-size: 10px; }

.support-queue-empty {
  padding: 18px;
  margin: 0 14px 14px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  color: var(--muted);
  font-weight: 800;
  font-size: 11px;
  text-align: center;
}

/* ── KPI tiles (module view) ────────────────────────────────────── */
.support-kpi-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.support-kpi-list span { padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: #fbfcff; }
.support-kpi-list strong { display: block; font-size: 22px; color: var(--ink); }

/* ── Dark mode ──────────────────────────────────────────────────── */
html[data-theme-mode="dark"] .support-progress { background: #263145; }
html[data-theme-mode="dark"] .support-locked-note { background: rgba(180,80,0,.18); border-color: rgba(180,120,0,.35); color: #fbbf24; }
html[data-theme-mode="dark"] .support-locked-note.support-view-only { background: rgba(30,60,120,.2); border-color: rgba(59,130,246,.25); color: #93c5fd; }
html[data-theme-mode="dark"] .support-thread-list article.internal-note { background: rgba(120,60,0,.2); border-color: rgba(180,120,0,.25); }
html[data-theme-mode="dark"] .internal-badge { background: rgba(180,80,0,.25); color: #fbbf24; }
html[data-theme-mode="dark"] .support-team-list span,
html[data-theme-mode="dark"] .rating-choice-list label,
html[data-theme-mode="dark"] .support-queue-list a,
html[data-theme-mode="dark"] .support-kpi-list span { background: #172033; border-color: var(--line); }
html[data-theme-mode="dark"] .support-queue-list a:hover { background: #1e293b; border-color: rgba(109,93,252,.5); }
html[data-theme-mode="dark"] .rating-choice-list label:hover { background: rgba(109,93,252,.15); border-color: rgba(109,93,252,.4); }
/* Override gradient backgrounds in dark mode without !important — higher specificity wins */
html[data-theme-mode="dark"] .support-command-grid .support-sla-card,
html[data-theme-mode="dark"] .support-command-grid .support-risk-card,
html[data-theme-mode="dark"] .support-command-grid .support-route-card,
html[data-theme-mode="dark"] .support-command-grid .support-rating-card,
html[data-theme-mode="dark"] .support-sla-card,
html[data-theme-mode="dark"] .support-risk-card,
html[data-theme-mode="dark"] .support-route-card,
html[data-theme-mode="dark"] .support-rating-card { background: #1a2540; border-color: var(--line); }
html[data-theme-mode="dark"] .priority-badge.priority-critical { background: rgba(185,28,28,.18); color: #fca5a5; }
html[data-theme-mode="dark"] .priority-badge.priority-high     { background: rgba(194,65,12,.18); color: #fdba74; }
html[data-theme-mode="dark"] .priority-badge.priority-medium   { background: rgba(29,78,216,.18); color: #93c5fd; }
html[data-theme-mode="dark"] .priority-badge.priority-low      { background: rgba(21,128,61,.18); color: #86efac; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .support-command-grid,
  .support-dashboard-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .support-command-grid,
  .support-dashboard-grid,
  .support-kpi-list { grid-template-columns: 1fr; }
  .rating-choice-list { grid-template-columns: repeat(3, 1fr); }
}