/* =============================================================
   DCS — طبقة الامتداد فوق نظام التصميم المعتمد
   -------------------------------------------------------------
   الأساس: design-system.css (نسخة حرفية من الدليل — لا تُعدَّل).
   هذا الملف يضيف فقط ما لا يغطّيه الدليل:
     أ) جسر الأصناف القديمة في شاشات DCS إلى لغة الدليل البصرية.
     ب) مكوّنات الحركة (معالج، إدخال مقسّم، مقاييس، توقيع، خط زمني).
     ج) كسوة مكتبات الطرف الثالث (DataTables / Select2 / SweetAlert2).
     د) معالجة الاتجاه LTR للواجهة الإنجليزية.
   كل لون من var(--…) — لا hex خارج ألوان الحالات.
   ============================================================= */

/* =============================================================
   0) أساس
   ============================================================= */
html, body { font-size: 14px; line-height: 1.6; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
button { font-family: inherit; cursor: pointer; border: none; background: transparent; }
img { max-width: 100%; }
hr { border: none; height: 1px; background: var(--line-soft); margin: 18px 0; }

.mono, .ltr { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; }
.money { font-family: var(--font-mono); unicode-bidi: isolate; font-weight: 700; white-space: nowrap; }
.money .cur { font-family: var(--font-body); font-size: 0.82em; color: var(--muted); font-weight: 600; margin-inline-start: 3px; }
.text-muted { color: var(--muted); }
.text-danger { color: var(--danger-ink); }
.text-ok { color: var(--ok-ink); }
.text-warn { color: var(--warn-ink); }
.nowrap { white-space: nowrap; }
.grow { flex: 1; min-width: 0; }
.muted-note { font-size: 11.5px; color: var(--muted); line-height: 1.7; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* شبكات مساعدة */
.split-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
.split-2.even { grid-template-columns: 1fr 1fr; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.grid   { display: grid; gap: 14px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1024px) {
  .split-2, .two-col, .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* =============================================================
   1) الشل — إضافات فوق الدليل
   ============================================================= */
.app-header .header-tools { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.sidebar-toggle { display: none; }
@media (max-width: 1024px) { .sidebar-toggle { display: grid; } }

.sb-logo-mark.brand {
  background: var(--ink); color: var(--card);
  font-family: var(--font-display); font-size: 14px; font-weight: 800; letter-spacing: .04em;
}

.sidebar-footer .user-card { width: 100%; text-align: start; border: 1px solid transparent; }
.sidebar-footer .user-card:hover { border-color: var(--line-soft); }
.sb-logout { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--muted); transition: all var(--t-fast); }
.sb-logout:hover { background: var(--danger-bg); color: var(--danger-ink); }
.sb-logout svg { width: 15px; height: 15px; }

/* قائمة منسدلة عامة (اللغة / المستخدم) */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0; min-width: 210px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-pop); padding: 6px; z-index: 200;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all var(--t-base);
}
.dropdown-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu a,
.dropdown-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 11px; border-radius: 9px; font-size: 13px; font-weight: 600;
  color: var(--ink-soft); text-decoration: none; text-align: start; transition: all var(--t-fast);
}
.dropdown-menu a:hover,
.dropdown-menu button:hover { background: var(--bg-2); color: var(--ink); }
.dropdown-menu svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--muted); }
.dropdown-divider { height: 1px; background: var(--line-soft); margin: 5px 2px; }
.dropdown-check { margin-inline-start: auto; color: var(--primary); }

/* =============================================================
   2) جسر الأصناف القديمة → لغة الدليل
   ============================================================= */
.page-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 22px; flex-wrap: wrap; gap: 16px;
}
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* الأزرار */
.btn {
  padding: 9px 16px; background: var(--card); color: var(--ink-soft);
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  transition: all var(--t-base); text-decoration: none;
}
.btn:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; transform: translateY(-1px); }
.btn svg { width: 14px; height: 14px; }
.btn.btn-primary, .btn-create {
  width: auto; padding: 9px 16px; background: var(--ink); color: var(--card);
  border: 1px solid var(--ink); border-radius: var(--r-md); font-size: 13px;
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  font-family: inherit; font-weight: 700; cursor: pointer; transition: all var(--t-base);
}
.btn.btn-primary:hover, .btn-create:hover { background: var(--primary); border-color: var(--primary); color: var(--card); transform: translateY(-1px); }
.btn.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.btn-danger:hover { background: var(--danger-ink); border-color: var(--danger-ink); color: #fff; }
.btn.btn-success { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.btn-success:hover { background: var(--ok-ink); border-color: var(--ok-ink); color: #fff; }
.btn.btn-light { background: var(--bg-2); border-color: transparent; color: var(--ink-soft); }
.btn.btn-light:hover { background: var(--bg-3); color: var(--ink); }
.btn.btn-ghost { background: transparent; border-color: transparent; }
.btn-sm { padding: 6px 11px; font-size: 12px; border-radius: var(--r-sm); }
.btn-sm svg { width: 12px; height: 12px; }
.btn-icon {
  width: 32px; height: 32px; padding: 0; justify-content: center;
  border-radius: 9px; background: transparent; border-color: transparent; color: var(--muted);
}
.btn-icon:hover { background: var(--bg-2); color: var(--ink); transform: none; border-color: transparent; }
.btn-icon.danger:hover { background: var(--danger-bg); color: var(--danger-ink); }
.btn-block { width: 100%; justify-content: center; }
.mini-btn {
  padding: 5px 11px; border-radius: var(--r-sm); background: var(--bg-2);
  border: 1px solid transparent; font-family: inherit; font-size: 11.5px;
  font-weight: 700; color: var(--ink-soft); transition: all var(--t-fast);
}
.mini-btn:hover { background: var(--bg-3); color: var(--ink); }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* البطاقة — العنوان القديم */
.card-title { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700; color: var(--ink); }
.card-title svg { width: 16px; height: 16px; color: var(--primary); }
.card-title-block .title .title-ic.warn   { background: var(--warn-bg);   color: var(--warn-ink); }
.card-title-block .title .title-ic.ok     { background: var(--ok-bg);     color: var(--ok-ink); }
.card-title-block .title .title-ic.danger { background: var(--danger-bg); color: var(--danger-ink); }
.card-body.padded { padding: 22px; }
.card-body.flush  { padding: 0; }
.card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card-foot {
  padding: 14px 22px; border-top: 1px solid var(--line-soft); background: var(--bg);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

/* بطاقات الإحصاء القديمة → هيئة KPI */
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.stat-card {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 16px; position: relative; overflow: hidden; transition: all var(--t-fast);
  text-decoration: none; color: inherit; display: block;
}
.stat-card:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(12,35,64,.15); text-decoration: none; }
.stat-card.highlight { background: linear-gradient(135deg, var(--primary-soft) 0%, var(--bg-2) 100%); border-color: var(--primary); }
.stat-card.urgent { background: linear-gradient(135deg, var(--warn-bg) 0%, var(--bg-2) 100%); border-color: var(--warn); }
.stat-card.urgent::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 3px; background: var(--warn); }
.stat-icon {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary); margin-bottom: 10px;
}
.stat-icon svg { width: 15px; height: 15px; }
.stat-icon.success { background: var(--ok-bg);     color: var(--ok-ink); }
.stat-icon.warn    { background: var(--warn-bg);   color: var(--warn-ink); }
.stat-icon.danger  { background: var(--danger-bg); color: var(--danger-ink); }
.stat-icon.info    { background: var(--info-bg);   color: var(--info-ink); }
.stat-value {
  font-family: var(--font-mono); font-size: 30px; font-weight: 800; color: var(--ink);
  line-height: 1; letter-spacing: -.03em; margin-bottom: 8px; direction: ltr; unicode-bidi: isolate;
  display: flex; align-items: baseline; gap: 5px;
}
.stat-value .unit { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--muted); }
.stat-label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: var(--muted);
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.6;
}
.stat-change {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 9px;
  padding: 1px 8px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
}
.stat-change.up   { background: var(--ok-bg);     color: var(--ok-ink); }
.stat-change.down { background: var(--danger-bg); color: var(--danger-ink); }
.stat-change svg { width: 11px; height: 11px; }

/* إحصاء مصغّر داخل البطاقات */
.mini-stat {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-md);
  padding: 13px 14px;
}
.mini-value { font-family: var(--font-mono); font-size: 19px; font-weight: 800; color: var(--ink); direction: ltr; unicode-bidi: isolate; }
.mini-label { font-size: 11px; color: var(--muted); margin-top: 4px; font-weight: 600; }

/* الوسوم والحالات القديمة (badge-*) → هيئة status-pill */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 700; background: var(--bg-2); color: var(--ink-soft);
  white-space: nowrap; line-height: 1.7;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--neutral); flex-shrink: 0; }
.badge-teal, .badge-green     { background: var(--ok-bg);     color: var(--ok-ink); }
.badge-teal::before, .badge-green::before      { background: var(--ok); }
.badge-orange, .badge-warning { background: var(--warn-bg);   color: var(--warn-ink); }
.badge-orange::before, .badge-warning::before  { background: var(--warn); }
.badge-red, .badge-danger     { background: var(--danger-bg); color: var(--danger-ink); }
.badge-red::before, .badge-danger::before      { background: var(--danger); }
.badge-blue, .badge-info, .badge-purple { background: var(--info-bg); color: var(--info-ink); }
.badge-blue::before, .badge-info::before, .badge-purple::before { background: var(--info); }
.badge-gray { background: var(--bg-2); color: var(--muted); }
.badge-gray::before { background: var(--neutral); }
.badge-primary { background: var(--primary-soft); color: var(--primary); }
.badge-primary::before { background: var(--primary); }
.badge.plain { padding-inline: 10px; }
.badge.plain::before { display: none; }

/* النماذج القديمة */
.form-group { margin-bottom: 15px; }
.form-group > label, .form-label {
  display: block; font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px;
}
.form-label .req, .required { color: var(--accent); margin-inline-start: 3px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.form-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .form-grid, .form-grid.cols-2, .form-grid.cols-3 { grid-template-columns: 1fr; } }
textarea.form-input { min-height: 96px; resize: vertical; line-height: 1.7; }
.form-input[type="date"], .form-input[type="datetime-local"],
.form-input[type="time"], .form-input[type="number"] {
  font-family: var(--font-mono); direction: ltr; text-align: start;
}
.form-input.input-error, .form-input.error, .form-select.error { border-color: var(--danger); background: var(--danger-bg); }
.form-hint { font-size: 11px; color: var(--muted); margin-top: 5px; line-height: 1.7; }
.form-error, .invalid-feedback { font-size: 11px; color: var(--danger-ink); margin-top: 5px; font-weight: 600; }
.form-check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.form-check input[type="checkbox"], .form-check input[type="radio"] {
  appearance: none; width: 17px; height: 17px; border: 1.5px solid var(--line);
  border-radius: 5px; background: var(--card); cursor: pointer; position: relative;
  transition: all var(--t-fast); flex-shrink: 0;
}
.form-check input[type="radio"] { border-radius: 50%; }
.form-check input:checked { background: var(--primary); border-color: var(--primary); }
.form-check input[type="checkbox"]:checked::after {
  content: ''; position: absolute; inset: 0; background-size: 11px; background-position: center; background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.form-check input[type="radio"]:checked::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--card); }
.was-validated .form-input:invalid, .was-validated .form-select:invalid { border-color: var(--danger); }

/* شريط الفلاتر */
.filters-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 14px 16px; margin-bottom: 14px;
}
.filters-bar .form-group { margin-bottom: 0; min-width: 170px; flex: 1 1 170px; }
.filter-select, .filter-input {
  width: 100%; padding: 9px 13px; background: var(--bg);
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  font-family: inherit; font-size: 12.5px; color: var(--ink); transition: all var(--t-base);
}
.filter-select:focus, .filter-input:focus {
  outline: none; border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 3px var(--primary-soft);
}

/* التنبيهات */
.alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 15px; border-radius: var(--r-md); margin-bottom: 16px;
  font-size: 13px; font-weight: 600; line-height: 1.7;
  background: var(--bg-2); color: var(--ink-soft); border: 1px solid var(--line-soft);
}
.alert svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.alert-success { background: var(--ok-bg);     color: var(--ok-ink);     border-color: rgba(16,185,129,.28); }
.alert-danger  { background: var(--danger-bg); color: var(--danger-ink); border-color: rgba(220,38,38,.25); }
.alert-warning { background: var(--warn-bg);   color: var(--warn-ink);   border-color: rgba(245,158,11,.28); }
.alert-info    { background: var(--info-bg);   color: var(--info-ink);   border-color: rgba(14,116,144,.22); }
.alert ul { margin: 0; padding-inline-start: 18px; }

/* الجداول داخل البطاقات */
.card .data-table { width: 100%; }
.card-body.flush .data-table thead th:first-child,
.card-body.flush .data-table tbody td:first-child { padding-inline-start: 22px; }
.card-body.flush .data-table thead th:last-child,
.card-body.flush .data-table tbody td:last-child { padding-inline-end: 22px; }
.data-table thead th { text-align: center; }
.data-table td.actions, .data-table th.actions { width: 1%; white-space: nowrap; }
.data-table .row-actions { display: flex; gap: 4px; }
.cell-main { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.cell-main a { color: var(--ink); }
.cell-main a:hover { color: var(--primary); }
.cell-sub { font-size: 11px; color: var(--muted); margin-top: 3px; font-weight: 500; }
.cell-num { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; font-weight: 700; }
.table-wrap { overflow-x: auto; }

/* قوائم المفتاح/القيمة */
.kv-list { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-md); overflow: hidden; }
.kv { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--card); padding: 11px 14px; font-size: 13px; }
.kv > span:first-child, .kv .k { color: var(--muted); font-size: 12px; font-weight: 600; }
.kv > span:last-child, .kv .v { color: var(--ink); font-weight: 700; text-align: end; }
.kv .v.mono { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; }

