:root {
  --brand-950: #0f1d2e;
  --brand-900: #193550;
  --brand-800: #27516f;
  --brand-700: #356987;
  --brand-600: #4a7e9d;
  --brand-500: #6b98b5;
  --brand-soft: #eef4f8;
  --brand-soft-strong: #dce9f1;
  --brand-glow: rgba(53, 105, 135, .15);
  --green-800: #075244;
  --green-700: #0b6555;
  --green-600: #127663;
  --green-50: #edf8f3;
  --mawlid-950: #052e29;
  --mawlid-900: #083b35;
  --mawlid-800: #075244;
  --mawlid-700: #0b6555;
  --mawlid-600: #127663;
  --gold-700: #b8860b;
  --gold-600: #d4a853;
  --gold-500: #d4a853;
  --gold-100: #f0ddb0;
  --gold-soft: #e8c878;
  --canvas: #f4f6fa;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --muted-light: #94a3b8;
  --border: #e2e8f0;
  --border-dark: #cbd5e1;
  --success: #2563eb;
  --success-soft: #e8f0ff;
  --warning: #b97816;
  --warning-soft: #fff4dc;
  --danger: #c53e3e;
  --danger-soft: #fbeded;
  --blue: #286fa8;
  --blue-soft: #eaf3fb;
  --purple: #7560bb;
  --purple-soft: #f0edfb;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 4px 12px rgba(15, 23, 42, .06);
  --shadow: 0 12px 28px rgba(15, 23, 42, .09);
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 24px;
  --sidebar-width: 272px;
  font-family: Cairo, "Segoe UI", Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { min-height: 100%; overflow-x: hidden; background: var(--canvas); }
body { margin: 0; min-width: 320px; min-height: 100%; overflow-x: hidden; color: var(--text); background: radial-gradient(circle at 96% 0, rgba(213, 167, 78, .08), transparent 23rem), var(--canvas); font-size: 14px; line-height: 1.55; }
body.auth-locked { overflow: hidden; }
body.auth-locked .app-shell { visibility: hidden; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--brand-glow); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .55; }
input, select, textarea { color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--muted-light); }

