/* ══ BASE ════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --red:#D01C28;--red2:#b01520;
  --dark:#0f1117;--dark2:#1a1d27;
  --body:#f5f6fa;--white:#fff;
  --border:#e8eaed;--muted:#6b7280;
  --light:#f8f9fc;--green:#16a34a;
  --nav-w:200px;--top-h:58px;
  --radius:12px;--shadow:0 2px 12px rgba(0,0,0,.07);
}
#app{height:100%;overflow:hidden}
html,body{height:100%;margin:0;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Inter','Segoe UI',sans-serif;background:var(--body);color:var(--dark);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
a{text-decoration:none;color:inherit}
button{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter','Segoe UI',sans-serif;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter','Segoe UI',sans-serif}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:#ddd;border-radius:99px}

/* ══ TOPBAR ══════════════════════════════════════════════════════════════════ */
.topbar{
  position:fixed;top:0;left:0;right:0;height:var(--top-h);z-index:200;
  background:var(--dark);display:flex;align-items:center;
  padding:0 1.25rem 0 1.25rem;gap:14px;
  box-shadow:0 2px 12px rgba(0,0,0,.3);
}
.topbar-brand{display:flex;align-items:center;gap:10px;width:var(--nav-w);flex-shrink:0}
.topbar-logo{width:36px;height:36px;border-radius:50%;object-fit:contain;background:transparent;display:block}
.topbar-name{font-size:14px;font-weight:800;color:#fff}
.topbar-sub{font-size:10px;color:rgba(255,255,255,.4);letter-spacing:.3px}
.topbar-title{font-size:15px;font-weight:700;color:rgba(255,255,255,.7);flex:1}
.topbar-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.btn-signout{height:32px;padding:0 14px;border-radius:8px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);font-size:12.5px;font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,.1);transition:all .15s}
.btn-signout:hover{background:rgba(255,255,255,.15);color:#fff}

/* ══ LAYOUT ══════════════════════════════════════════════════════════════════ */
.layout{display:flex;height:calc(100vh - var(--top-h));margin-top:var(--top-h);overflow:hidden;overscroll-behavior:none}

/* ══ SIDEBAR ═════════════════════════════════════════════════════════════════ */
.sidebar{
  width:var(--nav-w);flex-shrink:0;
  background:var(--dark2);
  display:flex;flex-direction:column;
  padding:16px 10px;overflow-y:auto;
  position:relative;
}
.nav-section{font-size:10px;font-weight:700;color:rgba(255,255,255,.25);letter-spacing:.8px;padding:14px 8px 6px;text-transform:uppercase}
.nav-item{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:9px 10px;border-radius:9px;
  font-size:13px;font-weight:600;color:rgba(255,255,255,.6);
  text-align:left;transition:all .15s;margin-bottom:1px;
  cursor:pointer;border:none;background:none;
}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:var(--red);color:#fff}
.nav-icon{font-size:15px;flex-shrink:0}
.nav-badge{margin-left:auto;background:rgba(255,255,255,.15);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px;min-width:20px;text-align:center}
.nav-item.active .nav-badge{background:rgba(255,255,255,.25)}

/* ══ MAIN CONTENT ════════════════════════════════════════════════════════════ */
.main{flex:1;overflow-y:auto;min-width:0;background:var(--body);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* ══ PAGES ═══════════════════════════════════════════════════════════════════ */
.page{display:none;padding:1.5rem;animation:fadeIn .2s ease}
.page.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ══ PAGE HEADER ═════════════════════════════════════════════════════════════ */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.25rem;gap:12px;flex-wrap:wrap}
.page-title{font-size:22px;font-weight:800;color:var(--dark)}
.page-sub{font-size:13px;color:var(--muted);margin-top:3px}

/* ══ CARDS ═══════════════════════════════════════════════════════════════════ */
.card{background:#fff;border-radius:var(--radius);border:1.5px solid var(--border);padding:1.25rem;box-shadow:var(--shadow)}
.card-title{font-size:14px;font-weight:800;color:var(--dark);margin-bottom:1rem}

/* ══ BUTTONS ═════════════════════════════════════════════════════════════════ */
.btn-primary{height:38px;padding:0 18px;border-radius:9px;background:var(--red);color:#fff;font-size:13px;font-weight:700;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:6px;transition:background .15s;white-space:nowrap}
.btn-primary:hover{background:var(--red2)}
.btn-secondary{height:38px;padding:0 18px;border-radius:9px;border:1.5px solid var(--border);background:#fff;color:var(--dark);font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s;white-space:nowrap}
.btn-secondary:hover{border-color:var(--dark);background:var(--light)}
.btn-danger{height:38px;padding:0 18px;border-radius:9px;background:#dc2626;color:#fff;font-size:13px;font-weight:700;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:6px;transition:background .15s}
.btn-danger:hover{background:#b91c1c}
.btn-sm{height:30px;padding:0 12px;font-size:12px;border-radius:7px}

/* ══ FORMS ═══════════════════════════════════════════════════════════════════ */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-label{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.form-input{height:40px;border:1.5px solid var(--border);border-radius:9px;padding:0 12px;font-size:13.5px;font-family:'Inter',sans-serif;outline:none;transition:border .15s;color:var(--dark);background:#fff;width:100%}
.form-input:focus{border-color:var(--red)}
textarea.form-input{height:auto;padding:10px 12px;resize:vertical}
select.form-input{cursor:pointer}

.product-editor-shell{
  max-width:1120px;
  display:grid;
  gap:18px;
}
#page-addProduct{
  background:
    radial-gradient(circle at top right, rgba(208,28,40,.08), transparent 32rem),
    var(--body);
}
#page-addProduct .page-header{
  max-width:1120px;
  align-items:center;
  margin-bottom:18px;
}
#page-addProduct .page-title{
  font-size:30px;
  font-weight:850;
  letter-spacing:-.03em;
}
#page-addProduct .card{
  border:1px solid rgba(15,17,23,.07);
  border-radius:22px;
  padding:24px;
  background:rgba(255,255,255,.86);
  box-shadow:0 18px 55px rgba(15,17,23,.08);
}
#page-addProduct .card-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  font-size:18px;
  font-weight:850;
  letter-spacing:-.02em;
}
#page-addProduct .card-title::before{
  content:'';
  width:8px;
  height:22px;
  border-radius:999px;
  background:var(--red);
}
#page-addProduct .form-grid{
  gap:16px;
}
#page-addProduct .form-group{
  gap:7px;
}
#page-addProduct .form-label{
  font-size:11px;
  color:#667085;
  letter-spacing:.08em;
}
#page-addProduct .form-input{
  height:50px;
  border-radius:14px;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  padding:0 15px;
  font-size:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
