/* ============================================================
   sy2 Construction System — Shared Stylesheet
   Ported from demo/index.html — RTL, Arabic-first design
   ============================================================ */
:root{
  --bg:#f4f6fa;--surface:#fff;--surface-2:#fafbfd;
  --sidebar:#0f1c2e;--sidebar-2:#16263b;--sidebar-hover:#1d3047;
  --ink:#1a2433;--ink-2:#5a6b80;--ink-3:#8a99ad;
  --line:#e4e9f0;--line-2:#eef1f6;
  --accent:#1f5fd6;--accent-soft:#eaf1fd;--accent-ink:#1c4fb0;
  --pos:#0f8a5f;--pos-soft:#e7f5ef;--neg:#c0392b;--neg-soft:#fbecea;
  --warn:#b7791f;--warn-soft:#fbf3e3;
  /* هوية الشركة الدافئة (نفس ذهبي الشعار في السايدبار) — بتتحط في اللمسات
     المميّزة (كارت رأس المال، الشرايط العلوية، عناصر البراند) بدل ما يفضل
     كل حاجة في النظام أزرق/رمادي واحد */
  --brand:#b8842a;--brand-soft:#fbf1de;--brand-ink:#8a631d;
  --info:#0891b2;--info-soft:#e0f7fa;--info-ink:#066e87;
  --purple:#7c3aed;--purple-soft:#f2ecfe;--purple-ink:#5b21b6;
  --radius:8px;
  --shadow-sm:0 1px 2px rgba(16,30,54,.06);
  --shadow:0 4px 16px rgba(16,30,54,.08);
  --shadow-lg:0 12px 40px rgba(16,30,54,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Tajawal',system-ui,sans-serif;background:var(--bg);color:var(--ink);
  display:flex;min-height:100vh;font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
svg{display:block}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#c9d2de;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#b3bdcc}
::-webkit-scrollbar-track{background:transparent}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---- Sidebar ---- */
.sidebar{width:252px;background:var(--sidebar);color:#cdd6e2;position:fixed;inset-block:0;inset-inline-start:0;
  display:flex;flex-direction:column;z-index:40;border-inline-end:1px solid #0a1422;transition:width .2s ease;}
body.sidebar-collapsed .sidebar { width: 72px; }
.brand{display:flex;align-items:center;gap:12px;padding:18px;border-bottom:1px solid rgba(255,255,255,.07);overflow:hidden;white-space:nowrap}
.brand .logo{width:42px;height:42px;border-radius:9px;flex-shrink:0;background:linear-gradient(145deg,#c9962f,#a8761c);
  display:grid;place-items:center;color:#fff;box-shadow:0 4px 12px rgba(168,118,28,.35)}
.brand h1{font-size:13.5px;font-weight:700;color:#fff;line-height:1.35;transition:opacity .2s}
.brand p{font-size:11px;color:#7d8ca3;font-weight:500;margin-top:1px;transition:opacity .2s}
body.sidebar-collapsed .brand h1, body.sidebar-collapsed .brand p { opacity:0; pointer-events:none; }
.nav{flex:1;overflow-y:auto;padding:14px 12px;overflow-x:hidden}
.nav-label{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:#5e6f87;padding:14px 12px 7px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.sidebar-collapsed .nav-label { opacity: 0; height: 10px; padding:0; margin:0; }
.nav-item{display:flex;align-items:center;gap:12px;padding:9.5px 12px;border-radius:7px;cursor:pointer;
  color:#aeb9c9;font-weight:500;font-size:13.5px;transition:background .14s,color .14s;margin-bottom:1px;white-space:nowrap;overflow:hidden}
.nav-item:hover{background:var(--sidebar-hover);color:#fff}
.nav-item.active{background:var(--accent);color:#fff;font-weight:600;box-shadow:0 4px 12px rgba(31,95,214,.3);
  border-inline-start:3px solid var(--brand);padding-inline-start:9px}
.nav-item svg{width:18px;height:18px;flex-shrink:0;opacity:.92;color:var(--ic, currentColor)}
.nav-item.active svg { color: #fff; opacity: 1; }
body.sidebar-collapsed .nav-item span { opacity:0; pointer-events:none; }
.sb-foot{padding:14px 16px;border-top:1px solid rgba(255,255,255,.07);font-size:11px;color:#6c7c93;white-space:nowrap;overflow:hidden;transition:opacity .2s}
body.sidebar-collapsed .sb-foot { opacity:0; }

/* ---- Main content ---- */
.main{margin-inline-start:252px;flex:1;min-width:0;display:flex;flex-direction:column;transition:margin-inline-start .2s ease;}
body.sidebar-collapsed .main { margin-inline-start: 72px; }
.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);padding:0 28px;height:64px;display:flex;align-items:center;gap:16px}
.topbar h2{font-size:17px;font-weight:700;letter-spacing:-.01em}
.topbar .right{margin-inline-start:auto;display:flex;align-items:center;gap:12px}
.topbar-search{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:8px;padding:7px 12px;margin-inline-start:22px;flex:1;max-width:360px;transition:.14s}
.topbar-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.topbar-search svg{width:15px;height:15px;color:var(--ink-3);flex-shrink:0}
.topbar-search input{border:none;background:none;outline:none;font-family:inherit;font-size:13px;width:100%;color:var(--ink)}
.topbar-search input::placeholder{color:var(--ink-3)}
@media(max-width:900px){.topbar-search{display:none}}
.user{display:flex;align-items:center;gap:10px;padding-inline-start:12px;border-inline-start:1px solid var(--line)}
.user .av{width:34px;height:34px;border-radius:8px;background:linear-gradient(145deg,#334a63,#1f2f43);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:13px}
.user .nm{font-size:13px;font-weight:700;line-height:1.2}
.user .rl{font-size:11px;color:var(--ink-3)}

/* ---- Page container ---- */
.page-wrap{padding:26px 28px 60px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:14px}
.page-head h3{font-size:21px;font-weight:700;letter-spacing:-.02em}
.page-head p{font-size:13px;color:var(--ink-2);margin-top:3px}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#fff;border:1px solid var(--accent);
  border-radius:7px;padding:9px 16px;font-family:inherit;font-weight:600;font-size:13px;cursor:pointer;transition:.14s;box-shadow:var(--shadow-sm)}
.btn:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn svg{width:16px;height:16px}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--surface-2);border-color:#cfd8e3}
.btn.pos{background:var(--pos);border-color:var(--pos)}.btn.pos:hover{filter:brightness(.94)}
.btn.warn{background:var(--warn);border-color:var(--warn)}.btn.warn:hover{filter:brightness(.94)}
.btn.danger{background:var(--neg);border-color:var(--neg);color:#fff}.btn.danger:hover{filter:brightness(.94)}
.btn.sm{padding:6px 11px;font-size:12px}
.btn-row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}

/* ---- Grid & Cards ---- */
.grid{display:grid;gap:16px}
.cols-6{grid-template-columns:repeat(6,1fr)}
.cols-5{grid-template-columns:repeat(5,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1100px){
  .cols-6{grid-template-columns:repeat(3,1fr)}
  .cols-5{grid-template-columns:repeat(3,1fr)}
  .cols-4{grid-template-columns:repeat(2,1fr)}
  .cols-3{grid-template-columns:repeat(2,1fr)}
  .cols-2{grid-template-columns:1fr}
}
@media(max-width:768px){
  .cols-6{grid-template-columns:repeat(2,1fr)}
  .cols-5{grid-template-columns:repeat(2,1fr)}
}

/* رأس مال المقاولات — تفصيل مضغوط 2×2 جوّه كارت الإحصائية نفسه */
.cap-breakdown{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line-2)}
.cap-breakdown div{display:flex;justify-content:space-between;gap:6px;font-size:10.5px;color:var(--ink-3);font-weight:500}
.cap-breakdown b{font-weight:700;color:var(--ink);white-space:nowrap}

/* ---- Vivid stat cards (لوحة التحكم فقط) — كروت متدرّجة ملوّنة بروح "المركز
   المالي الشامل" (نظام 1)، بدل الكارت الأبيض الهادي، عشان تدي اللوحة الرئيسية
   حيوية أكتر. مكوّن منفصل عن .stat العادي (مستخدم في 12+ صفحة تانية) عشان
   ميأثرش على حاجة تانية غير الداشبورد. ---- */
.vstat{border-radius:14px;padding:19px 21px;color:#fff;position:relative;overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:3px;transition:.16s}
.vstat::after{content:'';position:absolute;top:-46px;inset-inline-end:-46px;width:150px;height:150px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);pointer-events:none}
.vstat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.vstat .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;position:relative;z-index:1}
.vstat .label{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.88)}
.vstat .ic{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.16);display:grid;place-items:center;color:#fff;flex-shrink:0}
.vstat .ic svg{width:19px;height:19px}
.vstat .val{font-size:25px;font-weight:800;letter-spacing:-.02em;color:#fff;position:relative;z-index:1}
.vstat .val small{font-size:12px;font-weight:600;color:rgba(255,255,255,.78)}
.vstat .note{font-size:11.5px;color:rgba(255,255,255,.78);font-weight:500;margin-top:2px;position:relative;z-index:1}
.vstat .cap-breakdown{border-top-color:rgba(255,255,255,.22);position:relative;z-index:1}
.vstat .cap-breakdown div{color:rgba(255,255,255,.78)}
.vstat .cap-breakdown b{color:#fff}
.vstat-navy{background:linear-gradient(135deg,#22314a 0%,#0a1220 100%)}
.vstat-blue{background:linear-gradient(135deg,#3b7cf5 0%,#1c4fb0 100%)}
.vstat-teal{background:linear-gradient(135deg,#17b3d9 0%,#066e87 100%)}
.vstat-green{background:linear-gradient(135deg,#16b87e 0%,#0b6b49 100%)}
.vstat-red{background:linear-gradient(135deg,#e5573f 0%,#a8291c 100%)}
.vstat-amber{background:linear-gradient(135deg,#e8a93c 0%,#a8721c 100%)}

/* ---- Dashboard 2-col layout: main content + side panel (روابط سريعة + آخر الحركات) ---- */
.dash-layout{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
@media(max-width:1080px){.dash-layout{grid-template-columns:1fr}}
.qlinks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qlink{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;padding:13px 8px;
  border-radius:10px;border:1px solid var(--line);background:var(--surface-2);transition:.14s;text-decoration:none;color:var(--ink)}
.qlink:hover{background:var(--surface);border-color:#d4ddea;transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.qlink .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center}
.qlink .ic svg{width:17px;height:17px}
.qlink .lbl{font-size:11.5px;font-weight:600;line-height:1.3}
.feed-compact .tx{padding:11px 16px}
.feed-compact .tx-ic{width:36px;height:36px}
.feed-compact .tx-main .t{font-size:12.5px}
.feed-compact .tx-amt{font-size:13px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.card-pad{padding:20px}
.stat{padding:18px 20px;display:flex;flex-direction:column;gap:3px;position:relative;overflow:hidden}
.stat::before{content:'';position:absolute;top:0;inset-inline-start:0;inset-inline-end:0;height:3px;background:var(--line)}
.stat.stat-blue::before{background:var(--accent)}
.stat.stat-green::before{background:var(--pos)}
.stat.stat-red::before{background:var(--neg)}
.stat.stat-amber::before{background:var(--warn)}
.stat.stat-gold::before{background:linear-gradient(90deg,#c9962f,#a8761c)}
.stat.stat-teal::before{background:var(--info)}
.stat.stat-purple::before{background:var(--purple)}
.stat .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.stat .label{font-size:12.5px;color:var(--ink-2);font-weight:600}
.stat .ic{width:36px;height:36px;border-radius:9px;display:grid;place-items:center}
.stat .ic svg{width:19px;height:19px}
.stat .val{font-size:24px;font-weight:700;letter-spacing:-.02em}
.stat .val small{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.stat .note{font-size:11.5px;color:var(--ink-3);font-weight:500;margin-top:2px}
.ic-blue{background:var(--accent-soft);color:var(--accent)}
.ic-green{background:var(--pos-soft);color:var(--pos)}
.ic-amber{background:var(--warn-soft);color:var(--warn)}
.ic-red{background:var(--neg-soft);color:var(--neg)}
.ic-gold{background:var(--brand-soft);color:var(--brand-ink)}
.ic-teal{background:var(--info-soft);color:var(--info-ink)}
.ic-purple{background:var(--purple-soft);color:var(--purple-ink)}

/* ---- Section label ---- */
.section-label{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--ink-2);text-transform:uppercase;
  margin:26px 0 13px;display:flex;align-items:center;gap:8px}
.section-label svg{width:15px;height:15px;flex-shrink:0}

/* ---- Tables ---- */
.table-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.table-top{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:8px}
.table-top h4{font-size:14.5px;font-weight:700}
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead th{background:var(--surface-2);color:var(--ink-2);font-weight:600;font-size:11.5px;text-align:right;
  padding:11px 16px;letter-spacing:.02em;white-space:nowrap;border-bottom:1px solid var(--line);text-transform:uppercase}
tbody td{padding:12px 16px;font-size:13.5px;border-bottom:1px solid var(--line-2);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-2)}
td.num{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
tfoot td{padding:14px 16px;font-size:13.5px;border-top:2px solid var(--line);background:var(--surface-2);font-weight:700}
.muted{color:var(--ink-3);font-size:12px}
.row-click{cursor:pointer}

/* ---- Tags ---- */
.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:5px;font-size:11.5px;font-weight:600;white-space:nowrap;border:1px solid transparent}
.tag.green{background:var(--pos-soft);color:var(--pos);border-color:#cbe9da}
.tag.amber{background:var(--warn-soft);color:var(--warn);border-color:#f0e2c2}
.tag.red{background:var(--neg-soft);color:var(--neg);border-color:#f3d4cf}
.tag.blue{background:var(--accent-soft);color:var(--accent-ink);border-color:#cfe0fa}
.tag.gold{background:var(--brand-soft);color:var(--brand-ink);border-color:#f0dfb8}
.tag.teal{background:var(--info-soft);color:var(--info-ink);border-color:#bfeaf1}
.tag.purple{background:var(--purple-soft);color:var(--purple-ink);border-color:#e0d1fb}
.tag.gray{background:#eef1f6;color:var(--ink-2);border-color:#e0e6ee}
.tag .dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* ---- Inline quick status select (looks like a .tag but is an editable dropdown) ---- */
.status-quick-form{display:inline-block}
.status-quick-select{appearance:none;-webkit-appearance:none;cursor:pointer;display:inline-flex;align-items:center;padding:3px 24px 3px 10px;border-radius:5px;font-size:11.5px;font-weight:600;white-space:nowrap;border:1px solid transparent;font-family:inherit;background-repeat:no-repeat;background-position:left 8px center;background-size:9px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}
.status-quick-select.tag-pending{background-color:#eef1f6;color:var(--ink-2);border-color:#e0e6ee}
.status-quick-select.tag-active{background-color:var(--accent-soft);color:var(--accent-ink);border-color:#cfe0fa}
.status-quick-select.tag-done{background-color:var(--pos-soft);color:var(--pos);border-color:#cbe9da}

/* ---- Progress bar ---- */
.bar-track{height:6px;border-radius:6px;background:#eef1f6;overflow:hidden;min-width:80px;flex:1}
.bar-fill{height:100%;border-radius:6px;background:var(--accent)}
.bar-fill.full{background:var(--pos)}

/* ---- Forms ---- */
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:28px;box-shadow:var(--shadow-sm);max-width:680px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px;color:var(--ink-2)}
.field input,.field select,.field textarea{
  width:100%;background:var(--surface);border:1.5px solid var(--line);border-radius:7px;
  padding:10px 13px;color:var(--ink);font-family:inherit;font-size:13.5px;transition:.14s}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px}
.row4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:13px}
@media(max-width:720px){.row3,.row4{grid-template-columns:1fr 1fr}}

/* ---- Material batch entry: band groups + item rows ---- */
.band-group{border:1.5px solid var(--line);border-radius:10px;padding:18px;margin-bottom:16px;background:var(--surface)}
.band-group-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.band-group-head .lbl{font-size:12.5px;font-weight:700;color:var(--ink-2)}

/* ── عرض السعر: كارت البند برأس منظم وصفوف أصناف محاذية ── */
.band-card{border:1.5px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px;background:var(--surface-2)}
.band-card-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;flex-wrap:wrap}
.band-card-head label{font-size:11px;color:var(--ink-3);font-weight:600;margin-bottom:4px;display:block}
.band-card-head input{width:100%}
.band-card .items-header-row{margin-top:4px}

/* ── تقدير التكلفة: أداة الشقة الجديدة + تحليل الوحدة ── */
.est-tool{background:linear-gradient(135deg,var(--accent-soft),#f0f9ff);border:2px solid var(--accent);border-radius:14px;padding:16px 20px;margin-bottom:18px}
.est-tool-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.est-tool-head>svg{width:34px;height:34px;color:var(--accent);flex-shrink:0}
.est-tool-title{font-size:16px;font-weight:800;color:var(--accent-ink)}
.est-tool-sub{font-size:12px;color:var(--ink-2)}
.est-tool-input{margin-inline-start:auto}
.est-tool-input label{display:block;font-size:11px;font-weight:700;color:var(--accent-ink);margin-bottom:4px}
.est-tool-input input{width:150px;font-size:18px;font-weight:800;text-align:center;padding:8px;border:2px solid var(--accent);border-radius:10px;background:#fff;color:var(--accent-ink)}
.est-tool-result{text-align:center;padding-inline-start:16px;border-inline-start:2px solid var(--accent)}
.est-tool-result .l{font-size:11px;color:var(--accent-ink);font-weight:600}
.est-tool-result .v{font-size:22px;font-weight:900;color:var(--accent);line-height:1.2}

.est-band-head{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.est-band-title{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.est-band-costs{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.est-band-costs .ebc{text-align:center}
.est-band-costs .ebc .l{display:block;font-size:10.5px;color:var(--ink-3);margin-bottom:2px}
.est-band-costs .ebc .v{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.est-band-costs .ebc-total{padding-inline-start:14px;border-inline-start:1px solid var(--line)}
.est-band-costs .ebc-total .v{font-size:16px}

.est-unit-bar{display:flex;gap:12px;flex-wrap:wrap;padding:14px 18px;background:var(--accent-soft);border-bottom:1px solid var(--line)}
.est-unit-bar .euc{flex:1;min-width:120px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;text-align:center}
.est-unit-bar .euc-lbl{font-size:11px;color:var(--ink-2);margin-bottom:4px;font-weight:600}
.est-unit-bar .euc-val{font-size:17px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.est-unit-bar .euc-accent{border-color:var(--accent);background:var(--accent-soft)}
.est-unit-bar .euc-accent .euc-val{color:var(--accent-ink)}
.est-unit-bar .euc-proj{border:2px dashed var(--pos);background:var(--pos-soft,#e9f9f2)}
.est-unit-bar .euc-proj .euc-val{color:var(--pos)}

.est-sec-lbl{padding:8px 18px 4px;font-size:12px;font-weight:600;border-top:1px solid var(--line);display:flex;align-items:center;gap:5px}
.est-sec-lbl svg{width:13px;height:13px}
@media(max-width:640px){.est-tool-input,.est-tool-result{margin-inline-start:0}.est-band-costs{gap:12px}}
.item-row{border:1px solid var(--line-2);border-radius:7px;padding:12px;margin-bottom:10px;background:var(--surface-2)}
.item-row-top{display:flex;gap:10px;align-items:flex-end;margin-bottom:10px}
.item-row-top .field{flex:1;margin-bottom:0}
.item-row-top button{flex-shrink:0}

/* ---- Alert flash messages ---- */
.flash{padding:12px 18px;border-radius:8px;font-size:13.5px;font-weight:500;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.flash.success{background:var(--pos-soft);color:var(--pos);border:1px solid #cbe9da}
.flash.error{background:var(--neg-soft);color:var(--neg);border:1px solid #f3d4cf}
.flash.warning{background:var(--warn-soft);color:var(--warn);border:1px solid #f0e2c2}

/* ---- Transactions feed ---- */
.feed{display:flex;flex-direction:column}
.tx{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line-2)}
.tx:last-child{border-bottom:none}
.tx:hover{background:var(--surface-2)}
.tx-ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex-shrink:0}
.tx-ic svg{width:19px;height:19px}
.tx-main{flex:1;min-width:0}
.tx-main .t{font-weight:600;font-size:13.5px}
.tx-main .s{font-size:11.5px;color:var(--ink-3);margin-top:3px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.tx-amt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:14.5px}
.tx.in .tx-ic{background:var(--pos-soft);color:var(--pos)}
.tx.in .tx-amt{color:var(--pos)}
.tx.out .tx-ic{background:var(--neg-soft);color:var(--neg)}
.tx.out .tx-amt{color:var(--neg)}

/* ---- Supplier cards ---- */
.sup-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.sup{padding:18px 20px}
.sup .h{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.sup .av{width:44px;height:44px;border-radius:11px;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-weight:700;font-size:17px;flex-shrink:0}
.sup .nm{font-weight:700;font-size:15px}
.sup .ph{font-size:12px;color:var(--ink-3)}

/* ---- Project cards ---- */
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;transition:.16s;box-shadow:var(--shadow-sm)}
.pcard:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:#d4ddea}
.pcard .pc-band{height:5px;background:var(--accent)}
.pcard.is-done .pc-band{background:var(--pos)}
.pcard .pc-body{padding:10px 12px}
.pcard .pc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:10px}
.pcard .pc-name{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.pcard .pc-client{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.pcard .pc-addr{font-size:11.5px;color:var(--ink-3);margin-top:7px;display:flex;align-items:center;gap:5px}
.pcard .pc-addr svg{width:13px;height:13px;flex-shrink:0;opacity:.7}
.pcard .pc-prog{display:flex;align-items:center;gap:8px;margin:10px 0}
.pcard .pc-prog .pct{font-weight:700;font-size:12px;font-variant-numeric:tabular-nums;min-width:32px;text-align:left}
.pcard .pc-fin{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding-top:10px;border-top:1px solid var(--line-2)}
.pcard .pc-fin>div{min-width:0}
.pcard .pc-fin .l{font-size:10px;color:var(--ink-3);font-weight:500;line-height:1.2;margin-bottom:3px;}
.pcard .pc-fin .v{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;}

/* ---- Quote cards ---- */
.qcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.qcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;box-shadow:var(--shadow-sm);transition:.16s}
.qcard:hover{box-shadow:var(--shadow)}
.qcard.approved{border-color:#cbe9da}
.qcard .qref{font-size:11px;font-weight:700;color:var(--ink-3);letter-spacing:.05em;margin-bottom:3px}
.qcard .qname{font-size:16px;font-weight:700}
.qcard .qaddr{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-3);margin-top:7px}
.qcard .qaddr svg{width:13px;height:13px;flex-shrink:0;opacity:.7}
.qnote{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--warn);margin-top:7px;font-weight:600}
.qnote svg{width:16px;height:16px;flex-shrink:0}
.qcard .qbands{margin:14px 0}
.qcard .qband{display:flex;justify-content:space-between;font-size:12.5px;padding:7px 0;border-bottom:1px solid var(--line-2)}
.qcard .qband:last-child{border-bottom:none}
.qcard .qband .n{color:var(--ink-2)}
.qcard .qband .v{font-weight:600;font-variant-numeric:tabular-nums}
.qcard .qtot{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--line-2)}
.qcard .qtot .v{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent)}
.qcard .qfooter{display:flex;align-items:center;justify-content:flex-start;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--line-2);flex-wrap:wrap;gap:8px}

/* ---- Treasury card ---- */
.treasury{background:linear-gradient(135deg,#13233a,#0f1c2e);color:#fff;border-radius:12px;padding:22px 24px;
  position:relative;overflow:hidden;box-shadow:var(--shadow)}
.treasury::after{content:'';position:absolute;inset-inline-start:-30px;top:-30px;width:160px;height:160px;
  border-radius:50%;background:radial-gradient(circle,rgba(201,150,47,.22),transparent 70%)}
.treasury .tz-top{display:flex;align-items:center;gap:11px;margin-bottom:14px;position:relative;z-index:1}
.treasury .tz-ic{width:42px;height:42px;border-radius:11px;background:linear-gradient(145deg,#c9962f,#a8761c);
  display:grid;place-items:center;box-shadow:0 4px 12px rgba(168,118,28,.4)}
.treasury .tz-ic svg{width:21px;height:21px;color:#fff}
.treasury .tz-ttl{font-size:13px;font-weight:600;color:#aebacb}
.treasury .tz-sub{font-size:11px;color:#7d8ca3;margin-top:1px}
.treasury .tz-bal{font-size:32px;font-weight:700;letter-spacing:-.02em;position:relative;z-index:1;font-variant-numeric:tabular-nums}
.treasury .tz-bal small{font-size:15px;font-weight:600;color:#aebacb}
.treasury .tz-row{display:flex;gap:22px;margin-top:16px;padding-top:15px;border-top:1px solid rgba(255,255,255,.1);
  position:relative;z-index:1;flex-wrap:wrap}
.treasury .tz-row .l{font-size:11px;color:#7d8ca3}
.treasury .tz-row .v{font-size:15px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}
.treasury .tz-row .v.in{color:#4ade80}
.treasury .tz-row .v.out{color:#fb9b8f}

/* ---- KV pairs (detail rows) ---- */
.kv{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:13.5px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--ink-2);flex:1;min-width:0}
.kv .v{font-weight:600;white-space:nowrap;flex-shrink:0;direction:ltr;text-align:left}

/* ---- Empty state ---- */
.empty-state{text-align:center;padding:50px 20px;color:var(--ink-3)}
.empty-state svg{width:40px;height:40px;opacity:.4;margin:0 auto 12px}
.empty-state h4{font-size:16px;font-weight:600;margin-bottom:6px;color:var(--ink-2)}
.empty-state p{font-size:13px}

/* ---- Tabs ---- */
.tabs{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:4px;gap:3px;margin-bottom:20px}
.tab{padding:8px 18px;border-radius:6px;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;
  transition:.14s;border:none;background:none;font-family:inherit;display:flex;align-items:center;gap:7px}
.tab:hover{color:var(--ink)}
.tab.active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-sm)}
.tab .cnt{font-size:11px;font-weight:700;background:var(--line);color:var(--ink-2);border-radius:20px;padding:1px 7px;min-width:18px;text-align:center}
.tab.active .cnt{background:var(--accent-soft);color:var(--accent)}

/* ---- Filter bar (list-screen filters: project/status/direction selects) ---- */
.filter-bar{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin-bottom:20px;box-shadow:var(--shadow-sm)}
.f-field{display:flex;flex-direction:column;gap:7px;min-width:190px}
.f-field label{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.04em}
.f-field label svg{width:13px;height:13px;opacity:.75}
.f-select-wrap{position:relative}
.f-select-wrap .chev{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);
  width:13px;height:13px;color:var(--ink-3);pointer-events:none}
.f-select, .f-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:100%;background:var(--surface-2);
  border:1.5px solid var(--line);border-radius:7px;padding:10px 13px;padding-inline-end:34px;
  color:var(--ink);font-family:inherit;font-size:13px;font-weight:600;transition:.14s;min-width:180px}
.f-select {cursor:pointer;}
.f-input {cursor:text; padding-inline-end:13px;}
.f-select:hover, .f-input:hover{border-color:#cfd8e3;background:var(--surface)}
.f-select:focus, .f-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--surface)}
.filter-bar .f-actions{display:flex;align-items:center;margin-inline-start:auto}
@media(max-width:640px){.filter-bar{flex-direction:column;align-items:stretch}.filter-bar .f-actions{margin-inline-start:0}}

/* ---- Modal ---- */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,35,.55);z-index:200;
  align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal-box{background:var(--surface);border-radius:12px;box-shadow:var(--shadow-lg);max-width:640px;width:100%;max-height:85vh;overflow-y:auto}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-head h4{font-size:15.5px;font-weight:700}
.modal-body{padding:20px}

/* ---- Login page ---- */
.login-wrap{min-height:100vh;width:100%;display:grid;place-items:center;background:var(--sidebar);padding:20px}
.login-card{background:var(--surface);border-radius:14px;padding:36px;width:100%;max-width:400px;box-shadow:var(--shadow-lg)}
.login-logo{width:54px;height:54px;border-radius:12px;background:linear-gradient(145deg,#c9962f,#a8761c);
  display:grid;place-items:center;color:#fff;margin:0 auto 20px;box-shadow:0 6px 20px rgba(168,118,28,.4)}
.login-logo svg{width:26px;height:26px}
.login-card h2{text-align:center;font-size:20px;font-weight:700;margin-bottom:4px}
.login-card .sub{text-align:center;font-size:13px;color:var(--ink-3);margin-bottom:28px}

/* ---- Client statement (كشف حساب) ---- */
.statement{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;max-width:900px;margin:0 auto;box-shadow:var(--shadow)}
.st-head{padding:26px 34px;border-bottom:3px solid var(--sidebar);display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.st-head .logo{width:48px;height:48px;border-radius:9px;background:linear-gradient(145deg,#c9962f,#a8761c);display:grid;place-items:center;color:#fff;margin-bottom:12px}
.st-head .logo svg{width:24px;height:24px}
.st-head .co h2{font-size:18px;font-weight:700;color:var(--sidebar)}.st-head .co p{font-size:12px;color:var(--ink-2);margin-top:3px}
.st-head .meta{text-align:left;font-size:12.5px;color:var(--ink-2);line-height:1.9}.st-head .meta b{color:var(--ink);font-size:15px}
.st-body{padding:24px 34px}
.st-client{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:20px}
.st-client .l{font-size:11px;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.st-client .b{font-size:14.5px;font-weight:700;color:var(--ink);margin-top:2px}
.st-summary{display:flex;gap:14px;margin-bottom:22px}
.st-box{flex:1;border:1px solid var(--line);border-radius:8px;padding:14px 16px}
.st-box .l{font-size:11.5px;color:var(--ink-2);font-weight:600;margin-bottom:5px}
.st-box .v{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.st-box.tot{background:var(--surface-2)}.st-box.paid .v{color:var(--pos)}
.st-box.due{background:var(--neg-soft);border-color:#f3d4cf}.st-box.due .v{color:var(--neg)}
.st-sec{font-size:12.5px;font-weight:700;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em;margin:22px 0 10px}
.st-table{width:100%;border-collapse:collapse;margin-bottom:8px}
.st-table th{background:var(--sidebar);color:#fff;padding:9px 13px;font-size:11.5px;text-align:right;font-weight:600}
.st-table td{padding:8px 13px;border-bottom:1px solid var(--line-2);font-size:12.5px;font-variant-numeric:tabular-nums}
.st-table .grp td{background:var(--accent-soft);font-weight:700;color:var(--accent-ink);font-size:12.5px}
.st-table .grp td .bt{float:left;font-weight:700}
.st-table .sub td{font-weight:700;background:var(--surface-2)}
.st-plan td{padding:9px 13px;border-bottom:1px solid var(--line-2);font-size:12.5px;font-variant-numeric:tabular-nums}
.st-plan th{background:var(--surface-2);color:var(--ink-2);padding:9px 13px;font-size:11px;text-align:right;font-weight:600;border-bottom:1px solid var(--line)}
.st-final{display:flex;justify-content:flex-end;margin-top:30px}
.st-final-blocks{display:flex;flex-direction:column;gap:16px;min-width:360px}
.st-final table{border-collapse:separate;border-spacing:0;width:100%;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.03)}
.st-final td{padding:14px 20px;font-size:14px;font-variant-numeric:tabular-nums;border-bottom:1px solid #f1f5f9}
.st-final tr:last-child td{border-bottom:none}
.st-final tr.big td{background:var(--sidebar);color:#fff;font-weight:700;font-size:15.5px}
.st-foot{padding:16px 34px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3)}

/* Profit modal print header — hidden on screen */
.profit-print-head{display:none}

/* ---- Print ---- */
@media print{
  @page{size:A4;margin:9mm}
  .sidebar,.topbar,.no-print,.modal-overlay{display:none!important}
  .main{margin:0}
  body{background:#fff;font-size:11px}
  .page-wrap{padding:0}

  /* Printing the profit modal (كارت الربح المتحقق): hide the rest of the
     project page and lay the modal out as a normal full-width printed block */
  body.printing-profit .page-wrap>*:not(.modal-overlay){display:none!important}
  body.printing-profit .modal-overlay{display:none!important}
  body.printing-profit #profit-modal{display:block!important;position:static!important;background:none!important;padding:0!important}
  body.printing-profit #profit-modal .modal-box{box-shadow:none!important;border:none!important;max-width:100%!important;max-height:none!important;overflow:visible!important;border-radius:0!important}
  body.printing-profit .modal-head{display:none!important}
  body.printing-profit .profit-print-head{display:flex!important;justify-content:space-between;align-items:flex-start;padding:0 0 16px;margin-bottom:16px;border-bottom:3px solid #1e293b}
  body.printing-profit .pph-co h2{font-size:18px;font-weight:700;color:#1e293b;margin:0}
  body.printing-profit .pph-co p{font-size:11px;color:#555;margin:4px 0 0}
  body.printing-profit .pph-meta{text-align:left;font-size:11.5px;color:#555;line-height:1.8}
  body.printing-profit .pph-meta b{color:#1e293b;font-size:14px;display:block;margin-bottom:2px}
  body.printing-profit .modal-body{padding:20px 0!important}
  body.printing-profit .table-scroll{overflow:visible!important}
  body.printing-profit .modal-body table{width:100%;border-collapse:collapse}
  body.printing-profit .modal-body thead tr{background:#1e293b!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.printing-profit .modal-body thead th{background:#1e293b!important;color:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;padding:10px 14px;font-size:11.5px;font-weight:600;text-align:right}
  body.printing-profit .modal-body tbody td{padding:9px 14px;border-bottom:1px solid #e2e8f0;font-size:12px;font-variant-numeric:tabular-nums}
  body.printing-profit .modal-body tfoot td{padding:9px 14px;font-size:12px;font-variant-numeric:tabular-nums}
  body.printing-profit .modal-body tfoot tr:last-child{border-top:2px solid #333}
  body.printing-profit .modal-body tfoot tr:last-child td{padding-top:12px;padding-bottom:12px;font-size:13px}
  body.printing-profit .btn-row{display:none!important}

  body.printing-materials .page-head { display:none!important; }
  body.printing-materials .tabs { display:none!important; }
  body.printing-materials .tab-panel { display:none!important; }
  body.printing-materials .tab-panel[data-panel="materials"] { display:block!important; }

  /* Compact the printed document (كشف حساب / عرض سعر) so it fits as few pages as possible */
  .statement{box-shadow:none;border:none;max-width:100%}
  .st-head{padding:10px 16px}
  .st-head .logo{width:32px;height:32px;margin-bottom:6px}
  .st-head .logo svg{width:18px;height:18px}
  .st-head .co h2{font-size:14px}
  .st-head .co p{font-size:9px;margin-top:1px}
  .st-head .meta{font-size:10.5px;line-height:1.6}
  .st-head .meta b{font-size:12.5px}
  .st-body{padding:10px 16px}
  .st-client{gap:10px;padding-bottom:8px;margin-bottom:10px}
  .st-client .l{font-size:9px}
  .st-client .b{font-size:12px;margin-top:1px}
  .st-summary{gap:8px;margin-bottom:12px}
  .st-box{padding:8px 10px}
  .st-box .l{font-size:9.5px;margin-bottom:2px}
  .st-box .v{font-size:14px}
  .st-sec{margin:12px 0 6px;font-size:10.5px}
  .st-table th{padding:5px 9px;font-size:9.5px}
  .st-table td{padding:4px 9px;font-size:10px}
  .st-table .grp td{font-size:10px;padding:5px 9px}
  .st-final{margin-top:10px}
  .st-final table{min-width:0}
  .st-final td{padding:4px 14px;font-size:11px}
  .st-final tr.big td{font-size:12px}
  .st-foot{padding:8px 16px;font-size:9px}
  .qnote{font-size:10px}
}

/* ============================================================
   Construction loading overlay — يظهر لحد ما أي صفحة تتحمّل أو
   فورم يتبعت، بتصميم كرين وبناء بيتشيّد بروح هوية السيستم.
   ============================================================ */
.constr-loader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:rgba(15,28,46,.32);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .16s ease}
.constr-loader.show{opacity:1;pointer-events:all}
.constr-loader .cl-box{background:var(--surface);border-radius:14px;padding:22px 30px 18px;box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;align-items:center;gap:2px;min-width:168px}
.constr-loader .cl-text{margin-top:8px;font-size:12.5px;font-weight:700;color:var(--ink-2);letter-spacing:-.01em}
.constr-loader .cl-dots::after{content:'';display:inline-block;width:1.1em;text-align:right;animation:clDots 1.2s steps(4) infinite}
@keyframes clDots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}100%{content:''}}

/* كرين ثابت — الخطاف بينزل ويشيل بلوكة ويرفعها فوق البناية */
.constr-loader .cl-hook{animation:clHook 1.8s ease-in-out infinite}
@keyframes clHook{
  0%{transform:translateY(0)}
  45%{transform:translateY(20px)}
  55%{transform:translateY(20px)}
  100%{transform:translateY(0)}
}

/* البناية بتترفع طوبة طوبة — كل عمود بيكبر ويصغر بتتابع بسيط */
.constr-loader .cl-bar{transform-origin:bottom center;animation:clRise 1.8s ease-in-out infinite}
.constr-loader .cl-bar1{animation-delay:0s}
.constr-loader .cl-bar2{animation-delay:.18s}
.constr-loader .cl-bar3{animation-delay:.36s}
@keyframes clRise{
  0%{transform:scaleY(.35);opacity:.55}
  50%{transform:scaleY(1);opacity:1}
  100%{transform:scaleY(.35);opacity:.55}
}

@media (prefers-reduced-motion: reduce){
  .constr-loader .cl-hook,.constr-loader .cl-bar{animation:none}
  .constr-loader .cl-dots::after{animation:none;content:'...'}
}

/* ============================================================
   UI REFRESH LAYER — تجديد بصري ملوّن وأسهل في الاستخدام.
   طبقة واحدة في آخر الملف، بتاخد أولوية على القواعد فوق عشان
   تدّي النظام روح ألوان أوضح وتباين أعلى من غير تعديل أي view.
   لو حبينا نرجّع الشكل القديم نشيل البلوك ده بس.
   ============================================================ */
:root{
  /* خلفية أهدى وأدفى شوية + أزرق أساسي أنضر وأوضح */
  --bg:#eef2f9;
  --accent:#2563eb;--accent-soft:#e5edff;--accent-ink:#1d4ed8;
  --pos:#12936a;--pos-soft:#e3f6ee;--neg:#d63b2c;--neg-soft:#fdeae7;
  --warn:#c9821a;--warn-soft:#fdf1dd;
  /* درجات مساعدة للتدرّجات الملوّنة في الكروت */
  --accent-2:#3b82f6;--pos-2:#22b583;--neg-2:#ef5a4a;--warn-2:#e6a52e;
  --purple-2:#8b5cf6;--info-2:#14b8d4;--brand-2:#d4a13d;
}

/* ---- خلفية الصفحة: لمسة تدرّج ناعمة بدل اللون المسطّح ---- */
body{background:linear-gradient(180deg,#eef2f9 0%,#e9eef7 100%)}

/* ---- الأزرار: تدرّج وبروز أوضح للزر الأساسي ---- */
.btn{background:linear-gradient(135deg,var(--accent-2),var(--accent));border-color:var(--accent);
  box-shadow:0 2px 8px rgba(37,99,235,.28)}
.btn:hover{background:linear-gradient(135deg,var(--accent),var(--accent-ink));border-color:var(--accent-ink);
  box-shadow:0 4px 14px rgba(37,99,235,.36);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.pos{background:linear-gradient(135deg,var(--pos-2),var(--pos));box-shadow:0 2px 8px rgba(18,147,106,.28)}
.btn.warn{background:linear-gradient(135deg,var(--warn-2),var(--warn));box-shadow:0 2px 8px rgba(201,130,26,.28)}
.btn.danger{background:linear-gradient(135deg,var(--neg-2),var(--neg));box-shadow:0 2px 8px rgba(214,59,44,.28)}
.btn.ghost{background:var(--surface);box-shadow:var(--shadow-sm)}
.btn.ghost:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink);transform:translateY(-1px)}
/* ghost+danger معًا (زرار حذف صغير داخل فورم) — لازم ياخد شكل واضح مميّز عن
   الـ ghost العادي، مش يتبلع فيه بسبب تساوي الأولوية بين الكلاسين */
.btn.ghost.danger{background:var(--surface);color:var(--neg);border-color:var(--neg);box-shadow:none}
.btn.ghost.danger:hover{background:var(--neg);color:#fff;border-color:var(--neg);transform:translateY(-1px)}

/* ---- عنوان الصفحة: شريط لوني جانبي للتوجيه البصري السريع ---- */
.page-head h3{position:relative;padding-inline-start:14px}
.page-head h3::before{content:'';position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);
  width:5px;height:0.95em;border-radius:3px;background:linear-gradient(180deg,var(--accent-2),var(--accent))}

/* ---- عناوين الأقسام: نقطة لونية بدل الرمادي الباهت ---- */
.section-label{color:var(--accent-ink)}
.section-label::before{content:'';width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent-2),var(--accent))}

/* ---- كروت الإحصائيات: خلفية ملوّنة خفيفة + أيقونة بارزة بدل الأبيض الممل ---- */
.stat{background:linear-gradient(160deg,#fff,#fbfcff)}
.stat .ic{background:var(--accent-soft);color:var(--accent)}
.stat.stat-blue{background:linear-gradient(160deg,#fff,var(--accent-soft))}
.stat.stat-blue .ic{background:var(--accent);color:#fff}
.stat.stat-green{background:linear-gradient(160deg,#fff,var(--pos-soft))}
.stat.stat-green .ic{background:var(--pos);color:#fff}
.stat.stat-red{background:linear-gradient(160deg,#fff,var(--neg-soft))}
.stat.stat-red .ic{background:var(--neg);color:#fff}
.stat.stat-amber{background:linear-gradient(160deg,#fff,var(--warn-soft))}
.stat.stat-amber .ic{background:var(--warn);color:#fff}
.stat.stat-gold{background:linear-gradient(160deg,#fff,var(--brand-soft))}
.stat.stat-gold .ic{background:linear-gradient(135deg,#c9962f,#a8761c);color:#fff}
.stat.stat-teal{background:linear-gradient(160deg,#fff,var(--info-soft))}
.stat.stat-teal .ic{background:var(--info);color:#fff}
.stat.stat-purple{background:linear-gradient(160deg,#fff,var(--purple-soft))}
.stat.stat-purple .ic{background:var(--purple);color:#fff}
.card.stat{transition:.16s}
.card.stat:hover{box-shadow:var(--shadow);transform:translateY(-2px)}

/* ---- التابات: أوضح للمستخدم إن ده اللي مختار ---- */
.tab.active{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff;
  box-shadow:0 3px 10px rgba(37,99,235,.32)}
.tab.active .cnt{background:rgba(255,255,255,.28);color:#fff}
.tab.active svg{color:#fff}

/* ---- رأس الجدول: خط سفلي ملوّن يوضّح بداية البيانات ---- */
thead th{border-bottom:2px solid var(--accent-soft);color:var(--accent-ink)}
tbody tr:hover{background:var(--accent-soft)}

/* ---- شريط الفلاتر: لمسة لون علوية ---- */
.filter-bar{border-top:3px solid var(--accent)}

/* ---- السايدبار: أيقونات ملوّنة عشان التنقّل يبقى أوضح ---- */
.nav-item svg{opacity:1;color:#9fb0ff}
.nav-item:hover svg{color:#fff}
.nav-item.active svg{color:#fff}
.nav-label{color:#8ba0c9}

/* ---- الفلاش والتنبيهات: شريط جانبي ملوّن أوضح ---- */
.flash{border-inline-start-width:4px}
.flash.success{border-inline-start:4px solid var(--pos)}
.flash.error{border-inline-start:4px solid var(--neg)}
.flash.warning{border-inline-start:4px solid var(--warn)}

/* ---- كروت الموردين/المشاريع: بروز أظهر عند المرور ---- */
.sup .av{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff}
.pcard .pc-band{background:linear-gradient(90deg,var(--accent-2),var(--accent))}
.pcard.is-done .pc-band{background:linear-gradient(90deg,var(--pos-2),var(--pos))}

/* ---- خلفية متحركة: أيقونات بناء بتعوم بهدوء ورا كل المحتوى ---- */
.bg-icons{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg-icons svg{position:absolute;color:#93a6c4;opacity:.07;
  animation-name:bgFloat;animation-timing-function:ease-in-out;animation-iteration-count:infinite;will-change:transform}
@keyframes bgFloat{
  0%{transform:translateY(0) rotate(0deg)}
  33%{transform:translateY(-26px) rotate(7deg)}
  66%{transform:translateY(14px) rotate(-6deg)}
  100%{transform:translateY(0) rotate(0deg)}
}
@media (prefers-reduced-motion: reduce){
  .bg-icons svg{animation:none}
}
@media(max-width:640px){
  /* على الموبايل نقلّل الزحمة عشان الأداء والوضوح */
  .bg-icons svg:nth-child(n+6){display:none}
}

/* ---- أيقونة الصفحة في التوب بار (لون مميّز لكل شاشة) ---- */
.page-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;
  box-shadow:var(--shadow-sm);transition:.16s}
.page-ic svg{width:20px;height:20px}
.topbar h2{margin-inline-start:2px}

/* ---- اختيار طريقة الدفع (تاب المدفوعات في صفحة المشروع) ---- */
.pay-choice{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px}
@media(max-width:720px){.pay-choice{grid-template-columns:1fr}}
.pay-opt{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:12px;
  background:var(--surface);border:1.5px solid var(--line);box-shadow:var(--shadow-sm);transition:.16s;cursor:pointer}
.pay-opt:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px)}
.pay-opt-ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;color:#fff}
.pay-opt-ic svg{width:23px;height:23px}
.pay-opt-ic.in{background:linear-gradient(135deg,var(--pos-2),var(--pos))}
.pay-opt-ic.amber{background:linear-gradient(135deg,var(--warn-2),var(--warn))}
.pay-opt-body{flex:1;min-width:0}
.pay-opt-t{font-size:15px;font-weight:700;color:var(--ink)}
.pay-opt-s{font-size:12px;color:var(--ink-3);margin-top:3px}
.pay-opt-arrow{width:20px;height:20px;color:var(--ink-3);flex-shrink:0;transform:scaleX(-1)}
.pay-opt:hover .pay-opt-arrow{color:var(--accent)}

/* ---- شريط المدفوعات على كارت المشروع (دفعات العميل + المدفوع للصنايعية) ---- */
.pc-pays{display:grid;grid-template-columns:1fr;gap:6px;margin-top:16px;padding-top:12px;border-top:1px dashed var(--line-2)}
.pc-pay{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:8px;font-size:11.5px}
.pc-pay svg{width:14px;height:14px;flex-shrink:0}
.pc-pay .l{color:var(--ink-2);font-weight:600;}
.pc-pay .v{margin-inline-start:auto;font-weight:800;font-variant-numeric:tabular-nums;}
.pc-pay.in{background:var(--pos-soft)}
.pc-pay.in svg,.pc-pay.in .v{color:var(--pos)}
.pc-pay.out{background:var(--warn-soft)}
.pc-pay.out svg,.pc-pay.out .v{color:var(--warn)}

/* ============================================================
   UI BATCH — July 2026: bands total box, compact item rows,
   materials band groups, project card bands, craftsmen stars,
   supplier debt groups
   ============================================================ */

/* ── Band Create: إجمالي الكلي box ── */
.band-total-box{background:linear-gradient(135deg,var(--accent-soft),#f0f9ff);border:2px solid var(--accent);border-radius:14px;padding:20px 24px;margin:18px 0;text-align:center}
.band-total-lbl{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.band-total-inp{width:100%;border:none;background:transparent;color:var(--accent);font-size:32px;font-weight:900;text-align:center;font-variant-numeric:tabular-nums;padding:0;margin:0}
.band-total-inp:focus{outline:none}
.band-total-hint{font-size:11px;color:var(--ink-3);margin-top:6px}

/* ── Materials Create: compact item rows ── */
.item-row{border-bottom:1px solid var(--line-2);padding:6px 0}
.item-row:last-child{border-bottom:none}
.item-row-grid{display:flex;gap:6px;align-items:flex-end}
.irf{display:flex;flex-direction:column;min-width:0}
.irf label{font-size:10px;color:var(--ink-3);margin-bottom:3px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.irf input{padding:5px 7px;font-size:13px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);height:32px}
.irf input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.ir-del{height:32px;width:34px;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:flex-end;color:var(--neg);border-color:var(--neg)}
.items-header-row{display:flex;gap:6px;padding:4px 0 6px;border-bottom:2px solid var(--line);margin-bottom:2px}
.items-header-row span{font-size:11px;font-weight:700;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pay-section-box{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-top:12px}
.pay-section-title{display:flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700;color:var(--ink-2);margin-bottom:12px}
@media(max-width:780px){.item-row-grid{flex-wrap:wrap}.irf{min-width:calc(50% - 4px)}.ir-del{align-self:flex-start;margin-top:20px}}

/* ── Band Create: فورم البند فضل ضيق (مش مستطيل عريض) — صف الخامة/النثرية
   بيتكسّر لسطرين مربّعين بدل ما يتزحلق أفقيًا في عرض ضيق ومساحات فاضية */
.band-form-card{max-width:680px;margin:0 auto}
.band-form-card .item-row-grid{flex-wrap:wrap}
.band-form-card .item-row-grid .irf:first-child{flex:1 1 100%}
.band-form-card .irf{flex:1 1 100px}
.band-form-card .ir-del{position:absolute;top:6px;inset-inline-end:0}
.band-form-card .item-row{position:relative;padding-inline-end:40px}

/* ── فني اتدفعله فلوس: بياناته مقفولة بالكامل ── */
.worker-paid-note{margin-top:10px;padding:9px 12px;background:var(--accent-soft);border:1px dashed var(--accent);border-radius:8px;font-size:12.5px;line-height:1.6;color:var(--accent-ink)}

/* ── جرس إشعارات حقيقي (بدل بانر تحذير عريض) ── */
.bell-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--ink-2);cursor:pointer;transition:.15s;flex-shrink:0}
.bell-btn:hover{background:var(--warn-soft,#fef3e2);border-color:var(--warn,#c9821a);color:var(--warn,#c9821a);transform:translateY(-1px)}
.bell-btn svg{width:19px;height:19px}
.bell-badge{position:absolute;top:-6px;inset-inline-end:-6px;min-width:19px;height:19px;padding:0 4px;border-radius:999px;background:var(--neg,#dc2626);color:#fff;font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--surface);animation:bellPulse 1.8s ease-in-out infinite}
@keyframes bellPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@media(prefers-reduced-motion:reduce){.bell-badge{animation:none}}

/* ── تمييز واضح بين سعر الشراء (تكلفة للشركة) وسعر البيع (للعميل) — نفس
   التلوين في كل الشاشات عشان العين تتعود عليه بسرعة ── */
.price-cost{color:var(--ink-2);font-weight:600}
.price-sell{color:var(--accent-ink,#1c4fb0);font-weight:700}
th .price-cost,th .price-sell{font-weight:700;font-size:11px}

/* ── بند منفذ بالكامل — صف بلون أخضر خفيف بدل عمود حالة منفصل ── */
.band-row-done{background:var(--pos-soft,#e9f9f2)}
.band-row-done td{color:var(--ink)}

/* ── سجل الحركات: طابع بنكي — خلفية أيقونات مالية + شريط لون لكل نوع حركة ── */
.txn-page-wrap{position:relative}
.txn-bg-icons{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;border-radius:14px}
.txn-bg-icons svg{position:absolute;width:64px;height:64px;color:#8fa6c9;opacity:.05;fill:none}
.txn-bg-icons svg:nth-child(1){top:4%;inset-inline-start:4%;width:52px;height:52px}
.txn-bg-icons svg:nth-child(2){top:14%;inset-inline-end:8%;width:70px;height:70px}
.txn-bg-icons svg:nth-child(3){top:38%;inset-inline-start:14%;width:46px;height:46px}
.txn-bg-icons svg:nth-child(4){top:52%;inset-inline-end:5%;width:60px;height:60px}
.txn-bg-icons svg:nth-child(5){top:68%;inset-inline-start:6%;width:56px;height:56px}
.txn-bg-icons svg:nth-child(6){top:80%;inset-inline-end:16%;width:48px;height:48px}
.txn-bg-icons svg:nth-child(7){top:25%;inset-inline-start:44%;width:64px;height:64px}
.txn-bg-icons svg:nth-child(8){top:88%;inset-inline-start:38%;width:50px;height:50px}
@media(max-width:900px){.txn-bg-icons svg:nth-child(n+5){display:none}}
.txn-row{border-inline-start:3px solid var(--txn-color,transparent);transition:background .15s}
.txn-row:hover{background:var(--surface-2)}
.txn-icon-btn{width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.txn-icon-btn.danger{color:var(--neg);border-color:var(--neg)}
.txn-icon-btn.danger:hover{background:var(--neg);color:#fff}

/* ── تأكيد الباسورد الغلط: رسالة واضحة + اهتزاز المودال ── */
.txn-pw-error{display:flex;align-items:center;gap:6px;margin-top:8px;padding:8px 10px;background:#fef2f2;border:1px solid var(--neg);border-radius:8px;color:var(--neg);font-size:12.5px;font-weight:700}
.txn-pw-error svg{flex-shrink:0}
@keyframes txnShake{
  10%,90%{transform:translateX(-1px)}
  20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-5px)}
  40%,60%{transform:translateX(5px)}
}
.shake-error{animation:txnShake .5s cubic-bezier(.36,.07,.19,.97) both;border:2px solid var(--neg) !important}
@media(prefers-reduced-motion:reduce){.shake-error{animation:none}}

/* ── Project Show: materials band sections ── */
.mat-band-section{border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.mat-band-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line)}
.mat-total-strip{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:10px;margin-bottom:24px;font-weight:600;color:var(--accent)}
.mat-total-strip strong{font-size:16px;margin-inline-start:auto}

/* ── Project Cards: band tags strip ── */
.pc-bands{display:flex;flex-wrap:wrap;gap:4px;padding:8px 0 4px}
.pc-bands .tag.sm{font-size:10px;padding:2px 8px}

/* ── Craftsmen: star display and rating form ── */
.star-display{display:flex;align-items:center;gap:2px}
.star-icon{color:var(--line);fill:none}
.star-icon.filled{color:#f59e0b;fill:#f59e0b}
.craftsman-rate-form{display:flex;align-items:center;gap:8px;background:var(--bg);padding:8px 12px;border-radius:8px;flex-wrap:wrap}
.rate-stars{display:flex;gap:2px}
.rate-star-btn{background:none;border:none;cursor:pointer;padding:2px;color:var(--line);transition:color .15s,transform .1s}
.rate-star-btn svg{fill:none;display:block}
.rate-star-btn.on{color:#f59e0b}
.rate-star-btn.on svg{fill:#f59e0b}
.rate-star-btn:hover,.rate-star-btn:hover ~ .rate-star-btn{color:#f59e0b}
.rate-star-btn:hover svg{fill:#fbbf24}
.rate-star-btn:active{transform:scale(.85)}
.rate-notes-inp{flex:1;min-width:120px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);font-size:12px}

/* ── Debts: supplier grouping ── */
.supplier-debt-group{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.supplier-debt-head{display:flex;align-items:center;gap:12px;padding:14px 18px;background:linear-gradient(135deg,#f8faff,#f1f5fd);border-bottom:1px solid var(--line);flex-wrap:wrap;gap:12px}
.supplier-ic{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0}
.supplier-fin-row{display:flex;align-items:center;gap:18px;margin-inline-start:auto;flex-wrap:wrap}
@media(max-width:640px){.supplier-fin-row{margin-inline-start:0;width:100%}}