/* ==========================================================
   رؤية BI — نظام التصميم
   زجاج سائل (Apple Liquid Glass) · واجهة عربية RTL
   ========================================================== */

:root{
  /* ---- اللون — زجاج سائل على طريقة Apple Liquid Glass (تحديث ٢٠٢٦-١٠-١٣) ----
     أسطح شفافة فوق خلفية ألوان ناعمة، وأزرق النظام للأزرار والروابط.
     أسماء المتغيرات القديمة زي ما هي عشان كل الموديولات تفضل شغالة. */
  --ink:#1D1D1F;
  --ink-1:#1D1D1F;
  --ink-2:#3A3A3C;
  --ink-3:#5E5E63;

  --blue-900:#003A75;
  --blue-700:#0058B0;
  --blue-600:#0066CC;
  --blue-500:#007AFF;
  --blue-400:#409CFF;
  --blue-300:#8AC2FF;
  --blue-200:#BFDDFF;
  --blue-100:#E5F1FF;
  --mist:#EEF1F7;
  --white:#FFFFFF;
  --brand:#0066CC;

  --orange-300:#FFB340;
  --orange:#FF9500;
  --orange-700:#C93400;
  --orange-ink:#A64A00;

  --teal:#34C759;
  --teal-100:#E3F7E8;
  --teal-200:#A6E6B5;
  --teal-700:#1F7A35;
  --rose:#FF3B30;
  --amber:#FFCC00;

  --line:rgba(60,60,67,.16);
  --line-2:rgba(120,120,128,.10);

  /* ---- أدوار (بتتغيّر في الوضع الليلي) ---- */
  --surface:rgba(255,255,255,.66);
  --surface-2:rgba(255,255,255,.45);
  --surface-solid:#FFFFFF;
  --pop-bg:rgba(250,250,252,.90);
  --th-bg:#F6F7FA;
  --topbar-bg:transparent;
  --row-hover:rgba(0,122,255,.06);
  --row-soft:rgba(120,120,128,.07);
  --pos-ink:#1A7F37;
  --pos-num:#1A7F37;
  --pos-soft:rgba(52,199,89,.16);
  --neg-ink:#C4000F;
  --neg-num:#C4000F;
  --neg-soft:rgba(255,59,48,.12);
  --neg-soft-2:rgba(255,59,48,.20);
  --neg-line:rgba(255,59,48,.35);
  --amb-ink:#8F5300;
  --warn-bg:rgba(255,204,0,.20);
  --warn-line:rgba(255,159,10,.38);
  --warn-ink:#6B4100;
  --btn-a:#007AFF;
  --btn-b:#007AFF;
  --on-btn:#FFFFFF;
  --total-bg:#1C1C1E;
  --toast-bg:rgba(28,28,30,.88);
  --switch-off:#E3E3E8;
  --chart-grid:rgba(60,60,67,.12);
  --chart-muted:#C7C7CC;
  --tooltip-bg:rgba(28,28,30,.92);
  --side-a:#0E2A47;
  --side-b:#0E2A47;
  --side-c:#0E2A47;
  /* ---- الزجاج ---- */
  --shell:rgba(255,255,255,.55);
  --shell-ink:#1D1D1F;
  --shell-hover:rgba(0,0,0,.06);
  --nav-bg:rgba(255,255,255,.50);
  --nav-hover:rgba(0,0,0,.05);
  --nav-active:rgba(255,255,255,.95);
  --tile:#007AFF;
  --field:rgba(255,255,255,.72);
  --field-line:rgba(60,60,67,.18);
  --field-under:transparent;
  --focus-ring:rgba(0,122,255,.35);
  --hl:rgba(255,255,255,.90);
  --glass-blur:26px;
  --wall-1:#8EC5FF;
  --wall-2:#D2B8FF;
  --wall-3:#FFD3A1;
  --wall-4:#A6EBD2;

  /* ---- الشكل ---- */
  --r-sm:12px;
  --r:22px;
  --r-lg:28px;
  --r-pill:999px;
  --shadow-1:0 1px 1px rgba(0,0,0,.04), 0 12px 32px -14px rgba(30,40,80,.28);
  --shadow-2:0 2px 6px rgba(0,0,0,.06), 0 24px 60px -20px rgba(20,30,70,.42);
  --shadow-3d:none;
  --sidebar:0px;
  --topbar:132px;
  --glass:rgba(255,255,255,.66);
  --glass-stroke:rgba(255,255,255,.75);
  --glow-a:transparent;
  --glow-b:transparent;
}

/* ---- الوضع الليلي — بيتفعّل من زرار القمر في الشريط العلوي ---- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#F5F5F7;
  --ink-1:#F5F5F7;
  --ink-2:#D1D1D6;
  --ink-3:#A1A1A6;
  --blue-900:#CCE4FF;
  --blue-700:#70B4FF;
  --blue-600:#4DA3FF;
  --blue-500:#0A84FF;
  --blue-400:#409CFF;
  --blue-300:#70B4FF;
  --blue-200:#14406E;
  --blue-100:#0D2846;
  --mist:#0A0C11;
  --brand:#4DA3FF;
  --orange-ink:#FFB340;
  --teal:#30D158;
  --teal-100:#0F2E19;
  --teal-200:#1B5E30;
  --teal-700:#30D158;
  --rose:#FF453A;
  --amber:#FFD60A;
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.07);
  --surface:rgba(40,44,54,.60);
  --surface-2:rgba(40,44,54,.40);
  --surface-solid:#1E2128;
  --pop-bg:rgba(34,37,45,.92);
  --th-bg:#23262E;
  --topbar-bg:transparent;
  --row-hover:rgba(255,255,255,.05);
  --row-soft:rgba(255,255,255,.04);
  --pos-ink:#30D158;
  --pos-num:#30D158;
  --pos-soft:rgba(48,209,88,.16);
  --neg-ink:#FF6961;
  --neg-num:#FF6961;
  --neg-soft:rgba(255,69,58,.16);
  --neg-soft-2:rgba(255,69,58,.26);
  --neg-line:rgba(255,69,58,.40);
  --amb-ink:#FFD60A;
  --warn-bg:rgba(255,214,10,.12);
  --warn-line:rgba(255,214,10,.30);
  --warn-ink:#FFE57A;
  --btn-a:#0A84FF;
  --btn-b:#0A84FF;
  --on-btn:#FFFFFF;
  --total-bg:#2C2C2E;
  --toast-bg:rgba(58,58,60,.92);
  --switch-off:#39393D;
  --chart-grid:rgba(255,255,255,.08);
  --chart-muted:#48484A;
  --tooltip-bg:rgba(44,44,46,.95);
  --shell:rgba(30,33,40,.55);
  --shell-ink:#F5F5F7;
  --shell-hover:rgba(255,255,255,.08);
  --nav-bg:rgba(30,33,40,.50);
  --nav-hover:rgba(255,255,255,.06);
  --nav-active:rgba(255,255,255,.14);
  --tile:#0A84FF;
  --field:rgba(255,255,255,.08);
  --field-line:rgba(255,255,255,.14);
  --focus-ring:rgba(10,132,255,.5);
  --hl:rgba(255,255,255,.16);
  --wall-1:#0B3D91;
  --wall-2:#3E1C7A;
  --wall-3:#6B2E08;
  --wall-4:#0A4D3E;
  --shadow-1:0 16px 40px -18px rgba(0,0,0,.75);
  --shadow-2:0 24px 64px -20px rgba(0,0,0,.85);
  --glass:rgba(40,44,54,.60);
  --glass-stroke:rgba(255,255,255,.12);
  --glow-a:transparent;
  --glow-b:transparent;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--mist);
  color:var(--ink);
  font-family:"IBM Plex Sans Arabic","Tajawal",system-ui,sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{font-family:"Tajawal","IBM Plex Sans Arabic",sans-serif;margin:0}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;direction:ltr;display:inline-block}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:var(--blue-600);text-decoration:none}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--blue-200);border-radius:99px}
::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:2px solid var(--blue-500);outline-offset:2px;border-radius:var(--r-sm)}

/* ==========================================================
   الأيقونات ثلاثية الأبعاد
   ========================================================== */
