:root {
  --ink:#0D0D0D; --paper:#F7F4EE; --cream:#EDE9E0; --gold:#C9A84C; --gold-l:#FDF3DC;
  --green:#1A6B3C; --green-l:#D4EDDA; --red:#8B1A1A; --red-l:#FDEAEA;
  --blue:#1A3A6B; --blue-l:#E3EAF7; --muted:#7A7468; --border:#D4CFC5;
  --white:#FFFFFF; --shadow:0 2px 16px rgba(13,13,13,0.10); --r:10px;
  --font:'Tajawal',sans-serif; --mono:'IBM Plex Mono',monospace;
  --wa:#25D366; --wa-dark:#128C7E; --wa-light:#DCF8C6;
  --orange:#B35A00; --orange-l:#FFF0E0;

  /* نقاط انكسار الجداول — قيم مرجعية وحدة عشان ما نكرّرش الأرقام
     في كل media query. لازم تكون نفس القيم المستعملة في
     @media(max-width:…) تحت. */
  --breakpoint-md:768px;   /* تخطيط الجوال: القائمة تتحوّل لأسفل */
  --breakpoint-sm:820px;   /* طاولة/لابتوب صغير — الجداول تضغط */
  --breakpoint-xs:560px;   /* جوال — الجداول تنكمش لآخر درجة */
  /* مقاسات خلايا الجداول — تتقلّص مع الشاشة */
  --cell-pad:11px;         /* هامش الخلية على الشاشات الكبيرة */
  --cell-pad-sm:6px;       /* تحت --breakpoint-sm */
  --cell-pad-xs:3px;       /* تحت --breakpoint-xs */
  --fs-tbl:13px;           /* خط الجدول */
  --fs-tbl-sm:12px;
  --fs-tbl-xs:10px;
  --fs-th:10px;            /* خط ترويسة الجدول */
  --fs-th-xs:8px;
  --gap-sm:8px;            /* فرق بين الأزرار */
  --gap-xs:3px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--paper);color:var(--ink);min-height:100vh;font-size:15px;overflow-x:hidden}

/* LOGIN */
#login-screen{position:fixed;inset:0;background:var(--ink);display:flex;align-items:center;justify-content:center;z-index:9999;flex-direction:column;gap:0}
.login-box{background:var(--white);border-radius:18px;padding:40px 36px;width:360px;max-width:94vw;box-shadow:0 20px 60px rgba(0,0,0,0.4)}
.login-logo{text-align:center;margin-bottom:28px}
.login-logo h1{font-size:22px;font-weight:900;color:var(--ink);letter-spacing:-0.5px}
.login-logo p{color:var(--muted);font-size:13px;margin-top:4px}
.login-gold{display:block;width:48px;height:4px;background:var(--gold);border-radius:4px;margin:10px auto 0}
.users-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.user-btn{padding:14px 10px;border-radius:10px;border:2px solid var(--border);background:var(--white);cursor:pointer;text-align:center;transition:all .15s;font-family:var(--font)}
.user-btn:hover{border-color:var(--gold);background:var(--gold-l)}
.user-btn.selected{border-color:var(--gold);background:var(--gold-l)}
.user-btn .ub-icon{font-size:22px;margin-bottom:4px}
.user-btn .ub-name{font-size:13px;font-weight:700;color:var(--ink)}
.user-btn .ub-role{font-size:11px;color:var(--muted)}
.pin-area{margin-top:10px}
.pin-area label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:6px}
.pin-input{width:100%;padding:12px;border:2px solid var(--border);border-radius:8px;font-size:20px;font-family:var(--mono);text-align:center;letter-spacing:8px;outline:none;transition:border-color .15s}
.pin-input:focus{border-color:var(--gold)}
.login-btn{width:100%;margin-top:14px;padding:14px;background:var(--ink);color:var(--gold);border:none;border-radius:10px;font-family:var(--font);font-size:15px;font-weight:700;cursor:pointer;transition:background .15s}
.login-btn:hover{background:#2a2a2a}
.login-err{color:var(--red);font-size:12px;text-align:center;margin-top:8px;min-height:18px}

/* SHELL */
.shell{display:flex;min-height:100vh}
.sidebar{width:220px;flex-shrink:0;background:var(--ink);display:flex;flex-direction:column;position:fixed;top:0;right:0;height:100vh;z-index:100;overflow-y:auto}
/* min-width:0 هي الحتمية الناقصة. عنصر flex بـ flex:1 يأخذ minmax(auto,1fr)
   والحد الأدنى auto يمنع التصغير تحت عرض محتواه الأدنى. والمحتوى هنا
   جداول عريضة (min-width:700px). فكان .main يتمدّد خارج عرض الشاشة،
   فتخرج الصفوف من حدودها على اليمين وتمرّ تحت .sidebar الثابت
   (z-index:100) وتُقصّ ولا يمكن الوصول إليها. min-width:0 يسمح
   بتصغير .main، وعندها يتولّى .tbl-wrap التمرير الأفقي بنفسه
   بدل أن تنفجر الصفحة كلها — ولا تُفقد أي بيانات. */
.main{margin-right:220px;flex:1;min-width:0;max-width:calc(100vw - 220px);min-height:100vh;overflow-x:hidden}
.sidebar-logo{padding:18px 16px 10px;border-bottom:1px solid rgba(255,255,255,.1)}
.sidebar-logo h1{color:var(--gold);font-size:16px;font-weight:700}
.sidebar-logo p{color:rgba(255,255,255,.4);font-size:11px;margin-top:2px}
.sidebar-user{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:8px}
.su-avatar{width:32px;height:32px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--ink);flex-shrink:0}
.su-name{font-size:12px;color:rgba(255,255,255,.8);font-weight:600}
.su-role{font-size:10px;color:rgba(255,255,255,.4)}
.su-logout{margin-right:auto;font-size:11px;color:rgba(255,255,255,.3);cursor:pointer;padding:4px 6px;border-radius:4px}
.su-logout:hover{color:var(--gold)}
.nav-links{padding:10px 8px;flex:1}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:rgba(255,255,255,.5);cursor:pointer;font-size:13px;font-weight:500;transition:all .15s;margin-bottom:2px}
.nav-item:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.85)}
.nav-item.active{background:var(--gold);color:var(--ink);font-weight:700}
.nav-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0}
.nav-version{padding:10px 14px;color:rgba(255,255,255,.15);font-size:10px;font-family:var(--mono);border-top:1px solid rgba(255,255,255,.06)}
.nav-build{padding:0 14px 10px;color:rgba(255,255,255,.32);font-size:9px;font-family:var(--mono);letter-spacing:.5px}

/* ── صندوق أدوات القائمة (إشعارات / نشاطات / بحث / إخفاء) ──
   كان كل عنصر flex:1 بـ inline-styles، فطلعوا بعرض 205px ومحتوى
   17px — أيقونة صغيرة ونص ضايع في فراغ. والجرس الجديد زاد
   عنصر رابع فصارت اللوحة أطول للمدير ما عنده إشعار.
   دلوقتي كل عنصر صف ثابت: أيقونة 20px + نص + متغيّر يمين،
   والاسم ثابت (flex-shrink:0) عشان ما يتقطّعش. */
