/*
 * CCL Glassmorphism Theme
 * ============================================================
 * Activated by:  html.glass-theme
 * Toggled via:   Theme Settings panel → Visual Style → Glassmorphism
 * Persisted in:  localStorage key "ccl-glass-theme"
 *
 * Selector pattern: html.glass-theme [target]
 * Specificity beats WowDash's single-class rules without !important on
 * every rule — only use it where needed to beat inline styles.
 * ============================================================
 */

/* ── Page background ─────────────────────────────────────── */
html.glass-theme body {
    background: linear-gradient(135deg, #e8edff 0%, #f0f4ff 50%, #f5f0ff 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
}

/* ── Cards ───────────────────────────────────────────────── */
html.glass-theme .card {
    background: rgba(255, 255, 255, 0.62) !important;
    backdrop-filter: blur(22px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 6px 28px rgba(67, 97, 238, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
html.glass-theme .card .card-header {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: none !important;
}

/* ── Sidebar ─────────────────────────────────────────────── */
html.glass-theme .sidebar {
    background: rgba(0, 0, 0, 0.88) !important;
    backdrop-filter: blur(28px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* ── Navbar — keep dark indigo chrome, add glass blur ────── */
html.glass-theme .navbar-header {
    background: rgba(20, 51, 88, 0.72) !important;
    background-image: none !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.18) !important;
}

/* ── Dropdown menus ──────────────────────────────────────── */
html.glass-theme .dropdown-menu {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    box-shadow: 0 8px 32px rgba(67, 97, 238, 0.1) !important;
}

/* ── Modals ──────────────────────────────────────────────── */
html.glass-theme .modal-content {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
}

/* ── Tables ──────────────────────────────────────────────── */
html.glass-theme .table-responsive,
html.glass-theme table.dataTable {
    background: transparent !important;
}

/* ── Theme customizer panel itself ───────────────────────── */
html.glass-theme .theme-customization-sidebar {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.6) !important;
}


/* ── Breadcrumb / page-title area ────────────────────────── */
html.glass-theme .dashboard-main-body > div:first-child h6,
html.glass-theme .dashboard-main-body > div:first-child .fw-medium,
html.glass-theme .dashboard-main-body > div:first-child a {
    color: var(--text-primary-light) !important;
}

/* ── Card headings — ensure they stay readable on glass bg ─ */
html.glass-theme .card-title,
html.glass-theme .card-header h5,
html.glass-theme .card-header h6 {
    color: var(--text-primary-light) !important;
}

/* ══════════════════════════════════════════════════════════
   DARK MODE  (WowDash selector: [data-theme=dark])
   ══════════════════════════════════════════════════════════ */

html.glass-theme[data-theme=dark] body {
    background: linear-gradient(135deg, #0d1120 0%, #1B2431 45%, #150d30 100%) !important;
    background-attachment: fixed !important;
}

html.glass-theme[data-theme=dark] .card {
    background: rgba(39, 49, 66, 0.72) !important;   /* --dark-2 #273142 */
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
html.glass-theme[data-theme=dark] .card .card-header {
    background: rgba(39, 49, 66, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

html.glass-theme[data-theme=dark] .sidebar {
    background: rgba(13, 17, 32, 0.9) !important;
    border-right-color: rgba(255, 255, 255, 0.05) !important;
}

html.glass-theme[data-theme=dark] .navbar-header {
    background: rgba(13, 17, 32, 0.75) !important;
    background-image: none !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.28) !important;
}

html.glass-theme[data-theme=dark] .dropdown-menu {
    background: rgba(39, 49, 66, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

html.glass-theme[data-theme=dark] .modal-content {
    background: rgba(27, 36, 49, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.glass-theme[data-theme=dark] .theme-customization-sidebar {
    background: rgba(27, 36, 49, 0.92) !important;
    border-left-color: rgba(255, 255, 255, 0.06) !important;
}