/* ============================================================================
   AvaSci — theme bridge
   ----------------------------------------------------------------------------
   The legacy Ready/Kaiadmin `site.css` styles Bootstrap components with many
   `!important` rules (e.g. `.btn-primary`, `.card`, `.form-control`). Those beat
   the Meridian theme on equal specificity. This file re-asserts the theme's
   component styling scoped under `.av-app` / `.av-auth` (specificity 0,2,0) WITH
   `!important`, so it wins over the template's 0,1,0 `!important` rules while
   still reading from the same `--av-*` tokens (light/dark both follow).
   Load LAST — after bootstrap, site.css, and avasci-theme.css.
   ========================================================================== */

/* ---- Buttons ---- */
.av-app .btn-primary, .av-app .btn-av,
.av-auth .btn-primary, .av-auth .btn-av {
  background: var(--av-btn) !important;
  background-color: transparent !important;
  border: none !important;
  color: var(--av-btn-ink) !important;
  box-shadow: 0 8px 22px var(--av-btn-glow) !important;
}
.av-app .btn-primary:hover, .av-app .btn-av:hover,
.av-auth .btn-primary:hover, .av-auth .btn-av:hover {
  color: var(--av-btn-ink) !important;
  filter: brightness(1.07);
  box-shadow: 0 12px 30px var(--av-btn-glow-hi) !important;
}
.av-app .btn-secondary, .av-auth .btn-secondary {
  background: var(--av-surface-3) !important;
  background-color: var(--av-surface-3) !important;
  border: 1px solid var(--av-line-strong) !important;
  color: var(--av-ink) !important;
}
.av-app .btn-secondary:hover, .av-auth .btn-secondary:hover {
  background-color: var(--av-surface-4) !important;
  color: var(--av-ink) !important;
}
.av-app .btn-danger, .av-auth .btn-danger {
  background: var(--av-danger) !important;
  background-color: var(--av-danger) !important;
  border-color: var(--av-danger) !important;
  color: #2A0608 !important;
}
.av-app .btn-ghost, .av-auth .btn-ghost {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--av-ink-muted) !important;
}
.av-app .btn-ghost:hover, .av-auth .btn-ghost:hover {
  background: var(--av-surface-2) !important;
  color: var(--av-ink) !important;
}

/* ---- Cards ---- */
.av-app .card, .av-auth .card {
  background: var(--av-glass) !important;
  border: 1px solid var(--av-line-strong) !important;
  border-radius: var(--av-radius-xl) !important;
  color: var(--av-ink) !important;
  box-shadow: var(--av-shadow), inset 0 1px 0 var(--av-glass-sheen) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
}
.av-app .card .card-header, .av-auth .card .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--av-line) !important;
  color: var(--av-ink) !important;
}
.av-app .card .card-body, .av-auth .card .card-body { background: transparent !important; color: var(--av-ink) !important; }

/* ---- Forms ---- */
.av-app .form-control, .av-app .form-select,
.av-auth .form-control, .av-auth .form-select {
  background: var(--av-surface-1) !important;
  background-color: var(--av-surface-1) !important;
  border: 1px solid var(--av-line) !important;
  color: var(--av-ink) !important;
  border-radius: var(--av-radius-sm) !important;
}
.av-app .form-control:focus, .av-app .form-select:focus,
.av-auth .form-control:focus, .av-auth .form-select:focus {
  background-color: var(--av-surface-1) !important;
  border-color: var(--av-accent) !important;
  box-shadow: var(--av-glow) !important;
  color: var(--av-ink) !important;
}
.av-app .form-control::placeholder, .av-auth .form-control::placeholder { color: var(--av-ink-dim) !important; }
.av-app .form-label, .av-auth .form-label { color: var(--av-ink-muted) !important; }
.av-app .form-check-input, .av-auth .form-check-input { background-color: var(--av-surface-1) !important; border-color: var(--av-line-strong) !important; }
.av-app .form-check-input:checked, .av-auth .form-check-input:checked { background-color: var(--av-accent) !important; border-color: var(--av-accent) !important; }
.av-app .input-group-text, .av-auth .input-group-text {
  background: var(--av-surface-3) !important;
  border: 1px solid var(--av-line) !important;
  color: var(--av-ink-muted) !important;
}

/* ---- Tables ---- */
.av-app .table, .av-auth .table { color: var(--av-ink) !important; --bs-table-bg: transparent !important; border-color: var(--av-line) !important; }
.av-app .table > thead th, .av-app .table > thead tr th {
  background: transparent !important;
  color: var(--av-ink-muted) !important;
  border-bottom: 1px solid var(--av-line) !important;
}
.av-app .table > tbody td, .av-app .table > tbody tr td {
  background: transparent !important;
  color: var(--av-ink) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--av-line-faint) !important;
}
.av-app .table > tbody tr:hover td { background: var(--av-surface-3) !important; }
/* Legacy partials still ship `table.bg-white` — neutralize so they adopt the dark glass theme */
.av-app table.bg-white, .av-app .table.bg-white { background: transparent !important; background-color: transparent !important; }
.av-app table.bg-white > thead th, .av-app .table.bg-white > thead th,
.av-app table.bg-white > tbody td, .av-app .table.bg-white > tbody td { background-color: transparent !important; color: var(--av-ink) !important; }

