/* أساس التصميم. الهوية البصرية (القائمة الداكنة والألوان الدافئة) في آخر الملف. */
:root {
  --bg: #eef2f6;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: #e2e8f0;
  --border-2: #cbd5e1;
  --text: #1e293b;
  --text-2: #334155;
  --muted: #64748b;
  --muted-2: #94a3b8;
  --primary: #2563eb;
  --primary-2: #1d4ed8;
  --primary-soft: #eff6ff;
  --primary-dark: #172554;
  --panel-head: #e8f0fc;
  --panel-head-border: #c7d8f3;
  --thead: #d8e6f8;
  --accent: #d97706;
  --accent-soft: #fef3c7;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --warn: #b45309;
  --warn-soft: #fff7e6;
  --notice: #fff3cd;
  --notice-text: #7a5a00;
  --ok: #059669;
  --ok-soft: #d1fae5;
  --info: #0891b2;
  --info-soft: #cffafe;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --sidebar: 250px;
  font-family: "Kufi", "Segoe UI", Tahoma, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text-2); font-size: 13.5px; line-height: 1.75; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; line-height: 1.5; color: var(--text); }
button, input, select, textarea { font: inherit; color: inherit; }
.boot { padding: 40px; text-align: center; color: var(--muted); }
.fa-solid, .fa-regular { line-height: 1; }

