/* =========================================================
   نظام إدارة الحضور والخدمة — ورقة الأنماط
   كل الألوان عبر متغيرات، فتغيير الهوية من مكان واحد،
   والوضع الليلي يعمل تلقائيًا أو بالتبديل اليدوي.
   ========================================================= */

/* ---------- الخطوط: تحميل مباشر بدل @import المتسلسل ---------- */
/* الخطوط تُستدعى من header.php عبر <link rel="preconnect"> + <link>،
   ومع تعذّر الإنترنت يعمل احتياطي النظام دون كسر التخطيط. */

/* ================= الرموز (الوضع الفاتح) ================= */
:root{
  color-scheme: light;

  --bg:            #f3f6f6;
  --surface:       #ffffff;
  --surface-2:     #f8fafa;
  --surface-3:     #eef3f3;
  --line:          #dfe7e7;
  --line-soft:     #eaf0f0;

  --ink:           #14202b;
  --ink-2:         #33424c;
  --dim:           #56666f;   /* 6.2:1 على الأبيض */

  --brand:         #0f7a72;
  --brand-strong:  #0b5f59;
  --brand-soft:    #e2f1ef;
  --brand-ink:     #ffffff;

  --good:          #0ca30c;
  --good-soft:     #e4f6e4;
  --warn:          #b47100;
  --warn-soft:     #fdf1da;
  --danger:        #c22f2f;
  --danger-soft:   #fbe7e7;
  --info:          #2a78d6;
  --info-soft:     #e6effb;
  --purple:        #5b46b8;
  --purple-soft:   #ece8fa;

  /* رسوم بيانية */
  --viz-seq:       #2a78d6;
  --viz-grid:      #e6ecec;
  --viz-axis:      #7b8a92;
  --viz-track:     #eef2f2;
  --viz-area:      rgba(42,120,214,.12);

  --radius:        12px;
  --radius-sm:     8px;
  --shadow:        0 1px 2px rgba(20,32,43,.06), 0 4px 14px rgba(20,32,43,.04);
  --shadow-lg:     0 12px 40px rgba(20,32,43,.14);
  --sidebar-w:     268px;

  --font-ui: "Cairo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ================= الوضع الليلي ================= */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;

    --bg:          #0d1315;
    --surface:     #151d1f;
    --surface-2:   #111a1b;
    --surface-3:   #1c2628;
    --line:        #27332f;
    --line-soft:   #1d2729;

    --ink:         #e9f0f0;
    --ink-2:       #c6d3d3;
    --dim:         #93a3a6;

    --brand:       #4ec5b9;
    --brand-strong:#7fd9cf;
    --brand-soft:  #14302e;
    --brand-ink:   #06211f;

    --good:        #4dc44d;
    --good-soft:   #133013;
    --warn:        #e0a63c;
    --warn-soft:   #33260f;
    --danger:      #ec6b6b;
    --danger-soft: #341818;
    --info:        #6ba6ec;
    --info-soft:   #16232f;
    --purple:      #a394e8;
    --purple-soft: #211d38;

    --viz-seq:     #3987e5;
    --viz-grid:    #232f31;
    --viz-axis:    #8d9ea1;
    --viz-track:   #1e2a2c;
    --viz-area:    rgba(57,135,229,.16);

    --shadow:      0 1px 2px rgba(0,0,0,.5);
    --shadow-lg:   0 14px 44px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0d1315; --surface:#151d1f; --surface-2:#111a1b; --surface-3:#1c2628;
  --line:#27332f; --line-soft:#1d2729;
  --ink:#e9f0f0; --ink-2:#c6d3d3; --dim:#93a3a6;
  --brand:#4ec5b9; --brand-strong:#7fd9cf; --brand-soft:#14302e; --brand-ink:#06211f;
  --good:#4dc44d; --good-soft:#133013; --warn:#e0a63c; --warn-soft:#33260f;
  --danger:#ec6b6b; --danger-soft:#341818; --info:#6ba6ec; --info-soft:#16232f;
  --purple:#a394e8; --purple-soft:#211d38;
  --viz-seq:#3987e5; --viz-grid:#232f31; --viz-axis:#8d9ea1; --viz-track:#1e2a2c;
  --viz-area:rgba(57,135,229,.16);
  --shadow:0 1px 2px rgba(0,0,0,.5); --shadow-lg:0 14px 44px rgba(0,0,0,.55);
}

/* ================= الأساس ================= */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-ui);
  background:var(--bg);
  color:var(--ink);
  direction:rtl;
  min-height:100vh;
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; display:block; }
code,kbd,pre,.mono{ font-family:var(--font-mono); font-size:.88em; }
h1,h2,h3,h4{ margin:0; line-height:1.35; text-wrap:balance; }
p{ margin:0; }
hr{ border:0; border-top:1px solid var(--line); margin:18px 0; }

