/* ========================================================================
   نظام التصميم — خط إنتاج الكلمات (بسيطة)
   ملف واحد، كل الأنماط هنا. لا أنماط داخل صفحات PHP.
   ======================================================================== */

/* -------------------- 1. الألوان -------------------- */
:root{
  /* الأسطح */
  --bg:          #F7FAF9;
  --surface:     #FFFFFF;
  --surface-2:   #F1F7F4;

  /* الحبر */
  --ink:         #12201C;
  --ink-2:       #4A635C;
  --ink-3:       #85A29A;

  /* الحدود */
  --line:        #DDE9E4;
  --line-2:      #EDF4F1;

  /* هوية بسيطة */
  --brand:       #12805F;
  --brand-ink:   #0C5C44;
  --brand-soft:  #E7F6EF;
  --accent:      #22C55E;

  /* ألوان الحالة */
  --ok:          #15803D;  --ok-bg:   #E8F8EE;
  --warn:        #B45309;  --warn-bg: #FEF4E6;
  --stop:        #B42318;  --stop-bg: #FDECEA;
  --info:        #1D63B5;  --info-bg: #E9F1FC;
  --idle:        #64748B;  --idle-bg: #F1F3F5;

  --shadow-1: 0 1px 2px rgba(18,32,28,.05);
  --shadow-2: 0 4px 14px rgba(18,32,28,.08);
  --shadow-pop: 0 12px 32px rgba(18,32,28,.14);

  --font-display: Tajawal, "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px;
  --page-max: 1180px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D1613; --surface:#131F1B; --surface-2:#182722;
    --ink:#E4EFEA; --ink-2:#9DB5AD; --ink-3:#6E8A82;
    --line:#22332D; --line-2:#1B2A25;
    --brand:#38BC93; --brand-ink:#7BD9B8; --brand-soft:#123025; --accent:#4ADE80;
    --ok:#4ADE80;  --ok-bg:#102A1C;
    --warn:#E8B24C; --warn-bg:#2A2010;
    --stop:#F08A8A; --stop-bg:#2C1615;
    --info:#7FB3F5; --info-bg:#132235;
    --idle:#94A3B8; --idle-bg:#1B2430;
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 4px 14px rgba(0,0,0,.45);
    --shadow-pop:0 12px 32px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --bg:#0D1613; --surface:#131F1B; --surface-2:#182722;
  --ink:#E4EFEA; --ink-2:#9DB5AD; --ink-3:#6E8A82;
  --line:#22332D; --line-2:#1B2A25;
  --brand:#38BC93; --brand-ink:#7BD9B8; --brand-soft:#123025; --accent:#4ADE80;
  --ok:#4ADE80;  --ok-bg:#102A1C;
  --warn:#E8B24C; --warn-bg:#2A2010;
  --stop:#F08A8A; --stop-bg:#2C1615;
  --info:#7FB3F5; --info-bg:#132235;
  --idle:#94A3B8; --idle-bg:#1B2430;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 4px 14px rgba(0,0,0,.45);
  --shadow-pop:0 12px 32px rgba(0,0,0,.55);
}

/* -------------------- 2. الأساس + الخطوط -------------------- */
*{ box-sizing: border-box; }
[hidden]{ display:none !important; }