.sidebar-utils{padding:8px 10px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:4px}
.su-item{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);border-radius:8px;padding:8px 10px;cursor:pointer;transition:background .15s;min-height:36px}
.su-item:hover{background:rgba(255,255,255,.13)}
.su-ico{font-size:14px;width:20px;text-align:center;flex-shrink:0;line-height:1}
.su-lbl{font-size:12px;color:rgba(255,255,255,.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.su-key{font-size:9px;color:rgba(255,255,255,.3);margin-right:auto;white-space:nowrap;font-family:var(--mono);flex-shrink:0}
.su-badge{margin-right:auto;background:var(--red);color:#fff;font-size:9px;font-weight:900;min-width:17px;height:17px;line-height:17px;text-align:center;border-radius:9px;padding:0 4px;flex-shrink:0}
.su-badge.show{display:inline-block}
/* زر الإخفاء عنصر من نفس العائلة: button لا div، عشان ياخد نفس
   الارتفاع والـ padding مع الثلاثة الثانية. نشيل الـ border
   الافتراضي للـ button عشان يطلع مطابق لهم. */
button.su-item{width:100%;border:0;background:rgba(255,255,255,.07);font:inherit;text-align:right;box-sizing:border-box}

/* TOPBAR */
.topbar{background:var(--white);border-bottom:1px solid var(--border);padding:13px 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}
.topbar h2{font-size:17px;font-weight:700}
.topbar-actions{display:flex;gap:8px;align-items:center}
.page{display:none;padding:22px;min-width:0}
.page.active{display:block}

/* KPI CARDS */
.cards-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--white);border-radius:var(--r);border:1px solid var(--border);padding:15px}
.kpi-label{font-size:10px;color:var(--muted);margin-bottom:5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.kpi-val{font-size:22px;font-weight:900;color:var(--ink);font-family:var(--mono)}
.kpi-sub{font-size:11px;color:var(--muted);margin-top:3px}
.kpi.green .kpi-val{color:var(--green)}
.kpi.red .kpi-val{color:var(--red)}
.kpi.gold .kpi-val{color:#9A7020}
.kpi.blue .kpi-val{color:var(--blue)}
.kpi.orange .kpi-val{color:var(--orange)}
.kpi.gray .kpi-val{color:var(--muted)}
.kpi.gray{background:var(--cream);border-style:dashed}
.kpi.orange{background:var(--orange-l)}
.kpi.gold{background:var(--gold-l)}
.kpi.blue{background:var(--blue-l)}
.kpi.green{background:var(--green-l)}
.kpi.red{background:var(--red-l)}

/* PROFIT BOX */
.profit-summary-box{background:var(--ink);border-radius:var(--r);padding:20px 22px;margin-bottom:18px;color:var(--white);position:relative;overflow:hidden}
.profit-summary-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold)}
.profit-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px}
.profit-row:last-child{border-bottom:none;padding-top:12px;margin-top:4px}
.profit-row .lbl{color:rgba(255,255,255,.6)}
.profit-row .num{font-family:var(--mono);font-weight:700}
.profit-row .num.pos{color:#6EE09A}
.profit-row .num.neg{color:#FF8080}
.profit-row .num.total{font-size:20px;color:var(--gold)}

/* PANEL */
.panel{background:var(--white);border-radius:var(--r);border:1px solid var(--border);margin-bottom:14px;overflow:hidden}
.panel-head{padding:13px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.panel-title{font-size:13px;font-weight:700}
.panel-body{padding:16px}

/* TABLE
   border-collapse:separate (مش collapse) — ضروري: كروم يتجاهل
   position:sticky على <td>/<th> إذا كان الجدول collapsed، فعمود
   الإجراءات ما يتملّقش ويختفي خارج الشاشة على الجوال.
   الحدود السفلية لكل خلية موجودة أصلاً تحت .tbl td/th فتبان نفس الصورة. */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-tbl)}
.tbl th{text-align:right;padding:9px var(--cell-pad);font-size:var(--fs-th);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;border-bottom:2px solid var(--border);background:var(--paper)}
.tbl td{padding:10px var(--cell-pad);border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--paper)}
.num{font-family:var(--mono);font-size:13px}
.pos{color:var(--green);font-weight:500}
.neg{color:var(--red);font-weight:500}
.tbl-wrap{overflow-x:auto;max-width:100%}

/* ── الجداول: عرض أدنى + عمود الإجراءات ثابت ──
   السبب: الأزرار (⭐ ↻ ✅ تم ⏸️) كانت تنزاح خارج الشاشة في الجداول
   العريضة. min-width يمنع الانضغاط، وعمود .act يبقى ملزوق بالحافة
   اليسرى (آخر عمود في RTL) مهما سحبت أفقياً.
   ملاحظة: border-collapse:default + sticky يشتغلان معاً — نستخدم
   box-shadow بدل border داخلي لأن الحدّ يختفي مع التمرير. */
.tbl{min-width:700px}
.tbl .act{width:1%;white-space:nowrap;padding-left:6px;padding-right:6px}
.tbl th.act{position:sticky;left:0;z-index:3}
.tbl td.act{position:sticky;left:0;z-index:2}
.tbl th.act,.tbl td.act{background:var(--white);box-shadow:1px 0 0 var(--border)}
.tbl td.act>div.act-row{display:flex;gap:4px;align-items:center;justify-content:flex-end}
.tbl tr:hover td.act{background:var(--paper)}
.tbl tfoot td.act,.tbl tr:last-child td.act{background:var(--paper)}
/* بدون فلتر فارغ: لمّا الجدول فاضي ما نبغاش خط بارد في الوسط */
.tbl .act .btn-sm{padding:5px 8px;font-size:12px;white-space:nowrap}
/* جدول المستخدمين مغلّف بدون .tbl-wrap، فعلى الجوال كان يطلع
   206 عنصر خارج الشاشة (tbl من -253 إلى 317) ولا فيه تمرير.
   نفس المتطلب: تمرير أفقي بدل قصّ. */
#users-list-admin{overflow-x:auto}

/* ── جدول لوحة الورشة — نسخة مضغوطة ──
   اللوحة فيها 9 أعمدة (منها 4 أزرار حالة + حقلي وقت + ملاحظة)
   فكانت تطلع أعرض من الشاشة وتتقص. هنا نقلّص الهوامش وحقول
   الوقت ونصغّر أزرار الحالة، ونخلي الحد الأدنى للجدول أصغر
   عشان يتقاس في عرض 600px بدون سحب أفقي. */
.tbl.ws-tbl{min-width:540px}
.tbl.ws-tbl th,.tbl.ws-tbl td{padding:6px 5px}
.tbl.ws-tbl .act{padding-left:4px;padding-right:4px}
.tbl.ws-tbl .act .btn-sm{padding:4px 6px;font-size:11px}
.tbl.ws-tbl td input[type=time]{width:66px!important;padding:3px 2px!important;font-size:10px!important}
.tbl.ws-tbl td input[type=text]{min-width:52px;padding:3px 4px!important;font-size:10px!important}
.tbl.ws-tbl .ws-acts{gap:var(--gap-sm);flex-wrap:wrap;min-width:150px}
.tbl.ws-tbl .ws-acts .btn-sm{padding:4px 5px;font-size:11px}
/* عمود الاسم: ما يتمددش بordin excess — ياخد بordin معقول ويقص النية */
/* عمود الاسم: كان max-width + ellipsis فاسم الموظف ينقص.
   الآن الاسم ينكسر على سطرين بدل ما يُقص — يبقى الاسم تام
   حتى في أضيق عرض. */
.tbl.ws-tbl td.ws-name{max-width:150px;line-height:1.25;word-break:break-word;overflow-wrap:anywhere}
@media(max-width:820px){
  .tbl.ws-tbl{min-width:0}
  .tbl.ws-tbl .ws-acts{min-width:0}
  .tbl.ws-tbl td.ws-name{max-width:104px}
  .tbl.ws-tbl td input[type=time]{width:58px!important}
}
/* شاشات الجوال الضيقة: 9 أعمدة في 355px مستحيل بدون لفّ.
   نقلّص كل عمود لأقل حجم مقروء، والجدول يفضل ملزوق بالحافة
   اليسرى (عمود .act) عشان زر المسح ما يختفيش. */
@media(max-width:560px){
  .tbl.ws-tbl{font-size:var(--fs-tbl-xs)}
  .tbl.ws-tbl th,.tbl.ws-tbl td{padding:4px var(--cell-pad-xs)}
  .tbl.ws-tbl th{font-size:var(--fs-th-xs);letter-spacing:0}
  .tbl.ws-tbl td.ws-name{max-width:76px;font-size:var(--fs-tbl-xs)}
  .tbl.ws-tbl .ws-acts{gap:var(--gap-xs)}
  .tbl.ws-tbl .ws-acts .btn-sm{padding:3px 3px;font-size:9px}
  .tbl.ws-tbl .badge{font-size:8px;padding:2px 3px}
  .tbl.ws-tbl td input[type=time]{width:44px!important;font-size:9px!important;padding:2px 0!important}
  .tbl.ws-tbl td input[type=text]{font-size:9px!important;padding:2px 2px!important;min-width:30px}
  .tbl.ws-tbl .act .btn-sm{padding:3px 2px;font-size:9px}
  /* أزرار الحالة: أيقونة بس بدون نص — النص متبقّى في title
     والاختيار يبقى واضح بالأيقونة الملوّنة + الحدّ الذهبي. */
  .tbl.ws-tbl .ws-acts .btn-sm .ws-lbl{display:none}
  .tbl.ws-tbl .ws-acts .btn-sm{padding:4px 5px;font-size:12px;min-width:26px;justify-content:center}
}

/* ── تعديل فوري داخل خلايا الجدول ──
   الخلية القابلة للتعديل يبيّن لها خط منقّط خفيف. تضغطها
   فتستبدل محتواها بحقل، وتُحفظ بـ Enter أو بخروج التركيز. */
