/* cojent-r56-theme.css — r56 iOS/Apple-style light theme override.
 * Pure CSS override sheet. Loaded AFTER all other stylesheets so it wins the cascade.
 * Kills every dark page background; forces a warm near-white canvas with legible text.
 * Preserves the Cojent teal brand accent and semantic status colours (green/amber/red).
 */

:root {
  --cj-bg: #FAFAFA;
  --cj-surface: #FFFFFF;
  --cj-surface-alt: #F5F5F7;
  --cj-sidebar-bg: #F5F5F7;
  --cj-border: rgba(0, 0, 0, 0.08);
  --cj-border-strong: rgba(0, 0, 0, 0.14);
  --cj-text: #1D1D1F;
  --cj-text-muted: #6E6E73;
  --cj-text-faint: #86868B;
  --cj-accent: #01696F;
  --cj-accent-strong: #0C4E54;
  --cj-accent-soft: rgba(1, 105, 111, 0.08);
  --cj-success: #1F883D;
  --cj-warning: #B25E09;
  --cj-danger: #C22C4C;
  --cj-info: #0969DA;
  --cj-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
  --cj-shadow-elev: 0 4px 12px rgba(0, 0, 0, 0.08);
  color-scheme: light !important;
}

/* ============================================================
 * 1. Global page + typography
 * ============================================================ */
html, body, #root, #app,
[data-theme="dark"], .dark, [class*="dark:"] {
  background: var(--cj-bg) !important;
  color: var(--cj-text) !important;
  color-scheme: light !important;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
 * 2. Kill dark-mode Tailwind utility classes
 * ============================================================ */
.bg-slate-900, .bg-slate-800, .bg-slate-700,
.bg-gray-900, .bg-gray-800, .bg-gray-700,
.bg-neutral-900, .bg-neutral-800,
.bg-zinc-900, .bg-zinc-800,
.bg-black {
  background: var(--cj-bg) !important;
}

.bg-slate-950, .bg-gray-950, .bg-neutral-950, .bg-zinc-950 {
  background: var(--cj-surface-alt) !important;
}

.bg-slate-600, .bg-gray-600, .bg-neutral-600, .bg-zinc-600 {
  background: var(--cj-surface) !important;
  border: 1px solid var(--cj-border);
}

/* Light text that was meant to sit on dark → make dark for the new light surfaces. */
.text-white,
.text-slate-100, .text-slate-200, .text-slate-300,
.text-gray-100, .text-gray-200, .text-gray-300,
.text-neutral-100, .text-neutral-200 {
  color: var(--cj-text) !important;
}

/* Muted greys. */
.text-slate-400, .text-slate-500,
.text-gray-400, .text-gray-500,
.text-neutral-400, .text-neutral-500 {
  color: var(--cj-text-muted) !important;
}

/* Dark borders → hairline. */
.border-slate-700, .border-slate-800,
.border-gray-700, .border-gray-800,
.border-neutral-700, .border-neutral-800 {
  border-color: var(--cj-border) !important;
}

/* ============================================================
 * 3. Semantic components (sidebar, header, cards)
 * ============================================================ */
/* Sidebar */
nav, aside,
[class*="sidebar"], [class*="Sidebar"] {
  background: var(--cj-sidebar-bg) !important;
  border-right: 1px solid var(--cj-border);
  color: var(--cj-text) !important;
}
[class*="sidebar"] [class*="section"],
[class*="Sidebar"] [class*="section"],
aside .sidebar-section-label {
  color: var(--cj-text-muted) !important;
}
[class*="sidebar"] .active,
[class*="Sidebar"] .active,
aside .active,
[class*="sidebar"] [aria-current="page"],
[class*="Sidebar"] [aria-current="page"] {
  background: var(--cj-accent-soft) !important;
  color: var(--cj-accent-strong) !important;
}

/* Top bar / header */
header, [role="banner"],
[class*="topbar"], [class*="TopBar"], [class*="header"] {
  background: var(--cj-surface) !important;
  border-bottom: 1px solid var(--cj-border) !important;
  color: var(--cj-text) !important;
}

/* Cards — scoped to main content so we don't blanket every rounded div. */
main [class*="card"], main [class*="Card"],
main [class*="panel"], main [class*="Panel"],
main .rounded-xl, main .rounded-2xl {
  background: var(--cj-surface) !important;
  box-shadow: var(--cj-shadow-card) !important;
  border: 1px solid var(--cj-border) !important;
}

/* ============================================================
 * 4. Buttons, tabs, inputs
 * ============================================================ */
/* Primary teal buttons: subtle hover darken. */
button[class*="teal"]:hover,
button[style*="01696F" i]:hover,
button[style*="20808D" i]:hover,
a[class*="teal"]:hover {
  filter: brightness(0.95);
}

/* Ghost / outline buttons that were designed for dark backgrounds. */
button.btn-ghost, button.btn-outline,
[class*="btn-ghost"], [class*="btn-outline"],
button[class*="ghost"], button[class*="outline"] {
  background: var(--cj-surface) !important;
  color: var(--cj-text) !important;
  border: 1px solid var(--cj-border) !important;
}

/* Tabs strip. */
[role="tablist"], [class*="tabs"], [class*="Tabs"] {
  background: var(--cj-surface-alt) !important;
}
[role="tab"][aria-selected="true"],
[class*="tab"][class*="active"],
[class*="Tab"][class*="active"] {
  background: var(--cj-surface) !important;
  color: var(--cj-text) !important;
  box-shadow: var(--cj-shadow-card) !important;
}

/* Inputs / selects / textareas. */
input, select, textarea {
  background: var(--cj-surface) !important;
  color: var(--cj-text) !important;
  border: 1px solid var(--cj-border) !important;
  border-radius: 8px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--cj-accent) !important;
  box-shadow: 0 0 0 3px var(--cj-accent-soft) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: var(--cj-text-faint) !important; }

