/* Tex.az Stock — Apple-inspired design system */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --bg: #F2F2F7;
  --bg-elevated: #FFFFFF;
  --text: #1C1C1E;
  --text-secondary: #6E6E73;
  --separator: rgba(60, 60, 67, 0.12);
  --accent: #007AFF;
  --accent-text: #FFFFFF;
  --danger: #FF3B30;
  --success: #34C759;
  --warning: #FF9500;
  --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --radius: 14px;
  --radius-sm: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-elevated: #1C1C1E;
    --text: #F2F2F7;
    --text-secondary: #98989D;
    --separator: rgba(84, 84, 88, 0.4);
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
  }
}

* { box-sizing: border-box; }

/* Without this, elements whose class sets its own `display` (flex, grid, …)
   stay visible when JS sets `.hidden = true` — author CSS beats the
   browser's built-in `[hidden] { display: none }` rule otherwise. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

body {
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

a { color: inherit; text-decoration: none; }

/* Topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--separator);
  padding-top: env(safe-area-inset-top);
}
.topbar-inner {
  max-width: 1152px;
  margin: 0 auto;
  padding: 14px 20px;
}
.topbar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.app-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  /* Pushes to its row's right edge on its own, regardless of what else is
     (or isn't) in that row — see the mobile/desktop split below. */
  margin-left: auto;
}
/* Two copies of the same user/logout block: one sits next to the title on
   narrow screens (where .top-nav is replaced by the bottom tab bar, so
   there's nowhere else to put it), the other sits at the end of the nav
   row from the tablet breakpoint up — sharing that row instead of getting
   its own mostly-empty one above it (the title itself moves into a fixed
   corner box past 1660px, so that row would otherwise render nothing else). */
