/* ─── Reset & Variables ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0d0f14;
  --surface: #141720;
  --surface-2: #1a1e2b;
  --surface-3: #212638;
  --border: #252a3a;
  --border-light: #2e3447;
  --accent: #4f7cff;
  --accent-dim: rgba(79, 124, 255, 0.15);
  --accent-2: #00d4aa;
  --accent-2-dim: rgba(0, 212, 170, 0.12);
  --warn: #f59e0b;
  --warn-dim: rgba(245, 158, 11, 0.12);
  --danger: #ef4444;
  --danger-dim: rgba(239, 68, 68, 0.12);
  --success: #22c55e;
  --success-dim: rgba(34, 197, 94, 0.12);
  --text: #e2e8f0;
  --text-2: #94a3b8;
  --text-3: #64748b;
  --sidebar-w: 220px;
  --radius: 8px;
  --radius-lg: 12px;
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Inter', system-ui, sans-serif;
}

html, body { height: 100%; font-family: var(--sans); background: var(--bg); color: var(--text); font-size: 14px; }

/* ─── Layout ────────────────────────────────────────────────────── */
.app-layout { display: flex; height: 100vh; overflow: hidden; }

/* ─── Sidebar ───────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 14px;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.hamburger-btn, .sidebar-close-btn, .sidebar-backdrop { display: none; }

.brand-logo {
  width: 100%;
  max-width: 170px;
  height: auto;
  background: #ffffff;
  border-radius: 10px;
  padding: 10px 12px;
  display: block;
}

.brand-mark {
  width: 32px; height: 32px;
  background: var(--accent);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; color: #fff;
  flex-shrink: 0;
}

.brand-name { font-weight: 700; font-size: 15px; display: block; line-height: 1.2; }
.brand-sub { font-size: 10px; color: var(--text-3); letter-spacing: 0.08em; text-transform: uppercase; display: block; }

.sidebar-nav { flex: 1; padding: 12px 8px; }

.nav-section { margin-bottom: 20px; }

.nav-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3);
  padding: 0 8px; display: block; margin-bottom: 4px;
}

.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--radius);
  color: var(--text-2); text-decoration: none;
  font-size: 13.5px; font-weight: 450;
  transition: background 0.15s, color 0.15s;
  margin-bottom: 1px;
}
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.7; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item:hover svg { opacity: 1; }
.nav-item.active { background: var(--accent-dim); color: var(--accent); }
.nav-item.active svg { opacity: 1; }

.sidebar-footer { padding: 12px; border-top: 1px solid var(--border); }
.seed-btn {
  display: block; text-align: center; padding: 7px 12px;
  border: 1px dashed var(--border-light); border-radius: var(--radius);
  color: var(--text-3); font-size: 12px; text-decoration: none;
  transition: all 0.15s;
}
.seed-btn:hover { color: var(--text-2); border-color: var(--text-3); }

/* ─── Main Content ──────────────────────────────────────────────── */
.main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  height: 60px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  position: sticky; top: 0; z-index: 50;
}

.page-title { font-size: 16px; font-weight: 600; }

.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-right { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.topbar-right .btn, .topbar-right form { flex: 0 0 auto; }

.content-area { flex: 1; overflow-y: auto; padding: 24px; }

/* ─── Two-column split layouts (used on order/restock/edit/etc. pages) ──── */
.split-layout { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
.split-layout.split-380 { grid-template-columns: 1fr 380px; }
.split-layout.split-even { grid-template-columns: 1fr 1fr; }
.split-layout.split-reverse { grid-template-columns: 340px 1fr; }
.split-layout > * { min-width: 0; } /* grid items default to min-width:auto and won't shrink otherwise */
.dashboard-grid > *, .detail-grid > * { min-width: 0; }


.flash-messages { margin-bottom: 20px; }
.flash {
  padding: 10px 14px; border-radius: var(--radius);
  font-size: 13.5px; margin-bottom: 8px;
}
.flash-success { background: var(--success-dim); color: var(--success); border: 1px solid rgba(34,197,94,0.2); }
.flash-error { background: var(--danger-dim); color: var(--danger); border: 1px solid rgba(239,68,68,0.2); }
.flash-info { background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(79,124,255,0.2); }

/* ─── Stat Cards ────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; }

.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px;
  position: relative; overflow: hidden;
}
.stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
}
.stat-card.blue::before { background: var(--accent); }
.stat-card.green::before { background: var(--success); }
.stat-card.yellow::before { background: var(--warn); }
.stat-card.red::before { background: var(--danger); }
.stat-card.teal::before { background: var(--accent-2); }

.stat-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.stat-value { font-size: 26px; font-weight: 700; line-height: 1; }
.stat-value.mono { font-family: var(--mono); }
.stat-sub { font-size: 11px; color: var(--text-3); margin-top: 4px; }

/* ─── Tables ────────────────────────────────────────────────────── */
.table-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}

.table-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.table-title { font-weight: 600; font-size: 14px; }

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; padding: 10px 16px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-3);
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
td {
  padding: 11px 16px; border-bottom: 1px solid var(--border);
  font-size: 13.5px; vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }

.mono { font-family: var(--mono); }

/* ─── Badges / Status ───────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
}
.badge-pending { background: var(--warn-dim); color: var(--warn); }
.badge-dispatched { background: var(--accent-dim); color: var(--accent); }
.badge-delivered { background: var(--success-dim); color: var(--success); }
.badge-returned { background: var(--danger-dim); color: var(--danger); }
.badge-return_ho { background: var(--warn-dim); color: var(--warn); }
.badge-return_branch { background: var(--warn-dim); color: var(--warn); }
.badge-cancelled { background: var(--surface-3); color: var(--text-3); }
.badge-approved { background: var(--success-dim); color: var(--success); }
.badge-blacklist { background: var(--danger-dim); color: var(--danger); }
.badge-low { background: var(--warn-dim); color: var(--warn); }

/* ─── Buttons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius);
  font-size: 13.5px; font-weight: 500; cursor: pointer;
  border: none; text-decoration: none; transition: all 0.15s;
  font-family: var(--sans); line-height: 1;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #3d6bef; }
.btn-secondary { background: var(--surface-3); color: var(--text); border: 1px solid var(--border-light); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-danger { background: var(--danger-dim); color: var(--danger); border: 1px solid rgba(239,68,68,0.2); }
.btn-danger:hover { background: rgba(239,68,68,0.25); }
.btn-sm { padding: 5px 11px; font-size: 12px; }
.btn-ghost { background: transparent; color: var(--text-2); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

/* ─── Forms ─────────────────────────────────────────────────────── */
.form-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px;
  max-width: 680px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }
.form-label { font-size: 12px; font-weight: 600; color: var(--text-2); letter-spacing: 0.04em; }
.form-input, .form-select, .form-textarea {
  background: var(--surface-2); border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: 8px 12px;
  color: var(--text); font-family: var(--sans); font-size: 13.5px;
  transition: border-color 0.15s;
  width: 100%;
  min-width: 0; /* prevent inputs from refusing to shrink inside flex rows on narrow screens */
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim);
}
.form-textarea { resize: vertical; min-height: 80px; }
.form-select { cursor: pointer; }
.form-actions { display: flex; gap: 10px; margin-top: 20px; }

.form-section-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3);
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
  margin-bottom: 16px; margin-top: 24px;
}

/* ─── Filters bar ───────────────────────────────────────────────── */
.filter-bar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.filter-bar .form-input { max-width: 260px; }
.filter-tabs { display: flex; gap: 4px; }
.filter-tab {
  padding: 6px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 500;
  border: 1px solid var(--border); background: transparent; color: var(--text-2);
  cursor: pointer; text-decoration: none; transition: all 0.15s;
}
.filter-tab:hover { background: var(--surface-2); color: var(--text); }
.filter-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ─── Dashboard grid ────────────────────────────────────────────── */
.dashboard-grid { display: grid; grid-template-columns: 1fr 340px; gap: 18px; margin-top: 4px; }
.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.panel-header {
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.panel-title { font-weight: 600; font-size: 13.5px; }
.panel-body { padding: 0; }
.panel-link { font-size: 12px; color: var(--accent); text-decoration: none; }
.panel-link:hover { text-decoration: underline; }

/* ─── Order items builder ───────────────────────────────────────── */
.items-table { width: 100%; border-collapse: collapse; }
.items-table-wrap { overflow-x: auto; }
.items-table th { font-size: 11px; text-transform: uppercase; color: var(--text-3); padding: 8px 10px; }
.items-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.items-table .form-input, .items-table .form-select { padding: 6px 10px; }
.item-row-remove { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 16px; padding: 4px; }

.add-item-btn {
  margin-top: 10px; background: none; border: 1px dashed var(--border-light);
  border-radius: var(--radius); color: var(--text-3); cursor: pointer;
  padding: 8px 14px; font-size: 13px; width: 100%;
  transition: all 0.15s;
}
.add-item-btn:hover { border-color: var(--accent); color: var(--accent); }

.order-summary {
  background: var(--surface-2); border-radius: var(--radius);
  padding: 14px; margin-top: 12px;
}
.summary-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13.5px; color: var(--text-2); }
.summary-row.total { font-weight: 700; color: var(--text); font-size: 15px; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px; }
.summary-row.profit { color: var(--success); }

