/* ==========================================================================
   نظام إدارة الصيدليات — الهوية والإطار العام
   إطار داكن (علوي + جانبي + سفلي) يحيط بمحتوى فاتح
   ========================================================================== */

:root {
  --sidebar-width: 210px;
  --sidebar-width-collapsed: 66px;
  --topbar-height: 54px;
  --footer-height: 40px;
  --transition-speed: 0.2s;

  /* ---- الإطار — بترولي أفتح وأهدأ ---- */
  --chrome-900: #1c6b78;
  --chrome-800: #237e8d;
  --chrome-700: #2c94a5;
  --chrome-fg: #ffffff;
  --chrome-fg-muted: #cdeaee;
  --chrome-border: rgba(255, 255, 255, 0.20);
  --chrome-hover: rgba(255, 255, 255, 0.12);
  --chrome-active: rgba(255, 255, 255, 0.18);

  /* ---- اللمسة الذهبية المُفرِحة ---- */
  --gold-500: #f0b429;
  --gold-400: #ffc94d;
  --gold-300: #ffdd8a;

  /* ---- الأخضر الصيدلاني ---- */
  --brand-700: #0f6f66;
  --brand-600: #12857a;   /* نصوص وأيقونات على خلفية فاتحة */
  --brand-500: #17a294;
  --brand-400: #35c3b2;
  --brand-300: #7ee0d0;

  /* ---- المحتوى الفاتح ---- */
  --page-bg: #f3f7f8;
  --page-tint: radial-gradient(1000px 420px at 92% -10%, rgba(240, 180, 41, 0.09), transparent 60%),
               radial-gradient(900px 400px at 4% 4%, rgba(23, 162, 148, 0.08), transparent 62%);
  --card-bg: #ffffff;
  --card-border: #dde7e9;
  --text-strong: #14282c;
  --text-muted: #5f7a7e;
  --shadow-card: 0 1px 2px rgba(12, 40, 45, 0.05), 0 6px 16px -10px rgba(12, 40, 45, 0.18);
  --shadow-card-hover: 0 1px 3px rgba(12, 40, 45, 0.07), 0 14px 28px -14px rgba(12, 40, 45, 0.28);
}

[data-bs-theme="dark"] {
  --chrome-900: #14515c;
  --chrome-800: #19636f;
  --chrome-700: #217b8a;
  --chrome-fg: #f2fbfb;
  --chrome-fg-muted: #b5d8dd;

  --brand-600: #35c3b2;

  --page-bg: #0d181a;
  --page-tint: radial-gradient(1000px 420px at 92% -10%, rgba(240, 180, 41, 0.07), transparent 60%),
               radial-gradient(900px 400px at 4% 4%, rgba(23, 162, 148, 0.08), transparent 62%);
  --card-bg: #152426;
  --card-border: #253A3D;
  --text-strong: #e6f1f0;
  --text-muted: #8aa6a8;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 20px -12px rgba(0, 0, 0, 0.6);
  --shadow-card-hover: 0 2px 6px rgba(0, 0, 0, 0.5), 0 16px 32px -16px rgba(0, 0, 0, 0.75);
}

/* ---------- أساسيات ---------- */
body {
  font-family: "Segoe UI", "Tahoma", "Cairo", "Dubai", Arial, sans-serif;
  background-color: var(--page-bg);
  background-image: var(--page-tint);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text-strong);
  height: 100vh;
  overflow: hidden;
}

.num, table td.num, .figure-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  direction: ltr;
  unicode-bidi: embed;
}

/* ==========================================================================
   الشريط العلوي — بعرض الشاشة كاملاً
   ========================================================================== */
.topbar {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: var(--topbar-height);
  z-index: 1050;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.75rem;
  background: linear-gradient(90deg, var(--chrome-800), var(--chrome-900) 70%);
  border-bottom: 1px solid var(--chrome-border);
  color: var(--chrome-fg);
}

/* ---- يمين: الطي · الشعار · الاسم ---- */
.topbar__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.chrome-btn {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--chrome-border);
  background: transparent;
  color: var(--chrome-fg);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  position: relative;
  transition: background var(--transition-speed) ease, border-color var(--transition-speed) ease;
}
.chrome-btn:hover:not(:disabled) { background: var(--chrome-hover); border-color: rgba(255, 255, 255, 0.24); color: #fff; }
.chrome-btn:disabled { opacity: 0.4; }

/* الشعار — يفتح لوحة المعلومات */
.topbar__logo {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 9px;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
  text-decoration: none;
  color: var(--brand-600);
  font-size: 1.4rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
.topbar__logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.topbar__logo:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px var(--gold-500), 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* اسم الصيدلية — يفتح الشاشة الرئيسية */
.topbar__name {
  display: flex;
  align-items: center;
  padding: 0.35rem 0.6rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
  transition: background var(--transition-speed) ease, color var(--transition-speed) ease;
}
.topbar__name:hover { background: rgba(255, 255, 255, 0.10); color: var(--gold-300); }

/* ---- يسار: الأدوات ---- */
.topbar__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  margin-inline-start: auto;
}

.notif-badge {
  position: absolute;
  top: 3px;
  inset-inline-end: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e11d48;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  direction: ltr;
}

/* ==========================================================================
   القائمة الجانبية — تحت الشريط العلوي وفوق السفلي
   ========================================================================== */
.sidebar {
  position: fixed;
  top: var(--topbar-height);
  bottom: var(--footer-height);
  right: 0;
  width: var(--sidebar-width);
  z-index: 1040;
  background: var(--chrome-900);
  border-inline-start: 1px solid var(--chrome-border);
  color: var(--chrome-fg);
  display: flex;
  flex-direction: column;
  transition: width var(--transition-speed) ease, transform var(--transition-speed) ease;
}

/* شريط تمرير القائمة على يمينها — اتجاه ltr يضعه على الحافة اليمنى
   والمحتوى بداخلها يرجع rtl */
.sidebar__nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  direction: ltr;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.sidebar__nav__inner { direction: rtl; padding: 0.6rem 0.55rem 1rem; }
.sidebar__nav::-webkit-scrollbar { width: 6px; }
.sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 3px; }
.sidebar__nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.45); }

