/* =========================================================
   THEME COLORS
   Each block defines colors for a specific
   theme + screen style combination.
   ========================================================= */


/* -------------------------
   LIGHT - SKY
   ------------------------- */
:root,
[data-theme="light"][data-screen-style="sky"] {

    --primary: #004A99;
    --secondary: #FF8F00;
    --accent: #00BFFF;

    /* Main page gradient background colors */
    --bg-main: #eaf8ff;
    --bg-layer-2: #bfe8ff;
    --bg-layer-3: #7dcfff;

    /*
     * Card / panel background.
     * Opacity increased from 0.42 -> 0.68
     * This makes glass cards more visible.
     */
    --bg-card: rgba(255, 255, 255, 0.98);

    --text-main: #1e293b;
    --text-muted: #64748b;

    /* Glass border */
    --border-glass: rgba(143, 210, 255, 0.98);

    /* Card shadow */
    --shadow-glass: 0 8px 32px rgba(0, 74, 153, 0.10);

    /* Decorative glow */
    --sky-glow: rgba(255, 255, 255, 0.35);

    /* Form input background */
    --input-bg: rgba(255, 255, 255, 0.82);

    /* Form input border */
    --input-border: rgba(0, 74, 153, 0.18);

    /*
     * Popup / modal background.
     * High opacity so content behind popup
     * does not visually interfere.
     */
    --popup-bg: rgba(248, 252, 255, 0.985);
}


/* -------------------------
   DARK - SKY
   ------------------------- */
[data-theme="dark"][data-screen-style="sky"] {

    --primary: #1387d4;
    --secondary: #ff9d21;
    --accent: #38bdf8;

    --bg-main: #0b0f19;
    --bg-layer-2: #14233d;
    --bg-layer-3: #26456f;

    /* Dark glass card - increased opacity */
    --bg-card: rgba(17, 24, 39, 0.76);

    --text-main: #f8fafc;
    --text-muted: #94a3b8;

    --border-glass: rgba(255, 255, 255, 0.13);
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.40);
    --sky-glow: rgba(255, 255, 255, 0.08);

    --input-bg: rgba(255, 255, 255, 0.08);
    --input-border: rgba(255, 255, 255, 0.15);

    /* Strong dark popup background */
    --popup-bg: rgba(12, 18, 29, 0.985);
}


/* -------------------------
   LIGHT - SILVER
   ------------------------- */
[data-theme="light"][data-screen-style="silver"] {

    --primary: #586974;
    --secondary: #9caab2;
    --accent: #cbd5db;

    --bg-main: #f5f7f8;
    --bg-layer-2: #dce3e7;
    --bg-layer-3: #aebbc3;

    --bg-card: rgba(255, 255, 255, 0.72);

    --text-main: #25323a;
    --text-muted: #65757e;

    --border-glass: rgba(255, 255, 255, 0.82);
    --shadow-glass: 0 8px 32px rgba(65, 82, 91, 0.12);
    --sky-glow: rgba(255, 255, 255, 0.35);

    --input-bg: rgba(255, 255, 255, 0.82);
    --input-border: rgba(88, 105, 116, 0.22);

    --popup-bg: rgba(248, 250, 251, 0.985);
}


/* -------------------------
   DARK - SILVER
   ------------------------- */
[data-theme="dark"][data-screen-style="silver"] {

    --primary: #71838e;
    --secondary: #b3c0c7;
    --accent: #dce4e8;

    --bg-main: #11171b;
    --bg-layer-2: #253038;
    --bg-layer-3: #4a5962;

    --bg-card: rgba(21, 29, 34, 0.76);

    --text-main: #f1f5f7;
    --text-muted: #a9b4ba;

    --border-glass: rgba(220, 230, 235, 0.15);
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.40);
    --sky-glow: rgba(255, 255, 255, 0.08);

    --input-bg: rgba(255, 255, 255, 0.08);
    --input-border: rgba(220, 230, 235, 0.15);

    --popup-bg: rgba(18, 25, 30, 0.985);
}


