@charset "utf-8";
/* ============================================================
   هيكل النظام: شريط جانبي قابل للطي + شريط علوي + وضع ليلي/نهاري
   يعتمد على متغيّرات app.css ويضيف متغيّرات الهيكل ووضعه الليلي.
   يدعم RTL (عربي/كوردي) وLTR (إنجليزي) عبر خصائص منطقية.
   ============================================================ */

:root {
  --sidebar-width: 268px;
  --sidebar-width-collapsed: 72px;
  --topbar-height: 62px;
  --bottombar-height: 34px;

  --shell-sidebar-bg: #10233C;
  --shell-sidebar-bg-2: #0B1A2E;
  --shell-sidebar-hover: #1B3556;
  --shell-sidebar-active: #1F7DCC;
  --shell-sidebar-text: #A9BAD0;
  --shell-sidebar-title: #FFFFFF;
  --shell-topbar-bg: #FFFFFF;
  --shell-page-bg: #F2F5F9;
  --shell-card-bg: #FFFFFF;

  --shell-transition: 220ms cubic-bezier(.4, 0, .2, 1);
}

/* ---------- الوضع الليلي: إعادة تعريف رموز التصميم ---------- */
:root[data-theme="dark"] {
  --gov-primary: #4A9EE0;
  --gov-primary-700: #2C7CBF;
  --gov-primary-100: #16324B;
  --gov-secondary: #3EA88F;

  --gov-ink: #E6EAF0;
  --gov-ink-2: #C2CBD8;
  --gov-ink-3: #93A0B2;

  --gov-bg: #0D1522;
  --gov-surface: #16202F;
  --gov-surface-alt: #1D2A3B;

  --gov-border: #2A3A4F;
  --gov-border-strong: #3C5070;
  --gov-focus-ring: #64B5F6;

  --success: #4ADE80;
  --success-border: #2E7D4F;
  --success-tint: #13291D;

  --warning: #FBBF6E;
  --warning-border: #8A6520;
  --warning-tint: #2C2210;

  --danger: #F87171;
  --danger-border: #8E3833;
  --danger-tint: #2E1615;

  --info: #7FC4F5;
  --info-border: #2C5F86;
  --info-tint: #12283A;

  --shell-sidebar-bg: #0A1220;
  --shell-sidebar-bg-2: #060C16;
  --shell-sidebar-hover: #16243A;
  --shell-sidebar-text: #97A6BA;
  --shell-topbar-bg: #16202F;
  --shell-page-bg: #0D1522;
  --shell-card-bg: #16202F;

  color-scheme: dark;
}

/* ---------- الأساس ---------- */
html, body {
  background: var(--shell-page-bg);
  color: var(--gov-ink);
  margin: 0;
  min-height: 100%;
}

body {
  font-family: 'Tajawal', var(--font-sans-ar);
  font-size: 15px;
}

html[dir="ltr"] body { font-family: 'Tajawal', var(--font-sans-en); }

/* ============================================================
   الشريط الجانبي
   ============================================================ */
.shell-sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--sidebar-width);
  background: linear-gradient(180deg, var(--shell-sidebar-bg) 0%, var(--shell-sidebar-bg-2) 100%);
  display: flex;
  flex-direction: column;
  z-index: 1040;
  transition: width var(--shell-transition), transform var(--shell-transition);
  box-shadow: 0 0 24px rgba(0, 0, 0, .22);
  overflow: hidden;
}

.shell-brand {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline: 16px;
  text-decoration: none;
  border-block-end: 1px solid rgba(255, 255, 255, .08);
  flex-shrink: 0;
}

.shell-brand:hover { text-decoration: none; }

.shell-brand__logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gov-primary), var(--gov-secondary));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.05rem;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(31, 125, 204, .38);
}

.shell-brand__text { overflow: hidden; white-space: nowrap; }
.shell-brand__title {
  display: block;
  color: var(--shell-sidebar-title);
  font-weight: 700;
  font-size: .84rem;
  line-height: 1.3;
}
.shell-brand__sub {
  display: block;
  color: rgba(255, 255, 255, .45);
  font-size: .68rem;
}

.shell-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 8px 16px;
}

.shell-nav::-webkit-scrollbar { width: 4px; }
.shell-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 4px; }

.shell-nav__section {
  display: block;
  color: rgba(255, 255, 255, .34);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 14px 12px 6px;
  white-space: nowrap;
}

.shell-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  margin-block-end: 2px;
  border-radius: 9px;
  color: var(--shell-sidebar-text);
  text-decoration: none;
  font-size: .86rem;
  white-space: nowrap;
  transition: background var(--shell-transition), color var(--shell-transition);
}

.shell-link:hover {
  background: var(--shell-sidebar-hover);
  color: #fff;
  text-decoration: none;
}

.shell-link.active {
  background: var(--shell-sidebar-active);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 3px 12px rgba(31, 125, 204, .34);
}

.shell-link i {
  font-size: 1.02rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  opacity: .85;
}

.shell-link.active i { opacity: 1; }
.shell-link__text { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.shell-link__badge {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  border-radius: 20px;
  padding: 1px 8px;
  font-size: .68rem;
  font-weight: 700;
}

.shell-link.active .shell-link__badge { background: rgba(255, 255, 255, .28); }

/* دلالة «ابدأ من هنا»: الباب الوحيد المفتوح أمام مكلف لم يُعتمد طلبه بعد */
.shell-link__badge--warn { background: var(--warning, #b26a00); color: #fff; }

.shell-sidebar__footer {
  border-block-start: 1px solid rgba(255, 255, 255, .08);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.shell-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gov-secondary), var(--gov-primary));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  flex-shrink: 0;
}

.shell-user { overflow: hidden; white-space: nowrap; }
.shell-user__name { color: #fff; font-size: .8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.shell-user__role { color: rgba(255, 255, 255, .5); font-size: .68rem; }

/* ---------- حالة الطي (سطح المكتب) ---------- */
body.sidebar-collapsed .shell-sidebar { width: var(--sidebar-width-collapsed); }
body.sidebar-collapsed .shell-brand__text,
body.sidebar-collapsed .shell-link__text,
body.sidebar-collapsed .shell-link__badge,
body.sidebar-collapsed .shell-nav__section,
body.sidebar-collapsed .shell-user { display: none; }
body.sidebar-collapsed .shell-brand,
body.sidebar-collapsed .shell-link,
body.sidebar-collapsed .shell-sidebar__footer { justify-content: center; padding-inline: 0; }
body.sidebar-collapsed .shell-main { margin-inline-start: var(--sidebar-width-collapsed); }

/* ============================================================
   المنطقة الرئيسية والشريط العلوي
   ============================================================ */
.shell-main {
  margin-inline-start: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin var(--shell-transition);
}

.shell-topbar {
  position: sticky;
  top: 0;
  height: var(--topbar-height);
  background: var(--shell-topbar-bg);
  border-block-end: 1px solid var(--gov-border);
  display: flex;
  align-items: center;
  gap: 12px;
  padding-inline: 16px;
  z-index: 1020;
}

.shell-iconbtn {
  width: 38px;
  height: 38px;
  border: 1px solid var(--gov-border);
  background: var(--gov-surface-alt);
  color: var(--gov-ink-2);
  border-radius: 9px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1.05rem;
  transition: background var(--shell-transition), color var(--shell-transition);
}

.shell-iconbtn:hover { background: var(--gov-primary-100); color: var(--gov-primary); }

.shell-topbar__title {
  font-weight: 700;
  font-size: .98rem;
  color: var(--gov-ink);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-topbar__actions { display: flex; align-items: center; gap: 8px; }

.shell-clock {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--gov-ink-3);
  background: var(--gov-surface-alt);
  border: 1px solid var(--gov-border);
  border-radius: 8px;
  padding: 5px 9px;
  direction: ltr;
}

.shell-langswitch { display: flex; gap: 3px; background: var(--gov-surface-alt); border: 1px solid var(--gov-border); border-radius: 9px; padding: 3px; }
.shell-langswitch button {
  border: none;
  background: transparent;
  color: var(--gov-ink-3);
  font-size: .76rem;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 7px;
  cursor: pointer;
}
.shell-langswitch button:hover { color: var(--gov-primary); }
.shell-langswitch button.active { background: var(--gov-primary); color: #fff; }

.shell-userchip {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--gov-border);
  background: var(--gov-surface-alt);
  border-radius: 10px;
  padding: 4px 10px 4px 6px;
}
.shell-userchip__name { font-size: .8rem; font-weight: 600; color: var(--gov-ink); line-height: 1.2; }
.shell-userchip__role { font-size: .68rem; color: var(--gov-ink-3); }

.shell-content { flex: 1; padding: 22px 20px 30px; }
.shell-content > .container-app { max-width: 1280px; margin-inline: auto; }

.shell-bottombar {
  height: var(--bottombar-height);
  background: var(--shell-sidebar-bg-2);
  color: rgba(255, 255, 255, .62);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 16px;
  font-size: .74rem;
}

.shell-bottombar__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 8px #4ADE80;
}

.shell-bottombar__end { margin-inline-start: auto; }

/* ---------- طبقة التعتيم للجوال ---------- */
.shell-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 1035;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--shell-transition), visibility var(--shell-transition);
}
.shell-overlay.show { opacity: 1; visibility: visible; }

