/* =====================================================================
   HostBill 2019 — Modern Enhancement Overlay  (enhance.css)
   Author: Karizanta / Abrisham Cloud
   Loads AFTER app.min.css and only overrides visuals — fully reversible.
   Remove the <link> in header.shared.tpl to revert.
   Works for both LTR (body.ltr) and RTL (body.rtl / dir=rtl).
   ===================================================================== */

/* ---------- 1. Fonts (self-hosted, relative to this file) ---------- */
/* Estedad — modern Persian UI font (primary) */
@font-face{font-family:"Estedad";src:url("../webfonts/estedad/Estedad-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Estedad";src:url("../webfonts/estedad/Estedad-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Estedad";src:url("../webfonts/estedad/Estedad-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Estedad";src:url("../webfonts/estedad/Estedad-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Estedad";src:url("../webfonts/estedad/Estedad-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
/* Vazirmatn — fallback */
@font-face{font-family:"Vazirmatn";src:url("../webfonts/vazir/Vazirmatn-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("../webfonts/vazir/Vazirmatn-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("../webfonts/vazir/Vazirmatn-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("../webfonts/vazir/Vazirmatn-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("../webfonts/vazir/Vazirmatn-Bold.woff2") format("woff2");font-weight:700;font-display:swap}

/* ---------- 2. Design tokens ---------- */
:root{
  --hb-primary:#7c3aed;
  --hb-primary-600:#6d28d9;
  --hb-primary-700:#5b21b6;
  --hb-accent:#4f46e5;
  --hb-grad:linear-gradient(135deg,#7c3aed 0%,#4f46e5 100%);
  --hb-grad-soft:linear-gradient(135deg,rgba(124,58,237,.10),rgba(79,70,229,.10));
  --hb-success:#18b877;
  --hb-warning:#f5a524;
  --hb-danger:#f04438;
  --hb-ink:#1f2733;
  --hb-muted:#7a869a;
  --hb-bg:#f4f6fb;
  --hb-card:#ffffff;
  --hb-border:#e7ebf3;
  --hb-radius:16px;
  --hb-radius-sm:11px;
  --hb-shadow-sm:0 2px 8px rgba(24,39,75,.06);
  --hb-shadow:0 10px 30px -12px rgba(24,39,75,.18);
  --hb-shadow-lg:0 24px 60px -18px rgba(24,39,75,.28);
  --hb-ease:cubic-bezier(.4,0,.2,1);
  --hb-sidebar:#111a2e;
  --hb-sidebar-2:#1a2540;
}

/* ---------- 3. Base ---------- */
body.template_2019{
  font-family:"Vazirmatn","Estedad","Rubik",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:var(--hb-bg);
  color:var(--hb-ink);
  -webkit-font-smoothing:antialiased;
  letter-spacing:0;
}
/* force Estedad everywhere (theme sets Rubik !important on some elements) */
body.template_2019,body.template_2019 *:not(.material-icons):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab){
  font-family:"Vazirmatn","Estedad",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5{font-weight:700;color:var(--hb-ink)}
a{color:var(--hb-primary);transition:color .18s var(--hb-ease)}
a:hover{color:var(--hb-primary-700)}
::selection{background:rgba(124,58,237,.18)}

/* soft ambient background behind content */
body.template_2019::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60vw 40vw at 85% -5%,rgba(79,70,229,.10),transparent 60%),
    radial-gradient(50vw 40vw at -5% 10%,rgba(124,58,237,.10),transparent 55%);
}

/* ---------- 4. Top navbar (ONE unified color) ---------- */
/* the whole bar is a single gradient; every inner container is transparent
   so the header no longer looks like 3 different colored blocks */
.navbar.fixed-top{
  background:linear-gradient(100deg,#5b21b6 0%,#6d28d9 50%,#4f46e5 100%)!important;
  border:none!important;
  box-shadow:0 8px 26px -14px rgba(60,20,120,.7);
  position:relative;
}
.navbar.fixed-top>div,
.navbar.fixed-top .navbar-left,
.navbar.fixed-top .navbar-body,
.navbar.fixed-top .navbar-right,
.navbar.fixed-top .navbar-menu,
.navbar.fixed-top .navbar-nav,
.navbar.fixed-top .nav-item,
.navbar.fixed-top .nav-link,
.navbar.fixed-top .btn-left-navbar,
.navbar.fixed-top .navbar-search,
.navbar.fixed-top .navbar-search .form-inline,
.navbar.fixed-top form,
.navbar.fixed-top .navbar-brand{background:transparent!important;border-color:rgba(255,255,255,.12)!important}
/* but keep dropdown popups on white (they open below the bar) */
.navbar.fixed-top .dropdown-menu{background:var(--hb-card)!important}
.navbar.fixed-top .dropdown-menu .dropdown-item,
.navbar.fixed-top .dropdown-menu a,
.navbar.fixed-top .dropdown-menu h3,
.navbar.fixed-top .dropdown-menu .text-secondary{color:var(--hb-ink)!important}
.navbar.fixed-top .navbar-brand img{filter:brightness(1.08) contrast(1.02)}
/* all text/icons in the bar → white */
.navbar.fixed-top,.navbar.fixed-top a,.navbar.fixed-top .nav-link,
.navbar.fixed-top .material-icons,.navbar.fixed-top small,
.navbar.fixed-top .btn-left-navbar,.navbar.fixed-top .dropdown-toggle{color:#f2f0ff!important}
.navbar.fixed-top a:hover,.navbar.fixed-top .nav-link:hover{color:#fff!important}
.navbar .badge-primary,.navbar .badge{background:#fff!important;color:#5b21b6!important;border:none;font-weight:700}
/* search box → glassy pill */
.navbar .navbar-search .input-group{background:rgba(255,255,255,.15)!important;border-radius:99px!important;overflow:hidden}
.navbar .navbar-search .form-control{background:transparent!important;border:none!important;color:#fff!important;padding:.5rem .9rem;box-shadow:none!important}
.navbar .navbar-search .form-control::placeholder{color:rgba(255,255,255,.75)!important}
.navbar .navbar-search .input-group-text{background:transparent!important;border:none!important;color:#fff!important}
/* order button (outlined on the bar) */
.navbar .navbar-order .btn-success{
  background:rgba(255,255,255,.18)!important;border:1px solid rgba(255,255,255,.4)!important;
  color:#fff!important;box-shadow:none!important;border-radius:99px!important;font-weight:600;
}
.navbar .navbar-order .btn-success:hover{background:#fff!important;color:#5b21b6!important}

/* ---------- 5. Sidebar (LIGHT + per-item colored icons) ---------- */
.sidebar{
  background:var(--hb-card)!important;
  border:none!important;
  box-shadow:var(--hb-shadow-sm);
}
.sidebar .sidebar-wrap{padding-top:.5rem}
/* section heading */
.sidebar .sidebar-heading{
  color:#9aa3b8!important;text-transform:uppercase;letter-spacing:.12em;
  font-size:10.5px!important;font-weight:700;position:relative;padding-inline-start:1.5rem!important;
}
.sidebar .sidebar-heading::before{
  content:"";position:absolute;inset-inline-start:.8rem;top:50%;transform:translateY(-50%);
  width:12px;height:3px;border-radius:3px;background:var(--hb-grad);
}
.sidebar .nav-link{
  color:#3a4256!important;border-radius:13px;margin:3px 12px;padding:.5rem .7rem!important;
  font-weight:600;display:flex!important;align-items:center;gap:.7rem;
  transition:all .2s var(--hb-ease);position:relative;
}
/* icon tile — colored per item */
.sidebar .nav-link .material-icons{
  margin:0!important;flex:none;width:36px;height:36px;border-radius:11px;
  display:inline-flex;align-items:center;justify-content:center;font-size:20px;
  transition:all .2s var(--hb-ease);
}
.sidebar .nav-link>span,.sidebar .nav-link{font-size:.9rem}
/* rotating color palette (each menu item its own color) */
.sidebar .nav-pills .nav-item:nth-child(6n+1) .material-icons{color:#3b82f6;background:rgba(59,130,246,.13)}
.sidebar .nav-pills .nav-item:nth-child(6n+2) .material-icons{color:#f59e0b;background:rgba(245,158,11,.14)}
.sidebar .nav-pills .nav-item:nth-child(6n+3) .material-icons{color:#ec4899;background:rgba(236,72,153,.13)}
.sidebar .nav-pills .nav-item:nth-child(6n+4) .material-icons{color:#10b981;background:rgba(16,185,129,.14)}
.sidebar .nav-pills .nav-item:nth-child(6n+5) .material-icons{color:#8b5cf6;background:rgba(139,92,246,.14)}
.sidebar .nav-pills .nav-item:nth-child(6n+6) .material-icons{color:#0ea5e9;background:rgba(14,165,233,.13)}
/* hover */
.sidebar .nav-link:hover{background:#f5f3ff!important;color:#5b21b6!important}
.sidebar .nav-link:hover .material-icons{transform:scale(1.08)}
/* active — lavender row + purple text + purple side bar (like the sample) */
.sidebar .nav-link.active{
  background:rgba(124,58,237,.11)!important;color:#5b21b6!important;box-shadow:none!important;font-weight:700;
}
.sidebar .nav-link.active::before{
  content:"";position:absolute;inset-inline-start:-12px;top:15%;bottom:15%;
  width:5px;border-radius:99px;background:var(--hb-grad);
}
/* dropdown expander icon shouldn't be a tile */
.sidebar .nav-link .icon-expand{width:auto!important;height:auto!important;background:none!important;color:inherit!important;font-size:18px}
.sidebar .sub-nav .nav-link{font-size:.84rem}

/* dark-mode sidebar */
html[data-hb-theme="dark"] .sidebar{background:var(--hb-sidebar)!important}
html[data-hb-theme="dark"] .sidebar .nav-link{color:#c6cfe4!important}
html[data-hb-theme="dark"] .sidebar .nav-link:hover{background:rgba(255,255,255,.06)!important;color:#fff!important}
html[data-hb-theme="dark"] .sidebar .nav-link.active{background:rgba(124,58,237,.22)!important;color:#fff!important}
@media (prefers-color-scheme:dark){
  :root:not([data-hb-theme]) .sidebar{background:var(--hb-sidebar)!important}
  :root:not([data-hb-theme]) .sidebar .nav-link{color:#c6cfe4!important}
  :root:not([data-hb-theme]) .sidebar .nav-link.active{background:rgba(124,58,237,.22)!important;color:#fff!important}
}

/* ---------- 6. Cards ---------- */
.card{
  background:var(--hb-card);
  border:1px solid var(--hb-border)!important;
  border-radius:var(--hb-radius)!important;
  box-shadow:var(--hb-shadow-sm);
  transition:transform .25s var(--hb-ease),box-shadow .25s var(--hb-ease);
  overflow:hidden;
}
.card:hover{box-shadow:var(--hb-shadow)}
.card .card-header,.card-header{
  background:transparent!important;border-bottom:1px solid var(--hb-border)!important;
  font-weight:600;
}

/* ---------- 7. Home "root" boxes ---------- */
.root-boxes .root-box{
  border-radius:var(--hb-radius)!important;
  border:1px solid var(--hb-border)!important;
  background:var(--hb-card);
  padding:2.4rem 1.2rem!important;
  box-shadow:var(--hb-shadow-sm);
  transition:transform .28s var(--hb-ease),box-shadow .28s var(--hb-ease);
  position:relative;overflow:hidden;
}
.root-boxes .root-box::before{
  content:"";position:absolute;inset:0;background:var(--hb-grad-soft);opacity:0;
  transition:opacity .28s var(--hb-ease);
}
.root-boxes .root-box:hover{transform:translateY(-8px);box-shadow:var(--hb-shadow-lg);text-decoration:none}
.root-boxes .root-box:hover::before{opacity:1}
.root-boxes .root-box>*{position:relative;z-index:1}
/* icon inside a gradient circle */
.root-boxes .root-box .material-icons{
  width:76px;height:76px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--hb-grad);color:#fff!important;font-size:34px!important;
  box-shadow:0 14px 30px -10px rgba(124,58,237,.6);
  transition:transform .28s var(--hb-ease);margin-bottom:1rem!important;
}
.root-boxes .root-box:hover .material-icons{transform:scale(1.1) translateY(-3px) rotate(-4deg)}
.root-boxes .root-box h4{font-weight:700;margin-bottom:.4rem}
.root-boxes .root-box span{color:var(--hb-muted)}
/* each of the 3 boxes gets its own attractive color */
.root-boxes .root-box:nth-child(1) .material-icons{background:linear-gradient(135deg,#7c3aed,#4f46e5);box-shadow:0 14px 30px -10px rgba(124,58,237,.6)}
.root-boxes .root-box:nth-child(2) .material-icons{background:linear-gradient(135deg,#06b6d4,#0ea5e9);box-shadow:0 14px 30px -10px rgba(14,165,233,.6)}
.root-boxes .root-box:nth-child(3) .material-icons{background:linear-gradient(135deg,#ec4899,#f97316);box-shadow:0 14px 30px -10px rgba(236,72,153,.55)}
.root-boxes .root-box:nth-child(1)::before{background:linear-gradient(135deg,rgba(124,58,237,.10),rgba(79,70,229,.10))}
.root-boxes .root-box:nth-child(2)::before{background:linear-gradient(135deg,rgba(6,182,212,.10),rgba(14,165,233,.10))}
.root-boxes .root-box:nth-child(3)::before{background:linear-gradient(135deg,rgba(236,72,153,.10),rgba(249,115,22,.10))}
.root-boxes .root-box:nth-child(1):hover{box-shadow:0 24px 50px -18px rgba(124,58,237,.5)}
.root-boxes .root-box:nth-child(2):hover{box-shadow:0 24px 50px -18px rgba(14,165,233,.5)}
.root-boxes .root-box:nth-child(3):hover{box-shadow:0 24px 50px -18px rgba(236,72,153,.45)}
/* colored top accent per box */
.root-boxes .root-box::after{content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:2;opacity:.9}
.root-boxes .root-box:nth-child(1)::after{background:linear-gradient(90deg,#7c3aed,#4f46e5)}
.root-boxes .root-box:nth-child(2)::after{background:linear-gradient(90deg,#06b6d4,#0ea5e9)}
.root-boxes .root-box:nth-child(3)::after{background:linear-gradient(90deg,#ec4899,#f97316)}

/* decorative gradient strip on top of cards */
.body-content .card{position:relative}
.body-content .card::after{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--hb-grad);opacity:0;transition:opacity .25s var(--hb-ease);
}
.body-content .card:hover::after{opacity:1}

/* welcome title → compact creative banner */
.section-main>h1{
  position:relative;overflow:hidden;
  margin:1rem 0 1.6rem!important;padding:1.1rem 1.4rem!important;
  border-radius:16px;color:#fff!important;font-weight:700!important;font-size:1.4rem!important;
  background:linear-gradient(120deg,#5b21b6,#7c3aed 55%,#4f46e5);
  box-shadow:0 16px 34px -18px rgba(124,58,237,.6);
  display:flex;align-items:center;gap:.6rem;
}
/* little sparkle before the text */
.section-main>h1::after{content:"👋";font-size:1.3rem}
/* decorative floating blob */
.section-main>h1::before{
  content:"";position:absolute;width:180px;height:180px;border-radius:50%;pointer-events:none;
  top:-90px;inset-inline-end:-30px;
  background:radial-gradient(circle at center,rgba(255,255,255,.22),transparent 70%);
}
/* section subtitles (news etc.) → gradient text */
.section-main>h2.text-center{
  background:var(--hb-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;font-weight:800!important;
}

/* ---------- 8. Buttons ---------- */
.btn{
  border-radius:11px;font-weight:600;letter-spacing:0;
  transition:transform .16s var(--hb-ease),box-shadow .16s var(--hb-ease),filter .16s var(--hb-ease);
}
.btn:active{transform:translateY(1px)}
.btn-primary,.btn-info{
  background:var(--hb-grad)!important;border:none!important;color:#fff!important;
  box-shadow:0 10px 22px -10px rgba(124,58,237,.75);
}
.btn-primary:hover,.btn-info:hover{filter:brightness(1.06);box-shadow:0 14px 26px -10px rgba(124,58,237,.85)}
.btn-success{background:linear-gradient(135deg,#18b877,#0f9d63)!important;border:none!important;color:#fff!important;box-shadow:0 10px 22px -10px rgba(24,184,119,.7)}
.btn-danger{background:linear-gradient(135deg,#f04438,#d92d20)!important;border:none!important;color:#fff!important}
.btn-secondary,.btn-default{border-radius:11px}
.btn-outline-primary{border:1.5px solid var(--hb-primary);color:var(--hb-primary)}
.btn-outline-primary:hover{background:var(--hb-primary);color:#fff}
.btn-sm{border-radius:9px}

/* ---------- 9. Forms ---------- */
.form-control,.custom-select,.selectize-input{
  border-radius:11px!important;border:1.5px solid var(--hb-border)!important;
  padding:.62rem .85rem;transition:border-color .18s var(--hb-ease),box-shadow .18s var(--hb-ease);
  background:#fff;
}
.form-control:focus,.custom-select:focus,.selectize-input.focus{
  border-color:var(--hb-primary)!important;
  box-shadow:0 0 0 4px rgba(124,58,237,.14)!important;
}
label{font-weight:500;color:#48566b}

/* ---------- 10. Tables ---------- */
.table{border-collapse:separate;border-spacing:0}
.table thead th{
  background:#f7f9fd!important;color:#54627a!important;
  text-transform:uppercase;font-size:11.5px;letter-spacing:.05em;font-weight:600;
  border:none!important;padding:.85rem 1rem;
}
.table td{border-color:var(--hb-border)!important;vertical-align:middle;padding:.85rem 1rem}
.table tbody tr{transition:background .15s var(--hb-ease)}
.table tbody tr:hover{background:var(--hb-grad-soft)!important}

/* ---------- 11. Badges / labels ---------- */
.badge{border-radius:8px;font-weight:600;padding:.4em .7em}
.badge-primary{background:var(--hb-grad)!important}
.badge-success,.label-success{background:var(--hb-success)!important}
.badge-warning,.label-warning{background:var(--hb-warning)!important;color:#fff}
.badge-danger,.label-danger{background:var(--hb-danger)!important}

/* ---------- 12. Alerts ---------- */
.alert{border:none;border-radius:var(--hb-radius-sm);border-inline-start:4px solid transparent;box-shadow:var(--hb-shadow-sm)}
.alert-info{background:#eef4ff;border-inline-start-color:var(--hb-primary);color:#5b21b6}
.alert-success{background:#e8fbf2;border-inline-start-color:var(--hb-success);color:#0c7a4f}
.alert-warning{background:#fff6e6;border-inline-start-color:var(--hb-warning);color:#96590a}
.alert-danger{background:#fdecea;border-inline-start-color:var(--hb-danger);color:#a12019}

/* ---------- 13. Progress / misc ---------- */
.progress{border-radius:99px;height:.6rem;background:#e9edf6}
.progress-bar{background:var(--hb-grad)!important;border-radius:99px}
.dropdown-menu{border:1px solid var(--hb-border);border-radius:14px;box-shadow:var(--hb-shadow);padding:.4rem}
.dropdown-item{border-radius:9px;padding:.5rem .8rem;transition:all .15s var(--hb-ease)}
.dropdown-item:hover{background:var(--hb-grad-soft);color:var(--hb-primary-700)}
.nav-tabs .nav-link.active{border:none;border-bottom:3px solid var(--hb-primary);color:var(--hb-primary);font-weight:600;background:transparent}
.breadcrumb{background:transparent;padding-inline-start:0}

/* ---------- 14. Content entrance animation ---------- */
@keyframes hbFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.body-content .card,.body-content .root-box,.body-content .section-main>h1{
  animation:hbFadeUp .5s var(--hb-ease) both;
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- 15. RTL fine-tuning ---------- */
body.rtl .sidebar .nav-link .material-icons.mr-3{margin-right:0!important;margin-left:1rem!important}
body.rtl .pull-right{float:left!important}
body.rtl .table thead th,body.rtl .table td{text-align:right}

/* ---------- 16. Scrollbar ---------- */
*{scrollbar-width:thin;scrollbar-color:#c3ccdd transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#c3ccdd;border-radius:99px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:#9aa7c2;background-clip:padding-box}

/* =====================================================================
   17. DARK MODE
   - Auto: follows system when user hasn't chosen (no data-hb-theme set)
   - Manual: html[data-hb-theme="dark"|"light"] wins (set by enhance.js)
   ===================================================================== */
:root[data-hb-theme="dark"],
html[data-hb-theme="dark"] body.template_2019{
  --hb-ink:#e8ecf6;
  --hb-muted:#93a0bd;
  --hb-bg:#0c1020;
  --hb-card:#151b30;
  --hb-border:#26304d;
  --hb-shadow-sm:0 2px 10px rgba(0,0,0,.35);
  --hb-shadow:0 12px 34px -12px rgba(0,0,0,.6);
  --hb-shadow-lg:0 26px 60px -18px rgba(0,0,0,.7);
  --hb-sidebar:#0a0f1e;
  --hb-sidebar-2:#121a30;
}
@media (prefers-color-scheme:dark){
  :root:not([data-hb-theme="light"]){
    --hb-ink:#e8ecf6;--hb-muted:#93a0bd;--hb-bg:#0c1020;--hb-card:#151b30;
    --hb-border:#26304d;--hb-shadow-sm:0 2px 10px rgba(0,0,0,.35);
    --hb-shadow:0 12px 34px -12px rgba(0,0,0,.6);--hb-shadow-lg:0 26px 60px -18px rgba(0,0,0,.7);
    --hb-sidebar:#0a0f1e;--hb-sidebar-2:#121a30;
  }
}
/* apply tokens to real surfaces in dark */
html[data-hb-theme="dark"] body.template_2019,
@media (prefers-color-scheme:dark){}
html[data-hb-theme="dark"] body.template_2019{background:var(--hb-bg);color:var(--hb-ink)}
html[data-hb-theme="dark"] .card,
html[data-hb-theme="dark"] .root-boxes .root-box,
html[data-hb-theme="dark"] .dropdown-menu,
html[data-hb-theme="dark"] .modal-content,
html[data-hb-theme="dark"] .form-control,
html[data-hb-theme="dark"] .custom-select,
html[data-hb-theme="dark"] .selectize-input{background:var(--hb-card)!important;color:var(--hb-ink)!important;border-color:var(--hb-border)!important}
html[data-hb-theme="dark"] .table thead th{background:#1b2540!important;color:#aab6d6!important}
html[data-hb-theme="dark"] .table td{border-color:var(--hb-border)!important;color:var(--hb-ink)}
html[data-hb-theme="dark"] .card-header{border-color:var(--hb-border)!important}
html[data-hb-theme="dark"] .text-muted,html[data-hb-theme="dark"] small{color:var(--hb-muted)!important}
html[data-hb-theme="dark"] .breadcrumb{background:transparent}
html[data-hb-theme="dark"] input,html[data-hb-theme="dark"] textarea{color:var(--hb-ink)!important}
html[data-hb-theme="dark"] .progress{background:#20294a}

/* system-dark fallback (when user hasn't manually chosen) */
@media (prefers-color-scheme:dark){
  :root:not([data-hb-theme]) body.template_2019{background:var(--hb-bg);color:var(--hb-ink)}
  :root:not([data-hb-theme]) .card,
  :root:not([data-hb-theme]) .root-boxes .root-box,
  :root:not([data-hb-theme]) .dropdown-menu,
  :root:not([data-hb-theme]) .form-control,
  :root:not([data-hb-theme]) .custom-select,
  :root:not([data-hb-theme]) .selectize-input{background:var(--hb-card)!important;color:var(--hb-ink)!important;border-color:var(--hb-border)!important}
  :root:not([data-hb-theme]) .table thead th{background:#1b2540!important;color:#aab6d6!important}
  :root:not([data-hb-theme]) .table td{border-color:var(--hb-border)!important;color:var(--hb-ink)}
  :root:not([data-hb-theme]) .text-muted{color:var(--hb-muted)!important}
}

/* ---------- 18. Theme toggle + PWA install buttons ---------- */
.hb-fab{
  position:fixed;bottom:22px;inset-inline-end:22px;z-index:1200;
  display:flex;flex-direction:column;gap:10px;
}
.hb-fab button{
  width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:var(--hb-grad);color:#fff;font-size:20px;line-height:1;
  box-shadow:0 12px 26px -8px rgba(124,58,237,.75);
  display:flex;align-items:center;justify-content:center;
  transition:transform .18s var(--hb-ease),filter .18s var(--hb-ease);
}
.hb-fab button:hover{transform:translateY(-3px) scale(1.05);filter:brightness(1.08)}
.hb-fab button:active{transform:translateY(0)}
#hb-install-btn{background:linear-gradient(135deg,#18b877,#0f9d63);box-shadow:0 12px 26px -8px rgba(24,184,119,.7);display:none}