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

/* ====== Tokens and base ====== */

: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;
}

* { box-sizing: border-box; }

/* Author rules that set `display` would otherwise beat the UA's
   [hidden] { display: none }. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
/* iOS Safari text autosizing enlarged text in wide scrolling tables;
   100% keeps the CSS sizes (user zoom still works). */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

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

/* Print ("PDF-ə çıxar" = window.print()): hides the app chrome; the browser's
   dialog saves the PDF. */
@page {
  size: A4 landscape;
  margin: 12mm;
}
.auth-hint {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.4;
}

/* A long code string in a hint (Google Contacts redirect URI) breaks instead of running off a phone screen. */
.auth-hint code { word-break: break-all; }

@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);
  }
}
@media (min-width: 640px) {
  body { padding-bottom: 24px; }
}

/* ====== Shell: layout, topbar, navigation, sidebar, page header ====== */

.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;
}
/* A page's own "+" beside its title in the topbar ($topbarAction,
   header.php); ≥1360px the sidebar holds it. */
.topbar-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-block: -4px; /* the topbar stays exactly as tall as with the title alone */
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  flex-shrink: 0;
}
.topbar-action svg { width: 17px; height: 17px; }
.topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}
/* Two copies of the user/logout block: beside the title on phones (the tab
   bar replaces .top-nav), at the end of the nav row from 640px. */
.topbar-user-desktop { display: none; }
.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;
}
/* Çıxış is a CSRF-checked POST so another site can't log you out. */
.topbar-logout-form { display: inline; margin: 0; }
button.topbar-user-logout { padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; }

/* Brand box replaces .app-title from 1360px, fixed in the left gutter above
   the sidebar; same two tiers as .sidebar (1360px compact, 1740px roomier). */
.brand-box {
  display: none;
}

/* Top nav replaces the bottom tab bar from the tablet breakpoint up. */
.topbar-nav-row {
  display: none;
}
.top-nav {
  display: none;
}

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

/* Sidebar: shortcut tiles for pages not in the top nav; compact from 1360px,
   roomier from 1740px. Sits in the gutter, never taking .content's width. */
.sidebar {
  display: none;
}

/* Sistem sub-pages: one click back to the Sistem hub. */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.breadcrumb a {
  color: var(--accent);
  text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.page-header h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.page-header-count {
  font-size: 0.65em;
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: normal;
}

.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; }

.page-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* "Son yoxlama: …" before a hub's Yenilə button. */
.page-header-note { align-self: center; font-size: 13px; color: var(--text-secondary); }
@media (min-width: 1360px) {
  .topbar-action { display: none; }
  .app-title { display: none; }
  .brand-box {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 28px;
    left: 16px;
    width: 170px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    z-index: 25;
  }
  .sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Fixed so it stays on screen; top = the topbar's real height (measured in
       core.js) + 36px. */
    position: fixed;
    top: calc(var(--topbar-h, 70px) + 36px);
    left: 16px;
    /* +8px: the scroll box's 4px side padding (border-box) keeps tiles at 170px. */
    width: 178px;
    /* Scrolls on a screen shorter than the sidebar; the padding keeps tile
       shadows from being clipped. */
    max-height: calc(100vh - var(--topbar-h, 70px) - 36px);
    overflow-y: auto;
    padding: 2px 4px 16px;
    margin: -2px -4px 0;
    scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .sidebar-divider {
    height: 1px;
    /* An empty flex item: a sidebar taller than the screen squeezed it to 0. */
    flex-shrink: 0;
    background: var(--separator);
    margin: 0 4px;
  }
  .sidebar-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 10px 6px;
    /* Fixed, not min: some labels wrap to 2 lines and others don't; a fixed
       height keeps tiles identical across groups. */
    height: 64px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
    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); }
  /* Spans both columns of its 1-tile group, as wide as a 2-tile group;
     icon beside the label. */
  .sidebar-tile-wide {
    grid-column: 1 / -1;
    flex-direction: row;
    font-size: 13px;
  }
  /* Maliyyə: row 1 Əməliyyatlar | + | Kassa qalığı at 40/20/40; row 2 three
     equal slots. */
  .sidebar-group-finance { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr); }
  .sidebar-group-finance .sidebar-tile { padding-left: 2px; padding-right: 2px; font-size: 9.5px; }
  .sidebar-tile-plus { padding: 0; }
  /* Kanallar: the hub as a small icon, then Tap.az and Birmarket. */
  .sidebar-group-channels { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 2fr); }
  .sidebar-tile-logo { width: 20px; height: 20px; flex-shrink: 0; object-fit: contain; border-radius: 5px; }
  /* Tap.az (N): sellable products whose ad expired. Birmarket: red outline while something sold out
     is still on sale there. Information only — the tile still opens the hub. */
  .sidebar-tile-count { color: var(--warning); }
  .sidebar-tile-alarm { box-shadow: inset 0 0 0 2px var(--danger), var(--shadow); }
  .sidebar-group-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sidebar-group-3 .sidebar-tile { padding-left: 1px; padding-right: 1px; font-size: 9px; letter-spacing: -0.1px; }

  /* Compact tier: .content shifts right by the sidebar's footprint
   (16 + 170 + 16 = 202px). Keep the breakpoint in sync with .sidebar/.brand-box. */
  .topbar-inner,
  .content {
    max-width: none;
    margin-left: 202px;
    margin-right: 16px;
  }

  /* Lists end on the sidebar buttons' line (core.js applyScrollFrames); when
   they all fit, they end the page itself — the usual bottom padding below
   them would only add a page scroll. */
  body.frames-aligned,
  body.frames-aligned .content { padding-bottom: 0; }
}
@media (min-width: 640px) {
  .topbar-user-mobile { display: none; }
  .topbar-user-desktop { display: flex; }
  .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; }
  /* Must come after the base .tabbar rule: equal specificity, source order wins. */
  .tabbar { display: none; }
}
@media (min-width: 1740px) {
  .brand-box {
    /* Fixed box vs. the in-flow nav row: offset calculated to center on the nav
       text (topbar padding 14 + row margin 10 + half the line-height difference). */
    top: 28px;
    left: max(16px, calc(50vw - 852px));
    width: 260px;
    font-size: 20px;
  }
  /* Tighter gaps so the sidebar (with Maliyyə) fits a laptop screen's height. */
  .sidebar {
    gap: 11px;
    top: calc(var(--topbar-h, 70px) + 30px);
    left: max(16px, calc(50vw - 852px));
    width: 268px;
    max-height: calc(100vh - var(--topbar-h, 70px) - 30px);
  }
  .sidebar-group {
    gap: 8px;
  }
  .sidebar-tile {
    gap: 8px;
    padding: 14px 8px;
    height: 90px;
    font-size: 13px;
    line-height: 1.25;
  }
  .sidebar-tile-icon { width: 24px; height: 24px; }
  .sidebar-tile.active .sidebar-tile-icon { color: var(--accent-text); }
  .sidebar-group-finance .sidebar-tile, .sidebar-group-3 .sidebar-tile, .sidebar-group-channels .sidebar-tile { font-size: 12px; }
  /* ≥1740px: topbar and .content clear the sidebar (260 + 16px); placed last to win
   at equal specificity. Keep in sync with .sidebar/.brand-box. margin-right mirrors
   the sidebar's 852px offset so both gutters match (width stays ~1428px). */
  .topbar-inner,
  .content {
    max-width: none;
    margin-left: max(16px, calc(50vw - 576px));
    margin-right: max(16px, calc(50vw - 852px));
  }
}
@media (max-width: 1359px) {
  /* Below 1360px the topbar's .app-title already shows the title;
   .page-header-section opts out (pages with several headers, e.g. backup.php). */
  .page-header:not(.page-header-section) h1 { display: none; }
  /* With the h1 gone, an otherwise empty header's margin would double the gap
     under the topbar. */
  .page-header:not(.page-header-section):not(:has(> :not(h1))) { display: none; }
  /* The gap under the topbar matches the 18px between the blocks below it. */
  .content { padding-top: 18px; }
}

/* ====== Flash, alarm banners, undo ====== */

.undo-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.undo-bar select {
  max-width: 46vw;
}

/* Flash: a fixed top-right toast, out of flow so showing/dismissing it never
   shifts the page. */
.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); }
}
.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); }

/* Out-of-stock alarm: Birmarket still Aktiv with nothing to sell. Static, not a
   toast — stays until fixed (Dashboard, Birmarket hub, Birmarket > Status). */
.alarm-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 20px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--danger) 12%, var(--bg-elevated));
  color: var(--danger);
  font-size: 14px;
  line-height: 1.45;
  text-decoration: none;
}
.alarm-banner svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}
.alarm-banner strong { font-weight: 700; }
a.alarm-banner:hover { background: color-mix(in srgb, var(--danger) 18%, var(--bg-elevated)); }
/* Orange variant — a payment due in 1–2 days (partials/finance_alarm.php). */
.alarm-banner-warning { background: color-mix(in srgb, var(--warning) 14%, var(--bg-elevated)); color: color-mix(in srgb, var(--warning) 70%, var(--text)); }
a.alarm-banner-warning:hover { background: color-mix(in srgb, var(--warning) 20%, var(--bg-elevated)); }

/* Dashboard "Növbəti ödəniş": calm at 3–4 days; "Ödə ›" at the end. */
.alarm-banner-info { background: color-mix(in srgb, var(--accent) 9%, var(--bg-elevated)); color: var(--text); }
.alarm-banner-info svg { color: var(--accent); }
a.alarm-banner-info:hover { background: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated)); }
.alarm-banner-action { margin-left: auto; padding-left: 12px; font-weight: 600; white-space: nowrap; }
.alarm-banner-info .alarm-banner-action { color: var(--accent); }
/* Ana səhifə's banners: two per row, an odd count puts the first one full width; one per row
   on a phone. */
.alarm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.alarm-grid:not(:has(.alarm-banner)) { display: none; }
.alarm-grid > .alarm-banner { margin: 0; }
.alarm-grid > .alarm-banner:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
@media (max-width: 639px) {
  .alarm-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .flash { animation: none; }
  .flash.flash-leaving { animation: none; opacity: 0; }
}

/* ====== Buttons ====== */

.btn-icon-inline {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.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; }

/* Icon-only row actions stay quiet so a labeled action like "Sat" stands out. */
.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-copy {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  box-shadow: var(--shadow);
}
/* Stok düzəlişi trigger: same quiet look as .btn-icon-edit (a bare .btn-icon
   has no background of its own). */
.btn-icon-adjust {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  box-shadow: var(--shadow);
}
/* Same star either way (customers.php): outline normally, solid accent once
   favorited. */
.btn-icon-favorite {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  box-shadow: var(--shadow);
}
.btn-icon-favorite svg { fill: none; }
.btn-icon-favorite.is-favorite {
  color: var(--accent);
}
.btn-icon-favorite.is-favorite svg { fill: currentColor; }
.btn-icon:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ====== Filters and pickers ====== */

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
/* Plain-text summary of the active filters; stays in print/PDF where the controls
   are hidden. min-height reserves its line so toggling a filter shifts nothing;
   hidden on phones (no print path, the selects already show it). */
.filter-summary {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  min-height: 18px;
  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;
}
.filter-selected-count {
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
}
/* Room for a 2-digit count so the buttons after it don't shift as it changes. */
.filter-selected-count #product-selected-count {
  display: inline-block;
  min-width: 2ch;
  font-weight: 600;
  color: var(--text);
}
.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;
}
/* Multi-select checkbox filter dropdown (wireMultiSelectFilter, core.js). */
.ms-filter {
  position: relative;
}
.ms-filter-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg, var(--shadow));
  padding: 6px;
}
.ms-filter-panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.ms-filter-panel label:hover {
  background: var(--bg);
}
.ms-filter-panel input[type="checkbox"] {
  flex-shrink: 0;
}
.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;
}

/* Ayarlar › İnteqrasiyalar › Birmarket / Tap.az: the cron hours as chips (.field label would make
   them blocks). */
.checker-hours {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}
.checker-hours .checkbox-filter {
  display: inline-flex;
  margin: 0;
  font-size: 13px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Search-and-pick sheet for long selects (wireCustomerPicker/wireProductPicker,
   core.js): the <select> stays as the real form field but is always hidden;
   .picker-trigger looks like .field select. */
select.has-picker {
  display: none;
}
.picker-trigger {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: none;
  background: transparent;
  padding: 0;
  font-size: 16px;
  font-family: var(--font);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.picker-trigger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.picker-trigger-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-secondary);
}
/* Opens above an already-open modal (higher z-index); search stays pinned while
   the list scrolls. flex-start + fixed padding-top keep the search box still as
   results change. Desktop: no backdrop, placed by positionPickerPanel() (core.js). */
.picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: max(40px, 10vh);
  background: rgba(0, 0, 0, 0.4);
}
.picker-overlay[hidden] { display: none; }
.picker-panel {
  width: 100%;
  max-width: 480px;
  /* Safety cap only: .picker-list's max-height (~10 rows) bounds the panel. */
  max-height: 90vh;
  /* dvh for the mobile address bar (see .modal); vh is the fallback. */
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.picker-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 12px;
  padding-top: calc(16px + env(safe-area-inset-top));
  border-bottom: 0.5px solid var(--separator);
}
.picker-search {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--bg);
  font-size: 16px;
  font-family: var(--font);
  color: var(--text);
}
.picker-close {
  flex-shrink: 0;
  border: none;
  background: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  cursor: pointer;
}
/* ~10 rows (~48px each) before the list scrolls; this sets the panel's height. */
.picker-list {
  flex: 1;
  max-height: 480px;
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom);
}
.picker-row {
  display: block;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 14px 16px;
  font-size: 15px;
  font-family: var(--font);
  color: var(--text);
  border-bottom: 0.5px solid var(--separator);
  cursor: pointer;
}
.picker-row:active { background: var(--bg); }
.picker-row.picker-empty { color: var(--text-secondary); cursor: default; }
/* Sat/Rezerv et/Yeni sifariş product rows: a qty badge before the name
   (wireProductPicker()), so out-of-stock items still show up; PO rows don't get it. */
.picker-row-with-qty {
  display: flex;
  align-items: center;
  gap: 10px;
}
.picker-row-qty {
  flex-shrink: 0;
  min-width: 24px;
  text-align: center;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}
.picker-row-name {
  flex: 0 1 auto; /* only as wide as its text, so a trailing star sits right after it */
  min-width: 0;
}
.picker-row-star {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-left: -4px; /* the row's 10px gap is too loose for a mark on the name */
  fill: var(--text);
}
.picker-row.is-out-of-stock {
  opacity: 0.4;
  cursor: not-allowed;
}
@media (max-width: 639px) {
  .filter-summary {
    display: none;
  }
}
@media (min-width: 640px) {
  .picker-overlay {
    background: transparent;
  }
}

/* ====== Card lists, stats, empty states ====== */

.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;
}
.card-row-docs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 10px;
}
.card-row-doc-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.card-row-doc-link:hover { text-decoration: underline; }
.card-row-doc-link:not(:last-child)::after {
  content: '·';
  margin-left: 10px;
  color: var(--text-secondary);
  font-weight: 400;
}
.card-row-thumb {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-row-thumb-placeholder {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
  opacity: 0.5;
}
.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;
}

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

/* Dashboard */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
/* Report shortcuts for phones/tablets; hidden ≥1360px where the sidebar has
   them. Own top margin (no section heading above). */
.stat-grid-secondary {
  margin-top: 28px;
}
/* Icon + single-line label (same icons as the sidebar tiles); labels are
   picked short enough for nowrap. */
.stat-card-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Shared min-height: an empty placeholder tile's row would collapse shorter. */
  min-height: 54px;
}
.stat-card-link span {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.stat-card-link-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--accent);
}
.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;
}
.stat-card .stat-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}
/* Title-first cards: a bold name, then up to two info lines; a long title
   wraps to 2 lines on purpose. */
.stat-card-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.stat-card-line {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* 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);
}

/* Two lists side by side (Stokda var | Stokda yoxdur); stacks on narrow screens. */
.split-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.split-column { min-width: 0; }
.split-column > .dash-section:first-child { margin-top: 0; }
/* Dashboard (<1360px, with .stat-grid-secondary): the admin's way into Maliyyə
   on a phone. Six tiles: 3-up on a tablet, 2-up on a phone, so rows stay even. */
.stat-grid-secondary.stat-grid-finance { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1360px) {
  /* ≥1360px the list scrolls inside itself (max-height from core.js
   applyScrollFrames()) instead of the page under the fixed shell. */
  .card-list {
    overflow-x: hidden;
    overflow-y: auto;
  }
  .stat-grid-secondary { display: none; }
  /* ≥1360px (where applyScrollFrames() caps lists): both columns stretch to the
   taller one so the boxes end on one line. Not below: the long list isn't capped
   there, and the short one would become a huge empty box. */
  .split-columns { align-items: stretch; }
  .split-column { display: flex; flex-direction: column; }
  .split-column > .card-list:last-child { flex: 1 1 auto; }
}
@media (max-width: 639px) {
  /* Phone: a long label wraps instead of pushing the second column off screen;
   the desktop's empty filler tiles go. */
  .stat-card-link span { white-space: normal; text-align: center; font-size: 15px; line-height: 1.2; }
  .stat-card-link:empty { display: none; }
}
@media (max-width: 420px) {
  .stat-card-link span { font-size: 14px; }
  .stat-card-link-icon { width: 18px; height: 18px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat-card { padding: 12px 8px; }
  .stat-card .stat-value { font-size: 20px; }
  .stat-card-title { font-size: 15px; }
  .stat-grid-secondary.stat-grid-finance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .split-columns { grid-template-columns: 1fr; }
  .split-column > .dash-section:first-child { margin-top: 28px; }
}

/* ====== Forms, fields, icon picker ====== */

/* In-flow validation banners stay until the form is fixed, so they keep
   document flow; they borrow the flash-success/-error colors. */
.form-banner {
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
}

.search-bar {
  margin-bottom: 16px;
}
@media (max-width: 639px) {
  /* A phone's one filter row (Sifarişlər, Müştərilər) stays under the topbar while the list scrolls, like Stock's. */
  .phone-sticky-row {
    position: sticky;
    top: var(--topbar-h, 60px);
    z-index: 15;
    background: var(--bg);
    padding: 8px 0;
    margin: -8px 0 8px;
  }
}
/* Müştərilər: on phones the header's + Əlavə et sits beside the search instead. */
.cust-add-phone { display: none; }
@media (max-width: 639px) {
  .cust-page-header { display: none; }
  .cust-search-row { display: flex; align-items: center; gap: 8px; }
  .cust-search-row .search-bar { flex: 1; min-width: 0; margin-bottom: 0; }
  .cust-search-row .search-bar input { height: 42px; }
  .cust-add-phone { display: inline-flex; flex-shrink: 0; height: 42px; }
}
.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); }

.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%;
}
/* The image widget (fixed 64px canvas + actions) sizes to its content. */
.field-row .field-image {
  flex: 0 0 auto;
}
/* "+ Yeni müştəri" beside a customer <select> (Sat/Rezerv et modals). */
.field-with-add {
  display: flex;
  align-items: center;
  gap: 8px;
}
.field-with-add select,
.field-with-add .picker-trigger {
  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;
}
/* A plain-text unit (₼/ədəd) after a bare number input, matching the readonly
   fields beside it. */