.topbar-user-desktop { display: none; }
@media (min-width: 640px) {
  .topbar-user-mobile { display: none; }
  .topbar-user-desktop { display: flex; }
}
.topbar-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.topbar-user-logout {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

/* Brand box — replaces the inline .app-title once there's room for the
   sidebar column too, sitting above it in the same left gutter, always
   visible (fixed) alongside the sticky topbar. */
.brand-box {
  display: none;
}
@media (min-width: 1660px) {
  .app-title { display: none; }
  .brand-box {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 20px;
    left: max(16px, calc(50vw - 796px));
    width: 200px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    z-index: 25;
  }
}

/* Top nav — shown instead of the bottom tab bar from the tablet breakpoint up */
.topbar-nav-row {
  display: none;
}
.top-nav {
  display: none;
}
@media (min-width: 640px) {
  .topbar-nav-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
  }
  .top-nav {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    flex: 1;
    min-width: 0;
  }
  .top-nav-link {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: color 0.15s ease, background 0.15s ease;
  }
  .top-nav-link:hover { background: var(--bg); }
  .top-nav-link.active { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
  .top-nav-icon { width: 16px; height: 16px; }
  .tabbar { display: none; }
  body { padding-bottom: 24px; }
}

/* Content */
.page-layout {
  position: relative;
}
.content {
  max-width: 1152px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

/* Sidebar — "Əməliyyatlar" quick-access tiles. Positioned in the gutter to
   the left of the centered .content column via an absolute offset, so it
   never takes width away from .content (which stays exactly as centered as
   if the sidebar didn't exist). Only shown once there's realistically room. */
.sidebar {
  display: none;
}
@media (min-width: 1660px) {
  .sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    top: 20px;
    left: max(16px, calc(50vw - 796px));
    width: 200px;
  }
  .sidebar-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .sidebar-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    padding: 0 4px;
    margin-bottom: 2px;
  }
  .sidebar-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    min-height: 64px;
    background: var(--bg-elevated);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    transition: background 0.15s ease, color 0.15s ease;
  }
  .sidebar-tile-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent); }
  .sidebar-tile.active { background: var(--accent); color: var(--accent-text); }
  .sidebar-tile.active .sidebar-tile-icon { color: var(--accent-text); }
  .sidebar-tile-placeholder {
    min-height: 64px;
    border: 1.5px dashed var(--separator);
    border-radius: var(--radius);
  }
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.page-header-start { justify-content: flex-start; }
.undo-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.undo-bar select {
  max-width: 46vw;
}
.btn-icon-inline {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.page-header h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.live-clock {
  font-variant-numeric: tabular-nums;
}

/* Dashboard top row: date + clock sit together on the left, weather clear
   at the other end — .page-header is already a full-width flex row with
   justify-content: space-between, so its two children (this group and
   .weather-widget) land at opposite edges with the middle open between
   them, same as every other page's title+button page-header. */
.dash-left-group {
  display: flex;
  align-items: center;
  gap: 16px;
}
@media (max-width: 640px) {
  /* The 3-day forecast doesn't fit at phone width even stacked — dropped
     entirely there; today's conditions (icon/temp/city/wind) stay, centered
     as a block instead of sitting left-aligned in a now-simpler card. */
  .weather-forecast {
    display: none;
  }
  .weather-widget {
    width: 100%;
    justify-content: center;
  }
  .weather-info {
    align-items: center;
  }
}
/* The date — first thing in the row (leftmost), two short lines stacked to
   use the row's height instead of its own full-width line further down. */
.dash-date-widget {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.dash-date-weekday {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.dash-date-daymonth {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
}
.analog-clock svg {
  width: 72px;
  height: 72px;
  display: block;
}
.clock-face {
  fill: var(--bg-elevated);
  stroke: var(--separator);
  stroke-width: 1.5;
}
.clock-tick {
  stroke: var(--text-secondary);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.clock-hand {
  stroke: var(--text);
  stroke-linecap: round;
}
.clock-hand-hour { stroke-width: 4; }
.clock-hand-minute { stroke-width: 3; }
.clock-hand-second { stroke: var(--danger); stroke-width: 1.5; }
.clock-center { fill: var(--text); }
/* Weather — current conditions plus a 3-day strip, filling the wide empty
   space next to the clock instead of staying a small square. Still one
   fixed-height card so it lines up with the clock beside it. */
.weather-widget {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 72px;
  padding: 0 18px;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.weather-now {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.weather-icon {
  font-size: 32px;
  line-height: 1;
}
.weather-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.weather-temp {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.weather-meta {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.weather-forecast {
  display: flex;
  gap: 14px;
  padding-left: 18px;
  border-left: 1px solid var(--separator);
}
.weather-forecast-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.weather-forecast-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.weather-forecast-icon {
  font-size: 18px;
  line-height: 1.3;
}
.weather-forecast-temp {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Flash messages — a floating top-right toast (macOS Notification Center
   style), not a document-flow banner: it used to sit between the topbar and
   the page content, so the whole page visibly jumped up the moment it
   auto-dismissed and its space collapsed. position: fixed removes it from
   flow entirely, so appearing/disappearing never moves anything else. */
.flash {
  position: fixed;
  top: calc(70px + env(safe-area-inset-top));
  right: 16px;
  z-index: 60;
  max-width: min(360px, calc(100vw - 32px));
  margin: 0;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-modal, 0 12px 32px rgba(0, 0, 0, 0.18));
  animation: flash-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.flash.flash-leaving {
  animation: flash-out 0.3s ease forwards;
}
@keyframes flash-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes flash-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(24px); }
}
/* In-flow validation banners (e.g. the bulk-add grid's error summary) —
   these stay put until the user fixes the form, unlike the toast above, so
   they need the old block-level, in-document-flow layout, not position:
   fixed. Only borrows flash-success/flash-error for color. */
.form-banner {
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
  .flash { animation: none; }
  .flash.flash-leaving { animation: none; opacity: 0; }
}
.flash-success { background: color-mix(in srgb, var(--success) 15%, var(--bg-elevated)); color: var(--success); }
.flash-error   { background: color-mix(in srgb, var(--danger) 15%, var(--bg-elevated)); color: var(--danger); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); opacity: 0.85; }
.btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-primary { background: var(--accent); color: var(--accent-text); }
.btn-secondary { background: var(--bg-elevated); color: var(--text); box-shadow: var(--shadow); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; }

/* Icon-only row actions (edit/delete) — kept visually quiet so a labeled
   action button like "Sat" stands out as the primary thing to tap. */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-icon:active { transform: scale(0.93); opacity: 0.85; }
.btn-icon svg { width: 17px; height: 17px; }
.btn-icon-edit {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  box-shadow: var(--shadow);
}
.btn-icon-delete {
  background: color-mix(in srgb, var(--danger) 12%, var(--bg-elevated));
  color: var(--danger);
}
.btn-icon:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.data-table .checkbox-col {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}
.data-table .checkbox-col input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Search bar */
.search-bar {
  margin-bottom: 16px;
}
.search-bar input {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  font-size: 15px;
  font-family: var(--font);
  color: var(--text);
}
.search-bar input::placeholder { color: var(--text-secondary); }

/* Card list */
.card-list {
  background: var(--bg-elevated);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 0.5px solid var(--separator);
}
.card-row:last-child { border-bottom: none; }
.card-row-main { flex: 1; min-width: 0; }
.card-row-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-row, .incoming-row, .ls-row { cursor: pointer; }
.ls-row .ls-select {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
}
/* Product rows: a middle "stats" column (Alış/Satış/Say) that sits at the
   row's true visual center, unaffected by how wide the title or the action
   buttons are — a 3-column grid with matching outer columns does that,
   where a plain flex layout (main:1 pushing everything right) can't. */
.product-row {
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "main stats actions";
  align-items: center;
  gap: 12px;
}
.product-row .card-row-main-wrap {
  grid-area: main;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.product-row .card-row-main-wrap .card-row-main { min-width: 0; }
.product-select {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.product-row .card-row-stats { grid-area: stats; justify-self: center; }
.product-row .card-row-actions { grid-area: actions; justify-self: end; }
/* Long product names wrap to 2 lines instead of truncating — app.js then
   hides that row's sub-line (SKU/category) so every row still occupies the
   same height regardless of whether its title wrapped. */
.product-row .card-row-title {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.card-row-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.card-row-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated));
  color: var(--accent);
  white-space: nowrap;
}
.card-row-badge-danger {
  background: color-mix(in srgb, var(--danger) 15%, var(--bg-elevated));
  color: var(--danger);
}
.card-row-badge-warning {
  background: color-mix(in srgb, var(--warning) 18%, var(--bg-elevated));
  color: var(--warning);
}
.card-row-stats {
  display: flex;
  gap: 20px;
  flex-shrink: 0;
}
.card-row-stat {
  min-width: 60px;
  text-align: center;
}
.card-row-stat-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.card-row-stat-value {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.stat-danger { color: var(--danger); }
.stat-warning { color: var(--warning); }
.card-row-stat-hint {
  font-size: 11px;
  font-weight: 600;
  color: var(--warning);
  white-space: nowrap;
}
@media (max-width: 639px) {
  .product-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "main actions"
      "stats stats";
  }
  .product-row .card-row-stats {
    justify-self: stretch;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 0.5px solid var(--separator);
  }
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
/* Summarizes whatever's currently filtered, in plain text — stays visible
   in print/PDF even though .filter-row (the actual controls) is hidden
   there, so a printed report still says what it's scoped to. */
.filter-summary {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: none;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.filter-chip.active {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: none;
}

.filter-row-selects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
/* Məhsul bazası's filter row has no sibling next to .filter-row-selects
   (unlike products.php's, which also has .stock-filters) — .filter-row-
   selects only shrinks to fit its own content there, so the lock button's
   margin-left: auto has no slack to push into. Scoped to this one page's
   row (by id) rather than changing the shared class everywhere. */
#pd-filter-row .filter-row-selects {
  flex: 1;
}
/* A touch more space before a new filter cluster starts (e.g. Təchizatçı
   after the linked Platform/Vəziyyəti pair) — just enough to read as a
   separate group without a full visual break. */
.pd-filter-group-start {
  margin-left: 8px;
}
.stock-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.filter-select {
  padding: 7px 12px;
  border: none;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.filter-select:disabled {
  color: var(--text-secondary);
  cursor: not-allowed;
  opacity: 0.6;
}
.filter-select-fixed {
  flex-shrink: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.checkbox-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: var(--shadow);
  cursor: pointer;
  white-space: nowrap;
}
.checkbox-filter input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* Məhsul bazası — archived rows stay visible (that's the point) but sit
   back visually. The system-status select is a colored pill: green while
   Aktiv, gray once switched to Arxiv. */
#pd-table tr.pd-archived { opacity: 0.45; }
/* Selection checkbox column stays put while the wide table scrolls
   horizontally — needs its own opaque background so scrolled-under columns
   don't show through, and a higher z-index than the header's (still just
   the topmost layer) so it stays above the scrolling body too. */
#pd-table th:first-child,
#pd-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg-elevated);
}
#pd-table thead th:first-child {
  z-index: 2;
}
#pd-table tbody tr:hover td:first-child {
  background: var(--bg);
}
/* Edit/delete icons (last column) frozen the same way, on the right edge. */
#pd-table th:last-child,
#pd-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--bg-elevated);
}
#pd-table thead th:last-child {
  z-index: 2;
}
#pd-table tbody tr:hover td:last-child {
  background: var(--bg);
}
.pd-active-form { display: inline-flex; margin: 0; }
.pd-active-select {
  border: none;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
}
.pd-active-select.pd-status-active {
  background: color-mix(in srgb, var(--success) 15%, var(--bg-elevated));
  color: var(--success);
}
.pd-active-select.pd-status-archived {
  background: color-mix(in srgb, var(--text-secondary) 15%, var(--bg-elevated));
  color: var(--text-secondary);
}

.pd-row-select, #pd-select-all {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.pd-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.pd-bulk-bar #pd-bulk-status-form {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pd-bulk-bar #pd-bulk-delete-form {
  margin-left: auto;
}

/* "Göstər" column picker — a button that opens a floating checklist panel,
   one checkbox per toggleable #pd-table column. */
.pd-columns-dropdown {
  position: relative;
}
.pd-columns-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 2px 12px;
  width: max-content;
  max-width: calc(100vw - 32px);
  max-height: 70vh;
  overflow-y: auto;
  padding: 8px;
  background: var(--bg-elevated);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.pd-columns-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
}
.pd-columns-item:hover {
  background: var(--bg);
}
.pd-columns-item input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
}

