/* Esadhak shared theme — indigo/blue palette, chrome only.
   Per-category gradient/accent maps (dashboard, index, preview_route,
   category_tests) are content-driven and intentionally NOT touched here. */

:root{
    --primary:#4f46e5;
    --primary-dark:#4338ca;
    --primary-light:#eef2ff;

    --sidebar-bg:#1e1b4b;
    --sidebar-hover:rgba(255,255,255,.12);

    --success:#16a34a;
    --success-light:#dcfce7;
    --danger:#dc2626;
    --danger-light:#fee2e2;
    --warning:#d97706;
    --warning-light:#fef3c7;

    --bg:#f8fafc;
    --surface:#ffffff;
    --text:#111827;
    --text-muted:#64748b;
    --border:#e5e7eb;

    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:16px;
    --shadow-sm:0 2px 10px rgba(17,24,39,0.06);
}

body{
    font-family:'Inter', sans-serif;
    font-size:13px;
    background:var(--bg);
    color:var(--text);
}

a{
    color:var(--primary);
}
a:hover{
    color:var(--primary-dark);
}

/* Shared page chrome — the plain white navbar used across every
   student-facing page (was duplicated inline, byte-for-byte, on every page
   that has one; centralized here so it's fetched once and cached). */
.navbar{
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
    padding:1rem 0;
}
.brand{
    font-weight:bold;
    color:var(--primary);
}
.navbar .container-fluid,
.navbar .container{
    padding-left:1.5rem;
    padding-right:1.5rem;
}
@media (min-width:992px){
    .navbar .container-fluid,
    .navbar .container{
        padding-left:3rem;
        padding-right:3rem;
    }
}
.nav-avatar{ width:24px; height:24px; border-radius:50%; object-fit:cover; vertical-align:-5px; }

/* Bootstrap 5.3 components are CSS-variable driven — repoint them without a Sass rebuild */
.btn-primary{
    --bs-btn-bg:var(--primary);
    --bs-btn-border-color:var(--primary);
    --bs-btn-hover-bg:var(--primary-dark);
    --bs-btn-hover-border-color:var(--primary-dark);
    --bs-btn-active-bg:var(--primary-dark);
    --bs-btn-active-border-color:var(--primary-dark);
    --bs-btn-disabled-bg:var(--primary);
    --bs-btn-disabled-border-color:var(--primary);
}

.btn-outline-primary{
    --bs-btn-color:var(--primary);
    --bs-btn-border-color:var(--primary);
    --bs-btn-hover-bg:var(--primary);
    --bs-btn-hover-border-color:var(--primary);
    --bs-btn-active-bg:var(--primary-dark);
    --bs-btn-active-border-color:var(--primary-dark);
}

.bg-primary{
    background-color:var(--primary) !important;
}
.text-primary{
    color:var(--primary) !important;
}

/* Admin sidebar */
.app-sidebar{
    background:var(--sidebar-bg);
}
.app-sidebar a:hover{
    background:var(--sidebar-hover);
}

/* Soft status helpers for flags/badges */
.text-success-app{ color:var(--success); }
.text-danger-app{ color:var(--danger); }
.badge-success-soft{ background:var(--success-light); color:var(--success); }
.badge-danger-soft{ background:var(--danger-light); color:var(--danger); }
.badge-warning-soft{ background:var(--warning-light); color:var(--warning); }
.badge-neutral-soft{ background:var(--bg); color:var(--text-muted); border:1px solid var(--border); }

.icon-left{ margin-right:.5rem; }

/* Floating-label form controls with an optional password show/hide toggle.
   Originally scoped to #authModal in index.php; promoted here once the same
   pattern was needed on forgot_password.php, reset_password.php, and
   manage_account.php, so all four pages share one definition. */
.form-control{
    border-radius:var(--radius-sm);
    border-color:var(--border);
}
.form-control:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px var(--primary-light);
}
.form-floating:has(.password-toggle-btn) .form-control{
    padding-right:40px;
}
.password-toggle-btn{
    position:absolute;
    top:50%;
    right:12px;
    transform:translateY(-50%);
    background:none;
    border:none;
    color:var(--text-muted);
    padding:0;
    z-index:5;
    cursor:pointer;
}
.password-toggle-btn:hover{
    color:var(--text);
}