/* BYC Dashboard — internal admin panel for BYC Performance.
   Brand palette copied verbatim from byc-inventory/static/style.css
   (dark theme, red accent) — do not reinvent colors here. */

:root {
  --bg: #0b0b0d;
  --bg-elevated: #131316;
  --bg-card: #1a1a1f;
  --bg-card-hover: #212127;
  --border: #2a2a31;
  --border-light: #35353d;
  --text: #f1f1f4;
  --text-dim: #a3a3ad;
  --text-faint: #6f6f7a;

  --red: #e2222f;
  --red-dark: #b81c27;
  --red-glow: rgba(226, 34, 47, 0.35);

  --amber: #f5a524;
  --amber-bg: rgba(245, 165, 36, 0.12);
  --amber-border: rgba(245, 165, 36, 0.35);

  --green: #2fbf6f;
  --green-bg: rgba(47, 191, 111, 0.12);

  --danger: #ff5b5f;
  --danger-bg: rgba(255, 91, 95, 0.1);

  --radius: 10px;
  --radius-sm: 7px;
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.55);

  --sidebar-w: 220px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  min-height: 100%;
  /* Native form popups (select dropdowns, date pickers) follow the page's
     colour scheme; without this Windows/Chromium draws them light with our
     light text on top (unreadable). */
  color-scheme: dark;
}

select option, select optgroup {
  background: var(--bg-elevated);
  color: var(--text);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button, input {
  font-family: inherit;
}

.hidden {
  display: none !important;
}

/* ---------- Shell / Sidebar ---------- */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  /* 14 px on top since 2026-10-13 (sidebar plan): the menu fits a laptop window. */
  padding: 14px 14px 20px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 14px;
  white-space: nowrap;
  flex-shrink: 0;
}

.sidebar-logo-img {
  height: 32px;
  width: auto;
  display: block;
}

/* The menu scrolls on its own when it is taller than the screen (every
   group open on a short window, 2026-10-08); the logo stays on top and
   the footer at the bottom. 2026-10-13 (owner approved the sidebar plan):
   2 px gaps, and a scrollbar you can see (#6f6f7a, 3.74:1 instead of the
   old 1.30:1); a fade at the bottom while more of the list is below
   (.more-below, admin/nav-groups.js); keyboard focus also stops above it. */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--text-faint) transparent;
  scroll-padding-bottom: 28px;   /* Tab focus stops above the fade (2026-10-13) */
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  padding: 8px 12px;           /* 36 px rows (40 px until 2026-10-13) */
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-item-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.nav-item-icon svg {
  width: 100%;
  height: 100%;
}

.nav-item:hover {
  color: var(--text);
  background: var(--bg-card);
}

.nav-item.active {
  color: #fff;
  background: var(--red);
}

.sidebar-footer {
  margin-top: auto;
  flex-shrink: 0;
  padding: 10px 8px 2px;
  font-size: 11px;
  color: var(--text-faint);
}

/* ---------- Main content ---------- */

.main-content {
  flex: 1;
  min-width: 0;
  padding: 28px 32px 60px;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.view-header h1 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}

.view-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- Buttons (shared) ---------- */

.btn {
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease, opacity 0.15s ease, transform 0.05s ease, background 0.15s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: var(--red);
  color: #fff;
}

.btn-primary:hover:not(:disabled) {
  filter: brightness(1.1);
}

.btn-secondary {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  color: var(--text);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--bg-card-hover);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

/* ---------- Inline sync message ---------- */

.inline-message {
  font-size: 13px;
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  margin-bottom: 14px;
  border: 1px solid transparent;
}

.inline-message.msg-success {
  background: var(--green-bg);
  border-color: rgba(47, 191, 111, 0.4);
  color: var(--green);
}

.inline-message.msg-error {
  background: var(--danger-bg);
  border-color: rgba(255, 91, 95, 0.4);
  color: var(--danger);
}

/* ---------- Search ---------- */

.search-bar {
  margin-bottom: 16px;
  max-width: 360px;
}

.search-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease;
}

.search-input::placeholder {
  color: var(--text-faint);
}

.search-input:focus {
  border-color: var(--red);
}

.search-meta {
  font-size: 12px;
  color: var(--text-faint);
  margin: -8px 0 16px;
}

/* ---------- Products toolbar (search + stock filter) ---------- */

.products-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.products-toolbar .search-bar {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
}

.stock-filter {
  display: inline-flex;
  flex-shrink: 0;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
}