/* شبكة معلومات (شاشات التفاصيل) */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.info-item .info-label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: var(--muted);
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 5px;
}
.info-item .info-value { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.6; }
.info-item .info-value.mono { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; }

/* صورة رمزية بحرفين */
.avatar, .user-row-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--accent));
}
.avatar.sm { width: 30px; height: 30px; font-size: 11px; }
.avatar.lg { width: 64px; height: 64px; font-size: 21px; }
.role-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  background: var(--bg-2); border-radius: var(--r-sm);
  font-size: 11px; font-weight: 700; color: var(--ink-soft);
}

/* ترقيم الصفحات */
.pagination {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  padding: 14px 18px; border-top: 1px solid var(--line-soft); background: var(--bg);
}
.pagination a, .pagination span {
  min-width: 34px; height: 34px; padding: 0 10px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--ink-soft); background: var(--card); border: 1px solid var(--line-soft);
  transition: all var(--t-fast); text-decoration: none;
}
.pagination a:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.pagination .active span, .pagination span[aria-current] { background: var(--primary); border-color: var(--primary); color: var(--card); }
.pagination .disabled span { opacity: .45; }
.pagination-info { font-size: 12px; color: var(--muted); margin-inline-end: auto; }

/* تذييل التطبيق */
.app-footer {
  padding: 18px 32px 26px; text-align: center;
  font-size: 11.5px; color: var(--muted); line-height: 1.9;
}
.app-footer a { color: var(--ink-soft); font-weight: 700; }
.app-footer a:hover { color: var(--primary); }

/* =============================================================
   3) مكوّنات الحركة — الإدخال الموجّه والمعاينة الحيّة
   -------------------------------------------------------------
   نفس منطق «قصة إدخال اللوحة» و«قصة فحص المركبة»:
   المستخدم يكتب → الشاشة تبني أمامه النتيجة → الجاهزية تتحدّث فوراً.
   ============================================================= */

/* ---- 3.1 المعالج متعدد الخطوات ---- */
.steps {
  display: flex; align-items: flex-start; gap: 0; margin-bottom: 22px;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-xl);
  padding: 16px 20px; overflow-x: auto;
}
.step { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 158px; position: relative; }
.step + .step::before {
  content: ''; position: absolute; inset-inline-start: -50%; top: 15px;
  width: 100%; height: 2px; background: var(--line-soft);
}
.step.done + .step::before { background: var(--ok); }
.step .st-n {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; z-index: 1;
  display: grid; place-items: center; background: var(--bg-2); color: var(--muted);
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 800; border: 2px solid var(--card);
  transition: all var(--t-base);
}
.step.cur .st-n { background: var(--primary); color: var(--card); box-shadow: 0 0 0 4px var(--primary-soft); }
.step.done .st-n { background: var(--ok); color: #fff; }
.step .st-n svg { width: 15px; height: 15px; }
.step .st-t { min-width: 0; display: flex; flex-direction: column; position: relative; z-index: 1; background: var(--card); padding-inline-end: 10px; }
.step .st-l { font-size: 12.5px; font-weight: 700; line-height: 1.55; color: var(--muted); white-space: nowrap; }
.step.cur .st-l, .step.done .st-l { color: var(--ink); }
.step .st-d { font-size: 10.5px; line-height: 1.5; color: var(--muted); margin-top: 1px; white-space: nowrap; }

.wiz-pane { display: none; }
.wiz-pane.on { display: block; animation: fadeUp 0.35s cubic-bezier(0.2,0.8,0.2,1); }
.wiz-foot {
  position: sticky; bottom: 0; background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--r-xl); padding: 13px 18px; display: flex; align-items: center;
  gap: 12px; margin-top: 18px; box-shadow: 0 -6px 20px -14px rgba(0,0,0,0.3); z-index: 5; flex-wrap: wrap;
}
.wiz-foot .grow { flex: 1; min-width: 120px; font-size: 12px; color: var(--muted); }

/* ---- 3.2 مبدّل مقطعي (خروج/عودة — نوع الإجراء) ---- */
.seg {
  display: inline-flex; background: var(--bg-2); border-radius: var(--r-md);
  padding: 3px; gap: 3px;
}
.seg button {
  padding: 8px 15px; border-radius: 8px; border: none; background: transparent;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--muted);
  transition: all var(--t-base); display: inline-flex; align-items: center; gap: 6px;
}
.seg button:hover:not(.on) { color: var(--ink); }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: var(--sh-card); }
.seg button svg { width: 14px; height: 14px; }

/* ---- 3.3 بطاقات الاختيار ---- */
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pick {
  background: var(--card); border: 1.5px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 15px; cursor: pointer; transition: all var(--t-fast); text-align: start;
  font-family: inherit; width: 100%; display: block; position: relative;
}
.pick:hover { border-color: var(--primary); transform: translateY(-1px); }
.pick.on { border-color: var(--primary); background: var(--primary-soft); }
.pick.off { opacity: .55; cursor: not-allowed; }
.pick.off:hover { transform: none; border-color: var(--line-soft); }
.pick-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pick-name { font-size: 14px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.pick-name svg { width: 15px; height: 15px; color: var(--primary); }
.pick-code {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--muted);
  background: var(--bg-2); border-radius: 5px; padding: 2px 7px;
}
.pick-desc { font-size: 11.5px; color: var(--muted); line-height: 1.7; }
.pick-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  padding-top: 11px; margin-top: 11px; border-top: 1px dashed var(--line-soft);
}
.pick-val { font-family: var(--font-mono); font-size: 18px; font-weight: 800; color: var(--ink); line-height: 1; direction: ltr; }
.pick-val small { font-size: 10.5px; color: var(--muted); font-weight: 600; font-family: var(--font-body); }

/* ---- 3.4 الإدخال المقسّم (هوية / سجل / جوال / آيبان) ---- */
.code-input { display: flex; gap: 7px; flex-wrap: wrap; }
.code-input.ltr { direction: ltr; }
.code-box {
  width: 42px; height: 52px; text-align: center;
  font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--ink);
  background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r-md);
  transition: all var(--t-base); padding: 0;
}
.code-box:focus { outline: none; border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 3px var(--primary-soft); }
.code-box.filled { border-color: var(--primary); background: var(--card); }
.code-box.bad { border-color: var(--danger); background: var(--danger-bg); animation: shake 0.4s; }
.code-box.lead { border-color: var(--accent); background: var(--accent-soft); }
.code-sep { align-self: center; color: var(--muted); font-weight: 800; padding: 0 2px; }
@media (max-width: 600px) {
  .code-box { width: 34px; height: 44px; font-size: 16px; }
}

/* ---- 3.5 منصّة المعاينة الحيّة + بطاقة الهوية ---- */
.id-stage {
  margin-top: 18px; padding: 20px; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center;
}
.id-card {
  width: 320px; max-width: 100%; border-radius: 12px; overflow: hidden;
  background: var(--card); border: 2px solid var(--ink);
  display: flex; flex-direction: column; position: relative;
  transition: border-color var(--t-base), box-shadow var(--t-base);
  box-shadow: 0 8px 22px -14px rgba(0,0,0,.45);
}
.id-card.is-valid   { border-color: var(--ok); }
.id-card.is-invalid { border-color: var(--danger); }
.id-card .idc-band {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; background: var(--ink); color: var(--card);
}
.id-card.is-valid   .idc-band { background: var(--ok-ink); }
.id-card.is-invalid .idc-band { background: var(--danger-ink); }
.id-card .idc-kind { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.id-card .idc-flag { font-family: var(--font-mono); font-size: 9.5px; font-weight: 800; letter-spacing: .12em; opacity: .85; }
.id-card .idc-body { padding: 16px 14px 14px; text-align: center; }
.id-card .idc-num {
  font-family: var(--font-mono); font-size: 26px; font-weight: 800; color: var(--ink);
  letter-spacing: .16em; direction: ltr; line-height: 1.2; word-break: break-all;
}
.id-card .idc-num .ph { color: var(--line); }
.id-card .idc-num-ar { font-family: var(--font-body); font-size: 17px; font-weight: 700; color: var(--ink-soft); letter-spacing: .12em; margin-top: 4px; }
.id-card .idc-holder { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-soft); }
.id-card .idc-holder .lbl { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.id-card .idc-holder .val { font-size: 14px; font-weight: 700; color: var(--ink); margin-top: 3px; }
.id-card .idc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; background: var(--bg); border-top: 1px solid var(--line-soft);
  font-size: 10.5px; color: var(--muted); font-weight: 600;
}

/* قراءة جانبية للمعاينة */
.id-read { display: flex; flex-direction: column; gap: 6px; min-width: 210px; }
.id-read .pr-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12px; }
.id-read .pr-l { color: var(--muted); }
.id-read .pr-v { font-weight: 700; color: var(--ink); }
.id-read .pr-v.mono { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; }
.id-read .pr-v.ok  { color: var(--ok-ink); }
.id-read .pr-v.bad { color: var(--danger-ink); }

/* نتيجة التحقق تحت الإدخال */
.check-note {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 14px;
  padding: 11px 13px; border-radius: var(--r-md); font-size: 12.5px; font-weight: 600; line-height: 1.7;
  border: 1px solid transparent; animation: fadeUp .3s cubic-bezier(.2,.8,.2,1);
}
.check-note svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
.check-note.ok   { background: var(--ok-bg);     color: var(--ok-ink);     border-color: rgba(16,185,129,.25); }
.check-note.warn { background: var(--warn-bg);   color: var(--warn-ink);   border-color: rgba(245,158,11,.25); }
.check-note.bad  { background: var(--danger-bg); color: var(--danger-ink); border-color: rgba(220,38,38,.22); }
.check-note.info { background: var(--info-bg);   color: var(--info-ink);   border-color: rgba(14,116,144,.2); }

/* ---- 3.6 قائمة الجاهزية ---- */
.rd-list { display: grid; gap: 2px; }
.rd-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 2px;
  border-bottom: 1px solid var(--line-soft); font-size: 12.5px; line-height: 1.6;
}
.rd-item:last-child { border-bottom: none; }
.rd-mark {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  display: grid; place-items: center; background: var(--bg-2); color: var(--muted);
  transition: all var(--t-base);
}
.rd-mark svg { width: 12px; height: 12px; }
.rd-item.ok   .rd-mark { background: var(--ok-bg);   color: var(--ok-ink); }
.rd-item.warn .rd-mark { background: var(--warn-bg); color: var(--warn-ink); }
.rd-item.bad  .rd-mark { background: var(--danger-bg); color: var(--danger-ink); }
.rd-text .t { display: block; font-weight: 700; color: var(--ink); }
.rd-item.ok .rd-text .t { color: var(--ink-soft); }
.rd-text .s { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.rd-score {
  display: flex; align-items: baseline; gap: 6px; margin-bottom: 12px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--ink-soft);
}
.rd-score .big { font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1; }

/* ---- 3.7 صندوق الملخّص الحسابي (لصق جانبي) ---- */
.summary-box {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 16px; position: sticky; top: 78px;
}
.summary-box .sb-title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.summary-box .sb-sub { font-size: 11.5px; color: var(--muted); margin-bottom: 14px; line-height: 1.7; }
.sum-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 12.5px; }
.sum-line .l { color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.sum-line .v { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; font-weight: 700; color: var(--ink); }
.sum-line.sub .l, .sum-line.sub .v { color: var(--muted); font-size: 11.5px; }
.sum-line.minus .v { color: var(--ok-ink); }
.sum-line.total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; }
.sum-line.total .l { font-weight: 700; color: var(--ink); font-size: 13.5px; }
.sum-line.total .v { font-size: 19px; font-weight: 800; }
.sum-note { font-size: 11px; color: var(--muted); line-height: 1.7; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-soft); }
.flash { animation: flashBg .7s ease; }
@keyframes flashBg { 0% { background: var(--accent-soft); } 100% { background: transparent; } }

/* ---- 3.8 المقاييس (نسبة السداد / الدفعة المقدمة / المخاطر) ---- */
.gauge { display: flex; align-items: center; gap: 12px; }
.gauge input[type="range"] {
  flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px;
  background: var(--bg-2); outline: none; direction: ltr;
}
.gauge input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary); border: 3px solid var(--card); cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform var(--t-fast);
}
.gauge input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.1); }
.gauge input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: var(--primary);
  border: 3px solid var(--card); cursor: pointer;
}
.gauge-val {
  font-family: var(--font-mono); font-size: 15px; font-weight: 800; color: var(--ink);
  min-width: 58px; text-align: center; direction: ltr;
  background: var(--bg-2); border-radius: var(--r-sm); padding: 4px 8px;
}
.gauge-track { height: 9px; border-radius: 999px; background: var(--bg-2); overflow: hidden; direction: ltr; }
.gauge-track > i {
  display: block; height: 100%; border-radius: 999px; background: var(--primary);
  transition: width .35s cubic-bezier(.32,.72,0,1), background .25s ease;
}
.gauge-track.ok   > i { background: var(--ok); }
.gauge-track.warn > i { background: var(--warn); }
.gauge-track.bad  > i { background: var(--danger); }
.gauge-marks {
  display: flex; justify-content: space-between; margin-top: 6px; direction: ltr;
  font-family: var(--font-mono); font-size: 10px; color: var(--muted); font-weight: 600;
}