/* تركيز مرئي واضح — كان غائبًا تمامًا */
:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:4px;
}
.skip-link{
  position:absolute; inset-inline-start:-9999px; top:8px; z-index:200;
  background:var(--brand); color:var(--brand-ink);
  padding:10px 18px; border-radius:8px; font-weight:700;
}
.skip-link:focus{ inset-inline-start:8px; }

/* ================= التخطيط ================= */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:var(--sidebar-w);
  background:var(--surface);
  border-inline-end:1px solid var(--line);
  position:fixed; inset-inline-start:0; top:0; bottom:0;
  padding:18px 14px;
  display:flex; flex-direction:column; gap:2px;
  z-index:40;
  overflow-y:auto;
  transition:transform .22s ease;
}
.sidebar .brand{
  display:flex; align-items:center; gap:11px;
  padding:4px 6px 18px;
  border-bottom:1px solid var(--line-soft);
  margin-bottom:10px;
}
.brand .mark{
  width:40px; height:40px; border-radius:11px; flex-shrink:0;
  background:linear-gradient(135deg,var(--brand),var(--brand-strong));
  color:var(--brand-ink);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px;
}
.brand .name{ font-weight:800; font-size:14.5px; line-height:1.3; color:var(--ink); }
.brand .name span{ display:block; font-size:11px; color:var(--dim); font-weight:500; }

.nav-group-label{
  font-size:10.5px; color:var(--dim); margin:14px 10px 5px;
  font-weight:700; letter-spacing:.07em;
}

/* ---- قائمة جانبية منسدلة: العناوين الرئيسية فقط، وتفتح عند الضغط ---- */
.nav-group{ margin-bottom:2px; }
.nav-group-toggle{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:10px 11px; border:0; border-radius:9px;
  background:transparent; cursor:pointer;
  color:var(--ink); font-family:inherit; font-weight:700; font-size:13.5px;
  text-align:start; transition:background .14s;
}
.nav-group-toggle:hover{ background:var(--surface-3); }
.nav-group-toggle .grp-text{ flex:1; }
.nav-group-toggle .chev{
  font-size:12px; color:var(--dim); flex-shrink:0;
  transition:transform .18s ease;
}
.nav-group.open > .nav-group-toggle{ color:var(--brand-strong); }
.nav-group.open > .nav-group-toggle .chev{ transform:rotate(180deg); }
.nav-group-items{ padding:2px 0 6px; }
.nav-group-items .nav-link{ padding-inline-start:20px; font-size:13.2px; }

.role-switch{ margin:10px 0; }
.role-switch .form-label{ font-size:10.5px; color:var(--dim); margin-bottom:4px; }
.form-control-sm{ padding:6px 9px; font-size:12.8px; }

.nav-link{
  display:flex; align-items:center; gap:11px;
  padding:9px 11px; border-radius:9px;
  color:var(--ink-2); font-weight:600; font-size:13.8px;
  transition:background .14s, color .14s;
}
.nav-link:hover{ background:var(--surface-3); color:var(--ink); text-decoration:none; }
.nav-link.active{ background:var(--brand-soft); color:var(--brand-strong); }
.nav-link .ic{ width:20px; text-align:center; flex-shrink:0; font-size:15px; }
.nav-link .count{ margin-inline-start:auto; }

