/* هوية رواد الضيافة — الألوان والخطوط والعناصر المشتركة بين الموقع والنظام.
   الألوان من دليل الهوية المعتمد ولا تُبدَّل. */
/* الخطوط من الخادم نفسه لا من قوقل: لا يتوقف شكل الصفحة على خدمة خارجية،
   ولا يُرسَل عنوان أي زائر إلى طرفٍ ثالث. أميري للعناوين وتجوال للنصوص. */
@font-face{font-family:"Amiri";font-weight:400;font-style:normal;font-display:swap;
  src:url("/assets/fonts/amiri-arabic-400-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Amiri";font-weight:700;font-style:normal;font-display:swap;
  src:url("/assets/fonts/amiri-arabic-700-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Amiri";font-weight:400;font-style:normal;font-display:swap;
  src:url("/assets/fonts/amiri-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Amiri";font-weight:700;font-style:normal;font-display:swap;
  src:url("/assets/fonts/amiri-latin-700-normal.woff2") format("woff2")}

@font-face{font-family:"Tajawal";font-weight:400;font-style:normal;font-display:swap;
  src:url("/assets/fonts/tajawal-arabic-400-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Tajawal";font-weight:500;font-style:normal;font-display:swap;
  src:url("/assets/fonts/tajawal-arabic-500-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Tajawal";font-weight:700;font-style:normal;font-display:swap;
  src:url("/assets/fonts/tajawal-arabic-700-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Tajawal";font-weight:400;font-style:normal;font-display:swap;
  src:url("/assets/fonts/tajawal-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Tajawal";font-weight:500;font-style:normal;font-display:swap;
  src:url("/assets/fonts/tajawal-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Tajawal";font-weight:700;font-style:normal;font-display:swap;
  src:url("/assets/fonts/tajawal-latin-700-normal.woff2") format("woff2")}

@font-face{font-family:"Marcellus";font-weight:400;font-style:normal;font-display:swap;
  src:url("/assets/fonts/marcellus-latin-400-normal.woff2") format("woff2")}

:root {
  --wine:      #50153E;
  --wine-deep: #3A0F2C;
  --plum:      #2C2244;
  --band:      #602282;
  --gold:      #C8A24A;
  --blush:     #F2AEB9;
  --blush-lt:  #FCD4DB;
  --paper:     #FBFAFA;
  --surface:   #FFFFFF;
  --surface-2: #F5F1F4;
  --sunk:      #EDE7EB;
  --ink:       #231F20;
  --ink-2:     #57495C;
  --ink-3:     #8A7F88;
  --line:      #E8E2E6;
  --line-2:    #D8CED4;

  --ok:#2C7A57;   --ok-bg:#E3F1E9;
  --warn:#9E6410; --warn-bg:#F9EEDA;
  --crit:#AF3550; --crit-bg:#FAE5EA;
  --info:#3B5EA0; --info-bg:#E7EBF7;

  --grad: linear-gradient(148deg, #2C2244 0%, #3E1338 46%, #50153E 78%, #7E2E52 100%);
  --shadow: 0 1px 2px rgba(28,17,44,.05), 0 8px 24px -12px rgba(28,17,44,.20);
  --shadow-lift: 0 2px 4px rgba(28,17,44,.06), 0 18px 40px -18px rgba(28,17,44,.34);

  --ui:   "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
  --disp: "Marcellus", "Amiri", Georgia, serif;
  --ar-disp: "Amiri", "Tajawal", Georgia, serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --r-s: 6px; --r-m: 10px; --r-l: 16px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--ui); font-size: 14px; line-height: 1.6;
  color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
[dir="ltr"] { font-family: var(--ui); }
img { max-width: 100%; display: block; }
/* الشعار لا يُمدّ: العنصر المرن يتمدّد إلى عرض حاويته ما لم يُمنع، فتنكسر نسبته */
.logo { width: auto; height: auto; max-width: 100%; align-self: flex-start; object-fit: contain; flex: none; }
a { color: var(--wine); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.muted { color: var(--ink-3); }
.stack { display: flex; flex-direction: column; }
.row   { display: flex; align-items: center; }
.spread{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wrap  { width: min(1180px, 100% - 40px); margin-inline: auto; }

/* ---------- الأزرار ---------- */
.btn {
  font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--r-m);
  padding: 9px 16px; display: inline-flex; align-items: center; gap: 7px;
  transition: background .15s, border-color .15s, color .15s; text-decoration: none;
}
.btn-primary { background: var(--wine); color: #fff; }
.btn-primary:hover { background: var(--wine-deep); }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--wine); color: var(--wine); }
.btn-quiet { background: transparent; border: 0; color: var(--ink-3); padding: 6px 8px; cursor: pointer; font: inherit; }
.btn-quiet:hover { color: var(--wine); }
.btn-lg { padding: 12px 20px; font-size: 14.5px; }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }

/* ---------- البطاقات والحقول ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow); }
.card.pad { padding: 18px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { font-size: 12.5px; color: var(--ink-3); }
.input {
  font: inherit; font-size: 13.5px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-m); padding: 9px 11px; width: 100%;
}
.input:focus { border-color: var(--wine); outline: none; box-shadow: 0 0 0 3px rgba(80,21,62,.10); }
.input:disabled { background: var(--surface-2); color: var(--ink-3); }
select.input { cursor: pointer; }
/* الخانة التي فيها العلّة تُشار بذاتها — فلا يبحث الرجل عن موضع الخطأ */
.input.bad { border-color: var(--crit, #B3261E); box-shadow: 0 0 0 3px rgba(179,38,30,.10); }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 500; padding: 3px 9px; border-radius: 999px;
}
.p-ok{background:var(--ok-bg);color:var(--ok)} .p-warn{background:var(--warn-bg);color:var(--warn)}
.p-crit{background:var(--crit-bg);color:var(--crit)} .p-info{background:var(--info-bg);color:var(--info)}
.p-mute{background:var(--sunk);color:var(--ink-3)}

/* الجداول بألوان الشركة — بأمر صاحب العمل: «الألوان في الجدول غير جميلة،
   اجعلها ألواناً وتقسيماتٍ أجمل وتكون مواكبةً لألوان الشركة».

   فالرأسُ شريطٌ بلون النبيذ الفاتح يفصله خطٌّ بلونه، والصفوفُ تتناوب
   بوردةٍ باهتةٍ من لوح الشركة لا برماديٍّ محايد، والحدودُ أفقيّةٌ وحدها
   فيهدأ الجدول ويُقرأ سطراً سطراً. */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: start; font-size: 11.5px; font-weight: 600; color: var(--wine);
  padding: 10px 12px; white-space: nowrap; letter-spacing: .03em;
  background: linear-gradient(var(--blush-lt, #FCD4DB) 0 0) padding-box;
  background-color: color-mix(in srgb, var(--wine) 7%, transparent);
  border-bottom: 1.5px solid color-mix(in srgb, var(--wine) 28%, transparent);
}
.tbl thead tr:first-child th:first-child { border-start-start-radius: var(--r-m, 10px); }
.tbl thead tr:first-child th:last-child { border-start-end-radius: var(--r-m, 10px); }
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--wine) 3%, transparent); }
.tbl tbody tr:hover td { background: color-mix(in srgb, var(--wine) 8%, transparent); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.scroll-x { overflow-x: auto; }

.note {
  display: flex; gap: 9px; align-items: flex-start;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 11px 13px; font-size: 12.5px; color: var(--ink-2);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* الأرقام تُقرأ من اليسار دائماً — وإلا انتقلت إشارة السالب إلى آخر الرقم في الواجهة العربية */
.tbl td.mono, .kpi .val { direction: ltr; }
.tbl td.mono { text-align: right; }
[dir="ltr"] .tbl td.mono { text-align: left; }

/* ---------- الوثائق المُوقَّعة: الصندوق ونصّ الاتفاقية ---------- */
/* طبقةٌ فوق الشاشة. الاتفاقية تُقرأ قبل أن تُوقَّع، فلها مساحةٌ وسطرٌ مريح. */
.modal-wrap {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 18px;
  background: rgba(28, 17, 44, .48);
  backdrop-filter: blur(2px);
}
.agbody {
  max-height: 46vh; overflow: auto;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 14px 16px; font-size: 13px; line-height: 2;
}
.agbody p { margin: 0 0 12px; white-space: pre-wrap; }
.agbody p:last-child { margin-bottom: 0; }
/* رمزٌ من ستة أرقام يُقرأ رقماً رقماً لا ككلمة */
#agcode { letter-spacing: .5em; text-align: center; font-size: 18px; direction: ltr; }

/* التاريخ واللاتيني داخل جملةٍ عربية يُعزَل، وإلا قُلب «2026-10-31» إلى «31-10-2026»
   على الشاشة — والقارئ يقرأ يوماً غير اليوم. */
span.mono { direction: ltr; unicode-bidi: isolate; }

/* درجات التقييم: خمسة أزرارٍ تُملأ إلى المختار — الدرجة تُرى لا تُقرأ */
.sc { width:30px; height:30px; border-radius:8px; border:1px solid var(--line);
      background:var(--surface); color:var(--ink-3); font:inherit; font-size:12.5px;
      cursor:pointer; transition:background .12s, color .12s; }
.sc.on { background:var(--wine); border-color:var(--wine); color:#fff; }
.sc:disabled { cursor:default; opacity:.85; }

/* ---------- قائمةٌ منسدلةٌ يُبحث فيها ---------- */
/* بأمر صاحب العمل: «اجعل القائمة مثل القائمة في الغرض من الخطاب: تظلّ
   مغلقة وتفتح عند الضغط عليها وتصبح منسدلة وبها خيار بحث». فهي زرٌّ واحدٌ
   يحمل المختار، تنزل تحته لوحةٌ في رأسها بحثٌ وتحتها الجهاتُ بمجموعاتها. */
.pickdd { position: relative; }
/* القائمةُ الحقيقية تبقى في الصفحة ليقرأ النظامُ قيمتَها، ولا تُرى */
.pickdd .pk-val {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pickdd .pk-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: start; cursor: pointer; font: inherit;
}
.pickdd .pk-btn:disabled { cursor: default; opacity: .7; }
.pickdd .pk-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pickdd .pk-lbl.ph { color: var(--ink-3); }
.pickdd .pk-caret { font-style: normal; font-size: 10px; color: var(--ink-3); flex: none;
                    transition: transform .12s; }
.pickdd .pk-btn[aria-expanded="true"] .pk-caret { transform: rotate(180deg); }
.pickdd .pk-btn[aria-expanded="true"] { border-color: var(--wine); }

.pickdd .pk-pan {
  position: absolute; z-index: 40; inset-inline: 0; top: calc(100% + 4px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  box-shadow: 0 10px 28px rgba(35,16,32,.16); padding: 7px; display: grid; gap: 6px;
}
/* `display:grid` أعلاه يغلب `[hidden]`، فتبقى اللوحةُ المغلقةُ مرسومةً فوق
   ما تحتها وتبتلع ضغَطاتِه. فيُصرَّح بإخفائها. */
.pickdd .pk-pan[hidden] { display: none !important; }
.pickdd .pk-q { font-size: 13px; }
.pickdd .pk-list { max-height: 260px; overflow: auto; display: grid; gap: 1px; }
.pickdd .pk-g {
  font-size: 11px; font-weight: 600; color: var(--ink-3); padding: 6px 8px 2px;
  position: sticky; top: 0; background: var(--surface);
  /* عنوانُ المجموعة يُقرأ ولا يُضغط — وإلا ابتلع ضغطةَ الخيار الذي تحته */
  pointer-events: none;
}
.pickdd .pk-opt {
  display: block; width: 100%; text-align: start; font: inherit; font-size: 13px;
  padding: 6px 9px; border: 0; border-radius: 7px; background: transparent;
  color: var(--ink); cursor: pointer; line-height: 1.5;
}
/* `display:block` أعلاه يغلب `[hidden]` في المتصفّح، فيبقى المُرشَّح خارجاً
   ظاهراً — ويُضغط بالسهو. فيُصرَّح بإخفائه. */
.pickdd .pk-opt[hidden], .pickdd .pk-g[hidden] { display: none !important; }
.pickdd .pk-opt:hover, .pickdd .pk-opt:focus-visible { background: var(--sunk); }
.pickdd .pk-opt.on { background: var(--wine); color: #fff; }
.pickdd .pk-none { font-size: 12px; margin: 0; padding: 4px 8px; }