/* Hide the floating Dark theme toggle — we force light. */
[class*="theme-toggle"], [class*="ThemeToggle"],
[aria-label*="dark" i], [title*="dark" i] {
  display: none !important;
}

/* ============================================================
 * 5. Data-viz + KPI cards
 * ============================================================ */
/* Large KPI numbers default to primary text; semantic colours are left alone
 * (we intentionally do NOT override .text-green-*, .text-emerald-*, .text-red-*,
 * .text-amber-*, .text-yellow-* so status colours survive). */
[class*="kpi"] [class*="value"],
[class*="Kpi"] [class*="value"],
[class*="stat"] [class*="value"],
[class*="metric"] [class*="value"] {
  color: var(--cj-text) !important;
}

/* ============================================================
 * 6. Toasts + modals
 * ============================================================ */
/* Success / info / neutral toasts. */
[class*="toast"], [class*="Toast"],
[class*="notification"], [class*="Notification"],
[role="status"][class*="toast"] {
  background: var(--cj-surface) !important;
  color: var(--cj-text) !important;
  border: 1px solid var(--cj-border) !important;
  box-shadow: var(--cj-shadow-elev) !important;
}
/* Error toasts keep a bright Apple red. */
[class*="toast"][class*="error"], [class*="Toast"][class*="error"],
[class*="toast"][class*="danger"], [class*="Toast"][class*="danger"],
[class*="toast"][class*="destructive"], [class*="Toast"][class*="destructive"] {
  background: #FF3B30 !important;
  color: #FFFFFF !important;
  border: 1px solid #FF3B30 !important;
}

/* Modal overlay + panel. */
[class*="overlay"], [class*="Overlay"],
[class*="backdrop"], [class*="Backdrop"],
[data-radix-portal] [class*="fixed"][class*="inset-0"] {
  background: rgba(0, 0, 0, 0.4) !important;
}
[role="dialog"], [class*="modal"], [class*="Modal"],
[class*="dialog"], [class*="Dialog"] {
  background: var(--cj-surface) !important;
  color: var(--cj-text) !important;
}

