:root{
--bg:#f5f7fb;
  --panel:#ffffff;
  --panel2:#f0f4fb;
  --text:#0b1220;
  --muted:#56627a;
  --brand:#1fb3a9;   /* teal from logo */
  --brand2:#d3172b;  /* red from logo */
  --border:#d7e0ee;
  --shadow:0 10px 30px rgba(10,20,30,.08);
}
[data-theme="light"]{--bg:#f5f7fb;
  --card:#ffffff;
  --card2:#f0f4fb;
  --text:#0b1220;
  --muted:#56627a;
  --brand:#1fb3a9;   /* teal from logo */
  --brand2:#d3172b;  /* red from logo */
  --line:#d7e0ee;
  --shadow:0 10px 30px rgba(10,20,30,.08);}

[data-theme="dark"]{
--bg:#070b14;
  --card:#0b1220;
  --card2:#0f1b2f;
  --text:#e7eefc;
  --muted:#9fb3d1;
  --brand:#3dd6d0;
  --brand2:#ff4d4f;
  --line:rgba(255,255,255,.12);
  --border:rgba(255,255,255,.12);
  --shadow:0 18px 50px rgba(0,0,0,.35);
}

*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;background:var(--bg);color:var(--text)}

a{color:inherit;text-decoration:none}.container{width:calc(100% - 24px);max-width:none;margin:12px auto}

.topbar{display:flex;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;box-shadow:var(--shadow)}
.brand{display:flex;gap:10px;align-items:center}.brand img{height:34px}.brand .title{font-weight:900}
.navlinks{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{padding:8px 10px;border:1px solid var(--line);border-radius:999px;background:transparent}.pill:hover{border-color:rgba(57,198,197,.45)}
.btn{border:0;cursor:pointer;border-radius:12px;padding:10px 12px;font-weight:900;background:rgba(57,198,197,.14);color:var(--text)}
.btn.primary{background:var(--primary);color:#061018}.btn.danger{background:var(--danger);color:#fff}.btn.ghost{background:transparent;border:1px solid var(--line)}
.grid{display:grid;gap:12px;margin-top:12px}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card .hd{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
.card .bd{padding:12px 14px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.kpi{padding:12px;border:1px solid var(--line);border-radius:14px}
.kpi .n{font-size:22px;font-weight:900}.kpi .l{color:var(--muted);margin-top:4px;font-size:12px}
.table{width:100%;border-collapse:collapse}.table th,.table td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:start;font-size:13px}
.table th{color:var(--muted);font-weight:900}
/* Sticky table headers (reports etc.) */
.table.sticky thead th{position:sticky;top:0;z-index:3;background:var(--card)}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid var(--line);font-size:12px;font-weight:900}
.badge.new{border-color:rgba(57,198,197,.35);color:var(--primary)}.badge.follow{border-color:rgba(255,196,0,.35);color:#f4c542}
.badge.quote{border-color:rgba(255,140,0,.35);color:#ff9c3a}.badge.wait{border-color:rgba(84,165,255,.35);color:#6bb2ff}
.badge.active{border-color:rgba(155,99,255,.35);color:#b58dff}.badge.reject{border-color:rgba(255,54,54,.35);color:#ff6a6a}
.chat-wrap{display:grid;grid-template-columns:330px 1fr;gap:12px}
.list{height:calc(100vh - 170px);overflow:auto}.list .item{padding:10px 12px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center;cursor:pointer}
.list .item:hover{background:rgba(255,255,255,.03)}.list .item.active{outline:2px solid rgba(57,198,197,.35);outline-offset:-2px}
.avatar{width:38px;height:38px;border-radius:999px;background:rgba(57,198,197,.18);display:grid;place-items:center;font-weight:900}
.item .meta{min-width:0}.item .name{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .sub{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat{height:calc(100vh - 170px);display:flex;flex-direction:column}
.chat-head{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
.chat-body{padding:14px;overflow:auto;flex:1;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,0))}

/* Last report header (shows latest follow-up at top) */
.last-report{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px;padding:10px 12px;border:1px dashed rgba(255,255,255,.18);border-radius:14px;background:rgba(255,255,255,.03)}
.last-report .lr-label{font-weight:900;color:var(--muted)}
.last-report .lr-text{font-weight:700}
.last-report .lr-meta{color:var(--muted);font-size:12px}
.msgrow{display:flex;margin:8px 0}line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;border:1px solid var(--line)}
.msg.me{margin-inline-start:auto;background:rgba(57,198,197,.15);border-color:rgba(57,198,197,.25)}.msg.other{background:rgba(255,255,255,.06)}
.msg.sys{background:rgba(226,27,35,.10);border-color:rgba(226,27,35,.25)}
.msg-meta{font-size:12px;color:var(--muted);margin-top:6px}
.chat-foot{padding:10px 12px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:flex-end}

.tagwrap{display:flex;flex-direction:column;gap:6px;width:190px}
.tagwrap #tagSelect{display:none}

/* Emoji + message box wrapper */
.msgwrap{position:relative;flex:1;display:flex;align-items:flex-end;gap:8px}
.emoji-btn{width:44px;min-width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);display:grid;place-items:center;cursor:pointer}
.emoji-btn.emoji-inside{position:absolute;inset-inline-end:8px;bottom:8px;width:38px;min-width:38px;height:38px;border-radius:999px;z-index:5}
.emoji-btn:active{transform:scale(.98)}
.emoji-panel{position:absolute;bottom:52px;inset-inline-start:0;display:none;grid-template-columns:repeat(8, 1fr);gap:6px;padding:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);z-index:20;max-width:360px}
.emoji-panel.open{display:grid}
.emoji-panel .em{border:0;background:transparent;font-size:18px;cursor:pointer;padding:6px;border-radius:10px}
.emoji-panel .em:hover{background:rgba(255,255,255,.06)}
textarea{flex:1;min-height:44px;max-height:140px;resize:none;padding:10px 12px;border-radius:14px;border:1px solid var(--line);outline:none;background:transparent;color:var(--text);padding-inline-end:52px}

/* Send button icon */
#sendBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px}
#sendBtn .send-ico{font-size:18px;line-height:1}
select,input{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--text)}
small{color:var(--muted)}
.menu{position:relative}.menu-panel{position:absolute;inset-inline-end:0;top:42px;min-width:260px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);display:none;z-index:10}
.menu-panel .row{padding:10px 12px;border-bottom:1px solid var(--line)}.menu-panel .row:last-child{border-bottom:0}
.menu-panel label{display:block;font-weight:900;margin-bottom:6px;font-size:12px;color:var(--muted)}
.menu-panel .actions{display:flex;gap:8px}
@media (max-width:920px){.chat-wrap{grid-template-columns:1fr}.list{height:auto;max-height:40vh}.chat{height:auto;min-height:55vh}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (max-width: 920px){
  .container{width:calc(100% - 12px);margin:6px auto}
  .navlinks{gap:6px}
  .pill{padding:7px 9px}
  .chat-wrap{grid-template-columns:1fr}
  .list{height:auto;max-height: calc(100vh - 260px)}
  .chat{height:auto;min-height: calc(100vh - 260px)}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.mobile-chat .list{display:none}
  body.mobile-chat .chat{min-height: calc(100vh - 210px)}
  .mobile-back{display:inline-flex !important}
}
.mobile-back{display:none; align-items:center; gap:6px}


/* Active customer highlight */
.item.active{background:linear-gradient(90deg, rgba(31,179,169,.18), rgba(211,23,43,.10)); border-color:rgba(31,179,169,.35)}

/* Mobile WhatsApp-like */
@media (max-width: 720px){
  .grid{max-width:100%}

  body{margin:0}
  .grid{padding:10px}
  .card{border-radius:16px}
  .chat-wrap{display:flex;flex-direction:column;gap:10px}
  .chat-wrap .list{width:100%}
  .chat{width:100%}
  .msgs{max-height:60vh}
  .composer{position:sticky;bottom:0;background:var(--panel);padding-top:10px}
  .hd{position:sticky;top:0;z-index:5;background:var(--panel)}
  .pill{padding:8px 12px}
}

.badge.b-tag{background:rgba(31,179,169,.14); border:1px solid rgba(31,179,169,.35); color:var(--text)}

.search{display:flex;gap:10px;align-items:center;margin-top:10px}
.search-inp{flex:1;min-width:0;background:var(--card2);border:1px solid var(--line);color:var(--text);border-radius:999px;padding:10px 12px;outline:none}
.search-inp:focus{border-color:rgba(31,179,169,.7);box-shadow:0 0 0 3px rgba(31,179,169,.15)}
/* Tab fade */
.tab-fade{animation:tabfade .18s ease-out}
@keyframes tabfade{from{opacity:.4;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}

/* Extra mobile fixes + add-customer modal */
@media (max-width: 600px){
  #addModal{padding:10px !important;}
  #addModal .card{width:100% !important;max-width:100% !important;margin:0 !important;}
  #addModal form{grid-template-columns:1fr !important;}
  #addModal form input,#addModal form select,#addModal form button{grid-column:1 / -1 !important;}
}

/* Animated logo */
.logo-anim{display:inline-flex;align-items:center;justify-content:center;}
.logo-anim img{width:64px;height:64px;border-radius:18px;box-shadow:0 10px 26px rgba(0,0,0,.35);animation:floaty 3.2s ease-in-out infinite;}
@keyframes floaty{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.03)}}

/* Login full-screen */
body.login .container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;}
body.login .login-wrap{width:100%;max-width:460px;}
body.login .login-card{padding:20px;}
body.login .login-title{font-size:22px;font-weight:900;margin:10px 0 4px;}
body.login .login-sub{color:var(--muted);margin:0 0 14px;font-size:13px;}


/* ===== WhatsApp-style UX (Rebuild) ===== */
.chat-wrap{height:calc(100dvh - 150px); align-items:stretch}
.list,.chat{height:calc(100dvh - 150px)}
.pill,.btn{ text-decoration:none }
.pill.active{ background:rgba(61,214,208,.18); border-color:rgba(61,214,208,.38); box-shadow:0 10px 26px rgba(61,214,208,.10) }
.badge.b-tag{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14) }

.menu{position:relative}
.menu-panel{position:absolute; top:44px; left:0; min-width:260px; display:none; z-index:80;
  background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:12px}
.menu.open .menu-panel{display:block}
.menu-panel .actions{display:flex; gap:8px; margin-top:8px}

@media (max-width: 920px){
  .topbar{position:sticky; top:0; z-index:90}
  .grid .hd{position:sticky; top:70px; z-index:85; background:var(--card); border-bottom:1px solid var(--line)}
  .grid .hd > div{flex-wrap:wrap}
  .search input{width:100%}
  .chat-wrap{grid-template-columns:1fr; height:calc(100dvh - 220px)}
  .list{height:calc(100dvh - 220px); max-height:none}
  .chat{height:calc(100dvh - 220px); min-height:0}
  body:not(.mobile-chat) .chat{display:none}
  body.mobile-chat .list{display:none}
  body.mobile-chat .chat{display:flex}
  .mobile-back{display:inline-flex !important}
  .composer{position:sticky; bottom:0; z-index:95; background:var(--card); border-top:1px solid var(--line); padding:10px; padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .composer textarea{min-height:44px; max-height:120px}
  .menu-panel{position:fixed; left:0; right:0; bottom:0; top:auto; width:100vw; border-radius:18px 18px 0 0; padding:14px; 
    box-shadow:0 -18px 50px rgba(0,0,0,.45)}
  .menu.open::before{
    content:""; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:70;
  }
}

/* ===== Animated login background (logo colors) ===== */
.login-wrap{
  background: radial-gradient(900px 500px at 15% 20%, rgba(61,214,208,.16), transparent 55%),
              radial-gradient(900px 500px at 85% 15%, rgba(255,77,79,.14), transparent 55%),
              linear-gradient(135deg, rgba(10,16,32,1), rgba(6,10,18,1));
  background-size: 200% 200%;
  animation: rsLoginGlow 10s ease-in-out infinite;
}
@keyframes rsLoginGlow{
  0%{background-position: 0% 50%}
  50%{background-position: 100% 50%}
  100%{background-position: 0% 50%}
}

/* ===== User menu (hamburger) ===== */
.menu-wrap{position:relative; display:inline-flex}
.menu{position:absolute; top:44px; left:0; min-width:160px; padding:8px; border-radius:14px;
  background:linear-gradient(180deg, rgba(16,35,61,.92), rgba(12,23,42,.86));
  border:1px solid rgba(255,255,255,.14); box-shadow:var(--shadow); display:none; z-index:80}
.menu.open{display:block}
.menu-item{display:flex; padding:10px 10px; border-radius:12px; font-weight:800; color:var(--text)}
.menu-item:hover{background:rgba(255,255,255,.08)}

details>summary{list-style:none}
details>summary::-webkit-details-marker{display:none}
details[open]>summary{opacity:.9}

/* ===== Drawer ===== */
.pill.icon{padding:8px 12px; min-width:44px}
.drawer-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none;
  transition:opacity .18s ease;
  z-index:90;
}
.drawer-overlay.open{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; top:0; right:0;
  height:100dvh; width:min(360px, 86vw);
  background:linear-gradient(180deg, rgba(16,35,61,.96), rgba(12,23,42,.92));
  border-left:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  transform:translateX(105%);
  transition:transform .22s ease;
  z-index:95;
  display:flex; flex-direction:column;
}
.drawer.open{transform:translateX(0)}
body.drawer-open{overflow:hidden}
.drawer-hd{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:14px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.drawer-user{display:flex; align-items:center; gap:10px}
.drawer-name{font-weight:900}
.drawer-sub{font-size:12px; color:var(--muted)}
.drawer-links{padding:10px; display:flex; flex-direction:column; gap:6px}
.drawer-link{
  padding:12px 12px; border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  font-weight:900;
}
.drawer-link:hover{background:rgba(255,255,255,.08)}
.drawer-link.danger{border-color:rgba(255,77,79,.35); background:rgba(255,77,79,.10)}
.drawer-sep{height:1px; background:rgba(255,255,255,.10); margin:8px 0}

/* Global modal (used by Add Customer etc.) */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.60);padding:16px;z-index:9999;overflow:auto}
.modal.open{display:flex}
.modal .box{width:min(860px, 96vw)}
@media (max-width: 860px){
  .modal{align-items:flex-start; padding-top:72px}
  .modal .box{margin:0 auto 24px !important}
}


/* ===== Customers list quick actions ===== */
.item-row{position:relative; display:flex; align-items:stretch;}
.item-row .item{flex:1 1 auto;}
.item-dots{
  flex:0 0 auto;
  width:44px;
  border:none;
  background:transparent;
  color:var(--muted);
  font-size:22px;
  border-radius:12px;
  margin:6px 6px 6px 0;
  cursor:pointer;
}
.item-dots:hover{background:rgba(255,255,255,.06); color:var(--ink);}

.item-row.sel{outline:2px solid rgba(78,161,255,.45); border-radius:16px;}
.badge.b-price{background:rgba(255,215,0,.12); border-color:rgba(255,215,0,.22);}

