/* ── Tokens ──────────────────────────────────────────── */
:root {
  --cream:      oklch(0.97 0.012 80);
  --paper:      oklch(0.995 0.004 80);
  --plum-50:    oklch(0.96 0.018 305);
  --plum-100:   oklch(0.92 0.04  305);
  --plum-200:   oklch(0.86 0.07  305);
  --plum-700:   oklch(0.44 0.18  305);
  --plum-800:   oklch(0.34 0.16  305);
  --plum-900:   oklch(0.26 0.14  305);
  --plum-950:   oklch(0.17 0.10  305);
  --terracotta: oklch(0.62 0.14  35);
  --peach-100:  oklch(0.95 0.04  55);
  --peach-200:  oklch(0.90 0.07  50);
  --ink-1:      oklch(0.22 0.04  260);
  --ink-2:      oklch(0.40 0.04  260);
  --ink-3:      oklch(0.58 0.03  260);
  --line:       oklch(0.88 0.018 260);
  --line-2:     oklch(0.93 0.012 260);
  --success:    oklch(0.52 0.15  145);
  --success-bg: oklch(0.94 0.05  145);
  --warning:    oklch(0.62 0.16  70);
  --warning-bg: oklch(0.95 0.06  80);
  --danger:     oklch(0.52 0.19  25);
  --danger-bg:  oklch(0.95 0.05  25);

  --font-serif: 'Roboto', system-ui, sans-serif;
  --font-sans:  'Roboto', system-ui, -apple-system, sans-serif;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  22px;
  --r-pill:100px;
  --sidebar-w: 240px;
  --topbar-h:  64px;
  --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.07), 0 1px 2px oklch(0 0 0 / 0.04);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.08), 0 2px 4px oklch(0 0 0 / 0.04);
}

/* ── Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--ink-1);
  line-height: 1.55;
  min-height: 100vh;
}
a { color: var(--plum-700); text-decoration: none; }

/* ── SVG icon size normalization ─────────────────────── */
label svg, .field__hint svg {
  width: 14px; height: 14px;
  vertical-align: -2px;
  flex-shrink: 0;
}

/* ── Stock row colors ────────────────────────────────── */
tbody tr.row--low td    { background: oklch(0.95 0.07 60 / 0.55) !important; }
tbody tr.row--low:hover td { background: oklch(0.91 0.09 60 / 0.6) !important; }
tbody tr.row--out td    { background: oklch(0.95 0.05 25 / 0.5) !important; }
tbody tr.row--out:hover td { background: oklch(0.91 0.07 25 / 0.55) !important; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }

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

/* ── Sidebar ─────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--plum-950);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 20px 20px;
  border-bottom: 1px solid oklch(1 0 0 / 0.08);
}
.sidebar__logo {
  width: 40px; height: 40px;
  flex-shrink: 0;
  background: #fff;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  padding: 3px;
}
.sidebar__logo img { width: 100%; height: 100%; object-fit: contain; }
.sidebar__name {
  font-family: 'Roboto', var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.sidebar__sub {
  font-size: 10.5px;
  color: oklch(1 0 0 / 0.45);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
}
.sidebar__nav {
  flex: 1;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-weight: 500;
  color: oklch(1 0 0 / 0.6);
  transition: background 150ms, color 150ms;
  text-decoration: none;
}
.sidebar__link svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar__link:hover { background: oklch(1 0 0 / 0.06); color: #fff; text-decoration: none; }
.sidebar__link.is-active { background: oklch(1 0 0 / 0.10); color: #fff; }
.sidebar__footer {
  padding: 16px;
  border-top: 1px solid oklch(1 0 0 / 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sidebar__user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sidebar__avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--plum-700);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.sidebar__username {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar__role {
  font-size: 11px;
  color: oklch(1 0 0 / 0.45);
}
.sidebar__actions { display: flex; gap: 4px; }
.sidebar__action {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  color: oklch(1 0 0 / 0.5);
  transition: background 150ms, color 150ms;
  text-decoration: none;
}
.sidebar__action svg { width: 16px; height: 16px; }
.sidebar__action:hover { background: oklch(1 0 0 / 0.08); color: #fff; text-decoration: none; }

/* ── Main area ───────────────────────────────────────── */
.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  padding: 0 28px;
  background: color-mix(in oklab, var(--cream) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar__title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--plum-900);
}
.content {
  padding: 28px;
  flex: 1;
}

