/* ═══════════════════════════════════
   WOODISH — Global Stylesheet
═══════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');

/* ══ الألوان — وضع فاتح وليلي ══════════════════════════
   كل لون في النظام يمرّ من هنا. لا تكتب لوناً ثابتاً في الصفحات
   — استخدم متغيّراً من هذه القائمة حتى يتبدّل مع الوضعين.        */
:root{
  --dark:#2C2B29; --mid:#4A4845; --light:#E8E5DF;
  --bg:#F0EDE8;   --white:#FAFAF8; --border:#DEDBD6;
  --muted:#9C9690; --accent:#4A4845;
  --blue:#2C5F8A; --purple:#6A4A8A; --green:#2A7A44;
  --orange:#C0622A; --red:#C0392B;
  --sidebar:240px;

  /* أسطح ونصوص */
  --soft:#F6F4F1;        /* خلفية خفيفة (رؤوس الجداول، الصفوف المميّزة) */
  --field:#FFFFFF;       /* خلفية حقول الإدخال */
  --ink:#2C2B29;         /* لون النص الرئيسي */
  --text-2:#4A4845;      /* نص ثانوي — منفصل عن --mid لأن --mid سطح داكن في الوضعين */
  --shadow:0 1px 3px rgba(44,43,41,.07), 0 8px 24px -16px rgba(44,43,41,.25);

  /* ألوان الحالات — خلفية وإطار ونص لكل حالة */
  --ok-bg:#E8F5EB;    --ok-line:#B8DFC0;  --ok-ink:#2A7A44;
  --warn-bg:#FEF6E8;  --warn-line:#F0DCB8; --warn-ink:#8A6E4A;
  --err-bg:#FBEAEA;   --err-line:#F0C0C0;  --err-ink:#B03A3A;
  --info-bg:#E3EDF5;  --info-line:#C9D8EC; --info-ink:#2C5F8A;
  --neutral-bg:#E8E5DF; --neutral-line:#DEDBD6; --neutral-ink:#4A4845;
  --teal:#0F6E56; --accent-soft-p:#F0EAF7; --accent-soft-t:#E1F5EE;
  --btn-hover:#2C2B29;
  --sel-bg:#4A4845; --sel-ink:#FFFFFF;

  color-scheme:light;
}

/* الوضع الليلي — يتبع الجهاز ما لم يختر المستخدم صراحةً */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --dark:#EDE8E0; --mid:#2A2724; --light:#332F2A;
    --bg:#15130F;   --white:#1F1C18; --border:#332E27;
    --muted:#928A80; --accent:#B0916A;
    --blue:#7BA7CE; --purple:#B195CE; --green:#6BBF8A;
    --orange:#E0955F; --red:#E08078;

    --soft:#1A1714; --field:#16130F; --ink:#EDE8E0; --text-2:#C4BCB2;
    --shadow:0 1px 3px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7);

    --ok-bg:#182A20;    --ok-line:#2E4A38;  --ok-ink:#7FCE9C;
    --warn-bg:#2A2216;  --warn-line:#544326; --warn-ink:#E0BE8C;
    --err-bg:#2B1715;   --err-line:#5A2E2A;  --err-ink:#E89A93;
    --info-bg:#172530;  --info-line:#2C4356; --info-ink:#8FBAD9;
    --neutral-bg:#262220; --neutral-line:#332E27; --neutral-ink:#C4BCB2;
    --teal:#6BC0A8; --accent-soft-p:#241D2E; --accent-soft-t:#122A25;
    --btn-hover:#3A352F;
    --sel-bg:#B0916A; --sel-ink:#17130E;
  --sel-bg:#B0916A; --sel-ink:#17130E;

    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --dark:#EDE8E0; --mid:#2A2724; --light:#332F2A;
  --bg:#15130F;   --white:#1F1C18; --border:#332E27;
  --muted:#928A80; --accent:#B0916A;
  --blue:#7BA7CE; --purple:#B195CE; --green:#6BBF8A;
  --orange:#E0955F; --red:#E08078;

  --soft:#1A1714; --field:#16130F; --ink:#EDE8E0; --text-2:#C4BCB2;
  --shadow:0 1px 3px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7);

  --ok-bg:#182A20;    --ok-line:#2E4A38;  --ok-ink:#7FCE9C;
  --warn-bg:#2A2216;  --warn-line:#544326; --warn-ink:#E0BE8C;
  --err-bg:#2B1715;   --err-line:#5A2E2A;  --err-ink:#E89A93;
  --info-bg:#172530;  --info-line:#2C4356; --info-ink:#8FBAD9;
  --neutral-bg:#262220; --neutral-line:#332E27; --neutral-ink:#C4BCB2;
  --teal:#6BC0A8; --accent-soft-p:#241D2E; --accent-soft-t:#122A25;
  --btn-hover:#3A352F;
  --sel-bg:#B0916A; --sel-ink:#17130E;

  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Tajawal',sans-serif;background:var(--bg);color:var(--dark);min-height:100vh;display:flex}