/* Excel-style inline cell editor (Satış/Nağd satış/İdeal/Xəbərdarlıq/URL) —
   locked by default (plain read-only text, no click affordance at all);
   the lock button reveals the click-to-edit behavior below. */
.pd-lock-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.pd-lock-btn[aria-pressed="false"] {
  background: color-mix(in srgb, var(--danger) 18%, var(--bg-elevated));
  color: var(--danger);
}
#pd-table.pd-unlocked .pd-editable {
  cursor: pointer;
  border-radius: 6px;
}
#pd-table.pd-unlocked .pd-editable:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.pd-cell-input {
  display: block;
  width: 100%;
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 13px;
  font-family: var(--font);
  background: var(--bg-elevated);
  color: var(--text);
}

.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-secondary);
}
.empty-state p { margin: 0 0 16px; font-size: 15px; }

/* Forms */
.form-card {
  background: var(--bg-elevated);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px 16px;
  margin-bottom: 20px;
}
.field {
  padding: 12px 0;
  border-bottom: 0.5px solid var(--separator);
}
.field:last-child { border-bottom: none; }
.field-row {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 0.5px solid var(--separator);
}
.field-row:last-child { border-bottom: none; }
.field-row .field {
  flex: 1;
  min-width: 0;
  padding: 0;
  border-bottom: none;
}
.field-row .field-sku {
  flex: 0 0 10%;
}
.field-row .field-supplier {
  flex: 0 0 30%;
}
@media (max-width: 420px) {
  .field-row { flex-direction: column; gap: 12px; }
}
/* "+ Yeni müştəri" toggle sitting right next to a customer <select> —
   Sat/Rezerv et modals, so a customer who isn't in the list yet doesn't
   need a trip to Müştərilər and back. */