/* ============================================================
   الاستجابة للشاشات الصغيرة
   ============================================================ */
@media (max-width: 991px) {
  /* الدرج: الإزاحة تُحسب من متغيّرين لا من محدِّدات متنافسة.
     كتابتها بـ html[dir="rtl"] .shell-sidebar ثم .shell-sidebar.show
     تفشل في العربية: أسبقية الأولى (0,2,1) أعلى من الثانية (0,2,0)
     بسبب عنصر html، فتغلبها ويبقى الشريط خارج الشاشة أبداً.
     هنا كل محدِّد يضبط متغيّراً مختلفاً فلا يتنافسان إطلاقاً. */
  .shell-sidebar {
    width: var(--sidebar-width);
    transform: translateX(-100%);        /* مخفي خارج يسار الشاشة (LTR) */
    transition: transform 260ms cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
  }

  html[dir="rtl"] .shell-sidebar { transform: translateX(100%); }  /* خارج يمين الشاشة (RTL) */

  /* حالة الظهور تُكتب للاتجاهين معاً: لو اكتُفي بـ.shell-sidebar.show
     لبقي محدِّد RTL غالباً عليه فلا ينزلق الشريط في العربية أبداً. */
  .shell-sidebar.show,
  html[dir="rtl"] .shell-sidebar.show { transform: translateX(0); }

  .shell-main { margin-inline-start: 0 !important; }
  body.sidebar-collapsed .shell-sidebar { width: var(--sidebar-width); }
  body.sidebar-collapsed .shell-brand__text,
  body.sidebar-collapsed .shell-link__text,
  body.sidebar-collapsed .shell-nav__section,
  body.sidebar-collapsed .shell-user { display: revert; }
  .shell-clock, .shell-userchip__name, .shell-userchip__role { display: none; }
  .shell-content { padding: 16px 12px 24px; }
}

/* ============================================================
   مكوّنات عامة للصفحات الجديدة
   ============================================================ */
.card-surface {
  background: var(--shell-card-bg);
  border: 1px solid var(--gov-border);
  border-radius: 14px;
  padding: 20px;
  margin-block-end: 18px;
}

.card-surface__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gov-primary);
  margin: 0 0 14px;
  padding-block-end: 10px;
  border-block-end: 1px solid var(--gov-border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.stat-tile {
  background: var(--shell-card-bg);
  border: 1px solid var(--gov-border);
  border-radius: 14px;
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.stat-tile::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 4px;
  height: 100%;
  background: var(--gov-primary);
}

.stat-tile--success::before { background: var(--success); }
.stat-tile--warning::before { background: var(--warning); }
.stat-tile--danger::before { background: var(--danger); }

.stat-tile__label { font-size: .78rem; color: var(--gov-ink-3); margin: 0 0 6px; }
.stat-tile__value { font-size: 1.5rem; font-weight: 700; color: var(--gov-ink); margin: 0; font-variant-numeric: tabular-nums; }
.stat-tile__hint { font-size: .72rem; color: var(--gov-ink-3); margin: 4px 0 0; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;

  /* كل حقل بارتفاعه الطبيعي: تلميحٌ تحت حقلٍ واحد كان يمطّ صفّه كلَّه
     فتهبط الحقول المجاورة وتفترق أسطر الإدخال. المحاذاة من الأعلى تُبقيها
     على سطر واحد مهما اختلف ما تحتها. */
  align-items: start;
}

/* زرّ إجراء بجوار حقل إدخال (جلب البيانات، بحث، تحقق…).
   يُحاذي **سطر الإدخال** لا أعلى الخلية ولا أسفل الصف: يُترك فوقه فراغ
   بقدر سطر العنوان، فيستقيم مع الحقل المجاور بوجود تلميح أو بغيره. */
.field--action { align-self: start; }
.field--action > .btn,
.field--action > button { margin-block-start: calc(.82rem * 1.45 + 5px); }

@media (max-width: 760px) {
  .field--action > .btn,
  .field--action > button { margin-block-start: 0; }
}

.num, .text-end-num { font-variant-numeric: tabular-nums; }
.text-end-num { text-align: end; }

/* خطوات السيناريو */
.stepline { display: flex; gap: 6px; flex-wrap: wrap; margin-block-end: 18px; }
.stepline__item {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--gov-surface-alt);
  border: 1px solid var(--gov-border);
  border-radius: 30px;
  padding: 6px 13px;
  font-size: .78rem;
  color: var(--gov-ink-3);
}
.stepline__item.done { border-color: var(--success-border); background: var(--success-tint); color: var(--success); }
.stepline__item.current { border-color: var(--gov-primary); background: var(--gov-primary-100); color: var(--gov-primary); font-weight: 700; }
.stepline__num {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--gov-border); color: var(--gov-ink-2);
  display: grid; place-items: center; font-size: .68rem; font-weight: 700;
}
.stepline__item.done .stepline__num { background: var(--success); color: #fff; }
.stepline__item.current .stepline__num { background: var(--gov-primary); color: #fff; }

/* شاشات الدخول */
.auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1200px 500px at 50% -10%, var(--gov-primary-100), transparent),
    var(--shell-page-bg);
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--shell-card-bg);
  border: 1px solid var(--gov-border);
  border-radius: 18px;
  padding: 30px 26px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .12);
}

.auth-card__logo {
  width: 56px; height: 56px; margin-inline: auto; margin-block-end: 14px;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--gov-primary), var(--gov-secondary));
  color: #fff; display: grid; place-items: center; font-size: 1.5rem; font-weight: 800;
}

