:root {
  --bg:#F5F6FA; --surface:#FFFFFF; --surface-alt:#F1F2F6; --border:#E4E7EC;
  --ink:#15171F; --ink-soft:#565B68; --muted:#8A8F9C;
  --primary:#3B4FD8; --primary-dark:#2B3AB0; --primary-soft:#EBEEFC;
  --success:#12876B; --success-soft:#E3F5EF; --warning:#B8720A; --warning-soft:#FBF0DC;
  --danger:#C0392B; --danger-soft:#FBEAE7;
  --radius-lg:18px; --radius-md:12px; --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(21,23,31,0.05), 0 1px 1px rgba(21,23,31,0.03);
  --shadow-md:0 6px 16px rgba(21,23,31,0.07), 0 2px 4px rgba(21,23,31,0.05);
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Plus Jakarta Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin:0; height:100%; }
body { font-family: var(--font-body); color: var(--ink); background: var(--bg); }
h1,h2,h3 { font-family: var(--font-display); margin:0; }
a { text-decoration:none; color:inherit; }
button { font-family:inherit; border:none; cursor:pointer; background:none; }

.app { display:flex; width:100%; height:100vh; overflow:hidden; }

/* Sidebar — Deep Navy Blue, glassy (frosted-glass) style */
.sidebar {
  width:260px; flex-shrink:0; box-sizing:border-box; position:relative; z-index:1;
  background: linear-gradient(160deg, rgba(42,76,133,0.68) 0%, rgba(23,40,74,0.80) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  color:#FFFFFF; display:flex; flex-direction:column; padding:26px 18px; height:100%; overflow-y:auto;
  border-right:1px solid rgba(255,255,255,0.14);
  box-shadow: 8px 0 32px rgba(15,23,42,0.18), inset 1px 0 0 rgba(255,255,255,0.06);
}
.brand { display:flex; align-items:center; gap:10px; padding:2px 8px 26px 8px; }
.brand-mark { width:36px; height:36px; border-radius:10px; background:var(--primary); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:16px; color:#fff; flex-shrink:0; }
.brand-name { font-family:var(--font-display); font-weight:700; font-size:16px; line-height:1.15; color:#FFFFFF; }
.brand-sub { font-size:11px; color:rgba(255,255,255,0.55); margin-top:1px; }
.menu-label { font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,0.42); padding:6px 12px 6px; font-weight:600; }
.nav { display:flex; flex-direction:column; gap:2px; }
.nav-link { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; font-size:14px; color:rgba(255,255,255,0.80); font-weight:500; border:1px solid transparent; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.nav-link:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.12); color:#FFFFFF; }
.nav-link.active {
  background: rgba(255,255,255,0.16); color:#FFFFFF; font-weight:600;
  border:1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.nav-link svg { flex-shrink:0; }
.profile { display:flex; align-items:center; gap:10px; }
.profile-avatar { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.16); color:#FFFFFF; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; }
.profile-name { font-size:13px; font-weight:600; color:#FFFFFF; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile-role { font-size:11px; color:rgba(255,255,255,0.55); }

/* Main column */
.main { flex:1; min-width:0; display:flex; flex-direction:column; overflow-y:auto; height:100%; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:22px 32px; border-bottom:1px solid var(--border); background:var(--surface); flex-shrink:0; }
.eyebrow { font-size:11.5px; color:var(--muted); font-weight:700; letter-spacing:.05em; margin-bottom:4px; }
.page-title { font-size:21px; font-weight:700; }
.topbar-actions { display:flex; align-items:center; gap:14px; }
.search-wrap { position:relative; display:flex; align-items:center; }
.search-wrap svg { position:absolute; left:12px; color:var(--muted); pointer-events:none; }
.divider-v { width:1px; height:24px; background:var(--border); }
.content { padding:26px 32px 40px; display:flex; flex-direction:column; gap:22px; }

/* Shared components */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); transition: box-shadow .18s ease, transform .18s ease; }
.card-hover:hover { box-shadow:var(--shadow-md); transform: translateY(-2px); }
.btn-primary { background:var(--primary); color:#fff; border-radius:var(--radius-sm); font-weight:700; padding:10px 18px; font-size:13.5px; display:inline-flex; align-items:center; gap:8px; transition: background .15s ease, transform .12s ease, box-shadow .15s ease; box-shadow:var(--shadow-sm); }
.btn-primary:hover { background:var(--primary-dark); box-shadow:var(--shadow-md); transform: translateY(-1px); }
.btn-ghost { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); font-weight:700; color:var(--ink-soft); padding:9px 16px; font-size:13px; transition: background .15s ease, border-color .15s ease; }
.btn-ghost:hover { background:var(--surface-alt); border-color:#D3D7E0; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); color:var(--muted); transition: background .15s ease, color .15s ease; }
.icon-btn:hover { background:var(--surface-alt); color:var(--ink); }
.kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.kpi-card { padding:18px 20px; display:flex; flex-direction:column; gap:12px; }
.kpi-head { display:flex; align-items:center; justify-content:space-between; }
.kpi-label { font-size:12.5px; color:var(--muted); font-weight:600; }
.kpi-icon { width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.kpi-value { font-family:var(--font-display); font-size:24px; font-weight:700; }
.kpi-note { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); }

table { border-collapse: collapse; width:100%; }
th { text-align:left; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); font-weight:600; padding:0 16px 10px; }
td { padding:13px 16px; font-size:13.5px; border-top:1px solid var(--border); }
tr.row-hover:hover td { background: var(--surface-alt); }
.badge { padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:700; display:inline-block; }

input[type="text"] { font-family:inherit; border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 14px; font-size:13.5px; color:var(--ink); background:var(--surface); transition: border-color .15s ease, box-shadow .15s ease; }
input[type="text"]:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }

.tabs { display:flex; gap:6px; background:var(--surface-alt); padding:4px; border-radius:12px; }
.tab-btn { padding:8px 14px; border-radius:9px; font-size:12.5px; font-weight:700; color:var(--ink-soft); transition: background .15s ease, color .15s ease; }
.tab-btn.active { background:rgba(59,79,216,0.14); color:var(--primary-dark); }

.bar { transition: transform .15s ease; transform-origin: bottom; }
.bar:hover { transform: scaleY(1.05); }

.quick-row { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; border:1px solid var(--border); transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.quick-row:hover { background:var(--surface-alt); border-color:#D3D7E0; transform: translateX(2px); }
.catalog-row:hover { background: var(--surface-alt); }
.pay-pill { transition: all .15s ease; flex:1; padding:10px 4px; border-radius:10px; border:1.5px solid var(--border); font-weight:700; font-size:12.5px; background:var(--surface); color:var(--ink-soft); }
.pay-pill.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.qty-btn { width:26px; height:26px; border:1px solid var(--border); border-radius:8px; display:inline-flex; align-items:center; justify-content:center; color:var(--ink); }
.qty-btn:hover { background:var(--surface-alt); }

::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:#D9DCE3; border-radius:8px; }

/* Auth pages (login / register) */
.auth-shell { display:flex; width:100%; height:100vh; overflow:hidden; }
.auth-brand { width:560px; flex-shrink:0; background:#14162B; color:#fff; display:flex; flex-direction:column; padding:48px; box-sizing:border-box; }
.auth-form-wrap { flex:1; display:flex; align-items:center; justify-content:center; padding:32px; overflow-y:auto; box-sizing:border-box; }
.field-input { font-family:inherit; border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 14px; font-size:13.5px; color:var(--ink); background:var(--surface); width:100%; transition: border-color .15s ease, box-shadow .15s ease; }
.field-input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.field-select { font-family:inherit; border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 36px 10px 14px; font-size:13.5px; color:var(--ink); background-color:var(--surface); width:100%; appearance:none; -webkit-appearance:none; cursor:pointer; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8F9C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px; transition: border-color .15s ease, box-shadow .15s ease; }
.field-select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.field-select:invalid { color:var(--muted); }
.field-row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.checkbox-box { width:18px; height:18px; border-radius:5px; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--surface); transition: background .15s ease, border-color .15s ease; }
.checkbox-box.checked { background:var(--primary); border-color:var(--primary); }
.field-error { font-size:12px; color:var(--danger); margin-top:2px; }
.cta-disabled { opacity:0.45; pointer-events:none; }