/* ─────────────────────────────────────────────────────────────────────
   Admin Charts (Clinical Records / Command Center) — light overlay
   Loaded last, namespaced --acl-* tokens, !important on every property
   to win over the legacy clinical-records-command-center.css stylesheet.
   ───────────────────────────────────────────────────────────────────── */

:root {
  --acl-bg-1: #EDECEA;
  --acl-bg-2: #E5E4E2;
  --acl-bg-3: #DCDBD8;
  --acl-card: #FFFFFF;
  --acl-rule: rgba(26,31,46,0.10);
  --acl-rule-strong: rgba(26,31,46,0.18);
  --acl-text: #1A1F2E;
  --acl-dim: rgba(26,31,46,0.78);
  --acl-mut: rgba(26,31,46,0.62);
  --acl-blue: #2A3FA8;
  --acl-blue-deep: #1E2D7A;
  --acl-cyan: #2EB6E0;
  --acl-blue-tint: rgba(42,63,168,0.08);
  --acl-blue-tint-2: rgba(42,63,168,0.14);
  --acl-blue-rule: rgba(42,63,168,0.22);
  --acl-green: #2E9F7A;
  --acl-green-tint: rgba(46,159,122,0.10);
  --acl-amber: #C68A2D;
  --acl-amber-tint: rgba(198,138,45,0.12);
  --acl-red: #C2435C;
  --acl-red-tint: rgba(194,67,92,0.10);
  --acl-shadow-soft: 0 12px 32px rgba(26,31,46,0.08);
  --acl-shadow-lift: 0 18px 44px rgba(26,31,46,0.12);
  --acl-font-display: 'Marcellus', Georgia, serif;
  --acl-font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --acl-font-eyebrow: 'Barlow Condensed', sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════
   PAGE SHELL
   ═════════════════════════════════════════════════════════════════════ */

body {
  background: linear-gradient(180deg, var(--acl-bg-1) 0%, var(--acl-bg-2) 48%, var(--acl-bg-3) 100%) !important;
  color: var(--acl-text) !important;
  font-family: var(--acl-font-ui) !important;
  -webkit-text-fill-color: var(--acl-text) !important;
  overflow-x: hidden !important;
}

body .cc-atmosphere,
body .cc-atmosphere::before,
body .cc-atmosphere::after {
  display: none !important;
  content: none !important;
}

#adminContent.records-app-shell {
  background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   LOGIN GATE
   ═════════════════════════════════════════════════════════════════════ */

#loginGate {
  background: linear-gradient(180deg, var(--acl-bg-1), var(--acl-bg-3)) !important;
  background-image: none !important;
  color: var(--acl-text) !important;
}
#loginGate .gate-emblem {
  font-family: var(--acl-font-eyebrow) !important;
  letter-spacing: 0.36em !important;
  text-transform: uppercase !important;
  color: var(--acl-blue) !important;
  -webkit-text-fill-color: var(--acl-blue) !important;
}
#loginGate .gate-title {
  font-family: var(--acl-font-display) !important;
  color: var(--acl-text) !important;
  -webkit-text-fill-color: var(--acl-text) !important;
  background: none !important;
  background-image: none !important;
  text-shadow: none !important;
}
#loginGate .gate-sub {
  color: var(--acl-mut) !important;
  -webkit-text-fill-color: var(--acl-mut) !important;
}
#loginGate .btn-gold {
  background: linear-gradient(135deg, var(--acl-blue), var(--acl-blue-deep)) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 100px !important;
  padding: 12px 32px !important;
  font-family: var(--acl-font-eyebrow) !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  box-shadow: 0 8px 20px rgba(42,63,168,0.32) !important;
}
#loginGate .gate-mono {
  filter: invert(1) brightness(0.3) !important;
  opacity: 0.85 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   CC HERO (used for both list + detail)
   ═════════════════════════════════════════════════════════════════════ */

body .cc-hero {
  background: var(--acl-card) !important;
  background-image: none !important;
  border: 1px solid var(--acl-rule) !important;
  border-radius: 16px !important;
  box-shadow: var(--acl-shadow-soft) !important;
  margin: 24px clamp(16px, 3vw, 40px) 28px !important;
  padding: clamp(28px, 4vw, 44px) clamp(24px, 3.5vw, 56px) !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: auto !important;
  height: auto !important;
  box-sizing: border-box !important;
  width: auto !important;
  max-width: none !important;
}
body .cc-hero::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: linear-gradient(180deg, var(--acl-cyan) 0%, var(--acl-blue) 100%) !important;
  display: block !important;
}
body .cc-hero::before {
  display: none !important;
  content: none !important;
}

/* Hide banner image + scrim/overlay/tint chrome */
body .cc-hero .cc-hero-img,
body .cc-hero .mbr-banner-asset,
body .cc-hero .mbr-banner-scrim,
body .cc-hero .cc-hero-overlay,
body .cc-hero .cc-hero-tint,
body .cc-hero .cc-hero-bottom-line {
  display: none !important;
}

