/* ============================================================
   SNACKLY WHOLESALE PORTAL — style.css v2
   Clean B2B · white + black + #2899f8
   Font: DM Sans (body) · DM Mono (data)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&display=swap');

/* ── Variables ── */
:root {
  --blue:        #2899f8;
  --blue-dark:   #1a7fd4;
  --blue-mid:    #0d6fc4;
  --blue-light:  #e8f4ff;
  --blue-50:     rgba(40,153,248,0.08);
  --black:       #0d0f12;
  --gray-900:    #181c24;
  --gray-800:    #252a35;
  --gray-700:    #3d4350;
  --gray-600:    #505769;
  --gray-500:    #6b7280;
  --gray-400:    #9ca3af;
  --gray-300:    #d1d5db;
  --gray-200:    #e5e7eb;
  --gray-100:    #f3f5f8;
  --gray-50:     #f9fafb;
  --white:       #ffffff;
  --green:       #16a34a;
  --green-light: #dcfce7;
  --red:         #dc2626;
  --red-light:   #fee2e2;
  --yellow:      #d97706;
  --yellow-light:#fef3c7;
  --orange:      #ea580c;
  --orange-light:#ffedd5;
  --purple:      #7c3aed;
  --purple-light:#ede9fe;

  --sidebar-w:   230px;
  --header-h:    56px;
  --radius-sm:   5px;
  --radius:      7px;
  --radius-lg:   11px;
  --radius-xl:   16px;
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.07);
  --shadow:      0 3px 12px rgba(0,0,0,0.08);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl:   0 16px 48px rgba(0,0,0,0.16);
  --font:        'DM Sans', sans-serif;
  --mono:        'DM Mono', monospace;
  --t:           0.15s ease;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14.5px; scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--black); background: var(--gray-100); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button { font-family: var(--font); cursor: pointer; }

/* ══════════════════════════════════════════
   AUTH PAGES
══════════════════════════════════════════ */
.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--gray-100); padding: 24px;
}
.auth-split {
  display: flex; width: 100%; max-width: 860px; min-height: 500px;
  background: var(--white); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl); overflow: hidden; border: 1px solid var(--gray-200);
}
.auth-brand {
  width: 320px; flex-shrink: 0; background: var(--black);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 44px 32px; position: relative; overflow: hidden;
}
.auth-brand::before { content:''; position:absolute; width:260px; height:260px; background:radial-gradient(circle,rgba(40,153,248,0.18) 0%,transparent 70%); top:-60px; left:-50px; }
.auth-brand::after  { content:''; position:absolute; width:160px; height:160px; background:radial-gradient(circle,rgba(40,153,248,0.1) 0%,transparent 70%); bottom:30px; right:-20px; }
.auth-brand-logo { width:140px; margin-bottom:22px;  position:relative; z-index:1; }
.auth-brand-tagline { color:rgba(255,255,255,0.58); font-size:0.86rem; text-align:center; line-height:1.65; position:relative; z-index:1; }
.auth-brand-tagline strong { display:block; color:#fff; font-size:1.05rem; font-weight:700; margin-bottom:5px; }
.auth-brand-badges { display:flex; gap:6px; margin-top:22px; flex-wrap:wrap; justify-content:center; position:relative; z-index:1; }
.auth-badge { background:rgba(40,153,248,0.14); border:1px solid rgba(40,153,248,0.26); color:var(--blue); font-size:0.7rem; font-weight:600; padding:3px 9px; border-radius:20px; }

.auth-form-side { flex:1; padding:40px 36px; display:flex; flex-direction:column; justify-content:center; overflow-y:auto; }
.auth-title { font-size:1.35rem; font-weight:700; color:var(--black); margin-bottom:3px; }
.auth-subtitle { color:var(--gray-500); font-size:0.83rem; margin-bottom:22px; }

/* ══════════════════════════════════════════
   FORMS
══════════════════════════════════════════ */
.form-group { margin-bottom: 13px; }
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:11px; }

label { display:block; font-size:0.74rem; font-weight:700; color:var(--gray-600); margin-bottom:4px; letter-spacing:0.04em; text-transform:uppercase; }

