:root {
  /* This app is a fixed light theme (no dark variant) — but without an explicit
     color-scheme, browsers still render native form controls (date/time picker icons,
     scrollbars) to match the OS's dark-mode preference if one is set. On a dark OS that
     puts a light/white calendar icon on this app's white input background, making it
     effectively invisible. Declaring light here forces every native control across the
     whole app to render in light mode regardless of OS setting. */
  color-scheme: light;
  --isilumko-red: #c8102e;
  --isilumko-red-dark: #9c0c23;
  --isilumko-dark: #1a1a1a;
  --bg: #f2f3f5;
  --card-bg: #ffffff;
  --border: #e0e0e3;
  --text: #1a1a1a;
  --text-muted: #666;
  --radius: 8px;
  --sidebar-w: 260px;
  --content-max: 1400px;

  /* Motion tokens: critically-damped "spring-ish" ease for anything that materializes
     (modals, menus), a snappier variant for tap feedback. No overshoot anywhere here —
     nothing in this app is gesture/momentum-driven, so bounce would read as noise. */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-tap: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-materialize: 240ms;
  --dur-tap: 100ms;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin-top: 0; letter-spacing: -0.01em; }
h1 { font-size: 1.4rem; line-height: 1.2; }
h2 { font-size: 1.15rem; line-height: 1.25; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-materialize: 1ms; --dur-tap: 1ms; }
}

/* ---------- Topbar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(224, 224, 227, 0.7);
  flex-wrap: wrap;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 10;
}
@media (prefers-reduced-transparency: reduce) {
  .topbar { background: var(--card-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.topbar img { height: 32px; display: block; }
.topbar .who { font-size: 0.85rem; color: var(--text-muted); }

/* ---------- App shell: sidebar (desktop) + main content ---------- */
.app-shell {
  display: flex;
  flex-direction: column;
  max-width: var(--content-max);
  margin: 0 auto;
}
.sidebar {
  padding: 16px;
}
.sidebar .card { margin-bottom: 16px; }
.main-content {
  flex: 1;
  min-width: 0;
  padding: 16px;
}

@media (min-width: 900px) {
  .app-shell { flex-direction: row; align-items: flex-start; }
  .sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    position: sticky;
    top: 65px;
    align-self: flex-start;
  }
  .main-content { padding: 24px 24px 24px 0; }
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

/* ---------- Stat cards ---------- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
@media (min-width: 560px) {
  .stats-row { grid-template-columns: repeat(4, 1fr); }
}
.stat-tile {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: transform var(--dur-tap) var(--ease-tap), box-shadow var(--dur-tap) var(--ease-tap);
}
@media (hover: hover) and (pointer: fine) {
  .stat-tile:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); }
}
.stat-tile .num { font-size: 1.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.01em; }
.stat-tile .label { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.03em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 10px 16px;
  background: var(--isilumko-red);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.95rem;
  text-decoration: none;
  min-height: 44px;
  transition: background-color var(--dur-tap) var(--ease-tap), transform var(--dur-tap) var(--ease-tap), box-shadow var(--dur-tap) var(--ease-tap);
}
.btn:hover { background: var(--isilumko-red-dark); }
/* Feedback on press, not on release — the instant a finger/pointer lands, not when it lifts. */
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:disabled:active { transform: none; }
.btn.secondary { background: #444; }
.btn.secondary:hover { background: #222; }
.btn.outline { background: transparent; color: var(--isilumko-red); border: 1px solid var(--isilumko-red); }
.btn.outline:hover { background: #fdeceb; }
.btn.danger { background: #a30000; }
.btn.danger:hover { background: #7a0000; }
.btn.small { padding: 6px 10px; font-size: 0.8rem; min-height: 32px; }
.btn.full-width { display: block; width: 100%; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
}

.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }

/* ---------- Forms ---------- */
label { display: block; font-size: 0.85rem; margin: 10px 0 4px; font-weight: 600; }
/* Text-ish fields only — checkboxes/radios are excluded below so they keep their
   native circular/square shape instead of inheriting a full-width bordered box. */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  transition: border-color var(--dur-tap) var(--ease-tap), box-shadow var(--dur-tap) var(--ease-tap);
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--isilumko-red);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.15);
}
textarea { min-height: 70px; resize: vertical; }

/* A visible, guaranteed-black calendar/clock icon on every date/time input.
   color-scheme alone wasn't enough (still low-contrast). The next attempt drew a decoy
   icon on the INPUT's own background and made the real native picker indicator
   invisible-but-enlarged over it — that looked right but broke clicking, because the
   visible decoy and the actual clickable indicator element didn't line up (different
   position/size), so clicks on the icon missed the real hit target.
   Fix: paint the icon directly ONTO the native indicator itself, so the thing you see
   and the thing you click are the same element — its native click-to-open behavior,
   size, and position are otherwise left completely untouched. */
input[type="date"]::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}
input[type="time"]::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15.5 14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}

