/* ===== نظام إدارة المغاسل — نظام التصميم ===== */
@font-face{font-family:'Cairo';src:url('/assets/Cairo-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Cairo';src:url('/assets/Cairo-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

:root{
  --brand:#0d9488; --brand-600:#0f766e; --brand-700:#115e59; --brand-50:#f0fdfa; --brand-100:#ccfbf1;
  --ink:#0f172a; --ink-2:#334155; --muted:#64748b; --faint:#94a3b8;
  --line:#e2e8f0; --line-2:#cbd5e1; --bg:#f6f8fa; --card:#ffffff; --soft:#f8fafc;
  --ok:#059669; --ok-bg:#ecfdf5; --warn:#d97706; --warn-bg:#fffbeb;
  --danger:#dc2626; --danger-bg:#fef2f2; --info:#2563eb; --info-bg:#eff6ff;
  --purple:#7c3aed; --purple-bg:#f5f3ff;
  --r:14px; --r-sm:10px; --r-lg:20px;
  --sh:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06);
  --sh-md:0 4px 6px -1px rgba(15,23,42,.07),0 2px 4px -2px rgba(15,23,42,.05);
  --sh-lg:0 12px 28px -8px rgba(15,23,42,.14),0 4px 10px -6px rgba(15,23,42,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html{overflow-x:clip}
body{
  font-family:'Cairo',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.65; font-size:15px;
  direction:rtl; text-align:right; -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
/* عناصر الشبكة لا تنكمش افتراضيًا، فتُخرج الجداول العريضة الصفحة عن حدودها */
.grid-2>*,.grid-2e>*,.grid-3>*,.stats>*,.builder>*,.detail-grid>*,.row>*,.row-3>*{min-width:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--brand-100)}

/* ---------- عناصر أساسية ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:var(--r-sm);border:1px solid transparent;
  background:var(--brand);color:#fff;font-weight:700;cursor:pointer;
  transition:.16s ease;white-space:nowrap;font-size:14px;
}
.btn:hover{background:var(--brand-600);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.ghost{background:#fff;color:var(--ink-2);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--soft);border-color:var(--brand);color:var(--brand-600)}
.btn.soft{background:var(--brand-50);color:var(--brand-700);border-color:var(--brand-100)}
.btn.soft:hover{background:var(--brand-100)}
.btn.danger{background:var(--danger)}
.btn.danger:hover{background:#b91c1c}
.btn.dark{background:var(--ink)}
.btn.dark:hover{background:#1e293b}
.btn.sm{padding:6px 12px;font-size:13px;border-radius:8px}
.btn.lg{padding:14px 28px;font-size:16px}
.btn.block{width:100%}
.btn.wa{background:#25d366}
.btn.wa:hover{background:#1eb457}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:13px;font-weight:700;color:var(--ink-2)}
.field .hint{font-size:12px;color:var(--muted);font-weight:400}
input,select,textarea{
  width:100%;padding:10px 13px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:#fff;transition:.15s;font-size:14px;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-100)}
button:focus-visible,a:focus-visible,.chip:focus-visible,.mitem:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
input[type=checkbox]{width:auto;accent-color:var(--brand)}
textarea{resize:vertical;min-height:80px}
select{cursor:pointer;background-image:none}
.row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 14px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.card-pad{padding:20px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.card-head h3{font-size:16px}

.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.badge.received{background:var(--info-bg);color:var(--info)}
.badge.in_progress{background:var(--warn-bg);color:var(--warn)}
.badge.ready{background:var(--ok-bg);color:var(--ok)}
.badge.delivered{background:#f1f5f9;color:var(--muted)}
.badge.cancelled{background:var(--danger-bg);color:var(--danger)}
.badge.paid{background:var(--ok-bg);color:var(--ok)}
.badge.unpaid{background:var(--danger-bg);color:var(--danger)}
.badge.queued{background:var(--warn-bg);color:var(--warn)}
.badge.sent{background:var(--ok-bg);color:var(--ok)}
.badge.failed{background:var(--danger-bg);color:var(--danger)}
.badge.active{background:var(--ok-bg);color:var(--ok)}
.badge.suspended{background:var(--danger-bg);color:var(--danger)}
.badge.pending{background:var(--warn-bg);color:var(--warn)}
.badge.owner{background:var(--purple-bg);color:var(--purple)}
.badge.manager{background:var(--info-bg);color:var(--info)}
.badge.accountant{background:var(--purple-bg);color:var(--purple)}
.badge.worker{background:var(--brand-50);color:var(--brand-700)}
.badge.clothes{background:var(--info-bg);color:var(--info)}
.badge.cars{background:var(--brand-50);color:var(--brand-700)}

table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:right;padding:11px 14px;background:var(--soft);color:var(--muted);font-size:12.5px;font-weight:700;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--soft)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
/* الجداول العريضة فقط تفرض حدًا أدنى وتُمرَّر أفقيًا؛ الجداول الصغيرة تتكيّف */
.table-wrap.t-cards table{min-width:560px}
/* جداول تُمرَّر أفقيًا بدل أن تنضغط حتى تصبح غير مقروءة */
.table-wrap.t-scroll table{min-width:560px}
@media (max-width:600px){ .table-wrap.t-cards table{min-width:0} }
.num{font-variant-numeric:tabular-nums;direction:ltr;display:inline-block}

.empty{padding:48px 20px;text-align:center;color:var(--muted)}
.empty .ico{font-size:40px;margin-bottom:10px;opacity:.55}
.muted{color:var(--muted)}
.small{font-size:13px}
.tiny{font-size:12px}
.b{font-weight:700}
.mono{font-family:ui-monospace,'SF Mono',Menlo,monospace;direction:ltr;display:inline-block}

.toast-wrap{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--ink);color:#fff;padding:11px 20px;border-radius:var(--r-sm);box-shadow:var(--sh-lg);font-size:14px;font-weight:700;animation:drop .25s ease}
.toast.ok{background:var(--ok)} .toast.err{background:var(--danger)}
@keyframes drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

.modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(3px);z-index:900;display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .18s ease;overscroll-behavior:contain}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-lg);width:100%;max-width:620px;max-height:92dvh;display:flex;flex-direction:column;animation:pop .22s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.modal.wide{max-width:900px}
.modal.narrow{max-width:440px}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.modal-head h3{font-size:17px}
.modal-body{padding:22px;overflow-y:auto;flex:1}
.modal-foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-start;background:var(--soft);border-radius:0 0 var(--r-lg) var(--r-lg)}
.x{background:none;border:none;font-size:24px;cursor:pointer;color:var(--faint);line-height:1;padding:0 4px}
.x:hover{color:var(--ink)}

.spin{width:18px;height:18px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.loading{padding:60px;text-align:center;color:var(--muted)}
.loading .spin{border-color:var(--line-2);border-top-color:var(--brand);width:26px;height:26px}


/* ===== جداول تتحول إلى بطاقات على شاشة الجوال ===== */
@media (max-width:600px){
  .t-cards table{min-width:0}
  .t-cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .t-cards tbody tr{
    display:grid;grid-template-columns:auto 1fr;gap:6px 12px;
    padding:14px;border:1px solid var(--line);border-radius:var(--r-sm);
    margin-bottom:10px;background:#fff;
  }
  .t-cards tbody tr:hover{background:#fff}
  .t-cards td{display:contents;border:none;padding:0}
  .t-cards td::before{
    content:attr(data-th);color:var(--muted);font-size:12.5px;font-weight:700;
    align-self:center;white-space:nowrap;
  }
  .t-cards td[data-th=""]::before{content:''}
  .t-cards td>*{grid-column:2;justify-self:start;max-width:100%}
  .t-cards td.wide{grid-column:1/-1}
  .t-cards td.wide::before{display:none}
}

/* ===== لمسات الشاشات الصغيرة ===== */
@media (max-width:640px){
  body{font-size:15px}
  input,select,textarea{font-size:16px;padding:11px 13px}
  .btn{padding:11px 18px;min-height:44px}
  .btn.sm{padding:8px 13px;min-height:38px;font-size:13px}
  .btn.lg{padding:14px 24px;font-size:15.5px}
  .card-pad{padding:16px}
  .card-head{padding:14px 16px}
  th,td{padding:10px 12px}
  .row,.row-3{grid-template-columns:1fr;gap:0}

  /* النوافذ تصبح ألواحًا سفلية */
  .modal-bg{padding:0;align-items:flex-end}
  .modal,.modal.wide,.modal.narrow{
    max-width:100%;max-height:94dvh;border-radius:20px 20px 0 0;
    animation:sheet .26s cubic-bezier(.2,.9,.3,1);
  }
  .modal-head{padding:16px 18px}
  .modal-body{padding:18px}
  .modal-foot{
    padding:14px 18px calc(14px + env(safe-area-inset-bottom));
    border-radius:0;flex-wrap:wrap;
  }
  .modal-foot .btn{flex:1 1 auto}
  @keyframes sheet{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
  .toast-wrap{top:auto;bottom:calc(18px + env(safe-area-inset-bottom));width:calc(100% - 32px)}
  .toast{width:100%;text-align:center}
}

@media (hover:none){
  .btn:hover{transform:none}
  .feat:hover,.type:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}