@import url("tokens.css");

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--black);color:var(--text-primary);
  font-family:var(--font-body);font-size:var(--body);line-height:1.6;
  padding-bottom:env(safe-area-inset-bottom);
}

/* ── نقطية Nothing — خلفيات فقط ── */
.dot-grid{
  background-image:radial-gradient(circle,var(--border-visible) 1px,transparent 1px);
  background-size:16px 16px;opacity:1;
}

/* ── البنية ── */
.shell{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-md);width:100%}
.topbar{
  border-bottom:1px solid var(--border);background:var(--black);
  position:sticky;top:0;z-index:20;
}
.topbar .shell{display:flex;align-items:center;gap:var(--space-md);height:56px}
.brand{font-weight:700;letter-spacing:-.02em;font-size:var(--subheading);color:var(--text-display)}
.brand span{font-family:var(--font-mono);font-size:var(--label);
  letter-spacing:.08em;color:var(--text-secondary);margin-inline-start:var(--space-sm)}

/* ── التسميات: Space Mono كابس ── */
.label{
  font-family:var(--font-mono);font-size:var(--label);
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);
  display:block;margin-bottom:var(--space-xs);
}

/* ── الأرقام دائماً Space Mono ── */
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;direction:ltr;display:inline-block;unicode-bidi:isolate}

/* ── شريط تقدم مقسّم (Nothing) ── */
.seg{display:flex;gap:3px;margin:var(--space-md) 0}
.seg i{flex:1;height:3px;background:var(--border);transition:background var(--motion-base) var(--ease)}
.seg i.done{background:var(--text-display)}
.seg i.now{background:var(--interactive)}

/* ── البطاقات ── */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:var(--space-lg);margin-bottom:var(--space-md);
}
.card.alert{border-inline-start:3px solid var(--accent);background:var(--accent-subtle)}
.card.good{border-inline-start:3px solid var(--success)}
.card.warn{border-inline-start:3px solid var(--warning);background:var(--warning-subtle)}

/* ── الحقول: تسمية ظاهرة + خطأ جنب الحقل (ui-ux-pro-max #٨) ── */
.field{margin-bottom:var(--space-lg)}
.field label{display:block;font-size:var(--body-sm);font-weight:600;
  margin-bottom:var(--space-xs);color:var(--text-primary)}
.field .help{font-size:var(--caption);color:var(--text-secondary);
  margin-bottom:var(--space-sm);line-height:1.5}
.field input,.field select,.field textarea{
  width:100%;min-height:var(--tap-min);
  background:var(--surface);color:var(--text-primary);
  border:1px solid var(--border-visible);border-radius:var(--radius);
  padding:var(--space-sm) var(--space-md);
  font-family:var(--font-body);font-size:var(--body);
  transition:border-color var(--motion-fast) var(--ease);
}
.field input[inputmode="decimal"]{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  direction:ltr;text-align:end;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--interactive);outline-offset:1px;border-color:var(--interactive);
}
.field .err{
  display:none;color:var(--accent);font-size:var(--body-sm);
  margin-top:var(--space-xs);font-weight:600;
}
.field.bad input{border-color:var(--accent)}
.field.bad .err{display:block}
.unit{font-family:var(--font-mono);font-size:var(--label);
  letter-spacing:.06em;color:var(--text-secondary);margin-inline-start:var(--space-xs)}

/* ── الأزرار ── */
.btn{
  display:flex;align-items:center;justify-content:center;gap:var(--space-sm);
  width:100%;min-height:var(--tap-primary);
  background:var(--text-display);color:var(--black);
  border:1px solid var(--text-display);border-radius:var(--radius);
  font-family:var(--font-body);font-size:var(--body);font-weight:700;
  cursor:pointer;transition:opacity var(--motion-fast) var(--ease);
  text-decoration:none;
}
.btn:hover{opacity:.85}
.btn:focus-visible{outline:2px solid var(--interactive);outline-offset:2px}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--text-primary);border-color:var(--border-visible)}
.btn.ghost:hover{border-color:var(--text-primary);opacity:1}

/* ── الجداول: بلا تمرير أفقي للصفحة (ui-ux-pro-max #٥) ── */
/* ⚠️ قص الجداول على الجوال: min-width:380px كان أكبر من العرض (375px)
   وفي RTL يطلع الفائض لليسار حيث ما يوصله التمرير. الحل: نخلي الجدول
   يتقلص، ونضمن التمرير داخل الحاوية فقط. */
.tblwrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin:var(--space-md) 0;
  max-width:100%;
}
table{
  border-collapse:collapse;
  width:100%;
  font-size:var(--body-sm);
  min-width:0;                 /* لا حد أدنى يكسر الجوال */
}
@media(min-width:520px){
  table{min-width:380px}       /* الحد الأدنى للشاشات الأوسع فقط */
}
th,td{padding:var(--space-sm) var(--space-md);text-align:start;border-bottom:1px solid var(--border)}
th{background:var(--surface-raised);font-family:var(--font-mono);
  font-size:var(--label);letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-secondary);font-weight:400;white-space:nowrap}
tr:last-child td{border-bottom:0}
td.n{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  text-align:end;direction:ltr;white-space:nowrap}
tr.total td{font-weight:700;background:var(--surface-raised);color:var(--text-display)}

/* ── حالة القيمة: اللون على الرقم لا الخلفية ── */
.v-ok{color:var(--success)} .v-bad{color:var(--accent)} .v-warn{color:var(--warning)}

/* ── الشاشة الكبيرة — أرقام لاتينية فقط ── */
.display{
  font-family:var(--font-display);font-size:var(--display-md);
  line-height:1.05;letter-spacing:-.02em;color:var(--text-display);
  direction:ltr;font-variant-numeric:tabular-nums;
}
@media(min-width:640px){.display{font-size:var(--display-lg)}}

h1{font-size:var(--display-md);line-height:1.15;margin:0 0 var(--space-sm);
  font-weight:800;letter-spacing:-.02em;text-wrap:balance;color:var(--text-display)}
h2{font-size:var(--heading);margin:var(--space-xl) 0 var(--space-sm);
  font-weight:700;text-wrap:balance}
h3{font-size:var(--subheading);margin:var(--space-lg) 0 var(--space-xs);font-weight:700}
p{margin:0 0 var(--space-md)}
.dim{color:var(--text-secondary);font-size:var(--body-sm)}
main{padding:var(--space-xl) 0 var(--space-3xl)}

/* ── حركة محترمة ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}