/* Return to Command Center pill */
body .cc-hero-return {
  position: absolute !important;
  top: clamp(20px, 3vw, 28px) !important;
  left: clamp(20px, 3vw, 28px) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--acl-font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: var(--acl-blue) !important;
  -webkit-text-fill-color: var(--acl-blue) !important;
  background: var(--acl-card) !important;
  background-image: none !important;
  border: 1px solid var(--acl-blue-rule) !important;
  border-radius: 100px !important;
  padding: 8px 16px !important;
  text-decoration: none !important;
  z-index: 5 !important;
  transition: background 0.2s, transform 0.2s !important;
  text-shadow: none !important;
}
body .cc-hero-return:hover {
  background: var(--acl-blue-tint) !important;
  transform: translateY(-1px) !important;
}
body .cc-hero-return svg {
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor !important;
}

/* Hero content (directory list version) */
body .cc-hero-content {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  -webkit-transform: none !important;
  animation: none !important;
  z-index: 1 !important;
  text-align: left !important;
  max-width: 720px !important;
  width: auto !important;
  padding: 0 !important;
  margin-top: 36px !important;
}
body .cc-hero-eyebrow {
  font-family: var(--acl-font-eyebrow) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.36em !important;
  text-transform: uppercase !important;
  color: var(--acl-blue) !important;
  -webkit-text-fill-color: var(--acl-blue) !important;
  background: none !important;
  background-image: none !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  display: inline-block !important;
  text-shadow: none !important;
  justify-content: flex-start !important;
}
body .cc-hero-eyebrow::before {
  display: none !important;
  content: none !important;
}
body .cc-hero-title,
body .cc-hero-title-line {
  font-family: var(--acl-font-display) !important;
  font-size: clamp(36px, 5vw, 56px) !important;
  font-weight: 400 !important;
  color: var(--acl-text) !important;
  -webkit-text-fill-color: var(--acl-text) !important;
  background: none !important;
  background-image: none !important;
  letter-spacing: -0.01em !important;
  line-height: 1.05 !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  text-shadow: none !important;
}
body .cc-hero-accent {
  font-weight: 400 !important;
  color: var(--acl-blue) !important;
  -webkit-text-fill-color: var(--acl-blue) !important;
  background: none !important;
  background-image: none !important;
}
body .cc-hero-lead {
  color: var(--acl-dim) !important;
  -webkit-text-fill-color: var(--acl-dim) !important;
  font-family: var(--acl-font-ui) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  max-width: 640px !important;
  margin: 0 0 18px !important;
  text-align: left !important;
  text-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   DIRECTORY HERO FILTERS (filter pills)
   ═════════════════════════════════════════════════════════════════════ */

body .directory-hero-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
}
body .directory-hero-filters .filter-pill,
body .filter-pill {
  font-family: var(--acl-font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: var(--acl-blue) !important;
  -webkit-text-fill-color: var(--acl-blue) !important;
  background: var(--acl-card) !important;
  background-image: none !important;
  border: 1px solid var(--acl-blue-rule) !important;
  border-radius: 100px !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
  transition: background 0.2s, border-color 0.2s, transform 0.2s !important;
  text-shadow: none !important;
}
body .filter-pill:hover {
  background: var(--acl-blue-tint) !important;
  transform: translateY(-1px) !important;
}
body .filter-pill.active {
  background: linear-gradient(135deg, var(--acl-blue), var(--acl-blue-deep)) !important;
  background-image: linear-gradient(135deg, var(--acl-blue), var(--acl-blue-deep)) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-color: var(--acl-blue-deep) !important;
  box-shadow: 0 6px 16px rgba(42,63,168,0.28) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   DETAIL HERO (client-records-banner with photo + demographics)
   ═════════════════════════════════════════════════════════════════════ */

body .client-records-banner__content {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  -webkit-transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: none !important;
  text-align: left !important;
}
body .client-records-banner__identity {
  display: flex !important;
  gap: 24px !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  text-align: left !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
body .client-records-banner__text {
  text-align: left !important;
}
body .client-records-banner__demo {
  text-align: left !important;
}
body .client-records-banner__text {
  flex: 1 1 320px !important;
  min-width: 0 !important;
}
body .client-records-banner__eyebrow {
  font-family: var(--acl-font-eyebrow) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.36em !important;
  text-transform: uppercase !important;
  color: var(--acl-blue) !important;
  -webkit-text-fill-color: var(--acl-blue) !important;
  background: none !important;
  background-image: none !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  display: inline-block !important;
  text-shadow: none !important;
}
body .client-records-banner__name,
body .client-records-banner__name--hero {
  font-family: var(--acl-font-display) !important;
  font-size: clamp(32px, 4.4vw, 48px) !important;
  font-weight: 400 !important;
  color: var(--acl-text) !important;
  -webkit-text-fill-color: var(--acl-text) !important;
  background: none !important;
  background-image: none !important;
  letter-spacing: -0.01em !important;
  line-height: 1.1 !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  text-shadow: none !important;
  text-align: left !important;
}

/* Photo wrap */
body .ch-photo-wrap {
  position: relative !important;
  flex: 0 0 auto !important;
  width: 96px !important;
  height: 96px !important;
}
body #chPhotoContainer {
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: var(--acl-blue-tint) !important;
  border: 2px solid var(--acl-blue-rule) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 16px rgba(42,63,168,0.18) !important;
}
body .ch-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
body .ch-photo-placeholder {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  color: var(--acl-blue) !important;
}
body .ch-photo-placeholder svg {
  width: 40px !important;
  height: 40px !important;
  stroke: var(--acl-blue) !important;
  fill: none !important;
  stroke-width: 1.75 !important;
}
body .ch-photo-edit {
  position: absolute !important;
  bottom: -2px !important;
  right: -2px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--acl-cyan), var(--acl-blue)) !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 10px rgba(42,63,168,0.32) !important;
  border: 2px solid var(--acl-card) !important;
}
body .ch-photo-edit svg {
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
}