.sidebar-footer{ margin-top:auto; padding-top:12px; border-top:1px solid var(--line-soft); }
.user-mini{ display:flex; align-items:center; gap:10px; padding:7px 6px; }
.user-mini .avatar{
  width:38px; height:38px; border-radius:50%; flex-shrink:0; overflow:hidden;
  background:var(--brand-soft); color:var(--brand-strong);
  display:flex; align-items:center; justify-content:center; font-weight:800;
}
.user-mini .avatar img{ width:100%; height:100%; object-fit:cover; }
.user-mini .info{ min-width:0; }
.user-mini .info b{ display:block; font-size:13px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-mini .info small{ color:var(--dim); font-size:11px; }

.main{ margin-inline-start:var(--sidebar-w); flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:12px 24px; display:flex; align-items:center; justify-content:space-between; gap:14px;
  position:sticky; top:0; z-index:30;
}
.topbar h1{ font-size:17.5px; font-weight:800; }
.topbar-actions{ display:flex; align-items:center; gap:6px; }
.burger{ display:none; background:none; border:none; font-size:20px; cursor:pointer; color:var(--ink); padding:4px 8px; border-radius:8px; }
.burger:hover{ background:var(--surface-3); }
.icon-btn{
  background:none; border:1px solid transparent; cursor:pointer; color:var(--ink-2);
  font-size:17px; padding:7px 9px; border-radius:9px; position:relative; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}
.icon-btn:hover{ background:var(--surface-3); color:var(--ink); }
.icon-btn .dot{
  position:absolute; top:2px; inset-inline-end:2px;
  min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:var(--danger); color:#fff; font-size:10px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.content{ padding:22px 24px 60px; flex:1; }
.breadcrumb{ display:flex; gap:7px; align-items:center; font-size:12.5px; color:var(--dim); margin-bottom:14px; flex-wrap:wrap; }
.breadcrumb a{ color:var(--dim); }
.breadcrumb a:hover{ color:var(--brand); }
.breadcrumb span.sep{ opacity:.5; }

/* ================= أدوات تخطيط ================= */
.stack{ display:flex; flex-direction:column; gap:14px; }
.gap-sm{ gap:8px; }
.row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.row-end{ display:flex; align-items:center; gap:8px; margin-inline-start:auto; }
.grid{ display:grid; gap:16px; }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.grid.cols-6{ grid-template-columns:repeat(6,1fr); }
.grid.side{ grid-template-columns:290px 1fr; align-items:start; }
.mt{ margin-top:18px; } .mb{ margin-bottom:18px; }
.muted{ color:var(--dim); }
.small{ font-size:12.8px; }
.strong{ font-weight:700; }
.nowrap{ white-space:nowrap; }
.tnum{ font-variant-numeric:tabular-nums; }
.ltr{ direction:ltr; text-align:right; unicode-bidi:isolate; }
.text-center{ text-align:center; }
.hidden{ display:none !important; }
.maxw-sm{ max-width:560px; } .maxw-md{ max-width:760px; } .maxw-lg{ max-width:1000px; }

/* ================= البطاقات ================= */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow);
}
.card.flat{ box-shadow:none; }
.card.tight{ padding:14px 16px; }
.card-title{ font-size:15.5px; font-weight:800; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.card-title .sub{ font-weight:500; font-size:12.5px; color:var(--dim); }

.stat-card{ position:relative; overflow:hidden; padding:16px 18px; }
.stat-card::before{ content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px; background:var(--accent,var(--brand)); }
.stat-card .label{ color:var(--dim); font-size:12.5px; font-weight:600; }
.stat-card .value{ font-size:27px; font-weight:800; margin-top:3px; line-height:1.15; font-variant-numeric:tabular-nums; }
.stat-card .value a{ font-size:15px; font-weight:700; }
.stat-card .delta{ font-size:12px; font-weight:700; margin-top:2px; }
.delta-up{ color:var(--good); } .delta-down{ color:var(--danger); } .delta-flat{ color:var(--dim); }

/* ================= الأزرار ================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid transparent; border-radius:9px; padding:9px 16px;
  font-weight:700; font-size:13.8px; font-family:inherit;
  cursor:pointer; transition:filter .14s, background .14s, border-color .14s;
  text-decoration:none; line-height:1.4;
}
.btn:hover{ text-decoration:none; }
.btn:disabled,.btn[aria-busy="true"]{ opacity:.6; cursor:not-allowed; }
.btn-primary{ background:var(--brand); color:var(--brand-ink); }
.btn-primary:hover:not(:disabled){ background:var(--brand-strong); }
.btn-outline{ background:transparent; border-color:var(--line); color:var(--ink-2); }
.btn-outline:hover:not(:disabled){ border-color:var(--brand); color:var(--brand); }
.btn-ghost{ background:transparent; color:var(--ink-2); }
.btn-ghost:hover:not(:disabled){ background:var(--surface-3); }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-danger:hover:not(:disabled){ filter:brightness(1.08); }
.btn-soft{ background:var(--surface-3); color:var(--ink-2); }
.btn-soft:hover:not(:disabled){ background:var(--line); }
.btn-sm{ padding:6px 11px; font-size:12.4px; border-radius:7px; }
.btn-lg{ padding:12px 22px; font-size:15px; }
.btn-block{ width:100%; }
.btn .spin{
  width:14px; height:14px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:spin .7s linear infinite; display:none;
}
.btn[aria-busy="true"] .spin{ display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.btn-group{ display:inline-flex; gap:6px; flex-wrap:wrap; }

/* ================= النماذج ================= */
.form-group{ margin-bottom:15px; }
.form-group > label,.form-label{
  display:block; font-weight:700; font-size:13px; margin-bottom:5px; color:var(--ink);
}
.form-label .req{ color:var(--danger); }
.form-control{
  width:100%; padding:9px 12px;
  border:1px solid var(--line); border-radius:9px;
  font-family:inherit; font-size:14px; line-height:1.5;
  background:var(--surface); color:var(--ink);
}
textarea.form-control{ min-height:78px; resize:vertical; }
select.form-control{ cursor:pointer; }
.form-control:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.form-control:disabled{ background:var(--surface-3); color:var(--dim); cursor:not-allowed; }
.form-control.is-error{ border-color:var(--danger); }
.field-error{ color:var(--danger); font-size:12.2px; font-weight:600; margin-top:4px; display:block; }
.form-hint{ color:var(--dim); font-size:12.2px; margin-top:4px; display:block; }
.form-row{ display:flex; gap:14px; flex-wrap:wrap; }
.form-row > .form-group{ flex:1; min-width:210px; }
/* صف الاسم الرباعي — أربعة حقول متساوية تنهار لعمودين على الجوال */
.form-row-4 > .form-group{ min-width:150px; }
fieldset{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; margin:0 0 16px; }
legend{ font-weight:800; font-size:13.5px; padding:0 8px; color:var(--brand-strong); }

/* مربعات اختيار بديلة عن multiple select */
.check-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; }
.check-item{
  display:flex; align-items:center; gap:9px;
  padding:9px 12px; border:1px solid var(--line); border-radius:9px;
  font-size:13.5px; font-weight:600; cursor:pointer; background:var(--surface);
}
.check-item:hover{ border-color:var(--brand); }
.check-item input{ accent-color:var(--brand); width:16px; height:16px; margin:0; cursor:pointer; flex-shrink:0; }
.check-item:has(input:checked){ border-color:var(--brand); background:var(--brand-soft); color:var(--brand-strong); }
.switch{ display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:13.5px; cursor:pointer; }
.switch input{ accent-color:var(--brand); width:17px; height:17px; margin:0; cursor:pointer; }

