/* 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:flex-start;justify-content:space-between;gap:10px}
.metric .m-ic{
  flex:0 0 auto;
  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;line-height:1.15;white-space:normal;overflow-wrap:anywhere;word-break:break-word;min-width:0;max-width:100%;font-variant-numeric:tabular-nums;flex:1 1 auto}
.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:18px;
  inset-inline-start:18px;
  z-index:9999;
  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}

/* 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:6px;padding:6px;border-radius:18px;border:1px solid transparent;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease}
body.theme-shadcn .nav-group:hover{background:rgba(255,255,255,.02)}
body.theme-shadcn .nav-group.open{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(var(--orc-primary-rgb),.05));border-color:rgba(var(--orc-primary-rgb),.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
body.theme-shadcn .nav-group-toggle{width:100%;text-align:right;cursor:pointer;min-height:50px;padding-inline:14px;border-radius:14px}
body.theme-shadcn .nav-group.open .nav-group-toggle,
body.theme-shadcn .nav-group-toggle.active{background:rgba(var(--orc-primary-rgb),.10);border-color:rgba(var(--orc-primary-rgb),.22);color:var(--sidebar-foreground)}
body.theme-shadcn .nav-group-toggle .chev{margin-inline-start:auto;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);opacity:.78;transition:transform .18s ease,background .18s ease,border-color .18s ease}
body.theme-shadcn .nav-group.open .nav-group-toggle .chev{transform:rotate(180deg);opacity:.96;background:rgba(var(--orc-primary-rgb),.12);border-color:rgba(var(--orc-primary-rgb),.20)}
body.theme-shadcn .nav-sub{display:none;flex-direction:column;gap:8px;margin-inline-start:8px;padding:10px 10px 6px 18px;border-inline-start:1px solid rgba(var(--orc-primary-rgb),.18);border-radius:14px;background:rgba(255,255,255,.02)}
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:42px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  color:rgba(244,244,245,.78);
  font-weight:800;
  transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;
}
body.theme-shadcn .nav-sub-item:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);color:var(--sidebar-foreground)}
body.theme-shadcn .nav-sub-item.active{background:linear-gradient(180deg, rgba(var(--orc-primary-rgb),.20), rgba(var(--orc-primary-rgb),.10));border-color:rgba(var(--orc-primary-rgb),.28);box-shadow:0 10px 28px rgba(15,23,42,.18);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-top{align-items:flex-start;gap:12px}
body.theme-shadcn .metrics .metric .m-val{font-size:clamp(20px, 1.65vw, 25px);font-weight:900;color:var(--foreground);line-height:1.12;letter-spacing:-.02em;max-width:100%}
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{position:relative}
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;
}
html.js body.theme-shadcn .batch-quick-list{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  right:0;
  inset-inline:0;
  z-index:90;
  max-height:min(58vh, 520px);
  padding:12px;
  border:1px solid var(--border);
  border-radius:22px;
  background:rgba(255,255,255,.96);
  box-shadow:0 28px 80px rgba(15,23,42,.16);
  backdrop-filter:blur(14px);
}
html.js body.theme-shadcn .batch-quick.open .batch-quick-list,
html.js body.theme-shadcn .batch-quick:focus-within .batch-quick-list{display:flex}
html.dark html.js body.theme-shadcn .batch-quick-list,
html[data-theme="dark"] html.js body.theme-shadcn .batch-quick-list{background:rgba(9,9,11,.97);border-color:rgba(255,255,255,.08);box-shadow:0 32px 90px rgba(0,0,0,.45)}
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;
  }
}


/* =========================================================
   Theme Shadcn — Sidebar refinement + dashboard amount fit
   - Makes sidebar closer to the reference compact/floating style
   - Prevents dashboard money values from clipping in metric cards
   ========================================================= */

body.theme-shadcn .sidebar{
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(var(--orc-primary-rgb),.18), transparent 42%),
    linear-gradient(180deg, #101114 0%, #0b0c10 56%, #08090c 100%) !important;
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.02);
}
body.theme-shadcn .sidebar::before{
  content:"";
  position:absolute;
  inset:14px 12px auto;
  height:88px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(var(--orc-primary-rgb),.10), transparent 75%);
  pointer-events:none;
  opacity:.7;
}
body.theme-shadcn .sidebar-brand,
body.theme-shadcn .sidebar-nav,
body.theme-shadcn .sidebar-footer{position:relative;z-index:1}
body.theme-shadcn .sidebar-brand{padding:6px 4px 12px}
body.theme-shadcn .sidebar-logo{
  background:linear-gradient(145deg, rgba(255,255,255,.10), rgba(var(--orc-primary-rgb),.12));
  border-color:rgba(255,255,255,.10);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}
body.theme-shadcn .sidebar-title{font-size:15px;line-height:1.2}
body.theme-shadcn .sidebar-sub{font-size:11px;color:rgba(255,255,255,.62)}
body.theme-shadcn .sb-mini-btn{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 8px 22px rgba(0,0,0,.16);
}
body.theme-shadcn .nav-section{display:flex;flex-direction:column;gap:6px}
body.theme-shadcn .nav-section + .nav-section{margin-top:8px}
body.theme-shadcn .nav-section-title{
  padding:8px 12px 4px;
  color:rgba(255,255,255,.42);
  font-size:10px;
  letter-spacing:.14em;
}
body.theme-shadcn .sidebar-nav{gap:8px}
body.theme-shadcn .nav-item{
  min-height:48px;
  padding:11px 14px;
  border-radius:16px;
  color:rgba(244,244,245,.84);
}
body.theme-shadcn .nav-item:hover{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.06);
}
body.theme-shadcn .nav-item .ni{
  width:22px;
  height:22px;
  flex:0 0 22px;
}
body.theme-shadcn .nav-item .nt{font-size:15px;font-weight:800}
body.theme-shadcn .nav-item.active{
  background:linear-gradient(135deg, rgba(var(--orc-primary-rgb),.92), rgba(var(--orc-primary-rgb),.72));
  color:#fff;
  border-color:rgba(255,255,255,.08);
  box-shadow:0 18px 38px rgba(var(--orc-primary-rgb),.22);
}
body.theme-shadcn .nav-item.active .ni,
body.theme-shadcn .nav-item.active .nt{color:inherit}
body.theme-shadcn .nav-badge{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}
body.theme-shadcn .nav-group{
  position:relative;
  gap:8px;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
}
body.theme-shadcn .nav-group:hover,
body.theme-shadcn .nav-group.open{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}
body.theme-shadcn .nav-group-toggle{
  min-height:52px;
  padding-inline:16px;
  border-radius:18px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.02);
}
body.theme-shadcn .nav-group-toggle:hover{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.06);
}
body.theme-shadcn .nav-group.open .nav-group-toggle,
body.theme-shadcn .nav-group-toggle.active{
  background:linear-gradient(135deg, rgba(var(--orc-primary-rgb),.92), rgba(var(--orc-primary-rgb),.70));
  border-color:rgba(255,255,255,.08);
  color:#fff;
  box-shadow:0 18px 38px rgba(var(--orc-primary-rgb),.22);
}
body.theme-shadcn .nav-group-toggle .chev{
  width:26px;
  height:26px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.08);
}
body.theme-shadcn .nav-group.open .nav-group-toggle .chev,
body.theme-shadcn .nav-group-toggle.active .chev{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.16);
}
body.theme-shadcn .nav-sub{
  position:relative;
  display:none;
  gap:8px;
  margin:0 18px 0 6px;
  padding:8px 0 4px 18px;
  background:transparent;
  border:none;
  border-radius:0;
}
body.theme-shadcn .nav-sub::before{
  content:"";
  position:absolute;
  inset-inline-start:8px;
  top:8px;
  bottom:10px;
  width:1px;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
}
body.theme-shadcn .nav-group.open .nav-sub{display:flex}
body.theme-shadcn .nav-sub-item{
  position:relative;
  min-height:40px;
  padding:10px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.025);
  border:1px solid transparent;
  color:rgba(244,244,245,.76);
}
body.theme-shadcn .nav-sub-item::before{
  content:"";
  position:absolute;
  inset-inline-start:-10px;
  top:50%;
  width:10px;
  height:1px;
  background:rgba(255,255,255,.16);
  transform:translateY(-50%);
}
body.theme-shadcn .nav-sub-item:hover{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.08);
}
body.theme-shadcn .nav-sub-item.active{
  background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(var(--orc-primary-rgb),.18));
  border-color:rgba(255,255,255,.10);
  color:#fff;
  box-shadow:0 14px 28px rgba(0,0,0,.18);
}
body.theme-shadcn .nav-sub-item .si{
  width:20px;
  height:20px;
  flex:0 0 20px;
}
body.theme-shadcn .sidebar-footer{padding-top:14px}
body.theme-shadcn .user-pill{
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
  border-color:rgba(255,255,255,.08);
  box-shadow:0 16px 30px rgba(0,0,0,.18);
}
body.theme-shadcn .sidebar-hint{color:rgba(255,255,255,.42)}

