/*
 * aul-design.css — Auralense App Visual Design System Override
 * Forces light mode + all 13 spec points + 8 targeted fixes (June 2026)
 */

/* ============================================================
   FORCE LIGHT MODE — override both :root and .dark
   ============================================================ */
:root,
:root.dark,
html.dark,
.dark {
  --background: 60 6% 97% !important;
  --card: 0 0% 100% !important;
  --card-foreground: 0 0% 10% !important;
  --popover: 0 0% 100% !important;
  --popover-foreground: 0 0% 10% !important;
  --foreground: 0 0% 10% !important;
  --muted-foreground: 0 0% 42% !important;
  --muted: 280 8% 95% !important;
  --border: 0 0% 91% !important;
  --input: 0 0% 91% !important;
  --primary: 280 16% 28% !important;
  --primary-foreground: 0 0% 100% !important;
  --secondary: 280 8% 94% !important;
  --secondary-foreground: 280 16% 28% !important;
  --accent: 280 8% 95% !important;
  --accent-foreground: 280 16% 28% !important;
  --ring: 280 16% 28% !important;
  --destructive: 0 72% 51% !important;
  --destructive-foreground: 0 0% 100% !important;
  --color-overdue: #D94040 !important;
  --color-success: #2E9E6B !important;
  --color-overdue-bg: rgba(217,64,64,0.10) !important;
  --color-success-bg: rgba(46,158,107,0.10) !important;
  --color-warning: #E8A020 !important;
  --color-warning-bg: rgba(232,160,32,0.10) !important;
  --color-upcoming: #2a5080 !important;
  --color-upcoming-bg: #c2e5f8 !important;
  --color-inprogress: #4a3f5c !important;
  --color-inprogress-bg: #b7acca !important;
  --chip-blush: #fbcac4 !important;
  --chip-sage: #c2e5c8 !important;
  --chip-sky: #c2e5f8 !important;
  --chip-gold-light: #e8d49e !important;
  --chip-mauve: #b7acca !important;
  --sidebar-background: 280 16% 28% !important;
  --sidebar-foreground: 0 0% 90% !important;
  --sidebar-primary: 42 52% 53% !important;
  --sidebar-primary-foreground: 280 16% 18% !important;
  --sidebar-accent: 280 14% 35% !important;
  --sidebar-accent-foreground: 0 0% 95% !important;
  --sidebar-border: 280 14% 22% !important;
  --sidebar-ring: 42 52% 53% !important;
  --gold: #C9A84C !important;
  --gold-light: #e8d49e !important;
  --gold-dark: #a88830 !important;
}

/* ============================================================
   CANVAS — #F8F8F6
   ============================================================ */
html, html.dark, body, #root {
  background-color: #F8F8F6 !important;
  color: #1A1A1A !important;
}
.bg-background, [class*="bg-background"] {
  background-color: #F8F8F6 !important;
}

/* ============================================================
   CARD SYSTEM — white, no border, shadow, 12px radius
   ============================================================ */