.auth-tabs { display: flex; gap: 6px; margin-block-end: 20px; background: var(--gov-surface-alt); padding: 4px; border-radius: 11px; }
.auth-tabs a {
  flex: 1; text-align: center; padding: 8px; border-radius: 8px;
  font-size: .84rem; font-weight: 600; color: var(--gov-ink-3); text-decoration: none;
}
.auth-tabs a.active { background: var(--gov-primary); color: #fff; }

.otp-input {
  font-size: 1.7rem !important;
  letter-spacing: .5rem;
  text-align: center;
  font-family: var(--font-mono);
  direction: ltr;
}

/* الوثائق الرسمية */
.doc-sheet {
  background: #fff;
  color: #1B1F23;
  border: 1px solid var(--gov-border);
  border-radius: 12px;
  padding: 34px 30px;
  position: relative;
  max-width: 900px;
  margin-inline: auto;
}

/*
   ترويسة الوثيقة: صفّ واحد من ثلاثة أعمدة متساوية الوزن
   [رمز QR] — [الشعار والعنوان] — [رقم الوثيقة وتاريخها]
   فيستوي الشعار مع الباركود بدل أن يطفو أحدهما فوق الآخر.
*/
.doc-sheet__header {
  display: grid;
  grid-template-columns: 130px 1fr 130px;
  align-items: start;
  gap: 16px;
  text-align: center;
  border-block-end: 2px solid var(--gov-primary);
  padding-block-end: 14px;
  margin-block-end: 20px;
}

.doc-sheet__brand { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.doc-sheet__title { font-size: 1.35rem; font-weight: 800; color: var(--gov-primary); margin: 6px 0 2px; }

.doc-sheet__qr { text-align: center; }
.doc-sheet__qr img {
  width: 116px; height: 116px; display: block; margin-inline: auto;
  border: 1px solid #E5E8EC; border-radius: 6px; padding: 4px; background: #fff;
}
.doc-sheet__qr-code { font-size: .64rem; color: #6A737D; margin-block-start: 4px; line-height: 1.5; }

.doc-sheet__meta { font-size: .72rem; color: #3D444B; text-align: start; line-height: 1.9; }
.doc-sheet__meta strong { display: block; font-size: .8rem; color: #1B1F23; }

.doc-sheet__seal { margin-block-start: 30px; display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.doc-sheet table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.doc-sheet th, .doc-sheet td { padding: 8px 10px; border-block-end: 1px solid #E5E8EC; text-align: start; }

/*
   العلامة المائية: شعار الهيئة خلف نص الوثيقة نفسها لا خلف الصفحة كلها،
   فيبقى في وسط الورقة المطبوعة أينما امتد الجدول.
*/
.doc-sheet__watermark {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: min(52%, 360px);
  opacity: .05;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  z-index: 0;
}

.doc-sheet > *:not(.doc-sheet__watermark) { position: relative; z-index: 1; }

.doc-watermark {
  position: absolute; inset-block-start: 34%; inset-inline: 0;
  display: grid; place-items: center;
  font-size: 3.4rem; font-weight: 800; color: rgba(180, 35, 24, .12);
  transform: rotate(-18deg); pointer-events: none; letter-spacing: .2em; z-index: 2;
}

@media (max-width: 700px) {
  .doc-sheet__header { grid-template-columns: 1fr; }
  .doc-sheet__meta { text-align: center; }
}

@media print {
  .shell-sidebar, .shell-topbar, .shell-bottombar, .no-print, .shell-overlay { display: none !important; }
  .shell-main { margin: 0 !important; }
  .shell-content { padding: 0 !important; }
  .doc-sheet { border: none; box-shadow: none; max-width: none; padding: 0; }
  .doc-sheet__header { break-inside: avoid; }
  .doc-sheet table { break-inside: auto; }
  .doc-sheet tr { break-inside: avoid; }
  .doc-sheet thead { display: table-header-group; }
  /* العلامة المائية تُطبع على كل صفحة لا على الأولى وحدها */
  .doc-sheet__watermark { position: fixed; inset-block-start: 45%; }
  body { background: #fff !important; }
  @page { margin: 14mm 12mm; }
}

/* تنبيه غير النهائي */
.nonfinal-note {
  border: 1px dashed var(--warning-border);
  background: var(--warning-tint);
  color: var(--warning);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .82rem;
  margin-block-end: 14px;
}

/* جداول */
.table-wrap { overflow-x: auto; border: 1px solid var(--gov-border); border-radius: 12px; background: var(--shell-card-bg); }
table.data-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
table.data-table thead th {
  background: var(--gov-surface-alt);
  color: var(--gov-ink-2);
  font-weight: 700;
  font-size: .78rem;
  text-align: start;
  padding: 11px 12px;
  border-block-end: 1px solid var(--gov-border);
  white-space: nowrap;
}
table.data-table td, table.data-table tbody th {
  padding: 10px 12px;
  border-block-end: 1px solid var(--gov-border);
  color: var(--gov-ink);
  text-align: start;
  font-weight: 400;
}
table.data-table tbody tr:hover { background: var(--gov-surface-alt); }
table.data-table tr.row-total td { font-weight: 700; background: var(--gov-primary-100); }

/* حقول */
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: .82rem; font-weight: 600; color: var(--gov-ink-2); }
.field .hint { font-size: .72rem; color: var(--gov-ink-3); }

/* محاذاة صناديق الإدخال عبر صفّ الشبكة:
   عناوين الحقول تتفاوت بين سطرٍ وسطرين، وكل حقل عمودٌ مرنٌ مستقل، فتنزل
   صناديق الإدخال إلى ارتفاعاتٍ مختلفة وتبدو الحقول غير مستقيمة. نحجز ارتفاع
   سطرين لكل عنوان داخل الشبكة فتستقيم كل الحقول في جميع نماذج المشروع.
   (على الهاتف تصير الشبكة عموداً واحداً فلا حاجة للحجز — يُلغى أدناه.) */
.form-grid .field label {
  line-height: 1.35;
  min-height: calc(1.35em * 2);
  display: block;
}
.field input, .field select, .field textarea {
  background: var(--gov-surface);
  border: 1px solid var(--gov-border-strong);
  color: var(--gov-ink);
  border-radius: 9px;
  padding: 9px 11px;
  font-size: .9rem;
  font-family: inherit;
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--gov-focus-ring);
  outline-offset: 1px;
  border-color: var(--gov-focus-ring);
}
.field input[readonly], .field input:disabled { background: var(--gov-surface-alt); color: var(--gov-ink-3); }
.req { color: var(--danger); }

/* أزرار */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 9px; padding: 9px 16px; font-size: .88rem; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  font-family: inherit; transition: background var(--shell-transition);
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--gov-primary); color: #fff; }
.btn--primary:hover { background: var(--gov-primary-700); color: #fff; }
.btn--secondary { background: var(--gov-surface-alt); color: var(--gov-ink); border-color: var(--gov-border-strong); }
.btn--success { background: var(--success); color: #fff; }
.btn--danger { background: var(--danger); color: #fff; }
.btn--ghost { background: transparent; color: var(--gov-primary); border-color: var(--gov-border); }
.btn--lg { padding: 12px 22px; font-size: .95rem; }
.btn--sm { padding: 5px 11px; font-size: .78rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn--link { background: none; border: none; color: var(--gov-primary); padding: 3px 6px; }

/* شارات */
.badge {
  display: inline-block; border-radius: 20px; padding: 3px 10px;
  font-size: .74rem; font-weight: 700; white-space: nowrap;
}
.gov-badge--neutral, .badge--neutral { background: var(--gov-surface-alt); color: var(--gov-ink-2); border: 1px solid var(--gov-border); }
.gov-badge--info, .badge--info { background: var(--info-tint); color: var(--info); border: 1px solid var(--info-border); }
.gov-badge--success, .badge--success { background: var(--success-tint); color: var(--success); border: 1px solid var(--success-border); }
.gov-badge--warning, .badge--warning { background: var(--warning-tint); color: var(--warning); border: 1px solid var(--warning-border); }
.gov-badge--danger, .badge--danger { background: var(--danger-tint); color: var(--danger); border: 1px solid var(--danger-border); }

/* تنبيهات */
.alert { border-radius: 11px; padding: 12px 15px; margin-block-end: 14px; font-size: .87rem; border: 1px solid; display: flex; gap: 9px; }
.alert--success { background: var(--success-tint); border-color: var(--success-border); color: var(--success); }
.alert--danger { background: var(--danger-tint); border-color: var(--danger-border); color: var(--danger); }
.alert--warning { background: var(--warning-tint); border-color: var(--warning-border); color: var(--warning); }
.alert--info { background: var(--info-tint); border-color: var(--info-border); color: var(--info); }

.page-header { margin-block-end: 20px; }
.page-header h1 { font-size: 1.45rem; font-weight: 800; color: var(--gov-ink); margin: 0 0 5px; }
.page-header .eyebrow { font-size: .76rem; color: var(--gov-primary); font-weight: 700; margin: 0 0 4px; }
.page-header .lede { color: var(--gov-ink-3); font-size: .88rem; margin: 0; max-width: 70ch; }
.page-header__row { display: flex; justify-content: space-between; align-items: start; gap: 16px; flex-wrap: wrap; }

.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 0; }
.dl-grid > div { background: var(--gov-surface-alt); border: 1px solid var(--gov-border); border-radius: 10px; padding: 10px 12px; }
.dl-grid dt { font-size: .74rem; color: var(--gov-ink-3); margin-block-end: 3px; }
.dl-grid dd { margin: 0; font-weight: 600; color: var(--gov-ink); font-size: .92rem; }

/* شبكة البيانات تُبنى بطاقاتٍ: <div><dt>العنوان</dt><dd>القيمة</dd></div>.
   وزوجٌ مجرَّد بلا غلاف كان يتناثر في خليتين منفصلتين فيفترق العنوان عن قيمته
   ويخرج العرض مشوَّهاً. هذه الشبكة الاحتياطية تُبقيه مقروناً ومقروءاً ولو نُسي
   الغلاف — الخطأ يبقى خطأً، لكنه لا يُخرِج صفحةً مكسورة إلى المكلف. */
.dl-grid > dt {
  background: var(--gov-surface-alt);
  border: 1px solid var(--gov-border);
  border-end-end-radius: 0; border-end-start-radius: 0;
  border-start-start-radius: 10px; border-start-end-radius: 10px;
  border-block-end: 0; padding: 10px 12px 0;
}
.dl-grid > dd {
  background: var(--gov-surface-alt);
  border: 1px solid var(--gov-border);
  border-start-start-radius: 0; border-start-end-radius: 0;
  border-end-end-radius: 10px; border-end-start-radius: 10px;
  border-block-start: 0; padding: 3px 12px 10px;
}

#blazor-error-ui {
  background: var(--danger-tint);
  color: var(--danger);
  border-block-start: 2px solid var(--danger);
  bottom: 0; display: none; left: 0; right: 0;
  padding: 10px 16px; position: fixed; z-index: 2000; font-size: .85rem;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; inset-inline-end: 14px; inset-block-start: 9px; }


/* ============================================================
   الشعار الرسمي للهيئة العامة للضرائب
   يظهر في نموذج الدخول والشريط الجانبي وكل وثيقة رسمية،
   ويُطبع بألوانه الأصلية (المتصفحات تُسقط الخلفيات والصور
   في الطباعة إلا بـprint-color-adjust: exact).
   ============================================================ */

.auth-card__emblem {
  display: block;
  width: 92px;
  max-width: 92px;
  height: auto;
  margin-inline: auto;
  margin-block-end: 12px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .16));
}

.shell-brand__emblem {
  width: 38px;
  max-width: 38px;
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3));
}

body.sidebar-collapsed .shell-brand__emblem { margin-inline: auto; }

.doc-sheet__emblem {
  display: block;
  width: 84px;
  max-width: 84px;
  height: auto;
  margin-inline: auto;
  margin-block-end: 10px;
}

/* شعار مائي خفيف على الوثائق الرسمية — لا يعيق القراءة ولا الطباعة */
.doc-sheet::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: 62%;
  aspect-ratio: 806 / 959;
  background: url("img/gct-logo.png") center / contain no-repeat;
  opacity: .045;
  pointer-events: none;
}

/* ملغاة: السطر 604 يضبط الترتيب ويستثني العلامة المائية.
   تعميمها هنا كان يُعيد العلامة إلى تدفّق الصفحة فتُضيف 428 بكسل من
   الارتفاع — وهو ما كان يدفع الوثيقة إلى ورقة ثانية عند الطباعة. */

@media print {
  /* إلزام المتصفح بطباعة الشعار والألوان كما هي */
  .auth-card__emblem,
  .doc-sheet__emblem,
  .doc-sheet::before,
  .doc-sheet {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .doc-sheet__emblem { width: 76px; }
  .doc-sheet::before { opacity: .05; }
}

/* ---------- ترويسة الطباعة الرسمية (تظهر على الورق فقط) ---------- */
.print-letterhead { display: none; }

@media print {
  .print-letterhead {
    display: block;
    text-align: center;
    padding-block-end: 12px;
    margin-block-end: 16px;
    border-block-end: 2px solid #0F4C81;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .print-letterhead__emblem {
    width: 72px;
    height: auto;
    display: block;
    margin: 0 auto 8px;
  }

  .print-letterhead__line { margin: 0; font-size: 11pt; color: #3D444B; }
  .print-letterhead__line--strong { color: #0F4C81; font-weight: 700; }

  .print-letterhead__title {
    margin: 8px 0 0;
    font-size: 14pt;
    font-weight: 700;
    color: #0F4C81;
  }

  .print-letterhead__ref { margin: 2px 0 0; font-size: 10pt; color: #6A737D; }

  /* الأزرار والنماذج التفاعلية لا تُطبع */
  .page-header__row > div:last-child button,
  .btn { display: none !important; }
}


/* ════════════════════════════════════════════════════════════
   الاستجابة الكاملة لكل القياسات (هاتف / لوحي / سطح مكتب)
   مبنية على نقاط: 1200 · 991 · 767 · 575 · 400
   كل الخصائص منطقية (inline-start/end) فتعمل عربي/كوردي (RTL)
   وإنجليزي (LTR) دون تكرار.
   ════════════════════════════════════════════════════════════ */

html {
  -webkit-text-size-adjust: 100%;   /* منع تكبير النص تلقائياً عند الدوران */
  text-size-adjust: 100%;
}

/* لا تمرير أفقي للصفحة بأي حال */
body { overflow-x: hidden; }

/* ارتفاع الشاشة الفعلي في الهاتف: 100vh يحسب شريط المتصفح فيقفز التخطيط */
.shell-main { min-height: 100vh; min-height: 100dvh; }
.auth-wrap { min-height: 100vh; min-height: 100dvh; }

/* زرّا الشريط الجانبي: مصدر واحد للتحكّم بالظهور بدل أدوات bootstrap */
.shell-burger { display: none; }
.shell-collapse-btn { display: grid; }

/* السماح للعناصر المرنة بالتقلّص وإظهار «…» بدل الدفع خارج الشاشة */
.shell-topbar > *, .shell-topbar__actions > * { min-width: 0; }
.shell-brand__text, .shell-user, .shell-userchip { min-width: 0; }

/* منطقة المحتوى: لا حشو مزدوج (shell-content + container-app) */
.shell-content > .container-app { padding-inline: 0; width: 100%; }

/* الجداول تمرّر أفقياً بسلاسة على اللمس، ولا تنضغط أعمدتها */
.table-wrap { overscroll-behavior-x: contain; }

/* الصور والأكواد لا تتجاوز حدود الحاوية أبداً */
img, svg, canvas { max-width: 100%; }
pre, code { overflow-wrap: anywhere; }

/* عناوين مرنة تتدرّج مع عرض الشاشة */
.page-header h1 { font-size: clamp(1.15rem, 1rem + 1.2vw, 1.45rem); }
.doc-sheet__title { font-size: clamp(1.05rem, .9rem + 1.4vw, 1.4rem); }

/* قفل التمرير أثناء فتح الدرج (صنف لا نمط مضمّن، فيُرفع دائماً) */
body.sidebar-open { overflow: hidden; }

/* أمان الشاشات ذات الحافة المنحنية/النتوء */
.shell-sidebar { padding-block-end: env(safe-area-inset-bottom); }
.shell-bottombar { padding-block-end: env(safe-area-inset-bottom); }

/* ---------- شاشات متوسطة: تضييق الشريط الجانبي ---------- */
@media (max-width: 1199px) {
  :root { --sidebar-width: 240px; }
  .shell-content { padding: 18px 16px 26px; }
}

/* ---------- لوحي وهاتف: الشريط الجانبي يصبح درجاً ---------- */
@media (max-width: 991px) {
  .shell-burger { display: grid; }
  .shell-collapse-btn { display: none; }

  .shell-sidebar,
  body.sidebar-collapsed .shell-sidebar {
    width: min(300px, 86vw);
    box-shadow: 0 0 40px rgba(0, 0, 0, .45);
  }

  /* الدرج يمرّر داخلياً على الهواتف القصيرة */
  .shell-nav { overscroll-behavior: contain; }

  .shell-topbar { padding-inline: 12px; gap: 8px; }
  .shell-topbar__actions { gap: 6px; }
  .shell-topbar__title { font-size: .9rem; }
  .shell-content { padding: 16px 12px 24px; }
  .card-surface { padding: 16px; }
}

/* ---------- هاتف ---------- */
@media (max-width: 767px) {
  :root { --topbar-height: 56px; }

  .shell-iconbtn { width: 36px; height: 36px; font-size: 1rem; }
  .shell-userchip { display: none; }
  .shell-langswitch button { padding: 4px 7px; font-size: .72rem; }

  .shell-bottombar { font-size: .68rem; padding-inline: 12px; }
  .shell-bottombar__end { display: none; }

  .shell-content { padding: 14px 10px 22px; }
  .card-surface { padding: 14px 12px; border-radius: 12px; margin-block-end: 14px; }
  .card-surface__title { font-size: .94rem; }

  /* نموذج بعمود واحد — حقلان جانب بعض على الهاتف يكسران القراءة */
  .form-grid { grid-template-columns: 1fr; gap: 12px; }
  /* عمودٌ واحد لا يحتاج حجز ارتفاع العنوان — يُلغى لتوفير المسافة */
  .form-grid .field label { min-height: 0; }
  .dl-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .stat-tile { padding: 13px; }
  .stat-tile__value { font-size: 1.25rem; }

  /* حقول بحجم 16px حتى لا يُكبِّر iOS الصفحة عند التركيز على الحقل */
  .field input, .field select, .field textarea { font-size: 16px; padding: 10px 12px; }

  /* أهداف لمس مريحة */
  .btn { padding: 10px 15px; min-height: 42px; }
  .btn--sm { min-height: 34px; padding: 6px 12px; }
  .btn--lg { width: 100%; }

  .stepline { gap: 5px; }
  .stepline__item { font-size: .72rem; padding: 5px 10px; }

  table.data-table { font-size: .8rem; }
  table.data-table thead th { padding: 9px 10px; font-size: .72rem; }
  table.data-table td, table.data-table tbody th { padding: 8px 10px; }

  /* الجداول ذات الترويسة تُمرَّر أفقياً بدل انضغاط الأعمدة */
  .table-wrap table.data-table:has(thead) { min-width: 560px; }

  /* الوثائق الرسمية: رمز QR يخرج من الوضع المطلق كي لا يغطّي الترويسة */
  .doc-sheet { padding: 20px 14px; border-radius: 10px; }
  .doc-sheet__qr { position: static; margin-block-end: 14px; }
  .doc-sheet__qr img { width: 92px; height: 92px; }
  .doc-sheet__seal { flex-direction: column; align-items: stretch; gap: 14px; }
  .doc-sheet table { font-size: .82rem; }
  .doc-sheet th, .doc-sheet td { padding: 7px 8px; }
  .doc-watermark { font-size: 2.4rem; }

  .certificate { padding: 20px 14px; }
  .certificate__qr { position: static; margin-block-end: 14px; }
  .certificate__qr img { width: 96px; height: 96px; }
  .certificate__seal { flex-direction: column; gap: 14px; align-items: stretch; }

  /* شاشات الدخول */
  .auth-wrap { padding: 16px 12px; align-items: start; padding-block-start: 28px; }
  .auth-card { padding: 22px 18px; border-radius: 14px; }
  .auth-card__emblem { width: 76px; max-width: 76px; }
  .otp-input { font-size: 1.35rem !important; letter-spacing: .35rem; }

  .alert { font-size: .82rem; padding: 11px 12px; }
  .page-header { margin-block-end: 16px; }
}

/* ---------- هاتف صغير ---------- */
@media (max-width: 575px) {
  .shell-topbar__title { display: none; }   /* العنوان مكرّر مع الدرج */
  .shell-clock { display: none; }
  .shell-sidebar { width: min(300px, 92vw); }
  .shell-content { padding: 12px 8px 20px; }
  .card-surface { padding: 12px 10px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .doc-sheet__emblem { width: 68px; max-width: 68px; }
}

@media (max-width: 400px) {
  .stat-grid { grid-template-columns: 1fr; }
  .shell-langswitch button { padding: 4px 5px; font-size: .68rem; }
  .auth-card { padding: 18px 14px; }
  .stepline__item .stepline__num { display: none; }
}

/* ---------- هاتف بالوضع الأفقي: الارتفاع هو الشحيح ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --topbar-height: 48px; }
  .shell-bottombar { display: none; }
  .auth-wrap { align-items: start; padding-block: 14px; }
  .auth-card__emblem { width: 56px; max-width: 56px; margin-block-end: 8px; }
}

/* ---------- أجهزة اللمس: مساحات نقر أكبر ولا تأثيرات تحويم ---------- */
@media (hover: none) {
  .shell-link { padding: 11px 12px; }
  .shell-iconbtn, .btn { touch-action: manipulation; }
  table.data-table tbody tr:hover { background: transparent; }
}

/* ---------- صفوف الأزرار المضمّنة تنزل سطراً على الهاتف ----------
   عدة صفحات تستخدم style="display:flex" مضمّناً بلا flex-wrap،
   فتخرج أزرارها خارج الشاشة الضيقة. القاعدة تضيف الانسياب لها كلها
   دون تعديل كل صفحة، لأن النمط المضمّن لا يحدّد flex-wrap فلا يتغلّب. */
@media (max-width: 767px) {
  [style*="display:flex"],
  [style*="display: flex"] { flex-wrap: wrap; }

  /* النصوص الطويلة (أرقام ضريبية، بريد، مراجع) تُكسَر ولا تمدّ الجدول */
  table.data-table td, table.data-table th,
  .doc-sheet td, .doc-sheet th,
  .page-header .lede, .dl-grid dd { overflow-wrap: break-word; }
}

/* ════════════════════════════════════════════════════════════
   واجهة إعادة الاتصال بدائرة Blazor
   الأصناف يضبطها Blazor نفسه على #components-reconnect-modal:
   show (يحاول) · hide (نجح) · failed (نفدت المحاولات) · rejected
   (الدائرة انتهت على الخادم فلا مفرّ من إعادة التحميل).
   ════════════════════════════════════════════════════════════ */

.reconnect-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(6, 12, 22, .72);
  padding: 20px;
  place-items: center;
}

.reconnect-modal.components-reconnect-show,
.reconnect-modal.components-reconnect-failed,
.reconnect-modal.components-reconnect-rejected { display: grid; }

.reconnect-modal.components-reconnect-hide { display: none; }

.reconnect-modal__box {
  background: var(--shell-card-bg);
  color: var(--gov-ink);
  border: 1px solid var(--gov-border);
  border-radius: 16px;
  padding: 24px 22px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .4);
}

.reconnect-modal__spinner {
  width: 38px;
  height: 38px;
  margin: 0 auto 14px;
  border: 3px solid var(--gov-border);
  border-block-start-color: var(--gov-primary);
  border-radius: 50%;
  animation: gct-spin 900ms linear infinite;
}

@keyframes gct-spin { to { transform: rotate(360deg); } }

.reconnect-modal__box p { margin: 0; font-size: .9rem; line-height: 1.6; }
.reconnect-modal__box p strong { display: block; font-size: .98rem; margin-block-end: 4px; }
.reconnect-modal__box p span { color: var(--gov-ink-3); font-size: .82rem; }

/* كل حالة تُظهر رسالتها وحدها */
.reconnect-modal__retry,
.reconnect-modal__failed,
.reconnect-modal__rejected { display: none; }

.components-reconnect-show .reconnect-modal__retry { display: block; }
.components-reconnect-failed .reconnect-modal__failed { display: block; }
.components-reconnect-rejected .reconnect-modal__rejected { display: block; }

.components-reconnect-failed .reconnect-modal__failed strong { color: var(--danger); }
.components-reconnect-rejected .reconnect-modal__rejected strong { color: var(--warning); }

/* الأزرار تظهر فقط حين يتوقّف الوصل الآلي */
.reconnect-modal__actions { display: none; gap: 8px; justify-content: center; margin-block-start: 16px; flex-wrap: wrap; }
.components-reconnect-failed .reconnect-modal__actions { display: flex; }

/* أثناء المحاولة الآلية لا داعي للمؤشّر الدوّار في حالة الانتهاء */
.components-reconnect-rejected .reconnect-modal__spinner { animation-duration: 1.6s; }

@media print { .reconnect-modal { display: none !important; } }

/* خط سير السنة الضريبية (المراحل من التقديم إلى الاعتماد) */
.tax-timeline { list-style: none; margin: 6px 0 0; padding: 0; }

.tax-timeline__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-block: 10px;
  border-inline-start: 2px solid var(--gov-border);
  padding-inline-start: 16px;
  margin-inline-start: 13px;
  position: relative;
}

.tax-timeline__item:last-child { border-inline-start-color: transparent; }

.tax-timeline__dot {
  position: absolute;
  inset-inline-start: -14px;
  inset-block-start: 10px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gov-surface-alt);
  border: 2px solid var(--gov-border);
  font-size: .78rem;
  color: var(--gov-ink-3);
}

.tax-timeline__item--done .tax-timeline__dot { background: var(--success-tint); border-color: var(--success); color: var(--success); }
.tax-timeline__item--done { border-inline-start-color: var(--success); }
.tax-timeline__item--active .tax-timeline__dot { background: var(--info-tint); border-color: var(--info); color: var(--info); }
.tax-timeline__item--blocked .tax-timeline__dot { background: var(--danger-tint); border-color: var(--danger); color: var(--danger); }
.tax-timeline__item--blocked { border-inline-start-color: var(--danger); }
.tax-timeline__item--na .tax-timeline__dot { opacity: .55; }

@media print {
  .tax-timeline__item { break-inside: avoid; }
}

/* ---------- شريط النيابة بتفويض ---------- */
/* الوكيل يجب أن يرى دائماً أنه لا يعمل على ملفه — الخلط بين الملفات
   أخطر ما في التمثيل الإلكتروني. */
.acting-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--warning-tint);
  border-block-end: 2px solid var(--warning-border);
  color: var(--warning);
  padding: 9px 16px;
  font-size: .84rem;
}

.acting-banner i { font-size: 1.05rem; }
.acting-banner span { flex: 1; min-width: 200px; }

@media print { .acting-banner { display: none; } }

/* ---------- جرس الإعلامات داخل المنصة ---------- */
.bell { position: relative; }

.bell__button { position: relative; }

.bell__badge {
  position: absolute;
  inset-block-start: -4px;
  inset-inline-end: -4px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: 9px;
  background: var(--danger);
  color: #fff;
  font-size: .64rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px var(--shell-topbar-bg);
}

.bell__panel {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  width: min(340px, 92vw);
  background: var(--shell-card-bg);
  border: 1px solid var(--gov-border);
  border-radius: 12px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .22);
  z-index: 1200;
  overflow: hidden;
}

