/* ===================================================================
   manage.css — أنماط نظام إدارة الحجوزات (تبويبات لوحة الإدارة)
   بتعتمد على متغيّرات :root المعرّفة في index.html (أبيض/ذهبي/فضي)
   =================================================================== */

/* ===== أدوات عامة ===== */
.hidden { display: none !important; }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; transform: none; }
.ltr    { direction: ltr; text-align: right; unicode-bidi: plaintext; }
.green  { color: var(--green); }
.red    { color: var(--red); }
.gold   { color: var(--gold-light); }
.sub    { font-size: .78rem; color: var(--text-muted); }

/* ===== شريط التبويبات ===== */
.tabs {
  max-width: 1120px; margin: 0 auto 18px; display: flex; gap: 6px;
  background: rgb(var(--c-surface-lowest)); border: 1px solid var(--line); border-radius: 18px;
  padding: 6px; overflow-x: auto; box-shadow: 0 10px 30px rgb(var(--c-on-surface-variant) / .07);
}
.tabs::-webkit-scrollbar { height: 0; }
.tab {
  flex: 1; min-width: max-content; white-space: nowrap;
  padding: 11px 16px; border: none; border-radius: 13px; cursor: pointer;
  background: transparent; color: var(--text-muted);
  font-family: inherit; font-size: .92rem; font-weight: 700;
  transition: background .15s ease, color .15s ease;
}
.tab:hover  { background: var(--surface2); color: var(--text); }
.tab.active { background: linear-gradient(135deg, rgb(var(--c-brand-gold)), rgb(var(--c-deep-gold))); color: rgb(var(--c-on-surface)); }

/* ===== النماذج ===== */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 12px; }
@media (max-width: 620px) {
  .grid2, .grid4 { grid-template-columns: 1fr; }
}

.f { margin-bottom: 12px; }
.f > label { display: block; font-size: .86rem; color: var(--text-muted); margin: 0 0 6px; }
/* «اختياري» بجوار عنوان الحقل — والصمت يعني مطلوبًا */
label .opt { font-size: .72rem; opacity: .7; font-weight: 600; }

.f-hint { font-size: .78rem; color: var(--text-muted); margin-top: 5px; line-height: 1.7; }
.form-error { color: var(--red); font-size: .88rem; min-height: 20px; margin-top: 6px; font-weight: 600; }
.form-error b { color: var(--red); }

textarea { resize: vertical; }

/* حقل الرمز وزرّ توليده — تستعمله بطاقة الحجز ونموذج الإنشاء معًا */
.pin-row { display: flex; gap: 8px; }
.pin-row input { flex: 1; min-width: 0; letter-spacing: 3px; }
.pin-row .btn { flex: none; padding: 12px 16px; }

.chk {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  margin: 6px 0 12px; font-size: .92rem; color: var(--text);
}
.chk input { width: auto; }

.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg-item {
  flex: 1; min-width: 150px; display: flex; align-items: center; gap: 8px;
  padding: 11px 13px; border: 1px solid rgb(var(--c-brand-gold) / .28); border-radius: 14px;
  cursor: pointer; background: rgb(var(--c-surface-lowest)); margin: 0; font-size: .92rem; color: var(--text);
}
.seg-item input { width: auto; }
.seg-item small { color: var(--text-muted); font-size: .76rem; }
.seg-item:has(input:checked) { border-color: var(--gold); background: var(--surface2); }
.seg-item b { color: var(--gold-light); font-weight: 700; }
/* ثلاثة خيارات في صفٍّ واحد — لا ثلاثة أسطر بعرض النافذة */
.seg-3 .seg-item { flex: 1 1 30%; min-width: 0; font-size: .86rem; padding: 10px 12px; }

.slot-note {
  background: var(--surface2); border: 1px solid rgb(var(--c-brand-gold) / .2);
  border-radius: 14px; padding: 11px 14px; margin-bottom: 12px;
  font-size: .85rem; color: var(--text-muted);
}