.field-with-add {
  display: flex;
  align-items: center;
  gap: 8px;
}
.field-with-add select {
  flex: 1;
}
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 16px;
  font-family: var(--font);
  color: var(--text);
  padding: 0;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
}
.field-readonly {
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
}
.field-readonly.stat-danger { color: var(--danger); }
.field-readonly.stat-warning { color: var(--warning); }
.view-only .field-readonly {
  cursor: default;
  user-select: none;
}
.field-link {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  word-break: break-all;
}
.field-link:hover { text-decoration: underline; }
.field-hint {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.field-order-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.field-error {
  font-size: 12px;
  color: var(--danger);
  margin-top: 4px;
}
.field.has-error input,
.field.has-error select { color: var(--danger); }

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.form-actions .btn { flex: 1; }

/* Dashboard */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--bg-elevated);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 14px;
  text-align: center;
}
.stat-card .stat-value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.stat-card .stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}
@media (max-width: 420px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-card { padding: 12px 8px; }
  .stat-card .stat-value { font-size: 20px; }
}
.stat-card .stat-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Dashboard section headers — a small title, optionally with a "hamısına
   bax" link flush right. */
.dash-section {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 28px 0 10px;
}
.dash-section h2 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.dash-section:first-of-type {
  margin-top: 0;
}
.dash-see-all {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.dash-see-all:hover {
  text-decoration: underline;
}
.dash-date {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 4px 0 20px;
}

/* Dashboard: 30-day sales bar chart — the whole thing is one big link
   through to Satış tarixçəsi's last-month view, so it hovers/dims as a
   unit while each bar still shows its own day/amount via its title tooltip. */
.dash-chart-link {
  display: block;
}
.dash-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
  padding: 14px 16px 0;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 24px;
  transition: opacity 0.15s ease;
}
.dash-chart-link:hover .dash-chart-bars {
  opacity: 0.85;
}
.dash-chart-bar {
  flex: 1;
  min-height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
}