/* حلقة تقدّم */
.ring { position: relative; width: 104px; height: 104px; flex-shrink: 0; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.ring .ring-bg { stroke: var(--bg-2); }
.ring .ring-fg { stroke: var(--primary); transition: stroke-dashoffset .8s cubic-bezier(.32,.72,0,1); }
.ring.ok   .ring-fg { stroke: var(--ok); }
.ring.warn .ring-fg { stroke: var(--warn); }
.ring.bad  .ring-fg { stroke: var(--danger); }
.ring-label {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  font-family: var(--font-mono); font-size: 21px; font-weight: 800; color: var(--ink); direction: ltr;
}
.ring-label small { display: block; font-family: var(--font-body); font-size: 10px; font-weight: 600; color: var(--muted); }

/* ---- 3.9 صفوف الأشرطة (الأعمار / المراحل) ---- */
.bar-row {
  display: grid; grid-template-columns: 116px 1fr 96px; gap: 12px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
.bar-row:last-child { border-bottom: none; }
.bar-label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.bar-track { height: 10px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.bar-fill {
  display: block; height: 100%; border-radius: 999px; background: var(--primary);
  width: 0; transition: width .9s cubic-bezier(.32,.72,0,1);
}
.bar-fill.ok { background: var(--ok); } .bar-fill.info { background: var(--info); }
.bar-fill.warn { background: var(--warn); } .bar-fill.bad { background: var(--danger); }
.bar-val { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--ink); text-align: end; direction: ltr; }
.bar-pct { font-family: var(--font-mono); font-size: 11px; color: var(--muted); font-weight: 700; direction: ltr; }
@media (max-width: 700px) { .bar-row { grid-template-columns: 92px 1fr 74px; } }

/* جسر أشرطة لوحة المعلومات القديمة */
.aging-row, .stage-row {
  display: grid; grid-template-columns: 120px 1fr 100px; gap: 12px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
.aging-row:last-child, .stage-row:last-child { border-bottom: none; }
.aging-label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.aging-track, .stage-bar-wrap { height: 10px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.aging-fill, .stage-bar-fill {
  display: block; height: 100%; border-radius: 999px; background: var(--primary);
  color: transparent; font-size: 0; transition: width .9s cubic-bezier(.32,.72,0,1);
}
.aging-amount, .stage-count {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 700;
  color: var(--ink); text-align: end; direction: ltr; unicode-bidi: isolate;
}
.ptp-bar { height: 10px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.ptp-bar > span, .ptp-bar > div { display: block; height: 100%; background: var(--primary); border-radius: 999px; }

/* ---- 3.10 الخط الزمني ---- */
.tl { position: relative; padding-inline-start: 26px; }
.tl::before { content: ''; position: absolute; top: 6px; bottom: 6px; inset-inline-start: 8px; width: 2px; background: var(--line-soft); }
.tl-item { position: relative; padding-bottom: 18px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ''; position: absolute; inset-inline-start: -22px; top: 3px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--primary); z-index: 1;
}
.tl-item.ok::before     { background: var(--ok); border-color: var(--ok); }
.tl-item.warn::before   { border-color: var(--warn); }
.tl-item.danger::before { border-color: var(--danger); }
.tl-item.muted::before  { border-color: var(--line); }
.tl-t { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.tl-s { font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; line-height: 1.7; }
.tl-m { font-size: 10.5px; color: var(--muted); margin-top: 5px; display: flex; gap: 9px; flex-wrap: wrap; }
.tl-m .mo { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; }

/* ---- 3.11 لوحة التوقيع ---- */
.sign-pad {
  position: relative; height: 150px; border-radius: var(--r-md);
  background: var(--card); border: 1.5px dashed var(--line);
  overflow: hidden; cursor: crosshair; transition: border-color var(--t-base);
}
.sign-pad:hover { border-color: var(--primary); }
.sign-pad.signed { border-style: solid; border-color: var(--ok); }
.sign-pad canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.sign-pad .sp-hint {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 12px; color: var(--muted); pointer-events: none; transition: opacity var(--t-base);
}
.sign-pad.signed .sp-hint, .sign-pad.drawing .sp-hint { opacity: 0; }

/* ---- 3.12 شبكة المرفقات / الأدلة ---- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 9px; }
.photo-cell {
  position: relative; aspect-ratio: 4/3; border-radius: var(--r-md);
  background: var(--bg); border: 1.5px dashed var(--line);
  display: grid; place-items: center; text-align: center; padding: 8px;
  font-size: 11px; color: var(--muted); font-weight: 600; cursor: pointer;
  transition: all var(--t-fast);
}
.photo-cell:hover { border-color: var(--primary); color: var(--primary); }
.photo-cell.has { border-style: solid; border-color: var(--ok); background: var(--ok-bg); color: var(--ok-ink); }
.photo-cell svg { width: 17px; height: 17px; margin-bottom: 5px; }
.photo-cell .pc-req { position: absolute; top: 5px; inset-inline-end: 6px; color: var(--accent); font-size: 12px; font-weight: 800; }

/* ---- 3.13 هياكل التحميل ---- */
.sk {
  border-radius: 6px; background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
  background-size: 200% 100%; animation: skw 1.3s linear infinite;
}
@keyframes skw { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.sk.line { height: 12px; margin-bottom: 8px; }
.sk.line.short { width: 55%; }

/* عدّاد رقمي متحرّك */
.count-up { font-variant-numeric: tabular-nums; }

/* =============================================================
   4) شاشات DCS — مكوّنات خاصة بالنظام
   ============================================================= */

/* ---- 4.1 التبويبات (ملف القضية / الإعدادات) ---- */
.tabs {
  display: flex; gap: 4px; background: var(--bg-2); padding: 4px;
  border-radius: var(--r-md); margin-bottom: 18px; width: fit-content;
  max-width: 100%; flex-wrap: wrap;
}
.tabs a.tab, .tabs .tab {
  padding: 9px 16px; background: transparent; border: none; border-radius: 8px;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--muted);
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; transition: all var(--t-base);
}
.tabs a.tab:hover:not(.active), .tabs .tab:hover:not(.active) { color: var(--ink); text-decoration: none; }
.tabs .tab.active { background: var(--card); color: var(--ink); box-shadow: var(--sh-card); }
.tabs .tab svg { width: 15px; height: 15px; }
.tabs .tab .tab-count {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  background: var(--bg-3); color: var(--ink-soft); border-radius: var(--r-pill); padding: 1px 6px;
}
.tabs .tab.active .tab-count { background: var(--primary-soft); color: var(--primary); }
.tab-panel { display: none; }
.tab-panel.active, .tab-panel.on { display: block; animation: fadeUp .3s cubic-bezier(.2,.8,.2,1); }

/* ---- 4.2 الخط الزمني القديم (تبويب الأحداث) ---- */
.timeline { position: relative; padding-inline-start: 26px; }
.timeline::before { content: ''; position: absolute; top: 6px; bottom: 6px; inset-inline-start: 8px; width: 2px; background: var(--line-soft); }
.timeline-item { position: relative; padding-bottom: 18px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute; inset-inline-start: -22px; top: 3px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--card); border: 2px solid var(--primary); z-index: 1;
}
.timeline-dot.ok, .timeline-dot.green { background: var(--ok); border-color: var(--ok); }
.timeline-dot.warn, .timeline-dot.orange { border-color: var(--warn); }
.timeline-dot.danger, .timeline-dot.red { border-color: var(--danger); }
.timeline-dot.gray { border-color: var(--line); }
.timeline-title { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.timeline-sub { font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; line-height: 1.7; }
.timeline-meta { font-size: 10.5px; color: var(--muted); margin-top: 5px; display: flex; gap: 9px; flex-wrap: wrap; font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; }
.timeline-body { flex: 1; min-width: 0; }

/* ---- 4.3 الإشعارات ---- */
.notif-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft); transition: background var(--t-fast);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg); }
.notif-item.unread { background: var(--primary-soft); }
.notif-icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--primary-soft); color: var(--primary);
}
.notif-icon svg { width: 16px; height: 16px; }
.notif-icon.warn { background: var(--warn-bg); color: var(--warn-ink); }
.notif-icon.ok   { background: var(--ok-bg);   color: var(--ok-ink); }
.notif-icon.bad  { background: var(--danger-bg); color: var(--danger-ink); }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.notif-sub { font-size: 12px; color: var(--ink-soft); margin-top: 3px; line-height: 1.7; }
.notif-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); margin-top: 5px; direction: ltr; unicode-bidi: isolate; }
.notif-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ---- 4.4 الإعدادات ---- */
.settings-layout { display: grid; grid-template-columns: 250px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .settings-layout { grid-template-columns: 1fr; } }
.settings-nav { padding: 8px; position: sticky; top: 78px; }
.settings-nav a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--ink-soft);
  text-decoration: none; transition: all var(--t-fast); margin-bottom: 2px; position: relative;
}
.settings-nav a:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }
.settings-nav a.active { background: var(--primary); color: var(--card); font-weight: 700; }
.settings-nav a svg { width: 16px; height: 16px; flex-shrink: 0; }
.settings-nav .nav-section-title { padding: 10px 12px 6px; }

/* شريط حفظ لاصق للنماذج الطويلة */
.save-bar {
  position: sticky; bottom: 0; z-index: 6; margin-top: 18px;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-xl);
  padding: 13px 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  box-shadow: 0 -6px 20px -14px rgba(0,0,0,.3);
}
.save-bar .status { flex: 1; min-width: 120px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.save-bar .status.saved { color: var(--ok-ink); }
.save-bar .status svg { width: 14px; height: 14px; }

/* ---- 4.5 المرفقات ---- */
.attachments-panel__icon { width: 30px; height: 30px; border-radius: 9px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; }
.attachments-panel__icon svg { width: 16px; height: 16px; }
.attachments-panel__count { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--muted); }
.attachments-form__submit { margin-top: 10px; }
.attachment-name { display: flex; align-items: center; gap: 10px; }
.attachment-name__icon {
  width: 32px; height: 32px; border-radius: 9px; background: var(--bg-2); color: var(--ink-soft);
  display: grid; place-items: center; flex-shrink: 0;
}
.attachment-name__icon svg { width: 15px; height: 15px; }
.attachment-name__desc { font-size: 11px; color: var(--muted); margin-top: 2px; }
.attachment-actions { display: flex; gap: 5px; justify-content: flex-end; }
.file-drop {
  border: 1.5px dashed var(--line); border-radius: var(--r-md); background: var(--bg);
  padding: 18px; text-align: center; transition: all var(--t-base); cursor: pointer;
}
.file-drop:hover, .file-drop.over { border-color: var(--primary); background: var(--primary-soft); }
.file-drop svg { width: 22px; height: 22px; color: var(--muted); margin-bottom: 7px; }
.file-drop .fd-t { font-size: 13px; font-weight: 700; color: var(--ink); }
.file-drop .fd-s { font-size: 11.5px; color: var(--muted); margin-top: 4px; }

/* ---- 4.6 الحالة الفارغة (مكوّن Blade) ---- */
.empty-state .empty-icon, .empty-state-ic {
  width: 72px; height: 72px; margin: 0 auto 16px; background: var(--bg-2);
  border-radius: 50%; display: grid; place-items: center; color: var(--muted);
}
.empty-state .empty-icon svg, .empty-state-ic svg { width: 28px; height: 28px; }
.empty-state .empty-title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.empty-state .empty-sub { font-size: 13px; color: var(--muted); margin: 0 auto 18px; max-width: 380px; line-height: 1.7; }