.sidebar__group-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--chrome-fg-muted);
  padding: 0.85rem 0.65rem 0.35rem;
  white-space: nowrap;
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  margin-bottom: 0.12rem;
  border-radius: 7px;
  color: var(--chrome-fg);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  position: relative;
  transition: background var(--transition-speed) ease, color var(--transition-speed) ease;
}
.sidebar__link:hover { background: var(--chrome-hover); color: #fff; }
.sidebar__link.is-active { background: var(--chrome-active); color: #fff; font-weight: 600; }
.sidebar__link.is-active::before {
  content: "";
  position: absolute;
  right: -0.55rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--gold-500);
}

.sidebar__icon { width: 21px; font-size: 1.02rem; text-align: center; flex-shrink: 0; }

/* ---------- حالة الطي ---------- */
.app-shell.is-collapsed .sidebar { width: var(--sidebar-width-collapsed); }
.app-shell.is-collapsed .sidebar__label,
.app-shell.is-collapsed .sidebar__group-label {
  opacity: 0; width: 0; overflow: hidden; pointer-events: none;
}
.app-shell.is-collapsed .sidebar__link { justify-content: center; padding: 0.6rem 0; }
.app-shell.is-collapsed .sidebar__group-label { padding: 0.45rem 0 0; height: 0.7rem; }
.app-shell.is-collapsed .sidebar__group + .sidebar__group {
  border-top: 1px solid var(--chrome-border);
  margin-top: 0.45rem;
  padding-top: 0.3rem;
}


/* ==========================================================================
   منطقة المحتوى
   ========================================================================== */
/* منطقة المحتوى هي وحدها التي تُمرَّر — وشريط التمرير على يسار الشاشة
   لأن الاتجاه rtl يضع الشريط على الحافة اليسرى للعنصر. */
.main-area {
  position: fixed;
  top: var(--topbar-height);
  bottom: var(--footer-height);
  right: var(--sidebar-width);
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  transition: right var(--transition-speed) ease;
  scrollbar-width: thin;
}
.app-shell.is-collapsed .main-area { right: var(--sidebar-width-collapsed); }

.page-content {
  flex: 1;
  padding: 1.2rem 1.35rem 1.6rem;
  max-width: 1560px;
  width: 100%;
}

/* الشاشة الرئيسية تملأ المساحة بلا حواف */
.app-shell.is-full-bleed .page-content { padding: 0; max-width: none; }

/* وضع الطيّ يحرّر مساحة، فتملؤها مساحة العمل في كل الشاشات.
   وشاشات العمل تملأ الشاشة دائماً — الحدّ 1560px للصفحات القرائية وحدها. */
.app-shell.is-collapsed .page-content,
.app-shell.is-fixed .page-content,
.app-shell.is-settings .page-content { max-width: none; }
.app-shell.is-full-bleed .main-area { overflow: hidden; }

/* صفحات تدير تمريرها بنفسها أو بلا تمرير إطلاقاً */
.app-shell.is-settings .main-area,
.app-shell.is-fixed .main-area { overflow: hidden; }
.app-shell.is-fixed .page-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.app-shell.is-settings .page-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* ==========================================================================
   الشريط السفلي — بعرض الشاشة كاملاً
   ========================================================================== */
.app-footer {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  height: var(--footer-height);
  z-index: 1050;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  background: linear-gradient(90deg, var(--chrome-800), var(--chrome-900) 70%);
  border-top: 1px solid var(--chrome-border);
  color: var(--chrome-fg-muted);
  font-size: 0.74rem;
}
.app-footer__side { flex: 1 1 0; display: flex; align-items: center; min-width: 0; }
.app-footer__session { justify-content: flex-end; gap: 0.85rem; }
.app-footer__item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  color: var(--chrome-fg-muted);
}
.app-footer__item i { color: var(--gold-500); font-size: 0.85rem; }
.app-footer__credit {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--chrome-fg);
  font-weight: 600;
  direction: ltr;
}
.app-footer__sep { color: var(--chrome-fg-muted); }
.app-footer__credit a { color: var(--gold-400); text-decoration: none; font-weight: 500; }
.app-footer__credit a:hover { text-decoration: underline; }