.bell__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-block-end: 1px solid var(--gov-border);
  font-size: .86rem;
}

.bell__empty {
  margin: 0;
  padding: 18px 14px;
  text-align: center;
  color: var(--gov-ink-3);
  font-size: .82rem;
}

.bell__list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }

.bell__list li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  border-block-end: 1px solid var(--gov-border);
}

.bell__list li:last-child { border-block-end: none; }

.bell__subject { font-size: .82rem; color: var(--gov-ink); font-weight: 600; }
.bell__time { font-size: .7rem; color: var(--gov-ink-3); font-variant-numeric: tabular-nums; }

.bell__all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  font-size: .8rem;
  border-block-start: 1px solid var(--gov-border);
  background: var(--gov-surface-alt);
}

/* ---------------------------------------------------------------------------
   الهاتف: عنوان الشريط يختفي (سطر 995) فتنزاح أزرار الشريط إلى حافة الشاشة،
   وقائمة الإعلامات المربوطة بالزر تمتدّ خارج الحافة فتُقتطع. على الشاشات
   الصغيرة تُثبَّت القائمة في **الشاشة** لا في الزر، وتأخذ عرضها كاملاً ناقص
   هامشين، فلا تعتمد سلامتها على موضع الزر.
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .bell__panel {
    position: fixed;
    inset-block-start: calc(var(--topbar-height, 56px) + 8px);
    inset-inline: 12px;
    width: auto;
    max-height: calc(100vh - var(--topbar-height, 56px) - 28px);
    max-height: calc(100dvh - var(--topbar-height, 56px) - 28px);
    overflow-y: auto;
  }

  /* القائمة الداخلية تتمدّد ضمن اللوحة بدل سقفٍ ثابت يُنتج شريطَي تمرير */
  .bell__list { max-height: none; }
}