/* ---- Modals ---- */
.av-app .modal-content, .av-auth .modal-content {
  background: var(--av-glass-strong) !important;
  border: 1px solid var(--av-line-strong) !important;
  border-radius: var(--av-radius-xl) !important;
  color: var(--av-ink) !important;
}
.av-app .modal-header, .av-app .modal-footer,
.av-auth .modal-header, .av-auth .modal-footer { border-color: var(--av-line) !important; }
.av-app .modal-content .btn-close, .av-auth .modal-content .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }

/* Modals are relocated to <body> on open (to escape the .av-app stacking context
   that traps them behind the backdrop), so the Meridian modal styling must also
   apply UNSCOPED — beats site.css's `.modal-content { border: 3px ... !important }`
   via the same specificity + later source order. */
.modal-content {
  background: var(--av-glass-strong) !important;
  border: 1px solid var(--av-line-strong) !important;
  border-radius: var(--av-radius-xl) !important;
  color: var(--av-ink) !important;
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  backdrop-filter: blur(28px) saturate(150%);
  box-shadow: var(--av-shadow-lg), inset 0 1px 0 var(--av-glass-sheen);
}
.modal-header, .modal-footer { border-color: var(--av-line) !important; }
.modal-content .modal-title { color: var(--av-ink) !important; }
.modal-content .form-label, .modal-content label { color: #cfd8ec !important; }
.modal-content .text-muted { color: var(--av-ink-muted) !important; }
.modal-content .btn-close { filter: invert(1) grayscale(1) brightness(1.8); opacity: .75; }

/* ---- Tabs / pagination / dropdowns ---- */
.av-app .nav-tabs .nav-link, .av-auth .nav-tabs .nav-link {
  color: var(--av-ink-muted) !important; background: transparent !important;
  border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important;
}
.av-app .nav-tabs .nav-link.active, .av-auth .nav-tabs .nav-link.active {
  color: var(--av-ink) !important; background: transparent !important; border-bottom-color: var(--av-accent) !important;
}
.av-app .page-link { background: var(--av-surface-3) !important; border: 1px solid var(--av-line) !important; color: var(--av-ink-muted) !important; }
.av-app .page-item.active .page-link { background: var(--av-grad) !important; border: none !important; color: var(--av-accent-ink) !important; }
.av-app .dropdown-menu { background: var(--av-glass-menu) !important; border: 1px solid var(--av-line-strong) !important; color: var(--av-ink) !important; }
.av-app .dropdown-item { color: var(--av-ink-muted) !important; }
.av-app .dropdown-item:hover { background: var(--av-surface-3) !important; color: var(--av-ink) !important; }

/* ---- Alerts ---- */
.av-app .alert-success, .av-auth .alert-success { background: var(--av-success-soft) !important; border-color: rgba(61,220,132,.35) !important; color: #BFF3CF !important; }
.av-app .alert-warning, .av-auth .alert-warning { background: var(--av-warning-soft) !important; border-color: rgba(255,180,84,.35) !important; color: #FFE0B0 !important; }
.av-app .alert-danger,  .av-auth .alert-danger  { background: var(--av-danger-soft)  !important; border-color: rgba(255,107,115,.35) !important; color: #FFC2C5 !important; }
.av-app .alert .btn-close, .av-auth .alert .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }

/* ============================================================================
   Legacy custom-class remap — make pages that still use the old AvaSci classes
   (`.tbl-section`, `.button-primary`, `.custom-bg-*`, `.form-section`) adopt the
   Meridian look without touching their markup. Beats site.css's `!important`
   via the `.av-app` ancestor (0,2,0).
   ========================================================================== */

/* Section / table panels */
.av-app .tbl-section {
  background: var(--av-glass-table) !important;
  border: 1px solid var(--av-line-strong) !important;
  border-radius: var(--av-radius-xl) !important;
  color: var(--av-ink) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  box-shadow: var(--av-shadow), inset 0 1px 0 var(--av-glass-sheen);
}
.av-app .tbl-section h1 { font-family: var(--av-font-display) !important; font-weight: 500 !important; color: var(--av-ink) !important; }
.av-app .tbl-section thead tr { background: transparent !important; }
.av-app .tbl-section thead tr th {
  background: transparent !important;
  color: var(--av-ink-muted) !important;
  border-bottom: 1px solid var(--av-line) !important;
  font-family: var(--av-font-mono) !important;
  text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 500;
}
.av-app .tbl-section tbody tr,
.av-app .tbl-section tbody tr td {
  background: transparent !important;
  color: var(--av-ink) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--av-line-faint) !important;
}
.av-app .tbl-section tbody tr:hover td { background: var(--av-surface-3) !important; }

/* Primary pill action → Meridian orange button */
.av-app .button-primary {
  background: var(--av-btn) !important;
  background-color: transparent !important;
  border: none !important;
  color: var(--av-btn-ink) !important;
  border-radius: var(--av-pill) !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 22px var(--av-btn-glow) !important;
}
.av-app .button-primary:hover { color: var(--av-btn-ink) !important; filter: brightness(1.07); box-shadow: 0 12px 30px var(--av-btn-glow-hi) !important; }

/* Surfaces / borders / form panels */
.av-app .custom-bg-primary { background: transparent !important; }
.av-app .custom-bg-secondary { background: var(--av-surface-1) !important; }
.av-app .custom-border { border: 1px solid var(--av-line) !important; }
.av-app .form-section {
  background: var(--av-glass) !important;
  border: 1px solid var(--av-line-strong) !important;
  border-radius: var(--av-radius-xl) !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  backdrop-filter: blur(20px) saturate(145%);
}
.av-app .form-section label { color: var(--av-ink-muted) !important; }
.av-app .custom-tab .nav-tabs .nav-link.active { background: transparent !important; border: none !important; border-bottom: 2px solid var(--av-accent) !important; color: var(--av-ink) !important; }

/* DataTables search/length inputs in legacy panels */
.av-app .dt-search input, .av-app .dt-length select {
  background: var(--av-surface-1) !important;
  border: 1px solid var(--av-line) !important;
  color: var(--av-ink) !important;
  border-radius: var(--av-radius-sm) !important;
}
.av-app .dt-length label, .av-app .dt-search label, .av-app .dt-info { color: var(--av-ink-muted) !important; }

/* ============================================================================
   Feedback fixes — original logo, flat sidebar icons, prominent user avatar
   ========================================================================== */

/* Original AvaSci logo in the sidebar brand */
.av-app .av-brand { padding: 6px 6px 24px; }
.av-app .av-brand__img { height: 48px; width: auto; max-width: 210px; display: block; }
/* In light mode the white logo would disappear — flip it dark. */
[data-theme="light"] .av-app .av-brand__img { filter: brightness(0); }

/* Sidebar nav icons: no background tile (just the line icon, per the design) */
.av-app .av-nav__icon {
  background: transparent !important;
  width: 24px !important; height: 24px !important; flex: 0 0 24px !important;
  border-radius: 0 !important; font-size: 20px !important;
  box-shadow: none !important;
}
.av-app .av-nav__item.active .av-nav__icon { background: transparent !important; color: var(--av-accent) !important; }
.av-app .av-nav__item:hover .av-nav__icon { background: transparent !important; }

/* Topbar user avatar — gradient chip with the initials (e.g. "DR") */
.av-topbar .av-avatar {
  background: var(--av-grad) !important;
  color: var(--av-accent-ink) !important;
  font-family: var(--av-font-mono) !important;
  font-weight: 600 !important;
  width: 34px !important; height: 34px !important; font-size: 13px !important;
  box-shadow: 0 4px 14px rgba(54,226,200,.3);
}
.av-topbar .dropdown-toggle::after { color: var(--av-ink-muted); }

/* ============================================================================
   PatientChart inner report pages (Compare / Athletic / Consistency / Gait /
   TimeBased) — large bespoke renderers with their own purple/indigo accents.
   Harmonize the off-theme accent surfaces to the Meridian palette. Scoped to
   the specific classes so only those elements change; charts/content untouched.
   ========================================================================== */
/* These renderers are intentionally dark-only — use FIXED dark Meridian values
   (not theme tokens) so they stay correct even if the user toggles light mode. */
.av-content .compare-hero,
.av-content .patient-chart-hero,
.av-content [class$="-hero"] {
  background: radial-gradient(120% 150% at 88% -25%, rgba(59,158,255,.18), transparent 60%), linear-gradient(135deg, #1c2547, #0e1330) !important;
  border: 1px solid rgba(150,170,210,.22) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.4) !important;
}
.av-content .icon-wrapper,
.av-content .group-icon,
.av-content .step-number,
.av-content .mode-btn.active,
.av-content .dosage-icon.phase1,
.av-content .retest-icon,
.av-content .btn-insight {
  background: linear-gradient(118deg, #3B9EFF 0%, #36E2C8 92%) !important;
  color: #04101F !important;
}
.av-content .btn-outline-primary {
  background: transparent !important;
  border: 1px solid rgba(59,158,255,.5) !important;
  color: #6FB8FF !important;
}
.av-content .btn-outline-primary:hover { background: rgba(59,158,255,.14) !important; color: #fff !important; }
.av-content .retest-reminder { background: rgba(59,158,255,.13) !important; border-color: rgba(59,158,255,.5) !important; }