/* ============================================================
   global-overrides.css
   Theme-aware global overrides.
   All dark-theme-specific rules are scoped to [data-theme="dark"]
   so they do NOT interfere with the Light Day theme.

   LANDING PAGE ISOLATION STRATEGY:
   The landing page wrapper uses data-landing="true". All rules
   that could bleed into the landing page are guarded with
   :not([data-landing="true"]) on ancestor containers, or are
   scoped entirely to [data-theme="dark"].
   ============================================================ */

/* ── Landing page: full isolation block ── */
/*
 * This must come FIRST so it establishes the landing page context
 * before any other rules can interfere.
 */
[data-landing="true"] {
  background: #FFFFFF !important;
  color: #1A2332 !important;
}

[data-landing="true"] * {
  /* Prevent dark-theme color variables from bleeding in */
  --primary-text: #1A2332;
  --primary-cyan: #1976D2;
  --dark-bg: #FFFFFF;
}

/* Strip background, border, box-shadow from ALL p and li elements inside
   landing pages. These properties should never be applied by global rules
   to text paragraphs. Margins and padding are NOT reset here — each
   component's module CSS controls those with !important where needed. */
[data-landing="true"] p,
[data-landing="true"] li {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
}

/* ── Remove borders from sections/cards/panels (all themes, non-landing only) ── */
#root:not(:has([data-landing="true"])) .section,
#root:not(:has([data-landing="true"])) div[class="section"],
#root:not(:has([data-landing="true"])) div[class*="section"],
#root:not(:has([data-landing="true"])) div[class*="Section"],
#root:not(:has([data-landing="true"])) .card,
#root:not(:has([data-landing="true"])) div[class*="Card"],
#root:not(:has([data-landing="true"])) div[class*="panel"],
#root:not(:has([data-landing="true"])) div[class*="Panel"],
#root:not(:has([data-landing="true"])) div[class*="box"],
#root:not(:has([data-landing="true"])) div[class*="Box"],
#root:not(:has([data-landing="true"])) div[class="container"],
#root:not(:has([data-landing="true"])) div[class="tabContent"],
#root:not(:has([data-landing="true"])) div[class*="form"],
#root:not(:has([data-landing="true"])) div[class*="Form"],
#root:not(:has([data-landing="true"])) .tabContent > div,
#root:not(:has([data-landing="true"])) .container > div,
#root:not(:has([data-landing="true"])) .placeholderContent,
#root:not(:has([data-landing="true"])) .maintenanceItem,
#root:not(:has([data-landing="true"])) .error,
#root:not(:has([data-landing="true"])) .statusCard {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/*
 * Fallback for browsers that don't support :has() — use the original
 * approach but with a more specific selector that won't match landing children.
 * The [data-landing="true"] wrapper has isolation: isolate and its own
 * stacking context, so these rules won't visually affect it even if they
 * technically match (the landing CSS uses !important overrides).
 */