/* حتى على الشاشات الكبيرة: لا تتجاوز اللوحة عرض النافذة مهما كان موضع الزر */
.bell__panel { max-width: calc(100vw - 24px); }

@media print { .bell { display: none; } }

/* ---------- الوثيقة الجامعة للحسابات الختامية ---------- */
.doc-main {
  border: 1px solid var(--gov-border-strong);
  border-radius: 12px;
  padding: 14px 16px;
  margin-block-start: 14px;
  background: var(--gov-surface-alt);
}

.doc-main__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-block-end: 8px;
}

.doc-main__head strong { font-size: .9rem; margin-inline-end: 6px; }

.doc-main__file {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--shell-card-bg);
  border: 1px solid var(--gov-border);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: .84rem;
}

.doc-main__file i { color: var(--success); font-size: 1.05rem; }

.doc-main__covers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px 16px;
}

.doc-main__covers label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 400;
  cursor: pointer;
}

.doc-main__covers input { width: auto; }

/* ---------- بيانات اعتماد تُعرض مرة واحدة ---------- */
.cred-box {
  display: grid;
  gap: 8px;
  margin-block-start: 8px;
  background: var(--shell-card-bg);
  border: 1px dashed var(--success-border);
  border-radius: 9px;
  padding: 10px 12px;
}
.cred-box > div { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cred-box span { font-size: .78rem; color: var(--gov-ink-3); }
.cred-box b {
  font-family: var(--font-mono);
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--gov-ink);
  user-select: all;
}