input[type="checkbox"], input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--isilumko-red);
  cursor: pointer;
  flex-shrink: 0;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid var(--isilumko-red);
  outline-offset: 2px;
}

.radio-row { display: flex; gap: 20px; margin: 6px 0; }
.radio-option {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 400; font-size: 0.95rem; cursor: pointer;
}
.checkbox-row {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.85rem; margin: 10px 0 4px; cursor: pointer;
}

/* ---------- Combobox: searchable replacement for a native <select> with hundreds of
   options. Fully self-positioned (never a native dropdown deciding to open upward and
   overflow the screen) — the panel has a fixed max-height and always opens below the
   field, scrolling internally once results exceed that height. ---------- */
.combobox { position: relative; }
.combobox-input {
  cursor: text;
}
.combobox-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.06);
  max-height: 260px;
  overflow-y: auto;
  z-index: 60;
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top center;
  transition: opacity var(--dur-tap) var(--ease-tap), transform var(--dur-tap) var(--ease-tap);
  pointer-events: none;
}
.combobox-panel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .combobox-panel { transform: none; }
}
.combobox-group-heading {
  position: sticky;
  top: 0;
  padding: 6px 12px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: underline;
  color: var(--text-muted);
  background: #f7f7f8;
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
.combobox-group-heading:first-child { border-top: none; }
.combobox-option {
  padding: 9px 12px;
  font-size: 0.9rem;
  line-height: 1.35;
  cursor: pointer;
  border-bottom: 1px solid #f2f2f4;
}
.combobox-option:last-child { border-bottom: none; }
.combobox-option:hover, .combobox-option.is-active { background: #fdeceb; }
.combobox-option .code { font-weight: 700; color: var(--isilumko-red); margin-right: 4px; }
.combobox-empty { padding: 14px 12px; font-size: 0.85rem; color: var(--text-muted); text-align: center; }
.combobox-more { padding: 8px 12px; font-size: 0.75rem; color: var(--text-muted); text-align: center; border-top: 1px solid var(--border); }

/* Charge display, wherever a charge is shown — portal or exported document: the
   category (and code) is underlined, the charge description itself is bold. */
.charge-category { text-decoration: underline; }
.charge-desc { font-weight: 600; }
.charge-line { margin: 2px 0; }
.charge-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.charge-row:last-child { border-bottom: none; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
@media (max-width: 600px) {
  .grid-2 { grid-template-columns: 1fr; }
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 16px;
}
@media (max-width: 760px) {
  .grid-3 { grid-template-columns: 1fr; }
}

/* ---------- Case table (desktop) / cards (mobile) ---------- */
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--text-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; }
tbody tr { transition: background-color 0.1s ease; }
tbody tr:hover { background: #fafafa; }

.case-list { display: none; }
.case-cards { display: none; }
@media (min-width: 700px) {
  .case-list { display: table; width: 100%; }
  .case-cards { display: none !important; }
}
@media (max-width: 699px) {
  .case-cards { display: block; }
  .case-list { display: none !important; }
}
.case-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 10px;
  background: #fff;
  transition: transform var(--dur-tap) var(--ease-tap), box-shadow var(--dur-tap) var(--ease-tap), border-color var(--dur-tap) var(--ease-tap);
}
.case-card:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) {
  .case-card:hover { border-color: #d0d0d4; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); }
}
.case-card .name { font-weight: 700; }
.case-card .meta { color: var(--text-muted); font-size: 0.85rem; margin: 4px 0; }

.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  background: #eee;
  color: #333;
  white-space: nowrap;
}
.badge.logged { background: #dbeafe; color: #1e40af; }
.badge.hearing_drafted { background: #fef3c7; color: #92400e; }
.badge.awaiting_acknowledgement { background: #e0e7ff; color: #3730a3; }
.badge.awaiting_outcome { background: #fde68a; color: #78350f; }
.badge.decision_dismiss { background: #fecaca; color: #991b1b; }
.badge.decision_warning { background: #fed7aa; color: #9a3412; }
.badge.awaiting_warning_ack { background: #fbd5a5; color: #92400e; }
.badge.awaiting_warning_form { background: #fed7aa; color: #9a3412; }
.badge.pending_warning_completion { background: #fbcfe8; color: #9d174d; }
.badge.decision_no_action { background: #d1fae5; color: #065f46; }
.badge.msa_pending { background: #ddd6fe; color: #4c1d95; }
.badge.completed { background: #d1fae5; color: #065f46; }
.badge.deleted { background: #e5e7eb; color: #374151; }

/* Access-request indicator dot — sits next to the status badge on a case row so both
   dashboards can tell at a glance whether a case needs attention, without opening it.
   Amber = a request is waiting on Isilumko; green = the site's request was approved;
   gray = it was denied. Only rendered on rows where one actually applies, so the vast
   majority of rows are unchanged. */
.access-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
  cursor: default;
}
.access-dot.pending { background: #d97706; }
.access-dot.approved { background: #059669; }
.access-dot.denied { background: #9ca3af; }

.stat-tile.alert .num { color: var(--isilumko-red); }

.storage-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin-bottom: 16px;
  border-radius: 10px;
  background: #fef3c7;
  color: #78350f;
  font-size: 0.85rem;
  font-weight: 600;
}
.storage-banner.severe { background: #fecaca; color: #991b1b; }
.storage-banner.hidden { display: none; }

/* ---------- Signature pad ---------- */
.sig-pad-wrap { margin: 10px 0; }
.sig-pad-label { display: block; font-size: 0.85rem; margin-bottom: 4px; font-weight: 600; }
.sig-pad-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.sig-pad-tab {
  padding: 5px 12px; border-radius: 20px; border: 1px solid var(--border); background: #fff;
  color: var(--text);
  cursor: pointer; font-size: 0.78rem;
  transition: background-color var(--dur-tap) var(--ease-tap), color var(--dur-tap) var(--ease-tap), border-color var(--dur-tap) var(--ease-tap);
}
.sig-pad-tab.active { background: var(--isilumko-dark); color: #fff; border-color: var(--isilumko-dark); }
.sig-pad-canvas {
  width: 100%; height: 140px; max-width: 500px; display: block;
  border: 1px dashed var(--border); border-radius: var(--radius); background: #fcfcfd;
  touch-action: none; cursor: crosshair;
}
.sig-pad-preview { max-width: 300px; max-height: 100px; margin-top: 8px; border: 1px solid var(--border); border-radius: 4px; background: #fff; }

.warning-list { border-top: 1px dashed var(--border); margin-top: 8px; padding-top: 8px; }
.warning-item { display: grid; grid-template-columns: 1fr 1fr 2fr auto; gap: 6px; margin-bottom: 6px; }
@media (max-width: 600px) { .warning-item { grid-template-columns: 1fr; } }

.charge-item-row { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.charge-item-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.charge-item-row .row.between { margin-top: 4px; }

.error-msg { color: #a30000; font-size: 0.85rem; margin-top: 6px; }
.success-msg { color: #065f46; font-size: 0.85rem; margin-top: 6px; }
.hint { color: var(--text-muted); font-size: 0.8rem; }

/* ---------- Modals: narrow sheet on mobile, wide panel on desktop ---------- */
/* Materializes in (backdrop blurs+fades, panel scales up from 96%) rather than
   snapping to visible, and mirrors the same path on the way out. Panel motion uses a
   critically-damped ease (no bounce) — this is a form surface arriving, not something
   the user flicked. */
.modal-backdrop {
  position: fixed; inset: 0;
  background-color: rgba(20, 20, 22, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50;
  transition: background-color var(--dur-materialize) var(--ease-spring), backdrop-filter var(--dur-materialize) var(--ease-spring);
}
.modal-backdrop.is-open {
  background-color: rgba(20, 20, 22, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal {
  background: #fff; border-radius: 14px; padding: 20px; max-width: 480px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transform: scale(0.94) translateY(6px);
  transition: opacity var(--dur-materialize) var(--ease-spring), transform var(--dur-materialize) var(--ease-spring);
}
.modal-backdrop.is-open .modal {
  opacity: 1;
  transform: scale(1) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .modal { transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .modal-backdrop.is-open { background: rgba(20, 20, 22, 0.7); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.modal.wide { max-width: 480px; }
@media (min-width: 760px) {
  .modal.wide { max-width: 760px; }
  .modal.wide form.two-col-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .modal.wide form.two-col-form > *:not(.full-row) { grid-column: auto; }
  .modal.wide form.two-col-form .full-row { grid-column: 1 / -1; }
}
.tabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.tab-btn {
  padding: 8px 14px; border-radius: 20px; border: 1px solid var(--border); background: #fff;
  color: var(--text);
  cursor: pointer; font-size: 0.85rem;
  transition: background-color var(--dur-tap) var(--ease-tap), color var(--dur-tap) var(--ease-tap), border-color var(--dur-tap) var(--ease-tap), transform var(--dur-tap) var(--ease-tap);
}
.tab-btn:active { transform: scale(0.97); }
.tab-btn.active { background: var(--isilumko-dark); color: #fff; border-color: var(--isilumko-dark); }

/* Transient inline confirmation next to a save action — materializes, holds, fades. Used
   instead of a global toast so the feedback stays anchored to the control that caused it. */
.save-flash {
  display: inline-flex; align-items: center; gap: 4px;
  color: #065f46; font-size: 0.85rem; font-weight: 600;
  opacity: 0; transform: translateX(-4px);
  transition: opacity var(--dur-tap) var(--ease-tap), transform var(--dur-tap) var(--ease-tap);
}
.save-flash.is-visible { opacity: 1; transform: translateX(0); }

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
}
.login-brand-panel {
  display: none;
  flex: 1.1;
  background: linear-gradient(135deg, var(--isilumko-dark) 0%, #2a2a2a 100%);
  color: #fff;
  padding: 48px;
  flex-direction: column;
  justify-content: space-between;
}
.login-brand-panel .brand-heading { font-size: 2rem; font-weight: 800; max-width: 420px; line-height: 1.25; }
.login-brand-panel .brand-sub { color: #bbb; margin-top: 12px; max-width: 420px; }
.login-brand-panel .brand-foot { color: #888; font-size: 0.8rem; }
.login-form-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
@media (min-width: 860px) {
  .login-brand-panel { display: flex; }
}
.login-card { max-width: 380px; width: 100%; text-align: center; }
.login-card img { height: 48px; margin-bottom: 16px; }

.hidden { display: none !important; }