/* Collapsed sidebar: floating submenu panel similar to the reference */
body.theme-shadcn.sb-mini .sidebar{
  width:96px;
  flex-basis:96px;
  padding:16px 10px 14px;
}
body.theme-shadcn.sb-mini .sidebar-brand{justify-content:center;padding-inline:0}
body.theme-shadcn.sb-mini .sidebar .sidebar-brand-text,
body.theme-shadcn.sb-mini .sidebar .nav-section-title,
body.theme-shadcn.sb-mini .sidebar .nt,
body.theme-shadcn.sb-mini .sidebar .nav-badge,
body.theme-shadcn.sb-mini .sidebar .user-meta,
body.theme-shadcn.sb-mini .sidebar .sidebar-hint{display:none !important}
body.theme-shadcn.sb-mini .sidebar-nav{gap:10px}
body.theme-shadcn.sb-mini .nav-section{gap:8px}
body.theme-shadcn.sb-mini .nav-item,
body.theme-shadcn.sb-mini .nav-group-toggle{
  justify-content:center;
  padding:12px;
  min-height:50px;
  border-radius:18px;
}
body.theme-shadcn.sb-mini .nav-item .ni,
body.theme-shadcn.sb-mini .nav-group-toggle .ni{margin:0}
body.theme-shadcn.sb-mini .nav-group-toggle .chev{display:none}
body.theme-shadcn.sb-mini .nav-group{position:relative}
body.theme-shadcn.sb-mini .nav-sub{
  position:absolute;
  top:0;
  inset-inline-end:calc(100% + 14px);
  min-width:240px;
  margin:0;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(17,17,20,.98), rgba(12,12,15,.96));
  box-shadow:0 24px 60px rgba(0,0,0,.42);
  backdrop-filter:blur(16px);
  z-index:260;
}
body.theme-shadcn.sb-mini .nav-sub::before{
  display:block;
  inset-inline-start:auto;
  inset-inline-end:-10px;
  top:18px;
  bottom:auto;
  width:10px;
  height:10px;
  background:linear-gradient(135deg, rgba(17,17,20,.98), rgba(12,12,15,.96));
  border-inline-end:1px solid rgba(255,255,255,.10);
  border-top:1px solid rgba(255,255,255,.10);
  transform:rotate(45deg);
}
body.theme-shadcn.sb-mini .nav-group:hover .nav-sub,
body.theme-shadcn.sb-mini .nav-group:focus-within .nav-sub,
body.theme-shadcn.sb-mini .nav-group.open .nav-sub{display:flex !important}
body.theme-shadcn.sb-mini .nav-sub-item::before{display:none}
body.theme-shadcn.sb-mini .sidebar-footer{padding-top:10px}
body.theme-shadcn.sb-mini .user-pill{
  justify-content:center;
  padding:10px;
  border-radius:16px;
}
body.theme-shadcn.sb-mini .user-avatar{margin:0}

/* Dashboard money metrics */
.metrics .metric.metric-money .m-val.money-val{
  display:flex;
  align-items:flex-end;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
  max-width:100%;
  direction:ltr;
  unicode-bidi:isolate;
  white-space:normal;
}
.metrics .metric.metric-money .amount-number{
  display:inline-block;
  min-width:0;
  max-width:100%;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1, "lnum" 1;
  white-space:nowrap;
}
.metrics .metric.metric-money .amount-currency{
  display:inline-block;
  white-space:nowrap;
  font-weight:800;
  line-height:1.1;
  opacity:.82;
}
body.theme-shadcn .metrics .metric.metric-money .m-top{
  position:relative;
  display:block;
  min-height:44px;
  padding-inline-end:54px;
}
body.theme-shadcn .metrics .metric.metric-money .m-ic{
  position:absolute;
  inset-inline-end:0;
  top:0;
}
body.theme-shadcn .metrics .metric.metric-money .m-val.money-val{
  padding-top:2px;
  justify-content:flex-start;
}
body.theme-shadcn .metrics .metric.metric-money .amount-number{
  font-size:clamp(17px, 1.3vw, 24px);
  letter-spacing:-.015em;
}
body.theme-shadcn .metrics .metric.metric-money .amount-currency{
  font-size:clamp(12px, .78vw, 14px);
  transform:translateY(-1px);
}
body.theme-laravel .metrics .metric.metric-money .m-val.money-val,
body.theme-v4 .metrics .metric.metric-money .m-val.money-val{
  display:flex;
  align-items:flex-end;
  gap:8px;
  flex-wrap:wrap;
  direction:ltr;
  unicode-bidi:isolate;
}
body.theme-laravel .metrics .metric.metric-money .amount-number,
body.theme-v4 .metrics .metric.metric-money .amount-number{
  font-size:clamp(18px, 1.45vw, 24px);
  white-space:nowrap;
}
body.theme-laravel .metrics .metric.metric-money .amount-currency,
body.theme-v4 .metrics .metric.metric-money .amount-currency{
  font-size:13px;
  font-weight:800;
  opacity:.82;
}
@media (max-width: 1200px){
  body.theme-shadcn .metrics .metric.metric-money .amount-number{font-size:clamp(16px, 2vw, 22px)}
}
@media (max-width: 980px){
  body.theme-shadcn.sb-mini .nav-sub{
    position:static;
    min-width:0;
    inset-inline-end:auto;
    margin:0 18px 0 6px;
    padding:8px 0 4px 18px;
    border:none;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
  }
  body.theme-shadcn.sb-mini .nav-sub::before{
    inset-inline-start:8px;
    inset-inline-end:auto;
    top:8px;
    bottom:10px;
    width:1px;
    height:auto;
    border:none;
    background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
    transform:none;
  }
}
@media (max-width: 720px){
  body.theme-shadcn .nav-item .nt{font-size:14px}
  body.theme-shadcn .metrics .metric.metric-money .m-top{padding-inline-end:48px}
  body.theme-shadcn .metrics .metric.metric-money .amount-number{font-size:clamp(15px, 3.9vw, 20px)}
}


/* =========================================================
   2026-03-18 - final responsive rescue (theme-shadcn)
   Covers ultra-small phones up to wide desktops.
   ========================================================= */

body.theme-shadcn,
body.theme-shadcn .main,
body.theme-shadcn .content,
body.theme-shadcn .container,
body.theme-shadcn .card,
body.theme-shadcn .toolbar,
body.theme-shadcn .table-wrap,
body.theme-shadcn .grid > *,
body.theme-shadcn .row > *,
body.theme-shadcn .topbar > *,
body.theme-shadcn .chat-window > *,
body.theme-shadcn .threads-card > *{min-width:0}

body.theme-shadcn img,
body.theme-shadcn svg,
body.theme-shadcn video,
body.theme-shadcn canvas,
body.theme-shadcn iframe{max-width:100%;height:auto}

