/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  --bg:            #f4f5f7;
  --surface:       #ffffff;
  --border:        #e3e6eb;
  --ink:           #161a23;
  --ink-soft:      #667085;
  --ink-faint:     #98a2b3;

  --sidebar-bg:       #0e1220;
  --sidebar-bg-hover: #1a2033;
  --sidebar-bg-active:#1f2a44;
  --sidebar-text:     #8d95a8;
  --sidebar-text-active: #ffffff;
  --sidebar-border:   #1c2130;

  --accent:        #3457e8;
  --accent-ink:    #2544c4;
  --accent-soft:   #eaefff;

  --success:       #0e8f5f;
  --success-soft:  #e5f6ee;
  --danger:        #d1453b;
  --danger-soft:   #fbeae9;
  --warning:       #b1750c;
  --warning-soft:  #fbf1de;

  --radius: 10px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 14px rgba(16, 24, 40, 0.06);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14.5px;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }

/* Numbers always get tabular figures - the whole point of an accounting UI
   is that columns of money/percentages line up predictably. */
.money, .num, td.num, .stat-value, .user-avatar, table td:has(> .money) {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Shell layout - single column now that nav lives in the topbar, not a
   side rail. Removing the sidebar's 252px is the whole point of this
   change: more horizontal room for actual data.
   ========================================================================== */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0.6rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  gap: 1rem;
}

/* ==========================================================================
   Horizontal top nav - Bootstrap's dropdown component gives the accordion-
   style behavior (one menu open at a time, closes on outside click) without
   custom JS. Light-themed to match the topbar surface, unlike the old dark
   sidebar palette which doesn't belong on a white bar.
   ========================================================================== */
.topnav {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-wrap: wrap;
  row-gap: 0.3rem;
}

.topnav-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-right: 1rem;
  flex-shrink: 0;
}

.topnav-brand .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), #6a8bff);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.topnav-brand .brand-text {
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  display: none;
}

.topnav-item { flex-shrink: 0; }

.topnav-toggle {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.5rem 0.65rem;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}
.topnav-toggle:hover { background: var(--bg); color: var(--ink); }

.topnav-toggle.has-active {
  color: var(--accent-ink);
  background: var(--accent-soft);
}

.topnav-toggle i.bi:first-child { font-size: 0.85rem; }

.topnav-chevron {
  font-size: 0.55rem !important;
  opacity: 0.6;
  transition: transform 0.15s ease;
}
.topnav-toggle[aria-expanded="true"] .topnav-chevron { transform: rotate(180deg); }

.topnav-menu {
  min-width: 250px;
  max-height: 75vh;
  overflow-y: auto;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  margin-top: 0.4rem !important;
}

.topnav-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  padding: 0.45rem 0.6rem;
  border-radius: 7px;
}
.topnav-menu .dropdown-item i.bi {
  font-size: 0.85rem;
  width: 1.1rem;
  text-align: center;
  opacity: 0.65;
  flex-shrink: 0;
}
.topnav-menu .dropdown-item:hover { background: var(--bg); }
.topnav-menu .dropdown-item.active {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}
.topnav-menu .dropdown-item.active i.bi { opacity: 1; }

.topnav-menu-divider {
  color: var(--ink-faint);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.6rem 0.6rem 0.2rem;
}

.topnav-toggler-btn {
  display: none;
  flex-shrink: 0;
}

.topbar-help-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.topbar-help-btn:hover, .topbar-help-btn.active {
  background: var(--accent-ink);
  color: #fff;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 600;
}

.user-meta { line-height: 1.2; }
.user-name { font-size: 0.83rem; font-weight: 600; color: var(--ink); }
.user-role { font-size: 0.72rem; color: var(--ink-faint); text-transform: capitalize; }

.btn-logout {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0.35rem 0.75rem;
  margin-left: 0.6rem;
  transition: all 0.12s ease;
}
.btn-logout:hover { background: var(--bg); color: var(--ink); }

.content-body {
  flex: 1;
  padding: 1.75rem 2rem;
  max-width: 1680px;
  margin: 0 auto;
  width: 100%;
}

/* ==========================================================================
   Page furniture
   ========================================================================== */
h4 {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.page-subtitle {
  color: var(--ink-soft);
  font-size: 0.88rem;
  margin-top: -0.5rem;
  margin-bottom: 1.25rem;
  max-width: 62ch;
}

.card-panel {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
}

.stat-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 1.15rem 1.25rem;
  border-left: 3px solid var(--accent);
}

.stat-card.stat-warn   { border-left-color: var(--warning); }
.stat-card.stat-danger { border-left-color: var(--danger); }
.stat-card.stat-good   { border-left-color: var(--success); }

.stat-value {
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}

.stat-label {
  color: var(--ink-faint);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.3rem;
}

/* ==========================================================================
   Tables
   ========================================================================== */
.table {
  margin-bottom: 0;
}