.field-input-suffix {
  display: flex;
  align-items: center;
  gap: 6px;
}
.field-input-suffix input {
  flex: 1;
  min-width: 0;
}
.field-input-suffix span {
  color: var(--text-secondary);
  font-size: 14px;
  white-space: nowrap;
}
/* An icon inside the field that stays while typing (unlike a placeholder);
   pointer-events: none so the tap still focuses the field. */
.field-icon-input {
  position: relative;
}
.field-icon-input .field-icon {
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  pointer-events: none;
}
.field-icon-input input,
.field-icon-input textarea,
.field-icon-input .field-readonly {
  padding-left: 24px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
}
/* A customer with a forced sale type (Birmarket) locks it, and Ünvan in the
   order modals; disabled fields look closed. */
.field input:disabled,
.field select:disabled,
.field input:read-only {
  color: var(--text-secondary);
  background: var(--bg);
  cursor: not-allowed;
}
.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); }
.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;
}
.field-error {
  font-size: 12px;
  color: var(--danger);
  margin-top: 4px;
}
.field.has-error input,
.field.has-error select { color: var(--danger); }

.field-image-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.field-image-canvas {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--separator);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.field-image-canvas img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.field-image-canvas-placeholder {
  width: 26px;
  height: 26px;
  color: var(--text-secondary);
  opacity: 0.5;
}
.field-image-remove-btn {
  padding: 0;
  border: none;
  background: none;
  font-size: 13px;
  color: var(--danger);
  text-decoration: underline;
  cursor: pointer;
}
.field-file {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.field-file-input {
  /* The native "No file chosen" text follows the browser's language, so the input
     is hidden; the label opens the picker and a span (app.js) shows the name. */
  position: absolute;
  left: 0; /* hidden in place, not at its static spot off the right edge on a phone */
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}
.field-file-name {
  font-size: 13px;
  color: var(--text-secondary);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
/* Ləğv et/Təsdiqlə are <form>-wrapped buttons (own POST): the form needs flex: 1
   too, or they shrink on a different basis than the bare .btn siblings. */
.form-actions .btn,
.form-actions form { flex: 1; }

/* "Pul hara gəldi?" in a form's button row (Sat, Yeni sifariş, Təsdiqlə): at
   the row's start, so the modal gets no new row and keeps its height. */
.form-actions .fin-sale-account {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  color: var(--text-secondary);
  font-size: 14px;
  min-width: 0;
}
.form-actions .fin-sale-account[hidden] { display: none; }
/* Inside a plain .field (Qaytar modal) it looks like the field's own
   borderless select. */
.field .fin-pick { width: 100%; max-width: none; padding: 0; border: 0; background: transparent; font-size: 16px; }

/* Sat / Yeni sifariş button row with "Pul hara gəldi?": a fixed slot for
   the field, then the buttons share the rest equally — nothing moves when
   the sale type (and so the field's content) changes. */
.form-actions:has(> .fin-sale-account-inline) {
  display: grid;
  grid-template-columns: 230px;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: center;
}
.form-actions > .fin-sale-account-inline { margin-right: 0; min-width: 0; }

/* Icon choice (partials/icon_field.php + core.js): the field's button and
   the shared sheet — presets, then Lucide's icons by section, searchable. */
.icon-field-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--separator);
  border-radius: 12px;
  background: var(--bg-elevated);
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.icon-field-btn:hover { background: color-mix(in srgb, var(--text) 4%, var(--bg-elevated)); }
.icon-field-text { display: flex; flex-direction: column; }
.icon-field-name { font-weight: 600; font-size: 15px; }
.icon-field-hint { font-size: 12px; color: var(--text-secondary); }
.icon-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.4);
}
.icon-sheet-backdrop[hidden] { display: none; }
.icon-sheet {
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  height: min(640px, calc(100dvh - 32px));
  border-radius: 16px;
  background: var(--bg-elevated);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.icon-sheet-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 0.5px solid var(--separator); }
.icon-sheet-search {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--bg);
  font: inherit;
  font-size: 16px;
  color: var(--text);
  outline: none;
}
.icon-sheet-body { flex: 1; overflow-y: auto; padding: 4px 16px 16px; }
.icon-sheet-loading { color: var(--text-secondary); padding: 20px 0; }
.icon-sheet-section[hidden] { display: none; }
.icon-sheet-section h3 {
  margin: 14px 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.icon-sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
.icon-sheet-section[data-fixed] .icon-sheet-grid { margin-top: 12px; grid-template-columns: auto; justify-content: start; }
.icon-sheet-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  cursor: pointer;
}
.icon-sheet-item[hidden] { display: none; }
.icon-sheet-item svg { width: 22px; height: 22px; }
.icon-sheet-item:hover, .icon-sheet-item:focus-visible { background: color-mix(in srgb, var(--text) 7%, transparent); outline: none; }
.icon-sheet-item.is-selected { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.icon-sheet-none { padding: 0 12px; gap: 6px; }
.icon-sheet-none span { display: flex; align-items: center; gap: 6px; }
.icon-sheet-none em { font-style: normal; font-size: 14px; color: var(--text-secondary); }
.field .fe-months .fe-month {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 12px;
  border: 1px solid var(--separator);
  border-radius: 10px;
  background: var(--bg-elevated);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.field .fe-months .fe-month input { width: auto; margin: 0; accent-color: var(--accent); }
/* "Tam ödəniş — ay bağlansın": a plain line under the month chips. */
.field label.fe-months-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}
.field label.fe-months-close input { width: auto; margin: 0; accent-color: var(--accent); }
@media (max-width: 420px) {
  .field-row { flex-direction: column; gap: 12px; }
}
@media (max-width: 700px) {
  .form-actions .fin-sale-account { flex: 1 1 100%; margin-right: 0; }
  /* Phone: the field is its own full row above the buttons, always there. */
  .form-actions:has(> .fin-sale-account-inline) { display: flex; flex-wrap: wrap; }
  .form-actions > .fin-sale-account-inline { flex: 1 1 100%; min-height: 38px; }
}

/* ====== Modals and photo viewer ====== */

/* Tighter in modals: several stacked form-cards compound this gap. */
.modal .form-card { margin-bottom: 14px; }
/* Tighter in modals: .form-card's margin already spaces it, and the cart modals
   must fit .modal's 90vh. */
.modal .form-actions { margin-top: 12px; }

.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: 100vh;
  /* Mobile browsers size vh as if the address bar were hidden, so a vh cap can
     run past the visible area; dvh tracks the real viewport, vh is the fallback. */
  max-height: 100dvh;
  /* Full height, not 90: tall cart modals reach their buttons without a scroll;
     a short modal still sizes to its content. */
  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; }
/* Wide enough for the cart tables' trailing remove-row column. */
.modal-2x { max-width: 1010px; }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.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;
}
.modal .field textarea {
  resize: vertical;
  font-size: 16px;
}
/* The large view itself — openPhotoViewer() in core.js (Avadanlıqlar, Stock's viewer mode). */
.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72);
  cursor: zoom-out;
}
/* Stored photos are only 320px (Product::THUMB_MAX_DIMENSION) — shown at up to
   560px, so a customer can see the product across the counter. */
.photo-viewer img {
  width: min(90vw, 560px);
  height: auto;
  max-height: calc(100dvh - 140px);
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  background: #fff;
}
.photo-viewer-caption { color: #fff; font-size: 17px; font-weight: 600; text-align: center; }
.photo-viewer-sub { margin-top: -6px; color: rgba(255, 255, 255, 0.85); font-size: 15px; text-align: center; }

/* An order preview's header: Redaktə et (icon) next to the X. */
.modal-header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.modal-header-icon { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.modal-header-icon[hidden] { display: none; }
.modal-header-icon svg { width: 15px; height: 15px; }
/* Tinted so it reads as an action, apart from the grey X beside it. */
.modal-header-icon { color: var(--accent); background: rgba(0, 122, 255, 0.12); }
@media (min-width: 701px) {
  /* Desktop, short window: the cart gives back room so the buttons stay inside the
   92vh modal (the rest is ~350px, ~440px with Sənədlər); never under 160px.
   A window ≥ ~820px tall still gets the full 400/300px. */
  .modal .cart-table-wrap:not(.cart-table-wrap-compact):not(.cart-table-wrap-tall) {
    height: clamp(160px, calc(92vh - 350px), 400px);
    height: clamp(160px, calc(92dvh - 350px), 400px);
  }
  .modal .cart-table-wrap.cart-table-wrap-compact {
    height: clamp(160px, calc(92vh - 440px), 300px);
    height: clamp(160px, calc(92dvh - 440px), 300px);
  }
}

@media (min-width: 640px) {
  .modal-backdrop {
    align-items: center;
    padding: 20px;
  }
  .modal {
    border-radius: var(--radius);
    /* Desktop has no address-bar issue: 92vh gives heavy modals more room before
       they scroll. */
    max-height: 92vh;
    max-height: 92dvh;
  }
}
@media (max-width: 700px) {
  /* Phone: the "Pul hara gəldi?" row (admins) takes ~48px, so both carts drop to
   300px and Sat / Yeni sifariş fit one screen. */
  .modal:has(.fin-sale-account-inline) .cart-table-wrap { height: 300px; }
}

/* ====== Sat modal and carts ====== */

/* 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);
}
/* Here the picker is the cart table's last <tr>: undo the flex layout and let
   its <select> fill the 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%;
}
.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);
}
/* A direct flex child here (not in a <td>), so it needs its own shrink guard. */
.sell-cart-item .cart-thumb { flex-shrink: 0; }
.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;
}
.cart-table-dense th,
.cart-table-dense td {
  padding: 3px 8px;
}
.cart-table-dense .cart-price-input {
  padding: 3px 4px;
}
/* The thumb floors the row height; 28px stays recognizable with tighter padding. */
.cart-table-dense .cart-thumb {
  width: 28px;
  height: 28px;
}
.cart-table-dense .cart-thumb-placeholder {
  width: 14px;
  height: 14px;
}
.cart-table-dense .cart-thumb-cell {
  padding-top: 1px;
  padding-bottom: 1px;
}
.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;
}
/* Always typed by hand — the native up/down stepper is just clutter here. */
.cart-table .cart-qty-input::-webkit-outer-spin-button,
.cart-table .cart-qty-input::-webkit-inner-spin-button,
.cart-table .cart-price-input::-webkit-outer-spin-button,
.cart-table .cart-price-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cart-table .cart-qty-input,
.cart-table .cart-price-input {
  -moz-appearance: textfield;
}
.cart-table .cart-qty-input.is-over-limit {
  background: color-mix(in srgb, var(--danger) 18%, var(--bg-elevated));
  color: var(--danger);
}
/* Nudges Say off Ad's edge (Ad is the only column without a fixed width). */
.cart-table .cart-col-qty {
  padding-left: 22px;
}
.cart-table .cart-col-index,
.cart-table .cart-index-cell {
  width: 1%;
  white-space: nowrap;
  text-align: center;
  color: var(--text-secondary);
}
.cart-table .cart-thumb-cell {
  width: 1%;
  white-space: nowrap;
}
/* Sticky: the running total stays visible while scrolling a long cart. */
.cart-table tfoot td {
  position: sticky;
  bottom: 0;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  font-weight: 700;
}
/* landed_cost.php's USD total under USD qiymət, plain weight so the bold AZN
   total stays the main figure. */
.cart-table-dense .landed-cost-usd-plain {
  font-weight: 400;
}
.cart-table .cart-qty-total-label {
  color: var(--text-secondary);
  font-weight: 600;
}
.cart-thumb {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-thumb-placeholder {
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
  opacity: 0.5;
}
.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 {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
/* Qty total before the amount: dimmer, but the same font-size (mixed sizes looked
   misaligned on one baseline). */
.sell-total-qty {
  font-weight: 400;
  color: var(--text-secondary);
}

/* Malların maya dəyəri (landed_cost.php) */
/* A Daşınma figure from a carton shared by several products is an
   equal-per-piece estimate, worth a glance. */
.cart-table-dense .landed-cost-shipping-input.landed-cost-estimated {
  background: color-mix(in srgb, var(--warning) 18%, var(--bg));
}
@media (max-width: 639px) {
  /* Sat modal on a phone: Müştəri/Satışın növü drop their label to save height
   (the placeholder says it; aria-label stays). */
  #sell-modal-backdrop label[for="sell-customer"],
  #sell-modal-backdrop label[for="sell-type"] {
    display: none;
  }
  /* Empirical nudge: with no sibling button this select's text renders a few px
     further right; re-check on new browsers. */
  #sell-modal-backdrop #sell-type {
    margin-left: -3px;
  }
}

/* ====== Tables ====== */

.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;
}

/* PO / low-stock order carts: sortable SKU/Ad, a fixed height (~8 rows) so the
   modal's size stays constant; only this section scrolls. */
.cart-table-wrap {
  height: 400px;
  overflow-y: auto;
  margin-bottom: 12px;
}
/* PO create/edit and Stock's bulk-order modal also carry Sənədlər: a smaller cart. */
.cart-table-wrap.cart-table-wrap-compact {
  height: 300px;
}
/* landed_cost.php is a full page: auto + max-height shows 10+ rows (with
   .cart-table-dense) and lets a short order shrink. */
.cart-table-wrap.cart-table-wrap-tall {
  height: auto;
  max-height: 480px;
}

.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);
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}
.pagination [aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}
.pagination-info {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}
@media (min-width: 1360px) {
  .table-wrap {
    overflow-y: auto;
  }
}

/* ====== Bulk selection ====== */

/* Plain inline group on desktop; a floating bar on phones (<640px rules below). */
/* Hidden until something is checked (.products-filter-selects.has-selection,
   desktop); the mobile rules override both. */
.bulk-sell-bar {
  display: none;
  align-items: center;
  gap: 8px;
}

/* Bulk-add grid: dense Excel-like cells for fast paste-and-fill. */
.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.bulk-col-blue { color: var(--accent); }
.bulk-table th.bulk-col-green { color: var(--success); }
.bulk-table th.bulk-col-red { color: var(--danger); }
/* Scrolls inside its own box so the header sticks to the box, not the topbar. */
.bulk-table-wrap {
  max-height: 70vh;
  overflow-y: auto;
}
.bulk-table-wrap .bulk-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-elevated);
  z-index: 1;
}
.bulk-col-qty {
  text-align: center;
}
.bulk-price-field {
  position: relative;
}
.bulk-price-field input {
  padding-right: 20px;
  appearance: textfield;
  -moz-appearance: textfield;
}
.bulk-price-field input::-webkit-outer-spin-button,
.bulk-price-field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.bulk-currency-suffix {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  opacity: 0.6;
  pointer-events: none;
}
/* Same overlay as .bulk-price-field, for the qty columns; "ədəd" is wider than
   "₼", hence more padding-right. */
.bulk-qty-field {
  position: relative;
}
.bulk-qty-field input {
  padding-right: 40px;
  appearance: textfield;
  -moz-appearance: textfield;
}
.bulk-qty-field input::-webkit-outer-spin-button,
.bulk-qty-field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.bulk-unit-suffix {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  opacity: 0.6;
  pointer-events: none;
}
.bulk-table th::after {
  display: none;
}
.bulk-col-resizable {
  position: relative;
}
.bulk-col-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -4px;
  width: 8px;
  cursor: col-resize;
  z-index: 2;
}
.bulk-col-resizer:hover,
.bulk-col-resizer.is-resizing {
  background: color-mix(in srgb, var(--accent) 35%, transparent);
}
.bulk-table-wrap.is-col-resizing {
  cursor: col-resize;
  user-select: 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;
}
.bulk-sku-tool {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
@media (max-width: 639px) {
  .bulk-sell-bar {
    display: none;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    z-index: 25;
    justify-content: space-between;
    background: var(--bg-elevated);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 10px 14px;
  }
  .bulk-sell-bar.has-selection {
    display: flex;
  }
}

/* ====== Zəmanət talonu modal ====== */

.warranty-sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.warranty-lines { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.warranty-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 220px);
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.warranty-line.is-off { opacity: 0.45; }
.warranty-line-pick { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; font-weight: 600; cursor: pointer; }
.warranty-line-pick input { width: 18px; height: 18px; flex-shrink: 0; }
.warranty-line-name { min-width: 0; overflow-wrap: anywhere; }
.warranty-line-name small { font-weight: 400; color: var(--text-secondary); }
.warranty-line-months { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-secondary); white-space: nowrap; }
.warranty-line-months input, .warranty-line-serial {
  border: none; border-radius: 8px; background: var(--bg-elevated); color: var(--text);
  font: inherit; font-size: 15px; padding: 8px 10px;
}
.warranty-line-months input { width: 64px; text-align: right; }
.warranty-line-serial { width: 100%; min-width: 0; }
.warranty-cards { margin-bottom: 16px; font-size: 13px; }
.warranty-cards-head { font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.warranty-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 0.5px solid var(--separator); }
@media (max-width: 639px) {
  /* Phones: the name over months + serial. */
  .warranty-line { grid-template-columns: auto minmax(0, 1fr); }
  .warranty-line-pick { grid-column: 1 / -1; }
  .warranty-line-serial { font-size: 16px; } /* 16px+ keeps iOS from zooming in on focus */
  .warranty-line-months input { font-size: 16px; }
}

/* Ayarlar › Zəmanət mətni: room for the long conditions. */
.warranty-terms-input { width: 100%; min-height: 360px; font: inherit; font-size: 14px; line-height: 1.5; resize: vertical; }

/* ====== Etiket modal (shipping labels) ====== */

.label-modal { max-width: 940px; }
/* Left: the label and its fields (or Birmarket's files); right: the sheet. */
.label-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; align-items: start; }
.label-side { position: sticky; top: 0; }
.label-main { min-width: 0; }
.label-modal-sub { color: var(--text-secondary); font-size: 14px; margin-top: 2px; }

.label-files { display: flex; flex-direction: column; gap: 8px; }
.label-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 1px solid var(--separator);
  border-radius: var(--radius-sm);
}
.label-file-thumbs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 72px;
  color: var(--text-secondary);
  font-size: 13px;
}
.label-file-thumbs.is-error { color: var(--danger); }
.label-file-thumbs figure { position: relative; margin: 0; }
.label-file-thumbs img {
  display: block;
  width: 72px;
  height: auto;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--separator);
}
.label-file-thumbs figcaption {
  position: absolute;
  top: -6px;
  left: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
/* Toplu: a drawn label's thumbnail — the real 97 × 66.25 mm label
   (≈ 367 × 250 px) shrunk to the 72px a file's thumbnail gets. */
.label-thumb-own {
  width: 72px;
  height: 49px;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--separator);
}
.label-thumb-own .own-label { transform: scale(0.196); transform-origin: 0 0; }
.label-bulk { max-height: 60vh; overflow-y: auto; padding: 6px 0 0 6px; }
.label-file-info { flex: 1; min-width: 0; }
.label-file-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.label-file-meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