/* ==========================================================================
   الشاشة الرئيسية — صورة المنشأة فقط
   ========================================================================== */
.welcome {
  position: relative;
  height: 100%;
  flex: 1;
  overflow: hidden;
  background: var(--page-bg);
}
.welcome__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   لوحة المعلومات
   ========================================================================== */
.kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 0.95rem 1.05rem;
  height: 100%;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.kpi::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 3px;
  background: var(--accent, var(--brand-500));
}
.kpi__label {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; font-weight: 600; color: var(--text-muted);
}
.kpi__label i { color: var(--accent, var(--brand-500)); font-size: 0.95rem; }
.kpi__value { font-size: 1.55rem; font-weight: 700; color: var(--accent, var(--brand-600)); line-height: 1.15; }
.kpi__hint { font-size: 0.72rem; color: var(--text-muted); }

.panel-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.95rem;
  border-bottom: 1px solid var(--card-border);
  font-size: 0.86rem;
}
.panel-head i { color: var(--brand-600); }

/* سلسلة حساب الربح */
.calc-chain td { padding: 0.5rem 0.95rem; font-size: 0.85rem; border-color: var(--card-border); }
.calc-chain__key td {
  background: color-mix(in srgb, var(--gold-500) 11%, transparent);
  font-weight: 700;
}
.calc-chain__subtotal td {
  background: color-mix(in srgb, var(--brand-500) 8%, transparent);
  font-weight: 700;
}
.calc-chain__total td {
  background: color-mix(in srgb, var(--brand-500) 15%, transparent);
  font-weight: 800;
  font-size: 0.95rem;
  border-top: 2px solid var(--brand-500);
}

.mini-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.4rem 0;
  font-size: 0.83rem;
  border-bottom: 1px dashed var(--card-border);
}
.mini-row:last-child { border-bottom: 0; }
.mini-row--total {
  font-weight: 700;
  border-bottom: 0;
  border-top: 2px solid var(--card-border);
  margin-top: 0.2rem;
  padding-top: 0.55rem;
  color: var(--brand-600);
}

.pending-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-strong);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}
.pending-chip:hover { border-color: var(--brand-500); color: var(--brand-600); }
.pending-chip .num {
  background: color-mix(in srgb, var(--brand-500) 14%, transparent);
  color: var(--brand-600);
  border-radius: 5px;
  padding: 0 0.4rem;
  font-weight: 700;
}

/* تنبيه معلوماتي */
.notice {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  font-size: 0.84rem;
  border: 1px solid;
}
.notice i { font-size: 1.1rem; flex-shrink: 0; margin-top: 0.05rem; }
.notice--info {
  background: color-mix(in srgb, var(--gold-500) 10%, var(--card-bg));
  border-color: color-mix(in srgb, var(--gold-500) 40%, transparent);
  color: var(--text-strong);
}
.notice--info i { color: #b8860b; }
[data-bs-theme="dark"] .notice--info i { color: var(--gold-400); }

/* ==========================================================================
   الشاشات الصغيرة
   ========================================================================== */
.sidebar-backdrop {
  position: fixed;
  inset: var(--topbar-height) 0 var(--footer-height) 0;
  z-index: 1035;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-speed) ease;
}

@media (max-width: 991.98px) {
  .sidebar { transform: translateX(100%); width: var(--sidebar-width); }
  .app-shell.is-mobile-open .sidebar { transform: translateX(0); }
  .app-shell.is-mobile-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
  .main-area, .app-shell.is-collapsed .main-area { right: 0; }
  .app-shell.is-collapsed .sidebar__label,
  .app-shell.is-collapsed .sidebar__group-label {
    opacity: 1; width: auto; overflow: visible; pointer-events: auto;
  }
  .app-shell.is-collapsed .sidebar__link { justify-content: flex-start; padding: 0.55rem 0.65rem; }

  .topbar__name { max-width: 150px; }
  .app-footer__side:first-child { display: none; }
  .app-footer__credit { font-size: 0.7rem; }
  .app-footer__item:not(:last-child) { display: none; }
  .page-content { padding: 0.9rem; }
}

@media (max-width: 575.98px) {
  .app-footer__credit span:not(:first-child) { display: none; }
  .app-footer__session { display: none; }
}

@media print {
  .topbar, .sidebar, .app-footer, .sidebar-backdrop { display: none !important; }
  .main-area { margin: 0 !important; }
  .page-content { padding: 0; }
}
/* ==========================================================================
   قائمة الإشعارات · ترويسة الصفحة
   ========================================================================== */
.notif-menu { width: min(340px, 92vw); padding: 0; }
.notif-menu__header {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--card-border);
  font-weight: 700;
  font-size: 0.86rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.notif-item {
  display: flex;
  gap: 0.65rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--card-border);
  text-decoration: none;
  color: inherit;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: color-mix(in srgb, var(--brand-500) 6%, transparent); }
