/* ===========================================================================
   app.css — المكوّنات المشتركة بين صفحات الأداة
   ---------------------------------------------------------------------------
   الملف ده أساس مشترك، مش بديل. كل صفحة لسه محتفظة بالـ <style> بتاعها كامل،
   وبييجي بعد الملف ده، يعني أي قاعدة في الصفحة بتغلب اللي هنا. فربط الملف
   ده مش بيغيّر شكل أي صفحة ولا بكسل.

   الفايدة: بقى فيه مكان واحد للمكوّنات المشتركة نبني عليه من دلوقتي. ومع الوقت
   بنشيل المكرر من كل صفحة على حدة، بالتدريج وبمراجعة، مش دفعة واحدة.

   ملحوظة: متغيّرات الألوان (:root) سايبينها في الصفحات — كانت متطابقة في التسعة
   أصلاً، ونقلها هنا كان هيزوّد مخاطرة من غير فايدة.
   =========================================================================== */

*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:'IBM Plex Sans Arabic', sans-serif; min-height:100vh; }
.wrap{ max-width:1180px; margin:0 auto; padding:28px 20px 80px; }
.app-shell{ display:flex; align-items:flex-start; gap:24px; }
.sidebar{ width:250px; flex-shrink:0; position:sticky; top:20px; max-height:calc(100vh - 40px); overflow-y:auto; display:flex; flex-direction:column; gap:22px; }
.main-content{ flex:1; min-width:0; }
.panel{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:22px; margin-bottom:18px; }
.btn{ background:var(--green-deep); color:#fff; border:none; padding:11px 18px; border-radius:8px; font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit; transition:background .15s, transform .1s; }
.sidebar-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:999; opacity:0; transition:opacity .2s; }
.sidebar-backdrop.show{ display:block; opacity:1; }
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.sidebar-brand .dot{ width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); flex-shrink:0; }
.sidebar-brand h1{ font-size:16px; margin:0; font-weight:700; }
.sidebar-brand span.tag{ display:block; font-size:11px; color:var(--text-dim); margin-top:2px; line-height:1.5; }
.sidebar-footer{ margin-top:auto; padding-top:16px; border-top:1px solid var(--border); }
.sidebar-group{ display:flex; flex-direction:column; gap:2px; }
.sidebar-group-label{ font-size:11px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.4px; padding:0 10px 6px; }
.sidebar-link{ display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:8px; font-size:13px; font-weight:500; color:var(--text-dim); text-decoration:none; cursor:pointer; transition:background .15s, color .15s; }
.sidebar-link .ic{ font-size:14px; width:18px; text-align:center; flex-shrink:0; }
.sidebar-link.active{ background:rgba(37,99,235,0.1); color:var(--green-deep); font-weight:700; }
.sidebar-link:hover{ background:var(--surface-2); color:var(--text); }
.panel .sub{ font-size:12.5px; color:var(--text-dim); margin:0 0 16px; line-height:1.6; }
.panel h2{ font-size:14px; margin:0 0 4px; color:var(--amber); font-weight:600; }
.btn.secondary{ background:transparent; border:1px solid var(--border); color:var(--text-dim); }
.btn.secondary:hover{ border-color:var(--amber); color:var(--amber); }
.btn:active{ transform:scale(0.98); }
.btn:disabled{ background:var(--surface-2); color:var(--text-dim); cursor:not-allowed; }
.btn:hover{ background:var(--green); }
.back-link{ font-size:13px; color:var(--text-dim); text-decoration:none; border:1px solid var(--border); padding:8px 14px; border-radius:8px; transition:all .15s; white-space:nowrap; display:block; text-align:center; }
.back-link:hover{ color:var(--text); border-color:var(--green); }
.brand{ display:flex; align-items:center; gap:12px; }
.brand .dot{ width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); }
.brand h1{ font-size:16px; margin:0; font-weight:700; }
.empty-state{ font-size:13px; color:var(--text-dim); text-align:center; padding:24px 10px; }
.field{ margin-bottom:14px; }
.mobile-menu-btn{ display:none; position:fixed; top:14px; right:14px; z-index:1001; width:42px; height:42px; border-radius:10px; background:var(--surface); border:1px solid var(--border); box-shadow:0 2px 10px rgba(0,0,0,0.1); font-size:18px; cursor:pointer; color:var(--text); align-items:center; justify-content:center; }
.mono{ font-family:'JetBrains Mono', monospace; }
.status-msg{ margin-top:10px; font-size:13px; min-height:16px; line-height:1.6; }
.status-msg.err{ color:var(--danger); }
.status-msg.ok{ color:var(--green-deep); }
.table-scroll{ overflow-x:auto; }
input[type=number]{ -moz-appearance:textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
label{ display:block; font-size:13px; color:var(--text-dim); margin-bottom:6px; }
select{ -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23647893' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left 12px center; padding-left:34px; }


/* ===========================================================================
   ثيم "الصف" — theme-queue
   ---------------------------------------------------------------------------
   بيتفعّل بإضافة class="theme-queue" على <body> في أي صفحة، وبيتلغي بشيلها.
   كل القواعد هنا متسمّية بـ body.theme-queue عشان أولويتها تبقى أعلى من ستايل
   الصفحة نفسها — فمش محتاجين نشيل ولا سطر من أي صفحة.

   ليه الثيم ده: مصمم للشغل الطويل على الشاشة. خلفية دافية بدل الأبيض الوهّاج،
   خط عربي أكبر (النص العربي محتاج ١٦px على الأقل عشان يتقرا زي ١٤px لاتيني)،
   وحالة الأوردر بتتقال بشريط لون على جنب الكارت بدل شارات متناثرة.
   =========================================================================== */

body.theme-queue{
  /* خلفيات محايدة دافية شوية — مش بيج مغبّر */
  --bg:#F5F6F5; --surface:#FFFFFF; --surface-2:#EDEFEE; --border:#DDE1DF;
  --text:#1B2420; --text-dim:#5F6B65;
  /* لون الهوية بس هو اللي بيتغيّر */
  --green:#2F6F5E; --green-deep:#2F6F5E;
  /* --amber و --amber-deep سايبينهم زي ما هما: طلع إنهم مستخدمين في عناوين
     الأقسام (.panel h2) والأفاتار ولافتات الكوبي — مش في التحذيرات زي ما افترضت.
     تغييرهم كان بيحوّل كل العناوين للبني. */
  --danger:#A4442F;
  --q-good:#2F6F5E; --q-good-soft:#E3EFEA;
  --q-warn:#9A6B1F; --q-warn-soft:#F7EEDC;
  --q-bad:#A4442F;  --q-bad-soft:#F7E8E3;
  --q-dup:#7C5518;  --q-dup-soft:#F3EADA;
  --q-radius:14px;

  background:var(--bg);
  color:var(--text);
  font-family:'Tajawal','IBM Plex Sans Arabic',sans-serif;
  font-size:16px;
  line-height:1.7;
}
body.theme-queue *{ letter-spacing:0; }

/* --- الخط: الحقول والقوايم كانت على JetBrains Mono، وهو خط لاتيني مالوش حروف
   عربية — فكان العربي بيتكتب بحروف مفكوكة عن بعضها. بنرجّعهم لخط عربي. --- */
body.theme-queue input,
body.theme-queue select,
body.theme-queue textarea,
body.theme-queue button{
  font-family:'Tajawal','IBM Plex Sans Arabic',sans-serif;
  font-size:16px;
}
/* الأرقام الصافية بتفضل مصفوفة تحت بعضها عشان تتقارن بالعين */
body.theme-queue .num,
body.theme-queue .total-banner .num{
  font-variant-numeric:tabular-nums;
  direction:ltr; unicode-bidi:isolate;
}

/* --- الهيكل --- */
/* ملحوظة: مفيش max-width هنا عن قصد. كل صفحة ليها عرضها المقصود —
   1180px للصفحات اللي فيها شريط جانبي، 1280px للحسابات (جداول عريضة)،
   720/760px للصفحتين المستقلتين. فرض عرض واحد عليهم بيزنق المحتوى
   ويسيب فراغ على الجنب. */
body.theme-queue .wrap{ padding:28px 20px 70px; }
body.theme-queue .panel{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--q-radius); padding:24px;
  box-shadow:0 1px 2px rgba(36,31,26,.04);
}
body.theme-queue .panel .sub{ font-size:15px; line-height:1.8; color:var(--text-dim); margin-bottom:18px; }
body.theme-queue .brand h1{ font-size:19px; }
body.theme-queue .brand .dot{ background:var(--q-good); box-shadow:none; }
body.theme-queue .logout-btn{ font-size:14px; padding:9px 18px; border-radius:999px; }

/* --- الفلاتر --- */
body.theme-queue label{ font-size:14px; color:var(--text-dim); }
body.theme-queue select,
body.theme-queue input[type=text]{
  padding:13px 14px; border-radius:10px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
}

/* --- شرائح الحالة --- */
body.theme-queue .status-pill{
  font-size:14.5px; padding:10px 18px; border-radius:999px;
  background:var(--surface); border:1px solid var(--border); color:var(--text-dim);
}
body.theme-queue .status-pill.active{
  background:var(--q-good); border-color:var(--q-good); color:#fff;
}

/* --- عدّاد الشغل الفاضل --- */
body.theme-queue .total-banner{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--q-radius); padding:20px 22px;
}
body.theme-queue .total-banner .label{ font-size:15px; color:var(--text-dim); }
body.theme-queue .total-banner .num{ font-size:38px; color:var(--q-good); font-family:inherit; }

