:root { --primary: #195c3e; --primary-dark: #12372a; --accent: #c78d37; --surface: #fff; --ink: #173a2d; --muted: #7d8880; }
html, body { font-family: Tahoma, "Segoe UI", sans-serif; background: #f5f7f3; color: #283b31; }
a, .btn-link { color: var(--primary); }.btn-primary { color: #fff; background: var(--primary); border-color: var(--primary); }.btn-primary:hover { background: #124a31; border-color: #124a31; }
.btn:focus, .form-control:focus, .form-select:focus, .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(25,92,62,.18); border-color: #579274; }.content { padding-top: 1.1rem; } h1:focus { outline: none; }
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }.invalid { outline: 1px solid #c93535; }.validation-message { color: #b42318; font-size: .78rem; }
.blazor-error-boundary { background: #b42318; padding: 1rem; color: white; }.blazor-error-boundary::after { content: "حدث خطأ غير متوقع."; }
.form-control, .form-select { min-height: 44px; border-color: #dfe5df; }.card { border-color: #e5e9e3; border-radius: 16px; }
.management-form, .management-panel { background: #fff; border: 1px solid #e5e9e3; border-radius: 18px; box-shadow: 0 8px 28px rgba(34,62,48,.045); }.management-form { padding: 1.4rem; }.management-form h2 { color: var(--ink); font-size: 1rem; margin-bottom: 1rem; }
.management-toolbar, .management-footer { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.2rem; }.management-toolbar { border-bottom: 1px solid #edf0ec; }.management-toolbar > span, .management-footer > span { color: var(--muted); font-size: .78rem; }.management-footer { border-top: 1px solid #edf0ec; }.search-box { display: flex; gap: .5rem; width: min(460px,100%); }
.management-panel th { color: #78837b; font-size: .72rem; font-weight: 700; background: #fafbfa; border-bottom-color: #e9ede8; }.management-panel td { color: #46554b; font-size: .8rem; padding-top: .85rem; padding-bottom: .85rem; border-bottom-color: #eff2ee; }.management-panel td strong, .management-panel td small { display: block; }.management-panel td strong { color: #263d31; font-size: .84rem; }.management-panel td small { color: #8c958f; margin-top: .2rem; }
.status-badge { display: inline-flex; border-radius: 30px; padding: .25rem .65rem; font-size: .7rem; font-weight: 700; }.status-badge.active { color: #257044; background: #e9f5ed; }.status-badge.inactive { color: #9c3d32; background: #faecea; }.loading-state { min-height: 220px; display: flex; align-items: center; justify-content: center; gap: .6rem; color: var(--muted); }.selected-row > td { background: #f1f7f3; }.need-count { width: 130px; }
@media (max-width: 600px) { .management-toolbar, .management-footer { align-items: stretch; flex-direction: column; }.search-box { width: 100%; } }

@page { size: A4 portrait; margin: 10mm; }
@media print {
    body:has(.volunteer-print-page) { background: #fff; }
    body:has(.volunteer-print-page) .sidebar,
    body:has(.volunteer-print-page) .topbar,
    body:has(.volunteer-print-page) .screen-only,
    body:has(.volunteer-print-page) #blazor-error-ui { display: none !important; }
    body:has(.volunteer-print-page) .app-shell,
    body:has(.volunteer-print-page) .main-panel { display: block; min-height: auto; }
    body:has(.volunteer-print-page) .content-area { margin: 0; max-width: none; padding: 0 !important; }
    body:has(.volunteer-print-page) a { color: inherit; text-decoration: none; }
    body:has(.daily-needs-print-page) { background: #fff; }
    body:has(.daily-needs-print-page) .sidebar,
    body:has(.daily-needs-print-page) .topbar,
    body:has(.daily-needs-print-page) .screen-only,
    body:has(.daily-needs-print-page) #blazor-error-ui { display: none !important; }
    body:has(.daily-needs-print-page) .app-shell,
    body:has(.daily-needs-print-page) .main-panel { display: block; min-height: auto; }
    body:has(.daily-needs-print-page) .content-area { margin: 0; max-width: none; padding: 0 !important; }
    body:has(.attendance-report-page) { background: #fff; }
    body:has(.attendance-report-page) .sidebar,
    body:has(.attendance-report-page) .topbar,
    body:has(.attendance-report-page) .screen-only,
    body:has(.attendance-report-page) #blazor-error-ui { display: none !important; }
    body:has(.attendance-report-page) .app-shell,
    body:has(.attendance-report-page) .main-panel { display: block; min-height: auto; }
    body:has(.attendance-report-page) .content-area { margin: 0; max-width: none; padding: 0 !important; }
}