/* ---- 4.7 شاشة الدخول ---- */
.auth-body { min-height: 100vh; display: flex; flex-direction: column; }
.auth-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 24px; background: var(--card); border-bottom: 1px solid var(--line-soft);
}
.auth-logo { display: flex; align-items: center; gap: 11px; }
.auth-logo-mark {
  width: 40px; height: 40px; border-radius: 11px; background: var(--ink); color: var(--card);
  display: grid; place-items: center; font-family: var(--font-display); font-size: 13px; font-weight: 800;
}
.auth-logo-text .t { font-size: 14px; font-weight: 700; color: var(--ink); }
.auth-logo-text .s { font-size: 11px; color: var(--muted); margin-top: 2px; }
.auth-main { flex: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; }
@media (max-width: 980px) { .auth-main { grid-template-columns: 1fr; } .auth-brand { display: none; } }
.auth-brand { padding: 54px 48px; display: flex; flex-direction: column; justify-content: center; }
.auth-brand h1 { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; line-height: 1.35; margin-bottom: 12px; }
.auth-brand p { font-size: 14px; color: var(--ink-soft); line-height: 1.9; max-width: 520px; margin-bottom: 26px; }
.auth-points { display: grid; gap: 14px; max-width: 520px; }
.auth-point { display: flex; align-items: flex-start; gap: 12px; }
.auth-point .ap-ic {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: var(--primary-soft); color: var(--primary); display: grid; place-items: center;
}
.auth-point .ap-ic svg { width: 16px; height: 16px; }
.auth-point .ap-t { font-size: 13px; font-weight: 700; color: var(--ink); }
.auth-point .ap-s { font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.7; }
.auth-form { display: grid; place-items: center; padding: 40px 24px; }
.auth-card {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-2xl);
  padding: 34px 34px 30px; width: 100%; max-width: 430px; box-shadow: var(--sh-card);
}
.auth-title { font-size: 21px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.auth-sub { font-size: 13px; color: var(--muted); margin-bottom: 24px; line-height: 1.7; }
.auth-alert {
  display: flex; gap: 10px; background: var(--danger-bg); border: 1px solid rgba(220,38,38,.25);
  border-radius: var(--r-md); padding: 11px 13px; margin-bottom: 18px;
}
.auth-alert svg { width: 15px; height: 15px; color: var(--danger-ink); flex-shrink: 0; margin-top: 2px; }
.auth-alert .t { font-size: 12px; color: var(--danger-ink); font-weight: 600; line-height: 1.6; }
.auth-field { position: relative; margin-bottom: 14px; }
.auth-field .form-input { padding-inline-start: 40px; }
.auth-field-icon {
  position: absolute; inset-inline-start: 13px; top: 38px; width: 16px; height: 16px;
  color: var(--muted); pointer-events: none;
}
.auth-field-toggle {
  position: absolute; inset-inline-end: 10px; top: 32px; width: 28px; height: 28px;
  border-radius: 7px; display: grid; place-items: center; color: var(--muted);
}
.auth-field-toggle:hover { background: var(--bg-2); color: var(--ink); }
.auth-field-toggle svg { width: 15px; height: 15px; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 20px; }
.auth-link { font-size: 12px; font-weight: 700; color: var(--primary); }
.auth-footer { text-align: center; font-size: 11.5px; color: var(--muted); margin-top: 20px; line-height: 1.9; }
.auth-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px;
  background: var(--bg-2); border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 700; color: var(--ink-soft); margin-bottom: 18px;
}
.auth-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

/* ---- 4.8 مساعدات تخطيط قديمة ---- */
.d-flex { display: flex; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-2 { gap: 8px; }
.mt-2 { margin-top: 8px; }  .mt-3 { margin-top: 14px; }  .mt-4 { margin-top: 18px; }  .mt-6 { margin-top: 26px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 14px; } .mb-4 { margin-bottom: 18px; }
.ptp-stack { display: grid; gap: 10px; }
.ptp-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.ptp-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-inline-end: 5px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }

/* =============================================================
   5) كسوة مكتبات الطرف الثالث
   ============================================================= */
/* ---- DataTables ---- */
.dataTables_wrapper { padding: 0; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { padding: 12px 18px; font-size: 12.5px; color: var(--muted); }
.dataTables_wrapper .dataTables_filter { float: inline-end; }
.dataTables_wrapper .dataTables_length { float: inline-start; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  padding: 8px 12px; background: var(--bg); border: 1.5px solid var(--line);
  border-radius: var(--r-md); font-family: inherit; font-size: 12.5px;
  color: var(--ink); margin-inline-start: 8px; transition: all var(--t-base);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  outline: none; border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 3px var(--primary-soft);
}
.dataTables_wrapper .dataTables_info {
  padding: 12px 18px; font-size: 12px; color: var(--muted);
  border-top: 1px solid var(--line-soft); background: var(--bg);
}
.dataTables_wrapper .dataTables_paginate {
  padding: 10px 18px; border-top: 1px solid var(--line-soft); background: var(--bg);
  display: flex; gap: 5px; justify-content: flex-end; flex-wrap: wrap;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  min-width: 32px; height: 32px; padding: 0 10px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--ink-soft) !important; background: var(--card);
  border: 1px solid var(--line-soft) !important; cursor: pointer; transition: all var(--t-fast);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--card) !important; border-color: var(--primary) !important; color: var(--primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--primary) !important; border-color: var(--primary) !important; color: var(--card) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .45; }
.dataTables_wrapper .dataTables_processing {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-md);
  box-shadow: var(--sh-pop); color: var(--ink-soft); font-size: 12.5px; font-weight: 700;
}
table.dataTable thead th.sorting, table.dataTable thead th.sorting_asc, table.dataTable thead th.sorting_desc { cursor: pointer; }
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after { opacity: .3; font-size: 10px; }
table.dataTable.no-footer { border-bottom: none; }

/* ---- Select2 ---- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  height: auto; min-height: 42px; padding: 5px 8px; background: var(--bg);
  border: 1.5px solid var(--line) !important; border-radius: var(--r-md) !important;
  transition: all var(--t-base);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--primary) !important; background: var(--card);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ink); font-size: 13.5px; line-height: 30px; padding-inline: 4px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--muted); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; }
.select2-dropdown {
  background: var(--card); border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important; box-shadow: var(--sh-pop); overflow: hidden; padding: 5px;
}
.select2-container--default .select2-results__option {
  font-size: 13px; padding: 9px 11px; border-radius: 8px; color: var(--ink-soft);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--bg-2) !important; color: var(--ink) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--primary-soft) !important; color: var(--primary) !important; font-weight: 700;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  padding: 8px 11px; background: var(--bg); border: 1.5px solid var(--line);
  border-radius: var(--r-md); font-family: inherit; font-size: 13px; color: var(--ink);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--primary-soft); border: 1px solid var(--primary);
  border-radius: var(--r-sm); color: var(--primary); font-size: 12px; font-weight: 600; padding: 3px 8px;
}

/* ---- SweetAlert2 ---- */
.dcs-swal {
  border-radius: var(--r-xl) !important; border: 1px solid var(--line-soft);
  box-shadow: var(--sh-modal); font-family: var(--font-body) !important; background: var(--card) !important;
}
.dcs-swal__title { font-size: 17px !important; font-weight: 700 !important; color: var(--ink) !important; }
.dcs-swal__text { font-size: 13px !important; color: var(--ink-soft) !important; line-height: 1.8 !important; }
.dcs-swal__actions { gap: 10px; }
.dcs-swal__btn { min-width: 108px; justify-content: center; }
.dcs-swal__btn--ghost { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); }
.swal2-timer-progress-bar { background: var(--primary) !important; }

/* =============================================================
   6) الاتجاه LTR (الواجهة الإنجليزية)
   ============================================================= */
[dir="ltr"] .sidebar { border-left: none; border-right: 1px solid var(--line-soft); }
[dir="ltr"] .nav-item.active::before { left: auto; right: -10px; }
[dir="ltr"] .nav-count, [dir="ltr"] .nav-item .badge-count, [dir="ltr"] .nav-item .chev { margin-right: 0; margin-left: auto; }
[dir="ltr"] .nav-submenu { border-right: none; border-left: 1px dashed var(--line); padding-right: 0; padding-left: 14px; }
[dir="ltr"] .header-search .search-ic { right: auto; left: 12px; }
[dir="ltr"] .header-search input { padding: 9px 52px 9px 38px; }
[dir="ltr"] .header-search .hotkey { left: auto; right: 8px; }
[dir="ltr"] .search-box svg { right: auto; left: 12px; }
[dir="ltr"] .search-box input { padding: 10px 14px 10px 36px; }
[dir="ltr"] .icon-btn .nbadge { left: auto; right: 5px; }
[dir="ltr"] .toggle-switch .ts-track::after { right: auto; left: 2px; }
[dir="ltr"] .toggle-switch input:checked + .ts-track::after { transform: translateX(18px); }
[dir="ltr"] .slide-panel { left: auto; right: 0; transform: translateX(100%); box-shadow: -30px 0 60px rgba(0,0,0,.15); }
[dir="ltr"] .slide-panel.open { transform: translateX(0); }
[dir="ltr"] .theme-dropdown { left: auto; right: 0; }
[dir="ltr"] .card-title-block .subtitle { padding-right: 0; padding-left: 40px; }
[dir="ltr"] .data-table thead th { text-align: left; }
[dir="ltr"] .id-card .idc-num, [dir="ltr"] .code-input { direction: ltr; }
@media (max-width: 1024px) {
  [dir="ltr"] .sidebar { right: auto; left: 0; transform: translateX(-100%); }
  [dir="ltr"] .sidebar.open { transform: translateX(0); }
}

/* =============================================================
   7) الطباعة — التقارير وكشوف الحساب
   ============================================================= */