#page-addProduct textarea.form-input{
  min-height:132px;
  padding:14px 15px;
}
#page-addProduct .form-input:focus{
  border-color:rgba(208,28,40,.65);
  background:#fff;
  box-shadow:0 0 0 4px rgba(208,28,40,.09);
}
#page-addProduct .btn-primary,
#page-addProduct .btn-secondary,
#page-addProduct .btn-danger{
  height:46px;
  border-radius:14px;
  font-size:14px;
}

/* ══ TABLE ═══════════════════════════════════════════════════════════════════ */
.toolbar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.search-input{flex:1;min-width:200px;height:38px;border:1.5px solid var(--border);border-radius:9px;padding:0 12px;font-size:13.5px;outline:none;transition:border .15s;font-family:'Inter',sans-serif}
.search-input:focus{border-color:var(--red)}
.filter-sel{height:38px;border:1.5px solid var(--border);border-radius:9px;padding:0 10px;font-size:13px;font-family:'Inter',sans-serif;outline:none;background:#fff;cursor:pointer;color:var(--dark)}
.table-wrap{overflow-x:auto;border-radius:10px;border:1.5px solid var(--border)}
.data-table{width:100%;border-collapse:collapse}
.data-table th{background:var(--light);padding:10px 14px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;text-align:left;white-space:nowrap;border-bottom:1.5px solid var(--border)}
.data-table td{padding:10px 14px;font-size:13.5px;border-bottom:1px solid var(--border);vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:var(--light)}

/* ══ STATS ═══════════════════════════════════════════════════════════════════ */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.stat-card{background:#fff;border-radius:var(--radius);border:1.5px solid var(--border);padding:1.25rem;box-shadow:var(--shadow)}
.stat-num{font-size:28px;font-weight:800;color:var(--dark)}
.stat-lbl{font-size:12px;color:var(--muted);margin-top:4px;font-weight:500}

/* ══ ORDER CARDS ═════════════════════════════════════════════════════════════ */
.order-card{background:#fff;border-radius:var(--radius);border:1.5px solid var(--border);overflow:hidden;margin-bottom:10px}
.order-card-head{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.order-card-body{padding:12px 16px}
.order-status{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:99px}
.status-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.status-btn{height:28px;padding:0 12px;border-radius:6px;border:1.5px solid var(--border);background:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;color:var(--dark)}
.status-btn:hover{border-color:var(--red);color:var(--red)}
.status-btn.active{background:var(--red);border-color:var(--red);color:#fff}

/* ══ TOGGLE ══════════════════════════════════════════════════════════════════ */
.toggle{width:44px;height:24px;border-radius:99px;background:#d1d5db;border:none;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0}
.toggle::after{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle.on{background:var(--green)}
.toggle.on::after{transform:translateX(20px)}

/* ══ SETTINGS ROWS ═══════════════════════════════════════════════════════════ */
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border);gap:12px}
.settings-row:last-child{border-bottom:none}
.settings-row-info h4{font-size:13.5px;font-weight:700;color:var(--dark);margin-bottom:2px}
.settings-row-info p{font-size:12px;color:var(--muted)}

/* ══ TAGS & BADGES ═══════════════════════════════════════════════════════════ */
.tag-badge{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:5px;letter-spacing:.3px}
.tag-new{background:#dcfce7;color:#166534}
.tag-hot{background:#fee2e2;color:#dc2626}
.tag-sale{background:#fef9c3;color:#854d0e}
.status-active{background:#dcfce7;color:#166534;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px}
.status-hidden{background:#f3f4f6;color:#6b7280;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px}
.oos-tag{background:#fee2e2;color:#dc2626;font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;margin-left:4px}

/* ══ LOADING / EMPTY ═════════════════════════════════════════════════════════ */
.loading{text-align:center;padding:2.5rem;color:var(--muted);font-size:14px}

/* ══ PRODUCT PHOTO ═══════════════════════════════════════════════════════════ */
.prod-photo{width:44px;height:44px;border-radius:8px;object-fit:contain;border:1.5px solid var(--border);background:var(--light);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:22px;overflow:hidden}
.prod-photo img{width:100%;height:100%;object-fit:contain}

/* ══ RESPONSIVE ══════════════════════════════════════════════════════════════ */
@media(max-width:960px){
  :root{--nav-w:56px}
  .topbar-brand{width:56px}
  .topbar-name,.topbar-sub,.nav-item span:not(.nav-icon),.nav-badge,.nav-section{display:none}
  .nav-item{justify-content:center;padding:10px}
  .nav-icon{font-size:18px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .page{padding:1rem}
  .stats-grid{grid-template-columns:1fr 1fr}
  .topbar-right .btn-signout span{display:none}
}

/* Mobile admin layout */
@media(max-width:760px){
  :root{
    --nav-w:0px;
    --top-h:56px;
    --bottom-nav-h:74px;
  }

  html,body{overflow:hidden}

  .topbar{
    height:var(--top-h);
    padding:0 10px;
    gap:8px;
    overflow:hidden;
  }
  .topbar-brand{
    width:auto;
    min-width:0;
    flex:1 1 auto;
    max-width:calc(100% - 168px);
  }
  .topbar-logo{
    width:34px;
    height:34px;
    border-radius:50%;
    object-fit:contain;
    background:transparent;
  }
  .topbar-name{
    display:block;
    font-size:13px;
    line-height:1.1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .topbar-sub,.topbar-title,#userEmail{
    display:none;
  }
  .topbar-right{
    gap:6px;
    margin-left:0;
    flex:0 0 auto;
    min-width:0;
  }
  #userName{
    max-width:86px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
  }
  .btn-signout{
    width:68px;
    height:34px;
    padding:0;
    justify-content:center;
    font-size:0;
    flex:0 0 68px;
  }
  .btn-signout::before{
    content:'Log out';
    font-size:11.5px;
    font-weight:700;
  }

  .layout{
    display:block;
    height:calc(100vh - var(--top-h));
    margin-top:var(--top-h);
    overflow:hidden;
  }
  .main{
    height:100%;
    overflow-y:auto;
    padding-bottom:calc(var(--bottom-nav-h) + 12px);
  }

  .sidebar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    width:auto;
    height:var(--bottom-nav-h);
    z-index:500;
    flex-direction:row;
    align-items:center;
    gap:6px;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    overflow-x:auto;
    overflow-y:hidden;
    border-top:1px solid rgba(255,255,255,.08);
    box-shadow:0 -8px 24px rgba(0,0,0,.22);
    scrollbar-width:none;
  }
  .sidebar::-webkit-scrollbar{display:none}
  .nav-section{display:none}
  .nav-item{
    min-width:74px;
    height:56px;
    flex:0 0 auto;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    padding:7px 8px;
    border-radius:12px;
    margin:0;
    font-size:10.5px;
    line-height:1;
    text-align:center;
    color:rgba(255,255,255,.72);
  }
  .nav-item span:not(.nav-icon){
    display:block;
    max-width:68px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .nav-icon{
    font-size:17px;
    line-height:1;
  }
  .nav-badge{
    display:block;
    position:absolute;
    top:4px;
    right:8px;
    min-width:17px;
    padding:1px 5px;
    font-size:9px;
  }

  .page{
    padding:14px 12px 18px;
  }
  .page-header{
    align-items:stretch;
    margin-bottom:14px;
  }
  .page-header > div,
  .page-header > button,
  .page-header > select,
  .page-header > div[style*="display:flex"]{
    width:100%;
  }
  .page-title{
    font-size:19px;
    line-height:1.2;
  }
  .page-sub{
    font-size:12px;
  }

  .card,
  .stat-card{
    border-radius:10px;
    padding:14px;
  }
  .card-title{
    margin-bottom:12px;
  }
  .stats-grid{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .stat-num{
    font-size:22px;
  }
  .stat-lbl{
    font-size:11px;
  }

  .toolbar{
    gap:8px;
  }
  .search-input,
  .filter-sel,
  .toolbar .btn-primary,
  .toolbar .btn-secondary{
    width:100%;
    min-width:0;
  }
  .form-grid{
    grid-template-columns:1fr;
  }
  .form-input,
  .search-input,
  .filter-sel{
    height:44px;
    font-size:14px;
  }
  textarea.form-input{
    min-height:120px;
  }
  .btn-primary,
  .btn-secondary,
  .btn-danger{
    width:100%;
    justify-content:center;
    min-height:42px;
    height:auto;
    white-space:normal;
    text-align:center;
  }
  .btn-sm{
    width:auto;
    min-height:32px;
    padding:0 10px;
  }

  .table-wrap{
    margin-left:-2px;
    margin-right:-2px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .data-table{
    min-width:720px;
  }
  .data-table th,
  .data-table td{
    padding:10px 12px;
    font-size:13px;
  }
  .prod-photo{
    width:42px;
    height:42px;
  }

  .order-card-head{
    align-items:flex-start;
    padding:12px;
  }
  .order-card-body{
    padding:12px;
    font-size:13px;
    overflow-wrap:anywhere;
  }
  .status-btns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .status-btn{
    height:34px;
    width:100%;
  }

  .settings-row{
    align-items:flex-start;
    flex-direction:column;
  }
  .settings-row .toggle{
    align-self:flex-start;
  }

  #page-brands > div,
  #page-settings > div,
  #page-offers > div,
  #page-addProduct .product-editor-shell{
    max-width:none !important;
    width:100% !important;
  }
  #page-brands > div{
    grid-template-columns:1fr !important;
  }
  #page-access .card{
    max-width:none !important;
  }
  #page-access .card > div[style*="display:flex"],
  #page-settings .card > div[style*="display:flex"],
  #page-offers .card > div[style*="display:flex"]{
    flex-direction:column !important;
    align-items:stretch !important;
  }

  #toast{
    left:12px !important;
    right:12px !important;
    bottom:calc(var(--bottom-nav-h) + 12px) !important;
    max-width:none !important;
    text-align:center;
  }
}

@media(max-width:420px){
  .stats-grid{
    grid-template-columns:1fr;
  }
  .nav-item{
    min-width:68px;
  }
  .nav-item span:not(.nav-icon){
    max-width:62px;
  }
  .page{
    padding-left:10px;
    padding-right:10px;
  }
}

/* Mobile nav polish: icon-only buttons avoid text overlap on phone browsers */
@media(max-width:760px){
  .sidebar{
    justify-content:flex-start;
    gap:8px;
    height:68px;
    padding:7px 10px calc(7px + env(safe-area-inset-bottom));
  }
  .sidebar > div[style*="bottom"],
  .sidebar > div[style*="margin-top:auto"],
  .sidebar a[href*="mahavirmobiles.com"]{
    display:none !important;
  }
  .nav-item,
  .nav-item.active{
    position:relative;
    width:54px;
    min-width:54px;
    max-width:54px;
    height:52px;
    flex:0 0 54px;
    padding:0;
    border-radius:14px;
    font-size:0;
    line-height:0;
    overflow:hidden;
  }
  .nav-item span:not(.nav-icon){
    display:none !important;
  }
  .nav-icon{
    display:block;
    font-size:22px;
    line-height:1;
    margin:0;
  }
  .nav-badge{
    display:block !important;
    top:3px;
    right:3px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    line-height:18px;
    font-size:10px;
    border-radius:999px;
    background:rgba(255,255,255,.22);
  }
  .nav-item.active .nav-badge{
    background:rgba(255,255,255,.34);
  }
  .main{
    padding-bottom:1.5rem;
  }
  #toast{
    bottom:1rem !important;
  }
}

@media(max-width:380px){
  .topbar-name{
    max-width:145px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #userName{
    display:none;
  }
  .btn-signout{
    width:62px;
    flex-basis:62px;
    font-size:0;
  }
  .btn-signout::before{
    content:'Log out';
    font-size:11px;
  }
}

.invoice-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  margin:10px 0 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--light);
}
.invoice-title{
  font-size:11px;
  font-weight:800;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.invoice-meta{
  margin-top:3px;
  font-size:13px;
  font-weight:700;
  color:var(--dark);
}
.invoice-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
}
.invoice-pending{
  display:inline-flex;
  align-items:center;
  height:30px;
  padding:0 10px;
  border-radius:999px;
  background:#fff7ed;
  color:#c2410c;
  font-size:12px;
  font-weight:800;
}
.customer-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  margin-bottom:14px;
  box-shadow:var(--shadow);
}
.customer-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.customer-name{
  font-size:18px;
  font-weight:900;
  color:var(--dark);
}
.customer-meta{
  margin-top:3px;
  font-size:13px;
  color:var(--muted);
}
.customer-stats{
  text-align:right;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}
.customer-stats strong{
  display:block;
  margin-top:3px;
  color:var(--red);
  font-size:17px;
}
.customer-profile-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}
.customer-profile-grid div{
  padding:10px 12px;
  border-radius:10px;
  background:var(--light);
  border:1px solid var(--border);
}
.customer-profile-grid span{
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-bottom:3px;
  text-transform:uppercase;
  font-weight:800;
}
.customer-profile-grid strong{
  display:block;
  font-size:13px;
  color:var(--dark);
  overflow-wrap:anywhere;
}
.customer-orders-title{
  font-size:12px;
  font-weight:900;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin:4px 0 8px;
}
.customer-order-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:start;
  padding:12px 0;
  border-top:1px solid var(--border);
}
.customer-order-row strong,
.customer-order-row span,
.customer-order-row small{
  display:block;
}
.customer-order-row span{
  margin-top:3px;
  color:var(--dark);
  font-weight:700;
  overflow-wrap:anywhere;
}
.customer-order-row small{
  margin-top:3px;
  color:var(--muted);
}
.customer-order-actions{
  min-width:260px;
  text-align:right;
}
.customer-order-actions .invoice-box{
  margin:8px 0 0;
  padding:10px;
}

.hot-sale-admin-card{
  position:relative;
  overflow:hidden;
  border:1px solid #fecaca!important;
  background:linear-gradient(145deg,#fff,#fff5f5 68%,#fee2e2)!important;
}
.hot-sale-admin-card::after{
  content:'HOT';
  position:absolute;
  right:22px;
  top:20px;
  padding:5px 10px;
  border-radius:999px;
  background:#dc2626;
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
}
.hot-sale-toggle{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,.72);
  border:1px solid #fecdd3;
  cursor:pointer;
}
.hot-sale-toggle input{
  width:20px;
  height:20px;
  margin-top:2px;
  accent-color:var(--red);
}
.hot-sale-toggle strong{
  display:block;
  font-size:16px;
  color:var(--dark);
  letter-spacing:-.02em;
}
.hot-sale-toggle small{
  display:block;
  margin-top:3px;
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
}
.hot-sale-note{
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  background:#fff;
  border:1px solid #fecaca;
  font-size:13px;
  font-weight:800;
  color:#b91c1c;
}
.hot-sale-table-tag{
  display:inline-flex;
  margin-top:6px;
  padding:4px 8px;
  border-radius:999px;
  background:#fee2e2;
  color:#b91c1c;
  font-size:11px;
  font-weight:900;
}

@media(max-width:760px){
  .invoice-box,
  .customer-head,
  .customer-order-row{
    display:flex;
    flex-direction:column;
    align-items:stretch;
  }
  .invoice-actions,
  .customer-stats,
  .customer-order-actions{
    justify-content:flex-start;
    text-align:left;
    min-width:0;
  }
  .customer-profile-grid{
    grid-template-columns:1fr;
  }
}

/* ── HAMBURGER MENU ─────────────────────────────────────────────────────────── */
@keyframes slideInLeft{from{transform:translateX(-100%)}to{transform:translateX(0)}}

@media(max-width:760px){
  #adminHamburger{display:flex !important}
  .topbar-brand .topbar-name,.topbar-brand .topbar-sub{display:none}
  .topbar-brand img{width:30px;height:30px;border-radius:50%;object-fit:contain;background:transparent}
  /* Hide the bottom sidebar on mobile — replaced by drawer */
  .sidebar{display:none !important}
  /* Fix layout to fill correctly without bottom nav */
  .layout{
    display:block !important;
    height:calc(100vh - var(--top-h)) !important;
    overflow:hidden !important;
    padding-left:0 !important;
  }
  .main{
    height:100% !important;
    overflow-y:auto !important;
    padding-bottom:2rem !important;
  }
}