/* Demographics grid */
body .client-records-banner__demo {
  background: var(--acl-bg-1) !important;
  background-image: none !important;
  border: 1px solid var(--acl-rule) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  margin-top: 8px !important;
}
body .banner-demo-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px 24px !important;
}
body .banner-demo-cell {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
}
body .banner-demo-label {
  font-family: var(--acl-font-eyebrow) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: var(--acl-blue) !important;
  -webkit-text-fill-color: var(--acl-blue) !important;
  text-shadow: none !important;
}
body .banner-demo-val {
  font-family: var(--acl-font-ui) !important;
  font-size: 14px !important;
  color: var(--acl-text) !important;
  -webkit-text-fill-color: var(--acl-text) !important;
  font-weight: 500 !important;
  word-break: break-word !important;
  text-shadow: none !important;
}

/* Action row */
body .client-records-banner__actions,
body .ch-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-top: 4px !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  text-align: left !important;
}
body .flag-select,
body .status-select {
  font-family: var(--acl-font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--acl-text) !important;
  -webkit-text-fill-color: var(--acl-text) !important;
  background: var(--acl-card) !important;
  background-image: none !important;
  border: 1px solid var(--acl-blue-rule) !important;
  border-radius: 100px !important;
  padding: 9px 28px 9px 16px !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  text-shadow: none !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232A3FA8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
}
body .btn-print-chart {
  font-family: var(--acl-font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: linear-gradient(135deg, var(--acl-blue), var(--acl-blue-deep)) !important;
  background-image: linear-gradient(135deg, var(--acl-blue), var(--acl-blue-deep)) !important;
  border: 0 !important;
  border-radius: 100px !important;
  padding: 10px 20px !important;
  cursor: pointer !important;
  box-shadow: 0 6px 16px rgba(42,63,168,0.28) !important;
  text-shadow: none !important;
  transition: transform 0.18s, box-shadow 0.18s !important;
}
body .btn-print-chart:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px rgba(42,63,168,0.36) !important;
}
body .btn-delete-chart {
  font-family: var(--acl-font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: var(--acl-red) !important;
  -webkit-text-fill-color: var(--acl-red) !important;
  background: var(--acl-card) !important;
  background-image: none !important;
  border: 1px solid rgba(194,67,92,0.32) !important;
  border-radius: 100px !important;
  padding: 9px 18px !important;
  cursor: pointer !important;
  text-shadow: none !important;
  transition: background 0.18s !important;
}
body .btn-delete-chart:hover {
  background: var(--acl-red-tint) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   BACK ARROW BUTTON (between hero + workspace)
   ═════════════════════════════════════════════════════════════════════ */

body .chart-back-dir {
  background: var(--acl-card) !important;
  background-image: none !important;
  color: var(--acl-blue) !important;
  border: 1px solid var(--acl-blue-rule) !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: var(--acl-shadow-soft) !important;
  margin: 0 clamp(16px, 3vw, 40px) 18px !important;
  transition: background 0.2s, transform 0.2s !important;
}
body .chart-back-dir:hover {
  background: var(--acl-blue-tint) !important;
  transform: translateY(-1px) !important;
}
body .chart-back-dir svg {
  stroke: var(--acl-blue) !important;
  width: 18px !important;
  height: 18px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   CHART WORKSPACE (2-col layout)
   ═════════════════════════════════════════════════════════════════════ */

body .chart-workspace {
  background: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) !important;
  gap: 20px !important;
  margin: 0 clamp(16px, 3vw, 40px) 32px !important;
  padding: 0 !important;
}
body .chart-workspace__col {
  background: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  min-width: 0 !important;
}

/* Chart panel (notes/invoices cards on left) */
body .chart-panel {
  background: var(--acl-card) !important;
  background-image: none !important;
  border: 1px solid var(--acl-rule) !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  box-shadow: var(--acl-shadow-soft) !important;
  position: relative !important;
}
body .chart-panel::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 3px !important;
  height: 100% !important;
  background: linear-gradient(180deg, var(--acl-cyan), var(--acl-blue)) !important;
  border-radius: 14px 0 0 14px !important;
}
body .chart-panel__title {
  font-family: var(--acl-font-eyebrow) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--acl-blue) !important;
  -webkit-text-fill-color: var(--acl-blue) !important;
  background: none !important;
  background-image: none !important;
  margin: 0 0 12px !important;
  padding: 0 0 8px !important;
  border-bottom: 1px solid var(--acl-blue-rule) !important;
  text-shadow: none !important;
}