.tbl td.editable{cursor:cell;border-bottom:1px dashed rgba(199,168,76,.55)!important}
.tbl td.editable:hover{background:rgba(199,168,76,.10)}
.tbl td.editable.edited{background:rgba(26,107,60,.09)}
.cell-edit{width:100%;min-width:0;padding:3px 5px;font:inherit;font-size:12px;border:1.5px solid var(--gold);border-radius:5px;background:var(--white);color:var(--ink)}
.tbl.ws-tbl .cell-edit{padding:2px 3px;font-size:10px}
.ws-card-list{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:10px;max-width:100%}
.ws-card{background:var(--white);border:1px solid var(--border);border-right:4px solid var(--blue);border-radius:8px;padding:11px;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.ws-card.ok{border-right-color:var(--green);background:var(--green-l)}
.ws-card.warn{border-right-color:var(--gold);background:var(--gold-l)}
.ws-card.bad{border-right-color:var(--red);background:var(--red-l)}
.ws-card.info{border-right-color:var(--blue);background:var(--blue-l)}
.ws-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px}
.ws-card-head b{font-size:14px;line-height:1.5}
.ws-card-meta{display:flex;flex-wrap:wrap;gap:7px 12px;color:var(--muted);font-size:12px;margin-bottom:8px}
.ws-card-text{font-size:12px;line-height:1.7;color:var(--ink);background:rgba(255,255,255,.55);border-radius:6px;padding:7px;margin:6px 0}
.ws-card-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ws-card-actions .btn-sm{padding:6px 9px;font-size:12px}
.ws-card-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.ws-card-fields label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted);font-weight:700}
.ws-card-fields input,.ws-card-note input{border:1px solid var(--border);border-radius:6px;padding:7px;font-family:var(--font);background:var(--white)}
.ws-card-note{display:flex;gap:7px;margin-top:8px}
.ws-card-note input{flex:1;min-width:0}
.ws-table-fallback{display:none}
#page-workshop_att,#page-shortages,#page-office_shortages,#page-appointments{padding:0;overflow-x:hidden}
#page-workshop_att.active,#page-shortages.active,#page-office_shortages.active,#page-appointments.active{display:block;padding-top:0!important}
#page-workshop_att>.topbar,#page-shortages>.topbar,#page-office_shortages>.topbar,#page-appointments>.topbar{margin:0}
#page-workshop_att .topbar,#page-shortages .topbar,#page-office_shortages .topbar,#page-appointments .topbar{top:0!important}
#page-workshop_att>div:not(.topbar),#page-shortages>div:not(.topbar),#page-office_shortages>div:not(.topbar),#page-appointments>div:not(.topbar){padding:14px!important;max-width:100%;overflow-x:auto;overflow-y:visible;box-sizing:border-box}
#page-workshop_att .cards-row,#page-shortages .cards-row,#page-office_shortages .cards-row,#page-appointments .cards-row{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
#page-workshop_att .panel,#page-shortages .panel,#page-office_shortages .panel,#page-appointments .panel{max-width:100%;overflow-x:auto;overflow-y:visible}
select.cell-edit{cursor:pointer}
@media(max-width:560px){ .tbl.ws-tbl .cell-edit{font-size:9px;padding:1px 2px} }

/* ── الجوال: كل صف بطاقة بدل صف جدول ─────────────────────────
   السبب: على شاشة الجوال يبقى الجدول أعرض من الشاشة بنحو 110px،
   فتقع خانات (الهاتف، الموعد، المُبلِّغ، أزرار الحالة) خارج
   الشاشة ولا تظهر إلا بسحب أفقي مخفي — فيرى المستخدم شاشة
   مقصوصة وبيانات ناقصة. وتضييق الجدول أكثر يضغط النصوص
   ويصغّر أهداف الضغط لدرجة يصعب لمسها.
   الحل هنا: كل صف يتحوّل إلى بطاقة عمودية — كل خانة تطلع مع
    عنوانها (data-l) وما فيه تمرير أفقي إطلاقاً، ولا حذف أي عمود.
   أي عمود ضيّق = بيانات مخفية، وهذا عكس المطلوب. */
/* ── سطح المكتب: اجعل الجدول يملأ المتاح بدل أن يفرض تمريراً ──
   كل ما سبق مضبوط للهاتف (≤820px) ويتركه كما هو. المشكلة على
   الكمبيوتر أن min-width:700px مع nowrap كانا يجبران الجدول على
   تجاوز العرض المتاح، فيظهر تمرير أفقي بدل أن تظهر الأعمدة
   كاملة. هنا نخفض الحد الأدنى، ونسمح للعناوين والأزرار بالالتفاف،
   ونكسر النص الطويل داخل الخانة. النتيجة: الجدول يأخذ عرض
   الصفحة بقدر ما يحتاج ولا يزيد. */
@media(min-width:821px){
  .tbl{min-width:560px}
  .tbl th{white-space:normal;overflow-wrap:anywhere}
  .tbl td{overflow-wrap:anywhere}
  .tbl .act{white-space:normal}
  .tbl td.act>div.act-row{flex-wrap:wrap;justify-content:flex-end}
  .tbl.ws-tbl .ws-acts{flex-wrap:wrap;min-width:0}
  .tbl.ws-tbl td input[type=time],.tbl.ws-tbl td input[type=text]{min-width:0}
}
@media(max-width:820px){
  /* مهم: overflow-x:visible لازم يكون على جداول الورشة بس. كان على
     كل .tbl-wrap فوجدنا 7 صفحات (لوحة التحكم، اليوم، الوصولات،
     الشركاء، الموظفون، المستخدمون، الفواتير) جداولها مقصوصة
     197..346px وما فيها تمرير أفقي — نفس مرض «بيانات ناقصة». */
  .tbl-wrap:has(.tbl.ws-tbl){overflow-x:auto}
  .tbl.ws-tbl{display:block;min-width:0}
  .tbl.ws-tbl thead{display:none}
  .tbl.ws-tbl tbody,.tbl.ws-tbl tfoot{display:block}
  .tbl.ws-tbl tbody tr,.tbl.ws-tbl tfoot tr{
    display:block;background:var(--white);
    border:1px solid var(--border);border-radius:10px;
    padding:8px 10px;margin:0 0 8px;
  }
  /* كل خانة: عنوانها يمين وقيمتها يسار، سطر واحد. الشبكة بعمودين
     جُرّبت وكانت أسوأ — الخانة العريضة (أزرار الحالة) تنكسر
     لأربعة أسطر ويزداد ارتفاع البطاقة. */
  .tbl.ws-tbl tbody td,.tbl.ws-tbl tfoot td{
    display:flex;align-items:center;gap:8px;
    border:0!important;padding:2px 0!important;margin:0;
    max-width:none!important;width:auto!important;min-width:0;
    text-align:right!important;font-size:12px!important;color:var(--ink)!important;
    overflow-wrap:anywhere;word-break:break-word;
  }
  .tbl.ws-tbl tbody td::before,.tbl.ws-tbl tfoot td::before{
    content:attr(data-l);flex:0 0 66px;
    font-size:9px;font-weight:700;color:var(--muted);text-align:right;
  }
  /* النص والقيم داخل الخانة المرنة يجب أن تنكمش بدل أن تفيض على
     البطاقة؛ بدون flex:1/min-width:0 يبقى النص بمقاسه الأصلي. */
  .tbl.ws-tbl tbody td>*,.tbl.ws-tbl tfoot td>*{flex:0 1 auto;min-width:0;max-width:100%}
  .tbl.ws-tbl tbody td input,.tbl.ws-tbl tfoot td input{flex:1 1 auto;width:auto!important}
  /* الاسم: سطر مستقل فوق باقي حقول البطاقة */
  .tbl.ws-tbl tbody td.ws-name{
    display:block;font-size:13px!important;font-weight:700;
    padding:0 0 5px!important;margin:0 0 3px;
    border-bottom:1px solid var(--border)!important;
  }
  .tbl.ws-tbl tbody td.ws-name::before{content:none}
  /* الأزرار: عرض السطر كلها، وأهداف لمس كبيرة (كانت 18x22 فقط) */
  .tbl.ws-tbl td.act{
    position:static!important;box-shadow:none!important;
    display:flex;flex-wrap:wrap;gap:6px;
    padding:7px 0 0!important;margin:2px 0 0;
    border-top:1px solid var(--border)!important;
    justify-content:flex-start!important;
  }
  .tbl.ws-tbl td.act::before{content:none;display:none}
  .tbl.ws-tbl td.act>div{width:100%;justify-content:flex-start!important;flex-wrap:wrap;gap:6px}
  .tbl.ws-tbl .ws-acts{width:100%;min-width:0;justify-content:flex-start!important;flex-wrap:wrap;gap:5px}
  /* حدّ أدنى واقعي لهدف اللمس: 36px ارتفاع و40px عرض */
  .tbl.ws-tbl .act .btn-sm,
  .tbl.ws-tbl .ws-acts .btn-sm{
    min-height:36px;min-width:40px;padding:7px 10px!important;
    font-size:12px!important;border-radius:8px;
  }
  /* أزرار الحالة: أيقونة ملوّنة بلا نص، عشان الأربعة يطلعوا
     سطر واحد بدل ما ينكسرون لسطرين (وفّرنا ~35px ارتفاع). */
  .tbl.ws-tbl .ws-acts .btn-sm{padding:7px 8px!important;min-width:38px}
  .tbl.ws-tbl .ws-acts .btn-sm .ws-lbl{display:none}
  /* الحقول تاخذ عرضها كاملاً */
  .tbl.ws-tbl td input[type=time],.tbl.ws-tbl td input[type=text],
  .tbl.ws-tbl td input[type=date],.tbl.ws-tbl td input[type=tel],
  .tbl.ws-tbl td input[type=number]{width:100%!important;min-width:0!important;font-size:12px!important;padding:6px 7px!important}
  .tbl.ws-tbl .cell-edit{width:100%;font-size:12px;padding:7px}
  select.cell-edit{padding:7px}
  .tbl.ws-tbl .badge{font-size:10px;padding:3px 8px}
  .tbl.ws-tbl tfoot tr{background:var(--paper)!important;font-weight:700}
}