.auth-screen { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 24px; background: #f4f6f9; }
.auth-screen[hidden] { display: none; }
.auth-card { width: min(430px, 100%); padding: 38px 36px; border: 1px solid #e7ebf1; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px rgba(15, 23, 42, .07); }
.auth-card #loginPanel > h1 { margin: 0 0 30px; color: #14213d; font-size: 25px; font-weight: 800; line-height: 1.4; text-align: center; }
.auth-card h2 { margin: 3px 0 2px; font-size: 22px; }
.auth-card > div > p { margin: 0 0 18px; color: var(--muted); font-size: 12px; }
.programs-home { display:grid; gap:8px; }
.program-grid.in-shell { margin-top:18px; }
.hub-header { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(20px,5vw,72px); border-bottom:1px solid var(--border); background:#fff; }
.hub-brand,.hub-user { display:flex; align-items:center; gap:10px; }
.hub-brand > span { width:36px; height:36px; display:grid; place-items:center; color:#fff; border-radius:10px; background:var(--brand-700); font-weight:900; }
.hub-brand strong { font-size:17px; }.hub-brand small { color:var(--muted); font-size:11px; }
.hub-user { color:var(--muted); font-size:12px; }.hub-user button { color:var(--brand-700); border:0; background:transparent; font-weight:800; }
.hub-content { width:min(1100px,100%); margin:0 auto; padding:72px 32px; }.hub-content h1 { margin:5px 0; font-size:clamp(26px,4vw,38px); }.hub-content > p { margin:0; color:var(--muted); }
.program-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin-top:34px; }
.program-card { position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; min-height:220px; padding:26px; color:#fff; border:0; border-radius:14px; background:linear-gradient(135deg,var(--brand-950),var(--brand-800)); text-align:right; box-shadow:var(--shadow); }
.program-card::after { content:""; position:absolute; width:190px; height:190px; left:-55px; bottom:-85px; border:1px solid rgba(255,255,255,.15); border-radius:50%; }
.program-card .program-icon { width:44px; height:44px; display:grid; place-items:center; color:var(--gold-100); border-radius:12px; background:rgba(212,168,83,.17); font-size:22px; }
.program-card .program-icon svg { width:24px; height:24px; display:block; }
.program-card .program-icon .program-logo { width:40px; height:40px; display:block; object-fit:contain; }
.program-card h2 { margin:18px 0 4px; font-size:21px; }.program-card p { margin:0; color:#cbd5e1; font-size:12px; }.program-card strong { margin-top:auto; color:var(--gold-soft); font-size:12px; }
.program-card--mawlid {
  background:
    radial-gradient(ellipse 120% 90% at 100% -10%, rgba(232, 200, 120, .16), transparent 42%),
    radial-gradient(ellipse 80% 70% at -5% 110%, rgba(18, 118, 99, .55), transparent 48%),
    linear-gradient(145deg, #031f1b 0%, #052e29 18%, #075244 48%, #0b6555 78%, #148f78 100%);
  box-shadow:0 14px 32px rgba(3, 31, 27, .34);
}
.program-card--mawlid::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg, transparent 35%, rgba(232, 200, 120, .07) 52%, transparent 68%),
    radial-gradient(circle at 78% 28%, rgba(255, 255, 255, .08), transparent 36%);
}
.program-card--mawlid::after { border-color:rgba(232, 200, 120, .22); }
.program-card--mawlid .program-icon {
  width:52px;
  height:52px;
  padding:0;
  color:var(--gold-100);
  background:transparent;
  border:0;
  border-radius:50%;
  box-shadow:none;
  overflow:hidden;
}
.program-card--mawlid .program-icon .program-logo {
  width:52px;
  height:52px;
  object-fit:contain;
  background:transparent;
  border-radius:50%;
}
.program-card--mawlid p { color:rgba(220, 242, 234, .82); }
.program-card--mawlid strong { color:var(--gold-soft); }
body.program-mawlid {
  --brand-950: var(--mawlid-950);
  --brand-900: var(--mawlid-900);
  --brand-800: var(--mawlid-800);
  --brand-700: var(--mawlid-700);
  --brand-600: var(--mawlid-600);
  --brand-500: #18836e;
  --brand-soft: #e8f5f0;
  --brand-soft-strong: #d5ebe3;
  --brand-glow: rgba(24, 131, 110, .18);
  --green-50: #edf8f3;
}
body:not(.program-mawlid) .primary-button { background:var(--program-primary, var(--brand-700)); border-color:var(--program-primary, var(--brand-700)); }
body:not(.program-mawlid) .program-card:not(.program-card--mawlid) { background:linear-gradient(135deg, var(--program-primary, var(--brand-950)), var(--program-secondary, var(--brand-800))); }
.program-nav-options { display:flex; flex-wrap:wrap; gap:14px; padding:10px 0; }
.program-nav-options label { display:flex; gap:6px; align-items:center; font-weight:700; }
.auth-form { display: grid; gap: 18px; }
.auth-field { display: grid; gap: 8px; text-align: right; }
.auth-field > span { color: #344054; font-size: 13px; font-weight: 700; }
.auth-input { position: relative; }
.auth-input input { width: 100%; height: 48px; padding: 0 46px 0 14px; color: #172033; border: 1px solid #d8dee8; border-radius: 7px; background: #fff; direction: rtl; transition: border-color .18s ease, box-shadow .18s ease; }
.auth-input input:hover { border-color: #b9c5d5; }
.auth-input input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); outline: 0; }
.auth-input-icon { position: absolute; z-index: 1; top: 50%; right: 15px; width: 20px; height: 20px; color: #8a97a8; transform: translateY(-50%); pointer-events: none; }
.auth-input-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#loginForm .primary-button { min-height: 48px; margin-top: 6px; border-color: #2563eb; border-radius: 7px; background: #2563eb; box-shadow: 0 5px 12px rgba(37, 99, 235, .2); font-size: 14px; }
#loginForm .primary-button:hover { border-color: #1d4ed8; background: #1d4ed8; }
.auth-message { margin-top: 14px; padding: 10px 12px; color: var(--danger); border: 1px solid #f1cccc; border-radius: 9px; background: var(--danger-soft); font-size: 11px; font-weight: 700; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: var(--sidebar-width); flex: 0 0 var(--sidebar-width); min-height: 100vh; position: sticky; inset: 0 0 0 auto; display: flex; flex-direction: column; padding: 24px 16px 18px; overflow-y: auto; color: #e2e8f0; background: var(--brand-950); }
.brand { display: flex; align-items: center; gap: 12px; padding: 2px 8px 26px; }
.brand-mark { width: 46px; height: 46px; flex: 0 0 46px; display:grid; place-items:center; color:#fff; border: 1px solid rgba(147, 197, 253, .35); border-radius: 13px; background: var(--brand-700); box-shadow: 0 4px 12px rgba(0, 0, 0, .18); font-weight:900; font-size:19px; }
body.program-mawlid .brand-mark { border-color: rgba(232, 200, 120, .35); }
.brand strong { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.2px; }
.brand span { display: block; margin-top: 1px; color: rgba(226, 232, 240, .65); font-size: 11px; }
body.program-mawlid .brand span { color: rgba(236, 248, 244, .65); }

.active-scope { margin: 0 4px 22px; padding: 14px; border: 1px solid rgba(148, 163, 184, .18); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .065); }
body.program-mawlid .active-scope { border-color: rgba(220, 242, 234, .13); }
.eyebrow { display: block; color: var(--brand-600); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.active-scope .eyebrow { color: rgba(203, 213, 225, .7); }
body.program-mawlid .active-scope .eyebrow { color: rgba(236, 248, 244, .6); }
.scope-row { display: flex; align-items: center; gap: 9px; margin: 10px 0 4px; }
.scope-icon { width: 28px; height: 28px; display: grid; place-items: center; color: var(--gold-500); border-radius: 9px; background: rgba(238, 191, 94, .13); font-size: 18px; }
.scope-row strong, .scope-row span:not(.scope-icon) { display: block; }
.scope-row strong { color: #fff; font-size: 13px; }
.scope-row span:not(.scope-icon) { margin-top: 1px; color: rgba(203, 213, 225, .7); font-size: 11px; }
body.program-mawlid .scope-row span:not(.scope-icon) { color: rgba(236, 248, 244, .63); }
.text-button { padding: 0; color: var(--brand-700); border: 0; background: transparent; font-weight: 800; font-size: 12px; }
.active-scope .text-button { color: #dcbf7c; margin: 7px 0 0 37px; }
.text-button:hover { color: var(--brand-900); text-decoration: underline; }
.active-scope .text-button:hover { color: #ffe29e; }

.nav-list { display: grid; gap: 4px; }
.nav-link { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; min-height: 45px; padding: 0 12px; color: rgba(203, 213, 225, .82); border: 1px solid transparent; border-radius: 10px; background: transparent; text-align: right; transition: .18s ease; }
body.program-mawlid .nav-link { color: rgba(236, 248, 244, .78); }
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.nav-link.is-active { color: #fff; border-color: rgba(147, 197, 253, .28); background: rgba(37, 99, 235, .22); }
body.program-mawlid .nav-link.is-active { border-color: rgba(224, 200, 120, .22); background: rgba(208, 168, 77, .17); }
.nav-link.is-active::before { position: absolute; right: -16px; width: 3px; height: 26px; content: ""; background: var(--gold-500); border-radius: 0 4px 4px 0; }
.nav-icon { width: 20px; display: inline-grid; place-items: center; color: var(--gold-500); font-size: 19px; line-height: 1; }
.nav-link span:nth-child(2) { flex: 1; font-weight: 700; font-size: 13px; }
.nav-count { min-width: 22px; padding: 1px 6px; color: #e2e8f0; border-radius: 999px; background: rgba(255, 255, 255, .13); font-size: 11px; text-align: center; }
body.program-mawlid .nav-count { color: #eafff8; }
.nav-count.warning { color: #fbdd98; background: rgba(207, 150, 43, .17); }
.sidebar-bottom { margin-top: auto; padding: 22px 8px 0; }
.current-user { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid rgba(148, 163, 184, .16); }
body.program-mawlid .current-user { border-top-color: rgba(234, 248, 242, .11); }
.user-avatar { width: 32px; height: 32px; display: grid; place-items: center; color: #fff; border-radius: 10px; background: rgba(213, 167, 78, .28); font-weight: 800; }
.current-user strong, .current-user small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.current-user strong { font-size: 11px; }
.current-user small { color: rgba(148, 163, 184, .75); font-size: 9px; }
body.program-mawlid .current-user small { color: rgba(236, 248, 244, .55); }
.current-user button { padding: 4px 6px; color: #93c5fd; border: 1px solid rgba(147, 197, 253, .28); border-radius: 6px; background: transparent; font-size: 9px; font-weight: 800; }
body.program-mawlid .current-user button { color: #f7d890; border-color: rgba(247, 216, 144, .25); }
.backup-status { display: flex; gap: 8px; align-items: flex-start; padding: 12px 0; border-top: 1px solid rgba(148, 163, 184, .16); }
body.program-mawlid .backup-status { border-top-color: rgba(234, 248, 242, .11); }
.status-dot { width: 8px; height: 8px; flex: 0 0 8px; margin-top: 5px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .12); }
.backup-status span:not(.status-dot), .backup-status small { display: block; }
.backup-status span:not(.status-dot) { color: rgba(226, 232, 240, .88); font-size: 11px; font-weight: 700; }
.backup-status small { max-width: 175px; margin-top: 2px; color: rgba(148, 163, 184, .7); font-size: 10px; line-height: 1.45; }
body.program-mawlid .backup-status span:not(.status-dot) { color: rgba(236, 248, 244, .88); }
body.program-mawlid .backup-status small { color: rgba(236, 248, 244, .53); }
.version-label { color: rgba(148, 163, 184, .45); font-size: 10px; }
body.program-mawlid .version-label { color: rgba(236, 248, 244, .36); }

.main-panel { min-width: 0; flex: 1; }
.topbar { position: sticky; z-index: 7; top: 0; min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 36px; border-bottom: 1px solid var(--border); background: rgba(255, 255, 255, .9); backdrop-filter: blur(12px); }
.page-heading .eyebrow { margin-bottom: 1px; }
.page-heading h1 { margin: 0; font-size: 20px; letter-spacing: -.5px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.date-chip { display: flex; align-items: center; gap: 8px; padding: 6px 10px; color: var(--brand-900); border: 1px solid var(--border); border-radius: 11px; background: var(--surface-soft); }
.date-chip-icon { display: grid; width: 28px; height: 28px; place-items: center; color: var(--gold-700); border-radius: 8px; background: var(--gold-100); font-size: 16px; }
.date-chip strong, .date-chip span:not(.date-chip-icon) { display: block; white-space: nowrap; }
.date-chip strong { font-size: 11px; }
.date-chip span:not(.date-chip-icon) { color: var(--muted); font-size: 10px; }
.icon-button { width: 38px; height: 38px; display: inline-grid; place-items: center; color: var(--brand-800); border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 19px; transition: .18s ease; }
.icon-button:hover { border-color: var(--brand-500); background: var(--brand-soft); transform: translateY(-1px); }
.mobile-menu-button { display: none; }
.mobile-menu-backdrop { display: none; }

.content-area { width: min(1460px, 100%); margin: 0 auto; padding: 32px 36px 48px; }
.view { display: none; animation: fade-in .22s ease; }
.view.is-active { display: block; }
@keyframes fade-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.primary-button, .secondary-button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 17px; border-radius: 10px; font-weight: 800; font-size: 13px; transition: .18s ease; }
.primary-button { color: #fff; border: 1px solid var(--brand-700); background: var(--brand-700); box-shadow: 0 4px 8px var(--brand-glow); }
.primary-button:hover { border-color: var(--brand-900); background: var(--brand-900); box-shadow: 0 7px 14px var(--brand-glow); transform: translateY(-1px); }
.primary-button.compact { min-height: 37px; padding: 0 13px; font-size: 12px; }
.secondary-button { color: var(--brand-700); border: 1px solid var(--border-dark); background: var(--surface); }
.secondary-button:hover { color: var(--brand-900); border-color: var(--brand-500); background: var(--brand-soft); }
.full-width { width: 100%; }
.centered { display: block; margin: 2px auto 0; }

.welcome-card { position: relative; min-height: 232px; display: flex; align-items: center; justify-content: space-between; gap: 25px; overflow: hidden; padding: 31px 34px; color: #f8fafc; border-radius: var(--radius-lg); background: linear-gradient(118deg, var(--brand-950), var(--brand-700) 66%, var(--brand-600)); box-shadow: var(--shadow); }
.welcome-card::after { position: absolute; inset: 0; content: ""; opacity: .13; background-image: linear-gradient(30deg, rgba(255, 255, 255, .1) 1px, transparent 1px), linear-gradient(150deg, rgba(255, 255, 255, .1) 1px, transparent 1px); background-size: 30px 50px; }
.welcome-copy, .calendar-card { position: relative; z-index: 1; }
.welcome-copy { max-width: min(100%, 780px); min-width: 0; flex: 1 1 auto; }
.eyebrow.light { color: #e6c77e; }
.welcome-copy h2 { max-width: none; margin: 5px 0 7px; color: #fff; font-size: clamp(20px, 2vw, 28px); line-height: 1.35; letter-spacing: -.8px; white-space: nowrap; }
.welcome-copy h2 span { color: #f6d98f; }
.welcome-copy p { max-width: 620px; margin: 0; color: rgba(226, 232, 240, .78); font-size: 13px; }
body.program-mawlid .welcome-copy p { color: rgba(247, 255, 252, .74); }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.light-button { color: var(--brand-900); border-color: #fff3ce; background: #fff6db; }
.light-button:hover { color: var(--brand-950); border-color: #fff; background: #fff; }
.transparent-button { color: #f1f5f9; border-color: rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .08); }
.transparent-button:hover { color: #fff; border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .15); }
.calendar-card { width: 150px; flex: 0 0 150px; padding: 16px 16px 13px; color: var(--brand-900); border: 1px solid rgba(255, 247, 213, .52); border-radius: 17px; background: rgba(255, 255, 255, .93); box-shadow: 0 12px 18px rgba(15, 23, 42, .18); text-align: center; }
.calendar-card > span, .calendar-card small, .calendar-card b { display: block; }
.calendar-card > span { color: var(--muted); font-size: 11px; font-weight: 700; }
.calendar-card > strong { display: block; margin: 0; color: var(--brand-800); font-family: Arial, sans-serif; font-size: 39px; line-height: 1.2; }
.calendar-card small { color: var(--muted); font-size: 10px; }
.calendar-divider { height: 1px; margin: 10px 0 8px; background: var(--border); }
.calendar-card b { color: var(--gold-700); font-size: 10px; }
.welcome-orb { position: absolute; z-index: 0; border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%; }
.orb-one { width: 350px; height: 350px; left: -156px; top: -150px; background: rgba(223, 184, 94, .08); }
.orb-two { width: 460px; height: 460px; left: 8%; bottom: -380px; background: rgba(255, 255, 255, .055); }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 22px 0; }
.stat-card { min-height: 112px; display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-xs); }
.stat-icon { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 12px; font-size: 18px; font-weight: 800; }
.stat-icon.green { color: var(--brand-700); background: var(--brand-soft); }
.stat-icon.gold { color: var(--gold-700); background: var(--gold-100); }
.stat-icon.blue { color: var(--blue); background: var(--blue-soft); }
.stat-icon.purple { color: var(--purple); background: var(--purple-soft); }
.stat-card div > span, .stat-card small { display: block; color: var(--muted); font-size: 11px; }
.stat-card strong { display: block; margin: 0; color: var(--text); font-family: Arial, sans-serif; font-size: 27px; line-height: 1.22; }
.stat-card small { font-size: 10px; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .72fr); gap: 18px; }
.admin-pulse { margin: 0 0 18px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(135deg, var(--surface), #eef2f7); box-shadow: var(--shadow-xs); }
.admin-pulse-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.admin-pulse-grid > div { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.82); }
.admin-pulse h3 { margin: 0 0 9px; color: var(--brand-900); font-size: 12px; }
.pulse-row { display: flex; align-items: center; gap: 8px; min-height: 39px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.pulse-row:last-child { border-bottom: 0; }
.pulse-row > div { min-width: 0; flex: 1; }
.pulse-row strong, .pulse-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pulse-row strong { font-size: 11px; }.pulse-row small, .pulse-empty { margin: 0; color: var(--muted); font-size: 10px; }
.pulse-avatar, .activity-icon, .program-dot { width: 27px; height: 27px; display: grid; flex: 0 0 27px; place-items: center; border-radius: 50%; color: #fff; background: var(--brand-700); font-size: 11px; font-weight: 800; }
.activity-icon { color: var(--gold-700); background: var(--gold-100); }.program-dot { width: 10px; height: 10px; flex-basis: 10px; }
.pulse-row > i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.panel, .form-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-xs); }
.panel { padding: 21px; }
.panel-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.panel-header h2 { margin: 1px 0 0; font-size: 17px; letter-spacing: -.3px; }
.today-list { display: grid; gap: 9px; }
.event-row { display: flex; align-items: center; gap: 12px; padding: 11px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.event-row:hover { border-color: var(--brand-500); }
.event-row-photo { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; overflow: hidden; color: var(--gold-700); border-radius: 11px; background: var(--gold-100); font-size: 17px; }
.event-row-photo img { width: 100%; height: 100%; object-fit: contain; background: var(--surface-soft); }
.event-row-copy { min-width: 0; flex: 1; }
.event-row-copy strong, .event-row-copy small { overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; }
.event-row-copy strong { font-size: 12px; }
.event-row-copy small { color: var(--muted); font-size: 10px; }
.event-row-meta { text-align: left; }
.event-row-meta small { display: block; color: var(--muted); font-size: 10px; }
.status-badge, .type-badge, .pending-badge { display: inline-flex; align-items: center; white-space: nowrap; border-radius: 999px; font-size: 10px; font-weight: 800; }
.status-badge { padding: 3px 8px; }
.status-badge.pending { color: var(--warning); background: var(--warning-soft); }
.status-badge.complete { color: var(--success); background: var(--success-soft); }
.status-badge.draft { color: var(--muted); background: var(--surface-soft); }
.empty-list, .empty-state { display: grid; place-items: center; min-height: 126px; padding: 20px; color: var(--muted); border: 1px dashed var(--border-dark); border-radius: 12px; background: var(--surface-soft); text-align: center; }
.empty-list span, .empty-state span { display: block; margin-bottom: 4px; color: var(--gold-600); font-size: 26px; }
.empty-list p, .empty-state p { margin: 0; font-size: 12px; }

.action-panel { display: flex; flex-direction: column; }
.workflow-list { display: grid; gap: 15px; margin: 0 0 20px; padding: 0; list-style: none; }
.workflow-list li { position: relative; display: flex; gap: 10px; align-items: flex-start; color: var(--muted); }
.workflow-list li:not(:last-child)::after { position: absolute; top: 31px; right: 13px; width: 1px; height: 17px; content: ""; background: var(--border-dark); }
.workflow-list > li > span { width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--border-dark); border-radius: 50%; background: var(--surface); font-family: Arial, sans-serif; font-size: 11px; font-weight: 700; }
.workflow-list li.is-current { color: var(--brand-700); }
.workflow-list li.is-current > span { color: #fff; border-color: var(--brand-700); background: var(--brand-700); }
.workflow-list strong, .workflow-list small { display: block; }
.workflow-list strong { font-size: 12px; }
.workflow-list small { color: var(--muted); font-size: 10px; }
.action-panel .full-width { margin-top: auto; }

.view-intro { margin-bottom: 22px; }
.view-intro h2 { margin: 2px 0 3px; font-size: 24px; letter-spacing: -.7px; }
.view-intro p { margin: 0; color: var(--muted); font-size: 13px; }
.inline-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.progress-steps { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 700; }
.progress-steps span { padding: 7px 10px; border-radius: 999px; background: var(--surface-soft); }
.progress-steps span.is-active { color: var(--brand-700); background: var(--brand-soft); }
.progress-steps i { width: 22px; height: 1px; background: var(--border-dark); }

#quick-entryView > .view-intro { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(110deg, #fff, var(--surface-soft)); box-shadow: var(--shadow-xs); }
.entry-intro-side { display: grid; justify-items: end; gap: 7px; }
.required-note { color: var(--muted); font-size: 10px; font-weight: 700; }
.required-note b { color: var(--danger); font-size: 13px; }

.entry-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 18px; }
.form-stack { display: grid; gap: 16px; }
.form-sidebar { position: sticky; top: 98px; display: grid; gap: 16px; }
.form-card { padding: 23px; }
.form-section-title { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 20px; }
.form-section-title > span { width: 31px; height: 31px; flex: 0 0 31px; display: grid; place-items: center; color: var(--brand-700); border-radius: 10px; background: var(--brand-soft); font-family: Arial, sans-serif; font-size: 12px; font-weight: 800; }
.form-section-title h3 { margin: 0; font-size: 15px; letter-spacing: -.2px; }
.form-section-title p { margin: 1px 0 0; color: var(--muted); font-size: 11px; }
.form-section-title h3 em { margin-right: 6px; }
.compact-title { margin-bottom: 15px; }
.entry-help-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; padding: 8px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255, 255, 255, .72); }
.entry-help-item { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 10px; color: var(--muted); }
.entry-help-item > span { width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--border-dark); border-radius: 50%; background: var(--surface); font-family: Arial, sans-serif; font-size: 10px; font-weight: 800; }
.entry-help-item strong, .entry-help-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-help-item strong { color: var(--text); font-size: 11px; }
.entry-help-item small { color: var(--muted); font-size: 9px; }
.entry-help-item.is-current { color: var(--brand-700); background: var(--brand-soft); }
.entry-help-item.is-current > span { color: #fff; border-color: var(--brand-700); background: var(--brand-700); box-shadow: 0 3px 8px var(--brand-glow); }
.entry-help-item.is-optional > span { color: var(--gold-700); border-color: #edd8a6; background: #fffaf0; }
.form-card--date, .form-card--location, .form-card--details { position: relative; overflow: hidden; }
.form-card--date::before, .form-card--location::before, .form-card--details::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; content: ""; background: linear-gradient(90deg, transparent, var(--brand-500), transparent); opacity: .68; }
.form-card--location { border-color: var(--border); box-shadow: 0 8px 22px rgba(15, 23, 42, .05); }
.section-badge, .optional-tag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-style: normal; font-size: 9px; font-weight: 800; line-height: 1.6; vertical-align: 2px; }
.section-badge { color: var(--brand-700); background: var(--brand-soft); }
.optional-tag { color: var(--gold-700); background: #fff6df; }
.location-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: -2px 0 17px 42px; color: var(--brand-700); font-size: 10px; font-weight: 800; }
.location-flow span { padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--brand-soft); }
.location-flow i { color: var(--gold-700); font-style: normal; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.form-grid.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.location-entry-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.location-add-callout { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; margin-top: 16px; padding: 12px 13px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(110deg, var(--surface-soft), #fffaf0); }
.location-add-icon { width: 31px; height: 31px; display: grid; place-items: center; color: var(--brand-700); border-radius: 9px; background: var(--brand-soft); font-size: 18px; font-weight: 700; }
.location-add-callout strong, .location-add-callout small { display: block; }
.location-add-callout strong { color: var(--brand-900); font-size: 11px; }
.location-add-callout small { margin-top: 1px; color: var(--muted); font-size: 10px; }
.location-add-callout .secondary-button { min-height: 34px; padding-inline: 11px; font-size: 10px; white-space: nowrap; }
.full-span { grid-column: 1 / -1; }
.field { min-width: 0; display: block; }
.field > span, .choice-field legend, .assessment-field legend { display: block; margin: 0 0 6px; color: var(--text); font-size: 12px; font-weight: 800; }
.field b, .choice-field b, .assessment-field b { color: var(--danger); }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--border-dark); border-radius: 9px; background: #fff; transition: .18s ease; }
.field input, .field select { height: 40px; padding: 0 11px; }
.date-picker-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 7px; }
.date-picker-row .icon-button { width: 40px; height: 40px; color: var(--brand-700); border: 1px solid var(--border-dark); border-radius: 9px; background: var(--brand-soft); }
.field textarea { min-height: 95px; padding: 10px 11px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #94a3b8; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand-500); outline: 2px solid var(--brand-glow); }
.field:focus-within > span, .choice-field:focus-within legend { color: var(--brand-700); }
.field select:disabled { color: var(--muted-light); background: var(--surface-soft); }
.field small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.field .field-guidance { min-height: 15px; line-height: 1.45; }
.field textarea + small { text-align: left; }
.add-location-button { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; padding: 2px 0; color: var(--brand-700); font-size: 10px; }
.add-location-button:hover { color: var(--brand-900); }
.venue-field { grid-column: span 2; }
.location-entry-grid .venue-field { grid-column: auto; }
.map-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; margin-top: 14px; padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.map-picker strong, .map-picker small { display: block; }
.map-picker strong { color: var(--brand-900); font-size: 12px; }
.map-picker small, .map-coordinates { color: var(--muted); font-size: 10px; }
.map-picker-canvas { grid-column: 1 / -1; width: 100%; height: 290px; border: 1px solid var(--border-dark); border-radius: 10px; overflow: hidden; }
.map-coordinates { grid-column: 1 / -1; padding: 6px 8px; border-radius: 7px; background: var(--brand-soft); direction: ltr; text-align: right; }
.choice-field, .assessment-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.segmented { display: flex; min-height: 40px; padding: 3px; border: 1px solid var(--border-dark); border-radius: 9px; background: var(--surface-soft); }
.segmented label { position: relative; flex: 1; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: grid; height: 32px; place-items: center; color: var(--muted); border-radius: 6px; font-size: 12px; font-weight: 800; transition: .16s ease; }
.segmented input:checked + span { color: var(--brand-800); background: #fff; box-shadow: var(--shadow-xs); }

.upload-card { padding-bottom: 18px; }
.dropzone { min-height: 176px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 16px; color: var(--muted); border: 1.5px dashed var(--border-dark); border-radius: 12px; background: linear-gradient(145deg, var(--surface), var(--surface-soft)); text-align: center; transition: .18s ease; }
.dropzone:hover, .dropzone.is-dragging { color: var(--brand-700); border-color: var(--brand-500); background: var(--brand-soft); }
.dropzone-icon { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 2px; color: var(--brand-700); border-radius: 12px; background: var(--brand-soft-strong); font-size: 22px; }
.dropzone strong { font-size: 12px; }
.dropzone small, .upload-note { color: var(--muted); font-size: 10px; }
.photo-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px; }
.photo-preview { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 9px; background: var(--gold-100); }
.photo-preview img { width: 100%; height: 100%; object-fit: contain; background: var(--surface-soft); }
.photo-preview button { position: absolute; top: 4px; left: 4px; width: 21px; height: 21px; display: grid; place-items: center; padding: 0; color: #fff; border: 0; border-radius: 50%; background: rgba(40, 41, 40, .67); font-size: 16px; line-height: 1; }
.upload-note { display: block; margin-top: 10px; line-height: 1.45; }
.save-card { display: grid; gap: 9px; padding: 17px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(145deg, var(--brand-soft), #fff); box-shadow: 0 8px 20px var(--brand-glow); }
.save-card-heading { display: flex; align-items: center; gap: 9px; padding-bottom: 3px; }
.save-card-heading > span { width: 29px; height: 29px; flex: 0 0 29px; display: grid; place-items: center; color: #fff; border-radius: 9px; background: var(--brand-700); font-family: Arial, sans-serif; font-size: 12px; font-weight: 800; }
.save-card-heading strong, .save-card-heading small { display: block; }
.save-card-heading strong { color: var(--brand-900); font-size: 12px; }
.save-card-heading small { margin-top: -1px; color: var(--muted); font-size: 9px; }
.save-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--border); }
.save-summary span { color: var(--muted); font-size: 10px; }
.save-summary strong { color: var(--warning); font-size: 11px; }
.save-card-note { margin: -1px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; text-align: center; }

.filter-panel { display: grid; grid-template-columns: minmax(180px, 1.5fr) repeat(3, minmax(120px, .65fr)) auto auto; align-items: end; gap: 10px; padding: 13px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-xs); }
.filter-panel > label { min-width: 0; }
.filter-panel label > span { display: block; margin: 0 0 4px; color: var(--muted); font-size: 10px; font-weight: 700; }
.filter-panel input, .filter-panel select { width: 100%; height: 37px; padding: 0 9px; border: 1px solid var(--border-dark); border-radius: 8px; background: #fff; font-size: 12px; }
.filter-search { position: relative; }
.filter-search > span { position: absolute; z-index: 1; top: 8px; right: 10px; color: var(--muted); font-size: 18px !important; line-height: 1; }
.filter-search input { padding-right: 31px; }
.view-switch { display: flex; height: 37px; overflow: hidden; border: 1px solid var(--border-dark); border-radius: 8px; }
.view-switch button { width: 34px; color: var(--muted); border: 0; border-right: 1px solid var(--border-dark); background: #fff; font-size: 17px; }
.view-switch button:last-child { border-right: 0; }
.view-switch button.is-active { color: var(--brand-700); background: var(--brand-soft); }
.event-results-meta { display: flex; align-items: center; justify-content: space-between; padding: 13px 2px 10px; color: var(--muted); font-size: 11px; }
.event-results-meta span:first-child { color: var(--text); font-weight: 800; }
.event-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.event-card { overflow: hidden; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-xs); transition: .18s ease; }
.event-card:hover { border-color: var(--brand-500); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.event-card-cover { position: relative; height: 120px; display: flex; align-items: flex-start; justify-content: space-between; padding: 11px; color: var(--gold-700); background: linear-gradient(140deg, #f4ead0, #eef2f7); }
.event-card-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--surface-soft); }
.event-card-cover::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(15, 23, 42, .12), transparent 50%); }
body.program-mawlid .event-card-cover { background: linear-gradient(140deg, #f4ead0, #eef7f2); }
body.program-mawlid .event-card-cover::after { background: linear-gradient(180deg, rgba(3, 51, 42, .12), transparent 50%); }
.event-card-cover > * { position: relative; z-index: 1; }
.event-card-cover .cover-symbol { margin: auto; font-size: 37px; opacity: .6; }
.type-badge { padding: 3px 8px; color: var(--brand-700); background: rgba(255, 255, 255, .88); }
.event-card-body { padding: 13px 14px 14px; }
.event-card-title { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.event-card-title h3 { min-width: 0; margin: 0; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.event-card-location { min-height: 35px; margin: 4px 0 10px; color: var(--muted); font-size: 10px; }
.event-card-info { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 9px 0; border-top: 1px solid var(--border); }
.event-card-info span { color: var(--muted); font-size: 10px; }
.event-card-info strong { display: block; color: var(--text); font-size: 10px; }
.event-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 10px; }
.card-actions { display: flex; gap: 4px; }
.card-action { min-height: 29px; padding: 0 8px; color: var(--brand-700); border: 1px solid var(--border); border-radius: 7px; background: #fff; font-size: 10px; font-weight: 800; }
.card-action:hover { color: #fff; border-color: var(--brand-700); background: var(--brand-700); }
.table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.events-table { width: 100%; min-width: 800px; border-collapse: collapse; text-align: right; }
.events-table th { padding: 11px 13px; color: var(--muted); border-bottom: 1px solid var(--border); background: var(--surface-soft); font-size: 10px; font-weight: 800; white-space: nowrap; }
.events-table td { padding: 11px 13px; border-bottom: 1px solid var(--border); font-size: 11px; vertical-align: middle; }
.events-table tbody tr:last-child td { border-bottom: 0; }
.events-table tbody tr:hover { background: var(--surface-soft); }
.events-group-row td { padding: 0 !important; }
.events-group-row > td > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.events-group-row strong, .events-group-row span { display: block; }
.events-group-row span { white-space: nowrap; font-weight: 800; }
.events-governorate-group td { color: #fff !important; background: var(--brand-900) !important; border-bottom: 2px solid var(--gold-500) !important; }
.events-governorate-group > td > div { padding: 12px 16px; }
.events-governorate-group strong { font-size: 14px; font-weight: 900; }
.events-governorate-group span { padding: 3px 9px; color: #f7dfa2; border: 1px solid rgba(247, 223, 162, .28); border-radius: 999px; background: rgba(247, 223, 162, .09); font-size: 10px; }
.events-date-group td { color: var(--brand-900) !important; background: var(--brand-soft) !important; border-bottom: 1px solid var(--border) !important; }
.events-date-group > td > div { padding: 9px 16px; }
.events-date-group strong { font-size: 11px; font-weight: 900; }
.events-date-group span { color: var(--brand-700); font-size: 9px; }
.table-event { display: flex; gap: 8px; align-items: center; }
.table-photo { width: 30px; height: 30px; display: grid; place-items: center; overflow: hidden; border-radius: 7px; background: var(--gold-100); }
.table-photo img { width: 100%; height: 100%; object-fit: contain; background: var(--surface-soft); }
.table-event strong, .table-event small { display: block; }
.table-event strong { font-size: 11px; }
.table-event small { color: var(--muted); font-size: 9px; }
.full-events-table-wrap { overflow-x: auto; }
.event-summary-row td { border-bottom: 0; }
.event-details-row td { padding: 0 13px 15px; background: var(--surface); }
.event-details-row:hover { background: transparent !important; }
.event-details-grid { display: grid; grid-template-columns: repeat(5, minmax(125px, 1fr)); gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.event-detail-item { min-width: 0; padding: 8px 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.event-detail-item span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 9px; font-weight: 700; }
.event-detail-item strong { display: block; color: var(--text); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.event-detail-item.location-primary { border-color: var(--brand-600); background: var(--brand-700); }
.event-detail-item.location-primary span, .event-detail-item.location-primary strong { color: #fff; }
.event-detail-item.location-secondary { border-color: var(--brand-soft-strong); background: var(--brand-soft); }
.event-detail-item.location-secondary strong { color: var(--brand-800); font-size: 12px; }
.event-detail-item.wide { grid-column: span 2; }
.inline-edit-panel { overflow: hidden; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); }
.inline-edit-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; color: var(--brand-900); border-bottom: 1px solid var(--border); background: linear-gradient(90deg, var(--brand-soft), var(--surface-soft)); }
.inline-edit-heading strong, .inline-edit-heading small { display: block; }
.inline-edit-heading strong { font-size: 11px; }
.inline-edit-heading small { color: var(--muted); font-size: 9px; }
.inline-save-state { padding: 3px 8px; color: var(--brand-700); border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: 9px; font-weight: 800; white-space: nowrap; }
.inline-details-grid { border: 0; border-radius: 0; background: transparent; }
.event-detail-item.inline-detail { display: block; }
.inline-detail input, .inline-detail select, .inline-detail textarea { width: 100%; min-height: 34px; padding: 6px 8px; color: var(--text); border: 1px solid var(--border-dark); border-radius: 7px; background: var(--surface); font-size: 10px; font-weight: 700; }
.inline-detail textarea { min-height: 58px; resize: vertical; line-height: 1.55; }
.inline-detail input:focus, .inline-detail select:focus, .inline-detail textarea:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-glow); outline: 0; }
.inline-detail.location-primary select, .inline-detail.location-secondary select { color: var(--brand-900); background: #fff; }
.inline-detail.location-primary select:disabled { opacity: 1; cursor: not-allowed; }
.readonly-detail { display: flex; flex-direction: column; justify-content: center; }
.readonly-detail strong { color: var(--brand-700); }
.full-detail-width { grid-column: 1 / -1; }
.inline-edit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 3px; }
.inline-edit-actions .primary-button, .inline-edit-actions .secondary-button { min-height: 34px; padding: 0 12px; font-size: 10px; }
.inline-edit-actions small { color: var(--muted); font-size: 9px; }
.table-row-actions { display: flex; flex-wrap: wrap; gap: 5px; min-width: 150px; }
.long-table-wrap { max-width: 100%; overflow: auto; direction: rtl; }
.events-long-table { width: 100%; min-width: 1660px; border-collapse: separate; border-spacing: 0; text-align: center; }
.events-long-table th { position: sticky; top: 0; z-index: 3; height: 44px; padding: 9px 11px; color: #fff; border-left: 1px solid rgba(255,255,255,.14); border-bottom: 2px solid var(--gold-500); background: var(--brand-800); font-size: 10px; font-weight: 900; white-space: nowrap; }
.events-long-table th small { color: rgba(226, 232, 240, .75); font-size: 8px; font-weight: 600; }
.events-long-table td { min-width: 105px; max-width: 220px; padding: 10px 11px; color: var(--text); border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); font-size: 10.5px; line-height: 1.55; vertical-align: middle; white-space: normal; overflow-wrap: anywhere; }
.events-long-table tbody tr:nth-child(even) td { background: var(--surface-soft); }
.events-long-table tbody tr:hover td { background: var(--brand-soft); }
.events-long-table th:nth-child(1), .events-long-table td:nth-child(1) { width: 68px; min-width: 68px; max-width: 68px; position: sticky; right: 0; z-index: 4; }
.events-long-table th:nth-child(2), .events-long-table td:nth-child(2) { width: 190px; min-width: 190px; max-width: 190px; position: sticky; right: 68px; z-index: 4; }
.events-long-table th:nth-child(1), .events-long-table th:nth-child(2) { z-index: 6; background: var(--brand-900); }
.events-long-table td:nth-child(1), .events-long-table td:nth-child(2) { box-shadow: -1px 0 0 var(--border); }
.events-long-table .events-group-row td { width: auto !important; min-width: 0 !important; max-width: none !important; position: static !important; right: auto !important; z-index: 2; box-shadow: none !important; text-align: right; }
.events-long-table .events-group-row:hover td { background: inherit !important; }
.events-long-table .events-governorate-group:hover td { background: var(--brand-900) !important; }
.events-long-table .events-date-group:hover td { background: var(--brand-soft) !important; }
.events-long-table .long-serial { color: var(--gold-700); }
.events-long-table .long-event { text-align: right; }
.events-long-table .long-date { min-width: 160px; color: #49370a; background: var(--gold-100) !important; }
.events-long-table .long-date strong, .events-long-table .long-date small, .events-long-table .long-location strong, .events-long-table .long-location span, .events-long-table .long-location small, .events-long-table .long-venue strong, .events-long-table .long-venue small, .events-long-table .long-media strong, .events-long-table .long-media small { display: block; }
.events-long-table .long-date strong { font-size: 11px; }
.events-long-table .long-date small { margin-top: 3px; color: #7e682c; font-size: 9px; }
.events-long-table .long-location { min-width: 200px; color: #fff; background: var(--brand-700) !important; }
.events-long-table .long-location strong { font-size: 12px; font-weight: 900; }
.events-long-table .long-location span { margin-top: 3px; color: #f5dfaa; font-weight: 800; }
.events-long-table .long-location small { margin-top: 2px; color: rgba(226, 232, 240, .82); }
.events-long-table .long-venue { min-width: 165px; text-align: right; }
.events-long-table .long-venue small { margin-top: 3px; color: var(--brand-700); font-weight: 800; }
.events-long-table .long-kind { min-width: 115px; }
.events-long-table .long-kind strong { display: block; margin-bottom: 6px; }
.events-long-table .long-eval-group { min-width: 190px; text-align: right; }
.events-long-table .long-eval-group span { display: block; padding: 2px 0; color: var(--muted); font-size: 9px; }
.events-long-table .long-eval-group b { color: var(--text); }
.events-long-table .long-overall { min-width: 120px; color: #fff; background: var(--brand-800) !important; font-size: 12px; }
.events-long-table .long-notes { min-width: 240px; max-width: 300px; text-align: right; }
.events-long-table .long-notes strong { color: var(--brand-700); font-size: 9px; }
.events-long-table .long-media { min-width: 115px; }
.events-long-table .long-media small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.long-table-actions { display: flex; min-width: 170px; flex-wrap: wrap; justify-content: center; gap: 5px; }

.pending-badge { padding: 6px 10px; color: var(--warning); background: var(--warning-soft); }
.evaluation-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); align-items: start; gap: 18px; }
.evaluation-queue { position: sticky; top: 18px; padding: 13px; }
.queue-header { display: flex; align-items: center; justify-content: space-between; padding: 3px 4px 12px; }
.queue-header h3 { margin: 0; font-size: 13px; }
.queue-header span { min-width: 22px; padding: 1px 6px; color: var(--warning); border-radius: 999px; background: var(--warning-soft); text-align: center; font-size: 11px; font-weight: 800; }
.queue-list { display: grid; gap: 7px; }
.queue-item { width: 100%; display: flex; gap: 9px; align-items: center; padding: 9px; color: var(--text); border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); text-align: right; transition: .16s ease; }
.queue-item:hover, .queue-item.is-selected { border-color: var(--brand-500); background: var(--brand-soft); }
.queue-item-photo { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; overflow: hidden; color: var(--gold-700); border-radius: 8px; background: var(--gold-100); }
.queue-item-photo img { width: 100%; height: 100%; object-fit: contain; background: var(--surface-soft); }
.queue-item strong, .queue-item small { min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-item strong { font-size: 11px; }
.queue-item small { color: var(--muted); font-size: 9px; }
.evaluation-form { min-width: 0; }
.evaluation-empty { min-height: 390px; display: grid; place-items: center; align-content: center; padding: 30px; color: var(--muted); border: 1px dashed var(--border-dark); border-radius: var(--radius); background: var(--surface); text-align: center; }
.evaluation-empty > span { width: 55px; height: 55px; display: grid; place-items: center; margin-bottom: 9px; color: var(--brand-600); border-radius: 17px; background: var(--brand-soft); font-size: 25px; }
.evaluation-empty h3 { margin: 0 0 3px; color: var(--text); font-size: 15px; }
.evaluation-empty p { max-width: 260px; margin: 0; font-size: 11px; }
.selected-event-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 13px; background: var(--brand-soft); }
.selected-event-summary strong, .selected-event-summary small { display: block; }
.selected-event-summary strong { color: var(--brand-900); font-size: 13px; }
.selected-event-summary small { color: var(--muted); font-size: 10px; }
.selected-event-summary > span { padding: 4px 8px; color: var(--warning); border-radius: 999px; background: #fff5dd; font-size: 10px; font-weight: 800; }
.evaluation-form #evaluationContent { display: grid; gap: 15px; }
.assessment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.assessment-field:first-child { grid-column: 1 / -1; }
.pill-options { display: flex; flex-wrap: wrap; gap: 7px; }
.pill-options button { min-height: 31px; padding: 0 10px; color: var(--muted); border: 1px solid var(--border-dark); border-radius: 999px; background: #fff; font-size: 11px; font-weight: 700; transition: .15s ease; }
.pill-options button:hover { color: var(--brand-700); border-color: var(--brand-500); }
.pill-options button.is-selected { color: #fff; border-color: var(--brand-700); background: var(--brand-700); box-shadow: 0 3px 8px var(--brand-glow); }
.evaluation-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.evaluation-actions span { color: var(--muted); font-size: 11px; }
.evaluation-actions span.is-ready { color: var(--success); font-weight: 700; }

.reports-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .9fr); align-items: stretch; gap: 18px; }
.report-options h3 { margin: 0 0 17px; font-size: 16px; }
.report-check { display: flex; gap: 8px; align-items: center; margin-top: 15px; color: var(--text); font-size: 11px; font-weight: 700; }
.report-check input { width: 16px; height: 16px; accent-color: var(--brand-700); }
.report-summary { display: flex; align-items: baseline; gap: 7px; margin-top: 18px; padding: 12px; border-radius: 10px; background: var(--surface-soft); }
.report-summary span, .report-summary small { color: var(--muted); font-size: 10px; }
.report-summary strong { color: var(--brand-700); font-size: 14px; }
.export-options { display: grid; gap: 11px; }
.export-card { min-height: 101px; width: 100%; display: flex; align-items: center; gap: 13px; padding: 14px 16px; color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-align: right; box-shadow: var(--shadow-xs); transition: .18s ease; }
.export-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.export-card > div { flex: 1; }
.export-card strong, .export-card small { display: block; }
.export-card strong { font-size: 14px; }
.export-card small { margin-top: 1px; color: var(--muted); font-size: 10px; }
.export-card > i { color: var(--muted); font-size: 18px; font-style: normal; }
.export-icon { width: 43px; height: 43px; flex: 0 0 43px; display: grid; place-items: center; border-radius: 12px; font-family: Arial, sans-serif; font-size: 14px; font-weight: 800; }
.export-card.excel .export-icon { color: #1d4ed8; background: #e8f0ff; }
.export-card.pdf .export-icon { color: #ba4646; background: #fcebec; font-size: 10px; }
.export-card.backup .export-icon { color: var(--brand-700); background: var(--brand-soft); font-size: 24px; }
.report-note { display: flex; gap: 9px; align-items: flex-start; margin-top: 17px; padding: 11px 13px; color: var(--muted); border: 1px solid var(--border); border-radius: 11px; background: var(--surface-soft); }
.report-note > span { color: var(--brand-600); font-size: 15px; }
.report-note p { margin: 0; font-size: 11px; }

.settings-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.settings-layout > .backup-card, .settings-layout > .accounts-card { grid-column: 1 / -1; }
.settings-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.settings-nav { position: sticky; top: 16px; display: grid; gap: 7px; padding: 9px; border: 1px solid #d8e1e8; border-radius: 15px; background: #f8fafc; box-shadow: 0 8px 24px rgba(24, 48, 75, .05); }
.settings-nav-item { width: 100%; display: grid; grid-template-columns: 27px 1fr; column-gap: 8px; padding: 10px; color: #405267; border: 1px solid transparent; border-radius: 10px; background: transparent; text-align: right; }
.settings-nav-item > span { grid-row: span 2; display: grid; place-items: center; width: 25px; height: 25px; color: #315b80; border-radius: 7px; background: #e7eef5; font-size: 13px; }
.settings-nav-item b { font-size: 11px; }.settings-nav-item small { margin-top: 2px; color: #77889a; font-size: 9px; }
.settings-nav-item:hover { background: #eff4f8; }.settings-nav-item.is-active { color: #fff; border-color: #173d5b; background: #173d5b; box-shadow: 0 4px 12px rgba(23, 61, 91, .2); }.settings-nav-item.is-active > span { color: #173d5b; background: #fff; }.settings-nav-item.is-active small { color: #c9d9e7; }
.settings-workspace { min-width: 0; }.settings-area-header { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 13px; padding: 16px 18px; color: #fff; border-radius: 14px; background: linear-gradient(135deg, #102f49, #275a7e); box-shadow: 0 7px 20px rgba(21, 57, 87, .16); }.settings-area-header .settings-symbol { color: #173d5b; background: #fff; }.settings-area-header h3 { margin: 0; font-size: 16px; }.settings-area-header p { margin: 3px 0 0; color: #d7e6f0; font-size: 10px; }
.settings-access-note { padding: 14px 16px; color: #765b1e; border: 1px solid #eddca7; border-radius: 12px; background: #fffaf0; font-size: 11px; font-weight: 700; }
.settings-summary-card { display: flex; flex-direction: column; }.settings-summary-card .secondary-button { align-self: flex-start; }
.settings-tabs { display: flex; gap: 8px; margin: 0 0 18px; padding: 6px; overflow-x: auto; border: 1px solid #d8e5ef; border-radius: 13px; background: #f3f7fb; scrollbar-width: thin; }
.settings-tab { flex: 1 0 max-content; min-height: 38px; padding: 0 14px; color: #466176; border: 1px solid transparent; border-radius: 9px; background: transparent; font-size: 11px; font-weight: 800; white-space: nowrap; transition: .18s ease; }
.settings-tab:hover { color: #173d5b; background: #e4eef6; }.settings-tab.is-active { color: #fff; border-color: #1d4f73; background: linear-gradient(135deg, #163d5b, #2d6b96); box-shadow: 0 4px 10px rgba(23, 61, 91, .18); }
.settings-panel-content { min-height: 260px; padding: 18px; border: 1px solid #dbe5ee; border-radius: 14px; background: linear-gradient(145deg, #fff, #f8fbfe); }
.inline-manager-heading, .inline-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.inline-manager-heading h3 { margin: 0; color: #173d5b; font-size: 14px; }.inline-manager-heading p, .inline-panel-heading small { display: block; margin: 3px 0 0; color: #718294; font-size: 10px; }
.inline-manager-heading > span { padding: 4px 8px; color: #265b80; border-radius: 999px; background: #e7f0f7; font-size: 10px; font-weight: 800; white-space: nowrap; }
.manager-status { padding: 4px 8px; color: #547087; border-radius: 999px; background: #eaf0f5; font-size: 9px; font-weight: 800; }.manager-actions { display: flex; flex-wrap: wrap; gap: 5px; }.manager-actions button:first-child { color: var(--brand-700); border-color: #cbdcf0; }
.permissions-inline-layout { min-width: 0; }.permissions-roles-panel, .permissions-editor-panel { min-width: 0; }
.inline-panel-heading strong { color: #173d5b; font-size: 13px; }.inline-panel-heading .compact { min-height: 32px; }
.create-role-form { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 9px; align-items: end; margin: 0 0 14px; padding: 12px; border: 1px solid #cfdeea; border-radius: 11px; background: #f4f8fc; }
.create-role-form .field { gap: 4px; }.create-role-form .field span { font-size: 9px; }.create-role-form .field input, .create-role-form .field select { min-height: 35px; }.create-role-form .primary-button { min-height: 35px; }
.roles-layout { display: grid; grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr); gap: 18px; }.roles-list { display: grid; gap: 8px; }.role-list-item { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 11px; border: 1px solid #d8e1e8; border-radius: 10px; background: #f8fafc; }.role-list-item strong, .role-list-item small { display: block; }.role-list-item strong { color: #173d5b; font-size: 12px; }.role-list-item small { margin-top: 3px; color: #77889a; font-size: 9px; }.role-list-item button { padding: 6px 8px; color: #1a557d; border: 1px solid #b9cfdf; border-radius: 7px; background: #fff; font-size: 10px; font-weight: 800; }.role-editor { display: flex; flex-direction: column; min-height: 230px; padding: 14px; border: 1px solid #d8e1e8; border-radius: 12px; background: #fbfcfe; }
.role-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; margin-bottom: 12px; }.role-editor-head h3 { margin: 0; color: #173d5b; font-size: 14px; }.role-editor-head p { margin: 3px 0 0; color: #718294; font-size: 10px; }.role-editor-head .role-save { flex: 0 0 auto; min-height: 34px; padding: 0 14px; font-size: 11px; }.role-editor-body { min-width: 0; }.permission-group { margin-top: 8px; overflow: hidden; border: 1px solid #d8e1e8; border-radius: 9px; }.permission-group-toggle { width: 100%; display: flex; justify-content: space-between; gap: 8px; padding: 9px 10px; color: #24445f; background: #f0f5f9; font-size: 11px; font-weight: 800; text-align: right; }.permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 8px; }.permission-toggle { padding: 9px; border: 1px solid #d8e1e8; border-radius: 8px; background: #fff; }.permission-toggle.is-enabled { border-color: #6da4c6; background: #edf7fc; }.permission-toggle strong, .permission-toggle small { display: block; }.permission-toggle strong { color: #24445f; font-size: 10px; }.permission-toggle small { margin: 3px 0 7px; color: #7c8c9c; font-size: 8px; line-height: 1.35; }.permission-toggle button { padding: 4px 7px; color: #fff; border-radius: 5px; background: #346f96; font-size: 9px; font-weight: 800; }.permission-toggle:not(.is-enabled) button { color: #52708a; background: #edf2f6; }.role-save-bar { position: sticky; bottom: 0; z-index: 3; display: flex; justify-content: flex-start; margin-top: 12px; padding: 10px 0 2px; background: linear-gradient(180deg, rgba(251, 252, 254, 0), #fbfcfe 28%); }.role-save { margin-top: 0; min-height: 38px; padding: 0 16px; }
.settings-heading { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; }
.settings-symbol { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; color: var(--brand-700); border-radius: 10px; background: var(--brand-soft); font-size: 17px; }
.settings-heading h3 { margin: 0; font-size: 15px; }
.settings-heading p { margin: 1px 0 0; color: var(--muted); font-size: 10px; }
.settings-save { display: flex; align-items: center; gap: 12px; }
.settings-save span { color: var(--muted); font-size: 10px; }
.account-scope-summary { padding: 13px 14px; border: 1px solid var(--border); border-radius: 11px; background: var(--brand-soft); }
.account-scope-summary span, .account-scope-summary strong, .account-scope-summary small { display: block; }
.account-scope-summary span { color: var(--muted); font-size: 10px; }
.account-scope-summary strong { color: var(--brand-900); font-size: 14px; }
.account-scope-summary small { color: var(--brand-600); font-size: 10px; }
.account-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.accounts-list { display: grid; gap: 8px; margin-top: 16px; }
.account-row { display: grid; grid-template-columns: 38px minmax(180px, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-soft); }
.account-row.is-disabled { opacity: .62; }
.account-row .user-avatar { color: var(--brand-800); background: var(--brand-soft); }
.account-row-info strong, .account-row-info span { display: block; }
.account-row-info strong { font-size: 12px; }
.account-row-info span { color: var(--muted); font-size: 9px; }
.account-status { padding: 3px 8px; color: var(--success); border-radius: 999px; background: var(--success-soft); font-size: 9px; font-weight: 800; }
.account-row.is-disabled .account-status { color: var(--danger); background: var(--danger-soft); }
.account-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.account-actions button { padding: 5px 7px; color: var(--brand-700); border: 1px solid var(--border-dark); border-radius: 7px; background: #fff; font-size: 9px; font-weight: 700; }
.account-actions button.danger { color: var(--danger); }
.manageable-list { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid var(--border); }
.manageable-list:first-of-type { border-top: 0; }
.manageable-list strong, .manageable-list span { display: block; }
.manageable-list strong { font-size: 12px; }
.manageable-list span { color: var(--muted); font-size: 10px; }
.manageable-list .secondary-button { min-height: 32px; flex: 0 0 auto; padding: 0 10px; font-size: 10px; }
.backup-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 17px; overflow: hidden; border: 1px solid var(--border); border-radius: 11px; }
.backup-info-grid div { padding: 11px; border-left: 1px solid var(--border); }
.backup-info-grid div:last-child { border-left: 0; }
.backup-info-grid span, .backup-info-grid strong { display: block; }
.backup-info-grid span { color: var(--muted); font-size: 10px; }
.backup-info-grid strong { margin-top: 2px; color: var(--brand-900); font-size: 12px; }
.backup-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.backup-actions .primary-button, .backup-actions .secondary-button { min-height: 36px; padding: 0 12px; font-size: 11px; }
.upload-button { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.backup-list { display: grid; gap: 7px; margin-top: 16px; }
.backup-list-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-soft); }
.backup-list-item strong, .backup-list-item small { display: block; }
.backup-list-item strong { font-size: 11px; }
.backup-list-item small { color: var(--muted); font-size: 9px; }
.backup-list-item button { padding: 4px 8px; color: var(--brand-700); border: 1px solid var(--border-dark); border-radius: 6px; background: #fff; font-size: 10px; font-weight: 700; }
.backup-list-item button:hover { color: #fff; border-color: var(--brand-700); background: var(--brand-700); }
.backup-item-actions { display: flex; flex-wrap: wrap; gap: 6px; }.backup-item-actions a { padding: 4px 8px; color: var(--brand-700); border: 1px solid var(--border-dark); border-radius: 6px; background: #fff; font-size: 10px; font-weight: 700; text-decoration: none; }

.modal-backdrop { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(5, 33, 28, .48); backdrop-filter: blur(3px); }
.modal { width: min(620px, 100%); max-height: min(720px, 94vh); display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 28px 80px rgba(15, 23, 42, .35); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 19px 20px 15px; border-bottom: 1px solid var(--border); }
.modal-header h2 { margin: 2px 0 0; font-size: 17px; }
.modal-content { overflow: auto; padding: 20px; }
.manager-list { display: grid; gap: 9px; }
.manager-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
.manager-item strong, .manager-item small { display: block; }
.manager-item strong { font-size: 12px; }
.manager-item small { color: var(--muted); font-size: 10px; }
.manager-item button { padding: 5px 9px; color: var(--danger); border: 1px solid #f2d5d5; border-radius: 7px; background: #fff; font-size: 10px; font-weight: 700; }
.manager-add { display: flex; gap: 8px; margin-top: 13px; }
.manager-add input { min-width: 0; flex: 1; height: 37px; padding: 0 10px; border: 1px solid var(--border-dark); border-radius: 8px; }
.manager-add button { min-height: 37px; }
.location-tree { display: grid; gap: 10px; }
.location-governorate { padding: 10px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-soft); }
.location-governorate > strong { display: block; margin-bottom: 6px; color: var(--brand-800); font-size: 12px; }
.location-tree ul { margin: 0; padding: 0 18px 0 0; color: var(--muted); font-size: 10px; }
.location-tree li { margin: 3px 0; }
.location-manager { display: grid; gap: 14px; }
.location-manager-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid #cbdcf6; border-radius: 12px; background: #f3f7ff; }
.location-manager-note > span { width: 31px; height: 31px; flex: 0 0 31px; display: grid; place-items: center; color: var(--brand-700); border-radius: 9px; background: #dbeafe; font-size: 17px; }
.location-manager-note strong, .location-manager-note small { display: block; }
.location-manager-note strong { color: var(--brand-900); font-size: 12px; }
.location-manager-note small { margin-top: 1px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.manager-location-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.location-browser { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.location-browser-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.location-browser-header span, .location-browser-header strong { display: block; }
.location-browser-header span { color: var(--muted); font-size: 9px; font-weight: 700; }
.location-browser-header strong { color: var(--brand-900); font-size: 11px; }
.location-browser-header > small { flex: 0 0 auto; color: var(--brand-700); font-size: 9px; font-weight: 800; }
.location-browser-empty { min-height: 92px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 15px; color: var(--muted); text-align: center; }
.location-browser-empty > span { width: 28px; height: 28px; display: grid; flex: 0 0 28px; place-items: center; color: var(--gold-700); border-radius: 8px; background: var(--gold-100); font-size: 15px; }
.location-browser-empty strong, .location-browser-empty small { display: block; }
.location-browser-empty strong { color: var(--text); font-size: 11px; }
.location-browser-empty small { margin-top: 1px; font-size: 9px; }
.location-chip-list { max-height: 190px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; overflow: auto; padding: 11px; }
.location-chip-list span { padding: 4px 8px; color: var(--brand-800); border: 1px solid #cbdcf6; border-radius: 999px; background: #fff; font-size: 10px; font-weight: 700; }
.location-manager-form { padding: 14px; border: 1px solid #d7e3f4; border-radius: 13px; background: linear-gradient(120deg, #fff, #f5f8ff); }
.location-manager-form-heading { margin-bottom: 13px; }
.location-manager-form-heading strong, .location-manager-form-heading small { display: block; }
.location-manager-form-heading strong { color: var(--brand-900); font-size: 12px; }
.location-manager-form-heading small { margin-top: 1px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.manager-add-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.location-manager-actions { display: flex; align-items: center; justify-content: space-between; gap: 11px; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border); }
.location-manager-actions small { max-width: 340px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.location-manager-actions .primary-button { min-height: 35px; flex: 0 0 auto; padding-inline: 12px; font-size: 11px; }

.toast-container { position: fixed; z-index: 20; left: 20px; bottom: 20px; display: grid; gap: 8px; width: min(360px, calc(100vw - 40px)); }
.toast { display: flex; align-items: flex-start; gap: 9px; padding: 12px; color: var(--text); border: 1px solid var(--border); border-radius: 12px; background: #fff; box-shadow: var(--shadow); animation: toast-in .25s ease; }
.toast.success { border-color: #cde8da; }
.toast.error { border-color: #f0cece; }
.toast > span { width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 800; }
.toast.success > span { color: var(--success); background: var(--success-soft); }
.toast.error > span { color: var(--danger); background: var(--danger-soft); }
.toast strong, .toast small { display: block; }
.toast strong { font-size: 11px; }
.toast small { margin-top: 1px; color: var(--muted); font-size: 10px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

[hidden] { display: none !important; }

body.dark {
  --canvas: #0b1220;
  --surface: #111827;
  --surface-soft: #1a2332;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --muted-light: #64748b;
  --border: #243044;
  --border-dark: #334155;
  --brand-soft: #172554;
  --brand-soft-strong: #1e3a8a;
  --brand-glow: rgba(59, 130, 246, .22);
  --gold-100: #3d341d;
  --success-soft: #14352a;
  --warning-soft: #443619;
  --blue-soft: #17324a;
  --purple-soft: #2d2746;
  --green-50: #1e293b;
  --shadow-xs: 0 1px 2px rgba(2, 6, 23, .35);
  --shadow-sm: 0 4px 12px rgba(2, 6, 23, .4);
  --shadow: 0 12px 28px rgba(2, 6, 23, .45);
}
body.dark.program-mawlid {
  --brand-soft: #14352f;
  --brand-soft-strong: #1a453c;
  --brand-glow: rgba(24, 131, 110, .22);
  --green-50: #14352f;
}
body.dark .topbar { background: rgba(17, 24, 39, .92); }
body.dark .hub-header { background: var(--surface); }
body.dark .auth-screen { background: var(--canvas); }
body.dark .auth-card { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow); }
body.dark .auth-card #loginPanel > h1,
body.dark .auth-field > span { color: var(--text); }
body.dark .auth-input input { color: var(--text); border-color: var(--border-dark); background: var(--surface-soft); }
body.dark .date-chip, body.dark .field input, body.dark .field select, body.dark .field textarea, body.dark .filter-panel input, body.dark .filter-panel select, body.dark .card-action, body.dark .pill-options button, body.dark .secondary-button, body.dark .icon-button, body.dark .view-switch button, body.dark .backup-list-item button, body.dark .manager-item button, body.dark .modal { background: var(--surface); }
body.dark .dropzone, body.dark .event-row, body.dark .queue-item, body.dark .report-summary, body.dark .location-governorate { background: var(--surface-soft); }
body.dark .event-card-cover { background: linear-gradient(140deg, #39341f, #1e293b); }
body.dark.program-mawlid .event-card-cover { background: linear-gradient(140deg, #39341f, #1a453c); }
body.dark .selected-event-summary { background: var(--brand-soft); border-color: var(--border); }
body.dark .save-card { background: linear-gradient(145deg, var(--brand-soft), var(--surface)); border-color: var(--border); }
body.dark .report-note { color: var(--muted); border-color: var(--border); background: var(--surface-soft); }
body.dark #quick-entryView > .view-intro { border-color: var(--border); background: linear-gradient(110deg, var(--surface), var(--surface-soft)); }
body.dark .entry-help-strip { border-color: var(--border); background: rgba(17, 24, 39, .72); }
body.dark .entry-help-item.is-current, body.dark .location-flow span { background: var(--brand-soft); }
body.dark .entry-help-item > span { background: var(--surface); }
body.dark .form-card--location { border-color: var(--border); }
body.dark .section-badge { background: var(--brand-soft); }
body.dark .optional-tag { background: #46391f; }
body.dark .location-add-callout, body.dark .location-manager-note, body.dark .location-manager-form { border-color: var(--border); background: var(--surface-soft); }
body.dark .location-browser { border-color: var(--border); background: var(--surface-soft); }
body.dark .location-browser-header, body.dark .location-chip-list span { background: var(--surface); }
body.dark .location-chip-list span { border-color: var(--border-dark); color: var(--text); }
body.dark .admin-pulse { background: linear-gradient(135deg, var(--surface), var(--surface-soft)); border-color: var(--border); }
body.dark .admin-pulse-grid > div { background: rgba(17, 24, 39, .72); border-color: var(--border); }
body.dark .toast { background: var(--surface); }
body.dark .map-picker { background: var(--surface-soft); border-color: var(--border); }
body.dark .map-coordinates { background: var(--brand-soft); }
body.dark .account-scope-summary { background: var(--brand-soft); border-color: var(--border); }
body.dark .inline-edit-heading { background: linear-gradient(90deg, var(--brand-soft), var(--surface-soft)); border-bottom-color: var(--border); }

/* Production dark palette: neutral navy surfaces, blue actions, readable text. */
body.dark {
  --canvas: #0a1120;
  --surface: #121c2d;
  --surface-soft: #18253a;
  --text: #f1f5f9;
  --muted: #b4c0d1;
  --muted-light: #91a0b5;
  --border: #2d3d55;
  --border-dark: #465873;
  --brand-900: #dbeafe;
  --brand-800: #bfdbfe;
  --brand-700: #477b9c;
  --brand-600: #5d91b0;
  --brand-500: #7eabc5;
  --brand-soft: #182d55;
  --brand-soft-strong: #25457d;
  --success: #60a5fa;
  --success-soft: #193a69;
  --warning: #f5c65b;
  --warning-soft: #4a3918;
  --danger: #fca5a5;
  --danger-soft: #4a2028;
  --blue: #7dd3fc;
  --blue-soft: #173d5c;
  --purple: #c4b5fd;
  --purple-soft: #352d59;
}
body.dark .primary-button { color: #fff; border-color: #477b9c; background: #477b9c; }
body.dark .primary-button:hover { border-color: #356987; background: #356987; }
body.dark .secondary-button, body.dark .icon-button, body.dark .card-action,
body.dark .pill-options button, body.dark .backup-list-item button,
body.dark .manager-item button, body.dark .account-actions button,
body.dark .backup-item-actions a { color: var(--text); border-color: var(--border-dark); background: var(--surface); }
body.dark .secondary-button:hover, body.dark .icon-button:hover, body.dark .card-action:hover,
body.dark .pill-options button:hover { color: #fff; border-color: #5d91b0; background: #356987; }
body.dark .date-chip { color: var(--text); border-color: var(--border-dark); background: var(--surface-soft); }
body.dark .date-chip strong, body.dark .calendar-card > strong,
body.dark .calendar-card b, body.dark .form-section-title h3,
body.dark .panel-header h2, body.dark .settings-heading h3 { color: var(--text); }
body.dark .calendar-card { color: var(--text); border-color: #526886; background: #17243a; }
body.dark .calendar-card > span, body.dark .calendar-card small { color: var(--muted); }
body.dark .admin-pulse h3, body.dark .map-picker strong,
body.dark .location-add-callout strong, body.dark .location-manager-note strong,
body.dark .location-manager-form-heading strong, body.dark .location-browser-header strong { color: var(--text); }
body.dark .status-badge.complete, body.dark .evaluation-actions span.is-ready,
body.dark .account-status { color: #93c5fd; background: #193a69; }
body.dark .events-long-table th, body.dark .events-long-table th:nth-child(1),
body.dark .events-long-table th:nth-child(2), body.dark .events-long-table .long-overall { background: #172554; }
body.dark .events-long-table .long-location { background: #1d4ed8 !important; }
body.dark .events-long-table .long-date { color: #fde68a; background: #3b3218 !important; }
body.dark .events-long-table .long-date small { color: #f5d98b; }
body.dark .settings-nav { border-color: var(--border); background: var(--surface-soft); box-shadow: var(--shadow); }
body.dark .settings-nav-item { color: var(--text); }
body.dark .settings-nav-item > span { color: #bfdbfe; background: #213653; }
body.dark .settings-nav-item small { color: var(--muted); }
body.dark .settings-nav-item:hover { background: #213653; }
body.dark .settings-nav-item.is-active { border-color: #477b9c; background: #356987; }
body.dark .settings-area-header { background: linear-gradient(135deg, #18344f, #356987); }
body.dark .settings-area-header .settings-symbol { color: #356987; background: #f8fafc; }
body.dark .settings-access-note { color: #fde68a; border-color: #725c27; background: #3b3018; }
body.dark .modal { color: var(--text); border: 1px solid var(--border); }
body.dark .modal-backdrop { background: rgba(2, 8, 23, .72); }
body.dark .field input, body.dark .field select, body.dark .field textarea,
body.dark .filter-panel input, body.dark .filter-panel select,
body.dark .inline-detail input, body.dark .inline-detail select, body.dark .inline-detail textarea { color: var(--text); border-color: var(--border-dark); background: var(--surface); }
body.dark .field select option, body.dark .filter-panel select option { color: #0f172a; background: #fff; }
body.dark .empty-list, body.dark .empty-state, body.dark .evaluation-empty { color: var(--muted); border-color: var(--border-dark); background: var(--surface-soft); }

.map-picker-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.modal.modal--wide { width: min(1160px, 96vw); max-height: min(800px, 94vh); }
.manager-catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(230px, 1fr)); gap: 14px; align-items: start; }
.manager-catalog-grid .manager-list { gap: 7px; margin: 0; padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.manager-catalog-grid .manager-list h3 { min-height: 36px; margin: 0 0 7px; color: var(--text); font-size: 12px; }
.manager-catalog-grid .manager-item { min-height: 48px; padding: 8px 9px; background: var(--surface); }
.manager-catalog-grid .manager-add { margin-top: 8px; }

@media (max-width: 900px) {
  .manager-catalog-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 600px) {
  .map-picker-actions { grid-column: 1 / -1; justify-content: stretch; }
  .map-picker-actions .secondary-button { flex: 1; }
  .map-picker-canvas { height: 240px; }
  .manager-catalog-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1200px) {
  .welcome-copy h2 { white-space: normal; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-pulse-grid { grid-template-columns: 1fr; }
  .event-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-panel { grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(110px, .6fr)) auto; }
  .filter-panel .view-switch { grid-column: 1 / -1; justify-self: end; }
  .location-entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-details-grid { grid-template-columns: repeat(3, minmax(125px, 1fr)); }
}
@media (max-width: 1020px) {
  :root { --sidebar-width: 238px; }
  .topbar { padding-inline: 22px; }
  .content-area { padding-inline: 22px; }
  .entry-layout { grid-template-columns: 1fr; }
  .form-sidebar { position: static; grid-template-columns: minmax(0, 1fr) 290px; }
  .entry-help-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reports-layout, .dashboard-grid { grid-template-columns: 1fr; }
  .evaluation-layout { grid-template-columns: 250px minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .account-form-grid { grid-template-columns: 1fr 1fr; }
  .account-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .account-actions { grid-column: 2 / -1; }
  .sidebar { position: fixed; z-index: 9; width: min(290px, 86vw); transform: translateX(110%); box-shadow: -8px 0 30px rgba(5, 33, 28, .25); transition: transform .2s ease; }
  .sidebar.is-open { transform: translateX(0); }
  .mobile-menu-backdrop { position: fixed; z-index: 8; inset: 0; width: 100%; padding: 0; border: 0; background: rgba(5, 33, 28, .38); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  .mobile-menu-backdrop.is-visible { display: block; opacity: 1; pointer-events: auto; }
  .mobile-menu-button { display: inline-grid; }
  .topbar { min-height: 68px; padding: 10px 16px; }
  .topbar-actions { gap: 7px; }
  .date-chip { display: none; }
  .page-heading .eyebrow { font-size: 9px; }
  .page-heading h1 { font-size: 16px; }
  #themeButton { display: none; }
  .content-area { padding: 20px 16px 35px; }
  #quick-entryView > .view-intro { align-items: flex-start; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .location-entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-search { grid-column: 1 / -1; }
  .filter-panel .text-button { justify-self: start; }
  .filter-panel .view-switch { grid-column: auto; justify-self: end; }
  .evaluation-layout { grid-template-columns: 1fr; }
  .event-details-grid { grid-template-columns: repeat(2, minmax(125px, 1fr)); }
  .evaluation-queue { position: static; }
  .queue-list { max-height: 206px; overflow: auto; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-layout > .backup-card { grid-column: auto; }
  .settings-shell { grid-template-columns: 1fr; }
  .settings-nav { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roles-layout { grid-template-columns: 1fr; }
  .create-role-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .auth-screen { padding: 12px; }
  .auth-card { padding: 21px; border-radius: 18px; }
  .topbar { align-items: flex-start; gap: 10px; }
  .page-heading { min-width: 0; flex: 1; padding-top: 2px; }
  .topbar-actions { flex-wrap: wrap; justify-content: flex-end; }
  .topbar-actions .date-chip { display: flex; order: 3; width: 100%; justify-content: flex-end; }
  .date-chip { padding: 5px 8px; }
  .date-chip-icon { width: 26px; height: 26px; }
  .primary-button, .secondary-button { min-height: 44px; }
  .icon-button { width: 44px; height: 44px; }
  .field input, .field select, .date-picker-row .icon-button { height: 44px; }
  .account-form-grid { grid-template-columns: 1fr; }
  .account-row { grid-template-columns: 32px minmax(0, 1fr); }
  .account-status { justify-self: start; grid-column: 2; }
  .account-actions { grid-column: 1 / -1; }
  .event-details-grid { grid-template-columns: 1fr; }
  .event-detail-item.wide { grid-column: auto; }
  .inline-edit-actions { align-items: stretch; }
  .inline-edit-actions .primary-button, .inline-edit-actions .secondary-button { width: 100%; }
  .primary-button.compact { width: 37px; padding: 0; font-size: 0; }
  .primary-button.compact span { font-size: 18px; }
  .welcome-card { min-height: auto; padding: 24px 20px; }
  .welcome-copy h2 { font-size: 21px; white-space: normal; }
  .calendar-card { display: none; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .stat-card { min-height: 100px; align-items: flex-start; gap: 8px; padding: 12px; }
  .stat-icon { width: 33px; height: 33px; flex-basis: 33px; border-radius: 9px; font-size: 14px; }
  .stat-card strong { font-size: 23px; }
  .stat-card small { line-height: 1.3; }
  .view-intro h2 { font-size: 21px; }
  .inline-intro { align-items: flex-start; }
  .inline-intro > .primary-button { min-width: 39px; padding: 0 10px; font-size: 0; }
  .inline-intro > .primary-button::first-letter { font-size: 19px; }
  .progress-steps { display: none; }
  #quick-entryView > .view-intro { display: block; padding: 16px; }
  .entry-intro-side { display: block; margin-top: 8px; }
  .required-note { display: block; }
  .form-card, .panel { padding: 16px; }
  .entry-help-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 6px; }
  .entry-help-item { gap: 6px; padding: 7px; }
  .entry-help-item strong { font-size: 10px; }
  .entry-help-item small { font-size: 8px; }
  .form-grid, .form-grid.two-columns, .assessment-grid { grid-template-columns: 1fr; }
  .location-entry-grid, .manager-location-grid, .manager-add-grid { grid-template-columns: 1fr; }
  .venue-field { grid-column: auto; }
  .location-flow { margin: -2px 0 14px; gap: 4px; }
  .location-flow span { padding: 2px 6px; font-size: 9px; }
  .assessment-field:first-child { grid-column: auto; }
  .form-sidebar { grid-template-columns: 1fr; }
  .event-cards { grid-template-columns: 1fr; }
  .event-card-cover { height: 138px; }
  .form-section-title { margin-bottom: 15px; }
  .form-section-title p { line-height: 1.4; }
  .filter-panel { grid-template-columns: 1fr 1fr; padding: 11px; }
  .filter-panel > .text-button { grid-column: 1; }
  .filter-panel .view-switch { grid-column: 2; }
  .evaluation-actions { flex-direction: column; align-items: stretch; }
  .evaluation-actions .primary-button { width: 100%; }
  .reports-layout { grid-template-columns: 1fr; }
  .backup-info-grid { grid-template-columns: 1fr; }
  .backup-info-grid div { border-left: 0; border-bottom: 1px solid var(--border); }
  .backup-info-grid div:last-child { border-bottom: 0; }
  .backup-actions { display: grid; grid-template-columns: 1fr; }
  .backup-actions .primary-button, .backup-actions .secondary-button { width: 100%; }
  .settings-nav, .permission-grid { grid-template-columns: 1fr; }
  .settings-tabs { flex-wrap: wrap; overflow: visible; gap: 6px; }
  .settings-tab { flex: 1 1 100%; min-height: 44px; }
  .create-role-form { grid-template-columns: 1fr; }
  .settings-panel-content { padding: 13px; }
  .location-add-callout { grid-template-columns: auto minmax(0, 1fr); }
  .location-add-callout .secondary-button { grid-column: 1 / -1; width: 100%; }
  .location-browser-header, .location-manager-actions { align-items: flex-start; flex-direction: column; }
  .location-manager-actions .primary-button { width: 100%; }
  .map-picker { grid-template-columns: 1fr; }
  .map-picker-actions { justify-content: stretch; }
  .map-picker-actions .secondary-button { min-height: 44px; }
  .map-picker-canvas { height: clamp(220px, 55vh, 280px); }
  .modal-backdrop { padding: 10px; }
  .modal { max-height: calc(100dvh - 20px); border-radius: 14px; }
  .modal-header, .modal-content { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  .sidebar, .topbar, .filter-panel, .view:not(#reportsView), .reports-layout, .report-note, .modal-backdrop, .toast-container { display: none !important; }
  .main-panel { width: 100%; }
  .content-area { width: 100%; padding: 0; }
  #printReport { display: block !important; }
}