@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600;700;800&display=swap');

/* ===== M3 Design Tokens ===== */
:root {
  --primary: #000815;
  --on-primary: #fff;
  --primary-container: #0f2133;
  --on-primary-container: #78899f;
  --secondary: #006b5f;
  --on-secondary: #fff;
  --secondary-container: #6df5e1;
  --on-secondary-container: #006f64;
  --error: #ba1a1a;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
  --bg: #f8f9ff;
  --surface: #f8f9ff;
  --surface-container: #e5eeff;
  --surface-container-low: #eff4ff;
  --surface-container-high: #dce9ff;
  --surface-container-highest: #d3e4fe;
  --surface-lowest: #fff;
  --on-surface: #0b1c30;
  --on-surface-variant: #44474c;
  --outline: #74777d;
  --outline-variant: #c4c6cd;
  --inverse-surface: #213145;
  --sidebar-w: 272px;
  --topbar-h: 56px;
  --bnav-h: 64px;
}

/* ===== Reset & Base ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--on-surface); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: 'Manrope', sans-serif; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; }

/* ===== App Shell ===== */
.app-shell { display: flex; min-height: 100vh; }

/* ===== Mobile Top Bar ===== */
.topbar {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--topbar-h);
  background: var(--surface); border-bottom: 1px solid var(--outline-variant);
  align-items: center; justify-content: space-between; padding: 0 16px;
}
.topbar-btn {
  border: 0; background: none; cursor: pointer; padding: 8px;
  border-radius: 10px; color: var(--primary); display: grid; place-items: center;
}
.topbar-btn:active { background: var(--surface-container-low); }
.topbar-title { font: 700 20px/28px Manrope; color: var(--primary); }
.topbar-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--secondary-container); border: 2px solid var(--outline-variant);
  display: grid; place-items: center;
  font: 600 13px Inter; color: var(--on-secondary-container);
}

/* ===== Drawer Overlay ===== */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(15, 33, 51, 0.45); backdrop-filter: blur(3px);
}

/* ===== Sidebar / Drawer ===== */
.sidebar {
  width: var(--sidebar-w);
  background: var(--surface-container-low);
  display: flex; flex-direction: column;
  padding: 24px 0; height: 100vh;
  position: sticky; top: 0;
  overflow-y: auto; flex-shrink: 0;
  box-shadow: 2px 0 16px rgba(0, 8, 21, 0.05);
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--outline-variant); border-radius: 10px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }

.sidebar-header {
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px; margin-bottom: 32px;
}
.sidebar-logo-icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--secondary-container);
  display: grid; place-items: center;
  font-size: 20px; font-weight: bold;
  color: var(--on-secondary-container); flex-shrink: 0;
}
.sidebar-name { font: 700 18px Manrope; color: var(--primary); }
.sidebar-tagline {
  font: 600 10px Inter; letter-spacing: 0.05em;
  color: var(--on-surface-variant); opacity: 0.7; margin-top: 2px;
}

.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sidebar-link {
  display: flex; align-items: center; gap: 12px;
  border: 0; background: none; cursor: pointer;
  padding: 10px 16px; margin: 0 8px;
  border-radius: 10px;
  font: 600 12px Inter; letter-spacing: 0.04em;
  color: var(--on-surface-variant);
  transition: background 0.15s, color 0.15s;
  text-align: left; width: calc(100% - 16px);
}
.sidebar-link:hover { background: var(--surface-container-high); color: var(--on-surface); }
.sidebar-link.active {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}
.sidebar-link .material-symbols-outlined { font-size: 22px; }

.sidebar-footer {
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--outline-variant);
}

/* ===== Main Content ===== */
.main-content {
  flex: 1; min-width: 0;
  padding: 0 36px 36px;
  max-width: 1400px;
}