/* BADGE */.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700}
.bg{background:var(--green-l);color:var(--green)}
.br{background:var(--red-l);color:var(--red)}
.bb{background:var(--blue-l);color:var(--blue)}
.bgo{background:var(--gold-l);color:#7A5A10}
.bgr{background:var(--cream);color:var(--muted)}
.bwa{background:#E8F8F0;color:var(--wa-dark)}
.bor{background:var(--orange-l);color:var(--orange)}

/* FORMS */
.fg{display:flex;flex-direction:column;gap:5px}
.fg label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.fg input,.fg select,.fg textarea{border:1.5px solid var(--border);border-radius:8px;padding:9px 11px;font-family:var(--font);font-size:14px;background:var(--white);color:var(--ink);outline:none;transition:border-color .15s}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,.12)}
.fg textarea{resize:vertical;min-height:65px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:8px;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;border:none;transition:all .15s}
.btn-primary{background:var(--ink);color:var(--gold)}
.btn-primary:hover{background:#222}
.btn-success{background:var(--green);color:#fff}
.btn-success:hover{background:#145430}
.btn-danger{background:var(--red);color:#fff;font-size:11px;padding:5px 10px}
.btn-ghost{background:transparent;color:var(--muted);border:1.5px solid var(--border)}
.btn-ghost:hover{background:var(--cream);color:var(--ink)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{opacity:.9}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-pdf{background:#8B1A1A;color:#fff;font-size:11px;padding:5px 10px}
.btn-pdf:hover{background:#6a1414}
.btn-excel{background:#1A6B3C;color:#fff;font-size:11px;padding:5px 10px}
.btn-excel:hover{background:#145430}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:var(--wa-dark)}
.btn-orange{background:var(--orange);color:#fff;font-size:12px;padding:6px 12px}
.btn-orange:hover{opacity:.88}

/* MODAL */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10000;display:none;align-items:center;justify-content:center;padding:14px;box-sizing:border-box}
.modal-bg.open{display:flex}
.modal{background:var(--white);border-radius:8px;width:100%;max-width:500px;max-height:90vh;max-height:calc(100dvh - 28px);display:flex;flex-direction:column;overflow:hidden;min-width:0}
.modal-head{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.modal-title{font-size:15px;font-weight:700}
.modal-close{cursor:pointer;font-size:20px;color:var(--muted);line-height:1}
.modal-head,.modal-foot{flex-shrink:0;background:var(--white)}
.toast{z-index:10020;max-width:calc(100vw - 24px);white-space:normal;text-align:center}
.modal-body{padding:18px;overflow-y:auto;min-height:0;overscroll-behavior:contain}
.modal-foot{padding:12px 18px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

/* DEBT CARDS */
.debt-card{border-radius:var(--r);border:1.5px solid var(--border);padding:14px 16px;margin-bottom:10px;background:var(--white);position:relative;overflow:hidden}
.debt-card.owed::before{content:'';position:absolute;top:0;right:0;width:4px;height:100%;background:var(--red)}
.debt-card.due::before{content:'';position:absolute;top:0;right:0;width:4px;height:100%;background:var(--green)}
.debt-card.settled{opacity:.55}
.debt-card .dc-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.debt-card .dc-name{font-size:14px;font-weight:700}
.debt-card .dc-amount{font-family:var(--mono);font-size:16px;font-weight:900}
.debt-card.owed .dc-amount{color:var(--red)}
.debt-card.due .dc-amount{color:var(--green)}
.debt-card .dc-meta{font-size:11px;color:var(--muted);margin-bottom:10px}
.debt-card .dc-actions{display:flex;gap:6px;flex-wrap:wrap}

/* PRINT ENTRIES */
.print-entry-row{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--white);border-radius:8px;border:1px solid var(--border);margin-bottom:8px}
.print-entry-row:hover{border-color:var(--gold)}
.pe-info{flex:1;min-width:0}
.pe-name{font-size:13px;font-weight:700;margin-bottom:2px}
.pe-meta{font-size:11px;color:var(--muted)}
.pe-amount{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--blue);white-space:nowrap}

/* MISC */
.divider{height:1px;background:var(--border);margin:12px 0}
.sec-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px;margin-top:14px}
.empty{text-align:center;padding:36px 20px;color:var(--muted)}
.empty-icon{font-size:32px;margin-bottom:8px}
.empty p{font-size:13px}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--gold);padding:11px 22px;border-radius:30px;font-size:13px;font-weight:500;z-index:9999;opacity:0;pointer-events:none;transition:opacity .3s;white-space:nowrap}
.toast.show{opacity:1}
.notify-bar{position:fixed;bottom:64px;left:50%;transform:translateX(-50%);background:#fff;border:2px solid var(--wa);border-radius:12px;padding:10px 16px;font-size:13px;z-index:9998;display:none;align-items:center;gap:10px;box-shadow:0 4px 20px rgba(0,0,0,.15);direction:rtl;max-width:420px}
.notify-bar.show{display:flex}
.notify-bar .nb-info{flex:1;min-width:0;line-height:1.5}
.notify-bar .nb-info strong{display:block;font-size:14px}
.notify-bar .nb-info span{color:var(--muted);font-size:11px}
#autosave-badge{position:fixed;bottom:22px;right:22px;background:var(--green);color:#fff;padding:6px 14px;border-radius:20px;font-size:11px;font-weight:700;z-index:9998;opacity:0;transition:opacity .5s;pointer-events:none}
#autosave-badge.show{opacity:1}
#autosave-badge.bad{background:var(--red);color:#fff}
#undo-fab{position:fixed;bottom:22px;left:22px;width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:9997;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .15s;opacity:.85}
#undo-fab:hover{transform:scale(1.08);opacity:1}
#undo-fab:active{transform:scale(.94)}
#undo-fab.empty{opacity:.35;pointer-events:none}
#undo-count{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:10px;background:var(--gold);color:#3A2A0A;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.sr-row{display:flex;align-items:center;padding:11px 0;border-bottom:1px solid var(--border);gap:10px}
.sr-row:last-child{border-bottom:none}
.sr-label{flex:1;font-size:13px;font-weight:500}
.sr-sub{font-size:11px;color:var(--muted);margin-top:2px}
.sr-inp{width:110px;text-align:left;padding:7px 9px;border:1.5px solid var(--border);border-radius:7px;font-family:var(--mono);font-size:13px;background:var(--white)}
.sr-inp:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(201,168,76,.12)}
.tab-bar{display:flex;gap:4px;margin-bottom:14px;background:var(--cream);padding:4px;border-radius:10px;width:fit-content}
.tab{padding:7px 18px;border-radius:7px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .15s}
.tab.active{background:var(--white);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.1)}
.split-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.split-card{background:var(--white);border-radius:var(--r);border:1px solid var(--border);padding:18px;position:relative;overflow:hidden}
.split-card::before{content:'';position:absolute;top:0;right:0;width:4px;height:100%}
.split-card.cash::before{background:var(--green)}
.split-card.bank::before{background:var(--blue)}
.split-card .sc-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.split-card.cash .sc-label{color:var(--green)}
.split-card.bank .sc-label{color:var(--blue)}
.split-card .sc-val{font-size:28px;font-weight:900;font-family:var(--mono)}
.split-card.cash .sc-val{color:var(--green)}
.split-card.bank .sc-val{color:var(--blue)}
.split-card .sc-sub{font-size:11px;color:var(--muted);margin-top:4px}
input[type=file]{display:none}

/* WhatsApp Styles */
.wa-header-card{background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);border-radius:var(--r);padding:22px 24px;margin-bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.wa-header-card-info h3{color:white;font-size:20px;font-weight:900;margin:0 0 4px}
.wa-header-card-info p{color:rgba(255,255,255,.75);font-size:13px;margin:0}
.wa-header-card-icon{font-size:52px;opacity:.9}
.wa-master-card{background:white;border-radius:var(--r);border:2px solid var(--border);padding:16px 20px;display:flex;align-items:center;gap:16px;margin-bottom:14px;transition:border-color .2s}
.wa-master-card.on{border-color:var(--wa)}
.wa-master-icon{font-size:36px}
.wa-master-text{flex:1}
.wa-master-text h4{font-size:14px;font-weight:700;margin:0 0 3px}
.wa-master-text p{font-size:12px;color:var(--muted);margin:0}
.wa-last-sent{font-size:11px;color:var(--wa-dark);font-weight:600;margin-top:4px}
.big-toggle{position:relative;display:inline-block;width:60px;height:32px;flex-shrink:0}
.big-toggle input{opacity:0;width:0;height:0}
.big-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#ccc;border-radius:32px;transition:.3s}
.big-slider::before{position:absolute;content:"";height:24px;width:24px;left:4px;bottom:4px;background:white;border-radius:50%;transition:.3s;box-shadow:0 2px 4px rgba(0,0,0,.25)}
.big-toggle input:checked + .big-slider{background:var(--wa)}
.big-toggle input:checked + .big-slider::before{transform:translateX(28px)}
.wa-time-card{background:white;border-radius:var(--r);border:1px solid var(--border);padding:14px 20px;display:flex;align-items:center;gap:14px;margin-bottom:14px}
.wa-time-label{flex:1;font-size:13px;font-weight:600}
.wa-time-label small{display:block;font-size:11px;color:var(--muted);font-weight:400;margin-top:2px}
.wa-time-inp{border:1.5px solid var(--border);border-radius:8px;padding:8px 12px;font-size:14px;font-family:var(--mono);color:var(--ink);outline:none;background:var(--paper)}
.wa-time-inp:focus{border-color:var(--wa);box-shadow:0 0 0 3px rgba(37,211,102,.12)}
.wa-send-bar{background:linear-gradient(135deg,#25D366,#128C7E);border-radius:var(--r);padding:16px 20px;display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.wa-send-bar-text{color:white}
.wa-send-bar-text p{font-size:14px;font-weight:700;margin:0}
.wa-send-bar-text span{font-size:11px;opacity:.8;display:block;margin-top:2px}
.wa-section-header{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin:18px 0 10px;padding-bottom:8px;border-bottom:2px solid var(--border);display:flex;align-items:center;gap:8px}
.wa-rec-row{display:flex;align-items:center;gap:10px;padding:12px 14px;background:white;border-radius:10px;border:1.5px solid var(--border);margin-bottom:8px;transition:all .2s}
.wa-rec-row:hover{border-color:rgba(37,211,102,.4)}
.wa-rec-row.active-rec{border-color:var(--wa);background:#F0FBF4}
.wa-rec-info{min-width:130px;display:flex;align-items:center;gap:8px}
.wa-rec-name{font-size:13px;font-weight:700}
.wa-phone-inp{flex:1;border:1.5px solid var(--border);border-radius:8px;padding:8px 10px;font-size:13px;font-family:var(--mono);color:var(--ink);outline:none;transition:border-color .15s;background:var(--paper)}
.wa-phone-inp:focus{border-color:var(--wa);box-shadow:0 0 0 3px rgba(37,211,102,.12);background:white}
.wa-rec-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.sm-toggle{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0}
.sm-toggle input{opacity:0;width:0;height:0}
.sm-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#ccc;border-radius:22px;transition:.25s}
.sm-slider::before{position:absolute;content:"";height:16px;width:16px;left:3px;bottom:3px;background:white;border-radius:50%;transition:.25s}
.sm-toggle input:checked + .sm-slider{background:var(--wa)}
.sm-toggle input:checked + .sm-slider::before{transform:translateX(18px)}
.wa-bubble{background:var(--wa-light);border-radius:12px 12px 4px 12px;padding:16px 18px;white-space:pre-wrap;font-size:13px;line-height:1.75;font-family:'Segoe UI',Tahoma,sans-serif;color:#111;max-height:380px;overflow-y:auto;direction:rtl;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.wa-bubble-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid rgba(0,0,0,.08)}
.wa-info-note{background:#FFF9E6;border:1px solid #F0D060;border-radius:8px;padding:12px 14px;font-size:12px;color:#7A5A10;margin-bottom:14px;line-height:1.6}

/* Print */
@media print {
  body * { visibility: hidden; }
  #pdf-print-area, #pdf-print-area * { visibility: visible; }
  #pdf-print-area { position: fixed; inset: 0; background: white; z-index: 99999; padding: 3mm 4mm; direction: rtl; font-family: 'Tajawal', sans-serif; }
  .no-print { display: none !important; }
  .pdf-header-logo { width:48px; height:48px !important; }
  .pdf-header h1 { font-size:16px !important; }
  .pdf-header h2 { font-size:12px !important; }
  .pdf-meta { font-size:9px !important; }
  .pdf-table th, .pdf-table td { font-size:9px !important; padding:1px 3px !important; line-height:1.2 !important; }
  .pdf-summary td { font-size:10px !important; padding:3px 5px !important; }
  .pdf-footer { font-size:8px !important; margin-top:16px !important; }
  @page{size:A4;margin:4mm}
  body:has(#pdf-print-area.printing .ws-report) > :not(#pdf-print-area) { display:none !important; }
  #pdf-print-area:has(.ws-report) { position:static; height:auto; overflow:visible; }
  .ws-report .pdf-table thead { display:table-header-group; }
  .ws-report .pdf-table tr { break-inside:avoid; }
  .ws-report .pdf-table th, .ws-report .pdf-table td { font-size:11px !important; padding:4px !important; line-height:1.5 !important; }
}
#pdf-print-area { display: none; }
#pdf-print-area.printing { display: block; }
.pdf-header { text-align: center; margin-bottom: 20px; border-bottom: 3px solid #C9A84C; padding-bottom: 14px; display:flex; align-items:center; gap:20px; direction:rtl; }
.pdf-header-logo { width:90px; height:90px; object-fit:contain; flex-shrink:0; }
.pdf-header-text { flex:1; text-align:right; }
.pdf-header h1 { font-size: 22px; font-weight: 900; color: #0D0D0D; }
.pdf-header h2 { font-size: 16px; color: #1A3A6B; margin-top: 4px; }
.pdf-header .pdf-meta { font-size: 12px; color: #7A7468; margin-top: 4px; font-family: 'IBM Plex Mono', monospace; }
.ws-hours-form .ws-overnight { display:flex; align-items:center; gap:8px; }
.ws-hours-form .ws-overnight input { width:18px; height:18px; flex:0 0 18px; }
.work-tools-content { padding:22px; }
.work-entry-form { display:grid; grid-template-columns:2fr 1fr 2fr auto; gap:12px; align-items:end; padding-bottom:18px; border-bottom:1px solid var(--border); }
.work-tools-filters { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:16px 0; }
.work-tools-filters input, .work-tools-content input, #page-employee_hours .topbar input { min-width:0; max-width:100%; padding:8px; border:1px solid var(--border); border-radius:6px; font:inherit; }
.employee-hours-form { display:grid; grid-template-columns:1fr 2fr; gap:10px; }
.employee-hours-form .ws-card-head, .employee-hours-form .ws-card-actions { grid-column:1/-1; }
.employee-hours-form .ws-overnight { display:flex;align-items:center;gap:8px; }
.employee-hours-form .ws-overnight input { width:18px;height:18px;flex:0 0 18px; }
.ws-time-input { display:flex; gap:6px; min-width:0; }
.ws-time-input input { flex:1; min-width:0; }
.ws-time-input .btn { flex:0 0 auto; font-size:12px; padding:6px; }
.user-hours-access { display:flex; align-items:center; gap:6px; font-size:12px; }
@media(max-width:700px){
  .work-entry-form { grid-template-columns:1fr; }
  .work-tools-content { padding:12px; }
  #users-list-admin > div { flex-wrap:wrap; }
  .employee-hours-form { grid-template-columns:1fr; }
}
[hidden] { display:none !important; }
.pdf-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px; overflow-wrap:anywhere; }
.pdf-table th { background: #F7F4EE; padding: 8px 10px; text-align: right; font-weight: 700; font-size: 11px; border: 1px solid #D4CFC5; color: #7A7468; }
.pdf-table td { padding: 8px 10px; border: 1px solid #D4CFC5; text-align: right; vertical-align: middle; }
.pdf-table tr:nth-child(even) td { background: #F7F4EE; }
.pdf-summary { margin-top: 20px; background: #F7F4EE; border-radius: 8px; padding: 14px; }
.pdf-summary table { width: 100%; font-size: 13px; }
.pdf-summary td { padding: 5px 8px; }
.pdf-summary .lbl { color: #7A7468; }
.pdf-summary .val { font-family: 'IBM Plex Mono', monospace; font-weight: 700; text-align: left; }
.pdf-footer { margin-top: 30px; text-align: center; font-size: 11px; color: #7A7468; border-top: 1px solid #D4CFC5; padding-top: 10px; }
.privacy-on .num,
.privacy-on .kpi-val,
.privacy-on .sc-val,
.privacy-on .pdf-summary .val,
.privacy-on .pdf-table td:not(:first-child){
  color: transparent !important;
  text-shadow: 0 0 10px rgba(13,13,13,.42);
  user-select: none;
}
.privacy-on .privacy-plain{color:inherit!important;text-shadow:none!important;user-select:auto}
.privacy-toggle{border:1.5px solid var(--border);background:var(--white);color:var(--muted)}
.privacy-toggle.on{background:var(--ink);color:var(--gold);border-color:var(--ink)}

/* ════════════════════════════════════════════
   البحث التلقائي (Typeahead)
   ════════════════════════════════════════════ */
.ta-box{
  position:absolute;z-index:9000;min-width:220px;max-height:260px;overflow-y:auto;
  background:var(--white);border:1.5px solid var(--border);border-radius:8px;
  box-shadow:0 8px 24px rgba(13,13,13,.18);margin-top:2px;
}
.ta-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;cursor:pointer;font-size:14px;border-bottom:1px solid var(--border)}
.ta-item:last-child{border-bottom:none}
.ta-item:hover,.ta-item.active{background:var(--gold-l)}
.ta-item.active{box-shadow:inset 3px 0 0 var(--gold)}
.ta-name{font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ta-type{font-size:11px;color:var(--muted);background:var(--paper);border:1px solid var(--border);border-radius:20px;padding:1px 8px;white-space:nowrap}
.ta-box:empty{display:none}

/* ══════════════════════════════════════════════════════════════
   شاشة الإعداد لأول مرة
   ══════════════════════════════════════════════════════════════ */
/* صندوق الإعداد لا يمر عبر .login-wrap، لذا يُوسَّط بنفسه */
#setup-box{
  display:none;margin:0 auto;background:var(--white);
  border-radius:18px;padding:40px 36px;width:360px;max-width:94vw;
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
}
#setup-box h1{font-size:22px}
.setup-input{
  width:100%;padding:12px;border:2px solid var(--border);border-radius:8px;
  font-size:15px;font-family:var(--font);background:var(--white);color:var(--ink);
  outline:none;transition:border-color .15s;
}
.setup-input:focus{border-color:var(--gold)}
@media(max-width:600px){
  #setup-box{padding:24px 20px;width:100%}
}

/* ═══════════════════════════════════════════════════════════
   قواعد الجوال — كانت في أول الملف فوق قواعد الأساس،
   فكان CSS يكسر آخر واحد ويطغى عليها العرض المكتبي:
   .page{padding:22px} و.cards-row{minmax(150px,1fr)} الغيا
   padding:8px والشبكة عمودين، فالبيانات تنزل تحت الطية.
   نُقلت كلها لآخر الملف عشان تفرض نفسها على الجوال.
   ═══════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .shell{flex-direction:column}
  .sidebar{width:100%;height:auto;position:fixed;bottom:0;right:0;top:auto;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;border-top:2px solid var(--gold);z-index:999}
  .sidebar-logo,.sidebar-user,.nav-version,.nav-build{display:none!important}
  .sidebar>:not(.nav-links):not(.sidebar-utils){display:none!important}
  .sidebar-utils{display:flex!important;flex-direction:row;gap:4px;padding:4px 6px;border-top:1px solid rgba(255,255,255,.1);width:100%;align-items:stretch}
  .sidebar-utils>.su-item{flex:1;min-width:0;justify-content:center;padding:7px 4px;min-height:32px}
  .sidebar-utils .su-lbl,.sidebar-utils .su-key{display:none}
  .sidebar-utils .su-badge{margin-right:0;position:absolute;top:2px;left:2px}
  .sidebar-utils>.su-item{position:relative}
  .nav-links{display:flex;flex-wrap:nowrap;padding:4px;gap:2px;width:100%;justify-content:center}
  .nav-item{flex-direction:column;padding:6px 8px;gap:2px;font-size:10px;min-width:60px;text-align:center;white-space:nowrap}
  .nav-item .nav-label{display:block;font-size:9px}
  .nav-icon{font-size:18px;width:auto}
  .main{margin-right:0;margin-bottom:56px}
  .page{padding:12px}
  .topbar{padding:10px 12px;flex-wrap:wrap;gap:6px}
  .topbar h2{font-size:15px}
  .topbar-actions{flex-wrap:wrap;gap:4px}
  .topbar-actions .btn{padding:5px 8px;font-size:11px}
  .cards-row{grid-template-columns:repeat(2,1fr);gap:8px}
  .kpi{padding:10px}
  .kpi-val{font-size:17px}
  .split-cards{grid-template-columns:1fr;gap:10px}
  .split-card{padding:14px}
  .split-card .sc-val{font-size:22px}
  .profit-summary-box{padding:14px 16px}
  .panel-body{padding:12px}
  .panel-head{padding:10px 12px}
  .modal{max-width:100%;border-radius:14px 14px 0 0;margin-top:auto;max-height:85vh}
  .modal-bg{align-items:flex-end;padding:0}
  .modal-body{padding:14px}
  .modal-head{padding:14px}
  .fgrid{grid-template-columns:1fr}
  .tbl{font-size:12px}
  .tbl th,.tbl td{padding:6px 8px}
  .tbl{min-width:560px}
  .tbl .act .btn-sm{padding:4px 7px;font-size:11px}
  .tab-bar{width:100%;flex-wrap:nowrap;overflow-x:auto}
  .tab{padding:6px 12px;font-size:12px;white-space:nowrap}
  .debt-card{padding:12px 14px}
  .debt-card .dc-amount{font-size:14px}
  .print-entry-row{flex-wrap:wrap;gap:6px;padding:9px 11px}
  .pe-amount{font-size:13px}
  .sr-row{flex-wrap:wrap;gap:6px;padding:9px 0}
  .sr-inp{width:80px;font-size:12px}
  .login-box{padding:24px 20px;width:100%;max-width:94vw}
  .login-logo h1{font-size:18px}
  .users-grid{grid-template-columns:1fr 1fr;gap:6px}
  .user-btn{padding:10px 8px}
  .user-btn .ub-icon{font-size:18px}
  .user-btn .ub-name{font-size:12px}
  .pin-input{font-size:18px}
  .wa-header-card{flex-direction:column;text-align:center;padding:16px}
  .wa-header-card-icon{font-size:36px}
  .wa-master-card{flex-wrap:wrap;padding:12px 14px}
  .wa-rec-row{flex-wrap:wrap;padding:10px 12px}
  .wa-rec-info{min-width:auto;width:100%}
  .wa-phone-inp{width:100%}
  .wa-send-bar{flex-direction:column;gap:10px;text-align:center}
  .profit-row{font-size:12px}
  .profit-row .num.total{font-size:17px}
  .sr-label{font-size:12px}
  .sec-label{font-size:9px}
  .empty{padding:24px 16px}
  .empty-icon{font-size:26px}
}
@media(max-width:480px){
  .cards-row{grid-template-columns:1fr 1fr;gap:6px}
  .kpi-val{font-size:15px}
  .kpi-label{font-size:9px}
  .page{padding:8px}
  .topbar{padding:8px 10px}
  .nav-item{min-width:50px;padding:4px 6px}
  .nav-item .nav-label{font-size:8px}
  .nav-icon{font-size:16px}
  .tbl{font-size:var(--fs-tbl-sm)}
  .tbl th,.tbl td{padding:4px var(--cell-pad-sm)}
  .tbl{min-width:480px}
  .tbl .act{padding-left:4px;padding-right:4px}
  .tbl .act .btn-sm{padding:3px 6px;font-size:10px}
  .modal-body{padding:10px}
  .fg input,.fg select,.fg textarea{font-size:13px;padding:7px 9px}
  .btn{padding:7px 12px;font-size:12px}
}
@media(max-width:350px){
  .cards-row{grid-template-columns:1fr}
  .users-grid{grid-template-columns:1fr}
  .nav-item{min-width:44px}
  .nav-item .nav-label{display:none}
}

/* ═══════════════════════════════════════════════════════════
   صفحات متابعة الورشة على الجوال - ضغط عمودي حقيقي
   بعد تنشيط قواعد الجوال صحّحت الشبكة والأزرار، وبقيت
   مشكلة واحدة: كل ما فوق الجدول كان ياكل الشاشة، فأول صف
   بيانات كان عند y=699px في النواقص والمواعيد وy=954px في
   متابعة الورشة — يعني تحت الطية تماماً على جوال 360×640،
   فيرى المستخدم «شاشة ناقصة» ويضطر ينزل كل مرة.
   القياس بعد: بطاقات الإحصاء كانت 432px (عمود واحد لأن
   minmax(150px,1fr) لا يتسع لعمودين في 257px)، والفلاتر
   134px (ثلاثة أسطر). هنا:
     • الإحصاءات شبكتان 2×2 بدون سطر الوصف
     • الفلاتر شبكتان والبحث بعرض كامل
     • كل صف بطاقة بعمودين: العنوان فوق القيمة بدل
       66px ثابت، فتنزل من 341px إلى ~200px
   لا يُحذف أي حقل، ولا يُقلَّص أي هدف لمس عن 36px.
   ═══════════════════════════════════════════════════════════ */
@media(max-width:560px){
  /* أزرار الإجراءات في كل الجداول كانت 22..26px على الجوال
     (صفحة الموظفين: 6 أزرار تحت 28px) — رفعناها لهدف لمس مريح */
  .tbl .act .btn-sm,.tbl .act .btn{min-height:34px;padding:6px 10px!important}
  .cards-row{grid-template-columns:1fr 1fr!important;gap:6px;margin-bottom:10px}
  .kpi{padding:7px 9px}
  .kpi-label{font-size:9px;margin-bottom:1px;letter-spacing:0}
  .kpi-val{font-size:16px}
  .kpi-sub{display:none}

  .panel-head{flex-wrap:wrap;gap:6px;padding:8px 10px}
  .panel-title{font-size:13px}
  .panel-head>div{display:grid!important;grid-template-columns:1fr 1fr;gap:5px;width:100%}
  .panel-head>div>input[type=text]{grid-column:1/-1;width:100%!important}
  .panel-head input,.panel-head select{width:100%!important;font-size:12px;padding:4px 6px}
}

/* نفس بطاقة الجوال تمتد لعرض اللوح (820px): عند 768 كان الجدول
   يتنحرش في 659px — خانة الاسم 70px والأزرار 17 هدف صغير. */
@media(max-width:820px){
  /* أزرار الشريط العلوي كانت 27px ارتفاع — رفعناها لهدف لمس مريح */
  .topbar-actions .btn{min-height:32px;padding:6px 10px!important}
  .tbl.ws-tbl tbody tr,.tbl.ws-tbl tfoot tr{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px 8px;padding:8px 9px;
  }
  .tbl.ws-tbl tbody td,.tbl.ws-tbl tfoot td{
    display:block;width:auto!important;max-width:none!important;
    padding:2px 0!important;border:0!important;
    font-size:12px!important;text-align:right!important;
    /* 1fr كان minmax(auto,1fr) والحد الأدنى auto يمنع العمود من
       التصغير تحت عرض محتواه. فأي نص طويل أو رقم هاتف يوسّع
       البطاقة خارج الشاشة، فيُقصّ من اليمين ويمرّ تحت الشريط
       بلا أي تمرير. minmax(0,1fr) يسمح بالتصغير، وoverflow-wrap
       يكسر النص الطويل بدل أن يفضحه. */
    min-width:0;overflow-wrap:anywhere;word-break:break-word;
  }
  /* الأدوات والمفاتيح داخل الخانة: كانت width:100% فتجمع مع عرض
     البطاقة وتفيض. flex مع min-width:0 يجعلها تملأ المتبقي فقط. */
  .tbl.ws-tbl tbody td>*,.tbl.ws-tbl tfoot td>*{min-width:0;max-width:100%}
  .tbl.ws-tbl tbody td .act-row,.tbl.ws-tbl tfoot td .act-row{flex-wrap:wrap}
  .tbl-wrap{max-width:100%}
  .tbl.ws-tbl tbody td::before,.tbl.ws-tbl tfoot td::before{
    content:attr(data-l);display:block;flex:none;
    font-size:9px;font-weight:700;color:var(--muted);margin-bottom:1px;
  }
  .tbl.ws-tbl tfoot td:first-child::before{content:none}
  .tbl.ws-tbl tbody td.ws-name{
    grid-column:1/-1;display:block;font-size:14px!important;
    padding:0 0 5px!important;margin:0 0 4px;
    border-bottom:1px solid var(--border)!important;
  }
  /* الخانة اللي فيها أزرار الحالة (5 أزرار) كانت تنكسر داخل
     عمود واحد وتخلي البطاقة 338px — نخليها بعرض الصف كله. */
  .tbl.ws-tbl tbody td:has(.ws-acts),.tbl.ws-tbl tfoot td:has(.ws-acts){grid-column:1/-1}
  .tbl.ws-tbl td.act{
    grid-column:1/-1;display:block;position:static!important;box-shadow:none!important;
    padding:7px 0 0!important;margin:3px 0 0;
    border-top:1px solid var(--border)!important;
  }
  .tbl.ws-tbl td.act::before{content:none}
  .tbl.ws-tbl td.act>div{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start!important}
}






/* workshop-redesign-20261009-07: clear card-first workshop views */
#page-workshop_att,
#page-shortages,#page-office_shortages,
#page-appointments{
  padding:0!important;
  overflow:visible!important;
}
#page-workshop_att *,
#page-shortages *,#page-office_shortages *,
#page-appointments *{
  min-width:0;
}
#page-workshop_att>.topbar,
#page-shortages>.topbar,#page-office_shortages>.topbar,
#page-appointments>.topbar{
  flex-wrap:wrap;
  gap:10px;
  padding:12px 18px!important;
  overflow:visible!important;
}
#page-workshop_att>.topbar h2,
#page-shortages>.topbar h2,#page-office_shortages>.topbar h2,
#page-appointments>.topbar h2{
  flex:1 1 190px;
  line-height:1.5;
}
#page-workshop_att .topbar-actions,
#page-shortages .topbar-actions,#page-office_shortages .topbar-actions,
#page-appointments .topbar-actions{
  flex:1 1 320px;
  justify-content:flex-end;
  flex-wrap:wrap;
  max-width:100%;
}
#page-workshop_att>div:not(.topbar),
#page-shortages>div:not(.topbar),#page-office_shortages>div:not(.topbar),
#page-appointments>div:not(.topbar){
  padding:16px 18px 22px!important;
  max-width:100%;
  overflow:visible!important;
}
#page-workshop_att .cards-row,
#page-shortages .cards-row,#page-office_shortages .cards-row,
#page-appointments .cards-row{
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;
}
#page-workshop_att .panel,
#page-shortages .panel,#page-office_shortages .panel,
#page-appointments .panel{
  overflow:visible!important;
  border-radius:8px;
}
#page-workshop_att .panel-head,
#page-shortages .panel-head,#page-office_shortages .panel-head,
#page-appointments .panel-head{
  flex-wrap:wrap;
  align-items:flex-start;
  gap:10px;
}
#page-workshop_att .panel-head>div,
#page-shortages .panel-head>div,#page-office_shortages .panel-head>div,
#page-appointments .panel-head>div{
  flex:1 1 320px;
  justify-content:flex-end;
  max-width:100%;
}
#page-workshop_att .panel-head input,
#page-shortages .panel-head input,#page-office_shortages .panel-head input,
#page-appointments .panel-head input,
#page-workshop_att .panel-head select,
#page-shortages .panel-head select,#page-office_shortages .panel-head select,
#page-appointments .panel-head select{
  flex:1 1 150px;
  width:auto!important;
  max-width:100%;
}
#page-workshop_att .panel-body,
#page-shortages .panel-body,#page-office_shortages .panel-body,
#page-appointments .panel-body{
  padding:12px;
  overflow:visible!important;
}
#page-workshop_att .ws-card-list,
#page-shortages .ws-card-list,#page-office_shortages .ws-card-list,
#page-appointments .ws-card-list{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));
  gap:12px;
  width:100%;
  max-width:100%;
  padding:2px 2px 8px;
  margin:0;
  overflow:visible!important;
  direction:rtl;
}
#page-workshop_att .ws-card,
#page-shortages .ws-card,#page-office_shortages .ws-card,
#page-appointments .ws-card{
  width:100%;
  max-width:100%;
  overflow:visible!important;
  border:1px solid var(--border);
  border-right:6px solid var(--blue);
  border-radius:8px;
  padding:14px 16px;
  box-shadow:0 2px 10px rgba(13,13,13,.06);
}
#page-workshop_att .ws-card-head,
#page-shortages .ws-card-head,#page-office_shortages .ws-card-head,
#page-appointments .ws-card-head{
  flex-wrap:wrap;
  align-items:flex-start;
  gap:8px;
}
#page-workshop_att .ws-card-head b,
#page-shortages .ws-card-head b,#page-office_shortages .ws-card-head b,
#page-appointments .ws-card-head b{
  flex:1 1 180px;
  font-size:15px;
  line-height:1.6;
  overflow-wrap:anywhere;
}
#page-workshop_att .ws-card-meta,
#page-shortages .ws-card-meta,#page-office_shortages .ws-card-meta,
#page-appointments .ws-card-meta{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:6px 10px;
  line-height:1.6;
}
#page-workshop_att .ws-card-text,
#page-shortages .ws-card-text,#page-office_shortages .ws-card-text,
#page-appointments .ws-card-text{
  overflow-wrap:anywhere;
  white-space:normal;
}
#page-workshop_att .ws-card-actions,
#page-shortages .ws-card-actions,#page-office_shortages .ws-card-actions,
#page-appointments .ws-card-actions{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
  gap:7px;
}
#page-workshop_att .ws-card-actions .btn,
#page-shortages .ws-card-actions .btn,#page-office_shortages .ws-card-actions .btn,
#page-appointments .ws-card-actions .btn{
  min-height:34px;
  width:100%;
  justify-content:center;
  white-space:normal;
}
#page-workshop_att .ws-card-fields,
#page-shortages .ws-card-fields,#page-office_shortages .ws-card-fields,
#page-appointments .ws-card-fields{
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
}
#page-workshop_att .ws-card-note,
#page-shortages .ws-card-note,#page-office_shortages .ws-card-note,
#page-appointments .ws-card-note{
  flex-wrap:wrap;
}
#page-workshop_att .ws-card-note input,
#page-shortages .ws-card-note input,#page-office_shortages .ws-card-note input,
#page-appointments .ws-card-note input{
  flex:1 1 180px;
}
#page-workshop_att .ws-table-fallback,
#page-shortages .ws-table-fallback,#page-office_shortages .ws-table-fallback,
#page-appointments .ws-table-fallback{
  display:none!important;
}
@media(max-width:768px){
  #page-workshop_att>div:not(.topbar),
  #page-shortages>div:not(.topbar),#page-office_shortages>div:not(.topbar),
  #page-appointments>div:not(.topbar){padding:10px 8px 66px!important}
  #page-workshop_att>.topbar,
  #page-shortages>.topbar,#page-office_shortages>.topbar,
  #page-appointments>.topbar{padding:10px 8px!important}
  #page-workshop_att .panel-body,
  #page-shortages .panel-body,#page-office_shortages .panel-body,
  #page-appointments .panel-body{padding:8px}
  #page-workshop_att .ws-card-list,
  #page-shortages .ws-card-list,#page-office_shortages .ws-card-list,
  #page-appointments .ws-card-list{grid-template-columns:1fr;gap:10px;padding:0}
  #page-workshop_att .ws-card,
  #page-shortages .ws-card,#page-office_shortages .ws-card,
  #page-appointments .ws-card{padding:12px 13px;border-right-width:5px}
  #page-workshop_att .panel-head>div,
  #page-shortages .panel-head>div,#page-office_shortages .panel-head>div,
  #page-appointments .panel-head>div{flex-basis:100%;justify-content:stretch}
}