@media print {
  body::before, body::after { display: none; }
  .sidebar, .app-header, .app-footer, .page-actions, .filters-bar,
  .wiz-foot, .save-bar, .bulk-bar, .no-print { display: none !important; }
  .app-content { padding: 0; max-width: none; }
  .card { border-color: #d0d0d0; break-inside: avoid; box-shadow: none; }
  .data-table thead th { background: #f2f2f2; }
  a[href]::after { content: ''; }
}

/* =============================================================
   8) الرسائل العابرة ومؤشرات الانتظار (يستخدمها app.js)
   -------------------------------------------------------------
   كما في شاشات المرجع: أيقونة ملوّنة بحسب الحالة، عنوان، ونص
   اختياري تحته. تدخل منزلقة من الحافة التي تخرج منها، وتقف عند
   بداية السطر — يسار الشاشة بالعربية ويمينها بالإنجليزية.
   ============================================================= */
.toast-host {
  position: fixed; top: 74px; inset-inline-end: 20px; z-index: 1200;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: 11px; min-width: 290px;
  max-width: min(400px, calc(100vw - 40px));
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-pop); padding: 13px 15px; pointer-events: auto;
  border-inline-start: 3px solid var(--primary);
  opacity: 0; transform: translateX(-24px);
  transition: opacity var(--t-base), transform var(--t-base);
}
[dir="ltr"] .toast { transform: translateX(24px); }
.toast.in { opacity: 1; transform: translateX(0); }
.toast.toast-leaving { opacity: 0; transform: translateY(-8px); }

.toast-success, .toast-ok { border-inline-start-color: var(--ok); }
.toast-danger, .toast-error { border-inline-start-color: var(--danger); }
.toast-warning { border-inline-start-color: var(--warn); }
.toast-info    { border-inline-start-color: var(--info); }

.toast .ts-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.toast .ts-ic svg { width: 14px; height: 14px; }
.toast-success .ts-ic, .toast-ok .ts-ic { background: var(--ok-bg); color: var(--ok-ink); }
.toast-danger .ts-ic, .toast-error .ts-ic { background: var(--danger-bg); color: var(--danger-ink); }
.toast-warning .ts-ic { background: var(--warn-bg); color: var(--warn-ink); }
.toast-info .ts-ic { background: var(--info-bg); color: var(--info-ink); }

.toast .ts-t { flex: 1; min-width: 0; }
.toast .ts-title { display: block; font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.toast .ts-body { display: block; font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.6; }
.toast-close {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  display: grid; place-items: center; color: var(--muted); font-size: 15px; line-height: 1;
}
.toast-close:hover { background: var(--bg-2); color: var(--ink); }

/* شريط المهلة: يُظهر كم بقي قبل أن تختفي الرسالة */
.toast .ts-bar { position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--primary-soft); overflow: hidden; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.toast { position: relative; overflow: hidden; }
.toast .ts-bar i { display: block; height: 100%; width: 100%; background: var(--primary); transform-origin: inline-start; animation: toastBar linear forwards; }
.toast-success .ts-bar i, .toast-ok .ts-bar i { background: var(--ok); }
.toast-danger .ts-bar i, .toast-error .ts-bar i { background: var(--danger); }
.toast-warning .ts-bar i { background: var(--warn); }
@keyframes toastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 600px) {
  .toast-host { inset-inline: 12px; }
  .toast { min-width: 0; max-width: none; }
}

/* The visibility of this dialog is the design system's: hidden until .open.
   Forcing display here only made it occupy space while staying invisible. */
.confirm-backdrop .confirm-dialog { transform: scale(.97); transition: transform var(--t-base); }
.confirm-backdrop.open .confirm-dialog { transform: scale(1); }
.confirm-body { font-size: 14px; color: var(--ink); line-height: 1.8; margin-bottom: 18px; }

.spinner {
  width: 13px; height: 13px; border-radius: 50%; display: inline-block;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin360 .7s linear infinite; vertical-align: -2px;
}
@keyframes spin360 { to { transform: rotate(360deg); } }
.is-loading { opacity: .75; pointer-events: none; }

/* شارة عدد داخل عنصر التنقّل */
.nav-item .nav-count { font-family: var(--font-mono); }

/* محاذاة القوائم المنسدلة في الهيدر إلى الحافة الداخلية */
.header-actions .dropdown-menu { inset-inline-start: auto; inset-inline-end: 0; }
.header-actions .dropdown { display: flex; }
.header-actions .icon-btn .avatar.sm { width: 30px; height: 30px; }
.app-header .header-breadcrumb { flex-shrink: 0; }
@media (max-width: 760px) { .app-header .header-breadcrumb a:not(:first-child), .app-header .header-breadcrumb .current { display: none; } }

/* خط زمني بأيقونات (تبويب الأحداث في ملف التحصيل) */
.timeline.icons { padding-inline-start: 46px; }
.timeline.icons::before { inset-inline-start: 15px; }
.timeline.icons .timeline-item { padding-bottom: 20px; }
.timeline.icons .timeline-dot {
  width: 32px; height: 32px; inset-inline-start: -46px; top: 0;
  display: grid; place-items: center; border: 2px solid var(--card);
  background: var(--bg-2); color: var(--ink-soft);
}
.timeline.icons .timeline-dot svg { width: 14px; height: 14px; }
.timeline.icons .timeline-dot.tone-ok     { background: var(--ok-bg);     color: var(--ok-ink);     border-color: var(--card); }
.timeline.icons .timeline-dot.tone-warn   { background: var(--warn-bg);   color: var(--warn-ink);   border-color: var(--card); }
.timeline.icons .timeline-dot.tone-bad,
.timeline.icons .timeline-dot.tone-danger { background: var(--danger-bg); color: var(--danger-ink); border-color: var(--card); }
.timeline.icons .timeline-dot.tone-info   { background: var(--info-bg);   color: var(--info-ink);   border-color: var(--card); }
.timeline.icons .timeline-body {
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 11px 14px;
}

/* ضبط شاشة الدخول فوق الشل العام */
.auth-body .app { display: flex; flex-direction: column; min-height: 100vh; }
.auth-field label {
  display: block; font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px;
}
.auth-field .req { color: var(--accent); margin-inline-start: 3px; }
.auth-field-toggle.is-on { color: var(--primary); background: var(--primary-soft); }
.auth-topbar .filter-chip { text-decoration: none; }
.auth-brand .auth-badge { margin-bottom: 22px; align-self: flex-start; }

/* ترقيم الصفحات المخصّص (resources/views/vendor/pagination/dcs.blade.php) */
.dcs-pagination {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 14px 18px; border-top: 1px solid var(--line-soft); background: var(--bg);
}
.dcs-pagination__info { font-size: 12px; color: var(--muted); }
.dcs-pagination__info b { font-family: var(--font-mono); color: var(--ink); }
.dcs-pagination__list { display: flex; align-items: center; gap: 5px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.dcs-page a, .dcs-page span {
  min-width: 34px; height: 34px; padding: 0 10px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--ink-soft); background: var(--card); border: 1px solid var(--line-soft);
  transition: all var(--t-fast); text-decoration: none;
}
.dcs-page a:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.dcs-page.active span { background: var(--primary); border-color: var(--primary); color: var(--card); }
.dcs-page.disabled span { opacity: .45; }

/* مصفوفة الصلاحيات (الأدوار والمستخدمون) */
.permission-matrix { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.permission-group {
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); padding: 14px 15px;
}
.permission-group h4 {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: var(--muted);
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.permission-group h4 button { font-family: var(--font-body); font-size: 10.5px; color: var(--primary); font-weight: 700; }
.permission-items { display: grid; gap: 9px; }
.permission-items label {
  display: flex; align-items: center; gap: 9px; font-size: 12.5px;
  color: var(--ink-soft); font-weight: 600; cursor: pointer;
}
.permission-items input[type="checkbox"] {
  appearance: none; width: 17px; height: 17px; border: 1.5px solid var(--line);
  border-radius: 5px; background: var(--card); cursor: pointer; position: relative;
  transition: all var(--t-fast); flex-shrink: 0;
}
.permission-items input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary); }
.permission-items input[type="checkbox"]:checked::after {
  content: ''; position: absolute; inset: 0; background-size: 11px; background-position: center; background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.permission-items label:hover { color: var(--ink); }

/* مقياس قوة كلمة المرور */
.strength { display: grid; gap: 6px; margin-top: 9px; }
.strength-bars { display: flex; gap: 5px; }
.strength-bars i { flex: 1; height: 5px; border-radius: 999px; background: var(--bg-2); transition: background var(--t-base); }
.strength.s1 .strength-bars i:nth-child(1) { background: var(--danger); }
.strength.s2 .strength-bars i:nth-child(-n+2) { background: var(--warn); }
.strength.s3 .strength-bars i:nth-child(-n+3) { background: var(--info); }
.strength.s4 .strength-bars i { background: var(--ok); }
.strength-text { font-size: 11px; font-weight: 700; color: var(--muted); }
.strength.s1 .strength-text { color: var(--danger-ink); }
.strength.s2 .strength-text { color: var(--warn-ink); }
.strength.s3 .strength-text { color: var(--info-ink); }
.strength.s4 .strength-text { color: var(--ok-ink); }

/* مقارنة قبل/بعد في سجل التدقيق */
.data-table tr.is-changed td { background: var(--accent-soft); }
.data-table td.diff-old { color: var(--danger-ink); text-decoration: line-through; text-decoration-thickness: 1px; }
.data-table td.diff-new { color: var(--ok-ink); font-weight: 700; }

/* =============================================================
   9) جسر الرموز القديمة — شبكة أمان لأي نمط سطري متبقٍ
   -------------------------------------------------------------
   الأسماء القديمة (brand/red/green/border/ink-muted…) تُترجم إلى
   رموز الدليل، فلا يبقى في الشاشات لون خارج var(--…).
   ============================================================= */
:root {
  --brand: var(--primary);
  --brand-dark: var(--primary-hover);
  --brand-light: var(--primary);
  --brand-soft: var(--primary-soft);
  --brand-bg: var(--bg-2);
  --red: var(--danger);       --red-soft: var(--danger-bg);
  --green: var(--ok);         --green-soft: var(--ok-bg);
  --orange: var(--warn);      --orange-soft: var(--warn-bg);
  --blue: var(--info);        --blue-soft: var(--info-bg);
  --purple: var(--info);      --purple-soft: var(--info-bg);
  --teal-soft: var(--ok-bg);
  --ink-secondary: var(--ink-soft);
  --ink-muted: var(--muted);
  --border: var(--line-soft);
  --surface: var(--card);
  --surface-alt: var(--bg);
  --radius: var(--r-lg);
  --radius-sm: var(--r-md);
  --radius-xs: var(--r-sm);
  --transition: var(--t-base);
  --shadow-sm: var(--sh-card);
  --shadow: 0 6px 16px -8px rgba(12,35,64,.15);
  --shadow-lg: var(--sh-pop);
  --topbar-h: 60px;
  --sidebar-bg: var(--card);
}

/* حقول بلا أصناف (أقسام الإعدادات) ترث هيئة الدليل */
.card-body input:not([class]), .card-body select:not([class]), .card-body textarea:not([class]) {
  width: 100%; padding: 10px 14px; background: var(--bg);
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  font-family: inherit; font-size: 13.5px; color: var(--ink); transition: all var(--t-base);
}
.card-body input:not([class])[type="number"], .card-body input:not([class])[type="date"],
.card-body input:not([class])[type="time"], .card-body input:not([class])[type="datetime-local"] {
  font-family: var(--font-mono); direction: ltr; text-align: start;
}
.card-body input:not([class]):focus, .card-body select:not([class]):focus, .card-body textarea:not([class]):focus {
  outline: none; border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 3px var(--primary-soft);
}
.card-body textarea:not([class]) { min-height: 96px; resize: vertical; line-height: 1.7; }
.card-body input:not([class])[type="checkbox"], .card-body input:not([class])[type="radio"] { width: auto; }
.card-body input[type="file"] {
  padding: 9px 12px; background: var(--bg); border: 1.5px dashed var(--line);
  border-radius: var(--r-md); font-size: 12.5px; width: 100%;
}

/* مساعدات صغيرة متبقية في بعض الشاشات */
.checkbox-label { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.checkbox-label input[type="checkbox"] { width: 17px; height: 17px; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-sm { font-size: 12.5px; }
.font-semibold { font-weight: 700; }
.self-center { align-self: center; }
.w-auto { width: auto; }

/* خلايا الشخص داخل البطاقات: الاسم والدور سطران مستقلان */
.cell-person .cell-name, .cell-person .cell-role, .cell-person .cell-sub { display: block; }

/* =============================================================
   10) تثبيت السايدبار أثناء التمرير
   -------------------------------------------------------------
   الدليل يضع overflow-x: hidden على html/body لمنع التمرير الأفقي،
   لكن المتصفح يحوّل معها overflow-y إلى auto فيصير الـbody حاوية
   تمرير، وعندها تلتصق .sidebar بحاوية لا تتمرّر أصلاً فتمشي مع
   الصفحة. الحل: clip بدل hidden — يمنع التمرير الأفقي نفسه دون
   إنشاء حاوية تمرير، فتعمل sticky بالنسبة لإطار العرض.
   ============================================================= */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}
.app-layout { align-items: flex-start; }
.sidebar { align-self: flex-start; }

/* احتياط للمتصفحات التي لا تدعم clip: يبقى السايدبار مثبتاً بالتموضع الثابت */
@supports not (overflow: clip) {
  @media (min-width: 1025px) {
    .sidebar { position: fixed; inset-block: 0; inset-inline-start: auto; inset-inline-end: 0; }
    .app-main { margin-inline-end: var(--sidebar-w); }
  }
}

/* =============================================================
   11) الخط — Cairo لغة الواجهة
   -------------------------------------------------------------
   الدليل يعرّف الخطوط على :root، وهنا نعيد تعريف خطّي الواجهة
   والعناوين فقط إلى Cairo، ويبقى JetBrains Mono للأرقام والمعرّفات
   كما يشترط الدليل (رقم واحد لا يُقرأ بخط نصّي).
   ============================================================= */
:root {
  --font-body:    'Cairo', 'Segoe UI', sans-serif;
  --font-display: 'Cairo', 'Segoe UI', sans-serif;
}
body, .page-title, .page-hero-greet, .card-title-block .title, .btn, .btn-add,
.form-input, .form-select, .form-textarea, input, select, textarea, button {
  font-family: var(--font-body);
}
/* Cairo أعرض قليلاً من IBM Plex — تشديد التتبّع في العناوين الكبيرة */
.page-title, .page-hero-greet, .auth-brand h1 { letter-spacing: -0.015em; }

/* =============================================================
   12) صفوف التحقق (.check-row) — منقولة من شاشات المرجع
   -------------------------------------------------------------
   كل بند يعرض حالته الحيّة بجملة تشرح الوضع الحالي، لا مجرد ✓/✗.
   ============================================================= */
.check-row {
  display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px;
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  background: var(--card); margin-bottom: 8px; transition: all var(--t-fast);
}
.check-row:last-child { margin-bottom: 0; }
.check-row.ok      { border-color: var(--ok); background: var(--ok-bg); }
.check-row.warn    { border-color: var(--warn); background: var(--warn-bg); }
.check-row.blocked { border-color: var(--danger); background: var(--danger-bg); }
.check-row .cr-i {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  flex-shrink: 0; background: var(--bg-2); color: var(--muted);
}
.check-row.ok .cr-i      { background: var(--ok);     color: #fff; }
.check-row.warn .cr-i    { background: var(--warn);   color: #fff; }
.check-row.blocked .cr-i { background: var(--danger); color: #fff; }
.check-row .cr-i svg { width: 14px; height: 14px; }
.check-row .cr-x { flex: 1; min-width: 0; }
.check-row .cr-n { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.check-row .cr-s { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.6; }
.check-row .cr-s.mono { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; }

/* حقل بخطأ: الحد والخلفية ورسالة تشرح التصحيح */
.form-input.error, .form-select.error, .form-textarea.error,
.form-input.is-invalid, .form-select.is-invalid {
  border-color: var(--danger); background: var(--danger-bg);
}
.form-input.is-valid { border-color: var(--ok); }
.field-error { display: flex; align-items: flex-start; gap: 6px; }
.field-error svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; }

/* ملخّص أخطاء النموذج أعلى الشاشة */
.form-errors { margin-bottom: 16px; }
.form-errors a { color: inherit; text-decoration: underline; font-weight: 700; }

/* =============================================================
   13) شريط أدوات الجدول + شرائح الفلاتر المفعّلة
   ============================================================= */
.filter-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.filter-toolbar .search-box { flex: 1 1 260px; min-width: 200px; }
.filter-toolbar .toolbar-btn[aria-expanded="true"] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.toolbar-btn[hidden] { display: none; }

.active-filters {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 12px;
}
.af-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px 5px 12px;
  background: var(--primary-soft); border: 1px solid var(--primary);
  border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; color: var(--primary);
}
.af-chip b { font-weight: 700; color: var(--ink-soft); }
.af-chip button {
  width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: var(--card); flex-shrink: 0; transition: background var(--t-fast);
}
.af-chip button:hover { background: var(--primary-hover); }
.af-chip button svg { width: 10px; height: 10px; }
.af-clear {
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  text-decoration: underline; padding: 4px 6px;
}
.af-clear:hover { color: var(--danger-ink); }

/* اللوحة مطوية افتراضياً — الدليل يشترط ذلك، وتُفتح بزر «فلترة» */
.filter-panel { display: none; }
.filter-panel.show { display: block; animation: fadeUp .25s cubic-bezier(.2,.8,.2,1); }
.filter-group + .filter-group { margin-top: 14px; }

/* =============================================================
   14) تباعد الأحرف في التسميات الصغيرة
   -------------------------------------------------------------
   الدليل يضيف letter-spacing إلى التسميات الصغيرة (رأس الجدول،
   تسمية المؤشر، عنوان مجموعة الفلترة…) وهو مناسب للاتينية، لكنه
   يفكّك الكلمة العربية ويصعّب قراءتها. نُلغيه في الاتجاه RTL فقط
   ونُبقيه كما هو في الواجهة الإنجليزية.
   ============================================================= */
[dir="rtl"] .kpi-label,
[dir="rtl"] .stat-label,
[dir="rtl"] .data-table thead th,
[dir="rtl"] .filter-group-title,
[dir="rtl"] .info-item .info-label,
[dir="rtl"] .nav-section-title,
[dir="rtl"] .permission-group h4,
[dir="rtl"] .check-row .cr-n,
[dir="rtl"] .id-card .idc-holder .lbl,
[dir="rtl"] .page-title,
[dir="rtl"] .page-hero-greet { letter-spacing: normal; }

/* الأرقام والمعرّفات تبقى بخط mono وتباعده — فهي لاتينية دائماً */
[dir="rtl"] .mono, [dir="rtl"] .cell-num, [dir="rtl"] .money { letter-spacing: 0; }

/* شريحة الفلترة لا تُكسر على سطرين */
.filter-chip { white-space: nowrap; }
.filter-group-head { margin-bottom: 8px; }

/* =============================================================
   15) التسميات العربية لا تُرسم بخط الأرقام
   -------------------------------------------------------------
   الدليل يضع --font-mono على رأس الجدول وتسمية المؤشر وعنوان
   مجموعة الفلترة، وهي تسميات لاتينية في نظامه. وJetBrains Mono
   لا يحوي حروفاً عربية، فيسقط المتصفح على خط بديل يفكّك الكلمة.
   لذلك: خط الواجهة لهذه التسميات في RTL، ويبقى mono لكل ما هو
   رقم أو معرّف أو بريد أو هاتف كما يشترط الدليل.
   ============================================================= */
[dir="rtl"] .kpi-label,
[dir="rtl"] .stat-label,
[dir="rtl"] .data-table thead th,
[dir="rtl"] .filter-group-title,
[dir="rtl"] .info-item .info-label,
[dir="rtl"] .id-card .idc-holder .lbl,
[dir="rtl"] .permission-group h4,
[dir="rtl"] .rd-score,
[dir="rtl"] .attachments-panel__count,
[dir="rtl"] .check-row .cr-s:not(.mono),
[dir="rtl"] .gauge-marks span:not(:last-child):not(:first-child) {
  font-family: var(--font-body);
}

/* تسمية المؤشر تبقى مميّزة دون خط الأرقام */
[dir="rtl"] .kpi-label, [dir="rtl"] .stat-label { font-size: 11.5px; text-transform: none; }
[dir="rtl"] .data-table thead th { font-size: 11.5px; text-transform: none; }
[dir="rtl"] .filter-group-title, [dir="rtl"] .info-item .info-label { font-size: 11.5px; text-transform: none; }

/* =============================================================
   16) ذيل الجدول والتنقّل وخيارات الصف — منقولة من شاشات المرجع
   -------------------------------------------------------------
   الذيل شريط واحد بخلفية --bg وحد علوي شعرة، والتنقّل في وسطه
   أزرار متساوية 32px بخط الأرقام، والسهمان شيفرون مُدار. خيارات
   الصف زر ⋮ يفتح قائمة عائمة بعناصر مُسمّاة بدل أيقونات مبعثرة.
   ============================================================= */
.table-foot {
  padding: 11px 16px; border-top: 1px solid var(--line-soft); background: var(--bg);
}

.pager { display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; margin: 0 auto; }
.pager .pg {
  min-width: 32px; height: 32px; padding: 0 9px; border-radius: 8px;
  border: 1px solid var(--line-soft); background: var(--card);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--ink-soft);
  cursor: pointer; transition: all var(--t-fast); display: inline-grid; place-items: center;
  text-decoration: none;
}
.pager .pg:hover:not(:disabled):not(.on) { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.pager .pg.on { background: var(--primary); border-color: var(--primary); color: var(--card); }
.pager .pg:disabled, .pager .pg.is-disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.pager .pg svg { width: 14px; height: 14px; }
.pager .pg.pg-prev svg { transform: rotate(-90deg); }
.pager .pg.pg-next svg { transform: rotate(90deg); }
.pager .pg-gap { color: var(--muted); font-family: var(--font-mono); padding: 0 2px; }

/* قائمة خيارات الصف */
.data-table td.actions { text-align: end; }
.row-act-btn {
  width: 30px; height: 30px; display: inline-grid; place-items: center;
  background: transparent; border: none; border-radius: var(--r-sm);
  color: var(--muted); cursor: pointer; transition: all var(--t-fast);
}
.row-act-btn svg { width: 16px; height: 16px; }
.row-act-btn:hover, .row-act-btn.on { background: var(--bg-2); color: var(--ink); }

.row-menu {
  position: fixed; z-index: 1200; min-width: 190px; padding: 6px;
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); box-shadow: var(--sh-pop);
  animation: rmIn .14s ease;
}
@keyframes rmIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* The item styling is shared: the menu may be the floating one JS builds, or
   one written inline in the row. Both are .rm-item, so neither is left bare. */
.rm-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; background: transparent; border: none; border-radius: var(--r-sm);
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink);
  cursor: pointer; text-align: start; transition: background var(--t-fast); text-decoration: none;
}
.rm-item svg { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
.rm-item:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }
.rm-item:hover svg { color: var(--primary); }
.rm-item.danger { color: var(--danger-ink); }
.rm-item.danger svg, .rm-item.danger:hover svg { color: var(--danger); }
.rm-item.danger:hover { background: var(--danger-bg); color: var(--danger-ink); }

/* الجدول داخل القشرة: لا حدود مزدوجة ولا زوايا مكسورة */
.table-shell > .table-scroll:last-child { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
.table-shell .data-table tbody tr:last-child td { border-bottom: none; }
.table-shell .dcs-pagination, .table-shell .pagination { border-radius: 0 0 16px 16px; }

/* ---- كسوة تنقّل DataTables بنفس هيئة .pager ---- */
.table-foot .dataTables_paginate { padding: 0; border: none; background: transparent; display: flex; gap: 5px; }
.table-foot .dataTables_paginate .paginate_button {
  min-width: 32px; height: 32px; padding: 0 9px; border-radius: 8px;
  border: 1px solid var(--line-soft) !important; background: var(--card);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--ink-soft) !important; display: inline-grid; place-items: center; cursor: pointer;
  transition: all var(--t-fast); margin: 0;
}
.table-foot .dataTables_paginate .paginate_button:hover {
  background: var(--card) !important; border-color: var(--primary) !important; color: var(--primary) !important;
}
.table-foot .dataTables_paginate .paginate_button.current,
.table-foot .dataTables_paginate .paginate_button.current:hover {
  background: var(--primary) !important; border-color: var(--primary) !important; color: var(--card) !important;
}
.table-foot .dataTables_paginate .paginate_button.disabled { opacity: .4; pointer-events: none; }
.table-foot .dataTables_paginate .ellipsis { color: var(--muted); padding: 0 4px; align-self: center; }
.dataTables_wrapper .dataTables_info { display: none; }   /* العدّاد في رأس الجدول */

/* ---- تذييل التطبيق: شريط رفيع بطرفين ---- */
.app-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  max-width: var(--content-max); width: 100%; margin: 0 auto;
  padding: 14px 32px 22px; border-top: 1px solid var(--line-soft);
  font-size: 11.5px; color: var(--muted); text-align: start; line-height: 1.8;
}
.app-footer > div { display: flex; align-items: center; gap: 7px; }
.app-footer a { color: var(--ink-soft); font-weight: 700; }
.app-footer a:hover { color: var(--primary); }
.app-footer .foot-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line); }
@media (max-width: 720px) {
  .app-footer { flex-direction: column; align-items: flex-start; gap: 6px; padding-inline: 16px; }
}