.ico{width:22px;height:22px;display:block;flex:none}
.ico-lg{width:40px;height:40px}
.ico-xl{width:54px;height:54px}
.ico-tile{
  width:44px;height:44px;border-radius:14px;flex:none;
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--orange-300) 0%,var(--orange) 55%,var(--orange-700) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -7px 12px -8px rgba(5,15,40,.55),
    0 10px 20px -8px rgba(217,118,28,.45),
    0 0 22px -6px rgba(244,146,51,.55);
  position:relative;overflow:hidden;
  transition:box-shadow .18s ease, transform .18s ease;
}
.ico-tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 46%);
  pointer-events:none;
}
.ico-tile::before{
  content:"";position:absolute;width:65%;height:65%;top:-20%;left:-16%;
  background:radial-gradient(circle,rgba(255,255,255,.65),rgba(255,255,255,0) 68%);
  pointer-events:none;
}
.ico-tile .ico{width:24px;height:24px;position:relative;z-index:1}
.ico-tile.t-teal{background:linear-gradient(150deg,#4FCDBD,#0FA38F 55%,#08806F);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -7px 12px -8px rgba(5,15,40,.55),0 10px 20px -8px rgba(16,185,129,.45),0 0 22px -6px rgba(16,185,129,.6)}
.ico-tile.t-rose{background:linear-gradient(150deg,#F58C90,#E5484D 55%,#BF2F35);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -7px 12px -8px rgba(5,15,40,.55),0 10px 20px -8px rgba(244,63,94,.45),0 0 22px -6px rgba(244,63,94,.6)}
.ico-tile.t-amber{background:linear-gradient(150deg,#FFD07A,#F6A623 55%,#CE8007);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -7px 12px -8px rgba(5,15,40,.55),0 10px 20px -8px rgba(246,166,35,.45),0 0 22px -6px rgba(246,166,35,.6)}
/* t-violet: من غير override — بياخد البرتقالي الأساسي بتاع .ico-tile (ألوان رؤية، ٢٠٢٦-١٠-١١) */
.ico-tile.sm{width:34px;height:34px;border-radius:11px}
.ico-tile.sm .ico{width:19px;height:19px}

/* ==========================================================
   شاشة الدخول
   ========================================================== */
#login{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  background:
    radial-gradient(900px 500px at 85% -5%, #217ABD 0%, transparent 62%),
    radial-gradient(700px 500px at 5% 105%, #F49233 0%, transparent 55%),
    linear-gradient(155deg,var(--side-a),var(--side-b) 60%,var(--side-c));
}
#login .grid-bg{
  position:absolute;inset:0;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.3) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.3) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 50% 40%,#000 20%,transparent 72%);
}
.login-card{
  position:relative;z-index:1;width:min(400px,92vw);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r);padding:34px 30px 28px;
  backdrop-filter:blur(14px);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7);
  color:#fff;
}
.login-card h2{font-size:22px;font-weight:600;margin-bottom:4px}
.login-card p.sub{color:rgba(255,255,255,.6);font-size:13px;margin:0 0 24px}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.login-brand .name{font-family:"Tajawal";font-weight:600;font-size:19px;letter-spacing:.2px}
.login-brand .name span{color:var(--blue-400)}
.brand-mark{width:42px;height:42px;object-fit:contain;flex:none;display:block}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:rgba(255,255,255,.65);margin-bottom:6px}
.field input{
  width:100%;padding:11px 13px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:#fff;
}
.field input::placeholder{color:rgba(255,255,255,.35)}
.field input:focus{border-color:var(--blue-400);background:rgba(255,255,255,.13);outline:none}
.btn-primary{
  width:100%;padding:12px;border-radius:var(--r-sm);font-weight:600;color:var(--on-btn);
  background:linear-gradient(150deg,var(--btn-a),var(--btn-b));
  box-shadow:0 12px 24px -10px rgba(33,122,189,.8), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn-primary:hover{transform:translateY(-1px)}
.btn-primary:active{transform:translateY(1px)}
.login-err{
  display:none;margin-top:12px;padding:9px 12px;border-radius:var(--r);font-size:12.5px;
  background:rgba(244,63,94,.16);border:1px solid rgba(244,63,94,.4);color:#FFC5C8;
}
.login-hint{margin-top:18px;font-size:11.5px;color:rgba(255,255,255,.45);line-height:1.7}

/* ==========================================================
   الهيكل العام
   ========================================================== */
#app{display:none}
.sidebar{
  background:linear-gradient(180deg,var(--side-a),var(--side-b) 55%,var(--side-c));
  color:#fff;
}
.brand{display:flex;align-items:center;gap:11px;padding:20px 20px 16px}
.brand .name{font-family:"Tajawal";font-weight:600;font-size:17px;line-height:1.2}
.brand .name small{display:block;font-weight:400;font-size:10.5px;color:var(--blue-300);opacity:.85;letter-spacing:.3px}
.nav-search{
  display:flex;align-items:center;gap:8px;margin:0 12px 8px;padding:8px 10px;
  border-radius:var(--r-sm);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);
}
.nav-search .ico{width:14px;height:14px;flex:none;opacity:.5;fill:#fff}
.nav-search input{
  flex:1;background:none;border:none;outline:none;color:#fff;font-size:13px;font-family:inherit;
}
.nav-search input::placeholder{color:rgba(255,255,255,.4)}
.nav-search input::-webkit-search-cancel-button{filter:invert(1);opacity:.6;cursor:pointer}
.nav-empty{padding:16px 10px;color:rgba(255,255,255,.4);font-size:12.5px;text-align:center}
.nav{flex:1;overflow-y:auto;padding:6px 12px 12px}
.nav-label{font-size:10.5px;color:rgba(255,255,255,.35);padding:14px 10px 7px;letter-spacing:.6px}
.nav-item{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:9px 10px;border-radius:var(--r-sm);color:rgba(255,255,255,.72);
  font-size:13.5px;font-weight:400;margin-bottom:2px;text-align:start;
  transition:background .15s, color .15s;
}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item.active{background:linear-gradient(90deg,rgba(33,122,189,.28),rgba(33,122,189,.06));color:#fff;font-weight:600}
.nav-item.active .ico-tile{box-shadow:0 8px 16px -6px rgba(244,146,51,.7),inset 0 1px 0 rgba(255,255,255,.5)}
.nav-item .ico-tile{width:30px;height:30px;border-radius:var(--r-sm)}
.nav-item .ico-tile .ico{width:17px;height:17px}
.nav-item.locked{opacity:.35;cursor:not-allowed}

/* تحديث ٢٠٢٦-٠٨-٢٨ — تابات التقرير (نظرة عامة/قائمة الدخل/...) بقت
   جوه المنيو الجانبي بدل صف فوق كل تقرير (.tabs/.tab القديمة تحت،
   سيبناها كما هي مش مستخدمة دلوقتي). .nav-car سهم الفتح/القفل،
   .nav-sub حاوية التابات الفرعية تحت اسم الموديول، .nav-subitem كل
   تبويب لوحده جواها. */
.nav-car{margin-inline-start:auto;font-size:11px;opacity:.55;flex:none}
.nav-sub{display:flex;flex-direction:column;padding-bottom:4px}
.nav-sub[hidden]{display:none}
.nav-subitem{
  display:block;width:100%;text-align:start;padding:7px 10px;padding-inline-start:36px;
  border-radius:var(--r-sm);color:rgba(255,255,255,.55);font-size:12.5px;font-weight:400;
  margin-bottom:1px;transition:background .15s,color .15s;
}
.nav-subitem:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-subitem.on{background:rgba(33,122,189,.24);color:#fff;font-weight:600}
.who{
  margin:12px;padding:11px 12px;border-radius:var(--r);display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);
}
.who .av{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-weight:600;font-size:14px;color:#08214F;
  background:linear-gradient(150deg,#B9D3FF,#5A9AFF);box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.who .nm{font-size:13px;font-weight:600;line-height:1.3}
.who .rl{font-size:11px;color:var(--blue-300)}
.who button{color:rgba(255,255,255,.5);margin-inline-start:auto;padding:5px}
.who button:hover{color:#fff}

.main{min-height:100vh;display:flex;flex-direction:column}

/* ---- شريط علوي ---- */
.topbar{
  position:sticky;top:0;z-index:20;background:var(--topbar-bg);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.topbar .row1{display:flex;align-items:center;gap:16px;padding:16px 26px 10px}
.topbar-logo{height:28px;width:auto;object-fit:contain;flex:none}
.topbar-brand{font-size:14px;font-weight:600;color:var(--ink-2);letter-spacing:-.1px;margin-inline-start:-6px}
.topbar h1{font-size:21px;font-weight:600;letter-spacing:-.2px}
/* تحديث ٢٠٢٦-١٠-٠٨: اسم الصفحة جنب اسم القسم في العنوان */
.topbar h1 .pg-tab{color:var(--brand);font-weight:600}
.topbar .desc{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.topbar-who{
  margin-inline-start:auto;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink-2);
  background:var(--line-2);padding:5px 12px 5px 6px;border-radius:var(--r-sm);border:1px solid var(--line);
}
.topbar-who .av{
  width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font-weight:600;font-size:11px;color:#08214F;
  background:linear-gradient(150deg,#B9D3FF,#5A9AFF);flex:none;
}
.stamp{
  margin-inline-start:0;display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-3);
  background:var(--line-2);padding:7px 12px;border-radius:var(--r-sm);border:1px solid var(--line);
}
@media (max-width:900px){ .topbar-brand{display:none} }
.dot{width:7px;height:7px;border-radius:99px;background:var(--teal);box-shadow:0 0 0 3px rgba(16,185,129,.18)}

.filters{display:flex;gap:10px;flex-wrap:wrap;padding:0 26px 14px;align-items:flex-end}
.f-toggle{display:none;align-items:center;gap:8px;margin:0 14px 10px;padding:9px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);font-size:12.5px;font-weight:600;color:var(--ink-2);width:calc(100% - 28px)}
.f-toggle .ico{width:15px;height:15px;flex:none}
.f-toggle span{flex:1;text-align:start;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.f-toggle[aria-expanded="true"] i{transform:rotate(180deg)}
.f{display:flex;flex-direction:column;gap:4px}
.f label{font-size:10.5px;color:var(--ink-3);font-weight:600;padding-inline-start:2px}
.f select,.f input{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 11px;
  font-size:13px;min-width:130px;box-shadow:var(--shadow-1);
}
.f select:focus,.f input:focus{border-color:var(--blue-400);outline:none}
.seg{display:flex;background:var(--line-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px;gap:2px}
.seg button{padding:6px 13px;border-radius:var(--r-sm);font-size:12.5px;font-weight:600;color:var(--ink-3)}
.seg button.on{background:var(--surface);color:var(--blue-700);box-shadow:var(--shadow-1),inset 0 -2px 0 var(--orange)}
.chip-btn{
  padding:8px 13px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);
  font-size:12.5px;font-weight:600;color:var(--blue-700);box-shadow:var(--shadow-1);
  display:flex;align-items:center;gap:6px;
}
.chip-btn:hover{border-color:var(--blue-400);color:var(--blue-600)}
/* تحديث ٢٠٢٦-٠٩-٢٨: الاختيار الحالي (أساس النسبة في «من التارجت للعدد») */
.chip-btn.on{background:var(--blue-100);border-color:var(--blue-400)}
.fp-b{padding:6px 10px;font-size:11.5px;box-shadow:none}

/* ---- منطقة المحتوى ---- */
.content{padding:20px 26px 60px;flex:1}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.tab{
  padding:9px 16px;border-radius:var(--r-sm);font-size:13px;font-weight:600;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1);
}
.tab:hover{border-color:var(--blue-200)}
.tab.on{
  background:linear-gradient(150deg,var(--btn-a),var(--btn-b));color:var(--on-btn);border-color:transparent;
  box-shadow:0 10px 18px -9px rgba(33,122,189,.75),inset 0 1px 0 rgba(255,255,255,.3);
}

/* ==========================================================
   الكروت
   ========================================================== */
.grid{display:grid;gap:14px}
.grid>*{min-width:0}   /* عنصر في جريد مايوسّعش العمود أكتر من مكانه (الجداول بتتسكرل جواها) */
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.span2{grid-column:span 2}
.span3{grid-column:span 3}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-1);padding:18px;
}
.card-h{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.card-h h3{font-size:14.5px;font-weight:600}
.card-h .sub{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.card-h .tools{margin-inline-start:auto;display:flex;gap:6px}
.icon-btn{
  width:30px;height:30px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--line-2);border:1px solid var(--line);color:var(--ink-2);
}
.icon-btn:hover{background:var(--blue-100);color:var(--blue-700);border-color:var(--blue-200)}
.icon-btn .ico{width:15px;height:15px}
.icon-btn.on{background:var(--teal-100);color:var(--teal-700);border-color:var(--teal-200)}

/* ---- كارت المؤشر ---- */
.kpi{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;
  box-shadow:var(--shadow-1);position:relative;overflow:hidden;
}
.kpi::before{
  content:"";position:absolute;inset-block-start:0;inset-inline-start:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--orange),var(--orange-300));
}
.kpi.pos::before{background:linear-gradient(90deg,var(--teal),#8FE9DD)}
.kpi.neg::before{background:linear-gradient(90deg,var(--rose),#FFB3B6)}
.kpi .top{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.kpi .lbl{font-size:12px;color:var(--ink-3);font-weight:600;line-height:1.4}
.kpi .val{font-family:"Tajawal";font-size:25px;font-weight:600;letter-spacing:-.5px;line-height:1.1}
.kpi .val small{font-size:13px;font-weight:600;color:var(--ink-3);margin-inline-start:4px}
.kpi .foot{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3);margin-top:7px}
.delta{font-weight:600;font-size:11.5px;padding:2px 7px;border-radius:var(--r-sm)}
.delta.up{color:var(--pos-ink);background:rgba(16,185,129,.13)}
.delta.down{color:var(--neg-ink);background:rgba(244,63,94,.12)}
.delta.flat{color:var(--ink-3);background:var(--line-2)}

/* ---- الجداول ---- */
.tbl-wrap{overflow:auto;border-radius:var(--r-sm);border:1px solid var(--line)}
table.tbl{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--surface)}
table.tbl th{
  background:var(--line-2);color:var(--ink-2);font-weight:600;font-size:11.5px;
  padding:10px 12px;text-align:start;position:sticky;top:0;z-index:1;white-space:nowrap;
  border-bottom:1px solid var(--line);cursor:pointer;user-select:none;
}
/* تحديث ٢٠٢٦-٠٩-٢٢: دوس على عنوان أي عمود يرتّب الجدول بيه — سهم
   خافت بيبان واضح لما يبقى هو المرتّب بيه العمود دلوقتي. */
table.tbl th:not(:empty)::after{content:"⇅";margin-inline-start:6px;opacity:.35;font-size:10px}
table.tbl th.sort-asc:not(:empty)::after{content:"▲";opacity:1;color:var(--blue-700)}
table.tbl th.sort-desc:not(:empty)::after{content:"▼";opacity:1;color:var(--blue-700)}
table.tbl td{padding:9px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover{background:var(--row-hover)}
table.tbl td.n,table.tbl th.n{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
table.tbl tr.grp td{background:var(--blue-100);font-weight:600;color:var(--blue-900)}
table.tbl tr.grp:hover td{background:var(--blue-100)}
table.tbl tr.sub td{font-weight:600;background:var(--row-soft)}
table.tbl tr.total td{background:var(--total-bg);color:#fff;font-weight:600;border:0}
table.tbl tr.total:hover td{background:var(--total-bg)}
table.tbl tr.rule td{background:var(--row-soft);font-weight:600;color:var(--blue-700)}
/* تحديث ٢٠٢٦-٠٩-٢٠: أول عمود ثابت وإحنا بنسكرول يمين وشمال في
   الجداول العريضة — عشان نفضل شايفين السطر ده بتاع مين/رقم إيه.
   خلفية الصف الخاصة (grp/sub/total/rule) لسه شغالة زي ما هي لأن
   الـ selectors بتاعتها أخص من دي وبتفضل هي الغالبة. */
table.tbl th:first-child,table.tbl td:first-child{
  position:sticky;inset-inline-start:0;z-index:1;background:var(--surface);
}
table.tbl th:first-child{z-index:2}
/* تحديث ٢٠٢٦-١٠-١٣: على الآيفون (Safari) العمود الثابت كان بيختفي وإنت بتسكرل
   الجدول بالعرض وبيرجع لما تلمس الشاشة — باج معروف في WebKit مع sticky جوه
   صندوق بيتسكرل. الحل إن الصندوق نفسه ياخد طبقة رسم لوحده (translateZ)
   فالخلايا الثابتة تترسم جواه وماتضيعش أثناء السكرول السريع. */
.tbl-wrap{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-overflow-scrolling:touch}
table.tbl th:first-child,table.tbl td:first-child{-webkit-backface-visibility:hidden;backface-visibility:hidden}
table.tbl tbody tr:hover td:first-child{background:var(--row-hover)}
.ind1{padding-inline-start:26px !important}
.ind2{padding-inline-start:44px !important}
.pos-n{color:var(--pos-num)}
.neg-n{color:var(--neg-num)}
.muted{color:var(--ink-3)}

/* ---- شرائط داخل الجدول ---- */
.bar{height:6px;border-radius:var(--r-sm);background:var(--line-2);overflow:hidden;min-width:60px}
.bar i{display:block;height:100%;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--blue-500),var(--blue-400))}
.bar i.t{background:linear-gradient(90deg,var(--teal),#5BDBCB)}
.bar i.r{background:linear-gradient(90deg,var(--rose),#FF9096)}

.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-sm);font-size:11px;font-weight:600}
.pill.b{background:var(--blue-100);color:var(--blue-700)}
.pill.t{background:rgba(16,185,129,.13);color:var(--pos-ink)}
.pill.r{background:rgba(244,63,94,.12);color:var(--neg-ink)}
.pill.a{background:rgba(246,166,35,.15);color:var(--amb-ink)}
.pill.g{background:var(--line-2);color:var(--ink-2)}

.chart-box{position:relative;height:280px}
.chart-box.sm{height:210px}
.chart-box.lg{height:340px}

.empty{
  padding:38px 20px;text-align:center;color:var(--ink-3);font-size:13px;
  border:1px dashed var(--line);border-radius:var(--r);background:var(--surface-2);
}
.empty .ico-tile{margin:0 auto 12px}
.note{
  display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:var(--r);
  background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink);font-size:12px;line-height:1.7;margin-bottom:14px;
  cursor:pointer;
}
.note.b{background:var(--line-2);border-color:var(--line);color:var(--ink-2)}
/* تحديث ٢٠٢٦-٠٩-٢٠: الشرح والنصايح مقفولة افتراضيًا (سطر واحد بس)،
   ودوس عليها تفتحها كاملة — عشان التقارير ما تتملّاش نصايح محدش
   محتاج يقراها كل مرة. الآلية CSS بحتة (line-clamp) من غير أي
   تعديل في الـ HTML بتاع كل ملاحظة في كل موديول. */
.note>span:last-child{
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;flex:1;
}
.note.open>span:last-child{display:block;-webkit-line-clamp:unset;overflow:visible}
.note::after{
  content:'▾';margin-inline-start:8px;align-self:flex-start;font-size:11px;opacity:.55;flex-shrink:0;
}
.note.open::after{content:'▴'}

/* ---- شاشة التحميل ---- */
#boot{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:var(--mist)}
.spin{width:44px;height:44px;border-radius:50%;border:3px solid var(--blue-100);border-top-color:var(--blue-600);animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---- الشاشات الصغيرة ---- */
@media (max-width:1180px){
  .g5,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .span3,.span2{grid-column:span 2}
}
@media (max-width:860px){
  /* تحديث ٢٠٢٦-٠٩-٢٧: كانت 1fr — وده حدّه الأدنى عرض المحتوى، فأي جدول عريض كان
     بيوسّع الصفحة كلها على الموبايل (سكرول بالعرض) بدل ما يتسكرل جوه صندوقه */
  .g5,.g4,.g3,.g2{grid-template-columns:minmax(0,1fr)}
  .span3,.span2{grid-column:span 1}
  .topbar .row1,.filters,.content{padding-inline:14px}
  .f select,.f input{min-width:110px}
  .topbar-logo{display:none}
  /* تحديث ٢٠٢٦-٠٩-٢٧: الصف العلوي كان مابيلفّش — على التليفون زرار المنيو كان
     بيطلع برّه الشاشة والصفحة كلها بتتسكرل بالعرض */
  .topbar .row1{flex-wrap:wrap;gap:8px 10px;padding-top:12px}
  .topbar .pg-head{flex:1 1 140px;min-width:0}
  .topbar h1{font-size:18px;line-height:1.35}
  .topbar h1 .pg-tab{font-size:15px;display:inline-block}
  .topbar .desc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #topbarWhoName{display:none}
  .topbar-who{padding:4px}
  .stamp{order:10;flex:1 1 100%;min-width:0;font-size:11px;border-radius:var(--r-sm);padding:6px 10px}
  /* الفلاتر متقفلة ورا زرار — ودوسة بتفتحها */
  .f-toggle{display:flex}
  .filters{display:none}
  .filters.open{display:flex}
  /* التواريخ المقفولة (صفحات noDates/ownDates) ملهاش لازمة على الشاشة الصغيرة */
  .filters .f.f-off{display:none}
}

/* ==========================================================
   إدارة المستخدمين — نموذج، مفاتيح، تنبيهات
   ========================================================== */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:860px){.form-grid{grid-template-columns:1fr}}
.inp{display:flex;flex-direction:column;gap:5px}
.inp label{font-size:11.5px;font-weight:600;color:var(--ink-2)}
.inp input,.inp select{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;font-size:13px;width:100%;
}
.inp input:focus,.inp select:focus{border-color:var(--blue-400);outline:none;box-shadow:0 0 0 3px rgba(33,122,189,.12)}
.inp .hint{font-size:11px;color:var(--ink-3)}
.inp.bad input{border-color:var(--rose);background:var(--neg-soft)}

.switch{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--line);
  border-radius:12px;background:var(--line-2);cursor:pointer}
.switch input{appearance:none;width:38px;height:22px;border-radius:99px;background:var(--switch-off);position:relative;
  transition:background .18s;flex:none;cursor:pointer}
.switch input::after{content:"";position:absolute;inset-block-start:3px;inset-inline-start:3px;width:16px;height:16px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s}
.switch input:checked{background:var(--blue-600)}
.switch input:checked::after{transform:translateX(-16px)}
.switch .t{font-size:12.5px;font-weight:600}
.switch .d{font-size:11px;color:var(--ink-3)}

.perm{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.perm-h{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--line-2);border-bottom:1px solid var(--line)}
.perm-h .nm{font-size:13px;font-weight:600}
.perm-h label{margin-inline-start:auto;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--blue-700);cursor:pointer}
.perm-b{padding:8px 12px 12px;display:flex;flex-wrap:wrap;gap:6px}
.pcheck{display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:11.5px;cursor:pointer;background:var(--surface);color:var(--ink-2)}
.pcheck:hover{border-color:var(--blue-300)}
.pcheck.on{background:var(--blue-100);border-color:var(--blue-200);color:var(--blue-700);font-weight:600}
.pcheck input{accent-color:var(--blue-600);width:14px;height:14px;cursor:pointer}
.perm.all{opacity:.45;pointer-events:none}

.btn{padding:9px 16px;border-radius:var(--r-sm);font-size:13px;font-weight:600;border:1px solid transparent}
.btn.p{background:linear-gradient(150deg,var(--btn-a),var(--btn-b));color:var(--on-btn);
  box-shadow:0 10px 18px -9px rgba(33,122,189,.7),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.p:hover{transform:translateY(-1px)}
.btn.s{background:var(--surface);border-color:var(--line);color:var(--ink-2)}
.btn.s:hover{border-color:var(--blue-300);color:var(--blue-700)}
.btn.d{background:var(--neg-soft);border-color:var(--neg-line);color:var(--neg-ink)}
.btn.d:hover{background:var(--neg-soft-2)}
.btn-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px;align-items:center}

.pwbox{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:var(--r);
  background:var(--blue-100);border:1px solid var(--blue-200);color:var(--blue-900);font-size:12.5px}
.pwbox code{font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:600;direction:ltr;
  background:var(--surface);padding:3px 9px;border-radius:var(--r-sm);border:1px solid var(--blue-200)}

#toast{position:fixed;inset-block-end:24px;inset-inline-start:24px;z-index:90;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--toast-bg);color:#fff;padding:11px 16px;border-radius:var(--r);font-size:12.5px;font-weight:600;
  box-shadow:0 18px 40px -18px rgba(20,22,43,.7);animation:tin .25s ease}
.toast.ok{background:#0B7F71}
.toast.err{background:#C0343B}
/* تحديث ٢٠٢٦-١٠-١١: «تراجع» بعد إجراءات سير العمل — شريط برتقالي بيخلص مع المهلة */
.toast-undo{display:flex;align-items:center;gap:14px;position:relative;overflow:hidden;padding-bottom:13px}
.toast-undo button{background:var(--surface);color:var(--ink);border:0;border-radius:var(--r-sm);padding:5px 12px;font:inherit;font-weight:600;cursor:pointer}
.toast-undo button b{display:inline-block;min-width:1.2em;color:var(--ink-3);font-weight:600}
.toast-undo button:disabled{opacity:.6;cursor:default}
.toast-undo i{position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--orange);transform-origin:left;animation:undoBar linear forwards}
[dir="rtl"] .toast-undo i{transform-origin:right}
@keyframes undoBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}

/* ==========================================================
   شريط الفلاتر التفصيلية · نسخ التليفون · الطي والفرد
   ========================================================== */
.dbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;padding:9px 12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-1)}
.dbar.active{border-color:var(--blue-300);background:linear-gradient(180deg,var(--row-soft),#fff)}
.dbar-t{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--ink-3)}
.dbar-t .ico{width:14px;height:14px}
.dbar select,.dbar input{background:var(--line-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:6px 10px;font-size:12px;min-width:120px;max-width:180px}
.dbar select:focus,.dbar input:focus{border-color:var(--blue-400);background:var(--surface);outline:none}
.dchk{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink-2);
  padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;background:var(--line-2)}
.dchk.on{background:var(--blue-100);border-color:var(--blue-200);color:var(--blue-700)}
.dchk input{accent-color:var(--blue-600);cursor:pointer}
.dclear{margin-inline-start:auto;font-size:12px;font-weight:600;color:var(--blue-600);padding:6px 10px}

/* ---- المكافآت: سطر مضغوط بدل كارت كامل ---- */
.bchip{display:flex;align-items:center;gap:10px;padding:7px 10px;margin-bottom:5px;
  background:var(--line-2);border:1px solid var(--line);border-radius:var(--r-sm);font-size:12px}
.bchip.off{opacity:.5}
.bchip-x{flex:1;min-width:0;display:flex;gap:7px;align-items:baseline;overflow:hidden}
.bchip-x b{white-space:nowrap}
.bchip-x .muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px}
.bchip-m{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.bchip-n{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:64px;text-align:end}
.bchip-del{width:22px;height:22px;flex:none;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-3);cursor:pointer;
  font-size:11px;font-family:inherit;line-height:1}
.bchip-del:hover{background:var(--neg-soft);border-color:var(--neg-line);color:var(--neg-ink)}

/* ---- قوايم الفلاتر متعدّدة الاختيار ---- */
.fw.ms{position:relative}
.ms-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--line-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:6px 10px;font-size:12px;min-width:130px;max-width:190px;
  font-family:inherit;color:var(--ink-1);cursor:pointer;text-align:start}
.ms-btn:hover{border-color:var(--blue-300)}
.ms-btn.on{background:var(--blue-100);border-color:var(--blue-200);color:var(--blue-700);font-weight:600}
.ms-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-car{font-style:normal;font-size:10px;opacity:.6;flex:none}
.ms-pop{position:absolute;z-index:40;top:calc(100% + 5px);inset-inline-start:0;
  min-width:230px;max-width:300px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:0 10px 30px rgba(20,35,70,.14);padding:8px}
/* نفس شكل .ms-pop بالظبط — كلاس منفصل عمدًا لفلاتر سير العمل (mod-workflow.js)
   عشان ميتلخبطش مع wireMulti بتاع core.js اللي بيدوّر بالاسم "ms-pop" على كل تاب */
.wf-ms-pop{position:absolute;z-index:40;top:calc(100% + 5px);inset-inline-start:0;
  min-width:230px;max-width:300px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:0 10px 30px rgba(20,35,70,.14);padding:8px}
.ms-q{width:100%;margin-bottom:6px;background:var(--line-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:6px 9px;font-size:12px;font-family:inherit}
.ms-q:focus{border-color:var(--blue-400);background:var(--surface);outline:none}
.ms-act{display:flex;gap:6px;margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.ms-act button{flex:1;font-size:11.5px;font-weight:600;padding:5px;border-radius:var(--r-sm);
  background:var(--line-2);border:1px solid var(--line);color:var(--ink-2);
  font-family:inherit;cursor:pointer}
.ms-act button:hover{background:var(--blue-100);border-color:var(--blue-200);color:var(--blue-700)}
.ms-list{max-height:260px;overflow:auto}
.ms-i{display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:var(--r-sm);
  font-size:12.5px;color:var(--ink-1);cursor:pointer}
.ms-i:hover{background:var(--line-2)}
.ms-i input{accent-color:var(--blue-600);cursor:pointer;flex:none}
.ms-i span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.dclear:hover{text-decoration:underline}

.ph{display:inline-flex;align-items:center;gap:5px;direction:ltr}
.cp{width:22px;height:22px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--line-2);border:1px solid var(--line);color:var(--ink-3);flex:none}
.cp:hover{background:var(--blue-100);color:var(--blue-700);border-color:var(--blue-200)}
.cp.done{background:rgba(16,185,129,.18);color:var(--pos-ink);border-color:rgba(16,185,129,.35)}
.cp .ico{width:12px;height:12px}

tr.exp-h{cursor:pointer}
tr.exp-h:hover td{background:var(--row-hover)}
.caret{display:inline-block;width:14px;font-size:10px;color:var(--blue-600);transition:transform .15s}
tr.open .caret{transform:rotate(-90deg)}
tr.exp-c{display:none}
tr.exp-c.show{display:table-row}

.audit-ok{padding:26px;text-align:center;border-radius:var(--r);background:rgba(16,185,129,.08);
  border:1px solid rgba(16,185,129,.25);color:var(--pos-ink);font-size:13px;font-weight:600}
.sev{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-sm);font-size:11px;font-weight:600}
.sev.hi{background:rgba(244,63,94,.14);color:var(--neg-ink)}
.sev.md{background:rgba(246,166,35,.16);color:var(--amb-ink)}
.sev.lo{background:var(--line-2);color:var(--ink-2)}

/* شرائح العمولة */
.tier{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px;padding:7px 10px;
  background:var(--line-2);border:1px solid var(--line);border-radius:var(--r)}
.tier input{width:110px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 9px;font-size:12.5px}
.tier input:focus{border-color:var(--blue-400);outline:none}
.tDel{margin-inline-start:auto;width:24px;height:24px;border-radius:var(--r-sm);color:var(--rose);
  background:var(--surface);border:1px solid var(--line);font-size:12px}
.tDel:hover{background:var(--neg-soft);border-color:var(--neg-line)}

/* حقول شريط الفلترة بمسمياتها */
.fw{display:flex;flex-direction:column;gap:3px}
.fw label{font-size:10px;font-weight:600;color:var(--ink-3);padding-inline-start:3px}
.dbar .fw select,.dbar .fw input{margin:0}

/* تنبيه وضع الأرصدة التراكمية */
.date-note{display:flex;align-items:center;gap:8px;width:100%;margin-top:2px;
  padding:8px 12px;border-radius:var(--r);font-size:12px;line-height:1.7;
  background:var(--blue-100);border:1px solid var(--blue-200);color:var(--blue-900)}
.date-note .ico{width:15px;height:15px;flex:none}
.f input:disabled{cursor:not-allowed;background:var(--line-2)}

/* الموارد البشرية: تعديل داخل الجدول + مفتاح تشغيل */
input.cell{background:transparent;border:1px solid transparent;border-radius:var(--r-sm);
  padding:4px 7px;font-size:12.5px;width:100%;min-width:90px}
input.cell:hover{border-color:var(--line);background:var(--line-2)}
input.cell:focus{border-color:var(--blue-400);background:var(--surface);outline:none;
  box-shadow:0 0 0 3px rgba(33,122,189,.12)}
input.cell.num{text-align:end;font-variant-numeric:tabular-nums}
.sw{display:inline-flex;cursor:pointer}
.sw input{appearance:none;width:34px;height:19px;border-radius:99px;background:var(--switch-off);
  position:relative;transition:background .18s;cursor:pointer}
.sw input::after{content:"";position:absolute;inset-block-start:2.5px;inset-inline-start:2.5px;
  width:14px;height:14px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s}
.sw input:checked{background:var(--teal)}
.sw input:checked::after{transform:translateX(-15px)}

/* صندوق قاعدة العمولة */
.rulebox{border:1px solid var(--line);border-radius:var(--r);padding:13px;margin-bottom:10px;background:var(--surface)}
.rulebox .inp label{font-size:10.5px}
.rulebox input,.rulebox select{padding:7px 10px;font-size:12.5px}
.tier .tLbl{text-align:start}

/* رسالة خطأ على شاشة التحميل */
.boot-err{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px 32px;
  box-shadow:var(--shadow-2);max-width:420px;font-size:14px;line-height:1.8}

/* قايمة التقارير: التصميم كله inline في index.html
   عشان يبقى محصّن ضد التخزين المؤقت — متحطش قواعد للدرج هنا */

/* رقم صغير تحت رقم أساسي في الجداول — للقيمة جنب العدد */
.tbl .sub-n{font-size:10.5px;color:var(--ink-3);font-weight:600;line-height:1.5;margin-top:2px}

/* تحديث ٢٠٢٦-٠٩-٢٢: شريط أزرار الفلاتر/التابات وقوايم الـ"chips"
   (نوع العدد/المرحلة إلخ) — كانت مكتوبة جوه styleOnce() في مود
   التشغيل بس (بتتحط في الصفحة أول ما حد يفتح تبويب فيه)، مع إن
   مودیولات تانية (سير العمل، التسويق، الموارد البشرية) بتستخدمها
   برضه. اتنقلوا هنا عشان يشتغلوا دايمًا بغض النظر عن أي تبويب
   المستخدم فاتحه، ده كان اعتماد مستتر ممكن يسيب الشكل مكسور. */
.seg-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.seg-row button{padding:8px 14px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--surface);font-family:inherit;font-size:12.5px;font-weight:600;
  color:var(--ink-2);cursor:pointer}
.seg-row button.on{border-color:var(--blue-400);background:var(--blue-100);color:var(--blue-600)}

.gchip{display:inline-flex;align-items:center;gap:5px;margin:0 0 4px 4px;
  padding:4px 8px;border-radius:var(--r-sm);background:var(--line-2);
  border:1px solid var(--line);font-size:11.5px;line-height:1.5;max-width:100%}
.gchip button{border:0;background:none;cursor:pointer;color:var(--ink-3);
  font-size:14px;line-height:1;padding:0 1px;font-family:inherit}
.gchip button:hover{color:var(--rose)}
.gadd{display:inline-flex;gap:4px;align-items:center;margin-top:3px}
.gadd input{width:120px;background:var(--surface);border:1px dashed var(--line);
  border-radius:var(--r-sm);padding:4px 7px;font-size:11.5px;font-family:inherit;color:var(--ink)}
.gadd input:focus{border-style:solid;border-color:var(--blue-400);outline:none}
.gadd .btn{padding:3px 9px;font-size:12px;cursor:pointer}


/* ==========================================================
   زجاج سائل — Apple Liquid Glass (تحديث ٢٠٢٦-١٠-١٣)
   طبقة فوق التصميم: نفس الأصناف، شكل جديد. خلفية ألوان ناعمة ثابتة،
   وفوقها أسطح زجاج (شفافية + تمويه + لمعة على الحافة العليا).
   كل الألوان من المتغيرات فوق — مفيش لون مكتوب مباشرة.
   قاعدة مهمة: أي حاجة sticky أو عائمة (رأس الجدول، أول عمود، القوايم
   المنسدلة، النوافذ) خلفيتها --surface-solid / --th-bg / --pop-bg مش
   --surface، وإلا المحتوى هيبان من تحتها وهو بيتسكرل.
   ========================================================== */
body{
  font-family:-apple-system,"SF Arabic","IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif;
  background:var(--mist);
}
/* الخلفية الملوّنة — ثابتة ورا كل حاجة (pseudo ثابت بدل background-attachment عشان الموبايل) */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60vw 50vh at 100% 0%, var(--wall-1), transparent 70%),
    radial-gradient(50vw 50vh at 0% 30%, var(--wall-2), transparent 70%),
    radial-gradient(55vw 50vh at 30% 100%, var(--wall-3), transparent 70%),
    radial-gradient(45vw 45vh at 90% 85%, var(--wall-4), transparent 70%),
    var(--mist);
  opacity:.75;
}
h1,h2,h3,h4,.display,.kpi .val,.brand .name,.login-brand .name{font-family:-apple-system,"SF Arabic","IBM Plex Sans Arabic","Segoe UI",sans-serif}
/* تحديث ٢٠٢٦-١٠-١٢: المتصفح بيعرض b/strong/th بوزن 700 — القواعد: 400 و600 بس */
b,strong,th{font-weight:600}

