/* ===========================================================================
   مكتب النائبة د/ زينب فهيم — نظام تصميم "الثقة المدنية"
   الهوية الجديدة: كحلي برلماني عميق + برونزي ذهبي مقتصد، خلفية ورقية دافئة.
   بديل مباشر لـ wwwroot/css/site.css — نفس أسماء الـ classes، ألوان ومظهر جديد.
   =========================================================================== */
:root {
    --c-primary: #1b2a4a;          /* deep parliamentary navy (main actions) */
    --c-primary-600: #16243f;
    --c-primary-700: #101a2e;
    --c-primary-900: #0b1320;
    --c-accent: #b8893a;           /* refined bronze gold */
    --c-accent-200: #f1e4c8;
    --c-ink: #1b2740;
    --c-muted: #6f7689;
    --c-line: #e7e3da;
    --c-bg: #f1efe8;               /* warm paper */
    --c-surface: #ffffff;
    --c-success: #2f7d54;
    --c-danger: #b3402f;
    --c-warning: #b07d24;
    --c-info: #33509b;
    --radius: 16px;
    --radius-sm: 11px;
    --shadow-sm: 0 1px 2px rgba(20,30,50,.05), 0 1px 3px rgba(20,30,50,.04);
    --shadow-md: 0 6px 18px -10px rgba(20,30,50,.22), 0 2px 6px rgba(20,30,50,.05);
    --shadow-lg: 0 18px 44px -24px rgba(20,30,50,.40);
    --sidebar-w: 256px;
}

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

html, body {
    font-family: 'Cairo', 'Segoe UI', Tahoma, system-ui, sans-serif;
    background-color: var(--c-bg);
    color: var(--c-ink);
    letter-spacing: .1px;
}
body { direction: rtl; text-align: right; min-height: 100vh; }