.table thead th {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--border);
  padding: 0.65rem 0.75rem;
  white-space: nowrap;
}

.table tbody td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: #fafbfd; }

/* Wide tables: a bigger, always-visible scrollbar so it's easy to grab and
   drag directly, plus a frozen first column so the row's identity (SKU,
   name, etc.) never scrolls out of view while reading the columns to its
   right - the two things that make a many-column table feel "hard to
   scroll" instead of just wide. */
.table-responsive {
  scrollbar-width: auto;
  scrollbar-color: var(--ink-faint) var(--surface-2, #eef1f6);
}
.table-responsive::-webkit-scrollbar {
  height: 14px;
}
.table-responsive::-webkit-scrollbar-track {
  background: var(--surface-2, #eef1f6);
  border-radius: 7px;
}
.table-responsive::-webkit-scrollbar-thumb {
  background: var(--ink-faint);
  border-radius: 7px;
  border: 3px solid var(--surface-2, #eef1f6);
}
.table-responsive::-webkit-scrollbar-thumb:hover {
  background: var(--ink);
}

.table-responsive .table thead th:first-child,
.table-responsive .table tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
  box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.12);
}
.table-responsive .table tbody tr:hover td:first-child {
  background: #fafbfd;
}

/* A tall table (many rows) pushed its own horizontal scrollbar to the very
   bottom of the table, past a full page-scroll's worth of rows - reaching
   it meant scrolling all the way down, then back up, losing track of which
   SKU/row was being checked in the process. Bounding the container's height
   keeps its scrollbar within reach near the header at all times, and the
   header itself stays pinned on top while scrolling down through the rows
   inside that bounded area - the same "frozen pane" pattern as a
   spreadsheet, so the row you're on and its column headers are both always
   visible together. Short tables are unaffected - the max-height only
   engages once content actually exceeds it. */
.table-responsive {
  max-height: 65vh;
  overflow-y: auto;
}
.table-responsive .table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface);
}
.table-responsive .table thead th:first-child {
  z-index: 4;
}

/* ==========================================================================
   Buttons - override Bootstrap defaults to match the accent palette
   ========================================================================== */
.btn {
  font-weight: 600;
  font-size: 0.84rem;
  border-radius: 7px;
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}

.btn-outline-secondary {
  color: var(--ink-soft);
  border-color: var(--border);
}
.btn-outline-secondary:hover {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--border);
}

.btn-outline-danger {
  color: var(--danger);
  border-color: #f2d3d0;
}
.btn-outline-danger:hover {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: var(--danger);
}

/* ==========================================================================
   Badges
   ========================================================================== */
.badge {
  font-weight: 600;
  font-size: 0.7rem;
  padding: 0.32em 0.6em;
  border-radius: 5px;
}

.badge.text-bg-secondary {
  background: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
}

/* ==========================================================================
   Forms / modals
   ========================================================================== */
.form-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.form-control, .form-select {
  border-color: var(--border);
  font-size: 0.88rem;
  border-radius: 7px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-text { font-size: 0.76rem; color: var(--ink-faint); }

.modal-content { border-radius: var(--radius); border: none; box-shadow: var(--shadow-md); }
.modal-header, .modal-footer { border-color: var(--border); }
.modal-title { font-weight: 700; font-size: 1rem; }

/* ==========================================================================
   Alerts
   ========================================================================== */
.alert {
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.88rem;
  padding: 0.75rem 1rem;
}
.alert-success { background: var(--success-soft); color: var(--success); border-color: #cdeee0; }
.alert-danger  { background: var(--danger-soft);  color: var(--danger);  border-color: #f4d4d1; }
.alert-info    { background: var(--accent-soft);  color: var(--accent-ink); border-color: #d6e0ff; }

/* ==========================================================================
   Login page
   ========================================================================== */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sidebar-bg);
  background-image: radial-gradient(circle at 20% 20%, #1a2340 0%, transparent 45%),
                     radial-gradient(circle at 80% 80%, #161f38 0%, transparent 45%);
  font-family: var(--font-sans);
}

.login-card {
  background: var(--surface);
  border-radius: 14px;
  padding: 2.5rem;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .topnav {
    display: none;
    flex-wrap: wrap;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0.75rem;
    box-shadow: var(--shadow-md);
    overflow-x: visible;
    z-index: 40;
  }
  .topnav.open { display: flex; }
  .topnav-item { width: 100%; }
  .topnav-toggle { width: 100%; }
  .topnav-menu { position: static !important; box-shadow: none; border: none; transform: none !important; }
  .topnav-toggler-btn { display: inline-flex; }
  .content-body { padding: 1.25rem; }

  /* Buttons/inputs default to well under the ~44px comfortable touch
     target on mobile (measured ~34px tall on the live login button) -
     bumped here rather than site-wide so desktop density is unaffected. */
  .btn {
    min-height: 44px;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }
  .btn-sm {
    min-height: 38px;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }
  .form-control, .form-select {
    min-height: 44px;
  }
}