/* layout-grid-sidebar-20261009-08: sidebar is in layout, never over content */
@media(min-width:769px){
  .shell{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 220px;
    min-height:100vh;
    direction:ltr;
  }
  .main{
    grid-column:1;
    grid-row:1;
    margin-right:0!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    overflow-x:hidden;
    direction:rtl;
  }
  .sidebar{
    grid-column:2;
    grid-row:1;
    position:sticky!important;
    top:0!important;
    right:auto!important;
    height:100vh;
    width:220px!important;
    direction:rtl;
  }
}
/* workshop-reset-20261009-08: make workshop pages start and size like normal pages */
#page-workshop_att,
#page-shortages,#page-office_shortages,
#page-appointments{
  padding:22px!important;
  overflow:visible!important;
}
#page-workshop_att>.topbar,
#page-shortages>.topbar,#page-office_shortages>.topbar,
#page-appointments>.topbar{
  margin:0!important;
  border-radius:0;
}
#page-workshop_att>div:not(.topbar),
#page-shortages>div:not(.topbar),#page-office_shortages>div:not(.topbar),
#page-appointments>div:not(.topbar){
  padding:22px 0 0!important;
  overflow:visible!important;
}
#page-workshop_att .panel,
#page-shortages .panel,#page-office_shortages .panel,
#page-appointments .panel,
#page-workshop_att .panel-body,
#page-shortages .panel-body,#page-office_shortages .panel-body,
#page-appointments .panel-body{
  overflow:visible!important;
}
#page-workshop_att .ws-card-list,
#page-shortages .ws-card-list,#page-office_shortages .ws-card-list,
#page-appointments .ws-card-list{
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important;
  gap:12px!important;
  padding:0!important;
  overflow:visible!important;
}
@media(max-width:768px){
  #page-workshop_att,
  #page-shortages,#page-office_shortages,
  #page-appointments{padding:12px!important}
  #page-workshop_att>div:not(.topbar),
  #page-shortages>div:not(.topbar),#page-office_shortages>div:not(.topbar),
  #page-appointments>div:not(.topbar){padding:12px 0 64px!important}
  #page-workshop_att .ws-card-list,
  #page-shortages .ws-card-list,#page-office_shortages .ws-card-list,
  #page-appointments .ws-card-list{grid-template-columns:1fr!important}
}

