/* ===== Lusail font family (Qatari) ===== */
@font-face { font-family:'Lusail'; src:url('/fonts/Lusail-Light.otf') format('opentype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Lusail'; src:url('/fonts/Lusail-Regular.otf') format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Lusail'; src:url('/fonts/Lusail-Medium.otf') format('opentype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Lusail'; src:url('/fonts/Lusail-Semibold.otf') format('opentype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Lusail'; src:url('/fonts/Lusail-Bold.otf') format('opentype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Lusail'; src:url('/fonts/Lusail-Extrabold.otf') format('opentype'); font-weight:800; font-display:swap; }

:root {
    --maroon: #8A1538;
    --maroon-dk: #5E0E26;
    --maroon-soft: #f7e8ee;
    --ink: #232730;
    --muted: #6b7280;
    --bg: #f4f5f8;
    --radius: 16px;
}

.bg-maroon { background: var(--maroon) !important; }
.border-maroon { border-color: var(--maroon) !important; }

* { -webkit-font-smoothing: antialiased; }

body {
    font-family: 'Lusail', 'Tajawal', 'Segoe UI', Tahoma, 'Geeza Pro', Arial, sans-serif;
    background:
        radial-gradient(1200px 400px at 100% -10%, rgba(138,21,56,.06), transparent 60%),
        var(--bg);
    color: var(--ink);
    min-height: 100vh;
}

/* Navbar */
.app-navbar {
    background: linear-gradient(100deg, var(--maroon-dk), var(--maroon));
    box-shadow: 0 4px 20px rgba(94,14,38,.25);
}
.app-navbar .navbar-brand { color: #fff; letter-spacing: .3px; }
.app-navbar .brand-dot { color: #f1c7d4; }
.app-navbar .brand-sub { font-weight: 400; font-size: .9rem; opacity: .85; }
.app-navbar .nav-link { color: rgba(255,255,255,.82); margin-inline: 2px; border-radius: 10px; padding-inline: 12px !important; transition: .15s; }
.app-navbar .nav-link:hover { color: #fff; background: rgba(255,255,255,.14); }
.app-navbar .dropdown-menu { border: 0; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.app-navbar .dropdown-item:active { background: var(--maroon); }

/* Buttons */
.btn { border-radius: 10px; font-weight: 500; transition: .15s; }
.btn-maroon { background: var(--maroon); border-color: var(--maroon); color: #fff; box-shadow: 0 2px 8px rgba(138,21,56,.25); }
.btn-maroon:hover { background: var(--maroon-dk); border-color: var(--maroon-dk); color: #fff; transform: translateY(-1px); }
.btn-outline-maroon { color: var(--maroon); border-color: var(--maroon); }
.btn-outline-maroon:hover { background: var(--maroon); color: #fff; }
.text-maroon { color: var(--maroon) !important; }

/* Cards / stats */
.card { border: 0; border-radius: var(--radius); box-shadow: 0 4px 18px rgba(20,20,40,.06); transition: .18s; }
.card-header { background: #fff; border-bottom: 1px solid #eef0f3; font-weight: 700; border-radius: var(--radius) var(--radius) 0 0 !important; }
.card-stat { position: relative; overflow: hidden; }
.card-stat:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(20,20,40,.10); }
.card-stat .stat-value { font-size: 2.1rem; font-weight: 800; color: var(--maroon-dk); line-height: 1.1; }
.card-stat .stat-icon {
    font-size: 1.4rem; color: #fff; opacity: 1;
    background: linear-gradient(135deg, var(--maroon), var(--maroon-dk));
    width: 42px; height: 42px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(138,21,56,.3);
}

/* Tables */
.table { --bs-table-bg: transparent; }
.table > thead { background: var(--maroon); color: #fff; }
.table > thead th { font-weight: 600; border-color: var(--maroon-dk); white-space: nowrap; }
.table-hover > tbody > tr:hover > * { background: var(--maroon-soft); }
.table > tbody > tr { border-color: #eef0f3; }

/* Badges a touch rounder */
.badge { border-radius: 8px; font-weight: 600; padding: .4em .65em; }

/* Forms */
.form-control, .form-select { border-radius: 10px; border-color: #e1e4ea; }
.form-control:focus, .form-select:focus { border-color: var(--maroon); box-shadow: 0 0 0 .2rem rgba(138,21,56,.12); }
.form-label { font-weight: 600; font-size: .9rem; color: #424857; }

/* Page heading */
.page-title { color: var(--maroon-dk); font-weight: 800; }
.page-title .bi { color: var(--maroon); }

a { text-decoration: none; }
.app-footer { border-top: 1px solid #e9eaee; background: #fff; }
.required-star { color: #c0392b; }

/* Navbar tidy */
.brand-logo { height: 40px; width: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.app-navbar .navbar-nav { gap: 2px; align-items: center; }
.app-navbar .nav-link { white-space: nowrap; }
#themeToggle { font-size: 1.05rem; }

/* Subtle entrance animation for cards */
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
main .card { animation: riseIn .35s ease both; }
main .row > [class*="col"]:nth-child(2) .card { animation-delay: .04s; }
main .row > [class*="col"]:nth-child(3) .card { animation-delay: .08s; }
main .row > [class*="col"]:nth-child(4) .card { animation-delay: .12s; }
@media (prefers-reduced-motion: reduce) { main .card { animation: none; } }

/* ===================== Dark mode ===================== */
:root[data-theme="dark"] {
    --ink: #e6e8ec;
    --muted: #9aa3b2;
    --bg: #0f1216;
    --maroon-soft: #2a1820;
}
:root[data-theme="dark"] body { background: radial-gradient(1200px 400px at 100% -10%, rgba(138,21,56,.10), transparent 60%), #0f1216; color: var(--ink); }
:root[data-theme="dark"] .card { background: #171b21; color: var(--ink); box-shadow: 0 4px 18px rgba(0,0,0,.4); }
:root[data-theme="dark"] .card-header { background: #1b2027; border-bottom-color: #262c35; color: var(--ink); }
:root[data-theme="dark"] .text-muted { color: var(--muted) !important; }
:root[data-theme="dark"] .table { color: var(--ink); }
:root[data-theme="dark"] .table > tbody > tr { border-color: #262c35; }
:root[data-theme="dark"] .table-hover > tbody > tr:hover > * { background: #221a1f; color: var(--ink); }
:root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select { background: #11151a; border-color: #2a313b; color: var(--ink); }
:root[data-theme="dark"] .form-control::placeholder { color: #6b7480; }
:root[data-theme="dark"] .form-label { color: #c4ccd8; }
:root[data-theme="dark"] .btn-light { background: #232a33; border-color: #2a313b; color: var(--ink); }
:root[data-theme="dark"] .btn-light:hover { background: #2c343f; color: #fff; }
:root[data-theme="dark"] .app-footer { background: #11151a; border-top-color: #20262e; }
:root[data-theme="dark"] .dropdown-menu { background: #1b2027; border: 1px solid #2a313b; }
:root[data-theme="dark"] .dropdown-item { color: var(--ink); }
:root[data-theme="dark"] .dropdown-item:hover { background: #262c35; }
:root[data-theme="dark"] .input-group-text { background: #232a33; border-color: #2a313b; color: var(--ink); }
:root[data-theme="dark"] .page-title { color: #f0d9e1; }
:root[data-theme="dark"] .border, :root[data-theme="dark"] .border-top { border-color: #262c35 !important; }
:root[data-theme="dark"] .bg-light { background: #1b2027 !important; color: var(--ink); }