/* ── Layout ── */
.sidebar{width:var(--sidebar);min-height:100vh;background:var(--mid);display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;z-index:100;overflow-y:auto}
.sidebar-logo{padding:24px 20px 18px;border-bottom:1px solid rgba(255,255,255,.1)}
.sidebar-logo .name{font-size:22px;font-weight:800;letter-spacing:3px;color:#FAFAF8;text-transform:uppercase}
.sidebar-logo .sub{font-size:11px;color:rgba(255,255,255,.4);letter-spacing:1.5px;margin-top:2px}
.sidebar-user{padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:10px}
.user-avatar{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0}
.user-info .uname{font-size:13px;font-weight:600;color:#fff}
.user-info .urole{font-size:11px;color:rgba(255,255,255,.45)}
.nav{flex:1;padding:10px 0}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 20px;color:rgba(255,255,255,.65);font-size:14px;font-weight:500;cursor:pointer;transition:background .15s,color .15s;border-right:3px solid transparent;text-decoration:none}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-item.active{background:rgba(255,255,255,.12);color:#fff;border-right-color:#E8E5DF}
.nav-item svg{width:16px;height:16px;flex-shrink:0;opacity:.7}
.nav-item.active svg{opacity:1}
.sidebar-footer{padding:16px 20px;border-top:1px solid rgba(255,255,255,.1)}
.btn-logout{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.6);border-radius:8px;padding:9px;font-family:'Tajawal',sans-serif;font-size:13px;cursor:pointer;transition:background .15s}
.btn-logout:hover{background:rgba(255,255,255,.15);color:#fff}

.main{margin-right:var(--sidebar);flex:1;min-height:100vh;display:flex;flex-direction:column}
.topbar{background:var(--white);border-bottom:1px solid var(--border);padding:14px 28px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}
.topbar-title{font-size:18px;font-weight:700;color:var(--dark)}
.topbar-right{display:flex;align-items:center;gap:10px}
.content{padding:24px 28px;flex:1}

/* ── Cards ── */
.card{background:var(--white);border-radius:12px;border:1px solid var(--border)}
.card-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.card-title{font-size:14px;font-weight:700;color:var(--dark)}
.card-body{padding:20px}

/* ── Stats Grid (موحّدة مع روح KPI الجديدة) ── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.stat-card{
  background:var(--white);border-radius:16px;padding:20px;border:1px solid var(--border);
  position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(44,43,41,.04);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
  opacity:0;transform:translateY(8px);animation:kpiIn .4s cubic-bezier(.2,.8,.2,1) forwards;
}
.stat-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px -12px rgba(44,43,41,.22)}
.stat-card:nth-child(1){animation-delay:.02s}
.stat-card:nth-child(2){animation-delay:.08s}
.stat-card:nth-child(3){animation-delay:.14s}
.stat-card:nth-child(4){animation-delay:.20s}
.stat-card:nth-child(5){animation-delay:.26s}
.stat-card:nth-child(6){animation-delay:.32s}
@media (prefers-reduced-motion:reduce){.stat-card{animation:none;opacity:1;transform:none}.stat-card:hover{transform:none}}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.stat-card.c-blue::before{background:var(--blue)}
.stat-card.c-green::before{background:var(--green)}
.stat-card.c-orange::before{background:var(--orange)}
.stat-card.c-purple::before{background:var(--purple)}
/* دائرة زخرفية خفيفة تطابق بطاقات KPI */
.stat-card::after{content:'';position:absolute;top:0;right:0;width:120px;height:120px;border-radius:50%;transform:translate(40px,-60px);opacity:.05;pointer-events:none}
.stat-card.c-blue::after{background:var(--blue)}
.stat-card.c-green::after{background:var(--green)}
.stat-card.c-orange::after{background:var(--orange)}
.stat-card.c-purple::after{background:var(--purple)}
.stat-label{font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:8px}
.stat-value{font-size:28px;font-weight:800;color:var(--dark);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.stat-sub{font-size:11.5px;color:var(--muted);margin-top:6px}

/* ── Table ── */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{padding:11px 16px;text-align:right;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.5px;border-bottom:1px solid var(--border);background:var(--bg);white-space:nowrap}
td{padding:12px 16px;font-size:13px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--soft);cursor:pointer}

/* ── Badges ── */
.badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap;display:inline-block}
.stage-pending{background:var(--warn-bg);color:var(--warn-ink)}
.stage-approved{background:var(--ok-bg);color:var(--ok-ink)}
.stage-rejected{background:var(--err-bg);color:var(--err-ink)}
.stage-contracted{background:var(--info-bg);color:var(--info-ink)}
.stage-design{background:var(--info-bg);color:var(--info-ink)}
.stage-manufacturing{background:var(--accent-soft-p);color:var(--purple)}
.stage-installation{background:var(--info-bg);color:var(--info-ink)}
.stage-done{background:var(--neutral-bg);color:var(--neutral-ink)}
.stage-warranty{background:var(--ok-bg);color:var(--ok-ink)}
.stage-final{background:var(--neutral-bg);color:var(--neutral-ink)}
.role-manager{background:var(--neutral-bg);color:var(--neutral-ink)}
.role-employee{background:var(--info-bg);color:var(--info-ink)}
.role-secretary{background:var(--accent-soft-p);color:var(--purple)}
.role-accountant{background:var(--ok-bg);color:var(--ok-ink)}
.role-designer{background:var(--accent-soft-p);color:var(--purple)}
.role-workshop{background:var(--warn-bg);color:var(--warn-ink)}
.role-cs{background:var(--accent-soft-t);color:var(--teal)}
.role-marketing{background:var(--info-bg);color:var(--info-ink)}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:6px;border:none;border-radius:10px;padding:9px 18px;font-family:'Tajawal',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s,opacity .15s,transform .12s,box-shadow .15s;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--mid);color:#fff;box-shadow:0 1px 2px rgba(44,43,41,.12)}
.btn-primary:hover{background:var(--btn-hover);box-shadow:0 4px 12px -4px rgba(44,43,41,.3)}
.btn-secondary{background:var(--bg);border:1.5px solid var(--border);color:var(--text-2)}
.btn-secondary:hover{border-color:var(--accent);color:var(--dark)}
.btn-danger{background:var(--err-bg);border:1px solid var(--err-line);color:var(--red)}
.btn-danger:hover{background:var(--err-line)}
.btn-success{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--green)}
.btn-success:hover{background:var(--ok-line)}
.btn-sm{padding:5px 12px;font-size:12px;border-radius:8px}
.btn svg{width:14px;height:14px}