/* ================= الجداول ================= */
.table-wrap{ overflow-x:auto; }
table.table{ width:100%; border-collapse:collapse; font-size:13.6px; }
table.table th{
  background:var(--surface-2); color:var(--dim); font-weight:700;
  text-align:start; padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap;
}
table.table th a{ color:inherit; display:inline-flex; gap:4px; align-items:center; }
table.table td{ padding:10px 12px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
table.table tbody tr:hover td{ background:var(--surface-2); }
table.table tbody tr:last-child td{ border-bottom:0; }
table.table.table-sm th,table.table.table-sm td{ padding:7px 10px; font-size:12.8px; }
.table td .row{ gap:6px; }
.col-check{ width:38px; }
.col-check input{ accent-color:var(--brand); width:16px; height:16px; cursor:pointer; }

/* الجداول على الجوال: كل صف يصير بطاقة */
@media (max-width:760px){
  table.responsive thead{ display:none; }
  table.responsive,table.responsive tbody,table.responsive tr,table.responsive td{ display:block; width:100%; }
  table.responsive tr{
    border:1px solid var(--line); border-radius:var(--radius-sm);
    margin-bottom:10px; padding:6px 10px; background:var(--surface);
  }
  table.responsive td{ border:0; padding:6px 2px; display:flex; justify-content:space-between; gap:12px; align-items:center; }
  table.responsive td::before{
    content:attr(data-label); font-weight:700; color:var(--dim); font-size:12.2px; flex-shrink:0;
  }
  table.responsive td:empty{ display:none; }
}

/* ================= الشارات ================= */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:999px; font-size:11.8px; font-weight:700; white-space:nowrap;
}
.badge-num{ font-variant-numeric:tabular-nums; }
.badge-green { background:var(--good-soft);   color:var(--good); }
.badge-yellow{ background:var(--warn-soft);   color:var(--warn); }
.badge-red   { background:var(--danger-soft); color:var(--danger); }
.badge-gray  { background:var(--surface-3);   color:var(--dim); }
.badge-teal  { background:var(--brand-soft);  color:var(--brand-strong); }
.badge-blue  { background:var(--info-soft);   color:var(--info); }
.badge-purple{ background:var(--purple-soft); color:var(--purple); }

/* ================= الرسائل ================= */
.flash{
  padding:11px 15px; border-radius:9px; margin-bottom:14px;
  font-weight:600; font-size:13.6px; display:flex; gap:9px; align-items:flex-start;
  border:1px solid transparent;
}
.flash-success{ background:var(--good-soft);   color:var(--good);   border-color:color-mix(in srgb,var(--good) 25%,transparent); }
.flash-error  { background:var(--danger-soft); color:var(--danger); border-color:color-mix(in srgb,var(--danger) 25%,transparent); }
.flash-info   { background:var(--info-soft);   color:var(--info);   border-color:color-mix(in srgb,var(--info) 25%,transparent); }
.flash-warning{ background:var(--warn-soft);   color:var(--warn);   border-color:color-mix(in srgb,var(--warn) 25%,transparent); }

.empty-state{ text-align:center; padding:44px 20px; color:var(--dim); }
.empty-state .big{ font-size:34px; margin-bottom:8px; opacity:.55; }
.empty-state .btn{ margin-top:14px; }

/* ================= الترقيم ================= */
.pagination{ display:flex; gap:5px; margin-top:16px; flex-wrap:wrap; align-items:center; }
.pagination a,.pagination span{
  padding:6px 12px; border-radius:8px; border:1px solid var(--line);
  font-size:13px; font-weight:600; color:var(--ink-2); min-width:38px; text-align:center;
}
.pagination a:hover{ border-color:var(--brand); color:var(--brand); text-decoration:none; }
.pagination .active{ background:var(--brand); color:var(--brand-ink); border-color:var(--brand); }
.pagination .gap{ border:0; padding:6px 2px; color:var(--dim); min-width:auto; }
.pagination .disabled{ opacity:.45; }

/* ================= شريط الفلاتر ================= */
.filters-bar{ display:flex; gap:11px; flex-wrap:wrap; align-items:flex-end; }
.filters-bar .form-group{ margin-bottom:0; }
.filters-bar .grow{ flex:1; min-width:200px; }