/* Category tree rows */
.card-row-child {
  padding-left: 36px;
}
.card-row-child .card-row-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
}
.category-toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 0;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  -webkit-tap-highlight-color: transparent;
}
.category-toggle:active { background: var(--bg); }
.category-toggle-spacer {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}
.category-toggle-icon {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}
.category-toggle[aria-expanded="true"] .category-toggle-icon {
  transform: rotate(90deg);
}

/* Tab bar */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--separator);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease;
}
.tab.active { color: var(--accent); }
.tab-icon { width: 24px; height: 24px; }

/* Sell modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  padding: 0;
}
.modal {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-elevated);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
}
.modal-wide { max-width: 720px; }
.modal-2x { max-width: 960px; }
/* At this width the SKU column can afford a bit more than the 10% it gets
   on the full create/edit page, and the name column benefits even more. */
#product-view-modal-backdrop .field-row .field-sku { flex: 0 0 16%; }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.modal-header h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.modal-close {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
/* Sell modal — multi-item cart */
.sell-add-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.sell-add-row select {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  font-size: 14px;
  font-family: var(--font);
  color: var(--text);
}
/* The picker is the cart table's always-last row (a <tr>), not the
   standalone flex bar .sell-add-row normally is — undo the flex layout so
   it behaves as a normal row, and let its <select> fill the row's single
   merged cell. */
.cart-table tr.sell-add-row {
  display: table-row;
}
.cart-table tr.sell-add-row td {
  padding: 8px 10px;
}
.cart-table tr.sell-add-row select {
  width: 100%;
}
/* The PO modals' product picker has no separate "add" button anymore —
   picking a product adds it directly — so it needs to visually read as an
   action in its own right, not just another data field. */
#po-add-product,
#edit-po-add-product {
  border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-elevated));
  box-shadow: none;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}
.sell-cart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.sell-cart-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.sell-cart-item-info { flex: 1; min-width: 0; }
.sell-cart-item-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sell-cart-item-meta { font-size: 12px; color: var(--text-secondary); }
.sell-cart-item-fields {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.sell-cart-item-fields input {
  padding: 6px 4px;
  border: none;
  border-radius: 8px;
  background: var(--bg);
  font-size: 13px;
  font-family: var(--font);
  color: var(--text);
  text-align: center;
}
.sell-cart-qty { width: 44px; }
.sell-cart-item-fields span { font-size: 12px; color: var(--text-secondary); }
.sell-cart-remove {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--danger) 12%, var(--bg-elevated));
  color: var(--danger);
  cursor: pointer;
}
.sell-cart-remove svg { width: 15px; height: 15px; }
.sell-cart-empty {
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 16px;
  margin-bottom: 12px;
}

/* PO / low-stock order carts as a real table — sortable SKU/Ad columns, a
   fixed height (roughly 10 rows) so the modal's size stays constant
   whether it holds 1 line or 15, with only this middle section scrolling
   once it overflows. */
.cart-table-wrap {
  height: 460px;
  overflow-y: auto;
  margin-bottom: 12px;
}
.cart-table {
  font-size: 13px;
}
.cart-table th,
.cart-table td {
  padding: 8px 10px;
}
.cart-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-elevated);
  z-index: 1;
}
/* Only SKU/Ad are actually sortable — the others shouldn't look clickable. */
.cart-table th:not([data-sort]) {
  cursor: default;
}
.cart-table th:not([data-sort])::after {
  display: none;
}
.cart-table .text-center { text-align: center; }
.cart-table .cart-qty-input,
.cart-table .cart-price-input {
  width: 56px;
  padding: 6px 4px;
  border: none;
  border-radius: 8px;
  background: var(--bg);
  font-size: 13px;
  font-family: var(--font);
  color: var(--text);
  text-align: right;
}
.cart-table .cart-remove-cell {
  width: 1%;
  white-space: nowrap;
}
.cart-table .cart-remove-cell .sell-cart-remove {
  width: 26px;
  height: 26px;
  margin-left: auto;
}
.sell-total {
  text-align: right;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}
.modal .field textarea {
  resize: vertical;
  font-size: 16px;
}