/* ============================================================
   R57_SIDEBAR_AND_DEPTH — appended 2026-07-12
   ============================================================ */

:root {
  /* Sidebar — keep Cojent navy (brand); override r56's grey. */
  --cj-sidebar-bg: #0B2138;
  --cj-sidebar-text: #E5E9EF;
  --cj-sidebar-text-muted: #8C9AAE;
  --cj-sidebar-hover: rgba(255, 255, 255, 0.06);
  --cj-sidebar-active-bg: rgba(32, 128, 141, 0.22);
  --cj-sidebar-active-text: #FFFFFF;
  --cj-sidebar-active-accent: #20808D;

  /* Apple card radius + shadow system. */
  --cj-radius-sm: 10px;
  --cj-radius-md: 14px;
  --cj-radius-lg: 16px;
  --cj-radius-xl: 20px;
  --cj-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --cj-shadow-2: 0 4px 8px rgba(15, 23, 42, 0.05), 0 2px 4px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.06);
  --cj-shadow-3: 0 12px 24px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* ---- Problem 1: sidebar ----
 * r56 blanket-killed dark Tailwind bg/text classes everywhere, repainting the
 * navy nav to white pills with charcoal (ghost) text. Re-assert the navy sidebar
 * and correct text below, scoped to the sidebar containers only. */

/* 1. Sidebar container */
nav[class*="sidebar" i],
aside[class*="sidebar" i],
[class*="Sidebar"],
[class*="sidebar"],
nav[aria-label*="main" i],
nav[role="navigation"],
body > div > nav,
body > div > aside {
  background: var(--cj-sidebar-bg) !important;
  color: var(--cj-sidebar-text) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.12) !important;
}

/* 2. Descendants that r56 painted with a killed slate/gray/neutral/zinc/black
 *    utility → make transparent so the navy shows through. */
nav[class*="sidebar" i] .bg-slate-900, nav[class*="sidebar" i] .bg-slate-800, nav[class*="sidebar" i] .bg-slate-700,
nav[class*="sidebar" i] .bg-gray-900, nav[class*="sidebar" i] .bg-gray-800, nav[class*="sidebar" i] .bg-gray-700,
nav[class*="sidebar" i] .bg-neutral-900, nav[class*="sidebar" i] .bg-neutral-800,
nav[class*="sidebar" i] .bg-zinc-900, nav[class*="sidebar" i] .bg-zinc-800,
nav[class*="sidebar" i] .bg-slate-600, nav[class*="sidebar" i] .bg-black,
aside[class*="sidebar" i] .bg-slate-900, aside[class*="sidebar" i] .bg-slate-800, aside[class*="sidebar" i] .bg-slate-700,
aside[class*="sidebar" i] .bg-gray-900, aside[class*="sidebar" i] .bg-gray-800, aside[class*="sidebar" i] .bg-gray-700,
aside[class*="sidebar" i] .bg-neutral-900, aside[class*="sidebar" i] .bg-neutral-800,
aside[class*="sidebar" i] .bg-zinc-900, aside[class*="sidebar" i] .bg-zinc-800,
aside[class*="sidebar" i] .bg-slate-600, aside[class*="sidebar" i] .bg-black,
[class*="Sidebar"] .bg-slate-900, [class*="Sidebar"] .bg-slate-800, [class*="Sidebar"] .bg-slate-700,
[class*="Sidebar"] .bg-gray-900, [class*="Sidebar"] .bg-gray-800, [class*="Sidebar"] .bg-gray-700,
[class*="Sidebar"] .bg-neutral-900, [class*="Sidebar"] .bg-neutral-800,
[class*="Sidebar"] .bg-zinc-900, [class*="Sidebar"] .bg-zinc-800,
[class*="Sidebar"] .bg-slate-600, [class*="Sidebar"] .bg-black {
  background: transparent !important;
  background-color: transparent !important;
}