/* ================= الإشعارات العائمة ================= */
.toast-stack{
  /* أسفل الجهة البعيدة عن القائمة الجانبية: لا يغطي التنقّل ولا رأس الصفحة */
  position:fixed; bottom:18px; inset-inline-end:18px; z-index:300;
  display:flex; flex-direction:column-reverse; gap:8px; max-width:min(360px,92vw);
  pointer-events:none;
}
.toast-stack .toast{ pointer-events:auto; }
.toast{
  padding:11px 15px; border-radius:10px; font-weight:600; font-size:13.5px;
  box-shadow:var(--shadow-lg); border:1px solid transparent;
  animation:toastIn .2s ease;
}
@keyframes toastIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.toast-success{ background:var(--good-soft);   color:var(--good);   border-color:var(--good); }
.toast-error  { background:var(--danger-soft); color:var(--danger); border-color:var(--danger); }
.toast-info   { background:var(--info-soft);   color:var(--info);   border-color:var(--info); }

/* ================= مربع الحوار ================= */
dialog.modal{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:0; background:var(--surface); color:var(--ink);
  max-width:min(460px,94vw); box-shadow:var(--shadow-lg);
}
dialog.modal::backdrop{ background:rgba(10,18,20,.55); }
.modal-body{ padding:22px 24px; }
.modal-body h3{ font-size:16.5px; margin-bottom:8px; }
.modal-body p{ color:var(--dim); font-size:13.8px; }
.modal-actions{ display:flex; gap:9px; justify-content:flex-start; margin-top:18px; }

/* ================= الرسوم البيانية ================= */
.chart{ margin:0; }
.chart-title{ font-size:14.5px; font-weight:800; margin-bottom:3px; }
.chart-note{ font-size:12.3px; color:var(--dim); margin-bottom:8px; }
.chart-canvas{ overflow-x:auto; }
.viz{ width:100%; height:auto; display:block; }
.viz-grid{ stroke:var(--viz-grid); stroke-width:1; }
.viz-axis-line{ stroke:var(--line); stroke-width:1; }
.viz-axis{ fill:var(--viz-axis); font-size:10.5px; font-family:var(--font-ui); }
.viz-label{ fill:var(--ink-2); font-size:12px; font-weight:600; font-family:var(--font-ui); }
.viz-value{ fill:var(--ink); font-size:11.5px; font-weight:800; font-family:var(--font-ui); font-variant-numeric:tabular-nums; }
.viz-hero{ fill:var(--ink); font-size:30px; font-weight:800; font-family:var(--font-ui); }
.viz-line{ fill:none; stroke:var(--viz-seq); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.viz-area{ fill:var(--viz-area); stroke:none; }
.viz-dot{ fill:var(--viz-seq); stroke:var(--surface); stroke-width:2; }
.viz-dot-end{ stroke-width:3; }
.viz-track{ stroke:var(--viz-track); }
.viz-seg{ transition:opacity .12s; }
.viz-seg:hover{ opacity:.78; cursor:default; }
.viz-donut{ max-width:220px; margin-inline:auto; }
.chart-legend{ display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; font-size:12.4px; color:var(--dim); }
.chart-legend .lg{ display:inline-flex; align-items:center; gap:6px; }
.chart-legend i{ width:11px; height:11px; border-radius:3px; display:inline-block; flex-shrink:0; }
.chart-legend b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.chart-table{ margin-top:10px; }
.chart-table summary{ cursor:pointer; font-size:12.4px; color:var(--dim); font-weight:600; }
.chart-table summary:hover{ color:var(--brand); }
.chart-empty{ padding:40px 16px; text-align:center; color:var(--dim); font-size:13.5px; background:var(--surface-2); border-radius:var(--radius-sm); }

.pbar{ display:inline-block; width:100%; min-width:70px; height:7px; border-radius:99px; background:var(--surface-3); overflow:hidden; vertical-align:middle; }
.pbar-fill{ display:block; height:100%; background:var(--brand); border-radius:99px; }
.pbar-good .pbar-fill{ background:var(--good); }
.pbar-warn .pbar-fill{ background:var(--warn); }
.pbar-danger .pbar-fill{ background:var(--danger); }

/* ================= الصور الشخصية ================= */
.avatar-sm{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--brand-soft); }
.avatar-lg{ width:104px; height:104px; border-radius:50%; object-fit:cover; background:var(--brand-soft); }
.avatar-fallback{
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-soft); color:var(--brand-strong); font-weight:800;
}