/* ── Forms ── */
.form-grid{display:grid;gap:14px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:1fr 1fr 1fr}
.full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:12px;font-weight:700;color:var(--text-2);letter-spacing:.3px}
.field input,.field select,.field textarea{font-family:'Tajawal',sans-serif;font-size:14px;padding:10px 13px;border:1.5px solid var(--border);border-radius:8px;background:var(--bg);color:var(--dark);outline:none;transition:border-color .15s;direction:rtl;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);background:var(--white)}
.field input[readonly]{opacity:.6;cursor:default;background:var(--light)}
.field textarea{resize:vertical}

/* ── Modal ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:300;align-items:center;justify-content:center;padding:16px}
.modal-overlay.show{display:flex;animation:overlayIn .2s ease}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
.modal{background:var(--white);border-radius:16px;width:560px;max-width:100%;max-height:90vh;overflow-y:auto;animation:fadeUp .3s ease}
.modal-lg{width:860px}
.modal-xl{width:1180px;max-height:94vh}
@media(max-width:1240px){ .modal-xl{width:calc(100vw - 32px)} }

/* شريط خيارات عرض السعر (نفس الرقم — خيارات متعدّدة) */
.optbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 24px;
  background:var(--soft);border-bottom:1px solid var(--border)}
.optbar .lbl{font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.04em;margin-inline-end:2px}
.optbar button{border:1px solid var(--border);background:var(--white);color:var(--text-2);
  border-radius:999px;padding:6px 14px;font-family:'Tajawal',sans-serif;font-size:12.5px;
  font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.13s}
