/* نظام العرين — التوكنات والأنماط الأساسية (اتجاه «النقش والطبقة»)
   مصدر واحد لكل البطاقات والشاشات. RTL أولاً، فاتح دائماً. */

/* الخط الأساسي: IBM Plex Sans Arabic — ملفات محلية داخل assets/fonts، بلا رابط خارجي.
   الترخيص: OFL (assets/fonts/OFL.txt). الأوزان المستخدمة: ٤٠٠ · ٥٠٠ · ٦٠٠ · ٧٠٠. */
@font-face{font-family:'IBM Plex Sans Arabic';src:url('./fonts/IBMPlexSansArabic-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('./fonts/IBMPlexSansArabic-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('./fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('./fonts/IBMPlexSansArabic-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* الأسطح */
  --bg:#f3eee3;
  --bg-deep:#ece5d6;
  --surface:#fffefa;
  --surface-2:#fbf8f1;
  --well:#f4efe4;

  /* الأخضر المؤسسي */
  --green-900:#102519;
  --green-800:#173727;
  --green-700:#1e4735;
  --green-600:#2b6047;
  --green-500:#3d7a5e;
  --green-tint:#e5eee8;
  --green-tint-strong:#cfdfd4;

  /* الذهبي — إطار وحرف، لا سطح ممتلئ */
  --gold-700:#87692c;
  --gold-600:#a3853f;
  --gold-500:#c8a95b;
  --gold-300:#d8c48d;
  --gold-200:#e6d6ab;
  --gold-050:#f8f2e2;

  /* الحبر */
  --ink:#1c231e;
  --ink-2:#57625b;
  --ink-3:#8e978f;

  /* الخطوط الفاصلة */
  --line:#e5dbc7;
  --line-2:#d0c4ac;

  /* الدلالات */
  --ok:#2b6449;      --ok-tint:#e4efe8;      --ok-line:#c9dfd2;
  --warn:#916624;    --warn-tint:#f7eed9;    --warn-line:#e6d2a8;
  --danger:#96372a;  --danger-tint:#f7e5e0;  --danger-line:#e9cbc4;
  --info:#2c5163;    --info-tint:#e5eef2;    --info-line:#cbdae1;

  /* العمق */
  --shadow-sm:0 1px 2px rgba(28,35,30,.05);
  --shadow-md:0 1px 0 #fff inset,0 2px 3px rgba(28,35,30,.04),0 20px 40px -30px rgba(16,37,25,.45);
  --shadow-lg:0 18px 40px -24px rgba(16,37,25,.6);
  --inset-well:inset 0 2px 4px rgba(28,35,30,.07),inset 0 -1px 0 #fff;
  --edge-light:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.2); /* @kind shadow */

  /* الأنصاف والمسافات */
  --r-sm:9px; --r-md:13px; --r-lg:20px; --r-full:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;

  /* الطباعة — حزمة خطوط عربية ذاتية الاكتفاء بلا رابط خارجي */
  --font-main:'IBM Plex Sans Arabic','SF Arabic','Dubai','Segoe UI',Tahoma,'Geeza Pro',Arial,sans-serif;
  --fs-xs:11.5px; --fs-sm:13px; --fs-md:15px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px;
  --lh-tight:1.35; /* @kind font */
  --lh-body:1.65; /* @kind font */
  --lh-loose:1.75; /* @kind font */
  --touch:47px;
}

*{box-sizing:border-box}
html{direction:rtl}
body{margin:0;font-family:var(--font-main);color:var(--ink);background:var(--bg);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
a{color:var(--green-700);text-decoration-color:var(--gold-300);text-underline-offset:3px}
a:hover{color:var(--green-900);text-decoration-color:var(--gold-500)}

/* ——— هيكل صفحة العرض ——— */
.ds-page{padding:var(--sp-6) var(--sp-4)}
.ds-wrap{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.ds-hd{background:linear-gradient(150deg,var(--green-800),var(--green-600));color:#f2efe4;border-radius:var(--r-lg);padding:26px 26px 24px;position:relative;overflow:hidden;box-shadow:var(--shadow-lg)}
.ds-hd::before{content:'';position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,var(--gold-500),transparent)}
.ds-kick{margin:0 0 var(--sp-2);display:flex;align-items:center;gap:9px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;color:var(--gold-500)}
.ds-kick i{display:block;width:20px;height:1px;background:var(--gold-500)}
.ds-hd h1{margin:0;font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.01em;line-height:var(--lh-tight)}
.ds-hd p{margin:9px 0 0;font-size:var(--fs-md);color:rgba(242,239,228,.78);max-width:62ch}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--shadow-md)}
.card-head{display:flex;align-items:center;gap:11px;margin:0 0 var(--sp-4)}
.card-head b.dot{width:6px;height:6px;border-radius:50%;background:var(--gold-500);box-shadow:0 0 0 3px var(--gold-050);flex:none}
.card-head h2{margin:0;font-size:var(--fs-md);font-weight:700;color:var(--green-800)}
.card-head span{margin-inline-start:auto;font-size:var(--fs-xs);color:var(--ink-3)}
.row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.stack{display:flex;flex-direction:column;gap:15px}
.note{margin:11px 0 0;font-size:var(--fs-xs);color:var(--ink-3)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}

/* ——— الأزرار ——— */
.btn{min-height:var(--touch);padding:0 22px;border:1px solid transparent;border-radius:var(--r-md);font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease,transform .1s ease}
.btn svg{flex:none}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn-primary{background:linear-gradient(180deg,var(--green-600),var(--green-800));color:#f4f1e7;box-shadow:var(--edge-light),0 2px 4px rgba(16,37,25,.22)}
.btn-primary:hover:not(:disabled){background:linear-gradient(180deg,var(--green-500),var(--green-700))}
.btn-secondary{background:linear-gradient(180deg,#fff,var(--surface-2));border-color:var(--line-2);color:var(--green-800);box-shadow:var(--shadow-sm)}
.btn-secondary:hover:not(:disabled){background:linear-gradient(180deg,#fff,var(--green-tint))}
.btn-approve{background:linear-gradient(180deg,#fdf9ee,var(--gold-050));border-color:var(--gold-200);color:var(--gold-700);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(135,105,44,.12)}
.btn-approve:hover:not(:disabled){border-color:var(--gold-500)}
.btn-ghost{color:var(--ink-2)}
.btn-ghost:hover:not(:disabled){background:var(--well);color:var(--green-800)}
.btn-danger{background:linear-gradient(180deg,#fdf3f1,var(--danger-tint));border-color:var(--danger-line);color:var(--danger)}
.btn-danger:hover:not(:disabled){border-color:#cd9c92}
.btn-sm{min-height:38px;padding:0 15px;font-size:var(--fs-sm);gap:7px}
.btn-pill{border-radius:var(--r-full)}
.btn-block{width:100%}

.icon-btn{width:43px;height:43px;padding:0;border-radius:var(--r-md);background:linear-gradient(180deg,#fff,var(--surface-2));border:1px solid var(--line);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm);transition:.16s ease}
.icon-btn:hover{color:var(--green-700);border-color:#c6d6cb}
.icon-btn-sm{width:36px;height:36px;border-radius:var(--r-sm)}

/* ——— الحقول ——— */
.field{display:flex;flex-direction:column;gap:7px}
.field>label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;color:var(--gold-700);display:flex;align-items:center;gap:6px}
.field>label b{color:var(--danger);font-weight:700}
.ctl{position:relative;display:flex;align-items:center}
.ctl>svg{position:absolute;inset-inline-start:14px;color:var(--ink-3);pointer-events:none}
.ctl .unit{position:absolute;inset-inline-end:14px;font-size:var(--fs-sm);color:var(--ink-3);z-index:1}
.ctl.ic input{padding-inline-start:42px}
.ctl .unit~input{padding-inline-end:52px}
input,textarea,select{width:100%;min-height:50px;font-family:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--well);border:1px solid var(--line-2);border-radius:var(--r-md);padding:0 15px;box-shadow:var(--inset-well);transition:background .16s,border-color .16s,box-shadow .16s;outline:none}
textarea{padding:14px 15px;min-height:100px;line-height:var(--lh-loose);resize:vertical}
select{cursor:pointer}
input::placeholder,textarea::placeholder{color:#a6ada6}
input:focus,textarea:focus,select:focus{background:var(--surface);border-color:var(--green-600);box-shadow:inset 0 2px 4px rgba(28,35,30,.05),0 0 0 3px rgba(43,96,71,.14)}
input:disabled,textarea:disabled{opacity:.6;cursor:not-allowed}
.hint{font-size:var(--fs-xs);color:var(--ink-3)}
.field.err input,.field.err textarea{border-color:#cd9c92;background:#fdf5f3}
.field.err .hint{color:var(--danger)}

/* ——— الشارات ——— */
.badge{display:inline-flex;align-items:center;gap:7px;min-height:27px;padding:0 11px;border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:600;line-height:1;white-space:nowrap;border:1px solid transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.badge .d{width:6px;height:6px;border-radius:2px;background:currentColor;flex:none;transform:rotate(45deg)}
.badge-ok{background:var(--ok-tint);color:var(--ok);border-color:var(--ok-line)}
.badge-warn{background:var(--warn-tint);color:var(--warn);border-color:var(--warn-line)}
.badge-danger{background:var(--danger-tint);color:var(--danger);border-color:var(--danger-line)}
.badge-info{background:var(--info-tint);color:var(--info);border-color:var(--info-line)}
.badge-neutral{background:var(--well);color:var(--ink-2);border-color:var(--line)}
.badge-gold{background:linear-gradient(180deg,#fdf9ee,var(--gold-050));color:var(--gold-700);border-color:var(--gold-200)}

/* ——— الرقائق ——— */
.chip{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 14px;border-radius:var(--r-full);font-family:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;background:linear-gradient(180deg,#fff,var(--surface-2));border:1px solid var(--line);color:var(--ink-2);box-shadow:var(--shadow-sm);transition:.16s ease}
.chip:hover{border-color:var(--line-2);color:var(--green-800)}
.chip[aria-pressed="true"],.chip.is-on{background:var(--green-tint);border-color:var(--green-tint-strong);color:var(--green-800)}
.chip-gold[aria-pressed="true"],.chip-gold.is-on{background:linear-gradient(180deg,#fdf9ee,var(--gold-050));border-color:var(--gold-200);color:var(--gold-700)}

/* ——— أقراص الأيقونات ——— */
.ico-disc{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 50% 20%,#fff,var(--green-tint));color:var(--green-700);display:inline-flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px #d8e3dc,0 1px 2px rgba(28,35,30,.06);flex:none}
.ico-disc-lg{width:44px;height:44px}
.ico-disc-gold{background:radial-gradient(circle at 50% 20%,#fff,var(--gold-050));color:var(--gold-700);box-shadow:inset 0 0 0 1px var(--gold-200),0 1px 2px rgba(135,105,44,.08)}

/* ——— الجداول ——— */
table.ds{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm)}
table.ds th{text-align:start;font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;color:var(--gold-700);padding:10px 12px;background:var(--well);border-bottom:1px solid var(--line-2)}
table.ds th:first-child{border-start-start-radius:var(--r-sm)}
table.ds th:last-child{border-start-end-radius:var(--r-sm)}
table.ds td{padding:12px;border-bottom:1px solid var(--line);color:var(--ink)}
table.ds tbody tr:last-child td{border-bottom:none}
table.ds tbody tr:hover td{background:var(--surface-2)}
.num{font-variant-numeric:tabular-nums}