/* ================= صفحة الدخول والأخطاء ================= */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:
    radial-gradient(circle at 22% 18%, color-mix(in srgb,var(--brand) 22%, transparent), transparent 55%),
    var(--bg);
}
.auth-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:34px 30px; width:100%; max-width:410px; box-shadow:var(--shadow-lg);
}
.auth-card .mark{
  width:52px; height:52px; border-radius:14px; margin-bottom:16px;
  background:linear-gradient(135deg,var(--brand),var(--brand-strong)); color:var(--brand-ink);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:19px;
}
.auth-card .mark-danger{ background:var(--danger-soft); color:var(--danger); margin-inline:auto; font-size:26px; }
.auth-card h2{ font-size:19px; margin-bottom:4px; }
.auth-card p.sub{ color:var(--dim); margin-bottom:20px; font-size:13.5px; }
.error-ref code{ background:var(--surface-3); padding:4px 10px; border-radius:6px; font-size:13px; }
.error-detail{
  text-align:start; direction:ltr; background:var(--surface-3); padding:10px;
  border-radius:8px; font-size:11.5px; overflow:auto; max-height:180px; white-space:pre-wrap;
}
.pw-toggle{ background:none; border:0; color:var(--dim); cursor:pointer; font-size:12.5px; font-weight:600; padding:2px 4px; }
.pw-toggle:hover{ color:var(--brand); }

/* ================= الافتقاد ================= */
.vis-status-pending{ border-inline-start:4px solid var(--warn); }
.vis-status-done{ border-inline-start:4px solid var(--good); }
.vis-status-cancelled{ border-inline-start:4px solid var(--dim); opacity:.72; }
.vis-overdue{ background:var(--danger-soft); }

/* ================= طبقة الجوال ================= */
.overlay{ position:fixed; inset:0; background:rgba(10,18,20,.45); z-index:39; display:none; }
.overlay.show{ display:block; }