[data-slot="card"] {
  background-color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0px 2px 12px rgba(0,0,0,0.06) !important;
  border-radius: 12px !important;
}
.bg-card { background-color: #FFFFFF !important; }
.rounded-xl.border,
.rounded-lg.border,
.rounded-2xl.border {
  background-color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0px 2px 12px rgba(0,0,0,0.06) !important;
  border-radius: 12px !important;
}
[data-slot="card-content"] { padding: 24px !important; }
[data-slot="card-header"] { padding: 24px 24px 0 24px !important; }
[data-slot="card-footer"] { padding: 0 24px 24px 24px !important; }

/* ============================================================
   FIX 2 — AUL SCORE CARD (June 24 update)
   White card, gradient half-circle gauge, dark score number.
   Layout/visual treatment is applied via inline styles in the
   dashboard row; these rules only neutralize the prior dark
   aubergine override so the white treatment renders.
   ============================================================ */
.aul-score-card,
.score-gauge-card.aul-score-card,
.score-gauge-card {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

/* Parent wrapper of the score gauge — keep transparent so the
   inline-styled white column card shows through */
[data-slot="card"]:has(.aul-score-card),
[data-slot="card"]:has(.score-gauge-card) {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ============================================================
   FIX 3 — DASHBOARD AUL SCORE ROW (June 24 update)
   The row is now an inline-styled two-column flex layout
   (65% gauge / 35% stacked stat cards, 220px tall). The old
   140px height locks are removed so they don't fight it.
   ============================================================ */
.score-gauge-card,
[data-slot="card"]:has(.score-gauge-card) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* ============================================================
   FIX 5 — URGENCY PILL SYSTEM
   ============================================================ */

/* Base pill shape */
.aul-pill-base,
span.aul-pill-base,
.num.aul-pill-base {
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Safe — >30 days: blue */
.aul-pill-safe {
  background-color: rgba(59,130,246,0.10) !important;
  color: #1D4ED8 !important;
}

/* Approaching — ≤30 days: amber */
.aul-pill-approaching {
  background-color: rgba(232,160,32,0.10) !important;
  color: #E8A020 !important;
}

/* Overdue — past deadline: red */
.aul-pill-overdue,
.status-overdue {
  background-color: rgba(217,64,64,0.10) !important;
  color: #D94040 !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Existing status-upcoming → safe blue */
.status-upcoming {
  background-color: rgba(59,130,246,0.10) !important;
  color: #1D4ED8 !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

/* ============================================================
   FIX 4 — ICON CONTAINER + STROKE PAIRING
   ============================================================ */

/* Blue container → blue icon */
[style*="rgba(59, 130, 246"] svg,
[style*="rgba(59,130,246"] svg,
[class*="bg-blue-50"] svg,
div[style*="background: rgb(219, 234, 254)"] svg,
div[style*="background:rgb(219,234,254)"] svg {
  color: #1D4ED8 !important;
  stroke: #1D4ED8 !important;
}
.p-2.rounded-lg.bg-blue-50 svg,
[class*="bg-blue-50"] svg {
  color: #1D4ED8 !important;
}

/* Green container → green icon */
[style*="rgba(46, 158, 107"] svg,
[style*="rgba(46,158,107"] svg,
[class*="bg-emerald-50"] svg,
[class*="bg-green-50"] svg {
  color: #166534 !important;
  stroke: #166534 !important;
}
.p-2.rounded-lg.bg-emerald-50 svg,
.p-2.rounded-lg.bg-green-50 svg {
  color: #166534 !important;
}

/* Red container → red icon */
[style*="var(--chip-blush)"] svg,
[style*="rgba(217, 64, 64"] svg,
[class*="bg-red-50"] svg {
  color: #991B1B !important;
  stroke: #991B1B !important;
}

/* Gold container → gold dark icon */
[style*="var(--chip-gold-light)"] svg,
[style*="rgba(201, 168, 76"] svg {
  color: #92620A !important;
  stroke: #92620A !important;
}

/* Sky/blue-sky container → blue icon */
[style*="var(--chip-sky)"] svg {
  color: #1D4ED8 !important;
  stroke: #1D4ED8 !important;
}

/* Purple/mauve container → aubergine icon */
[style*="var(--chip-mauve)"] svg,
[style*="rgba(72, 60, 81"] svg {
  color: #483C51 !important;
  stroke: #483C51 !important;
}

/* Standalone icons (no container) — neutral gray */
svg[class*="lucide"],
[data-slot="icon"],
nav svg,
aside svg:not([class*="text-white"]) {
  color: #9A9A9A !important;
}

/* Active sidebar icons */
[data-active="true"] svg,
[aria-current="page"] svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

/* Primary button icons */
button[class*="bg-primary"] svg {
  color: #FFFFFF !important;
}

/* ============================================================
   FIX 7 — OVERDUE CARD HAIRLINE BORDER
   Cards for overdue items: 1px solid #D94040, white bg
   ============================================================ */
[data-testid*="overdue-item"],
.overdue-card,
div[class*="overdue-item"] {
  border: 1px solid #D94040 !important;
  background-color: #FFFFFF !important;
  border-radius: 8px !important;
}

/* Target the overdue row divs patched in JS (now have bg-white border border-[#D94040]) */
.rounded-lg.bg-white.border {
  border-color: transparent !important;
}
/* Specifically the overdue items */
[data-testid^="overdue-item"] {
  border: 1px solid #D94040 !important;
  background-color: #FFFFFF !important;
}

/* ============================================================
   SIDEBAR STYLING
   ============================================================ */
.sidebar-gradient,
[class*="sidebar-gradient"],
[style*="hsl(var(--sidebar-background"] {
  background-color: #483C51 !important;
  background: #483C51 !important;
}
.sidebar-gradient *, [class*="sidebar-gradient"] * { color: #E8E4EC; }
.sidebar-gradient [class*="uppercase"],
.sidebar-gradient [class*="tracking-wider"] {
  color: #9A7FB0 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}
.sidebar-gradient a, aside a, aside button { color: #E8E4EC !important; font-weight: 400 !important; }
[data-active="true"], .sidebar-gradient [data-active="true"] {
  background-color: rgba(255,255,255,0.10) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}
.sidebar-gradient [class*="badge"],
.sidebar-gradient span[class*="rounded"] {
  background-color: rgba(201,168,76,0.15) !important;
  color: #C9A84C !important;
  border: none !important;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1 { color: #1A1A1A !important; font-weight: 600 !important; }
h2 { color: #1A1A1A !important; font-weight: 500 !important; }
h3 { color: #1A1A1A !important; font-weight: 500 !important; }
.text-foreground, [class*="text-foreground"] { color: #1A1A1A !important; }
.text-card-foreground { color: #1A1A1A !important; }
.text-muted-foreground, [class*="text-muted-foreground"] { color: #6B6B6B !important; }
label { color: #6B6B6B !important; }
thead th, [role="columnheader"], th {
  color: #9A9A9A !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  background-color: transparent !important;
}

/* ============================================================
   BADGES
   ============================================================ */
[data-slot="badge"], .badge, [class*="badge"] {
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
[data-slot="badge"][class*="destructive"], [class*="badge-destructive"] {
  background-color: rgba(217,64,64,0.10) !important;
  color: #D94040 !important;
  border: none !important;
}
[data-slot="badge"][class*="success"], [class*="badge-success"] {
  background-color: rgba(46,158,107,0.10) !important;
  color: #2E9E6B !important;
  border: none !important;
}
[data-slot="badge"][class*="secondary"], [class*="badge-secondary"] {
  background-color: #F0EEF3 !important;
  color: #4A4A4A !important;
  border: none !important;
}

/* ============================================================
   TABS
   ============================================================ */
[role="tablist"], [data-slot="tabs-list"] {
  border-bottom: 1px solid #E8E8E8 !important;
  background: transparent !important;
  border-radius: 0 !important;
  gap: 0 !important;
  padding: 0 !important;
}
[role="tab"], [data-slot="tabs-trigger"] {
  color: #9A9A9A !important;
  font-weight: 400 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border-bottom: 2px solid transparent !important;
  padding: 10px 16px !important;
}
[role="tab"][aria-selected="true"],
[data-slot="tabs-trigger"][data-state="active"] {
  color: #483C51 !important;
  font-weight: 600 !important;
  border-bottom: 2px solid #483C51 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
[class*="variant-default"], button[class*="bg-primary"] {
  background-color: #483C51 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
}
[class*="variant-outline"] {
  background-color: #FFFFFF !important;
  color: #483C51 !important;
  border: 1px solid #483C51 !important;
  border-radius: 8px !important;
}
[class*="variant-destructive"] {
  background-color: #FFFFFF !important;
  color: #D94040 !important;
  border: 1px solid #D94040 !important;
  border-radius: 8px !important;
}
[class*="variant-ghost"] {
  background: transparent !important;
  color: #483C51 !important;
}

/* ============================================================
   FORM INPUTS
   ============================================================ */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea, select {
  background-color: #FFFFFF !important;
  border: 1px solid #E0DCEA !important;
  border-radius: 8px !important;
  color: #1A1A1A !important;
}
input:focus, textarea:focus, select:focus {
  border-color: #483C51 !important;
  box-shadow: 0 0 0 2px rgba(72,60,81,0.12) !important;
  outline: none !important;
}

/* ============================================================
   DIALOG / MODAL / POPOVER
   ============================================================ */
[role="dialog"], [data-slot="dialog-content"] {
  background-color: #FFFFFF !important;
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.12) !important;
  color: #1A1A1A !important;
}
[data-slot="popover-content"],
[data-slot="dropdown-menu-content"],
[role="menu"] {
  background-color: #FFFFFF !important;
  border: 1px solid #E8E8E8 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08) !important;
  color: #1A1A1A !important;
}
[role="menuitem"]:hover, [role="option"]:hover {
  background-color: #F0EEF3 !important;
  color: #483C51 !important;
}

/* ============================================================
   TABLES
   ============================================================ */
table { width: 100% !important; border-collapse: collapse !important; }
thead { border-bottom: 1px solid #E8E8E8 !important; }
tbody tr { border-bottom: 1px solid #F0F0F0 !important; min-height: 52px !important; }
tbody tr:hover { background-color: #FAFAFA !important; }
td, [role="cell"] { padding-top: 14px !important; padding-bottom: 14px !important; }

/* ============================================================
   MISC
   ============================================================ */
hr, [data-slot="separator"], [class*="separator"] {
  border-color: #E8E8E8 !important;
  opacity: 1 !important;
}
.bg-white { background-color: #FFFFFF !important; }
.bg-muted { background-color: #F0EEF3 !important; }
.border-border, [class*="border-border"] { border-color: #E8E8E8 !important; }
[role="progressbar"] { background-color: #F0EEF3 !important; border-radius: 4px !important; }
[role="progressbar"] > * { background-color: #483C51 !important; border-radius: 4px !important; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(72,60,81,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(72,60,81,0.4); }

/* ============================================================
   REMOVE ITALIC GOLD TAGLINE (CSS fallback — JS handles primary)
   ============================================================ */
p[style*="c9a84c"], p[style*="C9A84C"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ============================================================
   FIX A — SIDEBAR WORDMARK FONT (June 25)
   "Auralense™" wordmark in the sidebar header renders in
   Playfair Display. Tagline + all other text unchanged.
   (Playfair Display is already loaded via the Google Fonts
   link in index.html, so no extra @import is required.)
   ============================================================ */
.aul-wordmark {
  font-family: 'Playfair Display', serif !important;
}

/* ============================================================
   FIX B — SIDEBAR ENTITY ICON (June 25)
   White rounded-square container with soft shadow; icon glyph
   in aubergine #483C51. Overrides the sidebar-wide #E8E4EC
   icon color so the entity icon strokes render correctly.
   Shape and size are unchanged (w-7 h-7 rounded-md).
   ============================================================ */
.aul-entity-icon {
  background: #FFFFFF !important;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08) !important;
}
.aul-entity-icon svg,
.aul-entity-icon svg * {
  color: #483C51 !important;
  stroke: #483C51 !important;
}