body .chart-panel__scroll {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  max-height: 380px !important;
  overflow-y: auto !important;
}

/* Note input */
body .note-input-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}
body .note-input {
  flex: 1 1 240px !important;
  min-width: 0 !important;
  background: var(--acl-bg-1) !important;
  background-image: none !important;
  border: 1px solid var(--acl-rule) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-family: var(--acl-font-ui) !important;
  font-size: 14px !important;
  color: var(--acl-text) !important;
  -webkit-text-fill-color: var(--acl-text) !important;
  outline: none !important;
}
body .note-input:focus {
  border-color: var(--acl-blue) !important;
  background: var(--acl-card) !important;
  box-shadow: 0 0 0 3px var(--acl-blue-tint) !important;
}
body .note-input::placeholder {
  color: var(--acl-mut) !important;
}
body .note-flag-select {
  font-family: var(--acl-font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--acl-text) !important;
  -webkit-text-fill-color: var(--acl-text) !important;
  background: var(--acl-card) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232A3FA8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  border: 1px solid var(--acl-blue-rule) !important;
  border-radius: 100px !important;
  padding: 8px 26px 8px 14px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
}
body .btn-save {
  font-family: var(--acl-font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: linear-gradient(135deg, var(--acl-blue), var(--acl-blue-deep)) !important;
  background-image: linear-gradient(135deg, var(--acl-blue), var(--acl-blue-deep)) !important;
  border: 0 !important;
  border-radius: 100px !important;
  padding: 10px 20px !important;
  cursor: pointer !important;
  box-shadow: 0 6px 16px rgba(42,63,168,0.28) !important;
  text-shadow: none !important;
  transition: transform 0.18s, box-shadow 0.18s !important;
}
body .btn-save:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px rgba(42,63,168,0.36) !important;
}
body .btn-stack-edit,
body .btn-stack-cancel {
  font-family: var(--acl-font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: var(--acl-blue) !important;
  -webkit-text-fill-color: var(--acl-blue) !important;
  background: var(--acl-card) !important;
  background-image: none !important;
  border: 1px solid var(--acl-blue-rule) !important;
  border-radius: 100px !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
  text-shadow: none !important;
}
body .btn-stack-edit:hover,
body .btn-stack-cancel:hover {
  background: var(--acl-blue-tint) !important;
}

/* Note list cards */
body .note-list,
body .note-list .note-card,
body .note-list .note-row {
  background: none !important;
}
body .note-list .note-card,
body .note-list > div {
  background: var(--acl-bg-1) !important;
  background-image: none !important;
  border: 1px solid var(--acl-rule) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-bottom: 8px !important;
  color: var(--acl-text) !important;
}
body .note-date,
body .note-list .note-date {
  font-family: var(--acl-font-eyebrow) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--acl-mut) !important;
  -webkit-text-fill-color: var(--acl-mut) !important;
  margin-bottom: 6px !important;
  text-shadow: none !important;
}
body .note-text,
body .note-body {
  color: var(--acl-text) !important;
  -webkit-text-fill-color: var(--acl-text) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  text-shadow: none !important;
}
/* Flag-colored left borders on notes */
body .note-card.flag-green,
body .note-list > div[class*="green"] {
  border-left: 4px solid var(--acl-green) !important;
}
body .note-card.flag-yellow,
body .note-list > div[class*="yellow"] {
  border-left: 4px solid var(--acl-amber) !important;
}
body .note-card.flag-red,
body .note-list > div[class*="red"] {
  border-left: 4px solid var(--acl-red) !important;
}