.label-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding: 14px;
  border: 1.5px dashed var(--separator);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: 14px;
  cursor: pointer;
}
.label-drop[hidden],
.label-files[hidden],
.label-own[hidden] { display: none; }
.label-own-preview .own-label { flex: none; box-shadow: var(--shadow); }
.label-own textarea { resize: vertical; }
.label-drop.is-over { border-color: var(--accent); background: rgba(0, 122, 255, 0.06); }
.label-drop svg { width: 18px; height: 18px; flex: none; }

.label-sheet-head {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* The sheet drawn to A4 proportions (210 × 297), 2 × 4 slots. */
.label-sheet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, 1fr);
  width: 100%;
  aspect-ratio: 210 / 297;
  margin: 0 auto;
  border: 1px solid var(--separator);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-elevated);
}
.label-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  border-right: 1px solid var(--separator);
  border-bottom: 1px solid var(--separator);
  background: none;
  color: var(--text-secondary);
  font: inherit;
  cursor: pointer;
}
.label-slot:nth-child(2n) { border-right: 0; }
.label-slot:nth-last-child(-n + 2) { border-bottom: 0; }
.label-slot-no { font-size: 15px; font-weight: 600; }
.label-slot-mark { font-size: 11px; min-height: 14px; }
.label-slot.is-selected { background: var(--accent); color: var(--accent-text); }

.label-hint { font-size: 13px; color: var(--text-secondary); margin: 10px 0 0; text-align: center; }
.label-hint.is-error { color: var(--danger); }

.label-calibrate { margin-top: 16px; font-size: 14px; }
.label-calibrate summary { cursor: pointer; color: var(--text-secondary); }
.label-calibrate .label-hint { text-align: left; }
.label-calibrate-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.label-calibrate-row label,
.label-calibrate-y { display: flex; align-items: center; gap: 6px; }
.label-calibrate-row input { width: 64px; }
@media (max-width: 760px) {
  .label-layout { grid-template-columns: 1fr; gap: 16px; }
  .label-side { position: static; }
  /* Stacked under the label (phone): a compact sheet, centred. */
  .label-sheet { width: min(100%, 240px); }
}
@media (max-width: 480px) {
  /* A phone is narrower than the real-size label: shown smaller, prints the same. */
  .label-own-preview { padding: 10px; }
}
/* The drawn label (non-Birmarket orders) at its printed size, on a soft
   backdrop, above its editable lines. */
.label-own-preview {
  display: flex;
  justify-content: center;
  padding: 14px;
  margin-bottom: 4px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  overflow-x: auto;
}
@media (max-width: 480px) {
  .label-own-preview .own-label { zoom: 0.78; }
}

/* ====== Maliyyə pieces used across pages (badges, account picker, transit) ====== */

/* Maliyyə account badge — the account's logo, or its icon in its own
   color on a soft tint of that color (Sistem > Maliyyə > Hesablar). */
.fin-badge {
  --fin-c: #8E8E93;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--fin-c);
  background: color-mix(in srgb, var(--fin-c) 15%, var(--bg-elevated));
  vertical-align: middle;
}
.fin-badge svg { width: 18px; height: 18px; }
.fin-badge-logo { background: #fff; box-shadow: inset 0 0 0 0.5px var(--separator); overflow: hidden; }
.fin-badge-logo img { width: 100%; height: 100%; object-fit: contain; }
.fin-badge-sm { width: 22px; height: 22px; border-radius: 6px; }
.fin-badge-sm svg { width: 13px; height: 13px; }
.fin-badge-lg { width: 52px; height: 52px; border-radius: 13px; }
.fin-badge-lg svg { width: 28px; height: 28px; }
.fin-account-name { display: inline-flex; align-items: center; gap: 7px; }
.fin-color-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.fin-color-choice { position: relative; cursor: pointer; }
.fin-color-choice input { position: absolute; opacity: 0; pointer-events: none; }
.fin-color-choice span {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.fin-color-choice input:checked + span { box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px var(--accent); }
.fin-color-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.fin-sale-account > svg { width: 16px; height: 16px; flex: none; }
.fin-sale-account select {
  font: inherit;
  color: var(--text);
  padding: 8px 10px;
  border: 1px solid var(--separator);
  border-radius: 10px;
  background: var(--bg-elevated);
  max-width: 220px;
}
.fin-sale-account-fixed { color: var(--text); font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.fin-sale-account-fixed[hidden] { display: none; }
/* The account picker (core.js wireFinanceSaleAccount): looks like the
   select it stands in for, but every account carries its own badge. */
.fin-pick {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 220px;
  font: inherit;
  color: var(--text);
  text-align: left;
  padding: 5px 10px 5px 6px;
  border: 1px solid var(--separator);
  border-radius: 10px;
  background: var(--bg-elevated);
  cursor: pointer;
}
.fin-pick[hidden] { display: none; }
.fin-badge-blank { background: transparent; }
/* Picker menu: a group heading (an <optgroup>) and a row's balance on the right. */
.fin-pick-group {
  padding: 8px 8px 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.fin-pick-group:not(:first-child) { margin-top: 4px; border-top: 0.5px solid var(--separator); padding-top: 10px; }
/* Collapsible groups (the category picker): a heading row that opens its list. */
.fin-pick-group.fin-pick-group-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 9px 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
}
.fin-pick-group-toggle:hover, .fin-pick-group-toggle:focus-visible { background: color-mix(in srgb, var(--text) 7%, transparent); outline: none; }
.fin-pick-group-toggle .fin-pick-chevron { transform: rotate(-45deg); margin: 0 4px 0 2px; transition: transform 0.15s; }
.fin-pick-group-toggle.is-open .fin-pick-chevron { transform: rotate(45deg); margin-top: -3px; }
.fin-pick-group-toggle .fin-pick-meta { padding-left: 12px; }
.fin-pick-group-body .fin-pick-option { padding-left: 22px; }
/* Mouse: a group's list opens in a side panel on hover (core.js hoverMode). */
.fin-pick-flyout { z-index: 201; }
.fin-pick-menu.is-hover .fin-pick-group-toggle .fin-pick-chevron,
.fin-pick-menu.is-hover .fin-pick-group-toggle.is-open .fin-pick-chevron { transform: rotate(-45deg); margin-top: 0; }
.fin-pick-menu.is-hover .fin-pick-group-toggle.is-open { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.fin-pick-group-toggle.has-selected .fin-pick-name { color: var(--accent); }
.fin-pick-meta { margin-left: auto; padding-left: 18px; color: var(--text-secondary); font-variant-numeric: tabular-nums; font-weight: 400; }
.fin-pick-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-pick-chevron {
  flex: none;
  width: 7px;
  height: 7px;
  margin: -3px 2px 0 4px;
  border-right: 1.6px solid var(--text-secondary);
  border-bottom: 1.6px solid var(--text-secondary);
  transform: rotate(45deg);
}
.fin-pick-menu {
  position: fixed;
  z-index: 200;
  max-width: calc(100vw - 16px);
  max-height: min(520px, calc(100dvh - 16px));
  overflow-y: auto;
  padding: 5px;
  border-radius: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.fin-pick-option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 30px 7px 7px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}
.fin-pick-option:hover, .fin-pick-option:focus-visible { background: color-mix(in srgb, var(--text) 7%, transparent); outline: none; }
.fin-pick-option.is-selected { font-weight: 600; }
.fin-pick-option.is-selected::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  width: 5px;
  height: 10px;
  margin-top: -7px;
  border-right: 2px solid var(--accent, #007AFF);
  border-bottom: 2px solid var(--accent, #007AFF);
  transform: rotate(45deg);
}

/* Tranzitdən köçürmə — one checkable row per pending sale. */
.ft-group .finance-group-head { gap: 12px; flex-wrap: wrap; }
.ft-all { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ft-dest { font: inherit; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text); max-width: 220px; }
.ft-row {
  display: grid;
  grid-template-columns: auto 48px 1fr auto 110px;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-top: 0.5px solid var(--separator);
  cursor: pointer;
}
.ft-row.is-picked { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.ft-date { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ft-desc { min-width: 0; }
.ft-commission input { width: 100%; }
.ft-summary { position: sticky; bottom: 12px; }
.ft-summary #ft-preview { padding: 0 16px; }
.ft-submit-row { display: flex; align-items: flex-end; gap: 12px; padding: 12px 16px 16px; }
.ft-submit-row .field { margin: 0; }
.ft-submit-row .btn { margin-left: auto; min-width: 140px; }

/* Sistem › Maliyyə › Hesablar — groups collapse to their headings. */
.fin-acc-group > summary { cursor: pointer; list-style: none; user-select: none; }
.fin-acc-group > summary::-webkit-details-marker { display: none; }
.fin-acc-group:not([open]) > summary { border-bottom: none; }
.fin-acc-group-name { display: inline-flex; align-items: center; gap: 6px; }
.fin-acc-chevron { width: 14px; height: 14px; transition: transform 0.15s ease; }
.fin-acc-group[open] .fin-acc-chevron { transform: rotate(90deg); }
.fin-acc-count {
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  background: var(--bg); border-radius: 8px; padding: 1px 7px; letter-spacing: 0;
}

/* Account-group color: a dot before the group's heading. */
.fin-group-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 7px; vertical-align: 0.05em; flex: none;
}
.fin-group-title { display: inline-flex; align-items: center; }
.fin-color-choice.is-used span { opacity: 0.35; }

/* Sistem › Maliyyə › Hesablar — closed accounts folded at a group's bottom. */
.fin-acc-closed { border-top: 0.5px solid var(--separator); }
.fin-acc-closed > summary {
  cursor: pointer; list-style: none; padding: 10px 16px;
  font-size: 13px; color: var(--text-secondary);
}
.fin-acc-closed > summary::-webkit-details-marker { display: none; }
.fin-acc-closed[open] > summary { color: var(--accent); }
.fin-sale-account-inline select, .fin-sale-account-inline .fin-pick { flex: 1; min-width: 0; max-width: none; }
.fin-sale-account-inline .fin-sale-account-fixed { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fin-sale-account-fixed.is-placeholder { color: var(--text-secondary); font-weight: 400; }
.fin-badge.icon-field-empty { background: transparent; box-shadow: inset 0 0 0 1.5px var(--separator); }

/* The account picker as a filter-row pill (Əməliyyatlar > Hesab). */
.fin-pick.filter-select { flex: none; padding: 7px 12px 7px 8px; border: none; border-radius: 999px; max-width: 260px; font-size: 13px; font-weight: 600; }
.transit-pulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: #FFCC00;
  vertical-align: 1px;
  animation: transit-pulse 1.6s ease-in-out infinite;
}
@keyframes transit-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, #FFCC00 55%, transparent); }
  50% { opacity: 0.35; box-shadow: 0 0 0 4px color-mix(in srgb, #FFCC00 0%, transparent); }
}
/* Pickers: an option standing with the group headings (a category without subcategories). */
.fin-pick-option.fin-pick-top { font-size: 15px; font-weight: 600; }
@media (max-width: 700px) {
  .fin-sale-account select, .fin-pick { flex: 1; max-width: none; }
  .ft-row { grid-template-columns: auto 1fr auto; row-gap: 6px; }
  .ft-date { grid-column: 2; grid-row: 1; }
  .ft-desc { grid-column: 2 / -1; grid-row: 2; }
  .ft-amount { grid-column: 3; grid-row: 1; }
  .ft-commission { grid-column: 2 / -1; grid-row: 3; max-width: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .transit-pulse { animation: none; }
}

/* ====== Drag to reorder ====== */

/* Drag-and-drop sorting (wireDragReorder in core.js). */
.drag-handle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 36px; flex: none; margin-left: -6px;
  color: var(--text-secondary); cursor: grab; touch-action: none; border-radius: 8px;
}
.drag-handle:hover { background: var(--bg); color: var(--text); }
.drag-handle svg { width: 18px; height: 18px; }
body.is-reordering, body.is-reordering * { cursor: grabbing !important; user-select: none; }

/* ====== Page: Ana səhifə ====== */

.live-clock {
  font-variant-numeric: tabular-nums;
}

/* Dashboard: clock + date left, weather right; nowrap (the base .page-header
   wraps) — the row fits one line even on a phone. */
#dashboard-header {
  flex-wrap: nowrap;
}
.dash-left-group {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
/* The blinking ":" marks a live clock without showing seconds. */
.dash-digital-clock {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent);
  white-space: nowrap;
}
.dash-clock-colon {
  animation: dash-clock-blink 1s step-start infinite;
}
@keyframes dash-clock-blink {
  50% { opacity: 0.2; }
}
.dash-date-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.dash-date-icon {
  width: 16px;
  height: 16px;
  /* Not --accent: the clock's color made the icon read as part of the clock. */
  color: var(--text-secondary);
  flex-shrink: 0;
}
.dash-date-day {
  color: var(--text);
  font-weight: 700;
}
/* Icon, temperature and wind only, so date + clock + weather fit one line on
   phones; plain text so it isn't mistaken for a stat box. */
.weather-widget {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.weather-icon {
  font-size: 26px;
  line-height: 1;
}
.weather-temp {
  font-size: 17px;
  font-weight: 700;
}
.weather-wind {
  font-size: 12px;
  color: var(--text-secondary);
}
/* Son fəaliyyət kind badge: an icon (index.php), so a small square chip. */
.dash-activity-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
}
.dash-activity-badge svg {
  width: 14px;
  height: 14px;
}
/* Son fəaliyyət second line: desktop shows date + products; mobile only the date,
   and only in Bu həftə/Bu ay (dashboard.js). */
.dash-activity-desktop-info { display: none; }
.dash-activity-middle {
  display: none;
}
.dash-activity-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 12px;
}
.dash-activity-chip svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
/* Son fəaliyyət chips collapse into a native select on phones, like Sifarişlər's. */
.dash-activity-filter-mobile { display: none; }

/* Dashboard section header: a small title, optional "hamısına bax" link at the right. */
/* No :first-of-type margin reset: the sections have different parents, and
   :first-of-type (per parent) matched both. */
.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-see-all {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.dash-see-all:hover {
  text-decoration: underline;
}
/* Son fəaliyyət: Tip above a bold Cəmi, right-aligned. */
.dash-order-tip-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.dash-order-total {
  font-weight: 700;
  font-size: 15px;
}

/* Sales bar chart: each day is a full-height link to that day in Satış
   tarixçəsi, amount on hover (data-tip). Days outside the range are .is-out:
   invisible but keep their slot, so bars never move. */
.dash-chart-range-link { color: inherit; }
.dash-chart-range-link:hover { color: var(--accent); }
.dash-chart {
  display: flex;
  gap: 10px;
  padding: 14px 16px 0;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}
/* Axis width = its longest label (repeated in an invisible in-flow
   .dash-chart-axis-sizer). */
.dash-chart-axis {
  position: relative;
  flex-shrink: 0;
  height: 120px;
}
.dash-chart-axis span {
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dash-chart-axis .dash-chart-axis-sizer {
  position: static;
  display: block;
  transform: none;
  visibility: hidden;
  height: 0;
}
.dash-chart-plot {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
}
.dash-chart-grid {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--separator);
  pointer-events: none;
}
.dash-chart-col {
  position: relative;
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.dash-chart-bar {
  width: 100%;
  height: var(--h);
  min-height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  transition: opacity 0.15s ease;
}
.dash-chart-col.is-out { visibility: hidden; }
.dash-chart-col:hover .dash-chart-bar { opacity: 0.7; }
.dash-chart-col:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(var(--h) + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--text);
  color: var(--bg-elevated);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}
/* Nothing sits between it and the list above, so it needs its own margin. */
#dash-activity-total {
  margin-top: 10px;
}
@media (min-width: 640px) {
  .dash-activity-desktop-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }
  .dash-activity-mobile-date { display: none !important; }
  /* Desktop: one grid on #dash-activity-list so the Ünvan/Qeyd column aligns across
   rows; rows are display: contents, so padding/border move onto the 3 cells.
   [hidden] needs its own display: none here (same specificity as the class). */
  #dash-activity-list {
    display: grid;
    grid-template-columns: 3fr auto 1fr;
    /* stretch, not center: cells fill the row's height so their border-bottoms line
       up; content re-centers via the flex column below. */
    align-items: stretch;
    /* No column-gap: a gap breaks the cells' border line; padding-right on the cells
       gives the space instead. */
  }
  #dash-activity-list .dash-activity-row {
    display: contents;
  }
  #dash-activity-list .dash-activity-row[hidden] {
    display: none;
  }
  #dash-activity-list .card-row-main,
  #dash-activity-list .dash-activity-middle,
  #dash-activity-list .card-row-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 14px;
    padding-bottom: 14px;
    padding-right: 12px;
    border-bottom: 0.5px solid var(--separator);
  }
  #dash-activity-list .card-row-main {
    padding-left: 16px;
  }
  #dash-activity-list .card-row-actions {
    /* No justify-self: end — the box fills its track so its border spans it;
       align-items: flex-end right-aligns the content. */
    padding-right: 16px;
    align-items: flex-end;
  }
  /* Like .card-row:last-child: the last DOM row, not the last one a filter leaves
     visible. */
  #dash-activity-list .dash-activity-row:last-child .card-row-main,
  #dash-activity-list .dash-activity-row:last-child .dash-activity-middle,
  #dash-activity-list .dash-activity-row:last-child .card-row-actions {
    border-bottom: none;
  }
  .dash-activity-middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
  }
}
@media (max-width: 639px) {
  .dash-activity-chips { display: none; }
  .dash-activity-filter-mobile { display: inline-block; }
  /* Phones: Nağd satış moves in front of Cəmi so the row loses a line. */
  #dash-activity-list .dash-order-tip-price {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  #dash-activity-list .card-row {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* Room for a 4-digit price, right-aligned, so the tag before it doesn't shift
     with the digit count. */
  #dash-activity-list .dash-order-total {
    display: inline-block;
    min-width: 58px;
    text-align: right;
  }
  /* Hidden on phones: 30 bars in a narrow column aren't readable. */
  .dash-chart-section { display: none; }
}

/* ====== Page: Stock ====== */

/* The stats column centers in the real gap between name and actions: the name
   column is capped and actions hug their content, so 1fr is exactly that gap. */
.product-row {
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 480px) 1fr auto;
  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;
}
/* ID-scoped to outrank .field-row .field { flex: 1 }, which stretched the photo box. */
#product-view-modal-backdrop .field-pv-photo {
  flex: 0 0 auto;
}
.product-row .card-row-stats { grid-area: stats; justify-self: center; }
.product-row .card-row-actions { grid-area: actions; justify-self: end; }
/* Stock, desktop: one header of sortable labels; the list is the grid and rows +
   header use subgrid, so labels sit over their numbers. The name block stays in
   its column (title wraps, sub-line ends in "…"). */
.product-list-head { display: none; }
/* Stock viewer mode (desktop): the screen turned to a customer. The <html> class
   is set in partials/header.php before first paint; pages/products.js toggles it.
   Hides cost, reserved, low-stock cues, buttons, menus; a row click shows the photo. */
.viewer-toggle { display: none; align-items: center; gap: 6px; }
.viewer-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.viewer-toggle-off { display: none; }
/* Long names wrap to 2 lines; app.js then hides that row's sub-line so every
   row keeps the same height. */
