/* =============================================================================
   Wakeel Operations Design System (WODS) v1.0
   -----------------------------------------------------------------------------
   مستمد من Fiori (الصفحة حسب الدور) و Fluent 2 (التنقل والأوامر والوصول)
   و ServiceNow (مساحة العمل وقوائم العمل) و Lightning (الجداول عالية الكثافة)
   و Atlassian (وضوح الحالة) — ومطابق لـ WCAG 2.2 AA.
   لا تُنسخ علامة أو مكوّن نظام بعينه؛ الرموز أدناه خاصة بالوكيل.

   القاعدة الحاكمة: ممنوع أن تعيد كل صفحة تعريف الأزرار والبطاقات والجداول
   بألوان وأحجام مختلفة. في النظام القديم كان لكل ملف <style> خاص به.
   ============================================================================= */

:root {
  /* الألوان — القسم 16.3 */
  --c-navy:        #17365E;
  --c-action:      #2D72FF;
  --c-action-dark: #1F5BD4;
  --c-ok:          #168267;
  --c-warn:        #B7791F;
  --c-danger:      #B93645;
  --c-bg:          #F4F7FB;
  --c-surface:     #FFFFFF;
  --c-text:        #17233A;
  --c-muted:       #5A6B85;
  --c-border:      #DCE3ED;
  --c-border-strong:#C2CCDB;

  /* خلفيات الحالات — تباين AA مع نصها */
  --c-ok-bg:     #E7F4F0;
  --c-warn-bg:   #FCF3E3;
  --c-danger-bg: #FBE9EB;
  --c-info-bg:   #E9F0FF;

  /* المسافات — وحدة 4px */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;
  --s-4: 16px; --s-6: 24px; --s-8: 32px;

  --radius:    10px;
  --radius-sm: 6px;
  --shadow-1:  0 1px 2px rgba(23,35,58,.06);
  --shadow-2:  0 6px 20px rgba(23,35,58,.10);

  /* الأبعاد الإلزامية — القسم 16.2 */
  --topbar-h:   64px;
  --nav-w:      248px;
  --nav-w-min:  72px;
  --ctxhead-h:  84px;
  --panel-w:    400px;
  --content-max:1680px;

  --font: "IBM Plex Sans Arabic", "Tajawal", Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* حالة التركيز واضحة دائماً — شرط WCAG 2.2 */
:focus-visible {
  outline: 3px solid var(--c-action);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* تخطي إلى المحتوى — لمستخدمي لوحة المفاتيح وقارئات الشاشة */
.skip-link {
  position: absolute; right: -9999px; top: var(--s-2);
  background: var(--c-navy); color: #fff;
  padding: var(--s-2) var(--s-4); border-radius: var(--radius-sm); z-index: 999;
}
.skip-link:focus { right: var(--s-4); }

/* ═══════════════════════════ الهيكل ═══════════════════════════ */

.app { min-height: 100vh; }

.topbar {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  height: var(--topbar-h); z-index: 40;
  background: var(--c-navy); color: #fff;
  display: flex; align-items: center; gap: var(--s-4);
  padding-inline: var(--s-4);
}
.topbar__brand { font-weight: 700; font-size: 16px; white-space: nowrap; }
.topbar__brand small { display: block; font-size: 11px; opacity: .75; font-weight: 400; }
.topbar__spacer { flex: 1; }

.cmdk {
  flex: 0 1 460px; display: flex; align-items: center; gap: var(--s-2);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius); padding: 7px var(--s-3);
  color: #fff; cursor: pointer; font-size: 14px;
}
.cmdk kbd {
  margin-inline-start: auto; font-size: 11px; font-family: var(--font);
  background: rgba(255,255,255,.16); border-radius: 4px; padding: 1px 6px;
}

.topbar__chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 5px var(--s-3); border-radius: 999px; font-size: 12.5px;
  background: rgba(255,255,255,.12); white-space: nowrap;
}
.topbar__chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot--ok { background: #3ED598; } .dot--warn { background: #F6C544; }
.dot--danger { background: #FF7A85; }

.nav {
  position: fixed; inset-block-start: var(--topbar-h); inset-block-end: 0;
  inset-inline-start: 0; width: var(--nav-w); z-index: 30;
  background: var(--c-surface); border-inline-start: 1px solid var(--c-border);
  overflow-y: auto; padding: var(--s-3) 0;
}
.nav__section { padding: var(--s-2) var(--s-4) var(--s-1); font-size: 11.5px;
                color: var(--c-muted); font-weight: 700; letter-spacing: .2px; }
.nav__item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 9px var(--s-4); color: var(--c-text);
  text-decoration: none; font-size: 14px; border-inline-end: 3px solid transparent;
}
.nav__item:hover { background: var(--c-info-bg); }
.nav__item[aria-current="page"] {
  background: var(--c-info-bg); color: var(--c-action-dark);
  font-weight: 700; border-inline-end-color: var(--c-action);
}
.nav__item i { width: 18px; text-align: center; color: var(--c-muted); }
.nav__item[aria-current="page"] i { color: var(--c-action); }
.nav__badge {
  margin-inline-start: auto; background: var(--c-danger); color: #fff;
  font-size: 11px; border-radius: 999px; padding: 1px 7px; font-weight: 700;
}

.main {
  margin-inline-start: var(--nav-w); margin-block-start: var(--topbar-h);
  padding: var(--s-6); max-width: var(--content-max);
}

/* رأس سياقي — الاسم والفترة والنطاق وآخر تحديث والثقة */
.ctxhead {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: var(--s-4) var(--s-6);
  margin-block-end: var(--s-4); display: flex; flex-wrap: wrap;
  align-items: center; gap: var(--s-4);
}
.ctxhead__title { margin: 0; font-size: 24px; font-weight: 700; }
.ctxhead__meta  { color: var(--c-muted); font-size: 13px; margin-block-start: 2px; }
.ctxhead__actions { margin-inline-start: auto; display: flex; gap: var(--s-2); }

/* ═══════════════════════ شريط الثقة ═══════════════════════ */
.trust {
  display: inline-flex; align-items: center; gap: var(--s-2);
  border-radius: 999px; padding: 3px var(--s-3);
  font-size: 12.5px; font-weight: 600; border: 1px solid transparent;
}
.trust--ok     { background: var(--c-ok-bg);     color: var(--c-ok);     border-color: #BFE3D8; }
.trust--warn   { background: var(--c-warn-bg);   color: var(--c-warn);   border-color: #EDD9B0; }
.trust--danger { background: var(--c-danger-bg); color: var(--c-danger); border-color: #EFC2C8; }
/* اللون وحده لا يكفي: كل حالة معها نص وأيقونة — القسم 16.3 */

/* ═══════════════════════ شريط القرار ═══════════════════════ */
/* يظهر فقط عند وجود خلل أو اعتماد أو تأخير — القسم 16.2 بند 4 */
.decisionbar {
  display: flex; align-items: flex-start; gap: var(--s-4);
  background: var(--c-danger-bg); border: 1px solid #EFC2C8;
  border-inline-start: 4px solid var(--c-danger);
  border-radius: var(--radius); padding: var(--s-4) var(--s-6);
  margin-block-end: var(--s-4);
}
.decisionbar--warn { background: var(--c-warn-bg); border-color: #EDD9B0;
                     border-inline-start-color: var(--c-warn); }
.decisionbar__body { flex: 1; }
.decisionbar__title { font-weight: 700; margin: 0 0 var(--s-1); }
.decisionbar__facts { font-size: 13px; color: var(--c-muted); display: flex;
                      flex-wrap: wrap; gap: var(--s-4); }
.decisionbar__actions { display: flex; gap: var(--s-2); align-items: center; }

/* ═══════════════════════ الشبكة والبطاقات ═══════════════════════ */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-4); }
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

.card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
}
.card__head {
  padding: var(--s-3) var(--s-4); border-block-end: 1px solid var(--c-border);
  display: flex; align-items: center; gap: var(--s-3);
}
.card__title { margin: 0; font-size: 16px; font-weight: 700; }
.card__body { padding: var(--s-4); }

/* MetricCard — القيمة والتعريف والمصدر والفترة والثقة والاتجاه */
.metric { padding: var(--s-4); }
.metric__label { font-size: 13px; color: var(--c-muted); display: flex;
                 align-items: center; gap: var(--s-2); }
.metric__value { font-size: 28px; font-weight: 700; margin-block: var(--s-1);
                 letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.metric__value--unavailable { color: var(--c-muted); font-size: 20px; font-weight: 600; }
.metric__foot { display: flex; align-items: center; gap: var(--s-3);
                font-size: 12px; color: var(--c-muted); flex-wrap: wrap; }
.metric__trend--up   { color: var(--c-ok); }
.metric__trend--down { color: var(--c-danger); }

/* زر «لماذا هذا الرقم؟» — يفتح التعريف والمصدر والاستبعادات */
.metric__why {
  background: none; border: 0; color: var(--c-action); cursor: pointer;
  font: inherit; font-size: 12px; text-decoration: underline; padding: 0;
}

/* ═══════════════════════ الأزرار ═══════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 8px var(--s-4); font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none; min-height: 38px; white-space: nowrap;
}
.btn--primary { background: var(--c-action); color: #fff; }
.btn--primary:hover { background: var(--c-action-dark); }
.btn--ghost { background: var(--c-surface); color: var(--c-text);
              border-color: var(--c-border-strong); }
.btn--ghost:hover { background: var(--c-bg); }
.btn--danger { background: var(--c-danger); color: #fff; }
.btn--sm { padding: 5px var(--s-3); min-height: 30px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ═══════════════════════ الجداول ═══════════════════════ */
.grid-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.grid-table th {
  text-align: start; font-weight: 700; font-size: 12.5px; color: var(--c-muted);
  padding: var(--s-2) var(--s-3); border-block-end: 1px solid var(--c-border-strong);
  background: var(--c-bg); position: sticky; inset-block-start: 0; z-index: 1;
}
.grid-table td { padding: var(--s-3); border-block-end: 1px solid var(--c-border); }
.grid-table tbody tr:hover { background: var(--c-info-bg); }
.grid-table .num { text-align: end; font-variant-numeric: tabular-nums; }

/* ═══════════════════════ الشارات وقوائم العمل ═══════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px var(--s-2); border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 700;
}
.badge--ok     { background: var(--c-ok-bg);     color: var(--c-ok); }
.badge--warn   { background: var(--c-warn-bg);   color: var(--c-warn); }
.badge--danger { background: var(--c-danger-bg); color: var(--c-danger); }
.badge--info   { background: var(--c-info-bg);   color: var(--c-action-dark); }
.badge--muted  { background: var(--c-bg);        color: var(--c-muted); }

.sla { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sla--ok { color: var(--c-ok); } .sla--soon { color: var(--c-warn); }
.sla--late { color: var(--c-danger); }

/* ═══════════════════════ الحالات الإلزامية ═══════════════════════ */
/* كل صفحة تُسلَّم بكل هذه الحالات لا بالحالة المثالية فقط — القسم 16.7 */
.state {
  text-align: center; padding: var(--s-8) var(--s-6); color: var(--c-muted);
}
.state__icon { font-size: 34px; margin-block-end: var(--s-3); opacity: .55; }
.state__title { font-size: 16px; font-weight: 700; color: var(--c-text);
                margin-block-end: var(--s-2); }
.state__hint { font-size: 13.5px; max-width: 52ch; margin-inline: auto; }
.state__actions { margin-block-start: var(--s-4); display: flex;
                  gap: var(--s-2); justify-content: center; }

.skeleton {
  background: linear-gradient(90deg, #EDF1F7 25%, #F6F8FC 37%, #EDF1F7 63%);
  background-size: 400% 100%; animation: sk 1.3s ease infinite;
  border-radius: var(--radius-sm); height: 14px;
}
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ═══════════════════════ اللوحة السياقية ═══════════════════════ */
.ctxpanel {
  position: fixed; inset-block: var(--topbar-h) 0; inset-inline-end: 0;
  width: var(--panel-w); background: var(--c-surface);
  border-inline-start: 1px solid var(--c-border);
  box-shadow: var(--shadow-2); overflow-y: auto; z-index: 35;
}

/* ═══════════════════════ الاستجابة ═══════════════════════ */
@media (max-width: 1100px) {
  :root { --nav-w: var(--nav-w-min); }
  .nav__item span, .nav__section { display: none; }
  .nav__item { justify-content: center; }
  .main { padding: var(--s-4); }
  .ctxpanel { width: 100%; }
  .col-3, .col-4 { grid-column: span 6; }
}
@media (max-width: 720px) {
  .main { padding: var(--s-3); margin-inline-start: 0; }
  .nav { transform: translateX(100%); transition: transform .18s; }
  .nav.is-open { transform: none; }
  .grid > [class^="col-"] { grid-column: span 12; }
  .cmdk kbd { display: none; }
  /* الجداول تتحول إلى بطاقات على الجوال — القسم 16.3 */
  .grid-table thead { display: none; }
  .grid-table tr { display: block; border: 1px solid var(--c-border);
                   border-radius: var(--radius); margin-block-end: var(--s-3);
                   padding: var(--s-2); background: var(--c-surface); }
  .grid-table td { display: flex; justify-content: space-between;
                   border: 0; padding: 6px var(--s-2); }
  .grid-table td::before { content: attr(data-label); font-weight: 700;
                           color: var(--c-muted); font-size: 12.5px; }
  /* إجراءات المندوب مثبتة أسفل الشاشة */
  .mobile-actions {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 45;
    background: var(--c-surface); border-block-start: 1px solid var(--c-border);
    padding: var(--s-2); display: flex; gap: var(--s-2);
    padding-block-end: calc(var(--s-2) + env(safe-area-inset-bottom));
  }
}

@media print {
  .topbar, .nav, .ctxhead__actions, .decisionbar__actions { display: none !important; }
  .main { margin: 0; padding: 0; }
  .card { break-inside: avoid; box-shadow: none; }
}

/* شارة بيئة المعاينة — لا يُخلط الرابط التجريبي بالإنتاج */
.env-ribbon {
  position: fixed; inset-block-end: 0; inset-inline-start: 0; z-index: 60;
  background: var(--c-warn); color: #241B04; font-size: 11.5px; font-weight: 700;
  padding: 3px var(--s-3); border-start-end-radius: var(--radius-sm);
}

/* ═══════════════════════════ WODS 2 — طبقة الواجهة التنفيذية ═══════════════════════════ */
:root {
  --c-navy: #071a2f;
  --c-navy-2: #0d2b49;
  --c-action: #2878ff;
  --c-action-dark: #1559d6;
  --c-accent: #14b8a6;
  --c-bg: #f3f6fb;
  --c-text: #132238;
  --c-muted: #64748b;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-1: 0 1px 2px rgba(10,28,50,.04), 0 8px 28px rgba(10,28,50,.05);
  --shadow-2: 0 18px 55px rgba(7,26,47,.18);
  --topbar-h: 74px;
  --nav-w: 272px;
}

body {
  background:
    radial-gradient(circle at 8% 0%, rgba(40,120,255,.06), transparent 28rem),
    var(--c-bg);
}

.topbar {
  background: linear-gradient(105deg, #06172a 0%, #0b2d4d 62%, #0b3657 100%);
  border-block-end: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 32px rgba(7,26,47,.18);
  padding-inline: 20px;
}
.topbar__brand {
  display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;
  font-weight:800;font-size:17px;line-height:1.15;white-space:nowrap;
}
.brand-mark {
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(145deg,#41d8c3,#237bff);color:#fff;font-size:20px;
  box-shadow:0 8px 24px rgba(35,123,255,.28),inset 0 1px rgba(255,255,255,.3);
}
.icon-btn {
  width:38px;height:38px;border:0;border-radius:11px;display:inline-grid;place-items:center;
  color:var(--c-text);background:#fff;cursor:pointer;text-decoration:none;
}
.icon-btn--light { color:#fff;background:rgba(255,255,255,.12); }
.mobile-nav-toggle { display:none;color:#fff;background:rgba(255,255,255,.12); }
.cmdk {
  margin-inline-start:14px;background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.15);
  min-height:42px;transition:.18s ease;
}
.cmdk:hover { background:rgba(255,255,255,.15);transform:translateY(-1px); }
.topbar__chip { color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.08); }

.nav {
  background:linear-gradient(180deg,#fff 0%,#fafdff 100%);
  border-inline-start:0;border-inline-end:1px solid var(--c-border);
  padding:14px 10px 24px;
  box-shadow:8px 0 30px rgba(11,43,73,.035);
}
.nav__intro {
  margin:0 5px 14px;padding:14px;border-radius:14px;color:#fff;
  background:linear-gradient(135deg,#0a2b49,#10537a);
  box-shadow:0 12px 30px rgba(13,43,73,.16);
}
.nav__intro strong { display:block;font-size:14px;margin-block-start:2px; }
.nav__eyebrow {font-size:10px;opacity:.72;letter-spacing:.5px;}
.nav__section { padding:12px 12px 5px;text-transform:none; }
.nav__item { border-inline-end:0;border-radius:11px;margin:2px 0;padding:10px 12px;transition:.15s ease; }
.nav__item:hover { background:#eef5ff;transform:translateX(-2px); }
.nav__item[aria-current="page"] {
  background:linear-gradient(90deg,#eaf3ff,#eefbf9);box-shadow:inset -3px 0 var(--c-action);
}

.main { padding:26px 28px 60px; }
.ctxhead {
  border:0;box-shadow:var(--shadow-1);padding:20px 22px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
}
.ctxhead__title { font-size:27px;letter-spacing:-.4px; }
.card { border-color:rgba(205,216,231,.82);overflow:hidden; }
.card__head { min-height:54px;background:linear-gradient(180deg,#fff,#fbfdff); }
.metric { min-height:138px;position:relative; }
.metric::after {
  content:"";position:absolute;inset-inline-end:16px;inset-block-start:16px;width:8px;height:8px;
  border-radius:50%;background:var(--c-action);box-shadow:0 0 0 6px rgba(40,120,255,.09);
}
.metric__value { font-size:30px; }
.decisionbar { box-shadow:0 8px 25px rgba(185,54,69,.08); }

.hero-panel {
  position:relative;overflow:hidden;border-radius:20px;padding:26px;color:#fff;
  background:linear-gradient(120deg,#071a2f,#0d3e62 58%,#0f6c78);
  box-shadow:0 18px 45px rgba(7,26,47,.2);margin-block-end:18px;
}
.hero-panel::before {content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  inset-inline-end:-120px;inset-block-start:-210px;background:rgba(65,216,195,.16);}
.hero-panel::after {content:"";position:absolute;width:260px;height:260px;border-radius:50%;
  inset-inline-start:30%;inset-block-end:-220px;background:rgba(40,120,255,.2);}
.hero-panel > * {position:relative;z-index:1;}
.hero-panel__eyebrow {font-size:12px;opacity:.72;font-weight:700;}
.hero-panel h1,.hero-panel h2 {margin:5px 0 4px;font-size:27px;}
.hero-panel p {margin:0;color:rgba(255,255,255,.76);max-width:72ch;}
.hero-panel__actions {display:flex;gap:8px;flex-wrap:wrap;margin-block-start:18px;}
.hero-panel .btn--ghost {background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff;}

.kpi-strip {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-block-end:18px;}
.kpi-tile {background:#fff;border:1px solid var(--c-border);border-radius:16px;padding:16px;box-shadow:var(--shadow-1);}
.kpi-tile__label {font-size:12px;color:var(--c-muted);font-weight:700;}
.kpi-tile__value {font-size:26px;font-weight:800;margin:3px 0;font-variant-numeric:tabular-nums;}
.kpi-tile__hint {font-size:12px;color:var(--c-muted);}
.kpi-tile--danger {border-block-start:3px solid var(--c-danger);}
.kpi-tile--warn {border-block-start:3px solid var(--c-warn);}
.kpi-tile--ok {border-block-start:3px solid var(--c-ok);}
.kpi-tile--info {border-block-start:3px solid var(--c-action);}

.section-title {display:flex;align-items:end;justify-content:space-between;gap:12px;margin:25px 2px 12px;}
.section-title h2 {margin:0;font-size:19px;}.section-title p{margin:0;color:var(--c-muted);font-size:13px;}
.workflow {display:flex;align-items:stretch;gap:8px;overflow-x:auto;padding-block-end:4px;}
.workflow__step {min-width:155px;flex:1;background:#fff;border:1px solid var(--c-border);border-radius:14px;padding:14px;}
.workflow__step b{display:block;font-size:13px}.workflow__step small{color:var(--c-muted)}
.workflow__step.is-risk{border-color:#edd9b0;background:#fffaf1}.workflow__step.is-blocked{border-color:#efc2c8;background:#fff7f8}
.progress {height:7px;border-radius:99px;background:#e8eef6;overflow:hidden;margin-block-start:9px;}
.progress > span {display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--c-action),var(--c-accent));}

.command-palette {position:fixed;inset:0;z-index:100;background:rgba(4,15,28,.56);backdrop-filter:blur(5px);padding:11vh 16px;}
.command-palette__dialog {max-width:680px;margin:auto;background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.28);overflow:hidden;}
.command-palette__search {display:flex;align-items:center;gap:12px;padding:16px 18px;border-block-end:1px solid var(--c-border);}
.command-palette__search input {flex:1;border:0;outline:0;font:inherit;font-size:16px;}
.command-palette__search kbd {font:inherit;font-size:11px;background:var(--c-bg);padding:3px 7px;border-radius:6px;}
.command-palette__results {max-height:430px;overflow:auto;padding:8px;}
.command-result {display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;color:inherit;text-decoration:none;}
.command-result:hover,.command-result.is-active {background:var(--c-info-bg);color:var(--c-action-dark);}
.command-result small {margin-inline-start:auto;color:var(--c-muted);}
.nav-scrim {display:none;}

@media (max-width:1100px) {
  .nav__intro {display:none}.topbar__user{display:none}.kpi-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:720px) {
  .mobile-nav-toggle{display:inline-grid}.topbar{gap:8px;padding-inline:10px}.topbar__brand small{display:none}
  .cmdk{flex:1;margin:0}.cmdk span{display:none}.topbar__chip{display:none}
  .nav{width:min(86vw,320px);transform:translateX(110%);z-index:80;inset-block-start:0;padding-block-start:80px;box-shadow:var(--shadow-2)}
  .nav.is-open{transform:none}.nav__item span,.nav__section{display:block}.nav__item{justify-content:flex-start}
  .nav-scrim.is-open{display:block;position:fixed;inset:0;background:rgba(7,26,47,.48);z-index:70}
  .main{padding:14px 12px 70px}.ctxhead{padding:16px}.ctxhead__title{font-size:22px}.ctxhead__actions{width:100%;margin:0}
  .hero-panel{padding:20px;border-radius:16px}.hero-panel h1,.hero-panel h2{font-size:23px}
  .kpi-strip{grid-template-columns:1fr 1fr;gap:8px}.kpi-tile{padding:13px}.kpi-tile__value{font-size:21px}
}