/* ---- القوائم المنسدلة: الصنف يُوضع على .dropdown لا على القائمة ---- */
.dropdown.open > .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.app-footer svg { width: 13px; height: 13px; color: var(--line); }

/* مدى الصفحة في رأس الجدول — الطرف المقابل للعدّاد، كما في المرجع */
.table-head-bar .table-head-count.range { color: var(--muted); }
.table-head-bar .table-head-count.range b { font-family: var(--font-mono); color: var(--ink-soft); font-weight: 700; }

/* الظهور لا يتعلّق بانتهاء الانتقال: visibility تنقلب فوراً ويتحرّك
   الشفافية والإزاحة فقط — وإلا بقيت القائمة مخفية إن لم يكتمل الانتقال. */
.dropdown-menu, .theme-dropdown {
  transition: opacity var(--t-base), transform var(--t-base), visibility 0s;
}
.dropdown.open > .dropdown-menu, .dropdown-menu.open, .theme-dropdown.open {
  transition: opacity var(--t-base), transform var(--t-base), visibility 0s;
}

/* =============================================================
   17) محاذاة التنقّل + حالة تحميل الجدول
   -------------------------------------------------------------
   التنقّل على الحافة الخارجية للقراءة: يسار في العربية ويمين في
   الإنجليزية (flex-end منطقي)، وليس في الوسط.
   ============================================================= */
.table-foot { display: flex; align-items: center; justify-content: flex-end; }
.pager { margin: 0; justify-content: flex-end; }

/* هيكل انتظار: صفوف وهمية تظهر فور فتح الصفحة قبل وصول البيانات،
   فلا يرى المستخدم جدولاً فارغاً مشوّهاً. */
.table-skeleton td { padding: 14px 16px; }
.table-skeleton .sk { height: 12px; border-radius: 6px; }
.table-skeleton tr:nth-child(odd) .sk { opacity: .85; }

/* أثناء الجلب: تعتيم خفيف وشريط تقدّم غير محدّد أعلى القشرة */
.table-shell { position: relative; }
.table-shell.is-loading .table-scroll { opacity: .5; pointer-events: none; transition: opacity var(--t-base); }
.table-shell.is-loading::after {
  content: ''; position: absolute; inset-inline: 0; top: 0; height: 2px; overflow: hidden;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: loadBar 1.1s linear infinite; z-index: 2;
}
@keyframes loadBar {
  0%   { background-position: -40% 0; }
  100% { background-position: 140% 0; }
}

/* رسالة DataTables عند غياب النتائج: خلية مرتّبة لا سطر عارٍ */
.data-table td.dataTables_empty {
  text-align: center; padding: 54px 20px; color: var(--muted);
  font-size: 13px; font-weight: 600;
}
.dataTables_wrapper .dataTables_processing { display: none !important; }  /* بدّلناه بشريط التحميل */

/* =============================================================
   10) شاشة الدخول — الطبقة الثانية
   -------------------------------------------------------------
   الشاشة الأولى التي يراها المستخدم، فتعامل معاملة شاشات المرجع:
   لوحة ألوان في الشريط العلوي، بطاقة تدخل بحركة صاعدة، حقول
   تقول خطأها أثناء الكتابة وتؤكّد صحّتها بعلامة، ومفتاح تبديل
   لبقاء الجلسة بدل مربّع اختيار صامت.
   ============================================================= */

/* الشريط العلوي: الشعار يميناً، ثم اللوحة اللونية واللغة يساراً */
.auth-topbar-side { display: flex; align-items: center; gap: 10px; }
.auth-topbar .theme-btn { height: 34px; }

/* اللوحة التعريفية: سطر عنوان من شطرين كما في المرجع */
.auth-brand h1 .l2 { display: block; color: var(--primary); }

/* شريط ثقة أسفل المزايا: أرقام قصيرة لا فقرة أخرى */
.auth-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line-soft); max-width: 520px;
}
.auth-meta-item { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); }
.auth-meta-item svg { width: 14px; height: 14px; color: var(--ok); flex-shrink: 0; }

/* البطاقة تدخل صاعدة مرّة واحدة عند فتح الصفحة */
.auth-card.fade-up { animation-duration: .5s; }

/* حالة الحقل: علامة صحّة تحلّ محلّ أيقونة الحقل عند اكتمال القيمة */
.auth-field-ok { display: none; color: var(--ok); }
.auth-field.is-ok .auth-field-icon:not(.auth-field-ok) { display: none; }
.auth-field.is-ok .auth-field-ok { display: block; }
.auth-field .form-input.error { border-color: var(--danger); background: var(--danger-bg); }
.auth-field .field-error { margin-top: 6px; }

/* ترتيب ما تحت الحقل: رسالة الخطأ أولاً ثم تنبيه Caps Lock.
   الحاوية عمود مرن، والأيقونات المطلقة خارج التدفّق فلا تتأثّر. */
.auth-field { display: flex; flex-direction: column; }
.auth-field .field-error { order: 2; }
.auth-field .auth-caps { order: 3; }

/* تنبيه Caps Lock: يظهر لحظة الضغط ويختفي بزواله */
.auth-caps {
  display: none; align-items: center; gap: 6px; margin-top: 7px;
  font-size: 11px; font-weight: 700; color: var(--warn-ink);
}
.auth-caps.on { display: flex; }
.auth-caps svg { width: 13px; height: 13px; flex-shrink: 0; }

/* مفتاح بقاء الجلسة داخل البطاقة: بلا خط فاصل وبمسافة قبل الزر */
.auth-card .toggle-row { border-bottom: none; padding: 10px 0 18px; }
.auth-card .toggle-row-text .desc { line-height: 1.7; max-width: 280px; }

/* الزر أثناء الإرسال: دوّار مكان السهم ونص «جارٍ التحقق» */
.btn-primary .btn-spin { display: none; }
.btn-primary.is-loading .btn-spin { display: inline-block; }
.btn-primary.is-loading svg { display: none; }