/* Action sheet */
.actionsheet{position:fixed; inset:0; z-index:99999;}
.actionsheet-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.55);}
.actionsheet-panel{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  width:min(520px, 94vw);
  border-radius:18px;
  overflow:hidden;
}
.actionsheet-panel .bd .btn{justify-content:center}

/* Mobile selection bar */
.selectbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:99998;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:rgba(11,18,32,.98);
  border-bottom:1px solid rgba(255,255,255,.10);
  color:#fff;
}
.selectbar .sel-title{flex:1 1 auto; text-align:center; font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* Ensure selection bar actions are visible in light theme */
[data-theme="light"] .selectbar,
[data-theme="light"] .selectbar *{ color:#fff !important; }
[data-theme="light"] .selectbar .btn{ border-color:rgba(255,255,255,.18) !important; }
[data-theme="light"] .selectbar .btn:hover{ background:rgba(255,255,255,.10) !important; }



/* ===== WhatsApp-like polish (style-only) ===== */
:root{
  --wa-chat-bg:#efeae2;
  --wa-me-bg:#dcf8c6;
  --wa-other-bg:#ffffff;
  --wa-meta:rgba(0,0,0,.55);
}
[data-theme="dark"]{
  --wa-chat-bg:#0b141a;
  --wa-me-bg:rgba(0,168,132,.22);
  --wa-other-bg:rgba(255,255,255,.06);
  --wa-meta:rgba(255,255,255,.55);
}

/* Chat background + spacing */
.chat-body{
  background:linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0)), var(--wa-chat-bg) !important;
}

/* Lighter "Last report" */
.last-report{
  border:1px solid var(--line) !important;
  border-style:solid !important;
  padding:8px 10px !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.55) !important;
}
[data-theme="dark"] .last-report{background:rgba(255,255,255,.04) !important;}

/* Message bubbles */
.msgrow{margin:10px 0 !important;}
.msg{
  display:inline-block;
  width:fit-content;
  border:0 !important;
  max-width:min(70%, 520px);
  padding:8px 10px !important;
  border-radius:18px !important;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  position:relative;
}
[data-theme="dark"] .msg{box-shadow:none;}

.msg.me{
  background:var(--wa-me-bg) !important;
}
.msg.other{
  background:var(--wa-other-bg) !important;
}
.msg.sys{
  background:rgba(226,27,35,.10) !important;
  border:1px solid rgba(226,27,35,.25) !important;
  box-shadow:none !important;
}

/* Bubble tails using logical properties */
.msg.me::after,
.msg.other::after{
  content:"";
  position:absolute;
  width:0;height:0;
  top:10px;
  border:8px solid transparent;
}
.msg.me::after{
  inset-inline-end:-8px;
  border-inline-start-color:var(--wa-me-bg);
}
.msg.other::after{
  inset-inline-start:-8px;
  border-inline-end-color:var(--wa-other-bg);
}
[data-theme="dark"] .msg.other::after{border-inline-end-color:var(--wa-other-bg);}

/* Meta */
.msg-meta{
  color:var(--wa-meta) !important;
  font-size:11px !important;
  margin-top:6px !important;
}

/* Input bar polish */
.chat-foot{
  background:var(--card) !important;
}
#msgBox{
  border-radius:18px !important;
  min-height:44px !important;
  padding:10px 12px !important;
}
#sendBtn{
  height:44px !important;
  border-radius:999px !important;
  padding:0 16px !important;
}
.emoji-panel{
  border-radius:16px !important;
}

/* Customers list polish */
.list .item{
  padding:12px 12px !important;
  border-radius:14px !important;
  margin:6px 6px !important;
  border:1px solid var(--line) !important;
  background:rgba(255,255,255,.03);
}
.list .item:hover{transform:translateY(-1px); transition:transform .12s ease;}
.avatar{
  width:40px !important;
  height:40px !important;
  border-radius:999px !important;
  display:grid;
  place-items:center;
  font-weight:900;
}
.meta .name{font-size:15px !important;}
.meta .sub{font-size:12px !important;}
.badge{font-size:11px !important; padding:3px 8px !important; border-radius:999px !important;}

/* Topbar slight polish */
.topbar{position:sticky; top:12px; z-index:50;}


/* ===== Light Theme: Fix Side Menu Visibility ===== */
/* لو عندك body.dark للدارك سيبه زي ما هو - ده خاص باللايت فقط */
[data-theme="light"] .side-menu,
[data-theme="light"] .menu-panel,
[data-theme="light"] .drawer,
[data-theme="light"] .nav-drawer {
  background: #ffffff !important;
  color: #0b1b14 !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.18) !important;
}

/* أزرار/عناصر القائمة */
[data-theme="light"] .side-menu a,
[data-theme="light"] .side-menu button,
[data-theme="light"] .menu-panel a,
[data-theme="light"] .menu-panel button,
[data-theme="light"] .drawer a,
[data-theme="light"] .drawer button,
[data-theme="light"] .nav-drawer a,
[data-theme="light"] .nav-drawer button {
  color: #0b1b14 !important;
}

/* عناصر القائمة اللي شكلها “كروت/أزرار” */
[data-theme="light"] .side-menu .menu-item,
[data-theme="light"] .menu-panel .menu-item,
[data-theme="light"] .drawer .menu-item,
[data-theme="light"] .nav-drawer .menu-item,
[data-theme="light"] .side-menu .btn,
[data-theme="light"] .menu-panel .btn,
[data-theme="light"] .drawer .btn,
[data-theme="light"] .nav-drawer .btn {
  background: #f5f7fb !important;
  border: 1px solid rgba(0,0,0,.10) !important;
}

/* الحالة Active / Hover */
[data-theme="light"] .side-menu .menu-item.active,
[data-theme="light"] .menu-panel .menu-item.active,
[data-theme="light"] .drawer .menu-item.active,
[data-theme="light"] .nav-drawer .menu-item.active,
[data-theme="light"] .side-menu .menu-item:hover,
[data-theme="light"] .menu-panel .menu-item:hover,
[data-theme="light"] .drawer .menu-item:hover,
[data-theme="light"] .nav-drawer .menu-item:hover {
  background: #e9f3ff !important;
  border-color: rgba(0,0,0,.14) !important;
}

/* زرار الإغلاق X */
[data-theme="light"] .side-menu .close,
[data-theme="light"] .menu-panel .close,
[data-theme="light"] .drawer .close,
[data-theme="light"] .nav-drawer .close {
  color: #0b1b14 !important;
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.12) !important;
}

/* الخلفية الشفافة وراء المنيو (Overlay) */
[data-theme="light"] .menu-overlay,
[data-theme="light"] .drawer-backdrop,
[data-theme="light"] .nav-overlay {
  background: rgba(0,0,0,.35) !important;
}

/* v1.0 Stable: icon-only send button (override) */
#sendBtn{height:44px !important;width:44px !important;border-radius:999px !important;padding:0 !important;display:grid;place-items:center}


/* v6 patch: group consecutive messages by same user without changing current layout */
.msgrow.me{justify-content:flex-end}
.msgrow.other,.msgrow.sys{justify-content:flex-start}
.msgrow.group-next{margin-top:4px !important}
.msgrow.group-next + .msgrow.group-next{margin-top:3px !important}
.msgstack{display:flex;flex-direction:column;max-width:min(70%,520px)}
.msgstack.me{align-items:flex-end}
.msgstack.other,.msgstack.sys{align-items:flex-start}
.msgstack .msg{max-width:100%}
.msg-group-meta{font-size:11px;color:var(--wa-meta, var(--muted));margin:0 6px 4px}
.msg-group-meta.me{text-align:right}
.msg-group-meta.sys{opacity:.9}


/* v6 chat grouping patch */
.msgrow.group-next{margin-top:4px}
.msgstack{display:flex;flex-direction:column}
.msgstack.me{align-items:flex-end}
.msgstack.other,.msgstack.sys{align-items:flex-start}

.msg-group-meta{
  font-size:12px;
  color:var(--muted);
  text-align:center;
  margin:0 auto 6px;
  line-height:1.4;
}
.msg-group-meta.me,.msg-group-meta.other,.msg-group-meta.sys{align-self:center}

.msg-time{
  font-size:11px;
  color:var(--wa-meta, var(--muted));
  margin-top:4px;
  line-height:1;
}
.msg-time.me{align-self:flex-end}
.msg-time.other,.msg-time.sys{align-self:flex-start}

.chat-day-sep{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:14px 0 10px;
}
.chat-day-sep::before,
.chat-day-sep::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
  opacity:.7;
}
.chat-day-sep span{
  display:inline-block;
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.55);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
[data-theme="dark"] .chat-day-sep span{
  background:rgba(255,255,255,.06);
}
/* ===== v6.1 chat bubble size patch ===== */
.msg{
  width:auto !important;
  min-height:unset !important;
  padding:6px 10px !important;
  line-height:1.28 !important;
}
.msg p{margin:0 !important;}
.msgrow{margin:8px 0 !important;}
.msgrow.group-next{margin-top:3px !important;}
.msgstack{max-width:min(76%, 680px) !important;}
.msgstack .msg{max-width:100% !important;}