.notif-item__icon {
  width: 34px; height: 34px; border-radius: 8px;
  display: grid; place-items: center; flex-shrink: 0; font-size: 1rem;
}
.notif-item__title { font-size: 0.85rem; font-weight: 600; }
.notif-item__detail { font-size: 0.75rem; color: var(--text-muted); }
.lvl-info    { background: rgba(3, 105, 161, 0.13); color: #0369a1; }
.lvl-warning { background: rgba(180, 83, 9, 0.14);  color: #b45309; }
.lvl-danger  { background: rgba(190, 18, 60, 0.13); color: #be123c; }
.lvl-success { background: rgba(4, 120, 87, 0.14);  color: #047857; }

/* ---------- ترويسة الصفحة ---------- */
.page-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.1rem;
  flex-wrap: nowrap;
}
.page-header__icon {
  width: 46px; height: 46px; border-radius: 10px;
  display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0;
  background: color-mix(in srgb, var(--accent, var(--brand-500)) 12%, transparent);
  color: var(--accent, var(--brand-500));
}
.page-header__title { font-size: 1.25rem; font-weight: 700; margin: 0; line-height: 1.25; }
.page-header__sub { font-size: 0.82rem; color: var(--text-muted); margin: 0; }
.page-header .ms-auto { margin-inline-start: auto !important; flex-shrink: 0; }

@media (max-width: 767.98px) {
  .page-header { flex-wrap: wrap; }
  .page-header .ms-auto { width: 100%; margin-inline-start: 0 !important; }
}

/* ---------- شاشة قيد الإنشاء ---------- */
.placeholder-panel {
  background: var(--card-bg);
  border: 1px dashed var(--card-border);
  border-radius: 10px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--text-muted);
}
.placeholder-panel i { font-size: 2.4rem; color: var(--brand-500); opacity: 0.5; }

/* ---------- مسار التنقل ---------- */
.breadcrumb { margin-bottom: 0.6rem; }
.breadcrumb a { color: var(--brand-600); }

/* ==========================================================================
   الجداول والنماذج والبطاقات الإحصائية
   ========================================================================== */

/* بطاقة رقم مختصر */
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  height: 100%;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.stat-card::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 3px;
  background: var(--accent, var(--brand-500));
}
.stat-card__label { font-size: 0.76rem; color: var(--text-muted); font-weight: 500; }
.stat-card__value { font-size: 1.35rem; font-weight: 700; color: var(--accent, var(--brand-600)); }
.stat-card__hint  { font-size: 0.72rem; color: var(--text-muted); }

/* شريط الفلاتر */
.filter-bar {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-card);
}
.filter-bar .form-label { margin-bottom: 0.2rem; color: var(--text-muted); font-weight: 500; }

/* جدول داخل بطاقة */
.table-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.table-card .table { --bs-table-bg: transparent; margin-bottom: 0; }
.table-card thead th {
  background: color-mix(in srgb, var(--brand-500) 5%, var(--card-bg));
  border-bottom: 1px solid var(--card-border);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  padding: 0.7rem 0.75rem;
}
.table-card tbody td { padding: 0.65rem 0.75rem; border-color: var(--card-border); }
.table-card tbody tr:last-child td { border-bottom: 0; }

.row-cancelled td { opacity: 0.5; text-decoration: line-through; }
.row-cancelled td:last-child { text-decoration: none; }

/* أقسام النموذج */
.form-section {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-card);
}
.form-section__title {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.92rem; font-weight: 700;
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--card-border);
}
.form-section__title i { color: var(--brand-600); }
.form-section .form-label { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.3rem; }
.form-section .form-text { font-size: 0.74rem; }