/* Invoice list cards */
body #invoiceList,
body .chart-panel__scroll--invoices {
  background: none !important;
}
body .inv-card,
body #invoiceList > div {
  background: var(--acl-bg-1) !important;
  background-image: none !important;
  border: 1px solid var(--acl-rule) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-bottom: 8px !important;
  color: var(--acl-text) !important;
}
body .inv-card-header,
body .inv-card-num,
body .inv-card-date {
  color: var(--acl-text) !important;
  -webkit-text-fill-color: var(--acl-text) !important;
}
body .inv-card-status {
  font-family: var(--acl-font-eyebrow) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  border-radius: 100px !important;
  padding: 3px 10px !important;
}
body .inv-status-paid {
  background: var(--acl-green-tint) !important;
  color: var(--acl-green) !important;
  -webkit-text-fill-color: var(--acl-green) !important;
}
body .inv-status-unpaid {
  background: var(--acl-amber-tint) !important;
  color: var(--acl-amber) !important;
  -webkit-text-fill-color: var(--acl-amber) !important;
}
body .inv-card-total-val {
  color: var(--acl-blue) !important;
  -webkit-text-fill-color: var(--acl-blue) !important;
  font-weight: 700 !important;
}
body .inv-loading-msg {
  color: var(--acl-mut) !important;
  -webkit-text-fill-color: var(--acl-mut) !important;
  font-style: italic !important;
  text-align: center !important;
  padding: 16px 0 !important;
  text-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   RIGHT COL: chart sections (Stack / Physical / Medical / Medications / Goals)
   ═════════════════════════════════════════════════════════════════════ */

body .chart-scroll-pane {
  background: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 0 !important;
  overflow: visible !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
}
body .chart-section {
  background: var(--acl-card) !important;
  background-image: none !important;
  border: 1px solid var(--acl-rule) !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  box-shadow: var(--acl-shadow-soft) !important;
  position: relative !important;
}
body .chart-section::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 3px !important;
  height: 100% !important;
  background: linear-gradient(180deg, var(--acl-cyan), var(--acl-blue)) !important;
  border-radius: 14px 0 0 14px !important;
}
body .chart-section__title {
  font-family: var(--acl-font-eyebrow) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--acl-blue) !important;
  -webkit-text-fill-color: var(--acl-blue) !important;
  background: none !important;
  background-image: none !important;
  margin: 0 0 12px !important;
  padding: 0 0 8px !important;
  border-bottom: 1px solid var(--acl-blue-rule) !important;
  text-shadow: none !important;
}

/* Current stack panel */
body .current-stack-panel {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}
body .current-stack-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 8px !important;
}
body .current-stack-head .chart-section__title {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 0 !important;
}
body .current-stack-head-actions {
  display: flex !important;
  gap: 8px !important;
}
body .current-stack-hint {
  font-family: var(--acl-font-ui) !important;
  font-size: 13px !important;
  color: var(--acl-mut) !important;
  -webkit-text-fill-color: var(--acl-mut) !important;
  margin: 0 0 12px !important;
  line-height: 1.5 !important;
  text-shadow: none !important;
}
body .current-stack-hint strong {
  color: var(--acl-blue) !important;
  -webkit-text-fill-color: var(--acl-blue) !important;
  font-weight: 600 !important;
}
body .current-stack-read {
  background: var(--acl-blue-tint) !important;
  background-image: none !important;
  border: 1px solid var(--acl-blue-rule) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  font-family: var(--acl-font-ui) !important;
  font-size: 14px !important;
  color: var(--acl-text) !important;
  -webkit-text-fill-color: var(--acl-text) !important;
  line-height: 1.6 !important;
  white-space: pre-wrap !important;
  text-shadow: none !important;
  min-height: 60px !important;
}
body .current-stack-textarea,
body .proto-textarea {
  width: 100% !important;
  background: var(--acl-bg-1) !important;
  background-image: none !important;
  border: 1px solid var(--acl-rule) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-family: var(--acl-font-ui) !important;
  font-size: 14px !important;
  color: var(--acl-text) !important;
  -webkit-text-fill-color: var(--acl-text) !important;
  line-height: 1.55 !important;
  outline: none !important;
  resize: vertical !important;
  text-shadow: none !important;
  box-sizing: border-box !important;
}
body .current-stack-textarea:focus,
body .proto-textarea:focus {
  border-color: var(--acl-blue) !important;
  background: var(--acl-card) !important;
  box-shadow: 0 0 0 3px var(--acl-blue-tint) !important;
}

/* Detail grid — Physical / Medical / Medications / Goals cells
   The legacy CSS gives detail-grid its own dark panel background+border;
   we strip that since chart-section already provides the card. */
body .detail-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}
body .detail-grid .df {
  background: var(--acl-bg-1) !important;
  background-image: none !important;
  border: 1px solid var(--acl-rule) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
}
body .detail-grid .df.df-full {
  grid-column: 1 / -1 !important;
}
body .df-label {
  font-family: var(--acl-font-eyebrow) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: var(--acl-blue) !important;
  -webkit-text-fill-color: var(--acl-blue) !important;
  text-shadow: none !important;
}
body .df-value {
  font-family: var(--acl-font-ui) !important;
  font-size: 13px !important;
  color: var(--acl-text) !important;
  -webkit-text-fill-color: var(--acl-text) !important;
  word-break: break-word !important;
  line-height: 1.5 !important;
  text-shadow: none !important;
}
body .df-value.empty {
  color: var(--acl-mut) !important;
  -webkit-text-fill-color: var(--acl-mut) !important;
  font-style: italic !important;
}