/* ===== شريط الأدوات فوق الجداول ===== */
.tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.tools input  { flex: 2; min-width: 200px; }
.tools select { flex: 1; min-width: 130px; }
.tools .btn   { flex-shrink: 0; }

.list-summary {
  background: var(--surface2); border: 1px solid rgb(var(--c-brand-gold) / .2);
  border-radius: 14px; padding: 10px 14px; margin-bottom: 12px; font-size: .88rem;
}

/* ===== الجداول ===== */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: .89rem; }
.tbl th, .tbl td { padding: 11px 12px; text-align: right; border-bottom: 1px solid var(--line); }
.tbl th { color: var(--text-muted); font-weight: 700; font-size: .8rem; white-space: nowrap; }
.tbl tbody tr[data-open] { cursor: pointer; }
.tbl tbody tr:hover { background: var(--surface2); }
.tbl .row-dim { opacity: .55; }
.t-empty { text-align: center; color: var(--text-muted); padding: 22px 8px; }
.t-empty.err { color: var(--red); }

.row-acts { white-space: nowrap; text-align: left; }
.ico {
  background: transparent; border: 1px solid var(--line); border-radius: 10px;
  width: 32px; height: 32px; cursor: pointer; font-size: .85rem; margin-inline-start: 4px;
  color: var(--text); transition: background .15s ease;
}
.ico:hover { background: var(--surface2); }
.ico-red { color: var(--red); border-color: rgb(var(--c-error-red) / .35); }

.tag {
  font-size: .7rem; background: var(--surface2); border: 1px solid var(--line);
  border-radius: 8px; padding: 1px 5px;
}

.badge {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-size: .76rem; font-weight: 700; white-space: nowrap;
  color: var(--bc, var(--gold-light));
  background: color-mix(in srgb, var(--bc, rgb(var(--c-brand-gold))) 12%, rgb(var(--c-surface-lowest)));
  border: 1px solid color-mix(in srgb, var(--bc, rgb(var(--c-brand-gold))) 40%, rgb(var(--c-surface-lowest)));
}

/* ===== التقويم ===== */
.cal-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-nav .btn { padding: 8px 14px; }
.cal-title {
  min-width: 150px; text-align: center; display: flex; flex-direction: column; gap: 1px;
}
.cal-title b { font-weight: 800; color: var(--gold-light); font-size: 1.1rem; }
/* السطر الثاني هو التقويم الآخر — حاضر دائمًا، تابع دائمًا */
.cal-title small { font-size: .72rem; color: var(--text-muted); font-weight: 600; }
.cal-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ★ اختيار القاعة بحجم زرّ «حجز جديد» وبجانبه. ★ كانت القائمة تمتدّ
   بعرض 150px فأكثر أمام زرٍّ قصير، فتبدو هي الإجراء الرئيسي في السطر.
   والآن بعرض محتواها وبارتفاع الزرّ وحوافّه نفسها، وتظهر فقط حين تملك
   الصالة أكثر من قاعة (hasManyHalls في js/state.js). */
.hall-pick {
  width: auto; min-width: 0; flex: 0 0 auto; max-width: 190px;
  padding: 12px 14px; padding-inline-end: 30px; border-radius: 14px;
  font-size: .95rem; font-weight: 700; line-height: 1.2;
  background-color: rgb(var(--c-surface-lowest)); border: 1px solid rgb(var(--c-brand-gold) / .3);
}
.tools .hall-pick, .cal-tools .hall-pick { flex: 0 0 auto; min-width: 0; }
.cal-tools .btn, .tools .btn { white-space: nowrap; }

.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; font-size: .78rem; color: var(--text-muted); }
.cal-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.cal-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-wd {
  text-align: center; font-size: .76rem; font-weight: 700;
  color: var(--text-muted); padding: 6px 0;
}
/* min-width:0 على كل مستويات الشبكة — من غيرها عناصر الجريد بتاخد عرض
   محتواها ومابتنكمشش، والتقويم بيخرج بره الشاشة على الموبايل */