/* ===== Content Header ===== */
.content-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 0 20px;
  position: sticky; top: 0;
  background: var(--bg); z-index: 10;
}
.header-left .eyebrow {
  font: 600 10px Inter; letter-spacing: 0.14em;
  color: var(--on-surface-variant); margin-bottom: 6px; text-transform: uppercase;
}
.content-header h1 {
  font: 700 28px/36px Manrope; letter-spacing: -0.02em;
  color: var(--on-surface);
}
.header-right { display: flex; align-items: center; gap: 16px; }

/* Scanner */
.scanner {
  display: flex; align-items: center; gap: 0;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: 12px; overflow: hidden;
  padding-left: 12px;
}
.scanner .material-symbols-outlined { color: var(--outline); font-size: 20px; flex-shrink: 0; }
.scanner input {
  border: 0; background: transparent;
  height: 42px; width: 220px;
  padding: 0 10px; font: 400 14px Inter;
  color: var(--on-surface); outline: none;
}
.scanner button {
  background: var(--secondary); color: var(--on-secondary);
  border: 0; height: 42px; padding: 0 20px;
  font: 600 13px Inter; cursor: pointer;
  transition: background 0.15s;
}
.scanner button:hover { background: #005a50; }

/* User bar */
.user-bar { display: flex; align-items: center; gap: 12px; }
.user-info { text-align: right; }
.user-info b { display: block; font: 500 13px Inter; color: var(--on-surface); }
.user-info small { font: 600 10px Inter; letter-spacing: 0.05em; color: var(--on-surface-variant); text-transform: uppercase; }
.logout-btn {
  border: 1px solid var(--outline-variant); background: var(--surface-lowest);
  color: var(--on-surface-variant); border-radius: 10px; padding: 8px;
  cursor: pointer; display: grid; place-items: center;
  transition: background 0.15s, border-color 0.15s;
}
.logout-btn:hover { background: var(--surface-container); border-color: var(--outline); }
.logout-btn .material-symbols-outlined { font-size: 20px; }

/* ===== Notice ===== */
.notice {
  background: var(--secondary-container); color: var(--on-secondary-container);
  padding: 10px 16px; border-radius: 10px;
  font: 500 13px Inter; margin-bottom: 20px;
}

/* ===== Bottom Navigation ===== */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  height: var(--bnav-h);
  background: var(--surface); border-top: 1px solid var(--outline-variant);
  align-items: center; justify-content: space-around;
}
.bnav-item {
  border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 16px; border-radius: 8px;
  font: 500 11px Inter; color: var(--on-surface-variant);
  transition: color 0.15s;
}
.bnav-item .material-symbols-outlined { font-size: 24px; }
.bnav-item.active { color: var(--on-secondary-container); }
.bnav-item.active .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ===== Stats Cards ===== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: 14px; padding: 20px;
  display: flex; gap: 14px; align-items: flex-start;
  transition: box-shadow 0.2s, transform 0.15s;
}
.stat:hover { box-shadow: 0 6px 20px rgba(0, 8, 21, 0.07); transform: translateY(-2px); }
.stat-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--surface-container);
  flex-shrink: 0;
}
.stat-icon .material-symbols-outlined { font-size: 24px; color: var(--secondary); }
.stat.warning .stat-icon { background: var(--error-container); }
.stat.warning .stat-icon .material-symbols-outlined { color: var(--error); }
.stat p { margin: 0; font: 400 12px/16px Inter; color: var(--on-surface-variant); }
.stat strong { display: block; font: 800 28px/36px Manrope; color: var(--on-surface); margin-top: 4px; letter-spacing: -0.02em; }

/* ===== Grid Layouts ===== */
.grid { display: grid; gap: 20px; }
.grid.two { grid-template-columns: 1.2fr 0.8fr; }
.form-grid { grid-template-columns: 380px 1fr; }

/* ===== Panels ===== */
.panel {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: 14px; padding: 20px; min-width: 0;
}
.panel-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.panel-head h2 { font: 600 16px Manrope; color: var(--on-surface); }