/* صندوق قيمة محسوبة */
.calc-box {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 38px;
  padding: 0.3rem 0.75rem;
  border-radius: 8px;
  border: 1px dashed color-mix(in srgb, var(--brand-500) 40%, transparent);
  background: color-mix(in srgb, var(--brand-500) 8%, transparent);
}
.calc-box__value { font-size: 1.05rem; font-weight: 700; color: var(--brand-600); line-height: 1.2; }
.calc-box__sub { font-size: 0.72rem; color: var(--text-muted); }
.calc-box--amber {
  border-color: rgba(217, 119, 6, 0.45);
  background: rgba(217, 119, 6, 0.08);
}
.calc-box--amber .calc-box__value { color: #b45309; }
[data-bs-theme="dark"] .calc-box--amber .calc-box__value { color: #fbbf24; }

.page-header .ms-auto { margin-inline-start: auto !important; }

/* ==========================================================================
   يومية المبيعات — هيدر اليوم وجدول المستخدمين
   ========================================================================== */
.day-header {
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
  flex-wrap: wrap;
  background: linear-gradient(112deg, #0a3f3a 0%, #14655e 55%, #1c8479 100%);
  color: #fff;
  border-radius: 12px;
  padding: 1.1rem 1.35rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--shadow-card);
}
.day-header__icon {
  width: 52px; height: 52px; border-radius: 11px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: grid; place-items: center; font-size: 1.5rem;
  flex-shrink: 0; align-self: center;
}
.day-header__field { min-width: 200px; flex: 1 1 200px; }
.day-header__field .form-label { color: rgba(255, 255, 255, 0.9); font-weight: 600; font-size: 0.85rem; }
.day-header__field .form-select,
.day-header__field .form-control {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
}
.day-header__doc {
  margin-inline-start: auto;
  text-align: center;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 11px;
  padding: 0.5rem 1rem;
  align-self: center;
}
.day-header__doc-label { display: block; font-size: 0.7rem; opacity: 0.85; }
.day-header__doc-no { display: block; font-weight: 700; font-size: 0.95rem; }

.day-header--view { align-items: center; }
.day-header__label { font-size: 0.72rem; opacity: 0.85; }
.day-header__value { font-size: 1.05rem; font-weight: 700; }

/* صندوق قيمة محسوبة — نسخة كبيرة وحالات المطابقة */
.calc-box--lg { min-height: 58px; }
.calc-box--lg .calc-box__value { font-size: 1.5rem; }
.calc-box--check.is-ok {
  border-color: rgba(5, 150, 105, 0.55);
  background: rgba(5, 150, 105, 0.10);
  border-style: solid;
}
.calc-box--check.is-ok .calc-box__value { color: #059669; }
.calc-box--check.is-bad {
  border-color: rgba(225, 29, 72, 0.55);
  background: rgba(225, 29, 72, 0.09);
  border-style: solid;
}
.calc-box--check.is-bad .calc-box__value { color: #e11d48; }
[data-bs-theme="dark"] .calc-box--check.is-ok .calc-box__value { color: #34d399; }
[data-bs-theme="dark"] .calc-box--check.is-bad .calc-box__value { color: #fb7185; }

/* جدول المستخدمين */
.cashier-table thead th {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-muted);
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
}
.cashier-table__foot th {
  background: color-mix(in srgb, var(--brand-500) 10%, transparent);
  border-top: 2px solid var(--card-border);
  font-size: 0.82rem;
}
.cashier-table td { vertical-align: middle; }

/* ==========================================================================
   أزرار بهوية النظام
   ========================================================================== */
.btn-brand {
  background: var(--brand-600);
  border: 1px solid var(--brand-600);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}
.btn-brand:hover,
.btn-brand:focus {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}
[data-bs-theme="dark"] .btn-brand {
  background: var(--brand-500);
  border-color: var(--brand-500);
}
[data-bs-theme="dark"] .btn-brand:hover { background: var(--brand-400); border-color: var(--brand-400); }

/* الأزرار الخضراء الأساسية تتبع هوية النظام */
.btn-success {
  --bs-btn-bg: var(--brand-600);
  --bs-btn-border-color: var(--brand-600);
  --bs-btn-hover-bg: var(--brand-700);
  --bs-btn-hover-border-color: var(--brand-700);
  --bs-btn-active-bg: var(--brand-800);
  --bs-btn-active-border-color: var(--brand-800);
}

/* حلقة التركيز باللمسة النعناعية */
.form-control:focus,
.form-select:focus {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--brand-400) 22%, transparent);
}

/* ==========================================================================
   يومية المصروفات — اختيار النطاق وشريط النِسَب
   ========================================================================== */
.scope-choice { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.scope-option { flex: 1 1 190px; cursor: pointer; margin: 0; }
.scope-option input { position: absolute; opacity: 0; pointer-events: none; }

.scope-option__body {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--card-border);
  border-radius: 9px;
  background: var(--card-bg);
  transition: border-color var(--transition-speed) ease,
              background var(--transition-speed) ease;
  height: 100%;
}
.scope-option__body i { font-size: 1.35rem; color: var(--text-muted); flex-shrink: 0; }
.scope-option__body strong { display: block; font-size: 0.9rem; }
.scope-option__body small { display: block; font-size: 0.74rem; color: var(--text-muted); }

.scope-option input:checked + .scope-option__body {
  border-color: var(--brand-500);
  background: color-mix(in srgb, var(--brand-500) 7%, var(--card-bg));
  box-shadow: inset 0 0 0 1px var(--brand-500);
}
.scope-option input:checked + .scope-option__body i { color: var(--brand-600); }
.scope-option input:focus-visible + .scope-option__body {
  outline: 2px solid var(--brand-400);
  outline-offset: 2px;
}

/* شريط نسبة داخل جدول التحليل */
.bar-track {
  height: 7px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text-muted) 14%, transparent);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--brand-500);
  min-width: 3px;
}


/* ---------- معاينة صور الإعدادات ---------- */
.settings-preview {
  display: block;
  width: 100%;
  max-height: 130px;
  object-fit: cover;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--page-bg);
}
.settings-preview--logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
  padding: 6px;
}

/* ============================================================
   توسيط أفقي ورأسي داخل كل الجداول — قاعدة عامة للتطبيق كله
   ============================================================ */
.table > thead > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  text-align: center;
  vertical-align: middle;
}