.optbar button:hover{border-color:var(--accent);color:var(--dark)}
.optbar button.on{background:var(--mid);border-color:var(--mid);color:#fff}
.optbar button .money{font-size:11.5px;opacity:.75;font-variant-numeric:tabular-nums}
.optbar button.add{border-style:dashed;color:var(--muted)}
.optchip{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;
  background:var(--accent-soft-p);color:var(--purple);margin-inline-start:6px;vertical-align:middle}
.modal-head{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--white);z-index:1}
.modal-head-title{font-size:16px;font-weight:700}
.modal-close{background:none;border:none;font-size:22px;color:var(--muted);cursor:pointer;line-height:1}
.modal-close:hover{color:var(--dark)}
.modal-body{padding:24px}
.modal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;position:sticky;bottom:0;background:var(--white)}

/* ── Tabs ── */
.tabs{display:flex;gap:2px;background:var(--bg);border-radius:10px;padding:3px;margin-bottom:20px;border:1px solid var(--border)}
.tab{flex:1;padding:8px;text-align:center;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;border-radius:8px;transition:all .15s}
.tab.active{background:var(--white);color:var(--dark);box-shadow:0 1px 4px rgba(0,0,0,.08)}

/* ── Search ── */
.search-bar{display:flex;gap:10px;margin-bottom:16px;align-items:center}
.search-input{flex:1;font-family:'Tajawal',sans-serif;font-size:14px;padding:9px 14px;border:1.5px solid var(--border);border-radius:8px;background:var(--white);color:var(--dark);outline:none;direction:rtl}
.search-input:focus{border-color:var(--accent)}

/* ── Empty state ── */
.empty-state{padding:48px 24px;text-align:center;color:var(--muted)}
.empty-state .icon{font-size:44px;margin-bottom:12px}
.empty-state .title{font-size:16px;font-weight:700;margin-bottom:6px;color:var(--dark)}
.empty-state .sub{font-size:13px}

/* ── Progress bar ── */
.progress-wrap{background:var(--light);border-radius:20px;height:6px;overflow:hidden}
.progress-bar{height:100%;border-radius:20px;background:var(--mid);transition:width .3s}

