/* ============================================================
   بلان إنتيريور — نظام التصميم الموحّد (Design System)
   هوية دافئة راقية · أيقونات خطية · حركات ناعمة
   يُستخدم عبر <link rel="stylesheet" href="theme.css"> في كل الصفحات
   ============================================================ */

/* ---- الخط ---- */
/* يُحمّل من Google Fonts عبر <link> في <head> كل صفحة:
   IBM Plex Sans Arabic (300–700) */

:root{
  /* لوحة الألوان — نهار */
  --bg:            #f4f1ec;   /* ورق دافئ */
  --bg-2:          #efece6;
  --surface:       #ffffff;
  --surface-2:     #faf8f5;
  --ink:           #1a1917;   /* شبه أسود دافئ */
  --ink-2:         #4f4c47;   /* ثانوي — أغمق لوضوح أعلى */
  --ink-3:         #78736c;   /* ثالثي — أغمق لوضوح أعلى */
  --line:          rgba(28,27,25,.09);   /* حدّ شعري */
  --line-2:        rgba(28,27,25,.055);
  --field-border:  rgba(28,27,25,.20);   /* حدّ حقول الإدخال — أوضح */
  --field-bg:      #ffffff;               /* خلفية الحقول */
  --accent:        #9a3b2e;   /* طيني/نبيتي — هوية */
  --accent-ink:    #83322727; /* شفاف */
  --accent-soft:   rgba(154,59,46,.08);
  --accent-2:      #2f6f6a;   /* أخضر عميق ثانوي */
  --ok:            #2c7a52;
  --warn:          #b06a1a;
  --danger:        #b23b34;

  /* ألوان شرائح الأيقونات (هادئة/راقية) */
  --chip-wood:  #ad8360;
  --chip-slate: #4c5561;
  --chip-clay:  #9a3b2e;
  --chip-teal:  #2f6f6a;
  --chip-ink:   #3a3937;

  /* ظلال ناعمة متعددة الطبقات */
  --sh-1: 0 1px 2px rgba(28,27,25,.04), 0 1px 1px rgba(28,27,25,.03);
  --sh-2: 0 4px 12px rgba(28,27,25,.06), 0 1px 3px rgba(28,27,25,.04);
  --sh-3: 0 18px 40px -12px rgba(28,27,25,.18), 0 6px 16px -8px rgba(28,27,25,.10);
  --sh-4: 0 30px 60px -20px rgba(28,27,25,.28), 0 10px 24px -12px rgba(28,27,25,.14);

  /* الشكل */
  --r-sm: 10px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-full: 999px;

  /* المسافات */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:32px; --sp-7:48px;

  /* الحركة */
  --ease:     cubic-bezier(.32,.72,0,1);
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --dur:      .34s;
  --dur-fast: .18s;

  --font: "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ---- الوضع الليلي (تلقائي + عبر data-theme) ---- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f0e0d; --bg-2:#141312; --surface:#1a1918; --surface-2:#211f1d;
    --ink:#f2efe9; --ink-2:#b0aca4; --ink-3:#7c7871;
    --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
    --field-border:rgba(255,255,255,.24); --field-bg:#221f1c;
    --accent:#d9705f; --accent-soft:rgba(217,112,95,.14); --accent-2:#5aa39c;
    --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 4px 14px rgba(0,0,0,.45);
    --sh-3:0 18px 44px -12px rgba(0,0,0,.6); --sh-4:0 30px 64px -18px rgba(0,0,0,.7);
    --chip-wood:#b98f6a; --chip-slate:#69737f; --chip-clay:#c25545; --chip-teal:#3d8880; --chip-ink:#6b6863;
  }
}
:root[data-theme="dark"]{
  --bg:#0f0e0d; --bg-2:#141312; --surface:#1a1918; --surface-2:#211f1d;
  --ink:#f2efe9; --ink-2:#b0aca4; --ink-3:#7c7871;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
  --field-border:rgba(255,255,255,.24); --field-bg:#221f1c;
  --accent:#d9705f; --accent-soft:rgba(217,112,95,.14); --accent-2:#5aa39c;
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 4px 14px rgba(0,0,0,.45);
  --sh-3:0 18px 44px -12px rgba(0,0,0,.6); --sh-4:0 30px 64px -18px rgba(0,0,0,.7);
  --chip-wood:#b98f6a; --chip-slate:#69737f; --chip-clay:#c25545; --chip-teal:#3d8880; --chip-ink:#6b6863;
}