/* تذييل البطاقة: رابط الاستعادة ثم سطر الاعتماد تحت خط فاصل */
.auth-footer .auth-link { display: inline-block; margin-bottom: 14px; }
.auth-credit { padding-top: 14px; border-top: 1px solid var(--line-soft); }

@media (max-width: 560px) {
  .auth-topbar { flex-wrap: wrap; row-gap: 10px; }
  .auth-card { padding: 26px 20px 22px; }
  .auth-form { padding: 24px 16px; }
}

/* حقول يُكتب فيها نصّ لاتيني (البريد/كلمة المرور): النص يبدأ من اليسار،
   فتقف أيقونته عند بداية النص وزرّه عند نهايته — لا أيقونة في جهة
   وحروف في الجهة المقابلة. */
.auth-field.is-ltr .form-input { padding-inline-start: 14px; padding-left: 40px; }
.auth-field.is-ltr .form-input.has-toggle { padding-right: 42px; }
.auth-field.is-ltr .auth-field-icon { inset-inline-start: auto; inset-inline-end: auto; left: 13px; }
.auth-field.is-ltr .auth-field-toggle { inset-inline-start: auto; inset-inline-end: auto; right: 10px; }

/* الشاشات الضيقة: تُطوى اللوحة التعريفية وتبقى البطاقة وحدها.
   القاعدة الأصلية في القسم ٤٫٧ تسبق تعريف .auth-brand في ترتيب
   الملف فلا تتغلّب عليه — نعيدها هنا بعده. */
@media (max-width: 980px) {
  .auth-main { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
}

/* =============================================================
   11) Command palette — the header's global search
   -------------------------------------------------------------
   Same component as the reference screens: the header field is a
   trigger, and the real search happens in a centred overlay with
   grouped results and full keyboard control.
   ============================================================= */
.cmdk-back {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 1050; display: flex; justify-content: center; align-items: flex-start;
  padding: 90px 20px 20px; opacity: 0; visibility: hidden; transition: all var(--t-base);
}
.cmdk-back.open { opacity: 1; visibility: visible; }
.cmdk {
  width: 100%; max-width: 620px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-2xl);
  box-shadow: var(--sh-modal); overflow: hidden; display: flex; flex-direction: column;
  max-height: 70vh; transform: scale(0.97) translateY(-10px);
  transition: transform 0.25s cubic-bezier(0.2,0.8,0.2,1);
}
.cmdk-back.open .cmdk { transform: scale(1) translateY(0); }

.cmdk-input-row { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--line-soft); }
.cmdk-input-row > svg { width: 17px; height: 17px; color: var(--muted); flex-shrink: 0; }
.cmdk-input-row input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 15px; color: var(--ink);
}
.cmdk-input-row input::placeholder { color: var(--muted); }
.cmdk-esc {
  font-family: var(--font-mono); font-size: 10.5px; padding: 3px 8px; color: var(--muted);
  background: var(--bg-2); border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 5px; font-weight: 600; flex-shrink: 0;
}

/* Spinner replaces the magnifier while a request is in flight */
.cmdk-input-row .cmdk-busy { display: none; color: var(--primary); }
.cmdk.is-busy .cmdk-input-row > svg { display: none; }
.cmdk.is-busy .cmdk-input-row .cmdk-busy { display: inline-block; }

.cmdk-results { overflow-y: auto; padding: 8px; flex: 1; }
.cmdk-group-title {
  font-size: 10.5px; font-weight: 700; color: var(--muted);
  padding: 10px 12px 6px;
}
.cmdk-row {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: start;
  padding: 9px 12px; border-radius: var(--r-md); border: none; background: transparent;
  font-family: inherit; cursor: pointer; text-decoration: none; transition: background var(--t-fast);
}
.cmdk-row:hover, .cmdk-row.cur { background: var(--primary-soft); }
.cmdk-row .cr-ic {
  width: 30px; height: 30px; border-radius: 8px; background: var(--bg-2);
  color: var(--ink-soft); display: grid; place-items: center; flex-shrink: 0;
}
.cmdk-row.cur .cr-ic { background: var(--card); color: var(--primary); }
.cmdk-row .cr-ic svg { width: 15px; height: 15px; }
.cmdk-row .cr-t { flex: 1; min-width: 0; }
.cmdk-row .cr-title { display: block; font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-row .cr-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-row .cr-kind {
  font-size: 10px; font-weight: 700; color: var(--muted); background: var(--bg);
  border: 1px solid var(--line-soft); border-radius: 5px; padding: 2px 7px; flex-shrink: 0;
}
.cmdk-row mark { background: var(--primary-soft); color: var(--primary); border-radius: 3px; padding: 0 1px; }

.cmdk-note { padding: 34px 20px; text-align: center; font-size: 12.5px; color: var(--muted); line-height: 1.9; }
.cmdk-note .t { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.cmdk-note .ic { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto 12px; border-radius: 12px; background: var(--bg-2); color: var(--muted); }
.cmdk-note .ic svg { width: 19px; height: 19px; }

.cmdk-foot {
  padding: 9px 16px; border-top: 1px solid var(--line-soft); background: var(--bg);
  display: flex; gap: 16px; font-size: 11px; color: var(--muted); flex-wrap: wrap;
}
.cmdk-foot kbd {
  font-family: var(--font-mono); font-size: 10px; padding: 1px 5px; background: var(--card);
  border: 1px solid var(--line); border-radius: 4px; margin-inline-end: 4px;
}

/* The header field only opens the palette, so it reads as a button */
.header-search input[readonly] { cursor: pointer; }
.header-search .hotkey kbd { cursor: pointer; }

@media (max-width: 700px) {
  .cmdk-back { padding: 60px 12px 12px; }
  .cmdk-foot { display: none; }
}

/* Reset-password screens: a success variant of the sign-in alert, a hint row
   that states how long the link lives, and a back link with its chevron. */
.auth-alert.is-ok { background: var(--ok-bg); border-color: rgba(16,185,129,.28); }
.auth-alert.is-ok svg { color: var(--ok-ink); }
.auth-alert.is-ok .t { color: var(--ok-ink); }

.auth-hint-row {
  display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 18px;
  font-size: 11.5px; color: var(--muted); line-height: 1.8;
}
.auth-hint-row svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 3px; }

.auth-footer .auth-link { display: inline-flex; align-items: center; gap: 5px; }
.auth-footer .auth-link svg { width: 13px; height: 13px; }

/* A read-only field states a fact rather than inviting an edit */
.auth-field .form-input[readonly] { background: var(--bg-2); color: var(--ink-soft); cursor: default; }
.auth-field .form-input[readonly]:focus { border-color: var(--line); box-shadow: none; }

/* =============================================================
   12) Form side column — live preview + save readiness
   -------------------------------------------------------------
   Only .summary-box used to be sticky. With a readiness card below
   it in the same column, scrolling pinned the preview while the card
   kept moving, so the card slid underneath the preview and vanished.
   The column now pins as one block, and scrolls inside itself when it
   is taller than the viewport — so nothing is ever hidden.
   ============================================================= */
.form-side {
  position: sticky;
  top: 78px;
  max-height: calc(100vh - 94px);
  overflow-y: auto;
  overscroll-behavior: contain;   /* the page does not scroll on past its end */
}
.form-side > .summary-box { position: static; top: auto; }

/* A quiet scrollbar: it appears only when the column really overflows */
.form-side::-webkit-scrollbar { width: 6px; }
.form-side::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.form-side::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.form-side { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

/* One column below this width: pinning a full-width block would cover the form */
@media (max-width: 1024px) {
  .form-side { position: static; max-height: none; overflow: visible; }
}

/* =============================================================
   13) Settings screens — record tables and the slide-over panel
   -------------------------------------------------------------
   The settings sections were the one place still showing a bare
   table: a floating add button, inline action buttons, and a plain
   centred row where an empty state belongs. They now use the same
   shell as every other list in the system.
   ============================================================= */

/* A record section fills the card edge to edge; the table brings its own frame */
.card-body.flush { padding: 0; }
.card-body.flush .table-shell { border: none; border-radius: 0; box-shadow: none; }

/* The add button in the page header */
.btn-add {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r-md);
  background: var(--primary); color: #fff; border: 1px solid var(--primary);
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  text-decoration: none; transition: all var(--t-base);
}
.btn-add:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; transform: translateY(-1px); }
.btn-add svg { width: 15px; height: 15px; }

/* Empty state inside a table body, as in the reference screens */
.ds-empty-row td { padding: 0; background: var(--card); }
.ds-empty-row .empty-state { border: none; background: transparent; }
.data-table tbody tr.ds-empty-row:hover { background: transparent; }

/* Sortable headers */
.data-table thead th.sortable { cursor: pointer; user-select: none; position: relative; padding-inline-end: 20px; }
.data-table thead th.sortable::after {
  content: ''; position: absolute; inset-inline-end: 7px; top: 50%; margin-top: -3px;
  border: 4px solid transparent; border-top-color: var(--line); transition: all var(--t-fast);
}
.data-table thead th.sortable:hover::after { border-top-color: var(--muted); }
.data-table thead th.sortable[data-dir="asc"]::after { border-top-color: transparent; border-bottom-color: var(--primary); margin-top: -7px; }
.data-table thead th.sortable[data-dir="desc"]::after { border-top-color: var(--primary); }
.data-table thead th.sorted { color: var(--ink); }

/* Row options: one ⋮ button that opens a named list */
.row-actions { position: relative; display: inline-flex; }
.row-actions .row-menu-list {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 60;
  min-width: 190px; padding: 6px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-pop);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility 0s linear var(--t-fast);
}
.row-actions.open .row-menu-list {
  opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s;
}
.row-actions.drop-up .row-menu-list { top: auto; bottom: calc(100% + 6px); }
.row-actions .row-menu-list form { margin: 0; }

/* The panel sits above the sticky header and the row menus */
.panel-backdrop { z-index: 1100; }
.slide-panel { z-index: 1110; }
[dir="ltr"] .slide-panel { left: auto; right: 0; transform: translateX(100%); }
[dir="ltr"] .slide-panel.open { transform: translateX(0); }
.slide-panel .panel-body-wrap .form-row { margin-bottom: 0; }
.slide-panel .toggle-row { border-bottom: none; padding-top: 14px; }
.slide-panel .panel-footer .btn { flex-shrink: 0; }
@media (max-width: 640px) {
  .slide-panel .panel-footer-status { display: none; }
}

/* Long free text in a cell wraps instead of stretching the table */
.data-table td.cell-wrap { white-space: normal; max-width: 420px; line-height: 1.7; }


/* Icons that sit beside text in the panel footer and in notes */
.panel-footer-status svg { width: 14px; height: 14px; flex-shrink: 0; }
.muted-note svg { width: 13px; height: 13px; }

/* A note block inside a slide-over: a labelled paragraph, not a form field */
.panel-note {
  margin-top: 16px; padding: 12px 14px; background: var(--bg);
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  font-size: 12px; color: var(--ink-soft); line-height: 1.8;
}
.panel-note-t { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.slide-panel .kv-list { margin-bottom: 4px; }
.slide-panel .table-shell { margin-top: 10px; }

/* An eye button in a row behaves like the ⋮ button beside it */
.data-table .row-act-btn { text-decoration: none; }

/* A sorting header that is a link: the arrow belongs to the cell, the text to the link */
.data-table thead th.sortable > a { color: inherit; text-decoration: none; display: inline-block; }
.data-table thead th.sortable > a:hover { color: var(--primary); }

/* The ⋮ button stays quiet until the row is under the pointer, as in the reference */
.data-table tbody .row-act-btn { opacity: .5; transition: opacity var(--t-fast); }
.data-table tbody tr:hover .row-act-btn,
.data-table tbody .row-act-btn:hover,
.data-table tbody .row-actions.open .row-act-btn { opacity: 1; }

/* ---- Audit detail panel ---- */

/* What happened, said once, right under who did it */
.audit-what {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 14px;
  padding: 11px 13px; background: var(--primary-soft); border-radius: var(--r-md);
  font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.75;
}
.audit-what svg { width: 14px; height: 14px; color: var(--primary); flex-shrink: 0; margin-top: 3px; }

/* A section heading inside a panel, with its count on the far side */
.panel-block-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 24px 0 10px; padding-bottom: 9px; border-bottom: 1px solid var(--line-soft);
}
.panel-block-t { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.panel-block-t svg { width: 15px; height: 15px; color: var(--muted); }

/* Technical detail folds away until asked for */
.panel-fold { margin-top: 16px; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--card); }
.panel-fold > summary {
  cursor: pointer; padding: 10px 13px; font-size: 12px; font-weight: 700; color: var(--ink-soft);
  list-style: none; display: flex; align-items: center; gap: 7px;
}
.panel-fold > summary::-webkit-details-marker { display: none; }
.panel-fold > summary::before {
  content: ''; width: 0; height: 0; border: 4px solid transparent;
  border-inline-start-color: var(--muted); transition: transform var(--t-fast);
}
.panel-fold[open] > summary::before { transform: rotate(90deg); }
[dir="rtl"] .panel-fold[open] > summary::before { transform: rotate(-90deg); }
.panel-fold > summary:hover { color: var(--ink); }
.panel-fold-body {
  padding: 0 13px 12px; font-size: 11px; color: var(--muted);
  line-height: 1.8; word-break: break-all; direction: ltr; text-align: start;
}

