html, body {
    background-color: #f8fffe !important;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

/* ===== CNS180 / Nova Smart Solutions ===== */
:root {
    /* Brand */
    --nova-teal: #14b8a6;
    --nova-teal-dark: #0d9488;
    --nova-teal-light: #ccfbf1;
    --nova-blue: #3b82f6;
    --nova-violet: #7c3aed;
    /* Light Mode */
    --shield-bg: #f0fdf9;
    --shield-card: #ffffff;
    --shield-border: #e2e8f0;
    --shield-sidebar: #0f172a;
    --shield-text: #0f172a;
    --shield-text-muted: #475569;
    --shield-teal: #14b8a6;
    --shield-teal-dark: #0d9488;
    --shield-teal-light: #ccfbf1;
}

/* ===== NAVBAR ===== */
.navbar {
    background-color: var(--shield-sidebar) !important;
    border-bottom: 1px solid #1e293b !important;
}

    .navbar .nav-link {
        color: #94a3b8 !important;
    }

        .navbar .nav-link:hover,
        .navbar .nav-link.active {
            color: var(--nova-teal) !important;
        }

.navbar-brand {
    color: var(--nova-teal) !important;
}

/* ===== BODY ===== */
.bg-body {
    background-color: var(--shield-bg) !important;
}

.bg-body-tertiary {
    background-color: #ffffff !important;
    border: 1px solid var(--shield-border) !important;
}

body, .text-body {
    color: var(--shield-text) !important;
}

.text-muted, .text-secondary {
    color: var(--shield-text-muted) !important;
}

/* ===== CARDS ===== */
.card {
    background-color: var(--shield-card) !important;
    border: 1px solid var(--shield-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* ===== BUTTONS ===== */
.btn-primary {
    background-color: var(--nova-teal) !important;
    border-color: var(--nova-teal) !important;
    color: #ffffff !important;
}

    .btn-primary:hover {
        background-color: var(--nova-teal-dark) !important;
        border-color: var(--nova-teal-dark) !important;
    }

.btn-outline-primary {
    color: var(--nova-teal) !important;
    border-color: var(--nova-teal) !important;
}

    .btn-outline-primary:hover {
        background-color: var(--nova-teal) !important;
        color: white !important;
    }

/* ===== FORMS ===== */
.form-control, .form-select {
    background-color: #ffffff !important;
    border: 1px solid var(--shield-border) !important;
    color: var(--shield-text) !important;
    border-radius: 8px !important;
}

    .form-control:focus, .form-select:focus {
        border-color: var(--nova-teal) !important;
        box-shadow: 0 0 0 0.2rem rgba(20, 184, 166, 0.2) !important;
    }

/* ===== TABLES ===== */
.table {
    color: var(--shield-text) !important;
}

    .table thead th {
        background-color: #f8fffe !important;
        color: var(--shield-text-muted) !important;
        border-bottom: 2px solid var(--shield-border) !important;
        font-size: 0.75rem !important;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .table tbody tr:hover {
        background-color: #f0fdf9 !important;
    }

/* ===== BADGES ===== */
.badge {
    border-radius: 6px !important;
    font-weight: 500 !important;
}

    .badge.bg-success {
        background-color: #10b981 !important;
    }

    .badge.bg-danger {
        background-color: #ef4444 !important;
    }

    .badge.bg-warning {
        background-color: #f59e0b !important;
        color: white !important;
    }

    .badge.bg-primary {
        background-color: var(--nova-teal) !important;
    }

/* ===== TOAST ===== */
.toast {
    background-color: #ffffff !important;
    border: 1px solid var(--shield-border) !important;
    color: var(--shield-text) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

.toast-header {
    background-color: #f8fffe !important;
    color: var(--shield-text) !important;
    border-bottom: 1px solid var(--shield-border) !important;
}

/* ===== DROPDOWN ===== */
.dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid var(--shield-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

.dropdown-item {
    color: var(--shield-text) !important;
}

    .dropdown-item:hover {
        background-color: #f0fdf9 !important;
        color: var(--nova-teal) !important;
    }

/* ===== MISC ===== */
.nav-link.text-warning {
    color: var(--nova-teal) !important;
}

.border-secondary {
    border-color: var(--shield-border) !important;
}

.border-success {
    border-color: #10b981 !important;
}

.border-warning {
    border-color: #f59e0b !important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #f0fdf9;
}

::-webkit-scrollbar-thumb {
    background: var(--nova-teal);
    border-radius: 3px;
}

/* ===== BLAZOR ===== */
#blazor-error-ui {
    background: #fef3c7;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.1);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: #92400e;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ===== LOADING ===== */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--nova-teal);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    color: var(--shield-text);
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: var(--nova-teal-dark);
}

/* ===================================
   NOVA DARK MODE — Deep Space Theme
   Inspired by Nova Smart Solutions
   =================================== */
[data-theme="dark"] {
    --shield-bg: #0f172a;
    --shield-card: #1e293b;
    --shield-border: #334155;
    --shield-text: #e2e8f0;
    --shield-text-muted: #94a3b8;
    --shield-sidebar: #0f172a;
    --shield-teal-light: #134e4a;
}

    [data-theme="dark"] html,
    [data-theme="dark"] body {
        background-color: #0f172a !important;
        color: #e2e8f0 !important;
    }

    [data-theme="dark"] .bg-body {
        background-color: #0f172a !important;
    }

    [data-theme="dark"] .bg-body-tertiary {
        background-color: #1e293b !important;
        border-color: #334155 !important;
    }

    [data-theme="dark"] .card {
        background-color: #1e293b !important;
        border-color: #334155 !important;
        box-shadow: 0 4px 24px rgba(0,0,0,0.2) !important;
    }

    [data-theme="dark"] .navbar {
        background: #0f172a !important;
        border-bottom: 1px solid #334155 !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
    }

    [data-theme="dark"] .form-control,
    [data-theme="dark"] .form-select {
        background-color: #0f172a !important;
        border-color: #334155 !important;
        color: #e2e8f0 !important;
    }
    [data-theme="dark"] .table thead th {
        background-color: #1e293b !important;
        color: #94a3b8 !important;
        border-color: #334155 !important;
    }


        [data-theme="dark"] .form-control:focus,
        [data-theme="dark"] .form-select:focus {
            border-color: #3b82f6 !important;
            box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.2) !important;
        }

    [data-theme="dark"] .table {
        color: #e2e8f0 !important;
    }

        [data-theme="dark"] .table tbody tr:hover {
            background-color: #273549 !important;
        }

    [data-theme="dark"] .dropdown-menu {
        background-color: #1e293b !important;
        border-color: #334155 !important;
    }


    [data-theme="dark"] .dropdown-item {
        color: #e2e8f0 !important;
    }

        [data-theme="dark"] .dropdown-item:hover {
            background-color: #273549 !important;
            color: #14b8a6 !important;
        }
    [data-theme="dark"] .border-secondary {
        border-color: #334155 !important;
    }

    [data-theme="dark"] .toast {
        background-color: #0d1230 !important;
        border-color: #1e2d5a !important;
        color: #e2e8f0 !important;
        box-shadow: 0 8px 32px rgba(59, 130, 246, 0.2) !important;
    }

    [data-theme="dark"] .toast-header {
        background-color: #080b1a !important;
        color: #e2e8f0 !important;
        border-color: #1e2d5a !important;
    }

    [data-theme="dark"] .border-secondary {
        border-color: #1e2d5a !important;
    }

    [data-theme="dark"] ::-webkit-scrollbar-track {
        background: #0d1230;
    }

    [data-theme="dark"] ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #3b82f6, #7c3aed);
    }

    /* Nova Glow Effect على الكروت في Dark mode */
    [data-theme="dark"] .card:hover {
        box-shadow: 0 4px 32px rgba(59, 130, 246, 0.15), 0 0 0 1px rgba(59, 130, 246, 0.1) !important;
        transition: box-shadow 0.3s ease;
    }

    /* Nova gradient border للـ active elements */
    [data-theme="dark"] .nav-link.active {
        background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(124,58,237,0.15)) !important;
        border-radius: 8px;
    }
@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }

    15% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
.btn {
    border-radius: 10px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

    .btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35), 0 0 0 1px rgba(59, 130, 246, 0.15) !important;
        filter: brightness(1.05);
    }

    .btn:active {
        transform: translateY(1px) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    }

.nav-link {
    transition: transform 0.2s ease, color 0.2s ease !important;
}

    .nav-link:hover {
        transform: translateY(-1px) !important;
    }

.card {
    transition: box-shadow 0.2s ease;
}

    .card:hover {
        box-shadow: 0 8px 25px rgba(0,0,0,0.2) !important;
    }