/* ============================================================
   الوثائق الرسمية: ورقة واحدة عند الطباعة، وقراءة مريحة على الهاتف
   ============================================================ */

.doc-sheet__section {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gov-primary);
  margin: 18px 0 8px;
}
.doc-sheet__section--first { margin-block-start: 0; }

/* ---------- على الهاتف: الوثيقة تُقرأ لا تُتفحَّص بالتكبير ---------- */
@media (max-width: 767px) {
  .doc-sheet {
    padding: 18px 14px;
    font-size: 15px;
    line-height: 1.7;
  }

  /* الترويسة تنزل أعمدةً واحداً تلو الآخر بدل ثلاثة أعمدة ضيّقة */
  .doc-sheet__header {
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: center;
  }

  .doc-sheet__meta {
    font-size: .8rem;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 12px;
    background: var(--gov-surface-alt);
    border-radius: 8px;
    padding: 8px 10px;
  }
  .doc-sheet__meta strong { font-size: .84rem; }

  .doc-sheet__brand img { width: 62px; height: auto; }
  .doc-sheet__section { font-size: .95rem; }

  /* الجداول: مقروءة لا مضغوطة — والعرض الزائد يُمرَّر أفقياً داخل إطاره */
  .doc-sheet table { font-size: .86rem; }
  .doc-sheet th, .doc-sheet td { padding: 8px 8px; }
  .doc-sheet__body { overflow-x: auto; }

  .doc-sheet__qr img { width: 104px; height: 104px; }
}

/* ---------- الطباعة: تُختزل الوثيقة في ورقة واحدة ---------- */
@media print {
  @page { size: A4 portrait; margin: 10mm 11mm; }

  .doc-sheet {
    padding: 0;
    font-size: 9.4pt;
    line-height: 1.42;
  }

  /* الترويسة تنكمش: الشعار والباركود يأخذان ثلث ما يأخذانه على الشاشة */
  .doc-sheet__header {
    grid-template-columns: 96px 1fr 116px;
    gap: 10px;
    padding-block-end: 7px;
    margin-block-end: 9px;
  }
  .doc-sheet__qr img { width: 78px !important; height: 78px !important; }
  .doc-sheet__qr-code { font-size: .56rem; margin-block-start: 2px; }
  .doc-sheet__brand img { width: 46px !important; height: auto !important; }
  .doc-sheet__brand p { font-size: 7.6pt !important; line-height: 1.3; }
  .doc-sheet__title { font-size: 13pt !important; margin: 2px 0 0 !important; }
  .doc-sheet__meta { font-size: 7.4pt; line-height: 1.5; }
  .doc-sheet__meta strong { font-size: 8pt; }

  /*
     المتن عمودان: الوثيقة سلسلة جداول مفاتيح وقيم، وصفّها في عمود واحد
     يهدر نصف عرض الورقة ويدفعها إلى صفحة ثانية. الجدول لا يُقسَّم بين
     عمودين بل ينتقل كاملاً — فلا يُقرأ نصفه هنا ونصفه هناك.
  */
  .doc-sheet__body {
    column-count: 2;
    column-gap: 8mm;
    /* balance لا auto: الأخيرة تملأ العمود الأول وتترك الثاني فارغاً
       فتبقى الوثيقة بطولها كما كانت، وهو نقيض المقصود. */
    column-fill: balance;
  }
  .doc-sheet__body > *,
  .doc-sheet__body table,
  .doc-sheet__body p { break-inside: avoid; }

  .doc-sheet__section {
    font-size: 8.6pt !important;
    margin: 7px 0 3px !important;
    break-after: avoid;
  }
  .doc-sheet__section--first { margin-block-start: 0 !important; }

  .doc-sheet table { font-size: 8.2pt; margin: 0; }
  .doc-sheet th, .doc-sheet td { padding: 2.6px 5px; }

  .doc-sheet__seal {
    margin-block-start: 8px;
    padding-block-start: 6px;
    border-block-start: 1px solid #C9CFD6;
    font-size: 8pt;
    break-inside: avoid;
  }
  .doc-sheet__seal p { line-height: 1.4; }

  .nonfinal-note, .doc-sheet__body p[style] { font-size: 7.8pt !important; padding: 5px 8px !important; }

  /* العلامة المائية أخفت: الحبر للنص لا للزينة */
  .doc-sheet__watermark { opacity: .04 !important; }
}


/* ============================================================
   ورقة التبليغ الورقي: صفحة واحدة بقسمين وخط قصّ بينهما
   ============================================================ */

.notice-sheet {
  background: #fff;
  color: #1B1F23;
  border: 1px solid var(--gov-border);
  border-radius: 12px;
  padding: 26px 24px;
  max-width: 900px;
  margin-inline: auto;
}

.notice-part { display: grid; gap: 12px; }

/* ---------- ترويسة ---------- */
.notice-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 14px;
  border-block-end: 2px solid var(--gov-primary);
  padding-block-end: 10px;
}

