/* Shared glass surface for every page rendered by the shared layout. */
:root {
    --glass-surface: rgba(10, 6, 18, .12);
    --glass-row: rgba(10, 6, 18, .12);
    --glass-row-alt: rgba(10, 6, 18, .18);
    --glass-hover: rgba(40, 30, 55, .42);
    --glass-border: rgba(255, 255, 255, .16);
    --glass-text: #f2f0ee;
    --glass-placeholder: rgba(242, 240, 238, .55);
    --modal-surface: #ffffff;
    --modal-text: #1f2937;
}

body[data-theme="dark"],
body[data-theme="light"] {
    min-height: 100vh;
    background-image: linear-gradient(rgba(10, 8, 18, .15), rgba(10, 8, 18, .15)), url("/images/bg-000.jpg") !important;
    background-size: cover, cover !important;
    background-position: left top, left top !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

body[data-theme="light"] {
    --glass-surface: rgba(255, 255, 255, .12);
    --glass-row: rgba(255, 255, 255, .12);
    --glass-row-alt: rgba(255, 255, 255, .18);
    --glass-hover: rgba(255, 255, 255, .32);
    --glass-border: rgba(255, 255, 255, .35);
    --glass-text: #2a2830;
    --glass-placeholder: rgba(42, 40, 48, .62);
    --modal-surface: #ffffff;
    --modal-text: #1f2937;
    background-image: linear-gradient(rgba(255, 255, 255, .15), rgba(255, 255, 255, .15)), url("/images/bg-000.jpg") !important;
    color: var(--glass-text);
}

/* Let existing theme rules that use these variables resolve to the shared glass surface. */
body[data-theme="dark"],
body[data-theme="light"] {
    --card-bg: var(--glass-surface) !important;
    --border-color: var(--glass-border) !important;
}
body[data-theme="dark"] {
    --modal-surface: #10283d;
    --modal-text: #e8f7ff;
}

/* The guest theme used a full-page pseudo-element gradient which hid the image. */
body[data-is-logged-in="False"]::before {
    background: transparent !important;
}

/* Layout containers stay clear so the page image can pass through them. */
body .wrapper,
body .main-content,
body .main-content > .container-fluid {
    background: transparent !important;
}

/* Clear solid backgrounds from page divs. Surface components below add only a light glass layer. */
body div:not(.login-wrapper):not(.login-card) {
    background-color: transparent !important;
}

/* Common content panels. The selector list covers existing page-specific panel names without changing buttons. */
body .main-content .card:not(.login-card),
body .main-content .card-header,
body .main-content .card-body,
body .main-content .modal-content,
body .main-content .table-responsive,
body .main-content .accordion,
body .main-content .accordion-item,
body .main-content [class*="-card"]:not(.login-card),
body .main-content [class*="-panel"],
body .main-content [class*="-section"],
body .main-content [class*="-box"],
body .main-content [class*="-table"],
body .main-content [class*="-form"],
body .main-content section,
body .main-content article,
body .main-content fieldset {
    background: var(--glass-surface) !important;
    border-color: var(--glass-border) !important;
    color: var(--glass-text) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* Confirmation dialogs are action checkpoints, so keep them opaque and easy to read. */
body div.modal-content:not(.login-wrapper):not(.login-card),
body .modal-content,
body .modal-content .modal-header,
body .modal-content .modal-body,
body .modal-content .modal-footer,
body .modal-content .card,
body .modal-content .card-body {
    background: var(--modal-surface) !important;
    color: var(--modal-text) !important;
    border-color: var(--glass-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Tables and all table cells remain readable while showing the page image underneath. */
body .main-content table,
body .main-content .table,
body .main-content .table-custom,
body .main-content .light-table,
body .main-content table.dataTable {
    background: transparent !important;
    --bs-table-bg: transparent !important;
    --bs-table-striped-bg: var(--glass-row-alt) !important;
    --bs-table-hover-bg: var(--glass-hover) !important;
    color: var(--glass-text) !important;
}

body .main-content table thead th,
body .main-content .table thead th,
body .main-content .table-custom thead th,
body .main-content .light-table thead th,
body .main-content table.dataTable thead th,
body .main-content table tbody tr,
body .main-content .table tbody tr,
body .main-content .table-custom tbody tr,
body .main-content .light-table tbody tr,
body .main-content table.dataTable tbody tr,
body .main-content table tbody td,
body .main-content .table tbody td,
body .main-content .table-custom tbody td,
body .main-content .light-table tbody td,
body .main-content table.dataTable tbody td {
    background: var(--glass-row) !important;
    border-color: var(--glass-border) !important;
    color: var(--glass-text) !important;
}

body .main-content table tbody tr:nth-child(odd),
body .main-content .table-striped > tbody > tr:nth-of-type(odd),
body .main-content .table-custom tbody tr:nth-child(odd),
body .main-content .light-table tbody tr:nth-child(odd) {
    background: var(--glass-row-alt) !important;
}

body .main-content table tbody tr:hover,
body .main-content .table-hover > tbody > tr:hover,
body .main-content .table-custom tbody tr:hover,
body .main-content .light-table tbody tr:hover {
    background: var(--glass-hover) !important;
}

/* Forms and controls use the same translucent surface. Buttons are intentionally not selected. */
body .main-content form,
body .main-content form .form-control,
body .main-content form .form-select,
body .main-content form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body .main-content form select,
body .main-content form textarea,
body .main-content .form-control,
body .main-content .form-select {
    background: var(--glass-surface) !important;
    border-color: var(--glass-border) !important;
    color: var(--glass-text) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body .main-content form input::placeholder,
body .main-content form textarea::placeholder,
body .main-content .form-control::placeholder {
    color: var(--glass-placeholder) !important;
}

body .main-content form input:focus,
body .main-content form select:focus,
body .main-content form textarea:focus,
body .main-content .form-control:focus,
body .main-content .form-select:focus {
    background: var(--glass-surface) !important;
    color: var(--glass-text) !important;
}

/* Home spacing: remove the unused guest top band and tighten the PDF section. */
body[data-is-logged-in="False"] .main-content > .container-fluid {
    padding-top: 0 !important;
}
body[data-is-logged-in="False"] .intro-video-area {
    padding-top: 0 !important;
}
body[data-is-logged-in="False"] .guest-showcase-wrap {
    margin-top: 0 !important;
}
body .home-ppt-section {
    margin-bottom: .75rem !important;
}
body .home-ppt-section > h3,
body .home-ppt-section > p {
    margin-bottom: .75rem !important;
}
body .home-ppt-viewer-container {
    margin-bottom: .5rem !important;
}
body .home-ppt-viewer {
    height: clamp(360px, 62vh, 620px) !important;
}

/* Mobile tap-to-fullscreen affordance for the guest carousel. */
@media (max-width: 768px), (pointer: coarse) {
    body .guest-showcase-carousel {
        cursor: zoom-in;
    }
    body .guest-showcase-carousel:fullscreen,
    body .guest-showcase-carousel:-webkit-full-screen {
        width: 100vw !important;
        height: 100vh !important;
        border-radius: 0 !important;
        background: #000 !important;
    }
    body .guest-showcase-carousel:fullscreen .carousel-inner,
    body .guest-showcase-carousel:fullscreen .carousel-item,
    body .guest-showcase-carousel:-webkit-full-screen .carousel-inner,
    body .guest-showcase-carousel:-webkit-full-screen .carousel-item {
        height: 100% !important;
    }
    body .guest-showcase-carousel:fullscreen img,
    body .guest-showcase-carousel:-webkit-full-screen img {
        object-fit: contain !important;
    }
    body .pdfjs-viewer,
    body .pdfjs-viewer canvas {
        cursor: zoom-in;
    }
}

/* Light-mode headings and subtitles must remain readable over the glass surface. */
body[data-theme="light"] .cj-title,
body[data-theme="light"] .mt-title,
body[data-theme="light"] .mz-title,
body[data-theme="light"] .so-hero-title,
body[data-theme="light"] .section-title h1,
body[data-theme="light"] .section-title h2,
body[data-theme="light"] .section-title h3 {
    color: #1f2937 !important;
}
body[data-theme="light"] .cj-subtitle,
body[data-theme="light"] .mt-sub,
body[data-theme="light"] .mz-sub,
body[data-theme="light"] .so-hero-sub,
body[data-theme="light"] .section-title p {
    color: #475569 !important;
}

/* The upgrade page shows two wallet balances inside a nested <b>. */
body[data-theme="dark"] .cj-wallet-bal b {
    color: #e8f7ff !important;
}
body[data-theme="light"] .cj-wallet-bal b {
    color: #334155 !important;
}

/* Keep action buttons solid and usable; their existing color classes remain in control. */
body .main-content button,
body .main-content .btn,
body .main-content a.btn {
    background-clip: padding-box;
}

/* Navigation chrome remains usable, but no longer forms an opaque wall over the image. */
body .top-navbar,
body .sidebar,
body .ninegrid-tabbar,
body .ninegrid-sheet {
    background: var(--glass-surface) !important;
    border-color: var(--glass-border) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* Keep the theme control available and clickable in the compact mobile header. */
#themeToggle {
    flex: 0 0 34px;
    display: inline-flex !important;
}

@media (max-width: 575px) {
    #themeToggle {
        width: 30px !important;
        height: 30px !important;
        flex-basis: 30px;
    }
}

/* Keep the image usable on mobile browsers, where fixed backgrounds can be unstable. */
@media (max-width: 768px) {
    body[data-theme="dark"],
    body[data-theme="light"] {
        background-attachment: scroll !important;
    }
}