/* 3. All text inside sidebar → near-white (undo r56's charcoal flip). */
nav[class*="sidebar" i], nav[class*="sidebar" i] *,
aside[class*="sidebar" i], aside[class*="sidebar" i] *,
[class*="Sidebar"], [class*="Sidebar"] *,
nav[role="navigation"], nav[role="navigation"] * {
  color: var(--cj-sidebar-text) !important;
}

/* 4. Section headers (SERVICE STREAM, OPERATIONS, CLIENTS …).
 *    R77Q9I: scoped to h3 and .sidebar-section-label only. The old
 *    selector included .text-xs and matched the label spans, forcing
 *    them into 600-weight wide-tracked styling which broke layout. */
nav[class*="sidebar" i] h3,
aside[class*="sidebar" i] h3,
[class*="Sidebar"] h3,
.sidebar-section-label {
  color: var(--cj-sidebar-text-muted) !important;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* 5. Nav item resting state. */
nav[class*="sidebar" i] a, nav[class*="sidebar" i] button,
aside[class*="sidebar" i] a, aside[class*="sidebar" i] button,
[class*="Sidebar"] a, [class*="Sidebar"] button,
nav[role="navigation"] a, nav[role="navigation"] button,
.sidebar-link {
  background: transparent !important;
  color: var(--cj-sidebar-text) !important;
  border-radius: 10px;
  padding: 8px 12px;
  margin: 2px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

/* 6. Nav item hover. */
nav[class*="sidebar" i] a:hover, nav[class*="sidebar" i] button:hover,
aside[class*="sidebar" i] a:hover, aside[class*="sidebar" i] button:hover,
[class*="Sidebar"] a:hover, [class*="Sidebar"] button:hover,
nav[role="navigation"] a:hover, nav[role="navigation"] button:hover,
.sidebar-link:hover {
  background: var(--cj-sidebar-hover) !important;
}

/* 7. Nav item ACTIVE (aria-current / active / selected / bright-blue pill). */
nav[class*="sidebar" i] [aria-current], nav[class*="sidebar" i] .active, nav[class*="sidebar" i] .selected,
aside[class*="sidebar" i] [aria-current], aside[class*="sidebar" i] .active, aside[class*="sidebar" i] .selected,
[class*="Sidebar"] [aria-current], [class*="Sidebar"] .active, [class*="Sidebar"] .selected,
nav[role="navigation"] [aria-current], nav[role="navigation"] .active, nav[role="navigation"] .selected,
.sidebar-link.active,
nav[class*="sidebar" i] .bg-blue-500, nav[class*="sidebar" i] .bg-blue-600, nav[class*="sidebar" i] .bg-sky-500, nav[class*="sidebar" i] .bg-cyan-500,
aside[class*="sidebar" i] .bg-blue-500, aside[class*="sidebar" i] .bg-blue-600, aside[class*="sidebar" i] .bg-sky-500, aside[class*="sidebar" i] .bg-cyan-500,
[class*="Sidebar"] .bg-blue-500, [class*="Sidebar"] .bg-blue-600, [class*="Sidebar"] .bg-sky-500, [class*="Sidebar"] .bg-cyan-500 {
  background: var(--cj-sidebar-active-bg) !important;
  color: var(--cj-sidebar-active-text) !important;
  box-shadow: inset 3px 0 0 var(--cj-sidebar-active-accent) !important;
}

/* 8. Sidebar icons inherit item colour. */
nav[class*="sidebar" i] svg, aside[class*="sidebar" i] svg,
[class*="Sidebar"] svg, nav[role="navigation"] svg,
.sidebar-link .icon {
  color: currentColor !important;
  opacity: 0.85;
}

/* 9. Logo area — keep wordmark white, no filter. */
nav[class*="sidebar" i] svg, nav[class*="sidebar" i] img,
aside[class*="sidebar" i] svg, aside[class*="sidebar" i] img {
  filter: none;
}
nav[class*="sidebar" i] [class*="logo" i],
aside[class*="sidebar" i] [class*="logo" i],
[class*="Sidebar"] [class*="logo" i] {
  color: #FFFFFF !important;
}

/* ---- Problem 2: Apple card depth (scoped to main, never the sidebar) ---- */
main [class*="card" i]:not([class*="cardholder"]),
main [class*="Card"]:not([class*="CardTitle"]):not([class*="CardHeader"]):not([class*="CardBody"]):not([class*="CardContent"]),
main [class*="panel" i],
main .rounded-lg,
main .rounded-xl,
main .rounded-2xl,
main [class*="widget" i] {
  background: var(--cj-surface) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: var(--cj-radius-lg) !important;
  box-shadow: var(--cj-shadow-2) !important;
  transition: box-shadow 200ms ease, transform 200ms ease;
}

/* Hover elevation ONLY on interactive cards (links/buttons/role=button). */
main a[class*="card" i]:hover,
main button[class*="card" i]:hover,
main [role="button"][class*="card" i]:hover {
  box-shadow: var(--cj-shadow-3) !important;
}

/* KPI / stat / metric hero cards — a touch more radius + layered-glass sheen. */
main [class*="kpi" i], main [class*="stat" i], main [class*="metric" i] {
  border-radius: var(--cj-radius-xl) !important;
  box-shadow: var(--cj-shadow-2) !important;
  position: relative;
  overflow: hidden;
}
main [class*="kpi" i]::before,
main [class*="stat" i]::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 40%);
  opacity: 0.5;
}