@media (min-width: 640px) {
  .modal-backdrop {
    align-items: center;
    padding: 20px;
  }
  .modal {
    border-radius: var(--radius);
    max-height: 85vh;
  }
}

/* Sortable data table — sales history */
.table-wrap {
  overflow-x: auto;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}
.data-table th,
.data-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 0.5px solid var(--separator);
}
.data-table tbody tr:last-child td {
  border-bottom: none;
}
.data-table tbody tr:hover {
  background: var(--bg);
}
.data-table tfoot td {
  border-bottom: none;
  border-top: 1.5px solid var(--separator);
  font-weight: 700;
  background: var(--bg);
}
.data-table .text-right {
  text-align: right;
}
.data-table th {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  position: relative;
}
.data-table th:hover {
  color: var(--text);
}
.data-table th::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 5px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  opacity: 0.3;
}
.data-table th.sorted-asc::after {
  opacity: 1;
  border-bottom: 5px solid var(--accent);
}
.data-table th.sorted-desc::after {
  opacity: 1;
  border-top: 5px solid var(--accent);
}
.profit-positive { color: var(--success); font-weight: 600; }
.profit-negative { color: var(--danger); font-weight: 600; }

.page-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Bulk-add grid — dense, Excel-like cells rather than the app's usual
   card/pill input chrome, since this is meant for fast paste-and-fill entry. */
.bulk-hint {
  margin-bottom: 16px;
}
.bulk-table {
  table-layout: fixed;
}
.bulk-table th,
.bulk-table td {
  padding: 4px;
}
.bulk-table th {
  white-space: normal;
  line-height: 1.3;
  vertical-align: middle;
  text-align: left;
  padding: 6px;
  font-size: 10px;
  cursor: default;
}
.bulk-table th::after {
  display: none;
}
.bulk-table input,
.bulk-table select {
  width: 100%;
  min-width: 50px;
  border: 1px solid var(--separator);
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font);
  padding: 6px 8px;
}
/* Ad / Kateqoriya / Təchizatçı / URL columns need more room than a bare
   number field. */
.bulk-table td:nth-child(2) input,
.bulk-table td:nth-child(3) select,
.bulk-table td:nth-child(9) select,
.bulk-table td:nth-child(10) input {
  min-width: 130px;
}
.bulk-table input:focus,
.bulk-table select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.bulk-table input.cell-error,
.bulk-table select.cell-error {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--bg-elevated));
}
.bulk-add-row-actions {
  margin-top: 0;
  margin-bottom: 16px;
}

/* Widen the topbar/flash bars and .content to the right by the sidebar's
   own footprint (200px tile + 20px gap) once the sidebar is showing, so the
   extra room it takes on the left is balanced out. Same left edge as
   always (still aligned with the nav), just more room on the right for the
   tables/lists to breathe. Placed last so it wins over the base
   .topbar-inner/.content rules at equal specificity. (.flash is a fixed
   top-right toast now, not part of this centered-content flow.) */
@media (min-width: 1660px) {
  .topbar-inner,
  .content {
    max-width: 1372px;
    margin-left: max(16px, calc(50vw - 576px));
    margin-right: 0;
  }
}

/* Print — used by the report pages' "PDF-ə çıxar" button (window.print()).
   Hides all app chrome and lets the browser's own print dialog save it as a
   PDF; no server-side PDF library needed. */
@page {
  size: A4 landscape;
  margin: 12mm;
}
@media print {
  .topbar, .tabbar, .sidebar, .brand-box, .filter-row, .flash,
  .page-header-actions, .search-bar, .checkbox-col,
  #inventory-print-btn, #profit-print-btn, #sales-history-print-btn {
    display: none !important;
  }
  body { padding-bottom: 0; background: #fff; }
  .content { max-width: 100%; margin: 0; padding: 0; }
  .table-wrap { box-shadow: none; border-radius: 0; overflow: visible; }
  .data-table { font-size: 11px; }
  .data-table th, .data-table td { padding: 6px 8px; }
}

/* Login / forgot-password / reset-password — standalone pages outside the
   sidebar+topbar app shell, just a centered card on the app background. */
.auth-body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 28px;
}
.auth-brand {
  display: flex;
  flex-direction: column;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.auth-brand span:last-child {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}
.auth-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 20px;
}
.auth-actions {
  margin-top: 20px;
}
.auth-actions .btn {
  width: 100%;
}
.auth-link {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
  color: var(--accent);
}
.auth-hint {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.4;
}