/*
 * ═══════════════════════════════════════════════════════
 *  MEDLYTICS — Brand & Component Overrides
 *  Loaded AFTER style.css as an override layer.
 * ═══════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════════════
   SECTION A — BRAND COLORS
   ══════════════════════════════════════════════════════ */

:root {
  --primary:           #00D1B2;
  --primary-hover:     #00B89C;
  --primary-light:     rgba(0, 209, 178, 0.12);
  --bg-sidebar-active: #00D1B2;
  --text-pre:          #00D1B2;
}

/* ══════════════════════════════════════════════════════
   SECTION C — GLOBAL COMPONENT OVERRIDES
   Safe for both light and dark — only change accent color.
   ══════════════════════════════════════════════════════ */

/* ── Primary button — teal gradient ── */
.btn-primary {
  background: linear-gradient(135deg, #00D1B2, #38BDF8) !important;
  box-shadow: 0 3px 12px rgba(0, 209, 178, 0.30) !important;
  color: #fff !important;
}
.btn-primary:hover {
  box-shadow: 0 5px 18px rgba(0, 209, 178, 0.48) !important;
}

/* ── Input / Select / Textarea focus ring ── */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 209, 178, 0.15) !important;
}

/* ── Sidebar active glow ── */
.sidebar-nav a.active,
.nav-sub-item.active {
  box-shadow: 0 2px 10px rgba(0, 209, 178, 0.30) !important;
}

/* ── Stat / Metric card hover accent ── */
.stat-card:hover,
.metric-card:hover,
.summary-card:hover {
  border-color: rgba(0, 209, 178, 0.40) !important;
  box-shadow: 0 6px 20px rgba(0, 209, 178, 0.15), 0 2px 6px rgba(0, 0, 0, 0.10) !important;
}
.stat-card::after,
.metric-card::after,
.summary-card::after {
  background: linear-gradient(90deg, #00D1B2, #38BDF8) !important;
}

/* ── Quick links hover ── */
.quick-link-btn:hover,
.quick-links button:hover {
  background: rgba(0, 209, 178, 0.08) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* ── Branch info box ── */
.branch-info-box {
  background: rgba(0, 209, 178, 0.08) !important;
  border-color: rgba(0, 209, 178, 0.25) !important;
  color: var(--primary) !important;
}

/* ── Highlight-blue → teal ── */
.highlight-blue {
  border-color: rgba(0, 209, 178, 0.25) !important;
  background: rgba(0, 209, 178, 0.05) !important;
}
.highlight-blue::after {
  background: var(--primary) !important;
}

/* ── Header button hover ── */
.header-btn:hover {
  background: var(--primary-light) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* ── Notice banner ── */
.header-row-notice.notice-review {
  background: rgba(0, 209, 178, 0.07) !important;
  border-top-color: rgba(0, 209, 178, 0.18) !important;
}