html{ direction: rtl; }
body{
  margin:0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,.num{ font-family: var(--font-display); text-wrap: balance; margin:0; }
h1{ font-size:28px; font-weight:800; }
h2{ font-size:19px; font-weight:700; }
h3{ font-size:16px; font-weight:700; }
p{ margin:0; }
a{ color: var(--brand-ink); }

.num, td.num, .tabular{ font-variant-numeric: tabular-nums; }

label{ display:block; margin-bottom:4px; font-size:14px; }
input, select, textarea, button{
  font-family: inherit;
  font-size: 1rem;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  margin-top: 6px;
  margin-bottom: 14px;
}
textarea{ min-height: 70px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* -------------------- 3. تخطيط الصفحة -------------------- */
.wrap{ max-width: var(--page-max); margin: 0 auto; padding: var(--s5) 20px var(--s7); min-height: calc(100vh - 64px); }
.wrap.narrow{ max-width: 380px; padding-top: 80px; min-height: 100vh; }

.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
  margin-bottom: var(--s5);
  box-shadow: var(--shadow-1);
}
.grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
@media (max-width:640px){ .grid{ grid-template-columns:1fr; } }
.grid .card{ margin-bottom:0; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap: var(--s4); }
@media (max-width:640px){ .row2{ grid-template-columns:1fr; } }

.hint{ color: var(--ink-3); font-size: 13.5px; }
.error{ color: var(--stop); }
.success{ color: var(--ok); }
.warn-text{ color: var(--warn); }

/* -------------------- 4.1 الشريط العلوي -------------------- */
.topbar{
  position: sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap: var(--s5);
  padding: 12px 20px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-brand{
  font-family: var(--font-display); font-weight:800; font-size:15px;
  color: var(--ink); text-decoration:none; white-space:nowrap;
}
.topbar-brand span{ color: var(--ink-3); font-weight:500; }

.steps{ display:flex; align-items:center; gap:2px; overflow-x:auto; }
.step{
  display:flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius: var(--r-pill);
  font-size:12.5px; font-weight:600; color: var(--ink-3);
  text-decoration:none; white-space:nowrap;
  transition: background .15s, color .15s;
}
.step:hover{ background: var(--surface-2); color: var(--ink-2); }
.step[aria-current="page"]{ background: var(--brand-soft); color: var(--brand-ink); }
.step.done{ color: var(--ok); }
.step .dot{
  width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center;
  font-size:11px; font-weight:700;
  background: var(--idle-bg); color: var(--idle);
  flex-shrink:0;
}
.step[aria-current="page"] .dot{ background: var(--brand); color:#fff; }
.step.done .dot{ background: var(--ok-bg); color: var(--ok); }
@media (max-width:900px){ .step-label{ display:none; } }

.topbar-extra{ display:flex; align-items:center; gap: var(--s3); }
.topbar-links{ display:flex; align-items:center; gap: var(--s3); font-size:13px; }
.topbar-links a{ color: var(--ink-2); text-decoration:none; }
.topbar-links a:hover{ color: var(--brand-ink); }
.topbar-links a[aria-current="page"]{ color: var(--brand-ink); font-weight:700; }

.nav-balance{
  font-size:12.5px; color: var(--ink-2);
  display:inline-flex; align-items:center; gap:6px;
  white-space:nowrap;
}

/* -------------------- 4.2 ترويسة الشاشة -------------------- */
.screen-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap: var(--s5);
  margin-bottom: var(--s5);
  flex-wrap: wrap;
}
.screen-head-text{ flex:1; min-width:240px; }
.screen-head h1{ margin-bottom:6px; }
.screen-head .page-intro{ color: var(--ink-2); font-size:15px; margin:0; }
.screen-head-actions{ display:flex; align-items:center; gap: var(--s2); flex-shrink:0; }

.page-intro{ font-size:15px; color: var(--ink-2); margin: -4px 0 var(--s4); }

/* -------------------- 4.3 الأزرار -------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: var(--s2);
  padding: 11px 20px; border-radius: var(--r);
  font-family: var(--font-display); font-size:14.5px; font-weight:700;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition: transform .12s, box-shadow .15s, background .15s;
  width:auto; margin:0;
}
.btn-primary{ background: var(--brand); color:#fff; box-shadow: var(--shadow-1); }
.btn-primary:hover{ box-shadow: var(--shadow-2); transform: translateY(-1px); background: var(--brand); }
.btn-ghost{ background: transparent; color: var(--brand-ink); border-color: var(--line); }
.btn-ghost:hover{ background: var(--brand-soft); }
.btn-quiet{ background: transparent; color: var(--ink-2); padding: 8px 12px; border-color: transparent; }
.btn-quiet:hover{ background: var(--surface-2); }
.btn-danger{ background: var(--stop-bg); color: var(--stop); }
.btn-danger:hover{ background: var(--stop-bg); box-shadow: var(--shadow-1); }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

button{ /* توافق مع أزرار <button> العادية غير المصنّفة صراحةً */
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: var(--brand); color:#fff; border:1px solid transparent;
  border-radius: var(--r); font-family:var(--font-display); font-weight:700; font-size:14.5px;
  padding:11px 20px; cursor:pointer; width:auto; margin-top:6px; margin-bottom:0;
  box-shadow: var(--shadow-1); transition: transform .12s, box-shadow .15s, background .15s;
}
button:hover{ box-shadow: var(--shadow-2); transform: translateY(-1px); }
button:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.button-link{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--brand); color:#fff; text-decoration:none;
  padding:11px 20px; border-radius: var(--r); font-family:var(--font-display); font-weight:700; font-size:14.5px;
}

/* -------------------- 4.4 الشارات -------------------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius: var(--r-pill);
  font-size:12px; font-weight:600; white-space:nowrap;
}
.badge-ok, .badge.status-accepted, .badge.status-published{ background: var(--ok-bg); color: var(--ok); }
.badge-warn{ background: var(--warn-bg); color: var(--warn); }
.badge-stop, .badge.status-rejected{ background: var(--stop-bg); color: var(--stop); }
.badge-info, .badge.status-clean, .badge.status-measured{ background: var(--info-bg); color: var(--info); }
.badge-idle, .badge.status-raw{ background: var(--idle-bg); color: var(--idle); }
.badge-brand, .badge.status-clustered, .badge.status-briefed{ background: var(--brand-soft); color: var(--brand-ink); }
/* توافق مع الشارة العامة القديمة .badge بلا فئة حالة */
.badge:not([class*="status-"]):not([class*="badge-"]){ background: var(--brand-soft); color: var(--brand-ink); }