@media (max-width:1080px){
  .grid.cols-4{ grid-template-columns:repeat(2,1fr); }
  .grid.cols-6{ grid-template-columns:repeat(3,1fr); }
  .grid.side{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .grid.cols-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .sidebar{ transform:translateX(100%); box-shadow:var(--shadow-lg); }
  .sidebar.open{ transform:translateX(0); }
  .main{ margin-inline-start:0; }
  .burger{ display:block; }
  .grid.cols-2,.grid.cols-3,.grid.cols-4{ grid-template-columns:1fr; }
  .grid.cols-6{ grid-template-columns:repeat(2,1fr); }
  .content{ padding:16px 14px 50px; }
  .topbar{ padding:10px 14px; }
  .card{ padding:15px 16px; }
}

/* ================= الطباعة ================= */
@media print{
  .sidebar,.topbar,.overlay,.toast-stack,.pagination,.filters-bar,.btn,.no-print,.chart-table{ display:none !important; }
  .main{ margin:0; }
  .content{ padding:0; }
  .card{ box-shadow:none; border:1px solid #ccc; break-inside:avoid; page-break-inside:avoid; }
  body{ background:#fff; color:#000; font-size:12px; }
  table.table th{ background:#eee !important; }
  a{ color:#000; text-decoration:none; }
  .print-only{ display:block !important; }
}
.print-only{ display:none; }

/* بطاقات العضوية للطباعة */
.card-sheet{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.id-card{
  border:1px solid var(--line); border-radius:10px; padding:12px;
  display:flex; gap:12px; align-items:center; background:var(--surface);
  break-inside:avoid;
}
.id-card .qr{ width:104px; flex-shrink:0; }
.id-card .qr svg{ width:100%; height:auto; }
.id-card .meta b{ display:block; font-size:14px; }
.id-card .meta small{ color:var(--dim); font-size:11.5px; display:block; }
@media print{ .card-sheet{ grid-template-columns:repeat(2,1fr); } }

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

/* ---- أدوات صغيرة تُغني عن الأنماط المضمّنة ---- */
.label-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:5px; }
.label-row .form-label{ margin:0; }
.gap-10{ gap:10px; }
.mt-sm{ margin-top:14px; }
.mb-sm{ margin-bottom:14px; }
.app-footer{ padding-top:0; padding-bottom:18px; color:var(--dim); font-size:12px; }

/* ================================================================== *
 *  شاشة تسجيل الحضور — القوائم الأربع وأزرار الصف
 * ================================================================== */
.att-tabs{
  display:flex; gap:6px; flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  margin:-4px -4px 14px; padding:0 4px 10px;
}
.att-tab{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:999px;
  background:var(--surface-3); color:var(--ink-2);
  font-weight:700; font-size:13.5px; border:1px solid transparent;
  transition:background .14s, color .14s, border-color .14s;
}
.att-tab:hover{ text-decoration:none; background:var(--surface-2); color:var(--ink); }
.att-tab.active{ background:var(--brand-soft); color:var(--brand-strong); border-color:var(--brand); }
.att-tab .t-count{
  min-width:24px; padding:1px 7px; border-radius:999px;
  background:var(--surface); color:var(--ink-2);
  font-size:12px; font-weight:800; text-align:center;
  font-variant-numeric:tabular-nums;
}
.att-tab.active .t-count{ background:var(--brand); color:#fff; }

.att-actions{ display:flex; gap:6px; justify-content:center; }
.att-btn{
  width:34px; height:34px; border-radius:9px;
  border:1px solid transparent; cursor:pointer;
  font-size:16px; font-weight:800; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .1s, filter .14s;
}
.att-btn:hover{ filter:brightness(1.07); }
.att-btn:active{ transform:scale(.93); }
.att-btn:disabled{ opacity:.5; cursor:default; }
.att-btn.is-busy{ opacity:.6; }

/* أخضر = تسجيل حضور، أحمر = حذف من الحضور، أصفر = اعتذار */
.att-yes{ background:#1E9E6A; color:#fff; }
.att-no { background:#D64545; color:#fff; }
.att-exc{ background:#E3A008; color:#fff; }

/* وميض خفيف عند انتقال الشخص بين القوائم */
.att-row.just-changed > td{ animation:attFlash .6s ease; }
@keyframes attFlash{
  from{ background:var(--brand-soft); }
  to  { background:transparent; }
}

/* ---- الهيكل التنظيمي: بطاقات الكنائس والخدمات وشرائح الأدوار ---- */
.mini-stats{ display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--dim); }
.mini-stats b{ color:var(--ink); font-variant-numeric:tabular-nums; }

.danger-zone > summary{
  cursor:pointer; color:var(--danger); font-weight:700; font-size:13px;
}
.action-zone > summary{
  cursor:pointer; color:var(--brand-strong); font-weight:700; font-size:13px;
}

.role-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.role-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px;
  background:var(--surface-3); border:1px solid var(--line);
  font-size:13px;
}
.role-chip .chip-x{
  border:0; background:transparent; cursor:pointer;
  color:var(--danger); font-size:16px; line-height:1; padding:0 2px;
}
.role-chip .chip-x:hover{ filter:brightness(1.2); }
form.inline{ display:inline; }
.form-group-btn{ display:flex; align-items:flex-end; }
.grid-3{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); margin-bottom:16px; }
.grid-2{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); margin-bottom:16px; }
.card-accent{ border-color:var(--brand); box-shadow:0 0 0 1px var(--brand) inset; }
.mb-0{ margin-bottom:0; }
.mt-xs{ margin-top:4px; }

/* ================= مبدّل الكنيسة/الخدمة/الدور (الشريط الجانبي) ================= */
.sidebar .brand{ position:relative; }
.sidebar .brand.has-switch{ padding-inline-end:0; }
.brand-btn{
  display:flex; align-items:center; gap:11px; width:100%;
  background:none; border:0; cursor:pointer; padding:0; text-align:start;
  font-family:inherit; color:inherit;
}
.brand-btn .mark img{ width:100%; height:100%; object-fit:cover; border-radius:11px; }
.brand-btn .name{ flex:1; min-width:0; }
.brand-btn .name,
.brand-btn .name span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brand-btn .chev{ font-size:12px; color:var(--dim); flex-shrink:0; transition:transform .18s ease; }
.brand-btn[aria-expanded="true"] .chev{ transform:rotate(180deg); }

.brand-menu{
  position:absolute; inset-inline-start:0; top:calc(100% + 6px); z-index:55;
  width:min(320px, calc(100vw - 28px)); max-height:60vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:8px;
}
.brand-menu-group + .brand-menu-group{ margin-top:8px; padding-top:8px; border-top:1px solid var(--line-soft); }
.brand-menu-church{ display:flex; align-items:center; gap:8px; padding:4px 6px 6px; }
.brand-menu-logo{ width:24px; height:24px; border-radius:7px; object-fit:cover; flex-shrink:0; }
.brand-menu-logo-fallback{
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-soft); font-size:13px;
}
.brand-menu-church b{ font-size:12.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brand-menu-role{ display:block; }
.brand-menu-role-btn{
  display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  padding:8px 9px; border:0; border-radius:8px; background:transparent; cursor:pointer;
  color:var(--ink-2); font-family:inherit; font-size:12.8px; font-weight:600; text-align:start;
}
.brand-menu-role-btn:hover{ background:var(--surface-3); color:var(--ink); }
.brand-menu-role-btn.active{ background:var(--brand-soft); color:var(--brand-strong); font-weight:700; }

/* عنصر وحيد في القسم — يُعرض كرابط مباشر بلا عنوان قسم */
.nav-link-solo{ font-weight:700; }

/* ================= قائمة الحساب المنسدلة ================= */
.sidebar-footer{ position:relative; }
.user-mini-btn{
  width:100%; background:none; border:0; cursor:pointer; font-family:inherit;
  color:inherit; border-radius:9px;
}
.user-mini-btn:hover{ background:var(--surface-3); }
.user-mini-btn .chev{ font-size:12px; color:var(--dim); flex-shrink:0; transition:transform .18s ease; }
.user-mini-btn[aria-expanded="true"] .chev{ transform:rotate(180deg); }

.account-menu{
  position:absolute; inset-inline-start:0; bottom:calc(100% + 6px); z-index:55;
  width:100%; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:6px;
}
.account-menu .nav-link{ font-size:13.2px; }

/* ================= بحث الشريط العلوي ================= */
.topbar-search{ position:relative; display:flex; align-items:center; gap:4px; width:min(320px, 34vw); }
.topbar-search #topbarSearchInput{ width:100%; }
.topbar-search-results{
  position:absolute; top:calc(100% + 6px); inset-inline-start:0; inset-inline-end:0; z-index:55;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg); max-height:340px; overflow-y:auto;
}
.topbar-search-item{
  display:flex; flex-direction:column; gap:1px; padding:8px 11px;
  color:var(--ink); border-bottom:1px solid var(--line-soft);
}
.topbar-search-item:last-child{ border-bottom:0; }
.topbar-search-item:hover{ background:var(--surface-3); text-decoration:none; }
.topbar-search-item .tsi-name{ font-size:13.2px; font-weight:700; }
.topbar-search-item .tsi-meta{ font-size:11px; color:var(--dim); direction:ltr; text-align:start; }
.topbar-search-empty{ padding:12px; text-align:center; color:var(--dim); font-size:12.8px; }

/* ================= مربّع إدخال + زر ملاصق ================= */
.input-group{ display:flex; gap:6px; align-items:stretch; }
.input-group .form-control{ flex:1; min-width:0; }
.input-group .btn{ flex-shrink:0; white-space:nowrap; }

/* ================= نافذة مسح QR بالكاميرا ================= */
.qr-scan-overlay{
  position:fixed; inset:0; z-index:200; background:rgba(10,16,18,.66);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.qr-scan-box{
  width:min(420px, 100%); background:var(--surface); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); overflow:hidden; display:flex; flex-direction:column;
}
.qr-scan-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-bottom:1px solid var(--line);
}
.qr-scan-title{ font-size:14.5px; }
.qr-scan-close{
  background:none; border:0; cursor:pointer; font-size:22px; line-height:1;
  color:var(--dim); padding:2px 6px; border-radius:8px;
}
.qr-scan-close:hover{ background:var(--surface-3); color:var(--ink); }
.qr-scan-video-wrap{ position:relative; background:#000; aspect-ratio:1/1; }
.qr-scan-video{ width:100%; height:100%; object-fit:cover; display:block; }
.qr-scan-frame{
  position:absolute; inset:14%; border:3px solid var(--brand); border-radius:16px;
  box-shadow:0 0 0 999px rgba(0,0,0,.34);
}
.qr-scan-status{ padding:10px 14px; text-align:center; }

/* ================= كتالوج الهدايا ================= */
.reward-img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  border-radius:var(--radius-sm); margin-bottom:10px;
}
.donate-img{
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-soft); font-size:38px;
}

/* ================= تابات (الملف الشخصي وغيره) ================= */
.tabs-bar{
  display:flex; gap:4px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); margin-bottom:14px; padding-bottom:0;
}
.tab-btn{
  background:none; border:0; border-bottom:2px solid transparent; cursor:pointer;
  padding:9px 4px; margin-inline-end:18px; color:var(--dim);
  font-family:inherit; font-size:13.8px; font-weight:700;
  transition:color .14s, border-color .14s;
}
.tab-btn:hover{ color:var(--ink); }
.tab-btn.active{ color:var(--brand-strong); border-bottom-color:var(--brand); }
.tab-panel{ display:flex; flex-direction:column; gap:14px; }
.tab-panel[hidden]{ display:none; }

/* ================= مؤقت العدّ التنازلي لإغلاق الحضور ================= */
.countdown-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px;
  background:var(--brand-soft); color:var(--brand-strong);
  font-size:12.8px; font-weight:600;
}
.countdown-chip b{ font-variant-numeric:tabular-nums; direction:ltr; }
.countdown-chip.countdown-done{ background:var(--surface-3); color:var(--dim); }

/* ================= شرائط أفقية (لوحة القيادة) ================= */
.hscroll-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.range-toggle{ display:inline-flex; gap:4px; background:var(--surface-2); border-radius:999px; padding:3px; }
.range-toggle a{
  padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:700;
  color:var(--dim); text-decoration:none;
}
.range-toggle a.active{ background:var(--surface); color:var(--brand-strong); box-shadow:var(--shadow); }
.hscroll{
  display:flex; gap:12px; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x proximity;
}
.hscroll-card{
  flex:0 0 auto; width:220px; scroll-snap-align:start;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:13px 15px; position:relative;
}
.hscroll-card .badge-num{ position:absolute; inset-inline-start:12px; top:12px; }
.hscroll-card .hs-title{ font-weight:800; font-size:13.8px; margin-top:2px; margin-bottom:4px; }
.hscroll-card .hs-meta{ color:var(--dim); font-size:12px; }
.hscroll-card .hs-actions{ margin-top:10px; }

@media (max-width: 860px){
  .topbar-search{ width:min(220px, 44vw); }
}
@media (max-width: 640px){
  .topbar h1{ display:none; }
  .topbar-search{ width:auto; flex:1; }
}
.ta-c{ text-align:center; }