/* Proto card (within Goals section) */
body .proto-card {
  background: var(--acl-bg-1) !important;
  background-image: none !important;
  border: 1px solid var(--acl-rule) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-top: 12px !important;
}
body .proto-label {
  font-family: var(--acl-font-eyebrow) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: var(--acl-blue) !important;
  -webkit-text-fill-color: var(--acl-blue) !important;
  display: block !important;
  margin-bottom: 6px !important;
  text-shadow: none !important;
}
body .proto-input {
  width: 100% !important;
  background: var(--acl-card) !important;
  border: 1px solid var(--acl-rule) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-family: var(--acl-font-ui) !important;
  font-size: 13px !important;
  color: var(--acl-text) !important;
  outline: none !important;
  text-shadow: none !important;
}
body .proto-input:focus {
  border-color: var(--acl-blue) !important;
  box-shadow: 0 0 0 3px var(--acl-blue-tint) !important;
}
body .proto-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr auto !important;
  gap: 12px !important;
  align-items: end !important;
}
body .proto-save-cell {
  display: flex !important;
  align-items: end !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   DIRECTORY LIST VIEW (table + search)
   ═════════════════════════════════════════════════════════════════════ */

body .toolbar-directory,
body .toolbar {
  background: var(--acl-card) !important;
  background-image: none !important;
  border: 1px solid var(--acl-rule) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  margin: 0 clamp(16px, 3vw, 40px) 18px !important;
  box-shadow: var(--acl-shadow-soft) !important;
}
body .search-box,
body .search-box-directory {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: var(--acl-bg-1) !important;
  border: 1px solid var(--acl-rule) !important;
  border-radius: 100px !important;
  padding: 10px 18px !important;
  width: 100% !important;
  max-width: 480px !important;
  box-sizing: border-box !important;
}
body .search-input {
  flex: 1 !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  font-family: var(--acl-font-ui) !important;
  font-size: 14px !important;
  color: var(--acl-text) !important;
  -webkit-text-fill-color: var(--acl-text) !important;
}
body .search-input::placeholder {
  color: var(--acl-mut) !important;
}

/* Table panel */
body .table-panel {
  background: var(--acl-card) !important;
  background-image: none !important;
  border: 1px solid var(--acl-rule) !important;
  border-radius: 14px !important;
  margin: 0 clamp(16px, 3vw, 40px) 24px !important;
  overflow: hidden !important;
  box-shadow: var(--acl-shadow-soft) !important;
}
body .table-panel-scroll {
  background: none !important;
  overflow-x: auto !important;
}
body .cl-table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: none !important;
  font-family: var(--acl-font-ui) !important;
}
body .cl-table thead th {
  font-family: var(--acl-font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: var(--acl-blue) !important;
  -webkit-text-fill-color: var(--acl-blue) !important;
  background: var(--acl-blue-tint) !important;
  background-image: none !important;
  padding: 12px 14px !important;
  text-align: left !important;
  border-bottom: 1px solid var(--acl-blue-rule) !important;
  text-shadow: none !important;
}
body .cl-table tbody td {
  font-family: var(--acl-font-ui) !important;
  font-size: 13px !important;
  color: var(--acl-text) !important;
  -webkit-text-fill-color: var(--acl-text) !important;
  background: var(--acl-card) !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--acl-rule) !important;
  text-shadow: none !important;
}
body .cl-table tbody tr:hover td {
  background: var(--acl-blue-tint) !important;
  cursor: pointer !important;
}
body .cl-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

/* Avatar cells */
body .cl-av-img,
body .cl-av-ph {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--acl-blue-tint) !important;
  border: 1px solid var(--acl-blue-rule) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--acl-blue) !important;
  font-family: var(--acl-font-eyebrow) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
}

/* Badges */
body .badge {
  font-family: var(--acl-font-eyebrow) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  border-radius: 100px !important;
  padding: 4px 10px !important;
  display: inline-block !important;
  text-shadow: none !important;
}
body .badge-active {
  background: var(--acl-green-tint) !important;
  color: var(--acl-green) !important;
  -webkit-text-fill-color: var(--acl-green) !important;
}
body .badge-flagged {
  background: var(--acl-amber-tint) !important;
  color: var(--acl-amber) !important;
  -webkit-text-fill-color: var(--acl-amber) !important;
}
body .badge-inactive {
  background: rgba(26,31,46,0.08) !important;
  color: var(--acl-mut) !important;
  -webkit-text-fill-color: var(--acl-mut) !important;
}