.cal-cell {
  min-height: 104px; min-width: 0; border: 1px solid var(--line); border-radius: 12px;
  padding: 6px; background: rgb(var(--c-surface-lowest)); display: flex; flex-direction: column; gap: 5px;
  transition: border-color .15s ease, background .15s ease;
}
.cal-wd { min-width: 0; }

/* ★ شبكة الإشغال خلف محتوى الخانة. ★ صفٌّ للصباحي فوق وللمسائي تحت،
   وعمودٌ لكل قاعة (grid-template-columns يُكتب من js/tab-calendar.js).
   الجزء المحجوز مظلَّل بالذهبي الخفيف ومقلَّم، فيُقرأ حتى بلا لون.
   وهي خلف البطاقات لا فوقها: الاسم والحالة يبقيان مقروءين. */
.cal-cell { position: relative; }
.cal-cell > :not(.cal-occ) { position: relative; z-index: 1; }
.cal-occ {
  position: absolute; inset: 0; z-index: 0; display: grid; grid-template-rows: 1fr 1fr;
  border-radius: inherit; overflow: hidden; pointer-events: none;
}
.cal-occ .occ { display: flex; align-items: center; justify-content: center; font-style: normal; }
.cal-occ .occ + .occ { box-shadow: inset 0 0 0 .5px rgb(var(--c-brand-gold) / .18); }
.cal-occ .occ.busy {
  background:
    repeating-linear-gradient(135deg, rgb(var(--c-brand-gold) / .10) 0 6px, transparent 6px 12px),
    rgb(var(--c-brand-gold) / .16);
}

.cal-legend .lg-order:empty { display: none; }
.occ-sample {
  display: inline-grid; grid-template-rows: 1fr 1fr; width: 14px; height: 16px;
  border: 1px solid rgb(var(--c-brand-gold) / .45); border-radius: 4px; overflow: hidden;
}
.occ-sample b { display: block; }
.occ-sample b.busy { background: rgb(var(--c-brand-gold) / .45); }