/* ── Animations ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeUp .4s ease both}

/* ══════════ زر قائمة الجوال + طبقة التعتيم (مخفية على الكمبيوتر) ══════════ */
.mobile-menu-btn{display:none;position:fixed;top:12px;right:14px;z-index:120;width:44px;height:44px;
  background:var(--mid,#2C2B29);color:#fff;border:none;border-radius:10px;cursor:pointer;
  align-items:center;justify-content:center;box-shadow:0 4px 14px -4px rgba(0,0,0,.4)}
.mobile-menu-btn svg{width:24px;height:24px}
.sidebar-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:99;
  opacity:0;transition:opacity .25s ease}
[dir="ltr"] .mobile-menu-btn{right:auto;left:14px}

/* ══════════ الأجهزة اللوحية (آيباد) — 769px حتى 1024px ══════════ */
@media(max-width:1024px) and (min-width:769px){
  .sidebar{transform:translateX(100%);transition:transform .28s ease;z-index:100;box-shadow:-4px 0 24px -8px rgba(0,0,0,.35);visibility:hidden}
  [dir="ltr"] .sidebar{transform:translateX(-100%)}
  body.sidebar-open .sidebar{transform:translateX(0);visibility:visible}
  body.sidebar-open .sidebar-scrim{display:block;opacity:1}
  .mobile-menu-btn{display:flex}
  .main{margin-right:0!important;margin-left:0!important}
  [dir="ltr"] .main{margin-right:0!important;margin-left:0!important}
  .topbar{left:0!important;right:0!important;padding-right:64px}
  [dir="ltr"] .topbar{padding-right:28px;padding-left:64px}
  .content{padding:20px 22px}
  .stats-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
  .g3{grid-template-columns:1fr 1fr}
}

/* ══════════ الجوال (آيفون) — حتى 768px ══════════ */
@media(max-width:768px){
  /* السايدبar ينزلق من الجنب بدل ما يختفي */
  .sidebar{transform:translateX(100%);transition:transform .28s ease;box-shadow:-4px 0 24px -8px rgba(0,0,0,.35);visibility:hidden}
  [dir="ltr"] .sidebar{transform:translateX(-100%)}
  body.sidebar-open .sidebar{transform:translateX(0);visibility:visible}
  body.sidebar-open .sidebar-scrim{display:block;opacity:1}
  .mobile-menu-btn{display:flex}

  /* المحتوى ياخذ كامل العرض — min-width:0 يمنع الجداول العريضة من توسيع الصفحة (تتمرّر داخل بطاقتها) */
  .main{margin-right:0!important;margin-left:0!important;min-width:0}
  [dir="ltr"] .main{margin-right:0!important;margin-left:0!important}
  .topbar{left:0!important;right:0!important;padding:14px 60px 14px 18px}
  [dir="ltr"] .topbar{padding:14px 18px 14px 60px}
  .topbar-title{font-size:16px}
  .content{padding:16px 14px}

  /* الشبكات عمود واحد أو عمودين */
  .stats-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
  .g2,.g3{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:1fr 1fr!important;gap:10px}

  /* البطاقات أصغر */
  .stat-card,.kpi{padding:14px 16px}
  .stat-value{font-size:18px!important}

  /* الجداول: تمرير أفقي بدل ما تنكسر */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
  table{min-width:560px}
  th,td{padding:9px 12px;font-size:12px}

  /* النوافذ ملء الشاشة تقريباً */
  .modal-overlay{padding:0;align-items:flex-end}
  .modal,.modal-lg,.modal-xl{width:100%;max-width:100%;max-height:94vh;border-radius:18px 18px 0 0}
  .modal-head{padding:16px 18px}
  .modal-body,.modal-content{padding:16px 18px}

  /* النماذج عمود واحد */
  .form-grid,.form-row{grid-template-columns:1fr!important}
  .field input,.field select,.field textarea{font-size:16px} /* يمنع تكبير iOS التلقائي */

  /* التبويبات تتمرر أفقياً */
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;white-space:nowrap}
  .tabs button{flex:0 0 auto}
}