.product-row .card-row-title {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
#product-bulk-order-btn {
  display: none;
}
.stock-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
/* Stock state chips: round icon buttons like the dashboard's date chips
   (0-dan çox · İdeal · Low stock); the name + count show on hover. */
.stock-chips { flex-wrap: nowrap; align-items: center; }
.stock-chip {
  position: relative;
  width: 52px;
  height: 38px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 999px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: background 0.15s ease;
}
.stock-chip svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stock-chip-in { color: var(--accent); }
.stock-chip-ideal { color: var(--success); }
.stock-chip-low { color: var(--warning); }
.stock-chip:hover { background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated)); }
.stock-chip.active { background: var(--accent); color: var(--accent-text, #fff); }
.stock-chip-tip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: 8px;
  background: var(--text);
  color: var(--bg-elevated);
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  transition: opacity 0.12s ease;
}
.stock-chip:hover .stock-chip-tip,
.stock-chip:focus-visible .stock-chip-tip { opacity: 1; }

/* Stock's search sits first in .filter-row-selects and grows on desktop;
   margin-bottom: 0 since the parent's gap spaces it. */
.products-search-inline {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}
.product-star-mark {
  display: none;
  width: 14px;
  height: 14px;
  margin-right: 5px;
  vertical-align: -1px;
  fill: var(--accent);
}
/* Hugs "SKU" + the code; a % width left a gap after the photo. */
#product-view-modal-backdrop .field-row .field-sku { flex: 0 0 auto; }
/* Stock: the one-picker category filter takes the selects' place (full row on a phone). */
.products-cat-pick { min-width: 14ch; }
@media (min-width: 640px) {
  #product-list { display: grid; grid-template-columns: minmax(0, 480px) 1fr auto; }
  #product-list > .product-row,
  #product-list > .product-list-head { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: 12px; }
  #product-list > .product-row > .card-row-main-wrap { grid-column: 1; max-width: 100%; }
  #product-list > .product-row .card-row-main { overflow: hidden; }
  #product-list > .product-row > .card-row-stats,
  #product-list > .product-list-head > .plh-stats { grid-column: 2; justify-self: center; }
  #product-list > .product-row > .card-row-actions { grid-column: 3; }
  #product-list .card-row-stats .card-row-stat { width: 78px; min-width: 78px; }
  #product-list > .product-row .card-row-stat-label { display: none; }
  .product-list-head {
    position: sticky;
    top: 0;
    z-index: 2;
    align-items: center;
    padding: 8px 16px;
    background: var(--bg-elevated);
    border-bottom: 0.5px solid var(--separator);
  }
  .plh-main { grid-column: 1; padding-left: 85px; }
  /* over the names: checkbox + photo */
  .plh-actions { grid-column: 3; }
  .plh-sort {
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: none;
    border: 0;
    padding: 2px 0;
    cursor: pointer;
    white-space: nowrap;
  }
  .plh-sort:hover { color: var(--text); }
  .plh-sort.is-sorted { color: var(--accent); }
  .plh-sort.is-sorted::after { content: " ↑"; }
  .plh-sort.is-sorted.is-desc::after { content: " ↓"; }
  .viewer-toggle { display: inline-flex; }
  .viewer-mode .viewer-toggle { background: var(--accent); color: var(--accent-text, #fff); }
  .viewer-mode .viewer-toggle-on { display: none; }
  .viewer-mode .viewer-toggle-off { display: inline; }
  .viewer-mode .page-header-actions > :not(.viewer-toggle),
  .viewer-mode .sidebar,
  .viewer-mode .top-nav,
  .viewer-mode .topbar-user,
  .viewer-mode .topbar-action,
  .viewer-mode #product-bulk-sell-bar,
  .viewer-mode #product-bulk-order-btn,
  .viewer-mode .stock-chip-low,
  .viewer-mode #product-list .product-select,
  .viewer-mode #product-list .stat-cost,
  .viewer-mode #product-list .card-row-actions,
  .viewer-mode #product-list .plh-actions,
  .viewer-mode #product-list .reserved-hint,
  .viewer-mode #product-list .recommended-badge,
  .viewer-mode #product-list .product-star-mark { display: none !important; }
  .viewer-mode .plh-main { padding-left: 50px; }
  /* over the names: photo only, no checkbox */
  .viewer-mode .brand-box { pointer-events: none; }
  .viewer-mode #product-list .stat-danger,
  .viewer-mode #product-list .stat-warning { color: inherit; }
  .viewer-mode #product-list .product-row:has(.card-row-thumb img) { cursor: zoom-in; }
  .products-filter-selects.has-selection .bulk-sell-bar {
    display: flex;
  }
  .products-filter-selects.has-selection #product-bulk-order-btn {
    display: inline-flex;
  }
  /* Must grow too, or the search box inside has no room to grow into. */
  .products-filter-selects {
    flex: 1;
  }
}
@media (min-width: 640px) and (max-width: 899px) {
  /* A narrow tablet (640–899px, iPad mini upright = 744): slimmer number
   columns so the name keeps room; "Nağd satış" wraps to two lines. */
  #product-list .card-row-stats .card-row-stat { width: 62px; min-width: 62px; }
  #product-list .plh-sort { white-space: normal; line-height: 1.2; }
}
@media (min-width: 640px) and (max-width: 719px) {
  /* Narrower still (a desktop window dragged under 720px — no real device):
   the small photo makes way for the name. */
  #product-list > .product-row .card-row-thumb { display: none; }
  #product-list .plh-main { padding-left: 35px; }
}
@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);
  }

  /* Stock on a phone: lookup + one-tap sale; add buttons and the stock filter are
   hidden, category + subcategory share a row. */
  /* Spanning both tracks puts search (first in markup) on its own row. */
  .products-search-inline {
    grid-column: 1 / -1;
  }
  .products-page-header,
  .stock-filters,
  #product-bulk-order-btn {
    display: none;
  }
  /* Grid, not %: a <select>'s intrinsic size beat a percentage width on a flex
     item; 1fr tracks don't move when one repopulates. */
  .products-filter-selects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Needs a definite width or the grid (a flex item) shrink-wraps its content. */
    width: 100%;
  }
  .products-cat-select {
    width: 100% !important;
    flex: none;
    min-width: 0;
  }
  /* Search + category stay on screen while the list scrolls; --topbar-h is measured
     in products.js. Opaque background since rows scroll beneath. */
  .products-sticky-filters {
    position: sticky;
    top: var(--topbar-h, 60px);
    z-index: 15;
    background: var(--bg);
    padding-bottom: 8px;
  }
  /* No per-row actions on phones (selling = checkbox + the floating Sat bar), so
     the title gets the width. */
  .product-row .card-row-actions {
    display: none;
  }
  /* Phone row = photo + name only; a tap opens Məhsula baxış with the rest. */
  .product-row {
    grid-template-columns: 1fr;
    grid-template-areas: "main";
  }
  .product-row .card-row-stats,
  .product-row .card-row-sub {
    display: none !important;
  }
  .product-row .card-row-main-wrap {
    justify-self: stretch;
  }
  /* The star button is hidden with the actions, so a starred row shows a small
     star before its name instead. */
  .product-row[data-starred="1"] .product-star-mark {
    display: inline-block;
  }
  .products-filter-selects .products-cat-pick { grid-column: 1 / -1; width: 100%; max-width: none; }
  /* Stock on a phone: the stock chips share the category's line — search on top,
     then [Kateqoriya …][İdeal][0-dan çox][Low]; the selects box dissolves into
     the row's grid (display: contents). */
  .products-sticky-filters .filter-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
  .products-sticky-filters .products-filter-selects { display: contents; }
  .products-sticky-filters .products-search-inline { grid-column: 1 / -1; }
  /* Both 38px tall, as on a desktop — easier to tap. */
  .products-sticky-filters .products-filter-selects .products-cat-pick { grid-column: 1; min-height: 38px; }
  .products-sticky-filters .stock-chips { display: flex; grid-column: 2; gap: 6px; margin: 0; }
  .products-sticky-filters .stock-chip { width: 48px; height: 38px; }
  .products-sticky-filters .stock-chip-tip { display: none; }
  /* no hover on a phone */
}

/* ====== Page: Məhsul bazası ====== */

/* Məhsul bazası's Shopify column: .co-status-icon's color-mix convention,
   always visible. */
.pd-shopify-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  flex-shrink: 0;
  margin-right: 4px;
  vertical-align: middle;
}
.pd-shopify-status svg { width: 14px; height: 14px; }
.pd-shopify-status-pending {
  background: color-mix(in srgb, var(--warning) 18%, var(--bg-elevated));
  color: var(--warning);
}
.pd-shopify-status-synced {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated));
  color: var(--accent);
}
.pd-shopify-status-error {
  background: color-mix(in srgb, var(--danger) 15%, var(--bg-elevated));
  color: var(--danger);
}
.pd-shopify-cell .btn-icon { width: 24px; height: 24px; }
.pd-shopify-cell .btn-icon svg { width: 14px; height: 14px; }
.pd-thumb {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pd-thumb-placeholder {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  opacity: 0.5;
}
/* Məhsul bazası's "Cəmi N məhsul" in full-strength text, by id (Stock keeps the
   shared class grey). */
#pd-visible-count {
  color: var(--text);
  margin-left: 3ch;
}
#pd-visible-count strong {
  font-weight: 600;
}
/* No sibling here (unlike products.php), so the selects must grow for the lock
   button's margin-left: auto to push right. */
#pd-filter-row .filter-row-selects {
  flex: 1;
}
.pd-filter-group-start {
  margin-left: 8px;
}

/* Archived rows stay visible, faded; the status select is a green Aktiv / gray
   Arxiv pill. */
#pd-table tr.pd-archived { opacity: 0.45; }
/* The checkbox column stays put while the table scrolls sideways: opaque
   background, z-index above the header's. */
#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);
}
/* Own scroll box so the header sticks inside it; min() subtracts the topbar,
   header and filters so it never forces a page scroll. */
.pd-table-wrap {
  max-height: min(70vh, calc(100vh - var(--topbar-h, 70px) - 260px));
  overflow-y: auto;
}
.pd-table-wrap #pd-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-elevated);
  z-index: 2;
}
#pd-table th.pd-col-blue { color: var(--accent); }
#pd-table th.pd-col-green { color: var(--success); }
#pd-table th.pd-col-red { color: var(--danger); }
/* Drag-to-resize: .data-table th is already position: relative. */
.pd-col-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -4px;
  width: 8px;
  cursor: col-resize;
  z-index: 3;
}
.pd-col-resizer:hover,
.pd-col-resizer.is-resizing {
  background: color-mix(in srgb, var(--accent) 35%, transparent);
}
.pd-table-wrap.is-col-resizing {
  cursor: col-resize;
  user-select: none;
}
#pd-table th[data-col] { cursor: grab; }
#pd-table th[data-col].pd-col-dragging { opacity: 0.4; cursor: grabbing; }
/* A <td>'s width is only a hint in an auto-layout table; the resize JS sizes
   this inline-block span instead. */
#pd-table .pd-cell-display {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.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;
}

/* Column picker: a floating checklist, one checkbox per toggleable column. */
.pd-columns-dropdown {
  position: relative;
}
.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; the lock button enables click-to-edit. */
.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);
}
@media (max-width: 639px) {
  /* Məhsul bazası on a phone is view-only (edit controls hidden, table locked).
   Search + filters share one 15-column grid (wrappers display: contents): search
   60% | Kateqoriya 40%; Platform | Vəziyyəti | Təchizatçı; count | Təmizlə | Görünüş. */
  .pd-page-header,
  #pd-lock-btn,
  #pd-table .pd-actions-col,
  #pd-bulk-bar, /* by id: the base .pd-bulk-bar display:flex comes later */
  #pd-table th:has(#pd-select-all),
  #pd-table td:has(.pd-row-select) {
    display: none;
  }
  #pd-filters {
    display: grid;
    grid-template-columns: repeat(15, minmax(0, 1fr));
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
  }
  #pd-filters .search-bar,
  #pd-filters .filter-row,
  #pd-filters .filter-row-selects {
    display: contents;
  }
  #pd-search {
    height: 34px;
    padding: 0 12px;
    font-size: 15px;
  }
  #pd-filters .search-bar input { grid-row: 1; grid-column: 1 / span 9; }
  /* The Kateqoriya picker's button (core.js) follows its hidden <select> and has no id. */
  #pd-category-filter + .fin-pick { grid-row: 1; grid-column: 10 / span 6; }
  #pd-platform-filter { grid-row: 2; grid-column: 1 / span 5; }
  #pd-status-filter { grid-row: 2; grid-column: 6 / span 5; }
  #pd-supplier-filter { grid-row: 2; grid-column: 11 / span 5; }
  #pd-visible-count { grid-row: 3; grid-column: 1 / span 9; margin-left: 4px; }
  #pd-filter-reset { grid-row: 3; grid-column: 10 / span 4; }
  .pd-columns-dropdown { grid-row: 3; grid-column: 14 / span 2; }
  /* Undo the desktop inline ch-widths and group gap; each control fills its cell. */
  #pd-category-filter + .fin-pick,
  #pd-platform-filter,
  #pd-supplier-filter,
  #pd-status-filter .ms-filter-trigger,
  #pd-filter-reset,
  #pd-columns-btn {
    width: 100% !important;
    height: 34px;
    min-width: 0;
    margin-left: 0;
  }
  #pd-status-filter { min-width: 0; }
  #pd-columns-btn { display: flex; justify-content: center; }
}

#pd-columns-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pd-columns-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  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);
}

@media (max-width: 639px) {
  /* Görünüş sits at the right edge: open its panel leftwards (after the base rule, or left: 0 wins). */
  .pd-columns-panel { left: auto; right: 0; }
}
/* One topic per column, side by side with a hairline between; 2 + 2 on phones. */
.pd-columns-panel:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(4, auto);
}
.pd-columns-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 6px;
}
.pd-columns-group + .pd-columns-group {
  border-left: 0.5px solid var(--separator);
}
@media (max-width: 639px) {
  .pd-columns-panel:not([hidden]) { grid-template-columns: repeat(2, auto); row-gap: 8px; }
  .pd-columns-group:nth-child(odd) { border-left: none; }
  .pd-columns-group:nth-child(n + 3) { border-top: 0.5px solid var(--separator); padding-top: 8px; }
}

/* ====== Product preview (Stock, Məhsul bazası) ====== */

.pv-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Each cell centers its link + copy icon, like the stat cells above it. */
.pv-mobile-links-row .pv-url-row {
  justify-content: center;
}
.pv-photo {
  width: 40px;
  height: 40px;
}
.pv-photo .pd-thumb-placeholder {
  width: 18px;
  height: 18px;
}
.pv-reserved-link {
  display: inline-block;
}
.pv-reserved-link:hover {
  text-decoration: underline;
}
/* Yolda qty + its order chip(s) on one row; the gap spaces the wrapped case. */
.pv-yolda-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
/* Product view modal: a compact mobile-only body (products.php/products.js);
   .pv-title-mobile (the SKU) replaces .pv-title-desktop below 640px. */
.pv-title-mobile { display: none; }
.pv-mobile-body { display: none; }
/* Photo beside the name, 40px like the list's .card-row-thumb. */
.pv-mobile-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.pv-mobile-photo {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.pv-mobile-photo .pd-thumb-placeholder {
  width: 20px;
  height: 20px;
}
.pv-mobile-name {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.pv-mobile-stat-row {
  display: flex;
  margin-bottom: 14px;
}
.pv-mobile-stat {
  flex: 1;
  text-align: center;
}
.pv-mobile-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.pv-mobile-stat-value {
  font-size: 16px;
  font-weight: 700;
}
@media (max-width: 639px) {
  .pv-title-desktop { display: none; }
  .pv-title-mobile { display: block; }
  .pv-mobile-body { display: block; }
  .pv-desktop-body { display: none; }
}

/* ====== Page: Sifarişlər ====== */

/* Sifarişlər: mobile keeps one summary-line card; desktop has a column per
   fact. customer-orders.js toggles .co-show-address (day filters: Dünən, Bu gün,
   Sabah), which swaps Tarix for Ünvan via grid-template-areas. */
.co-row-desktop-only { display: none; }
.co-tag {
  display: inline-block;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.co-row-empty { color: var(--text-secondary); }
/* Phones: Tip above a bold Cəmi, beside the status icon. Scoped to .co-row
   (.card-row-actions is shared). */
.co-row-mobile-tip-price { display: none; }
.co-row-mobile-total { display: none; }
/* Phones: Redaktə/Sil leave the row (the preview has them) and the status
   badge becomes a colored icon. */
.co-status-icon { display: none; }
/* Sifarişlər on a phone: the chip row + custom date range collapse into one native
   <select> beside "+ Yeni sifariş" (the h1 is hidden at this width). */
.co-date-filter-mobile { display: none; }
/* The topbar "+" is the phone's way to Yeni sifariş; wider screens keep the page button. */
@media (min-width: 640px) {
  #co-new-top { display: none; }
}
/* Sifarişlər status toggles (Açıq / Təsdiqləndi): multi-select icon chips with the
   rows' status glyphs; they lead the desktop chip row, sit beside search on a phone. */
.co-status-toggles { display: inline-flex; gap: 8px; }
.co-status-toggle {
  width: 32px;
  height: 32px;
  padding: 0;
  justify-content: center;
}
.co-status-toggle svg { width: 17px; height: 17px; flex: none; }
.co-status-toggle-pending:not(.active) svg { color: var(--warning); }
.co-status-toggle-confirmed:not(.active) svg { color: var(--accent); }
.co-filter-divider {
  width: 1px;
  height: 22px;
  margin: 0 4px;
  background: var(--separator);
}
.co-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.co-search-row .co-search { flex: 1; min-width: 0; margin-bottom: 0; }
/* The select-all box (desktop): 54px wide so its checkbox centres over the
   rows' own (16px row padding + half the 22px check column = 27px). */
.co-check-all {
  flex: 0 0 54px;
  height: 41px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.co-check-all input { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.co-check-all input:disabled { cursor: default; }
.co-status-toggles-mobile { display: none; }
/* Sifarişlər's grand total sits below the list, not inside, so the list's
   desktop internal scroll doesn't carry it away. */
.co-list-summary {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: right;
  font-size: 16px;
  font-weight: 700;
}
/* Sifariş baxışı: customer name + phone (h2) with Tip on a line below. */
.co-view-header-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
/* Keeps icon + title together on the left; .modal-header's space-between would
   spread all 3 children. */
.co-view-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
/* The only status indicator here, sized to the two text lines beside it;
   .co-status-icon's color-mix convention. */
.co-view-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  flex-shrink: 0;
}
.co-view-status-icon svg { width: 24px; height: 24px; }
.co-view-status-icon-pending {
  background: color-mix(in srgb, var(--warning) 18%, var(--bg-elevated));
  color: var(--warning);
}
.co-view-status-icon-confirmed {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated));
  color: var(--accent);
}
.co-view-status-icon-cancelled {
  background: color-mix(in srgb, var(--danger) 15%, var(--bg-elevated));
  color: var(--danger);
}
/* Tarix + Tip on one line, tarix first; the flex gap separates them. */
#co-view-header-type {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}
/* WhatsApp green, tinted the way .btn-icon-delete tints red. */
.co-contact-btn-whatsapp {
  background: color-mix(in srgb, #25d366 18%, var(--bg-elevated));
  color: #128c7e;
}
/* Contact popup: the title is the trigger (clickable only with a phone on file,
   see JS), revealing two links below it in normal flow. */
#co-view-modal-title[role="button"] {
  cursor: pointer;
}
.co-contact-popup {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
/* Sifarişə baxış buttons (up to 7): a 2-column grid at every width. DOM order is
   the reading order; per-row stretch keeps <form>-wrapped buttons the same size. */
#co-view-modal-backdrop .form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#co-view-modal-backdrop .form-actions .btn {
  width: 100%;
}
/* The <form> wrapper is the grid item; flex makes its button fill the row height. */
#co-view-modal-backdrop .form-actions form {
  display: flex;
}
/* "Mobil faktura" shortens to "Faktura" in a half-width phone cell (its copy icon tells it from the printed one). */
.co-view-btn-text-short { display: none; }
/* Kept for core.js to toggle, but zeroed so the empty div never adds
   padding/margin (the modal's height would shift). */
#co-cart-empty,
#co-edit-cart-empty,
#sell-cart-empty {
  padding: 0;
  margin-bottom: 0;
}
#co-view-modal-backdrop .form-actions .fin-sale-account {
  grid-column: 1 / -1;
  margin-right: 0;
}
/* An odd last button takes the whole row (widenLastOddAction, core.js). */
#co-view-modal-backdrop .form-actions > .is-wide {
  grid-column: 1 / -1;
}
/* Sifarişlər: bulk confirm — the bar and the sheet. */
.co-bulk-bar { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.co-bulk-bar[hidden] { display: none; }
.co-bulk-labels { display: inline-flex; align-items: center; justify-content: center; padding-left: 9px; padding-right: 9px; }
.co-bulk-labels svg { width: 16px; height: 16px; }
.co-bulk-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; max-height: 50dvh; overflow-y: auto; }
.co-bulk-modal { max-width: 680px; }
.co-bulk-line { display: grid; grid-template-columns: minmax(140px, 1fr) auto minmax(0, 190px) 72px; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 0.5px solid var(--separator); }
.co-bulk-who { display: flex; flex-direction: column; min-width: 0; }
.co-bulk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.co-bulk-date { font-size: 12px; color: var(--text-secondary); }
.co-bulk-where { font-size: 13px; color: var(--text-secondary); }
.co-bulk-where select { width: 100%; }
.co-bulk-sum { text-align: right; font-variant-numeric: tabular-nums; }
.co-bulk-total { text-align: right; margin-bottom: 8px; color: var(--text-secondary); }
.co-bulk-total b { color: var(--text); margin-left: 6px; }