/* ===== Tables ===== */
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th {
  text-align: left; font: 600 11px Inter; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--on-surface-variant);
  padding: 0 10px 12px;
}
td {
  padding: 12px 10px; border-top: 1px solid var(--surface-container);
  color: var(--on-surface-variant);
}
td b { color: var(--on-surface); display: block; font-weight: 600; }
td small { display: block; color: var(--outline); margin-top: 3px; font-size: 11px; }
tfoot td { border-top: 2px solid var(--outline-variant); font-weight: 600; color: var(--on-surface); padding-top: 14px; }
code {
  font-family: 'Courier New', monospace; color: var(--on-surface-variant);
  background: var(--surface-container-low); border-radius: 6px;
  padding: 3px 7px; font-size: 12px;
}

/* ===== Buttons ===== */
.primary {
  background: var(--secondary); color: var(--on-secondary);
  border: 0; border-radius: 10px; font: 600 14px Inter;
  height: 44px; padding: 0 22px; cursor: pointer;
  transition: background 0.15s;
}
.primary:hover { background: #005a50; }
.link {
  border: 0; background: none; color: var(--secondary);
  font: 600 13px Inter; cursor: pointer;
}
.link:hover { text-decoration: underline; }

/* ===== Badges ===== */
.badge {
  padding: 4px 10px; border-radius: 6px;
  font: 600 10px Inter; letter-spacing: 0.03em;
  display: inline-block;
}
.badge.in { background: #dff5ee; color: #006b5f; }
.badge.out { background: #fff0eb; color: #ce6239; }
.badge.role { background: var(--surface-container); color: var(--on-surface-variant); }
.danger { color: var(--error) !important; font-weight: 700; }

/* ===== Forms ===== */
form { display: grid; gap: 16px; }
label {
  font: 600 12px Inter; color: var(--on-surface-variant);
  display: block;
}
label > input, label > select, label > div {
  display: block; margin-top: 6px;
}
.required { color: var(--error); font-weight: 700; }
input, select {
  height: 44px; width: 100%;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: 10px; padding: 0 12px;
  font: 400 14px Inter; color: var(--on-surface);
  transition: border-color 0.15s, outline 0.15s;
}
input:focus, select:focus {
  outline: 2px solid var(--secondary-container);
  border-color: var(--secondary);
}
.split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.transaction .split { grid-template-columns: 1fr 1fr; }

/* ===== Empty ===== */
.empty {
  color: var(--outline); text-align: center;
  padding: 36px 12px; font: 400 13px Inter;
}

/* ===== Activity Feed ===== */
.activity > div {
  display: flex; gap: 12px; padding: 12px 0;
  border-top: 1px solid var(--surface-container);
}
.activity > div:first-child { border-top: 0; }
.activity p { margin: 0; font: 400 13px Inter; color: var(--on-surface-variant); }
.activity b { color: var(--on-surface); font-weight: 600; }
.activity small { display: block; color: var(--outline); margin-top: 4px; font-size: 12px; }
.round {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
}
.round .material-symbols-outlined { font-size: 18px; }
.round.in { background: #dff5ee; color: #006b5f; }
.round.out { background: #fff0eb; color: #ce6239; }

/* ===== Transaction ===== */
.transaction {
  max-width: 800px; display: grid;
  grid-template-columns: minmax(0, 1fr) 210px; gap: 20px;
}
.hint {
  background: var(--surface-container-low);
  color: var(--on-surface-variant);
  padding: 18px; border-radius: 14px;
  height: max-content; font: 400 13px/1.6 Inter;
}
.hint b { color: var(--secondary); font-weight: 600; }
.hint p { margin: 8px 0 0; }
.muted { color: var(--outline); margin: 0 0 16px; font: 400 13px Inter; }

/* ===== Search ===== */
.search-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.search-input {
  width: 320px; height: 42px;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: 10px; padding: 0 14px;
  font: 400 14px Inter; color: var(--on-surface);
}
.search-input:focus { outline: 2px solid var(--secondary-container); border-color: var(--secondary); }

/* ===== Actions ===== */
.actions { white-space: nowrap; }
.act {
  border: 0; background: none; cursor: pointer;
  padding: 6px 8px; color: var(--outline);
  border-radius: 8px; font-size: 16px;
  transition: background 0.15s, color 0.15s;
}
.act:hover { background: var(--surface-container); color: var(--on-surface); }
.danger-act:hover { background: var(--error-container); color: var(--error); }

/* ===== Modal ===== */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 8, 21, 0.4); backdrop-filter: blur(4px);
  display: grid; place-items: center;
}
.overlay[hidden] { display: none !important; }
.modal {
  background: var(--surface-lowest);
  border-radius: 18px; padding: 28px;
  width: 100%; max-width: 440px; max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 16px 56px rgba(0, 8, 21, 0.2);
}
.modal-head {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 20px;
}
.modal-head h2 { font: 600 18px Manrope; }
.close-btn {
  border: 0; background: none; font-size: 22px;
  cursor: pointer; color: var(--outline);
  padding: 8px 12px; border-radius: 8px;
  min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
}
.close-btn:hover { background: var(--surface-container); color: var(--on-surface); }
.close-btn:active { background: var(--surface-dim); }

/* Form input focus states */
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* ===== Barcode ===== */
.barcode-content { text-align: center; }
.barcode-content h3 { margin: 0 0 4px; font: 700 16px Manrope; }
.barcode-content svg { margin: 16px auto; display: block; max-width: 100%; }
.barcode-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.barcode-controls { display: flex; gap: 14px; justify-content: center; margin-top: 10px; align-items: end; }
.input-with-btn { display: flex; gap: 6px; }
.input-with-btn input { flex: 1; }
.gen-btn {
  background: var(--surface-container-low); color: var(--secondary);
  border: 1px solid var(--outline-variant); border-radius: 10px;
  padding: 0 14px; font: 600 12px Inter; cursor: pointer;
  white-space: nowrap; height: 44px;
  transition: background 0.15s;
}
.gen-btn:hover { background: var(--surface-container); border-color: var(--secondary); }

/* ===== Labels Tab ===== */
.label-toolbar {
  display: flex; justify-content: space-between;
  align-items: end; margin-bottom: 16px;
  flex-wrap: wrap; gap: 12px;
}
.label-toolbar-left { display: flex; gap: 14px; align-items: end; }
.label-toolbar-right { display: flex; gap: 10px; align-items: center; }
.inline-label {
  font: 600 12px Inter; color: var(--on-surface-variant);
  display: flex; flex-direction: column; gap: 4px;
}
.inline-label select, .inline-label input { height: 38px; font: 400 13px Inter; }
.qty-input {
  width: 64px; text-align: center; height: 38px;
  border: 1px solid var(--outline-variant);
  border-radius: 8px; padding: 0 6px; font: 400 13px Inter;
}
.barcode-preview { height: 30px; display: block; }
.row-selected { background: #e0f5ef; }

/* ===== Reports ===== */
.report-tabs { display: flex; gap: 4px; margin-bottom: 18px; }
.report-tab {
  border: 0; background: var(--surface-container);
  color: var(--on-surface-variant); border-radius: 10px;
  padding: 10px 22px; font: 600 13px Inter; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.report-tab:hover { background: var(--surface-container-high); color: var(--on-surface); }
.report-tab.active { background: var(--secondary); color: var(--on-secondary); }

.report-filters {
  display: flex; align-items: end; gap: 12px;
  margin-bottom: 18px; flex-wrap: wrap;
  padding: 16px; background: var(--surface-lowest);
  border: 1px solid var(--outline-variant); border-radius: 14px;
}
.filter-field {
  font: 600 11px Inter; color: var(--outline);
  display: flex; flex-direction: column; gap: 4px;
}
.filter-field input, .filter-field select {
  height: 38px; font: 400 13px Inter;
  border: 1px solid var(--outline-variant); border-radius: 8px;
  padding: 0 10px; color: var(--on-surface);
  min-width: 140px; background: var(--surface-lowest);
}
.filter-field input:focus, .filter-field select:focus {
  outline: 2px solid var(--secondary-container); border-color: var(--secondary);
}
.filter-apply { height: 38px; padding: 0 20px; font-size: 13px; }
.filter-actions { margin-left: auto; display: flex; gap: 12px; align-items: center; }

/* ===== Settings ===== */
.brand-preview-card {
  background: var(--primary-container); border-radius: 14px; padding: 20px;
}
.brand-preview-card .eyebrow { color: var(--on-primary-container); margin-bottom: 12px; }
.brand-preview-inner { display: flex; align-items: center; gap: 12px; }
.brand-preview-icon {
  display: grid; place-items: center;
  background: var(--secondary-container);
  width: 40px; height: 40px; border-radius: 10px;
  color: var(--on-secondary-container);
  font-size: 18px; font-weight: bold; flex-shrink: 0;
}
.brand-preview-inner strong {
  color: var(--on-primary); font: 700 17px Manrope; display: block;
}
.brand-preview-inner small {
  color: var(--on-primary-container); font: 600 9px Inter;
  letter-spacing: 0.1em; display: block; margin-top: 4px;
}

.status-on { color: var(--secondary); font: 600 12px Inter; }
.status-off { color: var(--error); font: 600 12px Inter; }
.row-inactive { opacity: 0.5; }
.panel-toolbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }

/* ===== Login ===== */
.login-page {
  min-height: 100vh; display: grid; place-items: center;
  background: var(--bg); padding: 20px;
}
.login-card {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: 18px; padding: 44px 40px;
  width: 100%; max-width: 420px;
  box-shadow: 0 8px 40px rgba(0, 8, 21, 0.07);
}
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; }
.login-icon {
  display: grid; place-items: center;
  background: var(--secondary-container); color: var(--on-secondary-container);
  width: 48px; height: 48px; border-radius: 12px;
  font-size: 22px; font-weight: bold;
}
.login-brand h1 { font: 800 22px Manrope; color: var(--on-surface); margin: 0; }
.login-brand p { font: 600 10px Inter; letter-spacing: 0.1em; color: var(--on-surface-variant); margin: 4px 0 0; }
.login-card h2 { font: 700 18px Manrope; color: var(--on-surface); margin: 0 0 24px; }
.login-error {
  background: var(--error-container); color: var(--on-error-container);
  border-radius: 10px; padding: 10px 14px;
  font: 600 13px Inter; margin-bottom: 16px;
}
.login-btn { width: 100%; height: 46px; font-size: 15px; border-radius: 12px; }
.login-footer { text-align: center; color: var(--outline); font: 400 12px Inter; margin: 24px 0 0; }

/* ===== Loading ===== */
.loading {
  display: grid; place-items: center; min-height: 100vh;
  font: 600 16px Inter; color: var(--on-surface-variant);
}

/* ===== Barcode Scanner ===== */
.barcode-scanner-section {
  background: var(--surface-container-low);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 20px;
}

.barcode-scanner-section label {
  display: block;
  margin-bottom: 14px;
}

.barcode-scanner-section label:last-of-type {
  margin-bottom: 0;
}

.scanner-input {
  font-size: 16px !important;
  padding: 14px !important;
  font-weight: 500;
  border: 2px solid var(--primary) !important;
}

.scanner-input:focus {
  border-color: var(--secondary) !important;
  outline: 3px solid var(--secondary-container) !important;
}

.scanned-items-section {
  background: var(--surface-container-low);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 20px;
}

.scanned-items-section h3 {
  font: 600 16px Manrope;
  color: var(--on-surface);
  margin: 0 0 14px;
}

.scanned-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.scanned-items-table thead {
  background: var(--surface-container);
  border-bottom: 1px solid var(--outline-variant);
}

.scanned-items-table th {
  padding: 10px;
  text-align: left;
  font-weight: 600;
  color: var(--on-surface);
}

.scanned-items-table td {
  padding: 10px;
  border-bottom: 1px solid var(--outline-variant);
  color: var(--on-surface);
}

.scanned-items-table tbody tr {
  transition: background 0.15s;
}

.scanned-items-table tbody tr:hover {
  background: var(--surface-container-low);
}

.scanned-items-table tbody tr.scan-failed {
  background: rgba(186, 26, 26, 0.08);
}

.time-col {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: var(--on-surface-variant);
}

.barcode-col {
  font-family: 'Courier New', monospace;
  font-weight: 600;
}

.qty-col {
  text-align: center;
  font-weight: 600;
}

.status-col {
  text-align: center;
}

.scan-status {
  font-weight: 700;
  font-size: 16px;
}

.scan-status.success {
  color: var(--secondary);
}

.scan-status.failed {
  color: var(--error);
}

.scan-summary {
  font-size: 12px;
  color: var(--on-surface-variant);
  padding-top: 10px;
  border-top: 1px solid var(--outline-variant);
  margin-top: 10px;
  font-weight: 500;
}

.scan-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.scan-actions .link {
  padding: 8px 16px;
  font-size: 13px;
}

/* ===== Responsive: Mobile ===== */
@media (max-width: 768px) {
  .topbar { display: flex; }
  .bottom-nav { display: flex; }

  .sidebar {
    position: fixed; left: 0; top: 0; z-index: 55;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100vh;
    box-shadow: 6px 0 28px rgba(0, 0, 0, 0.18);
  }
  .sidebar.open { transform: translateX(0); }

  .main-content {
    width: 100%; padding: 0 16px 80px;
    margin-top: var(--topbar-h);
  }

  .content-header {
    flex-direction: column; align-items: flex-start;
    gap: 14px; position: static; background: transparent;
  }
  .content-header h1 { font-size: 22px; line-height: 30px; }
  .header-right { width: 100%; flex-wrap: wrap; }
  .scanner { width: 100%; }
  .scanner input { flex: 1; width: auto; }

  .stats { grid-template-columns: repeat(2, 1fr); }
  .grid.two, .form-grid { grid-template-columns: 1fr; }
  .transaction { grid-template-columns: 1fr; }
  .hint { display: none; }
  .split { grid-template-columns: 1fr !important; }
  .search-input { width: 100%; }
  .user-bar { display: none; }
}

@media (min-width: 769px) {
  .topbar { display: none !important; }
  .bottom-nav { display: none !important; }
  .drawer-overlay { display: none !important; }
}

@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 16px; }
  .stat strong { font-size: 22px; }
  table { font-size: 11px; }
  th, td { padding-left: 4px; padding-right: 4px; }
  .main-content { padding: 0 12px 80px; }
  .report-filters { padding: 12px; }
  .modal { margin: 12px; padding: 20px; border-radius: 14px; }
}

/* ---- PHP port additions: tokens referenced by batch-history UI but missing upstream ---- */
:root {
  --tertiary: #6b5f00;
  --tertiary-container: #f8e287;
  --on-tertiary-container: #201c00;
  --surface-variant: #e0e2ec;
  --on-surface-variant: #44474f;
}
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-group label { font-size: 13px; font-weight: 500; }
/* Anchor variants of controls that were <button> in the SPA */
a.sidebar-link, a.bnav-item, a.logout-btn, a.link, a.act { text-decoration: none; }
a.sidebar-link, a.bnav-item { color: var(--on-surface-variant, #44474f); }
a.sidebar-link.active, a.bnav-item.active { color: var(--on-secondary-container); }
.header-right .scanner button { cursor: pointer; }