.notice-head__brand { display: flex; gap: 10px; align-items: center; }
.notice-head__brand img { flex-shrink: 0; }
.notice-head__ministry { font-size: .74rem; color: #3D444B; margin: 0; }
.notice-head__authority { font-size: .82rem; font-weight: 700; color: #0F4C81; margin: 0; }

.notice-head__title { text-align: center; }
.notice-head__title h2 {
  font-size: 1.3rem; font-weight: 800; color: #0F4C81; margin: 0;
  letter-spacing: .02em;
}
.notice-head__title p { font-size: .78rem; color: #3D444B; margin: 2px 0 0; }

.notice-head__meta {
  display: grid;
  grid-template-columns: auto auto;
  gap: 1px 8px;
  justify-content: end;
  align-content: start;
  font-size: .72rem;
  color: #3D444B;
}
.notice-head__meta strong { color: #1B1F23; font-size: .78rem; }

/* ---------- المرسل إليه ---------- */
.notice-to {
  border: 1px solid #D8DEE6;
  border-radius: 8px;
  padding: 10px 12px;
  background: #F7F9FB;
}
.notice-to__label { font-size: .7rem; color: #6A737D; margin: 0; letter-spacing: .06em; }
.notice-to__name { font-size: 1.02rem; font-weight: 700; margin: 2px 0 6px; }

.notice-to__grid {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 2px 10px;
  margin: 0 0 6px;
  font-size: .78rem;
}
.notice-to__grid dt { color: #6A737D; }
.notice-to__grid dd { margin: 0; font-weight: 600; }
.notice-to__address { font-size: .82rem; margin: 0; }

/* ---------- المتن ---------- */
.notice-body__subject { font-size: .92rem; line-height: 1.9; margin: 0 0 10px; }

.notice-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.notice-table th, .notice-table td {
  padding: 6px 9px;
  border: 1px solid #E5E8EC;
  text-align: start;
}
.notice-table th { background: #F2F5F9; color: #3D444B; font-weight: 600; width: 18%; }

.notice-legal {
  font-size: .78rem;
  line-height: 1.8;
  border-inline-start: 3px solid #9A6700;
  background: #FFF8E1;
  color: #6B4E00;
  padding: 8px 11px;
  border-radius: 0 6px 6px 0;
  margin: 10px 0 0;
}

/* ---------- التذييل ---------- */
.notice-foot { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.notice-foot__label { font-size: .72rem; color: #6A737D; margin: 0 0 22px; }
.notice-foot__line { border-block-start: 1px solid #9AA4AE; min-width: 190px; margin: 0; padding-block-start: 3px; }

.notice-foot__qr { text-align: center; }
.notice-foot__qr img { width: 74px; height: 74px; display: block; }
.notice-foot__qr span { font-size: .6rem; color: #6A737D; }

/* ---------- خط القص ---------- */
.notice-cut {
  border-block-start: 2px dashed #9AA4AE;
  margin-block: 20px 16px;
  text-align: center;
  position: relative;
}
.notice-cut span {
  position: relative;
  inset-block-start: -11px;
  background: #fff;
  padding-inline: 10px;
  font-size: .7rem;
  color: #6A737D;
}

/* ---------- وصل التبليغ ---------- */
.notice-part--receipt { background: #FCFCFD; }

.notice-receipt__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  border-block-end: 1px solid #D8DEE6;
  padding-block-end: 6px;
}
.notice-receipt__head h2 { font-size: 1.05rem; font-weight: 800; color: #0F4C81; margin: 0; }
.notice-receipt__head span { font-size: .72rem; color: #6A737D; }

.notice-receipt__intro { font-size: .8rem; margin: 0; color: #3D444B; }

.notice-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px 14px;
}
.notice-field { display: grid; gap: 3px; }
.notice-field--wide { grid-column: 1 / -1; }
.notice-field span { font-size: .7rem; color: #6A737D; }
.notice-field strong { font-size: .84rem; font-weight: 600; }

.notice-fill {
  border-block-end: 1px solid #9AA4AE;
  min-height: 20px;
  display: block;
}
.notice-fill--tall { min-height: 40px; }

.notice-reasons { font-size: .78rem; }
.notice-reasons__label { margin: 0 0 4px; color: #3D444B; font-weight: 600; }
.notice-reasons ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2px 14px;
}

.notice-receipt__sign { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* ---------- الهاتف ---------- */
@media (max-width: 767px) {
  .notice-sheet { padding: 16px 13px; }
  .notice-head { grid-template-columns: 1fr; text-align: center; }
  .notice-head__brand { justify-content: center; }
  .notice-head__meta { justify-content: center; }
  .notice-to__grid { grid-template-columns: auto 1fr; }
  .notice-table { font-size: .78rem; }
  .notice-table th { width: auto; }
  .notice-foot, .notice-receipt__sign { flex-direction: column; align-items: stretch; }
}

/* ---------- الطباعة: القسمان على ورقة واحدة ---------- */
@media print {
  @page { size: A4 portrait; margin: 9mm 10mm; }

  .notice-sheet {
    border: none;
    border-radius: 0;
    padding: 0;
    max-width: none;
    font-size: 9.2pt;
    line-height: 1.45;
  }

  /* لا تُقسَّم الورقة: القسمان ووصلهما على صفحة واحدة */
  .notice-part, .notice-fields, .notice-table, .notice-reasons { break-inside: avoid; }
  .notice-cut { break-inside: avoid; break-after: avoid; margin-block: 12px 10px; }

  .notice-head__title h2 { font-size: 15pt; }
  .notice-head__brand img { width: 46px !important; height: auto !important; }
  .notice-body__subject { font-size: 9.6pt; line-height: 1.75; }
  .notice-table { font-size: 8.4pt; }
  .notice-table th, .notice-table td { padding: 3.4px 6px; }
  .notice-legal { font-size: 8pt; padding: 6px 9px; }
  .notice-foot__qr img { width: 62px !important; height: 62px !important; }
  .notice-foot__label { margin-block-end: 16px; }
  .notice-receipt__head h2 { font-size: 11.5pt; }
  .notice-reasons { font-size: 8.2pt; }

  /* ضغط المسافات: القسمان ووصلهما يجب أن يسعوا في ورقة واحدة،
     فالفراغ الزائد يدفع الوصل إلى صفحة ثانية فيضيع أحدهما. */
  /* بقيت 23 بكسلاً فوق الورقة، فيُقلَّص سطر المتن ومسافات التوقيع:
     الهامش الآمن يُبعد خطر انزلاق الوصل إلى صفحة ثانية على طابعة أخرى. */
  .notice-sheet { font-size: 8.9pt; line-height: 1.38; }
  .notice-part { gap: 6px; }
  .notice-body__subject { font-size: 9.2pt; line-height: 1.6; margin-block-end: 7px; }
  .notice-legal { margin-block-start: 7px; }
  .notice-foot__label { margin-block-end: 11px; }
  .notice-head { padding-block-end: 5px; }
  .notice-to { padding: 6px 9px; }
  .notice-to__name { font-size: 10.5pt; margin-block: 1px 4px; }
  .notice-to__grid { font-size: 8pt; margin-block-end: 4px; }
  .notice-to__address { font-size: 8.4pt; }

  .notice-fields { gap: 5px 12px; }
  .notice-field span { font-size: 7.4pt; }
  .notice-field strong { font-size: 8.6pt; }
  .notice-fill { min-height: 14px; }
  .notice-fill--tall { min-height: 26px; }

  .notice-receipt__intro { font-size: 7.8pt; }
  .notice-reasons ul { gap: 1px 12px; }
  .notice-receipt__sign { gap: 18px; }
  .notice-foot__line { min-width: 150px; }

  .notice-to, .notice-legal, .notice-table th, .notice-part--receipt, .notice-cut span {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}


/* ============================================================
   الرسائل: طبقة عائمة للتغذية الراجعة، وظهور ناعم لما يبقى في مكانه

   التمييز مقصود لا تفاوت في الجهد:
     • رسالة **نتيجة إجراء** (حُفظ · تعذّر) تطفو وتختفي — قُرِئت وانتهى شأنها.
     • رسالة تشرح قاعدةً أو تعدّ نواقصَ تبقى في موضعها من النموذج، لأن ما
       يجب أن يُقرأ ويُعمل به لا يصحّ أن يختفي قبل قراءته. تظهر بنفس النعومة
       ويُغلقها المستخدم بنفسه.
   ============================================================ */

@keyframes gct-alert-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes gct-toast-in {
  0%   { opacity: 0; transform: translateY(-14px) scale(.97); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- الرسائل الثابتة في مكانها ---------- */
.alert {
  animation: gct-alert-in 260ms cubic-bezier(.22, 1, .36, 1) both;
  position: relative;
  transition: opacity 260ms ease, transform 260ms ease,
              margin-block-end 260ms ease, max-height 300ms ease;
}

/*
   علامة الإغلاق تُرسم في التنسيق لا تُحقَن في الشجرة: أبناء الرسالة يملكها
   Blazor، وزيادة عقدة عليهم تُزحزح مطابقته لهم.
*/
.alert--dismissible {
  cursor: pointer;
  padding-inline-end: 34px;
}

.alert--dismissible::after {
  content: "×";   /* المحرف صريحاً لا بهروب: الملف يعلن @charset utf-8 */
  position: absolute;
  inset-block-start: 7px;
  inset-inline-end: 11px;
  font-size: 1.15rem;
  line-height: 1;
  opacity: .45;
  transition: opacity 160ms ease;
}

.alert--dismissible:hover::after { opacity: .9; }

/* ---------- الخروج الناعم (للنوعين) ---------- */
.alert--leaving {
  animation: none;
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  pointer-events: none;
}

/* ---------- الطبقة العائمة ---------- */
/*
   الرسالة العائمة تبقى في مكانها من شجرة الصفحة ولا تُنقل إلى حاوية أخرى:
   Blazor يملك هذه العُقد ويحدّثها، ونقلها إلى أب آخر يفسد مطابقته لها.
   لذا تُثبَّت بـ fixed حيث هي — فتخرج من تدفّق الصفحة بلا فراغ تتركه.
*/
.alert[data-toast] {
  position: fixed;
  /*
     الإزاحة بالموضع لا بـtransform: حركة الظهور تحرّك transform وتحتفظ
     بقيمتها الأخيرة (fill both)، فتطمس أي إزاحة تُكتب فيه — فتتراكب
     الرسائل فوق بعضها. الموضع لا تلمسه الحركة فيبقى الترتيب سليماً.
  */
  inset-block-start: calc(var(--topbar-height) + 12px + var(--toast-index, 0) * 4.6rem);

  /*
     الجهة: الشريط الجانبي يقع في جهة البداية (يمين في العربية، يسار في
     الإنجليزية)، فتُوضع الرسالة في جهة **النهاية** لتبقى فوق منطقة المحتوى
     لا فوق القائمة. وتُزاح قليلاً عن الحافة لتنفصل عنها بصرياً.
  */
  inset-inline-end: 20px;
  inset-inline-start: auto;
  z-index: 1300;
  width: min(26rem, calc(100vw - 32px));
  margin: 0;
  box-shadow: 0 12px 34px rgb(0 0 0 / .18), 0 2px 6px rgb(0 0 0 / .08);
  backdrop-filter: saturate(1.4);
  animation: gct-toast-in 320ms cubic-bezier(.16, 1, .3, 1) both;
  transition: inset-block-start 260ms cubic-bezier(.22, 1, .36, 1),
              opacity 260ms ease, transform 260ms ease;
}

/* شريط عمر الرسالة: يُظهر أنها ستختفي وحدها فلا يظنّها المستخدم عالقة */
.alert[data-toast]::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 2px;
  background: currentColor;
  opacity: .45;
  border-end-start-radius: 11px;
  border-end-end-radius: 11px;
  transform-origin: inline-end;
  animation: gct-toast-life var(--toast-life, 5200ms) linear both;
}

@keyframes gct-toast-life {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* الوقوف بالمؤشّر يوقف العدّ: من يقرأ لا يُسحب منه النص */
.alert[data-toast]:hover { animation-play-state: paused; }
.alert[data-toast]:hover::after { animation-play-state: paused; }

.alert[data-toast].alert--leaving {
  animation: none;
  transform: translateY(-10px) scale(.98);
}

@media (max-width: 640px) {
  .alert[data-toast] {
    inset-inline: 12px;
    width: auto;
    inset-block-start: calc(var(--topbar-height) + 8px);
  }
  .alert[data-toast] {
    inset-block-start: calc(var(--topbar-height) + 8px + var(--toast-index, 0) * 5.4rem);
  }
}

/* ---------- احترام تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  .alert,
  .alert[data-toast],
  .alert[data-toast]::after {
    animation: none;
    transition: opacity 120ms linear;
  }
  .alert--leaving { transform: none; }
}

@media print {
  .alert[data-toast] { display: none !important; }
  .alert--dismissible::after { display: none; }
}

/* ---------------------------------------------------------------------------
   شارة الخطأ العائمة: رسالة التثبيت تظهر أعلى النموذج، والنموذج طويل، فقد
   يضغط المكلف «تثبيت» وهو في أسفله فلا يرى سبب الرفض ويظنّ أن شيئاً لم يحدث.
   الشارة تبقى ظاهرة في الزاوية وتنقله إلى الرسالة بضغطة.
   --------------------------------------------------------------------------- */
.error-jump {
    position: fixed;
    inset-block-end: 20px;
    inset-inline-start: 20px;
    z-index: 1200;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--danger, #b3261e);
    color: #fff;
    font: inherit;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
    cursor: pointer;
    animation: error-jump-in .18s ease-out;
}

.error-jump:hover { filter: brightness(1.08); }
.error-jump:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.error-jump__count {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    font-size: .82rem;
}

@keyframes error-jump-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* وميض قصير عند الانتقال إلى الرسالة ليقع البصر عليها */
.alert--flash { animation: alert-flash 1.1s ease-out 1; }

@keyframes alert-flash {
    0%   { box-shadow: 0 0 0 0 rgba(179, 38, 30, .55); }
    100% { box-shadow: 0 0 0 14px rgba(179, 38, 30, 0); }
}

@media print { .error-jump { display: none; } }

/* خطأ تحت الحقل مباشرةً: يظهر أثناء الكتابة فيُصحَّح في موضعه، بدل أن
   يُجمع مع غيره في رأس الصفحة بعد ضغط «تثبيت». */
.field-error {
    display: block;
    margin-block-start: 5px;
    color: var(--danger, #b3261e);
    font-size: .84rem;
    font-weight: 600;
}

.field-error .bi { margin-inline-end: 4px; }

/* ---------------------------------------------------------------------------
   ألسنة نموذج الإقرار: النموذج طويل (ثمانية أقسام)، وعرضه دفعةً واحدة يُرهق
   المكلف ويُخفي موضعه منه. الشريط قابل للتمرير أفقياً على الهاتف فلا تُقصّ
   الألسنة كما قُصّت قائمة الإعلامات سابقاً.
   --------------------------------------------------------------------------- */
.wiz-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 10px;
    margin-block-end: 14px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.wiz-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 1px solid var(--gov-border);
    border-radius: 999px;
    background: var(--shell-card-bg);
    color: var(--gov-ink-2);
    font: inherit;
    font-size: .84rem;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}

.wiz-tab:hover:not(:disabled) { border-color: var(--gov-primary); }
.wiz-tab:disabled { opacity: .45; cursor: not-allowed; }

.wiz-tab.is-current {
    background: var(--gov-primary);
    border-color: var(--gov-primary);
    color: #fff;
    font-weight: 600;
}

.wiz-tab.is-done { border-color: var(--success, #1c7c4a); }

.wiz-tab__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gov-surface-alt);
    color: var(--gov-ink-2);
    font-size: .74rem;
    font-weight: 700;
}

.wiz-tab.is-current .wiz-tab__num { background: rgba(255, 255, 255, .24); color: #fff; }
.wiz-tab.is-done .wiz-tab__num { background: var(--success, #1c7c4a); color: #fff; }

/* نقطة تُعلِّم اللسان الذي فيه ما يمنع التثبيت */
.wiz-tab__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger, #b3261e);
    box-shadow: 0 0 0 2px var(--shell-card-bg);
}

.wiz-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-block-start: 18px;
    padding: 12px 14px;
    border: 1px solid var(--gov-border);
    border-radius: 12px;
    background: var(--gov-surface-alt);
}

.wiz-nav__pos {
    font-size: .82rem;
    color: var(--gov-ink-3);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .wiz-tab__text { display: none; }        /* الرقم يكفي على الشاشة الضيقة */
    .wiz-tab { padding: 8px 10px; }
    .wiz-tab.is-current .wiz-tab__text { display: inline; }
}

@media print {
    .wiz-tabs, .wiz-nav { display: none; }
    .wiz-panel[hidden] { display: block !important; }   /* الطباعة تُظهر الإقرار كاملاً */
}

/* ============================================================
   شريط الاستيراد: تنزيل النموذج ورفع الملف جنباً إلى جنب
   ============================================================
   زرّ الرفع هو <label> يحتضن <input type=file> مخفياً — فالمتصفح لا يسمح
   بتنسيق حقل الملف نفسه، وإخفاؤه خلف زرّ يُبقي الشكل موحَّداً مع بقية
   الأزرار بدل زرٍّ نظاميٍّ شاذّ عن الصفحة. */
.import-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-block: 12px;
  border: 1px dashed var(--gov-border-strong);
  border-radius: 10px;
  background: var(--gov-surface-alt);
}

.import-bar .hint { font-size: .75rem; color: var(--gov-ink-3); }

.import-bar__file { position: relative; overflow: hidden; cursor: pointer; }

.import-bar__file input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}

/* درجة مخاطر الفاتورة في الجدول */
.risk-pill {
  display: inline-block;
  min-width: 34px;
  padding: 1px 7px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  text-align: center;
}

.risk-pill--low    { background: var(--success-tint, #e6f4ea); color: var(--success, #1e7d40); }
.risk-pill--medium { background: var(--warning-tint, #fff4e5); color: var(--warning, #b26a00); }
.risk-pill--high   { background: var(--danger-tint, #fdeceb);  color: var(--danger, #b3261e); }

/* وسط شريط تنقّل المعالج: العدّاد وزرّ الحفظ معاً في كل خطوة */
.wiz-nav__mid {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   صفّ اختيار (راديو ببطاقات) — لاختيار جهة أو مسار قبل ملء حقوله
   ============================================================ */
.choice-row { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 14px; }

.choice {
  flex: 1 1 260px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--gov-border-strong);
  border-radius: 12px;
  background: var(--gov-surface);
  cursor: pointer;
  font-weight: 400;
}

.choice input[type="radio"] { width: auto; margin-block-start: 4px; }
.choice strong { display: block; font-size: .92rem; }

.choice__hint {
  display: block;
  margin-block-start: 4px;
  font-size: .76rem;
  color: var(--gov-ink-3);
  line-height: 1.55;
}

.choice--on {
  border-color: var(--gov-primary, #0F4C81);
  box-shadow: 0 0 0 2px rgba(15, 76, 129, .14);
  background: var(--gov-surface-alt);
}

/* صفّ فاتورة رفع النظام عليها ملاحظة عالية: يُميَّز ليُرى قبل التقديم */
.row-risky { background: var(--danger-tint, #fdeceb); }

/* محطات التدقيق داخل ملف الشركة */
.task-chip {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 8px 12px; margin-block-start: 6px;
  border: 1px solid var(--gov-border); border-radius: 9px;
  background: var(--gov-surface-alt); font-size: .86rem;
}

.task-detail {
  border: 1px dashed var(--gov-border-strong); border-radius: 10px;
  padding: 12px 14px; margin-block-start: 6px;
}