/* --- كارت الأوردر: الحالة بقت شريط لون على الجنب --- */
body.theme-queue .confirm-order-card{
  border-radius:var(--q-radius); padding:18px 20px;
  border:1px solid var(--border); border-right:5px solid var(--q-warn);
  box-shadow:0 1px 2px rgba(36,31,26,.04);
}
body.theme-queue .confirm-order-card:has(.confirm-status-badge.confirmed){ border-right-color:var(--q-good); }
body.theme-queue .confirm-order-card:has(.confirm-status-badge.cancelled){ border-right-color:var(--q-bad); }
body.theme-queue .confirm-order-card:has(.confirm-status-badge.duplicate){ border-right-color:var(--q-dup); }
body.theme-queue .confirm-order-card:has(.confirm-status-badge.no_answer){ border-right-color:var(--q-bad); }

body.theme-queue .confirm-order-title{ font-size:16.5px; font-weight:700; }
body.theme-queue .confirm-order-store{ font-size:13.5px; margin-top:4px; }
body.theme-queue .confirm-order-info{ font-size:15px; line-height:2; margin:14px 0 16px; }
body.theme-queue .confirm-order-info b{ font-weight:500; color:var(--text-dim); }

body.theme-queue .confirm-status-badge{ font-size:13px; padding:5px 12px; }
body.theme-queue .confirm-status-badge.pending{ background:var(--q-warn-soft); color:var(--q-warn); }
body.theme-queue .confirm-status-badge.no_answer{ background:var(--q-bad-soft); color:var(--q-bad); }
body.theme-queue .confirm-status-badge.postponed{ background:var(--q-warn-soft); color:var(--q-warn); }
body.theme-queue .confirm-status-badge.confirmed{ background:var(--q-good-soft); color:var(--q-good); }
body.theme-queue .confirm-status-badge.cancelled{ background:var(--surface-2); color:var(--text-dim); }
body.theme-queue .confirm-status-badge.duplicate{ background:var(--q-dup-soft); color:var(--q-dup); }