/* Sifarişlər › "Etiket" (order-labels.js): the preview's button carries a
   small count of label files already there. */
.co-view-label-count {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.co-view-label-count[hidden] { display: none; }
@media (min-width: 640px) {
  .co-row-mobile-only { display: none; }
  .co-row {
    cursor: pointer;
    display: grid;
    grid-template-columns: 22px minmax(0, 100px) 84px minmax(0, 160px) 116px minmax(0, 1fr) 84px auto;
    grid-template-areas: "check type date customer phone products total actions";
    align-items: center;
    gap: 12px;
    /* Same floor as .order-row: badge-only rows aren't shorter. */
    min-height: 62px;
  }
  .co-row-desktop-only { display: block; }
  /* overflow:hidden clips the tag to its track; .co-tag's max-width alone
     doesn't. */
  .co-row-type { grid-area: type; overflow: hidden; }
  .co-row-type .co-tag { max-width: 100%; }
  .co-row-date { grid-area: date; font-size: 13px; color: var(--text-secondary); }
  .co-row-address {
    display: none;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    min-width: 0;
  }
  #co-list.co-show-address .co-row-date { display: none; }
  /* Flex: up to 2 stacked .dash-activity-chip rows (Ünvan + Qeyd); the
     per-order grid row simply grows. */
  #co-list.co-show-address .co-row-address { display: flex; grid-area: address; }
  #co-list.co-show-address .co-row {
    grid-template-columns: 22px minmax(0, 100px) minmax(0, 160px) 116px minmax(0, 1fr) minmax(0, 170px) 84px auto;
    grid-template-areas: "check type customer phone products address total actions";
  }
  /* A long name wraps to a second line (the 62px row fits two), then ends in "…". */
  .co-row-customer {
    grid-area: customer;
    font-weight: 600;
    line-height: 1.15;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
  }
  .co-row-check { grid-area: check; display: flex; align-items: center; justify-content: center; }
  .co-row-check input { width: 16px; height: 16px; cursor: pointer; }
  .co-row-phone { grid-area: phone; font-size: 13px; color: var(--text-secondary); }
  .co-row-products {
    grid-area: products;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 6px;
  }
  /* Name tags shrink and ellipsize first; .co-tag-more never shrinks, so "+N"
     stays visible. */
  .co-row-products .co-tag { flex-shrink: 1; min-width: 32px; }
  .co-row-products .co-tag-more { flex-shrink: 0; }
  .co-row-total { grid-area: total; font-weight: 600; text-align: right; }
  /* Plain auto (last track, no centering to protect); justify-self:end keeps
     the actions flush right. */
  .co-row .card-row-actions { grid-area: actions; justify-self: end; }
  .co-check-all.co-row-desktop-only { display: flex; }
  /* Zəng et/WhatsApp are for phones: desktop keeps the title inert (JS gates the
   click too). */
  #co-view-modal-title[role="button"] {
    cursor: default;
  }
}
@media (max-width: 639px) {
  .co-row-mobile-tip-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }
  .co-row-mobile-total {
    display: block;
    font-weight: 700;
    font-size: 15px;
  }
  .co-edit-trigger, .co-row-delete-form { display: none; }
  .co-status-badge-text { display: none; }
  .co-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    flex-shrink: 0;
  }
  .co-status-icon svg { width: 16px; height: 16px; }
  .co-status-icon-pending {
    background: color-mix(in srgb, var(--warning) 18%, var(--bg-elevated));
    color: var(--warning);
  }
  .co-status-icon-confirmed {
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated));
    color: var(--accent);
  }
  .co-status-icon-cancelled {
    background: color-mix(in srgb, var(--danger) 15%, var(--bg-elevated));
    color: var(--danger);
  }
  .co-filter-row { display: none; }
  .co-date-filter-mobile { display: inline-block; flex-shrink: 0; height: 42px; }
  #co-search { height: 42px; }
  .co-search-row { margin-bottom: 8px; } /* the base 16px would win over .phone-sticky-row's 8px */

  .co-page-header { display: none; }
  .co-status-toggles-mobile { display: inline-flex; }
  .co-status-toggles-mobile .co-status-toggle { width: 42px; height: 42px; }
  .co-status-toggles-mobile .co-status-toggle svg { width: 19px; height: 19px; }
  /* Yeni sifariş modal on a phone: same as the Sat modal above. */
  #co-modal-backdrop label[for="co-customer"],
  #co-modal-backdrop label[for="co-sale-type"] {
    display: none;
  }
  /* The Sat modal's value; this row also has Tarix, so re-check live. */
  #co-modal-backdrop #co-sale-type {
    margin-left: -3px;
  }
  /* Taller than Sat's modal (Tarix, Ünvan + Qeyd), so a smaller fixed cart
     height on phones; a bigger cart still scrolls inside. */
  #co-modal-backdrop .cart-table-wrap {
    height: 320px;
  }
  /* Sifarişi redaktə et modal on a phone: same fields, same rules as Yeni sifariş. */
  #co-edit-modal-backdrop label[for="co-edit-customer"],
  #co-edit-modal-backdrop label[for="co-edit-sale-type"] {
    display: none;
  }
  #co-edit-modal-backdrop #co-edit-sale-type {
    margin-left: -3px;
  }
  #co-edit-modal-backdrop .cart-table-wrap {
    height: 320px;
  }
  .co-view-btn-text-full { display: none; }
  .co-view-btn-text-short { display: inline; }
}
@media (max-width: 700px) {
  #co-modal-backdrop .modal:has(.fin-sale-account-inline) .cart-table-wrap { height: 300px; }
}

/* ====== Page: Orderlər, Yolda olan mallar, Maya dəyəri ====== */

/* Orderlər: the supplier name opens Təchizatçılar (contracts live there), not
   the order; text-colored, underlined on hover only. */
.order-row-supplier-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s;
}
.order-row-supplier-link:hover { text-decoration-color: currentColor; }
.incoming-row { cursor: pointer; }
/* Yolda olan mallar: desktop shows the full sub-line, mobile just
   supplier/qty/date; the "Order 0001" button shortens to the number. */
.incoming-row-mobile-only { display: none; }
.incoming-order-btn-text-short { display: none; }
/* Middle column: the order's documents (empty when none). The actions track
   has a floor (badge + 2 icon buttons) so the docs column, and its center,
   is the same on every row. */
.order-row {
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 420px) 1fr minmax(200px, auto);
  grid-template-areas: "main docs actions";
  align-items: center;
  gap: 12px;
  /* Floor at the icon-button rows' height (34px + 2×14px padding) so badge-only
     rows aren't shorter. */
  min-height: 62px;
}
.order-row .card-row-main { grid-area: main; min-width: 0; }
.order-row .card-row-docs { grid-area: docs; justify-self: center; }
.order-row .card-row-actions { grid-area: actions; justify-self: end; }
/* Status badge + mobile-only bold total; desktop hides the total. */
.order-row-badge-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.order-row-mobile-only { display: none; }
.order-row-mobile-total { display: none; }
.view-only .field-readonly {
  cursor: default;
  user-select: none;
}
/* Rezervdə is the one readonly field that's a link: undo the default cursor
   and no-select. */
.view-only .field-readonly.pv-reserved-link {
  cursor: pointer;
  user-select: auto;
}
/* The 6 top-level rows share one height, label + value centered. */
.view-only.form-card > .field-row,
.view-only.form-card > .field {
  min-height: 64px;
}
.view-only.form-card > .field-row {
  align-items: center;
}
/* Except the photo/SKU/Ad row: Ad can wrap, so top-align to keep photo and SKU
   on Ad's first line. */
.view-only.form-card > .field-row.pv-header-row {
  align-items: flex-start;
}
/* And the Anbar/Rezerv/Yolda row: Yolda's order chips make it taller. */
.view-only.form-card > .field-row.pv-stock-row {
  align-items: flex-start;
}
.view-only.form-card > .field {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Order edit modal — uploaded documents (invoice, packing list, ...). */
.po-doc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.po-doc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}
.po-doc-item-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.po-doc-item-link:hover { text-decoration: underline; }
.po-doc-item-pending {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.po-doc-upload-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.po-doc-upload-row input[type="text"] {
  flex: 1;
  min-width: 160px;
  border: 0.5px solid var(--separator);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 14px;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
}
/* The PO picker adds on pick (no add button), so it looks like an action. */
#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;
}
#landed-cost-analyze-status { margin: 8px 0 0; }
.landed-cost-analyze-field {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}
.landed-cost-analyze-field .btn { white-space: nowrap; }
.landed-cost-header-order {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-left: 10px;
  cursor: pointer;
}
.landed-cost-header-order:hover {
  text-decoration: underline;
}
.landed-cost-header-rate {
  display: flex;
  align-items: center;
  gap: 8px;
}
.landed-cost-header-rate > span:first-child {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
#landed-cost-rate-display {
  min-width: 56px;
  border-radius: 8px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  padding: 8px 10px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-align: right;
}
.landed-cost-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.landed-cost-section-header h2 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
/* Maliyyədən — Mal alışı payments tied to the order, then the checks. */
.landed-cost-finance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--separator);
}
.landed-cost-finance-main { min-width: 0; }
.landed-cost-finance-checks { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-size: 14px; }
.landed-cost-check { display: flex; justify-content: space-between; gap: 12px; color: var(--text-secondary); }
.landed-cost-check span:last-child { color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.landed-cost-check.is-ok span:last-child { color: var(--success, #34C759); }
.landed-cost-check.is-off span:last-child { color: var(--danger, #FF3B30); }
.landed-cost-expense-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--separator);
}
.landed-cost-expense-row:last-child { border-bottom: none; }
.landed-cost-expense-label {
  flex: 1;
  min-width: 0;
  border: none;
  background: var(--bg);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--font);
  color: var(--text);
}
.landed-cost-expense-amount { width: 72px; }
.landed-cost-expense-currency {
  border: none;
  background: var(--bg);
  border-radius: 8px;
  padding: 8px 6px;
  font-size: 13px;
  font-family: var(--font);
  color: var(--text);
  width: 68px;
}
#landed-cost-expenses:empty::before {
  content: "Hələ xərc əlavə edilməyib.";
  display: block;
  padding: 10px 0;
  font-size: 13px;
  color: var(--text-secondary);
}
@media (max-width: 639px) {
  .incoming-row-desktop-only { display: none; }
  .incoming-row-mobile-only { display: block; }
  .incoming-order-btn-text-full { display: none; }
  .incoming-order-btn-text-short { display: inline; }
  /* !important beats the selects' inline ch-width, which wrapped them on phones;
     flex: 1 1 0 splits the row evenly. The wrapper needs width:100% or it
     shrink-to-fits. */
  #incoming-filter-row .filter-row-selects {
    flex-wrap: nowrap;
    width: 100%;
  }
  #incoming-filter-row .incoming-cat-select {
    width: auto !important;
    flex: 1 1 0;
    min-width: 0;
  }
  .order-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "main actions"
      "docs docs";
    row-gap: 4px;
  }
  .order-row .card-row-docs {
    justify-self: stretch;
    justify-content: flex-start;
    margin-top: 2px;
  }
  .order-row-desktop-only { display: none; }
  .order-row-mobile-only { display: block; }
  .order-row-mobile-total {
    display: block;
    font-weight: 700;
    font-size: 15px;
  }
  /* Orderi sil is hidden on phones (easy to hit with a thumb); Bağla then fills
     .form-actions on its own. */
  #view-delete-form { display: none; }
  /* Orderlər on a phone: browsing only (receiving/editing hidden). #new-order-btn-2
   (empty state) stays — the only way to create a first order. */
  #new-order-btn,
  .order-row .edit-po-trigger,
  .order-row .receive-trigger {
    display: none;
  }
  .landed-cost-expense-row { flex-wrap: wrap; }
  .landed-cost-expense-label { flex-basis: 100%; }
}
@media (max-width: 480px) {
  .po-doc-upload-row { flex-direction: column; align-items: stretch; }
}
@media (max-width: 420px) {
  .landed-cost-analyze-field { flex: 1; }
  .landed-cost-analyze-field .btn { width: 100%; }
}

/* ====== Page: Satış tarixçəsi, Qaytarmalar ====== */

.sh-row-actions { white-space: nowrap; }
/* Told apart at a glance: Zəmanət green, Qaytar yellow (tinted like .btn-icon-delete). */
.btn-icon-warranty { background: color-mix(in srgb, var(--success) 14%, var(--bg-elevated)); color: #1f9d48; }
.btn-icon-return { background: color-mix(in srgb, #FFCC00 24%, var(--bg-elevated)); color: #a88400; }
.sh-row-actions .btn-icon + .btn-icon { margin-left: 6px; }


/* Qaytarmalar: a row opens a read-only preview of its sale (sale-returns.js). */
#sale-returns-tbody tr {
  cursor: pointer;
}

/* sale_types.php */
.sale-type-row-inactive .card-row-title,
.sale-type-row-inactive .card-row-sub {
  opacity: 0.55;
}

@media (max-width: 639px) {
  /* Satış tarixçəsi on a phone: PDF, bulk delete and the custom range are hidden; the
   rest take 2 rows via named grid areas (Müştəri+Mal, then Növü+İnterval+Hamısı). */
  /* With the h1 hidden and the PDF button gone the header is empty, so hide it
     (Mənfəət hesabatı's too). */
  #sales-history-header,
  #profit-header,
  #bulk-delete-btn,
  #history-date-from,
  #history-date-to {
    display: none;
  }
}

/* ====== Page: Satış kanalları ====== */

/* Satış kanalları: 3 near-square logo cards. */
.channel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.channel-card {
  background: var(--bg-elevated);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  aspect-ratio: 1 / 0.9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-decoration: none;
  color: var(--text);
}
.channel-card:hover { box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 10px 28px rgba(0,0,0,0.09); }
.channel-card-logo {
  width: 25%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 18%;
}
.channel-card-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* Not .table-wrap: applyScrollFrames() would shrink it to the leftover viewport
   (it sits low on the page). */
.shopify-linked-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 65vh;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.shopify-linked-wrap thead th {
  position: sticky;
  top: 0;
  background: var(--bg-elevated);
  z-index: 1;
}
@media (max-width: 639px) {
  .channel-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .channel-card { padding: 12px 6px; }
  .channel-card-name { font-size: 13px; }
}

/* ====== Page: Maliyyə ====== */

/* vat_liability.php */
.vat-custom-range {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vat-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 4px;
}
.vat-summary-card {
  flex: 1 1 260px;
}
.vat-summary-title {
  font-weight: 600;
  margin-bottom: 12px;
}

/* Maliyyə › Hesablar: headline figures (2×2 on a phone), one white box per
   account group — not .card-list, which applyScrollFrames() would cap. */
/* Loan plan cards: however many there are (5, or 6 with a mismatch), one
   row of equal widths. */
.finance-summary { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.finance-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
  margin-bottom: 18px;
}
.finance-group {
  background: var(--bg-elevated);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.finance-group-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  border-bottom: 0.5px solid var(--separator);
}
.finance-account-row {
  color: var(--text);
  text-decoration: none;
  padding-top: 11px;
  padding-bottom: 11px;
}
.finance-account-row:hover { background: color-mix(in srgb, var(--accent) 6%, var(--bg-elevated)); }
.finance-account-row .card-row-title { font-size: 15px; font-weight: 500; }
.finance-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
}
/* Təkrarlanan öhdəliklər: what each rule's debt account holds today. */
.finance-recurring-owed { font-size: 17px; font-weight: 700; margin-right: 10px; }
.finance-amount-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
}

/* Əməliyyatlar: the ledger left, a per-category summary of the filtered rows
   right (stacks on narrower screens). */
.finance-ledger-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}
.finance-ledger-main { min-width: 0; }
.finance-nowrap { white-space: nowrap; }
.finance-inline-form { display: inline; }
.finance-tag {
  display: inline-block;
  padding: 2px 9px;
  margin: 1px 4px 1px 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: color-mix(in srgb, var(--text-secondary) 14%, var(--bg-elevated));
  color: var(--text);
}
.finance-tag-expense { background: color-mix(in srgb, var(--danger) 12%, var(--bg-elevated)); }
.finance-tag-income { background: color-mix(in srgb, var(--success) 14%, var(--bg-elevated)); }
.finance-tag-debt { background: color-mix(in srgb, var(--warning) 18%, var(--bg-elevated)); }
.finance-summary-box { position: sticky; top: calc(var(--topbar-h, 64px) + 12px); }
#fe-summary-body { padding: 6px 16px 12px; }
.finance-sum-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 14px;
}
.finance-sum-total { border-top: 0.5px solid var(--separator); margin-top: 4px; padding-top: 9px; font-weight: 700; }
.finance-sum-group { border-top: 0.5px solid var(--separator); margin-top: 6px; padding-top: 4px; font-weight: 600; }
.finance-sum-cat { font-weight: 400; font-size: 13px; color: var(--text-secondary); padding: 2px 0 2px 12px; }
.finance-sum-cat .finance-amount { font-weight: 500; }