/* The diff table inside the panel: changed rows carry a tint, not a shout */
.slide-panel .data-table tr.is-changed td { background: var(--warn-bg); }
.slide-panel .data-table td.diff-old { color: var(--danger-ink); text-decoration: line-through; }
.slide-panel .data-table td.diff-new { color: var(--ok-ink); font-weight: 700; }
.slide-panel .data-table th, .slide-panel .data-table td { padding: 9px 12px; font-size: 12px; }

/* A cramped table should scroll rather than crush a column to one word per line */
.table-scroll > .data-table { min-width: 780px; }
.data-table td.cell-wrap { white-space: normal; min-width: 240px; max-width: 420px; line-height: 1.7; }

/* Table cells read from the start of the line, never from its end */
.data-table th, .data-table td { text-align: center; }
.data-table th.actions, .data-table td.actions { text-align: end; }

/* Save sits at the end of the panel footer, where the eye finishes reading */
.panel-footer { justify-content: flex-end; }
.panel-footer .panel-footer-status { margin-inline-end: auto; }

table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th, table.dataTable tfoot td {
    text-align: center;
}

/* The KPI row holds whatever a screen has to say — one figure or five — and a
   fixed four-column grid leaves the remainder as bare cells. Flex items grow,
   so the row closes itself at any count, and the basis keeps a card from
   becoming a strip. Same rule as the reference system. */
.kpi-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.kpi-grid > * { flex: 1 1 210px; min-width: 190px; }
@media (max-width: 520px) { .kpi-grid > * { flex-basis: 100%; } }

/* A settings form ends where the reading ends: the save button on the far side */
.form-actions-end { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* No field stands alone on a line.
   The column count is chosen per form so the fields divide evenly; this is the
   safety net for a form that gains a field later: a last item that would sit by
   itself widens to fill the row instead of leaving a gap beside it. */
.form-grid.cols-3 > *:last-child:nth-child(3n + 1) { grid-column: span 3; }
.form-grid.cols-2 > *:last-child:nth-child(2n + 1) { grid-column: span 2; }
.form-row > *:last-child:nth-child(2n + 1) { grid-column: span 2; }
@media (max-width: 700px) {
  .form-grid.cols-3 > *:last-child:nth-child(3n + 1),
  .form-grid.cols-2 > *:last-child:nth-child(2n + 1),
  .form-row > *:last-child:nth-child(2n + 1) { grid-column: auto; }
}

/* ---- Role picker ----
   Roles were bare checkboxes: a 17 px target and no sign of what was chosen.
   Each is now an option card on the design system's .radio-card pattern —
   the whole card is the target, and the selected state is unmistakable. */
.role-pick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.role-pick {
  display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px;
  background: var(--card); border: 1.5px solid var(--line-soft); border-radius: 12px;
  cursor: pointer; transition: all var(--t-fast);
}
.role-pick:hover { border-color: var(--primary); }
.role-pick.selected { background: var(--primary-soft); border-color: var(--primary); }
.role-pick input { position: absolute; opacity: 0; pointer-events: none; }
.role-pick .rc-box {
  width: 19px; height: 19px; border-radius: 6px; border: 1.5px solid var(--line);
  background: var(--card); flex-shrink: 0; margin-top: 1px;
  display: grid; place-items: center; transition: all var(--t-fast);
}
.role-pick .rc-box svg { width: 12px; height: 12px; color: #fff; opacity: 0; transition: opacity var(--t-fast); }
.role-pick.selected .rc-box { background: var(--primary); border-color: var(--primary); }
.role-pick.selected .rc-box svg { opacity: 1; }
.role-pick .rc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.role-pick .rc-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.role-pick .rc-sub { font-size: 11px; color: var(--muted); }
.role-pick.selected .rc-name { color: var(--primary); }

/* =============================================================
   14) No bare space under a card in a paired row
   -------------------------------------------------------------
   Two cards side by side cannot hold the same amount, and stretching
   the grid cell only stretches the box — the gap moves under the last
   element instead of disappearing. So the card fills its cell, the body
   takes the slack, and the content inside shares it: bar rows grow,
   lists scroll, and an empty state centres itself. Same rule the
   reference system applies to its dashboard pairs.
   ============================================================= */
.two-col, .split-2 { align-items: stretch; }
.two-col > div, .split-2 > div { min-width: 0; }
.two-col > .card, .split-2 > .card,
.two-col > div > .card:only-child, .split-2 > div > .card:only-child {
  height: 100%; display: flex; flex-direction: column;
}
.two-col > .card > .card-body, .split-2 > .card > .card-body,
.two-col > div > .card:only-child > .card-body, .split-2 > div > .card:only-child > .card-body {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}

/* Bar rows share the height rather than bunching at the top */
.card-body > .bar-row { flex: 1 1 auto; min-height: 42px; }

/* A list that outgrows its cell scrolls inside it instead of stretching the pair */
.card-body > .table-wrap, .card-body > .feed { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.card-body > .table-wrap::-webkit-scrollbar, .card-body > .feed::-webkit-scrollbar { width: 6px; }
.card-body > .table-wrap::-webkit-scrollbar-thumb, .card-body > .feed::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* Anything shorter than its cell centres instead of leaving a blank tail */
.card-body > .empty-state { margin: auto 0; }

/* The side column of a form keeps its own behaviour: it pins, it does not stretch */
.split-2 > .form-side { height: auto; }

/* =============================================================
   15) A short page still puts its footer at the bottom
   -------------------------------------------------------------
   With few rows the content ended halfway down and the footer sat in
   the middle of the screen with blank space under it.
   ============================================================= */
.app-main { display: flex; flex-direction: column; min-height: 100vh; }
.app-content { flex: 1 0 auto; }
.app-footer { flex-shrink: 0; margin-top: auto; }

/* A stacked column ends level with its neighbour.
   Two columns of stacked cards hold different amounts, so one stack always
   finished early and left the gap under its last card. The column is a flex
   column now and its last card takes the slack; the content inside shares it
   (bars spread, an empty state centres) instead of sitting above a blank tail. */
.two-col > div, .split-2 > div { display: flex; flex-direction: column; }
.two-col > div > .card:last-child, .split-2 > div > .card:last-child {
  flex: 1; margin-bottom: 0; display: flex; flex-direction: column;
}
.two-col > div > .card:last-child > .card-body,
.split-2 > div > .card:last-child > .card-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.two-col > div > .card:last-child > .card-body > .bar-row,
.split-2 > div > .card:last-child > .card-body > .bar-row { flex: 1 1 auto; min-height: 42px; }

/* The form side column pins; it must not be stretched by this rule */
.split-2 > .form-side { display: block; }

/* Pagination keeps mono for the page numbers only.
   "السابق" and "التالي" are words, and JetBrains Mono carries no Arabic, so the
   browser fell back to a face that spaced the letters apart. */
.pager .pg,
.table-foot .dataTables_paginate .paginate_button { font-family: var(--font-body); letter-spacing: normal; }
.pager .pg:not(.pg-prev):not(.pg-next),
.table-foot .dataTables_paginate .paginate_button:not(.previous):not(.next):not(.ellipsis) {
  font-family: var(--font-mono);
}
.pager .pg.pg-prev, .pager .pg.pg-next,
.table-foot .dataTables_paginate .paginate_button.previous,
.table-foot .dataTables_paginate .paginate_button.next { padding: 0 13px; font-size: 12.5px; }

/* ---- CSV import ----
   A bare file input renders differently in every browser and says nothing about
   what the file should contain, so the panel states the steps and the drop zone
   is the input itself. */
.import-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.import-steps li {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--r-md);
}
.import-steps .is-n {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary-soft); color: var(--primary);
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  font-family: var(--font-mono);
}
.import-steps .is-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.import-steps .is-h { font-size: 13px; font-weight: 700; color: var(--ink); }
.import-steps .is-s { font-size: 11.5px; color: var(--muted); line-height: 1.7; }

.file-drop { display: block; }
.file-drop.has { border-style: solid; border-color: var(--ok); background: var(--ok-bg); }
.file-drop.has svg { color: var(--ok-ink); }
.file-drop.has .fd-t { color: var(--ok-ink); }
.file-drop .fd-t, .file-drop .fd-s { display: block; }

.import-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-top: 14px;
}
.import-result { margin-top: 18px; }
.import-result-head {
  display: flex; align-items: center; gap: 9px; margin-bottom: 10px;
  font-size: 13px; font-weight: 700; color: var(--danger-ink);
}
.import-result-head svg { width: 15px; height: 15px; }

/* =============================================================
   16) Roles and permissions
   -------------------------------------------------------------
   Five roles and forty-five permissions were laid out at once, each
   role with its own save button — a wall, and an easy way to save the
   wrong card. One role at a time now, chosen from the side the same way
   a settings section is, and each permission is a chip you can read.
   ============================================================= */
.settings-nav .role-nav-count {
  margin-inline-start: auto; font-family: var(--font-mono); font-size: 11px;
  font-weight: 700; color: var(--muted); background: var(--bg-2);
  border-radius: var(--r-pill); padding: 1px 7px;
}
.settings-nav a.active .role-nav-count { background: rgba(255,255,255,.22); color: #fff; }

.perm-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--line-soft);
}

.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }

.perm-group {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 13px 14px; transition: border-color var(--t-fast);
}
.perm-group.is-full { border-color: var(--primary); }
.perm-group > header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.perm-group .pg-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.perm-group .pg-count { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.perm-group .pg-all {
  margin-inline-start: auto; font-family: inherit; font-size: 11px; font-weight: 700;
  color: var(--primary); background: transparent; border: none; cursor: pointer; padding: 2px 4px;
  border-radius: var(--r-sm);
}
.perm-group .pg-all:hover { background: var(--primary-soft); }

.pg-items { display: flex; flex-wrap: wrap; gap: 6px; }
.perm-chip {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 5px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--bg);
  font-size: 11.5px; font-weight: 600; color: var(--ink-soft);
  transition: all var(--t-fast); user-select: none;
}
.perm-chip:hover { border-color: var(--primary); color: var(--primary); }
.perm-chip input { position: absolute; opacity: 0; pointer-events: none; }
.perm-chip svg { width: 11px; height: 11px; opacity: 0; transition: opacity var(--t-fast); }
.perm-chip.on {
  background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 700;
}
.perm-chip.on svg { opacity: 1; }

/* The save button ends the card, where the reading ends */
.card-foot-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 22px; border-top: 1px solid var(--line-soft); background: var(--bg);
}

/* The confirm dialog's tone: destructive in red, everything else in the
   system's own colour. The cancel button stays quiet so the eye lands on
   the answer the person came to give. */
.confirm-backdrop.tone-primary .confirm-icon-wrap { background: var(--primary-soft); color: var(--primary); }
.confirm-actions { gap: 10px; }
.confirm-actions .btn { flex: 1; justify-content: center; font-weight: 700; }
.confirm-dialog { max-width: 400px; padding: 28px 26px 24px; }
.confirm-title { font-size: 16.5px; }
.confirm-message { margin-bottom: 20px; }

/* A field holding a value the server will refuse, marked by the screen itself.
   `.error` belongs to the shared validation layer, which clears it on the next
   keystroke — this mark has to survive until the value is actually corrected. */
.form-input.is-over, .form-select.is-over {
  border-color: var(--danger); background: var(--danger-bg);
}
.form-input.is-over:focus { box-shadow: 0 0 0 3px var(--danger-bg); border-color: var(--danger); }

/* ---- Printed letterhead ----
   The company identity from Settings, on paper only: a printed page leaves the
   building and has to say who issued it, with the CR and VAT numbers a Saudi
   establishment is required to show. */
.print-only { display: none; }
@media print {
  .print-only { display: block; }
  .letterhead {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; padding-bottom: 12px; margin-bottom: 18px;
    border-bottom: 2px solid #222;
  }
  .letterhead .lh-name { font-size: 16px; font-weight: 800; color: #111; }
  .letterhead .lh-name-en { font-size: 11px; color: #444; margin-top: 2px; direction: ltr; text-align: start; }
  .letterhead .lh-meta { font-size: 10px; color: #444; margin-top: 5px; line-height: 1.7; }
  .letterhead .lh-doc { text-align: end; flex-shrink: 0; }
  .letterhead .lh-title { font-size: 13px; font-weight: 700; color: #111; }
  .letterhead .lh-date { font-size: 10px; color: #444; margin-top: 3px; }
}

/* The mail test sits apart from the form it verifies: a different action,
   a different row, so "save" and "send" are never confused. */
.email-test {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 18px; padding: 14px 16px;
  background: var(--bg); border: 1px dashed var(--line); border-radius: var(--r-lg);
}
.email-test-text { flex: 1; min-width: 200px; }
.email-test .et-t { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--ink); }
.email-test .et-t svg { width: 14px; height: 14px; color: var(--primary); }
.email-test .et-s { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.7; }
.email-test .form-input { max-width: 260px; }

/* A KPI the viewer may read but not open. It keeps the number and drops every
   affordance that promises a destination, so it does not look clickable. */
.kpi.kpi-static { cursor: default; }
.kpi.kpi-static:hover {
    border-color: var(--line-soft);
    transform: none;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}
.kpi.kpi-static.highlight:hover { border-color: var(--primary); }
.kpi.kpi-static.urgent:hover { border-color: rgba(245, 158, 11, 0.25); }