.section:not([data-landing="true"] .section),
div[class="section"]:not([data-landing="true"] *),
div[class*="section"]:not([data-landing="true"] *),
div[class*="Section"]:not([data-landing="true"] *),
.card:not([data-landing="true"] *),
div[class*="Card"]:not([data-landing="true"] *),
div[class*="panel"]:not([data-landing="true"] *),
div[class*="Panel"]:not([data-landing="true"] *),
div[class*="box"]:not([data-landing="true"] *),
div[class*="Box"]:not([data-landing="true"] *),
div[class="container"]:not([data-landing="true"] *),
div[class="tabContent"]:not([data-landing="true"] *),
div[class*="form"]:not([data-landing="true"] *),
div[class*="Form"]:not([data-landing="true"] *),
.tabContent > div:not([data-landing="true"] *),
.container > div:not([data-landing="true"] *),
.placeholderContent:not([data-landing="true"] *),
.maintenanceItem:not([data-landing="true"] *),
.error:not([data-landing="true"] *),
.statusCard:not([data-landing="true"] *) {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ── Remove borders from section titles/headings (non-landing only) ── */
.sectionTitle:not([data-landing="true"] *),
h1:not([data-landing="true"] *), h2:not([data-landing="true"] *), h3:not([data-landing="true"] *),
h4:not([data-landing="true"] *), h5:not([data-landing="true"] *), h6:not([data-landing="true"] *),
div[class*="section"]:not([data-landing="true"] *) h1,
div[class*="section"]:not([data-landing="true"] *) h2,
div[class*="section"]:not([data-landing="true"] *) h3,
div[class*="section"]:not([data-landing="true"] *) h4,
div[class*="section"]:not([data-landing="true"] *) h5,
div[class*="section"]:not([data-landing="true"] *) h6,
div[class*="Section"]:not([data-landing="true"] *) h1,
div[class*="Section"]:not([data-landing="true"] *) h2,
div[class*="Section"]:not([data-landing="true"] *) h3,
div[class*="Section"]:not([data-landing="true"] *) h4,
div[class*="Section"]:not([data-landing="true"] *) h5,
div[class*="Section"]:not([data-landing="true"] *) h6,
.card:not([data-landing="true"] *) h1,
.card:not([data-landing="true"] *) h2,
.card:not([data-landing="true"] *) h3,
.card:not([data-landing="true"] *) h4,
.card:not([data-landing="true"] *) h5,
.card:not([data-landing="true"] *) h6,
div[class*="Card"]:not([data-landing="true"] *) h1,
div[class*="Card"]:not([data-landing="true"] *) h2,
div[class*="Card"]:not([data-landing="true"] *) h3,
div[class*="Card"]:not([data-landing="true"] *) h4,
div[class*="Card"]:not([data-landing="true"] *) h5,
div[class*="Card"]:not([data-landing="true"] *) h6,
div[class*="panel"]:not([data-landing="true"] *) h1,
div[class*="panel"]:not([data-landing="true"] *) h2,
div[class*="panel"]:not([data-landing="true"] *) h3,
div[class*="panel"]:not([data-landing="true"] *) h4,
div[class*="panel"]:not([data-landing="true"] *) h5,
div[class*="panel"]:not([data-landing="true"] *) h6,
div[class*="Panel"]:not([data-landing="true"] *) h1,
div[class*="Panel"]:not([data-landing="true"] *) h2,
div[class*="Panel"]:not([data-landing="true"] *) h3,
div[class*="Panel"]:not([data-landing="true"] *) h4,
div[class*="Panel"]:not([data-landing="true"] *) h5,
div[class*="Panel"]:not([data-landing="true"] *) h6,
div[class*="details"]:not([data-landing="true"] *) h1,
div[class*="details"]:not([data-landing="true"] *) h2,
div[class*="details"]:not([data-landing="true"] *) h3,
div[class*="details"]:not([data-landing="true"] *) h4,
div[class*="details"]:not([data-landing="true"] *) h5,
div[class*="details"]:not([data-landing="true"] *) h6,
div[class*="Details"]:not([data-landing="true"] *) h1,
div[class*="Details"]:not([data-landing="true"] *) h2,
div[class*="Details"]:not([data-landing="true"] *) h3,
div[class*="Details"]:not([data-landing="true"] *) h4,
div[class*="Details"]:not([data-landing="true"] *) h5,
div[class*="Details"]:not([data-landing="true"] *) h6,
div[class*="info"]:not([data-landing="true"] *) h1,
div[class*="info"]:not([data-landing="true"] *) h2,
div[class*="info"]:not([data-landing="true"] *) h3,
div[class*="info"]:not([data-landing="true"] *) h4,
div[class*="info"]:not([data-landing="true"] *) h5,
div[class*="info"]:not([data-landing="true"] *) h6,
div[class*="Info"]:not([data-landing="true"] *) h1,
div[class*="Info"]:not([data-landing="true"] *) h2,
div[class*="Info"]:not([data-landing="true"] *) h3,
div[class*="Info"]:not([data-landing="true"] *) h4,
div[class*="Info"]:not([data-landing="true"] *) h5,
div[class*="Info"]:not([data-landing="true"] *) h6 {
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding-bottom: 8px !important;
}

/* ── Dark theme background (ONLY when data-theme="dark") ── */
[data-theme="dark"] html,
[data-theme="dark"] body,
[data-theme="dark"] #root,
html[data-theme="dark"],
body[data-theme="dark"] {
  background-color: var(--dark-bg) !important;
  color: var(--primary-text) !important;
}

/* Fallback for when data-theme is not yet set (initial load) */
html:not([data-theme="light"]) body:not(:has([data-landing="true"])),
html:not([data-theme="light"]) #root:not(:has([data-landing="true"])) {
  background-color: var(--dark-bg);
  color: var(--primary-text);
}

/* ── Dark theme: container backgrounds ── */
[data-theme="dark"] div[class*="dashboardContainer"],
[data-theme="dark"] div[class*="mainContent"],
[data-theme="dark"] div[class*="container"]:not([data-landing="true"] *) {
  background: transparent !important;
}

/* ── Dark theme: card/panel backgrounds ── */
[data-theme="dark"] div[class*="card"]:not([data-landing="true"] *):not([class*="Card"]),
[data-theme="dark"] div[class*="panel"]:not([data-landing="true"] *):not([class*="Panel"]) {
  background: var(--surface-bg) !important;
  color: var(--primary-text) !important;
  border: 1px solid var(--accent-border) !important;
  border-radius: 8px !important;
}

/* ── Dark theme: input/form elements ── */
[data-theme="dark"] input:not([data-landing="true"] *):not([class*="Input"]):not([class*="input"]),
[data-theme="dark"] select:not([data-landing="true"] *):not([class*="Select"]):not([class*="select"]),
[data-theme="dark"] textarea:not([data-landing="true"] *):not([class*="Textarea"]):not([class*="textarea"]) {
  background: var(--surface-bg) !important;
  color: var(--primary-text) !important;
  border: 1px solid var(--accent-border) !important;
}

[data-theme="dark"] input:not([data-landing="true"] *):not([class*="Input"]):not([class*="input"])::placeholder,
[data-theme="dark"] textarea:not([data-landing="true"] *):not([class*="Textarea"]):not([class*="textarea"])::placeholder {
  color: var(--input-placeholder) !important;
}

/* ── Dark theme: table styling ── */
[data-theme="dark"] table:not([data-landing="true"] *):not([class*="Table"]):not([class*="table"]),
[data-theme="dark"] table:not([data-landing="true"] *):not([class*="Table"]):not([class*="table"]) th,
[data-theme="dark"] table:not([data-landing="true"] *):not([class*="Table"]):not([class*="table"]) td {
  background: var(--surface-bg) !important;
  color: var(--primary-text) !important;
  border-color: var(--accent-border) !important;
}