/* ===== Customer card compact badges beside name ===== */
.name-line,.krow{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:space-between;
  min-width:0;
}
.name-line .name,.krow .kname{min-width:0;flex:1 1 auto;}
.inline-badges{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.inline-price{margin-inline-start:8px;vertical-align:middle;}
.cust-card-compact{margin-top:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.3;}
.compact-cat,.compact-date,.compact-sep{font-size:12px;}
.kcard .cust-card-compact{margin-top:6px;}
@media (max-width: 920px){
  .name-line,.krow{align-items:flex-start;}
  .inline-badges{max-width:50%;}
}


/* ===== Desktop resizable split: customers list vs chat ===== */


/* Quick status menu on customer cards */
.sub-phone-row{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.sub-phone-row .phone-text{
  min-width:0;
}
.quick-status-btn{
  cursor:pointer;
  border:none;
}
.quick-followup-trigger{
  cursor:pointer;
}
.item .meta,
.kcard{
  position:relative;
}
.status-menu{
  position:absolute;
  inset-inline-start:8px;
  top:calc(100% - 8px);
  z-index:25;
  min-width:140px;
  max-width:220px;
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:4px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.status-menu[hidden]{display:none !important;}
.status-option{
  border:none;
  background:transparent;
  color:inherit;
  text-align:right;
  padding:7px 10px;
  border-radius:8px;
  cursor:pointer;
}
.status-option:hover{
  background:rgba(31,179,169,.08);
}
.kcard .status-menu{
  top:58px;
  inset-inline-start:10px;
}

/* Team chat + notifications */
.drawer-badge,.notif-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;color:#fff;font-size:11px;font-weight:800;margin-inline-start:6px}
.drawer-badge{background:#64748b}
.drawer-badge-chat{background:#10b981}
.drawer-badge-notifications,.notif-badge{background:#f59e0b;color:#111827}
.drawer-badge-appointments{background:#3b82f6}
.topbar-notifications{position:relative}
.notifications-menu{position:absolute;top:46px;left:0;min-width:300px;max-width:360px;max-height:420px;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);z-index:120}
.notifications-menu-head{padding:12px 14px;font-weight:900;border-bottom:1px solid var(--line)}
.notification-item{display:block;padding:12px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text)}
.notification-item:last-child{border-bottom:0}
.notification-item.unread{background:rgba(59,130,246,.08)}
.notification-item.empty{color:var(--muted)}
.notification-title{font-weight:800;margin-bottom:4px}
.notification-time{font-size:12px;color:var(--muted)}
.rs-toast-stack{position:fixed;left:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:3000;max-width:min(360px,calc(100vw - 28px))}
.rs-toast{display:block;padding:12px 14px;border-radius:16px;background:linear-gradient(180deg, rgba(16,35,61,.98), rgba(12,23,42,.94));border:1px solid rgba(255,255,255,.14);box-shadow:0 16px 40px rgba(0,0,0,.35);color:#fff;text-decoration:none;transform:translateY(12px);opacity:0;transition:all .2s ease}
.rs-toast.show{transform:translateY(0);opacity:1}
.rs-toast-title{font-weight:900;margin-bottom:4px}.rs-toast-text{font-size:13px;line-height:1.45;color:#d7deeb}
.rs-dialog{border:none;padding:0;background:transparent}.rs-dialog::backdrop{background:rgba(0,0,0,.5)}

@media (max-width: 920px){
  .notifications-menu{left:8px;right:8px;min-width:auto;max-width:none}
}



/* v8.1.5 fixes */
.users-sidebar-head .btn.primary{white-space:nowrap}



/* Forced admin alert popup */
.admin-alert-force-modal{z-index:10050;background:rgba(7,11,20,.72);backdrop-filter:blur(2px)}
.admin-alert-force-box{width:min(560px,96vw)}
.admin-alert-force-box .card{border-radius:18px}
.admin-alert-force-title{font-size:20px;font-weight:900;margin-bottom:12px;line-height:1.5}
.admin-alert-force-text{font-size:15px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere}
.admin-alert-force-actions{display:flex;justify-content:flex-end;margin-top:18px}
body:has(#adminAlertForceModal) .notifications-menu{display:none !important}
@media (max-width:720px){
  .admin-alert-force-box{width:min(96vw,96vw)}
  .admin-alert-force-title{font-size:18px}
  .admin-alert-force-text{font-size:14px}
  .admin-alert-force-actions .btn{width:100%}
}


.install-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
}
.topbar .install-pill{ margin-inline-start:auto; }

/* ===== v12.6 Theme Stabilization Patch ===== */
:root,
[data-theme="light"]{
  --radius:18px;
  --primary:var(--brand);
  --danger:#dc2626;
  --panel:var(--card);
  --panel2:var(--card2);
  --border:var(--line);
}
[data-theme="dark"]{
  --radius:18px;
  --primary:var(--brand);
  --danger:#f87171;
  --panel:var(--card);
  --panel2:var(--card2);
  --border:var(--line);
}

[data-theme="light"] body,
body[data-theme="light"]{background:var(--bg);color:var(--text)}
[data-theme="dark"] body,
body[data-theme="dark"]{background:var(--bg);color:var(--text)}

body[data-theme="dark"] .topbar,
body[data-theme="dark"] .card,
body[data-theme="dark"] .menu-panel,
body[data-theme="dark"] .notifications-menu,
body[data-theme="dark"] .drawer,
body[data-theme="dark"] .actionsheet-panel,
body[data-theme="dark"] .modal .box,
body[data-theme="dark"] .modal-box,
body[data-theme="dark"] .popmenu-panel,
body[data-theme="dark"] .qf-popover,
body[data-theme="dark"] .emoji-panel,
body[data-theme="dark"] .scope-list{
  background:var(--card) !important;
  color:var(--text) !important;
  border-color:var(--line) !important;
}

body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea,
body[data-theme="dark"] .search-inp,
body[data-theme="dark"] .pill-select,
body[data-theme="dark"] .desktop-filters select,
body[data-theme="dark"] .desktop-filters .btn{
  background:var(--card2) !important;
  color:var(--text) !important;
  border-color:var(--line) !important;
}
body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder{color:var(--muted) !important;opacity:1}

body[data-theme="dark"] .btn{background:rgba(61,214,208,.12);color:var(--text)}
body[data-theme="dark"] .btn.ghost{background:transparent;border-color:var(--line);color:var(--text)}
body[data-theme="dark"] .btn.primary{background:var(--brand);color:#04100e}
body[data-theme="dark"] .btn.danger{background:var(--danger);color:#fff}

body[data-theme="dark"] .table th{color:var(--muted)}
body[data-theme="dark"] .table td,
body[data-theme="dark"] .table,
body[data-theme="dark"] .meta .name,
body[data-theme="dark"] .item .name,
body[data-theme="dark"] strong,
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] h4,
body[data-theme="dark"] label{color:var(--text)}
body[data-theme="dark"] small,
body[data-theme="dark"] .muted,
body[data-theme="dark"] .meta .sub,
body[data-theme="dark"] .item .sub{color:var(--muted) !important}

body[data-theme="dark"] .menu-item,
body[data-theme="dark"] .drawer-link,
body[data-theme="dark"] .pm-item,
body[data-theme="dark"] .row-link,
body[data-theme="dark"] .menu-panel .row,
body[data-theme="dark"] .notifications-menu .row{
  background:transparent !important;
  color:var(--text) !important;
  border-color:var(--line) !important;
}
body[data-theme="dark"] .menu-item:hover,
body[data-theme="dark"] .drawer-link:hover,
body[data-theme="dark"] .pm-item:hover{background:rgba(255,255,255,.04) !important}

body[data-theme="dark"] .selectbar{background:rgba(7,11,20,.98);border-bottom-color:var(--line)}
body[data-theme="dark"] .selectbar .btn{border-color:rgba(255,255,255,.16) !important;color:#fff !important}

body[data-theme="dark"] .notifications-menu .notif-item-unread,
body[data-theme="dark"] .notifications-menu .item.unread{background:rgba(61,214,208,.08) !important}

body[data-theme="light"] .topbar,
body[data-theme="light"] .menu-panel,
body[data-theme="light"] .notifications-menu,
body[data-theme="light"] .drawer{background:#fff !important;color:#0b1220 !important}

/* ── PWA Install & Notification Banners ──────────────────────────── */
.pwa-install-banner{position:fixed;bottom:-120px;left:50%;transform:translateX(-50%);width:min(480px,calc(100% - 24px));background:var(--card);border:1px solid var(--line);border-radius:20px;padding:14px 16px;display:flex;align-items:center;gap:12px;z-index:2000;transition:bottom .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 8px 32px rgba(0,0,0,.18)}
.pwa-install-banner.pwa-banner-show{bottom:20px}
.pwa-banner-icon{flex-shrink:0;width:44px;height:44px;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:rgba(11,107,94,.12)}
.pwa-banner-icon img{width:40px;height:40px;border-radius:10px}
.pwa-banner-text{flex:1;min-width:0}
.pwa-banner-text strong{display:block;font-size:14px;margin-bottom:2px;color:var(--text)}
.pwa-banner-text span{font-size:12px;color:var(--muted)}
.pwa-banner-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.pwa-banner-btn{background:#0b6b5e;color:#fff;border:none;border-radius:10px;padding:8px 16px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.pwa-banner-btn:hover{background:#0d7d6e}
.pwa-banner-dismiss{background:rgba(148,163,184,.14);border:none;border-radius:50%;width:28px;height:28px;font-size:18px;line-height:1;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center}
.pwa-banner-dismiss:hover{background:rgba(148,163,184,.26)}
.pwa-notif-banner .pwa-banner-icon{background:rgba(245,158,11,.12)}
.pwa-ios-hint{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);width:min(380px,calc(100% - 24px));background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 18px;font-size:13px;line-height:1.7;z-index:2001;text-align:center;color:var(--text);box-shadow:0 8px 32px rgba(0,0,0,.18)}

@media(max-width:480px){
  .pwa-install-banner{border-radius:16px;padding:12px 14px;gap:10px;width:calc(100% - 20px)}
  .pwa-banner-btn{padding:7px 12px;font-size:12px}
}

/* ===== El Omda branded login screen ===== */
body.login{
  min-height:100vh;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(217,184,88,.22), transparent 28%),
    radial-gradient(circle at 82% 16%, rgba(6,13,48,.16), transparent 30%),
    radial-gradient(circle at 14% 90%, rgba(217,184,88,.18), transparent 34%),
    linear-gradient(135deg, #f9fbff 0%, #eef4fb 45%, #fff6e7 100%);
}
body.login .container{
  width:100%;
  max-width:none;
  min-height:100vh;
  margin:0;
  padding:clamp(18px,4vw,56px);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
body.login .container::before,
body.login .container::after{
  content:"";
  position:fixed;
  inset:auto;
  pointer-events:none;
  border-radius:999px;
  filter:blur(2px);
  opacity:.75;
  animation:elomdaOrb 12s ease-in-out infinite alternate;
}
body.login .container::before{
  width:520px;
  height:520px;
  right:-170px;
  top:-170px;
  background:radial-gradient(circle, rgba(6,13,48,.15), rgba(6,13,48,0) 68%);
}
body.login .container::after{
  width:600px;
  height:600px;
  left:-210px;
  bottom:-240px;
  background:radial-gradient(circle, rgba(212,170,66,.24), rgba(212,170,66,0) 68%);
  animation-delay:-4s;
}
@keyframes elomdaOrb{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(32px,-24px,0) scale(1.06)}}
body.login .login-wrap.client-login{
  width:min(100%, 980px);
  max-width:980px;
  min-height:560px;
  display:grid;
  grid-template-columns:minmax(280px,1fr) 420px;
  align-items:center;
  gap:clamp(22px,4vw,58px);
  position:relative;
  background:
    linear-gradient(120deg, rgba(255,255,255,.72), rgba(255,255,255,.50)),
    radial-gradient(circle at 72% 18%, rgba(218,181,79,.18), transparent 34%),
    radial-gradient(circle at 20% 70%, rgba(7,14,50,.11), transparent 40%);
  border:1px solid rgba(7,14,50,.08);
  border-radius:34px;
  padding:clamp(20px,4vw,46px);
  box-shadow:0 34px 90px rgba(5,12,36,.14);
  overflow:hidden;
  isolation:isolate;
  animation:none;
}
body.login .login-wrap.client-login::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    linear-gradient(115deg, transparent 0 43%, rgba(255,255,255,.55) 48%, transparent 55%),
    repeating-linear-gradient(90deg, rgba(6,13,48,.045) 0 1px, transparent 1px 74px);
  transform:rotate(-9deg);
  animation:elomdaSweep 11s linear infinite;
  z-index:-1;
}
body.login .login-wrap.client-login::after{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:28px;
  border:1px solid rgba(217,184,88,.20);
  pointer-events:none;
}
@keyframes elomdaSweep{0%{background-position:-360px 0, 0 0}100%{background-position:360px 0, 160px 0}}
body.login .login-brand-bg{
  min-height:360px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
body.login .login-brand-bg::before{
  content:"";
  position:absolute;
  width:min(82vw,420px);
  height:min(82vw,420px);
  border-radius:50%;
  background:conic-gradient(from 140deg, rgba(7,14,50,.15), rgba(217,184,88,.28), rgba(255,255,255,.35), rgba(7,14,50,.11));
  animation:elomdaRotate 18s linear infinite;
}
@keyframes elomdaRotate{to{transform:rotate(360deg)}}
body.login .login-brand-bg img{
  width:min(78%, 420px);
  max-height:360px;
  object-fit:contain;
  opacity:.18;
  filter:drop-shadow(0 22px 34px rgba(7,14,50,.18));
  position:relative;
  z-index:1;
  animation:floaty 4.2s ease-in-out infinite;
}
body.login .login-card{
  width:100%;
  padding:30px 28px 28px;
  border-radius:28px;
  border:1px solid rgba(7,14,50,.10);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(18px);
  box-shadow:0 26px 70px rgba(5,12,36,.16);
  position:relative;
  z-index:2;
}
body.login .client-logo-wrap{display:flex;justify-content:center;align-items:center;margin:0 auto 14px;}
body.login .client-login-logo{
  width:170px;
  height:220px;
  object-fit:contain;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  filter:drop-shadow(0 18px 24px rgba(6,13,48,.22));
}
body.login .login-title{color:#070e32;font-size:28px;letter-spacing:-.02em;margin-top:4px;}
body.login .login-sub{color:#9a741f;font-weight:800;margin-bottom:20px;}
body.login input{min-height:48px;border-radius:16px;border:1px solid rgba(7,14,50,.15);background:rgba(255,255,255,.86);color:#070e32;box-shadow:inset 0 1px 0 rgba(255,255,255,.65);}
body.login input:focus{border-color:rgba(212,170,66,.68);box-shadow:0 0 0 4px rgba(212,170,66,.18);}
body.login .btn.primary{min-height:50px;border-radius:16px;background:linear-gradient(135deg, #070e32, #12204f 52%, #d4aa42);color:#fff;box-shadow:0 16px 32px rgba(7,14,50,.22);}
body.login .badge.reject{display:block;text-align:center;margin-bottom:4px;}
@media (max-width: 860px){
  body.login{overflow:auto;}
  body.login .login-wrap.client-login{grid-template-columns:1fr;min-height:auto;padding:18px;}
  body.login .login-brand-bg{min-height:120px;order:2;}
  body.login .login-brand-bg img{width:220px;max-height:120px;}
  body.login .login-brand-bg::before{width:190px;height:190px;}
  body.login .login-card{order:1;padding:24px 18px;}
  body.login .client-login-logo{width:130px;height:178px;}
}

/* KZK Sprint 5 - Sidebar UX Structure */
.kzk-sidebar .drawer-links{padding:12px;gap:8px;display:flex;flex-direction:column}
.kzk-nav-sections .drawer-link{border-radius:14px;padding:11px 12px;margin:2px 0;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;text-decoration:none;transition:.18s ease}
.kzk-nav-sections .drawer-link:hover{transform:translateX(-2px);background:rgba(236,72,153,.10)}
.kzk-nav-sections .drawer-link.active{background:linear-gradient(135deg,rgba(236,72,153,.18),rgba(15,23,42,.08));color:#be185d;box-shadow:inset 3px 0 0 #ec4899}
.kzk-main-link{background:rgba(15,23,42,.06)}
.kzk-nav-group{border:1px solid rgba(15,23,42,.08);border-radius:18px;background:rgba(255,255,255,.62);overflow:hidden;margin:4px 0;box-shadow:0 8px 22px rgba(15,23,42,.04)}
.kzk-nav-group summary{cursor:pointer;list-style:none;padding:12px 14px;font-weight:900;color:#111827;display:flex;align-items:center;justify-content:space-between;user-select:none}
.kzk-nav-group summary::-webkit-details-marker{display:none}
.kzk-nav-group summary:after{content:'⌄';font-size:13px;opacity:.65;transition:.16s ease}
.kzk-nav-group[open] summary:after{transform:rotate(180deg)}
.kzk-nav-group-body{padding:0 8px 10px 8px}
.kzk-nav-group-body .drawer-link{font-size:14px;padding:10px 12px;color:inherit}
[data-theme="dark"] .kzk-nav-group{background:rgba(15,23,42,.62);border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .kzk-nav-group summary{color:#f9fafb}
[data-theme="dark"] .kzk-main-link{background:rgba(255,255,255,.07)}
@media (max-width:720px){.kzk-nav-group summary{padding:13px 14px}.kzk-nav-group-body .drawer-link{padding:12px}.kzk-sidebar .drawer-links{padding-bottom:34px}}

/* =========================================================
   KZK UI Stabilization Sprint - Admin Mobile + Sidebar Fix
   الهدف: Sidebar ثابت للديسكتوب، Drawer نظيف للموبايل، ومساحات مريحة.
   ========================================================= */
:root{
  --kzk-ui-bg:#f8f1f5;
  --kzk-ui-card:#ffffff;
  --kzk-ui-text:#24131d;
  --kzk-ui-muted:#7a6673;
  --kzk-ui-pink:#e94d78;
  --kzk-ui-dark:#191018;
  --kzk-ui-line:#ecd7e2;
  --kzk-ui-shadow:0 22px 60px rgba(47,15,31,.12);
  --radius:22px;
}
body:not(.login):not(.kzk-public){background:linear-gradient(135deg,#fff8fb 0%,#f7edf3 42%,#ffffff 100%);}
body:not(.login):not(.kzk-public) .container{max-width:none;}
body:not(.login):not(.kzk-public) .card{border-radius:22px;border-color:var(--kzk-ui-line);box-shadow:0 16px 38px rgba(47,15,31,.06)}
body:not(.login):not(.kzk-public) .btn.primary,
body:not(.login):not(.kzk-public) .pill.primary{background:var(--kzk-ui-pink)!important;color:#fff!important;border-color:var(--kzk-ui-pink)!important}
body:not(.login):not(.kzk-public) input,
body:not(.login):not(.kzk-public) select,
body:not(.login):not(.kzk-public) textarea{background:#fff;border-color:#ead6e0;color:#24131d;min-height:44px}
body:not(.login):not(.kzk-public) .topbar{border-radius:24px;border:1px solid var(--kzk-ui-line);background:rgba(255,255,255,.92)!important;backdrop-filter:blur(18px);box-shadow:0 14px 38px rgba(47,15,31,.08);z-index:70}
body:not(.login):not(.kzk-public) .brand .title{color:var(--kzk-ui-text)}
body:not(.login):not(.kzk-public) .brand .sub{color:var(--kzk-ui-muted)}
body:not(.login):not(.kzk-public) .nav-logo{width:44px;height:44px;object-fit:contain;border-radius:15px;background:#fff;box-shadow:0 8px 18px rgba(0,0,0,.07)}

@media (min-width:1100px){
  body:not(.login):not(.kzk-public) .container{width:calc(100% - 32px);margin:16px auto;padding-inline-start:0;padding-inline-end:316px;}
  body:not(.login):not(.kzk-public) .topbar{position:sticky;top:14px;margin-bottom:16px;}
  body:not(.login):not(.kzk-public) .topbar button[aria-label="menu"]{display:none!important;}
  body:not(.login):not(.kzk-public) .drawer-overlay{display:none!important;}
  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar{
    position:fixed!important;right:16px;top:16px;bottom:16px;width:292px;height:auto!important;
    transform:none!important;border-radius:30px;z-index:45;overflow:hidden;
    background:linear-gradient(180deg,#ffffff 0%,#fff7fb 100%)!important;color:var(--kzk-ui-text)!important;
    border:1px solid var(--kzk-ui-line)!important;box-shadow:var(--kzk-ui-shadow)!important;
  }
  body:not(.login):not(.kzk-public) .drawer-hd{background:linear-gradient(135deg,#201018,#3c1728);color:#fff;border-bottom:0;padding:16px;}
  body:not(.login):not(.kzk-public) .drawer-sub{color:#f3d9e4!important;}
  body:not(.login):not(.kzk-public) .drawer-hd button[aria-label="close"]{display:none!important;}
  body:not(.login):not(.kzk-public) .drawer-links{height:calc(100% - 76px);overflow-y:auto;padding:12px 12px 18px;scrollbar-width:thin;}
  body:not(.login):not(.kzk-public) .kzk-nav-group{background:#fff!important;border-color:#f0dce6!important;box-shadow:0 12px 28px rgba(47,15,31,.05)!important;}
  body:not(.login):not(.kzk-public) .kzk-nav-group summary{color:#24131d!important;}
  body:not(.login):not(.kzk-public) .drawer-link{background:#fff!important;color:#24131d!important;border:1px solid transparent!important;}
  body:not(.login):not(.kzk-public) .drawer-link:hover{background:#fff0f6!important;border-color:#f1d4e1!important;transform:translateX(-2px);}
  body:not(.login):not(.kzk-public) .drawer-link.active{background:linear-gradient(135deg,#ffeaf2,#fff)!important;color:#b91c55!important;border-color:#efc6d7!important;box-shadow:inset -4px 0 0 var(--kzk-ui-pink)!important;}
}

@media (max-width:1099px){
  body:not(.login):not(.kzk-public) .container{width:calc(100% - 18px);margin:9px auto;}
  body:not(.login):not(.kzk-public) .topbar{top:8px;padding:9px 10px;gap:8px;}
  body:not(.login):not(.kzk-public) .brand{min-width:0;flex:1;}
  body:not(.login):not(.kzk-public) .brand .meta{min-width:0;}
  body:not(.login):not(.kzk-public) .brand .title{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  body:not(.login):not(.kzk-public) .brand .sub{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  body:not(.login):not(.kzk-public) .topbar .install-pill{display:none!important;}
  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar{width:min(360px,88vw);background:#fff!important;color:#24131d!important;border-left:1px solid #ead6e0!important;box-shadow:-18px 0 55px rgba(35,12,24,.25)!important;}
  body:not(.login):not(.kzk-public) .drawer-hd{background:linear-gradient(135deg,#201018,#3c1728);color:#fff;}
  body:not(.login):not(.kzk-public) .drawer-sub{color:#f3d9e4!important;}
  body:not(.login):not(.kzk-public) .drawer-links{overflow-y:auto;padding-bottom:34px;}
  body:not(.login):not(.kzk-public) .drawer-link{background:#fff!important;color:#24131d!important;border-color:#f0dce6!important;}
  body:not(.login):not(.kzk-public) .drawer-link.active{background:#fff0f6!important;color:#b91c55!important;}
  body.drawer-open{overflow:hidden;touch-action:none;}
}

@media (max-width:720px){
  body:not(.login):not(.kzk-public) .grid{padding:0!important;}
  body:not(.login):not(.kzk-public) .card{border-radius:20px;}
  body:not(.login):not(.kzk-public) .card .hd{padding:12px;align-items:flex-start;gap:8px;flex-wrap:wrap;}
  body:not(.login):not(.kzk-public) .card .bd{padding:12px;overflow-x:auto;}
  body:not(.login):not(.kzk-public) .kpis{grid-template-columns:1fr 1fr!important;gap:8px;}
  body:not(.login):not(.kzk-public) .kpi{border-radius:18px;padding:11px;}
  body:not(.login):not(.kzk-public) .table{min-width:720px;}
  body:not(.login):not(.kzk-public) .modal{padding:10px;align-items:flex-end;}
  body:not(.login):not(.kzk-public) .modal .box{width:100%!important;max-width:100%!important;max-height:92dvh;overflow:auto;}
  body:not(.login):not(.kzk-public) .modal .card{border-radius:24px 24px 0 0!important;}
  body:not(.login):not(.kzk-public) form{max-width:100%;}
  body:not(.login):not(.kzk-public) form input,
  body:not(.login):not(.kzk-public) form select,
  body:not(.login):not(.kzk-public) form textarea,
  body:not(.login):not(.kzk-public) form button{font-size:16px;}
}

/* =========================================================
   KZK Sprint 7.4 - Professional Admin Shell Layering Fix
   حل مشكلة الهيدر/السايدبار/المحتوى: spacing + z-index + drawer behavior
   ========================================================= */
body:not(.login):not(.kzk-public){
  overflow-x:hidden !important;
}
body:not(.login):not(.kzk-public) .container{
  position:relative !important;
  z-index:1 !important;
}
body:not(.login):not(.kzk-public) .topbar{
  position:sticky !important;
  z-index:300 !important;
  isolation:isolate !important;
}
body:not(.login):not(.kzk-public) .drawer-overlay{
  z-index:4990 !important;
}
body:not(.login):not(.kzk-public) .drawer.kzk-sidebar,
body:not(.login):not(.kzk-public) #drawer.kzk-sidebar{
  z-index:5000 !important;
  isolation:isolate !important;
}
body:not(.login):not(.kzk-public) .modal,
body:not(.login):not(.kzk-public) .academy-modal,
body:not(.login):not(.kzk-public) .admin-alert-force-modal{
  z-index:7000 !important;
}
body:not(.login):not(.kzk-public) .notifications-menu{
  z-index:6500 !important;
}

@media (min-width:1100px){
  body:not(.login):not(.kzk-public){
    --kzk-sidebar-w:292px;
    --kzk-shell-gap:16px;
    --kzk-content-gap:22px;
  }
  body:not(.login):not(.kzk-public) .container{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding-top:16px !important;
    padding-bottom:16px !important;
    padding-inline-start:16px !important;
    padding-inline-end:calc(var(--kzk-sidebar-w) + var(--kzk-shell-gap) + var(--kzk-content-gap)) !important;
  }
  body:not(.login):not(.kzk-public) .topbar{
    top:16px !important;
    margin:0 0 18px 0 !important;
    width:100% !important;
  }
  body:not(.login):not(.kzk-public) .drawer-overlay{
    display:none !important;
  }
  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar{
    position:fixed !important;
    top:16px !important;
    right:16px !important;
    bottom:16px !important;
    left:auto !important;
    width:var(--kzk-sidebar-w) !important;
    height:auto !important;
    transform:none !important;
    border-radius:30px !important;
    overflow:hidden !important;
    pointer-events:auto !important;
  }
  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar.open,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar.open{
    transform:none !important;
  }
  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar .drawer-links,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar .drawer-links{
    height:calc(100dvh - 112px) !important;
    max-height:calc(100dvh - 112px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }
  body:not(.login):not(.kzk-public) .grid,
  body:not(.login):not(.kzk-public) .card,
  body:not(.login):not(.kzk-public) main{
    position:relative !important;
    z-index:1 !important;
  }
}

@media (max-width:1099px){
  body:not(.login):not(.kzk-public) .container{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:10px !important;
  }
  body:not(.login):not(.kzk-public) .topbar{
    top:8px !important;
    margin-bottom:12px !important;
    z-index:3000 !important;
  }
  body:not(.login):not(.kzk-public) .drawer-overlay.open{
    opacity:1 !important;
    pointer-events:auto !important;
  }
  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:auto !important;
    height:100dvh !important;
    width:min(380px,90vw) !important;
    border-radius:0 !important;
    transform:translateX(105%) !important;
    z-index:5000 !important;
  }
  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar.open,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar.open{
    transform:translateX(0) !important;
  }
  body:not(.login):not(.kzk-public) .drawer-overlay{
    position:fixed !important;
    inset:0 !important;
    z-index:4990 !important;
    background:rgba(17,10,15,.58) !important;
    backdrop-filter:blur(3px) !important;
  }
  body:not(.login):not(.kzk-public) .drawer-links{
    height:calc(100dvh - 78px) !important;
    max-height:calc(100dvh - 78px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
  }
}

@media (max-width:720px){
  body:not(.login):not(.kzk-public) .topbar{
    border-radius:18px !important;
  }
  body:not(.login):not(.kzk-public) .topbar .pill.icon{
    min-width:40px !important;
    height:40px !important;
    padding:0 10px !important;
  }
  body:not(.login):not(.kzk-public) .nav-logo{
    width:38px !important;
    height:38px !important;
  }
  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar{
    width:min(340px,92vw) !important;
  }
}


/* === KZK Sprint 7.5 Admin Shell: desktop collapsible sidebar that does NOT cover content === */
:root{--kzk-sidebar-w:308px;--kzk-shell-gap:18px;}
@media (min-width:1100px){
  body:not(.login):not(.kzk-public){background:#f8f6f8;}
  body:not(.login):not(.kzk-public) .container{
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:16px 24px 28px!important;
    padding-inline-end:calc(var(--kzk-sidebar-w) + var(--kzk-shell-gap) + 24px)!important;
    transition:padding-inline-end .24s ease!important;
    min-height:100dvh!important;
    box-sizing:border-box!important;
  }
  body:not(.login):not(.kzk-public).desktop-sidebar-closed .container{
    padding-inline-end:24px!important;
  }
  body:not(.login):not(.kzk-public) .topbar{
    position:sticky!important;
    top:12px!important;
    z-index:900!important;
    margin:0 0 16px!important;
    width:100%!important;
    box-sizing:border-box!important;
  }
  body:not(.login):not(.kzk-public) .topbar button[aria-label="menu"]{
    display:inline-flex!important;
  }
  body:not(.login):not(.kzk-public) .drawer-overlay{
    display:none!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar{
    position:fixed!important;
    top:16px!important;
    right:16px!important;
    bottom:16px!important;
    left:auto!important;
    width:var(--kzk-sidebar-w)!important;
    height:auto!important;
    max-height:calc(100dvh - 32px)!important;
    transform:translateX(0)!important;
    border-radius:28px!important;
    z-index:850!important;
    background:#fff!important;
    color:#25131d!important;
    border:1px solid #ead6e0!important;
    box-shadow:0 20px 70px rgba(43,14,28,.14)!important;
    overflow:hidden!important;
    transition:transform .24s ease,opacity .2s ease!important;
  }
  body:not(.login):not(.kzk-public).desktop-sidebar-closed .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public).desktop-sidebar-closed #drawer.kzk-sidebar{
    transform:translateX(calc(100% + 28px))!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  body:not(.login):not(.kzk-public) .drawer-hd{
    background:linear-gradient(135deg,#1c0d15,#3a1427)!important;
    color:#fff!important;
    border-bottom:0!important;
    padding:16px!important;
  }
  body:not(.login):not(.kzk-public) .drawer-sub{color:#f4dce7!important;}
  body:not(.login):not(.kzk-public) .drawer-hd button[aria-label="close"]{display:inline-flex!important;}
  body:not(.login):not(.kzk-public) .drawer-links{
    height:calc(100dvh - 126px)!important;
    max-height:calc(100dvh - 126px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:12px 12px 18px!important;
  }
  body:not(.login):not(.kzk-public) .card,
  body:not(.login):not(.kzk-public) .grid,
  body:not(.login):not(.kzk-public) main,
  body:not(.login):not(.kzk-public) .dashboard-v3,
  body:not(.login):not(.kzk-public) .settings-hub{
    position:relative!important;
    z-index:1!important;
  }
}
@media (max-width:1099px){
  body:not(.login):not(.kzk-public) .container{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:10px!important;
    box-sizing:border-box!important;
  }
  body:not(.login):not(.kzk-public) .topbar{z-index:3000!important;}
  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar{
    position:fixed!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:auto!important;
    width:min(380px,92vw)!important;
    height:100dvh!important;
    max-height:100dvh!important;
    transform:translateX(105%)!important;
    z-index:5000!important;
    border-radius:0!important;
    background:#fff!important;
  }
  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar.open,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar.open{
    transform:translateX(0)!important;
  }
  body:not(.login):not(.kzk-public) .drawer-overlay{
    position:fixed!important;
    inset:0!important;
    z-index:4990!important;
    background:rgba(17,10,15,.58)!important;
    backdrop-filter:blur(3px)!important;
  }
  body:not(.login):not(.kzk-public) .drawer-overlay.open{display:block!important;opacity:1!important;pointer-events:auto!important;}
}
.website-hero-preview{border:1px solid #ead6e0;border-radius:22px;padding:14px;background:linear-gradient(135deg,#fff,#fff4f8);display:grid;gap:10px}.website-hero-preview img{width:100%;max-height:190px;object-fit:cover;border-radius:18px;border:1px solid #f1d4e1}.hero-admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hero-admin-grid .full{grid-column:1/-1}@media(max-width:760px){.hero-admin-grid{grid-template-columns:1fr}}

/* =========================================================
   KZK Sprint 7.6 - Final Sidebar Polish
   - Desktop sidebar is collapsible, not permanently covering content.
   - Content area shifts only when sidebar is visible.
   - Mobile remains drawer with overlay.
   ========================================================= */
:root{--kzk-sidebar-final-w:304px;--kzk-shell-final-gap:18px;}
@media (min-width:1100px){
  body:not(.login):not(.kzk-public){overflow-x:hidden!important;background:#faf7fa!important;}
  body:not(.login):not(.kzk-public) .container{
    width:auto!important;max-width:none!important;margin:0!important;min-height:100dvh!important;
    padding:16px 24px 28px!important;
    padding-inline-end:24px!important;
    transition:padding-inline-end .28s cubic-bezier(.2,.8,.2,1)!important;
  }
  body:not(.login):not(.kzk-public):not(.desktop-sidebar-closed) .container{
    padding-inline-end:calc(var(--kzk-sidebar-final-w) + var(--kzk-shell-final-gap) + 24px)!important;
  }
  body:not(.login):not(.kzk-public) .topbar{
    position:sticky!important;top:12px!important;z-index:1000!important;margin:0 0 16px!important;
    width:100%!important;border-radius:24px!important;
  }
  body:not(.login):not(.kzk-public) .topbar button[aria-label="menu"]{display:inline-flex!important;visibility:visible!important;}
  body:not(.login):not(.kzk-public) .drawer-overlay{display:none!important;opacity:0!important;pointer-events:none!important;}
  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar{
    position:fixed!important;top:16px!important;right:16px!important;bottom:16px!important;left:auto!important;
    width:var(--kzk-sidebar-final-w)!important;height:auto!important;max-height:calc(100dvh - 32px)!important;
    transform:translateX(calc(100% + 34px))!important;opacity:0!important;pointer-events:none!important;
    border-radius:30px!important;z-index:900!important;overflow:hidden!important;
    background:#fff!important;color:#25131d!important;border:1px solid #ead6e0!important;
    box-shadow:0 24px 72px rgba(43,14,28,.16)!important;
    transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .22s ease!important;
  }
  body:not(.login):not(.kzk-public):not(.desktop-sidebar-closed) .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public):not(.desktop-sidebar-closed) #drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar.open,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar.open{
    transform:translateX(0)!important;opacity:1!important;pointer-events:auto!important;
  }
  body:not(.login):not(.kzk-public) .drawer-hd{background:linear-gradient(135deg,#1c0d15,#3d152b)!important;color:#fff!important;padding:16px!important;border:0!important;}
  body:not(.login):not(.kzk-public) .drawer-hd button[aria-label="close"]{display:inline-flex!important;background:rgba(255,255,255,.12)!important;color:#fff!important;border-color:rgba(255,255,255,.18)!important;}
  body:not(.login):not(.kzk-public) .drawer-links{height:calc(100dvh - 126px)!important;max-height:calc(100dvh - 126px)!important;overflow-y:auto!important;overflow-x:hidden!important;padding:12px 12px 20px!important;}
  body:not(.login):not(.kzk-public) .kzk-nav-group{border-radius:18px!important;background:#fff!important;border-color:#f0dce6!important;box-shadow:0 10px 24px rgba(47,15,31,.04)!important;}
  body:not(.login):not(.kzk-public) .kzk-nav-group summary{padding:12px 14px!important;color:#25131d!important;}
  body:not(.login):not(.kzk-public) .drawer-link{border-radius:14px!important;background:#fff!important;color:#25131d!important;border:1px solid transparent!important;}
  body:not(.login):not(.kzk-public) .drawer-link:hover{background:#fff0f6!important;border-color:#f0d2df!important;transform:translateX(-2px)!important;}
  body:not(.login):not(.kzk-public) .drawer-link.active{background:linear-gradient(135deg,#ffeaf2,#fff)!important;color:#b91c55!important;border-color:#efc6d7!important;box-shadow:inset -4px 0 0 #e94d78!important;}
}
@media (max-width:1099px){
  body:not(.login):not(.kzk-public) .container{width:100%!important;max-width:100%!important;margin:0!important;padding:10px!important;}
  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:auto!important;width:min(380px,92vw)!important;height:100dvh!important;transform:translateX(105%)!important;z-index:5000!important;border-radius:0!important;}
  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar.open,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar.open{transform:translateX(0)!important;}
  body:not(.login):not(.kzk-public) .drawer-overlay{position:fixed!important;inset:0!important;z-index:4990!important;background:rgba(17,10,15,.58)!important;backdrop-filter:blur(3px)!important;}
  body:not(.login):not(.kzk-public) .drawer-overlay.open{display:block!important;opacity:1!important;pointer-events:auto!important;}
}

/* =========================================================
   KZK Sprint 7.7 - Admin Shell Real Grid Layout Fix
   هدف التعديل:
   - على الديسكتوب السايدبار جزء من الـ layout وليس overlay.
   - عند الفتح المحتوى يتقلص بجانبه ولا يختفي تحته.
   - عند القفل المحتوى يأخذ العرض كامل.
   - على الموبايل يظل Drawer Overlay.
   ========================================================= */
:root{
  --kzk-admin-sidebar-w: 306px;
  --kzk-admin-shell-gap: 18px;
}
@media (min-width:1100px){
  body:not(.login):not(.kzk-public){
    overflow-x:hidden!important;
    background:#fbf7fa!important;
  }
  body:not(.login):not(.kzk-public) .container{
    width:100%!important;
    max-width:100%!important;
    min-height:100dvh!important;
    margin:0!important;
    padding:16px 22px 26px!important;
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) var(--kzk-admin-sidebar-w)!important;
    grid-template-rows:auto auto!important;
    column-gap:var(--kzk-admin-shell-gap)!important;
    row-gap:16px!important;
    align-items:start!important;
    transition:grid-template-columns .28s cubic-bezier(.2,.8,.2,1), column-gap .28s cubic-bezier(.2,.8,.2,1)!important;
  }
  body:not(.login):not(.kzk-public).desktop-sidebar-closed .container{
    grid-template-columns:minmax(0,1fr) 0!important;
    column-gap:0!important;
  }
  body:not(.login):not(.kzk-public) .container > *:not(.drawer):not(.drawer-overlay){
    grid-column:1!important;
    min-width:0!important;
    max-width:100%!important;
  }
  body:not(.login):not(.kzk-public) .topbar{
    grid-column:1!important;
    position:sticky!important;
    top:12px!important;
    z-index:1100!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    box-sizing:border-box!important;
  }
  body:not(.login):not(.kzk-public) .drawer-overlay{
    display:none!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar{
    grid-column:2!important;
    grid-row:1 / span 999!important;
    align-self:start!important;
    justify-self:stretch!important;
    position:sticky!important;
    top:16px!important;
    right:auto!important;
    left:auto!important;
    bottom:auto!important;
    width:100%!important;
    height:calc(100dvh - 32px)!important;
    max-height:calc(100dvh - 32px)!important;
    transform:none!important;
    opacity:1!important;
    pointer-events:auto!important;
    visibility:visible!important;
    z-index:1050!important;
    border-radius:28px!important;
    overflow:hidden!important;
    background:#fff!important;
    color:#24131d!important;
    border:1px solid #efd7e2!important;
    box-shadow:0 20px 48px rgba(57,18,37,.13)!important;
    transition:opacity .22s ease, visibility .22s ease!important;
  }
  body:not(.login):not(.kzk-public).desktop-sidebar-closed .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public).desktop-sidebar-closed #drawer.kzk-sidebar{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    width:0!important;
    min-width:0!important;
    border:0!important;
    box-shadow:none!important;
  }
  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar.open,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar.open{
    transform:none!important;
  }
  body:not(.login):not(.kzk-public) .drawer-hd{
    background:linear-gradient(135deg,#1d0d15,#45162d)!important;
    color:#fff!important;
    border:0!important;
    padding:15px!important;
    min-height:74px!important;
  }
  body:not(.login):not(.kzk-public) .drawer-hd button[aria-label="close"]{
    display:inline-flex!important;
    background:rgba(255,255,255,.12)!important;
    color:#fff!important;
    border-color:rgba(255,255,255,.2)!important;
  }
  body:not(.login):not(.kzk-public) .drawer-links{
    height:calc(100dvh - 108px)!important;
    max-height:calc(100dvh - 108px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:12px 12px 18px!important;
    box-sizing:border-box!important;
  }
  body:not(.login):not(.kzk-public) .kzk-nav-group{
    border-radius:18px!important;
    background:#fff!important;
    border:1px solid #f0dce6!important;
    box-shadow:0 8px 20px rgba(47,15,31,.035)!important;
  }
  body:not(.login):not(.kzk-public) .kzk-nav-group + .kzk-nav-group{margin-top:10px!important;}
  body:not(.login):not(.kzk-public) .kzk-nav-group summary{
    padding:12px 14px!important;
    color:#25131d!important;
    font-weight:800!important;
  }
  body:not(.login):not(.kzk-public) .drawer-link{
    border-radius:14px!important;
    color:#25131d!important;
    border:1px solid transparent!important;
  }
  body:not(.login):not(.kzk-public) .drawer-link:hover{
    background:#fff1f6!important;
    border-color:#f0d2df!important;
  }
  body:not(.login):not(.kzk-public) .drawer-link.active{
    background:linear-gradient(135deg,#ffe9f2,#fff)!important;
    color:#c91e5f!important;
    border-color:#efc6d7!important;
    box-shadow:inset -4px 0 0 #e94d78!important;
  }
  body:not(.login):not(.kzk-public) .card,
  body:not(.login):not(.kzk-public) .panel,
  body:not(.login):not(.kzk-public) .table-wrap,
  body:not(.login):not(.kzk-public) .customers-layout,
  body:not(.login):not(.kzk-public) .dashboard-grid,
  body:not(.login):not(.kzk-public) .kzk-dashboard{
    max-width:100%!important;
    box-sizing:border-box!important;
  }
}
@media (max-width:1099px){
  body:not(.login):not(.kzk-public) .container{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:10px!important;
    box-sizing:border-box!important;
  }
  body:not(.login):not(.kzk-public) .topbar{
    position:sticky!important;
    top:8px!important;
    z-index:1000!important;
    margin-bottom:12px!important;
  }
  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar{
    position:fixed!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:auto!important;
    width:min(380px,92vw)!important;
    height:100dvh!important;
    max-height:100dvh!important;
    transform:translateX(105%)!important;
    z-index:5000!important;
    border-radius:0!important;
    overflow-y:auto!important;
    background:#fff!important;
    transition:transform .25s cubic-bezier(.2,.8,.2,1)!important;
  }
  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar.open,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar.open{
    transform:translateX(0)!important;
  }
  body:not(.login):not(.kzk-public) .drawer-overlay{
    position:fixed!important;
    inset:0!important;
    z-index:4990!important;
    background:rgba(18,8,15,.58)!important;
    backdrop-filter:blur(3px)!important;
  }
  body:not(.login):not(.kzk-public) .drawer-overlay.open{
    display:block!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
}

/* =========================================================
   KZK Sprint 7.8 - FINAL Admin Sidebar Direction/Layout Fix
   سبب المشكلة: الصفحة RTL، فـ CSS Grid كان بيحط العمود الثاني شمال.
   الحل: نخلي الـ shell نفسه LTR للـ layout فقط، والمحتوى الداخلي RTL.
   ========================================================= */
:root{
  --kzk-admin-final-sidebar-w: 300px;
  --kzk-admin-final-gap: 18px;
}
@media (min-width:1100px){
  body:not(.login):not(.kzk-public){
    overflow-x:hidden!important;
    background:#fbf7fa!important;
  }
  body:not(.login):not(.kzk-public) .container{
    direction:ltr!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) var(--kzk-admin-final-sidebar-w)!important;
    grid-template-rows:auto auto!important;
    gap:16px var(--kzk-admin-final-gap)!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:16px 22px 26px!important;
    box-sizing:border-box!important;
    min-height:100dvh!important;
  }
  body:not(.login):not(.kzk-public).desktop-sidebar-closed .container{
    grid-template-columns:minmax(0,1fr) 0!important;
    column-gap:0!important;
  }
  body:not(.login):not(.kzk-public) .container > *{
    direction:rtl!important;
  }
  body:not(.login):not(.kzk-public) .container > *:not(.drawer):not(.drawer-overlay){
    grid-column:1!important;
    min-width:0!important;
    max-width:100%!important;
  }
  body:not(.login):not(.kzk-public) .topbar{
    grid-column:1!important;
    grid-row:1!important;
    position:sticky!important;
    top:12px!important;
    z-index:80!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    box-sizing:border-box!important;
  }
  body:not(.login):not(.kzk-public) .drawer-overlay{
    display:none!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar{
    direction:rtl!important;
    grid-column:2!important;
    grid-row:1 / span 100!important;
    position:sticky!important;
    top:16px!important;
    right:auto!important;
    left:auto!important;
    bottom:auto!important;
    width:100%!important;
    min-width:0!important;
    height:calc(100dvh - 32px)!important;
    max-height:calc(100dvh - 32px)!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    z-index:90!important;
    border-radius:28px!important;
    overflow:hidden!important;
    background:#fff!important;
    color:#24131d!important;
    border:1px solid #efd7e2!important;
    box-shadow:0 18px 48px rgba(57,18,37,.12)!important;
    display:flex!important;
    flex-direction:column!important;
  }
  body:not(.login):not(.kzk-public).desktop-sidebar-closed .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public).desktop-sidebar-closed #drawer.kzk-sidebar{
    width:0!important;
    min-width:0!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    border:0!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }
  body:not(.login):not(.kzk-public) .drawer-hd{
    min-height:70px!important;
    padding:14px!important;
    flex:0 0 auto!important;
    background:linear-gradient(135deg,#1d0d15,#42162b)!important;
    color:#fff!important;
    border:0!important;
  }
  body:not(.login):not(.kzk-public) .drawer-user{min-width:0!important;}
  body:not(.login):not(.kzk-public) .drawer-name,
  body:not(.login):not(.kzk-public) .drawer-sub{
    max-width:190px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  body:not(.login):not(.kzk-public) .drawer-hd button[aria-label="close"]{
    display:inline-flex!important;
    flex:0 0 auto!important;
  }
  body:not(.login):not(.kzk-public) .drawer-links{
    flex:1 1 auto!important;
    height:auto!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:12px!important;
    gap:8px!important;
    scrollbar-width:thin!important;
  }
  body:not(.login):not(.kzk-public) .kzk-nav-group{
    border-radius:16px!important;
    margin:0 0 8px!important;
    background:#fff!important;
    border:1px solid #efd7e2!important;
    box-shadow:0 8px 18px rgba(47,15,31,.035)!important;
    overflow:hidden!important;
  }
  body:not(.login):not(.kzk-public) .kzk-nav-group summary{
    min-height:44px!important;
    padding:10px 12px!important;
    font-size:15px!important;
    line-height:1.35!important;
    color:#24131d!important;
    white-space:normal!important;
    overflow:visible!important;
  }
  body:not(.login):not(.kzk-public) .kzk-nav-group-body{
    padding:0 8px 8px!important;
  }
  body:not(.login):not(.kzk-public) .drawer-link{
    min-height:40px!important;
    padding:9px 11px!important;
    font-size:14px!important;
    line-height:1.35!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    justify-content:flex-start!important;
    gap:8px!important;
    border-radius:13px!important;
    color:#24131d!important;
    border:1px solid transparent!important;
  }
  body:not(.login):not(.kzk-public) .drawer-link:hover{
    background:#fff1f6!important;
    border-color:#f0d2df!important;
    transform:none!important;
  }
  body:not(.login):not(.kzk-public) .drawer-link.active{
    background:linear-gradient(135deg,#ffe9f2,#fff)!important;
    color:#c91e5f!important;
    border-color:#efc6d7!important;
    box-shadow:inset -4px 0 0 #e94d78!important;
  }
  body:not(.login):not(.kzk-public) .drawer-sep{
    margin:8px 0!important;
    background:#f0dce6!important;
    height:1px!important;
    flex:0 0 auto!important;
  }
}

@media (max-width:1099px){
  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar{
    right:0!important;
    left:auto!important;
    transform:translateX(105%)!important;
    width:min(360px,90vw)!important;
  }
  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar.open,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar.open{
    transform:translateX(0)!important;
  }
}


/* =========================================================
   KZK Sprint 7.9 - FINAL ADMIN SHELL CLEANUP
   - Fix remaining right gutter on desktop.
   - Keep sidebar on the right as real grid column.
   - Remove huge bottom empty spaces caused by forced min heights.
   - Ensure full sidebar menu is visible and scrollable.
   ========================================================= */
:root{
  --kzk-shell-sidebar-w: 292px;
  --kzk-shell-gap: 10px;
  --kzk-shell-pad: 10px;
}

@media (min-width:1100px){
  html, body{width:100%;max-width:100%;overflow-x:hidden!important;}
  body:not(.login):not(.kzk-public){
    background:#fbf7fa!important;
  }

  body:not(.login):not(.kzk-public) .container{
    direction:ltr!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) var(--kzk-shell-sidebar-w)!important;
    grid-template-areas:
      "topbar sidebar"
      "content sidebar"!important;
    grid-auto-rows:auto!important;
    gap:10px var(--kzk-shell-gap)!important;
    width:100vw!important;
    max-width:100vw!important;
    min-height:100dvh!important;
    margin:0!important;
    padding:var(--kzk-shell-pad)!important;
    box-sizing:border-box!important;
  }

  body:not(.login):not(.kzk-public).desktop-sidebar-closed .container{
    grid-template-columns:minmax(0,1fr) 0!important;
    column-gap:0!important;
  }

  body:not(.login):not(.kzk-public) .container > *{
    direction:rtl!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  body:not(.login):not(.kzk-public) .topbar{
    grid-area:topbar!important;
    position:sticky!important;
    top:10px!important;
    z-index:60!important;
    width:100%!important;
    margin:0!important;
  }

  body:not(.login):not(.kzk-public) .container > *:not(.topbar):not(.drawer):not(.drawer-overlay):not(script):not(style){
    grid-area:content!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }

  body:not(.login):not(.kzk-public) .drawer-overlay{display:none!important;}

  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar{
    grid-area:sidebar!important;
    position:sticky!important;
    top:10px!important;
    right:auto!important;
    left:auto!important;
    width:var(--kzk-shell-sidebar-w)!important;
    min-width:var(--kzk-shell-sidebar-w)!important;
    max-width:var(--kzk-shell-sidebar-w)!important;
    height:calc(100dvh - (var(--kzk-shell-pad) * 2))!important;
    max-height:calc(100dvh - (var(--kzk-shell-pad) * 2))!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    border-radius:22px!important;
    z-index:70!important;
    margin:0!important;
  }

  body:not(.login):not(.kzk-public).desktop-sidebar-closed .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public).desktop-sidebar-closed #drawer.kzk-sidebar{
    width:0!important;min-width:0!important;max-width:0!important;
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    border:0!important;box-shadow:none!important;margin:0!important;padding:0!important;
  }

  body:not(.login):not(.kzk-public) .drawer-hd{
    flex:0 0 auto!important;
    min-height:64px!important;
    padding:12px!important;
  }
  body:not(.login):not(.kzk-public) .drawer-links{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:10px!important;
    padding-bottom:18px!important;
  }
  body:not(.login):not(.kzk-public) .kzk-nav-group{margin-bottom:8px!important;overflow:visible!important;}
  body:not(.login):not(.kzk-public) .kzk-nav-group summary,
  body:not(.login):not(.kzk-public) .drawer-link{
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    line-height:1.35!important;
  }

  /* Kill old artificial page heights that create massive bottom blank space */
  body:not(.login):not(.kzk-public) .card,
  body:not(.login):not(.kzk-public) .panel,
  body:not(.login):not(.kzk-public) .split,
  body:not(.login):not(.kzk-public) .main,
  body:not(.login):not(.kzk-public) .content,
  body:not(.login):not(.kzk-public) .customers-shell,
  body:not(.login):not(.kzk-public) .settings-page,
  body:not(.login):not(.kzk-public) .users-layout{
    max-width:100%!important;
  }

  body:not(.login):not(.kzk-public) .empty,
  body:not(.login):not(.kzk-public) .empty-state,
  body:not(.login):not(.kzk-public) .placeholder,
  body:not(.login):not(.kzk-public) .customer-detail-empty{
    min-height:240px!important;
  }
}

@media (max-width:1099px){
  body:not(.login):not(.kzk-public) .container{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:10px!important;
    box-sizing:border-box!important;
  }
  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar{
    position:fixed!important;
    top:0!important;right:0!important;left:auto!important;bottom:0!important;
    width:min(340px,88vw)!important;
    max-width:88vw!important;
    height:100dvh!important;
    transform:translateX(105%)!important;
    z-index:5000!important;
    border-radius:0!important;
  }
  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar.open,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar.open{transform:translateX(0)!important;}
  body:not(.login):not(.kzk-public) .drawer-links{overflow-y:auto!important;max-height:calc(100dvh - 78px)!important;}
}

/* =========================================================
   KZK Sprint 7.10 - Focused Layout Fix
   Scope only:
   1) Desktop sidebar right gap.
   2) Mobile sidebar drawer.
   3) Admin mobile header stability.
   ========================================================= */
:root{
  --kzk-s710-sidebar-w: 288px;
  --kzk-s710-gap: 8px;
  --kzk-s710-pad: 8px;
}

@media (min-width:1100px){
  html,body{overflow-x:hidden!important;max-width:100%!important;}
  body:not(.login):not(.kzk-public){background:#fbf7fa!important;}

  body:not(.login):not(.kzk-public) .container{
    direction:ltr!important;
    width:100%!important;
    max-width:100%!important;
    min-height:100dvh!important;
    margin:0!important;
    padding:var(--kzk-s710-pad)!important;
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) var(--kzk-s710-sidebar-w)!important;
    grid-template-areas:
      "topbar sidebar"
      "content sidebar"!important;
    gap:var(--kzk-s710-gap)!important;
    align-items:start!important;
  }

  body:not(.login):not(.kzk-public).desktop-sidebar-closed .container{
    grid-template-columns:minmax(0,1fr) 0!important;
    column-gap:0!important;
  }

  body:not(.login):not(.kzk-public) .container > *{direction:rtl!important;box-sizing:border-box!important;min-width:0!important;max-width:100%!important;}

  body:not(.login):not(.kzk-public) .topbar{
    grid-area:topbar!important;
    width:100%!important;
    margin:0!important;
    position:sticky!important;
    top:8px!important;
    z-index:80!important;
  }

  body:not(.login):not(.kzk-public) .container > *:not(.topbar):not(.drawer):not(.drawer-overlay):not(script):not(style){
    grid-area:content!important;
    width:100%!important;
    margin:0!important;
    max-width:100%!important;
  }

  body:not(.login):not(.kzk-public) .drawer-overlay{display:none!important;opacity:0!important;pointer-events:none!important;}

  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar{
    grid-area:sidebar!important;
    position:sticky!important;
    top:8px!important;
    right:auto!important;
    left:auto!important;
    bottom:auto!important;
    width:var(--kzk-s710-sidebar-w)!important;
    min-width:var(--kzk-s710-sidebar-w)!important;
    max-width:var(--kzk-s710-sidebar-w)!important;
    height:calc(100dvh - (var(--kzk-s710-pad) * 2))!important;
    max-height:calc(100dvh - (var(--kzk-s710-pad) * 2))!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    border-radius:20px!important;
    z-index:90!important;
  }

  body:not(.login):not(.kzk-public).desktop-sidebar-closed .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public).desktop-sidebar-closed #drawer.kzk-sidebar{
    width:0!important;min-width:0!important;max-width:0!important;
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    border:0!important;box-shadow:none!important;overflow:hidden!important;
  }

  body:not(.login):not(.kzk-public) .drawer-hd{
    flex:0 0 auto!important;
    min-height:62px!important;
    padding:10px 12px!important;
  }
  body:not(.login):not(.kzk-public) .drawer-links{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:10px!important;
    gap:7px!important;
  }
  body:not(.login):not(.kzk-public) .kzk-nav-group{margin:0 0 7px!important;overflow:visible!important;border-radius:15px!important;}
  body:not(.login):not(.kzk-public) .kzk-nav-group summary{padding:10px 11px!important;line-height:1.35!important;white-space:normal!important;overflow:visible!important;}
  body:not(.login):not(.kzk-public) .drawer-link{padding:9px 10px!important;line-height:1.35!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;}
}

@media (max-width:1099px){
  html,body{overflow-x:hidden!important;max-width:100%!important;}
  body:not(.login):not(.kzk-public) .container{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:8px!important;
    box-sizing:border-box!important;
  }
  body:not(.login):not(.kzk-public) .topbar{
    position:sticky!important;
    top:6px!important;
    z-index:1200!important;
    width:100%!important;
    margin:0 0 10px!important;
    padding:8px 10px!important;
    border-radius:18px!important;
  }
  body:not(.login):not(.kzk-public) .topbar .brand{min-width:0!important;flex:1 1 auto!important;justify-content:center!important;}
  body:not(.login):not(.kzk-public) .topbar .brand .meta{min-width:0!important;}
  body:not(.login):not(.kzk-public) .topbar .brand .title,
  body:not(.login):not(.kzk-public) .topbar .brand .sub{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:150px!important;}
  body:not(.login):not(.kzk-public) .topbar .install-pill{display:none!important;}
  body:not(.login):not(.kzk-public) .topbar .pill.icon{width:40px!important;height:40px!important;min-width:40px!important;padding:0!important;}

  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar{
    position:fixed!important;
    top:0!important;right:0!important;left:auto!important;bottom:0!important;
    width:min(330px,86vw)!important;
    max-width:86vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:0!important;
    transform:translateX(110%)!important;
    z-index:5000!important;
    border-radius:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    transition:transform .24s cubic-bezier(.2,.8,.2,1)!important;
    box-shadow:-18px 0 46px rgba(32,11,22,.22)!important;
  }
  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar.open,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar.open{transform:translateX(0)!important;}
  body:not(.login):not(.kzk-public) .drawer-overlay{
    position:fixed!important;inset:0!important;z-index:4990!important;
    display:block!important;opacity:0!important;pointer-events:none!important;
    background:rgba(18,8,15,.56)!important;backdrop-filter:blur(3px)!important;
  }
  body:not(.login):not(.kzk-public) .drawer-overlay.open{opacity:1!important;pointer-events:auto!important;}
  body:not(.login):not(.kzk-public) .drawer-hd{flex:0 0 auto!important;min-height:66px!important;padding:12px!important;}
  body:not(.login):not(.kzk-public) .drawer-links{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:10px 10px 18px!important;
  }
  body:not(.login):not(.kzk-public) .kzk-nav-group{margin-bottom:8px!important;overflow:visible!important;border-radius:16px!important;}
  body:not(.login):not(.kzk-public) .kzk-nav-group summary,
  body:not(.login):not(.kzk-public) .drawer-link{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.38!important;}
}

/* =========================================================
   KZK Sprint 7.11 Focused Layout Fix
   Scope only:
   - Admin sidebar desktop/mobile
   - Admin content right gap
   - Public website mobile header
   ========================================================= */
:root{
  --kzk-admin-sidebar-final-w: 286px;
  --kzk-admin-shell-gap-final: 12px;
  --kzk-admin-shell-pad-final: 10px;
}

/* ---------- Admin desktop shell: sidebar as real right column, never overlay ---------- */
@media (min-width:1100px){
  html,body{overflow-x:hidden!important;}
  body:not(.login):not(.kzk-public){
    margin:0!important;
    padding:0!important;
    background:#fbf7fa!important;
    overflow-x:hidden!important;
  }
  body:not(.login):not(.kzk-public) .container{
    direction:ltr!important; /* places sidebar column on the RIGHT in the template below */
    width:100vw!important;
    max-width:100vw!important;
    min-height:100dvh!important;
    margin:0!important;
    padding:var(--kzk-admin-shell-pad-final)!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) var(--kzk-admin-sidebar-final-w)!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    grid-template-areas:
      "topbar sidebar"
      "content sidebar"!important;
    column-gap:var(--kzk-admin-shell-gap-final)!important;
    row-gap:var(--kzk-admin-shell-gap-final)!important;
    align-items:start!important;
    box-sizing:border-box!important;
  }
  body:not(.login):not(.kzk-public).desktop-sidebar-closed .container{
    grid-template-columns:minmax(0,1fr) 0!important;
    column-gap:0!important;
  }
  body:not(.login):not(.kzk-public) .container > *{
    direction:rtl!important;
    box-sizing:border-box!important;
    min-width:0!important;
    max-width:100%!important;
  }
  body:not(.login):not(.kzk-public) .topbar{
    grid-area:topbar!important;
    position:sticky!important;
    top:var(--kzk-admin-shell-pad-final)!important;
    z-index:30!important;
    width:100%!important;
    margin:0!important;
  }
  body:not(.login):not(.kzk-public) .container > *:not(.topbar):not(.drawer):not(.drawer-overlay):not(script):not(style){
    grid-area:content!important;
    width:100%!important;
    margin:0!important;
    max-width:100%!important;
    min-width:0!important;
  }
  body:not(.login):not(.kzk-public) .drawer-overlay{display:none!important;}
  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar{
    grid-area:sidebar!important;
    position:sticky!important;
    top:var(--kzk-admin-shell-pad-final)!important;
    right:auto!important;
    left:auto!important;
    bottom:auto!important;
    width:var(--kzk-admin-sidebar-final-w)!important;
    min-width:var(--kzk-admin-sidebar-final-w)!important;
    max-width:var(--kzk-admin-sidebar-final-w)!important;
    height:calc(100dvh - (var(--kzk-admin-shell-pad-final) * 2))!important;
    max-height:calc(100dvh - (var(--kzk-admin-shell-pad-final) * 2))!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    border-radius:20px!important;
    z-index:40!important;
  }
  body:not(.login):not(.kzk-public).desktop-sidebar-closed .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public).desktop-sidebar-closed #drawer.kzk-sidebar{
    width:0!important;
    min-width:0!important;
    max-width:0!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    border:0!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }
  body:not(.login):not(.kzk-public) .drawer-hd{
    flex:0 0 auto!important;
    min-height:64px!important;
    padding:10px 12px!important;
  }
  body:not(.login):not(.kzk-public) .drawer-links{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:10px 10px 18px!important;
    scrollbar-gutter:stable!important;
  }
  body:not(.login):not(.kzk-public) .kzk-nav-group{overflow:visible!important;margin:0 0 8px!important;border-radius:16px!important;}
  body:not(.login):not(.kzk-public) .kzk-nav-group summary,
  body:not(.login):not(.kzk-public) .drawer-link{
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    line-height:1.38!important;
    min-height:42px!important;
    word-break:normal!important;
  }
}

/* ---------- Admin mobile/tablet: real drawer from RIGHT, no hidden items ---------- */
@media (max-width:1099px){
  html,body{overflow-x:hidden!important;max-width:100%!important;}
  body:not(.login):not(.kzk-public){
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
    background:#fbf7fa!important;
  }
  body:not(.login):not(.kzk-public) .container{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-height:100dvh!important;
    margin:0!important;
    padding:8px!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
  }
  body:not(.login):not(.kzk-public) .topbar{
    position:sticky!important;
    top:6px!important;
    z-index:1200!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 0 10px!important;
    padding:8px 10px!important;
    border-radius:18px!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
  }
  body:not(.login):not(.kzk-public) .topbar .brand{min-width:0!important;flex:1 1 auto!important;justify-content:center!important;gap:7px!important;}
  body:not(.login):not(.kzk-public) .topbar .nav-logo{width:42px!important;height:42px!important;min-width:42px!important;}
  body:not(.login):not(.kzk-public) .topbar .brand .meta{min-width:0!important;}
  body:not(.login):not(.kzk-public) .topbar .brand .title,
  body:not(.login):not(.kzk-public) .topbar .brand .sub{
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:140px!important;
  }
  body:not(.login):not(.kzk-public) .topbar .install-pill{display:none!important;}
  body:not(.login):not(.kzk-public) .topbar .pill.icon{width:40px!important;height:40px!important;min-width:40px!important;padding:0!important;}

  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar{
    position:fixed!important;
    top:0!important;
    right:0!important;
    left:auto!important;
    bottom:0!important;
    width:min(332px,88vw)!important;
    max-width:88vw!important;
    min-width:0!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:0!important;
    transform:translateX(112%)!important;
    z-index:5000!important;
    border-radius:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    transition:transform .24s cubic-bezier(.2,.8,.2,1)!important;
    box-shadow:-18px 0 46px rgba(32,11,22,.26)!important;
    opacity:1!important;
    visibility:visible!important;
  }
  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar.open,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar.open{transform:translateX(0)!important;}
  body:not(.login):not(.kzk-public) .drawer-overlay{
    position:fixed!important;
    inset:0!important;
    z-index:4990!important;
    display:block!important;
    opacity:0!important;
    pointer-events:none!important;
    background:rgba(18,8,15,.56)!important;
    backdrop-filter:blur(3px)!important;
    transition:opacity .2s ease!important;
  }
  body:not(.login):not(.kzk-public) .drawer-overlay.open{opacity:1!important;pointer-events:auto!important;}
  body:not(.login):not(.kzk-public) .drawer-hd{flex:0 0 auto!important;min-height:66px!important;padding:12px!important;}
  body:not(.login):not(.kzk-public) .drawer-links{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:10px 10px calc(20px + env(safe-area-inset-bottom))!important;
    scrollbar-gutter:stable!important;
  }
  body:not(.login):not(.kzk-public) .kzk-nav-group{margin-bottom:8px!important;overflow:visible!important;border-radius:16px!important;}
  body:not(.login):not(.kzk-public) .kzk-nav-group summary,
  body:not(.login):not(.kzk-public) .drawer-link{
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    line-height:1.4!important;
    min-height:44px!important;
    word-break:normal!important;
  }
}

/* =========================================================
   KZK Sprint 7.12 - FULL BUILD SIDEBAR FINAL FIX
   Source build: Sprint7_11
   Focus: desktop right empty gap + mobile sidebar stability only.
   Desktop strategy: sidebar is pinned to the right edge, while the
   container width/margin is recalculated so content never hides behind it.
   ========================================================= */
:root{
  --kzk-s712-sidebar-w: 292px;
  --kzk-s712-gap: 10px;
  --kzk-s712-pad: 10px;
}

@media (min-width:1100px){
  html, body{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
    background:#fbf7fa!important;
  }

  body:not(.login):not(.kzk-public){
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
  }

  /* When sidebar is open: content area is explicitly reduced and shifted.
     This removes the empty area to the RIGHT because sidebar itself is right:0. */
  body:not(.login):not(.kzk-public) .container{
    display:block!important;
    direction:rtl!important;
    box-sizing:border-box!important;
    width:calc(100vw - var(--kzk-s712-sidebar-w) - var(--kzk-s712-gap) - (var(--kzk-s712-pad) * 2))!important;
    max-width:calc(100vw - var(--kzk-s712-sidebar-w) - var(--kzk-s712-gap) - (var(--kzk-s712-pad) * 2))!important;
    min-height:100dvh!important;
    margin-top:var(--kzk-s712-pad)!important;
    margin-left:var(--kzk-s712-pad)!important;
    margin-right:calc(var(--kzk-s712-sidebar-w) + var(--kzk-s712-gap) + var(--kzk-s712-pad))!important;
    margin-bottom:var(--kzk-s712-pad)!important;
    padding:0!important;
    overflow:visible!important;
  }

  /* Closed sidebar: content takes almost full viewport. */
  body:not(.login):not(.kzk-public).desktop-sidebar-closed .container{
    width:calc(100vw - (var(--kzk-s712-pad) * 2))!important;
    max-width:calc(100vw - (var(--kzk-s712-pad) * 2))!important;
    margin-right:var(--kzk-s712-pad)!important;
    margin-left:var(--kzk-s712-pad)!important;
  }

  body:not(.login):not(.kzk-public) .container > *{
    direction:rtl!important;
    box-sizing:border-box!important;
    max-width:100%!important;
  }

  body:not(.login):not(.kzk-public) .topbar{
    position:sticky!important;
    top:var(--kzk-s712-pad)!important;
    z-index:80!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 0 12px 0!important;
    box-sizing:border-box!important;
  }

  body:not(.login):not(.kzk-public) .drawer-overlay{
    display:none!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar{
    position:fixed!important;
    top:var(--kzk-s712-pad)!important;
    right:var(--kzk-s712-pad)!important;
    left:auto!important;
    bottom:auto!important;
    width:var(--kzk-s712-sidebar-w)!important;
    min-width:var(--kzk-s712-sidebar-w)!important;
    max-width:var(--kzk-s712-sidebar-w)!important;
    height:calc(100dvh - (var(--kzk-s712-pad) * 2))!important;
    max-height:calc(100dvh - (var(--kzk-s712-pad) * 2))!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    border-radius:20px!important;
    z-index:120!important;
    box-sizing:border-box!important;
  }

  body:not(.login):not(.kzk-public).desktop-sidebar-closed .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public).desktop-sidebar-closed #drawer.kzk-sidebar{
    transform:translateX(calc(100% + 26px))!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  body:not(.login):not(.kzk-public) .drawer-hd{
    flex:0 0 auto!important;
    min-height:66px!important;
    padding:10px 12px!important;
  }

  body:not(.login):not(.kzk-public) .drawer-links{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:10px 10px 20px!important;
    scrollbar-gutter:stable!important;
  }

  body:not(.login):not(.kzk-public) .kzk-nav-group{
    margin:0 0 8px!important;
    overflow:visible!important;
    border-radius:16px!important;
  }

  body:not(.login):not(.kzk-public) .kzk-nav-group summary,
  body:not(.login):not(.kzk-public) .drawer-link{
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    line-height:1.42!important;
    min-height:42px!important;
    word-break:normal!important;
  }
}

@media (max-width:1099px){
  html,body{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
  }

  body:not(.login):not(.kzk-public) .container{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:8px!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
  }

  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar{
    position:fixed!important;
    top:0!important;
    right:0!important;
    left:auto!important;
    bottom:0!important;
    width:min(330px,88vw)!important;
    max-width:88vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:0!important;
    transform:translateX(110%)!important;
    z-index:5000!important;
    border-radius:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    transition:transform .24s cubic-bezier(.2,.8,.2,1)!important;
  }

  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar.open,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar.open{
    transform:translateX(0)!important;
  }

  body:not(.login):not(.kzk-public) .drawer-links{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding-bottom:calc(22px + env(safe-area-inset-bottom))!important;
  }
}


/* =========================================================
   KZK Sprint 7.13 - Focused Final UI Stabilization
   Scope:
   1) Fix LEFT empty gap when desktop sidebar is open.
   2) Final mobile admin sidebar/header behavior.
   3) No feature changes.
   ========================================================= */
:root{
  --kzk-s713-sidebar-w: 292px;
  --kzk-s713-gap: 10px;
  --kzk-s713-pad: 10px;
}

@media (min-width:1100px){
  html, body{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    overflow-x:hidden !important;
  }

  body:not(.login):not(.kzk-public){
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    overflow-x:hidden !important;
    background:#fbf7fa !important;
  }

  /* Container always spans the viewport.
     We reserve space INSIDE the right padding for the sidebar.
     This avoids pushing the content left and creating a blank strip on the left. */
  body:not(.login):not(.kzk-public) .container{
    display:block !important;
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:100dvh !important;
    margin:0 !important;
    padding-top:var(--kzk-s713-pad) !important;
    padding-bottom:var(--kzk-s713-pad) !important;
    padding-right:calc(var(--kzk-s713-sidebar-w) + var(--kzk-s713-gap) + var(--kzk-s713-pad)) !important;
    padding-left:var(--kzk-s713-pad) !important;
    box-sizing:border-box !important;
    direction:rtl !important;
    overflow-x:hidden !important;
    transition:padding-right .22s ease !important;
  }

  body:not(.login):not(.kzk-public).desktop-sidebar-closed .container{
    padding-right:var(--kzk-s713-pad) !important;
  }

  body:not(.login):not(.kzk-public) .container > *{
    box-sizing:border-box !important;
    max-width:100% !important;
    direction:rtl !important;
  }

  body:not(.login):not(.kzk-public) .container > *:not(.drawer):not(.drawer-overlay):not(script):not(style){
    width:100% !important;
    min-width:0 !important;
    margin-right:0 !important;
    margin-left:0 !important;
  }

  body:not(.login):not(.kzk-public) .topbar{
    position:sticky !important;
    top:var(--kzk-s713-pad) !important;
    z-index:90 !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 0 12px 0 !important;
    box-sizing:border-box !important;
  }

  body:not(.login):not(.kzk-public) .drawer-overlay{
    display:none !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar{
    position:fixed !important;
    top:var(--kzk-s713-pad) !important;
    right:var(--kzk-s713-pad) !important;
    left:auto !important;
    bottom:auto !important;
    width:var(--kzk-s713-sidebar-w) !important;
    min-width:var(--kzk-s713-sidebar-w) !important;
    max-width:var(--kzk-s713-sidebar-w) !important;
    height:calc(100dvh - (var(--kzk-s713-pad) * 2)) !important;
    max-height:calc(100dvh - (var(--kzk-s713-pad) * 2)) !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    border-radius:20px !important;
    z-index:120 !important;
    box-sizing:border-box !important;
    transition:transform .22s ease, opacity .18s ease, visibility .18s ease !important;
  }

  body:not(.login):not(.kzk-public).desktop-sidebar-closed .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public).desktop-sidebar-closed #drawer.kzk-sidebar{
    transform:translateX(calc(100% + 28px)) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  body:not(.login):not(.kzk-public) .drawer-hd{
    flex:0 0 auto !important;
    min-height:66px !important;
    padding:10px 12px !important;
  }

  body:not(.login):not(.kzk-public) .drawer-links{
    flex:1 1 auto !important;
    min-height:0 !important;
    height:auto !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:10px 10px 22px !important;
    scrollbar-gutter:stable !important;
  }

  body:not(.login):not(.kzk-public) .kzk-nav-group{
    margin:0 0 8px !important;
    overflow:visible !important;
    border-radius:16px !important;
  }

  body:not(.login):not(.kzk-public) .kzk-nav-group summary,
  body:not(.login):not(.kzk-public) .drawer-link{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    line-height:1.42 !important;
    min-height:42px !important;
    word-break:normal !important;
  }
}

@media (max-width:1099px){
  html,body{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    overflow-x:hidden !important;
  }

  body:not(.login):not(.kzk-public) .container{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:8px !important;
    box-sizing:border-box !important;
    overflow-x:hidden !important;
  }

  body:not(.login):not(.kzk-public) .topbar{
    position:sticky !important;
    top:8px !important;
    z-index:250 !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 0 10px !important;
    padding:8px !important;
    border-radius:18px !important;
    gap:8px !important;
    box-sizing:border-box !important;
  }

  body:not(.login):not(.kzk-public) .topbar .brand{
    min-width:0 !important;
    flex:1 1 auto !important;
    justify-content:center !important;
    gap:7px !important;
  }

  body:not(.login):not(.kzk-public) .topbar .nav-logo{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
  }

  body:not(.login):not(.kzk-public) .topbar .brand .meta{min-width:0 !important;}
  body:not(.login):not(.kzk-public) .topbar .brand .title,
  body:not(.login):not(.kzk-public) .topbar .brand .sub{
    max-width:150px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  body:not(.login):not(.kzk-public) .topbar .install-pill{display:none !important;}
  body:not(.login):not(.kzk-public) .topbar .pill.icon{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    padding:0 !important;
  }

  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    left:auto !important;
    bottom:0 !important;
    width:min(334px,88vw) !important;
    max-width:88vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
    margin:0 !important;
    padding:0 !important;
    transform:translateX(112%) !important;
    z-index:5000 !important;
    border-radius:0 0 0 22px !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    transition:transform .24s cubic-bezier(.2,.8,.2,1) !important;
  }

  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar.open,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar.open{
    transform:translateX(0) !important;
  }

  body:not(.login):not(.kzk-public) .drawer-overlay{
    position:fixed !important;
    inset:0 !important;
    background:rgba(25,10,20,.45) !important;
    z-index:4990 !important;
    opacity:0 !important;
    pointer-events:none !important;
    transition:opacity .2s ease !important;
  }

  body:not(.login):not(.kzk-public) .drawer-overlay.open{
    opacity:1 !important;
    pointer-events:auto !important;
  }

  body:not(.login):not(.kzk-public) .drawer-hd{
    flex:0 0 auto !important;
    min-height:66px !important;
    padding:12px !important;
  }

  body:not(.login):not(.kzk-public) .drawer-links{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:10px 10px calc(28px + env(safe-area-inset-bottom)) !important;
  }

  body:not(.login):not(.kzk-public) .kzk-nav-group,
  body:not(.login):not(.kzk-public) .drawer-link{
    max-width:100% !important;
  }
}

/* =========================================================
   KZK Sprint 7.14 - DESKTOP LEFT GAP FINAL FIX ONLY
   Goal: remove the remaining blank area on the LEFT when the desktop
   sidebar is open. Keep mobile sidebar/header behavior untouched.
   ========================================================= */
:root{
  --kzk-s714-sidebar-w:292px;
  --kzk-s714-gap:10px;
  --kzk-s714-pad:10px;
}
@media (min-width:1100px){
  html,body{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
  }
  body:not(.login):not(.kzk-public){
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
    background:#fbf7fa!important;
  }

  /* Sidebar is fixed on the right. The content reserves sidebar space only from the right.
     No old grid/margin/translate is allowed to create a left gutter. */
  body:not(.login):not(.kzk-public) .container{
    display:block!important;
    position:relative!important;
    direction:rtl!important;
    width:100vw!important;
    max-width:100vw!important;
    min-width:0!important;
    min-height:100dvh!important;
    margin:0!important;
    padding-top:var(--kzk-s714-pad)!important;
    padding-bottom:var(--kzk-s714-pad)!important;
    padding-right:calc(var(--kzk-s714-sidebar-w) + var(--kzk-s714-gap) + var(--kzk-s714-pad))!important;
    padding-left:var(--kzk-s714-pad)!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
    transform:none!important;
  }
  body:not(.login):not(.kzk-public).desktop-sidebar-closed .container{
    padding-right:var(--kzk-s714-pad)!important;
  }

  body:not(.login):not(.kzk-public) .container > *{
    direction:rtl!important;
    box-sizing:border-box!important;
    min-width:0!important;
    max-width:100%!important;
    transform:none!important;
  }

  /* Direct page blocks must fill the calculated content area, not keep old centered widths. */
  body:not(.login):not(.kzk-public) .container > *:not(.drawer):not(.drawer-overlay):not(script):not(style),
  body:not(.login):not(.kzk-public) .topbar,
  body:not(.login):not(.kzk-public) main,
  body:not(.login):not(.kzk-public) .page,
  body:not(.login):not(.kzk-public) .page-wrap,
  body:not(.login):not(.kzk-public) .page-content,
  body:not(.login):not(.kzk-public) .content,
  body:not(.login):not(.kzk-public) .content-wrap,
  body:not(.login):not(.kzk-public) .main-content,
  body:not(.login):not(.kzk-public) .dashboard-page,
  body:not(.login):not(.kzk-public) .academy-dashboard,
  body:not(.login):not(.kzk-public) .settings-page,
  body:not(.login):not(.kzk-public) .customers-shell,
  body:not(.login):not(.kzk-public) .users-layout,
  body:not(.login):not(.kzk-public) .split,
  body:not(.login):not(.kzk-public) .grid,
  body:not(.login):not(.kzk-public) .card{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }

  body:not(.login):not(.kzk-public) .topbar{
    position:sticky!important;
    top:var(--kzk-s714-pad)!important;
    z-index:90!important;
    margin-bottom:12px!important;
  }

  body:not(.login):not(.kzk-public) .drawer-overlay{
    display:none!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  body:not(.login):not(.kzk-public) .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public) #drawer.kzk-sidebar{
    position:fixed!important;
    top:var(--kzk-s714-pad)!important;
    right:var(--kzk-s714-pad)!important;
    left:auto!important;
    bottom:auto!important;
    width:var(--kzk-s714-sidebar-w)!important;
    min-width:var(--kzk-s714-sidebar-w)!important;
    max-width:var(--kzk-s714-sidebar-w)!important;
    height:calc(100dvh - (var(--kzk-s714-pad) * 2))!important;
    max-height:calc(100dvh - (var(--kzk-s714-pad) * 2))!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    border-radius:20px!important;
    z-index:120!important;
    box-sizing:border-box!important;
  }
  body:not(.login):not(.kzk-public).desktop-sidebar-closed .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public).desktop-sidebar-closed #drawer.kzk-sidebar{
    transform:translateX(calc(100% + 28px))!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  body:not(.login):not(.kzk-public) .drawer-links{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding-bottom:22px!important;
  }
}

/* =========================================================
   KZK Sprint 7.19 - DELIVERY FIX: Desktop sidebar gap only
   Source build: Sprint7_14
   Problem: old desktop offsets/grid rules created empty space when sidebar opens.
   Fix: one real 2-column shell on desktop only. Mobile untouched.
   ========================================================= */
@media (min-width:1100px){
  html[dir="rtl"] body:not(.login):not(.kzk-public){
    overflow-x:hidden!important;
  }

  html[dir="rtl"] body:not(.login):not(.kzk-public) > .container{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 312px!important;
    grid-auto-rows:auto!important;
    column-gap:16px!important;
    row-gap:16px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:16px!important;
    padding-inline:16px!important;
    box-sizing:border-box!important;
    direction:ltr!important;
    overflow:visible!important;
  }

  html[dir="rtl"] body:not(.login):not(.kzk-public).desktop-sidebar-closed > .container{
    grid-template-columns:minmax(0,1fr) 0!important;
    column-gap:0!important;
  }

  html[dir="rtl"] body:not(.login):not(.kzk-public) > .container > *{
    min-width:0!important;
    max-width:100%!important;
    direction:rtl!important;
    box-sizing:border-box!important;
  }

  html[dir="rtl"] body:not(.login):not(.kzk-public) > .container > *:not(.drawer):not(#drawer):not(.drawer-overlay):not(#drawerOverlay){
    grid-column:1!important;
    width:100%!important;
    margin-inline:0!important;
    margin-left:0!important;
    margin-right:0!important;
    transform:none!important;
  }

  html[dir="rtl"] body:not(.login):not(.kzk-public) > .container > .topbar{
    position:sticky!important;
    top:12px!important;
    z-index:900!important;
    margin:0!important;
    width:100%!important;
  }

  html[dir="rtl"] body:not(.login):not(.kzk-public) > .container > .drawer-overlay,
  html[dir="rtl"] body:not(.login):not(.kzk-public) > .container > #drawerOverlay{
    display:none!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  html[dir="rtl"] body:not(.login):not(.kzk-public) > .container > .drawer.kzk-sidebar,
  html[dir="rtl"] body:not(.login):not(.kzk-public) > .container > #drawer.kzk-sidebar{
    grid-column:2!important;
    grid-row:1 / 999!important;
    position:sticky!important;
    top:16px!important;
    right:auto!important;
    left:auto!important;
    bottom:auto!important;
    width:312px!important;
    min-width:312px!important;
    max-width:312px!important;
    height:calc(100vh - 32px)!important;
    max-height:calc(100vh - 32px)!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    opacity:1!important;
    pointer-events:auto!important;
    z-index:850!important;
    align-self:start!important;
    overflow:hidden!important;
    border-radius:24px!important;
  }

  html[dir="rtl"] body:not(.login):not(.kzk-public).desktop-sidebar-closed > .container > .drawer.kzk-sidebar,
  html[dir="rtl"] body:not(.login):not(.kzk-public).desktop-sidebar-closed > .container > #drawer.kzk-sidebar{
    width:0!important;
    min-width:0!important;
    max-width:0!important;
    opacity:0!important;
    pointer-events:none!important;
    overflow:hidden!important;
    border:0!important;
    box-shadow:none!important;
  }

  html[dir="rtl"] body:not(.login):not(.kzk-public) > .container > .drawer.kzk-sidebar .drawer-links,
  html[dir="rtl"] body:not(.login):not(.kzk-public) > .container > #drawer.kzk-sidebar .drawer-links{
    height:calc(100vh - 126px)!important;
    max-height:calc(100vh - 126px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
}

/* === KZK Sprint 7.25: Login split layout - executor right, academy login left === */
body.login .login-wrap.crm-academy-login{
  width:min(1120px,94vw)!important;
  max-width:1120px!important;
  min-height:610px!important;
  display:grid!important;
  grid-template-columns:minmax(360px, 1fr) minmax(380px, 460px)!important;
  grid-template-areas:"login executor"!important;
  gap:22px!important;
  align-items:stretch!important;
  padding:22px!important;
  border-radius:34px!important;
  background:linear-gradient(135deg,#fff8fb,#fff,#fef9fa)!important;
  border:1px solid #efd6e3!important;
  box-shadow:0 34px 90px rgba(41,13,27,.14)!important;
  overflow:hidden!important;
  animation:none!important;
}
body.login .login-wrap.crm-academy-login:before,
body.login .login-wrap.crm-academy-login:after{display:none!important;}
body.login .login-executor-panel,
body.login .login-academy-panel{
  border-radius:28px;
  position:relative;
  overflow:hidden;
  min-width:0;
}
body.login .login-executor-panel{
  grid-area:executor;
  background:
    radial-gradient(360px 260px at 15% 15%, rgba(255,255,255,.18), transparent 62%),
    linear-gradient(145deg,#0b2636,#0f4d62 52%,#b80f1b);
  color:#fff;
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
body.login .login-executor-panel:after{
  content:"";
  position:absolute;
  inset:auto -90px -110px auto;
  width:300px;height:300px;border-radius:50%;
  background:rgba(255,255,255,.12);
}
body.login .executor-logo-wrap{
  width:132px;height:132px;border-radius:34px;background:#fff;display:grid;place-items:center;
  box-shadow:0 24px 50px rgba(0,0,0,.22);margin-bottom:18px;
}
body.login .executor-logo-wrap img{width:112px;height:112px;object-fit:contain;display:block;}
body.login .executor-kicker{display:inline-flex;width:max-content;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.10);border-radius:999px;padding:8px 12px;font-weight:900;margin-bottom:12px;}
body.login .login-executor-panel h2{margin:0 0 12px;font-size:34px;line-height:1.1;letter-spacing:-.03em;}
body.login .login-executor-panel p{margin:0 0 18px;line-height:1.9;color:rgba(255,255,255,.88);font-size:14px;}
body.login .executor-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative;z-index:1;}
body.login .executor-info-grid div{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:12px;}
body.login .executor-info-grid b{display:block;margin-bottom:6px;color:#fff;font-size:13px;}
body.login .executor-info-grid span{display:block;color:rgba(255,255,255,.86);line-height:1.65;font-size:12px;direction:ltr;text-align:right;}
body.login .login-academy-panel{
  grid-area:login;
  background:rgba(255,255,255,.86);
  border:1px solid #efd6e3;
  backdrop-filter:blur(18px);
  box-shadow:0 26px 70px rgba(41,13,27,.11);
  padding:30px 28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
body.login .login-academy-panel .client-logo-wrap{margin-bottom:10px;}
body.login .login-academy-panel .client-login-logo{width:138px!important;height:138px!important;object-fit:contain!important;filter:drop-shadow(0 18px 24px rgba(41,13,27,.15))!important;}
body.login .login-academy-panel .login-title{font-size:32px!important;color:#311021!important;font-weight:950!important;}
body.login .login-academy-panel .login-sub{color:#e94d78!important;font-weight:900!important;margin-bottom:8px!important;}
body.login .academy-login-desc{text-align:center;color:#6b6370;line-height:1.8;margin:8px 0 12px;font-size:13px;}
body.login .academy-login-form{display:grid;gap:11px;}
body.login .academy-login-form input{min-height:52px!important;border-radius:18px!important;border:1px solid #efd6e3!important;background:#fff!important;color:#311021!important;}
body.login .academy-login-form .btn.primary{min-height:52px!important;border-radius:18px!important;background:linear-gradient(135deg,#e94d78,#321323)!important;}
@media (max-width: 860px){
  body.login .login-wrap.crm-academy-login{grid-template-columns:1fr!important;grid-template-areas:"login" "executor"!important;padding:14px!important;min-height:auto!important;width:min(96vw,640px)!important;}
  body.login .login-executor-panel{padding:22px!important;}
  body.login .login-executor-panel h2{font-size:26px!important;}
  body.login .executor-logo-wrap{width:104px;height:104px;border-radius:26px;}
  body.login .executor-logo-wrap img{width:88px;height:88px;}
  body.login .executor-info-grid{grid-template-columns:1fr!important;}
  body.login .login-academy-panel{padding:24px 18px!important;}
}

/* =========================================================
   KZK Delivery Fix 7.27: remove excessive empty bottom gaps
   ========================================================= */
body:not(.login):not(.kzk-public) > .container{
  align-content:start !important;
  padding-bottom:12px !important;
}
body:not(.login):not(.kzk-public) .card:last-child,
body:not(.login):not(.kzk-public) main:last-child,
body:not(.login):not(.kzk-public) .page-content:last-child{
  margin-bottom:0 !important;
}
@media (min-width:1100px){
  body:not(.login):not(.kzk-public) > .container{
    min-height:auto !important;
  }
}

/* =========================================================
   KZK Delivery Fix 7.28 - REAL bottom empty space fix
   سبب الفراغ الكبير: rule قديم كان عامل للـ sidebar
   grid-row: 1 / 999 داخل CSS Grid، وده بيولد مئات الصفوف
   الوهمية ومع كل row-gap بيطلع scroll فاضي طويل تحت كل صفحة.
   الحل: السايدبار يمتد على صفين فقط: topbar + content.
   Scope: layout فقط - بدون لمس فلاتر/استعلامات/DB.
   ========================================================= */
@media (min-width:1100px){
  html[dir="rtl"] body:not(.login):not(.kzk-public) > .container,
  body:not(.login):not(.kzk-public) > .container{
    grid-template-rows:auto auto !important;
    grid-auto-rows:auto !important;
    align-content:start !important;
    min-height:auto !important;
    padding-bottom:12px !important;
  }

  html[dir="rtl"] body:not(.login):not(.kzk-public) > .container > .drawer.kzk-sidebar,
  html[dir="rtl"] body:not(.login):not(.kzk-public) > .container > #drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public) > .container > .drawer.kzk-sidebar,
  body:not(.login):not(.kzk-public) > .container > #drawer.kzk-sidebar{
    grid-row:1 / 3 !important;
    align-self:start !important;
  }

  html[dir="rtl"] body:not(.login):not(.kzk-public) > .container > *:not(.drawer):not(#drawer):not(.drawer-overlay):not(#drawerOverlay):not(.topbar):not(script):not(style),
  body:not(.login):not(.kzk-public) > .container > *:not(.drawer):not(#drawer):not(.drawer-overlay):not(#drawerOverlay):not(.topbar):not(script):not(style){
    grid-row:2 !important;
  }

  html[dir="rtl"] body:not(.login):not(.kzk-public) > .container > .topbar,
  body:not(.login):not(.kzk-public) > .container > .topbar{
    grid-row:1 !important;
  }
}

/* KZK final notifications categories - available globally for the topbar bell */
.notification-item{position:relative;overflow:hidden}
.notification-item::before{content:"";position:absolute;inset-block:8px;inset-inline-start:0;width:5px;border-radius:999px;background:#94a3b8}
.notification-item.notif-type-followup_due::before{background:#f59e0b}
.notification-item.notif-type-task_due::before{background:#8b5cf6}
.notification-item.notif-type-team_chat::before{background:#06b6d4}
.notification-item.notif-type-mention::before{background:#22c55e}
.notification-item.notif-type-bell::before{background:#ef4444}
.notification-item.notif-type-admin::before{background:#0ea5e9}
.notification-item.notif-type-info::before{background:#94a3b8}
.notification-item.notif-type-followup_due{background:linear-gradient(90deg, rgba(245,158,11,.11), transparent 45%), var(--card2, #fff)}
.notification-item.notif-type-task_due{background:linear-gradient(90deg, rgba(139,92,246,.11), transparent 45%), var(--card2, #fff)}
.notification-item.notif-type-team_chat{background:linear-gradient(90deg, rgba(6,182,212,.10), transparent 45%), var(--card2, #fff)}
.notification-item.notif-type-mention{background:linear-gradient(90deg, rgba(34,197,94,.10), transparent 45%), var(--card2, #fff)}
.notification-item.notif-type-bell{background:linear-gradient(90deg, rgba(239,68,68,.10), transparent 45%), var(--card2, #fff)}
.notification-item.notif-type-admin{background:linear-gradient(90deg, rgba(14,165,233,.10), transparent 45%), var(--card2, #fff)}

/* KZK unread/read notification states */
.notifications-menu-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.notif-mark-all-form{margin:0}
.notif-mark-all-btn{border:0;background:transparent;color:var(--brand,#2563eb);font-weight:800;cursor:pointer;font-size:12px;padding:4px 6px;border-radius:8px}
.notif-mark-all-btn:hover{background:rgba(37,99,235,.10)}
.notification-item.unread{background:rgba(59,130,246,.10);font-weight:800}
.notification-item.read{background:rgba(148,163,184,.08);opacity:.72}
.notification-item.read .notification-title{font-weight:600;color:var(--muted)}
.notification-item.unread .notification-title::after{content:"";display:inline-block;width:8px;height:8px;border-radius:999px;background:#2563eb;margin-inline-start:8px;vertical-align:middle}
.notification-state{font-size:11px;color:var(--muted);margin-top:4px}
.notification-item.unread .notification-state{color:#2563eb;font-weight:900}