/* Buttons — Apple pill radius + tactile teal shadow. */
main button, main [role="button"], main .btn {
  border-radius: var(--cj-radius-sm) !important;
}
main button[class*="teal"], main [class*="btn-primary"],
main button[style*="01696F" i], main button[style*="20808D" i] {
  box-shadow: 0 1px 2px rgba(1, 105, 111, 0.24);
}

/* ============================================================
   R61_LEGIBILITY_FIX — appended 2026-07-12
   "Cojent AI" wordmark and other text-transparent gradient headings
   were rendering near-invisibly on the r56 white theme. Force text
   fills back to solid, high-contrast colours in main content.
   Preserved: any explicit brand teal we want to keep visible.
   ============================================================ */

/* Text-transparent gradient headings — restore solid colour. */
main [class*="bg-gradient-to-"][class*="bg-clip-text"],
main [class*="bg-clip-text"][class*="text-transparent"],
main [style*="-webkit-background-clip"][style*="text"],
main [style*="background-clip:text"],
main [style*="background-clip: text"] {
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  -webkit-text-fill-color: var(--cj-text) !important;
  color: var(--cj-text) !important;
}

/* Explicit override for known "Cojent AI" style headings */
main h1[class*="cojent" i], main h2[class*="cojent" i],
main [class*="hero-title"], main [class*="page-title"] {
  color: var(--cj-text) !important;
  -webkit-text-fill-color: var(--cj-text) !important;
}

/* Any headline that got flipped to pale grey via r56 needs to stay dark */
main h1, main h2, main h3, main .text-4xl, main .text-3xl, main .text-2xl {
  color: var(--cj-text) !important;
  -webkit-text-fill-color: var(--cj-text) !important;
}
/* Except when the design explicitly uses the teal accent */
main .text-\[--cj-accent\], main [style*="01696F" i], main [style*="20808D" i] {
  color: #01696F !important;
  -webkit-text-fill-color: #01696F !important;
}

/* Status text ("ALL SYSTEMS OPERATIONAL" green pill) stays green */
main [class*="text-green"], main [class*="text-emerald"] {
  -webkit-text-fill-color: currentColor !important;
}