/* Flag dots */
body .flag-dot {
  display: inline-block !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  border: 1px solid currentColor !important;
}
body .flag-green { background: var(--acl-green) !important; color: var(--acl-green) !important; }
body .flag-yellow { background: var(--acl-amber) !important; color: var(--acl-amber) !important; }
body .flag-red { background: var(--acl-red) !important; color: var(--acl-red) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   PENDING INTAKES PANEL
   ═════════════════════════════════════════════════════════════════════ */

body .pending-intakes-panel {
  background: var(--acl-card) !important;
  background-image: none !important;
  border: 1px solid var(--acl-rule) !important;
  border-left: 3px solid var(--acl-cyan) !important;
  border-radius: 14px !important;
  margin: 0 clamp(16px, 3vw, 40px) 18px !important;
  padding: 18px 22px !important;
  box-shadow: var(--acl-shadow-soft) !important;
}
body .pending-intakes-eyebrow {
  font-family: var(--acl-font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--acl-blue) !important;
  -webkit-text-fill-color: var(--acl-blue) !important;
  margin: 0 0 6px !important;
  text-shadow: none !important;
}
body .pending-intakes-title {
  font-family: var(--acl-font-display) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: var(--acl-text) !important;
  -webkit-text-fill-color: var(--acl-text) !important;
  background: none !important;
  background-image: none !important;
  margin: 0 0 6px !important;
  letter-spacing: -0.005em !important;
  text-shadow: none !important;
}
body .pending-intakes-sub {
  color: var(--acl-mut) !important;
  -webkit-text-fill-color: var(--acl-mut) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  text-shadow: none !important;
}
body .pending-intakes-row {
  background: var(--acl-bg-1) !important;
  border: 1px solid var(--acl-rule) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-top: 10px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
body .pending-intakes-email {
  color: var(--acl-text) !important;
  -webkit-text-fill-color: var(--acl-text) !important;
  font-weight: 500 !important;
}
body .pending-intakes-date {
  color: var(--acl-mut) !important;
  -webkit-text-fill-color: var(--acl-mut) !important;
  font-size: 12px !important;
}
body .btn-pending-create {
  font-family: var(--acl-font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  background: linear-gradient(135deg, var(--acl-cyan), var(--acl-blue)) !important;
  border: 0 !important;
  border-radius: 100px !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
}
body .btn-pending-delete {
  font-family: var(--acl-font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: var(--acl-red) !important;
  background: var(--acl-card) !important;
  border: 1px solid rgba(194,67,92,0.32) !important;
  border-radius: 100px !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   DELETE MODAL
   ═════════════════════════════════════════════════════════════════════ */

body .delete-overlay {
  background: rgba(26,31,46,0.72) !important;
  backdrop-filter: blur(8px) !important;
}
body .delete-modal {
  background: var(--acl-card) !important;
  background-image: none !important;
  border: 1px solid var(--acl-rule) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35) !important;
  color: var(--acl-text) !important;
  padding: 28px !important;
}
body .delete-title {
  font-family: var(--acl-font-display) !important;
  font-size: 22px !important;
  color: var(--acl-text) !important;
  -webkit-text-fill-color: var(--acl-text) !important;
  background: none !important;
  background-image: none !important;
  margin: 0 0 8px !important;
  text-shadow: none !important;
}
body .delete-warning,
body .delete-name,
body .delete-label {
  color: var(--acl-text) !important;
  -webkit-text-fill-color: var(--acl-text) !important;
  text-shadow: none !important;
}
body .delete-input {
  background: var(--acl-bg-1) !important;
  border: 1px solid var(--acl-rule) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-family: var(--acl-font-ui) !important;
  color: var(--acl-text) !important;
  width: 100% !important;
}
body .btn-confirm-delete {
  background: var(--acl-red) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 100px !important;
  padding: 10px 20px !important;
  font-family: var(--acl-font-eyebrow) !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}
body .btn-cancel-delete {
  background: var(--acl-card) !important;
  color: var(--acl-text) !important;
  border: 1px solid var(--acl-rule) !important;
  border-radius: 100px !important;
  padding: 10px 18px !important;
  font-family: var(--acl-font-eyebrow) !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   FOOTER
   ═════════════════════════════════════════════════════════════════════ */

body .admin-footer {
  background: var(--acl-card) !important;
  background-image: none !important;
  border-top: 1px solid var(--acl-rule) !important;
  color: var(--acl-mut) !important;
  -webkit-text-fill-color: var(--acl-mut) !important;
  padding: 18px clamp(16px, 3vw, 40px) !important;
  font-family: var(--acl-font-ui) !important;
  font-size: 13px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  text-shadow: none !important;
}
body .admin-footer .btn-out {
  font-family: var(--acl-font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: var(--acl-blue) !important;
  -webkit-text-fill-color: var(--acl-blue) !important;
  background: var(--acl-card) !important;
  border: 1px solid var(--acl-blue-rule) !important;
  border-radius: 100px !important;
  padding: 8px 16px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.18s !important;
}
body .admin-footer .btn-out:hover {
  background: var(--acl-blue-tint) !important;
}

/* Photo lightbox */
body .photo-lightbox {
  background: rgba(26,31,46,0.86) !important;
  backdrop-filter: blur(8px) !important;
}
body .photo-lightbox-hint {
  color: rgba(255,255,255,0.85) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.85) !important;
}

/* Skeleton loaders — keep neutral light */
body .skel-row,
body .skel-bar {
  background: linear-gradient(90deg, var(--acl-bg-1), var(--acl-bg-2), var(--acl-bg-1)) !important;
  background-size: 200% 100% !important;
  animation: aclSkel 1.4s ease-in-out infinite !important;
  border-radius: 6px !important;
  height: 12px !important;
}
@keyframes aclSkel {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Toast — keep position:fixed legacy behavior but light theme */
body .toast {
  background: var(--acl-card) !important;
  background-image: none !important;
  color: var(--acl-text) !important;
  -webkit-text-fill-color: var(--acl-text) !important;
  border: 1px solid var(--acl-blue-rule) !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  font-family: var(--acl-font-ui) !important;
  font-size: 13px !important;
  box-shadow: 0 16px 40px rgba(26,31,46,0.18) !important;
  text-shadow: none !important;
}
body .toast::before {
  background: linear-gradient(90deg, transparent, var(--acl-cyan), var(--acl-blue), transparent) !important;
  border-radius: 12px 12px 0 0 !important;
}

/* Empty states */
body .empty-row,
body .cc-empty-note {
  color: var(--acl-mut) !important;
  -webkit-text-fill-color: var(--acl-mut) !important;
  text-align: center !important;
  padding: 24px 16px !important;
  font-style: italic !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE
   ═════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  body .chart-workspace {
    grid-template-columns: 1fr !important;
  }
  body .banner-demo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  body .cc-hero {
    padding: 24px 20px !important;
  }
  body .cc-hero-return {
    position: static !important;
    margin-bottom: 14px !important;
  }
  body .cc-hero-content {
    margin-top: 4px !important;
  }
  body .client-records-banner__content {
    margin-top: 18px !important;
  }
  body .client-records-banner__identity {
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
  }
  body .ch-photo-wrap,
  body #chPhotoContainer {
    width: 72px !important;
    height: 72px !important;
  }
  body .client-records-banner__name,
  body .client-records-banner__name--hero {
    font-size: 28px !important;
  }
  body .detail-grid {
    grid-template-columns: 1fr !important;
  }
  body .proto-row {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 520px) {
  body .cc-hero {
    margin: 16px 12px 20px !important;
    padding: 20px 16px !important;
  }
  body .chart-workspace,
  body .table-panel,
  body .toolbar-directory,
  body .pending-intakes-panel {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
  body .banner-demo-grid {
    grid-template-columns: 1fr !important;
  }
  body .client-records-banner__actions,
  body .ch-actions {
    width: 100% !important;
  }
  body .flag-select,
  body .status-select,
  body .btn-print-chart,
  body .btn-delete-chart {
    flex: 1 1 100% !important;
    text-align: center !important;
  }
  body .cc-hero-title {
    font-size: 32px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   PRINT — keep clean light layout
   ═════════════════════════════════════════════════════════════════════ */

@media print {
  body {
    background: #FFFFFF !important;
    color: #000000 !important;
  }
  body .cc-hero-return,
  body .chart-back-dir,
  body .ch-actions,
  body .client-records-banner__actions,
  body .admin-footer,
  body .current-stack-head-actions,
  body .note-input-wrap,
  body .filter-pill {
    display: none !important;
  }
  body .cc-hero,
  body .chart-section,
  body .chart-panel {
    box-shadow: none !important;
    page-break-inside: avoid !important;
  }
}

/* iPad portrait + landscape polish (768–1024px range).
   Audit M-7 noted that modals overflowed and the two-column layout
   was cramped at iPad widths. The 1100px breakpoint above already
   collapses chart-workspace to one column for tablets; this block
   tightens modal widths and inner padding so popups fit the viewport
   without horizontal scroll. */
@media (min-width: 720px) and (max-width: 1024px) {
  body .delete-modal {
    max-width: 92vw !important;
    padding: 22px !important;
  }
  body .delete-overlay {
    padding: 16px !important;
  }
  body .photo-lightbox img {
    max-width: 94vw !important;
    max-height: 88vh !important;
  }
  /* Make the photo lightbox close button comfortably tappable */
  body .photo-lightbox-close,
  body .lightbox-close {
    width: 44px !important;
    height: 44px !important;
    font-size: 22px !important;
  }
}