/* ---- الأساس ---- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  font-size:15.5px; line-height:1.65; font-weight:450; letter-spacing:0;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; font-feature-settings:"kern" 1;
}
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.01em; line-height:1.3; }
h1{ font-size:26px; } h2{ font-size:20px; } h3{ font-size:16px; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent-soft); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

/* أرقام لاتينية مضبوطة (tabular) للجداول والأرقام */
.tnum{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

/* ---- الأزرار ---- */
.btn{
  --b-bg:var(--surface); --b-ink:var(--ink); --b-line:var(--line);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-size:14px; font-weight:600; letter-spacing:-.01em;
  padding:10px 18px; border-radius:var(--r-full); border:1px solid var(--b-line);
  background:var(--b-bg); color:var(--b-ink); cursor:pointer; white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), filter var(--dur-fast);
  -webkit-tap-highlight-color:transparent; user-select:none;
}
.btn svg{ width:18px; height:18px; }
.btn:hover{ box-shadow:var(--sh-2); }
.btn:active{ transform:scale(.97); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

.btn.primary{ --b-bg:var(--accent); --b-ink:#fff; --b-line:transparent; box-shadow:var(--sh-2); }
.btn.primary:hover{ filter:brightness(1.06); box-shadow:var(--sh-3); }
.btn.dark{ --b-bg:var(--ink); --b-ink:var(--bg); --b-line:transparent; }
.btn.ghost{ --b-bg:transparent; --b-line:var(--line); }
.btn.ghost:hover{ --b-bg:var(--surface-2); }
.btn.soft{ --b-bg:var(--accent-soft); --b-ink:var(--accent); --b-line:transparent; }
.btn.danger{ --b-bg:transparent; --b-ink:var(--danger); --b-line:color-mix(in srgb, var(--danger) 30%, transparent); }
.btn.danger:hover{ --b-bg:color-mix(in srgb, var(--danger) 8%, transparent); }
.btn.sm{ padding:7px 13px; font-size:13px; }
.btn.lg{ padding:13px 24px; font-size:15px; }
.btn.block{ display:flex; width:100%; }
.btn.icon{ padding:9px; width:38px; height:38px; border-radius:var(--r-full); }
.btn.icon svg{ width:19px; height:19px; }

/* ---- حقول الإدخال ---- */
.field, input:not([type]),input[type=text],input[type=password],input[type=number],input[type=date],input[type=search],input[type=email],input[type=tel],select,textarea{
  font-family:inherit; font-size:15px; color:var(--ink); background:var(--field-bg);
  border:1.5px solid var(--field-border); border-radius:var(--r-md); padding:0 14px; width:100%; height:48px; line-height:normal;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast);
  -webkit-appearance:none; appearance:none;
}
input::placeholder,textarea::placeholder{ color:var(--ink-3); opacity:1; }
input:hover,select:hover,textarea:hover{ border-color:color-mix(in srgb,var(--ink) 32%, transparent); }
select{
  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='%2378736c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 14px center; padding-left:38px; cursor:pointer;
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); background:var(--surface); }
textarea{ resize:vertical; min-height:96px; height:auto; padding:12px 14px; line-height:1.6; }
label{ font-size:13px; font-weight:600; color:var(--ink-2); display:block; margin:0 2px 7px; letter-spacing:0; }
.hint{ font-size:12px; color:var(--ink-3); margin:6px 2px 0; }

/* ---- شبكة نماذج محاذاة ---- */
.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 16px; }
.form-grid .full{ grid-column:1 / -1; }
.form-field{ display:flex; flex-direction:column; min-width:0; }
.form-field > label{ margin-bottom:7px; }
.form-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:20px; padding-top:18px; border-top:1px solid var(--line-2); }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; gap:14px; } }

