/* =====================================================================
   K697 — طبقة الميزات والتجميل العالمية (k697-polish.css)
   كل القواعد بـ :where() حيث يُمكن — تعارض صفر مع k697-system.css (تُحمّل بعده)
   حماية عامة: ممنوع letter-spacing على نص عربي
   آخر تحديث: 2026-10-26 (لوحة الأوامر + الوضع الداكن + المفاتيح)
   ===================================================================== */

/* 0) توكنز التجميل — أسماء جديدة كي لا تعارض توكنز الأنظمة */
:root {
  --k7p-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --k7p-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --k7p-ring: 0 0 0 3px color-mix(in srgb, var(--accent, #f0a030) 35%, transparent);
  --k7p-shadow-lift: 0 12px 32px -12px rgba(0, 0, 0, 0.28), 0 4px 12px -6px rgba(0, 0, 0, 0.18);
}

/* ------------------------------------------------------------------ */
/* 1) أساسيات قراءة — مُهيّأة للعربية RTL                                */
/* ------------------------------------------------------------------ */
:where(body) {
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
:where(h1, h2, h3, .page-title, .stat-value) { text-wrap: balance; }
:where(.stat-value, td.num, .num, .amount, .money) {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1;
}
:where(::selection) {
  background: color-mix(in srgb, var(--accent, #f0a030) 35%, transparent);
  color: inherit;
}
:where(*::-webkit-scrollbar) { width: 10px; height: 10px; }
:where(*::-webkit-scrollbar-thumb) {
  background: color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
:where(*::-webkit-scrollbar-thumb:hover) { background-color: color-mix(in srgb, currentColor 30%, transparent); }
:where(*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner) { background: transparent; }
html[lang="ar"] { font-synthesis: none; }
html[lang="ar"] .btn, html[lang="ar"] .chip { letter-spacing: 0; }

/* ------------------------------------------------------------------ */
/* 2) حالة التركيز                                                     */
/* ------------------------------------------------------------------ */
:where(a, button, .btn, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--k7p-ring);
  transition: box-shadow 0.15s var(--k7p-ease);
}

/* ------------------------------------------------------------------ */
/* 3) حركة دخول الصفحة — ترقيم هادئ                                     */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes k7p-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
  :where(.page-header, .stats-grid, main > .card) {
    animation: k7p-rise 0.45s var(--k7p-ease) both;
  }
  @media print {
    :where(*) { animation: none !important; transition: none !important; }
  }
}

/* ------------------------------------------------------------------ */
/* 4) كروت — عمق + رفع عند المرور                                       */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  :where(.card, .stat-card) {
    transition: transform 0.25s var(--k7p-ease), box-shadow 0.25s var(--k7p-ease), border-color 0.25s var(--k7p-ease);
  }
  :where(.card:hover, .stat-card:hover) {
    transform: translateY(-2px);
    box-shadow: var(--k7p-shadow-lift);
  }
}
:where(.stat-card) { isolation: isolate; }

/* ------------------------------------------------------------------ */
/* 5) أزرار                                                            */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  :where(.btn, button) {
    transition: transform 0.18s var(--k7p-ease-spring), box-shadow 0.18s var(--k7p-ease), filter 0.18s var(--k7p-ease);
  }
  :where(.btn:hover):not(:disabled) { filter: brightness(1.06); }
  :where(.btn-primary:hover):not(:disabled) {
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--primary, var(--accent, #f0a030)) 55%, transparent);
  }
  :where(.btn, button):active:not(:disabled) { transform: scale(0.97); }
}

/* ------------------------------------------------------------------ */
/* 6) حقول الإدخال + 7) جداول                                           */
/* ------------------------------------------------------------------ */
:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  transition: border-color 0.2s var(--k7p-ease), box-shadow 0.2s var(--k7p-ease), background 0.2s var(--k7p-ease);
}
:where(table tbody tr) { transition: background-color 0.15s var(--k7p-ease); }

/* 8) نوافذ منبثقة — خلفية ضبابية */
:where(.modal, dialog)::backdrop,
:where(.modal-overlay, .modal-backdrop) {
  backdrop-filter: blur(6px) saturate(1.2);
}

/* ==================================================================== */
/* 9) لوحة الأوامر (حصري) — Ctrl+K                                       */
/* ==================================================================== */
.k697-palette {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 9vh, 6rem) 1rem 1rem;
}
.k697-palette[hidden] { display: none; }
.k697-palette__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg-app, #f3efe6) 20%, rgba(10, 12, 10, 0.42));
  backdrop-filter: blur(7px) saturate(1.05);
  animation: k7p-rise 0.2s var(--k7p-ease) both;
}
.k697-palette__panel {
  position: relative;
  width: min(560px, 100%);
  border-radius: var(--radius-lg, 17px);
  background: color-mix(in srgb, var(--bg-card, #fffcf7) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #f0a030) 22%, var(--border, #e4dccb));
  box-shadow: var(--shadow-xl, 0 28px 72px rgba(26, 22, 16, 0.2)), var(--k7p-ring);
  overflow: hidden;
  animation: k7p-rise 0.25s var(--k7p-ease) both;
  direction: rtl;
}
.k697-palette__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--border, #e4dccb) 55%, transparent);
  color: var(--text-muted, #6b6254);
}
.k697-palette__head svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent, #f0a030); }
.k697-palette__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: 700 16px/1.4 var(--font, "Cairo", sans-serif);
  color: var(--text, #1a1610);
  box-shadow: none !important;
}
.k697-palette__input::placeholder { color: var(--text-faint, #948a79); font-weight: 600; }
.k697-palette__esc {
  font: 700 10.5px/1 var(--font-brand, monospace);
  color: var(--text-faint, #948a79);
  border: 1px solid color-mix(in srgb, var(--border, #e4dccb) 80%, transparent);
  border-radius: 6px;
  padding: 5px 7px;
}
.k697-palette__list { max-height: min(46vh, 380px); overflow: auto; padding: 8px; }
.k697-palette__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm, 9px);
  cursor: pointer;
  text-align: start;
  font: 700 14.5px/1.3 var(--font, "Cairo", sans-serif);
  color: var(--text, #1a1610);
  transition: background 0.12s var(--k7p-ease);
}
.k697-palette__item.is-active { background: color-mix(in srgb, var(--accent, #f0a030) 14%, transparent); }
.k697-palette__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k697-palette__hint {
  flex-shrink: 0;
  font: 600 10.5px/1 var(--font, sans-serif);
  color: var(--text-faint, #948a79);
  background: color-mix(in srgb, var(--bg-muted, #ebe4d6) 70%, transparent);
  padding: 4px 8px;
  border-radius: 99px;
}
.k697-palette__empty {
  padding: 22px 10px;
  text-align: center;
  color: var(--text-faint, #948a79);
  font: 600 13px/1.5 var(--font, sans-serif);
}
.k697-palette__foot {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  padding: 9px 14px;
  border-top: 1px solid color-mix(in srgb, var(--border, #e4dccb) 45%, transparent);
  font: 600 10.5px/1 var(--font, sans-serif);
  color: var(--text-faint, #948a79);
}
.k697-palette__foot kbd {
  font: 700 10px/1 var(--font-brand, monospace);
  border: 1px solid var(--border, #e4dccb);
  border-radius: 4px;
  padding: 2px 4px;
  margin-inline-end: 2px;
  background: color-mix(in srgb, var(--bg-muted, #ebe4d6) 45%, transparent);
}
.k697-palette-btn {
  position: fixed;
  inset-inline-start: 14px;
  bottom: 86px;
  z-index: 8000;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent, #f0a030) 40%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-card, #fffcf7) 92%, transparent);
  color: var(--accent, #f0a030);
  box-shadow: var(--shadow, 0 8px 28px rgba(26, 22, 16, 0.08));
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.2s var(--k7p-ease), box-shadow 0.2s var(--k7p-ease);
}
.k697-palette-btn svg { width: 21px; height: 21px; }
.k697-palette-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg, 0 16px 48px rgba(26, 22, 16, 0.14)); }
.k697-palette-btn:active { transform: scale(0.94); }
/* الموبايل: الزر المفرد يُلغى تمامًا — أمره انتقل إلى شريط الإجراءات الموحّد (قسم 26)
   كان يقف فوق زر «البوابة» في الشريط بالضبط: تداخل مرئي + هدف لمس مزدوج */
@media (max-width: 899px) {
  .k697-palette-btn { display: none !important; }
}
@media print { .k697-palette, .k697-palette-btn, .k697-theme-btn { display: none !important; } }

/* ==================================================================== */
/* 10) الوضع الداكن الحقيقي — إعادة رسم التوكنز فقط (نفس البُنية)         */
/* تفعيله: html[data-k697-theme="dark"] من لوحة الأوامر أو المفتاح         */
/* ==================================================================== */
html[data-k697-theme="dark"] body.theme-mess {
  --bg-app: #0e1512;
  --bg-app-tint: #0b110e;
  --bg-card: #16201b;
  --bg-muted: #101814;
  --bg-inset: #0f1714;
  --text: #d8e6de;
  --text-muted: #93a89d;
  --text-faint: #67786f;
  --border: #233129;
  --border-strong: #2e4037;
  --success: #34d399;
  --success-bg: #0f2a1e;
  --danger: #f87171;
  --danger-bg: #2a1416;
  --warning: #fbbf24;
  --warning-bg: #2b1f0e;
  --info: #38bdf8;
  --info-bg: #0d1f2b;
  --violet: #a78bfa;
  --violet-bg: #1e1633;
  --grad-fade: linear-gradient(180deg, var(--bg-card) 0%, color-mix(in srgb, var(--accent) 9%, var(--bg-card)) 100%);
  color-scheme: dark;
}
html[data-k697-theme="dark"] body.theme-canteen {
  --bg-app: #14110a;
  --bg-app-tint: #100e08;
  --bg-card: #1f1a0e;
  --bg-muted: #171307;
  --bg-inset: #1a160b;
  --text: #ece0c8;
  --text-muted: #a89a7d;
  --text-faint: #7a6f58;
  --border: #2e2717;
  --border-strong: #3d3520;
  --success: #34d399;
  --success-bg: #10261a;
  --danger: #f87171;
  --danger-bg: #2a1416;
  --warning: #fbbf24;
  --warning-bg: #2b1f0e;
  --info: #38bdf8;
  --info-bg: #0d1f2b;
  --violet: #a78bfa;
  --violet-bg: #1e1633;
  --grad-fade: linear-gradient(180deg, var(--bg-card) 0%, color-mix(in srgb, var(--accent) 9%, var(--bg-card)) 100%);
  color-scheme: dark;
}
html[data-k697-theme="dark"] body.theme-battalion {
  --bg-app: #0c1218;
  --bg-app-tint: #090e13;
  --bg-card: #131c24;
  --bg-muted: #0f1720;
  --bg-inset: #101821;
  --text: #d4dfe9;
  --text-muted: #8fa3b4;
  --text-faint: #6a7e91;
  --border: #1e2c38;
  --border-strong: #293b4b;
  --success: #34d399;
  --success-bg: #0f2a1e;
  --danger: #f87171;
  --danger-bg: #2a1416;
  --warning: #fbbf24;
  --warning-bg: #2b1f0e;
  --info: #38bdf8;
  --info-bg: #0d1f2b;
  --violet: #a78bfa;
  --violet-bg: #1e1633;
  --grad-fade: linear-gradient(180deg, var(--bg-card) 0%, color-mix(in srgb, var(--accent) 9%, var(--bg-card)) 100%);
  color-scheme: dark;
}
html[data-k697-theme="dark"] body.theme-mess,
html[data-k697-theme="dark"] body.theme-canteen,
html[data-k697-theme="dark"] body.theme-battalion {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}

/* ==================================================================== */
/* 11) الأنظمة الداخلية — topbar زجاجي، خلايا التقويم، شريط الهاتف        */
/* ==================================================================== */
:where(.topbar) {
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--bg-app, #f3efe6) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--border, #e4dccb) 60%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border, #e4dccb) 45%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  :where(.cal-cell) {
    transition: transform 0.18s var(--k7p-ease), box-shadow 0.18s var(--k7p-ease), background 0.18s var(--k7p-ease);
  }
  :where(.cal-cell:not(.is-active):hover) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm, 0 2px 10px rgba(26, 22, 16, 0.06));
  }
}
:where(.cal-cell.is-today) {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent, #f0a030) 45%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  :where(.phone-nav-item) { transition: transform 0.2s var(--k7p-ease), opacity 0.2s var(--k7p-ease); }
  :where(.phone-nav-item.active) { transform: translateY(-2px); }
  :where(.phone-nav-item):active { transform: scale(0.94); }
}
:where(.phone-nav) {
  background: color-mix(in srgb, var(--bg-card, #fffcf7) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid color-mix(in srgb, var(--border, #e4dccb) 50%, transparent);
  padding-block-end: env(safe-area-inset-bottom, 0);
}
:where(.tab) {
  transition: color 0.2s var(--k7p-ease), border-color 0.2s var(--k7p-ease), background 0.2s var(--k7p-ease);
}
@media (prefers-reduced-motion: no-preference) {
  :where(.sidebar-nav .nav-link, .hub-sidebar-portal) {
    transition: transform 0.2s var(--k7p-ease), background 0.2s var(--k7p-ease), border-color 0.2s var(--k7p-ease);
  }
  :where(.sidebar-nav .nav-link:not(.active):hover) { transform: translateX(-3px); }
}

/* ==================================================================== */
/* 12) تنبيهات وأزرار الملاحة — أهدأ وأدق                                */
/* ==================================================================== */
:where(.alert.alert-info) {
  font-size: var(--fs-xs, 11.5px);
  padding: 10px 14px;
  border-radius: var(--radius-sm, 9px);
  border: 1px dashed color-mix(in srgb, var(--info, #0284c7) 30%, transparent);
  background: color-mix(in srgb, var(--info-bg, #eff6ff) 55%, transparent);
  color: color-mix(in srgb, var(--info, #0284c7) 70%, var(--text, #1a1610));
}
:where(.alert a) { text-decoration-thickness: 1px; text-underline-offset: 3px; }
:where(.btn.btn-sm.btn-muted) {
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(26, 22, 16, 0.04));
  font-weight: 800;
}
@media (prefers-reduced-motion: no-preference) {
  :where(.btn.btn-sm.btn-muted:hover) { transform: translateY(-1px); }
}

/* 13) هايفلاين موحّد للبطاقات */
:where(.card, .stat-card, .console-sys) {
  border: 1px solid color-mix(in srgb, var(--border, #e4dccb) 60%, transparent);
}
:where(.stat-foot, .sys-stat em) { font-variant-numeric: tabular-nums; }

/* ==================================================================== */
/* 14) المفاتيح والأدوات الصغيرة                                          */
/* ==================================================================== */
.k7p-fade-in { animation: k7p-rise 0.4s var(--k7p-ease) both; }
.k7p-stagger > *:nth-child(1) { animation-delay: 0.02s; }
.k7p-stagger > *:nth-child(2) { animation-delay: 0.06s; }
.k7p-stagger > *:nth-child(3) { animation-delay: 0.10s; }
.k7p-stagger > *:nth-child(4) { animation-delay: 0.14s; }
.k7p-stagger > *:nth-child(5) { animation-delay: 0.18s; }
.k7p-stagger > *:nth-child(6) { animation-delay: 0.22s; }
@media (prefers-reduced-motion: reduce) {
  .k7p-fade-in, .k7p-stagger > * { animation: none !important; }
}

/* مفتاح الوضع الداكن — زر يُركّب في التوب بار أو الشريط الجانبي */
.k697-theme-btn {
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0 !important;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s var(--k7p-ease), color 0.2s var(--k7p-ease),
    border-color 0.2s var(--k7p-ease), transform 0.2s var(--k7p-ease);
}
.k697-theme-btn svg { width: 18px; height: 18px; }
.k697-theme-btn:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  transform: translateY(-1px);
}
.k697-theme-btn:active { transform: scale(0.94); }
html[data-k697-theme="dark"] .k697-theme-btn .k697-theme-btn__moon { display: none; }
html:not([data-k697-theme="dark"]) .k697-theme-btn .k697-theme-btn__sun { display: none; }

/* ==================================================================== */
/* 15) إشعارات Toast (حصري) — host أسفل يمين + رسائل ملونة               */
/* ==================================================================== */
.k697-toast-host {
  position: fixed;
  bottom: 18px;
  inset-inline-end: 18px;
  z-index: 9500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: min(340px, calc(100vw - 32px));
}
.k697-toast {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border-radius: var(--radius-md, 12px);
  background: color-mix(in srgb, var(--bg-card, #fffcf7) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--border, #e4dccb) 70%, transparent);
  box-shadow: var(--shadow-lg, 0 16px 48px rgba(26, 22, 16, 0.14)), var(--k7p-ring);
  font: 700 13px/1.45 var(--font, "Cairo", sans-serif);
  color: var(--text, #1a1610);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.28s var(--k7p-ease), transform 0.28s var(--k7p-ease);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.k697-toast.is-in { opacity: 1; transform: none; }
.k697-toast.is-out { opacity: 0; transform: translateY(8px) scale(0.97); }
.k697-toast__dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--info, #0284c7);
}
.k697-toast--success .k697-toast__dot { background: var(--success, #10b981); }
.k697-toast--danger  .k697-toast__dot { background: var(--danger, #ef4444); }
.k697-toast--success { border-color: color-mix(in srgb, var(--success, #10b981) 35%, transparent); }
.k697-toast--danger  { border-color: color-mix(in srgb, var(--danger, #ef4444) 35%, transparent); }
.k697-toast__msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
  .k697-toast-host { bottom: 78px; inset-inline-end: 12px; }
}

/* ==================================================================== */
/* 16) نجمة تثبيت الصفحة — تظهر في التوب بار قرب مفتاح الداكن            */
/* ==================================================================== */
.k697-pin-btn {
  width: 34px;
  height: 34px;
  padding: 0 !important;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s var(--k7p-ease), color 0.2s var(--k7p-ease),
    border-color 0.2s var(--k7p-ease), transform 0.2s var(--k7p-ease);
}
.k697-pin-btn svg { width: 17px; height: 17px; }
.k697-pin-btn:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  transform: translateY(-1px);
}
.k697-pin-btn:active { transform: scale(0.94); }
.k697-pin-btn.is-pinned { color: var(--accent, #f0a030); }
.k697-pin-btn.is-pinned svg { fill: currentColor; }

/* ==================================================================== */
/* 17) وضع الطباعة النظيف — فواتير وتقارير بلا واجهة تطبيق              */
/* ==================================================================== */
@media print {
  :where(.sidebar, .topbar, .phone-nav, .hub-nav-top, .hub-back,
         .sidebar-overlay, .k697-palette, .k697-palette-btn,
         .k697-theme-btn, .k697-pin-btn, .k697-toast-host,
         .modal-actions, .actions-cell, .pager) {
    display: none !important;
  }
  :where(body) { background: #fff !important; color: #111 !important; }
  :where(.card, .stat-card, .console-sys) {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }
  :where(table tbody tr) { break-inside: avoid; }
  :where(a) { text-decoration: none !important; color: inherit !important; }
}

/* ==================================================================== */
/* 18) النبض الأسبوعي الحي — رسم canvas تفاعلي داخل الـ dashboard        */
/* ==================================================================== */
.k697-pulse-card { overflow: hidden; }
.k697-pulse-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 10.5px/1 var(--font, sans-serif);
  color: var(--success, #10b981);
}
.k697-pulse-live__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success, #10b981);
  animation: k697-pulse-dot 2.2s ease-out infinite;
}
.k697-pulse-legend {
  display: flex;
  gap: 14px;
  padding: 0 4px 8px;
  font: 700 11.5px/1 var(--font, sans-serif);
  color: var(--text-muted, #6b6254);
}
.k697-pulse-legend__item { position: relative; padding-inline-start: 14px; }
.k697-pulse-legend__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--accent, #f0a030);
}
.k697-pulse-legend__item--b::before { background: var(--info, #0284c7); }
.k697-pulse-wrap {
  position: relative;
  width: 100%;
  min-height: 170px;
}
.k697-pulse-canvas {
  display: block;
  width: 100%;
  touch-action: pan-y;
  cursor: crosshair;
}
.k697-pulse-tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  min-width: 130px;
  padding: 8px 11px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-card, #fffcf7) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--border, #e4dccb) 80%, transparent);
  box-shadow: var(--shadow-lg, 0 16px 48px rgba(26, 22, 16, 0.14));
  font: 600 11px/1.7 var(--font, sans-serif);
  color: var(--text, #1a1610);
  direction: rtl;
}
.k697-pulse-tip strong { display: block; font-size: 11.5px; margin-bottom: 3px; color: var(--text, #1a1610); }
.k697-pulse-tip em { display: block; font-style: normal; color: var(--text-muted, #6b6254); font-weight: 600; }
.k697-pulse-tip em b { color: var(--text, #1a1610); font-weight: 800; }
.k697-pulse-tip[hidden] { display: none; }
@media print { .k697-pulse-tip { display: none !important; } }

/* ==================================================================== */
/* 19) «يحتاج انتباهك» — تنبيهات مجمّعة داخل dashboard (حصري)            */
/* ==================================================================== */
.k697-alerts-card { display: grid; gap: 8px; }
.k697-alert-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: var(--radius-md, 12px);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--border, #e4dccb) 75%, transparent);
  background: color-mix(in srgb, var(--bg-card, #fffcf7) 60%, transparent);
  transition: transform 0.18s var(--k7p-ease), border-color 0.18s var(--k7p-ease),
    box-shadow 0.18s var(--k7p-ease);
}
@media (prefers-reduced-motion: no-preference) {
  .k697-alert-row:hover { transform: translateY(-2px); }
}
.k697-alert-row:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(26, 22, 16, 0.08));
}
.k697-alert-row__title {
  font: 800 13px/1.4 var(--font, "Cairo", sans-serif);
  color: var(--text, #1a1610);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.k697-alert-row__note {
  flex: 1;
  min-width: 0;
  font: 600 11px/1.4 var(--font, sans-serif);
  font-style: normal;
  color: var(--text-muted, #6b6254);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.k697-alert-row__count {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  padding: 3px 8px;
  border-radius: 99px;
  font: 800 12.5px/1 var(--font, sans-serif);
}
.k697-alert-row--bad .k697-alert-row__count {
  background: color-mix(in srgb, var(--danger, #ef4444) 15%, transparent);
  color: var(--danger, #ef4444);
}
.k697-alert-row--warn .k697-alert-row__count {
  background: color-mix(in srgb, var(--warning, #f59e0b) 16%, transparent);
  color: color-mix(in srgb, var(--warning, #f59e0b) 72%, var(--text, #1a1610));
}
.k697-alert-row--info .k697-alert-row__count {
  background: color-mix(in srgb, var(--info, #0284c7) 12%, transparent);
  color: var(--info, #0284c7);
}
.k697-alert-row--bad { border-inline-start: 3px solid color-mix(in srgb, var(--danger, #ef4444) 55%, transparent); }
.k697-alert-row--warn { border-inline-start: 3px solid color-mix(in srgb, var(--warning, #f59e0b) 50%, transparent); }
.k697-alert-row--info { border-inline-start: 3px solid color-mix(in srgb, var(--info, #0284c7) 45%, transparent); }
@media print { .k697-alerts-card { display: none !important; } }

/* ==================================================================== */
/* 20) كثافة العرض — «مريح / مضغوط» يتذكرها الجهاز (حصري)                */
/* html[data-k697-density="compact"] يقلّص هوامش الكروت والجداول والإحصاءات */
/* ==================================================================== */
html[data-k697-density="compact"] body {
  --space-md: 10px;
  --radius-md: 10px;
}
@media (min-width: 721px) {
  html[data-k697-density="compact"] body :where(.card) { padding: 10px 11px; }
  html[data-k697-density="compact"] body :where(.data-table td, .data-table th) { padding-block: 6px; }
  html[data-k697-density="compact"] body :where(.stats-grid) { gap: 10px; }
  html[data-k697-density="compact"] body :where(.page-header) { margin-block-end: 12px; }
}
/* زر الكثافة — على تصميم مفتاح الداكن نفسه */
.k697-density-btn { position: relative; }
.k697-density-btn svg { width: 18px; height: 18px; }
.k697-density-btn:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  transform: translateY(-1px);
}

/* ==================================================================== */
/* 21) ترويسة طباعة — تظهر فقط على الورق (حصري)                          */
/* ==================================================================== */
.k697-print-head { display: none; }
@media print {
  .k697-print-head {
    display: block;
    text-align: center;
    padding: 0 0 14px;
    margin-block-end: 14px;
    border-bottom: 2px solid #333;
  }
  .k697-print-head b { font-size: 17px; font-weight: 900; display: block; }
  .k697-print-head span {
    display: block;
    font-size: 10.5px;
    color: #555;
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
  }
  @page { margin: 14mm 12mm; }
}

/* ==================================================================== */
/* 22) الداكن — تلقيم الألوان الصلبة المتكررة (inline styles وقوالب)      */
/* مرشحات [style*="#hex"] تعمل على inline styles؛ تعويض slate→توكنز      */
/* ==================================================================== */
html[data-k697-theme="dark"] {
  color-scheme: dark;
}
/* خلفيات فاتحة معروفة → خلفيات داكنة مقاسية */
html[data-k697-theme="dark"] body [style*="background:#f8fafc"],
html[data-k697-theme="dark"] body [style*="background: #f8fafc"],
html[data-k697-theme="dark"] body [style*="background:#f1f5f9"],
html[data-k697-theme="dark"] body [style*="background: #f1f5f9"] {
  background: var(--bg-muted) !important;
}
html[data-k697-theme="dark"] body [style*="background:#fff7ed"],
html[data-k697-theme="dark"] body [style*="background: #fff7ed"],
html[data-k697-theme="dark"] body [style*="background:#fef3c7"] {
  background: var(--warning-bg) !important;
}
html[data-k697-theme="dark"] body [style*="background:#dcfce7"],
html[data-k697-theme="dark"] body [style*="background: #dcfce7"],
html[data-k697-theme="dark"] body [style*="background:#f0fdf4"],
html[data-k697-theme="dark"] body [style*="background: #f0fdf4"],
html[data-k697-theme="dark"] body [style*="background:#ecfdf5"],
html[data-k697-theme="dark"] body [style*="background: #ecfdf5"] {
  background: var(--success-bg) !important;
}
html[data-k697-theme="dark"] body [style*="background:#eef6ff"],
html[data-k697-theme="dark"] body [style*="background: #eef6ff"],
html[data-k697-theme="dark"] body [style*="background:#eff6ff"],
html[data-k697-theme="dark"] body [style*="background: #eff6ff"],
html[data-k697-theme="dark"] body [style*="background:#dbeafe"],
html[data-k697-theme="dark"] body [style*="background: #dbeafe"] {
  background: var(--info-bg) !important;
}
html[data-k697-theme="dark"] body [style*="background:#fee2e2"] {
  background: var(--danger-bg) !important;
}
/* نصوص رمادية/صارمة → فاتحة على الداكن */
html[data-k697-theme="dark"] body [style*="color:#475569"],
html[data-k697-theme="dark"] body [style*="color: #475569"],
html[data-k697-theme="dark"] body [style*="color:#64748b"],
html[data-k697-theme="dark"] body [style*="color: #64748b"],
html[data-k697-theme="dark"] body [style*="color:#94a3b8"],
html[data-k697-theme="dark"] body [style*="color: #94a3b8"] {
  color: var(--text-muted) !important;
}
html[data-k697-theme="dark"] body [style*="color:#0f172a"] {
  color: var(--text) !important;
}
html[data-k697-theme="dark"] body [style*="color:#166534"],
html[data-k697-theme="dark"] body [style*="color:#15803d"],
html[data-k697-theme="dark"] body [style*="color:#14532d"] {
  color: var(--success) !important;
}
html[data-k697-theme="dark"] body [style*="color:#991b1b"],
html[data-k697-theme="dark"] body [style*="color:#dc2626"] {
  color: var(--danger) !important;
}
html[data-k697-theme="dark"] body [style*="color:#92400e"],
html[data-k697-theme="dark"] body [style*="color:#9a3412"] {
  color: var(--warning) !important;
}
html[data-k697-theme="dark"] body [style*="color:#1e3a8a"],
html[data-k697-theme="dark"] body [style*="color:#1e40af"],
html[data-k697-theme="dark"] body [style*="color:#1d4ed8"],
html[data-k697-theme="dark"] body [style*="color:#3730a3"],
html[data-k697-theme="dark"] body [style*="color:#0284c7"] {
  color: var(--info) !important;
}
/* حدود فاتحة محسوبة inline */
html[data-k697-theme="dark"] body [style*="border-color:#86efac"],
html[data-k697-theme="dark"] body [style*="border-color:#bbf7d0"],
html[data-k697-theme="dark"] body [style*="border-color:#d1e7dd"],
html[data-k697-theme="dark"] body [style*="border-color:#e2e8f0"],
html[data-k697-theme="dark"] body [style*="border-color:#cbd5e1"],
html[data-k697-theme="dark"] body [style*="border-color:#e5e7eb"] {
  border-color: color-mix(in srgb, var(--border-strong) 70%, transparent) !important;
}
/* للقواعد الداخلية(<style>) بالصفحات: منع الخلفيات البيضاء في صفحات معروفة */
html[data-k697-theme="dark"] body .prod-opt,
html[data-k697-theme="dark"] body .prod-add-opt { background: var(--bg-card) !important; color: var(--text) !important; }
html[data-k697-theme="dark"] body .prod-opt.active,
html[data-k697-theme="dark"] body .prod-opt:hover,
html[data-k697-theme="dark"] body .prod-add-opt:hover { background: var(--info-bg) !important; }

/* ==================================================================== */
/* 23) كارت «آخر الحركة» — كونسول (حصري)                                */
/* ==================================================================== */
.k697-feed-card { padding-block: 14px; }
.k697-feed-card .card-header-row { margin-block-end: 10px; }
.k697-feed-card .card-header-row a { color: var(--accent, #f0a030); font-weight: 800; text-decoration: none; }
.k697-feed-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px dashed color-mix(in srgb, var(--border, #e4dccb) 55%, transparent);
  font: 600 12.5px/1.5 var(--font, "Cairo", sans-serif);
}
.k697-feed-row:last-child { border-bottom: 0; }
.k697-feed-row__sys {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 99px;
  font: 800 10.5px/1 var(--font, sans-serif);
  background: color-mix(in srgb, var(--accent, #f0a030) 13%, transparent);
  color: color-mix(in srgb, var(--accent, #f0a030) 80%, var(--text, #1a1610));
}
.k697-feed-row__txt {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-muted, #6b6254);
}
.k697-feed-row__txt b { color: var(--text, #1a1610); font-weight: 800; }
.k697-feed-row__txt em { font-style: normal; color: var(--text-faint, #948a79); font-size: 11px; }
.k697-feed-row__t {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text-faint, #948a79);
  font-size: 11px;
}
.k697-feed-row--warn .k697-feed-row__txt,
.k697-feed-row--warn b { color: color-mix(in srgb, var(--warning, #f59e0b) 75%, var(--text, #1a1610)); }
.k697-feed-row--ok .k697-feed-row__txt { color: color-mix(in srgb, var(--success, #10b981) 70%, var(--text, #1a1610)); }
@media print { .k697-feed-card { display: none !important; } }

/* ==================================================================== */
/* 24) ⏰ جرس التنبيهات الذكي في التوب بار (حصري)                        */
/* ==================================================================== */
.k697-bell { position: relative; margin-inline-start: 2px; }
.k697-bell__btn {
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0 !important;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s var(--k7p-ease), border-color 0.2s var(--k7p-ease), transform 0.2s var(--k7p-ease);
}
.k697-bell__btn svg { width: 19px; height: 19px; }
.k697-bell__btn:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  transform: translateY(-1px);
}
.k697-bell__count {
  position: absolute;
  top: 2px;
  inset-inline-end: 1px;
  min-width: 16px;
  padding: 2px 4px;
  border-radius: 99px;
  background: var(--danger, #ef4444);
  color: #fff;
  font: 800 9.5px/1 var(--font, sans-serif);
  font-style: normal;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg-app, #f3efe6);
}
.k697-bell__pop {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 700;
  width: min(280px, calc(100vw - 40px));
  padding: 8px;
  border-radius: var(--radius-md, 12px);
  background: color-mix(in srgb, var(--bg-card, #fffcf7) 97%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #f0a030) 25%, var(--border, #e4dccb));
  box-shadow: var(--shadow-xl, 0 28px 72px rgba(26, 22, 16, 0.2)), var(--k7p-ring);
  animation: k7p-rise 0.18s var(--k7p-ease) both;
}
@media (prefers-reduced-motion: reduce) { .k697-bell__pop { animation: none; } }
.k697-bell__head {
  padding: 4px 6px 9px;
  font: 800 11.5px/1 var(--font, sans-serif);
  color: var(--text-muted, #6b6254);
  border-bottom: 1px dashed color-mix(in srgb, var(--border, #e4dccb) 60%, transparent);
  margin-bottom: 6px;
}
.k697-bell__row {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border-radius: var(--radius-sm, 9px);
  text-decoration: none;
  transition: background 0.15s var(--k7p-ease);
}
.k697-bell__row:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.k697-bell__row strong { font: 800 12.5px/1.4 var(--font, sans-serif); color: var(--text, #1a1610); }
.k697-bell__row em { font: 600 11px/1.5 var(--font, sans-serif); font-style: normal; color: var(--text-muted, #6b6254); }
.k697-bell__row--bad { border-inline-start: 3px solid color-mix(in srgb, var(--danger, #ef4444) 60%, transparent); }
.k697-bell__row--warn { border-inline-start: 3px solid color-mix(in srgb, var(--warning, #f59e0b) 55%, transparent); }
.k697-bell__row--info { border-inline-start: 3px solid color-mix(in srgb, var(--info, #0284c7) 50%, transparent); }
@media print { .k697-bell { display: none !important; } }

/* الجرس على الموبايل — لا يتشوه بالضغط، والمنسدلة تنزل أسفلًا (نمط sheet) */
@media (max-width: 768px) {
  .k697-bell { flex-shrink: 0; margin-inline-start: 2px; }
  .k697-bell__btn { width: 40px; height: 40px; border-radius: 12px; }
  .k697-bell__btn svg { width: 21px; height: 21px; }
  .k697-bell__count { top: -2px; inset-inline-end: -3px; min-width: 18px; padding: 2.5px 4px; box-shadow: none; border: 1.5px solid var(--bg-card, #fffcf7); }
  .k697-bell__pop {
    position: fixed;
    /* التوب بار لديه backdrop-filter فيصبح حاوية تموضع للـfixed:
       bottom:132px كان يقاس من التوب بار → اللوحة تطير فوق الشاشة (W13 حيًا: y=-171).
       التثبيت بالـtop يصحح الموضع سواء كانت الحاوية التوب بار أو الـviewport. */
    top: 64px;
    bottom: auto;
    inset-inline: 10px;
    width: auto;
    z-index: 870;
    /* الأنيميشن كان يترك opacity=0 عالقًا على الموبايل — بلا أنيميشن = مرئية دائمًا */
    animation: none !important;
    opacity: 1;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(26, 22, 16, 0.25), var(--k7p-ring);
  }
  /* منع صراع المساحة: القطع النصي في عناصر الشريط بدل تشويه الجرس */
  :where(.hub-crumb) { flex: 1 1 auto; min-width: 0; overflow: hidden; }
  :where(.hub-crumb__here) {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
  }
}
@media (min-width: 769px) { .k697-bell { flex-shrink: 0; } }

/* ==================================================================== */
/* 25) رأس الجداول الثابت (sticky) على الشاشات العريضة — قراءة أسهل       */
/* عكس overflow فقط حيث لا تضيق، فيبقى العنوان ظاهرًا مع التمرير الطويل   */
/* ==================================================================== */
@media (min-width: 900px) {
  :where(.data-table-wrap) { overflow-x: visible; }
  :where(.data-table thead th, .data-table th) {
    position: sticky;
    top: 50px; /* أعلى التوب بار الزجاجي */
    z-index: 40;
    background: var(--bg-card, #fffcf7);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--border, #e4dccb) 70%, transparent);
  }
}

/* ==================================================================== */
/* 26) موبايل أولاً — شريط تنقل سفلي + شريط تقدم + أهداف لمس (حصري)      */
/* ==================================================================== */
:root { --k697-mobbar-h: 62px; }

/* شريط تقدم القراءة — أعلى الصفحة كله */
.k697-readbar {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: 3px;
  z-index: 900;
  opacity: 0;
  transition: opacity 0.25s var(--k7p-ease);
  pointer-events: none;
}
.k697-readbar.is-active { opacity: 1; }
.k697-readbar::after {
  content: "";
  display: block;
  height: 100%;
  width: var(--k697-read, 0%);
  background: linear-gradient(to left, var(--accent, #f0a030), color-mix(in srgb, var(--accent, #f0a030) 55%, var(--info, #0284c7)));
  border-start-start-radius: 99px;
  border-start-end-radius: 99px;
}

/* ==================================================================== */
/* شريط الإجراءات العائم (W16 حصري) — «جزيرة» أفقية واحدة فوق شريط التنقل */
/* لم يعد عمودًا رابعًا يغطي المحتوى: صف واحد، مقاسات موحّدة، واختفاء ذكي */
/* ==================================================================== */
.k697-dock {
  position: fixed;
  inset-inline-start: 12px;
  bottom: 87px; /* احتياط: متصفحات لا تدعم env() (متصفحات جوال قديمة) */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 87px);
  z-index: 860;
  display: none;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border-radius: 999px;
  background: var(--bg-card, #fffcf7);
  border: 1px solid color-mix(in srgb, var(--border, #e4dccb) 78%, transparent);
  box-shadow:
    0 16px 36px -16px rgba(26, 22, 16, 0.42),
    0 2px 8px rgba(26, 22, 16, 0.06);
  transition: transform 0.28s var(--k7p-ease), opacity 0.22s var(--k7p-ease);
}
@media (max-width: 899px) {
  .k697-dock { display: flex; }
}
/* عند النزول للأسفل تنسحب بهدوء (لا تحجب صفوف الجدول) وتعود مع الرجوع */
.k697-dock.is-tucked {
  opacity: 0;
  transform: translateY(16px) scale(0.94);
  pointer-events: none;
}
.k697-dock__btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-muted, #6b6254);
  background: transparent;
  border: 0;
  box-shadow: none;
  transition: background 0.18s var(--k7p-ease), color 0.18s var(--k7p-ease),
    transform 0.18s var(--k7p-ease), width 0.22s var(--k7p-ease), opacity 0.18s var(--k7p-ease);
}
.k697-dock__btn svg { width: 19px; height: 19px; }
.k697-dock__btn:active { transform: scale(0.88); }
.k697-dock__btn:hover,
.k697-dock__btn:focus-visible {
  background: color-mix(in srgb, var(--accent, #f0a030) 13%, transparent);
  color: var(--accent, #f0a030);
  outline: none;
}
.k697-dock__btn[data-act="dark"] { color: var(--accent, #f0a030); }
/* زر «البوابة» — الفعل الأساسي: كبسولة ذهبية مميزة داخل الجزيرة */
.k697-dock__btn--gold {
  position: relative;
  margin-inline-start: 4px;
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--accent, #f0a030) 94%, #fff),
    color-mix(in srgb, var(--accent, #f0a030) 74%, #1a1610));
  color: #fff;
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--accent, #f0a030) 80%, transparent);
}
/* فاصل رفيع يفصل الفعل الأساسي عن أدوات العرض */
.k697-dock__btn--gold::before {
  content: "";
  position: absolute;
  inset-inline-start: -5px;
  top: 9px;
  bottom: 9px;
  width: 1px;
  background: color-mix(in srgb, var(--border, #e4dccb) 85%, transparent);
  pointer-events: none;
}
.k697-dock__btn--gold:hover,
.k697-dock__btn--gold:focus-visible { color: #fff; filter: brightness(1.05); }
/* زر «الأعلى» يتفتّح من عرض صفر بعد تمرير 300px — بلا قفزة في الجزيرة */
.k697-dock__btn[data-act="top"] {
  width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
.k697-dock__btn[data-act="top"].is-on {
  width: 40px;
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 900px) {
  .k697-dock { display: none !important; }
}
@media print {
  .k697-dock, .k697-readbar { display: none !important; }
}

/* أهداف لمس أكبر على الجوال (لن يكسر تصميم سطح المكتب) */
@media (max-width: 768px) {
  :where(.btn, button, .pagination a, .pagination button, .tabs__link) {
    min-height: 42px;
  }
}
/* إدخالات النموذج — تكبير مريح دون سماكة زائدة */
@media (max-width: 768px) {
  :where(input[type=text], input[type=number], input[type=date], select, textarea) {
    font-size: 16px; /* يمنع زوم iOS التلقائي */
  }
}
/* تمريض الجداول والإدخال على الشاشات الصغيرة */
@media (max-width: 899px) {
  :where(.data-table-wrap) {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  :where(.data-table td, .data-table th) { padding-block: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .k697-dock__btn, .k697-readbar { transition: none !important; }
}

/* ==================================================================== */
/* 27) نافذة إجراءات الصف (Bottom Sheet) + شارة الاتصال (حصري)           */
/* ==================================================================== */
.k697-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 880;
  background: rgba(20, 16, 10, 0.35);
}
.k697-sheet {
  position: fixed;
  inset-inline: 8px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
  z-index: 885;
  padding: 12px 14px 14px;
  border-radius: 22px 22px 18px 18px;
  background: color-mix(in srgb, var(--bg-card, #fffcf7) 96%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--accent, #f0a030) 20%, var(--border, #e4dccb));
  box-shadow: 0 22px 60px rgba(26, 22, 16, 0.3), var(--k7p-ring, 0 0 0 0 transparent);
  animation: k7p-rise 0.22s var(--k7p-ease) both;
}
@media (prefers-reduced-motion: reduce) { .k697-sheet { animation: none; } }
.k697-sheet__grab {
  width: 42px;
  height: 4px;
  margin: 0 auto 10px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--border, #e4dccb) 85%, var(--text-muted, #6b6254));
}
.k697-sheet__title {
  margin-bottom: 9px;
  padding-inline-end: 4px;
  font: 800 14px/1.5 var(--font, "Cairo", sans-serif);
  color: var(--text, #1a1610);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: start;
}
.k697-sheet__acts { display: grid; gap: 6px; }
.k697-sheet__act {
  padding: 12px 14px;
  border-radius: 13px;
  border: 0;
  cursor: pointer;
  text-align: start;
  font: 800 13px/1.4 var(--font, "Cairo", sans-serif);
  color: var(--text, #1a1610);
  background: color-mix(in srgb, var(--accent, #f0a030) 8%, transparent);
  transition: background 0.15s var(--k7p-ease), transform 0.12s var(--k7p-ease);
}
.k697-sheet__act:active { transform: scale(0.985); }
.k697-sheet__act:hover { background: color-mix(in srgb, var(--accent, #f0a030) 15%, transparent); }
.k697-sheet__close {
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--border, #e4dccb) 80%, transparent);
  background: transparent;
  cursor: pointer;
  font: 800 12.5px/1.4 var(--font, "Cairo", sans-serif);
  color: var(--text-muted, #6b6254);
}
.k697-offline-pill {
  position: fixed;
  inset-inline: 0;
  top: 8px;
  z-index: 910;
  width: max-content;
  margin-inline: auto;
  padding: 6px 15px;
  border-radius: 99px;
  background: var(--danger, #ef4444);
  color: #fff;
  font: 800 11.5px/1.4 var(--font, "Cairo", sans-serif);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  animation: k7p-rise 0.2s var(--k7p-ease) both;
  pointer-events: none;
}
@media print {
  .k697-sheet, .k697-sheet-backdrop, .k697-offline-pill { display: none !important; }
}

/* ==================================================================== */
/* 28) «حركة اليوم» في كروت بوابة الهب (حصري)                            */
/* ==================================================================== */
.portal__today {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 3px 10px 3px 8px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--accent, #f0a030) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #f0a030) 18%, transparent);
  font: 700 11px/1.5 var(--font, "Cairo", sans-serif);
  color: color-mix(in srgb, var(--text, #1a1610) 80%, transparent);
  width: max-content;
  max-width: 100%;
}
.portal__today svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--accent, #f0a030); }
.portal__today b { font-weight: 800; color: var(--accent, #f0a030); }
.portal__today em { font-style: normal; font-variant-numeric: tabular-nums; font-weight: 800; color: var(--text, #1a1610); }
html[data-k697-theme="dark"] .portal__today { background: color-mix(in srgb, var(--accent, #f0a030) 14%, transparent); }
.portal__today-hidden { display: none; }

/* ==================================================================== */
/* 29) «نظرة 30 يومًا» — الشريط الحراري في كروت البوابة (حصري)           */
/* ==================================================================== */
.portal__heat {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  margin-top: 5px;
  padding: 5px 9px 4px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-card, #fffcf7) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--border, #e4dccb) 55%, transparent);
  height: 26px;
  width: max-content;
  max-width: 100%;
  overflow: hidden;
}
.portal__heat i {
  display: block;
  width: 3.5px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--border, #e4dccb) 65%, transparent);
  height: 5px;
}
.portal__heat i.is-h {
  background: color-mix(in srgb, var(--accent, #f0a030) calc(var(--hn, 0.2) * 82% + 12%), var(--accent, #f0a030));
  height: calc(5px + var(--hn, 0.2) * 13px);
}
.portal__heat i[title$="— 0 حركة"] { opacity: 0.85; }
.portal__heat:hover i { transform: scaleX(1.35); transition: transform 0.12s var(--k7p-ease); }
@media (hover: hover) {
  .portal__heat i { transition: transform 0.12s var(--k7p-ease), background 0.2s var(--k7p-ease); }
}

/* ==================================================================== */
/* 30) التوب بار على الموبايل (W13→W14) — سطر واحد فقط بلا شطرين         */
/* ==================================================================== */
@media (max-width: 768px) {
  .topbar {
    flex-wrap: nowrap !important; /* طلب المستخدم: سطر واحد لا شطرين */
    align-items: center;
    padding: 6px 8px !important;
    gap: 4px !important;
  }
  /* صف واحد: قائمة + شبشة الأدوات تتمدد + بحث */
  .topbar .hub-nav-top {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: space-between;
    gap: 1px;
  }
  /* W16: المسار عاد للسطر — أزرار القوة أُزيلت فتوفّرت مساحة للسياق */
  .topbar .hub-crumb {
    display: flex !important;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 2px;
    overflow: hidden;
    font-size: 11.5px;
    white-space: nowrap;
  }
  .topbar .hub-crumb__link,
  .topbar .hub-crumb__here {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar .hub-back,
  .topbar .k697-bell__btn,
  .topbar .k697-theme-btn,
  .topbar .topbar-menu-btn,
  .topbar .topbar-search-btn {
    border-radius: 12px;
  }
  .topbar .hub-back { flex-shrink: 0; padding: 6px !important; }
  .topbar .topbar-search-btn { flex-shrink: 0; margin-inline-start: 0 !important; }
  /* W16: أزرار «القوة» (تثبيت / كثافة / ثيم) انتقلت إلى جزيرة الإجراءات السفلية
     → السطر الواحد يتنفس والمسار يصبح مقروءًا بدل صف أيقونات متلاصق */
  .topbar .k697-pin-btn,
  .topbar .k697-density-btn,
  .topbar .k697-theme-btn { display: none !important; }
  /* شريحة المستخدم تنضم للسطر الأول (display:contents تنزع صندوقها) — بلا تاريخ */
  .topbar .topbar-meta { display: contents; }
  .topbar .topbar-date { display: none; }
  .topbar .topbar-user-chip {
    flex: 0 0 auto;      /* الأفاتار + السهم دائمًا؛ الاسم يُخفى على العرض الضيق */
    padding: 3px 6px 3px 3px;
    gap: 4px;
    min-width: 0;
  }
  .topbar .topbar-user-chip .avatar {
    width: 24px;
    height: 24px;
    font-size: 10.5px;
    flex-shrink: 0;
  }
  .topbar .topbar-user-chip::after {
    content: "‹";
    font-size: 13px;
    font-weight: 900;
    opacity: 0.55;
    flex-shrink: 0;
    line-height: 1;
  }
  /* العرض الضيق: أفاتار + سهم فقط (الاسم كاملًا في القائمة الجانبية) */
  @media (max-width: 540px) {
    .topbar .topbar-user-chip > span:not(.avatar) { display: none; }
  }
}

/* ==================================================================== */
/* 32) سرعة السكرول (W15) — قتل الرسم الثقيل على الموبايل                */
/* Zajil: backdrop-filter على شرائط ثابتة = إعادة رسم ضِمَن كل إطار      */
/* ==================================================================== */
@media (max-width: 768px) {
  /* شرائط على الشاشة دائمًا → خلفية صلبة بلا زجاج (أكبر مكسب سكرول) */
  .topbar,
  .phone-nav,
  .k697-dock {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--bg-card, #fffcf7) !important;
  }
  /* التنبيهات كانت تظهر خلف شريط التنقل — تُرفع فوق الجزيرة */
  .k697-toast-host {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 150px);
    inset-inline-end: 12px;
  }
  /* رؤوس الجداول على الموبايل: بلا sticky = بلا إعادة حساب/رسم كل إطار */
  :where(.data-table th) { position: static !important; z-index: auto !important; }
  /* عناصر بعيدة عن الشاشة لا تُنسَّق حتى تظهر (تسريع فتح + سكرول) */
  main > .card,
  .stats-grid {
    content-visibility: auto;
    contain-intrinsic-size: auto 300px;
  }
}
@media print {
  main > .card,
  .stats-grid { content-visibility: visible; contain-intrinsic-size: auto; }
}

/* ------------------------------------------------------------------ */
/* 33) حماية الإرسال المزدوج (W18)                                     */
/*     زر «جارٍ…» دوّار بدل النقر مرتين → لا فاتورة مكرّرة ولا سند مرتين */
/* ------------------------------------------------------------------ */
@keyframes k697-spin { to { transform: rotate(360deg); } }

:where(button.is-loading) {
  pointer-events: none;
  cursor: progress;
}

:where(button.is-loading)::after {
  content: "";
  display: inline-block;
  width: 0.82em;
  height: 0.82em;
  margin-inline-start: 0.5em;
  vertical-align: -2px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  opacity: 0.85;
  animation: k697-spin 0.62s linear infinite;
}

:where(form[aria-busy="true"]) { cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  /* الحركة هنا وظيفية (إثبات أن الطلب ماشي) — تُبطّأ بدل أن تُلغى */
  button.is-loading::after { animation-duration: 1.6s; }
}

/* ==================================================================== */
/* 34) W18 — شريط تقدّم الانتقال + مسودة النماذج                        */
/* ==================================================================== */
.k697-progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: 2.5px;
  z-index: 9900;
  pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent, #f0a030) 60%, transparent),
    var(--accent, #f0a030));
  transform: scaleX(0);
  transform-origin: right center;
  opacity: 0;
  transition: transform 0.18s linear, opacity 0.2s var(--k7p-ease);
  will-change: transform;
}
html[dir="ltr"] .k697-progress { transform-origin: left center; }
.k697-progress.is-on { opacity: 1; }
.k697-progress.is-done {
  opacity: 1;
  transition: transform 0.16s var(--k7p-ease), opacity 0.3s var(--k7p-ease) 0.12s;
}
@media (min-width: 900px) {
  .k697-progress { height: 3px; }
}

.k697-draft {
  position: fixed;
  inset-inline: 12px;
  bottom: 14px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  z-index: 895;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 12px;
  border-radius: 14px;
  background: var(--bg-card, #fffcf7);
  border: 1px solid color-mix(in srgb, var(--accent, #f0a030) 42%, var(--border, #e4dccb));
  box-shadow:
    0 18px 40px -20px rgba(26, 22, 16, 0.45),
    0 2px 8px rgba(26, 22, 16, 0.06);
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #1a1610);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.24s var(--k7p-ease), transform 0.24s var(--k7p-ease);
}
.k697-draft.is-in { opacity: 1; transform: translateY(0); }
.k697-draft__txt { flex: 1 1 160px; min-width: 0; line-height: 1.6; }
.k697-draft__btn {
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border, #e4dccb) 85%, transparent);
  background: transparent;
  color: var(--text-muted, #6b6254);
  font: inherit;
  font-weight: 800;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.16s var(--k7p-ease), color 0.16s var(--k7p-ease);
}
.k697-draft__btn--go {
  background: var(--accent, #f0a030);
  border-color: transparent;
  color: #1a1610;
}
.k697-draft__btn:hover { filter: brightness(0.96); }
.k697-draft__btn:active { transform: scale(0.97); }
@media (max-width: 899px) {
  /* فوق شريط التنقل السفلي والجزيرة العائمة */
  .k697-draft {
    bottom: 87px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 87px);
    inset-inline: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .k697-progress,
  .k697-draft { transition: opacity 0.15s linear; transform: none !important; }
  .k697-progress { transform: scaleX(1) !important; opacity: 0; }
  .k697-progress.is-on { opacity: 1; }
}

/* ---- 35) فوتر الموقع المخصص (من إعدادات الكونسول) ---- */
:where(.site-footer__credit),
:where(.colophon__credit) {
  font-family: "Tajawal", "Cairo", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.45;
  opacity: 0.9;
  max-width: min(100%, 28rem);
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

:where(.colophon) {
  flex-wrap: wrap;
  row-gap: 0.45rem;
  column-gap: 0.65rem;
  max-width: 100%;
  box-sizing: border-box;
  padding-inline: 1rem;
}

:where(.site-footer) {
  flex-wrap: wrap;
  row-gap: 8px;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 720px) {
  /* عمود واضح على الموبايل — يمنع تداخل Orbitron + letter-spacing مع العربي */
  :where(.colophon) {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    padding: 0.85rem 1rem 1.5rem;
    line-height: 1.35;
  }
  :where(.colophon__sep) {
    display: none;
  }
  :where(.colophon__credit) {
    letter-spacing: 0;
    font-size: 0.78rem;
    max-width: 92vw;
    padding-inline: 4px;
  }

  :where(.site-footer) {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.04em;
    text-align: center;
    padding-inline: 14px;
  }
  :where(.site-footer__sep) {
    display: none;
  }
  :where(.site-footer__credit) {
    letter-spacing: 0;
    font-size: 12.5px;
    max-width: 92vw;
  }
}