/* --- أزرار الإجراء: أطول وأوضح، عشان الضغط المتكرر طول اليوم --- */
body.theme-queue .confirm-action-btn{
  padding:14px 10px; font-size:14.5px; border-radius:10px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
}
body.theme-queue .confirm-action-btn.confirm{
  background:var(--q-good); border-color:var(--q-good); color:#fff;
}
body.theme-queue .confirm-action-btn.confirm:hover:not(:disabled){ background:#26594B; border-color:#26594B; }
body.theme-queue .confirm-action-btn.cancel:hover:not(:disabled){ background:var(--q-bad); border-color:var(--q-bad); color:#fff; }
body.theme-queue .confirm-action-btn.no-answer:hover:not(:disabled){ background:var(--q-warn); border-color:var(--q-warn); color:#fff; }
body.theme-queue .confirm-action-btn.postpone:hover:not(:disabled){ background:var(--q-warn); border-color:var(--q-warn); color:#fff; }
body.theme-queue .confirm-action-btn.duplicate:hover:not(:disabled){ background:var(--q-dup); border-color:var(--q-dup); color:#fff; }

body.theme-queue .empty-state{ font-size:15px; padding:36px 14px; }
body.theme-queue .status-msg{ font-size:14.5px; }

/* ---------------------------------------------------------------------------
   الثيم على باقي الصفحات — الشريط الجانبي والأزرار والجداول
   أغلب المكوّنات بتستخدم متغيّرات الألوان أصلاً فبتتلوّن لوحدها من الكتلة فوق.
   اللي هنا هو اللي محتاج ضبط مقاسات أو ألوان مكتوبة صريحة.
   --------------------------------------------------------------------------- */

/* الشريط الجانبي */
body.theme-queue .sidebar{ background:var(--surface); border-color:var(--border); }
body.theme-queue .sidebar-brand h1{ font-size:16px; }
body.theme-queue .sidebar-brand span.tag{ font-size:12.5px; color:var(--text-dim); }
body.theme-queue .sidebar-group-label{
  font-size:13px; color:var(--text-dim); font-weight:600;
  text-transform:none; letter-spacing:0; opacity:1; padding:10px 10px 6px;
}
/* مهم: الرابط الأصلي فيه border-right شفاف بيحجز مكان الشريط الجانبي بتاع العنصر
   المفعّل. لازم نحافظ عليه، وإلا النص بيتزحزح لما العنصر يتفعّل. */
body.theme-queue .sidebar-link{
  font-size:15px; padding:11px 10px; border-radius:10px; color:var(--text-dim);
  border-right:2.5px solid transparent;
}
body.theme-queue .sidebar-link:hover{ background:var(--surface-2); color:var(--text); }
body.theme-queue .sidebar-link.active{
  background:var(--q-good-soft); color:var(--q-good); font-weight:700;
  border-right-color:var(--q-good);
}
body.theme-queue .sidebar-link .ic{ background:var(--surface-2); }
body.theme-queue .sidebar-link.active .ic{ background:#fff; }
body.theme-queue .sidebar-footer{ border-color:var(--border); }

/* الأزرار العامة */
body.theme-queue .btn{
  background:var(--q-good); color:#fff; border:none;
  padding:12px 24px; border-radius:10px; font-size:15px; font-weight:600;
}
body.theme-queue .btn:hover{ background:#26594B; }

/* الألواح والعناوين */
body.theme-queue .panel{ border-radius:var(--q-radius); }
body.theme-queue .panel h2{ font-size:19px; }
body.theme-queue label{ font-size:14px; color:var(--text-dim); }

/* الجداول — الأرقام بتفضل مصفوفة، والنص العربي بخط عربي */
body.theme-queue table{ font-size:15px; }
body.theme-queue th{ font-size:13.5px; color:var(--text-dim); font-weight:600; }
body.theme-queue td{ padding:12px; }
body.theme-queue .mono,
body.theme-queue .data-table .num,
body.theme-queue .report-table .num,
body.theme-queue .kpi-card .value,
body.theme-queue .pl-row .pl-value,
body.theme-queue .total-strip .value,
body.theme-queue .store-card .count{
  font-family:'JetBrains Mono',monospace;
  font-variant-numeric:tabular-nums;
  direction:ltr; unicode-bidi:isolate;
}

/* شرائح التاريخ والتابات */
body.theme-queue .date-pill{ font-size:14.5px; padding:10px 18px; font-family:inherit; }
body.theme-queue .date-pill.active{ background:var(--q-good); border-color:var(--q-good); color:#fff; }
body.theme-queue .tab-btn{ font-size:15px; }
body.theme-queue .tab-btn.active{ color:var(--q-good); border-bottom-color:var(--q-good); }

/* ألوان مكتوبة صريحة في الحسابات — كانت زرقا وسط ثيم دافي */
body.theme-queue .cat-Advertising{ background:var(--q-good-soft); color:var(--q-good); }
body.theme-queue .cat-Advertising .dot{ background:var(--q-good); }
body.theme-queue select.att-status[data-status="excused_absence"]{
  background-color:var(--q-warn-soft); color:var(--q-warn); border-color:var(--q-warn-soft);
}
body.theme-queue .pl-badge.manual{ background:var(--q-warn-soft); color:var(--q-warn); }

/* ---------------------------------------------------------------------------
   الموبايل
   الثيم بيرفع المقاسات بأولوية عالية، وده كان بيلغي قواعد الموبايل الموجودة في
   الصفحات لأن أولويتها أقل. فلازم الثيم يكون له قواعده الخاصة للشاشات الصغيرة.
   --------------------------------------------------------------------------- */
@media (max-width:900px){
  body.theme-queue{ font-size:15.5px; }

  body.theme-queue .wrap{ padding:16px 13px 50px; }
  body.theme-queue .panel{ padding:16px 15px; border-radius:12px; }
  body.theme-queue .panel h2{ font-size:17.5px; }
  body.theme-queue .panel .sub{ font-size:14px; margin-bottom:14px; }

  /* الحقول: 16px على الأقل، وإلا سفاري بيزوّم على الصفحة أول ما تضغط عليها */
  body.theme-queue input,
  body.theme-queue select,
  body.theme-queue textarea{ font-size:16px; padding:12px 12px; }
  body.theme-queue label{ font-size:13.5px; }

  body.theme-queue .btn{ width:100%; padding:13px 18px; font-size:15px; }
  body.theme-queue .logout-btn{ font-size:13.5px; padding:8px 14px; }

  /* العدّاد: الرقم بينزل سطر لوحده بدل ما يزق الكلام بره الشاشة */
  body.theme-queue .total-banner{ padding:15px 16px; flex-direction:column; align-items:flex-start; gap:6px; }
  body.theme-queue .total-banner .num{ font-size:32px; }
  body.theme-queue .total-banner .label{ font-size:14px; }

  /* شرائح الحالة: بتلف في أكتر من سطر بدل ما تتزنق */
  body.theme-queue .status-pills{ gap:7px; }
  body.theme-queue .status-pill{ font-size:13.5px; padding:9px 14px; }
  body.theme-queue .date-pill{ font-size:13.5px; padding:9px 14px; }

  /* كارت الأوردر */
  body.theme-queue .confirm-order-card{ padding:15px 15px; }
  body.theme-queue .confirm-order-title{ font-size:15.5px; }
  body.theme-queue .confirm-order-info{ font-size:14.5px; line-height:1.9; }

  /* أزرار الإجراء: صفّين اتنين × اتنين بدل خمسة متزنقين */
  body.theme-queue .confirm-order-actions{ gap:8px; }
  body.theme-queue .confirm-action-btn{
    flex:1 1 calc(50% - 4px); min-width:0; padding:13px 6px; font-size:14px;
  }

  /* الجداول العريضة بتتسحب أفقيًا بدل ما تكسر الصفحة */
  body.theme-queue table{ font-size:14px; }
  body.theme-queue td{ padding:10px 8px; }
  body.theme-queue th{ font-size:12.5px; padding:9px 8px; }
}

@media (max-width:480px){
  body.theme-queue .wrap{ padding:12px 10px 44px; }
  body.theme-queue .panel{ padding:14px 12px; }
  body.theme-queue .total-banner .num{ font-size:28px; }
  body.theme-queue .confirm-action-btn{ font-size:13.5px; padding:12px 5px; }
  body.theme-queue .confirm-order-title{ font-size:15px; }
}