/* Yeni / Redaktə modal */
.finance-type-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--text-secondary) 12%, var(--bg-elevated));
}
/* Each type has its own light tint, a tone deeper when picked: Xərc red,
   Transfer blue, Borc girişi orange, Borc ödənişi purple, Mədaxil green. */
.finance-type-seg button {
  --seg-c: var(--text-secondary);
  flex: 1 1 auto;
  border: 0;
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  background: color-mix(in srgb, var(--seg-c) 9%, var(--bg-elevated));
  color: color-mix(in srgb, var(--seg-c) 75%, var(--text));
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.finance-type-seg button[data-type="expense"] { --seg-c: #FF3B30; }
.finance-type-seg button[data-type="transfer"] { --seg-c: #007AFF; }
.finance-type-seg button[data-type="loan_received"] { --seg-c: #FF9500; }
.finance-type-seg button[data-type="loan_payment"] { --seg-c: #AF52DE; }
.finance-type-seg button[data-type="income"] { --seg-c: #34C759; }
.finance-type-seg button:hover { background: color-mix(in srgb, var(--seg-c) 15%, var(--bg-elevated)); }
.finance-type-seg button.active {
  background: color-mix(in srgb, var(--seg-c) 26%, var(--bg-elevated));
  color: color-mix(in srgb, var(--seg-c) 55%, var(--text));
}
/* Mədaxil / Məxaric: in (green) or the owner's money out (red), a tone deeper when picked. */
.finance-flow-seg { display: flex; gap: 6px; margin: -6px 0 14px; }
.finance-flow-seg[hidden] { display: none; }
.finance-flow-space { visibility: hidden; }
.finance-flow-seg button {
  --seg-c: #34C759;
  flex: 1;
  border: 0;
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  background: color-mix(in srgb, var(--seg-c) 9%, var(--bg-elevated));
  color: color-mix(in srgb, var(--seg-c) 75%, var(--text));
  cursor: pointer;
}
.finance-flow-seg button[data-set-type="owner_out"] { --seg-c: #FF3B30; }
.finance-flow-seg button[data-set-type="loan_received"] { --seg-c: #FF9500; }
.finance-flow-seg button[data-set-type="loan_payment"] { --seg-c: #AF52DE; }
.finance-type-seg button[data-type="loan"] { --seg-c: #FF9500; }
.finance-flow-seg button.active { background: color-mix(in srgb, var(--seg-c) 26%, var(--bg-elevated)); color: color-mix(in srgb, var(--seg-c) 55%, var(--text)); }
/* Wider so the five tabs fit one row; faintly tinted with the picked tab's
   color, which also outlines that tab. */
#fe-modal-backdrop .modal {
  max-width: 560px;
  background: color-mix(in srgb, var(--fe-tint, transparent) 6%, var(--bg-elevated));
}
.finance-type-seg button.active,
.finance-flow-seg button.active { box-shadow: inset 0 0 0 1.5px var(--seg-c); }
/* Transfer: a round ⇄ on the line between Hardan and Hara (turned when
   stacked); a click swaps the two accounts. */
.fe-to-field { position: relative; }
/* Transfer: the columns part wider, so the arrow sits in the gap itself. */
.finance-form-grid[data-type="transfer"] { column-gap: 52px; }
.finance-form-grid[data-type="transfer"] .fe-date-field { max-width: calc(50% - 26px); }
.fe-transfer-arrow {
  position: absolute;
  left: -40px;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: -8px;
  border-radius: 50%;
  background: #007AFF;
  color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, #007AFF 6%, var(--bg-elevated));
  z-index: 1;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.fe-transfer-arrow:hover { background: #0062CC; }
.fe-transfer-arrow svg { width: 15px; height: 15px; }
.finance-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  margin-bottom: 12px;
  /* The JS min-height (same height for every type) leaves the spare room at the bottom. */
  align-content: start;
}
.finance-form-grid .field { margin: 0; }
/* The date has its row to itself, left-column wide; Order and Kim (they
   come and go) take a whole row so the pairs below keep their rows. */
.finance-form-grid .fe-date-field { grid-column: 1 / -1; max-width: calc(50% - 7px); }
.finance-form-grid .fe-full-row { grid-column: 1 / -1; }
.finance-preview:empty { display: none; }
.finance-preview-party-account { display: block; font-size: 12px; line-height: 1.2; }
.finance-preview {
  border: 0.5px solid var(--separator);
  border-radius: var(--radius-sm);
  margin: 12px 0;
  overflow: hidden;
}
.finance-preview-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  font-size: 14px;
  border-bottom: 0.5px solid var(--separator);
}
.finance-preview-row:last-child { border-bottom: none; }
.finance-preview-cost { font-size: 13px; color: var(--text-secondary); }
.finance-arrow { color: var(--text-secondary); padding: 0 2px; }
/* Təsvir (4th column) wraps: .data-table is nowrap, and a long description
   pushed Məbləğ off the right edge. */
#fe-table td:nth-child(4) { white-space: normal; min-width: 140px; }
#fe-table td:nth-child(4) .card-row-sub { white-space: normal; }
#fe-table td:nth-child(2), #fe-table td:nth-child(3) { white-space: normal; }

/* Əməliyyatlar on a phone, compact: two lines a row (account · category | amount,
   description | balance), dates as sticky day headings, a tap opens Redaktə et / Sil. */
#fe-table tr.fe-day-head { display: none; }
/* The row sheet (phone): Redaktə et / Sil / Ləğv et from the bottom, iOS-like. */
.fe-row-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  background: rgba(0, 0, 0, 0.32);
}
.fe-row-sheet[hidden] { display: none; }
.fe-row-sheet-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
}
.fe-row-sheet-btn {
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: 14px;
  font: inherit;
  font-size: 17px;
  color: var(--accent);
  background: var(--bg-elevated);
  cursor: pointer;
}
.fe-row-sheet-btn[hidden] { display: none; }
.fe-row-sheet-danger { color: var(--danger); }
.fe-row-sheet-cancel { font-weight: 600; margin-top: 4px; }

/* Əməliyyatlar's reset button: text on a wide screen, an icon on a phone. */
.fe-reset-icon { display: none; width: 17px; height: 17px; }
.fe-mobile-total { display: none; }

/* Sistem > Maliyyə admin lists (accounts by group, category tree) —
   stacked white boxes; same .finance-group box as the Hesablar page. */
.finance-admin-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
}
.finance-head-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.finance-cat-group-row { background: color-mix(in srgb, var(--text-secondary) 6%, var(--bg-elevated)); }
.finance-cat-row { padding-left: 28px; }
.finance-cat-row .card-row-title { font-size: 15px; font-weight: 500; }

.finance-look-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }

/* Hesablar > Borc və avanslar: a row's name links to its operations,
   debts get a Qrafik button; upcoming loan payments sit on top. */
.finance-row-link { color: inherit; text-decoration: none; min-width: 0; }
/* Kredit qrafiki (finance_loan.php) */
.finance-plan-paid td { color: var(--text-secondary); }
.finance-plan-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.finance-plan-form input { width: auto; flex: 1 1 120px; min-width: 0; }
.finance-plan-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; }
.finance-plan-tools textarea { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 13px; margin: 8px 0; }
/* The "link to plan month" note spans the whole row in the modal. */
.finance-form-grid .finance-plan-note { grid-column: 1 / -1; }
.finance-plan-note .checkbox-filter { white-space: normal; height: auto; line-height: 1.35; padding-top: 6px; padding-bottom: 6px; }
/* Hesablar = the kassa: one headline figure, left-aligned above the groups. */
.finance-kassa { display: inline-block; min-width: 220px; margin-bottom: 18px; text-align: left; padding: 16px 20px; }

/* Borc və avanslar: a Cəmi balans table whose lines open into their accounts,
   and the loan plan as a months grid (scrolls sideways, the name column stays put). */
.finance-balance { margin-bottom: 16px; }
.finance-balance-name { flex: 1; font-weight: 600; }
.finance-balance-name.is-asset { color: var(--success); }
.finance-balance-name.is-debt { color: var(--danger); }
.finance-balance-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; font-size: 14px; border-top: 0.5px solid var(--separator); }
.finance-balance-end { display: flex; align-items: center; gap: 10px; }
.finance-balance-total { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.finance-balance-total { font-weight: 700; font-size: 16px; }

/* Hesablar: Kassa qalığı + Tranzitdə side by side (wrap on a phone). */
.finance-kassa-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.finance-kassa-row .finance-kassa { margin-bottom: 0; }
a.finance-transit-card { color: inherit; text-decoration: none; }
a.finance-transit-card .stat-value { color: var(--text-secondary); }

/* Sistem > Maliyyə > Satış və tranzit */
.fss-body { padding: 12px 16px; }
.fss-body .field { max-width: 260px; margin-bottom: 6px; }
.fss-route { padding: 12px 16px; border-top: 0.5px solid var(--separator); }
.fss-route-head { display: flex; align-items: center; gap: 12px; }
.fss-type { flex: 0 0 150px; font-weight: 500; }
.fss-route-select { flex: 0 1 280px; }
.fss-allowed { margin-top: 8px; padding-left: 162px; }
.fss-route[data-ask="0"] .fss-allowed { display: none; }
.fss-allowed-list { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; }
.fss-allowed-item { display: inline-flex; align-items: center; gap: 6px; }
.fss-transit {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 110px minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 0.5px solid var(--separator);
}
.fss-mini { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-secondary); }
.fss-mini select, .fss-mini input { font-size: 15px; }
.fss-mini select { width: 100%; min-width: 0; }
/* Five fields don't fit beside the name on a narrow window: name on its own line, fields 2 × 2. */
@media (max-width: 1100px) {
  .fss-transit { grid-template-columns: 1fr 1fr; }
  .fss-transit > .fin-account-name { grid-column: 1 / -1; }
}

/* Avadanlıqlar — the equipment sheet. */
.fa-table .fa-name { font-weight: 500; }
.fa-table .fa-group { color: var(--text-secondary); white-space: nowrap; }
.fa-table .fa-forecast { color: var(--text-secondary); }
.fa-table tr.fa-off td { color: var(--text-secondary); }
.fa-table tr.fa-off .fa-name { text-decoration: line-through; }
/* The column headings stay at the top of the frame, like Cəmi at the bottom. */
.fa-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-elevated);
  box-shadow: inset 0 -1px 0 var(--separator);
}
.fa-table th.fa-actions-head::after { display: none; }
/* Cəmi stays at the bottom of the frame while the list scrolls; a sticky cell
   doesn't carry its border, so the line above it is a shadow. */
.fa-table tfoot td {
  font-weight: 600;
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: var(--bg-elevated);
  box-shadow: inset 0 1px 0 var(--separator);
}
.fa-danger { margin-top: 18px; }
.fa-inline { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 0.5px solid var(--separator); flex-wrap: wrap; }
.fa-inline .card-row-sub { flex: 1 1 260px; }

/* Sistem > Maliyyə > Avadanlıq qrupları */
.fag-row {
  display: grid;
  grid-template-columns: 1fr 130px 80px 32px;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  min-height: 52px;
  border-top: 0.5px solid var(--separator);
}
/* The header shares the rows' grid so each title sits over its column. */
.fag-row.fag-head { min-height: 0; border-top: 0; padding: 12px 16px 8px; }
.fag-head > :nth-child(2) { grid-column: span 2; white-space: nowrap; }
/* Same type as the other lists (16px, the app's font) — a name reads as
   plain text and only shows it's editable on hover/focus; the rate sits
   in a light filled box. */
.fag-row input {
  width: 100%;
  font-family: var(--font);
  font-size: 16px;
  color: var(--text);
  border: 0;
  border-radius: 8px;
  outline: none;
  padding: 7px 10px;
}
.fag-row input[type="text"] { background: transparent; margin-left: -10px; width: calc(100% + 10px); }
.fag-row input[type="text"]:hover { background: var(--bg); }
.fag-row input:focus { background: var(--bg); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.fag-row input::placeholder { color: var(--text-secondary); }
.fag-rate input { background: var(--bg); text-align: right; }
.fag-count { font-size: 14px; text-align: right; white-space: nowrap; }

/* "Kim" — a party account's people. */
.finance-balance-party { padding-left: 38px; color: var(--text-secondary); font-size: 14px; }
.finance-party-field { grid-column: 1 / -1; }
.fap-add { display: grid; grid-template-columns: 1fr 170px 130px 150px auto; gap: 10px; align-items: end; padding: 12px 16px; border-top: 0.5px solid var(--separator); }
.fap-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 0.5px solid var(--separator); }
.fap-row .fap-name { flex: 1; }
#fap { margin-top: 18px; }

/* Borc və avanslar — a per-person account: its two sides, then the people. */
.finance-party-split { display: flex; gap: 22px; flex-wrap: wrap; padding: 6px 0 4px 38px; font-size: 13px; color: var(--text-secondary); }
.finance-party-split strong { margin-left: 4px; font-size: 14px; }

/* Borc qaytardım: Əsas hissə | Faiz | Komissiya share one row (three
   columns), so this tab is as tall as the others. */
.finance-form-grid[data-type="loan_payment"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.finance-form-grid[data-type="loan_payment"] > .field { grid-column: span 3; }
.finance-form-grid[data-type="loan_payment"] > .fe-date-field,
.finance-form-grid[data-type="loan_payment"] > .fe-full-row,
.finance-form-grid[data-type="loan_payment"] > .finance-plan-note { grid-column: 1 / -1; }
.finance-form-grid[data-type="loan_payment"] > .field:has(#fe-amount),
.finance-form-grid[data-type="loan_payment"] > .field:has(#fe-interest),
.finance-form-grid[data-type="loan_payment"] > .field:has(#fe-commission) { grid-column: span 2; }

/* Borc qaytardım › "Hansı ay(lar)?": one chip per unpaid month of a recurring debt. */
.fe-months { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.fe-month:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated)); }

/* "+ hesab əlavə et" and the extra source rows (Xərc / Borc qaytardım). */
.fe-add-source {
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}
.fe-add-source[hidden] { display: none; }
.fe-source { display: grid; grid-template-columns: minmax(0, 1fr) 150px 28px; gap: 12px; align-items: center; margin-top: 6px; }
.fe-source-remove {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
}

/* Əməliyyatlar › Qalıq: the kassa (or the picked account) after each entry;
   rows that didn't move the kassa are faint. */
.fe-balance { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.fe-balance.fe-balance-same { opacity: 0.45; }

/* Kassa on a phone: a group heading folds its accounts (pages/finance.js). */
.kassa-fold-chevron { display: none; }

/* Kassa: the two totals on a soft tint, apart from the white account boxes;
   Tranzitdə's small yellow dot pulses while money is waiting there. */
.kassa-layout .finance-kassa { background: color-mix(in srgb, var(--accent) 7%, var(--bg-elevated)); }

/* Avadanlıqlar photos: a small square before the name (an empty slot keeps
   names lined up), and the large view on a click (pages/finance-assets.js →
   openPhotoViewer()). */
.fa-name-cell { display: flex; align-items: center; gap: 10px; }
.fa-thumb {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg);
  cursor: zoom-in;
}
.fa-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fa-thumb-empty { cursor: default; }

/* Borclar: Cəmi balans and Ödəniş təqvimi fold from their heads (open on
   arrival); folded, the head keeps a short note (the total, the count). */
.finance-fold > summary { cursor: pointer; list-style: none; user-select: none; }
.finance-fold > summary::-webkit-details-marker { display: none; }
.finance-fold > summary::after {
  content: '';
  width: 7px;
  height: 7px;
  margin: 3px 2px 0 10px;
  border-right: 1.6px solid var(--text-secondary);
  border-bottom: 1.6px solid var(--text-secondary);
  transform: rotate(45deg);
  transition: transform 0.15s;
  align-self: center;
}
.finance-fold:not([open]) > summary { border-bottom: none; padding-bottom: 12px; }
.finance-fold:not([open]) > summary::after { transform: rotate(-45deg); margin-top: 0; }
.finance-fold-note { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
.finance-fold[open] .finance-fold-note { display: none; }

/* Borclar: Ödəniş təqvimi (upcoming payments) as a calendar — this month and the next,
   Monday first, today's number in red, each payment a chip on its day. */
.finance-cal-box { margin-bottom: 16px; }
.finance-cal-older { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 16px 0; }
.finance-cal-older-label { font-size: 13px; font-weight: 600; color: var(--danger); }
.finance-cal-months { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 12px 16px 16px; }
.finance-cal-title { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.finance-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.finance-cal-wd { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-align: center; padding-bottom: 4px; }
.finance-cal-day {
  min-height: 64px;
  padding: 4px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 3%, transparent);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.finance-cal-day.is-blank { background: none; }
.finance-cal-day.is-past .finance-cal-num { color: var(--text-secondary); opacity: 0.6; }
.finance-cal-day.is-weekend .finance-cal-num { color: var(--text-secondary); }
.finance-cal-num {
  align-self: flex-end;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.finance-cal-day.is-today .finance-cal-num { background: var(--danger); color: #fff; opacity: 1; }
.finance-cal-chip {
  display: flex;
  flex-direction: column;
  padding: 3px 5px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.25;
  text-decoration: none;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
  min-width: 0;
}
.finance-cal-chip:hover { filter: brightness(0.96); }
.finance-cal-chip.is-loan { background: color-mix(in srgb, var(--warning) 20%, var(--bg-elevated)); }
.finance-cal-chip.is-late { background: color-mix(in srgb, var(--danger) 16%, var(--bg-elevated)); color: var(--danger); }
.finance-cal-older .finance-cal-chip { flex-direction: row; font-size: 12px; padding: 4px 8px; }
.finance-cal-chip-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finance-cal-chip-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Borclar: one card per loan plan (in place of the months grid). */
.finance-loans-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.finance-loans-summary .stat-card { text-align: left; padding: 14px 18px; }
.loan-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; margin-bottom: 18px; }
.loan-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  color: var(--text);
  text-decoration: none;
}
.loan-card:hover { box-shadow: var(--shadow), 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent); }
.loan-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.loan-card-name { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.loan-card-day { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.loan-card-amounts { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; color: var(--text-secondary); }
.loan-card-big { font-size: 20px; font-weight: 700; color: var(--danger); font-variant-numeric: tabular-nums; }
.loan-card-bar { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.loan-card-bar span { display: block; height: 100%; border-radius: 3px; background: var(--success); }
.loan-card-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--text-secondary); margin-top: -4px; }
.loan-card-next {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  background: color-mix(in srgb, var(--warning) 14%, var(--bg-elevated));
}
.loan-card-next.is-late { background: color-mix(in srgb, var(--danger) 14%, var(--bg-elevated)); color: var(--danger); }
.loan-card-next.is-done { background: color-mix(in srgb, var(--success) 14%, var(--bg-elevated)); color: var(--success); font-weight: 600; }
.loan-card-dots { display: flex; flex-wrap: wrap; gap: 4px; }
.loan-card-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--text) 25%, transparent);
}
.loan-card-dots span.is-paid { background: var(--success); border-color: var(--success); }
.loan-card-dots span.is-late { background: var(--danger); border-color: var(--danger); }
.loan-card-link { margin-top: auto; align-self: flex-end; font-size: 13px; font-weight: 600; color: var(--accent); }
.finance-fold-note { text-transform: none; letter-spacing: 0; }

/* Borclar › Cəmi balans as a balance sheet: ours | what we owe, every
   account in view (no per-section folding). Stacks on a phone. */
.bal-sheet { display: grid; grid-template-columns: 1fr 1fr; }
.bal-col { min-width: 0; padding: 4px 0 8px; }
.bal-col + .bal-col { border-left: 0.5px solid var(--separator); }
.bal-col-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.bal-col-head .finance-amount { font-size: 14px; letter-spacing: 0; }
.bal-group { padding: 6px 0 4px; }
.bal-group + .bal-group { border-top: 0.5px solid var(--separator); }
.bal-group-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 16px; font-weight: 600; }
.bal-item { padding: 3px 16px 3px 34px; }
.bal-item.is-zero { opacity: 0.45; }
.bal-plan-link { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; margin-right: 10px; }
.bal-plan-link:hover { text-decoration: underline; }
.bal-sheet .finance-party-split { padding-left: 34px; }
.bal-item .finance-balance-end > .finance-amount { min-width: 96px; text-align: right; }

/* Balance sheet groups fold from their head, with the same chevron as the boxes. */
.bal-group > summary { cursor: pointer; list-style: none; user-select: none; }
.bal-group > summary::-webkit-details-marker { display: none; }
.bal-group > summary::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  margin: -3px 2px 0 -8px;
  border-right: 1.5px solid var(--text-secondary);
  border-bottom: 1.5px solid var(--text-secondary);
  transform: rotate(45deg);
  transition: transform 0.15s;
}
.bal-group:not([open]) > summary::before { transform: rotate(-45deg); margin-top: 0; }
.bal-group > summary:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.bal-group > summary { justify-content: flex-start; gap: 8px; }
.bal-group > summary .finance-balance-name { margin-right: auto; }
.bal-sheet .finance-balance-name { color: var(--text); }