body.theme-shadcn .container{width:100%;max-width:min(1400px,100%)}
body.theme-shadcn .row{align-items:flex-end}
body.theme-shadcn .row .field{min-width:0}
body.theme-shadcn .btn{max-width:100%}
body.theme-shadcn .badge,
body.theme-shadcn .chip,
body.theme-shadcn .pill,
body.theme-shadcn .status-pill{max-width:100%}

body.theme-shadcn .table-toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin:12px 0;
  padding:12px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--card);
}
body.theme-shadcn .table-toolbar .tt-group{
  display:flex;
  gap:8px;
  align-items:flex-end;
  flex-wrap:wrap;
  min-width:0;
  flex:1 1 260px;
}
body.theme-shadcn .table-toolbar .tt-right{margin-inline-start:auto;flex:0 1 auto}
body.theme-shadcn .table-toolbar .tt-group > *,
body.theme-shadcn .table-toolbar .tt-right > *{min-width:0}
body.theme-shadcn .table-toolbar input,
body.theme-shadcn .table-toolbar select{min-height:40px}
body.theme-shadcn .table-toolbar input{min-width:220px}

body.theme-shadcn .table-wrap{
  max-width:100%;
  overflow:auto;
  overscroll-behavior-x:contain;
}
body.theme-shadcn .table-wrap table{width:max-content;min-width:100%}
body.theme-shadcn .table-wrap td .actions{justify-content:flex-start}