/* ─── Detail view ───────────────────────────────────────────────── */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.detail-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px;
}
.detail-card.full { grid-column: 1 / -1; }
.detail-card-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin-bottom: 14px; }
.detail-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.detail-row:last-child { border-bottom: none; }
.detail-key { color: var(--text-3); }
.detail-val { font-weight: 500; text-align: right; max-width: 65%; }

/* ─── Profit page ───────────────────────────────────────────────── */
.profit-highlight { font-size: 32px; font-weight: 700; font-family: var(--mono); color: var(--success); }
.profit-meta { font-size: 12px; color: var(--text-3); margin-top: 4px; }

/* ─── Empty state ───────────────────────────────────────────────── */
.empty-state { padding: 60px 20px; text-align: center; color: var(--text-3); }
.empty-state h3 { font-size: 16px; color: var(--text-2); margin-bottom: 6px; }
.empty-state p { font-size: 13.5px; margin-bottom: 16px; }

/* ─── Utils ─────────────────────────────────────────────────────── */
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warn { color: var(--warn) !important; }
.text-muted { color: var(--text-3); }
.text-right { text-align: right; }
.text-bold { font-weight: 600; }
.gap-8 { gap: 8px; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.lkr::before { content: 'Rs '; font-size: 0.85em; opacity: 0.7; }

/* ─── Mobile (phones / narrow tablets) ──────────────────────────── */
@media (max-width: 880px) {
  html, body { font-size: 14px; }

  /* Mobile browsers (iOS Safari, Chrome) don't report a stable 100vh — it's
     sized as if the address bar/toolbar were hidden, so a fixed-height layout
     can render with its top portion sitting behind the browser's own UI.
     100dvh ("dynamic viewport height") was introduced specifically to track
     the ACTUAL visible area as the toolbar shows/hides, so the layout always
     fits the real visible space. (vh stays as a fallback for old browsers —
     dvh on the line below simply overrides it where supported.) */
  .app-layout { height: 100vh; height: 100dvh; }

  /* Sidebar becomes a slide-in drawer instead of a permanent column */
  .app-layout { position: relative; }
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100%; z-index: 1000;
    width: 260px; min-width: 260px;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 2px 0 24px rgba(0,0,0,0.4);
  }
  .app-layout.sidebar-open .sidebar { transform: translateX(0); }

  .sidebar-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.22s ease;
  }
  .app-layout.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }

  .sidebar-close-btn {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 10px; right: 10px;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--surface-2); color: var(--text-2); border: none;
    font-size: 14px; cursor: pointer;
  }

  .hamburger-btn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: var(--radius);
    background: transparent; border: none; color: var(--text);
    cursor: pointer; flex-shrink: 0; margin-right: 4px;
  }
  .hamburger-btn svg { width: 20px; height: 20px; }
  .hamburger-btn:hover { background: var(--surface-2); }

  /* Topbar: stack title row + action buttons, allow wrapping, shrink padding */
  .topbar {
    height: auto; min-height: 56px;
    padding: 10px 14px;
    flex-wrap: wrap; gap: 8px;
    position: sticky; top: 0; z-index: 50;
  }
  .topbar-left { display: flex; align-items: center; min-width: 0; }
  .page-title { font-size: 15px; white-space: normal; }
  .topbar-right { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
  .topbar-right .btn, .topbar-right form { flex: 0 0 auto; }
  .topbar-right .btn { padding: 7px 11px; font-size: 12.5px; }

  .content-area { padding: 14px; }
  .form-card, .detail-card { padding: 16px; }

  /* Two-column layouts stack into one column */
  .split-layout, .split-layout.split-380, .split-layout.split-even, .split-layout.split-reverse {
    grid-template-columns: 1fr !important;
  }
  .dashboard-grid { grid-template-columns: 1fr !important; }
  .detail-grid { grid-template-columns: 1fr !important; }

  /* Sticky sidebars inside split layouts shouldn't stick on mobile */
  [style*="sticky"] { position: static !important; top: auto !important; }

  /* Tables: scroll horizontally inside their own card instead of
     blowing out the page width */
  .table-card { overflow-x: auto; }
  .table-card table { min-width: 640px; }
  .items-table-wrap table { min-width: 560px; }

  .stat-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }

  /* Forms: most form-grids are 2-up — collapse to 1 column */
  .form-grid { grid-template-columns: 1fr !important; }

  .btn { padding: 9px 14px; font-size: 13px; }
}