/* ---- سطح الزجاج: كل الكروت والألواح ---- */
.card,.kpi,.dbar,.perm,.rulebox,.boot-err,.login-card,.appbar,.cmdbar,.filters,.who,.empty{
  background:var(--surface);
  border:1px solid var(--glass-stroke);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  box-shadow:inset 0 1px 0 var(--hl), var(--shadow-1);
}

/* ---- شريط التطبيق: كبسولة زجاج عائمة فوق ---- */
.appbar{
  position:sticky;top:10px;z-index:40;height:54px;margin:10px 10px 0;
  display:flex;align-items:center;gap:4px;padding-inline:7px;
  border-radius:var(--r-pill);color:var(--shell-ink);background:var(--shell);
}
.ab-btn{width:40px;height:40px;display:grid;place-items:center;color:inherit;border-radius:50%;flex:none}
.ab-btn:hover{background:var(--shell-hover)}
.ab-btn .ico{width:20px;height:20px}
.ab-brand{display:flex;align-items:center;gap:10px;padding-inline:8px 4px;white-space:nowrap;min-width:0}
.ab-brand img{width:28px;height:28px;object-fit:contain;flex:none}
.ab-brand b{font-size:15.5px;font-weight:600}
.ab-sep{width:1px;height:20px;background:currentColor;opacity:.2;margin-inline:8px;flex:none}
.ab-mod{font-size:14px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ab-end{margin-inline-start:auto;display:flex;align-items:center;gap:4px}
.appbar .topbar-who{
  margin:0;background:var(--field);border:1px solid var(--field-line);color:var(--ink);font-weight:600;
  padding:4px 12px 4px 4px;border-radius:var(--r-pill);
}
.appbar .topbar-who .av{width:32px;height:32px;border-radius:50%;font-size:13px;color:#FFFFFF;
  background:linear-gradient(160deg,var(--orange-300),var(--orange));box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}

/* ---- شريط الأوامر: كبسولة أصغر ---- */
.cmdbar{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px;padding:4px;margin:14px 24px 0;
  border-radius:var(--r-pill);
}
.cmd{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--r-pill);font-size:13px;
  color:var(--ink);background:transparent;border:0;box-shadow:none;font-weight:400}