h1,h2,h3,h4,h5,h6 { font-weight: 800; color: var(--c-ink); letter-spacing: .1px; }
a { color: var(--c-primary-600); text-decoration: none; }
a:hover { color: var(--c-primary); }
.text-muted { color: var(--c-muted) !important; }
::selection { background: var(--c-primary-600); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cfcabd; border-radius: 8px; border: 2px solid var(--c-bg); }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--radius-sm); font-weight: 600; padding: .5rem 1.1rem; transition: all .15s ease; }
.btn:active { transform: translateY(1px); }
.btn-lg { padding: .7rem 1.5rem; }
.btn-sm { padding: .35rem .75rem; border-radius: 8px; }
.btn-office, .btn-primary {
    background: var(--c-primary-600); border: 1px solid var(--c-primary-600); color: #fff; box-shadow: var(--shadow-sm);
}
.btn-office:hover, .btn-primary:hover { background: var(--c-primary-700); border-color: var(--c-primary-700); color: #fff; box-shadow: var(--shadow-md); }
.btn-success { background: var(--c-success); border-color: var(--c-success); color:#fff; }
.btn-success:hover { filter: brightness(.95); color:#fff; }
.btn-danger  { background: var(--c-danger);  border-color: var(--c-danger); color:#fff; }
.btn-danger:hover { filter: brightness(.95); color:#fff; }
.btn-outline-success { color: var(--c-primary-600); border-color: var(--c-primary); background:#fff; }
.btn-outline-success:hover { background: var(--c-primary-600); border-color: var(--c-primary-600); color:#fff; }
.btn-outline-danger { color: var(--c-danger); border-color: #e0b6ae; background:#fff; }
.btn-outline-danger:hover { background: var(--c-danger); border-color: var(--c-danger); color:#fff; }
.btn-gold { background: var(--c-accent); border:1px solid var(--c-accent); color: #fff; font-weight: 700; }
.btn-gold:hover { filter: brightness(.96); color: #fff; }

/* ---------- Public navbar ---------- */
.office-navbar {
    background: var(--c-primary-600);
    box-shadow: 0 1px 0 rgba(255,255,255,.05), var(--shadow-md);
    padding-top: .65rem; padding-bottom: .65rem;
}
.office-navbar .navbar-brand { color:#fff !important; font-weight: 800; display:flex; align-items:center; gap:.55rem; }
.office-navbar .nav-link { color: rgba(255,255,255,.80) !important; font-weight: 600; border-radius: 8px; padding:.4rem .8rem !important; transition: background .15s; }
.office-navbar .nav-link:hover { color:#fff !important; background: rgba(255,255,255,.1); }

.brand-mark {
    display:inline-flex; align-items:center; justify-content:center;
    width: 40px; height: 40px; border-radius: 12px;
    background: linear-gradient(145deg, var(--c-accent) 0%, #9a702a 100%);
    color: #fff; font-weight: 800; font-size: .82rem; font-family: 'Cairo', serif;
    box-shadow: 0 6px 16px -6px rgba(184,137,58,.7);
}

/* ---------- Hero ---------- */
.hero {
    position: relative; overflow: hidden;
    background: radial-gradient(1100px 380px at 82% -10%, rgba(184,137,58,.22), transparent 60%),
                linear-gradient(135deg, #16243f 0%, #23365c 60%, #1a2c4d 100%);
    color:#fff; border-radius: 22px; padding: 3.2rem 2rem;
    box-shadow: var(--shadow-lg);
}
.hero::after {
    content:""; position:absolute; inset:0;
    background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 22px 22px; opacity:.5; pointer-events:none;
}
.hero .brand-circle {
    width: 92px; height: 92px; border-radius: 24px;
    background: linear-gradient(145deg, var(--c-accent), #cda45a);
    color: #fff; display:flex; align-items:center; justify-content:center;
    font-size: 1.7rem; font-weight: 800; margin: 0 auto 1.2rem;
    box-shadow: 0 12px 30px -8px rgba(0,0,0,.4), inset 0 0 0 3px rgba(255,255,255,.25);
    position: relative; z-index:1;
}
.hero h1 { color:#fff; font-weight: 800; letter-spacing: .3px; }
.hero .lead { color: rgba(255,255,255,.85); }

/* ---------- Hero with photo ---------- */
.hero-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap: 2.2rem; align-items:center; }
@media (max-width: 820px) { .hero-grid { grid-template-columns: 1fr; text-align:center; } }
.hero-photo { border-radius: 20px; overflow:hidden; box-shadow: 0 24px 50px -20px rgba(0,0,0,.55); border:5px solid rgba(255,255,255,.16); }
.hero-photo img { width:100%; display:block; }
.party-badge { display:inline-flex; align-items:center; gap:.5rem; background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); padding:.35rem .9rem; border-radius:999px; font-weight:700; color:#e6d3a8; }

.info-bar { display:flex; flex-wrap:wrap; gap:1rem; }
.info-item { flex:1; min-width: 230px; display:flex; gap:.85rem; align-items:center; }
.info-item .ico { width:46px; height:46px; border-radius:13px; background:#eef1f6; color:var(--c-primary-600); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
.info-item .t { font-weight:700; }
.info-item .s { color: var(--c-muted); font-size:.88rem; }

.work-card { border-radius:16px; overflow:hidden; position:relative; box-shadow: var(--shadow-md); }
.work-card img { width:100%; height:250px; object-fit:cover; object-position: top center; display:block; transition: transform .35s; }
.work-card:hover img { transform: scale(1.06); }
.work-card .cap { position:absolute; inset-inline:0; bottom:0; background: linear-gradient(transparent, rgba(15,23,40,.82)); color:#fff; padding: 1.1rem 1rem .9rem; font-weight:700; }

/* ---------- Cards ---------- */
.card { border: 1px solid var(--c-line); background: var(--c-surface); box-shadow: var(--shadow-sm); border-radius: var(--radius); transition: box-shadow .18s, transform .18s; }
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.card-header {
    background: var(--c-surface); border-bottom: 1px solid var(--c-line);
    font-weight: 700; color: var(--c-ink); padding: .95rem 1.15rem; border-radius: var(--radius) var(--radius) 0 0;
    display:flex; align-items:center; gap:.5rem;
}
.card-header .bi { color: var(--c-accent); }

/* ---------- Stat / KPI cards ---------- */
.stat-card { display:flex; align-items:center; gap: 1rem; padding: 1.1rem 1.25rem; }
.stat-icon { width:50px; height:50px; border-radius: 14px; display:flex; align-items:center; justify-content:center; font-size:1.35rem; flex-shrink:0; }
.stat-icon.green { background: #e5f0e9; color: var(--c-success); }
.stat-icon.gold  { background: #f4ecda; color: #8a6720; }
.stat-icon.red   { background: #f6e6e2; color: var(--c-danger); }
.stat-icon.blue  { background: #e7edfa; color: var(--c-info); }
.stat-value { font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--c-primary-600); }
.stat-label { color: var(--c-muted); font-size: .9rem; }

/* ---------- Forms ---------- */
.form-label { font-weight: 600; color: #46506a; margin-bottom: .4rem; }
.form-control, .form-select {
    border: 1px solid #e1ddd3; border-radius: var(--radius-sm); padding: .58rem .85rem; color: var(--c-ink); background:#faf9f5;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(27,42,74,.14); background:#fff; }
.form-control-lg { padding: .7rem 1rem; }

/* ---------- Tables ---------- */
.table { color: var(--c-ink); margin-bottom: 0; }
.table > thead th { background: #faf9f5; color: #8a8f9e; font-weight: 700; font-size: .82rem; border-bottom: 1px solid var(--c-line); padding: .8rem 1rem; white-space: nowrap; }
.table > tbody td { padding: .85rem 1rem; vertical-align: middle; border-bottom: 1px solid #f1efe8; }
.table-hover > tbody > tr:hover > * { background: #faf9f5; }
.table-card { overflow: hidden; border-radius: var(--radius); }

/* ---------- Badges (status & priority) ---------- */
.badge { font-weight: 600; padding: .42em .8em; border-radius: 999px; font-size: .74rem; letter-spacing: 0; }
.badge.bg-secondary { background:#eceef3 !important; color:#49526a !important; }
.badge.bg-info      { background:#e7edfa !important; color:#33509b !important; }
.badge.bg-primary   { background:#e3eef0 !important; color:#2c6470 !important; }
.badge.bg-warning   { background:#f5edd9 !important; color:#8a6720 !important; }
.badge.bg-success   { background:#e5f0e9 !important; color:#2c6b49 !important; }
.badge.bg-danger    { background:#f6e6e2 !important; color:#9c3a2b !important; }
.badge.bg-dark      { background:#e6e7ea !important; color:#3a4254 !important; }
.badge.bg-light     { background:#f1efe8 !important; color:#6f7689 !important; }
.overdue-badge { background: #f6e6e2 !important; color: var(--c-danger) !important; }

/* progress bars (reports) */
.progress { background:#f1efe8; border-radius:6px; }
.progress-bar.bg-success { background: var(--c-success) !important; }
.progress-bar.bg-warning { background: var(--c-accent) !important; }

/* ---------- Alerts / toasts ---------- */
.alert { border:1px solid transparent; border-radius: var(--radius-sm); padding: .8rem 1rem; }
.alert-success { background:#e5f0e9; border-color:#c2e0cf; color: var(--c-success); }
.alert-danger  { background:#f6e6e2; border-color:#eecbc2; color: var(--c-danger); }
.alert-warning { background:#f8efdc; border-color:#ecd9ad; color: #8a6720; }
.alert-info    { background:#e7edfa; border-color:#c9d6f0; color: var(--c-info); }

.toast-stack { position: fixed; top: 1rem; left: 1rem; z-index: 1080; display:flex; flex-direction:column; gap:.6rem; }
.app-toast { min-width: 280px; box-shadow: var(--shadow-lg); border-radius: var(--radius-sm); padding:.8rem 1rem; display:flex; align-items:center; gap:.6rem; animation: toastIn .25s ease; }
@keyframes toastIn { from { opacity:0; transform: translateY(-8px); } to { opacity:1; transform: none; } }

/* ---------- Footer ---------- */
.footer { padding: 1.4rem 0; background: var(--c-surface); border-top: 1px solid var(--c-line); color: var(--c-muted); }

/* ---------- Timeline ---------- */
.timeline { list-style:none; padding: 0; margin:0; position: relative; }
.timeline li { border-inline-start: 2px solid var(--c-line); padding: 0 1.2rem 1.3rem; position: relative; }
.timeline li:last-child { border-inline-start-color: transparent; }
.timeline li::before { content:""; position:absolute; inset-inline-start:-7px; top:2px; width:13px; height:13px; border-radius:50%; background:#fff; border:3px solid var(--c-accent); }

/* ---------- Admin shell ---------- */
.admin-shell { display:flex; min-height: 100vh; }
.admin-sidebar {
    width: var(--sidebar-w); flex-shrink:0; color:#aab8d0;
    background: linear-gradient(195deg, #16243f 0%, #1d3457 100%);
    box-shadow: var(--shadow-lg); position: sticky; top:0; height:100vh; overflow-y:auto;
    display:flex; flex-direction:column;
}
.admin-sidebar .brand { display:flex; align-items:center; gap:.6rem; padding: 1.2rem 1.15rem; color:#fff; font-weight: 800; font-size:1.02rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.admin-sidebar .nav-section { padding:.7rem 1.25rem .3rem; font-size:.7rem; letter-spacing:.6px; font-weight:700; color: #6b7c98; }
.admin-sidebar nav { flex:1; }
.admin-sidebar a { display:flex; align-items:center; gap:.7rem; color: #aab8d0; padding:.65rem 1.25rem; margin: 2px 10px; border-radius: 10px; font-weight:600; border-inline-start: 3px solid transparent; transition: all .14s; }
.admin-sidebar a .bi { font-size: 1.1rem; opacity:.95; }
.admin-sidebar a:hover { background: rgba(255,255,255,.07); color:#fff; }
.admin-sidebar a.active { background: rgba(255,255,255,.12); color:#fff; border-inline-start-color: var(--c-accent); }
.admin-content { flex-grow:1; min-width: 0; }
.admin-topbar {
    background: #f4f2ec; border-bottom: 1px solid var(--c-line);
    padding: .85rem 1.5rem; display:flex; justify-content:space-between; align-items:center;
    position: sticky; top:0; z-index: 20;
}
.admin-topbar .page-title { font-weight: 800; font-size: 1.2rem; color: var(--c-primary-600); }
.admin-inner { padding: 1.6rem; }
.user-chip { display:flex; align-items:center; gap:.5rem; }
.user-avatar { width:36px; height:36px; border-radius:10px; background: var(--c-primary-600); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }

/* ---------- Responsive admin (mobile) — sidebar becomes a scrollable top bar ---------- */
@media (max-width: 860px) {
    .admin-shell { flex-direction: column; }
    .admin-sidebar {
        width: 100%; height: auto; position: sticky; top:0; z-index: 40;
        flex-direction: row; align-items: center; gap:.15rem; overflow-x: auto; overflow-y: hidden;
        padding: .35rem .5rem; box-shadow: var(--shadow-md);
    }
    .admin-sidebar .brand { padding: .45rem .7rem; border:none; white-space:nowrap; font-size:.95rem; flex-shrink:0; }
    .admin-sidebar .nav-section { display:none; }
    .admin-sidebar nav { display:flex; gap:.15rem; flex:0 0 auto; }
    .admin-sidebar a { margin:0; padding:.5rem .75rem; white-space:nowrap; border-inline-start:none; border-bottom:3px solid transparent; border-radius:8px; }
    .admin-sidebar a.active { border-inline-start:none; border-bottom-color: var(--c-accent); }
    .admin-sidebar a .bi { font-size:1rem; }
    .admin-inner { padding: 1rem; }
    .table-card, .table-responsive { overflow-x:auto; }
}

/* ---------- Gallery ---------- */
.gallery-thumb { width:100%; height:150px; object-fit:cover; border-radius: var(--radius-sm); cursor:pointer; transition: transform .15s; }
.gallery-thumb:hover { transform: scale(1.02); }
.attach-tile { border:1px solid var(--c-line); border-radius: var(--radius-sm); padding:.4rem; background:#fff; }
.file-icon { display:flex; align-items:center; justify-content:center; height:150px; border-radius: var(--radius-sm); background:#f4f6f5; font-size:2.4rem; color: var(--c-info); }

/* ---------- Misc ---------- */
.pagination { --bs-pagination-color: var(--c-primary-600); --bs-pagination-active-bg: var(--c-primary-600); --bs-pagination-active-border-color: var(--c-primary-600); }
.section-title { font-weight: 800; }
dl.detail-list dt { color: var(--c-muted); font-weight: 600; }
dl.detail-list dd { font-weight: 600; }

#blazor-error-ui { display:none; }

/* ---------- Premium login ---------- */
.login-wrap { display:flex; min-height:100vh; }
.login-brand {
    flex: 1.15; position: relative; overflow: hidden; color:#fff;
    padding: 3rem; display:flex; flex-direction:column; justify-content:center; gap:1.2rem;
    background: radial-gradient(900px 480px at 80% 8%, rgba(184,137,58,.24), transparent 55%),
                linear-gradient(135deg, #16243f 0%, #20335a 55%, #101a2e 100%);
}
.login-brand::after { content:""; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 24px 24px; opacity:.5; }
.login-brand > * { position: relative; z-index: 1; }
.login-logo { width:84px; height:84px; border-radius:22px; background: linear-gradient(145deg, var(--c-accent), #cda45a); color: #fff; display:flex; align-items:center; justify-content:center; font-size:1.6rem; font-weight:800; box-shadow: 0 14px 30px -10px rgba(0,0,0,.45), inset 0 0 0 3px rgba(255,255,255,.22); }
.login-brand h1 { color:#fff; font-size:2rem; font-weight:800; }
.login-brand .feat { display:flex; align-items:center; gap:.7rem; color: rgba(255,255,255,.92); font-weight:600; }
.login-brand .feat .bi { width:38px; height:38px; border-radius:11px; background: rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.login-form-side { width: 460px; max-width: 100%; display:flex; align-items:center; justify-content:center; padding: 2.5rem; background: var(--c-surface); }
.login-card { width: 100%; max-width: 360px; }
.login-card .login-title { font-weight:800; font-size:1.5rem; }
@media (max-width: 900px) {
    .login-wrap { flex-direction: column; }
    .login-brand { padding: 2.2rem; flex: none; }
    .login-form-side { width:100%; }
}

/* ---------- Status stepper ---------- */
.stepper { display:flex; flex-wrap:wrap; gap:.25rem; align-items:center; }
.stepper .step { display:flex; align-items:center; gap:.4rem; }
.stepper .dot { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:700; background:#fff; color:#b3ad9e; border:2px solid #e2ddd1; }
.stepper .step.done .dot { background: var(--c-accent); border-color: var(--c-accent); color:#fff; }
.stepper .step.current .dot { background:#fff; border-color: var(--c-accent); color: var(--c-accent); box-shadow:0 0 0 4px rgba(184,137,58,.18); }
.stepper .lbl { font-size:.78rem; color:#8a8f9e; font-weight:600; }
.stepper .step.done .lbl, .stepper .step.current .lbl { color: var(--c-ink); }
.stepper .bar { width: 26px; height:2px; background:#e6e1d6; }
.stepper .step.done + .bar { background: var(--c-accent); }

/* ---------- Lightbox ---------- */
.lightbox-backdrop { position: fixed; inset:0; background: rgba(10,16,28,.85); display:none; align-items:center; justify-content:center; z-index:1090; padding:2rem; }
.lightbox-backdrop.open { display:flex; }
.lightbox-backdrop img { max-width:92vw; max-height:90vh; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lightbox-close { position:absolute; top:1.2rem; left:1.2rem; color:#fff; font-size:1.8rem; background:none; border:none; cursor:pointer; }

/* ---------- Print on official letterhead ---------- */
.print-sheet { display:none; }
@media print {
    @page { size: A4; margin: 0; }
    body { background:#fff; }
    .admin-sidebar, .admin-topbar, .toast-stack, .lightbox-backdrop, .no-print, .screen-only { display:none !important; }
    .admin-inner { padding:0 !important; }
    .print-sheet { display:block !important; position:relative; width:210mm; min-height:297mm; margin:0 auto; }
    .print-sheet .sheet-bg { position:absolute; top:0; left:0; width:210mm; height:297mm; }
    .print-sheet .sheet-body { position:relative; padding: 60mm 24mm 34mm; font-size: 12pt; color:#000; }
    .print-sheet .sheet-title { text-align:center; font-weight:800; margin-bottom: 6mm; }
    .print-sheet .row-line { display:flex; gap:.6rem; padding:1.3mm 0; border-bottom:1px dotted #bbb; }
    .print-sheet .row-line .k { font-weight:700; min-width: 36mm; }
    .print-sheet .sec { font-weight:800; margin: 5mm 0 2mm; color:#16243f; border-bottom:1px solid #b8893a; }
    .print-sheet .sign { margin-top: 12mm; display:flex; justify-content:space-between; }
}

/* ---------- Accessibility toolbar ---------- */
.a11y-bar { position: fixed; bottom: 1rem; inset-inline-start: 1rem; z-index: 1050; display:flex; gap:.3rem; background:#fff; border:1px solid var(--c-line); border-radius:999px; padding:.3rem; box-shadow: var(--shadow-md); }
.a11y-bar button { border:none; background:#f1efe8; width:36px; height:36px; border-radius:50%; font-weight:700; cursor:pointer; color: var(--c-primary-600); display:flex; align-items:center; justify-content:center; }
.a11y-bar button:hover { background: var(--c-accent-200); }
body.high-contrast { background:#000 !important; color:#fff !important; }
body.high-contrast .card, body.high-contrast .card-header, body.high-contrast .office-navbar { background:#0b0b0b !important; color:#fff !important; border-color:#444 !important; }
body.high-contrast .text-muted, body.high-contrast .form-text { color:#d6d6d6 !important; }
body.high-contrast a { color:#ffd86b !important; }
body.high-contrast .form-control, body.high-contrast .form-select { background:#111 !important; color:#fff !important; border-color:#666 !important; }
@media print { .a11y-bar { display:none !important; } }