/* الفورم أو الأزرار جوّه الخلية تتوسّط هي كمان */
.table > tbody > tr > td > form,
.table > tbody > tr > td > .d-flex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
}

/* ============================================================
   تنبيه مؤقت — يظهر في وسط الشاشة ثانيتين ويختفي لوحده
   ============================================================ */
.toast-note {
  position: fixed;
  inset-block-end: 3rem;
  inset-inline-end: 1.2rem;
  z-index: 1080;

  display: inline-flex;
  align-items: center;
  gap: .4rem;
  max-width: min(420px, 60vw);
  padding: .4rem .8rem;

  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-inline-start: 3px solid var(--brand-500);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgb(0 0 0 / 12%);

  color: var(--text-strong);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.toast-note i { font-size: .85rem; color: var(--brand-600); flex-shrink: 0; }

.toast-note.is-shown { opacity: 1; transform: translateY(0); }

[data-bs-theme="dark"] .toast-note {
  box-shadow: 0 6px 18px rgb(0 0 0 / 45%);
}


/* ============================================================
   زر أيقونة بسيط في شريط الشاشة — التصدير مثلاً
   ============================================================ */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-inline-start: auto;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.icon-btn:hover {
  color: #157347;
  border-color: #157347;
  background: color-mix(in srgb, #157347 8%, transparent);
}

/* عنصر الإشعار: جسم قابل للنقر وزر إخفاء لليوم */
.notif-item { display: flex; align-items: stretch; }
.notif-item__body {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  color: inherit;
  text-decoration: none;
}
.notif-item__close {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  padding: 0 0.7rem;
  font-size: 0.75rem;
  line-height: 1;
}
.notif-item__close:hover { color: #be123c; }

/* ============================================================
   شريط التعليمات — نص ثابت في منتصف الشريط العلوي يومض كل عشر ثوانٍ
   ============================================================ */
.notice-band {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-inline: auto;
  width: max-content;
  max-width: min(46vw, 560px);
  padding: .22rem .9rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--gold-500) 20%, transparent);
  animation: notice-blink 10s steps(1, end) infinite;
}

.notice-band__text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .84rem;
  font-weight: 600;
  color: #fff;
}

.notice-band__text + .notice-band__text { display: none; }

/* وميضة واحدة في نهاية كل عشر ثوانٍ */
@keyframes notice-blink {
  0%, 88% {
    background: color-mix(in srgb, var(--gold-500) 20%, transparent);
    opacity: 1;
  }
  92% {
    background: color-mix(in srgb, var(--gold-500) 70%, transparent);
    opacity: .55;
  }
  96% {
    background: color-mix(in srgb, var(--gold-500) 20%, transparent);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .notice-band { animation: none; }
}

@media (max-width: 991.98px) {
  .notice-band { display: none; }
}

/* ===== شاشة الدخول ===== */
body.is-bare {
  margin: 0;
  min-height: 100vh;
  background: #0e1116;
}

.login {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  /* خلفية داكنة حتى تُضبط صورة من إعدادات المنشأة */
  background: linear-gradient(160deg, #16202b, #0b0f14);
}

/* الخلفية من إعدادات المنشأة */
.login.has-bg {
  background: var(--login-bg) center / cover no-repeat fixed;
}

.login.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 25%), rgb(0 0 0 / 45%));
}

.login__form {
  position: relative;
  z-index: 1;
  width: min(420px, 90vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding-bottom: 3rem;
}

/* الشعار مرتفع فوق الحقول */
.login__logo {
  display: block;
  margin: 0 auto 2.25rem;
  max-width: 190px;
  max-height: 130px;
  object-fit: contain;
}

.login__logo--icon {
  font-size: 4rem;
  color: #fff;
  text-align: center;
}

/* حقل بلا خلفية بيضاء */
.login__field {
  position: relative;
  display: flex;
  align-items: center;
}

.login__field > .bi {
  position: absolute;
  inset-inline-start: .9rem;
  color: rgb(255 255 255 / 75%);
  pointer-events: none;
}

.login__input {
  width: 100%;
  height: 52px;
  padding-inline: 2.5rem;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 6px;
  background: rgb(255 255 255 / 10%);
  color: #fff;
  font-size: .95rem;
  backdrop-filter: blur(2px);
}

.login__input::placeholder { color: rgb(255 255 255 / 70%); }

.login__input:focus {
  outline: none;
  border-color: rgb(255 255 255 / 70%);
  background: rgb(255 255 255 / 16%);
}

/* الحقول المحفوظة في المتصفح لا تعود بيضاء */
.login__input:-webkit-autofill,
.login__input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  transition: background-color 6000s ease-in-out 0s;
}

.login__eye {
  position: absolute;
  inset-inline-end: .75rem;
  border: 0;
  padding: .25rem;
  background: none;
  color: rgb(255 255 255 / 75%);
  line-height: 1;
}

.login__eye:hover { color: #fff; }

.login__submit {
  height: 52px;
  margin-top: .5rem;
  border: 0;
  border-radius: 6px;
  background: var(--brand-700);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
}

.login__submit:hover { filter: brightness(1.08); }

.login__error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin: 0;
  padding: .4rem .6rem;
  border-inline-start: 3px solid #f1707c;
  background: rgb(220 53 69 / 25%);
  color: #fff;
  font-size: .85rem;
}