.cmd:hover{background:var(--nav-hover);color:var(--ink)}
.cmd .ico{width:16px;height:16px;color:var(--blue-600)}
.cmd-sep{width:1px;align-self:stretch;margin:7px 2px;background:var(--line)}

/* ---- القائمة الجانبية: لوح زجاج عائم ---- */
.sidebar{background:var(--nav-bg);color:var(--ink);border:1px solid var(--glass-stroke);
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  box-shadow:inset 0 1px 0 var(--hl), var(--shadow-2)}
.brand{padding:16px 16px 10px}
.brand .name{font-weight:600;font-size:16px}
.brand .name small{color:var(--ink-3);font-size:11px;letter-spacing:0}
.brand-mark{width:32px;height:32px}
.nav-search{background:var(--field);border:1px solid var(--field-line);border-radius:var(--r-pill);margin:0 12px 8px;box-shadow:none}
.nav-search .ico{fill:none;color:var(--ink-3);opacity:1}
.nav-search input{color:var(--ink)}
.nav-search input::placeholder{color:var(--ink-3)}
.nav-search input::-webkit-search-cancel-button{filter:none}
.nav-empty{color:var(--ink-3)}
.nav{padding:4px 10px 12px}
.nav-label{font-size:11.5px;font-weight:600;color:var(--ink-3);letter-spacing:0;padding:14px 12px 5px}
.nav-item{gap:10px;padding:7px 10px;border-radius:var(--r-sm);color:var(--ink);font-size:13.5px;font-weight:400;margin-bottom:2px}
.nav-item:hover{background:var(--nav-hover);color:var(--ink)}
.nav-item.active{background:var(--nav-active);color:var(--ink);font-weight:600;
  box-shadow:inset 0 1px 0 var(--hl),0 6px 16px -10px rgba(0,0,0,.45)}