body.theme-shadcn .toast-wrap{
  position:fixed;
  inset-inline-start:12px;
  inset-inline-end:auto;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
  width:min(400px, calc(100vw - 24px));
  max-width:calc(100vw - 24px);
}
body.theme-shadcn .toast{
  width:100%;
  max-width:100%;
  pointer-events:auto;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  box-shadow:0 24px 60px rgba(15,23,42,.18);
  padding:12px;
  backdrop-filter:blur(14px);
  transform:translateY(0);
  opacity:1;
  transition:transform .2s ease, opacity .2s ease;
}
html.dark body.theme-shadcn .toast,
html[data-theme='dark'] body.theme-shadcn .toast{
  background:rgba(9,9,11,.94);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 28px 70px rgba(0,0,0,.48);
}
body.theme-shadcn .toast.hide{transform:translateY(8px);opacity:0}
body.theme-shadcn .toast-head{display:flex;align-items:flex-start;gap:10px}
body.theme-shadcn .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);
  flex:0 0 auto;
}
html.dark body.theme-shadcn .toast-ic,
html[data-theme='dark'] body.theme-shadcn .toast-ic{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10)}
body.theme-shadcn .toast-txt{flex:1;min-width:0}
body.theme-shadcn .toast-title{font-weight:900;font-size:13px;margin-bottom:2px}
body.theme-shadcn .toast-msg{font-weight:800;font-size:12px;opacity:.92;line-height:1.55;overflow-wrap:anywhere;word-break:break-word}
body.theme-shadcn .toast-x{border:0;background:transparent;color:inherit;opacity:.58;cursor:pointer;font-size:14px;padding:6px 8px;border-radius:12px}
body.theme-shadcn .toast-x:hover{opacity:1;background:rgba(15,23,42,.06)}
html.dark body.theme-shadcn .toast-x:hover,
html[data-theme='dark'] body.theme-shadcn .toast-x:hover{background:rgba(255,255,255,.08)}
body.theme-shadcn .toast.success{border-inline-start:4px solid #22c55e}
body.theme-shadcn .toast.error{border-inline-start:4px solid #e11d48}
body.theme-shadcn .toast.warning{border-inline-start:4px solid #f59e0b}
body.theme-shadcn .toast.info{border-inline-start:4px solid var(--primary)}

body.page-chat_admin.theme-shadcn .threads-card,
body.page-chat_admin.theme-shadcn .chat-window,
body.page-student_chat.theme-shadcn .card,
body.page-customer_chat.theme-shadcn .card,
body.page-student_tickets.theme-shadcn .card,
body.page-student_tickets_admin.theme-shadcn .card,
body.page-customer_tickets.theme-shadcn .card,
body.page-customer_tickets_admin.theme-shadcn .card{max-width:100%}

@media (max-width:1024px){
  body.theme-shadcn .main .container,
  body.theme-shadcn .student-shell .container{padding:14px !important}
  body.theme-shadcn .topbar{flex-wrap:wrap}
  body.theme-shadcn .topbar-actions{flex-wrap:wrap;justify-content:flex-start}
  body.page-batches.theme-shadcn .batch-quick-top,
  body.page-customers.theme-shadcn .cust-actions,
  body.page-customers.theme-shadcn .cust-head,
  body.page-chat_admin.theme-shadcn .chat-head{align-items:stretch}
}

@media (max-width:760px){
  body.theme-shadcn .table-toolbar{flex-direction:column;align-items:stretch}
  body.theme-shadcn .table-toolbar .tt-group,
  body.theme-shadcn .table-toolbar .tt-right{
    width:100%;
    margin-inline-start:0;
    flex:1 1 100%;
  }
  body.theme-shadcn .table-toolbar .tt-group > *,
  body.theme-shadcn .table-toolbar .tt-right > *{
    width:100%;
    flex:1 1 100%;
  }
  body.theme-shadcn .table-toolbar input{min-width:0}

  body.theme-shadcn .row{align-items:stretch}
  body.theme-shadcn .row .field{flex:1 1 100%;min-width:0 !important}
  body.theme-shadcn [style*="min-width:260px"],
  body.theme-shadcn [style*="min-width:320px"],
  body.theme-shadcn [style*="min-width:340px"]{min-width:0 !important;width:100%}

  body.theme-shadcn .actions{width:100%}
  body.theme-shadcn .btn{
    height:auto;
    min-height:40px;
    padding-top:9px;
    padding-bottom:9px;
    white-space:normal;
    line-height:1.35;
    text-align:center;
  }

  body.page-batches.theme-shadcn .batch-quick-top,
  body.page-customer_prices.theme-shadcn .row.no-print,
  body.page-chat_admin.theme-shadcn .threads-tools,
  body.page-chat_admin.theme-shadcn .threads-head form,
  body.page-chat_admin.theme-shadcn .chat-head > div:last-child,
  body.page-users.theme-shadcn .row,
  body.page-roles.theme-shadcn .row,
  body.page-audit_logs.theme-shadcn .row,
  body.page-prices.theme-shadcn .row.no-print{width:100%}

  body.page-batches.theme-shadcn .batch-quick-top > *,
  body.page-customer_prices.theme-shadcn .row.no-print > *,
  body.page-chat_admin.theme-shadcn .threads-tools > *,
  body.page-chat_admin.theme-shadcn .threads-head form > *,
  body.page-chat_admin.theme-shadcn .chat-head > div:last-child > *,
  body.page-users.theme-shadcn .row > *,
  body.page-roles.theme-shadcn .row > *,
  body.page-audit_logs.theme-shadcn .row > *,
  body.page-prices.theme-shadcn .row.no-print > *{
    flex:1 1 100%;
    min-width:0;
  }

  body.page-chat_admin.theme-shadcn .thread-top,
  body.page-chat_admin.theme-shadcn .thread-sub{flex-direction:column;align-items:flex-start}
  body.page-chat_admin.theme-shadcn .thread-time,
  body.page-chat_admin.theme-shadcn .thread-last{white-space:normal}
  body.page-chat_admin.theme-shadcn input[style*="width:140px"]{width:100% !important}

  body.page-student_chat.theme-shadcn .chat-compose,
  body.page-customer_chat.theme-shadcn .chat-compose,
  body.page-chat_admin.theme-shadcn .chat-compose{
    display:grid !important;
    grid-template-columns:44px minmax(0,1fr) 44px 44px;
    align-items:center !important;
    gap:8px !important;
  }
  body.page-student_chat.theme-shadcn .chat-compose textarea,
  body.page-customer_chat.theme-shadcn .chat-compose textarea,
  body.page-chat_admin.theme-shadcn .chat-compose textarea{
    min-width:0 !important;
    width:100%;
    margin:0 !important;
  }

  body.page-student_tickets.theme-shadcn .chat-compose,
  body.page-customer_tickets.theme-shadcn .chat-compose,
  body.page-student_tickets_admin.theme-shadcn .chat-compose,
  body.page-customer_tickets_admin.theme-shadcn .chat-compose{flex-direction:column;align-items:stretch}
  body.page-student_tickets.theme-shadcn .chat-compose textarea,
  body.page-customer_tickets.theme-shadcn .chat-compose textarea,
  body.page-student_tickets_admin.theme-shadcn .chat-compose textarea,
  body.page-customer_tickets_admin.theme-shadcn .chat-compose textarea{min-width:0 !important;width:100%}
  body.page-student_tickets.theme-shadcn .chat-compose-actions,
  body.page-customer_tickets.theme-shadcn .chat-compose-actions,
  body.page-student_tickets_admin.theme-shadcn .chat-compose-actions,
  body.page-customer_tickets_admin.theme-shadcn .chat-compose-actions{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.page-student_tickets.theme-shadcn .chat-compose-actions > *,
  body.page-customer_tickets.theme-shadcn .chat-compose-actions > *,
  body.page-student_tickets_admin.theme-shadcn .chat-compose-actions > *,
  body.page-customer_tickets_admin.theme-shadcn .chat-compose-actions > *{width:100%}

  body.page-chat_admin.theme-shadcn .chat-bubble,
  body.page-student_chat.theme-shadcn .chat-bubble,
  body.page-customer_chat.theme-shadcn .chat-bubble,
  body.page-student_tickets.theme-shadcn .chat-bubble,
  body.page-customer_tickets.theme-shadcn .chat-bubble,
  body.page-student_tickets_admin.theme-shadcn .chat-bubble,
  body.page-customer_tickets_admin.theme-shadcn .chat-bubble{max-width:92%}

  body.page-additions_fast.theme-shadcn .fast-top .row.no-print,
  body.page-additions_fast.theme-shadcn .fast-additions .fast-tabs,
  body.page-additions_fast.theme-shadcn .fast-additions .lv-quick-links,
  body.page-additions_fast.theme-shadcn .fast-additions .fast-footer .fast-actions{width:100%}
  body.page-additions_fast.theme-shadcn .fast-top .row.no-print > *,
  body.page-additions_fast.theme-shadcn .fast-additions .fast-tabs > *,
  body.page-additions_fast.theme-shadcn .fast-additions .lv-quick-links > *{
    flex:1 1 calc(50% - 6px);
    min-width:0;
  }

  body.page-customers.theme-shadcn .input-group{flex-wrap:wrap}
  body.page-customers.theme-shadcn .input-group > .btn{flex:1 1 100%}
}

@media (max-width:520px){
  body.theme-shadcn.authed{padding:8px}
  body.theme-shadcn .main .container,
  body.theme-shadcn .student-shell .container{padding:12px !important}
  body.theme-shadcn .shell,
  body.theme-shadcn .student-shell{border-radius:18px}
  body.theme-shadcn .topbar{padding:10px;gap:8px}
  body.theme-shadcn .topbar-actions{width:100%;justify-content:flex-start}
  body.theme-shadcn .icon-btn,
  body.theme-shadcn .user-menu-btn,
  body.theme-shadcn .tp-trigger{min-width:40px}

  body.theme-shadcn .tp-menu,
  body.theme-shadcn .qa-dd,
  body.theme-shadcn .user-menu-dd,
  body.theme-shadcn .dd-menu,
  body.theme-shadcn .colmenu-dd{
    max-width:calc(100vw - 24px);
    width:min(360px, calc(100vw - 24px));
  }

  body.theme-shadcn .table-wrap td,
  body.theme-shadcn .table-wrap th{padding:10px 10px}
  body.theme-shadcn .table-wrap td .actions{min-width:0;justify-content:flex-start}
  body.theme-shadcn .toast-wrap{inset-inline-start:12px;inset-inline-end:12px;width:auto;max-width:none}

  body.page-student_chat.theme-shadcn .chat-compose,
  body.page-customer_chat.theme-shadcn .chat-compose,
  body.page-chat_admin.theme-shadcn .chat-compose{grid-template-columns:44px minmax(0,1fr) 44px}
  body.page-student_chat.theme-shadcn .chat-compose .ig-send-btn,
  body.page-customer_chat.theme-shadcn .chat-compose .ig-send-btn,
  body.page-chat_admin.theme-shadcn .chat-compose .ig-send-btn{grid-column:1 / -1;width:100%}

  body.page-additions_fast.theme-shadcn .fast-top .row.no-print > *,
  body.page-additions_fast.theme-shadcn .fast-additions .fast-tabs > *,
  body.page-additions_fast.theme-shadcn .fast-additions .lv-quick-links > *,
  body.page-customers.theme-shadcn .cust-actions > *,
  body.page-prices.theme-shadcn .row.no-print > *{flex:1 1 100%}

  body.page-student_tickets.theme-shadcn .chat-compose-actions,
  body.page-customer_tickets.theme-shadcn .chat-compose-actions,
  body.page-student_tickets_admin.theme-shadcn .chat-compose-actions,
  body.page-customer_tickets_admin.theme-shadcn .chat-compose-actions{grid-template-columns:1fr}

  body.page-users.theme-shadcn .table-wrap form,
  body.page-roles.theme-shadcn .table-wrap form{display:block;margin-top:6px}
}

@media (max-width:380px){
  body.theme-shadcn .btn{font-size:12px}
  body.theme-shadcn .top-title{font-size:15px}
  body.theme-shadcn .nav-item .nt{font-size:13px}
  body.page-chat_admin.theme-shadcn .chat-bubble,
  body.page-student_chat.theme-shadcn .chat-bubble,
  body.page-customer_chat.theme-shadcn .chat-bubble,
  body.page-student_tickets.theme-shadcn .chat-bubble,
  body.page-customer_tickets.theme-shadcn .chat-bubble,
  body.page-student_tickets_admin.theme-shadcn .chat-bubble,
  body.page-customer_tickets_admin.theme-shadcn .chat-bubble{max-width:96%}
}


/* === 2026-03-18 responsive hardening patch (theme-shadcn mobile) === */
html, body{max-width:100%}
body.theme-shadcn,
body.theme-shadcn .shell,
body.theme-shadcn .main,
body.theme-shadcn .content,
body.theme-shadcn .container,
body.theme-shadcn .card,
body.theme-shadcn .grid,
body.theme-shadcn .row,
body.theme-shadcn .field,
body.theme-shadcn .table-wrap,
body.theme-shadcn .mini-grid,
body.theme-shadcn .metrics,
body.theme-shadcn .quick-actions,
body.theme-shadcn .customer-dashboard-grid,
body.theme-shadcn .chat-admin-grid{min-width:0}
body.theme-shadcn{overflow-x:clip}
body.theme-shadcn img,
body.theme-shadcn svg,
body.theme-shadcn canvas,
body.theme-shadcn video,
body.theme-shadcn iframe{max-width:100%;height:auto}
body.theme-shadcn pre,
body.theme-shadcn code{
  max-width:100%;
  white-space:pre-wrap;
  word-break:break-word;
}
body.theme-shadcn .row > *,
body.theme-shadcn .grid > *,
body.theme-shadcn .table-toolbar > *,
body.theme-shadcn .table-toolbar .tt-group > *{min-width:0}
body.theme-shadcn .actions{align-items:center;row-gap:8px}
body.theme-shadcn .badge,
body.theme-shadcn .pill,
body.theme-shadcn .status-pill,
body.theme-shadcn .st-tab,
body.theme-shadcn .btn{
  max-width:100%;
  vertical-align:middle;
}

/* Shared DataTables-like toolbar for theme-shadcn */
body.theme-shadcn .table-toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
body.theme-shadcn .table-toolbar .tt-group{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
  flex:1 1 320px;
  min-width:0;
}
body.theme-shadcn .table-toolbar .tt-right{
  flex:0 1 auto;
  margin-inline-start:auto;
}
body.theme-shadcn .table-toolbar input,
body.theme-shadcn .table-toolbar select,
body.theme-shadcn .table-toolbar .btn{
  min-width:0;
}
body.theme-shadcn .table-toolbar .tt-group:not(.tt-right) input,
body.theme-shadcn .table-toolbar .tt-group:not(.tt-right) select{
  flex:1 1 170px;
}
body.theme-shadcn .table-toolbar .tt-right .btn,
body.theme-shadcn .table-toolbar .tt-right a.btn{white-space:nowrap}

/* Action cells: remain readable even if a page forgot the .actions wrapper */
body.theme-shadcn .table-wrap td.no-print > a.btn,
body.theme-shadcn .table-wrap td.no-print > form,
body.theme-shadcn .table-wrap td.no-print > .btn,
body.theme-shadcn .table-wrap td.num > a.btn,
body.theme-shadcn .table-wrap td.num > form,
body.theme-shadcn .table-wrap td.num > .btn{
  display:inline-flex;
  vertical-align:top;
}
body.theme-shadcn .table-wrap td.no-print > form,
body.theme-shadcn .table-wrap td.num > form{margin:0}
body.theme-shadcn .table-wrap td.no-print > a.btn + form,
body.theme-shadcn .table-wrap td.no-print > form + a.btn,
body.theme-shadcn .table-wrap td.num > a.btn + form,
body.theme-shadcn .table-wrap td.num > form + a.btn,
body.theme-shadcn .table-wrap td.no-print > form + form,
body.theme-shadcn .table-wrap td.num > form + form{margin-inline-start:6px}

/* Theme-shadcn toast styling + safe-area support */
body.theme-shadcn .toast-wrap{
  position:fixed;
  right:max(14px, env(safe-area-inset-right));
  left:auto;
  bottom:max(14px, calc(env(safe-area-inset-bottom) + 14px));
  width:min(420px, calc(100vw - 28px));
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:260;
  pointer-events:none;
}
body.theme-shadcn .toast{
  pointer-events:auto;
  padding:12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--foreground);
  box-shadow:var(--orc-shadow);
  transform:translateY(0);
  opacity:1;
  transition:transform .2s ease,opacity .2s ease;
  backdrop-filter:blur(16px);
}
body.theme-shadcn .toast.hide{transform:translateY(8px);opacity:0}
body.theme-shadcn .toast-head{display:flex;align-items:flex-start;gap:10px}
body.theme-shadcn .toast-ic{
  width:28px;height:28px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  background:var(--accent);
  border:1px solid var(--border);
}
body.theme-shadcn .toast-txt{flex:1;min-width:0}
body.theme-shadcn .toast-title{font-weight:1000;font-size:13px;margin-bottom:2px}
body.theme-shadcn .toast-msg{font-weight:850;font-size:12px;opacity:.92;line-height:1.5;word-break:break-word}
body.theme-shadcn .toast-x{
  width:28px;height:28px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);
  background:transparent;
  color:var(--foreground);
  cursor:pointer;
  opacity:.78;
  flex:0 0 auto;
}
body.theme-shadcn .toast-x:hover{opacity:1;background:var(--accent)}
body.theme-shadcn .toast.success{border-inline-start:4px solid #22c55e}
body.theme-shadcn .toast.error{border-inline-start:4px solid #ef4444}
body.theme-shadcn .toast.warning{border-inline-start:4px solid #f59e0b}
body.theme-shadcn .toast.info{border-inline-start:4px solid #3b82f6}

@media (max-width: 760px){
  body.theme-shadcn .table-wrap{max-height:none !important}
}

@media (max-width: 640px){
  body.theme-shadcn.authed{padding:10px}
  body.theme-shadcn .container{padding:10px}
  body.theme-shadcn .card{padding:14px;border-radius:14px}
  body.theme-shadcn .h1{font-size:18px}
  body.theme-shadcn .row{gap:10px}
  body.theme-shadcn .toolbar{padding:12px}

  body.theme-shadcn .table-toolbar{
    align-items:stretch;
    gap:10px;
  }
  body.theme-shadcn .table-toolbar .tt-group{
    width:100%;
    flex:1 1 100%;
    display:grid;
    grid-template-columns:1fr;
    align-items:stretch;
  }
  body.theme-shadcn .table-toolbar .tt-right{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  body.theme-shadcn .table-toolbar .tt-right > *{width:100%}
  body.theme-shadcn .table-toolbar .btn{width:100%}

  body.theme-shadcn .table-wrap{border-radius:14px}
  body.theme-shadcn .table-wrap th,
  body.theme-shadcn .table-wrap td{padding:10px 11px}
  body.theme-shadcn .table-wrap td{
    max-width:none;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    word-break:break-word;
  }
  body.theme-shadcn .table-wrap td.num,
  body.theme-shadcn .table-wrap th.num{white-space:nowrap}
  body.theme-shadcn .table-wrap td .actions{
    justify-content:flex-start;
    width:100%;
  }
  body.theme-shadcn .table-wrap td .actions .btn,
  body.theme-shadcn .table-wrap td .actions form,
  body.theme-shadcn .table-wrap td .actions a.btn{
    flex:1 1 calc(50% - 6px);
    min-width:min(140px, 100%);
  }

  body.theme-shadcn .batch-quick-top{flex-direction:column;align-items:stretch}
  body.theme-shadcn .batch-quick-top .btn,
  body.theme-shadcn .batch-quick-top input{width:100%}
  body.theme-shadcn .mini-grid{grid-template-columns:1fr}
  body.theme-shadcn .mini-stat .n{
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
  }

  body.theme-shadcn .metrics,
  body.theme-shadcn .quick-actions{grid-template-columns:1fr}

  body.theme-shadcn .toast-wrap{
    right:max(10px, env(safe-area-inset-right));
    left:max(10px, env(safe-area-inset-left));
    width:auto;
    bottom:max(10px, calc(env(safe-area-inset-bottom) + 18px));
  }
}

@media (max-width: 520px){
  body.theme-shadcn .table-toolbar .tt-right{grid-template-columns:1fr}
  body.theme-shadcn .table-wrap td .actions .btn,
  body.theme-shadcn .table-wrap td .actions form,
  body.theme-shadcn .table-wrap td .actions a.btn{
    flex:1 1 100%;
    min-width:0;
  }
  body.theme-shadcn .badge,
  body.theme-shadcn .pill,
  body.theme-shadcn .status-pill{white-space:normal;line-height:1.45}
}

@media (max-width: 380px){
  body.theme-shadcn .card{padding:12px}
  body.theme-shadcn .table-wrap th,
  body.theme-shadcn .table-wrap td{padding:9px 10px}
  body.theme-shadcn .toast{padding:10px}
  body.theme-shadcn .toast-head{gap:8px}
}


/* =========================================================
   2026-03-18 — Final responsive hardening
   - Fixes raw toasts in theme-shadcn/laravel
   - Gives shadcn pages a real responsive table toolbar
   - Prevents overflow on very small screens
   - Improves chat composer / thread tools on phones
   - Makes card-mode tables easier to use on narrow widths
   ========================================================= */

/* Universal overflow guards */
html,
body{overflow-x:hidden}
body .card,
body .grid,
body .row,
body .table-wrap,
body .table-toolbar,
body .threads-card,
body .chat-window,
body .thread-item,
body .thread-main,
body .chat-box,
body .chat-compose,
body .chat-compose-wrap,
body .settings-tabs,
body .cust-actions,
body .cust-tabs,
body .mini-grid,
body .mini-stats,
body .actions,
body .dd-menu,
body .perm-grid{min-width:0;max-width:100%}
img,
svg,
video,
canvas,
iframe{max-width:100%;height:auto}
body input,
body select,
body textarea,
body button{max-width:100%}

/* Give pages a little extra breathing room above the mobile browser chrome */
body.theme-shadcn .main .container,
body.theme-shadcn .student-shell .container{
  padding-bottom:max(18px, calc(env(safe-area-inset-bottom) + 22px)) !important;
}

/* Theme-shadcn: table toolbars (filters/actions above tables) */
body.theme-shadcn .table-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin:12px 0;
  padding:10px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--card);
  box-shadow:0 8px 20px rgba(15,23,42,.05);
}
html.dark body.theme-shadcn .table-toolbar,
html[data-theme="dark"] body.theme-shadcn .table-toolbar{box-shadow:none}
body.theme-shadcn .table-toolbar .tt-group{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  min-width:0;
}
body.theme-shadcn .table-toolbar .tt-group > *{min-width:0}
body.theme-shadcn .table-toolbar .tt-right{margin-inline-start:auto}
body.theme-shadcn .table-toolbar input,
body.theme-shadcn .table-toolbar select{
  min-width:180px;
  height:40px;
  border-radius:12px;
  background:var(--background);
}

/* Theme-shadcn: permissions grid (roles page) */
body.theme-shadcn .perm-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top:10px;
}
body.theme-shadcn .perm-grid .chk{
  align-items:flex-start;
  flex-wrap:wrap;
  min-width:0;
}
body.theme-shadcn .perm-grid .badge{
  margin-inline-start:auto;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Toast notifications for theme-shadcn / theme-laravel */
body.theme-shadcn .toast-wrap,
body.theme-laravel .toast-wrap{
  position:fixed;
  inset-inline-start:max(12px, env(safe-area-inset-left));
  inset-inline-end:max(12px, env(safe-area-inset-right));
  bottom:max(12px, calc(env(safe-area-inset-bottom) + 12px));
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
  align-items:flex-start;
}
body.theme-shadcn .toast,
body.theme-laravel .toast{
  width:min(420px, 100%);
  max-width:100%;
  padding:12px;
  border-radius:18px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--foreground, var(--text));
  box-shadow:0 18px 40px rgba(15,23,42,.18);
  pointer-events:auto;
  transform:translateY(0);
  opacity:1;
  transition:transform .2s ease, opacity .2s ease;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
html.dark body.theme-shadcn .toast,
html[data-theme="dark"] body.theme-shadcn .toast,
html.dark body.theme-laravel .toast,
html[data-theme="dark"] body.theme-laravel .toast{
  box-shadow:0 22px 56px rgba(0,0,0,.38);
}
body.theme-shadcn .toast.hide,
body.theme-laravel .toast.hide{transform:translateY(8px);opacity:0}
body.theme-shadcn .toast-head,
body.theme-laravel .toast-head{display:flex;align-items:flex-start;gap:10px}
body.theme-shadcn .toast-ic,
body.theme-laravel .toast-ic{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(15,23,42,.05);
  border:1px solid rgba(15,23,42,.08);
}
html.dark body.theme-shadcn .toast-ic,
html[data-theme="dark"] body.theme-shadcn .toast-ic,
html.dark body.theme-laravel .toast-ic,
html[data-theme="dark"] body.theme-laravel .toast-ic{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
}
body.theme-shadcn .toast-txt,
body.theme-laravel .toast-txt{flex:1;min-width:0}
body.theme-shadcn .toast-title,
body.theme-laravel .toast-title{font-weight:1000;font-size:13px;margin-bottom:2px}
body.theme-shadcn .toast-msg,
body.theme-laravel .toast-msg{
  font-weight:850;
  font-size:12px;
  line-height:1.45;
  opacity:.92;
  word-break:break-word;
  overflow-wrap:anywhere;
}
body.theme-shadcn .toast-x,
body.theme-laravel .toast-x{
  border:0;
  background:transparent;
  color:inherit;
  opacity:.58;
  cursor:pointer;
  font-size:14px;
  padding:6px 8px;
  border-radius:12px;
}
body.theme-shadcn .toast-x:hover,
body.theme-laravel .toast-x:hover{opacity:1;background:rgba(15,23,42,.06)}
html.dark body.theme-shadcn .toast-x:hover,
html[data-theme="dark"] body.theme-shadcn .toast-x:hover,
html.dark body.theme-laravel .toast-x:hover,
html[data-theme="dark"] body.theme-laravel .toast-x:hover{background:rgba(255,255,255,.08)}
body.theme-shadcn .toast.success,
body.theme-laravel .toast.success{border-inline-start:4px solid #22c55e}
body.theme-shadcn .toast.error,
body.theme-laravel .toast.error{border-inline-start:4px solid #ef4444}
body.theme-shadcn .toast.warning,
body.theme-laravel .toast.warning{border-inline-start:4px solid #f59e0b}
body.theme-shadcn .toast.info,
body.theme-laravel .toast.info{border-inline-start:4px solid #3b82f6}

/* Chat pages: keep composers and thread tools neat on phones */
@media (max-width:600px){
  body.page-chat_admin .card,
  body.page-customer_chat .card,
  body.page-student_chat .card{padding:14px}

  .chat-admin-grid{gap:10px !important}
  .thread-list{max-height:none}
  .threads-tools{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    align-items:stretch;
  }
  .threads-tools > *{min-width:0 !important}
  .threads-tools input[type="text"]{
    grid-column:1 / -1;
    width:100%;
  }
  .threads-tools .btn,
  .threads-tools select,
  .threads-tools .muted2{width:100%;justify-content:center}
  .threads-head details form{
    display:grid !important;
    grid-template-columns:1fr;
    width:100%;
  }
  .threads-head details form > *{min-width:0}
  .thread-item{padding:10px}
  .thread-top,
  .thread-sub{gap:8px}
  .chat-head{padding:10px 12px}
  .chat-box{max-height:none !important;min-height:min(54vh, 420px)}
  .chat-bubble{max-width:88%}
  .chat-compose{align-items:stretch}
  .chat-compose textarea{
    min-width:0 !important;
    width:100%;
    flex:1 1 100%;
  }
  .chat-compose-actions{width:100%}

  body.page-additions_fast .card.mini,
  body.page-additions_fast .add-details{padding:12px}
  body.page-additions_fast .card.mini .badge{
    align-self:flex-start;
    max-width:100%;
    white-space:normal;
    line-height:1.45;
  }
  body.page-additions_fast .card.mini label,
  body.page-additions_fast .add-details label{white-space:normal}
  body.page-additions_fast .add-details > summary{
    flex-wrap:wrap;
    align-items:flex-start;
  }

  body.theme-shadcn .table-toolbar{
    padding:10px;
    gap:8px;
  }
  body.theme-shadcn .table-toolbar .tt-group{
    width:100%;
    align-items:stretch;
  }
  body.theme-shadcn .table-toolbar .tt-group > *{
    flex:1 1 100%;
    min-width:0;
  }
  body.theme-shadcn .table-toolbar .tt-right{
    margin-inline-start:0;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    width:100%;
    gap:8px;
  }
  body.theme-shadcn .table-toolbar .tt-right > *{width:100%}

  body.theme-shadcn table.rt-card td .actions,
  body.theme-laravel table.rt-card td .actions{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    width:100%;
    gap:8px;
  }
  body.theme-shadcn table.rt-card td .actions .btn,
  body.theme-laravel table.rt-card td .actions .btn{
    width:100%;
    justify-content:center;
  }
}

@media (max-width:380px){
  .chat-bubble{max-width:92%}
  .thread-top,
  .thread-sub{flex-wrap:wrap}
  .thread-time{width:100%;text-align:left}

  body.theme-shadcn .table-toolbar .tt-right,
  body.theme-shadcn table.rt-card td .actions,
  body.theme-laravel table.rt-card td .actions{grid-template-columns:1fr}

  body.theme-shadcn table.rt-card td{
    grid-template-columns:1fr !important;
    gap:4px;
  }
  body.theme-laravel table.rt-card td{display:block}
  body.theme-laravel table.rt-card td::before{
    display:block;
    max-width:none;
    margin-bottom:4px;
  }

  body.theme-shadcn .toast-wrap,
  body.theme-laravel .toast-wrap{
    inset-inline-start:max(10px, env(safe-area-inset-left));
    inset-inline-end:max(10px, env(safe-area-inset-right));
  }
  body.theme-shadcn .toast,
  body.theme-laravel .toast{border-radius:16px}
}


/* === 2026-03-18 mobile hardening patch (theme-shadcn) === */

/* Global containment: avoid accidental horizontal overflow on mobile */
body.theme-shadcn,
body.theme-shadcn .shell,
body.theme-shadcn .student-shell,
body.theme-shadcn .main,
body.theme-shadcn .content,
body.theme-shadcn .container,
body.theme-shadcn .card,
body.theme-shadcn .row,
body.theme-shadcn .grid,
body.theme-shadcn .field,
body.theme-shadcn .table-wrap,
body.theme-shadcn .threads-card,
body.theme-shadcn .chat-window,
body.theme-shadcn .batch-quick,
body.theme-shadcn .batch-quick-top,
body.theme-shadcn .batch-quick-list{
  min-width:0;
  max-width:100%;
}
body.theme-shadcn .row > *,
body.theme-shadcn .grid > *{
  min-width:0;
  max-width:100%;
}
body.theme-shadcn img,
body.theme-shadcn video,
body.theme-shadcn iframe{
  max-width:100%;
  height:auto;
}
body.theme-shadcn input,
body.theme-shadcn select,
body.theme-shadcn textarea{
  min-width:0;
  max-width:100%;
}
body.theme-shadcn .btn,
body.theme-shadcn .badge,
body.theme-shadcn .pill,
body.theme-shadcn .muted,
body.theme-shadcn .small,
body.theme-shadcn h1,
body.theme-shadcn h2,
body.theme-shadcn h3{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Table toolbar support for theme-shadcn (used in many pages) */
body.theme-shadcn .table-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin:12px 0;
  padding:10px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
}
body.theme-shadcn .table-toolbar .tt-group{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  min-width:0;
  flex:1 1 260px;
}
body.theme-shadcn .table-toolbar .tt-group > *{min-width:0}
body.theme-shadcn .table-toolbar .tt-right{
  margin-inline-start:auto;
  justify-content:flex-end;
  flex:0 1 auto;
}
body.theme-shadcn .table-toolbar input,
body.theme-shadcn .table-toolbar select{
  height:38px;
  min-width:180px;
  border-radius:12px;
}
body.theme-shadcn .table-toolbar .btn{
  min-height:38px;
  border-radius:12px;
}

/* Toasts were missing in the shadcn skin */
body.theme-shadcn .toast-wrap{
  position:fixed;
  inset-inline-start:18px;
  bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
  width:min(380px, calc(100vw - 36px));
}
body.theme-shadcn .toast{
  width:100%;
  background:var(--popover);
  color:var(--popover-foreground);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--orc-shadow-lg);
  padding:12px;
  pointer-events:auto;
  transform:translateY(0);
  opacity:1;
  transition:transform .2s ease, opacity .2s ease;
  backdrop-filter:blur(18px);
}
body.theme-shadcn .toast.hide{transform:translateY(8px);opacity:0}
body.theme-shadcn .toast-head{display:flex;align-items:flex-start;gap:10px}
body.theme-shadcn .toast-ic{
  width:28px;
  height:28px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--accent);
  border:1px solid var(--border);
}
body.theme-shadcn .toast-txt{flex:1;min-width:0}
body.theme-shadcn .toast-title{font-weight:900;font-size:13px;margin-bottom:2px}
body.theme-shadcn .toast-msg{font-weight:700;font-size:12px;line-height:1.45;word-break:break-word}
body.theme-shadcn .toast-x{
  border:0;
  background:transparent;
  color:inherit;
  opacity:.58;
  cursor:pointer;
  font-size:14px;
  padding:6px 8px;
  border-radius:12px;
}
body.theme-shadcn .toast-x:hover{opacity:1;background:var(--accent)}
body.theme-shadcn .toast.success{border-inline-start:4px solid #22c55e}
body.theme-shadcn .toast.error{border-inline-start:4px solid #ef4444}
body.theme-shadcn .toast.warning{border-inline-start:4px solid #f59e0b}
body.theme-shadcn .toast.info{border-inline-start:4px solid #3b82f6}

@media (max-width:700px){
  body.theme-shadcn .table-toolbar{
    padding:10px;
    border-radius:16px;
  }
  body.theme-shadcn .table-toolbar .tt-group{
    flex:1 1 100%;
    width:100%;
  }
  body.theme-shadcn .table-toolbar .tt-group input,
  body.theme-shadcn .table-toolbar .tt-group select{
    flex:1 1 100%;
    width:100%;
    min-width:0;
  }
  body.theme-shadcn .table-toolbar .tt-right{
    margin-inline-start:0;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    width:100%;
    gap:8px;
  }
  body.theme-shadcn .table-toolbar .tt-right > *{width:100%}
}

@media (max-width:640px){
  body.theme-shadcn .row{gap:10px}
  body.theme-shadcn .row .field{min-width:100%}

  /* Inline min-width values inside templates should not force overflow on mobile */
  body.theme-shadcn .row > [style*="min-width"],
  body.theme-shadcn .row > form > [style*="min-width"],
  body.theme-shadcn .row > .field[style*="min-width"],
  body.theme-shadcn .row > form > .field[style*="min-width"]{
    min-width:0 !important;
    width:100% !important;
  }

  body.theme-shadcn .input-group{
    flex-wrap:wrap;
  }
  body.theme-shadcn .input-group > *{
    width:100%;
  }

  body.theme-shadcn .threads-tools > *,
  body.theme-shadcn .threads-head details form > *,
  body.theme-shadcn .batch-quick-top > *{
    flex:1 1 100%;
  }
  body.theme-shadcn .threads-tools input,
  body.theme-shadcn .threads-tools select,
  body.theme-shadcn .threads-tools .btn,
  body.theme-shadcn .threads-head details form input,
  body.theme-shadcn .threads-head details form select,
  body.theme-shadcn .threads-head details form .btn,
  body.theme-shadcn .batch-quick-top input,
  body.theme-shadcn .batch-quick-top .btn{
    width:100%;
    min-width:0 !important;
  }

  body.theme-shadcn .thread-top,
  body.theme-shadcn .thread-sub{
    flex-wrap:wrap;
    align-items:flex-start;
  }
  body.theme-shadcn .thread-time,
  body.theme-shadcn .thread-last{
    white-space:normal;
  }

  body.theme-shadcn .chat-bubble{max-width:90%}

  body.theme-shadcn .toast-wrap{
    inset-inline:12px;
    width:auto;
    bottom:calc(82px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width:520px){
  body.theme-shadcn .table-toolbar .tt-right{grid-template-columns:1fr}

  body.theme-shadcn .tp-menu,
  body.theme-shadcn .qa-dd,
  body.theme-shadcn .user-menu-dd{
    position:fixed;
    top:calc(64px + env(safe-area-inset-top, 0px));
    inset-inline:12px;
    min-width:0;
    max-height:min(70vh, 520px);
    overflow:auto;
  }

  body.theme-shadcn .chat-compose{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(42px, max-content));
    justify-content:end;
    gap:8px;
    align-items:center;
  }
  body.theme-shadcn .chat-compose textarea{
    grid-column:1 / -1;
    min-width:0 !important;
    width:100%;
    max-width:100%;
  }

  body.theme-shadcn .chat-head .btn,
  body.theme-shadcn .chat-head form,
  body.theme-shadcn .chat-head form .btn{
    width:100%;
  }
}

@media (max-width:420px){
  body.theme-shadcn .btn{
    white-space:normal;
    line-height:1.35;
    text-align:center;
  }
  body.theme-shadcn .topbar-actions{
    max-width:100%;
  }
}

/* ===== SaaS platform pages ===== */
.saas-page-wrap,.saas-landing-page{display:grid;gap:16px}
.saas-hero-card,.saas-landing-hero{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;align-items:stretch;overflow:hidden;background:linear-gradient(135deg,rgba(99,102,241,.14),rgba(6,182,212,.12));border:1px solid rgba(99,102,241,.18)}
.saas-hero-kicker,.saas-hero-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(99,102,241,.12);color:#4338ca;font-weight:800;font-size:12px;margin-bottom:10px}
.saas-hero-title{margin:0 0 10px;font-size:30px;line-height:1.3}
.saas-hero-desc,.saas-landing-copy p{margin:0;color:var(--muted);line-height:1.95;max-width:900px}
.saas-hero-actions,.saas-landing-copy .saas-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.saas-hero-side,.saas-landing-panel{display:grid;gap:14px;align-content:start}
.saas-mini-panel,.saas-glass-card{padding:16px;border-radius:18px;border:1px solid rgba(148,163,184,.2);background:rgba(255,255,255,.74);backdrop-filter:blur(6px)}
html[data-theme="dark"] .saas-mini-panel,html[data-theme="dark"] .saas-glass-card{background:rgba(15,23,42,.68);border-color:rgba(148,163,184,.15)}
.saas-mini-label,.saas-glass-label{font-size:12px;color:var(--muted);margin-bottom:8px}
.saas-mini-value{font-size:22px;font-weight:800}
.saas-mini-code,.saas-code-block,.saas-env-textarea,.ltr{direction:ltr;text-align:left}
.saas-mini-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;font-size:13px}
.saas-stats-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.saas-stat-card{position:relative;overflow:hidden}
.saas-stat-card:before{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:linear-gradient(90deg,#0ea5e9,#6366f1)}
.saas-stat-card.good:before{background:linear-gradient(90deg,#22c55e,#10b981)}
.saas-stat-card.warn:before{background:linear-gradient(90deg,#f59e0b,#f97316)}
.saas-stat-card.bad:before{background:linear-gradient(90deg,#ef4444,#f43f5e)}
.saas-stat-label{font-size:13px;color:var(--muted)}
.saas-stat-value{font-size:30px;font-weight:900;line-height:1.1;margin-top:8px}
.saas-stat-sub{margin-top:8px;color:var(--muted);font-size:12px;line-height:1.8}
.saas-main-grid{display:grid;grid-template-columns:1.3fr .95fr;gap:16px;align-items:start}
.saas-side-stack{display:grid;gap:16px}
.saas-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.saas-card-head h2{margin:0;font-size:22px}
.saas-card-head p{margin:5px 0 0;color:var(--muted);line-height:1.8}
.saas-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.saas-form-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
.saas-form-grid .field-full{grid-column:1/-1}
.saas-plan-inline-list{display:grid;gap:10px;margin-top:16px}
.saas-plan-inline-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px;border:1px solid var(--border);border-radius:14px;background:rgba(15,23,42,.02)}
html[data-theme="dark"] .saas-plan-inline-item{background:rgba(255,255,255,.03)}
.saas-filter-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.saas-filter-row input,.saas-filter-row select{min-width:180px;flex:1}
.saas-status{display:inline-flex;align-items:center;justify-content:center;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}
.saas-status-success{background:rgba(34,197,94,.12);color:#15803d}
.saas-status-warning{background:rgba(245,158,11,.14);color:#b45309}
.saas-status-danger{background:rgba(239,68,68,.13);color:#b91c1c}
.saas-status-muted{background:rgba(148,163,184,.16);color:#475569}
html[data-theme="dark"] .saas-status-success{color:#86efac}
html[data-theme="dark"] .saas-status-warning{color:#fcd34d}
html[data-theme="dark"] .saas-status-danger{color:#fca5a5}
html[data-theme="dark"] .saas-status-muted{color:#cbd5e1}
.saas-details-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:10px 0 16px}
.saas-detail-box{padding:14px;border-radius:16px;background:rgba(15,23,42,.03);border:1px solid var(--border);display:grid;gap:6px}
html[data-theme="dark"] .saas-detail-box{background:rgba(255,255,255,.03)}
.saas-detail-box span{color:var(--muted);font-size:12px}
.saas-detail-box strong{font-size:15px;line-height:1.8;word-break:break-word}
.saas-action-grid{display:grid;grid-template-columns:220px 1fr;gap:14px;align-items:start}
.saas-qr-card,.saas-env-card{padding:14px;border-radius:18px;border:1px solid var(--border);background:rgba(15,23,42,.02)}
html[data-theme="dark"] .saas-qr-card,html[data-theme="dark"] .saas-env-card{background:rgba(255,255,255,.03)}
.saas-qr-title{font-weight:800;margin-bottom:10px}
.saas-qr-canvas{min-height:190px;display:grid;place-items:center;background:#fff;border-radius:14px;padding:10px}
.saas-env-textarea{width:100%;min-height:190px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.7;resize:vertical}
.saas-inline-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.saas-landing-section{display:grid;gap:14px}
.saas-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.saas-section-head h2{margin:0;font-size:24px}
.saas-section-head p{margin:6px 0 0;color:var(--muted)}
.saas-plan-grid,.saas-value-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.saas-plan-card{padding:18px;border-radius:20px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(99,102,241,.07),rgba(99,102,241,0));display:grid;gap:12px}
.saas-plan-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.saas-plan-head h3{margin:6px 0 0;font-size:20px}
.saas-plan-badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(14,165,233,.12);color:#075985;font-size:12px;font-weight:800}
html[data-theme="dark"] .saas-plan-badge{color:#7dd3fc}
.saas-plan-price{display:grid;justify-items:end;line-height:1.1}
.saas-plan-price span{font-size:28px;font-weight:900}
.saas-plan-price small{color:var(--muted)}
.saas-plan-desc{margin:0;color:var(--muted);line-height:1.9}
.saas-plan-duration{font-size:13px;font-weight:700;color:#4338ca}
html[data-theme="dark"] .saas-plan-duration{color:#a5b4fc}
.saas-plan-features,.saas-check-list,.saas-steps-list{margin:0;padding:0 18px 0 0;display:grid;gap:8px;line-height:1.9}
.saas-value-card h3{margin:0 0 8px;font-size:18px}
.saas-value-card p{margin:0;color:var(--muted);line-height:1.9}
.saas-inline-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}
.saas-inline-metric{padding:14px;border-radius:16px;border:1px solid rgba(148,163,184,.18);background:rgba(255,255,255,.72)}
html[data-theme="dark"] .saas-inline-metric{background:rgba(15,23,42,.68);border-color:rgba(148,163,184,.15)}
.saas-inline-metric strong{display:block;font-size:24px;font-weight:900}
.saas-inline-metric span{display:block;color:var(--muted);margin-top:5px;font-size:12px;line-height:1.7}
.saas-code-block{margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(15,23,42,.06);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;word-break:break-all}
html[data-theme="dark"] .saas-code-block{background:rgba(255,255,255,.05)}
@media (max-width: 1200px){.saas-stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.saas-main-grid,.saas-hero-card,.saas-landing-hero,.saas-plan-grid,.saas-value-grid,.saas-inline-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.saas-action-grid{grid-template-columns:1fr}}
@media (max-width: 760px){.saas-stats-grid,.saas-main-grid,.saas-hero-card,.saas-landing-hero,.saas-plan-grid,.saas-value-grid,.saas-inline-metrics,.saas-form-grid,.saas-details-grid{grid-template-columns:1fr}.saas-filter-row{display:grid}.saas-filter-row input,.saas-filter-row select{min-width:0;width:100%}.saas-hero-title{font-size:24px}.saas-stat-value{font-size:26px}}