/* الشريط الأسفل الأسود */
.login__footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 1.25rem;
  background: #0c0f14;
  color: rgb(255 255 255 / 80%);
  font-size: .8rem;
}

.login__footer a { color: inherit; text-decoration: none; }
.login__footer a:hover { text-decoration: underline; }
.login__credit { font-weight: 600; color: #fff; }
.login__sep { margin-inline: .5rem; opacity: .5; }

.login__state {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.login__state > .bi {
  font-size: .5rem;
  color: #2ecc71;
}

@media (max-width: 575.98px) {
  .login__footer {
    flex-direction: column;
    gap: .25rem;
    text-align: center;
  }
}

/* اسم المستخدم في الشريط العلوي */
.topbar__user {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

/* ==========================================================================
   ورقة مطبوعة — سجل الحضور
   ========================================================================== */
body.is-bare .sheet {
  width: 210mm;
  min-height: 297mm;
  margin: 1.5rem auto;
  padding: 14mm 12mm;
  background: #fff;
  color: #111827;
  box-shadow: 0 6px 24px rgb(0 0 0 / 18%);
}

.sheet__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: .8rem;
  border-bottom: 2px solid #0f6f66;
}
.sheet__logo { width: 56px; height: 56px; object-fit: contain; }
.sheet__brand { display: flex; flex-direction: column; }
.sheet__brand strong { font-size: 1.15rem; }
.sheet__brand span { font-size: .78rem; color: #6b7280; }
.sheet__meta {
  margin-inline-start: auto;
  display: flex; flex-direction: column; align-items: flex-end;
  font-size: .82rem; font-weight: 600;
}

.sheet__facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .4rem .8rem;
  margin: .9rem 0;
  font-size: .8rem;
}
.sheet__facts span { display: flex; gap: .35rem; }
.sheet__facts em { font-style: normal; color: #6b7280; }

.sheet__table { width: 100%; border-collapse: collapse; font-size: .76rem; }
.sheet__table th,
.sheet__table td {
  border: 1px solid #d1d5db;
  padding: .28rem .3rem;
  text-align: center;
}
.sheet__table thead th { background: #eef6f4; font-weight: 700; }
.sheet__table tfoot th { background: #f3f4f6; }

.sheet__summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .4rem .8rem;
  margin-top: .9rem;
  font-size: .82rem;
}
.sheet__summary span { display: flex; gap: .4rem; }
.sheet__summary em { font-style: normal; color: #6b7280; }
.sheet__summary--main { grid-column: 1 / -1; font-size: .95rem; font-weight: 700; }

.sheet__foot {
  display: flex; justify-content: space-between;
  margin-top: 1.4rem; padding-top: .5rem;
  border-top: 1px solid #d1d5db;
  font-size: .74rem; color: #6b7280;
}
.sheet__empty { padding: 3rem; text-align: center; color: #6b7280; }

.sheet__actions {
  display: flex; justify-content: center; gap: .6rem; margin: 1rem 0 2rem;
}

@page {
  size: A4;
  margin: 14mm 12mm;
}

@media print {
  body.is-bare { background: #fff; }
  .sheet__actions { display: none; }

  body.is-bare .sheet {
    width: auto;
    min-height: auto;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }

  /* الجدول لا ينقسم في منتصف سطر، والترويسة تتكرّر */
  .sheet__table { page-break-inside: auto; }
  .sheet__table tr { page-break-inside: avoid; page-break-after: auto; }
  .sheet__table thead { display: table-header-group; }
  .sheet__table tfoot { display: table-footer-group; }
  .sheet__summary, .sheet__foot { page-break-inside: avoid; }
}

/* ==========================================================================
   لوحة المؤشرات — بطاقات صغيرة ملوّنة بلا تمرير
   ========================================================================== */
.board {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;      /* تملأ ما تبقّى من الشاشة فلا يبقى فراغ أسفلها */
  height: 100%;
  min-height: 0;
  gap: .6rem;
}

.board__bar {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-shrink: 0;
  padding: .5rem .85rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
}

.board__scales { display: inline-flex; gap: .2rem; }
.board__scale {
  padding: .3rem .8rem;
  border-radius: 7px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
}
.board__scale:hover { background: color-mix(in srgb, var(--brand-500) 10%, transparent); }
.board__scale.is-active { background: var(--chrome-900); color: #fff; }

.board__grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: .5rem;
  overflow: hidden;
}

/* ---------- البطاقة ---------- */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .1rem;
  min-height: 0;
  padding: .55rem .7rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-top: 3px solid var(--tone, var(--brand-500));
  border-radius: 10px;
  overflow: hidden;
}

.tile__icon {
  position: absolute;
  inset-inline-end: .55rem;
  inset-block-start: .5rem;
  font-size: 1rem;
  color: var(--tone, var(--brand-500));
  opacity: .35;
}

.tile__label {
  font-size: .68rem;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.2;
}

.tile__value {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--tone, var(--text-strong));
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tile__hint {
  font-size: .66rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- بطاقة الأسطر ---------- */
.tile--split .tile__rows {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  margin-top: .15rem;
  min-height: 0;
  overflow: hidden;
}
.tile__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem;
  font-size: .72rem;
  line-height: 1.35;
}
.tile__row em {
  font-style: normal;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile__row b { color: var(--tone, var(--text-strong)); font-weight: 700; }
.tile__row--empty { color: var(--text-muted); justify-content: center; }

/* ---------- الألوان ---------- */
.tone-emerald { --tone: #047857; }
.tone-teal    { --tone: #0f766e; }
.tone-blue    { --tone: #1d4ed8; }
.tone-violet  { --tone: #6d28d9; }
.tone-amber   { --tone: #b45309; }
.tone-rose    { --tone: #be123c; }
.tone-gold    { --tone: #a16207; }
.tone-cyan    { --tone: #0e7490; }
.tone-slate   { --tone: #475569; }

[data-bs-theme="dark"] .tone-emerald { --tone: #34d399; }
[data-bs-theme="dark"] .tone-teal    { --tone: #2dd4bf; }
[data-bs-theme="dark"] .tone-blue    { --tone: #60a5fa; }
[data-bs-theme="dark"] .tone-violet  { --tone: #a78bfa; }
[data-bs-theme="dark"] .tone-amber   { --tone: #fbbf24; }
[data-bs-theme="dark"] .tone-rose    { --tone: #fb7185; }
[data-bs-theme="dark"] .tone-gold    { --tone: #fcd34d; }
[data-bs-theme="dark"] .tone-cyan    { --tone: #22d3ee; }
[data-bs-theme="dark"] .tone-slate   { --tone: #94a3b8; }

/* لوحة المؤشرات: سبع شاشات، عشر بطاقات تملأ كل شاشة */
.board__tabs { flex: 1; min-width: 0; flex-wrap: wrap; align-content: center; }

.board__grid { display: none; }
.board__grid.is-active {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  overflow: hidden;
}

.board__grid.is-active .tile { padding: .75rem .95rem; gap: .3rem; }
.board__grid.is-active .tile__label {
  font-size: clamp(.72rem, .85vw, .9rem);
  white-space: normal;
}
.board__grid.is-active .tile__value {
  font-size: clamp(1.05rem, 1.7vw, 2rem);
  margin-block: auto;
}
.board__grid.is-active .tile__value--name {
  font-size: clamp(.92rem, 1.2vw, 1.35rem);
}
.board__grid.is-active .tile__hint { font-size: clamp(.66rem, .78vw, .82rem); }
.board__grid.is-active .tile__icon { font-size: 1.4rem; }
.board__grid.is-active .tile__row { font-size: clamp(.7rem, .82vw, .86rem); }

/* الشاشات الأضيق: أربعة أعمدة، وآخر بطاقتين بعرض مزدوج فلا تبقى فراغات */
@media (max-width: 1400px) {
  .board__grid.is-active {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
  .board__grid.is-active > *:nth-child(9),
  .board__grid.is-active > *:nth-child(10) { grid-column: span 2; }
}

/* ==========================================================================
   وضع ملء الشاشة — لوحة المؤشرات تأخذ المساحة كلها
   ========================================================================== */
.app-shell.is-focus .sidebar,
.app-shell.is-focus .sidebar-backdrop { display: none; }

.app-shell.is-focus .main-area {
  right: 0;
  bottom: 0;                     /* الشريط السفلي أيضاً */
}

.app-shell.is-focus .app-footer { display: none; }

.app-shell.is-focus .page-content {
  padding: .7rem .9rem .9rem;
  max-width: none;
}

.board__expand { margin-inline-start: 0; flex-shrink: 0; }

/* ==========================================================================
   شاشة تفعيل النسخة
   ========================================================================== */
.licence {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background: var(--body-bg);
}

.licence__card {
  width: min(480px, 100%);
  padding: 1.6rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-top: 4px solid var(--brand-500);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}

.licence__head {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin-bottom: 1.2rem;
}
.licence__head i { font-size: 1.9rem; color: var(--brand-600); }
.licence__head h1 { font-size: 1.15rem; font-weight: 800; margin: 0; }
.licence__head p { font-size: .82rem; color: var(--text-muted); margin: .2rem 0 0; }

.licence__code {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .9rem;
  margin-bottom: .8rem;
  background: color-mix(in srgb, var(--brand-500) 8%, transparent);
  border-radius: 10px;
}
.licence__code > span { font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
.licence__code code {
  flex: 1;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--brand-600);
  direction: ltr;
  text-align: center;
}

.licence__hint {
  font-size: .78rem;
  color: var(--text-muted);
  margin-bottom: 1.2rem;
  line-height: 1.7;
}

.licence__foot {
  margin: 1.2rem 0 0;
  padding-top: .9rem;
  border-top: 1px dashed var(--card-border);
  font-size: .72rem;
  color: var(--text-muted);
  line-height: 1.7;
}