/* ============================================================
   TechCommerce Admin — premium Bootstrap 5 theme (SPA).
   Gradient sidebar, mixed-color widgets, glass cards, responsive.
   ============================================================ */
:root{
  --bz-blue:#4f7cff; --bz-violet:#8b5cf6; --bz-cyan:#06b6d4;
  --bz-emerald:#10b981; --bz-orange:#f97316; --bz-pink:#ec4899;
  --bz-ink:#0e1226; --bz-ink2:#161b33; --bz-muted:#6b7390;
  --bz-grad:linear-gradient(135deg,#4f7cff,#8b5cf6);
  --bz-grad-cyan:linear-gradient(135deg,#4f7cff,#06b6d4);
  --bz-grad-emerald:linear-gradient(135deg,#10b981,#06b6d4);
  --bz-grad-orange:linear-gradient(135deg,#f97316,#ec4899);
  --bz-grad-violet:linear-gradient(135deg,#8b5cf6,#ec4899);
  --bz-sidebar-w:264px; --bz-mini-w:78px; --bz-topbar-h:66px;
  --bz-radius:1rem; --bz-shadow:0 8px 30px rgba(20,27,51,.08);
  --bz-shadow-lg:0 20px 50px rgba(20,27,51,.16);
  --bs-primary:#4f7cff;
}
*{ scrollbar-width:thin; }
body{
  margin:0; font-family:'Inter',system-ui,'Segoe UI',sans-serif; color:#1f2540;
  background:url('../img/app-bg.jpg') center/cover no-repeat fixed, #eef3fb;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Layout shell ---------- */
.bz-shell{ display:flex; min-height:100vh; }
.bz-sidebar{
  width:var(--bz-sidebar-w); flex:0 0 var(--bz-sidebar-w);
  background:url('../img/side-bg.jpg') center/cover no-repeat;
  color:#3b4263; position:fixed; inset:0 auto 0 0; z-index:1040;
  display:flex; flex-direction:column; transition:width .25s ease, transform .25s ease;
  overflow:hidden; border-right:1px solid rgba(255,255,255,.5);
}
.bz-main{
  margin-left:var(--bz-sidebar-w); flex:1; min-width:0;
  transition:margin-left .25s ease; display:flex; flex-direction:column;
}
body.bz-mini .bz-sidebar{ width:var(--bz-mini-w); flex-basis:var(--bz-mini-w); }
body.bz-mini .bz-main{ margin-left:var(--bz-mini-w); }
body.bz-mini .bz-label,
body.bz-mini .bz-brand-text,
body.bz-mini .bz-nav-section{ display:none; }
body.bz-mini .bz-nav{ padding:.5rem .5rem; }
body.bz-mini .bz-nav-link{ justify-content:center; padding-left:0; padding-right:0; gap:0; }
body.bz-mini .bz-nav-link i{ min-width:auto; }
body.bz-mini .bz-brand{ justify-content:center; padding:2px; }

/* ---------- Brand ---------- */
.bz-brand{ display:flex; align-items:center; justify-content:center; gap:.6rem; padding:2px; height:var(--bz-topbar-h); }
.bz-brand-logo{
  width:auto; height:100%; max-width:100%;
  display:grid; place-items:center; color:#1f2540; font-weight:800; flex:0 1 auto;
}
.bz-brand-logo img{ width:auto; height:50px; max-width:100%; object-fit:contain; display:block; }
.bz-brand-text{ font-weight:800; font-size:1.15rem; color:#1f2540; white-space:nowrap; transition:opacity .2s; }

/* ---------- Nav ---------- */
.bz-nav{ padding:.5rem .7rem; overflow-y:auto; flex:1; }
.bz-nav::-webkit-scrollbar{ width:6px; } .bz-nav::-webkit-scrollbar-thumb{ background:rgba(31,37,64,.18); border-radius:10px; }
.bz-nav-section{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:#6b6f96; font-weight:700; padding:1rem .8rem .35rem; transition:opacity .2s; }
.bz-nav-link{
  display:flex; align-items:center; gap:.8rem; padding:.7rem .85rem; border-radius:.75rem;
  color:#3b4263; text-decoration:none; font-weight:600; font-size:.92rem; margin-bottom:.2rem;
  cursor:pointer; transition:background .18s,color .18s,transform .18s; white-space:nowrap; position:relative;
}
.bz-nav-link i{ font-size:1.15rem; min-width:1.3rem; text-align:center; }
.bz-nav-link:hover{ background:rgba(255,255,255,.55); color:#1f2540; }
.bz-nav-link.active{ background:var(--bz-grad); color:#fff; box-shadow:0 8px 22px rgba(79,124,255,.45); }
.bz-label{ transition:opacity .2s; }

/* ---------- Topbar ---------- */
.bz-topbar{
  height:var(--bz-topbar-h); position:sticky; top:0; z-index:1030;
  display:flex; align-items:center; gap:1rem; padding:0 clamp(1rem,3vw,1.8rem);
  background:rgba(255,255,255,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(20,27,51,.06);
}
.bz-burger{ border:0; background:rgba(79,124,255,.1); color:#3b63f0; width:42px; height:42px; border-radius:.7rem; font-size:1.2rem; cursor:pointer; }
.bz-burger:hover{ background:rgba(79,124,255,.2); }
.bz-search{ position:relative; flex:1; max-width:420px; }
.bz-search input{ padding-left:2.4rem; border-radius:.8rem; background:#fff; border:1px solid rgba(20,27,51,.08); }
.bz-search i{ position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:#9aa1bd; }
.bz-avatar{ width:40px; height:40px; border-radius:50%; background:var(--bz-grad-violet); color:#fff; display:grid; place-items:center; font-weight:700; }

/* ---------- Content ---------- */
.bz-content{ padding:clamp(1.1rem,2.5vw,2rem) clamp(1.1rem,3vw,2.2rem) 2.6rem; flex:1; }
.bz-page-title{ font-weight:800; font-size:1.5rem; margin:0 0 1.25rem; }
/* outside gap between stacked cards / tables / forms in a view */
#viewBody > .bz-card,
#viewBody > form,
#viewBody > .row,
#viewBody > .table-responsive{ margin-bottom:1.5rem; }
#viewBody > :last-child{ margin-bottom:0; }

/* ---------- Stat widgets (mixed gradients) ---------- */
.bz-stat{ border:0; border-radius:var(--bz-radius); color:#fff; position:relative; overflow:hidden; box-shadow:var(--bz-shadow); }
.bz-stat .card-body{ padding:1.2rem 1.3rem; }
.bz-stat .bz-stat-ico{ position:absolute; right:1rem; top:1rem; font-size:1.5rem; opacity:.85; }
.bz-stat .bz-stat-val{ font-size:1.7rem; font-weight:800; }
.bz-stat .bz-stat-lbl{ opacity:.92; font-weight:600; font-size:.85rem; }
.bz-stat::after{ content:""; position:absolute; right:-25px; bottom:-25px; width:110px; height:110px; border-radius:50%; background:rgba(255,255,255,.14); }
.bz-g-blue{ background:var(--bz-grad-cyan); } .bz-g-violet{ background:var(--bz-grad-violet); }
.bz-g-emerald{ background:var(--bz-grad-emerald); } .bz-g-orange{ background:var(--bz-grad-orange); }
.bz-g-indigo{ background:var(--bz-grad); }

/* ---------- Cards / tables ---------- */
.bz-card{ border:0; border-radius:var(--bz-radius); box-shadow:var(--bz-shadow); background:#fff; overflow:hidden; }
.bz-card > .card-header{ background:transparent; border-bottom:1px solid rgba(20,27,51,.06); font-weight:700; padding:1rem 1.4rem; }
.bz-card > .card-body{ padding:1.4rem; }
.bz-card > .card-footer{ background:transparent; border-top:1px solid rgba(20,27,51,.06); padding:.9rem 1.4rem; }
/* table sits flush to the rounded card; give cells matching side gutters */
.bz-card .table > :not(caption) > * > *{ padding-left:1.4rem; padding-right:1.4rem; }
.bz-card .table thead th{ padding-top:.9rem; padding-bottom:.9rem; }
.bz-card .table tbody td{ padding-top:.85rem; padding-bottom:.85rem; }
.bz-card .table tbody tr:last-child td{ border-bottom:0; }
.table thead th{ font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--bz-muted); border-bottom-width:1px; }
.table tbody tr{ transition:background .15s; }
.table tbody tr:hover{ background:rgba(79,124,255,.045); }
.table td,.table th{ vertical-align:middle; }
.bz-thumb{ width:42px; height:42px; object-fit:cover; border-radius:.55rem; }

/* ---------- Buttons / gradient ---------- */
.btn-bz{ background:var(--bz-grad); color:#fff; border:0; font-weight:600; box-shadow:0 8px 22px rgba(79,124,255,.4); }
.btn-bz:hover{ color:#fff; filter:brightness(1.06); transform:translateY(-1px); }
.btn-soft{ background:rgba(79,124,255,.1); color:#3b63f0; border:0; font-weight:600; }
.btn-soft:hover{ background:rgba(79,124,255,.2); color:#3b63f0; }

/* ---------- Pills ---------- */
.bz-pill{ font-size:.72rem; font-weight:700; padding:.3rem .65rem; border-radius:999px; display:inline-block; }
.bz-pill.s-success{ background:rgba(16,185,129,.14); color:#059669; }
.bz-pill.s-warn{ background:rgba(249,115,22,.16); color:#c2410c; }
.bz-pill.s-danger{ background:rgba(239,68,68,.14); color:#dc2626; }
.bz-pill.s-info{ background:rgba(79,124,255,.14); color:#3b63f0; }
.bz-pill.s-muted{ background:rgba(31,37,64,.08); color:#6b7390; }

/* ---------- Skeleton ---------- */
.bz-sk{ position:relative; overflow:hidden; background:#e9edf7; border-radius:.6rem; }
.bz-sk::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); animation:bzsh 1.3s infinite; }
@keyframes bzsh{ 100%{ transform:translateX(100%); } }

/* ---------- View transition ---------- */
.bz-fade{ animation:bzfade .35s ease; }
@keyframes bzfade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ---------- Mobile ---------- */
.bz-backdrop{ display:none; position:fixed; inset:0; background:rgba(14,18,38,.45); z-index:1035; }
@media (max-width:991.98px){
  .bz-sidebar{ transform:translateX(-100%); width:var(--bz-sidebar-w); flex-basis:var(--bz-sidebar-w); }
  body.bz-open .bz-sidebar{ transform:none; }
  body.bz-open .bz-backdrop{ display:block; }
  .bz-main{ margin-left:0 !important; }
  /* mini has no effect on mobile — sidebar is a full drawer */
  body.bz-mini .bz-sidebar{ width:var(--bz-sidebar-w); flex-basis:var(--bz-sidebar-w); }
  body.bz-mini .bz-label,body.bz-mini .bz-brand-text,body.bz-mini .bz-nav-section{ display:revert; }
  body.bz-mini .bz-nav-link{ justify-content:flex-start; padding-left:.85rem; padding-right:.85rem; gap:.8rem; }
  body.bz-mini .bz-brand{ justify-content:center; padding:2px; }
}

/* ============================================================
   Auth pages (login / register) — replaces inline styles.
   ============================================================ */
.bz-auth{ min-height:100vh; display:grid; place-items:center; padding:1.5rem;
  background:url('../img/auth-bg.png') center/cover no-repeat fixed, #0e1226; }
.bz-auth-card{ width:100%; max-width:420px; border-radius:1.5rem; padding:2rem;
  background:rgba(255,255,255,.72); backdrop-filter:blur(16px); box-shadow:var(--bz-shadow-lg); }
.bz-auth-card.wide{ max-width:460px; }
.bz-auth-head{ text-align:center; margin-bottom:1.2rem; }
.bz-auth-brand{ font-weight:800; font-size:1.5rem; }
.bz-auth h1{ font-size:1.4rem; font-weight:800; margin:1rem 0 .25rem; }
.bz-auth .sub{ color:var(--bz-muted); margin-top:0; }
.bz-auth .field{ margin-bottom:1rem; }
.bz-auth label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:.35rem; color:#1f2540; }
.bz-auth .alt{ text-align:center; color:var(--bz-muted); margin-top:1rem; font-size:.9rem; }
.bz-auth .alt a{ color:#3b63f0; font-weight:600; text-decoration:none; }
.bz-auth-copy{ width:100%; text-align:center; color:var(--bz-muted); margin-top:1.25rem; font-size:.78rem; opacity:.8; }
.bz-auth-copy a{ color:var(--bz-muted); font-weight:600; text-decoration:none; }
.bz-auth-copy a:hover{ color:#3b63f0; text-decoration:underline; }
.text-gradient{ background:var(--bz-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.bz-alert{ display:none; padding:.6rem 1rem; border-radius:.7rem; margin-bottom:1rem; font-size:.88rem; font-weight:600; }
.bz-alert.show{ display:block; }
.bz-alert-danger{ background:rgba(239,68,68,.14); color:#dc2626; }

/* small spacing utilities used by JS-rendered views (avoid inline styles) */
.bz-w-auto{ width:auto; display:inline-block; }
.bz-thumb-sm{ width:42px; height:42px; object-fit:cover; border-radius:.55rem; }
.bz-logo-prev{ width:120px; height:120px; object-fit:cover; border-radius:.75rem; background:#eef2ff; }
.bz-chart{ min-height:300px; }

/* modal: allow selects/dropdowns to show fully; scroll body for tall content */
.modal-content { border-radius: 1rem; }
.modal-content > .modal-header { border-top-left-radius: 1rem; border-top-right-radius: 1rem; }
.modal-body { max-height: 72vh; overflow-y: auto; }