/* ƏDV öhdəliyi › ƏDV mövqeyi (admin): the VAT debt against its offsets. */
.vat-position { background: var(--bg-elevated); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 18px; max-width: 560px; }
.vat-position-head { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); border-bottom: 0.5px solid var(--separator); }
.vat-position-head span + span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.vat-position-row, .vat-position-total { display: flex; justify-content: space-between; gap: 12px; padding: 8px 16px; font-size: 14px; }
.vat-position-row + .vat-position-row { border-top: 0.5px solid var(--separator); }
.vat-position-row.is-minus span:first-child { color: var(--text-secondary); }
.vat-position-total { font-weight: 700; border-top: 0.5px solid var(--separator); }
.vat-position-total.is-need { color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--bg-elevated)); }
.vat-position-total.is-ok { color: var(--success); background: color-mix(in srgb, var(--success) 7%, var(--bg-elevated)); }
.vat-position-total:last-child { border-radius: 0 0 var(--radius) var(--radius); }
/* An amount never breaks across lines; the label wraps instead. */
.vat-position-row .num, .vat-position-total .num { white-space: nowrap; flex-shrink: 0; }
.bal-link-btn { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--accent); cursor: pointer; }
/* Borclar: an account row opens in place to show what its balance is made of. */
.bal-acc > summary { cursor: pointer; list-style: none; user-select: none; }
.bal-acc > summary::-webkit-details-marker { display: none; }
.bal-acc > summary .fin-account-name::after {
  content: '';
  width: 5px;
  height: 5px;
  margin: -2px 0 0 8px;
  border-right: 1.5px solid var(--text-secondary);
  border-bottom: 1.5px solid var(--text-secondary);
  transform: rotate(-45deg);
  transition: transform 0.15s;
  flex: none;
}
.bal-acc[open] > summary .fin-account-name::after { transform: rotate(45deg); margin-top: -4px; }
.bal-acc[open] > summary { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.bal-acc .finance-balance-party { font-size: 13px; }
.bal-acc-desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bal-acc-date { display: inline-block; min-width: 42px; color: var(--text-tertiary, var(--text-secondary)); font-variant-numeric: tabular-nums; }
.bal-acc-note { color: var(--text-secondary); font-size: 0.92em; }
/* "400 manatdan 160 manat qaytarılıb" on a part-paid borrowing */
.bal-acc-more { font-style: italic; }
/* Əməliyyatlar: show/hide the system-booked rows. */
.fe-auto-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); white-space: nowrap; cursor: pointer; }
@media (max-width: 639px) {
  /* Phone: the two dates share the line, Hesabla sits after them (it ran 11px off screen). */
  .vat-custom-range { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; width: 100%; }
  .vat-custom-range input[type="date"] { width: 100%; min-width: 0; }
  .finance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; }
  .finance-summary .stat-value { font-size: 19px; }
  /* Phone: the ledger as a stack of cards, not a sideways-scrolling table. */
  #fe-table thead { display: none; }
  #fe-table, #fe-table tbody { display: block; }
  #fe-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 10px;
    padding: 11px 14px;
    border-bottom: 0.5px solid var(--separator);
  }
  #fe-table tr[hidden] { display: none; }
  #fe-table tbody tr:last-child { border-bottom: none; }
  #fe-table td { padding: 0; border: none; white-space: normal; min-width: 0; }
  #fe-table td:nth-child(1) { grid-column: 1; grid-row: 1; font-size: 12px; color: var(--text-secondary); }
  #fe-table td:nth-child(2) { grid-column: 1; grid-row: 2; font-size: 14px; font-weight: 600; }
  #fe-table td:nth-child(3) { grid-column: 1; grid-row: 3; }
  #fe-table td:nth-child(4) { grid-column: 1 / -1; grid-row: 4; min-width: 0; font-size: 13px; }
  #fe-table td:nth-child(4):empty { display: none; }
  #fe-table td:nth-child(5) { grid-column: 2; grid-row: 1; align-self: end; font-size: 15px; }
  #fe-table td:nth-child(6) { grid-column: 2; grid-row: 2; font-size: 12px; }
  #fe-table td:nth-child(7) { grid-column: 2; grid-row: 3; justify-self: end; }
  .finance-ledger-main .table-wrap { overflow: clip; }
  /* clips the corners without breaking sticky */
  #fe-table tr.fe-day-head {
    display: block;
    position: sticky;
    top: calc(var(--topbar-h, 52px) + var(--fe-filter-h, 0px));
    z-index: 5;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-secondary) 7%, var(--bg-elevated));
    border-bottom: 0.5px solid var(--separator);
  }
  #fe-table tr.fe-day-head[hidden] { display: none; }
  #fe-table tr.fe-day-head td { display: block; padding: 0; font-size: inherit; color: inherit; font-weight: inherit; }
  #fe-table tr[data-id] {
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto;
    gap: 2px 8px;
    padding: 9px 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #fe-table tr[data-id]:active { background: color-mix(in srgb, var(--text-secondary) 8%, var(--bg-elevated)); }
  #fe-table tr[data-id] td:nth-child(1),
  #fe-table tr[data-id] td:nth-child(7) { display: none; }
  #fe-table tr[data-id] td:nth-child(2) {
    grid-column: 1; grid-row: 1; align-self: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #fe-table tr[data-id] td:nth-child(3) {
    grid-column: 2; grid-row: 1; align-self: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 13px; color: var(--text-secondary);
  }
  #fe-table tr[data-id] td:nth-child(3) .finance-tag {
    display: inline; padding: 0; margin: 0; background: none; border-radius: 0;
    font-size: inherit; font-weight: 400; color: inherit;
  }
  #fe-table tr[data-id] td:nth-child(3) .finance-tag::before { content: "· "; }
  #fe-table tr[data-id] td:nth-child(4) {
    grid-column: 1 / 3; grid-row: 2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 13px; color: var(--text-secondary);
  }
  #fe-table tr[data-id] td:nth-child(4) .card-row-sub { display: inline; font-size: inherit; color: inherit; white-space: nowrap; }
  #fe-table tr[data-id] td:nth-child(4) .fe-desc-text + .card-row-sub::before { content: " · "; }
  /* A payout: "A → B" takes the whole first line (its description only
     repeats it); "Tranzitdən köçürmə · komissiya N" goes under it. */
  #fe-table tr[data-type="settlement"] .fe-desc-text { display: none; }
  #fe-table tr[data-type="settlement"] td:nth-child(2) { grid-column: 1 / 3; }
  #fe-table tr[data-type="settlement"] td:nth-child(3) { grid-column: 1; grid-row: 2; }
  #fe-table tr[data-type="settlement"] td:nth-child(3) .finance-tag::before { content: none; }
  #fe-table tr[data-type="settlement"] td:nth-child(4) { grid-column: 2; grid-row: 2; }
  #fe-table tr[data-type="settlement"] td:nth-child(4) .card-row-sub::before { content: "· "; }
  #fe-table tr[data-id] td:nth-child(5) { grid-column: 3; grid-row: 1; align-self: center; }
  #fe-table tr[data-id] td:nth-child(6) { grid-column: 3; grid-row: 2; }
  /* Phone: every filter on one line, locked under the topbar while the list
   scrolls; the summary becomes one locked line of totals over the tab bar. */
  #fe-filter-row {
    position: sticky;
    top: var(--topbar-h, 52px);
    z-index: 15;
    margin: -18px -16px 12px;
    padding: 10px 16px;
    background: var(--bg);
  }
  /* width: 100% — a flex item with no width shrink-wraps, leaving a gap on the right */
  #fe-filter-row .filter-row-selects { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 6px; width: 100%; }
  /* sized by their text, shrinking together only when a long pick needs it */
  #fe-filter-row .fin-pick,
  #fe-filter-row #fe-range-preset { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; }
  #fe-filter-row .fin-pick > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #fe-date-from, #fe-date-to, #fe-filter-row .fe-auto-toggle { display: none; }
  #fe-reset { flex: 0 0 36px; width: 36px; height: auto; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
  #fe-reset .fe-reset-text { display: none; }
  #fe-reset .fe-reset-icon { display: block; }
  #fe-summary { display: none; }
  .fe-mobile-total {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--tabbar-h, 58px);
    z-index: 25;
    padding: 9px 16px;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 0.5px solid var(--separator);
  }
  .fe-mobile-total b { color: var(--text); font-weight: 600; }
  .fe-mobile-total b.profit-positive { color: var(--success); }
  .fe-mobile-total b.profit-negative { color: var(--danger); }
  /* the last rows clear the locked total line */
  .finance-ledger-main { padding-bottom: 40px; }
  #kassa-groups .finance-group-head { cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
  #kassa-groups .finance-group-head .finance-amount { display: inline-flex; align-items: center; }
  .kassa-fold-chevron {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: -3px 2px 0 10px;
    border-right: 1.6px solid var(--text-secondary);
    border-bottom: 1.6px solid var(--text-secondary);
    transform: rotate(45deg);
    transition: transform 0.15s;
  }
  #kassa-groups .finance-group.is-folded .kassa-fold-chevron { transform: rotate(-45deg); margin-top: 0; }
  #kassa-groups .finance-group.is-folded .finance-group-head { border-bottom: none; padding-bottom: 12px; }
  #kassa-groups .finance-group.is-folded .finance-account-row { display: none; }
  .finance-cal-day { min-height: 44px; padding: 2px; }
  .finance-cal-chip { padding: 0; height: 6px; border-radius: 3px; }
  .finance-cal-chip span { display: none; }
  .finance-loans-summary { grid-template-columns: 1fr; }
  .loan-cards { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  /* Phone: name and details get the full width; the figure and buttons
     go to a second line (figure left, buttons right). */
  .finance-recurring-row { flex-wrap: wrap; row-gap: 8px; }
  .finance-recurring-row .card-row-main { flex: 1 1 calc(100% - 34px); }
  .finance-recurring-row .card-row-actions { flex: 1 1 100%; padding-left: 34px; }
  .finance-recurring-row .finance-recurring-owed { margin-right: auto; }
  .finance-kassa-row .finance-kassa { flex: 1 1 140px; min-width: 0; }
  /* The "›" fell onto its own line under "Tranzitdə · N gözləyir". */
  .finance-transit-chevron { display: none; }
  .fss-route-head { flex-wrap: wrap; }
  .fss-type { flex-basis: 100%; }
  .fss-route-select { flex: 1 1 100%; }
  .fss-allowed { padding-left: 0; }
  .fag-row { grid-template-columns: 1fr 100px 32px; }
  .fag-count { display: none; }
  .fag-head > :nth-child(2) { white-space: normal; }
  /* Phone: name + today's value only (the sheet's month columns need a wide screen). */
  .fa-table .fa-m-hide { display: none; }
  .fa-table td:first-child { white-space: normal; }
  .fa-table { width: 100%; }
  .fap-add { grid-template-columns: 1fr 1fr; }
  .fap-add .fap-who { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .finance-ledger-layout { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .finance-form-grid[data-type="transfer"] .fe-date-field { max-width: none; }
  .fe-transfer-arrow { left: 50%; top: -21px; margin: 0 0 0 -14px; transform: rotate(90deg); }
  .finance-form-grid { grid-template-columns: 1fr; }
  .finance-form-grid .fe-date-field { max-width: none; }
  .finance-form-grid[data-type="loan_payment"] { grid-template-columns: 1fr; }
  .finance-form-grid[data-type="loan_payment"] > .field { grid-column: auto; }
}

@media (min-width: 900px) {
  /* Kassa, desktop: the two totals stacked on the left, the groups beside them. */
  .kassa-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
  .kassa-layout .finance-kassa-row { flex-direction: column; margin-bottom: 0; }
  .kassa-layout .finance-kassa { display: block; min-width: 0; }
}
@media (max-width: 1000px) {
  .finance-cal-months { grid-template-columns: 1fr; }
}
@media (min-width: 1100px) {
  /* Wide screens: as many equal columns as there are loans (max 4), no empty slot. */
  .loan-cards { grid-template-columns: repeat(var(--loan-cols, 3), minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .bal-sheet { grid-template-columns: 1fr; }
  .bal-col + .bal-col { border-left: none; border-top: 0.5px solid var(--separator); }
}

/* ====== Page: Ayarlar ====== */

/* Sistem hub (system.php): admin-only links reusing .card-list/.card-row. */
.system-menu-item {
  color: inherit;
  text-decoration: none;
}
.system-menu-item:hover { background: var(--bg); }
.system-menu-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated));
  color: var(--accent);
}
.system-menu-icon svg { width: 20px; height: 20px; }
/* A brand's own logo (Shopify, Birmarket, Tap.az) fills the whole tile. */
.system-menu-logo { padding: 0; background: none; object-fit: cover; }
.system-menu-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-secondary);
}

/* Sistem: two panes like macOS System Settings — sections left, the selected
   one's pages right in grouped cards; a phone shows one pane at a time. */
.sys-split { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.sys-nav {
  background: var(--bg-elevated); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: calc(var(--topbar-h, 70px) + 16px);
}
.sys-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: 15px;
}
.sys-nav-item:hover { background: var(--bg); }
.sys-nav-item.active { background: var(--accent); color: var(--accent-text); }
.sys-nav-title { flex: 1; min-width: 0; }
.sys-nav-chevron { width: 16px; height: 16px; color: var(--text-secondary); display: none; }
.sys-app-icon {
  width: 28px; height: 28px; border-radius: 7px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.sys-app-icon svg { width: 17px; height: 17px; }
.sys-nav-item.active .sys-app-icon { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.55); }
.sys-app-icon-lg { width: 64px; height: 64px; border-radius: 15px; }
.sys-app-icon-lg svg { width: 36px; height: 36px; }
.sys-hero {
  background: var(--bg-elevated); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 26px 24px 22px; text-align: center; margin-bottom: 18px;
}
.sys-hero h2 { margin: 12px 0 0; font-size: 24px; }
.sys-hero p { margin: 0 auto; max-width: 520px; color: var(--text-secondary); font-size: 14px; line-height: 1.45; }
.sys-group-title {
  margin: 18px 4px 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-secondary);
}
.sys-card { margin-bottom: 12px; }
.system-menu-icon.sys-tint { background: color-mix(in srgb, var(--sys-c) 14%, var(--bg-elevated)); color: var(--sys-c); }
.sys-back { display: none; margin-bottom: 12px; color: var(--accent); text-decoration: none; font-size: 15px; }

/* Ayarlar frame: a settings page in the right pane — breadcrumb first, its
   own heading a size down (the outer "Ayarlar" is the page title). */
.sys-page > .breadcrumb { margin-top: 0; }
.sys-page .page-header h1 { font-size: 24px; }
.sys-page .page-header { margin-top: 4px; }

