/* ===== TULA ERP — طبقة الشكل الجديد · الفاتح فقط ===== */
/* بتتحمّل بعد style.css. كل سطر مقفول بـ:not([data-theme="dark"]) فالوضع الليلي مالوش دعوة. */
html:not([data-theme="dark"]) {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --border: #e9ebf0;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(24,36,52,.04);
  --shadow: 0 4px 16px rgba(24,36,52,.06);
  --shadow-lg: 0 14px 34px rgba(24,36,52,.10);
}
html:not([data-theme="dark"]) body { background: var(--bg); }

/* ---- القايمة الجانبية: أزرار مدورة ---- */
html:not([data-theme="dark"]) .sidebar {
  background: var(--surface);
  border-inline-end: 1px solid var(--border);
}
html:not([data-theme="dark"]) .sidebar .nav-link {
  color: #4c5768; border-radius: 12px;
  margin: 2px 10px; padding: 10px 12px; font-weight: 600;
}
html:not([data-theme="dark"]) .sidebar .nav-link:hover { background: #f1f4f8; color: var(--navy); }
html:not([data-theme="dark"]) .sidebar .nav-link.active {
  background: var(--accent-light); color: var(--navy); font-weight: 800;
}
html:not([data-theme="dark"]) .sidebar-brand { border-bottom: 1px solid var(--border); }
html:not([data-theme="dark"]) .brand-logo {
  background: var(--navy); color: #fff; border-radius: 12px;
}
html:not([data-theme="dark"]) .brand-text,
html:not([data-theme="dark"]) .sidebar-brand { color: var(--text); }

/* ---- الشريط العلوي ---- */
html:not([data-theme="dark"]) header.topbar {
  background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: none;
}

/* ---- الكروت ---- */
html:not([data-theme="dark"]) .card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* ---- كروت الإحصائيات بالباستيل ---- */
html:not([data-theme="dark"]) .kpi {
  border-radius: var(--radius-lg); border: 1px solid transparent;
  box-shadow: none; padding: 18px 20px;
}
html:not([data-theme="dark"]) .kpi:nth-child(4n+1) { background: #eef4fc; }
html:not([data-theme="dark"]) .kpi:nth-child(4n+2) { background: #fdf2e9; }
html:not([data-theme="dark"]) .kpi:nth-child(4n+3) { background: #edf6f1; }
html:not([data-theme="dark"]) .kpi:nth-child(4n+4) { background: #f4f1fb; }
html:not([data-theme="dark"]) .kpi-icon {
  background: #fff; border-radius: 14px;
  box-shadow: 0 1px 3px rgba(24,36,52,.08);
}
html:not([data-theme="dark"]) .kpi .value {
  color: var(--text); font-weight: 700; font-variant-numeric: normal;
}

/* ---- الجداول ---- */
html:not([data-theme="dark"]) table.grid thead th {
  background: var(--surface-alt); color: var(--text-muted); font-weight: 700;
}
html:not([data-theme="dark"]) table.grid td,
html:not([data-theme="dark"]) table.grid th { border-color: var(--border); }

/* ---- الأزرار والحقول ---- */
html:not([data-theme="dark"]) .btn,
html:not([data-theme="dark"]) .btn-secondary { border-radius: 12px; }
html:not([data-theme="dark"]) input,
html:not([data-theme="dark"]) select,
html:not([data-theme="dark"]) textarea { border-radius: 10px; }

/* ================= الرسوم البيانية ================= */
/* مواصفات: علامات رفيعة · طرف البيانات مدور 4px · مسار خفيف ·
   لون واحد (سلسلة واحدة = لون واحد، مش قوس قزح) · النص بألوان النص مش بلون العمود */
html:not([data-theme="dark"]) .chart-box{padding:4px 0;}
html:not([data-theme="dark"]) .chart-bar-row{
  display:grid;grid-template-columns:minmax(90px,32%) 1fr auto;
  align-items:center;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--border);
}
html:not([data-theme="dark"]) .chart-bar-row:last-child{border-bottom:none;}
html:not([data-theme="dark"]) .chart-bar-label{
  color:var(--text-muted);font-size:13px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html:not([data-theme="dark"]) .chart-bar-track{
  background:#eef1f5;border-radius:5px;height:10px;overflow:visible;
}
html:not([data-theme="dark"]) .chart-bar-fill{
  background:var(--accent);height:10px;
  border-start-end-radius:4px;border-end-end-radius:4px;
  transition:width .55s cubic-bezier(.22,.61,.36,1);
}
html:not([data-theme="dark"]) .chart-bar-fill.negative{background:#c0392b;}
html:not([data-theme="dark"]) .chart-bar-value{
  color:var(--text);font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums;min-width:74px;text-align:start;
}
/* الحالة الفاضية */
html:not([data-theme="dark"]) .empty-state{
  background:var(--surface-alt);border:1px dashed var(--border-strong);
  border-radius:var(--radius);color:var(--text-subtle);
  font-size:13px;padding:18px;text-align:center;
}
/* عناوين الصفحات */
html:not([data-theme="dark"]) h2.page-title{
  font-size:19px;font-weight:800;letter-spacing:-.2px;color:var(--text);
}
html:not([data-theme="dark"]) .page-header-actions{gap:8px;}

/* ========== تنقيح احترافي: كروت بيضا بدل الباستيل ========== */
/* اللون بيتحط في مساحة صغيرة (الأيقونة) مش على الكارت كله */
html:not([data-theme="dark"]) .kpi{
  background:var(--surface)!important;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:16px 18px;box-shadow:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
html:not([data-theme="dark"]) .kpi:hover{
  border-color:#cfd6e0;box-shadow:0 2px 10px rgba(19,26,36,.06);
}
html:not([data-theme="dark"]) .kpi-icon{
  background:var(--accent-light)!important;color:var(--accent);
  border-radius:11px;box-shadow:none;
}
html:not([data-theme="dark"]) .kpi .value{
  font-size:21px;font-weight:700;letter-spacing:-.3px;
  white-space:nowrap;line-height:1.25;color:var(--text);
}
html:not([data-theme="dark"]) .kpi .subtitle,
html:not([data-theme="dark"]) .kpi .label{
  color:var(--text-muted);font-size:12px;font-weight:600;line-height:1.4;
}
/* الزرار الأخضر الفاقع → هادي */
html:not([data-theme="dark"]) .btn-excel,
html:not([data-theme="dark"]) a.btn-excel{
  background:#0f7a3d;border-radius:10px;font-weight:700;
}

/* ======== الهيكل مشترك — بيبان في الوضعين ======== */
:root{--radius-sm:8px;--radius:12px;--radius-lg:16px;}
.kpi{border-radius:16px;padding:16px 18px;box-shadow:none;}
.kpi .value{font-size:21px;font-weight:700;letter-spacing:-.3px;white-space:nowrap;line-height:1.25;}
.kpi-icon{border-radius:11px;}
.card{border-radius:16px;}
.sidebar .nav-link{border-radius:10px;margin:1px 10px;padding:9px 12px;font-weight:600;font-size:13.5px;}
.btn,.btn-secondary,.btn-del{border-radius:10px;font-weight:700;}
input,select,textarea{border-radius:9px;}
.badge{border-radius:999px;font-weight:700;}
.chart-bar-row{display:grid;grid-template-columns:minmax(90px,32%) 1fr auto;align-items:center;gap:14px;padding:9px 0;}
.chart-bar-track{height:10px;border-radius:5px;}
.chart-bar-fill{height:10px;border-start-end-radius:4px;border-end-end-radius:4px;}
.chart-bar-value{font-variant-numeric:tabular-nums;font-weight:700;min-width:74px;}
.chart-bar-label{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ======== ألوان الوضع الغامق ======== */
html[data-theme="dark"] .kpi{background:#1b2432;border:1px solid #2b3648;}
html[data-theme="dark"] .kpi:hover{border-color:#3c4a5e;}
html[data-theme="dark"] .kpi-icon{background:rgba(127,180,232,.14);}
html[data-theme="dark"] .card{border:1px solid #2b3648;}
html[data-theme="dark"] .sidebar .nav-link:hover{background:rgba(127,180,232,.10);}
html[data-theme="dark"] .sidebar .nav-link.active{background:rgba(127,180,232,.18);}
html[data-theme="dark"] .chart-bar-row{border-bottom:1px solid #26313f;}
html[data-theme="dark"] .chart-bar-row:last-child{border-bottom:none;}
html[data-theme="dark"] .chart-bar-track{background:#233042;}
html[data-theme="dark"] .chart-bar-fill{background:#5b9bd5;}
html[data-theme="dark"] .chart-bar-value{color:#e6edf6;}

/* ==================== المظهر الزجاجي ==================== */
/* قاعدة: الزجاج على الأسطح الكبيرة بس — الجداول والأرقام تفضل شبه صلبة عشان القراءة */
:root{--glass-blur:blur(20px) saturate(170%);}

/* الخلفية — اللي الزجاج هيعملها ضبابية */
html:not([data-theme="dark"]) body{
  background:
    radial-gradient(1100px 620px at 88% -12%, #d7e6fb 0%, transparent 62%),
    radial-gradient(880px 520px at 6% 6%, #e9e3fb 0%, transparent 58%),
    radial-gradient(700px 480px at 45% 110%, #dff1ea 0%, transparent 60%),
    #f3f5fa !important;
  background-attachment:fixed;
}
html[data-theme="dark"] body{
  background:
    radial-gradient(1100px 620px at 88% -12%, #1d3358 0%, transparent 62%),
    radial-gradient(880px 520px at 6% 6%, #2b2352 0%, transparent 58%),
    radial-gradient(700px 480px at 45% 110%, #123a34 0%, transparent 60%),
    #0e131c !important;
  background-attachment:fixed;
}

/* ============ GLASS LAYER (iOS-like frosted glass) ============ */
:root{
  --glass-blur: blur(20px) saturate(170%);
  --glass-blur-strong: blur(28px) saturate(180%);
}
html:not([data-theme="dark"]){
  --glass-bg: rgba(255,255,255,.62);
  --glass-bg-strong: rgba(255,255,255,.78);
  --glass-border: rgba(255,255,255,.75);
  --glass-hairline: rgba(19,26,36,.07);
  --glass-shadow: 0 8px 30px rgba(19,26,36,.08), 0 1px 2px rgba(19,26,36,.04);
  --glass-solid: #ffffff;
}
html[data-theme="dark"]{
  --glass-bg: rgba(28,36,50,.55);
  --glass-bg-strong: rgba(28,36,50,.74);
  --glass-border: rgba(255,255,255,.10);
  --glass-hairline: rgba(255,255,255,.07);
  --glass-shadow: 0 8px 32px rgba(0,0,0,.38), 0 1px 2px rgba(0,0,0,.25);
  --glass-solid: #1b2432;
}

/* --- surfaces that get the frost --- */
.sidebar,
.topbar,
.card,
.kpi,
.modal,
.chart-box{
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
}
.sidebar{
  border-width: 0 0 0 1px !important;
  border-radius: 0 !important;
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
}
.topbar{
  border-width: 0 0 1px 0 !important;
  border-radius: 0 !important;
  position: sticky; top: 0; z-index: 40;
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
}
.card, .kpi, .chart-box{ border-radius: 16px !important; }
.modal{
  border-radius: 20px !important;
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
}
.modal-overlay{
  background: rgba(15,22,33,.28) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* --- data stays readable: table cards go near-solid --- */
.card:has(table){ background: var(--glass-bg-strong) !important; }
.card table, .card table tr, .card table td, .card table th{ background: transparent; }
html:not([data-theme="dark"]) .card table thead th{ background: rgba(255,255,255,.55); }
html[data-theme="dark"] .card table thead th{ background: rgba(255,255,255,.04); }

/* --- controls --- */
html:not([data-theme="dark"]) input,
html:not([data-theme="dark"]) select,
html:not([data-theme="dark"]) textarea{
  background: rgba(255,255,255,.72) !important;
  border: 1px solid var(--glass-hairline) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.sidebar .nav-link{ border-radius: 11px; }
html:not([data-theme="dark"]) .sidebar .nav-link.active{ background: rgba(255,255,255,.85) !important; box-shadow: 0 2px 8px rgba(19,26,36,.07); }
html[data-theme="dark"] .sidebar .nav-link.active{ background: rgba(255,255,255,.12) !important; }

/* --- fallback: browsers without backdrop-filter get solid surfaces --- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .sidebar, .topbar, .card, .kpi, .modal, .chart-box{
    background: var(--glass-solid) !important;
  }
  html:not([data-theme="dark"]) input,
  html:not([data-theme="dark"]) select,
  html:not([data-theme="dark"]) textarea{ background: #ffffff !important; }
  html[data-theme="dark"] input,
  html[data-theme="dark"] select,
  html[data-theme="dark"] textarea{ background: #223047 !important; }
  .modal-overlay{ background: rgba(15,22,33,.55) !important; }
}
@media (prefers-reduced-transparency: reduce){
  .sidebar, .topbar, .card, .kpi, .modal, .chart-box{ background: var(--glass-solid) !important; }
}

/* ---- specificity fix: earlier theme-scoped rules were beating the glass ---- */
html:not([data-theme="dark"]) .sidebar,
html:not([data-theme="dark"]) .topbar,
html:not([data-theme="dark"]) .card,
html:not([data-theme="dark"]) .kpi,
html:not([data-theme="dark"]) .modal,
html:not([data-theme="dark"]) .chart-box,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .card,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .chart-box{
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}
html:not([data-theme="dark"]) .sidebar,
html[data-theme="dark"] .sidebar{ border-width: 0 0 0 1px !important; border-radius: 0 !important; }
html:not([data-theme="dark"]) .topbar,
html[data-theme="dark"] .topbar{ border-width: 0 0 1px 0 !important; border-radius: 0 !important; }
html:not([data-theme="dark"]) .modal,
html[data-theme="dark"] .modal{ background: var(--glass-bg-strong) !important; }
html:not([data-theme="dark"]) .card:has(table),
html[data-theme="dark"] .card:has(table){ background: var(--glass-bg-strong) !important; }

/* ---- richer backdrop so the frost has something to work with ---- */
html:not([data-theme="dark"]) body{
  background:
    radial-gradient(1000px 560px at 92% -10%, #bcd6f7 0%, transparent 60%),
    radial-gradient(820px 500px at 4% 4%, #ddd4fb 0%, transparent 58%),
    radial-gradient(760px 520px at 42% 108%, #c9ecdf 0%, transparent 60%),
    radial-gradient(620px 420px at 70% 55%, #fbe3ee 0%, transparent 62%),
    #eef1f8 !important;
  background-attachment: fixed !important;
}
html[data-theme="dark"] body{
  background:
    radial-gradient(1000px 560px at 92% -10%, #1e3a68 0%, transparent 60%),
    radial-gradient(820px 500px at 4% 4%, #33275f 0%, transparent 58%),
    radial-gradient(760px 520px at 42% 108%, #0f463d 0%, transparent 60%),
    radial-gradient(620px 420px at 70% 55%, #4a1f3c 0%, transparent 62%),
    #0c111a !important;
  background-attachment: fixed !important;
}
.main-wrap, main, .content, .page{ background: transparent !important; }

/* ---- sidebar ink: old colours were tuned for the navy sidebar ---- */
html:not([data-theme="dark"]) .sidebar .brand-title,
html:not([data-theme="dark"]) .sidebar .brand h1,
html:not([data-theme="dark"]) .sidebar .brand strong{ color:#131a24 !important; }
html:not([data-theme="dark"]) .sidebar .brand-subtitle{ color:#67717f !important; opacity:1 !important; }
html:not([data-theme="dark"]) .sidebar .nav-group-toggle,
html:not([data-theme="dark"]) .sidebar .nav-group-label{ color:#5b6675 !important; font-weight:700; }
html:not([data-theme="dark"]) .sidebar .nav-link{ color:#243040 !important; }
html:not([data-theme="dark"]) .sidebar .nav-link.active{ color:#0f2843 !important; font-weight:800; }
html:not([data-theme="dark"]) .sidebar .nav-link:hover{ background:rgba(255,255,255,.6) !important; }

html[data-theme="dark"] .sidebar .brand-title,
html[data-theme="dark"] .sidebar .brand h1,
html[data-theme="dark"] .sidebar .brand strong{ color:#eef3fa !important; }
html[data-theme="dark"] .sidebar .brand-subtitle{ color:#9aa7b8 !important; opacity:1 !important; }
html[data-theme="dark"] .sidebar .nav-group-toggle,
html[data-theme="dark"] .sidebar .nav-group-label{ color:#9fb2c8 !important; font-weight:700; }
html[data-theme="dark"] .sidebar .nav-link{ color:#dbe5f1 !important; }
html[data-theme="dark"] .sidebar .nav-link:hover{ background:rgba(255,255,255,.07) !important; }

/* ---- backdrop scales with the screen (was fixed px -> washed out on wide monitors) ---- */
html:not([data-theme="dark"]) body{
  background:
    radial-gradient(78vw 62vh at 92% -8%,  #b3d0f7 0%, transparent 62%),
    radial-gradient(64vw 56vh at 4% 2%,    #d8ccfb 0%, transparent 60%),
    radial-gradient(62vw 58vh at 38% 106%, #bfe9da 0%, transparent 62%),
    radial-gradient(52vw 48vh at 72% 52%,  #fbdcea 0%, transparent 64%),
    radial-gradient(46vw 44vh at 22% 58%,  #d6e6fb 0%, transparent 64%),
    #e9edf6 !important;
  background-attachment: fixed !important;
}
html[data-theme="dark"] body{
  background:
    radial-gradient(78vw 62vh at 92% -8%,  #1e3d75 0%, transparent 62%),
    radial-gradient(64vw 56vh at 4% 2%,    #3a2870 0%, transparent 60%),
    radial-gradient(62vw 58vh at 38% 106%, #0e5147 0%, transparent 62%),
    radial-gradient(52vw 48vh at 72% 52%,  #55203f 0%, transparent 64%),
    radial-gradient(46vw 44vh at 22% 58%,  #17325c 0%, transparent 64%),
    #0b1018 !important;
  background-attachment: fixed !important;
}

/* ---- richer + bigger blobs so colour reaches the middle of a wide screen ---- */
html:not([data-theme="dark"]) body{
  background:
    radial-gradient(120vw 92vh at 96% -14%, #9dc3f6 0%, transparent 58%),
    radial-gradient(102vw 84vh at 0% -2%,   #cbbbfb 0%, transparent 56%),
    radial-gradient(96vw 80vh at 34% 114%,  #a5e3ce 0%, transparent 58%),
    radial-gradient(82vw 70vh at 76% 56%,   #fbcee2 0%, transparent 60%),
    radial-gradient(70vw 62vh at 18% 62%,   #bfd8f9 0%, transparent 62%),
    #e3e9f5 !important;
  background-attachment: fixed !important;
}
html[data-theme="dark"] body{
  background:
    radial-gradient(120vw 92vh at 96% -14%, #1f416f 0%, transparent 58%),
    radial-gradient(102vw 84vh at 0% -2%,   #3b2a72 0%, transparent 56%),
    radial-gradient(96vw 80vh at 34% 114%,  #0f5a4d 0%, transparent 58%),
    radial-gradient(82vw 70vh at 76% 56%,   #5c2244 0%, transparent 60%),
    radial-gradient(70vw 62vh at 18% 62%,   #163463 0%, transparent 62%),
    #0a0f17 !important;
  background-attachment: fixed !important;
}

/* ================= DASHBOARD HIERARCHY ================= */
/* one hero number, a money row, then a quieter stock row, then compact action chips */
.kpi-row-primary{ margin-bottom:12px; }
.kpi-row-primary .kpi .value{ font-size:25px !important; font-weight:750 !important; }
.kpi-hero{ flex: 2.2 1 300px !important; padding:22px 24px !important; }
.kpi-hero .value{ font-size:46px !important; font-weight:800 !important; letter-spacing:-1.2px !important; line-height:1.05 !important; }
.kpi-hero .label{ font-size:14px !important; font-weight:600; }
.kpi-hero .kpi-icon{ width:46px !important; height:46px !important; border-radius:14px !important; }

.kpi-row-secondary{ margin-bottom:20px; }
.kpi-row-secondary .kpi{ padding:11px 15px !important; }
.kpi-row-secondary .kpi .value{ font-size:17px !important; font-weight:700 !important; }
.kpi-row-secondary .kpi .label{ font-size:11.5px !important; }
.kpi-row-secondary .kpi-icon{ width:30px !important; height:30px !important; border-radius:9px !important; }

.kpi-row-actions .kpi{ padding:10px 14px !important; }
.kpi-row-actions .kpi .value{ font-size:19px !important; }
.kpi-row-actions .kpi .label{ font-size:11.5px !important; }
.kpi-row-actions .kpi-icon{ width:28px !important; height:28px !important; border-radius:9px !important; }

.kpi-row-compact .kpi{ padding:9px 13px !important; }
.kpi-row-compact .kpi .value{ font-size:15px !important; }
.kpi-row-compact .kpi .label{ font-size:11px !important; }
.kpi-row-compact .kpi-icon{ width:26px !important; height:26px !important; border-radius:8px !important; }

/* grid instead of flex: a lone tile on the last line keeps its column
   instead of stretching across the whole width */
.kpi-row-primary, .kpi-row-secondary, .kpi-row-actions, .kpi-row-compact{
  display:grid !important;
  gap:12px !important;
  align-items:stretch;
}
.kpi-row-primary{  grid-template-columns: repeat(auto-fit, minmax(185px,1fr)); }
.kpi-row-secondary{grid-template-columns: repeat(auto-fit, minmax(175px,1fr)); }
.kpi-row-actions{  grid-template-columns: repeat(auto-fit, minmax(155px,1fr)); }
.kpi-row-compact{  grid-template-columns: repeat(auto-fit, minmax(145px,1fr)); }
.kpi-row-primary > .kpi, .kpi-row-secondary > .kpi,
.kpi-row-actions > .kpi, .kpi-row-compact > .kpi{ margin:0 !important; min-width:0; }
@media (min-width: 900px){ .kpi-hero{ grid-column: span 2; } }

@media (min-width: 700px){ .kpi-hero{ grid-column: span 2 !important; } }
/* charts: side by side, and give the plot room to breathe */
.chart-box{ padding:6px 2px 2px !important; }
.card > h3{ font-size:15px !important; letter-spacing:-.2px; }

/* ==================== SVG ANALYTICS ==================== */
.analytics-head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom:6px; }
.analytics-head .delta{ font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px;
  white-space:nowrap; letter-spacing:-.1px; }
html:not([data-theme="dark"]) .delta.up  { color:#006300; background:rgba(12,163,12,.10); }
html:not([data-theme="dark"]) .delta.down{ color:#a12727; background:rgba(208,59,59,.10); }
html[data-theme="dark"] .delta.up  { color:#5fd35f; background:rgba(12,163,12,.16); }
html[data-theme="dark"] .delta.down{ color:#f08b8b; background:rgba(208,59,59,.18); }

.chart-line{ width:100%; min-height:260px; position:relative; }
.chart-line svg{ display:block; overflow:visible; }
.chart-empty{ padding:38px 12px; text-align:center; font-size:13px; color:var(--text-muted); }

.chart-tip{ position:absolute; pointer-events:none; z-index:5; min-width:118px;
  padding:7px 10px; border-radius:10px; font-size:12px; line-height:1.5;
  transition:opacity .1s; display:flex; flex-direction:column; }
.chart-tip b{ font-size:13.5px; font-variant-numeric:tabular-nums; }
.chart-tip span{ font-size:11px; opacity:.75; }
html:not([data-theme="dark"]) .chart-tip{ background:rgba(255,255,255,.94); color:#131a24;
  border:1px solid rgba(19,26,36,.10); box-shadow:0 6px 20px rgba(19,26,36,.14);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
html[data-theme="dark"] .chart-tip{ background:rgba(20,28,40,.94); color:#e8eef7;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 6px 20px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }

.donut-wrap{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding:6px 0 2px; }
.chart-legend{ list-style:none; margin:0; padding:0; flex:1; min-width:220px; }
.chart-legend li{ display:grid; grid-template-columns:12px 1fr auto auto; align-items:center;
  gap:9px; padding:6px 8px; border-radius:8px; font-size:12.5px; transition:background .12s; }
.chart-legend li:hover, .chart-legend li.on{ background:rgba(127,127,127,.10); }
.chart-legend .sw{ width:11px; height:11px; border-radius:3px; }
.chart-legend .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
.chart-legend .vl{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--text); }
.chart-legend .pc{ font-variant-numeric:tabular-nums; color:var(--text-muted); min-width:38px; text-align:end; }

.analytics-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:10px 28px; margin-top:14px; }
.mini-title{ font-size:12.5px; font-weight:700; color:var(--text-muted); margin:0 0 4px;
  letter-spacing:-.1px; }
.hint-note{ font-size:11.5px; color:var(--text-muted); }

/* الرسوم الصغيرة جوه شبكة التحليل: مساحة أكبر للعمود نفسه */
.analytics-grid .chart-bar-row{ grid-template-columns: minmax(70px,26%) 1fr auto !important;
  gap:10px !important; padding:7px 0 !important; }
.analytics-grid .chart-bar-value{ min-width:46px !important; }
.analytics-grid .chart-bar-label{ font-size:12.5px !important; }

/* ==================== صف فلتر المدة ==================== */
.range-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:2px 0 14px; }
.range-bar-title{ font-size:12.5px; font-weight:800; color:var(--text-muted); margin-inline-end:4px; }
.range-bar-note{ font-size:11.5px; color:var(--text-subtle,var(--text-muted)); margin-inline-start:6px; }
.range-pill{ font-size:12.5px; font-weight:700; padding:6px 14px; border-radius:999px;
  text-decoration:none; line-height:1.4; transition:background .12s,color .12s; }
html:not([data-theme="dark"]) .range-pill{ color:#3d4757; background:rgba(255,255,255,.55);
  border:1px solid rgba(19,26,36,.08); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
html:not([data-theme="dark"]) .range-pill:hover{ background:rgba(255,255,255,.85); }
html:not([data-theme="dark"]) .range-pill.on{ background:#1F4E78; border-color:#1F4E78; color:#fff; }
html[data-theme="dark"] .range-pill{ color:#c9d6e6; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
html[data-theme="dark"] .range-pill:hover{ background:rgba(255,255,255,.12); }
html[data-theme="dark"] .range-pill.on{ background:#5b9bd5; border-color:#5b9bd5; color:#0d1420; }

.range-totals{ display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px;
  color:var(--text-muted); margin:2px 0 6px; }
.range-totals b{ font-size:14px; color:var(--text); font-variant-numeric:tabular-nums; }
.range-totals .muted b{ color:var(--text-muted); font-weight:600; }

.line-legend{ display:flex; gap:16px; font-size:12px; color:var(--text-muted); margin-bottom:2px; }
.line-legend span{ display:inline-flex; align-items:center; gap:6px; }
.line-legend i{ width:14px; height:3px; border-radius:2px; display:inline-block; }
.chart-tip .prev{ opacity:.65; }

/* ===== الدرج المقفول كان بيوسّع الصفحة أفقيًا (fixed برّه الشاشة) ===== */
html{ overflow-x: clip; }

/* ===== قائمة الملفات (تصدير/استيراد) ===== */
.tools-menu{ position:relative; display:inline-block; }
.tools-menu-pop{ position:absolute; inset-inline-end:0; top:calc(100% + 6px); z-index:60;
  min-width:250px; padding:6px; border-radius:14px; display:none; }
.tools-menu.open .tools-menu-pop{ display:block; }
html:not([data-theme="dark"]) .tools-menu-pop{ background:rgba(255,255,255,.92);
  border:1px solid rgba(19,26,36,.10); box-shadow:0 12px 34px rgba(19,26,36,.16);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
html[data-theme="dark"] .tools-menu-pop{ background:rgba(22,30,42,.94);
  border:1px solid rgba(255,255,255,.10); box-shadow:0 12px 34px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.tools-menu-pop > a{ display:flex; align-items:center; gap:9px; padding:9px 12px;
  border-radius:9px; text-decoration:none; font-size:13px; font-weight:600; color:var(--text); }
.tools-menu-pop > a:hover{ background:rgba(127,127,127,.12); }
.tools-import{ border-top:1px solid var(--glass-hairline); margin-top:5px; padding:9px 6px 4px;
  display:flex; flex-direction:column; gap:8px; }
.tools-file{ display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:9px;
  font-size:13px; font-weight:600; cursor:pointer; border:1px dashed var(--border-strong,var(--border)); }
.tools-file:hover{ background:rgba(127,127,127,.10); }
.tools-file input[type=file]{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.tools-file-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:170px; }
.tools-import button[disabled]{ opacity:.45; cursor:not-allowed; }

/* ===== الصورة المصغّرة في الجدول ===== */
td.prod-thumb{ position:relative; overflow:visible; }
.prod-thumb-img{ transition:transform .14s ease, box-shadow .14s ease; }
td.prod-thumb:hover .prod-thumb-img{ transform:scale(3.4); position:relative; z-index:30;
  box-shadow:0 10px 30px rgba(0,0,0,.32); border-radius:10px; }

/* ===== مبدّل العرض ===== */
.view-toggle{ display:inline-flex; gap:4px; padding:3px; border-radius:11px; margin-bottom:12px; }
html:not([data-theme="dark"]) .view-toggle{ background:rgba(19,26,36,.05); }
html[data-theme="dark"] .view-toggle{ background:rgba(255,255,255,.06); }
.view-btn{ display:inline-flex; align-items:center; gap:6px; border:0; cursor:pointer;
  font-size:12.5px; font-weight:700; padding:6px 13px; border-radius:9px; background:transparent;
  color:var(--text-muted); font-family:inherit; }
html:not([data-theme="dark"]) .view-btn.on{ background:#fff; color:#131a24; box-shadow:0 1px 3px rgba(19,26,36,.14); }
html[data-theme="dark"] .view-btn.on{ background:rgba(255,255,255,.14); color:#eef3fa; }

/* ===== شبكة كروت المنتجات ===== */
.product-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; }
.product-card{ display:flex; flex-direction:column; border-radius:14px; overflow:hidden;
  text-decoration:none; color:inherit; transition:transform .13s, box-shadow .13s; }
html:not([data-theme="dark"]) .product-card{ background:rgba(255,255,255,.72);
  border:1px solid rgba(19,26,36,.08); }
html[data-theme="dark"] .product-card{ background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09); }
.product-card:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.16); }
.product-card-img{ position:relative; aspect-ratio:1/1; display:flex; align-items:center;
  justify-content:center; background:var(--accent-light); overflow:hidden; }
html[data-theme="dark"] .product-card-img{ background:rgba(127,180,232,.10); }
.product-card-img img{ width:100%; height:100%; object-fit:cover; }
.product-card-img .ph{ color:var(--accent); opacity:.5; }
.card-badge{ position:absolute; inset-block-end:8px; inset-inline-start:8px; font-size:10.5px; }
.product-card-body{ padding:11px 12px 12px; display:flex; flex-direction:column; gap:3px; }
.product-card-name{ font-weight:700; font-size:13.5px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-card-meta{ font-size:11.5px; color:var(--text-muted); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.product-card-foot{ display:flex; justify-content:space-between; align-items:baseline;
  gap:8px; margin-top:5px; }
.product-card-foot .price{ font-weight:800; font-size:13.5px; font-variant-numeric:tabular-nums; }
.product-card-foot .dims{ font-size:11px; color:var(--text-muted); white-space:nowrap; }

/* [hidden] لازم تكسب على display:grid */
[hidden]{ display:none !important; }

/* ============ رفع وضوح الكتابة في الوضع الغامق ============ */
html[data-theme="dark"]{
  --text: #f3f7fc;
  --text-muted: #b8c6d8;
  --text-subtle: #9dabbf;
}
html[data-theme="dark"] body,
html[data-theme="dark"] .card,
html[data-theme="dark"] td,
html[data-theme="dark"] .kpi .value{ color: var(--text) !important; }

html[data-theme="dark"] th,
html[data-theme="dark"] .card table thead th{ color: #dce6f3 !important; font-weight:700; }

html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .kpi .label,
html[data-theme="dark"] .mini-title,
html[data-theme="dark"] .hint-note,
html[data-theme="dark"] .chart-empty,
html[data-theme="dark"] .chart-bar-label,
html[data-theme="dark"] .range-bar-title,
html[data-theme="dark"] .range-totals,
html[data-theme="dark"] .line-legend,
html[data-theme="dark"] .chart-legend .pc,
html[data-theme="dark"] .product-card-meta,
html[data-theme="dark"] .product-card-foot .dims,
html[data-theme="dark"] .view-btn{ color: var(--text-muted) !important; }

html[data-theme="dark"] .range-bar-note{ color: var(--text-subtle) !important; }

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{ color: var(--text) !important; }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{ color: #93a3b8 !important; opacity:1; }
html[data-theme="dark"] option{ color:#f3f7fc; background:#182338; }

html[data-theme="dark"] a{ color:#8ec2f5; }
html[data-theme="dark"] .card table a{ color:#9ecbf7; }
html[data-theme="dark"] .card table a:visited{ color:#c0aef0; }

/* كارت المنتج لينك بس مش المفروض يبان بلون اللينكات */
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .product-card .product-card-name,
html:not([data-theme="dark"]) .product-card,
html:not([data-theme="dark"]) .product-card .product-card-name{ color: var(--text) !important; }
html[data-theme="dark"] .product-card .price,
html:not([data-theme="dark"]) .product-card .price{ color: var(--text) !important; }

/* ================= الأزرار: وضوح وتدرّج أهمية ================= */
a.btn, a.btn:visited, .btn, .btn:visited{ text-decoration:none; }

html[data-theme="dark"] .btn{
  background:#57a8f0 !important; color:#08111c !important;
  border:1px solid #57a8f0 !important; font-weight:800;
  box-shadow:0 2px 10px rgba(87,168,240,.22);
}
html[data-theme="dark"] .btn:hover{ background:#74b8f5 !important; border-color:#74b8f5 !important; }
html[data-theme="dark"] .btn.btn-secondary{
  background:rgba(255,255,255,.08) !important; color:#eaf2fb !important;
  border:1px solid rgba(255,255,255,.22) !important; box-shadow:none;
}
html[data-theme="dark"] .btn.btn-secondary:hover{ background:rgba(255,255,255,.16) !important; }
html[data-theme="dark"] .btn.btn-export{
  background:#3fae6a !important; color:#04140a !important; border-color:#3fae6a !important; }
html[data-theme="dark"] .btn.btn-export:hover{ background:#5cc286 !important; border-color:#5cc286 !important; }
html[data-theme="dark"] .btn.btn-danger{
  background:#ef6b6b !important; color:#1a0606 !important; border-color:#ef6b6b !important; }

html:not([data-theme="dark"]) .btn{
  background:#1F4E78 !important; color:#ffffff !important;
  border:1px solid #1F4E78 !important; font-weight:800;
  box-shadow:0 2px 8px rgba(31,78,120,.20);
}
html:not([data-theme="dark"]) .btn:hover{ background:#173d5f !important; border-color:#173d5f !important; }
html:not([data-theme="dark"]) .btn.btn-secondary{
  background:#ffffff !important; color:#1c2836 !important;
  border:1px solid rgba(19,26,36,.16) !important; box-shadow:0 1px 3px rgba(19,26,36,.08);
}
html:not([data-theme="dark"]) .btn.btn-secondary:hover{ background:#f2f5fa !important; }
html:not([data-theme="dark"]) .btn.btn-export{
  background:#1e7d45 !important; color:#ffffff !important; border-color:#1e7d45 !important; }
html:not([data-theme="dark"]) .btn.btn-danger{
  background:#b3261e !important; color:#ffffff !important; border-color:#b3261e !important; }

.btn:focus-visible, .view-btn:focus-visible, .range-pill:focus-visible{
  outline:3px solid #7cb8f0; outline-offset:2px; }

/* ===== لمسات أخيرة على شاشة القوائم ===== */
/* زرار الإجراءات (⋮) كان مربع أبيض ناشز في الوضع الغامق */
html[data-theme="dark"] .btn-edit.dropdown-trigger{
  background:rgba(255,255,255,.07) !important; color:#dce6f3 !important;
  border:1px solid rgba(255,255,255,.16) !important; border-radius:9px; box-shadow:none !important; }
html[data-theme="dark"] .btn-edit.dropdown-trigger:hover{ background:rgba(255,255,255,.16) !important; }
html:not([data-theme="dark"]) .btn-edit.dropdown-trigger{
  background:#fff !important; color:#3d4757 !important;
  border:1px solid rgba(19,26,36,.14) !important; border-radius:9px; }

/* لينكات أسماء الصفوف: من غير خط تحتها ولا لون "مزار" بنفسجي */
.card table a{ text-decoration:none; font-weight:700; }
.card table a:hover{ text-decoration:underline; }
html[data-theme="dark"] .card table a,
html[data-theme="dark"] .card table a:visited{ color:#a9d2f8 !important; }
html:not([data-theme="dark"]) .card table a,
html:not([data-theme="dark"]) .card table a:visited{ color:#17527f !important; }

/* الشارة تفضل تلتف — nowrap كان بيوسّع الجدول أعرض من الشاشة */
td .badge{ font-size:11px; line-height:1.45; }

/* لو الجدول أعرض من الكارت فعلاً: يتزحلق هو لوحده مش الصفحة كلها */
.table-scroll{ overflow-x:auto; overflow-y:clip; -webkit-overflow-scrolling:touch; }
.table-scroll > table{ min-width:max-content; }

/* ===== تفكيك المخزون حسب التركيبات ===== */
.variant-cover{ margin-top:6px; font-size:11px; font-weight:700; line-height:1.4;
  display:inline-block; padding:2px 8px; border-radius:999px; white-space:nowrap; }
html:not([data-theme="dark"]) .variant-cover{ color:#5b6675; background:rgba(19,26,36,.06); }
html[data-theme="dark"] .variant-cover{ color:#b8c6d8; background:rgba(255,255,255,.08); }
html:not([data-theme="dark"]) .variant-cover.thin{ color:#8a5218; background:#fde2c8; }
html[data-theme="dark"] .variant-cover.thin{ color:#ffca8a; background:rgba(250,178,25,.16); }
.sold-cell{ font-variant-numeric:tabular-nums; font-weight:700; }
.product-card .variant-cover{ margin:6px 0 0; font-size:10.5px; }

/* رأس الجدول اللاصق بيتلخبط جوه حاوية تزحلق — يبقى عادي جواها */
.table-scroll table thead th{ position:static !important; top:auto !important; }

/* ===== شريط الإجراءات الجماعية ===== */
.bulk-bar{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:12px;
  padding:10px 14px; border-radius:12px; }
html:not([data-theme="dark"]) .bulk-bar{ background:rgba(31,78,120,.08); border:1px solid rgba(31,78,120,.18); }
html[data-theme="dark"] .bulk-bar{ background:rgba(87,168,240,.12); border:1px solid rgba(87,168,240,.28); }
.bulk-count{ font-size:13px; font-weight:700; margin-inline-end:4px; }
.bulk-count b{ font-size:15px; }
.bulk-sep{ width:1px; align-self:stretch; background:currentColor; opacity:.18; margin:0 4px; }
.bulk-bar .btn{ padding:6px 13px !important; font-size:12.5px !important; }
.bulk-bar select{ padding:6px 10px; font-size:12.5px; border-radius:9px; }
td.sel-col, th.sel-col{ width:34px; text-align:center; }
.row-sel, #selAll{ width:16px; height:16px; cursor:pointer; accent-color:#2f7dd1; }

/* ===== تعديل السعر في مكانه ===== */
td.price-cell{ cursor:text; position:relative; }
td.price-cell:hover .price-val{ text-decoration:underline dotted; text-underline-offset:3px; }
.price-input{ width:96px; padding:4px 7px !important; font-size:13px !important;
  border-radius:7px !important; font-variant-numeric:tabular-nums; }
td.price-cell.saving{ opacity:.55; }
td.price-cell.saved{ animation:priceSaved 1.1s ease; }
@keyframes priceSaved{ 0%{ background:rgba(12,163,12,.28);} 100%{ background:transparent; } }
td.price-cell.save-error{ background:rgba(208,59,59,.22); }

/* ===================== PUR: شاشة المشتريات ===================== */
.fgroup{ border-radius:14px; padding:14px 16px 10px; margin-bottom:14px;
  border:1px solid var(--glass-border); background:rgba(255,255,255,.28); }
html[data-theme="dark"] .fgroup{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
.fgroup-title{ font-size:12.5px; font-weight:800; letter-spacing:.2px;
  color:var(--text-muted); margin:0 0 10px; }
.fgroup .form-inline{ margin:0; }
.form-actions{ display:flex; justify-content:flex-start; padding-top:4px; }
.form-actions .btn{ min-width:170px; justify-content:center; }
.calc-total{ display:flex; align-items:baseline; gap:10px; margin-top:10px;
  padding-top:10px; border-top:1px solid var(--glass-border); }
.calc-label{ font-size:12.5px; color:var(--text-muted); }
.calc-value{ font-size:22px; font-weight:800; color:var(--text); }
.range-select{ height:32px; border-radius:999px; padding:0 12px; font-size:13px;
  border:1px solid var(--glass-border); background:var(--glass-bg); color:var(--text); }
html[data-theme="dark"] .range-select{ background:rgba(255,255,255,.08); color:#eaf2fb;
  border-color:rgba(255,255,255,.22); }
.kpi-sub{ font-size:12.5px; color:var(--text-muted); margin-top:6px; }
.toolbar-count{ margin-inline-start:auto; font-size:12.5px; color:var(--text-muted); }
.delta.neutral{ color:var(--text-muted); }
html:not([data-theme="dark"]) .delta.good{ color:#006300; }
html:not([data-theme="dark"]) .delta.bad{ color:#d03b3b; }
html[data-theme="dark"] .delta.good{ color:#0ca30c; }
html[data-theme="dark"] .delta.bad{ color:#e66767; }
.kpi-row-pur{ grid-template-columns: repeat(2, 1fr); }
.kpi-row-pur .kpi-hero{ grid-column: span 2; }
@media (min-width: 1000px){
  .kpi-row-pur{ grid-template-columns: repeat(4, 1fr); }
  .kpi-row-pur .kpi-hero{ grid-column: span 2; }
}

/* ===================== PUR2: ترتيب الشاشة الجديد ===================== */
.form-panel{ border-color: var(--accent, #57a8f0) !important; }
.form-inline-4{ flex-wrap: wrap; }
.form-inline-4 .form-field{ flex: 1 1 150px; }
.form-actions{ gap: 10px; }
.kpi-row-pur2{ grid-template-columns: 1fr; }
.kpi-row-pur2 .kpi-hero{ grid-column: auto !important; }
@media (min-width: 640px){
  .kpi-row-pur2{ grid-template-columns: 2fr 1fr; }
}
.mix-toggle{ display:inline-flex; gap:4px; padding:3px; border-radius:999px;
  border:1px solid var(--glass-border); background:rgba(255,255,255,.22); }
html[data-theme="dark"] .mix-toggle{ background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14); }
.mix-btn{ border:0; background:transparent; cursor:pointer; font:inherit;
  font-size:12.5px; font-weight:700; padding:5px 12px; border-radius:999px;
  color:var(--text-muted); }
.mix-btn.on{ background:#1F4E78; color:#fff; }
html[data-theme="dark"] .mix-btn.on{ background:#57a8f0; color:#08111c; }
.mix-btn:focus-visible{ outline:3px solid #7cb8f0; outline-offset:2px; }
.cmp-block{ padding:10px 0; border-top:1px solid var(--glass-border); }
.cmp-block:first-of-type{ border-top:0; }
.cmp-head{ font-weight:800; font-size:13.5px; margin-bottom:6px; color:var(--text); }
.cmp-row{ display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; padding:3px 0; font-size:13px; }
.cmp-sup{ color:var(--text-muted); }
.cmp-val{ font-weight:700; color:var(--text); }
.cell-sub{ display:block; font-size:11.5px; color:var(--text-subtle); margin-top:2px; }
/* الكروت تاخد طول محتواها بدل ما تتمطّ لأطول واحد في الصف */
.analytics-grid{ align-items: start; }
.cmp-last{ display:block; font-size:11.5px; color:var(--text-subtle,var(--text-muted));
  margin-top:2px; }
.pager{ display:flex; align-items:center; justify-content:center; gap:12px;
  padding:12px 0 4px; }
.pager-info{ font-size:12.5px; color:var(--text-muted); }
.low-stock-card{ border-color:#d03b3b !important; }
html[data-theme="dark"] .low-stock-card{ border-color:#e66767 !important; }

html:not([data-theme="dark"]) .kpi.kpi-warn{ background:#fff5e6 !important; border-color:#f0d5a8 !important; }
html:not([data-theme="dark"]) .kpi.kpi-warn .kpi-icon{ background:rgba(176,112,16,.16) !important; color:#8a5a06; }
html:not([data-theme="dark"]) .kpi.kpi-crit{ background:#fdeeeb !important; border-color:#f0c5bc !important; }
html:not([data-theme="dark"]) .kpi.kpi-crit .kpi-icon{ background:rgba(176,52,34,.14) !important; color:#9c2f1e; }
html[data-theme="dark"] .kpi.kpi-warn{ background:#2a2213 !important; border-color:#4a3b1c !important; }
html[data-theme="dark"] .kpi.kpi-warn .kpi-icon{ background:rgba(232,180,90,.16) !important; color:#e8b45a; }
html[data-theme="dark"] .kpi.kpi-crit{ background:#2b1a18 !important; border-color:#4d2b25 !important; }
html[data-theme="dark"] .kpi.kpi-crit .kpi-icon{ background:rgba(232,120,100,.16) !important; color:#e8786a; }

/* أرصدة الموردين — حالة الرصيد */
.bal-due{ font-weight:700; }
html:not([data-theme="dark"]) .bal-due{ color:#a12727; }
html[data-theme="dark"] .bal-due{ color:#f0897a; }
.bal-over{ font-weight:600; }
html:not([data-theme="dark"]) .bal-over{ color:#8a5a06; }
html[data-theme="dark"] .bal-over{ color:#e8b45a; }
.bal-ok{ color:var(--text-muted); font-size:12.5px; }
table.grid tfoot th{ font-weight:700; border-top:2px solid var(--border-strong); background:transparent; }

/* لوحة اعتماد الجرد — إجراء نهائي */
.close-warn{ border-radius:12px; padding:12px 14px; margin:12px 0; line-height:1.7; font-size:13.5px; }
html:not([data-theme="dark"]) .close-warn{ background:#fdeeeb; border:1px solid #f0c5bc; color:#7a2718; }
html[data-theme="dark"] .close-warn{ background:#2b1a18; border:1px solid #4d2b25; color:#f0b6ab; }
.close-ack{ display:flex; align-items:center; gap:8px; margin:0 0 12px; font-size:13.5px; cursor:pointer; }
.close-ack input{ width:16px; height:16px; cursor:pointer; }

/* ------------------------------------------------------------------
   الأرقام في كروت اللوحة كانت white-space:nowrap — يعني الرقم مايلفش
   سطر مهما ضاق الكارت، فبيتقص. نسيبه يلف، والخط يصغّر مع عرض الشاشة. */
.kpi .value{ white-space:normal; overflow-wrap:anywhere; line-height:1.2; }
.kpi .label{ overflow-wrap:anywhere; }
.kpi-row-primary .kpi .value{ font-size:clamp(16px, 2.1vw, 25px) !important; }
.kpi-hero .value{ font-size:clamp(24px, 4.2vw, 46px) !important; }
.kpi-row-secondary .kpi .value{ font-size:clamp(13px, 1.6vw, 17px) !important; }
.kpi-row-actions .kpi .value{ font-size:clamp(14px, 1.7vw, 19px) !important; }