/* ============================================================================
   Havlon Health Academy — Dashboard theme
   ----------------------------------------------------------------------------
   SINGLE SOURCE OF TRUTH for all dashboard colors.

   To re-theme the dashboard, edit the values in the :root block below. Every
   dashboard template references these variables, so a change here cascades
   across the whole dashboard.

   Theme palette: yellow #FFF275  |  purple #3A0CA3  |  deep green #064E3B
   ============================================================================ */

:root {
  /* ---- Core palette ------------------------------------------------------ */
  --ink: #064E3B;              /* deep green — primary text / sidebar */
  --muted: #5A6B63;            /* muted grey-green — secondary text */
  --paper: #F5F7F5;            /* page background */
  --white: #FFFFFF;            /* cards / surfaces */
  --acid: #FFF275;             /* yellow accent (use on dark surfaces) */
  --gold-dark: #E8D84A;        /* deeper yellow */
  --brand: #3A0CA3;            /* purple — primary brand / actions */
  --brand-dark: #2A0878;       /* darker purple — hover */
  --brand-light: #7A55E0;      /* lighter purple — focus rings */
  --brand-tint: #EEE8FB;       /* faint purple wash (icon / badge bg) */
  --accent-orange: #EA580C;    /* warm accent (negative signals / badges) */
  --accent-green: #059669;     /* emerald — positive accents */
  --accent-blue: #6D28D9;      /* supplementary violet */
  --line: #DEE7E2;             /* borders / dividers */
  --card: #EDF3EF;             /* subtle panel / hover bg */
  --dark: #04332A;             /* player / dark surfaces (darker green) */

  /* ---- Semantic status colors ------------------------------------------- */
  --success: #059669;
  --success-strong: #065F46;
  --success-bg: #ECFDF5;
  --success-border: #A7F3D0;

  --danger: #B91C1C;
  --danger-bg: #FEE2E2;
  --danger-border: #FECACA;

  --warning: #B45309;
  --warning-strong: #78350F;
  --warning-bg: #FFFBEB;
  --warning-border: #FDE68A;

  --info-bg: rgba(58, 12, 163, 0.06);
  --info-border: rgba(58, 12, 163, 0.18);

  /* ---- Extra accent colors (category chips / cards) --------------------- */
  --purple: #6D28D9;
  --purple-bg: #F5F3FF;
  --pink: #DB2777;
  --cyan: #0E7490;
  --amber: #EAB308;            /* star ratings / amber accents */
  --amber-strong: #854D0E;
  --amber-bg: #FFFBEB;
  --amber-border: #FDE68A;
  --violet: #7C3AED;           /* archived / violet accents */
  --violet-bg: #F3E8FF;
  --slate: #9CB3AA;            /* muted text on dark surfaces */

  /* ---- RGB triplets (for alpha overlays: rgba(var(--x-rgb), a)) --------- */
  --ink-rgb: 6, 78, 59;
  --brand-rgb: 58, 12, 163;
  --acid-rgb: 255, 242, 117;
  --dark-rgb: 4, 51, 42;

  /* ---- Radii ------------------------------------------------------------ */
  --radius: 28px;
  --radius-sm: 16px;
  --radius-xs: 12px;

  /* ---- Shadows ---------------------------------------------------------- */
  --shadow: 0 18px 60px rgba(6, 78, 59, .12);
  --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* ============================================================================
   Form controls
   ----------------------------------------------------------------------------
   Shared field styling for the Django widgets that carry `form-control` /
   `form-select`, so any dashboard form is themed without needing its own
   style block. Templates that already scope their own field CSS (.cform,
   .acct-form, ...) win on specificity, so nothing there changes.
   ============================================================================ */
.form-control:not([type=checkbox]):not([type=radio]),
.form-select {
  width: 100%;
  padding: 11px 14px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius-xs);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  font-family: inherit;
}

.form-control:focus,
.form-select:focus { border-color: var(--brand); }

textarea.form-control { min-height: 110px; resize: vertical; }

.form-control[readonly] { opacity: .6; }