/* ---------- ألوان مربعات الأيقونات ---------- */
.ni-blue   { background: #dbeafe; color: #2563eb; }
.ni-green  { background: #d1fae5; color: #059669; }
.ni-indigo { background: #e0e7ff; color: #4338ca; }
.ni-cyan   { background: #cffafe; color: #0891b2; }
.ni-amber  { background: #fef3c7; color: #d97706; }
.ni-teal   { background: #ccfbf1; color: #0d9488; }
.ni-rose   { background: #ffe4e6; color: #e11d48; }
.ni-purple { background: #ede9fe; color: #7c3aed; }
.ni-orange { background: #ffedd5; color: #ea580c; }
.ni-slate  { background: #f1f5f9; color: #475569; }
.ni-red    { background: #fee2e2; color: #dc2626; }
/* المربعات الممتلئة في بطاقات الإجراءات */
.nf-blue   { background: #2563eb; color: #fff; }
.nf-green  { background: #10b981; color: #fff; }
.nf-indigo { background: #4f46e5; color: #fff; }
.nf-cyan   { background: #0891b2; color: #fff; }
.nf-amber  { background: #d97706; color: #fff; }
.nf-teal   { background: #0d9488; color: #fff; }
.nf-rose   { background: #e11d48; color: #fff; }
.nf-purple { background: #8b5cf6; color: #fff; }
.nf-orange { background: #ea580c; color: #fff; }
.nf-slate  { background: #475569; color: #fff; }
.nf-red    { background: #dc2626; color: #fff; }

/* ---------- الهيكل ---------- */
.layout { display: grid; grid-template-columns: var(--sidebar) 1fr; grid-template-rows: 68px 1fr; min-height: 100vh; }
.topbar {
  grid-column: 1 / -1; height: 68px; background: #fff; border-bottom: 1px solid #f1f5f9;
  box-shadow: 0 2px 8px rgba(15,23,42,.10), 0 1px 2px rgba(15,23,42,.06);
  display: flex; align-items: center; gap: 12px; padding: 0 16px; position: sticky; top: 0; z-index: 40;
}
.topbar .menu-btn { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 8px; background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--text-2); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 46px; width: auto; max-width: 170px; object-fit: contain; }
.brand .mark { width: 42px; height: 42px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 18px; }
.brand .sep { width: 1px; height: 30px; background: var(--border); }
.brand b { font-size: 17px; font-weight: 700; color: var(--text); }
.topbar .spacer { flex: 1; }
.tb-icon { position: relative; width: 38px; height: 38px; border-radius: 10px; background: #f1f5f9; display: grid; place-items: center; color: var(--text-2); border: 0; cursor: pointer; text-decoration: none !important; }
.tb-icon:hover { background: #e2e8f0; }
.tb-icon .dot { position: absolute; top: -4px; inset-inline-start: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 10px; display: grid; place-items: center; padding: 0 4px; font-weight: 700; }
.tb-sep { width: 1px; height: 28px; background: var(--border); margin: 0 4px; }
.userchip { display: flex; align-items: center; gap: 8px; background: #f1f5f9; border-radius: 10px; padding: 6px 12px; cursor: pointer; position: relative; border: 0; }
.userchip .ico { color: var(--primary); }
.userchip b { font-size: 13px; font-weight: 500; color: var(--text); }
.user-menu { position: absolute; top: 46px; inset-inline-end: 0; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(15,23,42,.12); min-width: 220px; padding: 8px; z-index: 50; text-align: start; }
.user-menu .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.user-menu .who small { display: block; color: var(--muted); }
.user-menu button, .user-menu a { display: flex; gap: 10px; align-items: center; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--text-2); text-decoration: none !important; }
.user-menu button:hover, .user-menu a:hover { background: #f1f5f9; }

.sidebar { background: #fff; border-inline-start: 1px solid var(--border); position: sticky; top: 68px; height: calc(100vh - 68px); overflow-y: auto; padding: 14px 10px 30px; }
.nav-group { font-size: 10px; font-weight: 700; color: var(--muted-2); padding: 14px 12px 6px; }
.nav a, .nav span.soon {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 7px; height: 48px;
  color: #475569; font-size: 13.5px; font-weight: 500; text-decoration: none !important;
}
.nav a:hover { background: #f8fafc; }
.nav a.active { background: var(--primary-soft); color: var(--primary); }
.nav span.soon { opacity: .55; cursor: default; }
.nav .ico { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; font-size: 13.5px; flex: none; }
.nav .tag { margin-inline-start: auto; font-size: 10px; background: #fee2e2; color: #dc2626; padding: 0 8px; border-radius: 10px; line-height: 18px; }
.nav .tag.soon-tag { background: #f1f5f9; color: var(--muted); }
.nav .count { margin-inline-start: auto; font-size: 11px; background: var(--danger); color: #fff; padding: 0 7px; border-radius: 10px; line-height: 18px; }

.main { min-width: 0; display: flex; flex-direction: column; }
.crumbbar { background: #fff; border-bottom: 1px solid var(--border); padding: 0 24px; height: 38px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.crumbbar a { color: var(--muted); }
.crumbbar .home { color: var(--primary); }
.crumbbar b { color: var(--text); font-weight: 700; }
.content { padding: 20px 22px; width: 100%; flex: 1; }
.footer { background: #fff; border-top: 1px solid var(--border); height: 46px; display: flex; align-items: center; padding: 0 22px; gap: 10px; font-size: 13px; color: var(--text-2); }
.footer .ver { background: #f1f5f9; border-radius: 8px; padding: 0 8px; font-size: 11px; color: var(--muted); }
.footer .spacer { flex: 1; }

/* ---------- عناوين الصفحات ---------- */
/* رأس الصفحة لوحة زرقاء فاتحة؛ إن تبعته بطاقة اتصل بها فصارا لوحة واحدة برأسها. */
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; background: var(--panel-head); border: 1px solid var(--panel-head-border); border-radius: var(--radius); padding: 12px 18px; }
.page-head:has(+ .card) { border-radius: var(--radius) var(--radius) 0 0; margin-bottom: 0; }
.page-head + .card { border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
.page-head + .card > .card-head:first-child, .page-head + .card > .tabs:first-child { border-radius: 0; }
.page-head.bare { background: none; border: 0; padding: 0; }
.page-head.bare + .card { border-top: 1px solid var(--border); border-radius: var(--radius); }
.page-head h1 { font-size: 16px; font-weight: 700; }
.page-head .sub { color: var(--muted); font-size: 13px; }
.page-head .actions { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs { display: none; }

/* ---------- البطاقات واللوحات ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card + .card { margin-top: 16px; }
.card-head { padding: 14px 18px; border-bottom: 1px solid var(--panel-head-border); background: var(--panel-head); display: flex; align-items: center; gap: 10px; border-radius: var(--radius) var(--radius) 0 0; }
.card-head h3 { font-size: 15px; font-weight: 700; }
.card-head .actions { margin-inline-start: auto; display: flex; gap: 8px; }
.card-body { padding: 18px; }
.card-body.flush { padding: 0; }
.card-head + .card-body.flush .table th { border-top: 0; }

.grid { display: grid; gap: 16px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ---------- الأزرار والحقول ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 8px;
  border: 1px solid var(--border-2); background: #fff; padding: 7px 16px; cursor: pointer;
  font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: none !important; color: var(--text-2); min-height: 36px;
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-2); }
.btn.accent { background: #10b981; border-color: #10b981; color: #fff; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.sm { padding: 3px 10px; font-size: 12px; min-height: 30px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > .cap { font-size: 13px; color: var(--text-2); font-weight: 500; }
.field > .cap .req { color: var(--danger); }
.field .hint { font-size: 12px; color: var(--muted); }
.field .err { font-size: 12px; color: var(--danger); }
.input, select.input, textarea.input {
  width: 100%; border: 1px solid #ccd6e3; border-radius: 4px; padding: 7px 11px; background: #fff; min-height: 38px; color: var(--text);
}
textarea.input { min-height: 90px; resize: vertical; }
.input::placeholder { color: #9aa7b8; }
.input:focus { outline: 0; border-color: #86b7fe; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.input[readonly] { background: #f1f5f9; }
/* التاريخ والوقت يتبعان اتجاه الصفحة؛ فرض ltr كان يعكس حروف «يوم/شهر/سنة» في Chrome العربي. */
input[type="date"].input, input[type="time"].input { direction: rtl; text-align: start; }
/* قائمة منسدلة ببحث (Select2) */
.ss { position: relative; min-width: 0; }
.ss-box { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; text-align: start; }
.ss-box .ph { color: #9aa7b8; }
.ss-box i { font-size: 11px; color: var(--muted); }
.ss-box.open { border-color: #86b7fe; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.ss-menu { position: absolute; inset-inline: 0; top: calc(100% + 2px); z-index: 45; background: #fff; border: 1px solid #aac4ec; border-radius: 4px; box-shadow: 0 8px 24px rgba(15,23,42,.12); }
.ss-search { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.ss-search input { flex: 1; border: 1px solid #ccd6e3; border-radius: 4px; padding: 5px 9px; min-height: 32px; }
.ss-search i { color: var(--muted); font-size: 12px; }
.ss-menu ul { list-style: none; margin: 0; padding: 4px 0; max-height: 260px; overflow-y: auto; }
.ss-menu li { padding: 7px 14px; cursor: pointer; font-size: 13.5px; }
.ss-menu li.hi { background: #3b82f6; color: #fff; }
.ss-menu li.on:not(.hi) { background: var(--primary-soft); }
.ss-menu li.none { color: var(--muted); cursor: default; }
.page-head.bare { min-height: 0; margin-bottom: 12px; }
.page-head.bare:empty { display: none; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; }
.check input { width: 17px; height: 17px; accent-color: var(--primary); }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; }
.form-grid .span2 { grid-column: span 2; }
.form-grid .span3, .form-grid .full { grid-column: 1 / -1; }
.form-section { font-weight: 700; color: var(--primary); grid-column: 1 / -1; padding-top: 8px; border-top: 1px dashed var(--border-2); margin-top: 4px; font-size: 14px; }
.form-section:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.form-actions .btn.primary { min-width: 120px; }

.filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; padding: 14px 18px; border-bottom: 1px solid var(--border); background: #fbfcfe; }
.filters .field { width: 200px; }
.filters .field.grow { flex: 1; min-width: 220px; }
.filters-toggle { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--border); cursor: pointer; font-weight: 700; color: var(--text); background: #fff; user-select: none; }
.filters-toggle .chev { margin-inline-start: auto; color: var(--muted); }

/* ---------- الجداول ---------- */
table.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: center; font-weight: 700; color: #1e3a5f; font-size: 12.5px; background: var(--thead); padding: 10px 10px; border: 1px solid #c6d8ef; white-space: nowrap; }
.table td { padding: 9px 10px; border-bottom: 1px solid #edf1f6; vertical-align: middle; text-align: center; }
.table tbody tr:nth-child(even) td { background: #fafbfd; }
.table tr:last-child td { border-bottom: 0; }
.table tr.click { cursor: pointer; }
.table tr.click:hover td { background: #f1f6ff; }
.table .num { font-variant-numeric: tabular-nums; }
.table tfoot td { font-weight: 700; background: #f1f5f9; }
.table td.start, .table th.start { text-align: start; }
.table-wrap { overflow-x: auto; }
.pager { display: flex; align-items: center; justify-content: center; position: relative; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); background: #f8fafc; }
.pager .cnt { position: absolute; inset-inline-start: 14px; font-size: 12px; }
.pager .pg { display: flex; align-items: center; gap: 4px; }
.pager .pg button { min-width: 28px; height: 28px; border: 0; background: none; color: #94a3b8; cursor: pointer; border-radius: 4px; font: inherit; font-size: 12px; }
.pager .pg button:hover:not(:disabled) { background: #e2e8f0; color: var(--text); }
.pager .pg button:disabled { opacity: .45; cursor: default; }
.pager .pg button.n { color: var(--text-2); }
.pager .pg button.n.on { background: var(--primary); color: #fff; }
.pager .pp { height: 28px; border: 1px solid var(--border-2); border-radius: 4px; padding: 0 6px; margin-inline-start: 8px; font: inherit; font-size: 12px; background: #fff; }
.list-title { text-align: center; color: var(--primary); padding: 8px; font-size: 13px; background: #f8fbff; border-bottom: 1px solid var(--border); }

/* رقائق القيم في الجداول */
.chip-id { display: inline-block; border: 1px solid #3b82f6; color: #1d4ed8; background: #eff6ff; border-radius: 4px; padding: 0 10px; font-size: 12px; min-width: 96px; font-variant-numeric: tabular-nums; }
.chip-mobile { display: inline-block; border: 1px solid #f59e0b; color: #b45309; background: #fff7e6; border-radius: 4px; padding: 0 10px; font-size: 12px; min-width: 96px; font-variant-numeric: tabular-nums; }
.chip-no { display: inline-block; border: 1px solid var(--border-2); background: #f8fafc; border-radius: 4px; padding: 0 10px; font-size: 12px; min-width: 50px; color: var(--text-2); }

.badge { display: inline-block; padding: 0 10px; border-radius: 4px; font-size: 12px; font-weight: 500; white-space: nowrap; background: #fff; color: var(--muted); border: 1px solid var(--border-2); line-height: 22px; }
.badge.ok { color: #059669; border-color: #34d399; background: #ecfdf5; }
.badge.warn { color: #b45309; border-color: #fbbf24; background: #fffbeb; }
.badge.danger { color: #dc2626; border-color: #f87171; background: #fef2f2; }
.badge.info { color: #0369a1; border-color: #7dd3fc; background: #f0f9ff; }
.badge.primary { color: #4338ca; border-color: #a5b4fc; background: #eef2ff; }
.badge.accent { color: #c2410c; border-color: #fdba74; background: #fff7ed; }

/* رقائق التجميع (عرض حسب) */
.groupby { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 12px 16px; }
.groupby .g { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 20px; padding: 2px 12px; font-size: 12px; background: #fff; cursor: pointer; }
.groupby .g.on { border-color: var(--primary); background: var(--primary-soft); }
.groupby .g .dot { width: 8px; height: 8px; border-radius: 50%; }
.groupby .g .pct { color: var(--muted); }

/* ---------- لوحة المعلومات ---------- */
.hero { border-radius: 20px; padding: 30px 30px 26px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--primary-dark, #0c1222) 0%, var(--primary-2, #312e81) 65%, var(--primary, #4338ca) 100%); }
.hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 18px 18px; pointer-events: none; }
.hero .top { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
/* الشعار بحجمه الطبيعي: ارتفاع ثابت وعرض حسب نسبة الصورة، فلا يصغر الشعار العريض. */
.hero .logo { min-width: 64px; height: 72px; padding: 6px 10px; border-radius: 14px; background: #fff; display: grid; place-items: center; overflow: hidden; color: #312e81; font-weight: 800; font-size: 24px; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.hero .logo img { height: 60px; width: auto; max-width: 180px; object-fit: contain; display: block; }
.hero h2 { color: #fff; font-size: 22px; font-weight: 800; }
.hero small { color: rgba(255,255,255,.78); font-size: 12.5px; }
.hero .clock { margin-inline-start: auto; text-align: end; }
.hero .clock b { font-size: 22px; font-weight: 800; display: block; font-variant-numeric: tabular-nums; }
.hero .clock small { color: rgba(255,255,255,.7); }
.hero .box { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); border-radius: 12px; padding: 8px 16px; text-align: center; }
.hero .box small { display: block; color: rgba(255,255,255,.7); font-size: 11px; }
.hero .box b { font-size: 18px; color: var(--accent-soft, #fef3c7); }
.hero .quick { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; position: relative; z-index: 1; }
.hero .quick a { border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; border-radius: 10px; padding: 7px 14px; font-size: 13px; font-weight: 700; display: inline-flex; gap: 8px; align-items: center; text-decoration: none !important; }
.hero .quick a:hover { background: rgba(255,255,255,.16); }

.kpi { border-radius: 16px; color: #fff; padding: 18px 20px; position: relative; overflow: hidden; min-height: 132px; display: flex; flex-direction: column; text-decoration: none !important; }
.kpi .t { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; }
.kpi .t .i { margin-inline-start: auto; width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.2); display: grid; place-items: center; font-size: 12px; }
.kpi .v { font-size: 30px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .v small { font-size: 13px; font-weight: 500; opacity: .85; margin-inline-start: 6px; }
.kpi .v { display: flex; align-items: baseline; flex-wrap: wrap; }
.kpi .v .u { font-size: 14px; font-weight: 500; opacity: .75; margin-inline-start: 6px; }
.kpi .v .sep { width: 2px; height: 26px; background: rgba(255,255,255,.45); margin: 0 14px; align-self: center; border-radius: 1px; }
.kpi .v .v2 { font-size: 19px; font-weight: 700; opacity: .8; }
.kpi .v .v2 .u { font-size: 13px; }
.kpi .f { font-weight: 700; }
.kpi .f > i { font-size: 11px; margin-inline-end: 2px; }
.kpi .f { font-size: 12px; opacity: .9; margin-top: auto; }
.kpi .f .pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.2); border-radius: 8px; padding: 2px 10px; font-weight: 700; color: #fff; text-decoration: none !important; }
.kpi .bg { position: absolute; inset-inline-end: 14px; bottom: 6px; font-size: 52px; opacity: .15; }
.k1 { background: linear-gradient(135deg, #0f766e, #2dd4bf); }
.k2 { background: linear-gradient(135deg, #1e40af, #60a5fa); }
.k3 { background: linear-gradient(135deg, #7e22ce, #c084fc); }
.k4 { background: linear-gradient(135deg, #c2410c, #fb923c); }
.k5 { background: linear-gradient(135deg, #be123c, #fb7185); }
.kb { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.kg { background: linear-gradient(135deg, #059669, #10b981); }
.ka { background: linear-gradient(135deg, #d97706, #f59e0b); }
.kr { background: linear-gradient(135deg, #dc2626, #ef4444); }

.feed { background: #fff; border-radius: 16px; box-shadow: var(--shadow); border: 1px solid #edf1f6; display: flex; flex-direction: column; min-height: 200px; }
.feed .h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #f1f5f9; }
.feed .h .ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; }
.feed .h b { font-size: 14px; font-weight: 700; color: var(--text); }
.feed .h a { margin-inline-start: auto; font-size: 12.5px; }
.feed .empty { margin: auto; }
.feed .empty i { font-size: 28px; color: #cbd5e1; display: block; margin-bottom: 8px; }
.feed ul { list-style: none; margin: 0; padding: 0; }
.feed li a { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid #f8fafc; color: var(--text-2); text-decoration: none !important; }
.feed li a:hover { background: #f8fafc; }
.feed li .r { margin-inline-start: auto; }

/* ---------- صفحات الأقسام ---------- */
.stat { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.stat .label { color: var(--muted); font-size: 12.5px; }
.stat .value { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.stat a.value { color: var(--text); text-decoration: none; }
.stat .foot { font-size: 12px; color: var(--muted); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.tile { display: flex; gap: 14px; align-items: center; padding: 16px 18px; text-decoration: none !important; color: var(--text); min-height: 72px; }
.tile:hover { border-color: #93c5fd; box-shadow: 0 4px 14px rgba(37,99,235,.08); }
.tile .ico { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; font-size: 15px; flex: none; }
.tile b { display: block; font-size: 14px; font-weight: 700; }
.tile small { color: var(--muted); font-size: 12px; }
.tile .count { margin-inline-start: auto; font-weight: 800; color: var(--primary); }

.linkcard .lh { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #f1f5f9; }
.linkcard .lh .ico { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; }
.linkcard .lh b { font-size: 14px; font-weight: 700; color: var(--text); }
.linkcard ul { list-style: none; margin: 0; padding: 6px 0; }
.linkcard li a, .linkcard li span.soon { display: flex; align-items: center; gap: 10px; padding: 8px 16px; color: var(--text-2); text-decoration: none !important; font-size: 13px; }
.linkcard li a:hover { background: #f8fafc; }
.linkcard li .ico { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-size: 10px; }
.linkcard li .n { margin-inline-start: auto; font-size: 11px; border-radius: 10px; padding: 0 8px; font-weight: 700; }
.linkcard li span.soon { opacity: .5; }

/* ---------- عناصر متفرقة ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); padding: 0 12px; overflow-x: auto; background: #fff; border-radius: var(--radius) var(--radius) 0 0; }
.tabs button { border: 0; background: none; padding: 12px 14px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; }
.tabs button.on { color: var(--primary); border-bottom-color: var(--primary); font-weight: 700; }
.tabs .cnt { font-size: 11px; background: var(--danger); color: #fff; border-radius: 10px; padding: 0 6px; margin-inline-start: 6px; }

dl.kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; margin: 0; }
dl.kv div { min-width: 0; }
dl.kv dt { font-size: 12px; color: var(--muted); }
dl.kv dd { margin: 2px 0 0; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }

.alert { border-radius: 8px; padding: 11px 16px; font-size: 13.5px; display: flex; gap: 8px; align-items: flex-start; border: 1px solid transparent; }
.alert.warn { background: var(--notice); color: var(--notice-text); border-color: #ffe69c; }
.alert.info { background: #e7f1ff; color: #1e40af; border-color: #c7dbff; }
.alert.danger { background: #fdecec; color: #991b1b; border-color: #f8c9c9; }
.alert.ok { background: #e9f9f1; color: #065f46; border-color: #bfeed6; }
.notice-bar { background: var(--notice); color: var(--notice-text); padding: 11px 18px; font-size: 13.5px; border-bottom: 1px solid #ffe69c; }
.notice-bar b { margin-inline-end: 4px; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 160px 1fr; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--border); font-size: 13px; }
.timeline li:last-child { border-bottom: 0; }
.timeline time { color: var(--muted); font-size: 12.5px; }
.timeline .note { color: var(--muted); font-size: 12.5px; }

.empty { padding: 34px 18px; text-align: center; color: var(--muted); }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mt { margin-top: 16px; }
.right { margin-inline-start: auto; }

.bars { display: flex; flex-direction: column; gap: 8px; }
.bar { display: grid; grid-template-columns: 120px 1fr 44px; gap: 10px; align-items: center; font-size: 13px; }
.bar .track { height: 10px; background: #f1f5f9; border-radius: 6px; overflow: hidden; }
.bar .fill { height: 100%; background: linear-gradient(90deg, #2563eb, #60a5fa); border-radius: 6px; }
.bar .n { text-align: end; font-variant-numeric: tabular-nums; }

/* ---------- المحاسبة ---------- */
.acc-select { position: relative; min-width: 0; }
.acc-menu { position: absolute; inset-inline: 0; top: 41px; z-index: 40; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 280px; overflow-y: auto; min-width: 260px; }
.acc-opt { display: block; width: 100%; text-align: start; border: 0; background: none; padding: 7px 12px; cursor: pointer; font-size: 13px; }
.acc-opt:hover, .acc-opt.on { background: var(--primary-soft); }
.lines-table td { padding: 6px 8px; vertical-align: top; }
.lines-table .input { min-height: 36px; padding: 6px 9px; }
.lines-table .amt { width: 130px; }
.diff-bad { color: var(--danger); font-weight: 700; }
.diff-ok { color: var(--ok); font-weight: 700; }
.tree-row td:first-child { white-space: nowrap; text-align: start; }
.tree-row.g td { font-weight: 700; background: #f8fbff !important; }
.neg { color: var(--danger); }

.voucher-doc { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 26px 30px; max-width: 820px; }
.voucher-doc .vh { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid var(--primary); padding-bottom: 12px; margin-bottom: 16px; }
.voucher-doc .vh img { height: 64px; }
.voucher-doc .vh .t { margin-inline-start: auto; text-align: center; }
.voucher-doc .vh .t h2 { font-size: 22px; color: var(--primary); }
.voucher-doc .amount-box { display: inline-block; border: 2px solid var(--text); padding: 6px 16px; font-size: 20px; font-weight: 700; border-radius: 6px; }
.voucher-doc .kvline { display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px dotted #bbb; }
.voucher-doc .kvline b { min-width: 120px; color: var(--muted); font-weight: 500; }
.voucher-doc .sigs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; text-align: center; font-size: 14px; }
.voucher-doc .sigs div { border-top: 1px solid #999; padding-top: 6px; }
.voucher-doc .void { color: var(--danger); border: 3px solid var(--danger); display: inline-block; padding: 2px 14px; transform: rotate(-8deg); font-size: 22px; font-weight: 700; }
.voucher-doc .table td, .voucher-doc .table th { text-align: start; }

/* ---------- النوافذ والتنبيهات ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: grid; place-items: center; z-index: 100; padding: 16px; }
.modal { background: var(--surface); border-radius: 12px; width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.modal.wide { width: min(860px, 100%); }
.modal-head { padding: 14px 18px; border-bottom: 1px solid var(--panel-head-border); background: var(--panel-head); display: flex; align-items: center; border-radius: 12px 12px 0 0; }
.modal-head h3 { font-size: 15px; }
.modal-head .x { margin-inline-start: auto; }
.modal-body { padding: 18px; overflow-y: auto; }
.modal-foot { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; }

.toasts { position: fixed; bottom: 18px; inset-inline-start: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast { background: #1e293b; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 13.5px; box-shadow: 0 4px 14px rgba(0,0,0,.2); max-width: 380px; }
.toast.error { background: var(--danger); }
.toast.ok { background: var(--ok); }

/* ---------- الدخول ---------- */
@keyframes tick { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------- الجوال ---------- */
@media (max-width: 1100px) {
  .grid.c5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: fixed; top: 68px; inset-inline-start: 0; width: 270px; z-index: 60; transform: translateX(100%); transition: transform .2s; box-shadow: -8px 0 24px rgba(0,0,0,.12); }
  .sidebar.open { transform: none; }
  .grid.c3, .grid.c4, .grid.c5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  dl.kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand b { font-size: 15px; }
    }
@media (max-width: 600px) {
  .content { padding: 14px 16px; }
  .grid.c2, .grid.c3, .grid.c4, .grid.c5, .form-grid, dl.kv { grid-template-columns: 1fr; }
  .form-grid .span2 { grid-column: auto; }
  .filters .field { width: 100%; }
  .timeline li { grid-template-columns: 1fr; gap: 2px; }
  .userchip b, .brand .sep, .brand b, .tb-sep { display: none; }
  .hero { padding: 22px 18px; }
  .hero .clock { display: none; }
}

/* ---------- الطباعة ---------- */
.print-only { display: none; }
@media print {
  body { background: #fff; }
  .sidebar, .topbar, .crumbbar, .footer, .no-print, .tabs, .page-head .actions { display: none !important; }
  .layout { display: block; }
  .content { padding: 0; max-width: none; }
  .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  .print-only { display: block; }
  .voucher-doc { border: 0; padding: 0; max-width: none; }
}

/* أسفل صفحة المحاسبة: الرسم وملخص الحسابات */
.acc-bottom { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.lh-plain { display: flex; align-items: center; gap: 10px; padding: 16px 20px 4px; }
.lh-plain b { font-size: 14.5px; color: var(--text); }
.sum-list { list-style: none; margin: 0; padding: 8px 20px 16px; }
.sum-list li { display: grid; grid-template-columns: 34px auto 1fr auto; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid #f1f5f9; }
.sum-list li:last-child { border-bottom: 0; }
.sum-list .ico { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; }
.sum-list b { color: var(--text); font-size: 13.5px; }
.sum-list small { color: var(--muted); font-size: 11.5px; }
.sum-list .v { font-weight: 800; font-size: 14px; }
@media (max-width: 960px) { .acc-bottom { grid-template-columns: 1fr; } }

/* وسيلة إيضاح الرسوم البيانية */
.chart-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 4px; font-size: 12px; color: #666; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 40px; height: 12px; border-radius: 3px; display: inline-block; }

/* ---------- صفحات البحث ---------- */
.klist { padding: 18px 18px 0; }
.klist + .card { margin-top: 16px; }
.klist-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.klist-head h3 { font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.klist-head h3 i { color: #0ea5b7; font-size: 15px; }
.klist-head .actions { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.btn.add { background: #f0fdf4; border-color: #22c55e; color: #15803d; }
.btn.add:hover { background: #dcfce7; }
.btn.back { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }
.btn.teal { background: #0e9aa7; border-color: #0e9aa7; color: #fff; min-width: 96px; }
.btn.teal:hover { background: #0b8792; }
.kfilter { border: 1px solid var(--border); border-radius: 10px; background: #f8fafc; margin-bottom: 14px; }
.kf-head { display: flex; align-items: center; gap: 8px; padding: 16px 18px; cursor: pointer; user-select: none; }
.kf-head > i:first-child { color: #0e9aa7; }
.kf-head .chev { margin-inline-start: auto; color: #475569; font-size: 12px; }
.kfilter.open .kf-head { border-bottom: 1px solid var(--border); margin: 0 14px; padding-inline: 4px; }
.kf-body { padding: 12px 18px 16px; }
.kf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }
.kf-grid .field > .cap { font-size: 12.5px; }
.kf-grid .field > .cap i { color: #0e9aa7; font-size: 11px; margin-inline-end: 2px; }
.kf-grid .full { grid-column: 1 / -1; }
.kf-actions { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; }
.groupsel { display: flex; justify-content: center; margin: 14px 0; }
.groupsel label { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 4px 6px 4px 12px; box-shadow: 0 1px 3px rgba(15,23,42,.06); font-size: 12px; color: var(--muted); }
.groupsel select { border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--text); cursor: pointer; padding: 4px; }
.klist .table-wrap { border: 1px solid var(--border); border-bottom: 0; border-radius: 6px 6px 0 0; }
.klist .pager { border: 1px solid var(--border); border-radius: 0 0 6px 6px; margin-bottom: 18px; }
.klist .table th { background: #bcd5f1; color: #1e293b; text-align: start; border-color: #fff; border-width: 0 0 0 1px; padding: 12px 10px; }
.klist .table td { text-align: start; }
.klist .table td.num, .klist .table td.c { text-align: center; }
.table th.sortable { cursor: pointer; user-select: none; }
.table th.sortable i { font-size: 10px; color: #1e293b; margin-inline-start: 4px; }
.table tr.grp td { background: #eef4fb !important; font-weight: 700; color: #1e3a5f; text-align: start; }
.table tr.grp td i { color: #0e9aa7; margin-inline-end: 4px; }
.table td.acts { white-space: nowrap; }
.btn.xs { padding: 1px 9px; font-size: 11.5px; min-height: 26px; }
.btn.info { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.klist .empty { border: 1px solid var(--border); border-top: 0; }
@media (max-width: 760px) { .kf-grid { grid-template-columns: 1fr; } .pager .cnt { position: static; } .pager { flex-wrap: wrap; } }

/* ===== أدوات الأقسام الجديدة ===== */
.umulti .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.umulti .chip { display: inline-flex; align-items: center; gap: 6px; background: #eef2ff; color: #3730a3; border-radius: 14px; padding: 2px 10px; font-size: 13px; }
.umulti .chip button { border: 0; background: none; cursor: pointer; color: #6366f1; font-size: 11px; padding: 0; }
ul.files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
ul.files a { color: var(--primary); }
.timeline { list-style: none; margin: 0; padding: 0 4px; }
.timeline li { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.timeline li:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 6px; top: 16px; bottom: 0; width: 2px; background: #e5e7eb; }
.timeline .dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: #93c5fd; border: 3px solid #dbeafe; margin-top: 3px; }
.timeline .dot.ok { background: #34d399; border-color: #d1fae5; }
.timeline .dot.danger { background: #f87171; border-color: #fee2e2; }
.timeline .dot.warn { background: #fbbf24; border-color: #fef3c7; }
.timeline b { font-size: 14px; }
.timeline p { margin: 2px 0; white-space: pre-wrap; color: #334155; }
.timeline small { display: block; color: var(--muted); font-size: 12px; }
.msg-body { white-space: pre-wrap; line-height: 1.9; padding: 4px 2px; }
.msg-unread td { font-weight: 700; }
.prio-urgent { color: #dc2626; } .prio-high { color: #d97706; } .prio-normal { color: #2563eb; } .prio-low { color: #64748b; }
.overdue { color: #dc2626; font-weight: 600; }
.vote-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.vote-row:last-child { border-bottom: 0; }
.seg { display: inline-flex; border: 1px solid var(--border-2); border-radius: 6px; overflow: hidden; }
.seg button { border: 0; background: #fff; padding: 5px 12px; cursor: pointer; font: inherit; font-size: 13px; color: #475569; }
.seg button + button { border-inline-start: 1px solid var(--border-2); }
.seg button.on.agree { background: #059669; color: #fff; } .seg button.on.disagree { background: #dc2626; color: #fff; } .seg button.on.abstain { background: #64748b; color: #fff; }
.steps { display: flex; gap: 0; margin: 4px 0 2px; counter-reset: st; flex-wrap: wrap; }
.steps span { flex: 1; min-width: 110px; text-align: center; padding: 8px 6px; font-size: 13px; background: #f1f5f9; color: #64748b; position: relative; }
.steps span.done { background: #dcfce7; color: #166534; } .steps span.cur { background: var(--primary); color: #fff; font-weight: 700; }
.steps span:first-child { border-radius: 0 6px 6px 0; } .steps span:last-child { border-radius: 6px 0 0 6px; }
.gov-std { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.gov-std:last-child { border-bottom: 0; }
.gov-bar { height: 10px; background: #e5e7eb; border-radius: 6px; overflow: hidden; }
.gov-bar i { display: block; height: 100%; border-radius: 6px; }
.grid.c2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.card-body h4.mt { font-size: 14px; color: var(--muted); margin: 16px 0 6px; }
@media (max-width: 960px) { .grid.c2-1 { grid-template-columns: 1fr; } }

/* ===== مجموعات الصلاحيات ===== */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .chip { display: inline-flex; align-items: center; background: #eef2ff; color: #3730a3; border-radius: 14px; padding: 2px 10px; font-size: 12.5px; }
.perm-preview { margin-top: 14px; padding: 12px; border: 1px dashed var(--border-2); border-radius: 10px; background: #f8fafc; }
.perm-preview b { display: block; margin-bottom: 8px; font-size: 13.5px; color: #334155; }
.perm-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.perm-mod { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: #fff; cursor: pointer; }
.perm-mod.on { border-color: #34d399; background: #f0fdf4; }
.perm-mod.blocked { opacity: .6; cursor: not-allowed; background: #f8fafc; }
.perm-mod input { width: 17px; height: 17px; accent-color: #059669; }
.perm-mod b { font-size: 13.5px; }
.perm-mod small { display: block; color: var(--muted); font-size: 12px; }
.perm-mod.blocked small { color: #b45309; }

/* ===== ترويسة المطبوعات والتوقيعات ===== */
.print-head { border-bottom: 2px solid #1f5f5b; padding-bottom: 10px; margin-bottom: 14px; display: none; justify-content: space-between; align-items: flex-end; gap: 16px; }
.print-head .ph-main { display: flex; align-items: center; gap: 12px; }
.print-head .ph-main.center { flex-direction: column; text-align: center; flex: 1; }
.print-head img { height: 60px; }
.print-head b { font-size: 17px; }
.print-head .ph-main div div { font-size: 12px; color: #444; }
.print-head .ph-meta { font-size: 11px; color: #555; text-align: start; }
.print-foot { position: fixed; bottom: 0; inset-inline: 0; text-align: center; font-size: 11px; color: #555; border-top: 1px solid #ccc; padding-top: 4px; }
.sig-block { margin-top: 36px; position: relative; break-inside: avoid; }
.sig-block .sigs { display: flex; justify-content: space-around; gap: 20px; text-align: center; }
.sig-block .sigs div { display: flex; flex-direction: column; gap: 6px; min-width: 140px; }
.sig-block .sigs span { min-height: 18px; }
.sig-block .sigs i { font-style: normal; color: #555; font-size: 12px; }
.sig-block .stamp { position: absolute; inset-inline-start: 46%; top: -10px; height: 90px; opacity: .85; }
@media print { .print-head { display: flex !important; } }
.print-preview { border: 1px dashed var(--border-2); border-radius: 10px; padding: 16px; background: #fff; }
.print-preview .print-head, .print-preview .print-foot { display: flex !important; position: static; }
.print-preview .print-foot { display: block !important; margin-top: 14px; }
.sig-rows .row { margin-bottom: 8px; align-items: end; }

/* الخطاب الصادر عند الطباعة: تُخفى بطاقات الشاشة ويظهر الخطاب. */
.letter { font-size: 15px; line-height: 2; }
.letter .letter-meta { display: flex; flex-direction: column; align-items: flex-start; font-size: 13px; margin-bottom: 18px; }
.letter .letter-body { white-space: pre-wrap; min-height: 200px; margin: 14px 0 40px; }
.letter .letter-sign { display: flex; flex-direction: column; align-items: center; margin-inline-start: auto; width: 240px; }
@media print { .letter ~ * {} body:has(.letter) .content > .grid, body:has(.letter) .content > .page-head { display: none !important; } }

/* ===== الاستمارات ===== */
.fk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.fk .fk-field.wide, .fk .fk-section, .fk .fk-consent { grid-column: 1 / -1; }
.fk-section { border-bottom: 2px solid var(--primary-100, #dbeafe); padding: 10px 0 4px; margin-top: 6px; }
.fk-section b { font-size: 15px; color: var(--primary, #1f5f5b); }
.fk-section small { display: block; color: var(--muted); font-size: 12px; }
.fk-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.fk-opt { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-2, #d1d5db); border-radius: 8px; padding: 7px 12px; cursor: pointer; background: #fff; }
.fk-opt:has(input:checked) { border-color: var(--primary, #1f5f5b); background: #f0fdfa; }
.fk-consent { display: flex; gap: 10px; align-items: flex-start; background: #f8fafc; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; padding: 12px; cursor: pointer; }
.fk-consent input { margin-top: 5px; width: 17px; height: 17px; }
.fk-help { color: var(--muted); font-size: 12px; }
.fk-answers .fk-row { display: grid; grid-template-columns: minmax(140px, 38%) 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--border, #e5e7eb); }
.fk-answers .fk-row span { color: var(--muted); }
.fk-answers .fk-row b { font-weight: 600; white-space: pre-wrap; }
@media (max-width: 640px) { .fk { grid-template-columns: 1fr; } }
/* محرر الاستمارات */
.fb-field { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: #fff; margin-bottom: 8px; }
.fb-field.section { background: #f0fdfa; border-color: #99f6e4; }
.fb-field .ord { display: flex; flex-direction: column; }
.fb-field .ord button { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 0 4px; font-size: 12px; }
.fb-field .meta { font-size: 12px; color: var(--muted); }
.fb-field .acts { display: flex; gap: 6px; }
.form-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.form-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; border: 1.5px solid #8b5e34; border-radius: 12px; padding: 22px 16px; background: #fff; cursor: pointer; transition: box-shadow .15s; }
.form-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.form-card i { font-size: 40px; color: #8b5e34; }
.form-card b { font-size: 16px; color: #3f2a14; }
.form-card small { color: #6b7280; font-size: 13px; }
.form-card.off { opacity: .55; border-style: dashed; }

/* مستودع القروض */
.loan-stock { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.ls-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.ls-card.empty { background: #fef2f2; border-color: #fecaca; }
.ls-amount { font-size: 22px; font-weight: 800; color: #0f766e; }
.ls-amount small { font-size: 13px; color: var(--muted); font-weight: 500; }
.ls-avail b { font-size: 20px; color: #059669; }
.ls-card.empty .ls-avail b { color: #dc2626; }

/* ===== صفحة الدخول ===== */
.lg { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); background: #fff; }
.lg-brand { position: relative; overflow: hidden; color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 48px 56px 28px;
  background: linear-gradient(155deg, var(--primary-dark) 0%, var(--primary-2) 55%, var(--primary) 100%); }
/* نقش هندسي خفيف بلون الهوية. */
.lg-brand::before { content: ""; position: absolute; inset: 0; opacity: .09; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.2'%3E%3Cpath d='M40 6l10 24 24 10-24 10-10 24-10-24-24-10 24-10z'/%3E%3Ccircle cx='40' cy='40' r='8'/%3E%3C/g%3E%3C/svg%3E"); background-size: 80px 80px; }
/* توهج خفيف بلون الهوية يتلاشى تدريجيًا، بلا حافة. */
.lg-brand::after { content: ""; position: absolute; width: 560px; height: 560px; inset-inline-end: -220px; bottom: -260px; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 65%); }
.lg-brand-in, .lg-brand-foot { position: relative; z-index: 1; }
.lg-logo { display: inline-grid; place-items: center; background: #fff; border-radius: 22px; padding: 14px 18px; box-shadow: 0 12px 30px rgba(0,0,0,.25); min-width: 110px; min-height: 110px; }
.lg-logo img { height: 110px; width: auto; max-width: 240px; object-fit: contain; display: block; }
.lg-mark { width: 90px; height: 90px; display: grid; place-items: center; font-size: 44px; font-weight: 800; color: var(--primary); }
.lg-brand h1 { color: #fff; font-size: 34px; font-weight: 800; margin: 26px 0 4px; line-height: 1.35; }
.lg-tag { margin: 0; color: rgba(255,255,255,.75); font-size: 15px; }
.lg-notice { display: flex; gap: 10px; align-items: flex-start; margin-top: 26px; max-width: 460px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-inline-start: 4px solid var(--accent); border-radius: 12px; padding: 12px 14px; font-size: 14px; backdrop-filter: blur(4px); }
.lg-notice i { color: var(--accent-soft); margin-top: 4px; }
.lg-points { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 12px; }
.lg-points li { display: flex; gap: 12px; align-items: center; color: rgba(255,255,255,.88); font-size: 14px; }
.lg-points i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.12); color: var(--accent-soft); }
.lg-brand-foot { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13.5px; color: rgba(255,255,255,.8); }
.lg-brand-foot a { color: #fff; text-decoration: none; font-weight: 700; }
.lg-brand-foot a:hover { text-decoration: underline; }
.lg-form { display: grid; place-items: center; padding: 40px 24px; background: linear-gradient(180deg, #fff, var(--primary-soft)); }
.lg-form-in { width: min(400px, 100%); }
.lg-mobile-head { display: none; }
.lg-form h2 { font-size: 28px; font-weight: 800; color: var(--text); margin: 0; }
.lg-sub { color: var(--muted); margin: 6px 0 28px; font-size: 14.5px; }
.lg-field { display: block; margin-bottom: 18px; }
.lg-field > span { display: block; font-size: 13.5px; font-weight: 700; color: var(--text-2); margin-bottom: 7px; }
.lg-input { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--border-2); border-radius: 12px; padding: 0 14px; height: 52px; transition: border-color .15s, box-shadow .15s; }
.lg-input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.lg-input > i { color: var(--muted-2); }
.lg-input input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 15px; background: transparent; min-width: 0; text-align: start; }
.lg-eye { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 6px; font-size: 15px; }
.lg-err { background: var(--danger-soft); color: var(--danger); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; font-size: 13.5px; }
.lg-btn { width: 100%; height: 52px; border: 0; border-radius: 12px; background: var(--primary); color: #fff; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
  display: flex; gap: 10px; align-items: center; justify-content: center; box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 35%, transparent); transition: background .15s, transform .1s; }
.lg-btn:hover { background: var(--primary-2); }
.lg-btn:active { transform: translateY(1px); }
.lg-btn:disabled { opacity: .7; cursor: wait; }
.lg-help { color: var(--muted); font-size: 13px; margin: 18px 0 0; text-align: center; }
.lg-copy { margin-top: 36px; text-align: center; color: var(--muted-2); font-size: 12px; }
@media (max-width: 900px) {
  .lg { grid-template-columns: 1fr; }
  .lg-brand { display: none; }
  .lg-form { place-items: start center; padding-top: 32px; background: linear-gradient(180deg, var(--primary-soft), #fff 40%); }
  .lg-mobile-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 26px; text-align: center; }
  .lg-mobile-head img { height: 90px; width: auto; max-width: 220px; background: #fff; border-radius: 16px; padding: 8px; box-shadow: var(--shadow); }
  .lg-mobile-head .lg-mark { background: #fff; border-radius: 16px; box-shadow: var(--shadow); }
  .lg-mobile-head b { font-size: 20px; color: var(--text); }
  .lg-form h2, .lg-sub { text-align: center; }
}

/* ألوان الصندوق */
.palettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.palette { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--border); border-radius: 10px; background: #fff; padding: 8px 10px; cursor: pointer; font: inherit; font-size: 13px; text-align: start; }
.palette.on { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.palette .sw { display: inline-flex; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.palette .sw i { width: 18px; height: 26px; display: block; }
.theme-preview { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; max-width: 520px; }
.tp-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: linear-gradient(135deg, var(--primary-dark), var(--primary)); color: #fff; }
.tp-dot { width: 22px; height: 22px; border-radius: 6px; background: var(--accent); }
.tp-chip { margin-inline-start: auto; background: rgba(255,255,255,.18); border-radius: 8px; padding: 2px 10px; font-size: 12px; }
.tp-body { padding: 12px; background: var(--bg); }
.tp-head { background: var(--panel-head); border: 1px solid var(--panel-head-border); border-radius: 8px; padding: 8px 12px; font-weight: 700; color: var(--text); }
.tp-row { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.tp-row a { color: var(--primary); }

/* ===== البحث السريع ===== */
.tb-search { display: flex; align-items: center; gap: 10px; margin-inline-start: 18px; width: min(440px, 40vw); height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; text-align: start; }
.tb-search:hover { border-color: var(--primary); background: #fff; }
.tb-search span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
kbd { font-family: inherit; font-size: 11px; border: 1px solid var(--border-2); border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; background: #fff; color: var(--muted); white-space: nowrap; direction: ltr; }
.gs-back { position: fixed; inset: 0; z-index: 200; background: rgba(15,23,42,.45); backdrop-filter: blur(2px); display: flex; justify-content: center; align-items: flex-start; padding: 9vh 16px 16px; }
.gs { width: min(680px, 100%); max-height: 78vh; display: flex; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: 0 25px 60px rgba(0,0,0,.3); overflow: hidden; }
.gs-input { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 62px; border-bottom: 1px solid var(--border); }
.gs-input > i { color: var(--primary); font-size: 18px; }
.gs-input input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 16px; background: transparent; min-width: 0; }
.gs-input kbd { cursor: pointer; }
.gs-list { overflow-y: auto; padding: 6px 8px 10px; }
.gs-group + .gs-group { margin-top: 4px; }
.gs-gh { display: flex; align-items: center; gap: 8px; padding: 10px 10px 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.gs-gh .ico { width: 24px; height: 24px; font-size: 11px; }
.gs-gh small { font-weight: 400; }
.gs-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 0; border-radius: 10px; background: none; cursor: pointer; font: inherit; text-align: start; color: var(--text-2); }
.gs-item > i:first-child { width: 18px; text-align: center; color: var(--muted-2); }
.gs-item.on { background: var(--primary-soft); }
.gs-item.on > i:first-child { color: var(--primary); }
.gs-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gs-t b { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-t small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-go { color: var(--primary); opacity: 0; font-size: 12px; }
.gs-item.on .gs-go { opacity: 1; }
.gs-empty { padding: 30px; text-align: center; color: var(--muted); }
.gs-foot { display: flex; gap: 18px; padding: 10px 18px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: 12px; color: var(--muted); flex-wrap: wrap; }
@media (max-width: 760px) { .tb-search span, .tb-search kbd { display: none; } .tb-search { width: 40px; justify-content: center; margin-inline-start: 6px; } .gs-back { padding-top: 12px; } .gs-foot { display: none; } }

/* ===== الجداول بطاقاتٍ على الجوال ===== */
@media (max-width: 700px) {
  .table-wrap { overflow: visible; }
  .table.cardify, .table.cardify tbody, .table.cardify tfoot, .table.cardify tr, .table.cardify td { display: block; width: 100%; }
  .table.cardify thead { display: none; }
  .table.cardify tr { border: 1px solid var(--border); border-radius: 12px; margin: 0 0 10px; padding: 4px 14px; background: var(--surface); box-shadow: var(--shadow); }
  .table.cardify tr.click:hover td { background: transparent; }
  .table.cardify td { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 38px; padding: 7px 0 !important; border: 0; border-bottom: 1px dashed var(--border);
    background: transparent !important; text-align: end !important; word-break: break-word; }
  .table.cardify td::before { content: attr(data-label); flex: none; max-width: 46%; color: var(--muted); font-size: 12px; font-weight: 600; text-align: start; }
  .table.cardify td[data-label=""]::before { display: none; }
  .table.cardify td:empty { display: none; }
  .table.cardify td:last-child { border-bottom: 0; }
  /* أول خلية عنوان البطاقة. */
  .table.cardify tbody tr:not(.grp) td:first-child { font-size: 14.5px; font-weight: 700; color: var(--text); }
  .table.cardify td.acts { justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
  .table.cardify td.acts::before { display: none; }
  .table.cardify tr.grp { background: var(--panel-head); border-color: var(--panel-head-border); box-shadow: none; padding: 2px 12px; }
  .table.cardify tr.grp td { justify-content: flex-start; }
  .table.cardify tfoot tr { background: var(--surface-2); }
  .table.cardify td .input { max-width: 58%; }
  .klist .table.cardify { padding: 0 12px 4px; }
}

/* شبكة خيارات بمربعات اختيار (تُستخدم في النظام واللوحة) */
.mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.mod { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: #fff; cursor: pointer; }
.mod.on { border-color: #34d399; background: #f0fdf4; }
.mod input { width: 18px; height: 18px; accent-color: #059669; flex: none; }
.mod b { font-size: 14px; }
.mod small { display: block; color: var(--muted); font-size: 12px; }

/* ===== صفحة طلب الموظف ===== */
.rq-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.rq-actions .spacer { flex: 1; }
.btn.warnbtn { background: #f5b301; border-color: #f5b301; color: #fff; }
.btn.warnbtn:hover { background: #e0a400; }
.btn.infobtn { background: #17a2b8; border-color: #17a2b8; color: #fff; }
.btn.infobtn:hover { background: #138496; }
.btn.wa { background: #25d366; border-color: #25d366; color: #fff; }
.btn.wa:hover { background: #1fb457; }
.btn.outline { background: #fff; border: 1.5px solid #17a2b8; color: #17a2b8; }
.rq-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(260px, 1fr); gap: 18px; align-items: start; }
.rq-main { border-top: 4px solid #f5b301; overflow: hidden; }
.rq-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.rq-head h3 { margin: 0; font-size: 18px; }
.rq-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 18px 20px; background: var(--bg); border-bottom: 1px solid var(--border); }
.rq-tile { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04); min-width: 0; }
.rq-tile > div { display: flex; flex-direction: column; min-width: 0; }
.rq-tile small { color: var(--muted); font-size: 12.5px; }
.rq-tile b { font-size: 14.5px; overflow-wrap: anywhere; }
.rq-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 16px; }
.rq-ico.red { background: #fde8e8; color: #e02424; } .rq-ico.blue { background: #e1effe; color: #1c64f2; }
.rq-ico.green { background: #def7ec; color: #057a55; } .rq-ico.amber { background: #fdf6b2; color: #c27803; }
.rq-ico.purple { background: #edebfe; color: #7e3af2; } .rq-ico.rose { background: #fce8f3; color: #d61f69; }
.rq-body { padding: 18px 20px 22px; }
.rq-body h4 { margin: 0 0 14px; font-size: 16px; }
.rq-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; margin: 0; }
.rq-kv > div { min-width: 0; } .rq-kv > div.wide { grid-column: 1 / -1; }
.rq-kv dt { color: var(--muted); font-size: 12.5px; margin-bottom: 3px; }
.rq-kv dd { margin: 0; font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
.rq-box-label { color: var(--muted); font-size: 12.5px; margin: 18px 0 6px; }
.rq-box { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; white-space: pre-wrap; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.rq-files { padding: 18px; }
.rq-files-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.rq-files-head h3 { margin: 0; font-size: 17px; color: var(--text-2); font-weight: 600; }
.rq-files-head label.btn { cursor: pointer; }
.rq-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; border: 2px dashed var(--border-2); border-radius: 10px; padding: 34px 16px; cursor: pointer; background: var(--bg); }
.rq-drop.off { cursor: default; }
.rq-drop:hover:not(.off) { border-color: #17a2b8; }
.rq-drop-ico { width: 62px; height: 62px; border-radius: 50%; background: #dbeafe; color: #2563eb; display: grid; place-items: center; font-size: 24px; }
.rq-drop b { font-size: 16px; }
.rq-drop small { color: var(--muted); }
.rq-kinds { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; max-width: 230px; }
.rq-kinds span { border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; font-size: 11.5px; color: var(--muted); background: #fff; }
.rq-file-list .files { margin: 0; }
.rq-log summary { padding: 14px 18px; cursor: pointer; font-weight: 700; }
@media (max-width: 900px) {
  .rq-grid { grid-template-columns: 1fr; }
  .rq-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .rq-kv { grid-template-columns: 1fr; }
}
@media print {
  .rq-grid { grid-template-columns: 1fr; }
  .rq-tiles { grid-template-columns: repeat(3, 1fr); }
  .rq-files { display: none; }
}

/* الشاشات الصغيرة: لا يتجاوز الإطار عرض الشاشة (كان الشريط العلوي يوسّع الصفحة كلها). */
@media (max-width: 960px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .topbar { min-width: 0; }
}
@media (max-width: 520px) {
  .topbar { gap: 6px; padding-inline: 10px; }
  .topbar .tb-icon { width: 34px; height: 34px; }
  .rq-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px; }
  .rq-tile { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .rq-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* شريط التنبيه بوجود تحديث للنظام */
.update-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 24px 0; padding: 10px 14px; border-radius: 10px;
  background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; font-size: 14px; }
.update-bar .btn { margin-inline-start: auto; }
@media (max-width: 520px) { .update-bar { margin: 8px 12px 0; } }

/* تنبيه الخروج التلقائي لعدم النشاط */
.idle-warn { position: fixed; inset-inline: 16px; bottom: 16px; z-index: 9999; margin: 0 auto; max-width: 520px; display: flex; align-items: center; gap: 10px;
  background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; border-radius: 12px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.15); font-size: 14px; }
.idle-warn span { flex: 1; }
.lg-note { background: #fff7ed; color: #9a3412; border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; font-size: 13.5px; }

/* برامج المستفيد ومبالغها */
.prog-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.prog { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; background: #fff; }
.prog.on { border-color: var(--primary); background: var(--primary-soft); }
.prog .check { flex: 1; margin: 0; }
.prog .input { width: 110px; height: 34px; padding: 4px 8px; }

/* ملفي */
.me-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; margin-bottom: 16px; width: fit-content; max-width: 100%; }
.me-grid { display: grid; grid-template-columns: minmax(460px, 1fr) minmax(0, 1.6fr); gap: 16px; align-items: start; }
.me-card { display: grid; grid-template-columns: minmax(190px, .9fr) minmax(0, 1fr); overflow: hidden; }
.me-id { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 22px 16px; border-inline-end: 1px solid var(--border); }
.me-info { padding: 22px 20px; }
.me-info h3 { margin: 0 0 18px; font-size: 16px; }
.me-photo { position: relative; width: 92px; height: 92px; border-radius: 50%; background: #eef2f7; display: grid; place-items: center; margin-bottom: 10px; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--border); }
.me-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.me-photo > i { font-size: 40px; color: #c3cad5; }
.me-photo-btn { position: absolute; bottom: -2px; inset-inline-start: -2px; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid var(--border); display: grid; place-items: center; color: var(--primary); cursor: pointer; font-size: 13px; }
.me-id h2 { margin: 4px 0 0; font-size: 18px; }
.me-job { color: #0d9488; font-weight: 700; font-size: 14px; }
.me-iban { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.me-iban small { color: var(--muted); }
.me-iban b { font-size: 12px; overflow-wrap: anywhere; }
.me-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.me-tile { justify-content: space-between; padding: 16px; }
.me-tabs button i { margin-inline-end: 4px; opacity: .7; }
.me-none { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; border: 2px dashed var(--border-2); border-radius: 12px; padding: 40px 16px; }
.me-none span { width: 72px; height: 72px; border-radius: 50%; background: #f0fdfa; display: grid; place-items: center; font-size: 28px; color: #0d9488; margin-bottom: 8px; }
.me-none b { font-size: 17px; }
.me-none small { color: var(--muted); }
.userchip .uc-av { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.me-info dd { white-space: nowrap; }
@media (max-width: 1350px) { .me-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .me-card { grid-template-columns: minmax(0, 1fr); } .me-id { border-inline-end: 0; border-bottom: 1px solid var(--border); } }

/* تنبيه الاشتراك */
.sub-alert { width: min(440px, 100%); overflow: hidden; }
.sub-alert-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: linear-gradient(90deg, #f59e0b, #c2570c); color: #fff; }
.sub-alert-head b { font-size: 16px; }
.sub-alert-head button { border: 0; background: none; color: #fff; font-size: 18px; cursor: pointer; }
.sub-alert-body { padding: 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sub-alert-msg { display: flex; gap: 10px; align-items: flex-start; text-align: start; background: #fdba74; color: #fff; border-radius: 6px; padding: 14px; font-weight: 700; line-height: 1.8; background: #f0b26b; }
.sub-alert-msg i { font-size: 20px; margin-top: 4px; }
.sub-alert-ico { font-size: 30px; color: #d97706; margin-top: 8px; }
.sub-alert-body p { margin: 0 0 6px; color: #475569; }

/* رسالة تجريبية لمزوّد الرسائل */
.sms-test { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); padding-top: 14px; }

/* توقيعاتي */
.me-sig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; }
.me-sig h4 { margin: 0 0 10px; font-size: 15px; }
.me-sig-now img { display: block; max-width: 100%; max-height: 120px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px; margin-bottom: 10px; }
.me-sig-uses { margin-top: 16px; font-size: 13.5px; }
.me-sig-uses ul { margin: 6px 0; padding-inline-start: 20px; }
.me-sig-pad { display: flex; flex-direction: column; gap: 10px; }
.me-sig-pad canvas { width: 100%; max-width: 600px; aspect-ratio: 600 / 220; background: #fff; border: 2px dashed var(--border-2); border-radius: 10px; touch-action: none; cursor: crosshair; }
.sig-img { display: block; max-height: 60px; max-width: 160px; margin: 2px auto 0; object-fit: contain; }
.rq-sig .sig-img { margin: 6px 0 0; max-height: 44px; }
.letter-sign .sig-img { margin: 6px 0 0; max-height: 70px; }
@media (max-width: 760px) { .me-sig { grid-template-columns: minmax(0, 1fr); } }

/* معاينة أمر الصرف */
.aid-prev-nums { display: flex; flex-wrap: wrap; gap: 14px 40px; }
.aid-prev-nums > div { display: flex; flex-direction: column; }
.aid-prev-nums b { font-size: 20px; }
.aid-sample { margin: 12px 0 0; padding-inline-start: 20px; columns: 2 240px; font-size: 13.5px; }
.perm-preview .chip.off { background: #f1f5f9; color: #64748b; }
.perm-preview .chip.off small { font-size: 11px; color: #94a3b8; }
.perm-preview b.mt { margin-top: 12px; }

/* إعلانات المالك و«ما الجديد» */
.ann-bars { display: flex; flex-direction: column; gap: 8px; padding: 12px 24px 0; }
.ann-bar { display: flex; gap: 12px; align-items: flex-start; border-radius: 10px; padding: 12px 14px; border: 1px solid; }
.ann-bar > i { font-size: 18px; margin-top: 2px; }
.ann-bar > div { flex: 1; display: flex; flex-direction: column; gap: 2px; white-space: pre-wrap; }
.ann-bar button { border: 0; background: none; cursor: pointer; color: inherit; font-size: 16px; opacity: .7; }
.ann-bar.info { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.ann-bar.warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.ann-bar.danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.wn-modal { width: min(520px, 100%); overflow: hidden; }
.wn-modal-head { display: flex; gap: 14px; align-items: center; padding: 18px 20px; background: linear-gradient(135deg, var(--primary), #7c3aed); color: #fff; }
.wn-modal-head > i { font-size: 26px; }
.wn-modal-head b { display: block; font-size: 17px; }
.wn-modal-head small { opacity: .85; }
.wn-modal-body { padding: 16px 20px; overflow-y: auto; }
.wn-intro { margin: 0 0 8px; color: var(--muted); }
.wn-items { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; line-height: 1.7; }
.wn-card { padding: 18px 20px; margin-bottom: 14px; }
.wn-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.wn-head small { display: block; }
.wn-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #f5f3ff; color: #7c3aed; font-size: 17px; }
.footer a.ver { text-decoration: none; }
@media (max-width: 720px) { .ann-bars { padding: 10px 12px 0; } }

/* استيراد البيانات */
.imp-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.imp-type { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: start; border: 1.5px solid var(--border); border-radius: 12px; padding: 16px; background: #fff; cursor: pointer; font: inherit; }
.imp-type i { font-size: 22px; color: var(--primary); }
.imp-type small { color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.imp-type.on { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 3px var(--primary-soft); }
.imp-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; border: 2px dashed var(--border-2); border-radius: 12px; padding: 26px 16px; cursor: pointer; background: #fafbfc; }
.imp-drop i { font-size: 34px; color: #16a34a; }
.imp-drop small { color: var(--muted); }
.imp-file-opts { gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-top: 14px; }
.imp-file-opts .field { margin: 0; min-width: 160px; }
.imp-count { display: flex; flex-direction: column; padding: 4px 10px; }
.imp-count b { font-size: 22px; }
.imp-map td { vertical-align: middle; }
.imp-map select.input { min-width: 180px; }
.imp-map tr.imp-miss td:first-child { color: #b91c1c; }
.imp-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 20px; margin: 16px 0 10px; align-items: end; }
.imp-bar { height: 10px; background: #e5e7eb; border-radius: 6px; overflow: hidden; margin: 10px 0 6px; }
.imp-bar span { display: block; height: 100%; background: var(--primary); transition: width .3s; }
.imp-sum { display: flex; flex-wrap: wrap; gap: 12px; }
.imp-sum > div { display: flex; flex-direction: column; min-width: 120px; padding: 12px 16px; border-radius: 10px; background: #f8fafc; border: 1px solid var(--border); }
.imp-sum b { font-size: 24px; }
.imp-sum .ok b { color: #059669; } .imp-sum .info b { color: #2563eb; } .imp-sum .danger b { color: #dc2626; } .imp-sum .warn b { color: #d97706; }

/* التاريخ الهجري */
.hijri-date { display: flex; flex-direction: column; gap: 4px; }
.hijri-date .hd-toggle { font-size: 13px; }
.hijri-date .hd-bad { color: #dc2626; }

/* إضافة مستفيد: إكمال البيانات */
.benef-new { overflow: hidden; margin-top: 16px; }
.benef-new .bn-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 18px 22px; background: var(--primary-soft); border-bottom: 1px solid var(--border); }
.benef-new .bn-head h3 { margin: 0; font-size: 18px; }
.benef-new .bn-grid { padding: 18px 22px 4px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.benef-new .bn-actions { justify-content: center; padding: 0 22px; }
.benef-new .bn-note { font-size: 13px; padding: 0 22px 16px; text-align: center; }
@media (max-width: 900px) { .benef-new .bn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .benef-new .bn-grid { grid-template-columns: minmax(0, 1fr); } }

/* خانة التاريخ (بديل type=date) */
.date-in { position: relative; display: block; }
.date-in > .input { padding-inline-end: 40px; }
.date-in .date-btn { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--muted); width: 32px; height: 30px; cursor: pointer; border-radius: 6px; }
.date-in .date-btn:hover { background: #f1f5f9; color: var(--primary); }
.date-in .date-native { position: absolute; inset-inline-end: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.date-in.bad > .input { border-color: #dc2626; }

/* تخصيص الصفحة الرئيسية */
.hero .clock small { display: block; }
.hero .home-cfg { border: 0; background: rgba(255,255,255,.14); color: #fff; width: 34px; height: 34px; border-radius: 10px; cursor: pointer; flex: none; align-self: flex-start; }
.hero .home-cfg:hover { background: rgba(255,255,255,.26); }
.home-cust { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 24px; }
.home-cust h4 { margin: 0 0 10px; font-size: 14.5px; }
.home-cust .seg button.on { background: var(--primary); color: #fff; }
.hc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hc-list li { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; background: #fff; }
.hc-list li > span { flex: 1; }
.hc-list li > i { color: var(--primary); width: 18px; text-align: center; }
.hc-cards { display: flex; flex-direction: column; gap: 6px; }

/* ما تم صرفه */
.paid-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 14px 16px; }
.paid-sum > div { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: #fff; }
.paid-sum .ico { color: var(--primary); }
.paid-sum b { font-size: 17px; }
.paid-sum .muted { font-size: 12px; }
.paid-sum .tot { background: var(--primary-soft); border-color: var(--primary); }

/* مركز التقارير */
.rc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 16px; align-items: start; }
.rc-cats { order: 2; padding: 6px 0; position: sticky; top: 84px; }
.rc-cats-h { padding: 14px 18px; font-weight: 800; color: var(--primary); border-bottom: 1px solid var(--border); }
.rc-cats a { display: flex; gap: 10px; align-items: center; padding: 11px 18px; color: var(--text-2); text-decoration: none; border-inline-start: 3px solid transparent; }
.rc-cats a:hover { background: #f8fafc; }
.rc-cats a.on { background: var(--primary-soft); color: var(--primary); border-inline-start-color: var(--primary); font-weight: 700; }
.rc-cats a i { width: 18px; text-align: center; }
.rc-main { order: 1; padding: 18px; }
.rc-title { margin: 0 0 16px; color: var(--primary); font-size: 18px; }
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.rc-card { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; border: 1px solid var(--border); border-radius: 10px; padding: 16px; background: #fff; color: var(--text); text-decoration: none; min-height: 104px; transition: box-shadow .15s; }
.rc-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.07); }
.rc-card-h { display: flex; gap: 12px; align-items: center; }
.rc-card-h .ico { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.rc-go { color: var(--primary); font-size: 13px; }
.rc-filters { display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 14px 16px; margin-bottom: 4px; }
.rc-filters .field { margin: 0; min-width: 170px; flex: 1; max-width: 240px; }
.rc-summary { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 16px 0; }
.rc-count { padding: 10px 16px; font-size: 12.5px; }
.rc-print-title { text-align: center; margin-bottom: 10px; }
.rc-print-title h2 { margin: 0; }
@media (max-width: 900px) { .rc-layout { grid-template-columns: minmax(0, 1fr); } .rc-cats { order: 0; position: static; display: flex; overflow-x: auto; padding: 0; } .rc-cats-h { display: none; } .rc-cats a { white-space: nowrap; border-inline-start: 0; border-bottom: 3px solid transparent; } .rc-cats a.on { border-bottom-color: var(--primary); } }

/* ======================================================================
   الهوية البصرية للنظام: قائمة جانبية داكنة بلون الصندوق، وخلفية دافئة،
   ولوحات بيضاء عناوينها بعلامة باللون المميز. الألوان من «التصاميم والقوالب».
   ====================================================================== */
:root { --bg: #f3f4f1; --border: #e4e7e3; --radius: 14px; --shadow: 0 1px 2px rgba(20,30,25,.05), 0 6px 18px rgba(20,30,25,.04); --primary-deep: #0d3a36; }
.sidebar { background: linear-gradient(180deg, var(--primary-dark) 0%, var(--primary-deep) 100%); border: 0; padding: 12px 10px 30px; scrollbar-color: rgba(255,255,255,.18) transparent; }
.sidebar .nav-group { color: rgba(255,255,255,.42); font-size: 10.5px; }
.sidebar .nav a, .sidebar .nav span.soon { color: rgba(255,255,255,.80); height: 42px; border-radius: 10px; margin: 1px 0; }
.sidebar .nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar .nav a.active { background: rgba(255,255,255,.13); color: #fff; font-weight: 700; box-shadow: inset -3px 0 0 var(--accent); }
.sidebar .nav .ico { background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.92) !important; border-radius: 9px; }
.sidebar .nav a.active .ico { background: var(--accent) !important; color: #fff !important; }
.sidebar .nav .tag.soon-tag { background: rgba(255,255,255,.10); color: rgba(255,255,255,.6); }
.topbar { box-shadow: 0 1px 0 var(--border), 0 4px 14px rgba(20,30,25,.05); border-bottom: 0; }
.topbar .brand b { color: var(--primary-dark); }
.tb-icon, .userchip { background: var(--surface-2); }
.page-head { background: var(--surface); border-color: var(--border); }
.page-head h1 { color: var(--primary-dark); font-weight: 800; }
.page-head h1::before, .card-head h3::before { content: ""; display: inline-block; width: 4px; height: 1em; border-radius: 2px; background: var(--accent); margin-inline-end: 9px; vertical-align: -2px; }
.card-head { background: var(--surface); border-bottom-color: var(--border); }
.card-head h3 { color: var(--primary-dark); }
.btn { border-radius: 10px; }
.crumbbar { background: transparent; border-bottom: 0; }
.footer { background: transparent; }

/* ======================== ملف المستفيد ======================== */
.bp-hero { overflow: visible; position: relative; padding: 0; }
.bp-band { height: 92px; border-radius: var(--radius) var(--radius) 0 0; background:
  radial-gradient(circle at 12% 120%, color-mix(in srgb, var(--accent) 55%, transparent) 0 70px, transparent 71px),
  radial-gradient(circle at 30% -40%, rgba(255,255,255,.10) 0 90px, transparent 91px),
  linear-gradient(120deg, var(--primary-dark), var(--primary)); }
.bp-hero-in { display: flex; gap: 22px; align-items: flex-end; padding: 0 24px 16px; margin-top: -54px; flex-wrap: wrap; }
.bp-avatar { position: relative; width: 122px; height: 122px; flex: none; border-radius: 50%; border: 5px solid #fff; background: var(--primary-soft); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.bp-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.bp-initials { width: 100%; height: 100%; display: grid; place-items: center; font-size: 34px; font-weight: 800; color: var(--primary); }
.bp-cam { position: absolute; bottom: 4px; inset-inline-end: 0; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; background: var(--accent); color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 13px; }
.bp-cam.del { bottom: auto; top: 4px; background: var(--danger); width: 28px; height: 28px; font-size: 11px; }
.bp-who { flex: 1; min-width: 260px; padding-top: 58px; }
.bp-name { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bp-name h1 { font-size: 21px; font-weight: 800; color: var(--text); }
.bp-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.bp-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 12px; }
.bp-fact { display: flex; align-items: center; gap: 10px; }
.bp-fact > i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.bp-fact small { display: block; font-size: 11px; color: var(--muted); line-height: 1.4; }
.bp-fact b { font-size: 13.5px; color: var(--text); font-weight: 700; }
.bp-complete { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); cursor: help; }
.bp-complete span { font-size: 12px; font-weight: 700; color: var(--text-2); }
.bp-complete small { font-size: 11px; color: var(--muted); }
.bp-toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 24px; border-top: 1px solid var(--border); align-items: center; }
.bp-toolbar .spacer { flex: 1; }
.bp-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 24px 14px; border-top: 1px dashed var(--border); background: var(--panel-head); border-radius: 0 0 var(--radius) var(--radius); }
.bp-acts b { color: var(--primary-dark); font-size: 13px; margin-inline-end: 4px; }
.bp-menu { position: relative; }
.bp-menu-list { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 30; min-width: 260px; max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 34px rgba(15,23,42,.16); padding: 6px; }
.bp-menu-list button, .bp-menu-foot { display: flex; gap: 10px; align-items: center; width: 100%; padding: 9px 12px; border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: start; color: var(--text-2); font-size: 13px; text-decoration: none !important; }
.bp-menu-list button:hover, .bp-menu-foot:hover { background: var(--primary-soft); color: var(--primary); }
.bp-menu-list i { width: 16px; color: var(--primary); text-align: center; }
.bp-menu-sep { font-size: 11px; color: var(--muted); padding: 10px 12px 4px; border-top: 1px solid var(--border); margin-top: 4px; }
.bp-menu-foot { border-top: 1px solid var(--border); margin-top: 4px; color: var(--muted); font-size: 12px; }
.bp-alerts { display: grid; gap: 8px; margin-top: 14px; }
.bp-alerts .alert { display: flex; gap: 10px; align-items: center; margin: 0; }
.bp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; margin-top: 16px; align-items: start; }
.bp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 12px; }
.bp-tile { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; box-shadow: var(--shadow); min-height: 84px; transition: transform .15s, box-shadow .15s; }
.bp-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(20,30,25,.08); }
.bp-tile .ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none; font-size: 16px; }
.bp-tile small { display: block; color: var(--muted); font-size: 11.5px; }
.bp-tile b { display: block; color: var(--text); font-size: 14.5px; font-weight: 700; line-height: 1.5; }
.bp-tile b small { display: block; color: var(--muted); font-weight: 500; font-size: 11.5px; }
.bp-tile em { display: block; font-style: normal; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.bp-tile.bp-status { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 7%, #fff); }
.bp-tile.bp-status.s-inactive, .bp-tile.bp-status.s-rejected { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 6%, #fff); }
.bp-tile.bp-status:not(.s-active):not(.s-inactive):not(.s-rejected) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, #fff); }
.bp-tile.near { border-color: var(--accent); }
.bp-tile.bad { border-color: var(--danger); }
.bp-tile.bad em { color: var(--danger); font-weight: 700; }
.bp-side { display: grid; gap: 12px; }
.bp-side .card + .card { margin-top: 0; }
.bp-ent { display: flex; gap: 14px; padding: 16px; border-width: 1.5px; }
.bp-ent .ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; flex: none; }
.bp-ent.yes { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 6%, #fff); }
.bp-ent.yes .ico { background: var(--ok); color: #fff; }
.bp-ent.no .ico { background: var(--surface-2); color: var(--muted); }
.bp-ent small { color: var(--muted); font-size: 12px; }
.bp-ent b { display: block; font-size: 22px; font-weight: 800; color: var(--text); }
.bp-ent p { margin: 2px 0 0; font-size: 12px; color: var(--text-2); }
.bp-box { padding: 14px 16px; }
.bp-box h3 { font-size: 13.5px; display: flex; gap: 8px; align-items: center; color: var(--primary-dark); margin-bottom: 8px; }
.bp-box h3 i { color: var(--accent); }
.bp-box h3 a { margin-inline-start: auto; font-size: 12px; font-weight: 500; }
.bp-money { list-style: none; margin: 0; padding: 0; }
.bp-money li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.bp-money li:last-child { border-bottom: 0; }
.bp-money .ok { color: var(--ok); }
.bp-money .bad { color: var(--danger); }
.bp-paid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bp-paid div { background: var(--primary-soft); border-radius: 10px; padding: 10px; }
.bp-paid small { display: block; font-size: 11px; color: var(--muted); }
.bp-paid b { font-size: 15px; color: var(--primary-dark); }
.bp-log { list-style: none; margin: 0; padding: 0; }
.bp-log li { position: relative; padding: 4px 0 10px; padding-inline-start: 14px; border-inline-start: 2px solid var(--border); margin-inline-start: 5px; font-size: 12.5px; }
.bp-log li::before { content: ""; position: absolute; inset-inline-start: -6px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; }
.bp-log small { display: block; color: var(--muted); font-size: 11px; }
@media (max-width: 1100px) { .bp-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .bp-hero-in { justify-content: center; text-align: center; } .bp-who { padding-top: 0; } .bp-name, .bp-facts { justify-content: center; } .bp-toolbar .spacer { display: none; } }

/* ======================== مطبوعات المستفيد ======================== */
.bp-doc { display: none; }
@media print {
  body.pdoc .content > :not(.bp-doc) { display: none !important; }
  body.pdoc .bp-doc { display: block; color: #000; font-size: 12px; }
  body.pdoc .bp-doc .print-head { display: flex !important; }
}
.doc-title { text-align: center; font-size: 16px; margin: 6px 0 12px; }
.doc-kv { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.doc-kv th, .doc-kv td { border: 1px solid #555; padding: 6px 8px; text-align: center; }
.doc-kv th { background: #e6ece9; color: #7a3d10; font-weight: 700; width: 17%; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.doc-kv td { font-weight: 700; width: 33%; }
.doc-sec { margin: 12px 0; break-inside: avoid; }
.doc-sec h4 { text-align: center; font-size: 13px; margin: 0 0 6px; }
.doc-table { width: 100%; border-collapse: collapse; }
.doc-table th, .doc-table td { border: 1px solid #555; padding: 5px 8px; text-align: center; }
.doc-table th { background: #e6ece9; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.doc-table tfoot td { font-weight: 800; }
.doc-table tfoot tr.ok td { background: #2e9e3e; color: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.doc-table tfoot tr.bad td { background: #e53935; color: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.doc-empty { text-align: center; color: #666; padding: 6px; border: 1px dashed #aaa; }
.doc-p { white-space: pre-wrap; line-height: 2.1; font-size: 14px; }
.doc-letter { padding: 6px 10px; }
.doc-ref { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; margin-bottom: 26px; }
.doc-to { font-weight: 800; font-size: 15px; white-space: pre-wrap; }
.doc-subj { font-weight: 700; text-decoration: underline; }
.doc-lines div { border-bottom: 1px dotted #777; height: 26px; }
.doc-boxes { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 4px 0; }
.doc-signs { display: flex; justify-content: space-between; margin-top: 30px; }
.bcard { width: 88mm; margin: 20mm auto 0; border: 1.5px solid var(--primary); border-radius: 4mm; overflow: hidden; font-size: 10px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.bcard-top { display: flex; align-items: center; gap: 6px; background: var(--primary); color: #fff; padding: 2.5mm 3mm; }
.bcard-top img { height: 9mm; background: #fff; border-radius: 1.5mm; padding: .5mm; }
.bcard-top b { display: block; font-size: 11px; }
.bcard-top small { font-size: 8px; opacity: .85; }
.bcard-top span { margin-inline-start: auto; background: var(--accent); padding: .5mm 2.5mm; border-radius: 3mm; font-size: 9px; font-weight: 700; }
.bcard-body { display: flex; gap: 3mm; padding: 3mm; }
.bcard-photo { width: 22mm; height: 26mm; border-radius: 2mm; background: #eef2f0; display: grid; place-items: center; overflow: hidden; flex: none; color: #9aa; font-size: 26px; }
.bcard-photo img { width: 100%; height: 100%; object-fit: cover; }
.bcard dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2mm 3mm; flex: 1; }
.bcard dt { font-size: 8px; color: #666; }
.bcard dd { margin: 0; font-weight: 700; font-size: 10px; }
.bcard dl div:first-child { grid-column: 1 / -1; }
.bcard dl div:first-child dd { font-size: 11.5px; }

/* ======================== بطاقات المؤشرات ======================== */
.kpi { background: var(--surface) !important; color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: 14px; padding: 16px 18px 14px; min-height: 128px; transition: transform .15s, box-shadow .15s; --kc: var(--primary); }
.kpi::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--kc); }
.kpi:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,30,25,.09); }
.kpi .t { color: var(--text-2); font-size: 13.5px; padding-inline-end: 48px; min-height: 40px; }
.kpi .t .i { display: none; }
.kpi .bg { top: 14px; bottom: auto; inset-inline-end: 14px; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 16px; opacity: 1; background: color-mix(in srgb, var(--kc) 12%, #fff); color: var(--kc); }
.kpi .v { color: var(--text); font-size: 30px; margin-top: 0; }
.kpi .v small, .kpi .v .u { color: var(--muted); opacity: 1; }
.kpi .v .sep { background: var(--border-2); }
.kpi .v .v2 { color: var(--text-2); opacity: 1; }
.kpi .sub, .kpi .late-note { font-size: 12px; color: var(--muted); margin-top: -2px; }
.kpi .late-note { color: var(--danger); font-weight: 700; }
.kpi .f { color: var(--kc); opacity: 1; padding-top: 8px; }
.kpi .f .pill { background: none; color: var(--kc); padding: 0; border-radius: 0; }
.kpi.late { --kc: var(--danger); }
.k1, .kg { --kc: var(--primary); }
.k2, .kb { --kc: #2f6fb0; }
.k3 { --kc: #7c4dba; }
.k4, .ka { --kc: var(--accent); }
.k5, .kr { --kc: #c2414b; }

/* إكمال الملف */
a.bp-complete.link { text-decoration: none !important; transition: border-color .15s, box-shadow .15s; cursor: pointer; }
a.bp-complete.link:hover { border-color: var(--primary); box-shadow: 0 6px 16px rgba(20,30,25,.08); }
.bp-complete em { font-style: normal; font-size: 11.5px; color: var(--primary); font-weight: 700; margin-top: 2px; }
.cmp { padding: 0; }
.cmp-head { display: flex; gap: 18px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.cmp-head h3 { font-size: 16px; color: var(--primary-dark); }
.cmp-head p { margin: 4px 0 0; font-size: 13px; }
.cmp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; padding: 18px 22px; }
.cmp-item { border: 1px solid var(--border); border-inline-start: 4px solid var(--danger); border-radius: 12px; padding: 12px 14px; background: var(--surface); transition: border-color .15s; }
.cmp-item.done { border-inline-start-color: var(--ok); background: color-mix(in srgb, var(--ok) 4%, #fff); }
.cmp-label { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); margin-bottom: 8px; font-size: 13.5px; }
.cmp-label .ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; background: var(--danger-soft); color: var(--danger); }
.cmp-item.done .cmp-label .ico { background: var(--ok-soft); color: var(--ok); }
.cmp-photo { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 90px; border: 2px dashed var(--border-2); border-radius: 10px; cursor: pointer; color: var(--muted); }
.cmp-photo img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
.cmp-actions { padding: 0 22px 20px; }

/* ======================== صفحات القوائم والأقسام ======================== */
.klist { padding: 0; overflow: hidden; }
.klist-head { margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.klist-head h3 { font-size: 15.5px; color: var(--primary-dark); gap: 10px; }
.klist-head h3 .kl-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-soft); }
.klist-head h3 .kl-ico i, .klist-head h3 i { color: var(--primary); font-size: 14px; }
.btn.kl-ftoggle.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.btn.back, .btn.ghost.back { background: transparent; border-color: transparent; color: var(--muted); }
.btn.back:hover { color: var(--text); background: var(--surface-2); }
.kl-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 14px 18px; background: var(--panel-head); border-bottom: 1px solid var(--border); }
.kl-fgrid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 14px; min-width: 260px; }
.kl-fgrid .field { margin: 0; }
.kl-fgrid .field > .cap { font-size: 12px; color: var(--muted); }
.kl-fgrid .field > .cap i { color: var(--primary); font-size: 11px; margin-inline-end: 3px; }
.kl-fgrid .full { grid-column: 1 / -1; }
.kl-factions { display: flex; gap: 8px; }
.klist > .groupby, .klist > .groupsel { margin: 0; padding: 12px 18px 0; }
.klist .table-wrap { border: 0; border-radius: 0; margin: 0; }
.klist .pager { border: 0; border-top: 1px solid var(--border); border-radius: 0; margin: 0; }
.klist .empty { border: 0; }
.table th, .klist .table th { background: var(--thead); color: var(--primary-dark); border: 0; border-bottom: 1px solid var(--border); font-size: 12px; padding: 11px 10px; }
.table td { border-bottom-color: var(--border); }
.table tbody tr:nth-child(even) td { background: transparent; }
.table tr.click:hover td { background: var(--primary-soft); }
.table th.sortable i { color: var(--primary); }
.table tr.grp td { background: var(--panel-head) !important; color: var(--primary-dark); }
.table tr.grp td i { color: var(--accent); }
.pager { background: var(--surface); }
.chip-id, .chip-mobile, .chip-no { border: 0; background: var(--surface-2); color: var(--text); border-radius: 6px; font-weight: 600; letter-spacing: .2px; }
.chip-mobile { color: var(--primary-dark); }
.list-title { display: none; }
.filters-bar { padding: 10px 18px 0; }
.filters-toggle { display: none; }
.filters { background: var(--panel-head); border-bottom: 1px solid var(--border); margin-top: 10px; }
/* صفحات الأقسام: أيقونات بلون الصندوق بدل المربعات متعددة الألوان */
.tile { border-radius: 12px; transition: transform .15s, box-shadow .15s, border-color .15s; }
.tile:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 8px 20px rgba(20,30,25,.08); }
.tile .ico { width: 42px; height: 42px; border-radius: 12px; background: var(--primary-soft) !important; color: var(--primary) !important; font-size: 16px; }
.tile:hover .ico { background: var(--primary) !important; color: #fff !important; }
.tile .count { background: var(--accent-soft); color: var(--accent); border-radius: 10px; padding: 0 10px; font-size: 13px; }
.linkcard .lh { border-bottom-color: var(--border); padding: 14px 16px; }
.linkcard .lh .ico { width: 30px; height: 30px; border-radius: 9px; background: var(--primary) !important; color: #fff !important; font-size: 12px; }
.linkcard .lh b { color: var(--primary-dark); }
.linkcard li a, .linkcard li span.soon { padding: 9px 16px; }
.linkcard li a:hover { background: var(--primary-soft); color: var(--primary); }
.linkcard li .ico { background: none !important; color: var(--primary) !important; width: 18px; font-size: 12px; }
.linkcard li span.soon .ico { color: var(--muted-2) !important; }

/* التقارير والمطبوعات بألوان الصندوق */
.rc-card-h .ico { background: var(--primary-soft); color: var(--primary); }
.rc-card:hover .rc-card-h .ico { background: var(--primary); color: #fff; }
.rc-card-h b { display: block; }
.rc-card-h small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; line-height: 1.6; }
.rc-card:hover { border-color: var(--primary); }
.doc-kv th, .doc-table th { background: color-mix(in srgb, var(--primary) 15%, #fff); color: var(--primary-dark); }
.doc-kv th, .doc-kv td, .doc-table th, .doc-table td { border-color: color-mix(in srgb, var(--primary) 35%, #999); }
.doc-sec h4 { color: var(--primary-dark); border-bottom: 2px solid var(--accent); display: table; margin-inline: auto; padding: 0 12px 2px; }
.doc-table tfoot tr.ok td, .doc-table tfoot tr.bad td, .doc-table tfoot td { background: color-mix(in srgb, var(--primary) 15%, #fff); color: var(--primary-dark); border-top: 2px solid var(--primary); }
.doc-table tfoot tr.bad td { color: var(--danger); }
.doc-title { color: var(--primary-dark); }

/* القوائم المكتوبة (الحي) */
.typelookup .tl-new { display: block; margin-top: 4px; font-size: 11.5px; color: var(--accent); }

/* الخطابات */
.doc-to { display: flex; justify-content: space-between; gap: 20px; }
.doc-note { margin-top: 6px; }
.doc-reply td { height: 46px; }

/* قوائم الإظهار والإخفاء (الجنسيات) */
.vlist-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.vlist-bar .input { flex: 1; min-width: 200px; max-width: 320px; }
.vlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; max-height: 360px; overflow-y: auto; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.vl-item { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; font-size: 13px; color: var(--muted); }
.vl-item.on { border-color: var(--primary); color: var(--text); background: var(--primary-soft); }

/* صفحة المستفيد: الأقسام تحت المربعات بجانب العمود الجانبي، وعلى الشاشات الضيقة: المربعات ثم الجانبي ثم الأقسام */
.bp-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bp-main > .bp-tabs { margin-top: 0; }
@media (max-width: 1100px) { .bp-main { display: contents; } .bp-tiles { order: 1; } .bp-side { order: 2; } .bp-tabs { order: 3; } }
.bp-tabs > .tabs { flex-wrap: wrap; overflow: visible; row-gap: 0; padding: 0 8px; }
.bp-tabs > .tabs button { padding: 12px 11px; }

/* إضافة مستفيد على خطوات */
.wz { padding: 0; overflow: hidden; }
.wz-steps { list-style: none; margin: 0; padding: 18px 16px 14px; display: flex; gap: 0; border-bottom: 1px solid var(--border); background: var(--panel-head); overflow-x: auto; }
.wz-step { flex: 1; min-width: 104px; position: relative; text-align: center; }
.wz-step::before { content: ""; position: absolute; top: 19px; inset-inline-start: calc(-50% + 22px); inset-inline-end: calc(50% + 22px); height: 3px; border-radius: 2px; background: var(--border-2); }
.wz-step:first-child::before { display: none; }
.wz-step.done::before, .wz-step.on::before { background: var(--primary); }
.wz-step button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; cursor: default; font: inherit; color: var(--muted); padding: 0 4px; }
.wz-step.can button { cursor: pointer; }
.wz-n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--border-2); color: var(--muted); font-size: 15px; position: relative; z-index: 1; transition: all .15s; }
.wz-step.done .wz-n { background: var(--primary); border-color: var(--primary); color: #fff; }
.wz-step.on .wz-n { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 18%, transparent); }
.wz-l { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.wz-step.on .wz-l { color: var(--primary-dark); font-weight: 800; }
.wz-step.done .wz-l { color: var(--text-2); }
.wz-body { padding: 20px 24px 8px; min-height: 260px; }
.wz-title { font-size: 17px; color: var(--primary-dark); margin: 0 0 4px; }
.wz-sub { margin: 0 0 14px; font-size: 13px; }
.wz-id { display: flex; gap: 10px; max-width: 460px; }
.wz-id .input { font-size: 17px; letter-spacing: 1px; text-align: center; }
.wz-grid { margin-top: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wz-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--border); background: var(--surface-2); }
.wz-review { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.wz-rev { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.wz-rev-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; color: var(--primary-dark); }
.wz-rev dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.wz-rev dt { font-size: 11.5px; color: var(--muted); }
.wz-rev dd { margin: 0; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 900px) { .wz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .wz-grid { grid-template-columns: minmax(0, 1fr); } .wz-l { display: none; } .wz-step { min-width: 52px; } .wz-step.on .wz-l { display: block; position: absolute; top: 46px; inset-inline: -40px; } .wz-steps { padding-bottom: 34px; } .wz-body { padding: 16px; } .wz-count { display: none; } }

/* صحة النظام (لوحة التحكم) */
.h-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.h-box { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); }
.h-box i { grid-row: span 2; font-size: 24px; color: var(--muted); }
.h-box b { font-size: 22px; color: var(--text); }
.h-box span { font-size: 12px; color: var(--muted); }
.h-box.ok i { color: var(--ok); } .h-box.warn i { color: var(--accent); } .h-box.bad i { color: var(--danger); }
.h-box.bad { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.h-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.h-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 20px; padding: 2px 10px; font-size: 12px; border: 1px solid var(--border); cursor: help; }
.h-chip.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.h-chip.warn { background: var(--accent-soft); color: var(--warn); border-color: transparent; }
.h-chip.bad { background: var(--danger-soft); color: var(--danger); border-color: transparent; font-weight: 700; }
.h-badge { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; font-size: 13px; }
.h-badge.ok { color: var(--ok); } .h-badge.warn { color: var(--warn); } .h-badge.bad { color: var(--danger); }
.h-details { list-style: none; margin: 8px 0 0; padding: 0; font-size: 12.5px; text-align: start; }
.h-details li { padding: 3px 0; color: var(--text-2); } .h-details li.bad { color: var(--danger); } .h-details li.warn { color: var(--warn); }
.h-events { list-style: none; margin: 0; padding: 0; }
.h-events li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.h-events li:last-child { border-bottom: 0; }
.h-events li > i { margin-top: 4px; } .h-events li.bad > i { color: var(--danger); } .h-events li.warn > i { color: var(--accent); } .h-events li.ok > i { color: var(--ok); }
.h-events b { display: block; font-size: 13px; color: var(--text); } .h-events span { display: block; font-size: 12.5px; color: var(--text-2); } .h-events small { color: var(--muted); font-size: 11.5px; }

/* جلسة الدعم الفني */
.support-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 22px; background: #fff7e6; color: #7a4a00; border-bottom: 1px solid #f3d9a4; font-size: 13px; }
.support-bar > i { font-size: 16px; }
.support-bar.mine { background: #1e293b; color: #fff; border-bottom-color: #0f172a; }
.support-bar .btn { margin-inline-start: auto; }

.support-on { display: inline-flex; align-items: center; gap: 6px; background: #fff7e6; color: #7a4a00; border: 1px solid #f3d9a4; border-radius: 10px; padding: 6px 12px; font-size: 13px; font-weight: 700; }

/* النسخ الخارجي (لوحة التحكم) */
.off-steps { margin: 6px 0 10px; padding-inline-start: 20px; font-size: 13px; line-height: 2; }
details summary { cursor: pointer; padding: 6px 0; }

/* ===== التطبيق على الجوال ===== */
.mbar { display: none; }
.files-in { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.files-in .input { flex: 1; min-width: 200px; }
.cam-btn { cursor: pointer; }
@media (min-width: 761px) { .cam-btn { display: none; } }
@media (max-width: 760px) {
  .mbar { display: flex; position: fixed; bottom: 0; inset-inline: 0; z-index: 55; background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(20,30,25,.08); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  .mbar a, .mbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; font: inherit; font-size: 11px; color: var(--muted); background: none; border: 0; text-decoration: none !important; cursor: pointer; }
  .mbar .mb-i { position: relative; font-size: 18px; line-height: 1.2; }
  .mbar .mb-i em { position: absolute; top: -6px; inset-inline-start: -10px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 10px; font-style: normal; font-weight: 700; display: grid; place-items: center; }
  .mbar .on { color: var(--primary); font-weight: 700; }
  .main { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .footer { display: none; }
}
@media (display-mode: standalone) { .crumbbar { display: none; } }

/* الإشعارات */
.push-card { padding: 14px 18px; margin-bottom: 16px; }
.push-h { display: flex; gap: 12px; align-items: center; }
.push-h .ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 16px; flex: none; }
.push-h b { display: block; color: var(--text); }
.push-h small { color: var(--muted); }
.push-prompt { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 22px 0; }
.push-prompt span { flex: 1; min-width: 200px; }

/* الانتقال إلى الرابط الرسمي */
.moved-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 18px; background: #fff7e6; color: #7a4a00; border-bottom: 1px solid #f3d9a4; font-size: 13.5px; }
.moved-bar > i { font-size: 16px; }
.moved-bar span { flex: 1; min-width: 220px; }
.moved-bar bdi { font-weight: 700; margin-inline-start: 4px; }

/* النوافذ على الجوال: لا تتجاوز عرض الشاشة، والأزرار تلتف */
.modal-back { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.modal { max-width: 100%; min-width: 0; }
.modal-body { overflow-x: hidden; }
.modal-foot { flex-wrap: wrap; }
.seg { flex-wrap: wrap; }
.hc-list li > span { min-width: 0; overflow-wrap: anywhere; }
.bp-tabs { scroll-margin-top: 76px; }

/* الخطابات: سطر الموضوع بعد المرسل إليه */
.doc-letter .doc-subj { text-decoration: none; font-weight: 400; margin: 14px 0 10px; font-size: 14.5px; padding: 6px 10px; border-inline-start: 4px solid var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); }
.doc-letter .doc-subj b { color: var(--primary-dark, var(--primary)); }
.doc-letter .doc-to + .doc-subj { margin-top: 18px; }

/* هوية «قريب»: الشعار وسطر «بتشغيل نظام قريب» */
.qareeb-mark { display: inline-block; vertical-align: middle; flex: none; }
.qareeb-by { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.qareeb-by b { font-weight: 700; color: var(--text-2, var(--text)); }
.qareeb-by .qareeb-mark { color: var(--primary); }
.lg-qareeb { display: inline-flex; align-items: center; gap: 16px; margin-top: 10px; }
.lg-qareeb > span { display: flex; flex-direction: column; line-height: 1.35; }
.lg-qareeb b { font-size: 30px; color: #fff; line-height: 1.25; }
.lg-qareeb small { font-size: 16px; color: rgba(255,255,255,.8); }
.lg-mark .qareeb-mark { display: block; }
@media (max-width: 640px) { .footer .qareeb-by { display: none; } }

/* ===== الرئيسية بنمط «قائمة العمل» ===== */
.wq-head { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.wq-hello { flex: 1; min-width: 220px; }
.wq-hello h2 { margin: 0; font-size: 21px; color: var(--text); }
.wq-hello small { color: var(--muted); font-size: 13px; }
.wq-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.wq-quick .btn { background: var(--surface); }
.wq-search { all: unset; box-sizing: border-box; display: none; align-items: center; gap: 10px; width: 100%; background: var(--surface); border: 1px solid var(--border-2); border-radius: 12px; padding: 13px 16px; color: var(--muted); cursor: text; margin-bottom: 16px; font-size: 14px; }
.wq-search:hover { border-color: var(--primary); }
.wq-search:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.wq-search > i { color: var(--primary); font-size: 16px; }
.wq-search span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wq-search kbd { font: 11px/1 inherit; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; color: var(--muted); }
.wq-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.wq-main { padding: 0; overflow: hidden; }
.wq-main-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.wq-main-h h3, .wq-box h3 { margin: 0; font-size: 16px; color: var(--text); }
.wq-count { background: var(--primary-soft); color: var(--primary-dark); border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700; }
.wq-late-n { color: var(--danger); font-size: 12.5px; font-weight: 700; }
.wq-chips { display: flex; gap: 4px; margin-inline-start: auto; flex-wrap: wrap; }
.wq-chips button { all: unset; cursor: pointer; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; color: var(--muted); }
.wq-chips button:hover { background: var(--surface-2); }
.wq-chips button.on { background: var(--primary); color: #fff; }
.wq-list { list-style: none; margin: 0; padding: 0; }
.wq-list li { border-bottom: 1px solid var(--border); border-inline-start: 4px solid transparent; }
.wq-list li:last-child { border-bottom: 0; }
.wq-list li.late { border-inline-start-color: var(--danger); }
.wq-list li.wait { border-inline-start-color: var(--accent); }
.wq-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; text-decoration: none; color: inherit; }
.wq-item:hover { background: var(--surface-2); }
.wq-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); flex: none; }
.wq-list li.late .wq-ico { background: var(--danger-soft); color: var(--danger); }
.wq-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wq-txt b { font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wq-txt small { color: var(--muted); font-size: 12.5px; }
.wq-list li.late .wq-txt small { color: var(--danger); }
.wq-item .btn { flex: none; }
.wq-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 42px 16px; text-align: center; color: var(--muted); }
.wq-empty > i { font-size: 30px; color: var(--ok); }
.wq-empty b { color: var(--text); font-size: 15px; }
.wq-side { display: flex; flex-direction: column; gap: 16px; }
.wq-box { padding: 14px 16px; }
.wq-box h3 { margin-bottom: 6px; }
.wq-stat { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--muted); font-size: 13.5px; }
.wq-stat:last-child { border-bottom: 0; }
.wq-stat b { color: var(--text); font-size: 15px; white-space: nowrap; }
a.wq-stat[href]:hover b { color: var(--primary); }
.wq-stat.warn b { color: var(--warn); }
.hc-group + .hc-group { margin-top: 12px; }
.hc-group > b { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
@media (max-width: 900px) { .wq-grid { grid-template-columns: minmax(0, 1fr); } }
/* البحث الكبير على الجوال فقط، حيث يصغر بحث الشريط العلوي إلى أيقونة. */
@media (max-width: 760px) { .wq-search { display: flex; } .wq-search kbd { display: none; } }
@media (max-width: 560px) { .wq-chips { margin-inline-start: 0; width: 100%; } .wq-item .btn { display: none; } .wq-quick { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; scrollbar-width: none; } .wq-quick .btn { white-space: nowrap; flex: none; } }
/* ===== الهوية التراثية: المشهد المرسوم (scene.js) بلونَي الصندوق ===== */
.hscene { display: block; width: 100%; height: 100%; }
.hscene .s-glow { fill: var(--accent); opacity: .13; }
.hscene .s-sun { fill: var(--accent); opacity: .5; }
.hscene .s-far { fill: color-mix(in srgb, var(--primary) 45%, #fff); opacity: .2; }
.hscene .s-mid { fill: color-mix(in srgb, var(--primary) 65%, #000); opacity: .5; }
.hscene .s-near { fill: color-mix(in srgb, var(--primary) 42%, #000); }
.hscene .s-door { fill: color-mix(in srgb, var(--primary) 22%, #000); }
.hscene .s-win { fill: var(--accent); opacity: .85; }
.hscene .s-trunk { fill: none; stroke: color-mix(in srgb, var(--primary) 42%, #000); stroke-width: 6; stroke-linecap: round; }
.hscene .s-frond { fill: none; stroke: color-mix(in srgb, var(--primary) 42%, #000); stroke-width: 5; stroke-linecap: round; }
.hscene-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.done-art { display: block; margin: 0 auto 6px; max-width: 100%; height: auto; }
.done-art .d-shadow { fill: color-mix(in srgb, var(--primary) 10%, transparent); }
.done-art .d-leaf { fill: #4f8a5b; }
.done-art .d-paper { fill: #fff; stroke: color-mix(in srgb, var(--accent) 65%, #fff); stroke-width: 3; }
.done-art .d-line { stroke: color-mix(in srgb, var(--primary) 28%, #fff); stroke-width: 5; stroke-linecap: round; }
.done-art .d-check-bg { fill: #2f7d57; }
.done-art .d-check { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.done-art .d-dot { fill: none; stroke: var(--accent); stroke-width: 2; }

/* صفحة الدخول: المشهد أسفل جهة الصندوق، أو صورته الخاصة خلفيةً كاملة بتظليل. */
.lg-scene { position: absolute; inset: auto 0 0 0; height: 42%; pointer-events: none; z-index: 0; }
.lg-scene.img { inset: 0; height: 100%; }
.lg-scene.img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,.35) 45%, rgba(0,0,0,.5)); }
.lg-brand:has(.lg-scene.img)::before, .lg-brand:has(.lg-scene.img)::after { display: none; }

/* الرئيسية: ترويسة المشهد */
.wq-banner { position: relative; overflow: hidden; border-radius: 18px; min-height: 176px; margin-bottom: 16px; color: #fff;
  background: linear-gradient(165deg, var(--primary-deep, var(--primary-dark)) 0%, var(--primary-dark) 45%, var(--primary) 100%); }
.wq-banner .wq-scene { position: absolute; inset: auto 0 0 0; height: 80%; pointer-events: none; }
.wq-banner.img .wq-scene { inset: 0; height: 100%; }
.wq-banner.img .wq-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(0,0,0,.62), rgba(0,0,0,.2) 70%); }
.wq-banner-in { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding: 22px 24px 64px; }
.wq-id { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 240px; }
.wq-logo { width: 62px; height: 62px; flex: none; background: #fff; border-radius: 16px; display: grid; place-items: center; padding: 6px; box-shadow: 0 8px 22px rgba(0,0,0,.25); }
.wq-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.wq-banner .wq-hello h2 { color: #fff; font-size: 22px; text-shadow: 0 1px 8px rgba(0,0,0,.25); }
.wq-banner .wq-hello small { color: rgba(255,255,255,.85); }
.wq-banner .wq-quick .btn { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.28); backdrop-filter: blur(6px); }
.wq-banner .wq-quick .btn:hover { background: rgba(255,255,255,.26); }
.wq-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.wq-tile { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; text-decoration: none; color: inherit; box-shadow: var(--shadow); }
a.wq-tile[href]:hover { border-color: var(--primary); }
.wq-tile .ic { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: color-mix(in srgb, var(--primary) 12%, #fff); color: var(--primary); }
.wq-tile .tx { min-width: 0; }
.wq-tile b { display: block; font-size: 22px; line-height: 1.25; color: var(--text); white-space: nowrap; }
.wq-tile small { display: block; color: var(--muted); font-size: 12.5px; }
.wq-tile.warn .ic { background: color-mix(in srgb, var(--accent) 18%, #fff); color: var(--accent); }
.wq-tile.warn b { color: var(--warn); }
.wq-main-h h3 i { color: var(--accent); margin-inline-end: 4px; }
@media (max-width: 760px) { .wq-banner { min-height: 150px; } .wq-banner-in { padding: 16px 16px 54px; } .wq-banner .wq-hello h2 { font-size: 19px; } .wq-logo { width: 50px; height: 50px; }
  .wq-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wq-tile { padding: 10px; gap: 8px; } .wq-tile .ic { width: 38px; height: 38px; font-size: 15px; } .wq-tile b { font-size: 18px; } }

/* القائمة الجانبية: أفق البيوت والنخيل خافتًا في أسفلها. */
.sidebar { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 260'%3E%3Cpath fill='%23fff' fill-opacity='.07' d='M70 238 V192 L77 184 L84 192 L91 184 L98 192 L105 184 L112 192 L119 184 L126 192 L133 184 L140 192 V238Z M135 238 V174 L143 166 L151 174 L159 166 L167 174 L175 166 L183 174 L191 166 L199 174 L207 166 L215 174 L223 166 L231 174 V238Z M225 238 V198 L232.2 190 L239.5 198 L246.8 190 L254 198 L261.2 190 L268.5 198 L275.8 190 L283 198 V238Z M300 238 V166 L307.9 158 L315.7 166 L323.6 158 L331.4 166 L339.3 158 L347.1 166 L355 158 L362.9 166 L370.7 158 L378.6 166 L386.4 158 L394.3 166 L402.1 158 L410 166 V238Z M405 238 V188 L412.4 180 L419.8 188 L427.2 180 L434.6 188 L442 180 L449.4 188 L456.8 180 L464.2 188 L471.6 180 L479 188 V238Z M470 238 V180 L478 172 L486 180 L494 172 L502 180 L510 172 L518 180 L526 172 L534 180 V238Z M282 238 L285.6 134 L289.4 125 L293.2 134 L297 125 L300.8 134 L304.6 125 L308.4 134 L312 238Z M455 238 L458.1 152 L461.4 143 L464.7 152 L468 143 L471.3 152 L474.6 143 L477.9 152 L481 238Z M0 238 C200 230 400 236 600 233 S1000 230 1200 236 L1200 260 L0 260Z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-opacity='.07' stroke-width='6' stroke-linecap='round' d='M40 238 Q42 185.2 50 142 M560 238 Q557.2 173.1 546 120 M600 238 Q602.4 191.8 612 154 M660 238 Q658.4 199.5 652 168 M1110 238 Q1112 188.5 1120 148 M1160 238 Q1158.8 205 1154 178'/%3E%3Cpath fill='none' stroke='%23fff' stroke-opacity='.07' stroke-width='4' stroke-linecap='round' d='M50 142 Q26.2 126.6 6.8 157.9 M50 142 Q35.9 117.6 24.3 145.6 M50 142 Q47.1 118.3 44.8 140.8 M50 142 Q57.9 117.5 64.4 142.2 M50 142 Q68.9 121.5 84.4 150.6 M50 142 Q74.9 131.2 95.3 162.5 M50 142 Q29.2 138 12.1 164.9 M50 142 Q69.1 141.6 84.8 167.4 M546 120 Q522.2 104.6 502.8 135.9 M546 120 Q531.9 95.6 520.3 123.6 M546 120 Q543.1 96.3 540.8 118.8 M546 120 Q553.9 95.5 560.4 120.2 M546 120 Q564.9 99.5 580.4 128.6 M546 120 Q570.9 109.2 591.3 140.5 M546 120 Q525.2 116 508.1 142.9 M546 120 Q565.1 119.6 580.8 145.4 M612 154 Q588.2 138.6 568.8 169.9 M612 154 Q597.9 129.6 586.3 157.6 M612 154 Q609.1 130.3 606.8 152.8 M612 154 Q619.9 129.5 626.4 154.2 M612 154 Q630.9 133.5 646.4 162.6 M612 154 Q636.9 143.2 657.3 174.5 M612 154 Q591.2 150 574.1 176.9 M612 154 Q631.1 153.6 646.8 179.4 M652 168 Q628.2 152.6 608.8 183.9 M652 168 Q637.9 143.6 626.3 171.6 M652 168 Q649.1 144.3 646.8 166.8 M652 168 Q659.9 143.5 666.4 168.2 M652 168 Q670.9 147.5 686.4 176.6 M652 168 Q676.9 157.2 697.3 188.5 M652 168 Q631.2 164 614.1 190.9 M652 168 Q671.1 167.6 686.8 193.4 M1120 148 Q1096.2 132.6 1076.8 163.9 M1120 148 Q1105.9 123.6 1094.3 151.6 M1120 148 Q1117.1 124.3 1114.8 146.8 M1120 148 Q1127.9 123.5 1134.4 148.2 M1120 148 Q1138.9 127.5 1154.4 156.6 M1120 148 Q1144.9 137.2 1165.3 168.5 M1120 148 Q1099.2 144 1082.1 170.9 M1120 148 Q1139.1 147.6 1154.8 173.4 M1154 178 Q1130.2 162.6 1110.8 193.9 M1154 178 Q1139.9 153.6 1128.3 181.6 M1154 178 Q1151.1 154.3 1148.8 176.8 M1154 178 Q1161.9 153.5 1168.4 178.2 M1154 178 Q1172.9 157.5 1188.4 186.6 M1154 178 Q1178.9 167.2 1199.3 198.5 M1154 178 Q1133.2 174 1116.1 200.9 M1154 178 Q1173.1 177.6 1188.8 203.4'/%3E%3C/svg%3E"), linear-gradient(180deg, var(--primary-dark) 0%, var(--primary-deep) 100%);
  background-repeat: no-repeat; background-position: left bottom, 0 0; background-size: 175% auto, auto; }

/* ===== الإطار (1.31): القائمة الجانبية بطول الصفحة وفي رأسها الصندوق، وشريط علوي فاتح بمشهد خافت ===== */
:root { --gold: color-mix(in srgb, var(--accent) 50%, #f0c56a); }
.hscene.light .s-glow { fill: #f6d9a0; opacity: .35; } .hscene.light .s-sun { fill: #f4d39a; opacity: .8; }
.hscene.light .s-far { fill: #e2cfae; opacity: .95; } .hscene.light .s-mid { fill: #d6bd94; opacity: .9; }
.hscene.light .s-near { fill: #c4a476; } .hscene.light .s-door { fill: #b7996d; } .hscene.light .s-win { fill: #b7996d; opacity: .6; }
.hscene.light .s-trunk, .hscene.light .s-frond { stroke: #b39264; }
.topbar { background: linear-gradient(180deg, #fbf8f2, #f5efe5); }
.tb-scene { position: absolute; inset: 0 0 0 auto; width: 46%; overflow: hidden; transform: scaleX(-1); pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 50%, transparent 100%); mask-image: linear-gradient(90deg, #000 50%, transparent 100%); }
.tb-scene .hscene-img { opacity: .35; transform: scaleX(-1); }
.topbar > *:not(.tb-scene) { position: relative; z-index: 1; }
.topbar .tb-search { margin-inline-start: auto; background: rgba(255,255,255,.92); border-color: #ece4d7; border-radius: 12px; height: 42px; box-shadow: 0 3px 10px rgba(60,40,20,.05); }
.topbar .spacer { flex: 0 0 6px; }
.topbar .tb-icon { border-radius: 50%; width: 40px; height: 40px; background: #fff; border: 1px solid #ece4d7; color: var(--primary); box-shadow: 0 2px 8px rgba(60,40,20,.05); }
.topbar .tb-icon:hover { background: #fff; border-color: var(--primary); }
.topbar .userchip { background: transparent; border: 0; }
.userchip .uc-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
.userchip .uc-txt small { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.userchip .ico, .userchip .uc-av { width: 38px; height: 38px; border-radius: 50%; background: #f3ebdf; border: 1px solid #ece4d7; display: grid; place-items: center; color: var(--primary); }
/* رأس القائمة ثابت لا يتحرك مع تمريرها؛ والتمرير في قائمة الأقسام وحدها. */
.sidebar { display: flex; flex-direction: column; overflow: hidden; }
.sidebar > .nav { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; padding-bottom: 30px; }
.sb-brand { flex: none; display: flex; align-items: center; gap: 12px; padding: 6px 8px 16px; margin: 0 0 8px; border-bottom: 1px solid rgba(255,255,255,.1); text-decoration: none !important; }
.sb-logo { width: 60px; height: 60px; flex: none; background: #fff; border-radius: 16px; padding: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,.25); box-sizing: border-box; }
/* الشعار بأي نسبة (طولي أو عرضي) يبقى داخل إطاره كاملًا. */
.sb-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.sb-name { min-width: 0; display: flex; flex-direction: column; }
.sb-name b { color: #fff; font-size: 16px; line-height: 1.35; }
.sb-name small { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-size: 11px; margin-top: 4px; line-height: 1; }
.sidebar .nav .ico { background: none !important; width: 22px; height: 22px; color: rgba(255,255,255,.72) !important; font-size: 15px; }
.sidebar .nav a.active { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 52%, transparent), color-mix(in srgb, var(--gold) 22%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent); border-radius: 12px; }
.sidebar .nav a.active .ico { background: none !important; color: #fff !important; }
.brand img { object-fit: contain; }
@media (min-width: 961px) {
  .layout { grid-template-columns: var(--sidebar) minmax(0, 1fr); }
  .layout > .topbar { grid-column: 2; grid-row: 1; }
  .layout > .sidebar { grid-column: 1; grid-row: 1 / span 2; top: 0; height: 100vh; }
  .layout > .main { grid-column: 2; }
  .topbar .brand, .topbar .menu-btn { display: none; }
}
@media (max-width: 960px) { .tb-scene { width: 70%; } .sb-brand { padding-top: 2px; } }
@media (max-width: 600px) { .userchip .uc-txt { display: none; } }

/* ===== الرئيسية (1.31): بطاقة الترحيب المتدرجة والساعة، والمربعات، و«إجراءات سريعة» ===== */
.wq-hero { position: relative; overflow: hidden; border-radius: 20px; min-height: 196px; margin-bottom: 18px; color: #fff; box-shadow: 0 10px 26px rgba(60,40,20,.15);
  background: linear-gradient(180deg, var(--primary-deep) 0%, var(--primary-dark) 35%, color-mix(in srgb, var(--primary) 70%, #e2b65a) 85%, color-mix(in srgb, var(--primary) 45%, #f0c987) 100%); }
.wq-hero .wq-scene { position: absolute; inset: 0; }
.wq-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(270deg, var(--primary-deep) 0%, color-mix(in srgb, var(--primary-deep) 92%, transparent) 30%, color-mix(in srgb, var(--primary-dark) 55%, transparent) 52%, transparent 72%); }
.wq-hero.img::after { background: linear-gradient(270deg, rgba(20,12,4,.78) 0%, rgba(20,12,4,.55) 35%, rgba(20,12,4,.12) 70%, transparent 85%); }
.wq-hero .wq-hello { position: relative; z-index: 2; padding: 44px 40px; max-width: 62%; }
.wq-hero .wq-hello h2 { margin: 0; color: #fff; font-size: 30px; font-weight: 800; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.wq-hero .wave { display: inline-block; transform-origin: 70% 70%; animation: wq-wave 2.4s ease-in-out 1; }
@keyframes wq-wave { 0%,60%,100% { transform: rotate(0); } 10%,30% { transform: rotate(14deg); } 20%,40% { transform: rotate(-8deg); } }
.wq-hero .dt { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 12px; font-size: 14.5px; color: rgba(255,255,255,.9); }
.wq-hero .dt span + span::before { content: "|"; margin-inline-end: 12px; opacity: .5; }
.wq-clock { position: absolute; z-index: 2; inset-inline-end: 28px; top: 50%; transform: translateY(-50%); display: flex; align-items: baseline; gap: 8px; padding: 16px 24px; border-radius: 18px;
  background: rgba(20,12,4,.32); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,.25); color: #fff; }
.wq-clock b { font-size: 40px; font-weight: 800; line-height: 1.1; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.wq-clock small { font-size: 16px; font-weight: 700; color: var(--gold); }
.wq-tiles { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.wq-tile { justify-content: space-between; padding: 16px 18px; border-color: #ece4d7; border-radius: 16px; box-shadow: 0 4px 14px rgba(60,40,20,.05); }
.wq-tile .ic { width: 54px; height: 54px; font-size: 21px; background: #f3ebdf; color: var(--primary); }
.wq-tile b { font-size: 26px; font-weight: 800; }
.wq-tile.warn .ic { background: color-mix(in srgb, var(--gold) 30%, #fff); color: #8a5a12; }
.wq-tile.warn b { color: #8a5a12; }
.wq-quickcard { background: #f3ebdf; border: 1px solid #ece4d7; border-radius: 18px; padding: 14px 16px 16px; margin-bottom: 18px; }
.wq-qc-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.wq-qc-h h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 8px; }
.wq-qc-h h3 i { color: #d9a03c; }
.wq-cust, .wq-refresh { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; border: 1px solid #ece4d7; background: #fff; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.wq-cust i, .wq-refresh i { color: var(--accent); }
.wq-cust:hover, .wq-refresh:hover { border-color: var(--primary); color: var(--primary); }
.wq-qa-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.wq-qa { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid #ece4d7; font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none !important; box-shadow: 0 2px 8px rgba(60,40,20,.05); white-space: nowrap; }
.wq-qa i { color: var(--accent); font-size: 16px; }
.wq-qa:hover { border-color: var(--primary); }
.wq-qa-main { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 85%, #fff), var(--primary-dark)); color: #fff; border-color: transparent; font-size: 15px; }
.wq-qa-main .qa-ic { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; }
.wq-qa-main i { color: #fff; font-size: 13px; }
.wq-main-h .wq-refresh { margin-inline-start: auto; }
.wq-main-h .wq-chips { width: 100%; margin-inline-start: 0; }
@media (max-width: 760px) {
  .wq-hero { min-height: 150px; } .wq-hero .wq-hello { padding: 24px 18px; max-width: none; } .wq-hero .wq-hello h2 { font-size: 20px; }
  .wq-hero .dt { font-size: 12px; gap: 6px; } .wq-hero .dt span + span::before { margin-inline-end: 6px; }
  .wq-clock { top: auto; bottom: 12px; transform: none; inset-inline-end: 12px; padding: 6px 12px; border-radius: 12px; }
  .wq-clock b { font-size: 20px; } .wq-clock small { font-size: 11px; }
  .wq-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .wq-tile { padding: 10px 12px; } .wq-tile b { font-size: 19px; } .wq-tile .ic { width: 40px; height: 40px; font-size: 16px; }
  .wq-qa-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wq-qa-main { grid-column: 1 / -1; } .wq-qa { font-size: 12.5px; padding: 10px; white-space: normal; }
}

/* عناصر المشاهد الإضافية (الساحل، عسير، الواحة، المدينة، حائل) */
.hscene .s-water { fill: color-mix(in srgb, var(--primary) 55%, #000); opacity: .55; }
.hscene .s-wave { fill: none; stroke: color-mix(in srgb, var(--accent) 60%, #fff); stroke-width: 2.5; stroke-linecap: round; opacity: .45; }
.hscene .s-cloud { fill: #fff; opacity: .12; }
.hscene .s-terrace { fill: none; stroke: color-mix(in srgb, var(--primary) 30%, #000); stroke-width: 2; opacity: .45; }
.hscene .s-stripe { fill: none; stroke: var(--accent); stroke-width: 2; opacity: .35; }
.hscene .s-mtrunk { fill: none; stroke: color-mix(in srgb, var(--primary) 62%, #000); stroke-width: 5; stroke-linecap: round; opacity: .55; }
.hscene .s-mfrond { fill: none; stroke: color-mix(in srgb, var(--primary) 62%, #000); stroke-width: 4; stroke-linecap: round; opacity: .55; }
.hscene.light .s-water { fill: #d9c29c; opacity: .8; } .hscene.light .s-wave { stroke: #fff; opacity: .7; }
.hscene.light .s-cloud { fill: #fff; opacity: .5; } .hscene.light .s-terrace { stroke: #c4a476; }
.hscene.light .s-stripe { stroke: #b7996d; } .hscene.light .s-mtrunk, .hscene.light .s-mfrond { stroke: #cdb38c; opacity: .9; }

/* أفق القائمة الجانبية حسب المشهد المختار */
.sidebar[data-scene="najd"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 260'%3E%3Cpath fill='%23fff' fill-opacity='.07' d='M70 238 V192 L77 184 L84 192 L91 184 L98 192 L105 184 L112 192 L119 184 L126 192 L133 184 L140 192 V238Z M135 238 V174 L143 166 L151 174 L159 166 L167 174 L175 166 L183 174 L191 166 L199 174 L207 166 L215 174 L223 166 L231 174 V238Z M225 238 V198 L232.2 190 L239.5 198 L246.8 190 L254 198 L261.2 190 L268.5 198 L275.8 190 L283 198 V238Z M300 238 V166 L307.9 158 L315.7 166 L323.6 158 L331.4 166 L339.3 158 L347.1 166 L355 158 L362.9 166 L370.7 158 L378.6 166 L386.4 158 L394.3 166 L402.1 158 L410 166 V238Z M405 238 V188 L412.4 180 L419.8 188 L427.2 180 L434.6 188 L442 180 L449.4 188 L456.8 180 L464.2 188 L471.6 180 L479 188 V238Z M470 238 V180 L478 172 L486 180 L494 172 L502 180 L510 172 L518 180 L526 172 L534 180 V238Z M282 238 L285.6 134 L289.4 125 L293.2 134 L297 125 L300.8 134 L304.6 125 L308.4 134 L312 238Z M455 238 L458.1 152 L461.4 143 L464.7 152 L468 143 L471.3 152 L474.6 143 L477.9 152 L481 238Z M0 238 C200 230 400 236 600 233 S1000 230 1200 236 L1200 260 L0 260Z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-opacity='.07' stroke-width='5' stroke-linecap='round' d='M40 238 Q42 185.2 50 142 M560 238 Q557.2 173.1 546 120 M600 238 Q602.4 191.8 612 154 M660 238 Q658.4 199.5 652 168 M1110 238 Q1112 188.5 1120 148 M1160 238 Q1158.8 205 1154 178 M50 142 Q26.2 126.6 6.8 157.9 M50 142 Q35.9 117.6 24.3 145.6 M50 142 Q47.1 118.3 44.8 140.8 M50 142 Q57.9 117.5 64.4 142.2 M50 142 Q68.9 121.5 84.4 150.6 M50 142 Q74.9 131.2 95.3 162.5 M50 142 Q29.2 138 12.1 164.9 M50 142 Q69.1 141.6 84.8 167.4 M546 120 Q522.2 104.6 502.8 135.9 M546 120 Q531.9 95.6 520.3 123.6 M546 120 Q543.1 96.3 540.8 118.8 M546 120 Q553.9 95.5 560.4 120.2 M546 120 Q564.9 99.5 580.4 128.6 M546 120 Q570.9 109.2 591.3 140.5 M546 120 Q525.2 116 508.1 142.9 M546 120 Q565.1 119.6 580.8 145.4 M612 154 Q588.2 138.6 568.8 169.9 M612 154 Q597.9 129.6 586.3 157.6 M612 154 Q609.1 130.3 606.8 152.8 M612 154 Q619.9 129.5 626.4 154.2 M612 154 Q630.9 133.5 646.4 162.6 M612 154 Q636.9 143.2 657.3 174.5 M612 154 Q591.2 150 574.1 176.9 M612 154 Q631.1 153.6 646.8 179.4 M652 168 Q628.2 152.6 608.8 183.9 M652 168 Q637.9 143.6 626.3 171.6 M652 168 Q649.1 144.3 646.8 166.8 M652 168 Q659.9 143.5 666.4 168.2 M652 168 Q670.9 147.5 686.4 176.6 M652 168 Q676.9 157.2 697.3 188.5 M652 168 Q631.2 164 614.1 190.9 M652 168 Q671.1 167.6 686.8 193.4 M1120 148 Q1096.2 132.6 1076.8 163.9 M1120 148 Q1105.9 123.6 1094.3 151.6 M1120 148 Q1117.1 124.3 1114.8 146.8 M1120 148 Q1127.9 123.5 1134.4 148.2 M1120 148 Q1138.9 127.5 1154.4 156.6 M1120 148 Q1144.9 137.2 1165.3 168.5 M1120 148 Q1099.2 144 1082.1 170.9 M1120 148 Q1139.1 147.6 1154.8 173.4 M1154 178 Q1130.2 162.6 1110.8 193.9 M1154 178 Q1139.9 153.6 1128.3 181.6 M1154 178 Q1151.1 154.3 1148.8 176.8 M1154 178 Q1161.9 153.5 1168.4 178.2 M1154 178 Q1172.9 157.5 1188.4 186.6 M1154 178 Q1178.9 167.2 1199.3 198.5 M1154 178 Q1133.2 174 1116.1 200.9 M1154 178 Q1173.1 177.6 1188.8 203.4'/%3E%3C/svg%3E"), linear-gradient(180deg, var(--primary-dark) 0%, var(--primary-deep) 100%); }
.sidebar[data-scene="hail"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 260'%3E%3Cpath fill='%23fff' fill-opacity='.07' d='M362 168 V134 L369.4 126 L376.8 134 L384.2 126 L391.6 134 L399 126 L406.4 134 L413.8 126 L421.2 134 L428.6 126 L436 134 V168Z M352 168 L354.6 116 L357.4 107 L360.2 116 L363 107 L365.8 116 L368.6 107 L371.4 116 L374 168Z M430 168 L432.4 122 L434.9 113 L437.5 122 L440 113 L442.5 122 L445.1 113 L447.6 122 L450 168Z M580 238 V182 L587.1 174 L594.3 182 L601.4 174 L608.6 182 L615.7 174 L622.9 182 L630 174 L637.1 182 L644.3 174 L651.4 182 L658.6 174 L665.7 182 L672.9 174 L680 182 L687.1 174 L694.3 182 L701.4 174 L708.6 182 L715.7 174 L722.9 182 L730 174 L737.1 182 L744.3 174 L751.4 182 L758.6 174 L765.7 182 L772.9 174 L780 182 L787.1 174 L794.3 182 L801.4 174 L808.6 182 L815.7 174 L822.9 182 L830 174 L837.1 182 L844.3 174 L851.4 182 L858.6 174 L865.7 182 L872.9 174 L880 182 V238Z M566 238 V164 a14 10 0 0 1 28 0 V238Z M670 238 V164 a14 10 0 0 1 28 0 V238Z M774 238 V164 a14 10 0 0 1 28 0 V238Z M866 238 V164 a14 10 0 0 1 28 0 V238Z M0 238 C200 230 400 236 600 233 S1000 230 1200 236 L1200 260 L0 260Z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-opacity='.07' stroke-width='5' stroke-linecap='round' d='M60 238 Q62 185.2 70 142 M230 238 Q228 183 220 138 M920 238 Q918 180.8 910 134 M960 238 Q961.6 195.1 968 160 M1150 238 Q1151.6 191.8 1158 154 M70 142 Q46.2 126.6 26.8 157.9 M70 142 Q55.9 117.6 44.3 145.6 M70 142 Q67.1 118.3 64.8 140.8 M70 142 Q77.9 117.5 84.4 142.2 M70 142 Q88.9 121.5 104.4 150.6 M70 142 Q94.9 131.2 115.3 162.5 M70 142 Q49.2 138 32.1 164.9 M70 142 Q89.1 141.6 104.8 167.4 M220 138 Q196.2 122.6 176.8 153.9 M220 138 Q205.9 113.6 194.3 141.6 M220 138 Q217.1 114.3 214.8 136.8 M220 138 Q227.9 113.5 234.4 138.2 M220 138 Q238.9 117.5 254.4 146.6 M220 138 Q244.9 127.2 265.3 158.5 M220 138 Q199.2 134 182.1 160.9 M220 138 Q239.1 137.6 254.8 163.4 M910 134 Q886.2 118.6 866.8 149.9 M910 134 Q895.9 109.6 884.3 137.6 M910 134 Q907.1 110.3 904.8 132.8 M910 134 Q917.9 109.5 924.4 134.2 M910 134 Q928.9 113.5 944.4 142.6 M910 134 Q934.9 123.2 955.3 154.5 M910 134 Q889.2 130 872.1 156.9 M910 134 Q929.1 133.6 944.8 159.4 M968 160 Q944.2 144.6 924.8 175.9 M968 160 Q953.9 135.6 942.3 163.6 M968 160 Q965.1 136.3 962.8 158.8 M968 160 Q975.9 135.5 982.4 160.2 M968 160 Q986.9 139.5 1002.4 168.6 M968 160 Q992.9 149.2 1013.3 180.5 M968 160 Q947.2 156 930.1 182.9 M968 160 Q987.1 159.6 1002.8 185.4 M1158 154 Q1134.2 138.6 1114.8 169.9 M1158 154 Q1143.9 129.6 1132.3 157.6 M1158 154 Q1155.1 130.3 1152.8 152.8 M1158 154 Q1165.9 129.5 1172.4 154.2 M1158 154 Q1176.9 133.5 1192.4 162.6 M1158 154 Q1182.9 143.2 1203.3 174.5 M1158 154 Q1137.2 150 1120.1 176.9 M1158 154 Q1177.1 153.6 1192.8 179.4'/%3E%3C/svg%3E"), linear-gradient(180deg, var(--primary-dark) 0%, var(--primary-deep) 100%); }
.sidebar[data-scene="coast"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 260'%3E%3Cpath fill='%23fff' fill-opacity='.07' d='M30 226 V128 H34 V122 H88 V128 H92 V226Z M96 226 V94 H100 V88 H166 V94 H170 V226Z M174 226 V140 H178 V134 H226 V140 H230 V226Z M234 226 V80 H238 V74 H316 V80 H320 V226Z M324 226 V116 H328 V110 H384 V116 H388 V226Z M392 226 V104 H396 V98 H466 V104 H470 V226Z M474 226 V134 H478 V128 H530 V134 H534 V226Z M538 226 V152 H542 V146 H586 V152 H590 V226Z M0 226 H600 L612 260 H0Z M648 214 C670 226 746 226 772 212 L760 212 C740 218 678 218 660 212Z M706 212 L706 140 C734 160 752 186 758 206Z M704 212 L704 150 C686 168 674 188 672 204Z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-opacity='.07' stroke-width='5' stroke-linecap='round' d='M705 214 V136 M596 228 Q594 177.4 586 136 M586 136 Q562.2 120.6 542.8 151.9 M586 136 Q571.9 111.6 560.3 139.6 M586 136 Q583.1 112.3 580.8 134.8 M586 136 Q593.9 111.5 600.4 136.2 M586 136 Q604.9 115.5 620.4 144.6 M586 136 Q610.9 125.2 631.3 156.5 M586 136 Q565.2 132 548.1 158.9 M586 136 Q605.1 135.6 620.8 161.4'/%3E%3C/svg%3E"), linear-gradient(180deg, var(--primary-dark) 0%, var(--primary-deep) 100%); }
.sidebar[data-scene="asir"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 260'%3E%3Cpath fill='%23fff' fill-opacity='.07' d='M380 238 L383 118 H429 L432 238Z M436 238 L439 146 H493 L496 238Z M500 238 L503 102 H543 L546 238Z M552 238 L555 138 H607 L610 238Z M614 238 L617 160 H655 L658 238Z M298 238 V204 h4 V238Z M300 195.2 m-22 0 a22 17.6 0 1 0 44 0 a22 17.6 0 1 0 -44 0 M338 238 V212 h4 V238Z M340 205.6 m-16 0 a16 12.8 0 1 0 32 0 a16 12.8 0 1 0 -32 0 M688 238 V208 h4 V238Z M690 200.0 m-20 0 a20 16 0 1 0 40 0 a20 16 0 1 0 -40 0 M728 238 V216 h4 V238Z M730 210.4 m-14 0 a14 11.2 0 1 0 28 0 a14 11.2 0 1 0 -28 0 M1078 238 V208 h4 V238Z M1080 200.0 m-20 0 a20 16 0 1 0 40 0 a20 16 0 1 0 -40 0 M1128 238 V214 h4 V238Z M1130 207.6 m-16 0 a16 12.8 0 1 0 32 0 a16 12.8 0 1 0 -32 0 M0 238 C200 230 400 236 600 233 S1000 230 1200 236 L1200 260 L0 260Z'/%3E%3C/svg%3E"), linear-gradient(180deg, var(--primary-dark) 0%, var(--primary-deep) 100%); }
.sidebar[data-scene="oasis"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 260'%3E%3Cpath fill='%23fff' fill-opacity='.07' d='M120 238 V168 H440 V238Z M264.0 168 V134 H296.0 V168Z M0 238 C200 230 400 236 600 233 S1000 230 1200 236 L1200 260 L0 260Z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-opacity='.07' stroke-width='5' stroke-linecap='round' d='M60 238 Q62 172 70 118 M456 238 Q454 180.8 446 134 M780 238 Q782 177.5 790 128 M830 238 Q828.4 190.7 822 152 M1040 238 Q1042.4 185.2 1052 142 M1150 238 Q1148.4 177.5 1142 128 M70 118 Q46.2 102.6 26.8 133.9 M70 118 Q55.9 93.6 44.3 121.6 M70 118 Q67.1 94.3 64.8 116.8 M70 118 Q77.9 93.5 84.4 118.2 M70 118 Q88.9 97.5 104.4 126.6 M70 118 Q94.9 107.2 115.3 138.5 M70 118 Q49.2 114 32.1 140.9 M70 118 Q89.1 117.6 104.8 143.4 M446 134 Q422.2 118.6 402.8 149.9 M446 134 Q431.9 109.6 420.3 137.6 M446 134 Q443.1 110.3 440.8 132.8 M446 134 Q453.9 109.5 460.4 134.2 M446 134 Q464.9 113.5 480.4 142.6 M446 134 Q470.9 123.2 491.3 154.5 M446 134 Q425.2 130 408.1 156.9 M446 134 Q465.1 133.6 480.8 159.4 M790 128 Q766.2 112.6 746.8 143.9 M790 128 Q775.9 103.6 764.3 131.6 M790 128 Q787.1 104.3 784.8 126.8 M790 128 Q797.9 103.5 804.4 128.2 M790 128 Q808.9 107.5 824.4 136.6 M790 128 Q814.9 117.2 835.3 148.5 M790 128 Q769.2 124 752.1 150.9 M790 128 Q809.1 127.6 824.8 153.4 M822 152 Q798.2 136.6 778.8 167.9 M822 152 Q807.9 127.6 796.3 155.6 M822 152 Q819.1 128.3 816.8 150.8 M822 152 Q829.9 127.5 836.4 152.2 M822 152 Q840.9 131.5 856.4 160.6 M822 152 Q846.9 141.2 867.3 172.5 M822 152 Q801.2 148 784.1 174.9 M822 152 Q841.1 151.6 856.8 177.4 M1052 142 Q1028.2 126.6 1008.8 157.9 M1052 142 Q1037.9 117.6 1026.3 145.6 M1052 142 Q1049.1 118.3 1046.8 140.8 M1052 142 Q1059.9 117.5 1066.4 142.2 M1052 142 Q1070.9 121.5 1086.4 150.6 M1052 142 Q1076.9 131.2 1097.3 162.5 M1052 142 Q1031.2 138 1014.1 164.9 M1052 142 Q1071.1 141.6 1086.8 167.4 M1142 128 Q1118.2 112.6 1098.8 143.9 M1142 128 Q1127.9 103.6 1116.3 131.6 M1142 128 Q1139.1 104.3 1136.8 126.8 M1142 128 Q1149.9 103.5 1156.4 128.2 M1142 128 Q1160.9 107.5 1176.4 136.6 M1142 128 Q1166.9 117.2 1187.3 148.5 M1142 128 Q1121.2 124 1104.1 150.9 M1142 128 Q1161.1 127.6 1176.8 153.4'/%3E%3C/svg%3E"), linear-gradient(180deg, var(--primary-dark) 0%, var(--primary-deep) 100%); }
.sidebar[data-scene="city"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 260'%3E%3Cpath fill='%23fff' fill-opacity='.07' d='M40 238 V168 H86 V238Z M90 238 V142 H128 V238Z M132 238 V178 H186 V238Z M470 238 V154 H510 V238Z M516 238 V126 H568 V238Z M664 238 V164 H700 V238Z M760 238 V146 H808 V238Z M812 238 V174 H852 V238Z M900 238 V134 H956 V238Z M962 238 V158 H1000 V238Z M1010 238 V116 H1056 V238Z M1062 238 V168 H1102 V238Z M1110 238 V148 H1164 V238Z M300 238 C304 148 310 88 314 28 Q333.0 98 352 28 C356 88 362 148 366 238Z M600 238 L625.0 68 H631.0 L656 238Z M0 238 C200 230 400 236 600 233 S1000 230 1200 236 L1200 260 L0 260Z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-opacity='.07' stroke-width='5' stroke-linecap='round' d='M230 238 Q231.2 208.3 236 184 M260 238 Q258.8 213.8 254 194 M450 238 Q451.2 210.5 456 188 M880 238 Q878.8 212.7 874 192 M236 184 Q212.2 168.6 192.8 199.9 M236 184 Q221.9 159.6 210.3 187.6 M236 184 Q233.1 160.3 230.8 182.8 M236 184 Q243.9 159.5 250.4 184.2 M236 184 Q254.9 163.5 270.4 192.6 M236 184 Q260.9 173.2 281.3 204.5 M236 184 Q215.2 180 198.1 206.9 M236 184 Q255.1 183.6 270.8 209.4 M254 194 Q230.2 178.6 210.8 209.9 M254 194 Q239.9 169.6 228.3 197.6 M254 194 Q251.1 170.3 248.8 192.8 M254 194 Q261.9 169.5 268.4 194.2 M254 194 Q272.9 173.5 288.4 202.6 M254 194 Q278.9 183.2 299.3 214.5 M254 194 Q233.2 190 216.1 216.9 M254 194 Q273.1 193.6 288.8 219.4 M456 188 Q432.2 172.6 412.8 203.9 M456 188 Q441.9 163.6 430.3 191.6 M456 188 Q453.1 164.3 450.8 186.8 M456 188 Q463.9 163.5 470.4 188.2 M456 188 Q474.9 167.5 490.4 196.6 M456 188 Q480.9 177.2 501.3 208.5 M456 188 Q435.2 184 418.1 210.9 M456 188 Q475.1 187.6 490.8 213.4 M874 192 Q850.2 176.6 830.8 207.9 M874 192 Q859.9 167.6 848.3 195.6 M874 192 Q871.1 168.3 868.8 190.8 M874 192 Q881.9 167.5 888.4 192.2 M874 192 Q892.9 171.5 908.4 200.6 M874 192 Q898.9 181.2 919.3 212.5 M874 192 Q853.2 188 836.1 214.9 M874 192 Q893.1 191.6 908.8 217.4'/%3E%3C/svg%3E"), linear-gradient(180deg, var(--primary-dark) 0%, var(--primary-deep) 100%); }

/* القائمة الجانبية بلا عناوين مجموعات: خط فاصل رفيع بين كل مجموعة والتي بعدها. */
.nav-sep { border: 0; border-top: 1px solid var(--border); margin: 8px 12px; }
.sidebar .nav-sep { border-top-color: rgba(255,255,255,.09); }