/* نظام الموارد البشرية — وسم | الهوية الرسمية المعتمدة (R8c):
   كحلي #14213D / أزرق فولاذي #4C7893 (معايَران من أصول الهوية) — الفعلية تُحقن من محرك الهوية.
   الهيدر أبيض بالكامل: الشعار المكتوب يسار + أيقونة الخمس علامات يمين + خط توقيع من شريط الفوتر الرسمي. */
:root {
  --navy: #14213D;      /* اللون الأساسي (يُحقن من محرك الهوية) */
  --navy-2: #23375e;
  --copper: #4C7893;    /* اللون الثانوي (يُحقن من محرك الهوية) */
  --bg: #f4f6fa;
  --card: #ffffff;
  --text: #1c2333;
  --muted: #6b7280;
  --border: #e2e6ee;
  --green: #1e7e34;
  --amber: #b8860b;
  --red: #b02a37;
  --blue: #2563a8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* R6: الخط من محرك الهوية (الإعدادات) — نفس الخط في النظام والمستندات */
  font-family: var(--font, "Segoe UI"), "Segoe UI", Tahoma, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ===== الهيدر الرسمي (R8): أبيض بالكامل — شعار يسار + الأيقونة يمين، بلا نصوص وبلا أي خطوط ===== */
.brandbar {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
}
.brand { display: flex; align-items: center; text-decoration: none; order: 2; }
.brand-logo { height: 40px; width: auto; display: block; }
.brand-ornament { height: 33px; width: auto; display: block; order: 1; }
/* خط توقيع الهوية: شريط الفوتر الرسمي نفسه (صورة) بسماكة 3px */
.brand-signature { height: 3px; background-size: 100% 100%; background-repeat: no-repeat; }

/* ===== شريط التنقل (R8): بنفس الهوية — خلفية بيضاء، تمييز الصفحة بخط سفلي احترافي لا خلفية رمادية ===== */
.topbar {
  background: #fff;
  color: var(--text);
  padding: 0 24px;
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(31, 58, 95, .06);
}
.mainnav { display: flex; flex-wrap: wrap; gap: 0; flex: 1; }
.mainnav a {
  color: var(--text);
  text-decoration: none;
  padding: 14px 12px;
  font-size: 0.9rem;
  border-bottom: 3px solid transparent;
  transition: color .12s, border-color .12s;
}
.mainnav a:hover { color: var(--navy); border-bottom-color: var(--border); }
.mainnav a.active {
  color: var(--navy);
  font-weight: 700;
  border-bottom-color: var(--copper);
}
/* ===== القائمة المجمعة (C2) ===== */
.navgroup { position: relative; display: flex; }
.navgroup-btn {
  background: transparent; border: none; cursor: pointer;
  color: var(--text); font-family: inherit; font-size: 0.9rem;
  padding: 14px 12px; border-bottom: 3px solid transparent;
  transition: color .12s, border-color .12s;
}
.navgroup-btn::after { content: " ▾"; font-size: 0.7em; }
/* الفتح بالتحويم للفأرة فقط — أجهزة اللمس تفتح بالنقر (class .open عبر wsm_mobile.js) */
@media (hover: hover) {
  .navgroup:hover .navgroup-btn { color: var(--navy); border-bottom-color: var(--border); }
}
.navgroup:focus-within .navgroup-btn, .navgroup.open .navgroup-btn { color: var(--navy); border-bottom-color: var(--border); }
.navgroup-btn.active { color: var(--navy); font-weight: 700; border-bottom-color: var(--copper); }
.navgroup .dropdown {
  display: none; position: absolute; top: 100%; right: 0; min-width: 210px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(31, 58, 95, .18); padding: 6px; z-index: 50;
}
@media (hover: hover) {
  .navgroup:hover .dropdown { display: block; }
}
.navgroup:focus-within .dropdown, .navgroup.open .dropdown { display: block; }
.navgroup .dropdown a { display: block; color: var(--text); padding: 8px 12px; border-radius: 6px; font-size: 0.88rem; border-right: 3px solid transparent; }
.navgroup .dropdown a:hover { background: #f5f8fc; color: var(--navy); }
.navgroup .dropdown a.active { background: #f0f5fb; color: var(--navy); font-weight: 700; border-right-color: var(--copper); }

.userbox { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.user-chip {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem; flex-shrink: 0;
}
.username { font-size: 0.85rem; color: var(--text); display: flex; flex-direction: column; line-height: 1.4; }
.user-role { font-size: 0.72rem; color: var(--muted); }
.inline-form { display: inline; }

/* ===== الحاوية ===== */
.container { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px 16px; }
h1 { color: var(--navy); font-size: 1.5rem; margin: 8px 0 16px; }
h2 { color: var(--navy); font-size: 1.1rem; margin: 4px 0 12px; }
.muted { color: var(--muted); }
.small { font-size: 0.8rem; }
.nowrap { white-space: nowrap; }
.count-badge {
  background: var(--navy-2); color: #fff;
  font-size: 0.85rem; padding: 2px 10px; border-radius: 12px;
  vertical-align: middle;
}

/* ===== البطاقات ===== */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.dept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.dept-card h2 { margin-top: 0; }
.dept-card-link {
  display: block;
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.dept-card-link:hover {
  border-color: var(--navy-2);
  box-shadow: 0 4px 14px rgba(31, 56, 100, .14);
  transform: translateY(-2px);
}

/* ===== شارات حالة الإدارة (PHASE 1.6) ===== */
.dept-badge-active { background: #e2f3e6; color: var(--green); }
.dept-badge-establishing { background: #fdf3d8; color: var(--amber); }
.dept-badge-future { background: #e3ecf7; color: var(--blue); }

/* ===== الهيكل التنظيمي (PHASE 1.6) ===== */
.org-chart { display: flex; flex-direction: column; align-items: center; margin-bottom: 16px; }
.org-tier { display: flex; justify-content: center; width: 100%; }
.org-node {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  display: block;
  box-shadow: 0 1px 2px rgba(31, 56, 100, .06);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.org-node:hover {
  border-color: var(--navy-2);
  box-shadow: 0 4px 14px rgba(31, 56, 100, .16);
  transform: translateY(-2px);
}
.org-node-title { font-weight: 700; color: var(--navy); font-size: 1rem; }
.org-node-sub { font-size: 0.78rem; color: var(--muted); margin-top: 8px; line-height: 1.7; }
.org-node-meta { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.org-count { font-size: 0.8rem; color: var(--muted); }
.org-board {
  background: var(--navy);
  border-color: var(--navy);
  border-bottom: 4px solid var(--copper);
  min-width: 280px;
}
.org-board .org-node-title { color: #fff; }
.org-board .org-node-sub { color: #c7d3ea; }
.org-exec { border-top: 4px solid var(--copper); min-width: 320px; max-width: 560px; }
.org-connector { width: 2px; height: 28px; background: var(--navy-2); }
.org-children {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
  width: 100%;
  border-top: 2px solid var(--navy-2);
  padding-top: 20px;
}
.org-legend .badge { margin: 0 2px; }

/* ===== وحدة الموظفين (PHASE 2) ===== */
.emp-badge-active { background: #e2f3e6; color: var(--green); }
.emp-badge-probation { background: #e3ecf7; color: var(--blue); }
.emp-badge-suspended { background: #fdf3d8; color: var(--amber); }
.emp-badge-resigned { background: #eef0f4; color: var(--muted); }
.emp-badge-terminated { background: #fbe3e6; color: var(--red); }
.badge-doc { background: #e3ecf7; color: var(--navy-2); }
/* ملف الموظف المبوّب (FULL BUILD B3) */
.profile-header { display: flex; align-items: center; gap: 14px; margin: 8px 0 16px; flex-wrap: wrap; }
.profile-avatar {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 700; flex-shrink: 0;
}
.profile-header-actions { margin-inline-start: auto; }
.tabnav {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 2px solid var(--border); margin-bottom: 16px;
}
.tablabel {
  background: transparent; border: none; cursor: pointer;
  padding: 10px 14px; font-family: inherit; font-size: 0.9rem;
  color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.tablabel:hover { color: var(--navy); }
.tablabel.active { color: var(--navy); font-weight: 700; border-bottom-color: var(--copper); }
.tabpanel { display: none; }
.tabpanel.active { display: block; }
.total-row td { border-top: 2px solid var(--navy-2); background: #f0f4fb; }
/* مؤشر التكلفة */
.cost-green { background: #e2f3e6; color: var(--green); }
.cost-yellow { background: #fdf3d8; color: var(--amber); }
.cost-red { background: #fbe3e6; color: var(--red); }
/* شارات الحركة الوظيفية */
.mv-hire { background: #e2f3e6; color: var(--green); }
.mv-transfer { background: #e3ecf7; color: var(--blue); }
.mv-promotion { background: #f7e6d9; color: var(--copper); }
.mv-salary_change { background: #fdf3d8; color: var(--amber); }
.mv-manager_change { background: #eef0f4; color: var(--muted); }
.mv-status_change { background: #e3ecf7; color: var(--navy-2); }

/* شارات حالة العهد (FULL BUILD B6) */
.ast-handed_over { background: #e3ecf7; color: var(--blue); }
.ast-returned { background: #e2f3e6; color: var(--green); }
.ast-lost { background: #fbe3e6; color: var(--red); }
.ast-damaged { background: #fdf3d8; color: var(--amber); }
.ast-processing { background: #eef0f4; color: var(--muted); }

/* شارات إجراءات الجزاءات (FULL BUILD B5) */
.act-verbal { background: #eef0f4; color: var(--muted); }
.act-written { background: #fdf3d8; color: var(--amber); }
.act-deduction { background: #f7e6d9; color: var(--copper); }
.act-suspension { background: #fbe3e6; color: var(--red); }
.act-other { background: #e3ecf7; color: var(--blue); }

/* شارات التوظيف (FULL BUILD) */
.prio-low { background: #eef0f4; color: var(--muted); }
.prio-medium { background: #e3ecf7; color: var(--blue); }
.prio-high { background: #fdf3d8; color: var(--amber); }
.prio-urgent { background: #fbe3e6; color: var(--red); }
.reqst-draft, .offst-draft { background: #eef0f4; color: var(--muted); }
.reqst-sent, .offst-sent { background: #e3ecf7; color: var(--blue); }
.reqst-under_review { background: #fdf3d8; color: var(--amber); }
.reqst-approved, .offst-accepted { background: #e2f3e6; color: var(--green); }
.reqst-rejected, .offst-rejected { background: #fbe3e6; color: var(--red); }
.reqst-cancelled, .offst-expired { background: #eef0f4; color: var(--muted); }
.reqst-closed { background: #f7e6d9; color: var(--copper); }
.cstage-new { background: #e3ecf7; color: var(--blue); }
.cstage-screening { background: #fdf3d8; color: var(--amber); }
.cstage-interview { background: #f7e6d9; color: var(--copper); }
.cstage-offer { background: #e3ecf7; color: var(--navy-2); }
.cstage-accepted { background: #e2f3e6; color: var(--green); }
.cstage-rejected { background: #fbe3e6; color: var(--red); }
.cstage-withdrawn { background: #eef0f4; color: var(--muted); }
.badge-expired { background: #fbe3e6; color: var(--red); }
.badge-expiring { background: #fdf3d8; color: var(--amber); }
.btn-copper { background: var(--copper); color: #fff; }
.btn-copper:hover { opacity: .92; }
.btn-danger-ghost {
  background: transparent; color: var(--red);
  border: 1px solid #f2c2c9; padding: 4px 10px; font-size: 0.8rem;
}
.btn-danger-ghost:hover { background: #fbe3e6; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px 18px;
  margin-bottom: 12px;
}
.form-field label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 4px; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  background: #fff;
}
.form-field-wide { grid-column: 1 / -1; }
.field-error { color: var(--red); font-size: 0.8rem; margin-top: 4px; }
.req { color: var(--red); }
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px 20px;
  margin: 0;
}
.profile-grid dt { font-weight: 700; color: var(--navy); font-size: 0.85rem; }
.profile-grid dd { margin: 2px 0 0; }

/* ===== صفحة تفاصيل الإدارة (PHASE 1.6) ===== */
.breadcrumbs { color: var(--muted); }
.breadcrumbs a { color: var(--navy-2); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.detail-links { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 16px; }
.card-action { float: left; font-size: 0.8rem; font-weight: 400; color: var(--navy-2); text-decoration: none; }
.card-action:hover { text-decoration: underline; }

/* ===== KPI ===== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  border-top: 4px solid var(--navy);
}
.kpi-num { font-size: 1.7rem; font-weight: 700; color: var(--navy); }
.kpi-label { font-size: 0.85rem; color: var(--muted); margin-top: 4px; }
.kpi-link { text-decoration: none; color: inherit; display: block; }
.section-head { color: var(--navy); font-size: 1.05rem; margin: 20px 0 8px; padding-bottom: 4px; border-bottom: 2px solid var(--copper); display: inline-block; }
.kpi-green { border-top-color: var(--green); }
.kpi-amber { border-top-color: var(--amber); }
.kpi-blue { border-top-color: var(--blue); }
.kpi-copper { border-top-color: var(--copper); }

/* ===== الجداول ===== */
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th {
  background: var(--navy); color: #fff;
  padding: 10px 12px; text-align: right;
  font-weight: 600; white-space: nowrap;
}
td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
tbody tr:hover { background: #f0f4fb; }

/* ===== الشارات ===== */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-occupied { background: #e2f3e6; color: var(--green); }
.badge-vacant { background: #fdf3d8; color: var(--amber); }
.badge-track { background: #f7e6d9; color: var(--copper); }
.badge-future { background: #e3ecf7; color: var(--blue); }
.badge-copper { background: var(--copper); color: #fff; }
.badge-action-login { background: #e2f3e6; color: var(--green); }
.badge-action-logout { background: #eef0f4; color: var(--muted); }
.badge-action-login_failed { background: #fbe3e6; color: var(--red); }
.badge-action-create { background: #e3ecf7; color: var(--blue); }
.badge-action-update { background: #fdf3d8; color: var(--amber); }
.badge-action-delete { background: #fbe3e6; color: var(--red); }
.badge-action-import { background: #f7e6d9; color: var(--copper); }
.badge-action-export { background: #eef0f4; color: var(--muted); }

/* ===== النماذج والفلاتر ===== */
.filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 16px; align-items: center;
}
.filters input[type="text"], .filters select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  min-width: 160px;
}
.btn {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  text-decoration: none;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-2); }
.btn-ghost { background: transparent; color: inherit; border: 1px solid var(--border); }
.topbar .btn-ghost { color: var(--navy); border-color: var(--border); padding: 5px 12px; }
.topbar .btn-ghost:hover { background: #f5f8fc; }
.btn-block { width: 100%; margin-top: 12px; }
.btn-sm { padding: 5px 10px; font-size: 0.78rem; }
.kpi-actions { margin-top: 10px; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }

/* ===== التنبيهات ===== */
.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 12px; font-size: 0.9rem; }
.alert-success { background: #e2f3e6; color: var(--green); border: 1px solid #bfe3c8; }
.alert-danger { background: #fbe3e6; color: var(--red); border: 1px solid #f2c2c9; }
.alert-error { background: #fbe3e6; color: var(--red); border: 1px solid #f2c2c9; }
.alert-warning { background: #fdf3d8; color: #7a5b06; border: 1px solid #efd9a0; }
.alert-info { background: #e7eff9; color: var(--navy); border: 1px solid #c9dcf2; }

/* ===== تسجيل الدخول ===== */
.login-wrap { display: flex; justify-content: center; padding: 40px 8px; }
.login-card { width: 100%; max-width: 400px; }
.login-logo { display: block; margin: 4px auto 14px; max-height: 64px; width: auto; }
.login-title { margin-top: 0; text-align: center; }
.login-card label { display: block; margin: 12px 0 4px; font-weight: 600; font-size: 0.9rem; }
.login-card input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
}

/* ===== المصفوفة ===== */
.matrix-item summary { cursor: pointer; font-size: 0.95rem; padding: 4px 0; }
.matrix-detail dt { font-weight: 700; color: var(--navy); margin-top: 10px; }
.matrix-detail dd { margin: 4px 0 0; color: var(--text); line-height: 1.7; }

/* ===== الترقيم ===== */
.pagination {
  display: flex; gap: 12px; align-items: center; justify-content: center;
  margin: 16px 0; font-size: 0.9rem;
}
.pagination a {
  color: var(--navy); text-decoration: none;
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 14px; background: var(--card);
}

/* ===== التذييل ===== */
/* ===== الفوتر الرسمي المعتمد (R8c): شريط الفوتر الرسمي (صورة الأصل) + سطر نصي هادئ ===== */
.footer { background: var(--card); border-top: 1px solid var(--border); }
.footer-bar {
  height: 14px;
  width: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.footer-line {
  color: var(--muted);
  font-size: 0.78rem;
  padding: 10px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.footer a { color: var(--navy); text-decoration: underline; }
.footer .footer-contact { font-size: 0.72rem; }

/* ===== بطاقة التعبئة التلقائية للموظف (C3) ===== */
.emp-panel { grid-column: 1 / -1; background: #f7f9fd; border-color: #d5deee; padding: 12px 14px; margin: 4px 0 8px; }
.emp-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.emp-panel-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--navy-2); }
.emp-panel-name { font-weight: 700; color: var(--navy); text-decoration: none; }
.emp-panel-name:hover { color: var(--copper); }
.emp-panel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px 16px; margin: 0; }
.emp-panel-grid dt { font-size: 0.72rem; color: var(--muted); }
.emp-panel-grid dd { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--text); }
.emp-panel-warn { color: var(--amber); font-size: 0.8rem; margin: 8px 0 0; }
.profile-photo { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid var(--navy); flex-shrink: 0; }

/* ===== مركز الإعدادات (C6) ===== */
.color-swatch {
  display: inline-block; width: 16px; height: 16px; border-radius: 4px;
  border: 1px solid var(--border); vertical-align: middle; margin-inline-end: 4px;
}

/* ===== محرك الهوية (R6) ===== */
.brand-preview-topbar {
  border-radius: 8px; padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand-preview-topbar img { height: 34px; width: auto; }
.brand-preview-accent { display: inline-block; width: 46px; height: 8px; border-radius: 4px; }

/* ===== منشئ القوالب الذكي (C5) ===== */
.var-palette { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.var-chip { border: 1px solid var(--border); background: #fff; cursor: pointer; font-family: inherit; }
.var-chip:hover { border-color: var(--copper); color: var(--copper); }
.detected-vars { margin-top: 8px; font-size: 0.85rem; color: var(--muted); }
.letter-preview-card { border-top: 4px solid var(--copper); }
.letter-preview {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 20px 24px; line-height: 2; font-size: 0.95rem; margin-bottom: 12px;
}

/* ===== مركز القيادة (C1) ===== */
.cc-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.period-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-block; padding: 6px 14px; border-radius: 16px;
  font-size: 0.85rem; text-decoration: none; color: var(--navy);
  background: var(--card); border: 1px solid var(--border);
}
.chip:hover { border-color: var(--navy-2); }
.chip-active { background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 600; }
.kpi-red { border-top-color: var(--red); }
.kpi-red .kpi-num { color: var(--red); }
.cc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.cc-grid-charts { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.cc-card h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cc-card .card-action { margin-inline-start: auto; float: none; }
.cc-list { list-style: none; margin: 0; padding: 0; }
.cc-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 7px 2px; border-bottom: 1px solid var(--border); font-size: 0.88rem;
}
.cc-list li:last-child { border-bottom: none; }
.cc-list a { color: var(--navy); text-decoration: none; }
.cc-list a:hover { color: var(--copper); text-decoration: underline; }
.cc-empty { margin: 6px 0 0; }
.chart-card h2 { margin-bottom: 8px; }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-size: 0.8rem; color: var(--muted); }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-inline-end: 5px; }
.forecast-card { border-top: 4px solid var(--copper); }
.forecast-current { margin: 4px 0 10px; }
.forecast-steps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.forecast-step {
  background: #f0f4fb; color: var(--navy); font-weight: 700;
  padding: 6px 14px; border-radius: 8px; font-size: 0.95rem;
}

/* ===== زر القائمة (همبرغر) — يظهر على الشاشات الصغيرة فقط ===== */
.nav-toggle {
  display: none;
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  width: 44px; height: 44px; margin: 6px 0; padding: 10px;
  cursor: pointer; flex-direction: column; justify-content: space-between;
  align-self: center; flex-shrink: 0;
}
.nav-toggle span { display: block; height: 2.5px; background: var(--navy); border-radius: 2px; transition: transform .15s, opacity .15s; }
.topbar.nav-open .nav-toggle span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
.topbar.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.topbar.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }

.footer-link { color: var(--navy); font-size: 0.8rem; text-decoration: none; border-bottom: 1px dashed var(--border); }
.footer-link:hover { border-bottom-color: var(--copper); }

/* منع أي تمدد أفقي للصفحة — الجداول العريضة تتمرر داخل .table-wrap حصرًا */
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
.brand-logo, .brand-ornament, .login-logo { max-width: none; height: auto; }
.brand-logo { height: 40px; }
.brand-ornament { height: 33px; }

/* ===== الجوال والتابلت ===== */
@media (max-width: 900px) {
  /* القائمة تنطوي خلف زر الهمبرغر */
  .nav-toggle { display: flex; }
  .topbar { padding: 0 12px; align-items: center; }
  .mainnav { display: none; order: 3; width: 100%; flex-direction: column; padding-bottom: 8px; }
  .topbar.nav-open .mainnav { display: flex; }
  .mainnav a, .navgroup-btn {
    display: block; width: 100%; text-align: right;
    padding: 13px 10px; min-height: 44px; font-size: 1rem;
    border-bottom: 1px solid var(--border); border-radius: 0;
  }
  .navgroup { display: block; position: static; }
  .navgroup .dropdown {
    position: static; box-shadow: none; min-width: 0; border: none;
    background: #f7f9fc; border-radius: 0; padding: 0 14px;
  }
  .navgroup .dropdown a { min-height: 44px; padding: 12px 10px; font-size: 0.95rem; }
  .userbox { order: 2; margin-inline-start: auto; }
}

@media (max-width: 700px) {
  .brand-lines { display: none; }
  .brand-logo { height: 30px; }
  .brand-ornament { height: 25px; }
  .container { padding: 12px 8px; }
  .kpi-num { font-size: 1.3rem; }
  th, td { padding: 9px 8px; font-size: 0.82rem; }
  .filters input[type="text"], .filters select { min-width: 120px; flex: 1; }
  .org-exec { min-width: 0; width: 100%; }
  .org-board { min-width: 0; width: 100%; }
  /* مناطق لمس مريحة للأصابع */
  .btn, button, input[type="submit"] { min-height: 44px; }
  a.btn { display: inline-flex; align-items: center; justify-content: center; }
  /* منع تكبير iOS التلقائي عند التركيز على الحقول (يشترط 16px فأكثر) —
     !important مقصود: يتغلب على قواعد font-size الأعلى تخصيصًا (كحقول الفلاتر) */
  input, select, textarea { font-size: 16px !important; }
  input:not([type="checkbox"]):not([type="radio"]), select { min-height: 44px; }
}