/* -------------------- 4.5 الجداول -------------------- */
.table-wrap{
  overflow-x:auto; border:1px solid var(--line);
  border-radius: var(--r-lg); background: var(--surface);
}
table{ border-collapse:collapse; width:100%; font-size:14px; }
thead th{
  position:sticky; top:0; z-index:1;
  background: var(--surface-2); color: var(--ink-3);
  font-family: var(--font-display); font-size:12px; font-weight:700;
  text-align:right; padding:11px 16px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
tbody td{ padding:12px 16px; border-bottom:1px solid var(--line-2); }
tbody tr:last-child td{ border-bottom:none; }
tbody tr{ transition: background .12s; }
tbody tr:hover{ background: var(--surface-2); }
td.num{ font-variant-numeric: tabular-nums; text-align:left; direction:ltr; }
td.status-cell, th.status-cell{ white-space:nowrap; min-width:140px; }
tr.row-link{ cursor:pointer; }

/* -------------------- 4.6 درجة الصعوبة -------------------- */
.kd{ display:flex; align-items:center; gap:8px; }
.kd-bar{
  inline-size:56px; block-size:6px; border-radius: var(--r-pill);
  background: var(--line); overflow:hidden; display:block;
}
.kd-bar i{ display:block; block-size:100%; border-radius:inherit; font-style:normal; }
.kd[data-band="easy"] .kd-bar i{ background: var(--ok); }
.kd[data-band="mid"]  .kd-bar i{ background: var(--warn); }
.kd[data-band="hard"] .kd-bar i{ background: var(--stop); }
.kd-val{ font-variant-numeric: tabular-nums; font-weight:700; font-size:13px; }
.kd-reason{ color: var(--ink-3); font-size:12.5px; margin-top:4px; }

/* -------------------- 4.7 الحالة الفارغة -------------------- */
.empty{
  display:flex; flex-direction:column; align-items:center; gap: var(--s3);
  padding: var(--s7) var(--s5); text-align:center;
  background: var(--surface); border:1px dashed var(--line);
  border-radius: var(--r-lg);
  min-height: 320px; justify-content:center;
}
.empty-icon{ font-size:40px; color: var(--ink-3); line-height:1; }
.empty h3{ font-size:17px; }
.empty p{ color: var(--ink-2); max-width:46ch; font-size:14px; }

/* منطقة رئيسية تملأ الشاشة عشان الحالة الفارغة تتوسّط رأسياً لا تلتصق بأعلى الصفحة */
.screen-body{ min-height: 50vh; display:flex; flex-direction:column; justify-content:center; }
.screen-body:has(.card:not(.empty-wrap)){ display:block; min-height:0; justify-content:normal; }

/* -------------------- 4.8 بطاقات اليوم عندك -------------------- */
.today-card{
  display:flex; align-items:center; gap: var(--s4);
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s4) var(--s5);
  margin-bottom: var(--s3);
  position:relative; overflow:hidden;
  box-shadow: var(--shadow-1);
}
.today-card::before{
  content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px;
  background: var(--idle);
}
.today-card[data-tone="warn"]::before{ background: var(--warn); }
.today-card[data-tone="ok"]::before{ background: var(--ok); }
.today-card[data-tone="brand"]::before{ background: var(--brand); }
.today-card[data-tone="stop"]::before{ background: var(--stop); }
.today-card-icon{ font-size:22px; flex-shrink:0; }
.today-card-body{ flex:1; min-width:0; }
.today-card-num{ font-family: var(--font-display); font-weight:800; font-size:17px; }
.today-card-sub{ color: var(--ink-3); font-size:13px; margin-top:2px; }
.today-card-action{ flex-shrink:0; }

/* -------------------- 4.9 صفحة الكلمة: الخط الزمني -------------------- */
.kw-header{ display:flex; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap; }
.kw-stats{ display:flex; gap: var(--s3); flex-wrap:wrap; margin: var(--s4) 0; }
.kw-stat{
  background: var(--surface-2); border-radius: var(--r); padding:10px 16px;
  min-width:120px;
}
.kw-stat-label{ font-size:12px; color: var(--ink-3); }
.kw-stat-val{ font-family: var(--font-display); font-weight:800; font-size:18px; margin-top:2px; }