.cal-cell.out { background: transparent; border-color: transparent; min-height: 0; }
.cal-cell:hover { border-color: rgb(var(--c-brand-gold) / .5); }
.cal-cell.today { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.cal-cell.today .cal-n {
  background: var(--gold); color: rgb(var(--c-charcoal));
  border-radius: 8px; padding: 0 6px;
}

/* رأس الخانة: الرقم البارز، ثم رقم التقويم الآخر، ثم زرّ الإضافة */
.cal-d { display: flex; align-items: center; gap: 6px; font-size: .8rem; }
.cal-n  { font-weight: 800; color: var(--text); font-size: .9rem; line-height: 1.5; }
.cal-n2 { font-size: .68rem; color: var(--text-muted); font-weight: 600; white-space: nowrap;
          overflow: hidden; text-overflow: ellipsis; }
.cal-add {
  margin-inline-start: auto; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 7px; border: 1px solid var(--line);
  background: rgb(var(--c-surface-lowest)); cursor: pointer; color: var(--gold-light); line-height: 1;
  font-size: .85rem; opacity: 0; transition: opacity .15s ease;
}
.cal-cell:hover .cal-add { opacity: 1; }
.cal-items { display: flex; flex-direction: column; gap: 4px; overflow: hidden; min-width: 0; }
/* النقاط بديل البطاقات على الهاتف — مخفيّة على الشاشة الواسعة */
.cal-dots { display: none; }

/* ★ بطاقة الحجز: شريط الحالة أولًا، ثم الاسم، ثم الفترة والقاعة. ★
   اللون وحده لا يكفي (عمى الألوان، وطباعة بالأبيض والأسود)، والسطر
   الثاني هو ما يجيب سؤال الموظف الحقيقي: أيّ فترة وأيّ قاعة. */
.chip {
  position: relative; text-align: right; border: 1px solid transparent;
  border-inline-start: 3px solid var(--cc, rgb(var(--c-brand-gold)));
  background: color-mix(in srgb, var(--cc, rgb(var(--c-brand-gold))) 12%, rgb(var(--c-surface-lowest)));
  border-radius: 8px; padding: 5px 7px; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; gap: 1px; line-height: 1.3; overflow: hidden; min-width: 0;
}
.chip:hover {
  border-color: color-mix(in srgb, var(--cc, rgb(var(--c-brand-gold))) 55%, transparent);
  background: color-mix(in srgb, var(--cc, rgb(var(--c-brand-gold))) 22%, rgb(var(--c-surface-lowest)));
}
.chip.dim { opacity: .55; }
.chip-t { font-size: .75rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-s { font-size: .67rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ★ لا يختفي حجز بلا إشارة. ★ العدد المطويّ مذكور، والضغط يفتح اليوم كاملًا */
.chip-more {
  font-size: .67rem; font-weight: 700; color: var(--gold-light);
  padding: 2px 7px; border-radius: 7px; background: var(--surface2); text-align: center;
}

.cal-wd .wd-short { display: none; }

/* على الموبايل: الشبكة بتتحوّل لنقاط ملوّنة (الشاشة ضيّقة على أسماء
   الحجوزات)، والتفاصيل بتتفتح من ملخّص اليوم عند الضغط على الخانة */
@media (max-width: 620px) {
  .cal-cell { min-height: 68px; padding: 5px 3px; cursor: pointer; gap: 3px; }
  .cal-wd .wd-full { display: none; }
  .cal-wd .wd-short { display: inline; }
  .cal-add { display: none; }
  /* ★ الرقمان فوق بعضهما لا جنبًا إلى جنب. ★ الخانة ٣٨ بكسل على هاتف
     ٣٧٥، فصفٌّ واحد يترك للتقويم الآخر أحد عشر بكسلًا ويقصّه بنقطتين —
     أسوأ من إخفائه، لأن «‎.9» تُقرأ رقمًا لا اختصارًا. */
  .cal-d { flex-direction: column; align-items: center; gap: 0; }
  .cal-n { font-size: .82rem; line-height: 1.35; }
  .cal-n2 { font-size: .58rem; max-width: 100%; line-height: 1.25; }
  .cal-items { display: none; }
  .cal-dots {
    display: flex; flex-wrap: wrap; gap: 3px; align-content: flex-start; margin-top: auto;
  }
  .cal-dots i { width: 8px; height: 8px; border-radius: 50%; display: block; }
  .cal-title { min-width: 120px; }
}

/* ===== مؤشرات الحسابات ===== */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 6px; }
.kpi {
  background: var(--surface2); border: 1px solid rgb(var(--c-brand-gold) / .2);
  border-radius: 16px; padding: 14px 16px;
}
.kpi span { display: block; font-size: .8rem; color: var(--text-muted); margin-bottom: 4px; }
.kpi b { font-size: 1.25rem; font-weight: 800; }
.kpi small { font-size: .72rem; font-weight: 600; color: var(--text-muted); }

.sec-h { font-size: 1rem; font-weight: 800; color: var(--gold-light); margin: 22px 0 10px; }

/* ===== كارت الحجز ===== */
.bd-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.bd-sub { color: var(--text-muted); font-size: .88rem; }

.info-grid, .money-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 12px;
}
.info-grid > div, .money-grid > div {
  background: var(--surface2); border: 1px solid rgb(var(--c-brand-gold) / .16);
  border-radius: 14px; padding: 10px 12px;
}
.info-grid .wide, .money-grid .wide { grid-column: 1 / -1; }

/* ===== الإعدادات: الاشتراك والتقويم السائد في صفٍّ واحد ===== */
/* ★ التقويم السائد إعدادٌ بخيارين، فمكانه بطاقةٌ صغيرة بجانب الاشتراك لا
   صفٌّ كامل. ★ وتحت 900 بكسل يعود كلٌّ منهما إلى سطره بالترتيب نفسه. */
.set-top { display: grid; gap: 20px; margin-bottom: 20px; align-items: stretch; }
.set-top > .card { margin: 0; }
@media (min-width: 900px) { .set-top { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.cal-card .seg { flex-direction: column; }
.cal-card .seg-item { width: 100%; }

/* ★ أربع قيم قصيرة في أربعة أعمدة متساوية، والاسم الطويل في سطرٍ كامل. ★
   كان auto-fit يضع «مسجّل باسم» في خانةٍ بعرض القيم القصيرة فيلتفّ ويترك
   فراغاتٍ حوله. */
.lic-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 620px) { .lic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.addr-cell { max-width: 220px; white-space: normal; }
.info-grid span, .money-grid span { display: block; font-size: .75rem; color: var(--text-muted); margin-bottom: 3px; }
.info-grid b, .money-grid b { font-size: .95rem; font-weight: 700; }
.money-grid b { font-size: 1.05rem; }

.bar { height: 7px; background: var(--surface2); border-radius: 999px; overflow: hidden; margin-bottom: 16px; }
.bar-fill { height: 100%; background: linear-gradient(90deg, rgb(var(--c-brand-gold)), rgb(var(--c-success-green))); transition: width .35s ease; }

.pay-form {
  background: var(--surface2); border: 1px solid rgb(var(--c-brand-gold) / .2);
  border-radius: 16px; padding: 14px; margin-top: 14px;
}
.pay-form .f { margin-bottom: 8px; }
.pay-form input, .pay-form select { padding: 9px 11px; font-size: .9rem; }

.checkin-box { margin-bottom: 6px; }
.ci-off, .ci-on {
  background: var(--surface2); border: 1px dashed rgb(var(--c-brand-gold) / .35);
  border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px;
  font-size: .9rem; color: var(--text-muted);
}
.ci-on { border-style: solid; }
.ci-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; color: var(--text); }
.ci-row b { color: var(--gold-light); letter-spacing: 2px; }
.ci-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ci-acts .btn, .ci-off .btn { padding: 9px 16px; font-size: .88rem; }

.bd-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.bd-actions .btn { padding: 10px 15px; font-size: .88rem; }

/* ===== الاشتراك ===== */
.lic-warn {
  background: rgb(var(--c-error-red) / .08); border: 1px solid rgb(var(--c-error-red) / .3);
  color: var(--red); border-radius: 14px; padding: 12px 14px;
  margin-bottom: 14px; font-size: .9rem; font-weight: 600;
}
.lic-warn.soft {
  background: rgb(var(--c-brand-gold) / .09); border-color: rgb(var(--c-brand-gold) / .35); color: var(--gold-light);
}

/* ===== النوافذ المنبثقة (امتداد لأنماط .overlay/.modal في index.html) ===== */
.modal-wide { max-width: 780px; }
.m-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.m-head h2 { margin: 0; text-align: right; flex: 1; }
.m-x {
  background: transparent; border: none; cursor: pointer; font-size: 1.1rem;
  color: var(--text-muted); padding: 4px 8px; border-radius: 10px;
}
.m-x:hover { background: var(--surface2); color: var(--text); }
.m-foot { display: flex; gap: 10px; justify-content: flex-start; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.m-foot .btn { flex: 1; }
.m-confirm { color: var(--text-muted); line-height: 1.9; margin-bottom: 14px; font-size: .95rem; }

/* ===== شاشة الترخيص المعطّل ===== */
.lic-block {
  max-width: 520px; margin: 60px auto; text-align: center;
}
.lic-block .big { font-size: 2.6rem; margin-bottom: 10px; }

/* ملاحظة تحت روابط الحفل — تشرح الفرق بين الرمزين */
.link-note{ font-size:.78rem; color:var(--t-muted,rgb(var(--c-muted-gold))); line-height:1.6; margin-top:10px; }

/* خلاصة حفل محذوف على بطاقة الحجز — أرقام لا أشخاص */
.ci-summary{ background:rgb(var(--c-surface-container-low)); border:1px solid rgb(var(--c-outline-variant)); border-radius:14px; padding:12px 14px; margin-bottom:12px; }
.ci-summary-title{ font-weight:800; font-size:.9rem; color:rgb(var(--c-deep-gold)); margin-bottom:8px; }
.ci-summary-nums{ display:flex; gap:14px; flex-wrap:wrap; font-size:.9rem; }
.ci-summary-nums b{ color:rgb(var(--c-deep-gold)); }
.ci-summary-note{ font-size:.75rem; color:rgb(var(--c-muted-gold)); margin-top:8px; }


/* ===================================================================
   عنوان فرعي داخل نافذة طويلة — نافذة إعدادات الصفحة العامة تحمل
   أربع مجموعات حقول، وبلا فواصل تقرأ ككتلة واحدة لا يُعرف أولها.
   =================================================================== */
.modal-sub {
  margin: 22px 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line, rgba(0,0,0,.08));
  font-size: .95rem;
  font-weight: 700;
  color: var(--gold, #C9A227);
}
.modal-sub:first-child { margin-top: 0; }

/* رابط واتساب بجوار رقم العميل على بطاقة الحجز.
   الرقم مبنيّ بصيغة دولية كاملة (customerPhoneKey) فيعمل لأي دولة. */
.wa-link{
  font-size:.78rem; font-weight:600; margin-inline-start:8px;
  color:var(--gold-light); text-decoration:none; white-space:nowrap;
}
.wa-link:hover{ text-decoration:underline; }

/* سطر «عرض المزيد» أسفل قائمة الحجوزات — القائمة مرقَّمة بالعدد، وهذا
   ما يمنع أن تبدو نافذةٌ محدودة وكأنها كل شيء. */
.list-more{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
}
.list-more:empty{ display:none; }
.list-more .sub{ color:var(--text-muted); font-size:.84rem; }


/* ===================================================================
   الهاتف — ٣٩٠ بكسل

   ★ التبويب المختار كان يقف خارج الشاشة. ★ الشريط ستّة أزرار في صفٍّ
   واحد يمرّر أفقيًّا، وعرضها مجتمعةً ٧٢٠ بكسلًا على شاشةٍ عرضها ٣٩٠:
   فمن ضغط «الإعدادات» رأى محتواها ولم يرَ زرَّها — الزرّ عند ‎-٣٣٤‎،
   أي على بعد شاشةٍ كاملة إلى اليسار. وشريطٌ لا يقول أين أنت أسوأ من
   شريطٍ لا يقول ما فيه. فصار شبكةً من ثلاثة أعمدة في صفّين: الستّة
   ظاهرة كلّها، ولا تمرير، ولا مختارٌ مخفيّ.

   ★ وأهدافُ اللمس ٤٤ بكسلًا لا ٣٢. ★ وهو مقاسُ الإصبع في إرشادات
   أبل وجوجل معًا — وأزرار الصفّ (تعديل/حذف) متجاورةٌ بأربعة بكسلات،
   فخطأُ الضغط فيها ليس «لا شيء» بل الزرَّ المجاور.
   =================================================================== */
@media (max-width: 640px) {
  /* ★ صفٌّ واحد من ستّة، الأيقونة فوق الاسم. ★ كان صفّين من ثلاثة، وبدا
     ثقيلًا. الشريط الآن شريط تطبيقٍ مألوف: ستّ خانات متساوية، أيقونة
     أكبر واسم صغير تحتها، والفعّالة ذهبية. والاسم الطويل الوحيد
     («تسجيل الحضور») يُعرض بصيغته القصيرة من data-short لا بقصّه. */
  .tabs {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2px; overflow-x: visible; border-radius: 16px; padding: 4px;
  }
  .tab {
    flex: none; min-width: 0; white-space: nowrap;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 7px 2px; font-size: .64rem; line-height: 1.1; text-align: center;
    overflow: hidden; border-radius: 11px;
  }
  .tab .sicon { width: 1.55em; height: 1.55em; font-size: 1.15rem; }
  .tab .tab-label[data-short] { font-size: 0; }
  .tab .tab-label[data-short]::after { content: attr(data-short); font-size: .64rem; }

  /* ★ الجداول تمرّر، ويُقال إنها تمرّر. ★ حافةٌ متلاشية على اليسار
     تُنبئ أن وراءها أعمدة — وبدونها يبدو الجدول مقصوصًا لا ممتدًّا. */
  .tbl-wrap {
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to left, #000 calc(100% - 22px), transparent 100%);
  }
  .tbl-wrap:not(:hover) { scrollbar-width: none; }
  .tbl th, .tbl td { padding: 12px 10px; }

  /* أهداف اللمس */
  .ico { width: 40px; height: 40px; font-size: 1rem; margin-inline-start: 6px; }
  .row-acts { text-align: center; }
  .btn { min-height: 44px; }
  .tabs .tab { min-height: 52px; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; flex: none; }
  label.seg-item, .seg-item { min-height: 44px; }
  .f > label { font-size: .9rem; }
}

/* ===================================================================
   الوضع الليلي — تصحيحات لا توجد إلا فيه (برجندي وشامبانيا)

   ★ كلّ ما هنا تحت [data-theme="dark"]، فالوضع النهاري لا يراه. ★
   لوحة الإدارة تحدّ بطاقاتها وحقولها بالذهب الشفّاف، وهذا في النهار
   هويّة؛ أمّا فوق النبيتي فيصير كلُّ حدٍّ ذهبيًّا، فيضيع الذهب حيث يعني
   شيئًا (اليوم الحالي، التبويب النشط، التركيز). فالحدود العاديّة هنا
   برجنديّة، وحدود الحقول أقوى منها بالموف، والذهب للمهمّ وحده.
   =================================================================== */
[data-theme="dark"] .slot-note,
[data-theme="dark"] .list-summary,
[data-theme="dark"] .kpi,
[data-theme="dark"] .info-grid > div,
[data-theme="dark"] .money-grid > div,
[data-theme="dark"] .pay-form { border-color: rgb(var(--c-outline-variant)); }

/* الحقول وما يشبهها: حدّ أقوى من حدّ البطاقة، وسطح داخليّ */
[data-theme="dark"] .seg-item,
[data-theme="dark"] .hall-pick { border-color: rgb(var(--c-outline) / .45); }
[data-theme="dark"] .ci-off,
[data-theme="dark"] .ci-on { border-color: rgb(var(--c-outline) / .45); }

/* حبر داكن على التبويب الذهبي — كان النصّ الفاتح عليه 1.7:1 */
[data-theme="dark"] .tab.active { color: rgb(var(--c-charcoal)); }

/* التحويم والمحدَّد: Raised Merlot، أعلى درجة من السطح الداخلي */
[data-theme="dark"] .tab:hover:not(.active),
[data-theme="dark"] .tbl tbody tr:hover,
[data-theme="dark"] .ico:hover { background: rgb(var(--c-surface-container-high)); }
[data-theme="dark"] .seg-item:has(input:checked) { background: rgb(var(--c-surface-container-high)); }

/* خلايا التقويم: Calendar Wine — فصلٌ خفيف عن البطاقة التي تحملها */
[data-theme="dark"] .cal-cell:not(.out) { background: rgb(var(--c-surface-container-low)); }

/* «اختياري» بشفافية .7 فوق الوردي الخافت = 3.3:1 — دون حدّ النصّ الصغير.
   الوردي الخافت وحده 5.6:1، فالشفافية تسقط ليلًا. */
[data-theme="dark"] label .opt { opacity: 1; }