/* CSS Variable-Based Theming */
:root {
    --bg-color: #ffffff;
    --fg-color: #212529;
    --card-bg: #ffffff;
    --card-fg: #212529;
    --navbar-bg: #ffffff;
    --navbar-fg: #212529;
    --primary-btn-bg: #0d6efd;
    --success-btn-bg: #198754;
    --form-label-fg: #495057;
    --table-bg: #ffffff;
    --table-header-bg: #f8f9fa;
    --table-hover-bg: #f1f1f1;
}

html.dark-mode {
    --bg-color: #121212;
    --fg-color: #e0e0e0;
    --card-bg: #1e1e1e;
    --card-fg: #e0e0e0;
    --navbar-bg: #1e1e1e;
    --navbar-fg: #e0e0e0;
    --primary-btn-bg: #3b82f6;
    --success-btn-bg: #22c55e;
    --form-label-fg: #3f3f3f;
    --table-bg: #1e1e1e;
    --table-header-bg: #2a2a2a;
    --table-hover-bg: #2f2f2f;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
    background-color: var(--bg-color);
    color: var(--fg-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Form/focus styles */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Shared transition for navbar and links */
#mainNavbar,
.navbar .nav-link,
.navbar .navbar-brand {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.card,
.list-group-item {
    background-color: var(--card-bg);
    color: var(--card-fg);
}

#mainNavbar {
    background-color: var(--navbar-bg);
    color: var(--navbar-fg);
}

.navbar .nav-link,
.navbar .navbar-brand {
    color: var(--navbar-fg) !important;
}

    .navbar .nav-link:hover,
    .navbar .nav-link:focus,
    .navbar .navbar-brand:hover {
        color: #ffffff !important;
        text-decoration: none;
    }

.form-floating label {
    color: var(--form-label-fg) !important;
}

.btn-primary {
    background-color: var(--primary-btn-bg);
}

.btn-success {
    background-color: var(--success-btn-bg);
}

table th,
table td {
    color: var(--fg-color);
    background-color: var(--table-bg);
}

table thead {
    background-color: var(--table-header-bg);
    color: var(--fg-color);
}

table tr:hover {
    background-color: var(--table-hover-bg);
}

#enableNotifications {
    transition: opacity 0.3s ease;
}

    #enableNotifications.d-none {
        opacity: 0;
        pointer-events: none;
        height: 0;
        overflow: hidden;
    }

#fabRefresh {
    display: none;
}

/* PWA specific styling START */
@media (display-mode: standalone) {
    body {
        padding-top: env(safe-area-inset-top, 0);
        padding-left: env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    /*        body::before {
            content: 'PWA Mode';
            display: block;
            background: #fffbcc;
            color: #333;
            font-size: 12px;
            padding: 4px;
            text-align: center;
        }*/

    .navbar {
        padding-left: calc(1rem + env(safe-area-inset-left, 0));
        padding-right: calc(1rem + env(safe-area-inset-right, 0));
    }

    footer {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    #iosInstallPrompt {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
    }


    #fabRefresh {
        display: block;
    }

    .fab {
        position: fixed;
        bottom: 1.5rem;
        right: 1.5rem;
        z-index: 1000;
        border-radius: 50%;
        padding: 10px 15px;
        font-size: 1.25rem;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

        .fab:active {
            transform: scale(0.95);
        }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    .spin {
        animation: spin 0.8s linear infinite;
    }
}
/* PWA specific styling END */

/* Navbar with backdrop and high stacking */
.glassy-navbar {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(200, 200, 200, 0.2);
    z-index: 1050; /* Slightly higher than typical content */
    position: relative;
}

.dark-mode .glassy-navbar {
    background-color: rgba(20, 20, 20, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Dropdown should always render above everything */
.dropdown-menu {
    z-index: 1080 !important; /* Bootstrap modal default is 1055 */
}

/* Dark mode dropdown visuals */
.dark-mode .dropdown-menu {
    background-color: #1d1d1d;
    color: #eee;
    border-color: #333;
}

.dark-mode .dropdown-item {
    color: #ddd;
}

    .dark-mode .dropdown-item:hover {
        background-color: #2c2c2c;
        color: white;
    }

/* Light mode cog color */
/*body:not(.dark-mode) .btn-outline-light .bi-gear-fill {
    color: #333;*/ /* Or try #212529 for Bootstrap default text */
/*}*/

/* Dark mode cog (optional override for consistency) */
/*.dark-mode .btn-outline-light .bi-gear-fill {
    color: #ccc;
}*/

/* Reset dropdown background and text for light mode */
/*body:not(.dark-mode) .dropdown-menu {
    background-color: #fff;
    color: #212529;
    border-color: rgba(0, 0, 0, 0.15);
}

body:not(.dark-mode) .dropdown-item {
    color: #212529;
}

    body:not(.dark-mode) .dropdown-item:hover {
        background-color: #f8f9fa;
        color: #000;
    }*/



/* Optional enhancement */
.form-check-input:focus {
    box-shadow: none;
}
/* Force settings dropdown to appear above all */
#settingsDropdown:focus + .dropdown-menu,
#settingsDropdown.show + .dropdown-menu,
.dropdown-menu.show {
    z-index: 9999 !important;
}

/* Optional: parent container z-index boost */
.navbar,
header {
    z-index: 9998 !important;
    position: relative;
}

.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    background-color: var(--navbar-bg);
    color: var(--navbar-fg);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

    .mobile-bottom-nav .nav-item {
        padding-top: 1rem;
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0));
        text-decoration: none;
        color: inherit;
        font-size: 0.75rem;
    }

        .mobile-bottom-nav .nav-item i {
            font-size: 1.4rem;
            display: block;
            margin-bottom: 0.15rem;
            line-height: 1;
        }

    .mobile-bottom-nav .label {
        font-size: 0.72rem;
        line-height: 2;
    }

    .mobile-bottom-nav .nav-item:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }

    .mobile-bottom-nav .dropdown-menu {
        margin-bottom: 4rem;
        z-index: 9999;
    }

/* Dark mode */
.dark-mode .mobile-bottom-nav {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border-color: rgba(255, 255, 255, 0.1);
}

/* Push up main content on mobile to avoid overlap */
@media (max-width: 767.98px) {
    body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    main {
        flex: 1 0 auto;
        padding-bottom: 4.5rem; /* adjust based on nav height */
    }

    footer {
        padding-bottom: 5rem;
        position: relative;
        z-index: 1;
    }
}