/* ============================================================================
   Dental Gallery — Light-theme override layer (admin app)
   Load AFTER components.css. Depends on tokens.css.

   WHY THIS FILE EXISTS:
   index.html carries ~780 inline color declarations (color:#fff / white +
   rgba(0,0,0,...) backgrounds) that cannot flip with the design tokens. Doing a
   full inline-strip is a large mechanical task; until that lands, this layer
   retrofits a usable light theme.

   SAFETY: every rule is scoped to :root[data-theme="light"], so in the default
   dark theme NONE of these rules apply — zero risk to the existing UI. The
   !important is required only because it must beat element inline styles.
   ============================================================================ */

/* ---- 1. Base surfaces that use hardcoded (non-token) dark colors ---------- */
/* Very faint colour mesh — kept subtle so it doesn't tint/strain the eyes. */
:root[data-theme="light"] body {
    background-image:
        radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.05) 0px, transparent 45%),
        radial-gradient(at 100% 0%, rgba(139, 92, 246, 0.05) 0px, transparent 45%),
        radial-gradient(at 100% 100%, rgba(16, 185, 129, 0.03) 0px, transparent 45%),
        radial-gradient(at 0% 100%, rgba(239, 68, 68, 0.03) 0px, transparent 45%);
}

/* ---- 2. Inline dark panel/card backgrounds -> soft off-white surfaces ----- */
:root[data-theme="light"] [style*="rgba(0,0,0"],
:root[data-theme="light"] [style*="rgba(0, 0, 0"],
:root[data-theme="light"] [style*="rgba(15,23,42"],
:root[data-theme="light"] [style*="rgba(15, 23, 42"],
:root[data-theme="light"] [style*="rgba(30,41,59"],
:root[data-theme="light"] [style*="rgba(30, 41, 59"] {
    background-color: var(--bg-surface) !important;   /* #f7f9fc — soft, not glaring */
}

/* Dark linear-gradient cards (e.g. linear-gradient(.., rgba(0,0,0,0.85))):
   background-color can't beat a gradient, so neutralise the image too. The
   coloured left-border + accent value text keep the card themed on light. */
:root[data-theme="light"] [style*="rgba(0, 0, 0, 0.8)"],
:root[data-theme="light"] [style*="rgba(0,0,0,0.8)"],
:root[data-theme="light"] [style*="rgba(0, 0, 0, 0.85)"],
:root[data-theme="light"] [style*="rgba(0,0,0,0.85)"],
:root[data-theme="light"] [style*="rgba(0, 0, 0, 0.9)"],
:root[data-theme="light"] [style*="rgba(0,0,0,0.9)"] {
    background-image: none !important;
    background-color: var(--bg-surface) !important;
}
/* …and make sure any white text inside those gradient cards turns dark */
:root[data-theme="light"] [style*="rgba(0,0,0,0.85)"] [style*="color:white"],
:root[data-theme="light"] [style*="rgba(0,0,0,0.85)"] [style*="color: white"],
:root[data-theme="light"] [style*="rgba(0,0,0,0.9)"] [style*="color:white"],
:root[data-theme="light"] [style*="rgba(0,0,0,0.8)"] [style*="color:white"] {
    color: var(--text-primary) !important;
}

/* NOTE: do NOT blanket-override .glass-panel background — many colored buttons
   (.action-btn.glass-panel with inline background:var(--accent-*)) reuse that
   class, and an !important here would paint them white. The base .glass-panel in
   style.css already uses var(--bg-surface), which flips with the token, and the
   inline dark panels (login etc.) are handled by the rgba selectors above. */

/* ---- 3. Form controls: must be readable (highest-value fix) --------------- */
:root[data-theme="light"] .app-container input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
:root[data-theme="light"] .app-container select,
:root[data-theme="light"] .app-container textarea,
:root[data-theme="light"] .login-card input,
:root[data-theme="light"] #login-container input {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(15, 23, 42, 0.18) !important;
}
:root[data-theme="light"] .app-container input::placeholder,
:root[data-theme="light"] .app-container textarea::placeholder {
    color: var(--text-muted) !important;
}

/* ---- 4. Inline white text -> dark, EXCEPT on accent-colored surfaces ------
   White text that sits on a colored button/badge must stay white (those
   backgrounds remain colored). We flip white text only when it is NOT paired
   with an accent/colored background in the same inline style, and not a button. */
