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

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

.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;
}

/* ---------- THEME SUPPORT (single source of truth) ---------- */

/* Light defaults */
html[data-theme="light"],
html[data-theme="light"] body {
    background-color: #f5f7fb;
    color: #111827;
}

/* Dark mode */
html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: #0f172a;
    color: #e5e7eb;
}

    /* Navbar + footer (keep blue gradient in both themes) */
    html[data-theme="dark"] .navbar,
    html[data-theme="dark"] .footer,
    html[data-theme="light"] .navbar,
    html[data-theme="light"] .footer {
        background: linear-gradient(135deg, #1565c0, #1e88e5) !important;
    }

        /* Navbar text */
        html[data-theme="dark"] .navbar .nav-link,
        html[data-theme="dark"] .navbar .navbar-brand,
        html[data-theme="light"] .navbar .nav-link,
        html[data-theme="light"] .navbar .navbar-brand {
            color: #ffffff !important;
        }

            html[data-theme="dark"] .navbar .nav-link:hover,
            html[data-theme="light"] .navbar .nav-link:hover {
                color: #ffffff !important;
                opacity: 0.9;
            }

    /* Cards */
    html[data-theme="dark"] .card {
        background-color: #111827;
        color: #e5e7eb;
        border-color: #1f2937;
    }

        html[data-theme="dark"] .card .text-muted {
            color: #9ca3af !important;
        }

    /* Alerts (optional but useful) */
    html[data-theme="dark"] .alert,
    html[data-theme="dark"] .alert-light,
    html[data-theme="dark"] .alert-info,
    html[data-theme="dark"] .alert-success,
    html[data-theme="dark"] .alert-warning,
    html[data-theme="dark"] .alert-danger {
        background-color: #0b1220;
        border-color: #1f2937;
        color: #e5e7eb;
    }

    /* Tables */
    html[data-theme="dark"] table.table {
        color: #e5e7eb;
    }

        html[data-theme="dark"] table.table thead,
        html[data-theme="dark"] .table-light {
            --bs-table-bg: #111827;
            --bs-table-color: #e5e7eb;
        }

    /* Inputs */
    html[data-theme="dark"] .form-control,
    html[data-theme="dark"] .form-select {
        background-color: #0b1220;
        color: #e5e7eb;
        border-color: #1f2937;
    }

        html[data-theme="dark"] .form-control:focus,
        html[data-theme="dark"] .form-select:focus {
            border-color: #2563eb;
            box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .25);
        }

/* ---------- SKELETON LOADER (ENTERPRISE FEEL) ---------- */

.skeleton {
    position: relative;
    overflow: hidden;
    background-color: #e5e7eb;
    border-radius: 6px;
}

html[data-theme="dark"] .skeleton {
    background-color: #1f2937;
}

.skeleton::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    height: 100%;
    width: 150%;
    background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.35), transparent );
    animation: skeleton-shimmer 1.4s infinite;
}

@keyframes skeleton-shimmer {
    0% {
        left: -150%;
    }

    100% {
        left: 150%;
    }
}

/* Media skeleton sizes */
.skeleton-media {
    width: 100%;
    height: 320px;
    margin-bottom: 1rem;
}

.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
}

    .skeleton-text.w-50 {
        width: 50%;
    }

    .skeleton-text.w-75 {
        width: 75%;
    }