/* responsive-fit-20261009-09: phone/laptop containment */
/* workshop hours and separate treasuries */
.ws-hours-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ws-hours-form > :not(.fg), .ws-hours-form .ws-att-note { grid-column:1/-1; }
@media(max-width:480px){ .ws-hours-form .fg:has(.ws-time-input) { grid-column:1/-1; } }
.ws-hours-form .fg{margin:0;display:flex;flex-direction:column;gap:6px}
.ws-hours-form input,.ws-hours-form textarea{width:100%;min-width:0;box-sizing:border-box}
.treasury-select{border:1px solid var(--border);border-radius:8px;padding:7px 10px;font:inherit;min-width:0}
#ds-sync-status{white-space:normal;max-width:100%;overflow-wrap:anywhere}
html{scroll-padding-top:0;overflow-x:hidden}
body{overflow-x:hidden}
img,table,input,select,textarea,button{max-width:100%}
.main,.page,.panel,.panel-body{min-width:0}
@media(max-width:768px){
  .main{width:100vw!important;max-width:100vw!important;overflow-x:hidden!important}
  .sidebar{flex-direction:column;overflow-x:hidden;padding-bottom:env(safe-area-inset-bottom,0px)}
  .nav-links{justify-content:flex-start;overflow-x:auto;flex-shrink:0}
  .nav-item{flex-shrink:0}
  .main{margin-bottom:110px;min-height:calc(100dvh - 110px)}
  .topbar,.panel-head{align-items:flex-start}
  .topbar-actions,.panel-head>div{width:100%;justify-content:stretch!important}
  .topbar-actions .btn,.panel-head input,.panel-head select{flex:1 1 140px;min-width:0}
  .tbl-wrap{max-width:100%;overflow-x:auto}
}
.ds-item{display:flex;align-items:center;gap:8px;padding:10px;margin-bottom:5px;background:var(--paper);border-right:2px solid var(--green);border-radius:6px;min-width:0}
.ds-item.expense{border-right-color:var(--red)}
.ds-item-main{flex:1;min-width:0;overflow-wrap:anywhere}
.ds-item-actions{display:flex;gap:5px;flex-wrap:wrap}
.ds-receipt-number{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.receipt-mobile-list{display:none}
.two-column-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@media(max-width:768px){.two-column-layout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){
  .modal-bg{padding:8px}
  .modal{max-height:calc(100dvh - 16px)}
  .modal-body{padding:14px}
  .modal-foot .btn{flex:1;min-height:42px}
  .ds-item{flex-wrap:wrap}
  .ds-item-main{flex-basis:calc(100% - 100px)}
  .ds-item-actions{flex-basis:100%;justify-content:flex-start}
  #page-daily_sheet .topbar-actions{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
  #page-daily_sheet .topbar-actions>.btn{grid-column:span 2;width:100%;min-width:0;min-height:38px;justify-content:center}
  #page-daily_sheet #ds-date-display,#page-daily_sheet #ds-day-pick{grid-column:1/-1;margin:0!important}
  #page-daily_sheet #ds-approve-btn,#page-daily_sheet #ds-delete-day-btn{grid-column:span 3}
  #receipts-view .tbl-wrap{display:none}
  .receipt-mobile-list{display:grid;gap:10px}
  .receipt-mobile-list .ws-card{min-width:0;overflow-wrap:anywhere}
  .receipt-mobile-list .ws-card-actions .btn{min-width:42px;min-height:40px}
}
@media(min-width:769px) and (max-width:1180px){
  .page{padding:16px!important}
  .cards-row{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  .topbar{padding:11px 16px}
}
/* Per-user access and local work-order status navigation */
.personal-permissions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:52vh;overflow:auto;padding:6px}
.personal-permissions label{display:flex;gap:9px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:9px;background:var(--cream)}
.wo-state-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.wo-state-tab{font:inherit;cursor:pointer;border:1px solid var(--border);border-radius:24px;padding:9px 14px;background:white;color:var(--text)}
.wo-state-tab span{display:inline-block;min-width:22px;padding:1px 5px;margin-inline-start:5px;border-radius:12px;background:var(--cream);color:#353029}
.wo-state-tab.selected{background:#1a3b35;color:white;border-color:#1a3b35}
.wo-quick-state{display:flex;align-items:center;gap:10px;margin:12px 0;padding:10px;border-radius:10px;background:#f2f6f4;font-size:12px;color:#28463e}
.wo-quick-state select{flex:1;min-width:0;padding:8px;border:1px solid #ccd7d1;border-radius:7px;background:white;font:inherit}
#users-list-admin>div{flex-wrap:wrap}
@media(max-width:600px){.personal-permissions{grid-template-columns:1fr}.wo-state-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px}.wo-state-tab{flex-shrink:0}.wo-quick-state{align-items:stretch;flex-direction:column}}

#data-readiness-notice{margin:12px 16px;padding:14px;border:1px solid #caa45a;border-radius:10px;background:#fff5dd;color:#604713;line-height:1.8}#data-readiness-notice[hidden]{display:none}#data-readiness-notice p{margin:5px 0}#data-readiness-notice button{margin-top:8px}.data-unconfirmed .sc-val,.data-unconfirmed #rcp-kpi-net{font-size:0!important}.data-unconfirmed .sc-val::after,.data-unconfirmed #rcp-kpi-net::after{content:'غير مؤكد';font-size:22px}

.data-unconfirmed #partners-cards .kpi-val{font-size:0!important}.data-unconfirmed #partners-cards .kpi-val::after{content:'غير مؤكد';font-size:22px}