/* public/assets/css/app.css
   Dark Dashboard UI (inspired by modern admin dashboards)
   - بدون مكتبات خارجية
   - RTL جاهز
*/

:root{
  --bg0:#0b1220;
  --bg1:#090f1c;
  --bg2:#060b15;
  --card:rgba(17, 24, 39, .72);
  --card2:rgba(17, 24, 39, .92);
  --glass:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.07);
  --border2:rgba(255,255,255,.10);
  --text:#e5e7eb;
  --muted:rgba(229,231,235,.65);
  --muted2:rgba(229,231,235,.45);
  --shadow:0 18px 55px rgba(0,0,0,.45);
  --shadow2:0 30px 90px rgba(0,0,0,.55);
  --radius:18px;
  --radius2:22px;
  --ring:0 0 0 4px rgba(59,130,246,.22);

  --blue:#3b82f6;
  --green:#22c55e;
  --orange:#f59e0b;
  --purple:#a855f7;
  --red:#ef4444;
  --cyan:#06b6d4;
}

/*
  ✅ Fix: native <select>/<option> dropdown text not readable in بعض المتصفحات
  السبب: المتصفح يرسم قائمة الخيارات (options) بنمط Light حتى لو الواجهة Dark،
  فيصير لون النص فاتح على خلفية فاتحة.
  الحل: نحدد color-scheme حسب data-theme حتى يرسم المتصفح عناصر الإدخال بنفس الثيم.
*/
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}

*{box-sizing:border-box}
html,body{height:100%;max-width:100%;}
body{
  margin:0;
  font-family:Tahoma, Arial, sans-serif;
  direction:rtl;
  color:var(--text);
  background:
    radial-gradient(900px 600px at 85% 10%, rgba(var(--v4-primary-rgb),.12), transparent 60%),
    radial-gradient(900px 600px at 15% 85%, rgba(168,85,247,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg2));
}

a{color:inherit;text-decoration:none}

.container{max-width:1400px;margin:0 auto;padding:18px}

/* =========================
   Shell Layout
========================= */
.shell{display:flex;min-height:100vh}

/* Student Shell (بدون قائمة جانبية) */
.student-shell{min-height:100vh;display:flex;flex-direction:column}

.sidebar{
  width:280px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-left:1px solid var(--border);
  padding:16px;
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;
  backdrop-filter:blur(14px);
}

.sidebar-brand{display:flex;align-items:center;gap:12px;padding:8px 6px 16px 6px}
.sidebar-logo{
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(245,158,11,.14));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 14px 35px rgba(0,0,0,.35);
  font-size:22px;
}
.sidebar-title{font-weight:900}
.sidebar-sub{font-size:12px;color:var(--muted)}

.sidebar-nav{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid transparent;
  color:rgba(229,231,235,.88);
  background:transparent;
  transition:transform .08s ease, background .15s ease, border-color .15s ease;
}
.nav-item .ni{
  width:34px;height:34px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  font-size:16px;
}
.nav-item .nt{font-weight:800}
.nav-item:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.06);transform:translateY(-1px)}
.nav-item.active{
  background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(34,197,94,.10));
  border-color:rgba(59,130,246,.20);
  box-shadow:0 18px 60px rgba(0,0,0,.35);
}
.nav-item.active .ni{background:rgba(59,130,246,.18);border-color:rgba(59,130,246,.25)}
.nav-item.danger:hover{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.22)}

.sidebar-footer{margin-top:auto;padding-top:14px}
.user-pill{
  display:flex;align-items:center;gap:10px;
  padding:12px;border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.user-ic{width:36px;height:36px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}
.user-name{font-weight:900}
.user-sub{font-size:12px;color:var(--muted)}
.sidebar-hint{margin-top:10px;font-size:12px;color:var(--muted2)}

.main{flex:1;display:flex;flex-direction:column;min-width:0}

.topbar{
  position:sticky;top:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 18px;
  background:linear-gradient(180deg, rgba(11,18,32,.90), rgba(11,18,32,.55));
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.topbar-titles{display:flex;flex-direction:column;gap:4px}
.top-title{font-size:18px;font-weight:1000}
.top-sub{font-size:12px;color:var(--muted)}
.topbar-actions{display:flex;align-items:center;gap:8px}

.icon-btn{
  border:none;cursor:pointer;
  width:40px;height:40px;border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:var(--text);
  display:flex;align-items:center;justify-content:center;
  transition:transform .08s ease, background .15s ease;
}
.icon-btn:hover{background:rgba(255,255,255,.06);transform:translateY(-1px)}

/* إشعارات */
.icon-wrap{position:relative;display:inline-flex}
.notif-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background:rgba(239,68,68,.95);
  color:#fff;
  font-size:11px;
  font-weight:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 14px 40px rgba(0,0,0,.35);
}
.nav-badge{
  margin-right:auto;
  margin-inline-start:auto;
  min-width:22px;
  height:20px;
  padding:0 7px;
  border-radius:999px;
  background:rgba(239,68,68,.14);
  border:1px solid rgba(239,68,68,.25);
  color:#ffb4b4;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:1000;
}


.sidebar-toggle{display:none}

.content{flex:1}

/* =========================
   Components
========================= */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius:var(--radius2);
  padding:16px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(16px);
}

.h1{font-size:20px;margin:0 0 12px 0}

.grid{
  display:grid;
  gap:12px;
  /*
    Important:
    When .grid is used as a vertical stack (without cols-2/3/4/5),
    the implicit column size defaults to `auto` which can shrink-wrap
    to content and cause uneven/narrow inputs.
    We force a single flexible column by default.
  */
  grid-template-columns:minmax(0,1fr);
}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}

@media (max-width:1200px){
  .grid.cols-5{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .grid.cols-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .grid.cols-4,.grid.cols-3,.grid.cols-2,.grid.cols-5{grid-template-columns:1fr}
}

.row{display:flex;gap:12px;flex-wrap:wrap;align-items:end}
.field{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.row .field{min-width:190px}
label{color:var(--muted);font-size:13px}

/* Make form controls fill available width inside .field (fix uneven/narrow inputs) */
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea{width:100%;box-sizing:border-box;}

input,select,textarea{
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(17,24,39,.60);
  color:var(--text);
  font-size:14px;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(59,130,246,.45);box-shadow:var(--ring)}
input:disabled,select:disabled,textarea:disabled{opacity:.75;cursor:not-allowed;background:rgba(17,24,39,.36)}
input[readonly],textarea[readonly]{opacity:.85;cursor:not-allowed;background:rgba(17,24,39,.36)}
textarea{min-height:90px;resize:vertical}

.btn{
  border:none;border-radius:14px;padding:10px 14px;cursor:pointer;font-weight:900;
  color:var(--text);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  transition:transform .08s ease, filter .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.02);background:rgba(255,255,255,.06)}
.btn:active{transform:translateY(0)}

.btn.primary{background:linear-gradient(135deg, rgba(59,130,246,.85), rgba(34,197,94,.55));border-color:rgba(59,130,246,.30);box-shadow:0 18px 55px rgba(59,130,246,.18)}
.btn.gray{background:rgba(255,255,255,.04)}
.btn.red{background:linear-gradient(135deg, rgba(239,68,68,.88), rgba(245,158,11,.40));border-color:rgba(239,68,68,.22)}
.btn.green{background:linear-gradient(135deg, rgba(34,197,94,.85), rgba(6,182,212,.40));border-color:rgba(34,197,94,.20)}
.btn.orange{background:linear-gradient(135deg, rgba(245,158,11,.88), rgba(239,68,68,.30));border-color:rgba(245,158,11,.22)}

.actions{display:flex;gap:8px;flex-wrap:wrap}

.badge{
  display:inline-block;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(59,130,246,.14);
  border:1px solid rgba(59,130,246,.18);
  color:rgba(229,231,235,.92);
  font-weight:900;
  font-size:12px;
}

small.muted{color:var(--muted);font-size:12px}

table{
  width:100%;
  border-collapse:collapse;
  background:rgba(17,24,39,.55);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  overflow:hidden;
}
th,td{border-bottom:1px solid rgba(255,255,255,.06);padding:10px 8px;font-size:13px;vertical-align:top}
th{background:rgba(255,255,255,.04);color:rgba(229,231,235,.85)}
tbody tr:hover{background:rgba(59,130,246,.06)}
td.num{text-align:left;direction:ltr}
.text-ltr{direction:ltr;text-align:left}


/* =========================
   Additions Fast (ListView)
========================= */
.toolbar{
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  margin-bottom:12px;
}

/* ✅ ListView Toolbar (Grid) - يمنع صعود حقل الدفعة ويجعل التخطيط مرتب */
.fast-additions .lv-toolbar-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:12px;
  align-items:end;
}
.fast-additions .lv-toolbar-grid .field{min-width:0}
.fast-additions .lv-toolbar-grid .lv-search{grid-column:span 5}
.fast-additions .lv-toolbar-grid .lv-batch{grid-column:span 4}
.fast-additions .lv-toolbar-grid .lv-sort{grid-column:span 3}
.fast-additions .lv-toolbar-grid .lv-apply{grid-column:span 2}
.fast-additions .lv-toolbar-grid .lv-reset{grid-column:span 2}
.fast-additions .lv-toolbar-grid .lv-hide{grid-column:span 3}
.fast-additions .lv-toolbar-grid .lv-cols{grid-column:span 5}

.fast-additions .lv-inline{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:nowrap;
}
.fast-additions .lv-inline > *{min-width:0}
.fast-additions .lv-inline input,
.fast-additions .lv-inline select{flex:1}
.fast-additions .lv-inline .btn{white-space:nowrap}

@media (max-width:1100px){
  .fast-additions .lv-toolbar-grid .lv-search{grid-column:span 12}
  .fast-additions .lv-toolbar-grid .lv-batch{grid-column:span 8}
  .fast-additions .lv-toolbar-grid .lv-sort{grid-column:span 4}
  .fast-additions .lv-toolbar-grid .lv-apply,
  .fast-additions .lv-toolbar-grid .lv-reset,
  .fast-additions .lv-toolbar-grid .lv-hide{grid-column:span 4}
  .fast-additions .lv-toolbar-grid .lv-cols{grid-column:span 12}
}
@media (max-width:750px){
  .fast-additions .lv-toolbar-grid .lv-batch,
  .fast-additions .lv-toolbar-grid .lv-sort,
  .fast-additions .lv-toolbar-grid .lv-apply,
  .fast-additions .lv-toolbar-grid .lv-reset,
  .fast-additions .lv-toolbar-grid .lv-hide,
  .fast-additions .lv-toolbar-grid .lv-cols{grid-column:span 12}
}


/* --- Additions Fast Tabs (إدخال / السجل) --- */
.fast-additions .fast-tabs{
  display:flex;
  gap:8px;
  padding:10px;
  border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  margin:0 0 12px 0;
}
.fast-additions .fast-tab-btn{
  flex:1;
  text-align:center;
  padding:10px 14px;
  border-radius:14px;
  font-weight:1000;
  cursor:pointer;
  color:var(--text);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  transition:transform .08s ease, background .15s ease, border-color .15s ease;
}
.fast-additions .fast-tab-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.06)}
.fast-additions .fast-tab-btn.active{
  background:linear-gradient(135deg, rgba(59,130,246,.28), rgba(34,197,94,.10));
  border-color:rgba(59,130,246,.28);
  box-shadow:0 18px 55px rgba(var(--v4-primary-rgb),.12);
}

/* إخفاء جزء من الواجهة حسب التبويب */
.fast-additions[data-tab="entry"] .fast-list-pane,
.fast-additions[data-tab="entry"] .fast-resizer{display:none !important}

.fast-additions[data-tab="list"] .fast-form-pane,
.fast-additions[data-tab="list"] .fast-resizer{display:none !important}

/* في تبويب السجل: نعطي مساحة أكبر للجدول */
.fast-additions[data-tab="list"] .table-wrap{max-height:74vh}
body.fs .fast-additions[data-tab="list"] .table-wrap{max-height:84vh}
hr.sep{
  border:none;
  border-top:1px solid rgba(255,255,255,.08);
  margin:14px 0;
}
.card.mini{padding:14px}
.chk{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  user-select:none;
}
.chk input{width:18px;height:18px;cursor:pointer}
.kbd{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;
  padding:3px 8px;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  font-size:12px;
  font-weight:900;
  direction:ltr;
}

.table-wrap{
  overflow:auto;
  max-height:62vh;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.06);
}
table.listview{
  border-radius:0;
  border:none;
  min-width:1400px;
}
table.listview th, table.listview td{
  white-space:nowrap;
  font-size:12px;
  padding:8px 8px;
}
table.listview thead th{
  position:sticky;
  top:0;
  z-index:3;
  backdrop-filter:blur(12px);
}
tr.row-selected{
  background:rgba(34,197,94,.14) !important;
}
tr.row-selected td{
  border-bottom-color:rgba(34,197,94,.22);
}

/* إخفاء الأسعار (للخصوصية) */
body.hide-prices .price{
  filter:blur(7px);
  opacity:.55;
}
body.hide-prices .price::selection{
  background:transparent;
}

/* ============== إضافات منع تكرار الاسم ============== */
.dup-warn{color:#ff647c;font-weight:1000}

/* --- chips / تفاصيل الإضافات --- */
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}
.chip-name{max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip-price{font-weight:1000;direction:ltr;opacity:.90}
.chip-currency{font-size:11px;opacity:.65}
.chip-warn{border-color:rgba(245,158,11,.28);background:rgba(245,158,11,.12)}
.chip-flag{font-size:11px;font-weight:1000;padding:3px 8px;border-radius:999px;background:rgba(245,158,11,.18);color:#ffd59a}

.add-details{display:block}
.add-details > summary{cursor:pointer;display:flex;align-items:center;gap:10px;user-select:none}
.add-details > summary::-webkit-details-marker{display:none}
.add-details > summary::after{
  content:"▾";
  margin-inline-start:auto;
  opacity:.75;
  transform:rotate(0deg);
  transition:transform .15s ease, opacity .15s ease;
}
.add-details[open] > summary::after{transform:rotate(180deg);opacity:.95}
.add-details[open] > summary{margin-bottom:8px}

/* ---- إضافات بدون مفرد (استثناء) ---- */
input.is-exception{
  border-color:rgba(245,158,11,.50);
  box-shadow:0 0 0 2px rgba(245,158,11,.18);
}
small.muted.is-exception-hint{color:#ffd59a;font-weight:900}


/* =========================
   Dashboard (Dark)
========================= */
.dash-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:12px}
.dash-head h1{margin:0;font-size:22px}
.dash-head p{margin:6px 0 0 0;color:var(--muted);font-size:12px}

.metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media (max-width:1200px){.metrics{grid-template-columns:repeat(3,1fr)}}
@media (max-width:800px){.metrics{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.metrics{grid-template-columns:1fr}}

.metric{
  position:relative;overflow:hidden;
  padding:14px;border-radius:var(--radius2);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);
}
.metric::after{
  content:"";
  position:absolute;
  inset:-50px -60px auto auto;
  width:160px;height:160px;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), transparent 60%);
  transform:rotate(20deg);
}
.metric .m-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.metric .m-ic{
  width:46px;height:46px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  font-size:20px;
}
.metric .m-val{font-size:22px;font-weight:1000;direction:ltr;text-align:left}
.metric .m-lbl{margin-top:10px;font-weight:1000}
.metric .m-sub{margin-top:6px;color:var(--muted);font-size:12px}

.m-purple{background:linear-gradient(135deg, rgba(168,85,247,.22), rgba(17,24,39,.02))}
.m-purple .m-ic{background:rgba(168,85,247,.22)}

.m-blue{background:linear-gradient(135deg, rgba(59,130,246,.22), rgba(17,24,39,.02))}
.m-blue .m-ic{background:rgba(59,130,246,.22)}

.m-green{background:linear-gradient(135deg, rgba(34,197,94,.20), rgba(17,24,39,.02))}
.m-green .m-ic{background:rgba(34,197,94,.20)}

.m-orange{background:linear-gradient(135deg, rgba(245,158,11,.22), rgba(17,24,39,.02))}
.m-orange .m-ic{background:rgba(245,158,11,.22)}

.m-red{background:linear-gradient(135deg, rgba(239,68,68,.18), rgba(17,24,39,.02))}
.m-red .m-ic{background:rgba(239,68,68,.18)}

.dash-grid{
  display:grid;
  grid-template-columns:380px 1fr;
  gap:12px;
  margin-top:12px;
}
@media (max-width:1100px){
  .dash-grid{grid-template-columns:1fr}
}

.chart-card{padding:14px}
.chart-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.chart-title .t{font-weight:1000}
.chart-title .s{font-size:12px;color:var(--muted)}

.svg-wrap{width:100%;overflow:hidden;border-radius:16px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06)}

.legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;color:var(--muted);font-size:12px}
.leg{display:flex;align-items:center;gap:8px}
.dot{width:10px;height:10px;border-radius:999px;display:inline-block}
.dot.green{background:rgba(34,197,94,.9)}
.dot.red{background:rgba(239,68,68,.9)}
.dot.orange{background:rgba(245,158,11,.95)}
.dot.blue{background:rgba(59,130,246,.95)}

.donut-center{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;
  pointer-events:none
}
.donut-center .big{font-size:20px;font-weight:1000;direction:ltr}
.donut-center .small{color:var(--muted);font-size:12px}

.bars{margin-top:12px}
.bar-row{display:flex;align-items:center;gap:10px;margin:10px 0}
.bar-name{flex:0 0 220px;color:rgba(229,231,235,.9);font-weight:900;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{flex:1;height:12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);overflow:hidden}
.bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg, rgba(245,158,11,.95), rgba(59,130,246,.80))}
.bar-val{flex:0 0 56px;text-align:left;direction:ltr;color:var(--muted);font-size:12px}

.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
@media (max-width:1100px){.quick-actions{grid-template-columns:repeat(2,1fr)}}
@media (max-width:650px){.quick-actions{grid-template-columns:1fr}}
.qbtn{
  display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:14px 14px;border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  transition:transform .08s ease, background .15s ease;
}
.qbtn:hover{transform:translateY(-1px);background:rgba(255,255,255,.05)}
.qleft{display:flex;align-items:center;gap:12px}
.qic{width:42px;height:42px;border-radius:16px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05)}
.qt{font-weight:1000}
.qs{color:var(--muted);font-size:12px;margin-top:3px}


/* =========================
   Responsive / Mobile sidebar
========================= */
@media (max-width:980px){
  .sidebar{position:fixed;right:0;top:0;bottom:0;z-index:200;transform:translateX(105%);transition:transform .18s ease}
  body.sidebar-open .sidebar{transform:none}
  .sidebar-toggle{display:flex}
  .shell{display:block}
  .main{min-height:100vh}
}


/* =========================
   Full screen mode (fs=1)
   - يخفي القائمة العلوية والجانبية
   - يوسّع المحتوى ليملأ الشاشة
========================= */
body.fs .sidebar,
body.fs .topbar{display:none !important}
body.fs .shell{display:block}
body.fs .main{min-height:100vh}
body.fs .container{max-width:none;padding:10px}
body.fs .table-wrap{max-height:78vh}


/* =========================
   Additions Fast — Split View
   - تقسيم الشاشة: فورم أعلى + ListView أسفل + ملخص ثابت
========================= */
body.no-select, body.no-select *{user-select:none !important}

.fast-additions .fast-resizer{display:none;touch-action:none}

body.fs.split{overflow:hidden}
body.fs.split .main{overflow:hidden}
body.fs.split .container{height:100vh;overflow:hidden}

body.fs.split .fast-additions{
  height:calc(100vh - 20px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
body.fs.split .fast-additions .fast-top{flex:0 0 auto}
body.fs.split .fast-additions .fast-layout{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
body.fs.split .fast-additions .fast-split{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
body.fs.split .fast-additions .fast-form-pane{
  flex:0 0 55%;
  min-height:0;
  overflow:auto;
  padding-bottom:10px;
}
body.fs.split .fast-additions .fast-resizer{
  display:block;
  flex:0 0 10px;
  cursor:row-resize;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  margin:8px 0;
}
body.fs.split.light .fast-additions .fast-resizer{
  background:rgba(17,24,39,.06);
  border-color:rgba(17,24,39,.14);
}
body.fs.split .fast-additions .fast-list-pane{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
body.fs.split .fast-additions .fast-list-pane .table-wrap{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  max-height:none;
}
body.fs.split .fast-additions .fast-footer{flex:0 0 auto;padding-top:10px}
body.fs.split .fast-additions .fast-footer .grid{gap:8px}
body.fs.split .fast-additions .fast-footer .card{padding:10px 12px;border-radius:16px}
body.fs.split .fast-additions .fast-actions{margin-top:10px}


/* =========================
   Light mode للواجهة السريعة (fs=1&light=1)
   الهدف: شكل قريب من واجهات الإدخال البيضاء القديمة
========================= */
body.fs.light{
  --text:#111827;
  --muted:rgba(17,24,39,.65);
  --muted2:rgba(17,24,39,.45);
  --border:rgba(17,24,39,.14);
  --border2:rgba(17,24,39,.18);
  --shadow:0 10px 28px rgba(0,0,0,.10);
  --shadow2:0 20px 60px rgba(0,0,0,.12);
  --ring:0 0 0 4px rgba(59,130,246,.18);
  background:#f5f7fb;
}
body.fs.light .card{
  background:#fff;
  backdrop-filter:none;
  box-shadow:var(--shadow);
  border-color:rgba(17,24,39,.14);
  border-radius:12px;
}
body.fs.light input,
body.fs.light select,
body.fs.light textarea{
  background:#fff;
  color:var(--text);
  border:1px solid rgba(17,24,39,.18);
  border-radius:10px;
  padding:8px 10px;
}
body.fs.light input:disabled,
body.fs.light select:disabled,
body.fs.light textarea:disabled{background:#f3f4f6}
body.fs.light .btn{background:#f3f4f6;border-color:rgba(17,24,39,.16);color:var(--text);border-radius:10px;padding:8px 12px}
body.fs.light .btn:hover{background:#eaeef6}
body.fs.light .btn.primary,
body.fs.light .btn.green,
body.fs.light .btn.red,
body.fs.light .btn.orange{color:#fff}
body.fs.light .badge{background:rgba(var(--v4-primary-rgb),.12);border-color:rgba(59,130,246,.22);color:var(--text)}
body.fs.light table.listview th{background:#f1f5f9;color:#111;border-color:rgba(17,24,39,.16)}
body.fs.light table.listview td{color:#111;border-color:rgba(17,24,39,.08)}
body.fs.light .table-wrap{border-color:rgba(17,24,39,.14);border-radius:12px}


/* =========================
   Welcome (Public Page)
========================= */
.welcome-page{padding:12px 0 26px 0}
.welcome-page.has-bottom-bar{padding-bottom:110px}

/* Head (Brand + Social) */
.welcome-site-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.welcome-site-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Hero */
.welcome-hero2{margin-top:12px}
.welcome-hero2-card{
  position:relative;
  overflow:hidden;
}
.welcome-hero2-card:before{
  content:"";
  position:absolute;inset:-1px;
  background:
    radial-gradient(800px 320px at 88% 10%, rgba(59,130,246,.20), transparent 55%),
    radial-gradient(800px 320px at 12% 90%, rgba(245,158,11,.14), transparent 55%),
    radial-gradient(900px 420px at 70% 70%, rgba(168,85,247,.12), transparent 55%);
  pointer-events:none;
}
.welcome-hero2-card > *{position:relative}

.welcome-hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:14px;
  align-items:stretch;
}
@media (max-width: 900px){
  .welcome-hero-grid{grid-template-columns:1fr}
}

.welcome-hero-copy{min-width:0}

.welcome-stats{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.welcome-stat{
  min-width:110px;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 55px rgba(0,0,0,.18);
  text-align:center;
}
.welcome-stat-n{font-size:20px;font-weight:1000;line-height:1}
.welcome-stat-l{font-size:12px;color:rgba(229,231,235,.65);margin-top:4px}

.welcome-address{
  margin-top:10px;
  line-height:1.9;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
}

/* Preview mosaic */
.welcome-hero-preview{min-height:260px}
.welcome-preview-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 48px;
  gap:10px;
}
.welcome-preview-cell{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  box-shadow:0 30px 90px rgba(0,0,0,.20);
}
.welcome-preview-cell img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.01);transition:transform .25s ease, filter .25s ease}
.welcome-preview-cell:hover img{transform:scale(1.05);filter:brightness(1.03)}

.welcome-preview-cell.wp1{grid-column:1 / span 3; grid-row:1 / span 6}
.welcome-preview-cell.wp2{grid-column:4 / span 3; grid-row:1 / span 3}
.welcome-preview-cell.wp3{grid-column:4 / span 2; grid-row:4 / span 2}
.welcome-preview-cell.wp4{grid-column:6 / span 1; grid-row:4 / span 2}
.welcome-preview-cell.wp5{grid-column:4 / span 2; grid-row:6 / span 1}
.welcome-preview-cell.wp6{grid-column:6 / span 1; grid-row:6 / span 1}

.welcome-preview-empty{
  height:100%;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  display:flex;align-items:center;justify-content:center;
}

/* Gallery Masonry (Instagram) */
.welcome-masonry{
  column-count: 4;
  column-gap: 12px;
}
@media (max-width: 1200px){
  .welcome-masonry{column-count:3}
}
@media (max-width: 900px){
  .welcome-masonry{column-count:2}
}
@media (max-width: 600px){
  .welcome-masonry{column-count:1}
}

.welcome-ig-item{
  width:100%;
  border:none;
  cursor:pointer;
  padding:0;
  display:block;
  break-inside: avoid;
  margin:0 0 12px 0;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 65px rgba(0,0,0,.28);
  transition:transform .10s ease, filter .15s ease;
}
.welcome-ig-item:hover{transform:translateY(-2px);filter:brightness(1.03)}
.welcome-ig-item:focus{outline:none;box-shadow:var(--ring), 0 20px 65px rgba(0,0,0,.28)}
.welcome-ig-item img{width:100%;height:auto;display:block}

.welcome-ig-overlay{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.35);
  opacity:0;
  transition:opacity .15s ease;
  font-size:22px;
}
.welcome-ig-item:hover .welcome-ig-overlay{opacity:1}

.welcome-gallery-section{overflow:hidden}

/* Stories / Highlights Slider */
.welcome-highlights-section{overflow:hidden}
.welcome-slider{position:relative}
.welcome-slider-track{
  display:flex;
  gap:12px;
  overflow:auto;
  padding:2px 56px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.welcome-slider-track::-webkit-scrollbar{height:10px}
.welcome-slide{
  flex:0 0 280px;
  scroll-snap-align:center;
  border:none;
  cursor:pointer;
  padding:0;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 65px rgba(0,0,0,.28);
  transition:transform .10s ease, filter .15s ease;
}
.welcome-slide:hover{transform:translateY(-2px);filter:brightness(1.03)}
.welcome-slide img{width:100%;height:220px;object-fit:cover;display:block}
.welcome-slide-overlay{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55));
  opacity:0;
  transition:opacity .15s ease;
  font-size:22px;
}
.welcome-slide:hover .welcome-slide-overlay{opacity:1}
.welcome-slider-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;height:44px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:var(--text);
  cursor:pointer;
  z-index:2;
}
.welcome-slider-btn:hover{background:rgba(255,255,255,.12)}
.welcome-slider-btn.prev{left:10px}
.welcome-slider-btn.next{right:10px}
@media (max-width: 600px){
  .welcome-slide{flex-basis:78%}
}

/* Bottom contact bar */
.welcome-bottom-bar{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 12px;
  border-radius:22px;
  background:rgba(17,24,39,.62);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  box-shadow:0 30px 90px rgba(0,0,0,.55);
  z-index:950;
  max-width:min(920px, calc(100% - 24px));
}
.wb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:44px;
  padding:0 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:var(--text);
  text-decoration:none;
  font-weight:900;
  font-size:13px;
  transition:transform .10s ease, filter .15s ease;
  white-space:nowrap;
}
.wb-btn:hover{transform:translateY(-1px);filter:brightness(1.03)}
.wb-btn.green{background:rgba(16,185,129,.18);border-color:rgba(16,185,129,.30)}
.wb-btn.primary{background:rgba(59,130,246,.18);border-color:rgba(59,130,246,.30)}
.wb-btn.gray{background:rgba(255,255,255,.06)}
.wb-btn.dark{width:44px;padding:0}
@media (max-width: 520px){
  .welcome-bottom-bar{left:12px;right:12px;transform:none;justify-content:space-between}
  .wb-btn{flex:1}
  .wb-btn.dark{flex:0 0 44px}
}

/* Footer */
.welcome-footer{
  margin-top:14px;
  text-align:center;
  padding:10px 0 0 0;
  font-size:12px;
}


.welcome-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.welcome-brand{display:flex;align-items:center;gap:12px;min-width:0}
.welcome-logo{
  width:56px;height:56px;border-radius:18px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  box-shadow:0 18px 55px rgba(0,0,0,.35);
}
.welcome-logo-emoji{
  width:56px;height:56px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(245,158,11,.14));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 55px rgba(0,0,0,.35);
  font-size:26px;
}
.welcome-brand-title{font-weight:1000;font-size:18px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px}
.welcome-brand-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px}
.welcome-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.welcome-hero{margin-top:12px}
.welcome-hero-card{
  position:relative;
  overflow:hidden;
}
.welcome-hero-card:before{
  content:"";
  position:absolute;inset:-1px;
  background:
    radial-gradient(700px 300px at 85% 10%, rgba(59,130,246,.18), transparent 55%),
    radial-gradient(700px 300px at 15% 85%, rgba(168,85,247,.14), transparent 55%);
  pointer-events:none;
}
.welcome-hero-card > *{position:relative}
.welcome-hero-title{margin:10px 0 6px 0;font-size:26px;font-weight:1000}
.welcome-hero-text{margin:0;color:rgba(229,231,235,.72);line-height:1.9;max-width:900px}

.welcome-features{margin-top:12px}
.welcome-feature-title{font-weight:1000;margin-top:8px}

.welcome-section-head{display:flex;align-items:end;justify-content:space-between;gap:10px;flex-wrap:wrap}

.welcome-gallery-grid{gap:10px}
.welcome-gallery-item{
  border:none;cursor:pointer;padding:0;
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 55px rgba(0,0,0,.25);
  transition:transform .10s ease, filter .15s ease;
}
.welcome-gallery-item:hover{transform:translateY(-2px);filter:brightness(1.03)}
.welcome-gallery-item img{width:100%;height:190px;object-fit:cover;display:block}

.welcome-contact-line{margin-top:8px;line-height:1.9}

/* Lightbox */
.welcome-lightbox{position:fixed;inset:0;display:none;z-index:999}
.welcome-lightbox.open{display:block}
.welcome-lightbox-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(8px)}
.welcome-lightbox-content{
  position:absolute;inset:24px;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;
  gap:12px;
  padding:10px;
}
.welcome-lightbox-content img{
  max-width:100%;max-height:calc(100% - 90px);border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 90px rgba(0,0,0,.55);
  background:#000;
}
.welcome-lightbox-close{
  position:absolute;top:18px;left:18px;
  width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:var(--text);
  cursor:pointer;
}
.welcome-lightbox-close:hover{background:rgba(255,255,255,.12)}

.welcome-lightbox-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}


/* =========================
   Print
========================= */
.print-only{display:none}
@media print{
  .sidebar,.topbar,.no-print{display:none !important}

  /* ✅ تعطيل قيود وضع FS/SPLIT أثناء الطباعة (تسبب قصّ المحتوى) */
  html, body{height:auto !important; min-height:0 !important;}
  body, body.fs, body.fs.split{overflow:visible !important;}
  body.fs .main, body.fs .container,
  body.fs.split .main, body.fs.split .container{
    height:auto !important;
    overflow:visible !important;
  }
  /* عند الطباعة: لا نقيد ارتفاع الجداول (حتى لا تُقصّ البيانات) */
  .table-wrap{max-height:none !important; overflow:visible !important;}

  body{background:#fff;color:#000}
  .card, table{background:#fff;border:1px solid #ddd;box-shadow:none}
  .print-only{display:block}
}


/* =========================
   Welcome Landing (صور المستخدم)
   - صفحة welcome.php الجديدة تستخدم class="welcome-landing" و "wl-*"
========================= */

/* خلفية خاصة لصفحة Welcome */
body.page-welcome{
  background:
    radial-gradient(1000px 700px at 78% 18%, rgba(6,182,212,.18), transparent 60%),
    radial-gradient(980px 700px at 22% 82%, rgba(34,197,94,.12), transparent 60%),
    radial-gradient(800px 520px at 18% 18%, rgba(168,85,247,.10), transparent 60%),
    linear-gradient(180deg, #061520, #041019);
}

body.page-welcome .container{max-width:1200px;padding:22px}

.welcome-landing{padding:10px 0 30px;position:relative}

/* Topbar */
.wl-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.wl-brand{display:flex;align-items:center;gap:12px;min-width:0}
.wl-brand-text{min-width:0}
.wl-brand-title{font-weight:1000;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px}
.wl-brand-sub{font-size:12px;color:rgba(229,231,235,.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px}
.wl-brand-logo{
  width:44px;height:44px;border-radius:16px;object-fit:cover;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  box-shadow:0 18px 55px rgba(0,0,0,.35);
}
.wl-brand-logo-fallback{display:flex;align-items:center;justify-content:center;font-size:20px;background:linear-gradient(135deg, rgba(59,130,246,.22), rgba(34,197,94,.14))}

.wl-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wl-icon-btn{
  width:40px;height:40px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  box-shadow:0 18px 55px rgba(0,0,0,.22);
  transition:transform .10s ease, filter .15s ease, background .15s ease;
}
.wl-icon-btn:hover{transform:translateY(-1px);filter:brightness(1.05);background:rgba(255,255,255,.08)}

.wl-links-btn{
  display:inline-flex;align-items:center;gap:8px;
  height:40px;padding:0 14px;border-radius:999px;
  font-weight:1000;
  border:1px solid rgba(59,130,246,.28);
  background:linear-gradient(135deg, rgba(59,130,246,.85), rgba(6,182,212,.40));
  box-shadow:0 18px 55px rgba(59,130,246,.18);
}
.wl-links-btn span{line-height:1}

/* Hero */
.wl-hero{margin-top:10px}
.wl-hero-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:22px;align-items:stretch}
@media (max-width:900px){.wl-hero-grid{grid-template-columns:1fr}}

.wl-hero-copy{padding:6px 0}
.wl-badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 12px;border-radius:999px;
  background:rgba(6,182,212,.12);
  border:1px solid rgba(6,182,212,.18);
  color:rgba(229,231,235,.92);
  font-weight:1000;font-size:12px;
}
.wl-hero-title{margin:14px 0 10px 0;font-size:56px;line-height:1.05;color:#d6b35a;font-weight:1000}
@media (max-width:900px){.wl-hero-title{font-size:42px}}
@media (max-width:520px){.wl-hero-title{font-size:34px}}

.wl-hero-desc{margin:0;color:rgba(229,231,235,.70);line-height:1.95;font-size:14px;max-width:680px}

.wl-stats{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px}
.wl-stat{min-width:140px}
.wl-stat-n{font-size:34px;font-weight:1000;color:rgba(6,182,212,.95);line-height:1}
.wl-stat-l{margin-top:6px;font-size:12px;color:rgba(229,231,235,.55)}

/* Profile card */
.wl-profile-card{
  background:rgba(11,18,32,.72);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  box-shadow:0 30px 90px rgba(0,0,0,.45);
  padding:18px;
  position:relative;
  overflow:hidden;
}
.wl-profile-card:before{
  content:"";
  position:absolute;inset:-1px;
  background:linear-gradient(135deg, rgba(59,130,246,.16), rgba(6,182,212,.12), rgba(168,85,247,.10));
  opacity:.75;
  pointer-events:none;
}
.wl-profile-card>*{position:relative}

.wl-profile-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wl-profile-name{font-weight:1000;color:#d6b35a;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.wl-profile-sub{font-size:12px;color:rgba(229,231,235,.65);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.wl-profile-logo{width:42px;height:42px;border-radius:999px;object-fit:cover;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05)}
.wl-profile-logo-fallback{display:flex;align-items:center;justify-content:center;font-weight:1000}

.wl-quote{
  margin:14px 0 12px 0;
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(229,231,235,.70);
  line-height:1.9;
  font-size:13px;
}

.wl-profile-actions{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.wl-action-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:46px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  font-weight:1000;
  text-decoration:none;
  color:var(--text);
  box-shadow:0 18px 55px rgba(0,0,0,.22);
  transition:transform .10s ease, filter .15s ease;
}
.wl-action-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.wl-action-btn.wl-wa{background:linear-gradient(135deg, rgba(34,197,94,.85), rgba(6,182,212,.30));border-color:rgba(34,197,94,.22)}
.wl-action-btn.wl-mail{background:linear-gradient(135deg, rgba(99,102,241,.85), rgba(168,85,247,.35));border-color:rgba(168,85,247,.22)}
.wl-action-btn.wl-links{background:linear-gradient(135deg, rgba(59,130,246,.85), rgba(6,182,212,.35));border-color:rgba(59,130,246,.22)}
.wl-action-btn.wl-customer{background:linear-gradient(135deg, rgba(245,158,11,.85), rgba(99,102,241,.35));border-color:rgba(245,158,11,.22)}

.wl-location{margin-top:14px;padding-top:10px;border-top:1px solid rgba(255,255,255,.07);color:rgba(229,231,235,.65);font-size:12px;line-height:1.8}

/* Sections */
.wl-section{margin-top:26px}
.wl-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.wl-h2{margin:0;font-size:22px;font-weight:1000;color:#d6b35a}
.wl-muted{color:rgba(229,231,235,.55);font-size:12px;line-height:1.8}

/* Services */
.wl-services-grid{margin-top:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.wl-services-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.wl-services-grid{grid-template-columns:1fr}}

.wl-service{background:rgba(11,18,32,.62);border:1px solid rgba(255,255,255,.08);border-radius:20px;box-shadow:0 20px 65px rgba(0,0,0,.30);padding:16px}
.wl-service-ic{width:44px;height:44px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:rgba(214,179,90,.18);border:1px solid rgba(214,179,90,.24);font-size:18px}
.wl-service-title{margin-top:10px;font-weight:1000;color:#d6b35a}
.wl-service-desc{margin-top:6px;color:rgba(229,231,235,.65);line-height:1.9;font-size:13px}

/* Portfolio / Works (Auto scroll) */
.wl-works-wrap{margin-top:14px;position:relative}
.wl-work-carousel{
  margin-top:10px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(11,18,32,.42);
  box-shadow:0 30px 90px rgba(0,0,0,.28);
  outline:none;
}
.wl-work-carousel::-webkit-scrollbar{display:none}
.wl-work-track{display:flex;gap:14px;align-items:stretch;padding:12px;min-width:max-content}
.wl-work-item{
  width:260px;flex:0 0 auto;
  border-radius:20px;
  overflow:hidden;
  position:relative;
  text-decoration:none;
  background:rgba(8,14,26,.78);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 55px rgba(0,0,0,.22);
  transform:translateZ(0);
  transition:transform .12s ease, filter .18s ease;
}
@media (max-width:700px){.wl-work-item{width:230px}}
@media (max-width:520px){.wl-work-item{width:210px}}
.wl-work-item:hover{transform:translateY(-2px);filter:brightness(1.06)}
.wl-work-item img{
  width:100%;height:190px;
  object-fit:cover;display:block;
  transition:transform .35s ease;
  background:rgba(255,255,255,.04);
}
.wl-work-item:hover img{transform:scale(1.04)}
.wl-work-cap{padding:12px}
.wl-work-title{font-weight:1000;color:#d6b35a;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-work-desc{margin-top:6px;color:rgba(229,231,235,.65);font-size:12px;line-height:1.85;max-height:3.7em;overflow:hidden}
.wl-work-hint{margin-top:10px;text-align:center}

.wl-works-wrap:before,
.wl-works-wrap:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:70px;
  pointer-events:none;
  z-index:5;
}
.wl-works-wrap:before{right:0;background:linear-gradient(90deg, rgba(4,16,25,0), rgba(4,16,25,.92));}
.wl-works-wrap:after{left:0;background:linear-gradient(270deg, rgba(4,16,25,0), rgba(4,16,25,.92));}

/* Experiences */
.wl-section-accent{width:4px;height:34px;border-radius:999px;background:linear-gradient(180deg, rgba(59,130,246,.92), rgba(6,182,212,.42));opacity:.9}
.wl-exp-wrap{margin-top:14px;max-width:860px;margin-inline:auto}
.wl-exp-scroll{max-height:560px;overflow:auto;padding:12px;border-radius:22px;background:rgba(11,18,32,.52);border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 90px rgba(0,0,0,.35)}
.wl-exp-card{background:rgba(8,14,26,.72);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:16px;margin-bottom:14px;box-shadow:0 18px 55px rgba(0,0,0,.20)}
.wl-exp-card:last-child{margin-bottom:0}
.wl-exp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.wl-exp-title{font-weight:1000;color:#d6b35a}
.wl-exp-date{font-size:12px;color:rgba(6,182,212,.85);direction:ltr;text-align:left}
.wl-exp-sub{margin-top:6px;color:rgba(229,231,235,.80);font-weight:900;font-size:13px}
.wl-exp-desc{margin-top:8px;color:rgba(229,231,235,.62);line-height:1.9;font-size:13px}
.wl-exp-tags{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.wl-tag{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:rgba(229,231,235,.70);font-size:12px;font-weight:900}

.wl-exp-scroll::-webkit-scrollbar{width:10px}
.wl-exp-scroll::-webkit-scrollbar-thumb{background:rgba(59,130,246,.32);border-radius:999px;border:2px solid rgba(0,0,0,0)}
.wl-exp-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.03);border-radius:999px}

/* QR */
.wl-qr-card{margin-top:14px;max-width:420px;margin-inline:auto;text-align:center;padding:18px;border-radius:22px;background:rgba(11,18,32,.62);border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 90px rgba(0,0,0,.35)}
.wl-qr{width:260px;height:260px;max-width:100%;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:#fff;object-fit:cover;display:block;margin:0 auto}
.wl-qr-fallback{margin-top:10px;line-height:1.8}
.wl-qr-link{text-decoration:underline;font-weight:1000}
.wl-qr-note{margin-top:10px;font-size:12px}
.wl-links-list{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:14px}
.wl-mini-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:var(--text);font-weight:1000;text-decoration:none;transition:transform .10s ease, filter .15s ease}
.wl-mini-link:hover{transform:translateY(-1px);filter:brightness(1.05)}

/* Footer */
.wl-footer{margin-top:28px;padding:16px 14px;border-top:1px solid rgba(255,255,255,.08);background:rgba(7,12,22,.45);border-radius:22px;box-shadow:0 18px 55px rgba(0,0,0,.22)}
.wl-footer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){.wl-footer-grid{grid-template-columns:1fr}}
.wl-footer-item{padding:10px 12px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:rgba(229,231,235,.70);font-size:13px;line-height:1.9}
.wl-footer-copy{margin-top:12px;text-align:center}

/* Floating actions */
.wl-float{position:fixed;left:18px;bottom:120px;display:flex;flex-direction:column;gap:10px;z-index:950}
@media (max-width:600px){.wl-float{left:12px;bottom:90px}}
.wl-float-btn{width:52px;height:52px;border-radius:20px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);box-shadow:0 30px 90px rgba(0,0,0,.45);font-size:20px;text-decoration:none;color:var(--text);transition:transform .10s ease, filter .15s ease}
.wl-float-btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.wl-float-wa{background:rgba(34,197,94,.18);border-color:rgba(34,197,94,.28)}
.wl-float-mail{background:rgba(99,102,241,.16);border-color:rgba(168,85,247,.22)}

/* Light theme (welcome only) */
html.wl-theme-light body.page-welcome{
  background:linear-gradient(180deg,#f6f7fb,#eef2ff);
  --text:#111827;
  --muted:rgba(17,24,39,.65);
  --muted2:rgba(17,24,39,.45);
}

/* تحسين التباين في الوضع الفاتح (واجهة الترحيب) */
html.wl-theme-light body.page-welcome .wl-hero-title,
html.wl-theme-light body.page-welcome .wl-h2,
html.wl-theme-light body.page-welcome .wl-service-title,
html.wl-theme-light body.page-welcome .wl-work-title,
html.wl-theme-light body.page-welcome .wl-exp-title,
html.wl-theme-light body.page-welcome .wl-profile-name{
  color:#0f172a;
}

@supports (-webkit-background-clip:text){
  html.wl-theme-light body.page-welcome .wl-hero-title{
    background:linear-gradient(90deg, rgba(var(--v4-primary-rgb),1), rgba(var(--v4-primary2-rgb),1));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
}

html.wl-theme-light body.page-welcome .wl-links-btn,
html.wl-theme-light body.page-welcome .wl-action-btn{
  color:#fff;
}

html.wl-theme-light body.page-welcome .wl-badge{
  background:rgba(2,132,199,.10);
  border-color:rgba(2,132,199,.18);
  color:rgba(15,23,42,.70);
}
html.wl-theme-light body.page-welcome .wl-brand-sub,
html.wl-theme-light body.page-welcome .wl-muted,
html.wl-theme-light body.page-welcome .wl-hero-desc,
html.wl-theme-light body.page-welcome .wl-stat-l,
html.wl-theme-light body.page-welcome .wl-location{color:rgba(17,24,39,.65)}

/* ✅ Fix: Improve text contrast in light Welcome (services/experience/quote) */
html.wl-theme-light body.page-welcome .wl-profile-sub,
html.wl-theme-light body.page-welcome .wl-service-desc,
html.wl-theme-light body.page-welcome .wl-work-desc,
html.wl-theme-light body.page-welcome .wl-exp-desc,
html.wl-theme-light body.page-welcome .wl-quote,
html.wl-theme-light body.page-welcome .wl-footer-item{
  color:rgba(17,24,39,.72);
}
html.wl-theme-light body.page-welcome .wl-exp-sub{
  color:rgba(17,24,39,.85);
}
html.wl-theme-light body.page-welcome .wl-tag{
  background:rgba(17,24,39,.04);
  border-color:rgba(17,24,39,.10);
  color:rgba(17,24,39,.72);
}

html.wl-theme-light body.page-welcome .wl-profile-card,
html.wl-theme-light body.page-welcome .wl-service,
html.wl-theme-light body.page-welcome .wl-work-carousel,
html.wl-theme-light body.page-welcome .wl-exp-scroll,
html.wl-theme-light body.page-welcome .wl-qr-card,
html.wl-theme-light body.page-welcome .wl-footer{
  background:rgba(255,255,255,.85);
  border-color:rgba(17,24,39,.12);
  box-shadow:0 14px 35px rgba(0,0,0,.10);
}
html.wl-theme-light body.page-welcome .wl-quote,
html.wl-theme-light body.page-welcome .wl-footer-item{
  background:rgba(17,24,39,.04);
  border-color:rgba(17,24,39,.10);
}
html.wl-theme-light body.page-welcome .wl-mini-link{background:rgba(17,24,39,.04);border-color:rgba(17,24,39,.10)}
html.wl-theme-light body.page-welcome .wl-icon-btn{background:rgba(17,24,39,.04);border-color:rgba(17,24,39,.10)}
html.wl-theme-light body.page-welcome .wl-exp-card,
html.wl-theme-light body.page-welcome .wl-work-item{background:rgba(255,255,255,.90);border-color:rgba(17,24,39,.12)}

html.wl-theme-light body.page-welcome .wl-works-wrap:before{background:linear-gradient(90deg, rgba(246,247,251,0), rgba(246,247,251,.95));}
html.wl-theme-light body.page-welcome .wl-works-wrap:after{background:linear-gradient(270deg, rgba(246,247,251,0), rgba(246,247,251,.95));}


/* =========================
   Drag & Drop Sorting (Settings)
   - يعمل مع اللمس والماوس
========================= */

.dd-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.dd-handle{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:38px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:var(--text);
  cursor:grab;
  user-select:none;
  touch-action:none;
  box-shadow:0 18px 55px rgba(0,0,0,.18);
}
.dd-handle:active{cursor:grabbing}

.dd-placeholder{
  border:1px dashed rgba(59,130,246,.40);
  background:rgba(59,130,246,.10);
  border-radius:18px;
}

.dd-dragging{
  opacity:.98;
  transform:scale(1.02);
}

body.dd-no-select{user-select:none}



/* =========================================================
   Theme v4 — Glass Pro (Sidebar أجمل + Dark/Light + Submenu) (تغيير جذري + Sidebar أجمل)
   - يعتمد على نفس الـ HTML الحالي بدون مكتبات خارجية
   ========================================================= */

body.theme-v4{
  /* Palette */
  --v4-bg:#f3f6ff;
  --v4-bg2:#eef2ff;
  --v4-surface:#ffffff;
  --v4-surface2:#f8fafc;
  --v4-text:#0f172a;
  --v4-muted:rgba(15,23,42,.62);
  --v4-muted2:rgba(15,23,42,.45);
  --v4-border:rgba(15,23,42,.10);
  --v4-border2:rgba(15,23,42,.14);
  --v4-shadow:0 18px 50px rgba(2,6,23,.08);
  --v4-shadow2:0 30px 90px rgba(2,6,23,.12);

  --v4-primary:#2563eb;
  --v4-primary2:#7c3aed;
  --v4-primary-rgb:37,99,235;
  --v4-primary2-rgb:124,58,237;
  --v4-success:#16a34a;
  --v4-danger:#dc2626;
  --v4-warning:#f59e0b;
  --v4-info:#0891b2;

  /* Map old variables => new theme (حتى لا تتكسر بعض العناصر القديمة) */
  --text:var(--v4-text);
  --muted:var(--v4-muted);
  --muted2:var(--v4-muted2);
  --border:var(--v4-border);
  --border2:var(--v4-border2);
  --card:rgba(255,255,255,.92);
  --card2:rgba(255,255,255,.96);
  --shadow:var(--v4-shadow);
  --shadow2:var(--v4-shadow2);
  --ring:0 0 0 4px rgba(var(--v4-primary-rgb),.14);

  color:var(--v4-text);
  background:
    radial-gradient(1000px 700px at 10% 10%, rgba(var(--v4-primary-rgb),.18), transparent 58%),
    radial-gradient(900px 650px at 90% 0%, rgba(var(--v4-primary2-rgb),.14), transparent 60%),
    radial-gradient(900px 650px at 90% 95%, rgba(var(--v4-primary-rgb),.10), transparent 58%),
    linear-gradient(180deg, var(--v4-bg), var(--v4-bg2) 60%, #f8fafc);
}


/* =========================
   Dark Mode (html[data-theme="dark"])
========================= */
html[data-theme="dark"] body.theme-v4{
  --v4-bg:#0b1220;
  --v4-bg2:#060b15;
  --v4-surface:rgba(17,24,39,.76);
  --v4-surface2:rgba(15,23,42,.78);
  --v4-text:#e5e7eb;
  --v4-muted:rgba(229,231,235,.65);
  --v4-muted2:rgba(229,231,235,.45);
  --v4-border:rgba(255,255,255,.10);
  --v4-border2:rgba(255,255,255,.14);

  /* Remap old variables */
  --text:var(--v4-text);
  --muted:var(--v4-muted);
  --muted2:var(--v4-muted2);
  --border:var(--v4-border);
  --border2:var(--v4-border2);
  --card:rgba(17,24,39,.74);
  --card2:rgba(17,24,39,.88);
  --shadow:0 18px 55px rgba(0,0,0,.45);
  --shadow2:0 30px 90px rgba(0,0,0,.55);
  --ring:0 0 0 4px rgba(59,130,246,.22);

  color:var(--v4-text);
  background:
    radial-gradient(900px 650px at 85% 10%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(900px 650px at 15% 85%, rgba(168,85,247,.12), transparent 60%),
    linear-gradient(180deg, #0b1220, #060b15);
}


body.theme-v4,
body.theme-v4 button,
body.theme-v4 input,
body.theme-v4 select,
body.theme-v4 textarea{
  font-family: "Cairo","Tajawal","Noto Kufi Arabic",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

body.theme-v4 a{color:inherit}
body.theme-v4 .muted{color:var(--v4-muted)}
body.theme-v4 .small{color:var(--v4-muted);}

/* =========================
   Layout
========================= */
body.theme-v4.authed .shell{
  padding:16px;
  gap:16px;
  background:transparent;
}

body.theme-v4.authed .main{
  min-height:calc(100vh - 32px);
}

/* =========================
   Sidebar (NEW)
========================= */
body.theme-v4 .sidebar{
  width:300px;
  padding:18px 14px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 22px 70px rgba(2,6,23,.45);

  background:
    radial-gradient(1200px 650px at 20% 0%, rgba(var(--v4-primary-rgb),.30), transparent 62%),
    radial-gradient(900px 600px at 100% 10%, rgba(var(--v4-primary2-rgb),.28), transparent 62%),
    radial-gradient(900px 600px at 0% 90%, rgba(var(--v4-primary-rgb),.10), transparent 58%),
    linear-gradient(180deg, #0b1020, #0f172a 35%, #050814);

  color:rgba(255,255,255,.92);
  position:sticky;
  top:16px;
  height:calc(100vh - 32px);
  overflow:auto;
  backdrop-filter: blur(18px) saturate(140%);
}

body.theme-v4 .sidebar::-webkit-scrollbar{width:10px}
body.theme-v4 .sidebar::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14);
  border:3px solid rgba(0,0,0,0);
  background-clip:padding-box;
  border-radius:999px;
}

body.theme-v4 .sidebar-brand{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 8px 14px 8px;
}

body.theme-v4 .sb-brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  min-width:0;
}

body.theme-v4 .sidebar-logo{
  width:46px;height:46px;
  border-radius:16px;
  font-size:22px;
  background:linear-gradient(135deg, rgba(var(--v4-primary-rgb),.30), rgba(var(--v4-primary2-rgb),.30));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 45px rgba(2,6,23,.55);
}

body.theme-v4 .sidebar-title{font-weight:950;letter-spacing:.2px}
body.theme-v4 .sidebar-sub{color:rgba(255,255,255,.62);font-size:12px}

body.theme-v4 .sb-mini-btn{
  width:40px;height:40px;
  border-radius:14px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s ease, background .15s ease;
}
body.theme-v4 .sb-mini-btn:hover{background:rgba(255,255,255,.10);transform:translateY(-1px)}

/* Sections */
body.theme-v4 .nav-section{margin-top:10px}
body.theme-v4 .nav-section-title{
  font-size:11px;
  color:rgba(255,255,255,.58);
  padding:10px 10px 8px 10px;
  letter-spacing:.4px;
  user-select:none;
}

/* Items */
body.theme-v4 .sidebar-nav{gap:10px}
body.theme-v4 .nav-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.88);
  transition:transform .12s ease, background .18s ease, border-color .18s ease;
}
body.theme-v4 .nav-item:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.12);
  transform:translateY(-1px);
}
body.theme-v4 .nav-item .ni{
  width:40px;height:40px;
  border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  font-size:0; /* icons are SVG now */
}
body.theme-v4 .nav-item .ni svg{width:20px;height:20px;display:block}
body.theme-v4 .nav-item .nt{font-weight:900;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

body.theme-v4 .nav-item.active{
  background:linear-gradient(135deg, rgba(var(--v4-primary-rgb),.22), rgba(var(--v4-primary2-rgb),.18));
  border-color:rgba(var(--v4-primary-rgb),.22);
  box-shadow:0 16px 55px rgba(2,6,23,.40);
}
body.theme-v4 .nav-item.active::after{
  content:"";
  position:absolute;
  top:10px;bottom:10px;
  right:6px;
  width:4px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(var(--v4-primary-rgb),.95), rgba(var(--v4-primary2-rgb),.95));
}
body.theme-v4 .nav-item.active .ni{
  background:rgba(var(--v4-primary-rgb),.18);
  border-color:rgba(var(--v4-primary-rgb),.20);
}

body.theme-v4 .nav-item.danger{
  background:rgba(239,68,68,.10);
  border-color:rgba(239,68,68,.18);
}
body.theme-v4 .nav-item.danger:hover{
  background:rgba(239,68,68,.14);
  border-color:rgba(239,68,68,.25);
}

body.theme-v4 .nav-badge{
  margin-inline-start:auto;
  padding:4px 10px;
  font-size:12px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
}

/* Sidebar footer */
body.theme-v4 .user-pill{
  border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
body.theme-v4 .user-avatar{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.12);
}
body.theme-v4 .user-sub{color:rgba(255,255,255,.62)}
body.theme-v4 .sidebar-hint{color:rgba(255,255,255,.45)}


/* Theme Toggle */
body.theme-v4 .theme-toggle{position:relative}
body.theme-v4 .theme-toggle svg{width:18px;height:18px;display:block}
html[data-theme="light"] body.theme-v4 .theme-toggle .ic-sun{display:none}
html[data-theme="light"] body.theme-v4 .theme-toggle .ic-moon{display:block}
html[data-theme="dark"] body.theme-v4 .theme-toggle .ic-sun{display:block}
html[data-theme="dark"] body.theme-v4 .theme-toggle .ic-moon{display:none}

/* Sidebar glass pattern */
body.theme-v4 .sidebar{isolation:isolate}
body.theme-v4 .sidebar::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 650px at 10% 0%, rgba(255,255,255,.12), transparent 55%),
    radial-gradient(900px 650px at 100% 35%, rgba(var(--v4-primary-rgb),.14), transparent 60%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0);
  background-size:auto, auto, 18px 18px;
  opacity:.55;
  mix-blend-mode:overlay;
}
body.theme-v4 .sidebar > *{position:relative;z-index:1}

/* User Avatar (بديل 👤) */
body.theme-v4 .user-avatar{
  width:42px;height:42px;
  border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg,
    hsla(var(--av-h), 90%, 60%, .38),
    hsla(calc(var(--av-h) + 70), 90%, 55%, .22)
  );
  box-shadow:0 18px 55px rgba(2,6,23,.55);
  color:rgba(255,255,255,.92);
  font-weight:950;
}
body.theme-v4 .user-avatar span{font-size:16px;line-height:1;transform:translateY(-1px)}

/* Submenu (Nav Group) */
body.theme-v4 .nav-group{display:flex;flex-direction:column;gap:10px}
body.theme-v4 .nav-group-toggle{width:100%;text-align:right;cursor:pointer}
body.theme-v4 .nav-group-toggle .chev{
  margin-inline-start:auto;
  width:18px;height:18px;
  display:flex;align-items:center;justify-content:center;
  opacity:.75;
  transition:transform .18s ease, opacity .18s ease;
}
body.theme-v4 .nav-group.open .nav-group-toggle .chev{transform:rotate(180deg);opacity:.95}

body.theme-v4 .nav-sub{
  display:none;
  flex-direction:column;
  gap:8px;
  padding:0 10px 10px 10px;
}
body.theme-v4 .nav-group.open .nav-sub{display:flex}

body.theme-v4 .nav-sub-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.86);
  transition:transform .12s ease, background .18s ease, border-color .18s ease;
}
body.theme-v4 .nav-sub-item:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
  transform:translateY(-1px);
}
body.theme-v4 .nav-sub-item.active{
  background:linear-gradient(135deg, rgba(var(--v4-primary-rgb),.18), rgba(var(--v4-primary2-rgb),.14));
  border-color:rgba(var(--v4-primary-rgb),.18);
}
body.theme-v4 .nav-sub-item .si{
  width:34px;height:34px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  font-size:0;
}
body.theme-v4 .nav-sub-item .si svg{width:18px;height:18px;display:block}
body.theme-v4 .nav-sub-item .st{font-weight:900;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Mini mode: لا نعرض الـ Submenu (بس أيقونات) */
body.theme-v4.sb-mini .nav-group .nav-sub{display:none !important}
body.theme-v4.sb-mini .nav-group-toggle .chev{display:none !important}

/* Mini / Collapsed */
body.theme-v4.sb-mini .sidebar{width:96px;padding:18px 10px}
body.theme-v4.sb-mini .sidebar .sidebar-brand{justify-content:center}
body.theme-v4.sb-mini .sidebar .sidebar-brand-text,
body.theme-v4.sb-mini .sidebar .nav-section-title,
body.theme-v4.sb-mini .sidebar .nt,
body.theme-v4.sb-mini .sidebar .nav-badge,
body.theme-v4.sb-mini .sidebar .user-meta,
body.theme-v4.sb-mini .sidebar .sidebar-hint{display:none !important}
body.theme-v4.sb-mini .sidebar .nav-item{justify-content:center;padding:12px}
body.theme-v4.sb-mini .sidebar .nav-item.active::after{right:0}
body.theme-v4.sb-mini .sidebar .sb-mini-btn{display:flex}

/* =========================
   Topbar (NEW)
========================= */
body.theme-v4 .topbar{
  background:rgba(255,255,255,.78);
  color:var(--v4-text);
  border:1px solid rgba(15,23,42,.10);
  border-radius:22px;
  box-shadow:var(--v4-shadow);
  padding:14px 16px;
  top:16px;
  backdrop-filter: blur(14px);
}

body.theme-v4 .top-title{color:var(--v4-text);font-weight:950}
body.theme-v4 .top-sub{color:var(--v4-muted)}

body.theme-v4 .icon-btn{
  background:rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.10);
  color:var(--v4-text);
}
body.theme-v4 .icon-btn:hover{background:rgba(15,23,42,.06)}

body.theme-v4 .icon-wrap .notif-badge{
  background:linear-gradient(135deg, var(--v4-primary), var(--v4-primary2));
  border:none;
  box-shadow:0 10px 25px rgba(var(--v4-primary-rgb),.25);
}

/* Search in topbar */
body.theme-v4 .top-search{flex:1;max-width:520px}
body.theme-v4 .top-search-input{
  width:100%;
  padding:10px 14px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.70);
  color:var(--v4-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
body.theme-v4 .top-search-input::placeholder{color:rgba(15,23,42,.45)}
body.theme-v4 .top-search-input:focus{
  outline:none;
  border-color:rgba(var(--v4-primary-rgb),.35);
  box-shadow:0 0 0 4px rgba(var(--v4-primary-rgb),.14);
}

/* =========================
   Cards / Forms / Tables (Light)
========================= */
body.theme-v4 .card{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.08);
  border-radius:22px;
  box-shadow:0 16px 45px rgba(2,6,23,.08);
  color:var(--v4-text);
}

body.theme-v4 input,
body.theme-v4 select,
body.theme-v4 textarea{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.12);
  color:var(--v4-text);
}
body.theme-v4 input:focus,
body.theme-v4 select:focus,
body.theme-v4 textarea:focus{
  border-color:rgba(var(--v4-primary-rgb),.35);
  box-shadow:0 0 0 4px rgba(var(--v4-primary-rgb),.14);
}

body.theme-v4 table{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.08);
}
body.theme-v4 th{
  background:rgba(15,23,42,.03);
  color:rgba(15,23,42,.85);
}
body.theme-v4 th, body.theme-v4 td{
  border-bottom:1px solid rgba(15,23,42,.08);
}
body.theme-v4 tbody tr:hover{background:rgba(var(--v4-primary-rgb),.06)}

/* Buttons */
body.theme-v4 .btn{
  border-radius:16px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.88);
  color:var(--v4-text);
  box-shadow:0 10px 25px rgba(2,6,23,.06);
}
body.theme-v4 .btn:hover{transform:translateY(-1px)}
body.theme-v4 .btn.primary{
  border:none;
  background:linear-gradient(135deg, var(--v4-primary), var(--v4-primary2));
  color:#fff;
  box-shadow:0 18px 40px rgba(var(--v4-primary-rgb),.22);
}
body.theme-v4 .btn.gray{
  background:rgba(15,23,42,.04);
}
body.theme-v4 .btn.danger{
  border:none;
  background:linear-gradient(135deg, #ef4444, #b91c1c);
  color:#fff;
}

/* Metrics */
body.theme-v4 .metric{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 16px 45px rgba(2,6,23,.07);
}
body.theme-v4 .metric::after{
  background:radial-gradient(circle at 30% 30%, rgba(var(--v4-primary-rgb),.10), transparent 65%);
}
body.theme-v4 .metric .m-lbl{color:var(--v4-muted)}
body.theme-v4 .metric .m-sub{color:var(--v4-muted2)}
body.theme-v4 .metric .m-ic{border:1px solid rgba(15,23,42,.08)}
body.theme-v4 .m-blue .m-ic{background:rgba(var(--v4-primary-rgb),.14)}
body.theme-v4 .m-green .m-ic{background:rgba(22,163,74,.14)}
body.theme-v4 .m-red .m-ic{background:rgba(220,38,38,.12)}
body.theme-v4 .m-orange .m-ic{background:rgba(245,158,11,.14)}
body.theme-v4 .m-purple .m-ic{background:rgba(var(--v4-primary2-rgb),.14)}
body.theme-v4 .m-blue{background:linear-gradient(135deg, rgba(var(--v4-primary-rgb),.12), rgba(255,255,255,.92))}
body.theme-v4 .m-green{background:linear-gradient(135deg, rgba(22,163,74,.10), rgba(255,255,255,.92))}
body.theme-v4 .m-red{background:linear-gradient(135deg, rgba(220,38,38,.08), rgba(255,255,255,.92))}
body.theme-v4 .m-orange{background:linear-gradient(135deg, rgba(245,158,11,.10), rgba(255,255,255,.92))}
body.theme-v4 .m-purple{background:linear-gradient(135deg, rgba(var(--v4-primary2-rgb),.10), rgba(255,255,255,.92))}

/* Public wrapper (login / pages without sidebar) */
body.theme-v4 .auth-wrap{
  min-height:100vh;
  padding:42px 16px;
}

/* =========================
   Mobile behavior + backdrop
========================= */

/* =========================
   Dark Mode — Components
========================= */
html[data-theme="dark"] body.theme-v4 .topbar{
  background:rgba(17,24,39,.72);
  color:var(--v4-text);
  border-color:rgba(255,255,255,.10);
}
html[data-theme="dark"] body.theme-v4 .top-title{color:var(--v4-text)}
html[data-theme="dark"] body.theme-v4 .top-sub{color:var(--v4-muted)}
html[data-theme="dark"] body.theme-v4 .top-search-input{
  background:rgba(2,6,23,.18);
  border-color:rgba(255,255,255,.12);
  color:var(--v4-text);
  box-shadow:none;
}
html[data-theme="dark"] body.theme-v4 .top-search-input::placeholder{color:rgba(229,231,235,.55)}
html[data-theme="dark"] body.theme-v4 .top-search-input:focus{
  border-color:rgba(var(--v4-primary-rgb),.35);
  box-shadow:0 0 0 4px rgba(var(--v4-primary-rgb),.16);
}

html[data-theme="dark"] body.theme-v4 .icon-btn{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
  color:rgba(255,255,255,.92);
}
html[data-theme="dark"] body.theme-v4 .icon-btn:hover{background:rgba(255,255,255,.08)}

html[data-theme="dark"] body.theme-v4 .card{
  background:rgba(17,24,39,.72);
  border-color:rgba(255,255,255,.10);
  color:var(--v4-text);
  box-shadow:0 18px 55px rgba(0,0,0,.35);
}

html[data-theme="dark"] body.theme-v4 input,
html[data-theme="dark"] body.theme-v4 select,
html[data-theme="dark"] body.theme-v4 textarea{
  background:rgba(2,6,23,.16);
  border-color:rgba(255,255,255,.14);
  color:var(--v4-text);
}
html[data-theme="dark"] body.theme-v4 input::placeholder,
html[data-theme="dark"] body.theme-v4 textarea::placeholder{color:rgba(229,231,235,.55)}

html[data-theme="dark"] body.theme-v4 .table-wrap{
  background:rgba(17,24,39,.60);
  border-color:rgba(255,255,255,.10);
}
html[data-theme="dark"] body.theme-v4 table th{
  background:rgba(255,255,255,.04);
  color:rgba(229,231,235,.92);
  border-color:rgba(255,255,255,.08);
}
html[data-theme="dark"] body.theme-v4 table td{
  border-color:rgba(255,255,255,.08);
  color:rgba(229,231,235,.86);
}

@media (max-width:980px){
  body.theme-v4.authed .shell{padding:10px}
  body.theme-v4 .sidebar{top:0;height:100vh;border-radius:0;transform:translateX(105%)}
  body.theme-v4.sidebar-open .sidebar{transform:none}
  body.theme-v4.sidebar-open::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(2,6,23,.45);
    backdrop-filter:blur(2px);
    z-index:150;
  }
  body.theme-v4 .top-search{display:none}
  body.theme-v4 .topbar{top:10px;border-radius:18px}
}

/* Respect fullscreen (fs=1) */
body.theme-v4.fs .sidebar,
body.theme-v4.fs .topbar{display:none !important}


/* =========================================================
   Theme v4 Patch v5 — Fix Colors (Light/Dark) + Buttons/Tables + User Dropdown + Mini Tooltips
   ========================================================= */

/* Extra tokens that adapt with data-theme */
body.theme-v4{
  --v4-btn-bg: rgba(255,255,255,.88);
  --v4-btn-bg-hover: rgba(255,255,255,.96);
  --v4-btn-border: rgba(15,23,42,.12);
  --v4-soft: rgba(15,23,42,.04);
  --v4-soft2: rgba(15,23,42,.03);

  --v4-table-head: rgba(15,23,42,.03);
  --v4-table-zebra: rgba(15,23,42,.02);
  --v4-table-hover: rgba(var(--v4-primary-rgb),.06);

  --v4-tooltip-bg: rgba(2,6,23,.92);
  --v4-tooltip-text: #fff;
  --v4-tooltip-border: rgba(255,255,255,.18);
}

html[data-theme="dark"] body.theme-v4{
  --v4-btn-bg: rgba(255,255,255,.07);
  --v4-btn-bg-hover: rgba(255,255,255,.10);
  --v4-btn-border: rgba(255,255,255,.14);
  --v4-soft: rgba(255,255,255,.06);
  --v4-soft2: rgba(255,255,255,.04);

  --v4-table-head: rgba(255,255,255,.04);
  --v4-table-zebra: rgba(255,255,255,.03);
  --v4-table-hover: rgba(var(--v4-primary-rgb),.12);

  --v4-tooltip-bg: rgba(255,255,255,.92);
  --v4-tooltip-text: #0b1220;
  --v4-tooltip-border: rgba(2,6,23,.14);
}

/* Make SVG icons look consistent inside icon buttons */
body.theme-v4 .icon-btn svg{width:18px;height:18px;display:block}

/* ---------- Tables (Fix: background in Dark mode) ---------- */
body.theme-v4 .table-wrap{
  background:var(--v4-surface);
  border:1px solid var(--v4-border);
  box-shadow:0 16px 45px rgba(2,6,23,.08);
}

html[data-theme="dark"] body.theme-v4 .table-wrap{
  box-shadow:0 18px 55px rgba(0,0,0,.28);
}

body.theme-v4 table{
  background:var(--v4-surface);
  border:1px solid var(--v4-border);
  color:var(--v4-text);
}

body.theme-v4 th{
  background:var(--v4-table-head);
  color:rgba(15,23,42,.88);
  border-bottom:1px solid var(--v4-border);
}
html[data-theme="dark"] body.theme-v4 th{
  color:rgba(229,231,235,.92);
}

body.theme-v4 td{
  color:var(--v4-text);
  border-bottom:1px solid var(--v4-border);
}

body.theme-v4 table tbody tr:nth-child(even){background:var(--v4-table-zebra)}
body.theme-v4 table tbody tr:hover{background:var(--v4-table-hover)}

/* ListView (Additions Fast) header */
body.theme-v4 table.listview thead th{
  background:var(--v4-table-head);
  backdrop-filter: blur(10px);
}

/* ---------- Buttons (Fix: dark mode + all variants) ---------- */
body.theme-v4 .btn{
  background:var(--v4-btn-bg);
  border:1px solid var(--v4-btn-border);
  color:var(--v4-text);
  box-shadow:0 10px 25px rgba(2,6,23,.06);
  transition:transform .10s ease, background .15s ease, border-color .15s ease, filter .15s ease;
}
body.theme-v4 .btn:hover{
  background:var(--v4-btn-bg-hover);
  transform:translateY(-1px);
}
body.theme-v4 .btn:active{transform:translateY(0)}
body.theme-v4 .btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none !important;
  filter:none !important;
}

/* Small button */
body.theme-v4 .btn.sm{
  padding:8px 12px;
  border-radius:14px;
  font-size:12px;
}

/* Variants */
body.theme-v4 .btn.gray{
  background:var(--v4-soft);
}
body.theme-v4 .btn.gray:hover{background:var(--v4-btn-bg-hover)}

body.theme-v4 .btn.primary{
  border:none;
  background:linear-gradient(135deg, var(--v4-primary), var(--v4-primary2));
  color:#fff;
  box-shadow:0 18px 40px rgba(var(--v4-primary-rgb),.22);
}
html[data-theme="dark"] body.theme-v4 .btn.primary{
  box-shadow:0 18px 55px rgba(0,0,0,.30);
}

body.theme-v4 .btn.red,
body.theme-v4 .btn.danger{
  border:none;
  background:linear-gradient(135deg, #ef4444, #b91c1c);
  color:#fff;
  box-shadow:0 18px 40px rgba(220,38,38,.18);
}
body.theme-v4 .btn.green{
  border:none;
  background:linear-gradient(135deg, #22c55e, #16a34a);
  color:#fff;
  box-shadow:0 18px 40px rgba(22,163,74,.16);
}
body.theme-v4 .btn.orange{
  border:none;
  background:linear-gradient(135deg, #f59e0b, #d97706);
  color:#fff;
  box-shadow:0 18px 40px rgba(245,158,11,.16);
}

/* ---------- Metrics (Fix: background in Dark mode) ---------- */
body.theme-v4 .metric{
  background:var(--v4-surface);
  border:1px solid var(--v4-border);
  color:var(--v4-text);
}
html[data-theme="dark"] body.theme-v4 .metric{
  box-shadow:0 18px 55px rgba(0,0,0,.30);
}

/* ---------- Badges / chips ---------- */
body.theme-v4 .badge{background:rgba(var(--v4-primary-rgb),.10);border:1px solid rgba(var(--v4-primary-rgb),.18);color:var(--v4-primary)}
html[data-theme="dark"] body.theme-v4 .badge{background:rgba(var(--v4-primary-rgb),.14);border-color:rgba(var(--v4-primary-rgb),.18);color:var(--v4-text)}

body.theme-v4 .chip,
body.theme-v4 .chk,
body.theme-v4 .kbd,
body.theme-v4 .dd-handle{
  background:var(--v4-surface);
  border:1px solid var(--v4-border);
  color:var(--v4-text);
}
body.theme-v4 .chip{background:var(--v4-soft2);border-color:var(--v4-btn-border)}
body.theme-v4 .kbd{background:var(--v4-soft2);border-color:var(--v4-btn-border)}

/* ---------- User dropdown (Topbar) ---------- */
body.theme-v4 .user-menu{position:relative}
body.theme-v4 .user-menu-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  border-radius:18px;
  border:1px solid var(--v4-btn-border);
  background:var(--v4-btn-bg);
  color:var(--v4-text);
  cursor:pointer;
  box-shadow:0 10px 25px rgba(2,6,23,.06);
  transition:transform .10s ease, background .15s ease, border-color .15s ease;
}
body.theme-v4 .user-menu-btn:hover{background:var(--v4-btn-bg-hover);transform:translateY(-1px)}
body.theme-v4 .user-menu-btn:active{transform:translateY(0)}

body.theme-v4 .user-menu-avatar{
  width:34px;height:34px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg,
    hsla(var(--av-h), 90%, 60%, .42),
    hsla(calc(var(--av-h) + 70), 90%, 55%, .22)
  );
  box-shadow:0 14px 35px rgba(0,0,0,.22);
  color:#fff;
  font-weight:950;
}
body.theme-v4 .user-menu-avatar span{font-size:14px;transform:translateY(-1px)}
body.theme-v4 .user-menu-name{
  font-weight:950;
  max-width:160px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.theme-v4 .user-menu-chev{width:18px;height:18px;display:flex;align-items:center;justify-content:center;opacity:.65}
body.theme-v4 .user-menu-chev svg{width:18px;height:18px;display:block}

body.theme-v4 .user-menu-dd{
  position:absolute;
  top:calc(100% + 10px);
  inset-inline-end:0;
  min-width:240px;
  max-width:340px;
  padding:8px;
  border-radius:22px;
  background:var(--v4-surface);
  border:1px solid var(--v4-border2);
  box-shadow:var(--v4-shadow2);
  display:none;
  z-index:300;
}
body.theme-v4 .user-menu.open .user-menu-dd{display:block}

body.theme-v4 .user-menu-head{
  padding:10px 12px;
  border-radius:18px;
  background:var(--v4-soft2);
  border:1px solid var(--v4-btn-border);
  margin-bottom:8px;
}
body.theme-v4 .user-menu-head .um-name{font-weight:1000}
body.theme-v4 .user-menu-head .um-sub{margin-top:4px;font-size:12px;color:var(--v4-muted)}

body.theme-v4 .user-menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:18px;
  text-decoration:none;
  color:var(--v4-text);
  border:1px solid transparent;
  background:transparent;
  transition:transform .10s ease, background .15s ease, border-color .15s ease;
}
body.theme-v4 .user-menu-item:hover{
  background:var(--v4-soft);
  border-color:var(--v4-btn-border);
  transform:translateY(-1px);
}
body.theme-v4 .user-menu-item:active{transform:translateY(0)}
body.theme-v4 .user-menu-item.danger{color:var(--v4-danger)}
body.theme-v4 .user-menu-item.danger:hover{background:rgba(220,38,38,.12);border-color:rgba(220,38,38,.22)}

body.theme-v4 .user-menu-sep{
  height:1px;
  background:var(--v4-border);
  margin:8px 6px;
  border-radius:999px;
}
body.theme-v4 .umi-ic{width:22px;height:22px;display:flex;align-items:center;justify-content:center;opacity:.95}
body.theme-v4 .umi-ic svg{width:20px;height:20px;display:block}

body.theme-v4 .umi-badge{
  margin-inline-start:auto;
  padding:4px 10px;
  font-size:12px;
  font-weight:1000;
  border-radius:999px;
  background:linear-gradient(135deg, var(--v4-primary), var(--v4-primary2));
  color:#fff;
}

/* Mobile: hide name to save space */
@media (max-width:600px){
  body.theme-v4 .user-menu-name{display:none}
}

/* ---------- Mini mode tooltips (Sidebar) ---------- */
body.theme-v4.sb-mini .sidebar .nav-item[data-tip]:hover::after,
body.theme-v4.sb-mini .sidebar .nav-item[data-tip]:focus-visible::after{
  content:attr(data-tip);
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  right:calc(100% + 12px);
  left:auto;
  white-space:nowrap;
  padding:8px 10px;
  border-radius:14px;
  background:var(--v4-tooltip-bg);
  color:var(--v4-tooltip-text);
  border:1px solid var(--v4-tooltip-border);
  box-shadow:0 18px 55px rgba(0,0,0,.25);
  font-size:12px;
  font-weight:950;
  pointer-events:none;
  z-index:999;
}

body.theme-v4.sb-mini .sidebar .nav-item[data-tip]:hover::before,
body.theme-v4.sb-mini .sidebar .nav-item[data-tip]:focus-visible::before{
  content:"";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  right:calc(100% + 6px);
  left:auto;
  border:7px solid transparent;
  border-left-color:var(--v4-tooltip-bg);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.18));
  pointer-events:none;
  z-index:998;
}

/* =========================
   UI Enhancements (2026)
   - Breadcrumbs
   - Quick Actions (+)
   - Toast Notifications
   - Settings Tabs
   - Theme Picker
   - Sticky Actions
   - Skeleton
   ========================= */

/* Hide inline alerts when JS Toasts are available */
html.js .inline-msg{ display:none !important; }

/* Breadcrumbs */
body.theme-v4 .breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:6px;
  font-size:12px;
  font-weight:950;
  color:rgba(15,23,42,.55);
}
html[data-theme='dark'] body.theme-v4 .breadcrumbs{color:rgba(255,255,255,.6)}
body.theme-v4 .breadcrumbs a{
  color:inherit;
  text-decoration:none;
  opacity:.92;
}
body.theme-v4 .breadcrumbs a:hover{opacity:1;text-decoration:underline}
body.theme-v4 .breadcrumbs .bc-sep{opacity:.4}

/* Quick Actions Menu (+) */
body.theme-v4 .qa-menu{position:relative}
body.theme-v4 .qa-dd{
  position:absolute;
  top:calc(100% + 10px);
  inset-inline-end:0;
  min-width:220px;
  background:var(--v4-surface);
  border:1px solid var(--v4-border);
  border-radius:18px;
  padding:8px;
  box-shadow:var(--v4-shadow2);
  display:none;
  z-index:999;
}
body.theme-v4 .qa-menu.open .qa-dd{display:block;animation:v4-pop .16s ease}
body.theme-v4 .qa-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  text-decoration:none;
  color:var(--v4-text);
  font-weight:950;
}
body.theme-v4 .qa-item:hover{background:rgba(15,23,42,.06)}
html[data-theme='dark'] body.theme-v4 .qa-item:hover{background:rgba(255,255,255,.08)}
body.theme-v4 .qa-ic{
  width:26px;height:26px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.08);
}
html[data-theme='dark'] body.theme-v4 .qa-ic{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}

/* Toast Notifications */
body.theme-v4 .toast-wrap{
  position:fixed;
  bottom:24px;
  left:24px;
  right:auto;
  z-index:99999;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
body.theme-v4 .toast{
  width:min(380px, calc(100vw - 36px));
  background:var(--v4-surface);
  border:1px solid var(--v4-border);
  border-radius:18px;
  box-shadow:var(--v4-shadow);
  padding:12px 12px;
  pointer-events:auto;
  transform:translateY(0);
  opacity:1;
  transition:transform .2s ease, opacity .2s ease;
}
body.theme-v4 .toast.hide{transform:translateY(8px);opacity:0}
body.theme-v4 .toast-head{display:flex;align-items:flex-start;gap:10px}
body.theme-v4 .toast-ic{width:28px;height:28px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.06);border:1px solid rgba(15,23,42,.08)}
html[data-theme='dark'] body.theme-v4 .toast-ic{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
body.theme-v4 .toast-txt{flex:1;min-width:0}
body.theme-v4 .toast-title{font-weight:1000;font-size:13px;margin-bottom:2px}
body.theme-v4 .toast-msg{font-weight:850;font-size:12px;opacity:.9;line-height:1.4;word-break:break-word}
body.theme-v4 .toast-x{
  border:0;
  background:transparent;
  color:inherit;
  opacity:.55;
  cursor:pointer;
  font-size:14px;
  padding:6px 8px;
  border-radius:12px;
}
body.theme-v4 .toast-x:hover{opacity:1;background:rgba(15,23,42,.06)}
html[data-theme='dark'] body.theme-v4 .toast-x:hover{background:rgba(255,255,255,.08)}
body.theme-v4 .toast.success{border-inline-start:4px solid #22c55e}
body.theme-v4 .toast.error{border-inline-start:4px solid #ef4444}
body.theme-v4 .toast.warning{border-inline-start:4px solid #f59e0b}
body.theme-v4 .toast.info{border-inline-start:4px solid #3b82f6}
@media (max-width: 640px){
  body.theme-v4 .toast-wrap{
    left:12px;
    right:12px;
    bottom:12px;
  }
  body.theme-v4 .toast{width:100%}
}

/* Settings tabs */
body.theme-v4 .settings-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:6px;
  border-radius:18px;
  border:1px solid var(--v4-border);
  background:var(--v4-surface2);
}
body.theme-v4 .st-tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:14px;
  text-decoration:none;
  color:var(--v4-text);
  font-weight:1000;
  border:1px solid transparent;
}
body.theme-v4 .st-tab:hover{background:rgba(15,23,42,.06)}
html[data-theme='dark'] body.theme-v4 .st-tab:hover{background:rgba(255,255,255,.08)}
body.theme-v4 .st-tab.active{
  background:linear-gradient(135deg, var(--v4-primary), var(--v4-primary2));
  color:#fff;
  box-shadow:0 20px 60px rgba(var(--v4-primary-rgb),.18);
}

/* Theme picker (invoice) */
body.theme-v4 .theme-picker{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:10px;
  margin-top:8px;
}
body.theme-v4 .theme-opt{position:relative}
body.theme-v4 .theme-opt input{position:absolute;opacity:0;pointer-events:none}
body.theme-v4 .theme-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--v4-border);
  background:linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.55));
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
html[data-theme='dark'] body.theme-v4 .theme-pill{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
body.theme-v4 .theme-opt input:checked + .theme-pill{
  border-color:rgba(var(--v4-primary-rgb),.45);
  box-shadow:0 0 0 4px rgba(var(--v4-primary-rgb),.18);
}
body.theme-v4 .theme-pill:hover{transform:translateY(-1px)}
body.theme-v4 .theme-swatch{
  width:26px;
  height:26px;
  border-radius:12px;
  background:var(--swatch);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);
}
html[data-theme='dark'] body.theme-v4 .theme-swatch{box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)}
body.theme-v4 .theme-label{font-weight:1000;font-size:13px}

/* Sticky actions bar */
body.theme-v4{--sticky-top:84px}
body.theme-v4.fs{--sticky-top:12px}
body.theme-v4 .sticky-actions{
  position:sticky;
  top:var(--sticky-top);
  z-index:50;
  backdrop-filter:blur(10px);
  background:rgba(255,255,255,.72);
  border:1px solid var(--v4-border);
  border-radius:18px;
  padding:10px 12px;
  box-shadow:0 18px 55px rgba(2,6,23,.08);
}
html[data-theme='dark'] body.theme-v4 .sticky-actions{background:rgba(17,24,39,.72)}

/* Skeleton */
@keyframes sk-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
body.theme-v4 .skeleton{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  background:rgba(15,23,42,.08);
}
html[data-theme='dark'] body.theme-v4 .skeleton{background:rgba(255,255,255,.08)}
body.theme-v4 .skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform:translateX(-100%);
  animation:sk-shimmer 1.2s infinite;
}
body.theme-v4 .skeleton-text{color:transparent!important}

/* Table action buttons more compact */
body.theme-v4 table .actions{gap:8px;justify-content:center}
body.theme-v4 table .actions .btn{
  padding:8px 12px;
  border-radius:14px;
  font-size:12px;
  font-weight:1000;
  box-shadow:none;
}
body.theme-v4 table .actions .btn.gray{
  background:rgba(15,23,42,.06);
  color:var(--v4-text);
  border:1px solid var(--v4-border);
}
html[data-theme='dark'] body.theme-v4 table .actions .btn.gray{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
body.theme-v4 table .actions .btn.orange{
  background:linear-gradient(180deg, rgba(245,158,11,.18), rgba(245,158,11,.10));
  color:#92400e;
  border:1px solid rgba(245,158,11,.25);
}
html[data-theme='dark'] body.theme-v4 table .actions .btn.orange{color:#fed7aa}
body.theme-v4 table .actions .btn.red{
  background:linear-gradient(180deg, rgba(239,68,68,.18), rgba(239,68,68,.10));
  color:#991b1b;
  border:1px solid rgba(239,68,68,.25);
}
html[data-theme='dark'] body.theme-v4 table .actions .btn.red{color:#fecaca}
body.theme-v4 table .actions .btn:hover{transform:translateY(-1px)}




/* =========================
   Confirm Modal + Command Palette
   ========================= */

body.theme-v4 mark{
  background:rgba(245,158,11,.22);
  color:inherit;
  padding:0 3px;
  border-radius:6px;
}

/* Confirm Modal */
body.theme-v4 .confirm-backdrop{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.55);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:10000;
}

/* ✅ honor the [hidden] attribute (otherwise CSS display overrides the browser default) */
body.theme-v4 .confirm-backdrop[hidden],
body.theme-v4 .cmdk-backdrop[hidden]{
  display:none !important;
}
body.theme-v4 .confirm-modal{
  width:min(520px, 100%);
  background:var(--v4-surface);
  border:1px solid var(--v4-border);
  border-radius:22px;
  box-shadow:var(--v4-shadow2);
  padding:14px 14px 12px 14px;
}
body.theme-v4 .confirm-top{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
body.theme-v4 .confirm-ic{
  width:40px;height:40px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.22);
  flex:0 0 auto;
}
body.theme-v4 .confirm-title{
  font-weight:1100;
  font-size:15px;
}
body.theme-v4 .confirm-msg{
  margin-top:6px;
  color:var(--v4-muted);
  line-height:1.8;
  font-size:13px;
}
body.theme-v4 .confirm-actions{
  display:flex;
  gap:10px;
  justify-content:flex-start;
  margin-top:14px;
}


/* =====================================================================
   ✅ Global Confirm Modal (MSBOX)
   ---------------------------------------------------------------------
   بعض الصفحات تستخدم body.theme-laravel بدل body.theme-v4،
   لذلك قواعد الـ Confirm كانت لا تعمل ويظهر مربع التأكيد أسفل الصفحة.
   هذه القواعد العامة تجعل نافذة التأكيد تظهر كـ Message Box في منتصف الشاشة
   بغض النظر عن الثيم.
   ===================================================================== */

.confirm-backdrop{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.55);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:10000;
}

/* ✅ honor the [hidden] attribute */
.confirm-backdrop[hidden]{
  display:none !important;
}

.confirm-modal{
  width:min(520px, 100%);
  background:var(--v4-surface, #ffffff);
  border:1px solid var(--v4-border, rgba(15,23,42,.10));
  border-radius:22px;
  box-shadow:0 30px 90px rgba(2,6,23,.12);
  padding:14px 14px 12px 14px;
}

.confirm-modal .confirm-top{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.confirm-modal .confirm-ic{
  width:40px;height:40px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.22);
  flex:0 0 auto;
}

.confirm-modal .confirm-title{
  font-weight:1100;
  font-size:15px;
}

.confirm-modal .confirm-msg{
  margin-top:6px;
  color:var(--v4-muted, rgba(15,23,42,.62));
  line-height:1.8;
  font-size:13px;
}

.confirm-modal .confirm-actions{
  display:flex;
  gap:10px;
  justify-content:flex-start;
  margin-top:14px;
}

html[data-theme='dark'] .confirm-modal{
  background:var(--v4-surface, rgba(17,24,39,.88));
  border-color:var(--v4-border, rgba(255,255,255,.10));
  box-shadow:0 30px 90px rgba(0,0,0,.55);
}
html[data-theme='dark'] .confirm-modal .confirm-msg{
  color:var(--v4-muted, rgba(229,231,235,.65));
}

/* Command Palette (Ctrl+K) */
body.theme-v4 .cmdk-backdrop{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.55);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:30px 18px 18px 18px;
  z-index:10000;
}
body.theme-v4 .cmdk-modal{
  width:min(760px, 100%);
  background:var(--v4-surface);
  border:1px solid var(--v4-border);
  border-radius:24px;
  box-shadow:var(--v4-shadow2);
  overflow:hidden;
}
body.theme-v4 .cmdk-input-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border-bottom:1px solid var(--v4-border);
}
body.theme-v4 .cmdk-ic{
  width:40px;height:40px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.08);
  font-weight:1200;
}
html[data-theme='dark'] body.theme-v4 .cmdk-ic{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
body.theme-v4 .cmdk-input-wrap input{
  flex:1;
  border-radius:18px;
  padding:12px 14px;
  border:1px solid var(--v4-border);
  background:rgba(255,255,255,.66);
}
html[data-theme='dark'] body.theme-v4 .cmdk-input-wrap input{
  background:rgba(17,24,39,.66);
  color:var(--v4-text);
}
body.theme-v4 .cmdk-kbd{
  font-weight:1000;
  font-size:12px;
  color:var(--v4-muted);
  background:rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.08);
  border-radius:12px;
  padding:10px 12px;
}
html[data-theme='dark'] body.theme-v4 .cmdk-kbd{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
body.theme-v4 .cmdk-list{
  max-height:420px;
  overflow:auto;
  padding:8px;
}
body.theme-v4 .cmdk-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border-radius:18px;
  cursor:pointer;
  user-select:none;
}
body.theme-v4 .cmdk-item:hover{
  background:rgba(15,23,42,.06);
}
html[data-theme='dark'] body.theme-v4 .cmdk-item:hover{
  background:rgba(255,255,255,.06);
}
body.theme-v4 .cmdk-item.active{
  background:rgba(var(--v4-primary-rgb),.12);
  border:1px solid rgba(59,130,246,.22);
}
body.theme-v4 .cmdk-left{display:flex;flex-direction:column;gap:4px}
body.theme-v4 .cmdk-title{font-weight:1100}
body.theme-v4 .cmdk-hint{font-size:12px;color:var(--v4-muted)}
body.theme-v4 .cmdk-keys{
  font-size:12px;
  font-weight:1000;
  color:var(--v4-muted);
  background:rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.08);
  border-radius:12px;
  padding:6px 10px;
}
html[data-theme='dark'] body.theme-v4 .cmdk-keys{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
body.theme-v4 .cmdk-empty{
  padding:14px;
  color:var(--v4-muted);
  text-align:center;
  font-weight:1000;
}
body.theme-v4 .cmdk-footer{
  padding:10px 14px 14px 14px;
  border-top:1px solid var(--v4-border);
}

/* =========================
   ListView Column Visibility (Additions Fast)
   ========================= */
body.theme-v4.lv-hide-7_9 table.listview .col-add7,
body.theme-v4.lv-hide-7_9 table.listview .col-add8,
body.theme-v4.lv-hide-7_9 table.listview .col-add9{
  display:none !important;
}
body.theme-v4.lv-hide-10_12 table.listview .col-add10,
body.theme-v4.lv-hide-10_12 table.listview .col-add11,
body.theme-v4.lv-hide-10_12 table.listview .col-add12{
  display:none !important;
}

/* Column Manager dropdown */
body.theme-v4 .colmenu{position:relative}
body.theme-v4 .colmenu-dd{
  position:absolute;
  top:calc(100% + 10px);
  inset-inline-end:0;
  min-width:210px;
  background:var(--v4-surface);
  border:1px solid var(--v4-border);
  border-radius:18px;
  padding:10px;
  box-shadow:var(--v4-shadow2);
  display:none;
  z-index:999;
}
body.theme-v4 .colmenu.open .colmenu-dd{display:block;animation:v4-pop .16s ease}
body.theme-v4 .colmenu .chk{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:14px;
}
body.theme-v4 .colmenu .chk:hover{background:rgba(15,23,42,.06)}
html[data-theme='dark'] body.theme-v4 .colmenu .chk:hover{background:rgba(255,255,255,.06)}
body.theme-v4 .colmenu .chk input{width:18px;height:18px}



/* =========================
   Mini Stats (Top Summary)
   ========================= */
body.theme-v4 .mini-stats{
  padding:12px;
  border-bottom:1px solid var(--v4-border);
}
body.theme-v4 .mini-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:33px;
}
body.theme-v4 .mini-stat{
  min-width:160px;
  flex:1 1 160px;
  padding:10px 12px;
  border-radius:18px;
  background:rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.06);
}
html[data-theme='dark'] body.theme-v4 .mini-stat{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
body.theme-v4 .mini-stat .l{
  font-size:12px;
  color:var(--v4-muted);
  font-weight:900;
}
body.theme-v4 .mini-stat .n{
  margin-top:6px;
  font-size:18px;
  font-weight:1100;
  letter-spacing:.2px;
}

body.theme-v4 .mini-sep{
  margin-top:12px;
  border-top:1px dashed rgba(15,23,42,.18);
}
html[data-theme='dark'] body.theme-v4 .mini-sep{
  border-top:1px dashed rgba(255,255,255,.22);
}

body.theme-v4 .mini-subtitle{
  margin-top:10px;
  margin-bottom:8px;
  font-size:12px;
  color:var(--v4-muted);
  font-weight:1000;
}

body.theme-v4 .mini-stat.wide{
  flex: 2 1 260px;
  min-width: 240px;
}

body.theme-v4 .mini-stat .n.small{
  font-size:14px;
  line-height:1.35;
}

/* =========================
   Batch Quick List (Batches)
   ========================= */
body.theme-v4 .batch-quick{margin-top:4px;position:relative;}
body.theme-v4 .batch-quick-top{display:flex;gap:8px;align-items:center;}
body.theme-v4 .batch-quick-top input{
  flex:1;
  height:42px;
  border-radius:18px;
}
body.theme-v4 .batch-quick-list{
  margin-top:10px;
  max-height:240px;
  overflow:auto;
  padding:6px;
  border-radius:20px;
  background:rgba(15,23,42,.03);
  border:1px solid rgba(15,23,42,.06);
}
html[data-theme='dark'] body.theme-v4 .batch-quick-list{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}

/* Dropdown behavior (JS only): hide list until the user focuses/types */
html.js body.theme-v4 .batch-quick-list{display:none;}
html.js body.theme-v4 .batch-quick.open .batch-quick-list{display:block;}
html.js body.theme-v4 .batch-quick:focus-within .batch-quick-list{display:block;}
body.theme-v4 .batch-quick-item{
  display:block;
  padding:10px 10px;
  border-radius:18px;
  border:1px solid transparent;
  color:inherit;
  text-decoration:none;
}
body.theme-v4 .batch-quick-item:hover{
  background:rgba(15,23,42,.04);
  border-color:rgba(15,23,42,.08);
}
html[data-theme='dark'] body.theme-v4 .batch-quick-item:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.10);
}
body.theme-v4 .batch-quick-item.active{
  background:rgba(var(--v4-primary-rgb),.12);
  border-color:rgba(59,130,246,.28);
}
body.theme-v4 tr.row-active > td{
  background:rgba(59,130,246,.08);
}
html[data-theme='dark'] body.theme-v4 tr.row-active > td{
  background:rgba(59,130,246,.16);
}
body.theme-v4 .batch-quick-item .t{font-weight:1100;font-size:14px;}
body.theme-v4 .batch-quick-item .m{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;}
body.theme-v4 .batch-chip{
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.08);
  color:var(--v4-muted);
  font-weight:900;
}
html[data-theme='dark'] body.theme-v4 .batch-chip{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
}
body.theme-v4 .batch-quick-list.empty{opacity:.9;}


/* Search match flash (ListView) */
body.theme-v4 tr.lv-flash{
  animation: lvFlash .9s ease;
}
@keyframes lvFlash{
  0%{ background:rgba(59,130,246,.14); }
  100%{ background:transparent; }
}


/* ===========================
   Welcome landing – unified palette
   =========================== */
.welcome-landing{
  --wl-btn-bg: linear-gradient(135deg, rgba(var(--v4-primary-rgb), .92), rgba(var(--v4-primary2-rgb), .92));
  --wl-btn-border: rgba(var(--v4-primary-rgb), .30);
  --wl-btn-text: #fff;
}

/* Make all primary buttons use one unified color */
.welcome-landing .wl-links-btn,
.welcome-landing .wl-action-btn{
  background: var(--wl-btn-bg) !important;
  border-color: var(--wl-btn-border) !important;
  color: var(--wl-btn-text) !important;
}
.welcome-landing .wl-action-btn.wl-wa,
.welcome-landing .wl-action-btn.wl-mail,
.welcome-landing .wl-action-btn.wl-links,
.welcome-landing .wl-action-btn.wl-customer{
  background: var(--wl-btn-bg) !important;
  border-color: var(--wl-btn-border) !important;
  color: var(--wl-btn-text) !important;
}

/* Improve contrast in light mode */
.welcome-landing.wl-theme-light{
  background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 55%, #ffffff 100%) !important;
}
.welcome-landing.wl-theme-light .wl-hero-title{ color: #0f172a !important; }
.welcome-landing.wl-theme-light .wl-hero-sub{ color: rgba(15, 23, 42, .78) !important; }
.welcome-landing.wl-theme-light .wl-metric .n{ color: #0f172a !important; }
.welcome-landing.wl-theme-light .wl-metric .l{ color: rgba(15, 23, 42, .72) !important; }

/* Keep mini links readable but still consistent */
.welcome-landing .wl-mini-link{
  border-color: rgba(var(--v4-primary-rgb), .18) !important;
}
.welcome-landing.wl-theme-light .wl-mini-link{
  background: rgba(var(--v4-primary-rgb), .06) !important;
  color: #0f172a !important;
}


/* =====================================================
   Theme: Laravel/Tailwind (Breeze-like)
   - requested: "نفس Laravel حرفيًا"
   - applied when <body> has .theme-laravel
   - focuses on clarity, consistent spacing, and RTL safety
===================================================== */

/* Base page */
body.theme-laravel{
  /* Light mode background (softer + more modern than flat white) */
  background:linear-gradient(180deg, #f8fafc 0%, #eef2ff 42%, #f8fafc 100%);
  background-attachment:fixed;
  color:#0f172a;
  font-family:"Cairo","Tajawal","Noto Kufi Arabic",ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
html.dark body.theme-laravel,
html[data-theme="dark"] body.theme-laravel{
  background:
    radial-gradient(1200px 600px at 30% -10%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(16,185,129,.10), transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #0a0f1a 100%);
  background-attachment:fixed;
  color:#e5e7eb;
}

/* Public wrapper (login / customer portal / pages without sidebar)
   ✅ Adds consistent vertical spacing and improves responsiveness on small screens. */
body.theme-laravel .auth-wrap{
  min-height:100vh;
  min-height:100dvh;
  padding:18px 0 42px;
}
@media (max-width:600px){
  body.theme-laravel .auth-wrap{padding:14px 0 28px}
}

/* Media should never overflow cards on small screens */
body.theme-laravel img{max-width:100%;height:auto}

/* Remove old gradients/blur from legacy skin */
body.theme-laravel .sidebar,
body.theme-laravel .topbar,
body.theme-laravel .card,
body.theme-laravel .auth-card,
body.theme-laravel .stat,
body.theme-laravel .kpi{
  background-image:none !important;
  backdrop-filter:none !important;
}

/* Layout spacing */
body.theme-laravel.authed .shell{
  padding:16px;
  gap:16px;
  background:transparent;
  /* ✅ Fix: منع ظهور مساحة/فراغ أسفل الصفحة
     كان السبب: تقليل min-height أقل من ارتفاع الشاشة (100vh-32px)
     بينما الـ <body> لديه min-height:100vh، فكانت تظهر مساحة فارغة أسفل الـ .shell.
     الحل: نجعل الـ .shell تملأ الشاشة بالكامل (مع احتساب الـ padding عبر border-box). */
  min-height:100vh;
  min-height:100dvh;
  box-sizing:border-box;
}
body.theme-laravel.authed .main{min-height:calc(100vh - 32px)}

/* Sidebar */
body.theme-laravel .sidebar{
  width:288px;
  padding:16px 12px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.35);
  background-color:rgba(255,255,255,.92);
  box-shadow:0 12px 30px rgba(2,6,23,.08);
  color:#0f172a;
  position:sticky;
  top:16px;
  height:calc(100vh - 32px);
  overflow:auto;
}
html.dark body.theme-laravel .sidebar,
html[data-theme="dark"] body.theme-laravel .sidebar{
  background-color:rgba(2,6,23,.52);
  border-color:rgba(51,65,85,.70);
  color:#e5e7eb;
}

body.theme-laravel .sidebar::-webkit-scrollbar{width:10px}
body.theme-laravel .sidebar::-webkit-scrollbar-thumb{
  background:rgba(100,116,139,.35);
  border:3px solid rgba(0,0,0,0);
  background-clip:padding-box;
  border-radius:999px;
}
html.dark body.theme-laravel .sidebar::-webkit-scrollbar-thumb{background:rgba(148,163,184,.25)}

body.theme-laravel .sidebar-brand{padding:8px 8px 12px 8px}
body.theme-laravel .sidebar-logo{
  width:44px;height:44px;
  border-radius:14px;
  border:1px solid rgba(var(--v4-primary-rgb),.22);
  background:rgba(var(--v4-primary-rgb),.12);
  box-shadow:0 10px 25px rgba(2,6,23,.10);
}
html.dark body.theme-laravel .sidebar-logo,
html[data-theme="dark"] body.theme-laravel .sidebar-logo{
  background:rgba(var(--v4-primary-rgb),.18);
  border-color:rgba(var(--v4-primary-rgb),.26);
}
body.theme-laravel .sidebar-title{font-weight:950;letter-spacing:.2px}
body.theme-laravel .sidebar-sub{color:rgba(100,116,139,.95);font-size:12px}
html.dark body.theme-laravel .sidebar-sub,
html[data-theme="dark"] body.theme-laravel .sidebar-sub{color:rgba(203,213,225,.85)}

body.theme-laravel .nav-section-title{
  font-size:11px;
  color:rgba(100,116,139,.95);
  padding:10px 10px 8px 10px;
  letter-spacing:.4px;
  user-select:none;
}
html.dark body.theme-laravel .nav-section-title,
html[data-theme="dark"] body.theme-laravel .nav-section-title{color:rgba(148,163,184,.90)}

body.theme-laravel .sidebar-nav{gap:8px}
body.theme-laravel .nav-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(255,255,255,.60);
  color:rgba(15,23,42,.92);
  transition:background .14s ease, border-color .14s ease, transform .08s ease;
}
body.theme-laravel .nav-item:hover{
  background:rgba(248,250,252,.95);
  border-color:rgba(148,163,184,.32);
  transform:translateY(-1px);
}
body.theme-laravel .nav-item:active{transform:translateY(0)}
body.theme-laravel .nav-item.active{
  background:rgba(var(--v4-primary-rgb),.10);
  border-color:rgba(var(--v4-primary-rgb),.28);
  color:rgb(var(--v4-primary-rgb));
}
html.dark body.theme-laravel .nav-item,
html[data-theme="dark"] body.theme-laravel .nav-item{
  background:rgba(2,6,23,.35);
  border-color:rgba(51,65,85,.70);
  color:rgba(226,232,240,.92);
}
html.dark body.theme-laravel .nav-item:hover,
html[data-theme="dark"] body.theme-laravel .nav-item:hover{
  background:rgba(2,6,23,.55);
  border-color:rgba(71,85,105,.75);
}
html.dark body.theme-laravel .nav-item.active,
html[data-theme="dark"] body.theme-laravel .nav-item.active{
  background:rgba(var(--v4-primary-rgb),.15);
  border-color:rgba(var(--v4-primary-rgb),.34);
  color:rgba(255,255,255,.95);
}

/* ✅ Fix huge SVG icons (سبب "كسر الواجهات") */
body.theme-laravel .nav-item svg,
body.theme-laravel .icon-btn svg,
body.theme-laravel .sidebar-toggle svg,
body.theme-laravel .user-menu-btn svg,
body.theme-laravel .qa-btn svg,
body.theme-laravel .qa-dd svg,
body.theme-laravel .user-menu-dd svg,
body.theme-laravel .breadcrumb svg{
  width:20px;
  height:20px;
  display:block;
  flex:0 0 auto;
}

body.theme-laravel .nav-item .ni{
  width:36px;height:36px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(15,23,42,.06);
  border:1px solid rgba(148,163,184,.22);
}
body.theme-laravel .nav-item.active .ni{
  background:rgba(var(--v4-primary-rgb),.14);
  border-color:rgba(var(--v4-primary-rgb),.26);
}
html.dark body.theme-laravel .nav-item .ni,
html[data-theme="dark"] body.theme-laravel .nav-item .ni{
  background:rgba(148,163,184,.10);
  border-color:rgba(51,65,85,.75);
}

body.theme-laravel .nav-item .nt{font-weight:800;letter-spacing:.1px}
body.theme-laravel .nav-item .nav-badge{
  margin-inline-start:auto;
  border-radius:999px;
  padding:2px 8px;
  font-size:12px;
  background:rgba(100,116,139,.12);
  border:1px solid rgba(148,163,184,.25);
  color:rgba(15,23,42,.72);
}
html.dark body.theme-laravel .nav-item .nav-badge,
html[data-theme="dark"] body.theme-laravel .nav-item .nav-badge{
  background:rgba(148,163,184,.14);
  border-color:rgba(148,163,184,.18);
  color:rgba(226,232,240,.85);
}

/* Topbar */
body.theme-laravel .topbar{
  /* ✅ Fix: اجعل الهيدر أكثر وضوحًا حتى لا تظهر العناصر خلفه بشكل "خربطة" أثناء التمرير */
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(148,163,184,.45) !important;
  border-radius:18px;
  box-shadow:0 10px 28px rgba(2,6,23,.06);

  /* إعادة تفعيل الـ blur بشكل منضبط (تم إلغاؤه سابقًا في legacy reset) */
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
}
html.dark body.theme-laravel .topbar,
html[data-theme="dark"] body.theme-laravel .topbar{
  background:rgba(2,6,23,.98) !important;
  border-color:rgba(51,65,85,.85) !important;
}

body.theme-laravel .icon-btn{
  width:40px;height:40px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.32);
  background:rgba(255,255,255,.70);
  color:rgba(15,23,42,.88);
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 1px 2px rgba(2,6,23,.05);
  transition:transform .08s ease, background .12s ease, border-color .12s ease;
}
body.theme-laravel .icon-btn:hover{transform:translateY(-1px);background:rgba(248,250,252,.95);border-color:rgba(148,163,184,.45)}
body.theme-laravel .icon-btn:active{transform:translateY(0)}
html.dark body.theme-laravel .icon-btn,
html[data-theme="dark"] body.theme-laravel .icon-btn{
  background:rgba(2,6,23,.40);
  border-color:rgba(51,65,85,.80);
  color:rgba(226,232,240,.92);
}
html.dark body.theme-laravel .icon-btn:hover,
html[data-theme="dark"] body.theme-laravel .icon-btn:hover{background:rgba(2,6,23,.60)}

/* Search */
body.theme-laravel .top-search{flex:1;max-width:520px}
body.theme-laravel .top-search-input{
  width:100%;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.40);
  background:rgba(255,255,255,.85);
  padding:0 14px;
  outline:none;
  box-shadow:0 1px 2px rgba(2,6,23,.05);
  color:#0f172a;
}
body.theme-laravel .top-search-input::placeholder{color:rgba(100,116,139,.85)}
body.theme-laravel .top-search-input:focus{
  border-color:rgba(var(--v4-primary-rgb),.65);
  box-shadow:0 0 0 3px rgba(var(--v4-primary-rgb),.22);
}
html.dark body.theme-laravel .top-search-input,
html[data-theme="dark"] body.theme-laravel .top-search-input{
  background:rgba(2,6,23,.45);
  border-color:rgba(51,65,85,.85);
  color:#e5e7eb;
}
html.dark body.theme-laravel .top-search-input::placeholder,
html[data-theme="dark"] body.theme-laravel .top-search-input::placeholder{color:rgba(148,163,184,.85)}

/* Cards / Typography */
body.theme-laravel .card{
  background-color:rgba(255,255,255,.92);
  border:1px solid rgba(148,163,184,.32);
  border-radius:18px;
  box-shadow:0 10px 28px rgba(2,6,23,.06);
  padding:18px;
}
html.dark body.theme-laravel .card,
html[data-theme="dark"] body.theme-laravel .card{
  background-color:rgba(2,6,23,.55);
  border-color:rgba(51,65,85,.75);
}

body.theme-laravel .h1{font-size:20px;font-weight:1000;letter-spacing:.1px}
body.theme-laravel .muted{color:rgba(71,85,105,.92)}
html.dark body.theme-laravel .muted,
html[data-theme="dark"] body.theme-laravel .muted{color:rgba(148,163,184,.92)}

/* Forms */
body.theme-laravel .field label{color:rgba(71,85,105,.98);font-weight:800}
html.dark body.theme-laravel .field label,
html[data-theme="dark"] body.theme-laravel .field label{color:rgba(203,213,225,.92)}

body.theme-laravel input,
body.theme-laravel select,
body.theme-laravel textarea{
  background-color:rgba(255,255,255,.92);
  border:1px solid rgba(148,163,184,.45);
  color:#0f172a;
  border-radius:12px;
}
body.theme-laravel input:focus,
body.theme-laravel select:focus,
body.theme-laravel textarea:focus{
  outline:none;
  border-color:rgba(var(--v4-primary-rgb),.65);
  box-shadow:0 0 0 3px rgba(var(--v4-primary-rgb),.22);
}
html.dark body.theme-laravel input,
html.dark body.theme-laravel select,
html.dark body.theme-laravel textarea,
html[data-theme="dark"] body.theme-laravel input,
html[data-theme="dark"] body.theme-laravel select,
html[data-theme="dark"] body.theme-laravel textarea{
  background-color:rgba(2,6,23,.45);
  border-color:rgba(51,65,85,.85);
  color:#e5e7eb;
}

/* Buttons (Laravel-like) */
body.theme-laravel .btn{
  border-radius:12px;
  border:1px solid rgba(148,163,184,.45);
  background:rgba(255,255,255,.85);
  color:rgba(15,23,42,.90);
  font-weight:900;
  box-shadow:0 1px 2px rgba(2,6,23,.05);
}
body.theme-laravel .btn:hover{background:rgba(248,250,252,.95);transform:translateY(-1px)}
body.theme-laravel .btn:active{transform:translateY(0)}
body.theme-laravel .btn.primary{
  background:rgb(var(--v4-primary-rgb));
  border-color:rgba(var(--v4-primary-rgb),.85);
  color:#fff;
}
body.theme-laravel .btn.primary:hover{filter:brightness(.96)}
body.theme-laravel .btn.red{background:#e11d48;border-color:#e11d48;color:#fff}
body.theme-laravel .btn.green{background:#059669;border-color:#059669;color:#fff}
body.theme-laravel .btn.gray{background:rgba(100,116,139,.10);border-color:rgba(148,163,184,.35);color:rgba(15,23,42,.90)}
html.dark body.theme-laravel .btn,
html[data-theme="dark"] body.theme-laravel .btn{
  background:rgba(2,6,23,.40);
  border-color:rgba(51,65,85,.80);
  color:rgba(226,232,240,.95);
}
html.dark body.theme-laravel .btn.gray,
html[data-theme="dark"] body.theme-laravel .btn.gray{
  background:rgba(148,163,184,.12);
  border-color:rgba(148,163,184,.18);
}

/* User menu */
body.theme-laravel .user-menu{position:relative}
body.theme-laravel .user-menu-btn{
  display:flex;align-items:center;gap:10px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(255,255,255,.70);
  box-shadow:0 1px 2px rgba(2,6,23,.05);
}
html.dark body.theme-laravel .user-menu-btn,
html[data-theme="dark"] body.theme-laravel .user-menu-btn{
  background:rgba(2,6,23,.40);
  border-color:rgba(51,65,85,.80);
}
body.theme-laravel .user-menu-avatar{
  width:36px;height:36px;
  border-radius:999px;
  background:rgba(var(--v4-primary-rgb),.12);
  border:1px solid rgba(var(--v4-primary-rgb),.22);
  display:flex;align-items:center;justify-content:center;
  font-weight:1000;
}
body.theme-laravel .user-menu-name{font-weight:900;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.theme-laravel .user-menu-chev{width:18px;height:18px;display:flex;align-items:center;justify-content:center;opacity:.65}
body.theme-laravel .user-menu-chev svg{width:18px;height:18px}

body.theme-laravel .user-menu-dd{
  position:absolute;
  inset-inline-end:0;
  top:calc(100% + 10px);
  min-width:240px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(255,255,255,.96);
  box-shadow:0 20px 60px rgba(2,6,23,.12);
  display:none;
  padding:10px;
  z-index:120;
}
html.dark body.theme-laravel .user-menu-dd,
html[data-theme="dark"] body.theme-laravel .user-menu-dd{
  background:rgba(2,6,23,.88);
  border-color:rgba(51,65,85,.85);
}
body.theme-laravel .user-menu.open .user-menu-dd{display:block}
body.theme-laravel .user-menu-head{padding:10px 10px 8px 10px}
body.theme-laravel .user-menu-head .um-name{font-weight:1000}
body.theme-laravel .user-menu-head .um-sub{margin-top:4px;font-size:12px;color:rgba(100,116,139,.95)}
html.dark body.theme-laravel .user-menu-head .um-sub,
html[data-theme="dark"] body.theme-laravel .user-menu-head .um-sub{color:rgba(148,163,184,.92)}
body.theme-laravel .user-menu-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid transparent;
  color:rgba(15,23,42,.90);
}
body.theme-laravel .user-menu-item:hover{background:rgba(100,116,139,.10);border-color:rgba(148,163,184,.25)}
body.theme-laravel .user-menu-item.danger{color:#e11d48}
body.theme-laravel .user-menu-item.danger:hover{background:rgba(225,29,72,.12);border-color:rgba(225,29,72,.18)}
html.dark body.theme-laravel .user-menu-item,
html[data-theme="dark"] body.theme-laravel .user-menu-item{color:rgba(226,232,240,.92)}

body.theme-laravel .user-menu-sep{height:1px;background:rgba(148,163,184,.28);margin:8px 0}
html.dark body.theme-laravel .user-menu-sep,
html[data-theme="dark"] body.theme-laravel .user-menu-sep{background:rgba(51,65,85,.85)}

/* Quick actions (+) */
body.theme-laravel .qa-menu{position:relative}
body.theme-laravel .qa-btn{
  width:40px;height:40px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.32);
  background:rgba(255,255,255,.70);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 2px rgba(2,6,23,.05);
}
html.dark body.theme-laravel .qa-btn,
html[data-theme="dark"] body.theme-laravel .qa-btn{background:rgba(2,6,23,.40);border-color:rgba(51,65,85,.80)}
body.theme-laravel .qa-dd{
  position:absolute;
  inset-inline-start:0;
  top:calc(100% + 10px);
  width:220px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(255,255,255,.96);
  box-shadow:0 20px 60px rgba(2,6,23,.12);
  display:none;
  padding:10px;
  z-index:120;
}
html.dark body.theme-laravel .qa-dd,
html[data-theme="dark"] body.theme-laravel .qa-dd{background:rgba(2,6,23,.88);border-color:rgba(51,65,85,.85)}
body.theme-laravel .qa-menu.open .qa-dd{display:block;animation:v4-pop .16s ease}
body.theme-laravel .qa-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid transparent;
  color:rgba(15,23,42,.92);
}
body.theme-laravel .qa-item:hover{background:rgba(100,116,139,.10);border-color:rgba(148,163,184,.25)}
html.dark body.theme-laravel .qa-item,
html[data-theme="dark"] body.theme-laravel .qa-item{color:rgba(226,232,240,.92)}

/* Tables */
body.theme-laravel table{color:inherit}
body.theme-laravel .table-wrap{border-radius:16px;border:1px solid rgba(148,163,184,.28);overflow:hidden;background:rgba(255,255,255,.70)}
html.dark body.theme-laravel .table-wrap,
html[data-theme="dark"] body.theme-laravel .table-wrap{background:rgba(2,6,23,.35);border-color:rgba(51,65,85,.75)}
body.theme-laravel th{color:rgba(100,116,139,.95);font-weight:900}
html.dark body.theme-laravel th,
html[data-theme="dark"] body.theme-laravel th{color:rgba(148,163,184,.92)}

/* Mobile: keep off-canvas sidebar behavior */
@media (max-width:980px){
  body.theme-laravel .sidebar{position:fixed;right:0;top:0;bottom:0;z-index:200;transform:translateX(105%);transition:transform .18s ease;top:0;height:auto;border-radius:0}
  body.theme-laravel.sidebar-open .sidebar{transform:none}
  body.theme-laravel .sidebar-toggle{display:flex}
  body.theme-laravel .shell{display:block}
  body.theme-laravel .main{min-height:100vh}
}


/* =========================
   Theme Laravel Fixes (2026-02)
   - Style missing components (nav-group, batch list, settings tabs)
   - Improve Light mode (variables + dashboard + tables)
   ========================= */

/* 1) Proper variables for Light/Dark so legacy components don't look washed out */
body.theme-laravel{
  --text:#0f172a;
  --muted:rgba(71,85,105,.92);
  --muted2:rgba(100,116,139,.72);
  --border:rgba(148,163,184,.32);
  --border2:rgba(148,163,184,.45);
  --card:rgba(255,255,255,.92);
  --card2:rgba(255,255,255,.96);
  --glass:rgba(15,23,42,.02);
  --shadow:0 10px 28px rgba(2,6,23,.08);
  --shadow2:0 20px 60px rgba(2,6,23,.14);

  /* SVG/Charts */
  --chart-grid:rgba(15,23,42,.08);
  --chart-grid2:rgba(15,23,42,.12);
  --chart-text:rgba(15,23,42,.72);
  --chart-muted:rgba(100,116,139,.75);
  --ring-base:rgba(15,23,42,.12);
  --ring-muted:rgba(100,116,139,.16);
}
html.dark body.theme-laravel,
html[data-theme="dark"] body.theme-laravel{
  --text:#e5e7eb;
  --muted:rgba(148,163,184,.92);
  --muted2:rgba(148,163,184,.72);
  --border:rgba(51,65,85,.65);
  --border2:rgba(51,65,85,.85);
  --card:rgba(2,6,23,.55);
  --card2:rgba(2,6,23,.75);
  --glass:rgba(255,255,255,.04);
  --shadow:0 18px 55px rgba(0,0,0,.45);
  --shadow2:0 30px 90px rgba(0,0,0,.55);

  --chart-grid:rgba(255,255,255,.07);
  --chart-grid2:rgba(255,255,255,.10);
  --chart-text:rgba(226,232,240,.88);
  --chart-muted:rgba(148,163,184,.65);
  --ring-base:rgba(255,255,255,.10);
  --ring-muted:rgba(255,255,255,.18);
}


/* 2) Tables: enable scrolling + nicer header/hover (fix list pages) */
body.theme-laravel .table-wrap{overflow:auto}
body.theme-laravel .table-wrap thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:rgba(248,250,252,.95);
  backdrop-filter:blur(10px);
}
html.dark body.theme-laravel .table-wrap thead th,
html[data-theme="dark"] body.theme-laravel .table-wrap thead th{background:rgba(2,6,23,.88)}

body.theme-laravel tbody tr:hover{background:rgba(99,102,241,.08)}
html.dark body.theme-laravel tbody tr:hover,
html[data-theme="dark"] body.theme-laravel tbody tr:hover{background:rgba(99,102,241,.14)}

body.theme-laravel tbody tr:nth-child(even){background:rgba(100,116,139,.04)}
html.dark body.theme-laravel tbody tr:nth-child(even),
html[data-theme="dark"] body.theme-laravel tbody tr:nth-child(even){background:rgba(255,255,255,.03)}


/* 3) Sidebar submenu (nav-group) — fixes huge SVG + makes it look consistent */
body.theme-laravel .nav-group{display:block}
body.theme-laravel .nav-group-toggle{
  width:100%;
  cursor:pointer;
  border:0;
  background:transparent;
  text-align:inherit;
}
body.theme-laravel .nav-group-toggle .chev{
  margin-inline-start:auto;
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.65;
  transition:transform .15s ease, opacity .15s ease;
}
body.theme-laravel .nav-group-toggle .chev svg{width:18px;height:18px;display:block}
body.theme-laravel .nav-group.open .nav-group-toggle .chev{transform:rotate(180deg);opacity:.9}

body.theme-laravel .nav-sub{
  margin:6px 0 0 0;
  padding-inline-start:12px;
  border-inline-start:2px solid rgba(148,163,184,.22);
  display:none;
}
html.dark body.theme-laravel .nav-sub,
html[data-theme="dark"] body.theme-laravel .nav-sub{border-color:rgba(51,65,85,.55)}
body.theme-laravel .nav-group.open .nav-sub{display:block}

body.theme-laravel .nav-sub-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:12px;
  margin-top:6px;
  text-decoration:none;
  font-weight:900;
  border:1px solid transparent;
  color:rgba(15,23,42,.88);
}
html.dark body.theme-laravel .nav-sub-item,
html[data-theme="dark"] body.theme-laravel .nav-sub-item{color:rgba(226,232,240,.92)}

body.theme-laravel .nav-sub-item:hover{background:rgba(100,116,139,.10);border-color:rgba(148,163,184,.22)}
html.dark body.theme-laravel .nav-sub-item:hover,
html[data-theme="dark"] body.theme-laravel .nav-sub-item:hover{background:rgba(255,255,255,.06);border-color:rgba(51,65,85,.65)}

body.theme-laravel .nav-sub-item.active{
  background:rgba(99,102,241,.12);
  border-color:rgba(99,102,241,.28);
  color:rgba(67,56,202,.95);
}
html.dark body.theme-laravel .nav-sub-item.active,
html[data-theme="dark"] body.theme-laravel .nav-sub-item.active{background:rgba(99,102,241,.16);border-color:rgba(99,102,241,.35);color:#e0e7ff}

body.theme-laravel .nav-sub-item .si{
  width:34px;
  height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(100,116,139,.10);
  border:1px solid rgba(148,163,184,.22);
  flex:0 0 auto;
}
html.dark body.theme-laravel .nav-sub-item .si,
html[data-theme="dark"] body.theme-laravel .nav-sub-item .si{background:rgba(255,255,255,.06);border-color:rgba(51,65,85,.75)}

/* ✅ Fix: SVG inside submenu had default 300x150 size */
body.theme-laravel .nav-sub-item svg{width:20px;height:20px;display:block}
body.theme-laravel .nav-sub-item .st{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* 4) Batches quick list (قائمة الدفعات) */
body.theme-laravel .batch-quick-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
body.theme-laravel .batch-quick-title{font-weight:1000;color:rgba(15,23,42,.90)}
html.dark body.theme-laravel .batch-quick-title,
html[data-theme="dark"] body.theme-laravel .batch-quick-title{color:rgba(226,232,240,.92)}

body.theme-laravel .batch-quick-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:2px;
  max-height:58vh;
  overflow:auto;
}

body.theme-laravel .batch-quick-item{
  display:block;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(255,255,255,.72);
  padding:12px 12px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
html.dark body.theme-laravel .batch-quick-item,
html[data-theme="dark"] body.theme-laravel .batch-quick-item{background:rgba(2,6,23,.35);border-color:rgba(51,65,85,.75)}

body.theme-laravel .batch-quick-item:hover{transform:translateY(-1px);box-shadow:0 14px 40px rgba(2,6,23,.08);border-color:rgba(99,102,241,.28);background:rgba(255,255,255,.92)}
html.dark body.theme-laravel .batch-quick-item:hover,
html[data-theme="dark"] body.theme-laravel .batch-quick-item:hover{background:rgba(2,6,23,.55);border-color:rgba(99,102,241,.35);box-shadow:0 22px 60px rgba(0,0,0,.35)}

body.theme-laravel .batch-quick-item.active{border-color:rgba(99,102,241,.40);box-shadow:0 18px 60px rgba(99,102,241,.12)}

body.theme-laravel .batch-quick-item .t{font-weight:1000;line-height:1.35;margin-bottom:8px;color:rgba(15,23,42,.92)}
html.dark body.theme-laravel .batch-quick-item .t,
html[data-theme="dark"] body.theme-laravel .batch-quick-item .t{color:rgba(226,232,240,.92)}

body.theme-laravel .batch-quick-item .m{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:rgba(100,116,139,.92)}
html.dark body.theme-laravel .batch-quick-item .m,
html[data-theme="dark"] body.theme-laravel .batch-quick-item .m{color:rgba(148,163,184,.90)}

body.theme-laravel .batch-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(100,116,139,.08);
  font-weight:1000;
}
html.dark body.theme-laravel .batch-chip,
html[data-theme="dark"] body.theme-laravel .batch-chip{border-color:rgba(51,65,85,.65);background:rgba(255,255,255,.05)}
body.theme-laravel .batch-chip strong{direction:ltr;font-weight:1000}


/* 5) Settings Tabs (الإعدادات) */
body.theme-laravel .settings-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:8px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(255,255,255,.70);
}
html.dark body.theme-laravel .settings-tabs,
html[data-theme="dark"] body.theme-laravel .settings-tabs{background:rgba(2,6,23,.35);border-color:rgba(51,65,85,.75)}

body.theme-laravel .st-tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:14px;
  text-decoration:none;
  color:rgba(15,23,42,.90);
  font-weight:1000;
  border:1px solid transparent;
}
html.dark body.theme-laravel .st-tab,
html[data-theme="dark"] body.theme-laravel .st-tab{color:rgba(226,232,240,.92)}

body.theme-laravel .st-tab:hover{background:rgba(100,116,139,.10);border-color:rgba(148,163,184,.22)}
html.dark body.theme-laravel .st-tab:hover,
html[data-theme="dark"] body.theme-laravel .st-tab:hover{background:rgba(255,255,255,.06);border-color:rgba(51,65,85,.65)}

body.theme-laravel .st-tab.active{
  background:linear-gradient(135deg, rgba(99,102,241,.95), rgba(59,130,246,.85));
  color:#fff;
  box-shadow:0 20px 60px rgba(99,102,241,.22);
}


/* 6) Checkbox cards (.chk) + permissions grid */
body.theme-laravel .chk{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(148,163,184,.28);
}
html.dark body.theme-laravel .chk,
html[data-theme="dark"] body.theme-laravel .chk{background:rgba(2,6,23,.35);border-color:rgba(51,65,85,.75)}

body.theme-laravel .chk:hover{background:rgba(255,255,255,.92);border-color:rgba(99,102,241,.25)}
html.dark body.theme-laravel .chk:hover,
html[data-theme="dark"] body.theme-laravel .chk:hover{background:rgba(2,6,23,.55);border-color:rgba(99,102,241,.30)}

body.theme-laravel .chk input{width:18px;height:18px;accent-color:#4f46e5}
body.theme-laravel .chk .badge{margin-inline-start:auto;white-space:nowrap;font-size:11px;opacity:.85}

body.theme-laravel .perm-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:10px;
  margin-top:10px;
  max-height:52vh;
  overflow:auto;
  padding:2px;
}


/* 7) Dashboard: make Light mode cleaner + readable */
html:not(.dark) body.theme-laravel .metric{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(148,163,184,.28);
  box-shadow:0 12px 30px rgba(2,6,23,.06);
}
html:not(.dark) body.theme-laravel .metric::after{display:none}
html:not(.dark) body.theme-laravel .metric .m-ic{box-shadow:none;border-color:rgba(148,163,184,.28)}
html:not(.dark) body.theme-laravel .metric.m-green{border-color:rgba(34,197,94,.30)}
html:not(.dark) body.theme-laravel .metric.m-blue{border-color:rgba(59,130,246,.30)}
html:not(.dark) body.theme-laravel .metric.m-orange{border-color:rgba(245,158,11,.34)}
html:not(.dark) body.theme-laravel .metric.m-red{border-color:rgba(239,68,68,.30)}
html:not(.dark) body.theme-laravel .metric.m-purple{border-color:rgba(99,102,241,.32)}

html:not(.dark) body.theme-laravel .metric.m-green .m-ic{background:rgba(34,197,94,.16);border-color:rgba(34,197,94,.28)}
html:not(.dark) body.theme-laravel .metric.m-blue .m-ic{background:rgba(59,130,246,.16);border-color:rgba(59,130,246,.28)}
html:not(.dark) body.theme-laravel .metric.m-orange .m-ic{background:rgba(245,158,11,.18);border-color:rgba(245,158,11,.30)}
html:not(.dark) body.theme-laravel .metric.m-red .m-ic{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.26)}
html:not(.dark) body.theme-laravel .metric.m-purple .m-ic{background:rgba(99,102,241,.16);border-color:rgba(99,102,241,.28)}
html:not(.dark) body.theme-laravel .bar-name{color:rgba(15,23,42,.82)}
html:not(.dark) body.theme-laravel .bar-track{background:rgba(100,116,139,.12);border-color:rgba(148,163,184,.28)}
html:not(.dark) body.theme-laravel .svg-wrap{background:rgba(15,23,42,.02);border-color:rgba(148,163,184,.28)}




/* 8) Mini stats (batches/withdrawals/expenses) */
body.theme-laravel .mini-title{
  font-weight:1000;
  color:rgba(15,23,42,.90);
  margin:0 0 10px 0;
}
html.dark body.theme-laravel .mini-title,
html[data-theme="dark"] body.theme-laravel .mini-title{color:rgba(226,232,240,.92)}

body.theme-laravel .mini-stats{margin-top:10px}
body.theme-laravel .mini-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 920px){
  body.theme-laravel .mini-grid{grid-template-columns:1fr}
}

body.theme-laravel .mini-stat{
  border:1px solid rgba(148,163,184,.28);
  background:rgba(255,255,255,.70);
  border-radius:18px;
  padding:12px 14px;
}
html.dark body.theme-laravel .mini-stat,
html[data-theme="dark"] body.theme-laravel .mini-stat{background:rgba(2,6,23,.35);border-color:rgba(51,65,85,.75)}

body.theme-laravel .mini-stat .l{
  font-size:12px;
  font-weight:1000;
  color:rgba(71,85,105,.88);
}
html.dark body.theme-laravel .mini-stat .l,
html[data-theme="dark"] body.theme-laravel .mini-stat .l{color:rgba(148,163,184,.92)}

body.theme-laravel .mini-stat .n{
  margin-top:6px;
  font-size:16px;
  font-weight:1000;
  letter-spacing:.2px;
  white-space:nowrap;
  direction:ltr;
  unicode-bidi:plaintext;
}
body.theme-laravel .mini-stat .n.small{font-size:13px;white-space:normal;direction:rtl}

body.theme-laravel .mini-sep{
  height:1px;
  background:rgba(148,163,184,.30);
  margin:14px 0;
}
html.dark body.theme-laravel .mini-sep,
html[data-theme="dark"] body.theme-laravel .mini-sep{background:rgba(51,65,85,.75)}

body.theme-laravel .mini-subtitle{
  margin:0 0 10px 0;
  font-size:12px;
  font-weight:1000;
  color:rgba(71,85,105,.90);
}
html.dark body.theme-laravel .mini-subtitle,
html[data-theme="dark"] body.theme-laravel .mini-subtitle{color:rgba(148,163,184,.92)}


/* 9) Sticky toolbars (ListView filters/actions) */
body.theme-laravel{--topbar-offset:92px}
@media (max-width: 700px){body.theme-laravel{--topbar-offset:82px}}

body.theme-laravel .sticky-actions{
  position:sticky;
  top:var(--topbar-offset);
  z-index:25;
  padding:10px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
}
html.dark body.theme-laravel .sticky-actions,
html[data-theme="dark"] body.theme-laravel .sticky-actions{background:rgba(2,6,23,.55);border-color:rgba(51,65,85,.75)}
@media print{body.theme-laravel .sticky-actions{position:static;top:auto;backdrop-filter:none}}


/* 10) Table actions: make them compact & not stacked */
body.theme-laravel .table-wrap td .actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  justify-content:flex-start;
  min-width:240px;
}
@media (max-width: 900px){
  body.theme-laravel .table-wrap td .actions{min-width:200px}
}

body.theme-laravel .table-wrap td .actions .btn{
  padding:7px 10px;
  font-size:12px;
  border-radius:12px;
}
body.theme-laravel .table-wrap td .actions .btn.sm{padding:6px 10px;font-size:12px}

/* Customers table needs a bit more room for 3-4 buttons */
body.theme-laravel .customers-page .table-wrap td .actions{min-width:320px}
@media (max-width: 900px){body.theme-laravel .customers-page .table-wrap td .actions{min-width:240px}}


/* 11) Customers: stats cards readability */
body.theme-laravel .stat{
  background:rgba(255,255,255,.86);
  border:1px solid rgba(148,163,184,.28);
  border-radius:18px;
  padding:12px 14px;
  box-shadow:0 12px 30px rgba(2,6,23,.06);
}
html.dark body.theme-laravel .stat,
html[data-theme="dark"] body.theme-laravel .stat{background:rgba(2,6,23,.35);border-color:rgba(51,65,85,.75);box-shadow:0 26px 80px rgba(0,0,0,.35)}
body.theme-laravel .stat .k{font-size:12px;color:rgba(71,85,105,.88);font-weight:1000}
html.dark body.theme-laravel .stat .k,
html[data-theme="dark"] body.theme-laravel .stat .k{color:rgba(148,163,184,.92)}
body.theme-laravel .stat .v{
  margin-top:6px;
  font-size:18px;
  font-weight:1000;
  white-space:nowrap;
  direction:ltr;
  unicode-bidi:plaintext;
}


/* 12) Column manager dropdown (إدارة الأعمدة) */
body.theme-laravel .colmenu{position:relative;display:inline-flex;align-items:center;gap:8px}
body.theme-laravel .colmenu-dd{
  position:absolute;
  top:calc(100% + 10px);
  inset-inline-start:0;
  min-width:260px;
  max-width:320px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(255,255,255,.92);
  box-shadow:0 30px 90px rgba(2,6,23,.12);
  display:none;
}
html.dark body.theme-laravel .colmenu-dd,
html[data-theme="dark"] body.theme-laravel .colmenu-dd{background:rgba(2,6,23,.75);border-color:rgba(51,65,85,.75);box-shadow:0 40px 120px rgba(0,0,0,.55)}
body.theme-laravel .colmenu.open .colmenu-dd{display:block}
body.theme-laravel .colmenu-dd .title{font-weight:1000;margin:0 0 10px 0;color:rgba(15,23,42,.90)}
html.dark body.theme-laravel .colmenu-dd .title,
html[data-theme="dark"] body.theme-laravel .colmenu-dd .title{color:rgba(226,232,240,.92)}
body.theme-laravel .colmenu-dd .chk{margin-top:8px}


/* 13) ListView column visibility (theme-laravel) */
body.theme-laravel.lv-hide-7_9 table.listview .col-add7,
body.theme-laravel.lv-hide-7_9 table.listview .col-add8,
body.theme-laravel.lv-hide-7_9 table.listview .col-add9{display:none}
body.theme-laravel.lv-hide-10_12 table.listview .col-add10,
body.theme-laravel.lv-hide-10_12 table.listview .col-add11,
body.theme-laravel.lv-hide-10_12 table.listview .col-add12{display:none}


/* 14) Theme picker (site + invoice themes) */
body.theme-laravel .theme-picker{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:10px;
  margin-top:10px;
}

body.theme-laravel .theme-opt{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 12px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(255,255,255,.74);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
html.dark body.theme-laravel .theme-opt,
html[data-theme="dark"] body.theme-laravel .theme-opt{background:rgba(2,6,23,.35);border-color:rgba(51,65,85,.75)}

body.theme-laravel .theme-opt:hover{transform:translateY(-1px);box-shadow:0 18px 60px rgba(2,6,23,.10);border-color:rgba(99,102,241,.28);background:rgba(255,255,255,.92)}
html.dark body.theme-laravel .theme-opt:hover,
html[data-theme="dark"] body.theme-laravel .theme-opt:hover{background:rgba(2,6,23,.55);border-color:rgba(99,102,241,.30);box-shadow:0 26px 90px rgba(0,0,0,.45)}

body.theme-laravel .theme-opt input{width:18px;height:18px;accent-color:#4f46e5}
body.theme-laravel .theme-chip{
  width:42px;
  height:42px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.28);
  background:linear-gradient(135deg, rgba(99,102,241,.18), rgba(59,130,246,.12));
  flex:0 0 auto;
}
html.dark body.theme-laravel .theme-chip,
html[data-theme="dark"] body.theme-laravel .theme-chip{border-color:rgba(51,65,85,.75)}

body.theme-laravel .theme-name{font-weight:1000;color:rgba(15,23,42,.90)}
html.dark body.theme-laravel .theme-name,
html[data-theme="dark"] body.theme-laravel .theme-name{color:rgba(226,232,240,.92)}


/* 15) Receipt (print_student_receipt) small helpers */
body.theme-laravel .receipt-url{
  margin-top:10px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  direction:ltr;
  unicode-bidi:plaintext;
  background:rgba(15,23,42,.03);
  border:1px dashed rgba(148,163,184,.45);
  padding:8px 10px;
  border-radius:14px;
  word-break:break-word;
}
html.dark body.theme-laravel .receipt-url,
html[data-theme="dark"] body.theme-laravel .receipt-url{background:rgba(255,255,255,.06);border-color:rgba(51,65,85,.75)}


/* =========================================================
   16) Extra UI polish (texts + measurements + column filters)
   ========================================================= */

/* Better typography defaults (light mode) */
body.theme-laravel{
  font-family: "Cairo", system-ui, -apple-system, Segoe UI, Roboto, Tahoma, Arial, sans-serif;
  font-size:15px;
  line-height:1.65;
  text-rendering:optimizeLegibility;
}

/* Make muted text less "غامض" */
body.theme-laravel .muted{color:rgba(51,65,85,.92)}
html.dark body.theme-laravel .muted,
html[data-theme="dark"] body.theme-laravel .muted{color:rgba(148,163,184,.92)}

/* Stat cards: support both (.k/.v) and (.label/.value) markup */
body.theme-laravel .stat .label{font-size:12px;color:rgba(71,85,105,.88);font-weight:1000}
html.dark body.theme-laravel .stat .label,
html[data-theme="dark"] body.theme-laravel .stat .label{color:rgba(148,163,184,.92)}

body.theme-laravel .stat .value{
  margin-top:6px;
  font-size:18px;
  font-weight:1000;
  white-space:nowrap;
  direction:ltr;
  unicode-bidi:plaintext;
}

/* Tables: cleaner in light mode (remove dark background from base table styles) */
body.theme-laravel .table-wrap table{background:transparent;border:none}
body.theme-laravel .table-wrap th{background:rgba(241,245,249,.92)}
body.theme-laravel .table-wrap th,
body.theme-laravel .table-wrap th,
body.theme-laravel .table-wrap td{border-color:var(--ui-table-border, rgba(148,163,184,.22))}

/* ✅ ألوان tbody (قابلة للتعديل من الإعدادات عبر CSS Variables) */
body.theme-laravel .table-wrap tbody td{color:var(--ui-table-text, inherit)}
body.theme-laravel .table-wrap tbody tr td{background:var(--ui-table-row-odd, transparent)}
body.theme-laravel .table-wrap tbody tr:nth-child(even) td{background:var(--ui-table-row-even, rgba(248,250,252,.55))}
body.theme-laravel .table-wrap tbody tr:hover td{background:var(--ui-table-row-hover, rgba(226,232,240,.55))}

html.dark body.theme-laravel .table-wrap th,
html[data-theme="dark"] body.theme-laravel .table-wrap th{background:rgba(15,23,42,.55)}
html.dark body.theme-laravel .table-wrap tbody tr:nth-child(even) td,
html[data-theme="dark"] body.theme-laravel .table-wrap tbody tr:nth-child(even) td{background:var(--ui-table-row-even, rgba(2,6,23,.18))}

/* Action buttons: wrap nicely (fix long vertical column) */
body.theme-laravel .table-wrap td .actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
@media (max-width: 520px){
  body.theme-laravel .table-wrap td .actions{min-width:unset;justify-content:flex-start}
}

/* Column-style filters row (inside table head) */
body.theme-laravel .table-wrap .table-filters th{
  background:rgba(255,255,255,.78);
  padding:10px;
}
html.dark body.theme-laravel .table-wrap .table-filters th,
html[data-theme="dark"] body.theme-laravel .table-wrap .table-filters th{background:rgba(2,6,23,.28)}

body.theme-laravel .tf{
  display:flex;
  gap:8px;
  align-items:center;
}
body.theme-laravel .tf.stack{flex-direction:column;align-items:stretch}
body.theme-laravel .tf .btn{white-space:nowrap}
body.theme-laravel .tf input,
body.theme-laravel .tf select{
  height:38px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.32);
  background:rgba(255,255,255,.90);
  padding:8px 10px;
  font-size:13px;
}
html.dark body.theme-laravel .tf input,
html.dark body.theme-laravel .tf select,
html[data-theme="dark"] body.theme-laravel .tf input,
html[data-theme="dark"] body.theme-laravel .tf select{background:rgba(2,6,23,.45);border-color:rgba(51,65,85,.75);color:rgba(226,232,240,.92)}

/* Mobile header measurements (fix title breaking into multiple lines) */
@media (max-width: 720px){
  body.theme-laravel .top-search{display:none}
  body.theme-laravel .topbar{padding:10px 12px;border-radius:16px;gap:10px}
  body.theme-laravel .topbar-titles{min-width:0;flex:1}
  body.theme-laravel .top-title{font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.theme-laravel .breadcrumbs,
  body.theme-laravel .top-sub{display:none}
  body.theme-laravel .user-menu-name{display:none}
}

/* User dropdown: keep it usable on mobile */
@media (max-width: 520px){
  body.theme-laravel .user-menu-dd{
    position:fixed;
    top:72px;
    inset-inline-start:12px;
    inset-inline-end:12px;
    width:auto;
    max-width:none;
    border-radius:18px;
  }
}


/* =========================================================
   Theme Laravel — Classic Admin (DataTables-like)
   Requested: "اريد مثل هذا منظم وحجم الخط مثله"
   - Applies to ALL pages while theme-laravel is active
   - Light mode only (keeps Dark mode styling intact)
   ========================================================= */

html:not(.dark):not([data-theme="dark"]) body.theme-laravel{
  /* Global typography */
  font-size:14px;
  line-height:1.55;

  /* Classic admin background (subtle grey like many admin panels) */
  background:#f3f5f7;
  background-attachment:initial;
}

/* Layout spacing a bit tighter (closer to classic admin) */
html:not(.dark):not([data-theme="dark"]) body.theme-laravel.authed .shell{
  padding:12px;
  gap:12px;
}

/* Sidebar / Topbar: cleaner + less rounded */
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .sidebar{
  border-radius:12px;
  background-color:#fff;
  border-color:rgba(203,213,225,.85);
  box-shadow:0 1px 2px rgba(2,6,23,.06);
}

html:not(.dark):not([data-theme="dark"]) body.theme-laravel .topbar{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(203,213,225,.75);
  border-radius:12px;
  box-shadow:0 1px 2px rgba(2,6,23,.05);
  backdrop-filter:none;
  padding:12px 14px;
}

html:not(.dark):not([data-theme="dark"]) body.theme-laravel .top-title{font-size:20px}
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .top-sub{font-size:12px;color:rgba(100,116,139,.90)}
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .breadcrumbs{font-size:12px;color:rgba(100,116,139,.85)}

/* Cards: classic white with light border */
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .card,
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .stat,
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .kpi,
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .auth-card{
  background-color:#fff;
  border:1px solid rgba(203,213,225,.80);
  border-radius:12px;
  box-shadow:0 1px 2px rgba(2,6,23,.05);
}
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .card{padding:16px}

/* Inputs: smaller like DataTables */
html:not(.dark):not([data-theme="dark"]) body.theme-laravel input,
html:not(.dark):not([data-theme="dark"]) body.theme-laravel select,
html:not(.dark):not([data-theme="dark"]) body.theme-laravel textarea{
  border-radius:8px;
  padding:8px 10px;
  font-size:13.5px;
}
html:not(.dark):not([data-theme="dark"]) body.theme-laravel input,
html:not(.dark):not([data-theme="dark"]) body.theme-laravel select{height:36px}

/* Top search (header) */
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .top-search-input{
  height:38px;
  border-radius:10px;
  font-size:13.5px;
}

/* Buttons: compact like the screenshot */
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .btn{
  border-radius:8px;
  padding:7px 10px;
  font-size:13px;
  font-weight:800;
}
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .btn.sm{padding:6px 9px;font-size:12.5px}

/* Tables: DataTable-like */
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .table-wrap{
  border-radius:12px;
  background:#fff;
  border-color:rgba(203,213,225,.85);
}

html:not(.dark):not([data-theme="dark"]) body.theme-laravel .table-wrap table{
  background:transparent;
}

html:not(.dark):not([data-theme="dark"]) body.theme-laravel .table-wrap th,
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .table-wrap td{
  font-size:13px;
  padding:10px 10px;
  vertical-align:middle;
  border-color:var(--ui-table-border, rgba(203,213,225,.55));
}

html:not(.dark):not([data-theme="dark"]) body.theme-laravel .table-wrap th{
  background:#f8fafc;
  color:#334155;
  font-weight:900;
  border-bottom:1px solid rgba(203,213,225,.90);
}

html:not(.dark):not([data-theme="dark"]) body.theme-laravel .table-wrap tbody tr td{background:var(--ui-table-row-odd, #ffffff)}
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .table-wrap tbody tr:nth-child(even) td{background:var(--ui-table-row-even, #fcfcfd)}
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .table-wrap tbody tr:hover td{background:var(--ui-table-row-hover, #f1f5f9)}

/* Sticky header stays but match the classic background */
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .table-wrap thead th{background:#f8fafc}

/* Filters row inside the header (if present) */
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .table-wrap .table-filters th{
  background:#fff;
  padding:8px 10px;
  border-bottom:1px solid rgba(203,213,225,.55);
}

html:not(.dark):not([data-theme="dark"]) body.theme-laravel .tf input,
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .tf select{
  height:34px;
  border-radius:8px;
  padding:6px 8px;
  font-size:13px;
  background:#fff;
  border-color:rgba(203,213,225,.85);
}

/* Toolbars used by ListView pages */
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .toolbar{
  background:#fff;
  border:1px solid rgba(203,213,225,.80);
  border-radius:12px;
}

/* Reduce excessive rounding on pills/chips in light mode */
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .pill,
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .chip{
  border-radius:999px;
}


/* =========================================================
   Green Table Header + Sort Icons (Requested)
   - Matches the screenshot (light green header + small sort arrows)
   - Removes legacy in-table filter row (moved to toolbar)
   ========================================================= */

html:not(.dark):not([data-theme="dark"]) body.theme-laravel .table-wrap table thead tr:first-child th{
  background:#e0efd8 !important;
  color:#2f3b2f !important;
  border-bottom:1px solid rgba(114,129,105,.55) !important;
  border-inline-end:1px solid rgba(114,129,105,.25) !important;
}
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .table-wrap table thead tr:first-child th:last-child{
  border-inline-end:none !important;
}

html:not(.dark):not([data-theme="dark"]) body.theme-laravel .table-wrap table thead tr:first-child th{
  position:sticky;
  top:0;
  z-index:5;
  padding-top:9px;
  padding-bottom:9px;
  padding-inline-end:28px;
}

html:not(.dark):not([data-theme="dark"]) body.theme-laravel .table-wrap table thead tr:first-child th::after{
  content:"";
  position:absolute;
  inset-inline-end:10px;
  top:50%;
  transform:translateY(-50%);
  width:12px;
  height:14px;
  opacity:.55;
  background-repeat:no-repeat;
  background-size:12px 14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14'%3E%3Cpath fill='%2392A18F' d='M6 2l3 4H3z'/%3E%3Cpath fill='%2392A18F' d='M6 12l-3-4h6z'/%3E%3C/svg%3E");
}

html:not(.dark):not([data-theme="dark"]) body.theme-laravel .table-wrap table thead tr:first-child th.no-sort::after{
  display:none;
}
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .table-wrap table thead tr:first-child th.no-sort{
  padding-inline-end:10px;
}

/* Hide legacy filter row inside table head (old filters) */
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .table-wrap .table-filters{
  display:none;
}

/* Table toolbar above the table (DataTables-like controls) */
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .table-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin:12px 0;
  padding:10px;
  background:#fff;
  border:1px solid rgba(203,213,225,.80);
  border-radius:12px;
}
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .table-toolbar .tt-group{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .table-toolbar .tt-right{
  margin-inline-start:auto;
}

html:not(.dark):not([data-theme="dark"]) body.theme-laravel .table-toolbar input,
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .table-toolbar select{
  height:34px;
  border-radius:8px;
  padding:6px 8px;
  font-size:13px;
  border:1px solid rgba(203,213,225,.85);
  background:#fff;
}
html:not(.dark):not([data-theme="dark"]) body.theme-laravel .table-toolbar input{
  min-width:220px;
}

@media (max-width:520px){
  html:not(.dark):not([data-theme="dark"]) body.theme-laravel .table-toolbar input{min-width:160px;width:100%}
}

/* Dark theme: Table Toolbar */
html.dark body.theme-laravel .table-toolbar,
html[data-theme="dark"] body.theme-laravel .table-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin:12px 0;
  padding:10px;
  background:rgba(2,6,23,.55);
  border:1px solid rgba(51,65,85,.85);
  border-radius:12px;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
html.dark body.theme-laravel .table-toolbar .tt-group,
html[data-theme="dark"] body.theme-laravel .table-toolbar .tt-group{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
html.dark body.theme-laravel .table-toolbar .tt-right,
html[data-theme="dark"] body.theme-laravel .table-toolbar .tt-right{
  margin-inline-start:auto;
}
html.dark body.theme-laravel .table-toolbar input,
html.dark body.theme-laravel .table-toolbar select,
html[data-theme="dark"] body.theme-laravel .table-toolbar input,
html[data-theme="dark"] body.theme-laravel .table-toolbar select{
  height:34px;
  border-radius:8px;
  padding:6px 8px;
  font-size:13px;
  border:1px solid rgba(51,65,85,.85);
  background-color:rgba(2,6,23,.40);
  color:#e5e7eb;
}
html.dark body.theme-laravel .table-toolbar input,
html[data-theme="dark"] body.theme-laravel .table-toolbar input{
  min-width:220px;
}
@media (max-width:520px){
  html.dark body.theme-laravel .table-toolbar input,
  html[data-theme="dark"] body.theme-laravel .table-toolbar input{min-width:160px;width:100%}
}

/* =========================================================
   Responsive Tables & Forms (100%)
   - Horizontal scroll when needed (avoid squeezed columns)
   - Mobile card mode for wide tables (no horizontal scrolling)
   - More consistent spacing for small screens
   ========================================================= */

/* A) Base: let tables grow to content so .table-wrap can scroll */
body.theme-laravel .table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
body.theme-laravel .table-wrap table{
  width:max-content;
  min-width:100%;
}

/* Keep headers tidy, avoid wrapping that makes rows too tall */
body.theme-laravel .table-wrap th{
  white-space:nowrap;
}

/* Cells: default to a single line (DataTables-like) + safe truncation */
body.theme-laravel .table-wrap td{
  white-space:nowrap;
  max-width:420px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ✅ Fix: dropdown menus inside tables were being clipped
   because the responsive table rule above uses overflow:hidden on every <td>.
   Any cell that contains an actions dropdown must allow overflow to be visible. */
body.theme-laravel .table-wrap td.actions-td{
  overflow:visible !important;
  text-overflow:clip;
  position:relative;
  z-index:5;
}
body.theme-laravel .table-wrap td.actions-td details[open]{
  z-index:999;
}
body.theme-laravel .table-wrap td.actions-td .dd-menu{
  z-index:999;
}
/* (Optional) if you use Bootstrap/other dropdown menus inside tables */
body.theme-laravel .table-wrap td.actions-td .dropdown-menu{
  z-index:9999;
}

/* Scrollbar styling (x-axis) */
body.theme-laravel .table-wrap::-webkit-scrollbar{height:10px}
body.theme-laravel .table-wrap::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.35);
  border-radius:999px;
}
html.dark body.theme-laravel .table-wrap::-webkit-scrollbar-thumb,
html[data-theme="dark"] body.theme-laravel .table-wrap::-webkit-scrollbar-thumb{background:rgba(148,163,184,.22)}

/* B) Mobile: make form rows stack nicely */
@media (max-width: 600px){
  body.theme-laravel.authed .shell{padding:12px;gap:12px}
  body.theme-laravel .card{padding:14px;border-radius:16px}
  body.theme-laravel .row{gap:10px}
  body.theme-laravel .row .field{min-width:100%}
  body.theme-laravel .grid{gap:10px}
  body.theme-laravel input,
  body.theme-laravel select,
  body.theme-laravel textarea{font-size:14px}
}

/* C) Mobile Card Mode (for wide tables):
   JS adds .rt-card to table + .rt-card-wrap to wrapper */
@media (max-width: 600px){
  body.theme-laravel .table-wrap.rt-card-wrap{
    overflow:visible;
    background:transparent;
    border:none;
    border-radius:0;
  }

  body.theme-laravel .table-wrap.rt-card-wrap table{
    width:100% !important;
    min-width:0 !important;
  }

  body.theme-laravel table.rt-card thead{display:none}

  body.theme-laravel table.rt-card,
  body.theme-laravel table.rt-card tbody,
  body.theme-laravel table.rt-card tr,
  body.theme-laravel table.rt-card td{
    display:block;
    width:100%;
  }

  body.theme-laravel table.rt-card tr{
    margin:0 0 12px 0;
    border:1px solid rgba(203,213,225,.90);
    border-radius:14px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 6px 18px rgba(2,6,23,.06);
  }
  html.dark body.theme-laravel table.rt-card tr,
  html[data-theme="dark"] body.theme-laravel table.rt-card tr{
    border-color:rgba(51,65,85,.75);
    background:rgba(2,6,23,.55);
    box-shadow:0 18px 60px rgba(0,0,0,.35);
  }

  body.theme-laravel table.rt-card td{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    border-bottom:1px solid rgba(203,213,225,.65);
    white-space:normal;
    max-width:none;
    overflow:visible;
    text-overflow:clip;
  }
  html.dark body.theme-laravel table.rt-card td,
  html[data-theme="dark"] body.theme-laravel table.rt-card td{border-bottom-color:rgba(51,65,85,.70)}

  body.theme-laravel table.rt-card td:last-child{border-bottom:none}

  body.theme-laravel table.rt-card td::before{
    content:attr(data-label);
    flex:0 0 44%;
    max-width:44%;
    font-weight:1000;
    color:rgba(71,85,105,.90);
    white-space:normal;
  }
  html.dark body.theme-laravel table.rt-card td::before,
  html[data-theme="dark"] body.theme-laravel table.rt-card td::before{color:rgba(148,163,184,.92)}

  /* Colspan helper (e.g. "لا توجد نتائج") */
  body.theme-laravel table.rt-card td[colspan]{
    justify-content:center;
    text-align:center;
  }
  body.theme-laravel table.rt-card td[colspan]::before{display:none}

  /* Numeric cells: keep numbers LTR but labels RTL */
  body.theme-laravel table.rt-card td.num{direction:ltr;text-align:left}
  body.theme-laravel table.rt-card td.num::before{direction:rtl;text-align:right}

  /* Actions: keep buttons readable */
  body.theme-laravel table.rt-card td .actions{justify-content:flex-start}
}

/* Print: always show classic table (no card mode) */
@media print{
  body.theme-laravel .table-wrap.rt-card-wrap{overflow:visible !important;border:1px solid rgba(203,213,225,.85) !important;border-radius:0 !important}
  body.theme-laravel table.rt-card{display:table !important}
  body.theme-laravel table.rt-card thead{display:table-header-group !important}
  body.theme-laravel table.rt-card tbody{display:table-row-group !important}
  body.theme-laravel table.rt-card tr{display:table-row !important;box-shadow:none !important;background:#fff !important}
  body.theme-laravel table.rt-card td{display:table-cell !important;border-bottom:1px solid rgba(203,213,225,.65) !important;white-space:normal !important}
  body.theme-laravel table.rt-card td::before{content:none !important}
}


/* =========================================================
   v16 — Mobile responsiveness fixes
   - Better Additions Fast actions on phones
   - Avoid cards mode for .listview (Excel-like tables)
   - Remove fixed table heights on very small screens
   ========================================================= */

@media (max-width: 600px){
  /* Avoid nested scroll + awkward inner heights on mobile */
  body.theme-laravel .table-wrap{max-height:none !important}

  /* Additions Fast (List tab): hide footer on mobile to focus on the table */
  .fast-additions[data-tab="list"] .fast-footer{display:none !important}

  /* Additions Fast: action buttons should be 2-cols grid (stack on very small screens) */
  .fast-additions .fast-footer .fast-actions{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    align-items:stretch;
  }
  .fast-additions .fast-footer .fast-actions .btn,
  .fast-additions .fast-footer .fast-actions a.btn{
    width:100%;
    justify-content:center;
    text-align:center;
  }
  .fast-additions .fast-footer .fast-actions .kbd-hint{
    grid-column:1 / -1;
    margin:0 !important;
    text-align:center;
    line-height:1.4;
    font-size:12px;
  }
}

@media (max-width: 380px){
  .fast-additions .fast-footer .fast-actions{grid-template-columns:1fr}
}


/* =========================================================
   v17 — UI polish requested
   - Fix dashboard cards colors in light theme
   - Make batches list behave like a dropdown
   - Beautify notifications layout
   - Improve Additions Fast toolbar/tabs
   ========================================================= */

/* 1) Dashboard metrics — make them colorful in Laravel (light) theme */
body.theme-laravel .metrics .metric{
  --accent-rgb: var(--v4-primary-rgb);
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(var(--accent-rgb), .22);
  background:
    radial-gradient(420px 180px at 0% 0%, rgba(var(--accent-rgb), .14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.86));
  box-shadow:0 10px 26px rgba(2,6,23,.06);
}
body.theme-laravel .metrics .metric::after{
  content:"";
  position:absolute;
  inset:-60px -80px auto auto;
  width:220px;
  height:220px;
  background:radial-gradient(circle at 30% 30%, rgba(var(--accent-rgb), .22), transparent 65%);
  transform:rotate(12deg);
  pointer-events:none;
}
body.theme-laravel .metrics .metric .m-ic{
  background:rgba(var(--accent-rgb), .14);
  border:1px solid rgba(var(--accent-rgb), .25);
  box-shadow:0 14px 35px rgba(2,6,23,.08);
}
body.theme-laravel .metrics .metric .m-val{color:rgba(15,23,42,.95);font-size:24px}
body.theme-laravel .metrics .metric .m-sub{color:rgba(71,85,105,.92)}

/* accent colors */
body.theme-laravel .metrics .m-green{--accent-rgb: 16,185,129}
body.theme-laravel .metrics .m-red{--accent-rgb: 239,68,68}
body.theme-laravel .metrics .m-blue{--accent-rgb: 59,130,246}
body.theme-laravel .metrics .m-orange{--accent-rgb: 245,158,11}
body.theme-laravel .metrics .m-purple{--accent-rgb: 168,85,247}

html.dark body.theme-laravel .metrics .metric,
html[data-theme="dark"] body.theme-laravel .metrics .metric{
  background:
    radial-gradient(420px 180px at 0% 0%, rgba(var(--accent-rgb), .18), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,.72), rgba(2,6,23,.46));
  border-color:rgba(var(--accent-rgb), .28);
  box-shadow:0 22px 60px rgba(0,0,0,.35);
}
html.dark body.theme-laravel .metrics .metric .m-val,
html[data-theme="dark"] body.theme-laravel .metrics .metric .m-val{color:rgba(226,232,240,.96)}


/* 2) Batches quick list — dropdown behavior (Laravel theme) */
body.theme-laravel .batch-quick{position:relative}
html.js body.theme-laravel .batch-quick-list{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  right:0;
  z-index:90;
  max-height:360px;
  padding:8px;
  border-radius:18px;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(148,163,184,.35);
  box-shadow:0 24px 80px rgba(2,6,23,.14);
  overflow:auto;
  flex-direction:column;
  gap:8px;
}
html.js body.theme-laravel .batch-quick.open .batch-quick-list,
html.js body.theme-laravel .batch-quick:focus-within .batch-quick-list{display:flex}

html.dark html.js body.theme-laravel .batch-quick-list,
html[data-theme="dark"] html.js body.theme-laravel .batch-quick-list{
  background:rgba(2,6,23,.92);
  border-color:rgba(51,65,85,.85);
  box-shadow:0 30px 90px rgba(0,0,0,.45);
}


/* 3) Notifications — nicer compact layout */
body.theme-laravel .notif-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
body.theme-laravel .notif-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.32);
  background:rgba(255,255,255,.88);
  box-shadow:0 1px 2px rgba(2,6,23,.04);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
body.theme-laravel .notif-item:hover{transform:translateY(-1px);box-shadow:0 16px 50px rgba(2,6,23,.08);border-color:rgba(var(--v4-primary-rgb), .28)}
body.theme-laravel .notif-item.is-unread{
  border-color:rgba(var(--v4-primary-rgb), .35);
  background:linear-gradient(135deg, rgba(var(--v4-primary-rgb), .08), rgba(255,255,255,.90));
}
body.theme-laravel .notif-dot{
  width:42px;
  height:42px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background:rgba(100,116,139,.10);
  border:1px solid rgba(148,163,184,.25);
}
body.theme-laravel .notif-item.is-unread .notif-dot{background:rgba(var(--v4-primary-rgb),.14);border-color:rgba(var(--v4-primary-rgb), .25)}
body.theme-laravel .notif-content{min-width:0;flex:1}
body.theme-laravel .notif-head{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
body.theme-laravel .notif-title{font-weight:1000;color:rgba(15,23,42,.95);line-height:1.4}
body.theme-laravel .notif-time{font-size:12px;color:rgba(100,116,139,.92);direction:ltr;text-align:left;white-space:nowrap;margin-top:2px}
body.theme-laravel .notif-text{margin-top:8px;color:rgba(51,65,85,.92);line-height:1.9}
body.theme-laravel .notif-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
body.theme-laravel .notif-actions .btn{border-radius:999px}
body.theme-laravel .notif-badge-new{margin-inline-start:8px}

html.dark body.theme-laravel .notif-item,
html[data-theme="dark"] body.theme-laravel .notif-item{
  background:rgba(2,6,23,.55);
  border-color:rgba(51,65,85,.75);
  box-shadow:0 22px 60px rgba(0,0,0,.35);
}
html.dark body.theme-laravel .notif-item.is-unread,
html[data-theme="dark"] body.theme-laravel .notif-item.is-unread{
  background:linear-gradient(135deg, rgba(var(--v4-primary-rgb), .14), rgba(2,6,23,.62));
  border-color:rgba(var(--v4-primary-rgb), .30);
}
html.dark body.theme-laravel .notif-title,
html[data-theme="dark"] body.theme-laravel .notif-title{color:rgba(226,232,240,.96)}
html.dark body.theme-laravel .notif-text,
html[data-theme="dark"] body.theme-laravel .notif-text{color:rgba(203,213,225,.92)}


/* 4) Additions Fast — make the highlighted controls cleaner */
body.theme-laravel .fast-additions .toolbar{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(148,163,184,.32);
  box-shadow:0 10px 28px rgba(2,6,23,.06);
}
html.dark body.theme-laravel .fast-additions .toolbar,
html[data-theme="dark"] body.theme-laravel .fast-additions .toolbar{
  background:rgba(2,6,23,.55);
  border-color:rgba(51,65,85,.75);
  box-shadow:0 22px 60px rgba(0,0,0,.35);
}

body.theme-laravel .fast-additions .fast-tabs{
  background:rgba(100,116,139,.10);
  border:1px solid rgba(148,163,184,.32);
}
body.theme-laravel .fast-additions .fast-tab-btn{
  background:rgba(255,255,255,.85);
  border:1px solid rgba(148,163,184,.32);
  color:rgba(15,23,42,.92);
}
body.theme-laravel .fast-additions .fast-tab-btn.active{
  background:linear-gradient(135deg, rgba(var(--v4-primary-rgb), .98), rgba(var(--v4-primary2-rgb), .92));
  border-color:rgba(var(--v4-primary-rgb), .75);
  color:#fff;
  box-shadow:0 14px 40px rgba(var(--v4-primary-rgb), .18);
}
html.dark body.theme-laravel .fast-additions .fast-tab-btn,
html[data-theme="dark"] body.theme-laravel .fast-additions .fast-tab-btn{
  background:rgba(2,6,23,.45);
  border-color:rgba(51,65,85,.80);
  color:rgba(226,232,240,.95);
}

body.theme-laravel .fast-additions .chk{
  background:rgba(100,116,139,.08);
  border-color:rgba(148,163,184,.28);
}
html.dark body.theme-laravel .fast-additions .chk,
html[data-theme="dark"] body.theme-laravel .fast-additions .chk{
  background:rgba(255,255,255,.06);
  border-color:rgba(51,65,85,.75);
}

body.theme-laravel .fast-additions .lv-quick-links{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
  padding-top:10px;
  border-top:1px dashed rgba(148,163,184,.45);
}
html.dark body.theme-laravel .fast-additions .lv-quick-links,
html[data-theme="dark"] body.theme-laravel .fast-additions .lv-quick-links{border-top-color:rgba(51,65,85,.75)}

body.theme-laravel .fast-additions .lv-quick-links .lv-quick-label{
  font-weight:1000;
  color:rgba(100,116,139,.95);
}
html.dark body.theme-laravel .fast-additions .lv-quick-links .lv-quick-label,
html[data-theme="dark"] body.theme-laravel .fast-additions .lv-quick-links .lv-quick-label{color:rgba(148,163,184,.92)}

body.theme-laravel .fast-additions .lv-quick-links .btn{
  border-radius:999px;
}


/* =====================================================
   v2.1 UI Patch (2026-02-20)
   - تحسين شريط أدوات إضافة مفرد (ListView)
   - Toggle أجمل لإخفاء الأسعار
===================================================== */

body.theme-laravel .fast-additions .lv-toolbar-grid .lv-apply .btn,
body.theme-laravel .fast-additions .lv-toolbar-grid .lv-reset .btn,
body.theme-laravel .fast-additions .lv-toolbar-grid .lv-cols .btn{
  width:100%;
  height:42px;
  border-radius:14px;
}

/* Toggle: إخفاء الأسعار */
body.theme-laravel .fast-additions .lv-hide .toggle{
  position:relative;
  width:100%;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.32);
  background:rgba(100,116,139,.08);
  cursor:pointer;
  user-select:none;
}
html.dark body.theme-laravel .fast-additions .lv-hide .toggle,
html[data-theme="dark"] body.theme-laravel .fast-additions .lv-hide .toggle{
  background:rgba(255,255,255,.06);
  border-color:rgba(51,65,85,.75);
}

body.theme-laravel .fast-additions .lv-hide .toggle .toggle-label{
  font-weight:1000;
  color:rgba(15,23,42,.88);
}
html.dark body.theme-laravel .fast-additions .lv-hide .toggle .toggle-label,
html[data-theme="dark"] body.theme-laravel .fast-additions .lv-hide .toggle .toggle-label{
  color:rgba(226,232,240,.95);
}

body.theme-laravel .fast-additions .lv-hide .toggle input{
  position:absolute;
  width:1px;height:1px;
  opacity:0;
  pointer-events:none;
}

body.theme-laravel .fast-additions .lv-hide .toggle .toggle-track{
  width:44px;
  height:24px;
  border-radius:999px;
  background:rgba(15,23,42,.12);
  border:1px solid rgba(15,23,42,.18);
  position:relative;
  flex:0 0 auto;
  transition:all .2s ease;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
}
html.dark body.theme-laravel .fast-additions .lv-hide .toggle .toggle-track,
html[data-theme="dark"] body.theme-laravel .fast-additions .lv-hide .toggle .toggle-track{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.18);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}

body.theme-laravel .fast-additions .lv-hide .toggle .toggle-thumb{
  width:18px;
  height:18px;
  border-radius:999px;
  background:#fff;
  position:absolute;
  top:3px;
  left:3px;
  transition:all .2s ease;
  box-shadow:0 8px 18px rgba(2,6,23,.18);
}

body.theme-laravel .fast-additions .lv-hide .toggle input:checked + .toggle-track{
  background:rgba(34,197,94,.24);
  border-color:rgba(34,197,94,.45);
}
body.theme-laravel .fast-additions .lv-hide .toggle input:checked + .toggle-track .toggle-thumb{left:23px}

body.theme-laravel .fast-additions .lv-hide .toggle:focus-within{
  box-shadow:0 0 0 3px rgba(var(--v4-primary-rgb),.18);
}

/* =========================================================
   Responsive Patches (Student Tickets / Tabs)
   - Fix narrow layout on small screens
   - Ensure tabs never get clipped (scrollable on mobile)
========================================================= */

/* ✅ Student Shell container: always use full width on smaller screens */
@media (max-width:1024px){
  body.student .student-shell .container{
    max-width:100% !important;
    width:100% !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }
}
@media (max-width:640px){
  body.student .student-shell .container{
    padding-left:10px !important;
    padding-right:10px !important;
  }
}

/* ✅ Tabs (settings-tabs): on mobile make them horizontally scrollable instead of clipping */
@media (max-width:640px){
  body.theme-laravel .settings-tabs,
  body.theme-v4 .settings-tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  body.theme-laravel .settings-tabs::-webkit-scrollbar,
  body.theme-v4 .settings-tabs::-webkit-scrollbar{display:none}

  body.theme-laravel .st-tab,
  body.theme-v4 .st-tab{
    flex:0 0 auto;
    white-space:nowrap;
    padding:9px 12px;
    font-size:13px;
  }
}


/* =========================================================
   Theme: Shadcn/Orcish Dashboard
   - Colors: Green / Red / Blue
   - Supports: Dark + Light (نهاري)
   - الهدف: ستايل قريب جداً من Orcish Dashboard / shadcn/ui
========================================================= */

body.theme-shadcn{
  /* Base tokens (Light) */
  --radius: 0.625rem; /* 10px */

  --background: #ffffff;
  --foreground: #0c0a09;

  --card: #ffffff;
  --card-foreground: #0c0a09;

  --popover: #ffffff;
  --popover-foreground: #0c0a09;

  --secondary: #f5f5f4;
  --secondary-foreground: #1c1917;

  --muted: #f5f5f4;
  --muted-foreground: #78716c;

  --accent: #f5f5f4;
  --accent-foreground: #1c1917;

  --border: #e7e5e4;
  --input: #e7e5e4;

  --destructive: #e11d48;

  /* Sidebar */
  --sidebar: #fafaf9;
  --sidebar-foreground: #0c0a09;
  --sidebar-accent: #f5f5f4;
  --sidebar-accent-foreground: #1c1917;
  --sidebar-border: #e7e5e4;

  /* Charts used by dashboard page */
  --ring-base: rgba(0,0,0,.08);
  --chart-grid: rgba(0,0,0,.06);
  --chart-muted: rgba(12,10,9,.55);

  margin:0;
  font-family:'Cairo', Tahoma, Arial, sans-serif;
  background:var(--background);
  color:var(--foreground);
}

html.dark body.theme-shadcn,
html[data-theme="dark"] body.theme-shadcn{
  --background: #0c0a09;
  --foreground: #fafaf9;

  --card: #1c1917;
  --card-foreground: #fafaf9;

  --popover: #1c1917;
  --popover-foreground: #fafaf9;

  --secondary: #292524;
  --secondary-foreground: #fafaf9;

  --muted: #292524;
  --muted-foreground: #a8a29e;

  --accent: #292524;
  --accent-foreground: #fafaf9;

  --border: rgba(255,255,255,.10);
  --input: rgba(255,255,255,.15);

  --sidebar: #1c1917;
  --sidebar-foreground: #fafaf9;
  --sidebar-accent: #292524;
  --sidebar-accent-foreground: #fafaf9;
  --sidebar-border: rgba(255,255,255,.10);

  --ring-base: rgba(255,255,255,.10);
  --chart-grid: rgba(255,255,255,.10);
  --chart-muted: rgba(250,250,249,.55);
}

/* Accent themes (primary color) */
html.theme-green body.theme-shadcn{ --primary:#65a30d; --primary-foreground:#f7fee7; --ring: rgba(101,163,13,.35); }
html.theme-red body.theme-shadcn{ --primary:#e11d48; --primary-foreground:#fff1f2; --ring: rgba(225,29,72,.30); }
html.theme-blue body.theme-shadcn{ --primary:#2563eb; --primary-foreground:#eff6ff; --ring: rgba(37,99,235,.30); }

/* If no theme class found, default to Green */
html:not(.theme-green):not(.theme-red):not(.theme-blue) body.theme-shadcn{ --primary:#65a30d; --primary-foreground:#f7fee7; --ring: rgba(101,163,13,.35); }

/* ========= Layout ========= */
body.theme-shadcn.authed{ padding:16px; }
@media (max-width:640px){ body.theme-shadcn.authed{ padding:10px; } }

body.theme-shadcn .shell{
  background:var(--background);
  border:1px solid var(--border);
  border-radius: calc(var(--radius) + 6px);
  overflow:hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.20);
  min-height: calc(100vh - 32px);
}
html.dark body.theme-shadcn .shell{ box-shadow: 0 18px 60px rgba(0,0,0,.55); }
@media (max-width:640px){
  body.theme-shadcn .shell{ border-radius: calc(var(--radius) + 2px); min-height: calc(100vh - 20px); }
}

body.theme-shadcn .sidebar{
  width: 260px;
  background: var(--sidebar) !important;
  color: var(--sidebar-foreground) !important;
  border-left: 1px solid var(--sidebar-border) !important;
  padding: 14px;
  backdrop-filter: none;
}

body.theme-shadcn .sidebar .sb-brand{display:flex;align-items:center;gap:12px}
body.theme-shadcn .sidebar-logo{
  width:40px;height:40px;border-radius: calc(var(--radius) + 2px);
  background: var(--secondary);
  border:1px solid var(--border);
  box-shadow:none;
}
html.dark body.theme-shadcn .sidebar-logo{ background: rgba(255,255,255,.03); border-color: var(--border); }

body.theme-shadcn .sidebar-title{font-weight:900;font-size:14px;letter-spacing:.2px}
body.theme-shadcn .sidebar-sub{font-size:12px;color:var(--muted-foreground)}

body.theme-shadcn .nav-section-title{
  margin-top:14px;
  padding: 6px 10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--muted-foreground);
}

body.theme-shadcn .sidebar-nav{display:flex;flex-direction:column;gap:4px;margin-top:8px}

body.theme-shadcn .nav-item{
  border-radius: calc(var(--radius) + 2px);
  padding: 9px 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted-foreground);
  font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
body.theme-shadcn .nav-item:hover{
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}
body.theme-shadcn .nav-item .ni{
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: transparent;
  border: none;
  display:flex;align-items:center;justify-content:center;
  color: inherit;
}
body.theme-shadcn .nav-item .ni svg{width:18px;height:18px}

body.theme-shadcn .nav-item.active{
  background: var(--primary);
  color: var(--primary-foreground);
}
body.theme-shadcn .nav-item.active:hover{ background: var(--primary); color: var(--primary-foreground); }
body.theme-shadcn .nav-item.active .ni{ color: var(--primary-foreground); }

body.theme-shadcn .nav-badge{
  background: rgba(0,0,0,.06);
  border: 1px solid var(--border);
  color: var(--muted-foreground);
}
html.dark body.theme-shadcn .nav-badge{ background: rgba(255,255,255,.06); border-color: var(--border); color: var(--muted-foreground); }

body.theme-shadcn .sidebar-footer{padding-top:12px}
body.theme-shadcn .user-pill{border-radius: calc(var(--radius) + 4px); background: transparent; border:1px solid var(--border)}
body.theme-shadcn .sidebar-hint{color: var(--muted-foreground)}

/* Topbar */
body.theme-shadcn .topbar{
  background: rgba(255,255,255,.70) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 14px;
}
html.dark body.theme-shadcn .topbar{
  background: rgba(12,10,9,.60) !important;
  border-bottom: 1px solid var(--border) !important;
}
body.theme-shadcn .top-title{font-size:16px;font-weight:900}
body.theme-shadcn .top-sub,
body.theme-shadcn .breadcrumbs{color: var(--muted-foreground)}

body.theme-shadcn .top-search{display:block;max-width:520px}
@media (max-width:900px){ body.theme-shadcn .top-search{display:none} }

body.theme-shadcn .top-search-input{
  height: 36px;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid var(--input);
  background: var(--background);
  color: var(--foreground);
  outline: none;
  padding: 0 12px;
  box-shadow:none;
}
body.theme-shadcn .top-search-input:focus{ box-shadow: 0 0 0 3px var(--ring); border-color: transparent; }

/* Icon buttons (topbar) */
body.theme-shadcn .icon-btn{
  width: 32px;
  height: 32px;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid var(--input);
  background: transparent;
  color: var(--foreground);
  box-shadow:none;
}
body.theme-shadcn .icon-btn:hover{ background: var(--accent); }
body.theme-shadcn .icon-btn svg{ width:18px; height:18px; }

/* Mode icons */
body.theme-shadcn .mode-ico{display:none}
html.dark body.theme-shadcn .mode-ico.sun{display:block}
html:not(.dark) body.theme-shadcn .mode-ico.moon{display:block}

/* Theme picker (Select a theme) */
body.theme-shadcn .theme-picker{ position:relative; }
body.theme-shadcn .tp-trigger{
  height: 32px;
  display:flex;align-items:center;gap:8px;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid var(--input);
  background: transparent;
  color: var(--foreground);
  padding: 0 10px;
  cursor:pointer;
}
body.theme-shadcn .tp-trigger:hover{ background: var(--accent); }
body.theme-shadcn .tp-label{ font-size:12px; color: var(--muted-foreground); }
@media (max-width:640px){ body.theme-shadcn .tp-label{ display:none; } }
body.theme-shadcn .tp-value{ font-size:12px; font-weight:700; }
body.theme-shadcn .tp-chev{ font-size:12px; opacity:.7; margin-left:2px; }

body.theme-shadcn .tp-menu{
  position:absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid var(--border);
  background: var(--popover);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  padding: 6px;
  display:none;
  z-index: 999;
}
html.dark body.theme-shadcn .tp-menu{ box-shadow: 0 22px 80px rgba(0,0,0,.65); }
body.theme-shadcn .theme-picker.open .tp-menu{ display:block; }

body.theme-shadcn .tp-item{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
  padding: 9px 10px;
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid transparent;
  background: transparent;
  color: var(--foreground);
  cursor:pointer;
  font-size: 13px;
}
body.theme-shadcn .tp-item:hover{ background: var(--accent); }
body.theme-shadcn .tp-item[aria-checked="true"]{ background: var(--accent); border-color: var(--border); }
body.theme-shadcn .tp-item[aria-checked="true"]:after{ content: '✓'; opacity:.85; }

/* Cards */
body.theme-shadcn .card{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: calc(var(--radius) + 6px);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
html.dark body.theme-shadcn .card{ box-shadow: 0 10px 30px rgba(0,0,0,.35); }

/* Generic form controls (for pages that have plain inputs) */
body.theme-shadcn input:not([type=checkbox]):not([type=radio]):not([type=file]),
body.theme-shadcn select,
body.theme-shadcn textarea{
  background: var(--background);
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) + 2px);
  padding: 9px 12px;
  color: var(--foreground);
  outline:none;
  width:100%;
}
body.theme-shadcn input:focus,
body.theme-shadcn select:focus,
body.theme-shadcn textarea:focus{ box-shadow: 0 0 0 3px var(--ring); border-color: transparent; }

body.theme-shadcn label{ color: var(--muted-foreground); font-weight:700; }

/* Buttons */
body.theme-shadcn .btn{
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid var(--input);
  background: transparent;
  color: var(--foreground);
  padding: 9px 12px;
  font-weight:800;
}
body.theme-shadcn .btn:hover{ background: var(--accent); }
body.theme-shadcn .btn.primary{
  background: var(--primary);
  border-color: transparent;
  color: var(--primary-foreground);
}
body.theme-shadcn .btn.primary:hover{ filter: brightness(.95); }

/* Tables */
body.theme-shadcn table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 6px);
  overflow:hidden;
  background: var(--card);
}
body.theme-shadcn thead th{
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 900;
}
body.theme-shadcn tbody td{ border-top:1px solid var(--border); }
body.theme-shadcn tbody tr:hover{ background: var(--accent); }

/* Dashboard: use the same card padding rhythm */
body.theme-shadcn .dash-head{gap:14px}
body.theme-shadcn .metrics .metric,
body.theme-shadcn .chart-card{border-radius: calc(var(--radius) + 6px)}

/* Make container spacing consistent (override tailwind max-w-7xl) */
body.theme-shadcn .main .container{max-width:none !important; padding:16px !important;}
body.theme-shadcn .student-shell .container{max-width:none !important; padding:16px !important;}



/* =========================================================
   Theme Shadcn — Orcish Dashboard polish
   - Makes the admin and student interfaces visually closer
     to Orcish Dashboard while keeping the existing HTML.
   ========================================================= */

body.theme-shadcn{
  --radius:10px;
  --orc-shell-radius:20px;
  --orc-sidebar-width:264px;
  --orc-bg:#f8fafc;
  --orc-panel:#ffffff;
  --orc-panel-2:#f5f7fb;
  --orc-line:rgba(15,23,42,.09);
  --orc-soft:rgba(15,23,42,.035);
  --orc-soft-2:rgba(15,23,42,.055);
  --orc-shadow:0 10px 26px rgba(15,23,42,.07);
  --orc-shadow-lg:0 18px 45px rgba(15,23,42,.10);
  --background:#fafaf9;
  --foreground:#09090b;
  --card:#ffffff;
  --card-foreground:#09090b;
  --popover:#ffffff;
  --popover-foreground:#09090b;
  --secondary:#f5f5f4;
  --secondary-foreground:#0c0a09;
  --muted:#f5f5f4;
  --muted-foreground:#78716c;
  --accent:#f5f5f4;
  --accent-foreground:#0c0a09;
  --border:rgba(12,10,9,.09);
  --input:rgba(12,10,9,.11);
  --ring-base:rgba(12,10,9,.10);
  --chart-grid:rgba(12,10,9,.08);
  --chart-muted:rgba(87,83,78,.70);
  --sidebar:#111111;
  --sidebar-foreground:#fafaf9;
  --sidebar-accent:#18181b;
  --sidebar-accent-foreground:#fafaf9;
  --sidebar-border:rgba(255,255,255,.08);
  --text:var(--foreground);
  --muted:var(--muted-foreground);
  --muted2:rgba(120,113,108,.75);
  --card2:var(--card);
  --shadow:var(--orc-shadow);
  --shadow2:var(--orc-shadow-lg);
  color:var(--foreground);
  background:var(--orc-bg);
  font-family:"Cairo","Tajawal","Noto Kufi Arabic",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

html.dark body.theme-shadcn,
html[data-theme="dark"] body.theme-shadcn{
  --orc-bg:#050506;
  --orc-panel:#0b0b0e;
  --orc-panel-2:#101014;
  --orc-line:rgba(255,255,255,.09);
  --orc-soft:rgba(255,255,255,.03);
  --orc-soft-2:rgba(255,255,255,.055);
  --orc-shadow:0 14px 34px rgba(0,0,0,.30);
  --orc-shadow-lg:0 24px 60px rgba(0,0,0,.45);
  --background:#09090b;
  --foreground:#fafaf9;
  --card:#0f0f12;
  --card-foreground:#fafaf9;
  --popover:#0f0f12;
  --popover-foreground:#fafaf9;
  --secondary:#18181b;
  --secondary-foreground:#fafaf9;
  --muted:#18181b;
  --muted-foreground:#a1a1aa;
  --accent:#18181b;
  --accent-foreground:#fafaf9;
  --border:rgba(255,255,255,.09);
  --input:rgba(255,255,255,.12);
  --ring-base:rgba(255,255,255,.08);
  --chart-grid:rgba(255,255,255,.08);
  --chart-muted:rgba(212,212,216,.72);
  --sidebar:#09090b;
  --sidebar-foreground:#fafaf9;
  --sidebar-accent:#16161a;
  --sidebar-accent-foreground:#fafaf9;
  --sidebar-border:rgba(255,255,255,.08);
  --text:var(--foreground);
  --muted:var(--muted-foreground);
  --muted2:rgba(161,161,170,.78);
  --card2:var(--card);
  color:var(--foreground);
  background:var(--orc-bg);
}

html.theme-default body.theme-shadcn{
  --primary:#111827;
  --primary-foreground:#fafaf9;
  --orc-primary-rgb:17,24,39;
  --ring:0 0 0 3px rgba(17,24,39,.18);
}
html.dark.theme-default body.theme-shadcn,
html[data-theme="dark"].theme-default body.theme-shadcn{
  --primary:#fafaf9;
  --primary-foreground:#09090b;
  --orc-primary-rgb:250,250,249;
  --ring:0 0 0 3px rgba(250,250,249,.18);
}
html.theme-blue body.theme-shadcn{
  --primary:#2563eb;
  --primary-foreground:#eff6ff;
  --orc-primary-rgb:37,99,235;
  --ring:0 0 0 3px rgba(37,99,235,.22);
}
html.theme-green body.theme-shadcn{
  --primary:#65a30d;
  --primary-foreground:#f7fee7;
  --orc-primary-rgb:101,163,13;
  --ring:0 0 0 3px rgba(101,163,13,.22);
}
html.theme-amber body.theme-shadcn,
html.theme-red body.theme-shadcn{
  --primary:#d97706;
  --primary-foreground:#fffbeb;
  --orc-primary-rgb:217,119,6;
  --ring:0 0 0 3px rgba(217,119,6,.22);
}
html:not(.theme-default):not(.theme-blue):not(.theme-green):not(.theme-amber):not(.theme-red) body.theme-shadcn{
  --primary:#65a30d;
  --primary-foreground:#f7fee7;
  --orc-primary-rgb:101,163,13;
  --ring:0 0 0 3px rgba(101,163,13,.22);
}

body.theme-shadcn a{color:inherit}
body.theme-shadcn.authed{padding:16px}
@media (max-width:640px){body.theme-shadcn.authed{padding:10px}}

body.theme-shadcn .shell,
body.theme-shadcn .student-shell{
  background:var(--background);
  border:1px solid var(--border);
  border-radius:var(--orc-shell-radius);
  overflow:hidden;
  box-shadow:var(--orc-shadow-lg);
}
body.theme-shadcn .shell{min-height:calc(100vh - 32px)}
body.theme-shadcn .student-shell{min-height:calc(100vh - 32px)}
@media (max-width:640px){
  body.theme-shadcn .shell,
  body.theme-shadcn .student-shell{min-height:calc(100vh - 20px)}
}
body.theme-shadcn .main{min-width:0;background:var(--background)}
body.theme-shadcn .content{background:var(--background)}
body.theme-shadcn .main .container,
body.theme-shadcn .student-shell .container{max-width:none !important;padding:18px !important}
@media (max-width:640px){
  body.theme-shadcn .main .container,
  body.theme-shadcn .student-shell .container{padding:12px !important}
}

body.theme-shadcn .sidebar{
  width:var(--orc-sidebar-width);
  flex:0 0 var(--orc-sidebar-width);
  background:var(--sidebar) !important;
  color:var(--sidebar-foreground) !important;
  border-left:1px solid var(--sidebar-border) !important;
  padding:16px 14px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  position:sticky;
  top:0;
  height:auto;
  min-height:calc(100vh - 32px);
  backdrop-filter:none;
  box-shadow:none;
}
body.theme-shadcn .sidebar::-webkit-scrollbar{width:10px}
body.theme-shadcn .sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:999px}
body.theme-shadcn .sidebar-brand{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px 10px}
body.theme-shadcn .sb-brand{display:flex;align-items:center;gap:12px;min-width:0}
body.theme-shadcn .sidebar-logo{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid var(--sidebar-border);
  color:var(--sidebar-foreground);
  box-shadow:none;
}
body.theme-shadcn .sidebar-title{font-size:14px;font-weight:900;letter-spacing:.01em}
body.theme-shadcn .sidebar-sub{font-size:11px;color:rgba(255,255,255,.56)}
body.theme-shadcn .sb-mini-btn{
  width:36px;height:36px;border-radius:10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--sidebar-border);
  background:rgba(255,255,255,.04);color:var(--sidebar-foreground);
}
body.theme-shadcn .sb-mini-btn:hover{background:rgba(255,255,255,.08)}
body.theme-shadcn .nav-section{margin-top:2px}
body.theme-shadcn .nav-section-title{
  margin-top:8px;
  padding:8px 10px 6px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.44);
}
body.theme-shadcn .sidebar-nav{display:flex;flex-direction:column;gap:4px;margin-top:4px}
body.theme-shadcn .nav-item{
  position:relative;
  display:flex;align-items:center;gap:10px;
  min-height:42px;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  color:rgba(244,244,245,.78);
  font-weight:700;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .12s ease;
}
body.theme-shadcn .nav-item:hover{background:rgba(255,255,255,.04);color:var(--sidebar-foreground)}
body.theme-shadcn .nav-item .ni{
  width:20px;height:20px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:inherit;font-size:0;
}
body.theme-shadcn .nav-item .ni svg{width:18px;height:18px;display:block}
body.theme-shadcn .nav-item .nt{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.theme-shadcn .nav-item.active{
  background:var(--primary);
  color:var(--primary-foreground);
  box-shadow:0 12px 20px rgba(var(--orc-primary-rgb),.18);
}
body.theme-shadcn .nav-item.active .ni{color:inherit}
body.theme-shadcn .nav-item.danger{color:rgba(254,202,202,.90)}
body.theme-shadcn .nav-item.danger:hover{background:rgba(239,68,68,.12);color:#fecaca}
body.theme-shadcn .nav-badge{
  margin-inline-start:auto;
  min-width:22px;height:20px;
  padding:0 7px;border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;font-size:11px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
}
body.theme-shadcn .nav-group{display:flex;flex-direction:column;gap:4px}
body.theme-shadcn .nav-group-toggle{width:100%;text-align:right;cursor:pointer}
body.theme-shadcn .nav-group-toggle .chev{margin-inline-start:auto;display:flex;align-items:center;justify-content:center;opacity:.65;transition:transform .15s ease}
body.theme-shadcn .nav-group.open .nav-group-toggle .chev{transform:rotate(180deg)}
body.theme-shadcn .nav-sub{display:none;flex-direction:column;gap:4px;padding:2px 0 0 14px}
body.theme-shadcn .nav-group.open .nav-sub{display:flex}
body.theme-shadcn .nav-sub-item{
  display:flex;align-items:center;gap:10px;
  min-height:38px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid transparent;
  color:rgba(244,244,245,.72);
  font-weight:700;
}
body.theme-shadcn .nav-sub-item:hover{background:rgba(255,255,255,.04);color:var(--sidebar-foreground)}
body.theme-shadcn .nav-sub-item.active{background:rgba(var(--orc-primary-rgb),.16);border-color:rgba(var(--orc-primary-rgb),.24);color:var(--sidebar-foreground)}
body.theme-shadcn .nav-sub-item .si{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:inherit}
body.theme-shadcn .nav-sub-item .si svg{width:16px;height:16px;display:block}
body.theme-shadcn .sidebar-footer{margin-top:auto;padding-top:10px}
body.theme-shadcn .user-pill{
  display:flex;align-items:center;gap:10px;
  padding:12px;border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--sidebar-border);
}
body.theme-shadcn .user-avatar,
body.theme-shadcn .user-menu-avatar{
  background:linear-gradient(135deg, hsl(var(--av-h,220) 72% 58%), hsl(calc(var(--av-h,220) + 32) 72% 48%));
  color:#fff;
  box-shadow:none;
}
body.theme-shadcn .user-avatar{
  width:38px;height:38px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
body.theme-shadcn .user-avatar span,
body.theme-shadcn .user-menu-avatar span{font-size:14px;font-weight:900;line-height:1}
body.theme-shadcn .user-name{font-size:13px;font-weight:800}
body.theme-shadcn .user-sub{font-size:11px;color:rgba(255,255,255,.56)}
body.theme-shadcn .sidebar-hint{margin-top:10px;font-size:11px;color:rgba(255,255,255,.42)}

body.theme-shadcn .topbar{
  position:sticky;top:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;
  background:rgba(255,255,255,.84) !important;
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border) !important;
  box-shadow:none;
}
html.dark body.theme-shadcn .topbar,
html[data-theme="dark"] body.theme-shadcn .topbar{background:rgba(9,9,11,.86) !important}
body.theme-shadcn .topbar-titles{display:flex;flex-direction:column;gap:4px;min-width:0}
body.theme-shadcn .top-title{font-size:18px;font-weight:900;line-height:1.2}
body.theme-shadcn .top-sub{font-size:12px;color:var(--muted-foreground)}
body.theme-shadcn .breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--muted-foreground)}
body.theme-shadcn .breadcrumbs .bc-sep{opacity:.5}
body.theme-shadcn .topbar-actions{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
body.theme-shadcn .top-search{display:block;flex:1;max-width:360px}
body.theme-shadcn .top-search-input{
  height:38px;border-radius:10px;
  border:1px solid var(--input);
  background:var(--background);
  color:var(--foreground);
  box-shadow:none;
  padding:0 12px;
}
body.theme-shadcn .top-search-input::placeholder{color:var(--muted-foreground)}
body.theme-shadcn .top-search-input:focus{border-color:transparent;box-shadow:var(--ring)}
body.theme-shadcn .icon-btn,
body.theme-shadcn .user-menu-btn,
body.theme-shadcn .tp-trigger{
  height:36px;
  border-radius:10px;
  border:1px solid var(--input);
  background:var(--background);
  color:var(--foreground);
  box-shadow:none;
}
html.dark body.theme-shadcn .icon-btn,
html.dark body.theme-shadcn .user-menu-btn,
html.dark body.theme-shadcn .tp-trigger,
html[data-theme="dark"] body.theme-shadcn .icon-btn,
html[data-theme="dark"] body.theme-shadcn .user-menu-btn,
html[data-theme="dark"] body.theme-shadcn .tp-trigger{background:rgba(255,255,255,.02)}
body.theme-shadcn .icon-btn{
  width:36px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
}
body.theme-shadcn .icon-btn:hover,
body.theme-shadcn .user-menu-btn:hover,
body.theme-shadcn .tp-trigger:hover{background:var(--accent)}
body.theme-shadcn .icon-btn svg{width:18px;height:18px;display:block}
body.theme-shadcn .sidebar-toggle{display:none}
body.theme-shadcn .icon-wrap{position:relative;display:inline-flex}
body.theme-shadcn .notif-badge{
  position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 6px;
  border-radius:999px;background:var(--primary);color:var(--primary-foreground);
  border:1px solid var(--background);font-size:10px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
}

body.theme-shadcn .theme-picker{position:relative}
body.theme-shadcn .tp-trigger{display:flex;align-items:center;gap:8px;padding:0 12px;cursor:pointer}
body.theme-shadcn .tp-label{font-size:12px;color:var(--muted-foreground)}
body.theme-shadcn .tp-value{font-size:13px;font-weight:800}
body.theme-shadcn .tp-chev{font-size:12px;opacity:.7}
body.theme-shadcn .tp-menu,
body.theme-shadcn .qa-dd,
body.theme-shadcn .user-menu-dd,
body.theme-shadcn .dd-menu{
  position:absolute;
  top:calc(100% + 8px);
  inset-inline-end:0;
  min-width:230px;
  padding:6px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--popover);
  color:var(--popover-foreground);
  box-shadow:var(--orc-shadow-lg);
  display:none;
  z-index:300;
}
body.theme-shadcn .theme-picker.open .tp-menu,
body.theme-shadcn .qa-menu.open .qa-dd,
body.theme-shadcn .user-menu.open .user-menu-dd{display:block}
body.theme-shadcn .tp-item,
body.theme-shadcn .qa-item,
body.theme-shadcn .user-menu-item{
  width:100%;
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
body.theme-shadcn .tp-item{justify-content:space-between}
body.theme-shadcn .tp-item:hover,
body.theme-shadcn .qa-item:hover,
body.theme-shadcn .user-menu-item:hover{background:var(--accent)}
body.theme-shadcn .tp-item[aria-checked="true"]{background:rgba(var(--orc-primary-rgb),.10);border-color:rgba(var(--orc-primary-rgb),.16)}
body.theme-shadcn .tp-item[aria-checked="true"]::after{content:"✓";font-weight:900;color:var(--primary)}
body.theme-shadcn .qa-menu{position:relative}
body.theme-shadcn .qa-item{justify-content:flex-start;text-decoration:none}
body.theme-shadcn .qa-ic,
body.theme-shadcn .umi-ic{
  width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--secondary);
  border:1px solid var(--border);
  flex:0 0 auto;
}
body.theme-shadcn .qa-ic svg,
body.theme-shadcn .umi-ic svg{width:16px;height:16px;display:block}
body.theme-shadcn .user-menu{position:relative}
body.theme-shadcn .user-menu-btn{
  display:flex;align-items:center;gap:10px;padding:0 10px;cursor:pointer;
}
body.theme-shadcn .user-menu-avatar{
  width:24px;height:24px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
body.theme-shadcn .user-menu-name{font-size:13px;font-weight:800;max-width:148px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.theme-shadcn .user-menu-chev{display:flex;align-items:center;justify-content:center;opacity:.65}
body.theme-shadcn .user-menu-chev svg{width:16px;height:16px;display:block}
body.theme-shadcn .user-menu-head{padding:10px 10px 8px}
body.theme-shadcn .user-menu-head .um-name{font-weight:900}
body.theme-shadcn .user-menu-head .um-sub{margin-top:4px;font-size:12px;color:var(--muted-foreground)}
body.theme-shadcn .user-menu-item{justify-content:flex-start;text-decoration:none}
body.theme-shadcn .user-menu-item.danger{color:#e11d48}
body.theme-shadcn .user-menu-item.danger:hover{background:rgba(225,29,72,.10);border-color:rgba(225,29,72,.16)}
body.theme-shadcn .user-menu-sep{height:1px;background:var(--border);margin:6px 0}
body.theme-shadcn .umi-badge{
  margin-inline-start:auto;
  min-width:20px;height:20px;padding:0 7px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(var(--orc-primary-rgb),.12);border:1px solid rgba(var(--orc-primary-rgb),.18);
  font-size:11px;font-weight:800;color:var(--primary);
}

body.theme-shadcn .card,
body.theme-shadcn .auth-card,
body.theme-shadcn .stat,
body.theme-shadcn .kpi{
  background:var(--card) !important;
  color:var(--card-foreground);
  border:1px solid var(--border) !important;
  border-radius:16px;
  box-shadow:var(--orc-shadow);
}
body.theme-shadcn .card.mini{border-radius:14px}
body.theme-shadcn .h1,
body.theme-shadcn h1,
body.theme-shadcn h2,
body.theme-shadcn h3{color:var(--foreground)}
body.theme-shadcn .muted,
body.theme-shadcn small,
body.theme-shadcn .small{color:var(--muted-foreground)}
body.theme-shadcn label{font-size:12px;font-weight:700;color:var(--muted-foreground)}
body.theme-shadcn input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
body.theme-shadcn select,
body.theme-shadcn textarea{
  width:100%;
  border-radius:10px;
  border:1px solid var(--input);
  background:var(--background);
  color:var(--foreground);
  padding:10px 12px;
  box-shadow:none;
}
body.theme-shadcn input::placeholder,
body.theme-shadcn textarea::placeholder{color:var(--muted-foreground)}
body.theme-shadcn input:focus,
body.theme-shadcn select:focus,
body.theme-shadcn textarea:focus{border-color:transparent;box-shadow:var(--ring)}
body.theme-shadcn .btn{
  height:40px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:0 14px;
  border-radius:10px;
  border:1px solid var(--input);
  background:var(--background);
  color:var(--foreground);
  font-size:13px;
  font-weight:800;
  box-shadow:none;
}
body.theme-shadcn .btn:hover{background:var(--accent);transform:translateY(-1px)}
body.theme-shadcn .btn:active{transform:translateY(0)}
body.theme-shadcn .btn.sm{height:34px;padding:0 12px;font-size:12px}
body.theme-shadcn .btn.primary{background:var(--primary);border-color:rgba(var(--orc-primary-rgb),.40);color:var(--primary-foreground)}
body.theme-shadcn .btn.primary:hover{filter:brightness(.98);background:var(--primary)}
body.theme-shadcn .btn.gray{background:transparent}
body.theme-shadcn .btn.green{background:rgba(101,163,13,.12);border-color:rgba(101,163,13,.22);color:#4d7c0f}
body.theme-shadcn .btn.red,
body.theme-shadcn .btn.danger{background:rgba(225,29,72,.10);border-color:rgba(225,29,72,.20);color:#be123c}
body.theme-shadcn .btn.orange,
body.theme-shadcn .btn.amber{background:rgba(217,119,6,.12);border-color:rgba(217,119,6,.22);color:#b45309}
html.dark body.theme-shadcn .btn.green,
html[data-theme="dark"] body.theme-shadcn .btn.green{color:#d9f99d;background:rgba(101,163,13,.16)}
html.dark body.theme-shadcn .btn.red,
html[data-theme="dark"] body.theme-shadcn .btn.red,
html.dark body.theme-shadcn .btn.danger,
html[data-theme="dark"] body.theme-shadcn .btn.danger{color:#fecdd3;background:rgba(225,29,72,.18)}
html.dark body.theme-shadcn .btn.orange,
html[data-theme="dark"] body.theme-shadcn .btn.orange,
html.dark body.theme-shadcn .btn.amber,
html[data-theme="dark"] body.theme-shadcn .btn.amber{color:#fed7aa;background:rgba(217,119,6,.18)}
body.theme-shadcn .badge,
body.theme-shadcn .chip,
body.theme-shadcn .kbd,
body.theme-shadcn .dd-handle{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--accent);
  color:var(--foreground);
  font-size:12px;
  font-weight:800;
}
body.theme-shadcn .kbd{border-radius:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
body.theme-shadcn .chk{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--accent);
}
body.theme-shadcn .chk input{width:18px;height:18px;accent-color:var(--primary)}

body.theme-shadcn .table-wrap{
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--card);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
body.theme-shadcn .table-wrap::-webkit-scrollbar{height:10px;width:10px}
body.theme-shadcn .table-wrap::-webkit-scrollbar-thumb{background:rgba(120,113,108,.28);border-radius:999px}
html.dark body.theme-shadcn .table-wrap::-webkit-scrollbar-thumb,
html[data-theme="dark"] body.theme-shadcn .table-wrap::-webkit-scrollbar-thumb{background:rgba(161,161,170,.20)}
body.theme-shadcn .table-wrap table{width:max-content;min-width:100%;background:transparent;border:none;border-collapse:separate;border-spacing:0}
body.theme-shadcn .table-wrap thead th{
  position:sticky;top:0;z-index:2;
  background:var(--accent);
  color:var(--muted-foreground);
  font-size:12px;font-weight:800;
  white-space:nowrap;
  border-bottom:1px solid var(--border);
}
body.theme-shadcn .table-wrap th,
body.theme-shadcn .table-wrap td{padding:11px 12px;border-color:var(--border)}
body.theme-shadcn .table-wrap td{white-space:nowrap;color:var(--foreground);max-width:420px;overflow:hidden;text-overflow:ellipsis}
body.theme-shadcn .table-wrap tbody tr td{background:transparent}
body.theme-shadcn .table-wrap tbody tr:nth-child(even) td{background:var(--orc-soft)}
body.theme-shadcn .table-wrap tbody tr:hover td{background:rgba(var(--orc-primary-rgb),.06)}
body.theme-shadcn .table-wrap td.actions-td{overflow:visible !important;text-overflow:clip;position:relative;z-index:5}
body.theme-shadcn .table-wrap td .actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
body.theme-shadcn .table-wrap td .actions .btn{height:34px}
body.theme-shadcn table.listview thead th{font-size:12px}

body.theme-shadcn .settings-tabs{
  display:flex;gap:8px;flex-wrap:wrap;
  padding:6px;border-radius:14px;
  border:1px solid var(--border);
  background:var(--accent);
}
body.theme-shadcn .st-tab{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:10px;
  border:1px solid transparent;
  color:var(--muted-foreground);font-weight:800;
}
body.theme-shadcn .st-tab:hover{background:var(--card);color:var(--foreground)}
body.theme-shadcn .st-tab.active{background:var(--primary);color:var(--primary-foreground)}

body.theme-shadcn .notif-list{display:flex;flex-direction:column;gap:12px;margin-top:12px}
body.theme-shadcn .notif-item{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px;border-radius:16px;
  border:1px solid var(--border);
  background:var(--card);
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;
}
body.theme-shadcn .notif-item:hover{transform:translateY(-1px);border-color:rgba(var(--orc-primary-rgb),.20);box-shadow:var(--orc-shadow)}
body.theme-shadcn .notif-item.is-unread{border-color:rgba(var(--orc-primary-rgb),.26);background:linear-gradient(180deg, rgba(var(--orc-primary-rgb),.08), var(--card))}
body.theme-shadcn .notif-item.is-done{border-color:rgba(34,197,94,.28);background:linear-gradient(180deg, rgba(34,197,94,.10), var(--card))}
html.dark body.theme-shadcn .notif-item.is-unread,
html[data-theme="dark"] body.theme-shadcn .notif-item.is-unread{background:linear-gradient(180deg, rgba(var(--orc-primary-rgb),.14), var(--card))}
html.dark body.theme-shadcn .notif-item.is-done,
html[data-theme="dark"] body.theme-shadcn .notif-item.is-done{background:linear-gradient(180deg, rgba(34,197,94,.16), var(--card))}
body.theme-shadcn .notif-dot{
  width:42px;height:42px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  background:var(--accent);
  border:1px solid var(--border);
}
body.theme-shadcn .notif-item.is-unread .notif-dot{background:rgba(var(--orc-primary-rgb),.12);border-color:rgba(var(--orc-primary-rgb),.18)}
body.theme-shadcn .notif-item.is-done .notif-dot{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.22)}
body.theme-shadcn .notif-content{min-width:0;flex:1}
body.theme-shadcn .notif-head{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
body.theme-shadcn .notif-title{font-weight:900;line-height:1.5;color:var(--foreground)}
body.theme-shadcn .notif-time{font-size:12px;color:var(--muted-foreground);direction:ltr;white-space:nowrap}
body.theme-shadcn .notif-text{margin-top:8px;color:var(--muted-foreground);line-height:1.9}
body.theme-shadcn .notif-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
body.theme-shadcn .notif-actions .btn{border-radius:999px}
body.theme-shadcn .notif-badge-new{margin-inline-start:8px}

body.theme-shadcn .metrics .metric{
  --metric-rgb:var(--orc-primary-rgb);
  position:relative;overflow:hidden;
  padding:16px;border-radius:16px;
  border:1px solid rgba(var(--metric-rgb),.18);
  background:linear-gradient(180deg, rgba(var(--metric-rgb),.08), var(--card));
  box-shadow:none;
}
body.theme-shadcn .metrics .metric::after{
  content:"";
  position:absolute;inset:-60px -70px auto auto;
  width:170px;height:170px;
  background:radial-gradient(circle at 30% 30%, rgba(var(--metric-rgb),.18), transparent 65%);
  pointer-events:none;
}
html.dark body.theme-shadcn .metrics .metric,
html[data-theme="dark"] body.theme-shadcn .metrics .metric{background:linear-gradient(180deg, rgba(var(--metric-rgb),.12), var(--card))}
body.theme-shadcn .metrics .metric .m-ic{
  width:42px;height:42px;border-radius:12px;
  border:1px solid rgba(var(--metric-rgb),.20);
  background:rgba(var(--metric-rgb),.12);
  box-shadow:none;
}
body.theme-shadcn .metrics .metric .m-val{font-size:28px;font-weight:900;color:var(--foreground)}
body.theme-shadcn .metrics .metric .m-lbl{font-size:13px;font-weight:800;color:var(--foreground)}
body.theme-shadcn .metrics .metric .m-sub{font-size:12px;color:var(--muted-foreground)}
body.theme-shadcn .metrics .m-green{--metric-rgb:101,163,13}
body.theme-shadcn .metrics .m-red{--metric-rgb:225,29,72}
body.theme-shadcn .metrics .m-blue{--metric-rgb:37,99,235}
body.theme-shadcn .metrics .m-orange{--metric-rgb:217,119,6}
body.theme-shadcn .metrics .m-purple{--metric-rgb:124,58,237}
body.theme-shadcn .chart-card{padding:18px;border-radius:16px}
body.theme-shadcn .chart-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
body.theme-shadcn .chart-title .t{font-size:14px;font-weight:900}
body.theme-shadcn .chart-title .s{font-size:12px;color:var(--muted-foreground)}
body.theme-shadcn .svg-wrap{
  background:linear-gradient(180deg, var(--orc-soft), transparent);
  border:1px solid var(--border);
  border-radius:16px;
}
body.theme-shadcn .legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;color:var(--muted-foreground);font-size:12px}
body.theme-shadcn .leg{display:flex;align-items:center;gap:8px}
body.theme-shadcn .donut-center .big{font-size:22px;font-weight:900;color:var(--foreground)}
body.theme-shadcn .donut-center .small{color:var(--muted-foreground);font-size:12px}
body.theme-shadcn .bars{display:flex;flex-direction:column;gap:10px;margin-top:14px}
body.theme-shadcn .bar-row{display:flex;align-items:center;gap:12px;margin:0}
body.theme-shadcn .bar-name{flex:0 0 220px;max-width:220px;color:var(--foreground);font-weight:800;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.theme-shadcn .bar-track{flex:1;height:10px;border-radius:999px;background:var(--accent);border:none;overflow:hidden}
body.theme-shadcn .bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg, rgba(var(--orc-primary-rgb),.55), var(--primary))}
body.theme-shadcn .bar-val{flex:0 0 48px;text-align:left;direction:ltr;font-size:12px;color:var(--muted-foreground)}
body.theme-shadcn .quick-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:14px}
body.theme-shadcn .qbtn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px;border-radius:16px;
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:none;
}
body.theme-shadcn .qbtn:hover{background:var(--accent);border-color:rgba(var(--orc-primary-rgb),.18);transform:translateY(-1px)}
body.theme-shadcn .qleft{display:flex;align-items:center;gap:12px;min-width:0}
body.theme-shadcn .qic{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--orc-primary-rgb),.10);
  border:1px solid rgba(var(--orc-primary-rgb),.16);
}
body.theme-shadcn .qt{font-weight:900;color:var(--foreground)}
body.theme-shadcn .qs{font-size:12px;color:var(--muted-foreground);margin-top:4px}

body.theme-shadcn .toolbar{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:none;
}
body.theme-shadcn .fast-additions{border-radius:18px}
body.theme-shadcn .fast-additions .fast-tabs{
  display:flex;gap:8px;flex-wrap:wrap;
  padding:6px;border-radius:14px;
  border:1px solid var(--border);
  background:var(--accent);
}
body.theme-shadcn .fast-additions .fast-tab-btn{
  height:38px;padding:0 14px;border-radius:10px;
  border:1px solid transparent;
  background:transparent;color:var(--muted-foreground);
  font-weight:800;
}
body.theme-shadcn .fast-additions .fast-tab-btn:hover{background:var(--card)}
body.theme-shadcn .fast-additions .fast-tab-btn.active{background:var(--primary);color:var(--primary-foreground);box-shadow:0 10px 18px rgba(var(--orc-primary-rgb),.18)}
body.theme-shadcn .fast-additions .toolbar,
body.theme-shadcn .fast-additions .fast-form-pane .card,
body.theme-shadcn .fast-additions .fast-footer .card{border-radius:14px}
body.theme-shadcn .fast-additions .chk{background:var(--accent);border-color:var(--border)}
body.theme-shadcn .fast-additions .lv-quick-links{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:12px;padding-top:10px;border-top:1px dashed var(--border);
}
body.theme-shadcn .fast-additions .lv-quick-label{font-size:12px;font-weight:800;color:var(--muted-foreground)}
body.theme-shadcn .fast-additions .lv-quick-links .btn{border-radius:999px}
body.theme-shadcn .fast-additions .lv-toolbar-grid .lv-apply .btn,
body.theme-shadcn .fast-additions .lv-toolbar-grid .lv-reset .btn,
body.theme-shadcn .fast-additions .lv-toolbar-grid .lv-cols .btn{width:100%}
body.theme-shadcn .fast-additions .lv-hide .toggle{
  position:relative;
  width:100%;height:40px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 12px;border-radius:10px;
  border:1px solid var(--input);
  background:var(--accent);
  cursor:pointer;
}
body.theme-shadcn .fast-additions .lv-hide .toggle .toggle-label{font-weight:800;color:var(--foreground)}
body.theme-shadcn .fast-additions .lv-hide .toggle input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
body.theme-shadcn .fast-additions .lv-hide .toggle .toggle-track{
  width:44px;height:24px;border-radius:999px;
  position:relative;flex:0 0 auto;
  background:rgba(120,113,108,.24);
  border:1px solid var(--border);
}
body.theme-shadcn .fast-additions .lv-hide .toggle .toggle-thumb{
  width:18px;height:18px;border-radius:999px;
  position:absolute;top:2px;left:3px;
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  transition:left .18s ease;
}
body.theme-shadcn .fast-additions .lv-hide .toggle input:checked + .toggle-track{background:rgba(var(--orc-primary-rgb),.24);border-color:rgba(var(--orc-primary-rgb),.30)}
body.theme-shadcn .fast-additions .lv-hide .toggle input:checked + .toggle-track .toggle-thumb{left:22px}
body.theme-shadcn .fast-additions .fast-footer .fast-actions{display:flex;gap:10px;flex-wrap:wrap}
body.theme-shadcn .fast-additions .table-wrap{border-radius:14px}

body.theme-shadcn .auth-wrap{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:var(--orc-bg);
}
body.theme-shadcn .auth-card{width:min(460px,100%);border-radius:20px}

@media (max-width:1024px){
  body.theme-shadcn .sidebar-toggle{display:inline-flex}
  body.theme-shadcn .top-search{display:none}
  body.theme-shadcn .sidebar{
    position:fixed;top:0;bottom:0;right:0;z-index:140;
    width:min(86vw,300px);min-height:100vh;height:100vh;
    transform:translateX(100%);transition:transform .18s ease;
  }
  body.theme-shadcn.sidebar-open .sidebar{transform:translateX(0)}
  body.theme-shadcn.sidebar-open::before{
    content:"";
    position:fixed;inset:0;z-index:130;
    background:rgba(0,0,0,.45);
  }
}

@media (max-width:900px){
  body.theme-shadcn .user-menu-name{display:none}
}

@media (max-width:640px){
  body.theme-shadcn .topbar{padding:12px;gap:10px}
  body.theme-shadcn .top-title{font-size:16px}
  body.theme-shadcn .tp-label{display:none}
  body.theme-shadcn .bar-row{flex-wrap:wrap}
  body.theme-shadcn .bar-name{flex:1 1 100%;max-width:none}
  body.theme-shadcn .notif-head{flex-direction:column;align-items:flex-start}
  body.theme-shadcn .notif-time{white-space:normal;margin-top:0}
  body.theme-shadcn .notif-item{padding:12px}
  body.theme-shadcn .notif-dot{width:38px;height:38px;border-radius:12px}
  body.theme-shadcn .settings-tabs{flex-wrap:nowrap;overflow:auto}
  body.theme-shadcn .settings-tabs::-webkit-scrollbar{display:none}
  body.theme-shadcn .fast-additions .fast-footer .fast-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  body.theme-shadcn .fast-additions .fast-footer .fast-actions .kbd-hint{grid-column:1 / -1;margin:0 !important;text-align:center}
}
@media (max-width:380px){
  body.theme-shadcn .fast-additions .fast-footer .fast-actions{grid-template-columns:1fr}
}


/* === 2026-03-06 UI refinement patch (theme-shadcn) === */

/* 1) Batches quick list */
body.theme-shadcn .batch-quick-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
body.theme-shadcn .batch-quick-top .btn{flex:0 0 auto}
body.theme-shadcn .batch-quick-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:58vh;
  overflow:auto;
  padding-inline-end:4px;
}
body.theme-shadcn .batch-quick-list::-webkit-scrollbar{width:10px}
body.theme-shadcn .batch-quick-list::-webkit-scrollbar-thumb{background:rgba(161,161,170,.22);border-radius:999px}
body.theme-shadcn .batch-quick-item{
  display:block;
  text-decoration:none;
  color:inherit;
  padding:14px;
  border-radius:18px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(var(--orc-primary-rgb),.03), var(--card));
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
body.theme-shadcn .batch-quick-item:hover{
  transform:translateY(-1px);
  border-color:rgba(var(--orc-primary-rgb),.24);
  box-shadow:0 18px 48px rgba(15,23,42,.10);
  background:linear-gradient(180deg, rgba(var(--orc-primary-rgb),.07), var(--card));
}
body.theme-shadcn .batch-quick-item.active{
  border-color:rgba(var(--orc-primary-rgb),.36);
  box-shadow:0 20px 56px rgba(var(--orc-primary-rgb),.14);
  background:linear-gradient(180deg, rgba(var(--orc-primary-rgb),.12), var(--card));
}
html.dark body.theme-shadcn .batch-quick-item,
html[data-theme="dark"] body.theme-shadcn .batch-quick-item{
  background:linear-gradient(180deg, rgba(var(--orc-primary-rgb),.08), var(--card));
}
html.dark body.theme-shadcn .batch-quick-item:hover,
html[data-theme="dark"] body.theme-shadcn .batch-quick-item:hover{
  background:linear-gradient(180deg, rgba(var(--orc-primary-rgb),.12), var(--card));
}
html.dark body.theme-shadcn .batch-quick-item.active,
html[data-theme="dark"] body.theme-shadcn .batch-quick-item.active{
  background:linear-gradient(180deg, rgba(var(--orc-primary-rgb),.16), var(--card));
}
body.theme-shadcn .batch-quick-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
body.theme-shadcn .batch-quick-copy{min-width:0}
body.theme-shadcn .batch-quick-item .t{
  font-size:15px;
  font-weight:900;
  line-height:1.45;
  color:var(--foreground);
}
body.theme-shadcn .batch-quick-item .s{
  margin-top:5px;
  font-size:12px;
  color:var(--muted-foreground);
}
body.theme-shadcn .batch-quick-id{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:52px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--accent);
  color:var(--muted-foreground);
  font-size:12px;
  font-weight:800;
  direction:ltr;
  unicode-bidi:plaintext;
}
body.theme-shadcn .batch-quick-item.active .batch-quick-id{
  border-color:rgba(var(--orc-primary-rgb),.28);
  color:var(--foreground);
  background:rgba(var(--orc-primary-rgb),.12);
}
body.theme-shadcn .batch-quick-item .m{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}
@media (max-width:540px){
  body.theme-shadcn .batch-quick-item .m{grid-template-columns:1fr}
}
body.theme-shadcn .batch-chip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--accent);
  color:var(--muted-foreground);
  font-size:12px;
  font-weight:800;
}
body.theme-shadcn .batch-chip strong{
  color:var(--foreground);
  font-weight:900;
  direction:ltr;
  unicode-bidi:plaintext;
}

/* 2) Mini stats / summary cards */
body.theme-shadcn .mini-stats{margin:0 0 14px 0}
body.theme-shadcn .mini-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
}
body.theme-shadcn .mini-stat{
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px 16px;
  background:linear-gradient(180deg, rgba(var(--orc-primary-rgb),.04), var(--card));
}
html.dark body.theme-shadcn .mini-stat,
html[data-theme="dark"] body.theme-shadcn .mini-stat{
  background:linear-gradient(180deg, rgba(var(--orc-primary-rgb),.08), var(--card));
}
body.theme-shadcn .mini-stat .l{
  font-size:12px;
  font-weight:800;
  color:var(--muted-foreground);
}
body.theme-shadcn .mini-stat .n{
  margin-top:8px;
  font-size:24px;
  font-weight:900;
  color:var(--foreground);
  line-height:1.15;
  direction:ltr;
  unicode-bidi:plaintext;
}
body.theme-shadcn .mini-stat .n.small{
  font-size:14px;
  line-height:1.6;
  white-space:normal;
  direction:rtl;
}
body.theme-shadcn .mini-subtitle{
  margin:0 0 10px 0;
  font-size:12px;
  font-weight:800;
  color:var(--muted-foreground);
}
body.theme-shadcn .mini-sep{
  height:1px;
  margin:14px 0;
  background:linear-gradient(90deg, transparent, var(--border), transparent);
}
body.page-withdrawals.theme-shadcn .mini-grid,
body.page-expenses.theme-shadcn .mini-grid{
  grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (max-width:760px){
  body.page-withdrawals.theme-shadcn .mini-grid,
  body.page-expenses.theme-shadcn .mini-grid{grid-template-columns:1fr}
}

/* 3) Column manager dropdown in additions fast */
body.theme-shadcn .colmenu{position:relative;display:inline-flex;align-items:center}
body.theme-shadcn .fast-additions .lv-cols .colmenu{display:block;width:100%}
body.theme-shadcn .fast-additions .lv-cols .colmenu-dd{min-width:100%;max-width:none}
body.theme-shadcn .colmenu-dd{
  position:absolute;
  top:calc(100% + 10px);
  inset-inline-start:0;
  min-width:300px;
  max-width:340px;
  padding:14px;
  border-radius:18px;
  border:1px solid var(--border);
  background:var(--popover);
  box-shadow:0 28px 90px rgba(2,6,23,.18);
  display:none;
  z-index:80;
}
html.dark body.theme-shadcn .colmenu-dd,
html[data-theme="dark"] body.theme-shadcn .colmenu-dd{box-shadow:0 30px 90px rgba(0,0,0,.46)}
body.theme-shadcn .colmenu.open .colmenu-dd{display:block}
body.theme-shadcn .colmenu-title{
  font-size:13px;
  font-weight:900;
  color:var(--foreground);
}
body.theme-shadcn .colmenu-help{
  margin-top:6px;
  font-size:12px;
  line-height:1.7;
  color:var(--muted-foreground);
}
body.theme-shadcn .colmenu-options{
  display:grid;
  gap:10px;
  margin-top:14px;
}
body.theme-shadcn .colmenu-dd .chk{
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(var(--orc-primary-rgb),.05), var(--accent));
}
body.theme-shadcn .colmenu-dd .chk span{
  color:var(--foreground);
  font-size:13px;
  font-weight:800;
}
body.theme-shadcn .colmenu-dd .chk input{
  width:18px;
  height:18px;
  flex:0 0 auto;
  accent-color:var(--primary);
}

/* 4) Settings theme pickers (do not affect topbar theme selector) */
body.page-settings.theme-shadcn #ui_theme_picker,
body.page-settings.theme-shadcn #invoice_theme_picker{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:12px;
  margin-top:10px;
}
body.page-settings.theme-shadcn #ui_theme_picker .theme-opt,
body.page-settings.theme-shadcn #invoice_theme_picker .theme-opt{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:74px;
  padding:14px;
  border-radius:18px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(var(--orc-primary-rgb),.03), var(--card));
  cursor:pointer;
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
body.page-settings.theme-shadcn #ui_theme_picker .theme-opt:hover,
body.page-settings.theme-shadcn #invoice_theme_picker .theme-opt:hover{
  transform:translateY(-1px);
  border-color:rgba(var(--orc-primary-rgb),.28);
  box-shadow:0 18px 50px rgba(15,23,42,.10);
  background:linear-gradient(180deg, rgba(var(--orc-primary-rgb),.08), var(--card));
}
body.page-settings.theme-shadcn #ui_theme_picker .theme-opt:has(input:checked),
body.page-settings.theme-shadcn #invoice_theme_picker .theme-opt:has(input:checked){
  border-color:rgba(var(--orc-primary-rgb),.42);
  box-shadow:0 22px 55px rgba(var(--orc-primary-rgb),.14);
  background:linear-gradient(180deg, rgba(var(--orc-primary-rgb),.12), var(--card));
}
body.page-settings.theme-shadcn #ui_theme_picker .theme-opt:has(input:focus-visible),
body.page-settings.theme-shadcn #invoice_theme_picker .theme-opt:has(input:focus-visible){
  box-shadow:0 0 0 3px rgba(var(--orc-primary-rgb),.16), 0 18px 50px rgba(15,23,42,.10);
}
body.page-settings.theme-shadcn #ui_theme_picker .theme-opt::after,
body.page-settings.theme-shadcn #invoice_theme_picker .theme-opt::after{
  content:"";
  position:absolute;
  inset-inline-start:14px;
  top:14px;
  width:10px;
  height:10px;
  border-radius:999px;
  background:transparent;
  box-shadow:0 0 0 1px var(--border) inset;
}
body.page-settings.theme-shadcn #ui_theme_picker .theme-opt:has(input:checked)::after,
body.page-settings.theme-shadcn #invoice_theme_picker .theme-opt:has(input:checked)::after{
  background:var(--primary);
  box-shadow:0 0 0 6px rgba(var(--orc-primary-rgb),.16);
}
body.page-settings.theme-shadcn #ui_theme_picker .theme-opt input,
body.page-settings.theme-shadcn #invoice_theme_picker .theme-opt input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
body.page-settings.theme-shadcn #ui_theme_picker .theme-chip{
  width:50px;
  height:50px;
  border-radius:16px;
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
  flex:0 0 auto;
}
body.page-settings.theme-shadcn #ui_theme_picker .theme-name,
body.page-settings.theme-shadcn #invoice_theme_picker .theme-label{
  font-size:14px;
  font-weight:900;
  color:var(--foreground);
}
body.page-settings.theme-shadcn #invoice_theme_picker .theme-pill{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
  min-width:0;
}
body.page-settings.theme-shadcn #invoice_theme_picker .theme-swatch{
  --swatch:#2563eb;
  width:50px;
  height:50px;
  border-radius:16px;
  background:var(--swatch);
  background:linear-gradient(135deg, var(--swatch), color-mix(in srgb, var(--swatch) 72%, white));
  border:1px solid rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
  flex:0 0 auto;
}
body.page-settings.theme-shadcn #ui_custom_colors,
body.page-settings.theme-shadcn #custom_theme_box{
  padding:14px;
  border-radius:18px;
  border:1px dashed var(--border);
  background:var(--accent);
}
@media (max-width:700px){
  body.page-settings.theme-shadcn #ui_theme_picker,
  body.page-settings.theme-shadcn #invoice_theme_picker{grid-template-columns:1fr}
}

/* 5) Better file input design */
body.theme-shadcn input[type="file"]{
  width:100%;
  display:block;
  padding:12px;
  border-radius:16px;
  border:1px dashed var(--border);
  background:linear-gradient(180deg, rgba(var(--orc-primary-rgb),.04), var(--accent));
  color:var(--muted-foreground);
  font-size:13px;
  cursor:pointer;
}
body.theme-shadcn input[type="file"]:hover{
  border-color:rgba(var(--orc-primary-rgb),.34);
  background:linear-gradient(180deg, rgba(var(--orc-primary-rgb),.08), var(--accent));
}
body.theme-shadcn input[type="file"]:focus{
  outline:none;
  box-shadow:var(--ring);
  border-color:transparent;
}
body.theme-shadcn input[type="file"]::file-selector-button,
body.theme-shadcn input[type="file"]::-webkit-file-upload-button{
  margin-inline-end:12px;
  border:none;
  border-radius:12px;
  padding:10px 14px;
  background:var(--primary);
  color:var(--primary-foreground);
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}
body.theme-shadcn .field input[type="file"] + small{display:block;margin-top:8px}

/* =====================================================
   2026-03-06 — responsive polish (customer dashboard / topbar / welcome)
   ===================================================== */

/* 1) Public customer pages should occupy full width instead of shrink-wrapping inside auth flex */
body.theme-shadcn.page-customer_dashboard .auth-wrap,
body.theme-shadcn.page-customer_chat .auth-wrap,
body.theme-shadcn.page-customer_tickets .auth-wrap,
body.theme-shadcn.page-welcome .auth-wrap{
  display:block;
  min-height:100vh;
  padding:16px 0 32px;
  align-items:stretch;
  justify-content:stretch;
}
body.theme-shadcn.page-customer_dashboard .auth-wrap > .container,
body.theme-shadcn.page-customer_chat .auth-wrap > .container,
body.theme-shadcn.page-customer_tickets .auth-wrap > .container,
body.theme-shadcn.page-welcome .auth-wrap > .container{
  width:100%;
  max-width:1280px;
  margin:0 auto;
}
body.theme-shadcn.page-customer_dashboard .customer-dashboard-shell,
body.theme-shadcn.page-customer_chat .card,
body.theme-shadcn.page-customer_tickets .card{
  width:100%;
}
body.theme-shadcn.page-customer_dashboard .customer-dashboard-grid{
  grid-template-columns:minmax(0, 1.04fr) minmax(0, .96fr);
}
body.theme-shadcn.page-customer_dashboard .customer-dashboard-grid > .card,
body.theme-shadcn.page-customer_dashboard .customer-dashboard-shell .card,
body.theme-shadcn.page-customer_chat .card,
body.theme-shadcn.page-customer_tickets .card{min-width:0}
body.theme-shadcn.page-customer_dashboard .customer-portal-tabs,
body.theme-shadcn.page-customer_chat .settings-tabs,
body.theme-shadcn.page-customer_tickets .settings-tabs{width:100%;max-width:100%}

@media (max-width: 980px){
  body.theme-shadcn.page-customer_dashboard .customer-dashboard-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  body.theme-shadcn.page-customer_dashboard .auth-wrap,
  body.theme-shadcn.page-customer_chat .auth-wrap,
  body.theme-shadcn.page-customer_tickets .auth-wrap,
  body.theme-shadcn.page-welcome .auth-wrap{padding:10px 0 24px}

  body.theme-shadcn.page-customer_dashboard .customer-dashboard-shell,
  body.theme-shadcn.page-customer_chat .card,
  body.theme-shadcn.page-customer_tickets .card{padding:14px}

  body.theme-shadcn.page-customer_dashboard .customer-dashboard-shell .h1,
  body.theme-shadcn.page-customer_chat .card .h1,
  body.theme-shadcn.page-customer_tickets .card .h1{font-size:18px}

  body.theme-shadcn.page-customer_dashboard .customer-dashboard-shell .table-wrap,
  body.theme-shadcn.page-customer_chat .card .table-wrap,
  body.theme-shadcn.page-customer_tickets .card .table-wrap{border-radius:12px}

  body.theme-shadcn.page-customer_dashboard .customer-bookings-table th,
  body.theme-shadcn.page-customer_dashboard .customer-bookings-table td,
  body.theme-shadcn.page-customer_dashboard .customer-items-table th,
  body.theme-shadcn.page-customer_dashboard .customer-items-table td{padding:9px 10px}
}

/* 2) Topbar titles: prevent vertical/cramped text on narrow widths */
body.theme-shadcn .topbar-titles{
  flex:1 1 220px;
  min-width:0;
  max-width:min(100%, 540px);
}
body.theme-shadcn .top-title,
body.theme-shadcn .top-sub{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.theme-shadcn .breadcrumbs{min-width:0}

@media (max-width: 1100px){
  body.theme-shadcn .top-sub{display:none}
}
@media (max-width: 920px){
  body.theme-shadcn .topbar{
    flex-wrap:wrap;
    align-items:center;
  }
  body.theme-shadcn .topbar-titles{
    order:3;
    flex:1 1 100%;
    max-width:none;
    padding-top:10px;
    margin-top:4px;
    border-top:1px solid var(--border);
  }
  body.theme-shadcn .top-title{
    font-size:15px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  body.theme-shadcn .breadcrumbs{display:none}
  body.theme-shadcn .topbar-actions{
    order:2;
    margin-inline-start:0;
    max-width:calc(100% - 48px);
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
  }
  body.theme-shadcn .topbar-actions::-webkit-scrollbar{display:none}
}
@media (max-width: 520px){
  body.theme-shadcn .topbar{padding:10px 12px;gap:8px}
  body.theme-shadcn .topbar-actions{gap:6px}
  body.theme-shadcn .topbar .icon-btn,
  body.theme-shadcn .topbar .user-menu-btn,
  body.theme-shadcn .topbar .tp-trigger{height:34px;border-radius:10px}
  body.theme-shadcn .topbar .user-menu-btn{padding-inline:8px}
  body.theme-shadcn .topbar .tp-trigger{padding-inline:10px}
  body.theme-shadcn .topbar .tp-value{font-size:13px}
}

/* 3) Responsive card-mode tables for theme-shadcn (used by customer dashboard on mobile) */
@media (max-width: 600px){
  body.theme-shadcn .table-wrap.rt-card-wrap{
    overflow:visible !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  body.theme-shadcn table.rt-card,
  body.theme-shadcn table.rt-card tbody,
  body.theme-shadcn table.rt-card tr,
  body.theme-shadcn table.rt-card td{
    display:block;
    width:100% !important;
  }
  body.theme-shadcn table.rt-card{
    min-width:0 !important;
    border:0 !important;
    background:transparent !important;
  }
  body.theme-shadcn table.rt-card thead{display:none}
  body.theme-shadcn table.rt-card tbody{display:block}
  body.theme-shadcn table.rt-card tr{
    margin:0 0 12px;
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
    background:var(--card);
    box-shadow:0 10px 24px rgba(15,23,42,.08);
  }
  html.dark body.theme-shadcn table.rt-card tr,
  html[data-theme="dark"] body.theme-shadcn table.rt-card tr{box-shadow:0 18px 36px rgba(0,0,0,.32)}
  body.theme-shadcn table.rt-card td{
    display:grid;
    grid-template-columns:minmax(94px, 42%) minmax(0, 1fr);
    gap:10px;
    align-items:start;
    max-width:none;
    padding:10px 12px;
    border:0;
    border-bottom:1px solid var(--border);
    white-space:normal !important;
    text-overflow:clip !important;
    overflow:visible !important;
    text-align:right;
  }
  body.theme-shadcn table.rt-card td::before{
    content:attr(data-label);
    font-size:11px;
    font-weight:800;
    line-height:1.5;
    color:var(--muted-foreground);
  }
  body.theme-shadcn table.rt-card td:last-child{border-bottom:0}
  body.theme-shadcn table.rt-card td[colspan]{display:block}
  body.theme-shadcn table.rt-card td[colspan]::before{display:none}
  body.theme-shadcn table.rt-card td .actions{justify-content:flex-start}
  body.theme-shadcn table.rt-card td .btn{white-space:nowrap}
  body.theme-shadcn table.rt-card tr.booking-details-row{
    display:block !important;
    margin-top:-6px;
    border-top:0;
    border-radius:0 0 16px 16px;
  }
  body.theme-shadcn table.rt-card tr.booking-details-row td[colspan]{padding-top:8px}
}

/* 4) Welcome page: use a real landing background instead of dark auth shell + tighten mobile spacing */
body.theme-shadcn.page-welcome .auth-wrap{
  padding:0 !important;
  background:transparent !important;
}
html.wl-theme-light body.theme-shadcn.page-welcome .auth-wrap{
  background:linear-gradient(180deg, #f8fafc 0%, #eef2ff 48%, #ffffff 100%) !important;
}
html:not(.wl-theme-light) body.theme-shadcn.page-welcome .auth-wrap{
  background:
    radial-gradient(1000px 700px at 78% 18%, rgba(6,182,212,.18), transparent 60%),
    radial-gradient(980px 700px at 22% 82%, rgba(34,197,94,.12), transparent 60%),
    radial-gradient(800px 520px at 18% 18%, rgba(168,85,247,.10), transparent 60%),
    linear-gradient(180deg, #061520, #041019) !important;
}
body.theme-shadcn.page-welcome .auth-wrap > .container{
  max-width:1240px;
  padding:18px clamp(14px, 3vw, 28px) 42px;
}
body.theme-shadcn.page-welcome .welcome-landing{padding:6px 0 34px}

html:not(.wl-theme-light) body.theme-shadcn.page-welcome .wl-brand-title,
html:not(.wl-theme-light) body.theme-shadcn.page-welcome .wl-profile-name,
html:not(.wl-theme-light) body.theme-shadcn.page-welcome .wl-h2,
html:not(.wl-theme-light) body.theme-shadcn.page-welcome .wl-hero-title{
  color:rgba(248,250,252,.96);
}
html:not(.wl-theme-light) body.theme-shadcn.page-welcome .wl-brand-sub,
html:not(.wl-theme-light) body.theme-shadcn.page-welcome .wl-muted,
html:not(.wl-theme-light) body.theme-shadcn.page-welcome .wl-hero-desc,
html:not(.wl-theme-light) body.theme-shadcn.page-welcome .wl-stat-l,
html:not(.wl-theme-light) body.theme-shadcn.page-welcome .wl-profile-sub,
html:not(.wl-theme-light) body.theme-shadcn.page-welcome .wl-service-desc,
html:not(.wl-theme-light) body.theme-shadcn.page-welcome .wl-work-desc,
html:not(.wl-theme-light) body.theme-shadcn.page-welcome .wl-exp-desc,
html:not(.wl-theme-light) body.theme-shadcn.page-welcome .wl-quote,
html:not(.wl-theme-light) body.theme-shadcn.page-welcome .wl-footer-item,
html:not(.wl-theme-light) body.theme-shadcn.page-welcome .wl-location{
  color:rgba(226,232,240,.76);
}

@media (max-width: 900px){
  body.theme-shadcn.page-welcome .wl-controls{width:100%;justify-content:flex-start}
  body.theme-shadcn.page-welcome .wl-links-btn{width:100%;justify-content:center}
}
@media (max-width: 640px){
  body.theme-shadcn.page-welcome .auth-wrap > .container{padding:14px 14px 32px}
  body.theme-shadcn.page-welcome .wl-topbar{margin-bottom:14px}
  body.theme-shadcn.page-welcome .wl-brand{width:100%;justify-content:space-between}
  body.theme-shadcn.page-welcome .wl-brand-title,
  body.theme-shadcn.page-welcome .wl-brand-sub{max-width:calc(100vw - 124px)}
  body.theme-shadcn.page-welcome .wl-hero-grid{gap:16px}
  body.theme-shadcn.page-welcome .wl-stats{gap:12px}
  body.theme-shadcn.page-welcome .wl-stat{flex:1 1 calc(50% - 12px);min-width:120px}
  body.theme-shadcn.page-welcome .wl-profile-card,
  body.theme-shadcn.page-welcome .wl-service,
  body.theme-shadcn.page-welcome .wl-exp-card,
  body.theme-shadcn.page-welcome .wl-qr-card,
  body.theme-shadcn.page-welcome .wl-footer{border-radius:18px}
  body.theme-shadcn.page-welcome .wl-works-wrap:before,
  body.theme-shadcn.page-welcome .wl-works-wrap:after{display:none}
  body.theme-shadcn.page-welcome .wl-float{
    left:12px;
    right:12px;
    bottom:16px;
    flex-direction:row;
    justify-content:flex-start;
  }
}

/* =========================================================
   v101 — Global mobile responsiveness + clipping fixes
   - Prevent page-level horizontal overflow on phones
   - Give admin/public containers the full viewport width
   - Make responsive table cards wrap long Arabic text safely
   - Fix action buttons/cards being cut at the bottom or sides
   ========================================================= */

html,
body{
  width:100%;
  overflow-x:hidden;
}

img, svg, video, canvas, iframe{
  max-width:100%;
}

.container,
.shell,
.main,
.content,
.card,
.auth-wrap,
.student-shell,
.table-wrap,
.row,
.grid,
.field{
  min-width:0;
  max-width:100%;
}

body.theme-shadcn .content > .container,
body.theme-laravel .content > .container,
body.theme-v4 .content > .container,
body.theme-shadcn .auth-wrap > .container,
body.theme-laravel .auth-wrap > .container,
body.theme-v4 .auth-wrap > .container,
.student-shell > .container{
  width:100%;
  max-width:1400px;
}

.table-wrap{
  max-width:100%;
  overflow-x:auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

body.theme-shadcn .table-wrap table:not(.rt-card),
body.theme-laravel .table-wrap table:not(.rt-card),
body.theme-v4 .table-wrap table:not(.rt-card){
  max-width:none;
}

body.theme-shadcn td,
body.theme-shadcn th,
body.theme-laravel td,
body.theme-laravel th,
body.theme-v4 td,
body.theme-v4 th{
  overflow-wrap:anywhere;
}

@media (max-width:640px){
  body.theme-shadcn.authed,
  body.theme-laravel.authed,
  body.theme-v4.authed{
    padding:0 !important;
  }

  body.theme-shadcn .shell,
  body.theme-laravel .shell,
  body.theme-v4 .shell{
    width:100% !important;
    min-height:100vh !important;
    border-radius:0 !important;
    border-left:0 !important;
    border-right:0 !important;
  }

  body.theme-shadcn .content > .container,
  body.theme-laravel .content > .container,
  body.theme-v4 .content > .container,
  body.theme-shadcn .auth-wrap > .container,
  body.theme-laravel .auth-wrap > .container,
  body.theme-v4 .auth-wrap > .container,
  .student-shell > .container{
    width:100% !important;
    max-width:100% !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }

  body.theme-shadcn .card,
  body.theme-laravel .card,
  body.theme-v4 .card{
    padding:12px !important;
    border-radius:14px !important;
  }

  body.theme-shadcn .topbar,
  body.theme-laravel .topbar,
  body.theme-v4 .topbar{
    border-radius:0 !important;
  }

  .row{
    gap:8px !important;
  }

  .row .field,
  .field{
    flex:1 1 100%;
    min-width:0 !important;
  }

  .grid.cols-2,
  .grid.cols-3,
  .grid.cols-4,
  .grid.cols-5{
    grid-template-columns:minmax(0,1fr) !important;
  }

  .actions{
    max-width:100%;
  }

  .actions .btn,
  .actions button,
  .actions a{
    max-width:100%;
  }
}

/* Mobile table-card mode: readable, no clipping */
@media (max-width:600px){
  body.theme-shadcn .table-wrap.rt-card-wrap,
  body.theme-laravel .table-wrap.rt-card-wrap,
  body.theme-v4 .table-wrap.rt-card-wrap{
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
  }

  body.theme-shadcn table.rt-card,
  body.theme-laravel table.rt-card,
  body.theme-v4 table.rt-card{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    table-layout:fixed;
  }

  body.theme-shadcn table.rt-card tr,
  body.theme-laravel table.rt-card tr,
  body.theme-v4 table.rt-card tr{
    width:100% !important;
    max-width:100% !important;
    overflow:hidden;
  }

  body.theme-shadcn table.rt-card td,
  body.theme-laravel table.rt-card td,
  body.theme-v4 table.rt-card td{
    min-width:0 !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:anywhere !important;
    word-break:break-word;
    line-height:1.65;
  }

  body.theme-shadcn table.rt-card td,
  body.theme-v4 table.rt-card td{
    grid-template-columns:minmax(82px, 34%) minmax(0, 1fr) !important;
  }

  body.theme-laravel table.rt-card td::before,
  body.theme-shadcn table.rt-card td::before,
  body.theme-v4 table.rt-card td::before{
    min-width:0;
    max-width:100%;
    white-space:normal !important;
    overflow-wrap:anywhere;
  }

  body.theme-shadcn table.rt-card td > *,
  body.theme-laravel table.rt-card td > *,
  body.theme-v4 table.rt-card td > *{
    min-width:0;
    max-width:100%;
  }

  body.theme-shadcn table.rt-card td .actions,
  body.theme-laravel table.rt-card td .actions,
  body.theme-v4 table.rt-card td .actions{
    width:100%;
    justify-content:flex-start !important;
    gap:6px;
  }

  body.theme-shadcn table.rt-card td .btn,
  body.theme-laravel table.rt-card td .btn,
  body.theme-v4 table.rt-card td .btn{
    white-space:normal !important;
    min-width:0;
    max-width:100%;
  }
}

@media (max-width:390px){
  body.theme-shadcn table.rt-card td,
  body.theme-v4 table.rt-card td{
    grid-template-columns:minmax(76px, 32%) minmax(0, 1fr) !important;
    gap:8px !important;
    padding:9px 10px !important;
  }
}

/* Customers page: use the whole phone width and avoid cramped cards */
@media (max-width:640px){
  .customers-page .cust-actions,
  .customers-page .cust-actions .actions-group,
  .customers-page .cust-head,
  .customers-page .cust-head .head-actions,
  .customers-page .table-toolbar .tt-group{
    width:100%;
  }

  .customers-page .cust-actions .btn,
  .customers-page .cust-head .head-actions .btn,
  .customers-page .table-toolbar .tt-group > .btn,
  .customers-page .table-toolbar .tt-group > a.btn,
  .customers-page .table-toolbar .tt-group > input{
    flex:1 1 auto;
    min-width:0 !important;
  }

  .customers-page #custForm .grid.cols-2,
  .customers-page #custForm .grid.cols-3,
  .customers-page .cc-grid,
  .customers-page .stats-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }

  .customers-page .input-group{
    flex-wrap:wrap;
  }

  .customers-page .input-group > input{
    flex:1 1 170px;
  }

  .customers-page .input-group > .btn{
    flex:1 1 auto;
  }

  .customers-page .cust-card{
    padding:10px;
    border-radius:14px;
    overflow:hidden;
  }

  .customers-page .cust-card .cc-actions{
    justify-content:flex-start;
    width:100%;
  }

  .customers-page .cust-card .cc-actions .btn,
  .customers-page .cust-card .cc-actions form{
    flex:1 1 auto;
  }

  .customers-page .cust-card .cc-item,
  .customers-page .cust-card .cc-name,
  .customers-page .cust-card .cc-meta,
  .customers-page .cust-card .cc-item .v{
    min-width:0;
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
}

/* Prices / additions / student pages: bottom notes must flow normally on mobile */
@media (max-width:640px){
  body.theme-shadcn .settings-tabs,
  body.theme-laravel .settings-tabs,
  body.theme-v4 .settings-tabs{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    max-width:100%;
    -webkit-overflow-scrolling:touch;
  }

  body.theme-shadcn .st-tab,
  body.theme-laravel .st-tab,
  body.theme-v4 .st-tab{
    flex:0 0 auto;
    white-space:nowrap;
  }

  .mini-grid,
  .metrics,
  .quick-actions{
    grid-template-columns:minmax(0,1fr) !important;
  }
}

@media (max-width:640px){
  body.theme-shadcn .table-wrap,
  body.theme-laravel .table-wrap,
  body.theme-v4 .table-wrap{
    max-height:none !important;
  }

  body.theme-shadcn .batch-quick-list,
  body.theme-laravel .batch-quick-list,
  body.theme-v4 .batch-quick-list{
    max-height:none !important;
  }

  body.theme-shadcn .batch-quick-top,
  body.theme-laravel .batch-quick-top,
  body.theme-v4 .batch-quick-top{
    flex-wrap:wrap;
  }

  body.theme-shadcn .batch-quick-top input,
  body.theme-laravel .batch-quick-top input,
  body.theme-v4 .batch-quick-top input{
    flex:1 1 180px;
    min-width:0;
  }
}

/* =========================================================
   v102 — Mobile scroll fix for admin list pages
   - Prevent card/table rows from being cut on phones
   - Keep wide admin tables as classic tables with horizontal scroll
   - Allow full vertical page scroll on iPhone-size screens
   Pages: customer prices, batches, audit logs, users, roles, student bulk accounts
   ========================================================= */

@media (max-width: 640px){
  body.page-customer_prices,
  body.page-batches,
  body.page-audit_logs,
  body.page-users,
  body.page-roles,
  body.page-student_accounts_bulk{
    overflow-x:hidden !important;
    overflow-y:auto !important;
    min-height:100dvh;
  }

  body.page-customer_prices .shell,
  body.page-batches .shell,
  body.page-audit_logs .shell,
  body.page-users .shell,
  body.page-roles .shell,
  body.page-student_accounts_bulk .shell{
    display:block !important;
    min-height:100dvh !important;
    height:auto !important;
  }

  body.page-customer_prices .main,
  body.page-batches .main,
  body.page-audit_logs .main,
  body.page-users .main,
  body.page-roles .main,
  body.page-student_accounts_bulk .main,
  body.page-customer_prices .content,
  body.page-batches .content,
  body.page-audit_logs .content,
  body.page-users .content,
  body.page-roles .content,
  body.page-student_accounts_bulk .content{
    display:block !important;
    min-height:auto !important;
    height:auto !important;
    overflow:visible !important;
  }

  body.page-customer_prices .content > .container,
  body.page-batches .content > .container,
  body.page-audit_logs .content > .container,
  body.page-users .content > .container,
  body.page-roles .content > .container,
  body.page-student_accounts_bulk .content > .container{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:10px !important;
    overflow:visible !important;
  }

  body.page-customer_prices .card,
  body.page-batches .card,
  body.page-audit_logs .card,
  body.page-users .card,
  body.page-roles .card,
  body.page-student_accounts_bulk .card{
    min-width:0 !important;
    max-width:100% !important;
    overflow:visible !important;
  }

  body.page-customer_prices .row,
  body.page-batches .row,
  body.page-audit_logs .row,
  body.page-users .row,
  body.page-roles .row,
  body.page-student_accounts_bulk .row{
    width:100% !important;
    max-width:100% !important;
    align-items:stretch !important;
  }

  body.page-customer_prices .row > *,
  body.page-batches .row > *,
  body.page-audit_logs .row > *,
  body.page-users .row > *,
  body.page-roles .row > *,
  body.page-student_accounts_bulk .row > *{
    min-width:0 !important;
    max-width:100% !important;
  }

  body.page-student_accounts_bulk .row > .field,
  body.page-student_accounts_bulk .field[style*="min-width"],
  body.page-audit_logs .field[style*="min-width"]{
    min-width:0 !important;
    width:100% !important;
  }

  body.page-customer_prices .table-toolbar,
  body.page-audit_logs .table-toolbar{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    width:100% !important;
  }

  body.page-customer_prices .table-toolbar .tt-group,
  body.page-audit_logs .table-toolbar .tt-group{
    flex:1 1 100% !important;
    width:100% !important;
    min-width:0 !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  body.page-customer_prices .table-toolbar input,
  body.page-audit_logs .table-toolbar input,
  body.page-customer_prices .table-toolbar .btn,
  body.page-audit_logs .table-toolbar .btn{
    flex:1 1 150px !important;
    min-width:0 !important;
  }

  /* Important: these pages need scroll tables, not mobile cards. */
  body.page-customer_prices .table-wrap,
  body.page-batches .table-wrap,
  body.page-audit_logs .table-wrap,
  body.page-users .table-wrap,
  body.page-roles .table-wrap,
  body.page-student_accounts_bulk .table-wrap,
  body.page-customer_prices .table-wrap.rt-card-wrap,
  body.page-batches .table-wrap.rt-card-wrap,
  body.page-audit_logs .table-wrap.rt-card-wrap,
  body.page-users .table-wrap.rt-card-wrap,
  body.page-roles .table-wrap.rt-card-wrap,
  body.page-student_accounts_bulk .table-wrap.rt-card-wrap{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:auto !important;
    max-height:72dvh !important;
    border:1px solid var(--border) !important;
    border-radius:14px !important;
    background:var(--card) !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain;
  }

  body.page-customer_prices .table-wrap table,
  body.page-batches .table-wrap table,
  body.page-audit_logs .table-wrap table,
  body.page-users .table-wrap table,
  body.page-roles .table-wrap table,
  body.page-student_accounts_bulk .table-wrap table,
  body.page-customer_prices .table-wrap table.rt-card,
  body.page-batches .table-wrap table.rt-card,
  body.page-audit_logs .table-wrap table.rt-card,
  body.page-users .table-wrap table.rt-card,
  body.page-roles .table-wrap table.rt-card,
  body.page-student_accounts_bulk .table-wrap table.rt-card{
    display:table !important;
    width:max-content !important;
    max-width:none !important;
    min-width:720px !important;
    table-layout:auto !important;
    border-collapse:separate !important;
    border-spacing:0 !important;
    background:transparent !important;
  }

  body.page-batches .table-wrap table,
  body.page-batches .table-wrap table.rt-card{min-width:880px !important;}
  body.page-audit_logs .table-wrap table,
  body.page-audit_logs .table-wrap table.rt-card{min-width:960px !important;}
  body.page-users .table-wrap table,
  body.page-users .table-wrap table.rt-card{min-width:920px !important;}
  body.page-student_accounts_bulk .table-wrap table,
  body.page-student_accounts_bulk .table-wrap table.rt-card{min-width:850px !important;}

  body.page-customer_prices .table-wrap table thead,
  body.page-batches .table-wrap table thead,
  body.page-audit_logs .table-wrap table thead,
  body.page-users .table-wrap table thead,
  body.page-roles .table-wrap table thead,
  body.page-student_accounts_bulk .table-wrap table thead,
  body.page-customer_prices .table-wrap table.rt-card thead,
  body.page-batches .table-wrap table.rt-card thead,
  body.page-audit_logs .table-wrap table.rt-card thead,
  body.page-users .table-wrap table.rt-card thead,
  body.page-roles .table-wrap table.rt-card thead,
  body.page-student_accounts_bulk .table-wrap table.rt-card thead{
    display:table-header-group !important;
  }

  body.page-customer_prices .table-wrap table tbody,
  body.page-batches .table-wrap table tbody,
  body.page-audit_logs .table-wrap table tbody,
  body.page-users .table-wrap table tbody,
  body.page-roles .table-wrap table tbody,
  body.page-student_accounts_bulk .table-wrap table tbody,
  body.page-customer_prices .table-wrap table.rt-card tbody,
  body.page-batches .table-wrap table.rt-card tbody,
  body.page-audit_logs .table-wrap table.rt-card tbody,
  body.page-users .table-wrap table.rt-card tbody,
  body.page-roles .table-wrap table.rt-card tbody,
  body.page-student_accounts_bulk .table-wrap table.rt-card tbody{
    display:table-row-group !important;
  }

  body.page-customer_prices .table-wrap table tr,
  body.page-batches .table-wrap table tr,
  body.page-audit_logs .table-wrap table tr,
  body.page-users .table-wrap table tr,
  body.page-roles .table-wrap table tr,
  body.page-student_accounts_bulk .table-wrap table tr,
  body.page-customer_prices .table-wrap table.rt-card tr,
  body.page-batches .table-wrap table.rt-card tr,
  body.page-audit_logs .table-wrap table.rt-card tr,
  body.page-users .table-wrap table.rt-card tr,
  body.page-roles .table-wrap table.rt-card tr,
  body.page-student_accounts_bulk .table-wrap table.rt-card tr{
    display:table-row !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  body.page-customer_prices .table-wrap table th,
  body.page-batches .table-wrap table th,
  body.page-audit_logs .table-wrap table th,
  body.page-users .table-wrap table th,
  body.page-roles .table-wrap table th,
  body.page-student_accounts_bulk .table-wrap table th,
  body.page-customer_prices .table-wrap table td,
  body.page-batches .table-wrap table td,
  body.page-audit_logs .table-wrap table td,
  body.page-users .table-wrap table td,
  body.page-roles .table-wrap table td,
  body.page-student_accounts_bulk .table-wrap table td,
  body.page-customer_prices .table-wrap table.rt-card th,
  body.page-batches .table-wrap table.rt-card th,
  body.page-audit_logs .table-wrap table.rt-card th,
  body.page-users .table-wrap table.rt-card th,
  body.page-roles .table-wrap table.rt-card th,
  body.page-student_accounts_bulk .table-wrap table.rt-card th,
  body.page-customer_prices .table-wrap table.rt-card td,
  body.page-batches .table-wrap table.rt-card td,
  body.page-audit_logs .table-wrap table.rt-card td,
  body.page-users .table-wrap table.rt-card td,
  body.page-roles .table-wrap table.rt-card td,
  body.page-student_accounts_bulk .table-wrap table.rt-card td{
    display:table-cell !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
    border-bottom:1px solid var(--border) !important;
    text-align:initial;
    vertical-align:middle !important;
  }

  body.page-customer_prices .table-wrap table td::before,
  body.page-batches .table-wrap table td::before,
  body.page-audit_logs .table-wrap table td::before,
  body.page-users .table-wrap table td::before,
  body.page-roles .table-wrap table td::before,
  body.page-student_accounts_bulk .table-wrap table td::before{
    content:none !important;
    display:none !important;
  }

  body.page-audit_logs .table-wrap details pre{
    min-width:360px !important;
    max-width:70vw !important;
    overflow:auto !important;
  }

  body.page-customer_prices .muted,
  body.page-batches .muted,
  body.page-audit_logs .muted,
  body.page-users .muted,
  body.page-roles .muted,
  body.page-student_accounts_bulk .muted{
    max-width:100% !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }

  body.page-roles .perm-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }

  body.page-roles .perm-grid .chk,
  body.page-users .chk,
  body.page-roles .chk{
    max-width:100% !important;
    min-width:0 !important;
    flex-wrap:wrap !important;
  }

  body.page-student_accounts_bulk code,
  body.page-users code,
  body.page-roles code{
    white-space:nowrap !important;
  }
}

/* =========================================================
   Smooth PJAX navigation - no hard refresh between pages
   ========================================================= */
.pjax-progress{
  position:fixed;
  inset:0 0 auto 0;
  height:3px;
  z-index:2147483647;
  pointer-events:none;
  background:linear-gradient(90deg,var(--accent,#16a34a),rgba(22,163,74,.35));
  transform:scaleX(0);
  transform-origin:right center;
  opacity:0;
  transition:transform .28s ease, opacity .18s ease;
}
html.pjax-busy .pjax-progress{
  transform:scaleX(.72);
  opacity:1;
}
body.pjax-loading .main,
body.pjax-loading .student-shell,
body.pjax-loading .auth-wrap{
  cursor:progress;
}
body.pjax-loading .main > .content,
body.pjax-loading .student-shell > .content,
body.pjax-loading .auth-wrap > .container{
  opacity:.48;
  transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease;
}
body.pjax-enter .main > .content,
body.pjax-enter .student-shell > .content,
body.pjax-enter .auth-wrap > .container{
  animation:pjaxFadeIn .22s ease both;
}
@keyframes pjaxFadeIn{
  from{opacity:.3;transform:translateY(7px)}
  to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){
  .pjax-progress,
  body.pjax-loading .main > .content,
  body.pjax-loading .student-shell > .content,
  body.pjax-loading .auth-wrap > .container{
    transition:none !important;
  }
  body.pjax-enter .main > .content,
  body.pjax-enter .student-shell > .content,
  body.pjax-enter .auth-wrap > .container{
    animation:none !important;
  }
}


/* === Batch quick search dropdown fix 2026-05-12 ===
   يخفي قائمة الدفعات افتراضياً، ويفتحها فقط عند الضغط على batchQuickSearch. */
body.theme-shadcn .batch-quick,
body.theme-laravel .batch-quick,
body.theme-v4 .batch-quick{position:relative}

html.js body.theme-shadcn .batch-quick:not(.open) .batch-quick-list,
html.js body.theme-laravel .batch-quick:not(.open) .batch-quick-list,
html.js body.theme-v4 .batch-quick:not(.open) .batch-quick-list{
  display:none !important;
}

html.js body.theme-shadcn .batch-quick.open .batch-quick-list,
html.js body.theme-laravel .batch-quick.open .batch-quick-list,
html.js body.theme-v4 .batch-quick.open .batch-quick-list{
  display:flex !important;
}

body.theme-shadcn .batch-quick-top input,
body.theme-laravel .batch-quick-top input,
body.theme-v4 .batch-quick-top input{
  cursor:text;
}

body.theme-shadcn #batchQuickClear,
body.theme-laravel #batchQuickClear,
body.theme-v4 #batchQuickClear{
  white-space:nowrap;
}


/* === FINAL FIX: batchQuickSearch show/hide behavior === */
body.theme-shadcn .batch-quick,
body.theme-laravel .batch-quick,
body.theme-v4 .batch-quick,
.batch-quick{position:relative;}

html.js body.theme-shadcn .batch-quick:not(.open) .batch-quick-list,
html.js body.theme-laravel .batch-quick:not(.open) .batch-quick-list,
html.js body.theme-v4 .batch-quick:not(.open) .batch-quick-list,
html.js .batch-quick:not(.open) .batch-quick-list{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

html.js body.theme-shadcn .batch-quick.open .batch-quick-list,
html.js body.theme-laravel .batch-quick.open .batch-quick-list,
html.js body.theme-v4 .batch-quick.open .batch-quick-list,
html.js .batch-quick.open .batch-quick-list{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

.batch-quick-list.empty::after{
  content:'لا توجد نتائج مطابقة';
  display:block;
  padding:12px;
  text-align:center;
  color:var(--muted-foreground, #64748b);
  font-weight:800;
}


/* =========================================================
   Toast notifications hard fix — 2026-05-18
   - Works with theme-shadcn and theme-v4.
   - Keeps messages floating instead of appearing as plain text at page bottom.
   ========================================================= */
body.theme-v4 .toast-wrap,
body.theme-shadcn .toast-wrap,
.toast-wrap{
  position:fixed !important;
  top:24px !important;
  bottom:auto !important;
  left:24px !important;
  right:auto !important;
  z-index:2147483000 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  pointer-events:none !important;
  width:min(420px, calc(100vw - 48px)) !important;
}

body.theme-v4 .toast,
body.theme-shadcn .toast,
.toast{
  width:100% !important;
  display:block !important;
  box-sizing:border-box !important;
  background:var(--card, var(--v4-surface, #ffffff)) !important;
  color:var(--card-foreground, var(--v4-text, #0f172a)) !important;
  border:1px solid var(--border, var(--v4-border, rgba(15,23,42,.12))) !important;
  border-inline-start:4px solid var(--primary, var(--v4-primary, #65a30d)) !important;
  border-radius:18px !important;
  box-shadow:0 18px 55px rgba(2,6,23,.16) !important;
  padding:12px 12px !important;
  pointer-events:auto !important;
  transform:translateY(0) !important;
  opacity:1 !important;
  transition:transform .2s ease, opacity .2s ease !important;
}
html.dark body.theme-shadcn .toast,
html[data-theme="dark"] body.theme-shadcn .toast{
  box-shadow:0 22px 70px rgba(0,0,0,.55) !important;
}

body.theme-v4 .toast.hide,
body.theme-shadcn .toast.hide,
.toast.hide{
  transform:translateY(-8px) !important;
  opacity:0 !important;
}

body.theme-v4 .toast-head,
body.theme-shadcn .toast-head,
.toast-head{
  display:flex !important;
  align-items:flex-start !important;
  gap:10px !important;
  direction:rtl !important;
}

body.theme-v4 .toast-ic,
body.theme-shadcn .toast-ic,
.toast-ic{
  width:28px !important;
  height:28px !important;
  flex:0 0 28px !important;
  border-radius:12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:var(--accent, rgba(15,23,42,.06)) !important;
  border:1px solid var(--border, rgba(15,23,42,.08)) !important;
}

body.theme-v4 .toast-txt,
body.theme-shadcn .toast-txt,
.toast-txt{
  flex:1 !important;
  min-width:0 !important;
  text-align:right !important;
}
body.theme-v4 .toast-title,
body.theme-shadcn .toast-title,
.toast-title{
  font-weight:900 !important;
  font-size:13px !important;
  margin-bottom:2px !important;
}
body.theme-v4 .toast-msg,
body.theme-shadcn .toast-msg,
.toast-msg{
  font-weight:800 !important;
  font-size:13px !important;
  line-height:1.6 !important;
  word-break:break-word !important;
}

body.theme-v4 .toast-x,
body.theme-shadcn .toast-x,
.toast-x{
  border:0 !important;
  background:transparent !important;
  color:inherit !important;
  opacity:.62 !important;
  cursor:pointer !important;
  font-size:15px !important;
  padding:4px 7px !important;
  border-radius:12px !important;
}
body.theme-v4 .toast-x:hover,
body.theme-shadcn .toast-x:hover,
.toast-x:hover{
  opacity:1 !important;
  background:var(--accent, rgba(15,23,42,.06)) !important;
}

body.theme-v4 .toast.success,
body.theme-shadcn .toast.success,
.toast.success{border-inline-start-color:#22c55e !important;}
body.theme-v4 .toast.error,
body.theme-shadcn .toast.error,
.toast.error{border-inline-start-color:#ef4444 !important;}
body.theme-v4 .toast.warning,
body.theme-shadcn .toast.warning,
.toast.warning{border-inline-start-color:#f59e0b !important;}
body.theme-v4 .toast.info,
body.theme-shadcn .toast.info,
.toast.info{border-inline-start-color:#3b82f6 !important;}

@media (max-width:640px){
  body.theme-v4 .toast-wrap,
  body.theme-shadcn .toast-wrap,
  .toast-wrap{
    top:12px !important;
    left:12px !important;
    right:12px !important;
    width:auto !important;
  }
}

/* === Delete + mobile topbar dropdown fix (2026-05-18) === */
@media (max-width: 920px){
  body.theme-shadcn .topbar,
  body.theme-v4 .topbar,
  body.theme-laravel .topbar{
    overflow: visible !important;
  }

  body.theme-shadcn .topbar-actions,
  body.theme-v4 .topbar-actions,
  body.theme-laravel .topbar-actions{
    overflow: visible !important;
    position: relative;
    z-index: 1000;
  }

  body.theme-shadcn .theme-picker.open,
  body.theme-shadcn .user-menu.open,
  body.theme-v4 .theme-picker.open,
  body.theme-v4 .user-menu.open,
  body.theme-laravel .theme-picker.open,
  body.theme-laravel .user-menu.open{
    z-index: 1001;
  }

  body.theme-shadcn .theme-picker.open .tp-menu,
  body.theme-shadcn .user-menu.open .user-menu-dd,
  body.theme-v4 .theme-picker.open .tp-menu,
  body.theme-v4 .user-menu.open .user-menu-dd,
  body.theme-laravel .theme-picker.open .tp-menu,
  body.theme-laravel .user-menu.open .user-menu-dd{
    z-index: 9999 !important;
    min-width: min(270px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 92px);
    overflow: auto;
  }
}

@media (max-width: 520px){
  body.theme-shadcn .theme-picker.open .tp-menu,
  body.theme-shadcn .user-menu.open .user-menu-dd,
  body.theme-v4 .theme-picker.open .tp-menu,
  body.theme-v4 .user-menu.open .user-menu-dd,
  body.theme-laravel .theme-picker.open .tp-menu,
  body.theme-laravel .user-menu.open .user-menu-dd{
    position: fixed !important;
    top: 64px !important;
    inset-inline-end: 12px !important;
    inset-inline-start: auto !important;
  }
}




/* =========================================================
   Tenant subscription card inside right Sidebar - compact fixed
   ========================================================= */
.sidebar-footer .tenant-sidebar-subscription{
  width:100% !important;max-width:100% !important;margin:0 0 10px 0 !important;padding:10px !important;box-sizing:border-box !important;
  border-radius:16px !important;border:1px solid rgba(147,197,253,.28) !important;background:linear-gradient(180deg,#eef5ff 0%,#dbeafe 100%) !important;
  color:#0f172a !important;box-shadow:0 12px 26px rgba(0,0,0,.24) !important;direction:rtl !important;overflow:hidden !important;font-family:Cairo,Arial,sans-serif !important;
}
.sidebar-footer .tenant-sidebar-subscription *{box-sizing:border-box !important}
.sidebar-footer .tenant-sidebar-subscription__head{display:flex !important;align-items:center !important;justify-content:center !important;gap:7px !important;margin:0 0 9px 0 !important;color:#0f172a !important;font-weight:900 !important;font-size:13px !important;line-height:1.2 !important;white-space:nowrap !important}
.sidebar-footer .tenant-sidebar-subscription__icon{width:22px !important;height:22px !important;min-width:22px !important;max-width:22px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;border-radius:8px !important;color:#2563eb !important;background:rgba(37,99,235,.12) !important;flex:0 0 22px !important}
.sidebar-footer .tenant-sidebar-subscription__icon svg,.sidebar-footer .tenant-sidebar-subscription__user svg{width:14px !important;height:14px !important;max-width:14px !important;max-height:14px !important;display:block !important}
.sidebar-footer .tenant-sidebar-subscription__rows{margin:0 !important;display:grid !important;gap:6px !important}
.sidebar-footer .tenant-sidebar-subscription__rows > div{display:grid !important;grid-template-columns:auto 1fr !important;align-items:center !important;gap:8px !important;padding:0 !important;margin:0 !important;min-height:20px !important}
.sidebar-footer .tenant-sidebar-subscription__rows dt,.sidebar-footer .tenant-sidebar-subscription__rows dd{margin:0 !important;padding:0 !important;line-height:1.25 !important}
.sidebar-footer .tenant-sidebar-subscription__rows dt{color:#334155 !important;font-size:10.5px !important;font-weight:800 !important;white-space:nowrap !important;text-align:right !important}
.sidebar-footer .tenant-sidebar-subscription__rows dd{color:#0f172a !important;font-size:11px !important;font-weight:900 !important;text-align:left !important;direction:rtl !important;white-space:nowrap !important}
.sidebar-footer .tenant-sidebar-subscription__status{width:100% !important;margin:9px 0 0 0 !important;min-height:32px !important;padding:6px 8px !important;border-radius:13px !important;border:1px solid rgba(220,38,38,.18) !important;background:rgba(255,241,242,.96) !important;color:#b91c1c !important;display:flex !important;align-items:center !important;gap:6px !important;overflow:hidden !important}
.sidebar-footer .tenant-sidebar-subscription--ok .tenant-sidebar-subscription__status{border-color:rgba(34,197,94,.22) !important;background:rgba(240,253,244,.97) !important;color:#15803d !important}
.sidebar-footer .tenant-sidebar-subscription--warn .tenant-sidebar-subscription__status{border-color:rgba(245,158,11,.26) !important;background:rgba(255,251,235,.97) !important;color:#b45309 !important}
.sidebar-footer .tenant-sidebar-subscription--danger .tenant-sidebar-subscription__status{border-color:rgba(239,68,68,.26) !important;background:rgba(255,241,242,.97) !important;color:#b91c1c !important}
.sidebar-footer .tenant-sidebar-subscription__user{width:20px !important;height:20px !important;min-width:20px !important;max-width:20px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;flex:0 0 20px !important}
.sidebar-footer .tenant-sidebar-subscription__name{min-width:0 !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;font-size:11px !important;font-weight:900 !important}
.sidebar-footer .tenant-sidebar-subscription__badge{margin-inline-start:auto !important;padding:2px 6px !important;border-radius:999px !important;background:rgba(255,255,255,.78) !important;border:1px solid rgba(148,163,184,.24) !important;font-size:9px !important;font-weight:900 !important;white-space:nowrap !important}
body.sb-mini .sidebar-footer .tenant-sidebar-subscription{display:none !important}
@media print{.sidebar-footer .tenant-sidebar-subscription{display:none !important}}


/* =========================================================
   Fixed sidebar with independent scroll (2026-05-21)
   - الـ Sidebar ثابت في يمين الشاشة ولا يتحرك مع صفحات النظام
   - التمرير يصبح داخل الـ Sidebar نفسه
   ========================================================= */
@media (min-width: 921px){
  body.authed:not(.fs) .shell{
    display:block !important;
    position:relative !important;
    min-height:100vh !important;
    min-height:100dvh !important;
    padding:16px !important;
    gap:0 !important;
    overflow:visible !important;
  }

  body.authed:not(.fs) .sidebar{
    position:fixed !important;
    top:16px !important;
    right:16px !important;
    bottom:16px !important;
    left:auto !important;
    width:300px !important;
    height:auto !important;
    max-height:calc(100vh - 32px) !important;
    max-height:calc(100dvh - 32px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    z-index:120 !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-gutter:stable !important;
    display:flex !important;
    flex-direction:column !important;
  }

  body.authed:not(.fs) .sidebar-nav,
  body.authed:not(.fs) .sidebar-brand,
  body.authed:not(.fs) .sidebar-footer{
    flex:0 0 auto !important;
  }

  body.authed:not(.fs) .sidebar-footer{
    margin-top:auto !important;
  }

  body.authed:not(.fs) .main{
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    margin-right:316px !important;
    margin-left:0 !important;
    min-height:calc(100vh - 32px) !important;
    min-height:calc(100dvh - 32px) !important;
  }

  body.theme-v4.authed:not(.fs) .sidebar{width:300px !important;}
  body.theme-v4.authed:not(.fs) .main{margin-right:316px !important;}

  body.theme-laravel.authed:not(.fs) .sidebar{width:288px !important;}
  body.theme-laravel.authed:not(.fs) .main{margin-right:304px !important;}

  body.theme-shadcn.authed:not(.fs) .sidebar{width:260px !important;}
  body.theme-shadcn.authed:not(.fs) .main{margin-right:276px !important;}

  body.theme-v4.authed:not(.fs).sb-mini .sidebar,
  body.theme-laravel.authed:not(.fs).sb-mini .sidebar,
  body.theme-shadcn.authed:not(.fs).sb-mini .sidebar{
    width:96px !important;
  }

  body.theme-v4.authed:not(.fs).sb-mini .main,
  body.theme-laravel.authed:not(.fs).sb-mini .main,
  body.theme-shadcn.authed:not(.fs).sb-mini .main{
    margin-right:112px !important;
  }
}

@media (max-width: 920px){
  body.authed .sidebar{
    position:fixed !important;
    right:0 !important;
    top:0 !important;
    bottom:0 !important;
    left:auto !important;
    height:auto !important;
    max-height:100dvh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    z-index:200 !important;
  }
  body.authed .main{
    margin-right:0 !important;
    margin-left:0 !important;
    width:auto !important;
    max-width:none !important;
  }
}


/* === Normal Topbar scrolls with page (2026-05-21) === */
@media (min-width:921px){
  body.authed:not(.fs) .main{position:relative!important;min-width:0!important;overflow:visible!important}
  body.authed:not(.fs) .main > .topbar{
    position:relative!important;top:auto!important;z-index:80!important;
    width:100%!important;max-width:100%!important;box-sizing:border-box!important;
    margin:0 0 16px 0!important;padding:12px 14px!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;
    overflow:visible!important;border-radius:18px!important;
    background:rgba(255,255,255,.98)!important;
    border:1px solid rgba(148,163,184,.42)!important;
    box-shadow:0 14px 34px rgba(15,23,42,.08)!important;
    backdrop-filter:blur(12px) saturate(160%)!important;-webkit-backdrop-filter:blur(12px) saturate(160%)!important;
    isolation:isolate!important;
  }
  html.dark body.authed:not(.fs) .main > .topbar,
  html[data-theme="dark"] body.authed:not(.fs) .main > .topbar{
    background:rgba(2,6,23,.97)!important;border-color:rgba(51,65,85,.85)!important;box-shadow:0 14px 34px rgba(0,0,0,.22)!important;
  }
  body.authed:not(.fs) .main > .content{position:relative!important;z-index:1!important}
  body.authed:not(.fs) .topbar-titles{min-width:0!important;flex:0 1 auto!important}
  body.authed:not(.fs) .topbar .top-title{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  body.authed:not(.fs) .topbar .breadcrumbs,
  body.authed:not(.fs) .topbar .top-sub{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  body.authed:not(.fs) .top-search{flex:1 1 260px!important;min-width:180px!important;max-width:420px!important}
  body.authed:not(.fs) .topbar-actions{flex:0 0 auto!important;display:flex!important;align-items:center!important;gap:7px!important;position:relative!important;z-index:3!important}
  body.authed:not(.fs) .topbar .icon-btn,
  body.authed:not(.fs) .topbar .user-menu-btn,
  body.authed:not(.fs) .topbar .tp-trigger{height:38px!important;min-height:38px!important;border-radius:12px!important}
  body.authed:not(.fs) .qa-dd,
  body.authed:not(.fs) .tp-menu,
  body.authed:not(.fs) .user-menu-dd{z-index:9999!important}
}
@media (min-width:921px) and (max-width:1180px){
  body.authed:not(.fs) .top-search{max-width:300px!important;min-width:150px!important}
  body.authed:not(.fs) .topbar .tp-label{display:none!important}
  body.authed:not(.fs) .topbar .user-menu-name{max-width:90px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
}
@media (min-width:921px) and (max-width:1040px){
  body.authed:not(.fs) .top-search{display:none!important}
  body.authed:not(.fs) .topbar .user-menu-name{display:none!important}
  body.authed:not(.fs) .topbar{gap:8px!important;padding:10px 12px!important}
}
@media (max-width:920px){
  body.authed .main > .topbar{
    position:relative!important;top:auto!important;z-index:80!important;
    background:rgba(255,255,255,.98)!important;border-bottom:1px solid rgba(148,163,184,.38)!important;
    box-shadow:0 10px 24px rgba(15,23,42,.08)!important;overflow:visible!important;
  }
  html.dark body.authed .main > .topbar,
  html[data-theme="dark"] body.authed .main > .topbar{background:rgba(2,6,23,.97)!important;border-color:rgba(51,65,85,.85)!important}
  body.authed .topbar-actions{overflow:visible!important;position:relative!important;z-index:3!important}
  body.authed .qa-dd,body.authed .tp-menu,body.authed .user-menu-dd{z-index:9999!important}
}


/* === Topbar moves with page override (v113) === */
body.authed:not(.fs) .main > .topbar,
body.authed .main > .topbar{
  position:relative !important;
  top:auto !important;
  inset:auto !important;
  z-index:80 !important;
}


/* =========================================================
   FINAL GLOBAL RESPONSIVE + LIGHT UI FIX — all tenant/admin pages
   يمنع قصّ الواجهات على الجوال ويجعل الوضع النهاري أبيض/احترافي ومقروء.
   ========================================================= */
html,body{max-width:100%;overflow-x:hidden;}
html[data-theme="light"] body.theme-v4,
html[data-theme="light"] body.theme-laravel,
html[data-theme="light"] body.theme-shadcn,
html:not(.dark) body.theme-v4,
html:not(.dark) body.theme-laravel,
html:not(.dark) body.theme-shadcn{
  --bg0:#f8fafc;
  --bg1:#ffffff;
  --bg2:#eef2f7;
  --card:#ffffff;
  --card2:#ffffff;
  --glass:rgba(255,255,255,.82);
  --border:rgba(148,163,184,.32);
  --border2:rgba(100,116,139,.36);
  --text:#0f172a;
  --muted:#64748b;
  --muted2:#94a3b8;
  --shadow:0 16px 42px rgba(15,23,42,.08);
  --shadow2:0 22px 70px rgba(15,23,42,.12);
  color:#0f172a!important;
  background:
    radial-gradient(850px 520px at 86% -10%, rgba(var(--v4-primary-rgb,37,99,235),.10), transparent 58%),
    radial-gradient(780px 480px at 0% 12%, rgba(124,58,237,.08), transparent 58%),
    #f8fafc!important;
}
html[data-theme="light"] body.theme-v4 .shell,
html[data-theme="light"] body.theme-laravel .shell,
html[data-theme="light"] body.theme-shadcn .shell{background:transparent!important;color:#0f172a!important;}
html[data-theme="light"] body.theme-v4 .sidebar,
html[data-theme="light"] body.theme-laravel .sidebar,
html[data-theme="light"] body.theme-shadcn .sidebar{
  background:rgba(255,255,255,.96)!important;
  color:#0f172a!important;
  border-color:rgba(148,163,184,.36)!important;
  box-shadow:0 18px 44px rgba(15,23,42,.08)!important;
}
html[data-theme="light"] body.theme-v4 .sidebar::before{opacity:.12!important;mix-blend-mode:normal!important;}
html[data-theme="light"] body.theme-v4 .nav-section-title,
html[data-theme="light"] body.theme-laravel .nav-section-title,
html[data-theme="light"] body.theme-shadcn .nav-section-title{color:#94a3b8!important;}
html[data-theme="light"] body.theme-v4 .nav-item,
html[data-theme="light"] body.theme-v4 .nav-sub-item,
html[data-theme="light"] body.theme-laravel .nav-item,
html[data-theme="light"] body.theme-shadcn .nav-item{
  background:#ffffff!important;
  color:#334155!important;
  border-color:#e2e8f0!important;
  box-shadow:none!important;
}
html[data-theme="light"] body.theme-v4 .nav-item:hover,
html[data-theme="light"] body.theme-v4 .nav-sub-item:hover,
html[data-theme="light"] body.theme-laravel .nav-item:hover,
html[data-theme="light"] body.theme-shadcn .nav-item:hover{background:#f8fafc!important;color:#0f172a!important;border-color:#cbd5e1!important;}
html[data-theme="light"] body.theme-v4 .nav-item.active,
html[data-theme="light"] body.theme-v4 .nav-sub-item.active,
html[data-theme="light"] body.theme-laravel .nav-item.active,
html[data-theme="light"] body.theme-shadcn .nav-item.active{
  background:linear-gradient(135deg, rgba(var(--v4-primary-rgb,37,99,235),.12), rgba(124,58,237,.08))!important;
  color:rgb(var(--v4-primary-rgb,37,99,235))!important;
  border-color:rgba(var(--v4-primary-rgb,37,99,235),.22)!important;
}
html[data-theme="light"] body.theme-v4 .nav-item .ni,
html[data-theme="light"] body.theme-v4 .nav-sub-item .si,
html[data-theme="light"] body.theme-laravel .nav-item .ni,
html[data-theme="light"] body.theme-shadcn .nav-item .ni{background:#f8fafc!important;border-color:#e2e8f0!important;color:#64748b!important;}
html[data-theme="light"] body.theme-v4 .sidebar-title,
html[data-theme="light"] body.theme-v4 .sidebar-sub,
html[data-theme="light"] body.theme-v4 .user-name,
html[data-theme="light"] body.theme-laravel .sidebar-title,
html[data-theme="light"] body.theme-shadcn .sidebar-title{color:#0f172a!important;}
html[data-theme="light"] body.theme-v4 .user-sub,
html[data-theme="light"] body.theme-v4 .sidebar-hint{color:#64748b!important;}

html[data-theme="light"] body.theme-v4 .topbar,
html[data-theme="light"] body.theme-laravel .topbar,
html[data-theme="light"] body.theme-shadcn .topbar{
  background:rgba(255,255,255,.97)!important;
  color:#0f172a!important;
  border-color:rgba(148,163,184,.36)!important;
  box-shadow:0 12px 34px rgba(15,23,42,.07)!important;
}
html[data-theme="light"] body.theme-v4 .top-title,
html[data-theme="light"] body.theme-laravel .top-title,
html[data-theme="light"] body.theme-shadcn .top-title{color:#0f172a!important;}
html[data-theme="light"] body.theme-v4 .top-sub,
html[data-theme="light"] body.theme-laravel .top-sub,
html[data-theme="light"] body.theme-shadcn .top-sub{color:#64748b!important;}
html[data-theme="light"] body.theme-v4 .icon-btn,
html[data-theme="light"] body.theme-laravel .icon-btn,
html[data-theme="light"] body.theme-shadcn .icon-btn{
  background:#ffffff!important;color:#334155!important;border-color:#e2e8f0!important;
}

html[data-theme="light"] body.theme-v4 .main,
html[data-theme="light"] body.theme-laravel .main,
html[data-theme="light"] body.theme-shadcn .main,
html[data-theme="light"] body.theme-v4 .content,
html[data-theme="light"] body.theme-laravel .content,
html[data-theme="light"] body.theme-shadcn .content{background:transparent!important;color:#0f172a!important;min-width:0;max-width:100%;}
html[data-theme="light"] body.theme-v4 .card,
html[data-theme="light"] body.theme-laravel .card,
html[data-theme="light"] body.theme-shadcn .card,
html[data-theme="light"] body.theme-v4 .soft-card,
html[data-theme="light"] body.theme-laravel .soft-card,
html[data-theme="light"] body.theme-shadcn .soft-card,
html[data-theme="light"] body.theme-v4 .panel,
html[data-theme="light"] body.theme-laravel .panel,
html[data-theme="light"] body.theme-shadcn .panel{
  background:#ffffff!important;
  color:#0f172a!important;
  border-color:#e2e8f0!important;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 48px -36px rgba(15,23,42,.38)!important;
}
html[data-theme="light"] body.theme-v4 [class*="bg-slate-950"],
html[data-theme="light"] body.theme-v4 [class*="bg-slate-900"],
html[data-theme="light"] body.theme-v4 [class*="bg-slate-800"],
html[data-theme="light"] body.theme-laravel [class*="bg-slate-950"],
html[data-theme="light"] body.theme-laravel [class*="bg-slate-900"],
html[data-theme="light"] body.theme-laravel [class*="bg-slate-800"],
html[data-theme="light"] body.theme-shadcn [class*="bg-slate-950"],
html[data-theme="light"] body.theme-shadcn [class*="bg-slate-900"],
html[data-theme="light"] body.theme-shadcn [class*="bg-slate-800"]{
  background:#f8fafc!important;color:#0f172a!important;border-color:#e2e8f0!important;
}
html[data-theme="light"] body.theme-v4 [class*="bg-white/"],
html[data-theme="light"] body.theme-laravel [class*="bg-white/"],
html[data-theme="light"] body.theme-shadcn [class*="bg-white/"]{background:#ffffff!important;color:#0f172a!important;border-color:#e2e8f0!important;}
html[data-theme="light"] body.theme-v4 [class*="border-white/"],
html[data-theme="light"] body.theme-laravel [class*="border-white/"],
html[data-theme="light"] body.theme-shadcn [class*="border-white/"]{border-color:#e2e8f0!important;}
html[data-theme="light"] body.theme-v4 [class*="text-slate-100"],
html[data-theme="light"] body.theme-v4 [class*="text-slate-200"],
html[data-theme="light"] body.theme-laravel [class*="text-slate-100"],
html[data-theme="light"] body.theme-laravel [class*="text-slate-200"],
html[data-theme="light"] body.theme-shadcn [class*="text-slate-100"],
html[data-theme="light"] body.theme-shadcn [class*="text-slate-200"]{color:#1e293b!important;}
html[data-theme="light"] body.theme-v4 [class*="text-slate-300"],
html[data-theme="light"] body.theme-v4 [class*="text-slate-400"],
html[data-theme="light"] body.theme-laravel [class*="text-slate-300"],
html[data-theme="light"] body.theme-laravel [class*="text-slate-400"],
html[data-theme="light"] body.theme-shadcn [class*="text-slate-300"],
html[data-theme="light"] body.theme-shadcn [class*="text-slate-400"]{color:#64748b!important;}
html[data-theme="light"] body.theme-v4 [class*="text-white"],
html[data-theme="light"] body.theme-laravel [class*="text-white"],
html[data-theme="light"] body.theme-shadcn [class*="text-white"]{color:#0f172a!important;}
html[data-theme="light"] body.theme-v4 .btn-primary,
html[data-theme="light"] body.theme-laravel .btn-primary,
html[data-theme="light"] body.theme-shadcn .btn-primary{color:#fff!important;}
html[data-theme="light"] body.theme-v4 input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] body.theme-v4 select,
html[data-theme="light"] body.theme-v4 textarea,
html[data-theme="light"] body.theme-laravel input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] body.theme-laravel select,
html[data-theme="light"] body.theme-laravel textarea,
html[data-theme="light"] body.theme-shadcn input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] body.theme-shadcn select,
html[data-theme="light"] body.theme-shadcn textarea{
  background:#ffffff!important;color:#0f172a!important;border-color:#cbd5e1!important;box-shadow:none!important;
}
html[data-theme="light"] body.theme-v4 option,
html[data-theme="light"] body.theme-laravel option,
html[data-theme="light"] body.theme-shadcn option{background:#ffffff;color:#0f172a;}
.table-wrap,.overflow-x-auto{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{max-width:100%;}
.container,.content,.main,.shell{min-width:0;}
img,video,canvas{max-width:100%;height:auto;}

@media (max-width:920px){
  body.authed .shell{display:block!important;width:100%!important;max-width:100vw!important;overflow-x:hidden!important;padding:0!important;}
  body.authed .main{width:100%!important;max-width:100vw!important;margin:0!important;overflow-x:hidden!important;}
  body.authed .content{width:100%!important;max-width:100vw!important;overflow-x:hidden!important;}
  body.authed .container{width:100%!important;max-width:100vw!important;padding:12px!important;}
  body.authed .sidebar{width:min(86vw,320px)!important;max-width:86vw!important;}
  body.authed .topbar{display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;gap:10px!important;padding:12px!important;}
  body.authed .topbar-titles{min-width:0!important;flex:1 1 180px!important;}
  body.authed .topbar-actions{display:flex!important;flex-wrap:wrap!important;gap:7px!important;max-width:100%!important;}
  body.authed .row{display:flex!important;flex-direction:column!important;align-items:stretch!important;}
  body.authed .row .field, body.authed .field{min-width:0!important;width:100%!important;}
  body.authed .grid.cols-2,
  body.authed .grid.cols-3,
  body.authed .grid.cols-4,
  body.authed .grid.cols-5,
  body.authed .metrics,
  body.authed .quick-actions{grid-template-columns:minmax(0,1fr)!important;}
  body.authed [class*="grid-cols-"]{grid-template-columns:minmax(0,1fr)!important;}
  body.authed [class*="md:grid-cols"],body.authed [class*="lg:grid-cols"],body.authed [class*="xl:grid-cols"]{grid-template-columns:minmax(0,1fr)!important;}
  body.authed table{min-width:720px;}
  body.authed .table-wrap table, body.authed .overflow-x-auto table{min-width:max(720px,100%);}
}
@media (max-width:540px){
  body.authed .container{padding:10px!important;}
  body.authed .card{border-radius:18px!important;padding:14px!important;}
  body.authed .h1{font-size:18px!important;line-height:1.35!important;}
  body.authed .top-title{font-size:16px!important;line-height:1.35!important;}
  body.authed .btn, body.authed button, body.authed .icon-btn{max-width:100%;}
  body.authed input:not([type="checkbox"]):not([type="radio"]), body.authed select, body.authed textarea{width:100%!important;}
}


/* === FIX 2026-06-03: Dashboard metric numbers visibility ===
   Prevent long Arabic/Iraqi currency values from being clipped in KPI cards. */
.metrics .metric,
body.authed .metrics .metric{
  min-width:0 !important;
  overflow:hidden !important;
}
.metrics .metric .m-top,
body.authed .metrics .metric .m-top{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:10px !important;
  min-width:0 !important;
}
.metrics .metric .m-ic,
body.authed .metrics .metric .m-ic{
  flex:0 0 auto !important;
  position:relative;
  z-index:1;
}
.metrics .metric .m-val,
body.authed .metrics .metric .m-val,
body.theme-laravel .metrics .metric .m-val,
body.theme-shadcn .metrics .metric .m-val{
  flex:1 1 auto !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:visible !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  line-height:1.15 !important;
  font-size:clamp(17px, 1.28vw, 24px) !important;
  direction:ltr !important;
  unicode-bidi:isolate !important;
  text-align:start !important;
  position:relative;
  z-index:2;
}
@media (max-width:1300px){
  .metrics .metric .m-val,
  body.authed .metrics .metric .m-val,
  body.theme-laravel .metrics .metric .m-val,
  body.theme-shadcn .metrics .metric .m-val{
    font-size:clamp(16px, 1.8vw, 21px) !important;
  }
}

/* ================================
   Collapsible bulk additions tools
   Keeps the Additions Fast page clean until the user clicks the tools bar.
   ================================ */
body .fast-additions .additions-tools-panel{
  margin:12px 0 !important;
  padding:0 !important;
  border:1px solid rgba(15,118,110,.18) !important;
  border-radius:22px !important;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,255,253,.98)) !important;
  box-shadow:0 18px 50px rgba(15,23,42,.06) !important;
}
body .fast-additions .additions-tools-panel[open]{
  border-color:rgba(37,99,235,.22) !important;
  box-shadow:0 24px 70px rgba(37,99,235,.10) !important;
}
body .fast-additions .additions-tools-panel > summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  background:
    radial-gradient(circle at 12% 15%, rgba(34,197,94,.12), transparent 26%),
    linear-gradient(135deg, rgba(240,253,244,.96), rgba(239,246,255,.96));
  border:0;
  outline:0;
}
body .fast-additions .additions-tools-panel > summary::-webkit-details-marker{display:none}
body .fast-additions .bulk-tools-summary-main{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
body .fast-additions .bulk-tools-icon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:linear-gradient(135deg,#0f766e,#2563eb);
  color:#fff;
  box-shadow:0 12px 26px rgba(37,99,235,.20);
  font-size:20px;
}
body .fast-additions .bulk-tools-copy{
  display:grid;
  gap:3px;
  text-align:right;
}
body .fast-additions .bulk-tools-title{
  color:#0f172a;
  font-size:15px;
  font-weight:1000;
  letter-spacing:-.01em;
}
body .fast-additions .bulk-tools-desc{
  color:#64748b;
  font-size:12px;
  font-weight:700;
  line-height:1.55;
}
body .fast-additions .bulk-tools-summary-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
}
body .fast-additions .bulk-tools-chip,
body .fast-additions .bulk-tools-state{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:32px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(15,118,110,.14);
  background:rgba(255,255,255,.76);
  color:#0f766e;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
body .fast-additions .bulk-tools-chip.is-filtered{
  color:#1d4ed8;
  border-color:rgba(37,99,235,.18);
  background:rgba(239,246,255,.92);
}
body .fast-additions .bulk-tools-state{
  color:#fff;
  border-color:transparent;
  background:#2563eb;
  min-width:96px;
  box-shadow:0 10px 20px rgba(37,99,235,.18);
}
body .fast-additions .bulk-tools-state::before{content:'فتح الأدوات'}
body .fast-additions .additions-tools-panel[open] .bulk-tools-state::before{content:'إخفاء الأدوات'}
body .fast-additions .bulk-tools-arrow{
  width:32px;
  height:32px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.06);
  color:#0f172a;
  font-size:18px;
  font-weight:1000;
  transition:transform .18s ease, background .18s ease;
}
body .fast-additions .additions-tools-panel[open] .bulk-tools-arrow{
  transform:rotate(180deg);
  background:rgba(37,99,235,.10);
  color:#1d4ed8;
}
body .fast-additions .additions-tools-panel > summary:hover .bulk-tools-icon{
  transform:translateY(-1px);
}
body .fast-additions .additions-tools-panel > summary:focus-visible{
  box-shadow:0 0 0 4px rgba(37,99,235,.16) inset;
}
body .fast-additions .bulk-tools-body{
  padding:14px;
  border-top:1px solid rgba(15,118,110,.12);
  background:linear-gradient(180deg,#ffffff,#fbfffe);
}
body .fast-additions .additions-tools-panel[open] .bulk-tools-body{
  animation:bulkToolsSlide .18s ease both;
}
@keyframes bulkToolsSlide{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}
body .fast-additions .bulk-tools-body > .row:first-child{
  padding:10px 12px;
  border-radius:18px;
  background:rgba(248,250,252,.88);
  border:1px solid rgba(15,23,42,.06);
}
body .fast-additions .bulk-tools-body > .grid > form.card{
  border-radius:18px !important;
  border:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 12px 30px rgba(15,23,42,.045) !important;
}
@media (max-width: 900px){
  body .fast-additions .additions-tools-panel > summary{
    align-items:stretch;
    flex-direction:column;
  }
  body .fast-additions .bulk-tools-summary-meta{
    justify-content:space-between;
  }
  body .fast-additions .bulk-tools-state{flex:1}
}
html.dark body .fast-additions .additions-tools-panel,
html[data-theme="dark"] body .fast-additions .additions-tools-panel{
  background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(2,6,23,.96)) !important;
  border-color:rgba(51,65,85,.75) !important;
  box-shadow:0 24px 80px rgba(0,0,0,.34) !important;
}
html.dark body .fast-additions .additions-tools-panel > summary,
html[data-theme="dark"] body .fast-additions .additions-tools-panel > summary{
  background:linear-gradient(135deg,rgba(15,23,42,.96),rgba(30,41,59,.96));
}
html.dark body .fast-additions .bulk-tools-title,
html[data-theme="dark"] body .fast-additions .bulk-tools-title{color:#f8fafc}
html.dark body .fast-additions .bulk-tools-desc,
html[data-theme="dark"] body .fast-additions .bulk-tools-desc{color:#cbd5e1}
html.dark body .fast-additions .bulk-tools-chip,
html[data-theme="dark"] body .fast-additions .bulk-tools-chip{
  background:rgba(15,23,42,.72);
  border-color:rgba(51,65,85,.78);
  color:#a7f3d0;
}
html.dark body .fast-additions .bulk-tools-arrow,
html[data-theme="dark"] body .fast-additions .bulk-tools-arrow{
  background:rgba(148,163,184,.12);
  color:#f8fafc;
}
html.dark body .fast-additions .bulk-tools-body,
html[data-theme="dark"] body .fast-additions .bulk-tools-body{
  background:linear-gradient(180deg,rgba(15,23,42,.95),rgba(2,6,23,.95));
  border-top-color:rgba(51,65,85,.75);
}
html.dark body .fast-additions .bulk-tools-body > .row:first-child,
html[data-theme="dark"] body .fast-additions .bulk-tools-body > .row:first-child{
  background:rgba(15,23,42,.72);
  border-color:rgba(51,65,85,.72);
}

/* =========================================================
   Compact smart addition filter - فلترة الإضافات بدون مساحة كبيرة
========================================================= */
body .fast-additions .lv-toolbar-grid .lv-search{grid-column:span 4}
body .fast-additions .lv-toolbar-grid .lv-batch{grid-column:span 3}
body .fast-additions .lv-toolbar-grid .lv-addition-filter{grid-column:span 3;position:relative;z-index:25}
body .fast-additions .lv-toolbar-grid .lv-sort{grid-column:span 2}
body .fast-additions .lv-toolbar-grid .lv-apply{grid-column:span 2}
body .fast-additions .lv-toolbar-grid .lv-reset{grid-column:span 2}
body .fast-additions .lv-toolbar-grid .lv-hide{grid-column:span 3}
body .fast-additions .lv-toolbar-grid .lv-cols{grid-column:span 5}
body .fast-additions .compact-addition-filter > label{display:none!important}
body .fast-additions .smart-filter-box{position:relative;display:block;min-height:52px}
body .fast-additions .smart-filter-box > summary{
  list-style:none;
  height:52px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 11px;
  border-radius:16px;
  border:1px solid rgba(37,99,235,.16);
  background:linear-gradient(135deg,rgba(239,246,255,.96),rgba(240,253,244,.92));
  box-shadow:0 10px 24px rgba(15,23,42,.045);
  cursor:pointer;
  user-select:none;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
body .fast-additions .smart-filter-box > summary::-webkit-details-marker{display:none}
body .fast-additions .smart-filter-box > summary:hover{
  transform:translateY(-1px);
  border-color:rgba(37,99,235,.28);
  box-shadow:0 14px 30px rgba(37,99,235,.10);
}
body .fast-additions .smart-filter-icon{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(135deg,#2563eb,#0f766e);
  box-shadow:0 10px 18px rgba(37,99,235,.16);
  font-size:15px;
}
body .fast-additions .smart-filter-copy{min-width:0;display:grid;gap:2px;line-height:1.2;text-align:right;flex:1}
body .fast-additions .smart-filter-title{font-size:13px;font-weight:1000;color:#0f172a;white-space:nowrap}
body .fast-additions .smart-filter-subtitle{font-size:11px;font-weight:800;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
body .fast-additions .smart-filter-chevron{
  width:26px;
  height:26px;
  flex:0 0 26px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.72);
  color:#2563eb;
  font-weight:1000;
  transition:transform .16s ease;
}
body .fast-additions .smart-filter-box[open] > summary .smart-filter-chevron{transform:rotate(180deg)}
body .fast-additions .smart-filter-body{
  position:absolute;
  z-index:80;
  top:calc(100% + 8px);
  inset-inline:0;
  min-width:min(420px, calc(100vw - 38px));
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(37,99,235,.18);
  background:rgba(255,255,255,.98);
  box-shadow:0 28px 70px rgba(15,23,42,.18);
  backdrop-filter:blur(12px);
}
body .fast-additions .smart-filter-body label{display:block;margin-bottom:7px;font-size:12px;font-weight:1000;color:#1e293b}
body .fast-additions .smart-filter-body input{width:100%;height:44px;border-radius:14px}
body .fast-additions .smart-filter-body small{display:block;margin-top:7px;line-height:1.65;font-size:11px}
@media (max-width:1100px){
  body .fast-additions .lv-toolbar-grid .lv-search{grid-column:span 12}
  body .fast-additions .lv-toolbar-grid .lv-batch{grid-column:span 5}
  body .fast-additions .lv-toolbar-grid .lv-addition-filter{grid-column:span 5}
  body .fast-additions .lv-toolbar-grid .lv-sort{grid-column:span 2}
  body .fast-additions .lv-toolbar-grid .lv-apply,
  body .fast-additions .lv-toolbar-grid .lv-reset,
  body .fast-additions .lv-toolbar-grid .lv-hide{grid-column:span 4}
  body .fast-additions .lv-toolbar-grid .lv-cols{grid-column:span 12}
}
@media (max-width:750px){
  body .fast-additions .lv-toolbar-grid .lv-search,
  body .fast-additions .lv-toolbar-grid .lv-batch,
  body .fast-additions .lv-toolbar-grid .lv-addition-filter,
  body .fast-additions .lv-toolbar-grid .lv-sort,
  body .fast-additions .lv-toolbar-grid .lv-apply,
  body .fast-additions .lv-toolbar-grid .lv-reset,
  body .fast-additions .lv-toolbar-grid .lv-hide,
  body .fast-additions .lv-toolbar-grid .lv-cols{grid-column:span 12}
  body .fast-additions .smart-filter-body{position:relative;top:auto;inset-inline:auto;margin-top:8px;min-width:0;box-shadow:0 16px 34px rgba(15,23,42,.12)}
}
html.dark body .fast-additions .smart-filter-box > summary,
html[data-theme="dark"] body .fast-additions .smart-filter-box > summary{
  background:linear-gradient(135deg,rgba(15,23,42,.96),rgba(30,41,59,.96));
  border-color:rgba(51,65,85,.78);
  box-shadow:0 14px 34px rgba(0,0,0,.28);
}
html.dark body .fast-additions .smart-filter-title,
html[data-theme="dark"] body .fast-additions .smart-filter-title{color:#f8fafc}
html.dark body .fast-additions .smart-filter-subtitle,
html[data-theme="dark"] body .fast-additions .smart-filter-subtitle{color:#cbd5e1}
html.dark body .fast-additions .smart-filter-chevron,
html[data-theme="dark"] body .fast-additions .smart-filter-chevron{background:rgba(148,163,184,.14);color:#bfdbfe}
html.dark body .fast-additions .smart-filter-body,
html[data-theme="dark"] body .fast-additions .smart-filter-body{
  background:rgba(15,23,42,.98);
  border-color:rgba(51,65,85,.78);
  box-shadow:0 28px 70px rgba(0,0,0,.42);
}
html.dark body .fast-additions .smart-filter-body label,
html[data-theme="dark"] body .fast-additions .smart-filter-body label{color:#f8fafc}

/* =========================================================
   v120 — Pretty compact filter + elegant bulk tools strip
   - يجعل فلترة الإضافة أفقية ومرتبة ولا تأخذ مساحة كبيرة
   - يجعل أدوات الإضافات الجماعية كشريط أنيق قابل للفتح
   ========================================================= */
body .fast-additions .sticky-actions{
  border-radius:24px !important;
  padding:14px !important;
  border:1px solid rgba(226,232,240,.88) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;
  box-shadow:0 18px 48px rgba(15,23,42,.06) !important;
}
body .fast-additions .lv-toolbar-grid{
  align-items:end !important;
  gap:12px !important;
}
body .fast-additions .lv-toolbar-grid .lv-search{grid-column:span 4 !important}
body .fast-additions .lv-toolbar-grid .lv-batch{grid-column:span 4 !important}
body .fast-additions .lv-toolbar-grid .lv-addition-filter{
  grid-column:span 4 !important;
  position:relative !important;
  z-index:45 !important;
  min-width:260px !important;
}
body .fast-additions .lv-toolbar-grid .lv-sort{grid-column:span 3 !important}
body .fast-additions .lv-toolbar-grid .lv-apply{grid-column:span 3 !important}
body .fast-additions .lv-toolbar-grid .lv-reset{grid-column:span 3 !important}
body .fast-additions .lv-toolbar-grid .lv-hide{grid-column:span 3 !important}
body .fast-additions .lv-toolbar-grid .lv-cols{grid-column:span 6 !important}

body .fast-additions .compact-addition-filter > label{display:none!important}
body .fast-additions .smart-filter-pretty{
  position:relative !important;
  display:block !important;
  min-height:54px !important;
  width:100% !important;
}
body .fast-additions .smart-filter-pretty > summary{
  position:relative !important;
  list-style:none !important;
  width:100% !important;
  min-width:0 !important;
  min-height:54px !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  padding:8px 10px !important;
  border-radius:18px !important;
  overflow:hidden !important;
  border:1px solid rgba(37,99,235,.20) !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(37,99,235,.18), transparent 30%),
    radial-gradient(circle at 90% 95%, rgba(34,197,94,.16), transparent 34%),
    linear-gradient(135deg, #ffffff, #f8fbff) !important;
  box-shadow:0 14px 34px rgba(37,99,235,.09) !important;
  cursor:pointer !important;
  user-select:none !important;
  writing-mode:horizontal-tb !important;
}
body .fast-additions .smart-filter-pretty > summary::-webkit-details-marker{display:none!important}
body .fast-additions .smart-filter-pretty > summary:hover{
  border-color:rgba(37,99,235,.36) !important;
  box-shadow:0 18px 42px rgba(37,99,235,.14) !important;
  transform:translateY(-1px) !important;
}
body .fast-additions .smart-filter-pretty .smart-filter-icon{
  width:38px !important;
  height:38px !important;
  flex:0 0 38px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:14px !important;
  color:#fff !important;
  background:linear-gradient(135deg,#2563eb,#0f766e) !important;
  box-shadow:0 12px 24px rgba(37,99,235,.20) !important;
  font-size:16px !important;
  line-height:1 !important;
}
body .fast-additions .smart-filter-pretty .smart-filter-copy{
  min-width:0 !important;
  flex:1 1 auto !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-start !important;
  gap:3px !important;
  text-align:right !important;
  line-height:1.2 !important;
  writing-mode:horizontal-tb !important;
}
body .fast-additions .smart-filter-pretty .smart-filter-title,
body .fast-additions .smart-filter-pretty .smart-filter-subtitle{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  writing-mode:horizontal-tb !important;
}
body .fast-additions .smart-filter-pretty .smart-filter-title{
  font-size:13px !important;
  font-weight:1000 !important;
  color:#0f172a !important;
  letter-spacing:-.01em !important;
}
body .fast-additions .smart-filter-pretty .smart-filter-subtitle{
  font-size:11px !important;
  font-weight:800 !important;
  color:#64748b !important;
}
body .fast-additions .smart-filter-pretty .smart-filter-action{
  height:30px !important;
  padding:0 11px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#1d4ed8 !important;
  background:rgba(239,246,255,.95) !important;
  border:1px solid rgba(37,99,235,.16) !important;
  font-size:11px !important;
  font-weight:1000 !important;
  white-space:nowrap !important;
}
body .fast-additions .smart-filter-pretty .smart-filter-chevron{
  width:30px !important;
  height:30px !important;
  flex:0 0 30px !important;
  border-radius:12px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(15,23,42,.05) !important;
  color:#2563eb !important;
  font-weight:1000 !important;
  transition:transform .18s ease, background .18s ease !important;
}
body .fast-additions .smart-filter-pretty[open] > summary .smart-filter-chevron{transform:rotate(180deg) !important}
body .fast-additions .smart-filter-pretty[open] > summary .smart-filter-action{background:#2563eb !important;color:#fff !important;border-color:#2563eb !important}
body .fast-additions .smart-filter-pretty .smart-filter-body{
  position:absolute !important;
  z-index:120 !important;
  top:calc(100% + 10px) !important;
  inset-inline:0 !important;
  min-width:min(480px, calc(100vw - 40px)) !important;
  padding:14px !important;
  border-radius:22px !important;
  border:1px solid rgba(37,99,235,.20) !important;
  background:rgba(255,255,255,.98) !important;
  box-shadow:0 30px 80px rgba(15,23,42,.20) !important;
  backdrop-filter:blur(16px) !important;
}
body .fast-additions .smart-filter-pretty .smart-filter-body-head{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-bottom:12px !important;
  padding:10px 11px !important;
  border-radius:16px !important;
  background:linear-gradient(135deg,rgba(239,246,255,.9),rgba(240,253,244,.9)) !important;
  border:1px solid rgba(37,99,235,.12) !important;
}
body .fast-additions .smart-filter-pretty .smart-filter-body-icon{
  width:34px !important;
  height:34px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:13px !important;
  background:#fff !important;
  box-shadow:0 8px 18px rgba(15,23,42,.08) !important;
}
body .fast-additions .smart-filter-pretty .smart-filter-body label{
  margin:0 !important;
  display:block !important;
  font-size:13px !important;
  font-weight:1000 !important;
  color:#0f172a !important;
}
body .fast-additions .smart-filter-pretty .smart-filter-body small{
  margin:3px 0 0 !important;
  display:block !important;
  font-size:11px !important;
  font-weight:700 !important;
  line-height:1.55 !important;
  color:#64748b !important;
}
body .fast-additions .smart-filter-pretty .smart-filter-body input{
  height:48px !important;
  width:100% !important;
  border-radius:16px !important;
  font-weight:900 !important;
}

body .fast-additions .additions-tools-panel{
  margin:12px 0 10px !important;
  border-radius:24px !important;
  overflow:hidden !important;
  border:1px solid rgba(37,99,235,.15) !important;
  background:linear-gradient(180deg,#ffffff,#f8fbff) !important;
  box-shadow:0 18px 48px rgba(15,23,42,.06) !important;
}
body .fast-additions .additions-tools-panel > summary{
  min-height:68px !important;
  padding:12px 14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  border:0 !important;
  background:
    radial-gradient(circle at 96% 20%, rgba(37,99,235,.14), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,246,255,.98)) !important;
}
body .fast-additions .bulk-tools-summary-main{gap:12px !important;min-width:0 !important}
body .fast-additions .bulk-tools-icon{
  width:44px !important;
  height:44px !important;
  border-radius:16px !important;
  background:linear-gradient(135deg,#1d4ed8,#0f766e) !important;
  color:#fff !important;
  box-shadow:0 14px 30px rgba(37,99,235,.20) !important;
}
body .fast-additions .bulk-tools-copy{gap:2px !important;min-width:0 !important}
body .fast-additions .bulk-tools-title{
  font-size:16px !important;
  font-weight:1000 !important;
  color:#0f172a !important;
  white-space:nowrap !important;
}
body .fast-additions .bulk-tools-desc{
  font-size:12px !important;
  font-weight:800 !important;
  color:#64748b !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:520px !important;
}
body .fast-additions .bulk-tools-summary-meta{gap:8px !important;flex-wrap:nowrap !important}
body .fast-additions .bulk-tools-chip,
body .fast-additions .bulk-tools-state{
  height:34px !important;
  border-radius:999px !important;
  padding:0 13px !important;
  font-size:12px !important;
  font-weight:1000 !important;
}
body .fast-additions .bulk-tools-state{
  min-width:98px !important;
  background:linear-gradient(135deg,#2563eb,#1d4ed8) !important;
  box-shadow:0 12px 24px rgba(37,99,235,.20) !important;
}
body .fast-additions .bulk-tools-state::before{content:'فتح اللوحة' !important}
body .fast-additions .additions-tools-panel[open] .bulk-tools-state::before{content:'إغلاق اللوحة' !important}
body .fast-additions .bulk-tools-arrow{background:rgba(37,99,235,.09) !important;color:#1d4ed8 !important}
body .fast-additions .additions-tools-panel[open]{border-color:rgba(37,99,235,.30) !important;box-shadow:0 24px 70px rgba(37,99,235,.12) !important}

@media (max-width:1100px){
  body .fast-additions .lv-toolbar-grid .lv-search,
  body .fast-additions .lv-toolbar-grid .lv-batch,
  body .fast-additions .lv-toolbar-grid .lv-addition-filter{grid-column:span 12 !important;min-width:0 !important}
  body .fast-additions .lv-toolbar-grid .lv-sort,
  body .fast-additions .lv-toolbar-grid .lv-apply,
  body .fast-additions .lv-toolbar-grid .lv-reset,
  body .fast-additions .lv-toolbar-grid .lv-hide{grid-column:span 6 !important}
  body .fast-additions .lv-toolbar-grid .lv-cols{grid-column:span 12 !important}
  body .fast-additions .bulk-tools-desc{max-width:360px !important}
}
@media (max-width:760px){
  body .fast-additions .lv-toolbar-grid .lv-sort,
  body .fast-additions .lv-toolbar-grid .lv-apply,
  body .fast-additions .lv-toolbar-grid .lv-reset,
  body .fast-additions .lv-toolbar-grid .lv-hide{grid-column:span 12 !important}
  body .fast-additions .smart-filter-pretty .smart-filter-action{display:none !important}
  body .fast-additions .smart-filter-pretty .smart-filter-body{position:relative !important;top:auto !important;inset-inline:auto !important;min-width:0 !important;margin-top:8px !important;box-shadow:0 18px 44px rgba(15,23,42,.12) !important}
  body .fast-additions .additions-tools-panel > summary{align-items:stretch !important;flex-direction:column !important}
  body .fast-additions .bulk-tools-summary-meta{width:100% !important;justify-content:space-between !important;flex-wrap:wrap !important}
  body .fast-additions .bulk-tools-state{flex:1 !important}
  body .fast-additions .bulk-tools-desc{max-width:100% !important;white-space:normal !important}
}

html.dark body .fast-additions .sticky-actions,
html[data-theme="dark"] body .fast-additions .sticky-actions{
  border-color:rgba(51,65,85,.78) !important;
  background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(2,6,23,.96)) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.34) !important;
}
html.dark body .fast-additions .smart-filter-pretty > summary,
html[data-theme="dark"] body .fast-additions .smart-filter-pretty > summary,
html.dark body .fast-additions .additions-tools-panel > summary,
html[data-theme="dark"] body .fast-additions .additions-tools-panel > summary{
  background:linear-gradient(135deg,rgba(15,23,42,.98),rgba(30,41,59,.98)) !important;
  border-color:rgba(51,65,85,.78) !important;
}
html.dark body .fast-additions .smart-filter-pretty .smart-filter-title,
html[data-theme="dark"] body .fast-additions .smart-filter-pretty .smart-filter-title,
html.dark body .fast-additions .bulk-tools-title,
html[data-theme="dark"] body .fast-additions .bulk-tools-title{color:#f8fafc !important}
html.dark body .fast-additions .smart-filter-pretty .smart-filter-subtitle,
html[data-theme="dark"] body .fast-additions .smart-filter-pretty .smart-filter-subtitle,
html.dark body .fast-additions .bulk-tools-desc,
html[data-theme="dark"] body .fast-additions .bulk-tools-desc{color:#cbd5e1 !important}
html.dark body .fast-additions .smart-filter-pretty .smart-filter-body,
html[data-theme="dark"] body .fast-additions .smart-filter-pretty .smart-filter-body,
html.dark body .fast-additions .additions-tools-panel,
html[data-theme="dark"] body .fast-additions .additions-tools-panel{
  background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(2,6,23,.98)) !important;
  border-color:rgba(51,65,85,.78) !important;
}
html.dark body .fast-additions .smart-filter-pretty .smart-filter-body-head,
html[data-theme="dark"] body .fast-additions .smart-filter-pretty .smart-filter-body-head{
  background:rgba(15,23,42,.72) !important;
  border-color:rgba(51,65,85,.72) !important;
}
html.dark body .fast-additions .smart-filter-pretty .smart-filter-body label,
html[data-theme="dark"] body .fast-additions .smart-filter-pretty .smart-filter-body label{color:#f8fafc !important}


/* =========================================================
   Pretty inline addition filter - تصميم مختصر بدون فتح/إغلاق
   ========================================================= */
body .fast-additions .compact-addition-filter{
  position:relative !important;
  z-index:20 !important;
  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
  direction:rtl !important;
}
body .fast-additions .compact-addition-filter > label{
  display:block !important;
  margin:0 0 6px !important;
  color:#475569 !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  writing-mode:horizontal-tb !important;
}
body .fast-additions .addition-filter-inline{
  height:48px !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  width:100% !important;
  padding:5px 8px 5px 6px !important;
  border-radius:18px !important;
  border:1px solid rgba(37,99,235,.16) !important;
  background:linear-gradient(135deg,#ffffff,#f8fbff) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.045) !important;
  overflow:hidden !important;
}
body .fast-additions .addition-filter-inline:focus-within{
  border-color:rgba(37,99,235,.42) !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.10), 0 14px 30px rgba(37,99,235,.10) !important;
}
body .fast-additions .addition-filter-inline.has-value{
  border-color:rgba(15,118,110,.30) !important;
  background:linear-gradient(135deg,#f0fdfa,#eff6ff) !important;
}
body .fast-additions .addition-filter-icon{
  width:36px !important;
  height:36px !important;
  flex:0 0 36px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:14px !important;
  color:#fff !important;
  background:linear-gradient(135deg,#2563eb,#0f766e) !important;
  box-shadow:0 10px 18px rgba(37,99,235,.16) !important;
  font-size:15px !important;
  line-height:1 !important;
}
body .fast-additions .addition-filter-inline input{
  flex:1 1 auto !important;
  min-width:0 !important;
  width:100% !important;
  height:36px !important;
  padding:0 4px !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:14px !important;
  font-weight:900 !important;
  color:#0f172a !important;
  text-align:right !important;
  direction:rtl !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  writing-mode:horizontal-tb !important;
}
body .fast-additions .addition-filter-inline input::placeholder{
  color:#94a3b8 !important;
  font-weight:800 !important;
}
body .fast-additions .addition-filter-clear{
  width:30px !important;
  height:30px !important;
  flex:0 0 30px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:12px !important;
  background:rgba(239,68,68,.10) !important;
  color:#dc2626 !important;
  text-decoration:none !important;
  font-size:18px !important;
  font-weight:1000 !important;
  line-height:1 !important;
}
body .fast-additions .addition-filter-clear:hover{
  background:#dc2626 !important;
  color:#fff !important;
}
body .fast-additions .smart-filter-box,
body .fast-additions .smart-filter-pretty,
body .fast-additions .smart-filter-body{
  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
}

/* شريط الإجراءات الجماعية بشكل أنظف وأقل كتابة */
body .fast-additions .additions-tools-panel > summary{
  min-height:54px !important;
  padding:10px 14px !important;
}
body .fast-additions .bulk-tools-icon{
  width:38px !important;
  height:38px !important;
  flex-basis:38px !important;
  border-radius:14px !important;
  font-size:17px !important;
}
body .fast-additions .bulk-tools-title{font-size:15px !important}
body .fast-additions .bulk-tools-desc{display:none !important}
body .fast-additions .bulk-tools-state::before{content:'فتح' !important}
body .fast-additions .additions-tools-panel[open] .bulk-tools-state::before{content:'إغلاق' !important}
body .fast-additions .bulk-tools-chip,
body .fast-additions .bulk-tools-state{
  height:30px !important;
  padding:0 11px !important;
  font-size:11px !important;
}
body .fast-additions .bulk-tools-state{min-width:64px !important}

@media (max-width:1100px){
  body .fast-additions .lv-toolbar-grid .lv-addition-filter{grid-column:span 12 !important}
}
@media (max-width:760px){
  body .fast-additions .addition-filter-inline{height:46px !important;border-radius:16px !important}
  body .fast-additions .addition-filter-icon{width:34px !important;height:34px !important;flex-basis:34px !important}
}
html.dark body .fast-additions .compact-addition-filter > label,
html[data-theme="dark"] body .fast-additions .compact-addition-filter > label{color:#cbd5e1 !important}
html.dark body .fast-additions .addition-filter-inline,
html[data-theme="dark"] body .fast-additions .addition-filter-inline{
  border-color:rgba(51,65,85,.78) !important;
  background:linear-gradient(135deg,rgba(15,23,42,.98),rgba(30,41,59,.98)) !important;
  box-shadow:0 18px 46px rgba(0,0,0,.28) !important;
}
html.dark body .fast-additions .addition-filter-inline.has-value,
html[data-theme="dark"] body .fast-additions .addition-filter-inline.has-value{
  border-color:rgba(45,212,191,.28) !important;
  background:linear-gradient(135deg,rgba(15,23,42,.98),rgba(17,94,89,.36)) !important;
}
html.dark body .fast-additions .addition-filter-inline input,
html[data-theme="dark"] body .fast-additions .addition-filter-inline input{color:#f8fafc !important}

/* =========================================================
   v121 — مستطيل جميل لفلتر الإضافة، ثابت بدون فتح/إغلاق
   ========================================================= */
body .fast-additions .lv-toolbar-grid{
  align-items:end !important;
}
body .fast-additions .lv-toolbar-grid .rectangle-filter-field,
body .fast-additions .lv-toolbar-grid .lv-addition-filter{
  grid-column:span 4 !important;
  min-width:260px !important;
  width:100% !important;
  max-width:none !important;
  display:block !important;
  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
  direction:rtl !important;
  align-self:end !important;
}
body .fast-additions .rectangle-filter-field > label,
body .fast-additions .compact-addition-filter > label{
  display:none !important;
}
body .fast-additions .rectangle-addition-filter,
body .fast-additions .addition-filter-inline{
  width:100% !important;
  min-width:0 !important;
  height:52px !important;
  min-height:52px !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  padding:0 14px !important;
  border-radius:16px !important;
  border:1px solid rgba(37,99,235,.20) !important;
  background:linear-gradient(135deg,#ffffff 0%,#f8fbff 55%,#eff6ff 100%) !important;
  box-shadow:0 10px 26px rgba(15,23,42,.055) !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
  direction:rtl !important;
}
body .fast-additions .rectangle-addition-filter:focus-within,
body .fast-additions .addition-filter-inline:focus-within{
  border-color:rgba(37,99,235,.55) !important;
  background:#fff !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.10),0 16px 34px rgba(37,99,235,.12) !important;
}
body .fast-additions .rectangle-addition-filter.has-value,
body .fast-additions .addition-filter-inline.has-value{
  border-color:rgba(22,163,74,.35) !important;
  background:linear-gradient(135deg,#f0fdf4 0%,#eff6ff 100%) !important;
}
body .fast-additions .addition-filter-icon{
  width:34px !important;
  height:34px !important;
  flex:0 0 34px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:12px !important;
  color:#fff !important;
  background:linear-gradient(135deg,#2563eb,#16a34a) !important;
  box-shadow:0 10px 20px rgba(37,99,235,.16) !important;
  font-size:15px !important;
  line-height:1 !important;
  writing-mode:horizontal-tb !important;
}
body .fast-additions .addition-filter-caption{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  height:28px !important;
  padding:0 10px !important;
  border-radius:999px !important;
  background:rgba(37,99,235,.08) !important;
  color:#1d4ed8 !important;
  font-size:12px !important;
  font-weight:1000 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  writing-mode:horizontal-tb !important;
}
body .fast-additions .rectangle-addition-filter input,
body .fast-additions .addition-filter-inline input{
  flex:1 1 auto !important;
  min-width:80px !important;
  width:100% !important;
  height:40px !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#0f172a !important;
  font-size:15px !important;
  font-weight:900 !important;
  text-align:right !important;
  direction:rtl !important;
  line-height:40px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
}
body .fast-additions .rectangle-addition-filter input::placeholder,
body .fast-additions .addition-filter-inline input::placeholder{
  color:#94a3b8 !important;
  font-size:14px !important;
  font-weight:800 !important;
}
body .fast-additions .addition-filter-clear{
  width:30px !important;
  height:30px !important;
  flex:0 0 30px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:10px !important;
  background:rgba(239,68,68,.10) !important;
  color:#dc2626 !important;
  text-decoration:none !important;
  font-size:19px !important;
  font-weight:1000 !important;
  line-height:1 !important;
  writing-mode:horizontal-tb !important;
}
body .fast-additions .addition-filter-clear:hover{
  background:#dc2626 !important;
  color:#fff !important;
}
@media (min-width:1201px){
  body .fast-additions .lv-toolbar-grid .lv-search{grid-column:span 4 !important}
  body .fast-additions .lv-toolbar-grid .lv-batch{grid-column:span 4 !important}
  body .fast-additions .lv-toolbar-grid .lv-addition-filter{grid-column:span 4 !important}
  body .fast-additions .lv-toolbar-grid .lv-sort{grid-column:span 3 !important}
  body .fast-additions .lv-toolbar-grid .lv-apply{grid-column:span 3 !important}
  body .fast-additions .lv-toolbar-grid .lv-reset{grid-column:span 3 !important}
  body .fast-additions .lv-toolbar-grid .lv-hide{grid-column:span 3 !important}
}
@media (max-width:1200px){
  body .fast-additions .lv-toolbar-grid .lv-addition-filter{grid-column:span 12 !important;min-width:0 !important}
}
@media (max-width:760px){
  body .fast-additions .rectangle-addition-filter,
  body .fast-additions .addition-filter-inline{height:48px !important;min-height:48px !important;border-radius:14px !important;padding:0 10px !important}
  body .fast-additions .addition-filter-caption{display:none !important}
}
html.dark body .fast-additions .rectangle-addition-filter,
html[data-theme="dark"] body .fast-additions .rectangle-addition-filter,
html.dark body .fast-additions .addition-filter-inline,
html[data-theme="dark"] body .fast-additions .addition-filter-inline{
  border-color:rgba(71,85,105,.78) !important;
  background:linear-gradient(135deg,rgba(15,23,42,.98),rgba(30,41,59,.98)) !important;
  box-shadow:0 18px 46px rgba(0,0,0,.28) !important;
}
html.dark body .fast-additions .rectangle-addition-filter.has-value,
html[data-theme="dark"] body .fast-additions .rectangle-addition-filter.has-value,
html.dark body .fast-additions .addition-filter-inline.has-value,
html[data-theme="dark"] body .fast-additions .addition-filter-inline.has-value{
  border-color:rgba(74,222,128,.30) !important;
  background:linear-gradient(135deg,rgba(15,23,42,.98),rgba(20,83,45,.40)) !important;
}
html.dark body .fast-additions .addition-filter-caption,
html[data-theme="dark"] body .fast-additions .addition-filter-caption{
  background:rgba(59,130,246,.16) !important;
  color:#bfdbfe !important;
}
html.dark body .fast-additions .rectangle-addition-filter input,
html[data-theme="dark"] body .fast-additions .rectangle-addition-filter input,
html.dark body .fast-additions .addition-filter-inline input,
html[data-theme="dark"] body .fast-additions .addition-filter-inline input{color:#f8fafc !important}

/* نقل طلاب محددين بين الدفعات — إضافة مفرد */
.fast-additions .move-students-card{
  grid-column:1 / -1;
  border:1px solid rgba(37,99,235,.22);
  background:linear-gradient(145deg,rgba(239,246,255,.94),rgba(255,255,255,.98));
}
.fast-additions .move-selection-status{
  min-height:42px;
  display:flex;
  align-items:center;
  padding:9px 11px;
  border:1px dashed rgba(37,99,235,.35);
  border-radius:12px;
  color:#174ea6;
  background:rgba(255,255,255,.72);
  font-weight:800;
  font-size:.88rem;
}
.fast-additions .move-select-column{
  width:46px;
  min-width:46px;
  text-align:center;
}
.fast-additions .move-select-column input{
  width:18px;
  height:18px;
  cursor:pointer;
  vertical-align:middle;
  accent-color:#2563eb;
}
html.dark .fast-additions .move-students-card,
html[data-theme="dark"] .fast-additions .move-students-card{
  background:linear-gradient(145deg,rgba(30,58,138,.20),rgba(15,23,42,.95));
  border-color:rgba(96,165,250,.35);
}
html.dark .fast-additions .move-selection-status,
html[data-theme="dark"] .fast-additions .move-selection-status{
  color:#bfdbfe;
  background:rgba(15,23,42,.72);
  border-color:rgba(96,165,250,.4);
}