/* ══════════ الجوال الصغير — حتى 420px ══════════ */
@media(max-width:420px){
  .stats-grid{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:1fr!important}
  .topbar-title{font-size:15px}
}

/* ── LTR / English layout overrides ─────────────────────────────── */
[dir="ltr"] .sidebar { right: auto; left: 0; border-right: 1px solid var(--border); border-left: none; }
[dir="ltr"] .main { margin-right: 0; margin-left: 240px; }
[dir="ltr"] .topbar { right: 0; left: 240px; }
[dir="ltr"] .modal { direction: ltr; text-align: left; }
[dir="ltr"] .form-grid input,
[dir="ltr"] .form-grid select,
[dir="ltr"] .form-grid textarea { text-align: left; direction: ltr; }
[dir="ltr"] table { direction: ltr; }
[dir="ltr"] .field label { text-align: left; }

/* ═══════════════════════════════════════════════════
   بطاقات KPI الموحّدة (UI/UX) — تُستخدم في كل الصفحات
   ═══════════════════════════════════════════════════ */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.kpi{
  position:relative;background:var(--white);border:1px solid var(--border);border-radius:16px;
  padding:20px;overflow:hidden;box-shadow:0 1px 2px rgba(44,43,41,.04);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
  opacity:0;transform:translateY(8px);animation:kpiIn .4s cubic-bezier(.2,.8,.2,1) forwards;
}
.kpi:hover{transform:translateY(-3px);box-shadow:0 12px 28px -12px rgba(44,43,41,.22)}
.kpi:nth-child(1){animation-delay:.02s}
.kpi:nth-child(2){animation-delay:.08s}
.kpi:nth-child(3){animation-delay:.14s}
.kpi:nth-child(4){animation-delay:.20s}
.kpi:nth-child(5){animation-delay:.26s}
.kpi:nth-child(6){animation-delay:.32s}
@keyframes kpiIn{to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.kpi{animation:none;opacity:1;transform:none}.kpi:hover{transform:none}}
.kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.kpi-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.kpi-icon svg{width:22px;height:22px;stroke-width:2;fill:none;stroke:currentColor}
.kpi-label{font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:4px}
.kpi-value{font-size:28px;font-weight:800;color:var(--dark);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.kpi-sub{font-size:11.5px;color:var(--muted);margin-top:6px}
.kpi.k-blue   .kpi-icon{background:var(--info-bg);color:var(--info-ink)}
.kpi.k-green  .kpi-icon{background:var(--ok-bg);color:var(--ok-ink)}
.kpi.k-orange .kpi-icon{background:var(--warn-bg);color:var(--warn-ink)}
.kpi.k-purple .kpi-icon{background:var(--accent-soft-p);color:var(--purple)}
.kpi.k-teal   .kpi-icon{background:var(--accent-soft-t);color:var(--teal)}
.kpi.k-red    .kpi-icon{background:var(--err-bg);color:var(--err-ink)}
.kpi::after{
  content:'';position:absolute;top:0;right:0;width:120px;height:120px;border-radius:50%;
  transform:translate(40px,-60px);opacity:.05;pointer-events:none}
.kpi.k-blue::after{background:#2C6FB5}
.kpi.k-green::after{background:#1F8A48}
.kpi.k-orange::after{background:#C0622A}
.kpi.k-purple::after{background:#7A4A9A}
.kpi.k-teal::after{background:#0F6E56}
.kpi.k-red::after{background:#A32D2D}

/* ═══════════════════════════════════════════════════════════
   مكوّنات إضافية — بنفس ترتيب نظام مسمار، بألوان Woodish
   جميعها تعمل في الوضعين تلقائياً لأنها لا تحمل لوناً ثابتاً.
═══════════════════════════════════════════════════════════ */

/* ── الشارات والوسوم ────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:2px 9px;border-radius:999px;
  font-weight:700;border:1px solid;white-space:nowrap;line-height:1.7}
.badge i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.b-ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink)}
.b-warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}
.b-err{background:var(--err-bg);border-color:var(--err-line);color:var(--err-ink)}
.b-info{background:var(--info-bg);border-color:var(--info-line);color:var(--info-ink)}
.b-mute{background:var(--neutral-bg);border-color:var(--neutral-line);color:var(--neutral-ink)}
.chip{display:inline-block;font-size:11px;font-weight:700;padding:1px 8px;border-radius:6px;
  background:var(--soft);border:1px solid var(--border);color:var(--text-2)}

/* ── شريط التقسيم (الكل / أفراد / شركات) ──────────────── */
.seg{display:inline-flex;background:var(--soft);border:1px solid var(--border);border-radius:9px;padding:3px;gap:2px}
.seg button{padding:6px 13px;border:none;border-radius:7px;font-family:'Tajawal',sans-serif;font-size:12.5px;
  font-weight:700;color:var(--text-2);background:none;cursor:pointer;transition:background .12s,color .12s}
.seg button:hover{color:var(--dark)}
.seg button.on{background:var(--white);color:var(--dark);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.seg button .n{font-size:11px;color:var(--muted);margin-inline-start:5px;font-variant-numeric:tabular-nums}
.seg button.on .n{color:var(--text-2)}

/* ── هيرو ملف العميل ───────────────────────────────── */
.chero{display:flex;gap:20px;align-items:flex-start;padding:22px;flex-wrap:wrap}
.chero .av{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;
  font-size:27px;font-weight:800;color:#fff;flex:none}
.chero h1{font-size:26px;font-weight:800;margin:0 0 7px;line-height:1.2;color:var(--dark)}
.chero .meta{display:flex;gap:8px 14px;flex-wrap:wrap;font-size:13px;color:var(--text-2);align-items:center}
.chero .meta a{text-decoration:none;color:var(--text-2)}
.chero .meta a:hover{color:var(--accent)}
.chero .acts{display:flex;gap:8px;flex-wrap:wrap;margin-inline-start:auto;align-items:flex-start}

/* ── شريط الإحصائيات تحت الهيرو ────────────────────── */
.cstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--border)}
.cstats > div{padding:14px 20px;border-inline-end:1px solid var(--border)}
.cstats > div:last-child{border-inline-end:none}
.cstats span{font-size:12px;color:var(--muted);display:block}
.cstats b{font-size:21px;font-weight:800;color:var(--dark);font-variant-numeric:tabular-nums}
.cstats small{font-size:12px;color:var(--muted);margin-inline-start:4px;font-weight:400}

/* ── شبكة ملف العميل: المحتوى + العمود الجانبي ───────── */
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;margin-top:16px;align-items:start}
@media(max-width:1000px){.cgrid{grid-template-columns:1fr}}

/* ── التبويبات داخل البطاقة ─────────────────────────── */
.ctabs{display:flex;gap:4px;padding:8px 10px;border-bottom:1px solid var(--border);overflow-x:auto}
.ctabs button{padding:8px 14px;border:none;border-radius:8px;font-family:'Tajawal',sans-serif;font-size:13.5px;
  font-weight:700;color:var(--text-2);background:none;white-space:nowrap;cursor:pointer}
.ctabs button:hover{background:var(--soft)}
.ctabs button.on{background:var(--mid);color:#fff}
.ctabs button .n{font-size:11px;opacity:.75;margin-inline-start:5px;font-variant-numeric:tabular-nums}

/* ── قائمة مفتاح/قيمة ──────────────────────────────── */
.kv{display:grid;grid-template-columns:118px minmax(0,1fr);gap:7px 14px;font-size:13.5px;margin:0}
.kv dt{color:var(--muted);font-size:12.5px;padding-top:1px}
.kv dd{margin:0;font-weight:600;color:var(--dark);overflow-wrap:anywhere}
.kv a{color:var(--accent);font-weight:700;text-decoration:none}
.kv a:hover{text-decoration:underline}

/* ── رأس بطاقة مرن ─────────────────────────────────── */
.card .hd{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--border)}
.card .hd h3{margin:0;font-size:14px;font-weight:800;color:var(--dark)}
.card .hd .sp{margin-inline-start:auto}
.card .hd .hint{font-size:11.5px;color:var(--muted);font-weight:400}
.card .bd{padding:16px 18px}

/* ── زر التبديل بين الوضعين ────────────────────────── */
.theme-toggle{display:flex;align-items:center;gap:8px;width:100%;padding:9px 20px;background:none;border:none;
  color:rgba(255,255,255,.62);font-family:'Tajawal',sans-serif;font-size:13px;font-weight:600;cursor:pointer;
  transition:background .15s,color .15s;text-align:start}
.theme-toggle:hover{background:rgba(255,255,255,.08);color:#fff}
.theme-toggle svg{width:16px;height:16px;flex:none}

/* ── الطباعة تبقى فاتحة دائماً ─────────────────────── */
@media print{
  :root, :root[data-theme="dark"]{
    --bg:#FFFFFF; --white:#FFFFFF; --soft:#F7F5F2; --field:#FFFFFF;
    --dark:#1A1A1A; --ink:#1A1A1A; --text-2:#4A4845; --muted:#6B6862;
    --border:#DCD8D1; --mid:#4A4845;
    --ok-bg:#E8F5EB; --ok-line:#B8DFC0; --ok-ink:#2A7A44;
    --warn-bg:#FEF6E8; --warn-line:#F0DCB8; --warn-ink:#8A6E4A;
    --err-bg:#FBEAEA; --err-line:#F0C0C0; --err-ink:#B03A3A;
    --info-bg:#E3EDF5; --info-line:#C9D8EC; --info-ink:#2C5F8A;
    --neutral-bg:#E8E5DF; --neutral-line:#DEDBD6; --neutral-ink:#4A4845;
    --blue:#2C5F8A; --purple:#6A4A8A; --green:#2A7A44; --orange:#C0622A; --red:#C0392B;
    --teal:#0F6E56; --accent-soft-p:#F0EAF7; --accent-soft-t:#E1F5EE;
    --btn-hover:#2C2B29;
    --sel-bg:#4A4845; --sel-ink:#FFFFFF;
    color-scheme:light;
  }
}
.stage-expired{background:var(--light,#ECEAE6);color:var(--muted)}

/* ══ عرض السعر والعقد والطباعة: عربي ومن اليمين لليسار دائماً، حتى لو النظام بالإنجليزي ══ */
#printArea[dir="rtl"], #printArea[dir="rtl"] table, #invoiceArea[dir="rtl"], #invoiceArea[dir="rtl"] table,
[dir="ltr"] .no-translate, [dir="ltr"] .no-translate table, [dir="ltr"] .no-translate .modal { direction: rtl; }
[dir="ltr"] .no-translate .modal { text-align: right; }
[dir="ltr"] .no-translate .form-grid input, [dir="ltr"] .no-translate .form-grid select, [dir="ltr"] .no-translate .form-grid textarea,
[dir="ltr"] .no-translate .field label { text-align: right; direction: rtl; }

/* زر واتساب سريع بالقوائم */
.wa-btn{color:#1E8E4E !important;border-color:#BFE3CB !important;display:inline-flex;align-items:center;gap:5px;text-decoration:none}
.wa-btn:hover{background:#E8F5EC !important}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .wa-btn{color:#5FCB8A !important;border-color:#2C5A3C !important}:root:not([data-theme="light"]) .wa-btn:hover{background:#17301F !important}}
:root[data-theme="dark"] .wa-btn{color:#5FCB8A !important;border-color:#2C5A3C !important}
:root[data-theme="dark"] .wa-btn:hover{background:#17301F !important}