input[type="text"],input[type="email"],input[type="password"],input[type="tel"],input[type="number"],select,textarea {
  width:100%; padding:8px 11px; border:1.5px solid var(--gray-300); border-radius:var(--radius);
  font-family:var(--font); font-size:0.87rem; color:var(--black); background:var(--white);
  transition:border-color var(--t),box-shadow var(--t); outline:none; appearance:none;
}
input:focus,select:focus,textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(40,153,248,0.1); }
input:disabled,select:disabled { background:var(--gray-100); color:var(--gray-500); cursor:not-allowed; }
select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:28px; cursor:pointer;
}
textarea { resize:vertical; min-height:80px; }
.input-prefix-wrap { position:relative; }
.input-prefix-sym { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--gray-500); font-size:0.85rem; pointer-events:none; }
.input-prefix-wrap input { padding-left:22px !important; }

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 16px; border-radius:var(--radius); font-size:0.84rem;
  font-weight:600; border:none; transition:all var(--t); white-space:nowrap;
  letter-spacing:0.01em; line-height:1;
}
.btn-primary { background:var(--blue); color:#fff; }
.btn-primary:hover { background:var(--blue-dark); box-shadow:0 3px 10px rgba(40,153,248,0.28); }
.btn-black   { background:var(--black); color:#fff; }
.btn-black:hover   { background:var(--gray-900); }
.btn-outline { background:transparent; color:var(--black); border:1.5px solid var(--gray-300); }
.btn-outline:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-light); }
.btn-ghost   { background:transparent; color:var(--blue); border:none; }
.btn-ghost:hover   { background:var(--blue-light); }
.btn-danger  { background:var(--red); color:#fff; }
.btn-danger:hover  { background:#b91c1c; }
.btn-success { background:var(--green); color:#fff; }
.btn-success:hover { background:#15803d; }
.btn-xs  { padding:3px 8px; font-size:0.72rem; border-radius:var(--radius-sm); }
.btn-sm  { padding:5px 11px; font-size:0.79rem; }
.btn-lg  { padding:10px 22px; font-size:0.94rem; }
.btn-full { width:100%; }
.btn-google { background:var(--white); color:var(--gray-700); border:1.5px solid var(--gray-300); font-weight:500; }
.btn-google:hover { background:var(--gray-50); border-color:var(--gray-400); }
.btn-google img { width:17px; height:17px; }

/* ══════════════════════════════════════════
   SIDEBAR LAYOUT
══════════════════════════════════════════ */
.app-layout { display:flex; min-height:100vh; }

.sidebar {
  width:var(--sidebar-w); background:var(--black); display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0; z-index:200;
  transition:transform var(--t); overflow-y:auto;
}
.sidebar-logo { padding:16px 14px 13px; border-bottom:1px solid rgba(255,255,255,0.07); flex-shrink:0; }
.sidebar-logo img { width:112px;  }
.sidebar-logo-sub { font-size:0.6rem; font-weight:700; letter-spacing:0.11em; text-transform:uppercase; color:rgba(255,255,255,0.26); margin-top:3px; }
.sidebar-section-label { padding:13px 14px 4px; font-size:0.62rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.26); }
.sidebar-nav { flex:1; padding:5px 0; overflow-y:auto; }

.nav-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 14px; color:rgba(255,255,255,0.55); font-size:0.84rem; font-weight:500;
  cursor:pointer; transition:all var(--t); text-decoration:none;
  margin:1px 8px; border-radius:var(--radius);
  border-left:2.5px solid transparent;
}
.nav-item:hover { background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.85); text-decoration:none; }
.nav-item.active { background:rgba(40,153,248,0.15); color:var(--blue); border-left-color:var(--blue); font-weight:600; }

.nav-badge      { background:var(--red); color:#fff; font-size:0.67rem; font-weight:700; padding:1px 6px; border-radius:10px; min-width:18px; text-align:center; }
.nav-badge-blue { background:rgba(40,153,248,0.2); color:var(--blue); font-size:0.67rem; font-weight:600; padding:1px 6px; border-radius:10px; }

.sidebar-footer { padding:10px; border-top:1px solid rgba(255,255,255,0.07); flex-shrink:0; }
.sidebar-user-row { display:flex; align-items:center; gap:9px; padding:8px; border-radius:var(--radius); }
.sidebar-avatar { width:29px; height:29px; border-radius:50%; background:var(--blue); display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:700; color:#fff; flex-shrink:0; }
.sidebar-user-name { font-size:0.8rem; font-weight:600; color:rgba(255,255,255,0.88); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:125px; }
.sidebar-user-role { font-size:0.68rem; color:rgba(255,255,255,0.34); }
.sidebar-logout { color:rgba(255,255,255,0.26); font-size:0.74rem; margin-left:auto; flex-shrink:0; }
.sidebar-logout:hover { color:rgba(255,255,255,0.6); text-decoration:none; }

/* ══════════════════════════════════════════
   MAIN CONTENT
══════════════════════════════════════════ */
.main-content { flex:1; margin-left:var(--sidebar-w); display:flex; flex-direction:column; min-height:100vh; }

.topbar {
  height:var(--header-h); background:var(--white); border-bottom:1px solid var(--gray-200);
  display:flex; align-items:center; justify-content:space-between; padding:0 22px;
  position:sticky; top:0; z-index:100;
}
.topbar-left  { display:flex; align-items:center; gap:12px; }
.topbar-title { font-size:0.98rem; font-weight:700; color:var(--black); }
.topbar-right { display:flex; align-items:center; gap:8px; }

.hamburger { display:none; flex-direction:column; gap:4px; cursor:pointer; padding:5px; background:none; border:none; }
.hamburger span { display:block; width:20px; height:2px; background:var(--black); border-radius:2px; }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:150; }

.page-body { padding:20px 22px; flex:1; }

/* ══════════════════════════════════════════
   STAT CARDS
══════════════════════════════════════════ */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:13px; margin-bottom:20px; }
.stat-card { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:17px 19px; transition:box-shadow var(--t); }
.stat-card:hover { box-shadow:var(--shadow); }
.stat-label { font-size:0.68rem; font-weight:700; color:var(--gray-500); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:7px; }
.stat-value { font-size:1.8rem; font-weight:700; color:var(--black); font-family:var(--mono); line-height:1; }
.stat-sub   { font-size:0.73rem; color:var(--gray-500); margin-top:4px; }
.stat-delta-pos { color:var(--green); font-size:0.73rem; font-weight:600; margin-top:3px; }
.stat-delta-neg { color:var(--red);   font-size:0.73rem; font-weight:600; margin-top:3px; }

.mini-bars { display:flex; align-items:flex-end; gap:2px; height:28px; margin-top:9px; }
.mini-bar { flex:1; background:var(--gray-100); border-radius:2px 2px 0 0; }
.mini-bar.hi { background:var(--blue-light); }
.mini-bar.current { background:var(--blue); }

/* ══════════════════════════════════════════
   CARDS
══════════════════════════════════════════ */
.card { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:17px; }
.card-header { padding:13px 18px; border-bottom:1px solid var(--gray-100); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.card-title  { font-size:0.88rem; font-weight:700; color:var(--black); }
.card-subtitle { font-size:0.76rem; color:var(--gray-500); margin-left:7px; font-weight:400; }
.card-body   { padding:18px; }
.card-footer { padding:11px 18px; border-top:1px solid var(--gray-100); background:var(--gray-50); }

/* ══════════════════════════════════════════
   TABS
══════════════════════════════════════════ */
.tab-bar { display:flex; border-bottom:1px solid var(--gray-200); background:var(--white); padding:0 18px; overflow-x:auto; flex-shrink:0; }
.tab-item { padding:10px 14px; font-size:0.82rem; font-weight:600; color:var(--gray-500); cursor:pointer; border-bottom:2.5px solid transparent; white-space:nowrap; transition:all var(--t); user-select:none; }
.tab-item:hover { color:var(--black); }
.tab-item.active { color:var(--blue); border-bottom-color:var(--blue); }
.tab-count { display:inline-flex; align-items:center; justify-content:center; background:var(--gray-100); color:var(--gray-600); font-size:0.68rem; font-weight:700; padding:1px 6px; border-radius:10px; margin-left:4px; }
.tab-item.active .tab-count { background:var(--blue-light); color:var(--blue-dark); }
.tab-pane { display:none; }
.tab-pane.active { display:block; }

/* ══════════════════════════════════════════
   TABLES
══════════════════════════════════════════ */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:0.84rem; }
thead th {
  background:var(--gray-50); padding:8px 13px; text-align:left;
  font-size:0.68rem; font-weight:700; color:var(--gray-500); letter-spacing:0.07em;
  text-transform:uppercase; border-bottom:1px solid var(--gray-200); white-space:nowrap; user-select:none;
}
thead th.sortable { cursor:pointer; }
thead th.sortable:hover { color:var(--blue); background:var(--blue-light); }
thead th.sort-asc::after  { content:' ▲'; font-size:0.58rem; color:var(--blue); }
thead th.sort-desc::after { content:' ▼'; font-size:0.58rem; color:var(--blue); }
tbody td { padding:10px 13px; border-bottom:1px solid var(--gray-100); color:var(--black); vertical-align:middle; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:var(--gray-50); }
tbody tr.selected td { background:var(--blue-50) !important; }
tbody tr.expand-body td { background:var(--gray-50); padding:14px 18px; border-top:none; }
.td-mono   { font-family:var(--mono); font-size:0.79rem; color:var(--gray-700); }
.td-center { text-align:center; }
.td-right  { text-align:right; }
.td-nowrap { white-space:nowrap; }
.table-actions { display:flex; gap:5px; align-items:center; }
.row-toggle {
  width:21px; height:21px; display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--gray-300); border-radius:4px; cursor:pointer;
  font-size:0.72rem; color:var(--gray-500); background:var(--white); transition:all var(--t); user-select:none;
}
.row-toggle:hover { border-color:var(--blue); color:var(--blue); }
.row-toggle.open  { background:var(--blue); color:#fff; border-color:var(--blue); }
input[type="checkbox"] { width:14px; height:14px; cursor:pointer; accent-color:var(--blue); }

/* ══════════════════════════════════════════
   BADGES
══════════════════════════════════════════ */
.badge { display:inline-flex; align-items:center; padding:2px 7px; border-radius:20px; font-size:0.7rem; font-weight:700; letter-spacing:0.02em; white-space:nowrap; }
.badge-green  { background:var(--green-light);  color:#14532d; }
.badge-red    { background:var(--red-light);    color:#7f1d1d; }
.badge-yellow { background:var(--yellow-light); color:#78350f; }
.badge-blue   { background:var(--blue-light);   color:var(--blue-mid); }
.badge-orange { background:var(--orange-light); color:#7c2d12; }
.badge-purple { background:var(--purple-light); color:#4c1d95; }
.badge-gray   { background:var(--gray-100);     color:var(--gray-600); }
.badge-black  { background:var(--black);        color:#fff; }

/* ══════════════════════════════════════════
   TOOLBAR & SEARCH
══════════════════════════════════════════ */
.toolbar { display:flex; align-items:center; gap:9px; margin-bottom:13px; flex-wrap:wrap; }
.search-wrap { position:relative; flex:1; min-width:160px; max-width:320px; }
.search-icon { position:absolute; left:9px; top:50%; transform:translateY(-50%); color:var(--gray-400); font-size:0.75rem; pointer-events:none; }
.search-input { padding-left:29px !important; }
.filter-chips { display:flex; gap:5px; flex-wrap:wrap; }
.chip { padding:4px 10px; border-radius:20px; font-size:0.76rem; font-weight:600; cursor:pointer; border:1.5px solid var(--gray-200); color:var(--gray-600); background:var(--white); transition:all var(--t); user-select:none; }
.chip:hover { border-color:var(--blue); color:var(--blue); }
.chip.active { background:var(--blue); color:#fff; border-color:var(--blue); }

.bulk-bar { display:none; align-items:center; gap:9px; padding:8px 14px; background:var(--blue-light); border:1px solid rgba(40,153,248,0.22); border-radius:var(--radius); margin-bottom:11px; font-size:0.82rem; color:var(--blue-dark); font-weight:600; }
.bulk-bar.visible { display:flex; }

/* ══════════════════════════════════════════
   MODALS
══════════════════════════════════════════ */
.modal-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.44); z-index:500; align-items:center; justify-content:center; padding:20px; }
.modal-backdrop.open { display:flex; }
.modal { background:var(--white); border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); width:100%; max-width:560px; max-height:88vh; overflow-y:auto; animation:modalIn 0.17s ease; }
.modal-lg { max-width:740px; }
.modal-sm { max-width:400px; }
@keyframes modalIn { from{opacity:0;transform:translateY(14px) scale(0.98)} to{opacity:1;transform:none} }
.modal-header { padding:17px 20px 13px; border-bottom:1px solid var(--gray-200); display:flex; align-items:center; justify-content:space-between; }
.modal-title  { font-size:0.98rem; font-weight:700; }
.modal-close  { width:27px; height:27px; border:none; background:var(--gray-100); border-radius:6px; cursor:pointer; font-size:1rem; color:var(--gray-500); display:flex; align-items:center; justify-content:center; transition:background var(--t); }
.modal-close:hover { background:var(--gray-200); color:var(--black); }
.modal-body   { padding:18px 20px; }
.modal-footer { padding:13px 20px; border-top:1px solid var(--gray-200); display:flex; justify-content:flex-end; gap:7px; }

/* Side Panel */
.side-panel { display:none; position:fixed; top:0; right:0; bottom:0; width:400px; background:var(--white); border-left:1px solid var(--gray-200); box-shadow:var(--shadow-xl); z-index:300; flex-direction:column; animation:panelIn 0.18s ease; }
.side-panel.open { display:flex; }
@keyframes panelIn { from{transform:translateX(24px);opacity:0} to{transform:none;opacity:1} }
.side-panel-header { padding:15px 18px; border-bottom:1px solid var(--gray-200); display:flex; align-items:center; justify-content:space-between; background:var(--white); position:sticky; top:0; z-index:1; flex-shrink:0; }
.side-panel-body   { padding:18px; flex:1; overflow-y:auto; }
.side-panel-footer { padding:13px 18px; border-top:1px solid var(--gray-200); display:flex; gap:7px; background:var(--gray-50); flex-shrink:0; }

/* ══════════════════════════════════════════
   NOTICES
══════════════════════════════════════════ */
.notice { display:flex; align-items:flex-start; gap:9px; padding:10px 13px; border-radius:var(--radius); font-size:0.81rem; margin-bottom:13px; line-height:1.5; }
.notice-dot { width:7px; height:7px; border-radius:50%; margin-top:4px; flex-shrink:0; }
.notice-blue   { background:var(--blue-light);   color:var(--blue-dark);  border:1px solid rgba(40,153,248,0.16); }
.notice-blue   .notice-dot { background:var(--blue); }
.notice-yellow { background:var(--yellow-light); color:#78350f; border:1px solid #fde68a; }
.notice-yellow .notice-dot { background:var(--yellow); }
.notice-green  { background:var(--green-light);  color:#14532d; border:1px solid #86efac; }
.notice-green  .notice-dot { background:var(--green); }
.notice-red    { background:var(--red-light);    color:#7f1d1d; border:1px solid #fca5a5; }
.notice-red    .notice-dot { background:var(--red); }

/* ══════════════════════════════════════════
   DETAIL SECTIONS
══════════════════════════════════════════ */
.detail-section { margin-bottom:16px; }
.detail-section-title { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.09em; color:var(--gray-500); margin-bottom:9px; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.detail-item-label { font-size:0.68rem; color:var(--gray-400); font-weight:600; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:2px; }
.detail-item-value { font-size:0.86rem; font-weight:500; color:var(--black); }

.info-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid var(--gray-100); font-size:0.83rem; }
.info-row:last-child { border-bottom:none; }
.info-row-label { color:var(--gray-500); }
.info-row-value { font-weight:600; }

/* GP bar */
.gp-bar-wrap { display:flex; align-items:center; gap:7px; }
.gp-bar { height:5px; border-radius:3px; background:var(--gray-100); width:52px; overflow:hidden; }
.gp-fill { height:100%; border-radius:3px; }
.gp-fill.high   { background:var(--green); }
.gp-fill.medium { background:var(--yellow); }
.gp-fill.low    { background:var(--red); }

/* ══════════════════════════════════════════
   QTY INPUT
══════════════════════════════════════════ */
.qty-wrap { display:inline-flex; align-items:center; border:1.5px solid var(--gray-200); border-radius:var(--radius); overflow:hidden; }
.qty-btn { width:27px; height:30px; border:none; background:var(--gray-50); cursor:pointer; font-size:0.95rem; color:var(--gray-600); display:flex; align-items:center; justify-content:center; transition:background var(--t); flex-shrink:0; }
.qty-btn:hover { background:var(--blue-light); color:var(--blue); }
.qty-input { width:44px !important; border:none !important; border-left:1px solid var(--gray-200) !important; border-right:1px solid var(--gray-200) !important; border-radius:0 !important; text-align:center; font-family:var(--mono); padding:5px 2px !important; box-shadow:none !important; }

/* ══════════════════════════════════════════
   CART
══════════════════════════════════════════ */
.cart-layout { display:grid; grid-template-columns:1fr 310px; gap:20px; align-items:start; }
.cart-summary-box { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:18px; position:sticky; top:74px; }
.summary-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; font-size:0.84rem; }
.summary-row.total { font-weight:700; font-size:0.98rem; border-top:2px solid var(--black); padding-top:11px; margin-top:5px; }
.summary-discount { color:var(--green); font-weight:600; }

.vol-ladder { border:1px solid var(--gray-200); border-radius:var(--radius); overflow:hidden; margin:12px 0; }
.vol-row { display:flex; justify-content:space-between; align-items:center; padding:7px 11px; font-size:0.78rem; border-bottom:1px solid var(--gray-100); }
.vol-row:last-child { border-bottom:none; }
.vol-row.active { background:var(--green-light); }
.vol-row .vr-label { font-weight:600; color:var(--black); }
.vol-row .vr-save  { font-weight:700; color:var(--green); }
.vol-row .vr-save.gray { color:var(--gray-400); }

/* ══════════════════════════════════════════
   STATUS TIMELINE
══════════════════════════════════════════ */
.order-timeline { display:flex; align-items:flex-start; gap:0; }
.ot-step  { display:flex; flex-direction:column; align-items:center; flex:1; }
.ot-step:last-child { flex:0 0 auto; }
.ot-dot   { width:26px; height:26px; border-radius:50%; border:2px solid var(--gray-300); background:var(--white); display:flex; align-items:center; justify-content:center; font-size:0.68rem; font-weight:700; color:var(--gray-400); position:relative; z-index:1; }
.ot-dot.done   { background:var(--green); border-color:var(--green); color:#fff; }
.ot-dot.active { background:var(--blue); border-color:var(--blue); color:#fff; }
.ot-line  { height:2px; flex:1; background:var(--gray-200); margin:0 -1px; position:relative; top:-13px; }
.ot-line.done { background:var(--green); }
.ot-label { font-size:0.64rem; color:var(--gray-500); margin-top:4px; text-align:center; font-weight:600; max-width:68px; line-height:1.3; }
.ot-label.done   { color:var(--green); }
.ot-label.active { color:var(--blue); }

/* ══════════════════════════════════════════
   WELCOME BANNER
══════════════════════════════════════════ */
.welcome-banner { background:var(--black); border-radius:var(--radius-lg); padding:22px 26px; display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; overflow:hidden; position:relative; }
.welcome-banner::before { content:''; position:absolute; width:240px; height:240px; background:radial-gradient(circle,rgba(40,153,248,0.14) 0%,transparent 70%); top:-80px; right:60px; }
.welcome-text h2 { color:#fff; font-size:1.15rem; font-weight:700; margin-bottom:2px; position:relative; z-index:1; }
.welcome-text p  { color:rgba(255,255,255,0.52); font-size:0.81rem; position:relative; z-index:1; }
.welcome-actions { display:flex; gap:7px; position:relative; z-index:1; flex-shrink:0; }

/* ══════════════════════════════════════════
   QUICK CARDS
══════════════════════════════════════════ */
.quick-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(155px,1fr)); gap:11px; margin-bottom:18px; }
.quick-card { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:16px 14px; text-align:center; cursor:pointer; transition:all var(--t); text-decoration:none; color:var(--black); display:flex; flex-direction:column; align-items:center; gap:7px; }
.quick-card:hover { border-color:var(--blue); box-shadow:0 3px 13px rgba(40,153,248,0.1); transform:translateY(-1px); text-decoration:none; color:var(--black); }
.quick-card-title { font-size:0.83rem; font-weight:700; }
.quick-card-sub   { font-size:0.71rem; color:var(--gray-500); }

/* ══════════════════════════════════════════
   TIER CARDS
══════════════════════════════════════════ */
.tier-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:13px; margin-bottom:20px; }
.tier-card { border:1.5px solid var(--gray-200); border-radius:var(--radius-lg); padding:17px; background:var(--white); transition:all var(--t); position:relative; }
.tier-card:hover { border-color:var(--blue); box-shadow:var(--shadow); }
.tier-card.featured { border-color:var(--blue); background:var(--blue-light); }
.tier-card.best { border-color:var(--green); background:var(--green-light); }
.tier-label    { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.09em; color:var(--gray-500); margin-bottom:5px; }
.tier-range    { font-size:1.3rem; font-weight:700; font-family:var(--mono); margin-bottom:3px; }
.tier-discount { font-size:0.98rem; font-weight:700; color:var(--green); margin-bottom:5px; }
.tier-note     { font-size:0.76rem; color:var(--gray-600); }
.tier-badge    { position:absolute; top:-8px; right:11px; background:var(--blue); color:#fff; font-size:0.63rem; font-weight:800; padding:2px 7px; border-radius:10px; }
.tier-badge.green { background:var(--green); }
.tier-edit-btn { font-size:0.74rem; font-weight:600; color:var(--blue); cursor:pointer; margin-top:9px; display:block; background:none; border:none; padding:0; }
.tier-edit-btn:hover { text-decoration:underline; }

/* Pricing calculator */
.calc-box { border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:18px; background:var(--white); }
.calc-result-row { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--gray-100); font-size:0.84rem; }
.calc-result-row:last-child { border-bottom:none; }
.calc-result-row.highlight { font-weight:700; color:var(--blue); }

/* Vis toggles */
.vis-toggle-group { display:flex; gap:3px; }
.vis-toggle { padding:2px 7px; border-radius:4px; font-size:0.67rem; font-weight:700; cursor:pointer; border:1.5px solid var(--gray-200); color:var(--gray-400); background:var(--white); transition:all var(--t); user-select:none; }
.vis-toggle.on[data-type="B2B"]          { background:var(--blue-light); color:var(--blue-mid); border-color:var(--blue); }
.vis-toggle.on[data-type="Distribution"] { background:var(--orange-light); color:var(--orange); border-color:var(--orange); }
.vis-toggle.on[data-type="DTC"]          { background:var(--purple-light); color:var(--purple); border-color:var(--purple); }

/* Divider */
.divider { display:flex; align-items:center; gap:10px; margin:15px 0; color:var(--gray-400); font-size:0.76rem; }
.divider::before,.divider::after { content:''; flex:1; height:1px; background:var(--gray-200); }

/* Pagination */
.pagination { display:flex; align-items:center; gap:3px; }
.page-btn { width:29px; height:29px; border-radius:5px; border:1.5px solid var(--gray-200); background:var(--white); cursor:pointer; font-size:0.78rem; font-weight:600; color:var(--gray-600); display:flex; align-items:center; justify-content:center; transition:all var(--t); }
.page-btn:hover { border-color:var(--blue); color:var(--blue); }
.page-btn.active { background:var(--blue); border-color:var(--blue); color:#fff; }

/* Inline edit */
.inline-edit-wrap { display:flex; align-items:center; gap:5px; }
.inline-edit-input { width:76px; padding:3px 7px; border:1.5px solid var(--blue); border-radius:var(--radius-sm); font-family:var(--mono); font-size:0.8rem; outline:none; }
.ie-save   { font-size:0.7rem; font-weight:700; color:var(--green); cursor:pointer; }
.ie-cancel { font-size:0.7rem; font-weight:600; color:var(--gray-500); cursor:pointer; margin-left:2px; }

/* Toast */
@keyframes toastIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

/* Utilities */
.flex { display:flex; }
.flex-col { display:flex; flex-direction:column; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.justify-end { justify-content:flex-end; }
.gap-1{gap:4px} .gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px}
.w-full{width:100%} .mt-2{margin-top:8px} .mt-4{margin-top:16px} .mt-5{margin-top:20px} .mb-4{margin-bottom:16px}
.text-mono{font-family:var(--mono)} .text-blue{color:var(--blue)} .text-green{color:var(--green)} .text-red{color:var(--red)} .text-muted{color:var(--gray-500)} .text-bold{font-weight:700}
.text-sm{font-size:0.8rem} .text-xs{font-size:0.7rem} .text-right{text-align:right} .text-center{text-align:center}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.border-top { border-top:1px solid var(--gray-200); }

/* Responsive */
@media (max-width:900px) {
  .auth-split{flex-direction:column;max-width:440px}
  .auth-brand{width:100%;min-height:110px;padding:22px 26px}
  .auth-brand-tagline{display:none}
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay.show{display:block}
  .main-content{margin-left:0}
  .hamburger{display:flex}
  .side-panel{width:100%}
}
@media (max-width:700px) {
  .stat-grid{grid-template-columns:1fr 1fr}
  .quick-grid{grid-template-columns:1fr 1fr}
  .form-row,.form-row-3{grid-template-columns:1fr}
  .tier-cards{grid-template-columns:1fr 1fr}
  .page-body{padding:13px 14px}
  .topbar{padding:0 13px}
  .welcome-banner{flex-direction:column;align-items:flex-start;gap:12px}
  .cart-layout{display:block}
  .cart-summary-box{position:static;margin-top:16px}
}