/* Bərpa (restore.php): picking a copy */
.restore-pick { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.restore-pick input { flex: none; }
.restore-option { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0; font-size: 14px; }
.restore-form .btn { margin-top: 12px; }
@media (max-width: 700px) {
  .sys-split { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sys-panes, .sys-pane { min-width: 0; }
  .sys-nav { position: static; }
  .sys-nav-item { padding: 10px; }
  .sys-nav-item.active { background: none; color: var(--text); }
  .sys-nav-item.active .sys-app-icon { box-shadow: none; }
  .sys-nav-chevron { display: block; }
  .sys-split:not(.is-pane) .sys-panes { display: none; }
  .sys-split.is-pane .sys-nav { display: none; }
  .sys-back { display: inline-block; }
  .sys-split.is-pane { margin-top: -8px; }
  .sys-split.is-page .sys-nav { display: none; }
}

/* ====== Login and error pages ====== */

/* Login / forgot / reset password: standalone pages outside the app shell. */
.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;
}
/* The error page (src/ErrorPage.php) uses the auth card's frame. */
.error-page { text-align: center; }
.error-page-code { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; color: var(--text-secondary); line-height: 1; }
.error-page h1 { font-size: 21px; margin: 12px 0 8px; }
.error-page p { margin: 0 0 12px; font-size: 15px; color: var(--text-secondary); line-height: 1.45; }
.error-page-ref { font-size: 13px; }
.error-page-ref strong { color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.error-page-actions { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.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);
}

/* ====== Page: Soruş ====== */

/* Soruş — questions to Claude about this system's data. History on the left,
   the thread on the right with the composer pinned under it; on a phone the
   history goes below. */
.ask-spend { font-size: 13px; color: var(--text-secondary); }
.ask-spend strong { color: var(--text); font-weight: 600; }
.ask-balance { text-decoration: none; }
.ask-balance-low, .ask-balance-low strong { color: var(--warning); }
.ask-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.ask-history {
  background: var(--bg-elevated);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 8px;
  position: sticky;
  top: 16px;
  max-height: calc(100dvh - 160px);
  overflow-y: auto;
}
.ask-history-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin: 0 10px 8px; }
.ask-history-empty { font-size: 13px; color: var(--text-secondary); margin: 0 10px; }
.ask-history-list { list-style: none; margin: 0; padding: 0; }
.ask-history-item {
  display: block;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
}
.ask-history-item:hover { background: var(--bg); }
.ask-history-item.active { background: var(--accent); color: var(--accent-text); }
.ask-history-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.3;
}
.ask-history-meta { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.ask-history-item.active .ask-history-meta { color: inherit; opacity: 0.8; }

.ask-main { min-width: 0; display: flex; flex-direction: column; }
.ask-thread { display: flex; flex-direction: column; gap: 22px; padding-bottom: 16px; }
.ask-empty-lead { font-size: 15px; color: var(--text-secondary); margin: 0 0 14px; max-width: 640px; line-height: 1.45; }
.ask-examples { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-example { text-align: left; font-weight: 500; }

.ask-turn { display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 16px; }
.ask-q {
  align-self: flex-end;
  max-width: min(640px, 85%);
  background: var(--accent);
  color: var(--accent-text);
  padding: 10px 14px;
  border-radius: 18px 18px 4px 18px;
  font-size: 15px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ask-a {
  background: var(--bg-elevated);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.ask-a > :first-child { margin-top: 0; }
.ask-a > :last-child { margin-bottom: 0; }
.ask-a p, .ask-a ul, .ask-a ol { margin: 0 0 10px; }
.ask-a ul, .ask-a ol { padding-left: 22px; }
.ask-a li { margin: 2px 0; }
.ask-a h3 { font-size: 16px; margin: 14px 0 6px; }
.ask-a h4 { font-size: 15px; margin: 12px 0 4px; }
.ask-a hr { border: none; border-top: 1px solid var(--separator); margin: 12px 0; }
.ask-a code { font-size: 13px; background: var(--bg); padding: 1px 5px; border-radius: 5px; }
.ask-table-wrap { overflow-x: auto; margin: 4px 0 12px; }
.ask-table { border-collapse: collapse; font-size: 14px; min-width: 100%; }
.ask-table th, .ask-table td { padding: 6px 10px; border-bottom: 1px solid var(--separator); text-align: left; vertical-align: top; }
.ask-table th { font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.ask-table th.num, .ask-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ask-table tbody tr:last-child td { border-bottom: none; }
.ask-loading { color: var(--text-secondary); }
.ask-thinking::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
  animation: ask-pulse 1s ease-in-out infinite;
}
@keyframes ask-pulse { 50% { opacity: 0.25; transform: scale(0.7); } }
.ask-error { color: var(--danger); }
.ask-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); padding: 0 4px; }
.ask-source { background: var(--bg-elevated); border: 1px solid var(--separator); border-radius: 999px; padding: 2px 8px; }
.ask-source[title] { cursor: help; }
.ask-source-sql { border-style: dashed; }
.ask-source-error { color: var(--danger); }
.ask-cost { margin-left: auto; font-variant-numeric: tabular-nums; }

.ask-composer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  background: var(--bg);
}
.ask-composer textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  font: inherit;
  font-size: 16px; /* 16px: iOS doesn't zoom the page on focus */
  line-height: 1.4;
  padding: 10px 14px;
  border: 1px solid var(--separator);
  border-radius: 20px;
  background: var(--bg-elevated);
  color: var(--text);
  max-height: 200px;
}
.ask-composer textarea:focus { outline: none; border-color: var(--accent); }
.ask-send { border-radius: 20px; }
.ask-delete-form { text-align: right; }
.ask-delete { background: none; border: none; color: var(--danger); font: inherit; font-size: 13px; cursor: pointer; padding: 4px 0; }
@media (max-width: 639px) {
  /* On a phone the fixed tab bar covers the bottom — the composer pins just above it. */
  .ask-composer { bottom: calc(var(--tabbar-h, 58px) + env(safe-area-inset-bottom)); padding-bottom: 12px; }
}

@media (max-width: 899px) {
  .ask-layout { grid-template-columns: minmax(0, 1fr); }
  .ask-history { position: static; max-height: none; order: 2; }
  .ask-a { padding: 12px 14px; }
  .ask-q { max-width: 92%; }
}

/* ====== Money colors ====== */

.profit-positive { color: var(--success); font-weight: 600; }
.profit-negative { color: var(--danger); font-weight: 600; }

/* ====== Page: Hesabatlar ====== */

/* Picker triggers (wireCustomerPicker/wireProductPicker, core.js) need the filter
   row's pill look; .picker-trigger assumes a parent that provides it. */
#history-filter-row .picker-trigger,
#profit-filter-row .picker-trigger {
  width: auto;
  max-width: 140px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
}
/* Anbar hesabatı on a phone: category + subcategory share a 50/50 grid row like
   Stock's (a % width on a flex item lost to the <select>'s own size). */
.inventory-cat-row {
  display: flex;
  gap: 8px;
}
#inventory-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-elevated);
  z-index: 2;
}
#inventory-table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 2;
}
/* Stoku azalmış on a phone: "Stockda bitənlər" shortens to "0" and the 3 filters
   take an even 3-column grid. */
.ls-filter-text-short { display: none; }
.ls-budget-summary {
  color: var(--text-secondary);
  margin-bottom: 16px;
  font-size: 14px;
}
.ls-budget-summary #ls-budget-amount {
  font-weight: 700;
  font-size: 16px;
}

/* ---------- Maliyyə › Hesabat (finance_report.php) ---------- */
.rpt-header { flex-wrap: wrap; gap: 12px; }
.rpt-period { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.rpt-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 16px; }
.rpt-tabs a { padding: 7px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; background: var(--bg-elevated); box-shadow: var(--shadow); }
.rpt-tabs a.is-active { background: var(--accent); color: var(--accent-text); }
.rpt-period-label { margin-left: auto; font-size: 13px; color: var(--text-secondary); }
.rpt-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.rpt-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--radius); background: var(--bg-elevated); box-shadow: var(--shadow); min-width: 0; }
.rpt-kpi-label { font-size: 13px; font-weight: 600; }
.rpt-kpi-en, .rpt-en { font-size: 11px; color: var(--text-secondary); font-weight: 400; }
.rpt-en { margin-left: 6px; }
.rpt-kpi-value { font-size: 22px; font-weight: 700; margin-top: 4px; }
.rpt-kpi-sub { font-size: 12px; color: var(--text-secondary); }
.rpt-warn { color: var(--warning); }
.rpt-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.rpt-two > .rpt-box { margin-bottom: 0; }
.rpt-box { background: var(--bg-elevated); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 14px; min-width: 0; }
.rpt-box-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); border-bottom: 0.5px solid var(--separator); }
.rpt-box-head span + span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.rpt-box-foot { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px 14px; font-size: 13px; color: var(--text-secondary); border-top: 0.5px solid var(--separator); }
.rpt-box-foot b { color: var(--text); }
.rpt-note { padding: 10px 16px 14px; font-size: 12px; color: var(--text-secondary); margin: 0; }
.rpt-empty { padding: 16px; color: var(--text-secondary); font-size: 14px; margin: 0; }
.rpt-donut-wrap { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px 16px; }
.rpt-donut { width: 170px; height: 170px; }
.rpt-leg { display: flex; flex-direction: column; gap: 7px; font-size: 13px; min-width: 0; }
.rpt-leg div { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.rpt-leg i { width: 10px; height: 10px; border-radius: 3px; }
.rpt-leg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-leg-pct { color: var(--text-secondary); min-width: 44px; text-align: right; }
.rpt-leg-amt { min-width: 84px; text-align: right; }
.rpt-chart { display: block; width: 100%; height: auto; padding: 8px 8px 4px; }
.rpt-risks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px 16px 16px; }
.rpt-risk { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 10px; background: var(--bg); }
.rpt-risk-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; }
.rpt-risk b { display: block; font-size: 13px; }
.rpt-risk div span { font-size: 12px; color: var(--text-secondary); }
.rpt-risk-val { font-weight: 700; white-space: nowrap; }
.rpt-risk.is-red .rpt-risk-dot { background: var(--danger); }
.rpt-risk.is-red .rpt-risk-val { color: var(--danger); }
.rpt-risk.is-orange .rpt-risk-dot { background: var(--warning); }
.rpt-risk.is-orange .rpt-risk-val { color: var(--warning); }
.rpt-risk.is-green .rpt-risk-dot { background: var(--success); }
.rpt-risk.is-green .rpt-risk-val { color: var(--success); }
.rpt-pl td, .rpt-pl th { white-space: nowrap; }
.rpt-pl th a { color: inherit; text-decoration: none; }
.rpt-pl .is-cur { background: color-mix(in srgb, var(--accent) 7%, var(--bg-elevated)); }
.rpt-pl tr.rpt-total td { font-weight: 700; }
.rpt-pl tr.rpt-key td { font-weight: 700; background: var(--bg); }
.rpt-pl tr.rpt-key td.is-cur { background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.rpt-pl tr.rpt-minor td:first-child { color: var(--text-secondary); padding-left: 18px; }
.rpt-pl tr.rpt-sub td { font-size: 12px; color: var(--text-secondary); }
.rpt-pl tr.rpt-sub td:first-child { padding-left: 36px; }
.rpt-empty-cell { color: var(--text-secondary); opacity: 0.4; }
.rpt-xp { font: inherit; font-weight: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.rpt-xp::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid var(--text-secondary); border-bottom: 1.5px solid var(--text-secondary); transform: rotate(-45deg); transition: transform 0.15s; }
.rpt-xp[aria-expanded="true"]::before { transform: rotate(45deg); margin-top: -3px; }
.rpt-mbar { display: inline-block; width: 60px; height: 6px; border-radius: 3px; background: var(--bg); vertical-align: middle; margin-right: 6px; overflow: hidden; }
.rpt-mbar span { display: block; height: 100%; background: var(--success); border-radius: 3px; }
.rpt-name { white-space: normal; min-width: 220px; }
.rpt-pill { display: inline-block; min-width: 22px; text-align: center; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--bg); color: var(--text-secondary); }
.rpt-pill.is-A { background: color-mix(in srgb, var(--success) 16%, var(--bg-elevated)); color: var(--success); }
.rpt-pill.is-B { background: color-mix(in srgb, var(--warning) 16%, var(--bg-elevated)); color: var(--warning); }
.rpt-be { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 4px; }
.rpt-be .rpt-note { padding: 0; }
.rpt-be-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.rpt-track { position: relative; height: 12px; border-radius: 6px; background: var(--bg); overflow: hidden; }
.rpt-track span { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--success); }
.rpt-track span.is-short { background: var(--warning); }
.rpt-track span.is-bad { background: var(--danger); }
.rpt-list { display: flex; flex-direction: column; gap: 6px; padding: 10px 16px; font-size: 13px; }
.rpt-list-row { display: flex; justify-content: space-between; gap: 12px; border-bottom: 0.5px solid var(--separator); padding-bottom: 5px; }
.rpt-share { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 6px; }
.rpt-share-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 90px; gap: 12px; align-items: center; font-size: 13px; }
.rpt-share-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-share-bars { display: flex; flex-direction: column; gap: 3px; }
.rpt-share-bars span { display: block; height: 8px; border-radius: 3px; min-width: 2px; }
.rpt-share-bars .is-stock, .rpt-legend i.is-stock { background: color-mix(in srgb, var(--text-secondary) 55%, transparent); }
.rpt-share-bars .is-gp, .rpt-legend i.is-gp { background: var(--success); }
.rpt-share-val { font-size: 12px; color: var(--text-secondary); text-align: right; }
.rpt-legend { display: flex; gap: 16px; padding: 4px 16px 14px; font-size: 12px; color: var(--text-secondary); }
.rpt-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.rpt-table-wrap { overflow-x: auto; }
.rpt-risk.is-gray .rpt-risk-dot { background: var(--text-secondary); opacity: .5; }
.rpt-risk.is-gray .rpt-risk-val { color: var(--text-secondary); }
.rpt-pl tr.rpt-sub2 td:first-child { padding-left: 44px; }
.rpt-ex .rpt-ex-total { font-weight: 600; border-left: 1px solid var(--separator); }
.rpt-ex td.num, .rpt-ex th.num { padding-left: 6px; padding-right: 8px; }
.rpt-ex td.rpt-empty-cell { color: var(--text-tertiary, var(--text-secondary)); opacity: .6; }
.rpt-ex .rpt-ex-share { color: var(--text-secondary); }
/* Hesabat: sections fold from their heads (remembered per device, core.js). */
.rpt-fold > summary { cursor: pointer; list-style: none; user-select: none; }
.rpt-fold > summary::-webkit-details-marker { display: none; }
.rpt-fold > summary > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.rpt-fold > summary > span:first-child::before {
  content: '';
  width: 6px;
  height: 6px;
  margin: -3px 1px 0 1px;
  border-right: 1.6px solid var(--text-secondary);
  border-bottom: 1.6px solid var(--text-secondary);
  transform: rotate(45deg);
  transition: transform 0.15s;
  flex: none;
}
.rpt-fold:not([open]) > summary { border-bottom: none; padding-bottom: 12px; }
.rpt-fold:not([open]) > summary > span:first-child::before { transform: rotate(-45deg); margin-top: 0; }
.rpt-two > .rpt-fold:not([open]) { align-self: start; }
/* Hesabat › Dinamika: shared controls, two charts a row, plain SVG. */
.dy-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 6px; }
.dy-seg { display: inline-flex; background: var(--bg-elevated); border-radius: 999px; box-shadow: var(--shadow); padding: 3px; }
.dy-seg button { border: 0; background: none; padding: 6px 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.dy-seg button.is-active { background: var(--accent); color: var(--accent-text); }
.dy-dates { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.dy-field { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.dy-zoom { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.dy-zoom b { color: var(--text); }
.dy-hint { margin: 0 0 12px; }
.dy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.dy-grid > .rpt-box { margin-bottom: 0; }
.dy-chart { position: relative; padding: 8px 8px 0; }
.dy-svg { display: block; width: 100%; height: auto; touch-action: pan-y; user-select: none; cursor: crosshair; }
.dy-svg .dy-grid { stroke: var(--separator); stroke-width: 1; }
.dy-svg .dy-zero { stroke: var(--text-secondary); stroke-width: 1; opacity: .5; }
.dy-svg .dy-axis { font-size: 10px; fill: var(--text-secondary); }
.dy-svg .dy-val { font-size: 10px; font-weight: 600; }
.dy-svg .dy-line { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.dy-svg .dy-dot { fill: var(--bg-elevated); stroke-width: 2; }
.dy-svg .dy-guide { stroke: var(--text-secondary); stroke-dasharray: 3 3; }
.dy-svg .dy-sel { fill: var(--accent); fill-opacity: .12; }
.dy-tip { position: absolute; top: 10px; z-index: 2; min-width: 190px; padding: 8px 10px; border-radius: 10px; background: var(--bg-elevated); box-shadow: 0 4px 16px rgba(0, 0, 0, .15); font-size: 12px; pointer-events: none; }
.dy-tip div { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.dy-tip b { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }
.dy-tip i, .dy-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dy-tip-date { font-weight: 700; color: var(--text-secondary); margin-bottom: 2px; }
.dy-tip-sum { border-top: .5px solid var(--separator); margin-top: 3px; padding-top: 3px !important; font-weight: 600; }
.dy-delta { color: var(--text-secondary); margin-top: 2px; }
.dy-delta.up { color: var(--success); }
.dy-delta.down { color: var(--danger); }
.dy-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 4px 16px 12px; font-size: 12px; color: var(--text-secondary); }
.dy-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dy-legend b { color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 639px) {
  /* Shared by Satış tarixçəsi (5 controls) and Mənfəət hesabatı (7). */
  #history-filter-row .filter-row-selects,
  #profit-filter-row .filter-row-selects {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    /* Without a definite width this grid (a flex item) shrink-wraps and the 1fr
       tracks size off content instead of splitting the row. */
    width: 100%;
  }
  #history-filter-row .filter-row-selects {
    grid-template-areas:
      "type type customer customer product product"
      "interval interval interval reset reset reset";
  }
  #profit-filter-row .filter-row-selects {
    grid-template-areas:
      "type type customer customer product product"
      "category category category category category category"
      "interval interval interval reset reset reset";
  }
  #history-type-filter { grid-area: type; }
  /* The picker triggers (core.js) follow their hidden <select> and have no id. */
  #history-customer + .picker-trigger { grid-area: customer; }
  #history-add-product + .picker-trigger { grid-area: product; }
  #history-category-filter + .fin-pick { grid-area: category; }
  #history-range-preset { grid-area: interval; }
  #history-reset { grid-area: reset; }
  #history-filter-row .filter-row-selects select,
  #history-filter-row .filter-row-selects button,
  #profit-filter-row .filter-row-selects select,
  #profit-filter-row .filter-row-selects button {
    width: 100%;
  }
  /* Undo desktop's max-widths (picker 140px, Kateqoriya 260px), which would fight width: 100% here. */
  #history-filter-row .picker-trigger,
  #profit-filter-row .picker-trigger,
  #profit-filter-row .fin-pick {
    max-width: none;
  }
  /* Empty on phones (h1 and PDF hidden); its margin would leave a gap above the filters. */
  .inventory-page-header {
    display: none;
  }
  #inventory-print-btn {
    display: none;
  }
  .inventory-cat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .inventory-cat-select {
    width: 100% !important;
    flex: none;
    min-width: 0;
  }
  /* Phones get a flat height cap (applyScrollFrames() is desktop-only); with the
     sticky thead/tfoot the totals row stays pinned. */
  #inventory-table-wrap {
    max-height: 60vh;
    overflow-y: auto;
  }
  #low-stock-filter-row .filter-row-selects {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  #low-stock-filter-row .checkbox-filter,
  #low-stock-filter-row .filter-select {
    width: 100%;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
    /* No shadow: at a 6px gap the 24px-blur shadows overlap into a dark strip. */
    box-shadow: none;
  }
  #ls-supplier-filter {
    padding-left: 8px;
    padding-right: 8px;
  }
  .ls-filter-text-full { display: none; }
  .ls-filter-text-short { display: inline; }
}
@media (max-width: 900px) {
  .rpt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rpt-two, .rpt-risks { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .rpt-donut-wrap { grid-template-columns: 1fr; justify-items: center; }
  .rpt-leg { width: 100%; }
  .rpt-share-row { grid-template-columns: 110px minmax(0, 1fr) 70px; }
}
@media (max-width: 1100px) {
  .dy-grid { grid-template-columns: 1fr; }
}

/* ====== Print ====== */

@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; }
}

/* Hesabatlar › Best sellerlər, here and not in its section: it must follow the print rule
   above, so its 11 columns keep this padding on paper too (avoids a barely-there scroll). */
.best-sellers-table th,
.best-sellers-table td {
  padding: 10px 10px;
}

/* ====== States that must win (set by JS) ====== */

.is-dragging {
  position: relative; z-index: 20; background: var(--bg-elevated);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); border-radius: var(--radius-sm); transition: none !important;
}