:root[data-theme="light"] [style*="color: white"]:not([class*="btn"]):not([style*="background: var(--accent"]):not([style*="background:var(--accent"]):not([style*="background: linear"]):not([style*="background:linear"]),
:root[data-theme="light"] [style*="color:white"]:not([class*="btn"]):not([style*="background: var(--accent"]):not([style*="background:var(--accent"]):not([style*="background: linear"]):not([style*="background:linear"]),
:root[data-theme="light"] [style*="color: #fff"]:not([class*="btn"]):not([style*="background: var(--accent"]):not([style*="background:var(--accent"]):not([style*="background: linear"]):not([style*="background:linear"]),
:root[data-theme="light"] [style*="color:#fff"]:not([class*="btn"]):not([style*="background: var(--accent"]):not([style*="background:var(--accent"]):not([style*="background: linear"]):not([style*="background:linear"]) {
    color: var(--text-primary) !important;
}

/* ---- 5. Tables ----------------------------------------------------------- */
:root[data-theme="light"] .modern-table th {
    background: #edf1f7 !important;
    color: var(--text-secondary) !important;
}
:root[data-theme="light"] .modern-table td { color: var(--text-primary); }
:root[data-theme="light"] .modern-table tr:hover td { background: rgba(15, 23, 42, 0.025) !important; }
:root[data-theme="light"] .dg-enhanced-table .modern-table th {
    background: #edf1f7 !important;
}

/* Gentle depth for cards so soft off-white surfaces separate from the bg
   without harsh white edges. */
:root[data-theme="light"] .glass-panel,
:root[data-theme="light"] .card,
:root[data-theme="light"] .summary-card {
    box-shadow: var(--glass-shadow) !important;
}

/* ---- 6. Header / sidebar dropdowns & notification panels ----------------- */
:root[data-theme="light"] #headerNotificationDropdown,
:root[data-theme="light"] #globalSearchResults,
:root[data-theme="light"] .search-results {
    background: var(--bg-surface-2) !important;
    border: var(--glass-border) !important;
}
:root[data-theme="light"] #globalSearchResults .gs-row:hover,
:root[data-theme="light"] #globalSearchResults .gs-row.active {
    background: rgba(15, 23, 42, 0.05) !important;
}

/* ---- 7. Submenu / nav hover states -------------------------------------- */
:root[data-theme="light"] .sidebar-submenu { background: rgba(15, 23, 42, 0.03) !important; }
:root[data-theme="light"] .nav-item:hover,
:root[data-theme="light"] .submenu-item:hover { background: rgba(15, 23, 42, 0.05) !important; }

/* ---- 8. Modals & overlays ------------------------------------------------ */
:root[data-theme="light"] .modal-card,
:root[data-theme="light"] .modal-overlay > div,
:root[data-theme="light"] .dlg-card {
    color: var(--text-primary);
}
:root[data-theme="light"] .modal-overlay { background: rgba(15, 23, 42, 0.35) !important; }

/* ---- 9. Borders that were near-white in dark mode ----------------------- */
:root[data-theme="light"] [style*="rgba(255,255,255,0.05)"],
:root[data-theme="light"] [style*="rgba(255, 255, 255, 0.05)"],
:root[data-theme="light"] [style*="rgba(255,255,255,0.08)"],
:root[data-theme="light"] [style*="rgba(255, 255, 255, 0.08)"] {
    border-color: rgba(15, 23, 42, 0.10) !important;
}

/* ---- 10. Muted/secondary inline text colors (slate) --------------------- */
:root[data-theme="light"] [style*="color: var(--text-secondary)"],
:root[data-theme="light"] [style*="color:var(--text-secondary)"] { color: var(--text-secondary) !important; }

/* ---- 11. FAB / command palette already token-based; ensure contrast ------ */
:root[data-theme="light"] .dg-command-card,
:root[data-theme="light"] .dg-shortcuts-card,
:root[data-theme="light"] .dg-fab-item .dg-fab-label,
:root[data-theme="light"] .dg-fab-item .dg-fab-ico {
    background: var(--bg-surface-2) !important;
    color: var(--text-primary) !important;
}

/* ---- 12. Micro-UI Components in Light Theme ------------------------------ */
:root[data-theme="light"] .dg-toast {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15) !important;
}

:root[data-theme="light"] .dg-badge-neutral {
    background: rgba(15, 23, 42, 0.06) !important;
    color: var(--text-secondary) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
}