/* 2026-10-26 brand refresh: aligned with shared Healthcare Inspired design system
   (Inspired Compliance / InspiredAudit) - teal #357583, red #c8222b, Source Sans 3. */
:root {
  --brand-red: #C8222B;
  --brand-red-dark: #91181F;
  --brand-teal: #357583;
  --brand-teal-dark: #2A6370;
  --brand-teal-light: #EEF4F6;
  --brand-charcoal: #232327;
}

* { box-sizing: border-box; }

body { font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }

a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus {
  outline: 3px solid var(--brand-teal-dark);
  outline-offset: 1px;
}

.btn-primary {
  background-color: var(--brand-teal);
  color: white;
}
.btn-primary:hover { background-color: var(--brand-teal-dark); }

.btn-danger-outline {
  color: var(--brand-red);
  border: 1px solid var(--brand-red);
}

.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.badge-urgent { background: #FCEFEF; color: var(--brand-red); }
.badge-ok { background: var(--brand-teal-light); color: var(--brand-teal-dark); }
.badge-neutral { background: #EEF0F2; color: #4B5563; }
.badge-warn { background: #FEF3E2; color: #92610B; }

.synthetic-banner {
  background: repeating-linear-gradient(45deg, #FFF8E1, #FFF8E1 10px, #FFEFC2 10px, #FFEFC2 20px);
  border-bottom: 2px solid #D97706;
}

table.ia-table th { position: sticky; top: 0; background: white; }
table.ia-table tbody tr:hover { background: #F7F7F8; }

.skeleton { background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%); background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; }
@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.nav-link { border-left: 3px solid transparent; }
.nav-link.active { background-color: var(--brand-teal-light); color: var(--brand-teal-dark); font-weight: 600; border-left-color: var(--brand-teal-dark); }
.nav-link:not(.active):hover { background-color: #F1F1F3; }

.sr-only-focusable:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ===========================================================================
   2026-10-27 Internal app visual refresh: depth, hierarchy, polish for the
   shared primitives (card, table, form controls, badges, buttons, nav,
   disclosure widgets). Additive only - no existing classes removed, so this
   cascades across every page that already uses card()/pageHeader()/badges
   without needing per-page markup changes.
   =========================================================================== */

/* App chrome: subtle depth instead of a flat border line */
header.app-header { box-shadow: 0 1px 2px rgba(16, 24, 32, 0.05); }

/* Cards: soft elevation replaces the flat border-only look used everywhere */
.card-elevated {
  box-shadow: 0 1px 2px rgba(16, 24, 32, 0.04), 0 1px 3px rgba(16, 24, 32, 0.07);
}
a.case-link, .case-row { transition: background-color .1s ease; }
a.case-link:hover { background-color: #F7F7F8; }

/* Icon chip used for section/card headers (Dashboard "My Work", etc.) */
.ia-section-icon {
  width: 2rem; height: 2rem; border-radius: 0.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-teal-light); color: var(--brand-teal-dark);
  flex-shrink: 0; font-size: 0.8rem;
}
.ia-count-pill {
  background: #F1F1F3; color: #4B5563; font-size: 0.68rem; font-weight: 600;
  padding: 2px 8px; border-radius: 9999px;
}

/* Form controls: one consistent, slightly deeper treatment for every
   input/select/textarea inside the app shell, no per-field class changes */
#main-content input[type="text"], #main-content input[type="email"],
#main-content input[type="tel"], #main-content input[type="date"],
#main-content input[type="number"], #main-content input[type="search"],
#main-content input:not([type]), #main-content select, #main-content textarea {
  border-color: #D7D7DC;
  transition: border-color .12s ease, box-shadow .12s ease;
}
#main-content input:hover:not(:disabled):not(:focus),
#main-content select:hover:not(:disabled):not(:focus),
#main-content textarea:hover:not(:disabled):not(:focus) { border-color: #9CA3AF; }
#main-content input:focus, #main-content select:focus, #main-content textarea:focus {
  border-color: var(--brand-teal);
  box-shadow: 0 0 0 3px rgba(53, 117, 131, 0.14);
}

/* Buttons: slightly more "designed" weight + a real secondary variant */
.btn-primary { font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 32, 0.08); transition: background-color .12s ease; }
.btn-secondary {
  background: #fff; color: #374151; border: 1px solid #D1D5DB; font-weight: 600;
  transition: background-color .12s ease, border-color .12s ease;
}
.btn-secondary:hover { background: #F7F7F8; border-color: #9CA3AF; }

/* Badges: a faint matching border adds definition on light backgrounds */
.badge { border: 1px solid transparent; }
.badge-urgent { border-color: rgba(200, 34, 43, 0.18); }
.badge-ok { border-color: rgba(42, 99, 112, 0.18); }
.badge-neutral { border-color: rgba(75, 85, 99, 0.14); }
.badge-warn { border-color: rgba(146, 97, 11, 0.18); }

/* Tables: quieter, denser header; clearer hover row */
table.ia-table thead th {
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.68rem;
  font-weight: 700; color: var(--brand-slate, #6D6D72); background: #FAFAFA;
}
table.ia-table tbody tr { transition: background-color .1s ease; }

/* Portal playbook disclosures: replace the default browser triangle with a
   branded chevron + hover affordance so it reads as a designed component */
details.playbook-details summary { list-style: none; }
details.playbook-details summary::-webkit-details-marker { display: none; }
details.playbook-details summary {
  display: flex; align-items: center; gap: 0.4rem; transition: background-color .12s ease;
}
details.playbook-details summary::after {
  content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  margin-left: auto; font-size: 10px; color: #9CA3AF; transition: transform .15s ease;
}
details.playbook-details[open] summary::after { transform: rotate(180deg); }
details.playbook-details:hover summary { background: var(--brand-teal-light); }
details.playbook-details[open] { border-color: var(--brand-teal); }