.timeline{ list-style:none; padding:0; margin:0 0 var(--s5); }
.timeline li{
  position:relative;
  border-inline-start:2px solid var(--line);
  padding: 2px 0 18px 0; padding-inline-end:16px; margin-inline-start:8px;
}
.timeline li::before{
  content:""; position:absolute; inset-inline-start:-6.5px; top:2px;
  width:11px; height:11px; border-radius:50%;
  background: var(--idle); border:2px solid var(--surface);
}
.timeline li[data-tone="ok"]::before{ background: var(--ok); }
.timeline li[data-tone="warn"]::before{ background: var(--warn); }
.timeline li[data-tone="stop"]::before{ background: var(--stop); }
.timeline li[data-tone="brand"]::before{ background: var(--brand); }
.timeline li[data-tone="info"]::before{ background: var(--info); }
.timeline time{ font-size:12px; color: var(--ink-3); }
.timeline .ev-body strong{ display:block; margin-top:2px; font-size:14px; }
.timeline .ev-body p{ margin:4px 0 0; color: var(--ink-2); font-size:13.5px; }

.back{ color: var(--brand-ink); text-decoration:none; font-size:0.9rem; display:inline-block; margin-bottom:8px; }

dl{ display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:0; }
dt{ color: var(--ink-3); font-size:13px; }
dd{ margin:0; }

/* -------------------- تلميحات المصطلحات -------------------- */
.term-help{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background: var(--idle-bg); color: var(--ink-3);
  font-size:0.75rem; cursor:help; margin-inline-start:4px; vertical-align:middle;
  border:none; padding:0; font-family:inherit;
}
.term-help:hover, .term-help:focus{ background: var(--accent); color:#06371F; }
.term-help-text{
  display:block; font-size:0.85rem; font-weight:normal;
  color: var(--ink-2); background: var(--surface-2);
  border-radius:8px; padding:8px 12px; margin-top:6px;
}

/* -------------------- أمثلة توضيحية -------------------- */
.example-toggle summary{
  cursor:pointer; color: var(--brand-ink); font-weight:600;
  margin-bottom: var(--s4); list-style:none; font-size:13.5px;
}
.example-toggle summary::-webkit-details-marker{ display:none; }
.example-toggle summary::before{ content:"🔍 "; }
.example-block{
  border:1px dashed var(--accent);
  border-radius: var(--r); padding:14px 16px;
  background: var(--surface-2);
}
.example-block::before{
  content:"بيانات وهمية — مثال توضيحي بس";
  display:block; font-size:0.78rem; color: var(--ink-3); margin-bottom:10px;
}
.example-block table{ background:transparent; }

.quiet-toggle{ margin-top: var(--s4); }
.quiet-toggle summary{
  cursor:pointer; color: var(--ink-3); font-size:13.5px;
  list-style:none; padding: var(--s2) 0;
}
.quiet-toggle summary::-webkit-details-marker{ display:none; }
.quiet-toggle summary::before{ content:"▸ "; }
.quiet-toggle[open] summary::before{ content:"▾ "; }
.quiet-toggle p{ padding-inline-start: var(--s4); }

/* -------------------- إحصائية بارزة -------------------- */
.stat-banner{
  display:flex; align-items:center; gap:18px;
  background: var(--brand-soft); border-radius: var(--r-lg);
  padding:16px 22px; margin-bottom: var(--s5);
}
.stat-banner .stat-number{
  font-family: var(--font-display); font-size:2.2rem; font-weight:800;
  color: var(--brand-ink); line-height:1; font-variant-numeric:tabular-nums;
}
.stat-banner .stat-label{ color: var(--ink-2); }

/* -------------------- تأكيد قبل عملية مدفوعة -------------------- */
.confirm-cost{
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s5); margin-bottom: var(--s5);
}
.confirm-cost dl{ grid-template-columns:1fr auto; margin-bottom: var(--s4); }
.confirm-cost .cost-val{ font-family: var(--font-display); font-weight:800; font-variant-numeric:tabular-nums; }
.confirm-actions{ display:flex; gap: var(--s3); }

/* -------------------- سكيلتون التحميل -------------------- */
.skeleton{ background: linear-gradient(90deg, var(--surface-2) 25%, var(--line-2) 37%, var(--surface-2) 63%); background-size:400% 100%; border-radius: var(--r-sm); animation: skeleton-wave 1.4s ease infinite; }
@keyframes skeleton-wave{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }

.spinner{
  display:inline-block; width:13px; height:13px;
  border:2px solid rgba(255,255,255,.45); border-top-color:#fff;
  border-radius:50%; animation: spin .7s linear infinite; vertical-align:middle;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* -------------------- الحركة -------------------- */
*{ transition-timing-function: cubic-bezier(.2,.7,.3,1); }
.card, .today-card{ animation: card-in .18s ease both; }
@keyframes card-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}