.stock-filter-btn {
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.stock-filter-btn:hover {
  color: var(--text);
}

.stock-filter-btn.active {
  background: var(--red);
  color: #fff;
}

/* ---------- Loading / empty states ---------- */

.loading-state,
.empty-state,
.error-state {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 20px;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
}

.error-state {
  color: var(--danger);
  border-color: rgba(255, 91, 95, 0.4);
  background: var(--danger-bg);
}

/* ---------- Products grid ---------- */

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.product-card {
  display: flex;
  gap: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.product-card:hover {
  border-color: var(--red);
}

.thumb {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumb-fallback {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-faint);
}

.thumb-fallback svg {
  width: 22px;
  height: 22px;
}

.thumb.thumb-placeholder .thumb-fallback,
.thumb.broken .thumb-fallback {
  display: flex;
}

.thumb.broken img {
  display: none;
}

.product-card-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.product-card-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.qty-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qty-label {
  font-size: 11.5px;
  color: var(--text-faint);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.qty-input {
  width: 64px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 13.5px;
  font-weight: 700;
  outline: none;
  transition: border-color 0.15s ease;
  -moz-appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-input:focus {
  border-color: var(--red);
}

.qty-input.qty-invalid {
  border-color: var(--danger);
}

.qty-saved-flash {
  color: var(--green);
  font-size: 14px;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.qty-saved-flash.show {
  opacity: 1;
  transform: scale(1);
}

.qty-error {
  font-size: 11.5px;
  color: var(--danger);
}

/* ---------- Restock (ordered-quantity stepper + confirm-shipment control) ---------- */
/* Cards reuse .product-card/.thumb/.qty-row/.qty-input/etc verbatim (see
   renderRestockProductCard() in app.js) so the visual treatment matches
   Products exactly -- only the additions below are Restock-specific. */

.restock-card {
  cursor: default; /* unlike Products, clicking a Restock card doesn't open a modal */
}

.restock-stock-note {
  font-size: 11.5px;
  color: var(--text-faint);
}

.restock-stock-note strong {
  color: var(--text-dim);
  font-weight: 700;
}

.confirm-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.confirm-toggle-btn {
  align-self: flex-start;
}

.confirm-inline {
  display: flex;
  align-items: center;
  gap: 6px;
}

.confirm-amount-input {
  width: 64px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 13.5px;
  font-weight: 700;
  outline: none;
  transition: border-color 0.15s ease;
  -moz-appearance: textfield;
}

.confirm-amount-input::-webkit-outer-spin-button,
.confirm-amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.confirm-amount-input:focus {
  border-color: var(--red);
}

.confirm-cancel-btn {
  background: transparent;
  border: none;
  color: var(--text-faint);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 6px;
}

.confirm-cancel-btn:hover {
  color: var(--text);
}

.confirm-error {
  font-size: 11.5px;
  color: var(--danger);
}

/* ---------- Products + category tree layout ---------- */

.products-layout {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.products-tree-panel {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 28px;
}

.products-main {
  flex: 1;
  min-width: 0;
}

.category-tree-wrap {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  overflow-x: auto;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
}

.products-all-row {
  margin-bottom: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.category-tree {
  display: flex;
  flex-direction: column;
}

.tree-children {
  display: none;
  flex-direction: column;
}

.tree-children.expanded {
  display: flex;
}

.tree-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-dim);
  transition: background 0.15s ease, color 0.15s ease;
}

.tree-row:hover {
  background: var(--bg-card);
  color: var(--text);
}

.tree-row.active {
  background: var(--red);
  color: #fff;
}

.tree-toggle {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: inherit;
  padding: 0;
  cursor: pointer;
  border-radius: 4px;
}

.tree-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}

.tree-toggle.tree-toggle-open svg {
  transform: rotate(90deg);
}

.tree-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
}

.tree-toggle-spacer {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.tree-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-count {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-faint);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 2px 8px;
}

.tree-row.active .tree-count {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ---------- Category products section ---------- */

.category-products-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dim);
  margin: 0 0 10px;
}

/* ---------- Overview ---------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}

/* A stat card that jumps to / filters another view (Overview, Products,
   Orders). Moved here from an Overview-only rule (2026-09-21) once
   Products and Orders gained their own stat-card-links. */
.stat-card-link { cursor: pointer; transition: border-color .12s, background .12s; }
.stat-card-link:hover, .stat-card-link:focus-visible { border-color: var(--border-light); background: var(--bg-card-hover); outline: none; }

#overview-attention { margin-bottom: 20px; }
.overview-attention-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.overview-attention-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.overview-attention-row:hover, .overview-attention-row:focus-visible { border-color: var(--border-light); background: var(--bg-card-hover); outline: none; }
.overview-attention-count {
  flex-shrink: 0;
  min-width: 28px;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--danger);
  background: var(--danger-bg);
  border-radius: 999px;
  padding: 2px 9px;
}
.overview-attention-label { flex: 1; font-size: 13.5px; }
.overview-attention-arrow { color: var(--text-faint); flex-shrink: 0; }

.stat-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.stat-value-multi {
  font-size: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.overview-section h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dim);
  margin: 0 0 10px;
}