/* ---- البطاقات ---- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-2); padding:var(--sp-5); }

/* ---- مجموعة قائمة على طراز iOS ---- */
.list-group{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-2); overflow:hidden; }
.list-row{
  display:flex; align-items:center; gap:14px; padding:14px 16px; position:relative;
  transition:background var(--dur-fast) var(--ease-out);
}
.list-row + .list-row::before{ content:""; position:absolute; top:0; right:66px; left:0; height:1px; background:var(--line-2); }
a.list-row:hover, button.list-row:hover{ background:var(--surface-2); }
a.list-row:active{ background:var(--bg-2); }

/* شريحة الأيقونة */
.chip{ width:40px; height:40px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.18), var(--sh-1); }
.chip svg{ width:21px; height:21px; stroke-width:1.9; }
.chip.wood{ background:var(--chip-wood); } .chip.slate{ background:var(--chip-slate); }
.chip.clay{ background:var(--chip-clay); } .chip.teal{ background:var(--chip-teal); } .chip.ink{ background:var(--chip-ink); }

/* ---- الشارات والحبوب ---- */
.badge{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:var(--r-full); background:var(--accent-soft); color:var(--accent); line-height:1.5; }
.pill{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:var(--r-full); color:#fff; white-space:nowrap; }

/* ---- عنوان قسم ---- */
.eyebrow{ display:flex; align-items:center; gap:10px; color:var(--ink-3); font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin:0 4px 12px; }
.muted{ color:var(--ink-2); } .muted-2{ color:var(--ink-3); }
.hairline{ height:1px; background:var(--line); border:0; margin:var(--sp-5) 0; }

/* ---- الحركة عند الظهور ---- */
@keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.rise{ animation:rise .6s var(--ease) both; }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

/* ============================================================
   جداول متجاوبة على الهاتف — كل صف يصبح بطاقة (عنوان/قيمة)
   يُفعَّل تلقائيًّا بإضافة class="rt-cards" من ui.js (rtStampTables).
   ============================================================ */
@media (max-width:720px){
  table.rt-cards{ display:block; width:100%; overflow:visible; border-collapse:separate; }
  table.rt-cards thead{ display:none; }
  table.rt-cards tbody{ display:block; width:100%; }
  table.rt-cards tr{ display:block; border:1px solid var(--line); border-radius:14px;
    margin:0 0 10px; padding:6px 13px; background:var(--surface); box-shadow:var(--sh-1); }
  table.rt-cards td{ display:grid; grid-template-columns:38% 1fr; gap:10px; align-items:center;
    border:none; padding:7px 0; text-align:right; white-space:normal; font-size:13.5px; min-width:0; }
  table.rt-cards td + td{ border-top:1px solid var(--line-2); }
  table.rt-cards td::before{ content:attr(data-lbl); color:var(--ink-3); font-weight:700;
    font-size:11.5px; line-height:1.4; }
  table.rt-cards td:not([data-lbl])::before,
  table.rt-cards td[data-lbl=""]::before{ content:""; }
  table.rt-cards td.rt-full{ display:block; padding:6px 0; }
  table.rt-cards td.rt-full::before{ display:none; }
  /* القيم لا تتمدّد على كامل العمود (الشارات/الأزرار تأخذ حجمها الطبيعي) */
  table.rt-cards td > *{ justify-self:start; max-width:100%; }
  table.rt-cards td.rt-full > *{ justify-self:stretch; }
  table.rt-cards td > input:not([type=checkbox]):not([type=radio]),
  table.rt-cards td > select, table.rt-cards td > textarea{ width:100%; height:44px; }
  table.rt-cards td > input[type=checkbox], table.rt-cards td > input[type=radio]{ width:22px; height:22px; }
  /* الحاوية overflow:auto حول الجداول لم تعد تدفع الصفحة أفقيًّا على الهاتف */
  .card, .panel{ min-width:0; }
}

/* ---- سكرول راقٍ ---- */
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-thumb{ background:color-mix(in srgb,var(--ink) 18%, transparent); border-radius:99px; border:3px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb,var(--ink) 30%, transparent); }