/* ===================================================================
   CivicAI Prototype — Admin console styles
   Extends css/styles.css. Do not duplicate tokens/components defined there.
   Covers: dashboard chart layout + hand-rolled SVG chart animation,
   cases table priority dots, case-detail two-column layout + illustration,
   workflow-config card grid + toggle switch, and the "switch role" row
   (mirrors .role-switcher from citizen.css so admin pages don't need it).
=================================================================== */

/* NOTE: deliberately no blanket "[data-icon] svg" rule here (unlike citizen.css) —
   every data-icon span used on admin pages already sits inside a component that
   styles.css sizes via a descendant selector (.admin-brand svg, .admin-nav__item svg,
   .icon-btn svg, .empty-state svg, .pill svg, .btn svg, .timeline__dot svg …). A
   same-specificity blanket rule loaded after styles.css would win the cascade and
   shrink all of those. The one spot with no existing rule (meta rows in the case
   summary card) gets its own scoped .meta-icon rule below instead. */
.meta-icon svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ---------- Dashboard: KPI + charts ---------- */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-4);
  align-items: start;
}
@media (max-width: 900px) {
  .dashboard-grid { grid-template-columns: 1fr; }
}
.chart-card svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-card__body { margin-top: var(--space-2); }

/* Horizontal-growth variant of the .bar animation (styles.css only defines the
   vertical scaleY version for column charts) — used for the incident-type
   breakdown chart's horizontal bars. */
.bar-h { transform-origin: left; animation: barGrowH var(--dur-slow) var(--ease-out) both; }
@keyframes barGrowH { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.chart-axis-label { fill: var(--color-muted); font-family: var(--font-body); }
.chart-gridline { stroke: var(--color-border); stroke-width: 1; }

/* KPI delta trend icon — styles.css sizes .kpi__label svg but not .kpi__delta svg */
.kpi__delta svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ---------- Demo role switcher (dashboard only) ---------- */
.role-switcher {
  text-align: center;
  padding: var(--space-2) var(--space-2) 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-1);
  opacity: 0.75;
  margin-top: var(--space-6);
}
.role-switcher__link { color: var(--color-muted); text-decoration: underline; text-underline-offset: 2px; }
.role-switcher__link:hover { color: var(--color-primary); }
.role-switcher__link.is-active { color: var(--color-primary); font-weight: 700; text-decoration: none; }

/* ---------- Cases table: priority dot ---------- */
.priority-cell { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; }

/* Sort affordance feedback on th press, even when a header isn't actively sorting */
.data-table th { transition: color var(--dur-fast) var(--ease-out); }
.data-table th:hover { color: var(--color-foreground); }
.data-table th:active { transform: translateY(1px); }
.data-table th .sort-icon svg { width: 12px; height: 12px; display: block; }
.data-table th .sort-icon { transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast); }
.data-table th.is-sorted-asc .sort-icon { opacity: 1; color: var(--color-primary); }
.data-table th.is-sorted-desc .sort-icon { opacity: 1; color: var(--color-primary); transform: rotate(180deg); }

/* ---------- Back link (case detail sub-page) ---------- */
.back-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 600; color: var(--color-foreground); margin-bottom: var(--space-4);
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.back-link:hover { color: var(--color-primary); }
.back-link:active { transform: translateX(-2px); }
.back-link svg { width: 20px; height: 20px; }

/* ---------- Shared round icon badge (case detail + workflow cards) ---------- */
.entity-icon {
  width: 44px; height: 44px; border-radius: var(--radius-full); flex-shrink: 0;
  background: var(--color-primary-soft); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
}
.entity-icon svg { width: 22px; height: 22px; }

/* ---------- Case detail two-column layout ---------- */
.detail-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-4); align-items: start; margin-top: var(--space-4); }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-grid h3 { font-size: var(--text-base); margin-bottom: var(--space-3); }

.photo-illustration {
  aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary-soft) 0%, var(--color-surface-alt) 100%);
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  animation: popIn var(--dur-slow) var(--ease-spring) both;
}
.photo-illustration svg { width: 30%; height: 30%; color: var(--color-primary); opacity: 0.55; }

.status-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.audit-row { display: flex; align-items: flex-start; gap: var(--space-2); }
.audit-row svg { width: 14px; height: 14px; margin-top: 3px; flex-shrink: 0; color: var(--color-muted-light); }

/* ---------- Toggle switch (real, local UI state) ---------- */
.switch {
  position: relative; width: 44px; height: 26px; flex-shrink: 0;
  border-radius: var(--radius-full); border: none; padding: 0; cursor: pointer;
  background: var(--color-border-strong);
  transition: background var(--dur-base) var(--ease-out);
}
.switch__thumb {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-spring);
}
.switch[aria-checked="true"] { background: var(--color-success); }
.switch[aria-checked="true"] .switch__thumb { transform: translateX(18px); }
.switch:active .switch__thumb { width: 22px; }

/* ---------- Workflow configuration grid ---------- */
.workflow-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
@media (max-width: 720px) { .workflow-grid { grid-template-columns: 1fr; } }
.wf-card { transition: opacity var(--dur-base) var(--ease-out); animation: fadeUp 0.5s var(--ease-out) both; }
.wf-card.is-inactive { opacity: 0.5; }
.wf-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.wf-card__title { display: flex; align-items: center; gap: var(--space-3); }
.wf-card__title h3 { margin: 0; font-size: var(--text-base); }
.wf-card__desc { margin: var(--space-3) 0; }
.wf-card__meta { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.wf-card__status { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-top: var(--space-1); }
.wf-card__status--on { color: var(--color-success); }
.wf-card__status--off { color: var(--color-muted); }