/* ── Cards ───────────────────────────────────────────── */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  margin-bottom: 20px;
}
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}
.card__title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--plum-900);
}

/* ── Stat cards ──────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.stat__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.stat__value {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 700;
  color: var(--plum-900);
  line-height: 1;
}
.stat__sub {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 4px;
}
.stat--warning .stat__value { color: var(--warning); }
.stat--danger  .stat__value { color: var(--danger);  }

/* ── Table ───────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
thead th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-2);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--plum-50); }

/* ── Badges ──────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
}
.badge--ok      { background: var(--success-bg); color: var(--success); }
.badge--warning { background: var(--warning-bg); color: var(--warning); }
.badge--danger  { background: var(--danger-bg);  color: var(--danger);  }
.badge--admin   { background: var(--plum-100);   color: var(--plum-900); }
.badge--physio  { background: var(--peach-100);  color: var(--terracotta); }

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity 140ms, box-shadow 140ms;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.2;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn:hover { opacity: 0.88; text-decoration: none; }
.btn--primary { background: var(--plum-700); color: #fff; }
.btn--danger  { background: var(--danger);   color: #fff; }
.btn--ghost   {
  background: transparent;
  color: var(--plum-700);
  border: 1.5px solid var(--plum-200);
}
.btn--ghost:hover { background: var(--plum-50); }
.btn--sm { padding: 6px 12px; font-size: 12.5px; }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Forms ───────────────────────────────────────────── */
.form-grid { display: grid; gap: 18px; }
.form-grid--2 { grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}
.field input,
.field select,
.field textarea {
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--cream);
  color: var(--ink-1);
  font-size: 14px;
  transition: border-color 160ms, box-shadow 160ms;
  width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--plum-700);
  box-shadow: 0 0 0 3px oklch(0.44 0.18 305 / 0.12);
}
.field textarea { resize: vertical; min-height: 90px; }
.field__hint {
  font-size: 12px;
  color: var(--ink-3);
}

/* ── Alerts ──────────────────────────────────────────── */
.alert {
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 20px;
}
.alert--ok    { background: var(--success-bg); color: var(--success);  border: 1px solid oklch(0.52 0.15 145 / 0.25); }
.alert--error { background: var(--danger-bg);  color: var(--danger);   border: 1px solid oklch(0.52 0.19 25 / 0.25); }

/* ── Stock bar ───────────────────────────────────────── */
.stock-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.stock-bar {
  flex: 1;
  height: 8px;
  background: var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
  min-width: 80px;
}
.stock-bar__fill {
  height: 100%;
  border-radius: var(--r-pill);
  transition: width 0.4s ease;
}
.stock-bar__fill--ok      { background: var(--success); }
.stock-bar__fill--warning { background: var(--warning); }
.stock-bar__fill--danger  { background: var(--danger);  }

/* ── Article photo ───────────────────────────────────── */
.art-thumb {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--plum-50);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.art-thumb-placeholder {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--plum-100);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--plum-700);
  flex-shrink: 0;
}
.art-thumb-placeholder svg { width: 20px; height: 20px; }
.art-name-cell { display: flex; align-items: center; gap: 12px; }

/* ── Photo preview ───────────────────────────────────── */
.photo-preview {
  margin-top: 10px;
  border-radius: var(--r-md);
  overflow: hidden;
  max-width: 200px;
  border: 1px solid var(--line);
}
.photo-preview img { width: 100%; display: block; }

/* ── Login page ──────────────────────────────────────── */
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--cream);
  padding: 20px;
}
.login-box {
  width: 100%;
  max-width: 420px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  padding: 40px;
}
.login-box__brand {
  text-align: center;
  margin-bottom: 32px;
}
.login-box__logo {
  width: 72px; height: 72px;
  margin: 0 auto 14px;
  background: #fff;
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.login-box__logo img { width: 100%; height: 100%; object-fit: contain; }
.login-box__title {
  font-family: 'Roboto', var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  color: var(--plum-900);
  letter-spacing: -0.01em;
}
.login-box__sub {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 4px;
}

/* ── Change / pos indicator ──────────────────────────── */
.change-positive { color: var(--success); font-weight: 600; }
.change-negative { color: var(--danger);  font-weight: 600; }

/* ── Empty state ─────────────────────────────────────── */
.empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--ink-3);
}
.empty p { margin-top: 8px; font-size: 14px; }