.nav-item .ico-tile{width:28px;height:28px;border-radius:8px}
.nav-item .ico-tile .ico{width:16px;height:16px}
.nav-subitem{color:var(--ink-2);border-radius:var(--r-pill);padding:6px 12px;padding-inline-start:48px;font-size:13px;font-weight:400}
.nav-subitem:hover{background:var(--nav-hover);color:var(--ink)}
.nav-subitem.on{background:var(--blue-100);color:var(--blue-700);font-weight:600}
.sidebar .nav::-webkit-scrollbar-thumb{background:var(--field-line)}
.who{border-radius:var(--r);margin:10px;background:var(--surface-2)}
.who .av{border-radius:50%;background:linear-gradient(160deg,var(--blue-400),var(--blue-500));color:var(--on-btn);box-shadow:inset 0 1px 0 rgba(255,255,255,.45);font-weight:600}
.who .nm{font-weight:600}
.who .rl{color:var(--ink-3)}
.who button{color:var(--ink-3)}
.who button:hover{color:var(--ink)}

/* ---- الأيقونات: مربع ناعم بلمعة (زي أيقونات التطبيقات) ---- */
.ico-tile,.ico-tile.t-teal,.ico-tile.t-rose,.ico-tile.t-amber,.ico-tile.t-violet{
  --tone:var(--tile);
  background:linear-gradient(160deg,color-mix(in srgb,var(--tone) 55%,#FFFFFF),var(--tone) 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 14px -8px var(--tone);
  border-radius:12px;
}
.ico-tile::before{display:none}
.ico-tile::after{display:block;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 50%)}
.ico-tile.t-teal{--tone:#34C759}
.ico-tile.t-rose{--tone:#FF3B30}
.ico-tile.t-amber{--tone:#FF9500}
.ico-tile.t-violet{--tone:#AF52DE}
.ico-tile.sm{width:34px;height:34px;border-radius:10px}
.ico-tile.sm .ico{width:18px;height:18px}

/* ---- رأس الصفحة والفلاتر ---- */
.topbar{position:relative;top:auto;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:0}
.topbar .row1{padding:18px 24px 10px;gap:12px}
.topbar h1{font-size:28px;font-weight:600;letter-spacing:-.4px}
.topbar h1 .pg-tab{color:var(--ink-3);font-weight:400;font-size:20px}
.topbar .desc{color:var(--ink-3);font-size:13px}
.stamp{background:var(--field);border:1px solid var(--field-line);padding:6px 12px;font-size:12px;color:var(--ink-2);border-radius:var(--r-pill)}
.dot{background:var(--teal);box-shadow:0 0 0 3px var(--pos-soft)}
.filters{margin:0 24px 16px;padding:12px 16px;gap:12px;border-radius:var(--r)}
.f label{font-size:11.5px;font-weight:600;color:var(--ink-2);padding-inline-start:10px}
.f select,.f input,.inp input,.inp select,.dbar select,.dbar input,.ms-btn,.tier input,.ms-q,.field input{
  background:var(--field);border:1px solid var(--field-line);border-radius:var(--r-pill);box-shadow:none;color:var(--ink);
}
.f select,.f input{padding:8px 14px}
.inp input,.inp select{padding:9px 14px}
.f select:focus,.f input:focus,.inp input:focus,.inp select:focus,.dbar select:focus,.dbar input:focus,.tier input:focus,.ms-q:focus,.field input:focus{
  border-color:var(--blue-500);box-shadow:0 0 0 3px var(--focus-ring);outline:none;background:var(--field);
}
.seg{background:var(--line-2);border:1px solid var(--field-line);border-radius:var(--r-pill);padding:3px}
.seg button{border-radius:var(--r-pill);color:var(--ink-2);font-weight:400}
.seg button.on{background:var(--surface-solid);color:var(--ink);font-weight:600;box-shadow:0 2px 8px -2px rgba(0,0,0,.25),inset 0 1px 0 var(--hl)}
.chip-btn{border-radius:var(--r-pill);background:var(--field);border-color:var(--field-line);color:var(--ink);font-weight:400;box-shadow:none}
.chip-btn:hover{background:var(--surface-solid);border-color:var(--field-line);color:var(--ink)}
.chip-btn.on{background:var(--blue-100);border-color:var(--blue-500);color:var(--blue-700)}
.f-toggle{border-radius:var(--r-pill);background:var(--surface);border-color:var(--glass-stroke);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}
.date-note{border-radius:var(--r-sm)}
.content{padding:4px 24px 48px}
.f input:disabled{background:var(--line-2)}

/* ---- الكروت والمؤشرات ---- */
.grid{gap:16px}
.card,.kpi{border-radius:var(--r)}
.card{padding:18px}
.card-h{gap:11px;margin-bottom:12px}
.card-h h3{font-size:15px;font-weight:600}
.kpi{padding:18px}
.kpi::before{display:none}
.kpi .lbl{font-size:12.5px;color:var(--ink-2)}
.kpi .top>div{min-width:0}
/* الرقم بيصغر مع عرض الشاشة عشان ميتقصّش في صفوف الخمس كروت */
.kpi .val{font-size:clamp(19px,1.55vw,26px);font-weight:600;letter-spacing:-.4px}
.kpi .val small{font-weight:400}
.delta{border-radius:var(--r-pill);font-weight:600}
.delta.up{background:var(--pos-soft);color:var(--pos-ink)}
.delta.down{background:var(--neg-soft);color:var(--neg-ink)}
.icon-btn{border-radius:50%;background:var(--field);border:1px solid var(--field-line);color:var(--ink-2)}
.icon-btn:hover{background:var(--surface-solid);color:var(--blue-600);border-color:var(--field-line)}
.dbar{border-radius:var(--r)}
.dbar.active{box-shadow:inset 0 1px 0 var(--hl),var(--shadow-1),inset 0 0 0 1.5px var(--blue-500)}
.dchk,.dclear{border-radius:var(--r-pill)}
.dchk{background:var(--field);border-color:var(--field-line)}
/* القوايم المنسدلة والنوافذ: زجاج شبه مصمت عشان الكلام يتقري */
.ms-pop,.wf-ms-pop,.cmp-ms-p,dialog{
  background:var(--pop-bg) !important;border:1px solid var(--glass-stroke) !important;
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  box-shadow:inset 0 1px 0 var(--hl),var(--shadow-2) !important;
}
.ms-pop,.wf-ms-pop{border-radius:var(--r)}
/* تحديث ٢٠٢٦-١٠-١٥: القايمة المنسدلة كانت بتستخبى ورا الكروت اللي تحتها (فلترة التقرير وغيرها) — كل سطح زجاج
   (backdrop-filter) بيعمل stacking context لوحده، فـ z-index بتاع القايمة بيتحسب جوه اللوح بتاعها بس والكروت اللي بعده
   بتترسم فوقها. اللوح اللي فيه قايمة مفتوحة بيطلع فوق اللي بعده (تحت شريط التطبيق z-index:40). */
:is(.card,.kpi,.dbar,.perm,.rulebox,.filters,.who,.empty):has(.ms-pop:not([hidden]),.wf-ms-pop:not([hidden]),.cmp-ms[open]){position:relative;z-index:30}
/* وكمان: القايمة قبل ما fitPop (core.js) يظبطها بتطلع شوية برّه الشاشة، والصفحة كانت بتتزق بالعرض على الموبايل
   (scrollX = -٦٤) فالقياس يبوظ. clip (مش hidden) عشان مايعملش scroll container ولا يبوّظ الـ sticky. */
.main{overflow-x:clip}
/* تحديث ٢٠٢٦-١٠-٢١: اختيارات القايمة المنسدلة الأصلية (select) كانت بتطلع بخلفية بيضا وكلام فاتح في الليلي —
   خلفية الحقل نفسه شفافة (زجاج) والمتصفح مابيعرفش يرسم القايمة بخلفية شفافة. خلفية مصمتة من المتغيرات في الوضعين. */
select option,select optgroup{background-color:var(--surface-solid);color:var(--ink)}
select option:disabled{color:var(--ink-3)}
dialog::backdrop{background:rgba(0,0,0,.25);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ms-act button{border-radius:var(--r-pill)}

/* ---- الجداول ---- */
.tbl-wrap{border-radius:var(--r-sm);border-color:var(--line);background:transparent}
table.tbl{background:transparent}
/* الراس والعمود الأول sticky — خلفية مصمتة عشان مايبانش اللي تحتهم */
table.tbl th{background:var(--th-bg);color:var(--ink-2);font-weight:600;font-size:12px;border-bottom:1px solid var(--line)}
table.tbl td{border-bottom-color:var(--line-2)}
table.tbl th:first-child{background:var(--th-bg)}
table.tbl td:first-child{background:var(--surface-solid)}
table.tbl tbody tr:hover td:first-child{background:linear-gradient(var(--row-hover),var(--row-hover)),var(--surface-solid)}
table.tbl tr.sub td:first-child,table.tbl tr.rule td:first-child{background:linear-gradient(var(--row-soft),var(--row-soft)),var(--surface-solid)}
table.tbl tr.grp td,table.tbl tr.grp:hover td{background:var(--blue-100)}
table.tbl th.sort-asc:not(:empty)::after,table.tbl th.sort-desc:not(:empty)::after{color:var(--blue-600)}
table.tbl tr.total td{color:#FFFFFF;font-weight:600}

/* ---- الشرائط والشارات ---- */
.bar{border-radius:var(--r-pill);background:var(--line-2)}
.bar i{border-radius:var(--r-pill);background:var(--blue-500)}
.bar i.t{background:var(--teal)}
.bar i.r{background:var(--rose)}
.pill,.sev,.pcheck,.gchip{border-radius:var(--r-pill)}
.pill.t{background:var(--pos-soft)}
.pill.r{background:var(--neg-soft)}
.pill.a{background:var(--warn-bg)}
.note{border-radius:var(--r-sm)}
.empty{border-style:solid;border-radius:var(--r)}
.audit-ok,.pwbox,.perm,.rulebox,.tier,.bchip{border-radius:var(--r-sm)}
.switch{border-radius:var(--r-sm);background:var(--field);border-color:var(--field-line)}

/* ---- الأزرار ---- */
.btn,.btn-primary,.tab,.seg-row button,.toast-undo button,.cp,.bchip-del,.tDel{border-radius:var(--r-pill)}
.btn{font-weight:600}
.btn.p,.tab.on,.btn-primary{background:var(--btn-a);color:var(--on-btn);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 18px -10px var(--btn-a)}
.btn.p:hover,.btn-primary:hover{transform:none;filter:brightness(1.08)}
.btn.s{background:var(--field);border-color:var(--field-line);color:var(--ink)}
.btn.s:hover{background:var(--surface-solid);border-color:var(--field-line);color:var(--ink)}
.seg-row button{font-weight:400;background:var(--field);border-color:var(--field-line)}
.seg-row button.on{border-color:var(--blue-500);background:var(--blue-100);color:var(--blue-700);font-weight:600}
.switch input:checked,.sw input:checked{background:var(--teal)}
.toast{border-radius:var(--r-pill);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}

/* ---- شاشة الدخول ---- */
#login{background:transparent}
#login::before{display:none}
#login .grid-bg{display:none}
.login-card{border-radius:var(--r-lg);color:var(--ink)}
.login-card h2{font-weight:600}
.login-card p.sub,.login-hint{color:var(--ink-3)}
.login-brand .name{font-weight:600}
.login-brand .name span{color:var(--blue-600)}
.field label{color:var(--ink-2);font-weight:600;padding-inline-start:10px}
.field input{padding:11px 16px}
.field input::placeholder{color:var(--ink-3)}
.btn-primary{padding:11px}
.login-err{background:var(--neg-soft);border-color:var(--neg-line);color:var(--neg-ink);border-radius:var(--r-sm)}

#boot{background:transparent}
.spin{border-color:var(--blue-100);border-top-color:var(--blue-500)}

/* ---- المسافات (تحديث ٢٠٢٦-١٠-١٣) ----
   القائمة الجانبية: خانة البحث كانت لازقة في حافة اللوح من فوق.
   كارت «لم يسجّلوا أي نشاط اليوم» بيتملى بعد الرسم جوه #kpiNudge وكان لازق في كارت مدير المبيعات.
   الشارات اللي بتلف على سطرين كانت لازقة في بعض. */
.sidebar{padding-top:12px}
#kpiNudge:not(:empty){margin-bottom:14px}
.pill{margin-block:1px}
/* مفاتيح التشغيل (الإعدادات ← نموذج التسويق وغيره): العنوان والوصف كانوا سطر واحد
   بيطلع برّه الكارت، والشبكة مكتوبة 3 أعمدة inline فكانت بتتزنق على الموبايل */
.switch>span{min-width:0}
.switch .t,.switch .d{display:block;overflow-wrap:anywhere}
@media (max-width:860px){.form-grid{grid-template-columns:minmax(0,1fr) !important}}

/* الشاشات الصغيرة: تمويه أخف عشان الأداء */
@media (max-width:860px){
  :root{--glass-blur:16px}
  /* تحديث ٢٠٢٦-١٠-١٣: التمويه على الكارت اللي فيه جدول بيلخبط العمود الثابت في Safari —
     على الموبايل الكارت ده بيبقى شبه مصمت من غير تمويه */
  .card:has(.tbl-wrap){-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--pop-bg)}
  .appbar{margin:8px 8px 0;top:8px}
  .topbar .row1,.content{padding-inline:14px}
  .filters{margin-inline:14px}
  .cmdbar{margin:12px 14px 0}
  .topbar h1{font-size:22px}
  .ab-sep,.ab-mod,.appbar #topbarWhoName{display:none}
  .appbar .topbar-who{padding:2px;background:transparent;border:0}
}
/* لو المستخدم مفعّل «تقليل الشفافية» في جهازه: أسطح مصمتة */
@media (prefers-reduced-transparency:reduce){
  :root,:root[data-theme="dark"]{--surface:var(--surface-solid);--shell:var(--surface-solid);--nav-bg:var(--surface-solid)}
  body::before{display:none}
  *{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
}