/* ---------- Tables (orders / customers) ---------- */

.table-wrap {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.data-table th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  vertical-align: middle;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover {
  background: var(--bg-card);
}

#orders-tbody tr {
  cursor: pointer;
}

.cell-primary {
  font-weight: 600;
  color: var(--text);
}

.cell-secondary {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}

.cell-muted {
  color: var(--text-faint);
}

.cell-total {
  font-weight: 700;
  white-space: nowrap;
}

/* Status badge */

.status-badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.status-success {
  background: var(--green-bg);
  color: var(--green);
  border-color: rgba(47, 191, 111, 0.4);
}

.status-warning {
  background: var(--amber-bg);
  color: var(--amber);
  border-color: var(--amber-border);
}

.status-danger {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: rgba(255, 91, 95, 0.4);
}

.status-neutral {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-dim);
  border-color: var(--border-light);
}

/* Invoice cell */

.invoice-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.invoice-link {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed var(--border-light);
}

.invoice-link:hover {
  color: var(--red);
  border-color: var(--red);
}

.file-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.file-btn input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.invoice-replace-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-faint);
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--text-faint);
  padding: 0;
}

.invoice-replace-link:hover {
  color: var(--red);
  border-color: var(--red);
}

.invoice-status {
  font-size: 12px;
  color: var(--text-faint);
}

/* ---------- Product detail modal ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
}

.modal-backdrop.hidden {
  display: none !important;
}

.modal-card {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-modal);
  max-width: 560px;
  width: 100%;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.modal-close:hover {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}

.modal-close svg {
  width: 16px;
  height: 16px;
}

.modal-image-wrap {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1 / 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.modal-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.modal-image-fallback {
  color: var(--text-faint);
}

.modal-image-fallback svg {
  width: 64px;
  height: 64px;
}

.modal-product-name {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
  margin: 0;
  color: var(--text);
}

/* ---------- Order detail modal ---------- */
/* Same modal-backdrop/modal-card language as the product modal above, but
   the content is a header + meta block + scrollable line-item list rather
   than one centered image, so the card is wider/taller and left-aligned. */

.modal-card-wide {
  max-width: 640px;
  align-items: stretch;
  text-align: left;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.order-modal-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.order-modal-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-right: 28px; /* keep clear of the absolutely-positioned close button */
}

.order-modal-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}

.order-modal-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.order-modal-meta-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
}

.order-modal-meta-label {
  flex-shrink: 0;
  width: 76px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.order-modal-meta-value {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-weight: 600;
  overflow-wrap: break-word;
}

.order-modal-items-heading {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 20px 0 10px;
}

.order-line-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.order-line-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
}

.order-line-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.order-line-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: break-word;
}

.order-line-item-qty {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}

.order-line-item-end {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.order-line-item-price {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  min-width: 90px;
  text-align: right;
}

.order-sourcing-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.order-sourcing-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
}

.order-sourcing-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: break-word;
}

.order-sourcing-manage {
  font-size: 12px;
  text-align: right;
}

.order-invoice-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

.order-invoice-add-btn {
  margin-top: 8px;
}

/* ---------- Login page ---------- */

.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 340px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-modal);
  padding: 32px 28px 28px;
}

.login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

.login-logo-img {
  height: 40px;
  width: auto;
  display: block;
}

.login-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 14px 0 6px;
}

.login-label:first-of-type {
  margin-top: 0;
}

.login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}

.login-remember input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--red);
  cursor: pointer;
}

.login-submit {
  width: 100%;
  justify-content: center;
  margin-top: 22px;
}

.login-submit + .inline-message {
  margin-top: 14px;
  margin-bottom: 0;
}

/* ---------- Logout ---------- */