/* -------------------------
   LIGHT - GOLD
   ------------------------- */
[data-theme="light"][data-screen-style="gold"] {

    --primary: #8b6508;
    --secondary: #d4af37;
    --accent: #f1ce62;

    --bg-main: #fffaf0;
    --bg-layer-2: #f5e3a4;
    --bg-layer-3: #d6b34f;

    --bg-card: rgba(255, 252, 239, 0.74);

    --text-main: #3d3216;
    --text-muted: #746440;

    --border-glass: rgba(255, 246, 208, 0.82);
    --shadow-glass: 0 8px 32px rgba(139, 101, 8, 0.12);
    --sky-glow: rgba(255, 255, 255, 0.33);

    --input-bg: rgba(255, 252, 239, 0.84);
    --input-border: rgba(139, 101, 8, 0.20);

    --popup-bg: rgba(255, 251, 237, 0.985);
}


/* -------------------------
   DARK - GOLD
   ------------------------- */
[data-theme="dark"][data-screen-style="gold"] {

    --primary: #a47a18;
    --secondary: #d4af37;
    --accent: #f3d774;

    --bg-main: #17130b;
    --bg-layer-2: #342910;
    --bg-layer-3: #6d5419;

    --bg-card: rgba(31, 25, 13, 0.76);

    --text-main: #fff9e8;
    --text-muted: #cabc90;

    --border-glass: rgba(238, 209, 111, 0.18);
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.44);
    --sky-glow: rgba(255, 240, 180, 0.09);

    --input-bg: rgba(255, 255, 255, 0.07);
    --input-border: rgba(238, 209, 111, 0.17);

    --popup-bg: rgba(29, 24, 13, 0.985);
}


/* -------------------------
   LIGHT - PLATINUM
   ------------------------- */
[data-theme="light"][data-screen-style="platinum"] {

    --primary: #27364A;
    --secondary: #B8C4D4;
    --accent: #6F8FC9;

    --bg-main: #F7F8FC;
    --bg-layer-2: #E4E8F1;
    --bg-layer-3: #B9C5D7;

    --bg-card: rgba(252, 252, 255, 0.80);

    --text-main: #202A38;
    --text-muted: #697586;

    --border-glass: rgba(255, 255, 255, 0.92);
    --shadow-glass: 0 12px 36px rgba(39, 54, 74, 0.16);
    --sky-glow: rgba(255, 255, 255, 0.45);

    --input-bg: rgba(255, 255, 255, 0.88);
    --input-border: rgba(39, 54, 74, 0.18);

    --popup-bg: rgba(249, 250, 253, 0.99);
}


/* -------------------------
   DARK - PLATINUM
   ------------------------- */
[data-theme="dark"][data-screen-style="platinum"] {

    --primary: #5F7FAE;
    --secondary: #D5DDE8;
    --accent: #8FB9F2;

    --bg-main: #0B1018;
    --bg-layer-2: #162236;
    --bg-layer-3: #314A6A;

    --bg-card: rgba(13, 19, 29, 0.80);

    --text-main: #F7F9FC;
    --text-muted: #A8B3C3;

    --border-glass: rgba(215, 224, 235, 0.20);
    --shadow-glass: 0 14px 42px rgba(0, 0, 0, 0.48);
    --sky-glow: rgba(143, 185, 242, 0.10);

    --input-bg: rgba(255, 255, 255, 0.08);
    --input-border: rgba(213, 221, 232, 0.18);

    --popup-bg: rgba(10, 16, 25, 0.99);
}


/* =========================================================
   GLOBAL PAGE RESET
   Removes default browser spacing and keeps sizing predictable.
   ========================================================= */

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* =========================================================
   MAIN PAGE BACKGROUND
   Uses the active theme gradient variables.
   ========================================================= */