/* ── Tag input ───────────────────────────────────────── */
.tag-input-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--cream);
  cursor: text;
  min-height: 44px;
  align-items: center;
  position: relative;
  transition: border-color 160ms, box-shadow 160ms;
}
.tag-input-wrap:focus-within {
  border-color: var(--plum-700);
  box-shadow: 0 0 0 3px oklch(0.44 0.18 305 / 0.12);
}
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: var(--plum-100);
  color: var(--plum-900);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.tag-pill__remove {
  cursor: pointer;
  opacity: 0.55;
  font-size: 15px;
  line-height: 1;
}
.tag-pill__remove:hover { opacity: 1; }
.tag-input-field {
  border: none;
  background: none;
  outline: none;
  font-size: 14px;
  min-width: 100px;
  flex: 1;
  padding: 3px 2px;
  color: var(--ink-1);
}
.tag-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  z-index: 50;
  max-height: 180px;
  overflow-y: auto;
}
.tag-dropdown.is-open { display: block; }
.tag-dropdown-item {
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink-2);
}
.tag-dropdown-item:hover,
.tag-dropdown-item.is-active { background: var(--plum-50); color: var(--plum-900); }

/* ── Input group (price + symbol) ────────────────────── */
.input-group {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color 160ms, box-shadow 160ms;
}
.input-group:focus-within {
  border-color: var(--plum-700);
  box-shadow: 0 0 0 3px oklch(0.44 0.18 305 / 0.12);
}
.input-group__addon {
  padding: 0 12px;
  background: var(--plum-50);
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--line);
}
.input-group input {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  flex: 1;
  min-width: 0;
}

/* ── Confirm dialog ──────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: oklch(0 0 0 / 0.45);
  backdrop-filter: blur(4px);
  z-index: 100;
  place-items: center;
}
.modal-overlay.is-open { display: grid; }
.modal-box {
  background: var(--paper);
  border-radius: var(--r-xl);
  padding: 32px;
  max-width: 360px;
  width: 90%;
  box-shadow: var(--shadow-md);
}
.modal-box h2 { font-family: var(--font-serif); font-size: 20px; color: var(--plum-900); margin-bottom: 10px; }
.modal-box p  { font-size: 14px; color: var(--ink-2); margin-bottom: 24px; }

/* ── Hamburger button ────────────────────────────────── */
.hamburger {
  display: none;
  width: 40px; height: 40px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--r-md);
  color: var(--plum-900);
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  flex-shrink: 0;
  transition: background 150ms;
}
.hamburger:hover { background: var(--plum-50); }
.hamburger svg { width: 22px; height: 22px; }

/* ── Sidebar overlay (mobile) ────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: oklch(0 0 0 / 0.45);
  z-index: 39;
}
.sidebar-overlay.is-open { display: block; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
  .hamburger { display: inline-flex; }
  .content { padding: 16px; }
  .topbar { padding: 0 12px; gap: 0; }
  .form-grid--2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .chart-grid { grid-template-columns: 1fr; }

  /* Sidebar: hidden off-screen, slides in when .is-open */
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    width: 260px;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .sidebar.is-open {
    transform: translateX(0);
  }
  .main {
    width: 100%;
  }
}

/* ── Charts ──────────────────────────────────────────── */
.chart-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px 24px;
  margin-bottom: 20px;
}
.chart-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}
.chart-wrap { overflow-x: auto; }
.chart-wrap svg { display: block; }
.chart-legend {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 12px;
}
.chart-legend__item {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--ink-2);
}
.chart-legend__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .chart-grid { grid-template-columns: 1fr; } }

/* ── Import/export ───────────────────────────────────── */
.upload-zone {
  border: 2px dashed var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms, background 160ms;
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--plum-700);
  background: var(--plum-50);
}
.upload-zone p { color: var(--ink-3); font-size: 14px; margin-top: 8px; }