.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.logout-link {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.logout-link:hover {
  color: var(--red);
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .app-shell {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    align-items: center;
    padding: 10px 14px;
    gap: 10px;
    overflow-x: auto;
  }

  .sidebar-logo {
    padding: 4px 10px 4px 4px;
  }

  .sidebar-nav {
    flex-direction: row;
    flex: none;
    overflow: visible;
  }

  /* The strip ends with Çıkış yap (2026-10-13, sidebar plan: there was no
     way to log out on a phone); the footer line itself stays hidden. */
  .sidebar-footer {
    flex-direction: row;
    align-items: center;
    margin: 0;
    padding: 0;
  }

  .sidebar-footer > span {
    display: none;
  }

  .sidebar-footer .logout-link {
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dim);
  }

  .main-content {
    padding: 20px 16px 48px;
  }

  .products-layout {
    flex-direction: column;
  }

  .products-tree-panel {
    width: 100%;
    position: static;
  }

  .category-tree-wrap {
    max-height: 320px;
  }
}

@media (max-width: 480px) {
  .view-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .products-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* Store-order fulfilment panel in the order modal */
.order-fulfil {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 12px;
  display: grid;
  gap: 10px;
}
.order-fulfil-row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; }
.order-fulfil-select, .order-fulfil-input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  background: var(--surface-2, rgba(255,255,255,0.04));
  color: inherit;
  font: inherit;
}
.order-fulfil-actions { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }

/* Sidebar group label for the admin views (2026-09-19). Easier to read
   since 2026-10-13 (sidebar plan): #8e8e99 is 5.72:1, the old grey 3.74:1. */
.nav-section-label { margin: 12px 12px 4px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8e8e99; }
/* Menu groups (2026-10-07): the label is a button that folds its items. */
.nav-group-items { display: flex; flex-direction: column; gap: 2px; }
.nav-group-toggle { display: flex; align-items: center; gap: 6px; width: calc(100% - 24px); padding: 4px 0; background: none; border: 0; font-family: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-sm); }
.nav-group-toggle:hover { color: var(--text-dim); }
.nav-group-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.nav-group-chevron { width: 12px; height: 12px; margin-left: auto; transition: transform .15s ease; }
.nav-group.collapsed .nav-group-chevron { transform: rotate(-90deg); }
.nav-group.collapsed .nav-group-items { display: none; }
/* A folded group's heading shows the red count of the waiting items inside
   (2026-10-13, owner approved the sidebar plan; it replaced a 6 px dot).
   nav-groups.js adds the badge numbers and sets .has-count. */
.nav-group-count { display: none; margin-left: 2px; min-width: 18px; height: 16px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.nav-group.collapsed.has-count .nav-group-count { display: inline-block; }
/* The sidebar badge look, here too (2026-10-13): the Değerlendirmeler badge
   has no CSS file of its own. Same rule as inbox.css / payments.css /
   partners.css / returns.css, which keep their copies. */
.nav-item .nav-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.nav-item.active .nav-badge { background: #fff; color: var(--red); }
/* A long label gives way to its badge (2026-10-13): "Değerlendirmeler" plus a
   badge is wider than the 220 px menu, so the word ends in "..." and the badge
   keeps its size and lines up with the others. Not on the phone strip. */
@media (min-width: 861px) {
  .sidebar-nav .nav-item > span[data-i18n] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar-nav .nav-item .nav-badge { flex-shrink: 0; }
}
/* Ayarlar pinned under the list (2026-10-13): always on screen. */
.sidebar-pinned { flex-shrink: 0; display: flex; flex-direction: column; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
/* The list is cut off: a soft fade at its bottom edge, off at the end. */
.sidebar-nav.more-below { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
/* Short windows (a real laptop browser window is about 657 px): 30 px rows
   and a smaller logo, so the menu still fits (2026-10-13). */
@media (min-width: 861px) and (max-height: 740px) {
  .nav-item { padding: 5px 12px; }
  .sidebar-logo { padding-bottom: 12px; }
  .sidebar-logo-img { height: 26px; }
}
/* The phone's one-row menu shows every item: no group labels, nothing
   folded. Kept AFTER the group rules above, which it has to override (it
   sat in the main 860px block before them and lost, 2026-10-08).
   2026-10-13: Ayarlar sits in the strip (the pinned box drops away), no
   bottom fade there; a fade on the strip's right edge while more of it
   is to the right (.more-right, nav-groups.js). */
@media (max-width: 860px) {
  .nav-group,
  .nav-group-items,
  .nav-group.collapsed .nav-group-items { display: contents; }
  .nav-group-toggle { display: none; }
  .sidebar-pinned { display: contents; }
  .sidebar-nav.more-below { -webkit-mask-image: none; mask-image: none; }
  .sidebar.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
}