body {
    min-height: 100vh;

    background:
        linear-gradient(
            135deg,
            var(--bg-main) 0%,
            var(--bg-layer-2) 55%,
            var(--bg-layer-3) 100%
        );

    color: var(--text-main);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    transition:
        background 0.35s ease,
        color 0.25s ease;

    overflow-x: hidden;
    position: relative;
}


/* =========================================================
   DECORATIVE BACKGROUND GLOWS
   Creates the blurred colored circles behind the interface.
   ========================================================= */

body::before,
body::after {
    content: '';

    position: fixed;

    width: 22rem;
    height: 22rem;

    border-radius: 9999px;

    filter: blur(80px);

    opacity: 0.20;

    pointer-events: none;

    z-index: -1;
}

body::before {
    top: -5rem;
    right: -2rem;

    background: var(--secondary);
}

body::after {
    bottom: -7rem;
    left: -2rem;

    background: var(--primary);
}


/* =========================================================
   GLASS CARDS / SIDEBAR
   Used by:
   .glass-panel
   .sidebar-shell

   Higher --bg-card opacity makes cards easier to read.
   ========================================================= */

.glass-panel,
.sidebar-shell {
    background: var(--bg-card);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    border: 1px solid var(--border-glass);

    box-shadow: var(--shadow-glass);
}

.glass-panel {
    border-radius: 1.5rem;
}

.sidebar-shell {
    border-radius: 0;
}


/* =========================================================
   POPUP / MODAL BACKGROUND
   Use class="settings-popup" on popup panel itself.

   This is intentionally more opaque than normal cards.
   ========================================================= */

.settings-popup {
    background: var(--popup-bg);

    backdrop-filter:
        blur(24px)
        saturate(145%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(145%);

    border:
        1px solid
        var(--border-glass);

    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.25),
        var(--shadow-glass);
}


/* =========================================================
   OPTIONAL GENERIC MODAL PANEL
   Add class="modal-panel" to any modal body/popup card.
   This ensures all modals get stronger opacity.
   ========================================================= */

.modal-panel {
    background: var(--popup-bg) !important;

    backdrop-filter:
        blur(28px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(28px)
        saturate(150%);

    border:
        1px solid
        var(--border-glass);

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.28),
        var(--shadow-glass);
}


/* =========================================================
   MODAL OVERLAY
   Put this class on the full-screen popup wrapper.
   Example:
   <div class="modal-overlay">...</div>

   Makes the page behind popup darker.
   ========================================================= */

.modal-overlay {
    background:
        rgba(2, 6, 23, 0.62);

    backdrop-filter:
        blur(2px);

    -webkit-backdrop-filter:
        blur(2px);
}


/* =========================================================
   FORM INPUTS
   Shared design for text fields, selects and date inputs.
   ========================================================= */

.app-input {
    width: 100%;

    background: var(--input-bg);

    border:
        1px solid
        var(--input-border);

    color: var(--text-main);

    border-radius: 0.75rem;

    padding:
        0.65rem
        0.9rem;

    font-size: 0.95rem;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.app-input:focus {
    border-color: var(--accent);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--accent) 22%,
            transparent
        );
}


/* =========================================================
   HOVER LIFT
   Small hover animation for cards/buttons.
   ========================================================= */

.hover-lift {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.hover-lift:hover {
    transform:
        translateY(-2px);
}


/* =========================================================
   SIDEBAR TOGGLE BUTTON
   ========================================================= */

.sidebar-toggle {
    width: 2.5rem;
    height: 2.5rem;

    border: 0;

    border-radius: 0.9rem;

    background:
        rgba(
            255,
            255,
            255,
            0.24
        );

    color: var(--primary);

    display: inline-flex;

    align-items: center;

    justify-content: center;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--text-muted);

    border-radius: 9999px;
}


/* =========================================================
   MOBILE SIDEBAR CLOSE BUTTON
   Visible on small screens.
   Hidden on desktop.
   ========================================================= */

#sidebarClose {
    display: flex;
}

@media (min-width: 1024px) {

    #sidebarClose {
        display: none !important;
    }
}