/* Tex.az Stock — design system (redesign, 2026-10).
   Brand: Tex.az brand book (iCloud Tex.az/Sistem/Logo və brendbook) — yellow #F5DF4C as a
   fill/marker/logo (never text on white), brand grey #939596 for the wordmark, graphite as the
   working colour. Plus Jakarta Sans (self-hosted; has ə/Ə and ₼). Dark mode follows the system.
   docs/plans/redesign.md has the rules: JS hook class names stay, print output is not styled here. */

/* ====== Font ====== */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(assets/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(assets/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

:root {
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --bg: #F4F4F2;
  --surface: #FFFFFF;
  --surface-2: #F1F1EE;          /* hover, filled controls, inset wells */
  --surface-3: #E7E7E3;
  --text: #17171A;
  --muted: #6B6C70;
  --faint: #9C9DA1;
  --line: #E4E4E0;               /* card and table edges */
  --line-strong: #D3D3CE;        /* input borders */
  --separator: rgba(23, 23, 26, 0.08);

  --primary: #17171A;            /* graphite: primary buttons, active chips */
  --primary-hover: #2E2E33;
  --on-primary: #FFFFFF;
  --brand: #F5DF4C;              /* Tex.az yellow */
  --brand-strong: #E8CC1E;
  --brand-soft: rgba(245, 223, 76, 0.30);
  --brand-grey: #939596;
  --ink-on-brand: #17171A;

  --ok: #15803D;
  --ok-soft: rgba(22, 163, 74, 0.12);
  --warn: #C26A00;
  --warn-soft: rgba(234, 88, 12, 0.12);
  --star-orange: #FF9500;        /* Stock's orange star: --warn reads as brown, red-orange as red */
  --err: #DC2626;
  --err-soft: rgba(220, 38, 38, 0.10);
  --info: #2563EB;
  --info-soft: rgba(37, 99, 235, 0.10);

  --shadow-sm: 0 1px 2px rgba(23, 23, 26, 0.05);
  --shadow: 0 1px 2px rgba(23, 23, 26, 0.04), 0 3px 12px rgba(23, 23, 26, 0.045);
  --shadow-hover: 0 2px 4px rgba(23, 23, 26, 0.05), 0 10px 28px rgba(23, 23, 26, 0.09);
  --shadow-pop: 0 2px 6px rgba(23, 23, 26, 0.06), 0 18px 48px rgba(23, 23, 26, 0.18);
  --focus-ring: 0 0 0 3px rgba(245, 223, 76, 0.65);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 7px;
  --logo-bg: #FFFFFF;            /* channel logos are drawn for white — same in dark mode */
  --logo-yellow: #F5DF4C;        /* the Tex.az mark, whatever accent Görünüş picks */
  --sidebar-w: 240px;
  --tabbar-h: 60px;
  color-scheme: light dark;
}

/* Dark: the system's, unless Görünüş says Açıq; Görünüş › Qaranlıq forces it (v8.3). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111112;
    --surface: #1B1B1D;
    --surface-2: #242427;
    --surface-3: #2E2E32;
    --text: #F4F4F5;
    --muted: #A2A2A9;
    --faint: #707077;
    --line: #2B2B2F;
    --line-strong: #3B3B40;
    --separator: rgba(255, 255, 255, 0.08);

    --primary: #F5DF4C;          /* dark mode: the yellow carries the action */
    --primary-hover: #FFE96B;
    --on-primary: #17171A;
    --brand-soft: rgba(245, 223, 76, 0.16);
    --brand-grey: #B4B6B7;

    --ok: #4ADE80;
    --ok-soft: rgba(74, 222, 128, 0.14);
    --warn: #FB923C;
    --warn-soft: rgba(251, 146, 60, 0.16);
    --star-orange: #FF9F0A;
    --err: #F87171;
    --err-soft: rgba(248, 113, 113, 0.16);
    --info: #60A5FA;
    --info-soft: rgba(96, 165, 250, 0.16);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.03);
    --shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.4), 0 12px 30px rgba(0, 0, 0, 0.45);
    --shadow-pop: 0 2px 6px rgba(0, 0, 0, 0.4), 0 20px 50px rgba(0, 0, 0, 0.6);
    --focus-ring: 0 0 0 3px rgba(245, 223, 76, 0.45);
  }
}
:root[data-theme="dark"] {
    --bg: #111112;
    --surface: #1B1B1D;
    --surface-2: #242427;
    --surface-3: #2E2E32;
    --text: #F4F4F5;
    --muted: #A2A2A9;
    --faint: #707077;
    --line: #2B2B2F;
    --line-strong: #3B3B40;
    --separator: rgba(255, 255, 255, 0.08);

    --primary: #F5DF4C;          /* dark mode: the yellow carries the action */
    --primary-hover: #FFE96B;
    --on-primary: #17171A;
    --brand-soft: rgba(245, 223, 76, 0.16);
    --brand-grey: #B4B6B7;

    --ok: #4ADE80;
    --ok-soft: rgba(74, 222, 128, 0.14);
    --warn: #FB923C;
    --warn-soft: rgba(251, 146, 60, 0.16);
    --star-orange: #FF9F0A;
    --err: #F87171;
    --err-soft: rgba(248, 113, 113, 0.16);
    --info: #60A5FA;
    --info-soft: rgba(96, 165, 250, 0.16);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.03);
    --shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.4), 0 12px 30px rgba(0, 0, 0, 0.45);
    --shadow-pop: 0 2px 6px rgba(0, 0, 0, 0.4), 0 20px 50px rgba(0, 0, 0, 0.6);
    --focus-ring: 0 0 0 3px rgba(245, 223, 76, 0.45);
  }

* { 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;
  -moz-osx-font-smoothing: grayscale;
}
/* 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%;
}
button, input, select, textarea { font-family: inherit; }
::selection { background: var(--brand-soft); }

body {
  padding-bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom));
}

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* 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(--muted);
  margin-bottom: 20px;
  line-height: 1.45;
}

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

/* ====== Shell: sidebar (≥900px), topbar + tab bar (phone/tablet), page header ====== */

/* Görünüş › Rəng (v8.3, UiPrefs::ACCENTS): the accent replaces Tex.az yellow on active rows, stars,
   selection, focus and (dark mode) the main button. The logo and the Lokal badge stay yellow (--logo-yellow). */
:root[data-accent="orange"] { --brand: #FF9F43; --brand-strong: #F08A24; --brand-soft: rgba(255, 159, 67, 0.22); --ink-on-brand: #17171A; --focus-ring: 0 0 0 3px rgba(255, 159, 67, 0.5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent="orange"] { --primary: #FF9F43; --primary-hover: #FFB065; --on-primary: #17171A; --brand-soft: rgba(255, 159, 67, 0.18); } }
:root[data-theme="dark"][data-accent="orange"] { --primary: #FF9F43; --primary-hover: #FFB065; --on-primary: #17171A; --brand-soft: rgba(255, 159, 67, 0.18); }
:root[data-accent="red"] { --brand: #F0605D; --brand-strong: #E04440; --brand-soft: rgba(240, 96, 93, 0.22); --ink-on-brand: #FFFFFF; --focus-ring: 0 0 0 3px rgba(240, 96, 93, 0.5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent="red"] { --primary: #F0605D; --primary-hover: #F37D7A; --on-primary: #FFFFFF; --brand-soft: rgba(240, 96, 93, 0.18); } }
:root[data-theme="dark"][data-accent="red"] { --primary: #F0605D; --primary-hover: #F37D7A; --on-primary: #FFFFFF; --brand-soft: rgba(240, 96, 93, 0.18); }
:root[data-accent="pink"] { --brand: #EE6BA6; --brand-strong: #E04D8F; --brand-soft: rgba(238, 107, 166, 0.22); --ink-on-brand: #FFFFFF; --focus-ring: 0 0 0 3px rgba(238, 107, 166, 0.5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent="pink"] { --primary: #EE6BA6; --primary-hover: #F186B6; --on-primary: #FFFFFF; --brand-soft: rgba(238, 107, 166, 0.18); } }
:root[data-theme="dark"][data-accent="pink"] { --primary: #EE6BA6; --primary-hover: #F186B6; --on-primary: #FFFFFF; --brand-soft: rgba(238, 107, 166, 0.18); }
:root[data-accent="purple"] { --brand: #9B7BF2; --brand-strong: #8460EA; --brand-soft: rgba(155, 123, 242, 0.22); --ink-on-brand: #FFFFFF; --focus-ring: 0 0 0 3px rgba(155, 123, 242, 0.5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent="purple"] { --primary: #9B7BF2; --primary-hover: #AD93F4; --on-primary: #FFFFFF; --brand-soft: rgba(155, 123, 242, 0.18); } }
:root[data-theme="dark"][data-accent="purple"] { --primary: #9B7BF2; --primary-hover: #AD93F4; --on-primary: #FFFFFF; --brand-soft: rgba(155, 123, 242, 0.18); }
:root[data-accent="blue"] { --brand: #4C8DF6; --brand-strong: #2F76EC; --brand-soft: rgba(76, 141, 246, 0.22); --ink-on-brand: #FFFFFF; --focus-ring: 0 0 0 3px rgba(76, 141, 246, 0.5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent="blue"] { --primary: #4C8DF6; --primary-hover: #6CA2F8; --on-primary: #FFFFFF; --brand-soft: rgba(76, 141, 246, 0.18); } }
:root[data-theme="dark"][data-accent="blue"] { --primary: #4C8DF6; --primary-hover: #6CA2F8; --on-primary: #FFFFFF; --brand-soft: rgba(76, 141, 246, 0.18); }
:root[data-accent="teal"] { --brand: #2CC1B4; --brand-strong: #1FA89C; --brand-soft: rgba(44, 193, 180, 0.22); --ink-on-brand: #17171A; --focus-ring: 0 0 0 3px rgba(44, 193, 180, 0.5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent="teal"] { --primary: #2CC1B4; --primary-hover: #52CCC2; --on-primary: #17171A; --brand-soft: rgba(44, 193, 180, 0.18); } }
:root[data-theme="dark"][data-accent="teal"] { --primary: #2CC1B4; --primary-hover: #52CCC2; --on-primary: #17171A; --brand-soft: rgba(44, 193, 180, 0.18); }
:root[data-accent="green"] { --brand: #45C46B; --brand-strong: #2FAE55; --brand-soft: rgba(69, 196, 107, 0.22); --ink-on-brand: #17171A; --focus-ring: 0 0 0 3px rgba(69, 196, 107, 0.5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent="green"] { --primary: #45C46B; --primary-hover: #66CF86; --on-primary: #17171A; --brand-soft: rgba(69, 196, 107, 0.18); } }
:root[data-theme="dark"][data-accent="green"] { --primary: #45C46B; --primary-hover: #66CF86; --on-primary: #17171A; --brand-soft: rgba(69, 196, 107, 0.18); }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* The Tex.az mark: three rounded bars (Nav::mark()), and the grey wordmark beside it. */
.brand-mark { display: block; flex-shrink: 0; }
.brand-mark rect { fill: var(--logo-yellow); }
.brand-word {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--brand-grey);
  line-height: 1;
}

/* Local copies only (app.env = local): a small badge so it's never mistaken for the live site. */
.env-badge {
  flex-shrink: 0;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--logo-yellow);
  color: #17171A;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover, .icon-btn.active { background: var(--surface-2); color: var(--text); }
/* Çıxış is a CSRF-checked POST so another site can't log you out. */
.topbar-logout-form { display: inline-flex; margin: 0; }

.sidebar { display: none; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--separator);
  padding-top: env(safe-area-inset-top);
}
.topbar-inner { padding: 9px 12px 9px 16px; }
.topbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
}
.topbar-brand { display: inline-flex; flex-shrink: 0; }
.topbar-brand .brand-mark { width: 25px; height: 20px; }
.app-title {
  min-width: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A page's own "+" beside its title ($topbarAction, header.php); ≥900px the page header has it. */
.topbar-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-block: -4px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  flex-shrink: 0;
}
.topbar-action svg { width: 17px; height: 17px; stroke-width: 2.4; }
.topbar-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}

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

/* Phone tab bar: the active tab's icon sits in a yellow pill; Tex.az (home) is the brand mark. */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--separator);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
}
.tab {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 2px 2px 0;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.tab-icon {
  width: 52px;
  height: 30px;
  padding: 4px 15px;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}
.tab.active { color: var(--text); }
.tab.active .tab-icon { background: var(--brand); color: var(--ink-on-brand); }
.tab-home .tab-icon { padding: 6px 13px; }
.tab-home .tab-icon rect { fill: var(--brand-grey); }
.tab-home.active .tab-icon rect { fill: var(--ink-on-brand); }

/* Pieces only the phone interface shows (mobile.css): never from 768px. */
@media (min-width: 768px) {
  .phone-only, .m-sheet, .m-scrim { display: none !important; }
}
@media (min-width: 768px) {
  body {
    padding-left: var(--sidebar-w);
    padding-bottom: 24px;
  }
  .topbar, .tabbar { display: none; }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 25;
    display: flex;
    flex-direction: column;
    width: var(--sidebar-w);
    background: var(--surface);
    border-right: 1px solid var(--line);
  }
  .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px 22px 16px;
  }
  .sidebar-brand .brand-mark { width: 31px; height: 25px; }
  .sidebar-brand .env-badge { margin-left: auto; }
  .sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 12px 14px;
    scrollbar-width: thin;
    scrollbar-color: var(--surface-3) transparent;
  }
  .nav-group + .nav-group { margin-top: 14px; }
  .nav-group-title {
    padding: 0 10px 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--faint);
  }
  .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 10px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--text);
    transition: background 0.12s ease;
  }
  .nav-link-label {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-link-icon { width: 18px; height: 18px; color: var(--muted); }
  img.nav-link-icon { border-radius: 5px; object-fit: contain; background: var(--logo-bg); }
  a.nav-link:hover { background: var(--surface-2); }
  .nav-link.active { background: var(--brand-soft); font-weight: 650; }
  .nav-link.active .nav-link-icon { color: var(--text); }
  .nav-link.active::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--brand-strong);
  }
  .nav-count {
    margin-left: auto;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--warn-soft);
    color: var(--warn);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .nav-alarm {
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--err);
    box-shadow: 0 0 0 3px var(--err-soft);
  }
  .nav-item-with-add { position: relative; }
  /* Ulduzlular (v8.3): the ☆ shows on hover, over the row's count/dot; ★ filled when starred. */
  .nav-row { position: relative; }
  /* Ulduzlular sit right under Ana səhifə, no title. */
  .nav-group + .nav-favs { margin-top: 0; }
  .nav-star {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--faint);
    cursor: pointer;
    opacity: 0;
  }
  .nav-item-with-add .nav-star { right: 33px; }
  .nav-star svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
  .nav-row.is-fav .nav-star { color: var(--brand-strong); }
  .nav-row.is-fav .nav-star svg { fill: currentColor; }
  .nav-row:hover .nav-star, .nav-star:focus-visible { opacity: 1; }
  .nav-star:hover { background: var(--surface-3); color: var(--text); }
  .nav-row.is-fav .nav-star:hover { color: var(--brand-strong); }
  .nav-row:hover .nav-link { padding-right: 38px; }
  .nav-row.nav-item-with-add:hover .nav-link { padding-right: 64px; }
  .nav-row:hover .nav-count, .nav-row:hover .nav-alarm { visibility: hidden; }
  .nav-item-with-add .nav-link { padding-right: 40px; }
  .nav-link-add {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    color: var(--muted);
  }
  .nav-link-add svg { width: 16px; height: 16px; stroke-width: 2.2; }
  .nav-link-add:hover { background: var(--surface-3); color: var(--text); }
  .sidebar-foot {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px 14px;
    border-top: 1px solid var(--line);
  }
  .sidebar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 6px 0 0 4px;
  }
  .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--ink-on-brand);
    font-size: 12.5px;
    font-weight: 700;
  }
  .sidebar-user-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
  }
  .sidebar-user-name {
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sidebar-user-role { font-size: 12px; color: var(--muted); }
  /* Soruş, Ayarlar, Çıxış: three icons side by side, closer than the avatar's gap. */
  .sidebar-user > .icon-btn, .sidebar-user .topbar-logout-form .icon-btn { width: 28px; height: 28px; }
  .sidebar-user > .icon-btn svg, .sidebar-user .topbar-logout-form .icon-btn svg { width: 18px; height: 18px; }
  .sidebar-user > .icon-btn + .icon-btn,
  .sidebar-user > .icon-btn + .topbar-logout-form { margin-left: -6px; }

  .content { padding: 30px 32px 40px; }
}
/* 768–1279px: the sidebar folds to an icon rail (labels as tooltips), so the page keeps the width
   its desktop layouts need. */
@media (min-width: 768px) and (max-width: 1279px) {
  :root { --sidebar-w: 76px; }
  .sidebar-brand { justify-content: center; padding: 20px 0 14px; }
  .sidebar-brand .brand-word,
  .sidebar-brand .env-badge,
  .nav-group-title,
  .nav-link-label,
  .sidebar-user-text,
  .nav-link-add,
  .nav-star { display: none; }
  .nav-row:hover .nav-link, .nav-row.nav-item-with-add:hover .nav-link { padding-right: 0; }
  .nav-group + .nav-favs { padding-top: 0; border-top: 0; }
  .nav-row:hover .nav-count, .nav-row:hover .nav-alarm { visibility: visible; }
  .sidebar-nav { padding: 2px 10px 12px; scrollbar-width: none; }
  .sidebar-nav::-webkit-scrollbar { display: none; }
  .nav-group + .nav-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--separator); }
  .nav-link { justify-content: center; padding: 9px 0; }
  .nav-item-with-add .nav-link { padding-right: 0; }
  .nav-link-icon { width: 20px; height: 20px; }
  .nav-link.active::before { left: -10px; }
  .nav-count {
    position: absolute;
    top: 2px;
    right: 6px;
    min-width: 17px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 15px;
  }
  .nav-alarm { position: absolute; top: 7px; right: 14px; }
  .sidebar-foot { padding: 10px 10px 14px; }
  .sidebar-user { flex-direction: column; gap: 6px; margin-top: 4px; padding: 6px 0 0; }
  .content { padding: 26px 24px 40px; }
}
/* Görünüş › İkonlu dar panel (v8.3): the 768–1279 icon rail on a wide screen too (same rules). */
@media (min-width: 1280px) {
  :root[data-nav-rail] { --sidebar-w: 76px; }
  :root[data-nav-rail] .sidebar-brand { justify-content: center; padding: 20px 0 14px; }
  :root[data-nav-rail] .sidebar-brand .brand-word, :root[data-nav-rail] .sidebar-brand .env-badge, :root[data-nav-rail] .nav-group-title, :root[data-nav-rail] .nav-link-label, :root[data-nav-rail] .sidebar-user-text, :root[data-nav-rail] .nav-link-add, :root[data-nav-rail] .nav-star { display: none; }
  :root[data-nav-rail] .nav-row:hover .nav-link, :root[data-nav-rail] .nav-row.nav-item-with-add:hover .nav-link { padding-right: 0; }
  :root[data-nav-rail] .nav-group + .nav-favs { padding-top: 0; border-top: 0; }
  :root[data-nav-rail] .nav-row:hover .nav-count, :root[data-nav-rail] .nav-row:hover .nav-alarm { visibility: visible; }
  :root[data-nav-rail] .sidebar-nav { padding: 2px 10px 12px; scrollbar-width: none; }
  :root[data-nav-rail] .sidebar-nav::-webkit-scrollbar { display: none; }
  :root[data-nav-rail] .nav-group + .nav-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--separator); }
  :root[data-nav-rail] .nav-link { justify-content: center; padding: 9px 0; }
  :root[data-nav-rail] .nav-item-with-add .nav-link { padding-right: 0; }
  :root[data-nav-rail] .nav-link-icon { width: 20px; height: 20px; }
  :root[data-nav-rail] .nav-link.active::before { left: -10px; }
  :root[data-nav-rail] .nav-count {
    position: absolute;
    top: 2px;
    right: 6px;
    min-width: 17px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 15px;
  }
  :root[data-nav-rail] .nav-alarm { position: absolute; top: 7px; right: 14px; }
  :root[data-nav-rail] .sidebar-foot { padding: 10px 10px 14px; }
  :root[data-nav-rail] .sidebar-user { flex-direction: column; gap: 6px; margin-top: 4px; padding: 6px 0 0; }
}
/* Görünüş › Sıx panel: tighter rows and gaps. Sayğacları gizlət: no counts / dots in the menu. */
:root[data-nav-dense] .nav-link { padding-top: 4px; padding-bottom: 4px; }
:root[data-nav-dense] .nav-group + .nav-group { margin-top: 8px; }
:root[data-nav-dense] .nav-group-title { padding-bottom: 3px; }
@media (min-width: 768px) and (max-width: 1279px) {
  :root[data-nav-dense] .nav-link { padding-top: 6px; padding-bottom: 6px; }
  :root[data-nav-dense] .nav-group + .nav-group { margin-top: 5px; padding-top: 5px; }
}
@media (min-width: 1280px) {
  :root[data-nav-dense][data-nav-rail] .nav-link { padding-top: 6px; padding-bottom: 6px; }
  :root[data-nav-dense][data-nav-rail] .nav-group + .nav-group { margin-top: 5px; padding-top: 5px; }
}
:root[data-nav-nobadges] .sidebar .nav-count,
:root[data-nav-nobadges] .sidebar .nav-alarm,
:root[data-nav-nobadges] .m-menu-item .nav-count,
:root[data-nav-nobadges] .m-menu-item .nav-alarm { display: none; }

@media (min-width: 1500px) {
  .content { padding-left: 48px; padding-right: 48px; }
}

/* Sistem sub-pages: one click back to the Sistem hub. */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 10px;
}
.breadcrumb a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; text-decoration-color: var(--brand-strong); text-underline-offset: 3px; }
.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: 20px;
}
.page-header h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0;
}
.page-header-count {
  font-size: 0.6em;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: normal;
}
.page-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ====== 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(64px + env(safe-area-inset-top));
  right: 16px;
  z-index: 60;
  max-width: min(380px, calc(100vw - 32px));
  margin: 0;
  padding: 13px 18px 13px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid currentColor;
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: var(--shadow-pop);
  animation: flash-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (min-width: 768px) {
  .flash { top: 22px; right: 24px; }
}
.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 { color: var(--ok); }
.flash-error { color: var(--err); }
/* In-flow banners (.form-banner) borrow the flash colours but sit in the page. */
.form-banner.flash-success { background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent); }
.form-banner.flash-error { background: var(--err-soft); border: 1px solid color-mix(in srgb, var(--err) 25%, transparent); }

/* 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: 13px 16px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--err) 22%, transparent);
  background: var(--err-soft);
  color: var(--err);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  text-decoration: none;
  transition: background 0.15s ease;
}
.alarm-banner svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}
/* The banner's own icon as a tile, as in Ana səhifə's Diqqət list. */
.alarm-banner > svg { width: 32px; height: 32px; margin: 0; padding: 7px; border-radius: 9px; background: var(--surface); }
.alarm-banner { align-items: center; padding: 10px 16px 10px 10px; }
.alarm-banner strong { font-weight: 700; }
a.alarm-banner:hover { background: color-mix(in srgb, var(--err) 16%, var(--surface)); }
/* Orange variant — a payment due in 1–2 days (partials/finance_alarm.php). */
.alarm-banner-warning { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); }
a.alarm-banner-warning:hover { background: color-mix(in srgb, var(--warn) 18%, var(--surface)); }

/* Dashboard "Növbəti ödəniş": calm at 3–4 days; "Ödə ›" at the end. */
.alarm-banner-info { background: var(--surface); border-color: var(--line); color: var(--text); box-shadow: var(--shadow-sm); }
.alarm-banner-info svg { color: var(--text); }
a.alarm-banner-info:hover { background: var(--surface-2); }
.alarm-banner-action { margin-left: auto; padding-left: 12px; font-weight: 700; white-space: nowrap; }
.alarm-banner-info .alarm-banner-action { color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop, .modal-backdrop > .modal { animation: none; }
  .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: 7px;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 8px 17px;
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.005em;
  font-family: var(--font);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-danger { background: var(--err); color: #fff; }
.btn-danger:hover { background: color-mix(in srgb, var(--err) 88%, #000); }
.btn-sm { min-height: 32px; padding: 5px 12px; font-size: 13px; border-radius: 9px; }

/* 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: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-icon:active { transform: scale(0.93); }
.btn-icon svg { width: 17px; height: 17px; }
.btn-icon-edit {
  background: var(--surface);
  border-color: var(--line);
  color: var(--muted);
}
.btn-icon-delete {
  background: var(--err-soft);
  color: var(--err);
}
.btn-icon-copy, .btn-icon-site {
  background: var(--surface);
  border-color: var(--line);
  color: var(--muted);
}
@media (hover: hover) {
  .btn-icon-edit:hover, .btn-icon-copy:hover, .btn-icon-site:hover, .btn-icon-adjust:hover, .btn-icon-favorite:hover { background: var(--surface-2); color: var(--text); }
  .btn-icon-delete:hover { background: color-mix(in srgb, var(--err) 18%, var(--surface)); }
}
/* 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(--surface);
  border-color: var(--line);
  color: var(--muted);
}
/* Same star either way (customers.php): outline normally, solid accent once
   favorited. */
.btn-icon-favorite {
  background: var(--surface);
  border-color: var(--line);
  color: var(--muted);
}
.btn-icon-favorite svg { fill: none; }
.btn-icon-favorite.is-favorite {
  color: var(--brand-strong);
  border-color: color-mix(in srgb, var(--brand-strong) 50%, transparent);
  background: var(--brand-soft);
}
.btn-icon-favorite.is-favorite svg { fill: currentColor; }
/* Stock's stars (StockStar): black = sell off now; blue = the owner's; red / orange / yellow = the
   system's, locked. Yellow keeps the plain favorite look above. Black is the text colour (white in dark mode). */
.btn-icon-favorite.is-favorite.star-black { color: var(--text); border-color: color-mix(in srgb, var(--text) 45%, transparent); background: var(--surface-2); }
.btn-icon-favorite.is-favorite.star-blue { color: var(--info); border-color: color-mix(in srgb, var(--info) 45%, transparent); background: var(--info-soft); }
.btn-icon-favorite.is-favorite.star-red { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, transparent); background: var(--err-soft); }
.btn-icon-favorite.is-favorite.star-orange { color: var(--star-orange); border-color: color-mix(in srgb, var(--star-orange) 45%, transparent); background: color-mix(in srgb, var(--star-orange) 14%, transparent); }
.btn-icon-favorite.is-system { cursor: default; }
.btn-icon:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

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

/* A segmented status switch (Orderlər, Məhsul status dəyişiklikləri…): labelled segments with counts. */
.seg { display: inline-flex; flex-shrink: 0; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.seg-count:not(:empty) {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface-3);
  font-size: 11.5px;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.seg-count-warn:not(:empty) { background: var(--warn-soft); color: var(--warn); }

.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(--muted);
  min-height: 18px;
  margin-bottom: 14px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.filter-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
/* Mouse only (a tap would leave it stuck). CSS transitions only, nothing runs while idle. */
@media (hover: hover) {
  .filter-chip:not(.active):hover {
    background: var(--surface-2);
    border-color: var(--line-strong);
  }
}

.filter-row-selects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.filter-selected-count {
  font-size: 14px;
  color: var(--muted);
  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 {
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  background-color: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
@media (hover: hover) {
  .filter-select:not(:disabled):hover { background-color: var(--surface-2); border-color: var(--line-strong); }
}
.filter-select:focus-visible, .checkbox-filter:focus-within { outline: none; box-shadow: var(--focus-ring); }
.filter-select:disabled {
  color: var(--muted);
  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(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-pop);
  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(--surface-2);
}
.ms-filter-panel input[type="checkbox"] {
  flex-shrink: 0;
}
.checkbox-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
.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(--muted);
}
/* 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(17, 17, 18, 0.42);
}
.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(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.picker-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 12px;
  padding-top: calc(14px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--separator);
}
.picker-search {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--surface-2);
  font-size: 16px;
  font-family: var(--font);
  color: var(--text);
}
.picker-search:focus { outline: none; border-color: var(--text); background: var(--surface); box-shadow: var(--focus-ring); }
.picker-close {
  flex-shrink: 0;
  border: none;
  background: none;
  font-size: 15px;
  font-weight: 650;
  color: var(--text);
  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: 13px 16px;
  font-size: 15px;
  font-family: var(--font);
  color: var(--text);
  border-bottom: 1px solid var(--separator);
  cursor: pointer;
}
.picker-row:active { background: var(--surface-2); }
@media (hover: hover) {
  .picker-row:not(.picker-empty):not(.is-out-of-stock):hover { background: var(--surface-2); }
}
.picker-row.picker-empty { color: var(--muted); 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(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.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(--brand-strong);
}
.picker-row-star.star-black { fill: var(--text); }
.picker-row-star.star-blue { fill: var(--info); }
.picker-row-star.star-red { fill: var(--err); }
.picker-row-star.star-orange { fill: var(--star-orange); }
.picker-row.is-out-of-stock {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (min-width: 768px) {
  .picker-overlay {
    background: transparent;
  }
}

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

.card-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* A list whose rows a filter hid entirely leaves no empty frame behind. */
.card-list:not(:has(> :not([hidden]))) { border-color: transparent; background: transparent; box-shadow: none; }
.card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--separator);
}
.card-row:last-child { border-bottom: none; }
.card-row-main { flex: 1; min-width: 0; }
.card-row-title {
  font-size: 15px;
  font-weight: 650;
  line-height: 20px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-row-thumb {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--line);
  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(--muted);
  opacity: 0.5;
}
.card-row-sub {
  font-size: 13px;
  color: var(--muted);
  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: 650;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  white-space: nowrap;
}
.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;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 2px;
}
.card-row-stat-value {
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.stat-danger { color: var(--err); }
.stat-warning { color: var(--warn); }
.card-row-stat-hint {
  font-size: 11px;
  font-weight: 600;
  color: var(--warn);
  white-space: nowrap;
}

.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
}
.empty-state p { margin: 0 0 16px; font-size: 15px; font-weight: 500; }
.empty-state::before {
  content: '';
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border-radius: 14px;
  background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C9DA1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5 9 5 9-5zM3 8v8l9 5 9-5V8M12 13v8'/%3E%3C/svg%3E") center / 22px no-repeat;
}

/* Category tree rows */
.card-row-child {
  padding-left: 36px;
}
.card-row-child .card-row-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
}
.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(--muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  -webkit-tap-highlight-color: transparent;
}
.category-toggle:active, .category-toggle:hover { background: var(--surface-2); }
.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);
}

@media (min-width: 768px) {
  /* ≥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;
  }
}

/* A running campaign's name beside a product (Stock, carts, Qiymət uyğunluğu) and its price. */
.promo-chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--err-soft);
  color: var(--err);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  white-space: nowrap;
  vertical-align: 1px;
}
.promo-was { color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; }
.product-row .stat-cash .card-row-stat-value.promo-price { color: var(--err); font-weight: 750; }
/* ====== 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: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

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

.search-bar input { height: 42px; }
  .cust-add-phone { display: inline-flex; flex-shrink: 0; height: 42px; }
}
.cust-row-link:hover .card-row-title { text-decoration: underline; text-decoration-color: var(--brand-strong); text-underline-offset: 3px; }
.cust-view-sub { font-size: 14px; color: var(--muted); margin-top: 2px; }
.cust-view-returned { font-size: 12px; color: var(--err); white-space: nowrap; }
.search-bar input {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C9DA1' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 13px center / 17px no-repeat;
  font-size: 15px;
  font-family: var(--font);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-bar input:focus { outline: none; border-color: var(--text); box-shadow: var(--focus-ring); }
.search-bar input::placeholder { color: var(--faint); }

.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px 2px;
  margin-bottom: 20px;
}
.form-card > h2:first-child,
.form-card > h3:first-child { margin-top: 2px; }
.field {
  padding: 0 0 14px;
}
.field-row {
  display: flex;
  gap: 12px;
  padding: 0;
}
.field-row .field {
  flex: 1;
  min-width: 0;
  padding: 0 0 14px;
}
/* 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: 650;
  color: var(--text);
  margin-bottom: 6px;
}
/* Boxed controls. :where() keeps this at one class's weight, so page rules for a special
   input (a checkbox list, a chip) still win. */
.field :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="hidden"]), select, textarea) {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  font-size: 15px;
  font-family: var(--font);
  color: var(--text);
  padding: 0 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field :where(textarea) { padding: 10px 12px; line-height: 1.45; }
.field :where(select) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6C70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px;
}
.field :where(input, select, textarea)::placeholder { color: var(--faint); }
/* The searchable picker's button stands where the <select> was (core.js), so it looks like one. */
.field .picker-trigger {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 15px;
}
.field .picker-trigger:focus-visible { outline: none; border-color: var(--text); box-shadow: var(--focus-ring); }
/* 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(--muted);
  font-size: 14px;
  font-weight: 500;
  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: 12px;
  top: 13px;
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}
.field-icon-input input,
.field-icon-input textarea {
  padding-left: 36px;
}
.field-icon-input .field-readonly { padding-left: 24px; }
.field-icon-input:has(.field-readonly) .field-icon { left: 0; top: 2px; }
.field :where(input, select, textarea):focus {
  outline: none;
  border-color: var(--text);
  box-shadow: var(--focus-ring);
}
/* 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(--muted);
  background-color: var(--surface-2);
  border-color: var(--line);
  cursor: not-allowed;
}
.field-readonly {
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
}
.field-readonly.stat-danger { color: var(--err); }
.field-readonly.stat-warning { color: var(--warn); }
.field-link {
  display: block;
  font-size: 15px;
  font-weight: 650;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--brand-strong);
  text-underline-offset: 3px;
  word-break: break-all;
}
.field-hint {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.45;
}
.field-order-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.field-error {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--err);
  margin-top: 6px;
}
.field.has-error input,
.field.has-error select { color: var(--err); border-color: var(--err); }

.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: 12px;
  border: 1px solid var(--line);
  background: #FFFFFF;
  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(--muted);
  opacity: 0.5;
}
.field-image-remove-btn {
  padding: 0;
  border: none;
  background: none;
  font-size: 13px;
  color: var(--err);
  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(--muted);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
/* 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(--muted);
  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; min-height: 42px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); font-size: 15px; }

/* 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(--surface);
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.icon-field-btn:hover { background: color-mix(in srgb, var(--text) 4%, var(--surface)); }
.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(--muted); }
.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(--surface);
  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(--muted); 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(--muted);
  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(--primary) 16%, transparent); color: var(--primary); }
.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(--muted); }
.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(--surface);
  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(--primary); }
/* "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(--primary); }

/* ====== 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(17, 17, 18, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: 0;
  animation: modal-fade 0.18s ease;
}
.modal-backdrop > .modal { animation: modal-rise 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-rise { from { opacity: 0; transform: translateY(14px); } }
/* The page behind an open sheet stays put. */
body:has(.modal-backdrop:not([hidden]):not(.is-docked)) { overflow: hidden; }
.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(--surface);
  border-radius: 22px 22px 0 0;
  box-shadow: var(--shadow-pop);
  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: 800;
  letter-spacing: -0.025em;
  margin: 0;
}
.modal-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.modal-close:hover { background: var(--surface-3); color: var(--text); }
/* Inside a sheet the cards are wells, not raised cards. */
.modal .form-card { background: var(--surface); box-shadow: none; }
.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(--text); background: var(--surface-2); }
@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: 768px) {
  .modal-backdrop {
    align-items: center;
    padding: 20px;
  }
  .modal {
    border-radius: 20px;
    padding: 22px 24px 24px;
    /* Desktop has no address-bar issue: 92vh gives heavy modals more room before
       they scroll. */
    max-height: 92vh;
    max-height: 92dvh;
  }
}

/* A list page's open record beside the list (≥1100px, core.js wireDock()): .desk lays out the
   list and .desk-detail; the record's window (.modal-backdrop) turns into a full-height panel
   (.is-docked), and .desk-empty shows while none is open. */
.desk-empty { display: none; }
@media (min-width: 1100px) {
  .desk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 440px); gap: 20px; align-items: start; }
  .desk-detail { position: sticky; top: 26px; height: calc(100dvh - 26px - 64px); min-height: 480px; }
  .desk-detail:has(> .modal-backdrop[hidden]) .desk-empty { display: flex; }
}
@media (min-width: 1500px) {
  .desk { grid-template-columns: minmax(0, 1fr) 480px; }
}
.desk-empty {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 32px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  text-align: center;
  color: var(--muted);
}
.desk-empty-icon { width: 36px; height: 36px; margin-bottom: 12px; color: var(--faint); }
.desk-empty-title { margin: 0 0 6px; font-size: 16px; font-weight: 750; color: var(--text); }
.desk-empty-text { margin: 0 0 22px; max-width: 280px; font-size: 13px; line-height: 1.5; }
.modal-backdrop.is-docked {
  position: static;
  z-index: auto;
  height: 100%;
  padding: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: none;
}
.modal-backdrop.is-docked > .modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  animation: dock-in 0.18s ease;
}
@keyframes dock-in { from { opacity: 0.5; } }
.modal-backdrop.is-docked .modal-header { margin: 0; padding: 18px 18px 14px 20px; border-bottom: 1px solid var(--line); }
.modal-backdrop.is-docked .dock-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 8px; }
.modal-backdrop.is-docked .form-actions { margin: 0; padding: 14px 20px 18px; border-top: 1px solid var(--line); background: var(--surface); }

/* ====== 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: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  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(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
/* 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(--muted); }
.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(--muted); }
.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(--err) 12%, var(--surface));
  color: var(--err);
  cursor: pointer;
}
.sell-cart-remove svg { width: 15px; height: 15px; }
.sell-cart-empty {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  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(--surface);
  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 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  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(--err) 18%, var(--surface));
  color: var(--err);
}
/* 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(--muted);
}
.cart-table .cart-thumb-cell {
  width: 1%;
  white-space: nowrap;
}
/* The running total stays visible while scrolling a long cart (sticky: .data-table tfoot td). */
.cart-table tfoot td {
  background: var(--surface);
  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(--muted);
  font-weight: 600;
}
.cart-thumb {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--line);
  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(--muted);
  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: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  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(--muted);
}

/* 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(--warn) 18%, var(--bg));
}

/* ====== 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(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.data-table th,
.data-table td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--separator);
}
.data-table tbody tr:last-child td {
  border-bottom: none;
}
.data-table tbody tr:hover {
  background: var(--surface-2);
}
/* The totals row stays at the bottom of a framed list while it scrolls (every page,
   not just some); a sticky cell doesn't carry its border, so the line is a shadow. */
.data-table tfoot td {
  border-bottom: none;
  box-shadow: inset 0 1px 0 var(--line);
  font-weight: 750;
  background: var(--surface-2);
  position: sticky;
  bottom: 0;
  z-index: 1;
}
.data-table .text-right {
  text-align: right;
}
.data-table th {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: var(--surface);
  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(--text);
}
.data-table th.sorted-desc::after {
  opacity: 1;
  border-top: 5px solid var(--text);
}
.data-table th.sorted-asc, .data-table th.sorted-desc { color: var(--text); }
.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;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
@media (min-width: 768px) {
  .table-wrap {
    overflow-y: auto;
  }
}

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

.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: 8px 6px;
  font-size: 10.5px;
  cursor: default;
}
.bulk-table th.bulk-col-blue { color: var(--info); }
/* The grid as one sheet: its tools on top, the table scrolling inside (header stuck to it). */
.bulk-lead { margin: 6px 0 0; max-width: 720px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.bulk-sheet { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.bulk-table-wrap {
  max-height: 70vh;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.bulk-table-wrap .bulk-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
.bulk-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 40%, var(--surface)); }
.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(--primary) 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;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font);
  padding: 0 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: none;
  border-color: var(--brand-strong);
  box-shadow: 0 0 0 2px var(--brand-soft);
}
.bulk-table input.cell-error,
.bulk-table select.cell-error {
  border-color: var(--err);
  background: var(--err-soft);
}
.bulk-sku-tool {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.bulk-sku-tool .bulk-add-rows { margin-left: auto; }
/* Saving stays in reach under a long grid. */
.bulk-actions {
  position: sticky;
  bottom: 12px;
  z-index: 4;
  justify-content: flex-end;
  margin-top: 14px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}
.bulk-actions .btn { flex: 0 0 auto; min-width: 140px; }

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

.warranty-sub { font-size: 13px; color: var(--muted); 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(--muted); }
.warranty-line-months { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); white-space: nowrap; }
.warranty-line-months input, .warranty-line-serial {
  border: none; border-radius: 8px; background: var(--surface); 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(--muted); 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); }

/* ====== Müqavilə modal + Müqavilələr ====== */

.contract-search { width: 100%; padding: 10px 12px; border: 0.5px solid var(--separator); border-radius: var(--radius-sm); background: var(--bg); font: inherit; font-size: 16px; color: var(--text); margin-bottom: 10px; }
.contract-sources { display: flex; flex-direction: column; max-height: 50dvh; overflow-y: auto; margin-bottom: 12px; font-size: 14px; color: var(--muted); }
.contract-source { text-align: left; padding: 10px 4px; border: none; border-bottom: 0.5px solid var(--separator); background: none; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; }
.contract-source:hover { background: var(--bg); }
.contract-repick { border: none; background: none; padding: 0; margin-bottom: 10px; font: inherit; font-size: 14px; color: var(--primary); cursor: pointer; }
.contract-lines-wrap { margin-bottom: 10px; }
.contract-lines td, .contract-lines th { white-space: nowrap; }
.contract-lines td:first-child { white-space: normal; }
.contract-totals { display: grid; gap: 2px; justify-items: end; margin-bottom: 16px; font-size: 14px; }
.contract-totals div { display: flex; gap: 12px; }
.contract-totals span { color: var(--muted); }
.contract-total { font-size: 16px; }
.contract-words { font-size: 13px; color: var(--muted); text-align: right; }
.contract-section-title { font-size: 15px; margin: 4px 0 8px; }
.contract-bank-details { resize: vertical; line-height: 1.45; }
.contract-found { margin: -6px 0 14px; font-size: 13px; color: var(--ok); }
.contract-choice-options { display: flex; flex-direction: column; gap: 8px; }
.contract-choice-option { display: flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }
.contract-choice-option input { width: 18px; height: 18px; flex-shrink: 0; }
.contract-done { padding: 8px 0 16px; font-size: 16px; }
.contract-done p { margin: 0 0 12px; }
.contract-buttons { display: inline-flex; gap: 6px; flex-wrap: wrap; vertical-align: middle; }
.btn-icon-print { background: var(--surface); color: var(--muted); box-shadow: var(--shadow); }
/* Word's own blue, so the download reads as "the Word file" at a glance. */
.btn-icon-word { background: color-mix(in srgb, #2b579a 12%, var(--surface)); color: #2b579a; }
/* Dark: the system's, unless Görünüş says Açıq; Görünüş › Qaranlıq forces it (v8.3). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-icon-word { background: color-mix(in srgb, #4a86d6 22%, var(--surface)); color: #8ab4f0; }
}
:root[data-theme="dark"] .btn-icon-word { background: color-mix(in srgb, #4a86d6 22%, var(--surface)); color: #8ab4f0; }
.contract-row-actions { white-space: nowrap; text-align: right; }
/* İmzalı sənəd: grey until the buyer's signed copy is uploaded, then green. */
.btn-icon-sign { background: var(--surface); color: var(--muted); box-shadow: var(--shadow); }
.btn-icon-sign.is-signed { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); color: var(--ok); box-shadow: none; }
.signed-empty { margin: 0 0 8px; font-size: 15px; color: var(--muted); }
.signed-item-right { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.signed-date { font-size: 13px; color: var(--muted); }
/* Müqavilələr: the contracts, and ≥1100px the open one's əlavələr beside them (.desk). */
.contracts-master { min-width: 0; }
.contract-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 14px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.contract-row:hover { background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
.contract-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--brand-strong); }
.contract-row.is-selected { background: var(--brand-soft); }
.contract-row-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: color-mix(in srgb, #2b579a 12%, var(--surface)); color: #2b579a; }
.contract-row-icon svg { width: 19px; height: 19px; }
.contract-row-body { min-width: 0; }
.contract-row-title { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contract-row-title span { margin-left: 6px; font-size: 12.5px; color: var(--muted); }
.contract-row-sub { margin-top: 2px; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contract-row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.contract-row-end b { font-size: 14.5px; font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.contract-row-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.contract-signed-count { padding: 1px 7px; border-radius: 999px; background: var(--surface-2); font-weight: 600; }
.contract-signed-count.is-all { background: var(--ok-soft); color: var(--ok); }
.contracts-detail .desk-empty > svg { width: 36px; height: 36px; margin-bottom: 12px; color: var(--faint); }
.contract-detail { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.contract-detail[hidden] { display: none; }
.contract-detail-head { min-width: 0; }
.contract-detail-head h2 { margin: 0; font-size: 19px; }
.contract-detail-sub { margin-top: 4px; font-size: 13px; color: var(--muted); }
.contract-annex {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "main total" "actions actions";
  align-items: center;
  gap: 10px 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.contract-annex.is-signed { border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.contract-annex-main { grid-area: main; min-width: 0; }
.contract-annex-label { font-size: 14.5px; font-weight: 700; }
.contract-annex-sub { margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.contract-annex-total { grid-area: total; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.contract-annex .contract-row-actions { grid-area: actions; display: flex; align-items: center; gap: 6px; text-align: left; }
.contract-annex .contract-row-actions .contract-signed,
.contract-annex .contract-delete { margin-left: 0; }
.contract-annex .contract-delete { margin-left: auto; }
/* A form holding a button sits on a text line (room below it); flex boxes line up on their middles. */
.contract-row-actions > * { vertical-align: middle; }
.contract-delete { display: inline-flex; margin-left: 6px; }
.contract-row-actions .contract-signed { margin-left: 6px; vertical-align: middle; }

/* ====== 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(--muted); 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(--muted);
  font-size: 13px;
}
.label-file-thumbs.is-error { color: var(--err); }
.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(--primary);
  color: var(--on-primary);
  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; }
/* CA-1018's 60.5 × 43.6 mm label (≈ 229 × 165 px). */
.p18 .label-thumb-own { height: 52px; }
.p18 .label-thumb-own .own-label { transform: scale(0.315); }
.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(--muted); 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(--primary);
  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(--primary); background: var(--brand-soft); }
.label-drop svg { width: 18px; height: 18px; flex: none; }

.label-sheet-head {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* The sheet drawn to A4 proportions (210 × 297), its cols × rows slots (order-labels.js sets them);
   the 1px gap over the separator colour draws the cuts. */
.label-sheet {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), 1fr);
  grid-template-rows: repeat(var(--rows, 4), 1fr);
  gap: 1px;
  width: 100%;
  aspect-ratio: 210 / 297;
  margin: 0 auto;
  border: 1px solid var(--separator);
  border-radius: 6px;
  overflow: hidden;
  background: var(--separator);
}
.label-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.label-slot-no { font-size: 15px; font-weight: 600; }
.p18 .label-slot-no { font-size: 13px; }
.p18 .label-slot-mark { font-size: 10px; }
.label-slot-mark { font-size: 11px; min-height: 14px; }
.label-slot.is-selected { background: var(--primary); color: var(--on-primary); }
.label-slot.is-fragile { background: color-mix(in srgb, #FF3B30 16%, var(--surface)); color: #D70015; }
.label-slot.is-fragile .label-slot-mark { font-weight: 600; }

/* Etiket / Fragile: what a click on the sheet places (the Maliyyə type switch's look). */
.label-mode {
  display: flex;
  gap: 4px;
  padding: 3px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
}
.label-mode button {
  --seg-c: var(--primary);
  flex: 1;
  border: 0;
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.label-mode button[data-mode="fragile"] { --seg-c: #FF3B30; }
.label-mode button.active {
  background: color-mix(in srgb, var(--seg-c) 18%, var(--surface));
  color: color-mix(in srgb, var(--seg-c) 70%, var(--text));
}

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

.label-calibrate { margin-top: 16px; font-size: 14px; }
.label-calibrate summary { cursor: pointer; color: var(--muted); }
.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; }

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

/* ====== 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(--surface));
  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(--surface), 0 0 0 4px var(--primary); }
.fin-color-choice input:focus-visible + span { outline: 2px solid var(--primary); 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(--surface);
  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(--surface);
  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(--muted);
  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(--primary) 12%, transparent); }
.fin-pick-group-toggle.has-selected .fin-pick-name { color: var(--primary); }
.fin-pick-meta { margin-left: auto; padding-left: 18px; color: var(--muted); 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(--muted);
  border-bottom: 1.6px solid var(--muted);
  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(--surface);
  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(--primary, #007AFF);
  border-bottom: 2px solid var(--primary, #007AFF);
  transform: rotate(45deg);
}

/* 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-color-choice.is-used span { opacity: 0.35; }

.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(--muted); 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 (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(--muted); 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; }
/* A header click or a search changes the view only (core.js) — no dragging until it's back. */
.is-header-sorted .drag-handle,
.is-filtered .drag-handle { visibility: hidden; }

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

.live-clock {
  font-variant-numeric: tabular-nums;
}
/* The blinking ":" marks a live clock without showing seconds. */
.dash-clock-colon {
  animation: dash-clock-blink 1s step-start infinite;
}
@keyframes dash-clock-blink {
  50% { opacity: 0.2; }
}

.dash-see-all {
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  white-space: nowrap;
}
.dash-see-all:hover {
  text-decoration: underline;
}

/* ------ Ana səhifə (redesign): greeting + actions, Bu gün strip, Satışlar, Son fəaliyyət
   (main column); Diqqət, Anbar, Kassa (side column). The dash-* rules above serve other pages. */

.home-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.home-hello h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
}
.home-now {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
}
.home-now .live-clock { color: var(--text); font-weight: 750; }
.home-now-sep { color: var(--faint); }
.home-actions { display: flex; gap: 10px; flex-shrink: 0; }
.home-actions .btn { min-height: 42px; padding-inline: 18px; }
.home-actions .btn-icon-inline { width: 18px; height: 18px; }

.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  align-items: start;
}
.home-main, .home-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.home-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px;
}
.home-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.home-card-head h2 { margin: 0; font-size: 16px; font-weight: 750; letter-spacing: -0.02em; }
.home-card-link, .home-card-foot { font-size: 13px; font-weight: 650; color: var(--muted); }
.home-card-link:hover, .home-card-foot:hover { color: var(--text); }

/* Bu gün: three figures in one card, split by hairlines. */
.home-today {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.home-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  border-left: 1px solid var(--separator);
  transition: background 0.15s ease;
}
.home-metric:first-child { border-left: 0; }
.home-metric:hover { background: var(--surface-2); }
.home-metric-label { font-size: 12.5px; font-weight: 650; color: var(--muted); }
.home-metric-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.home-metric-sub { font-size: 12.5px; color: var(--muted); }

/* Satışlar: 7 / 14 / 30-day totals (links to Satış tarixçəsi) over 30 day bars. */
.home-sales-totals { display: flex; gap: 6px; }
.home-sales-total {
  display: flex;
  flex-direction: column;
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  line-height: 1.25;
  transition: background 0.15s ease;
}
/* The chart is the 30 days, so "30 gün" is the active total — until 7 or 14 is under the mouse. */
.home-sales-total[data-days="30"],
.home-sales-total:hover,
.home-sales-total:focus-visible { outline: none; background: var(--primary); color: var(--on-primary); }
.home-sales-totals:has(.home-sales-total:not([data-days="30"]):is(:hover, :focus-visible)) .home-sales-total[data-days="30"] { background: var(--surface-2); color: var(--text); }
.home-sales-total span { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.home-sales-total[data-days="30"] span,
.home-sales-total:hover span,
.home-sales-total:focus-visible span { color: inherit; opacity: 0.75; }
.home-sales-totals:has(.home-sales-total:not([data-days="30"]):is(:hover, :focus-visible)) .home-sales-total[data-days="30"] span { color: var(--muted); opacity: 1; }
.home-sales-total strong { font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 140px;
}
.home-bar {
  position: relative;
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.home-bar span {
  width: 100%;
  height: var(--h);
  min-height: 3px;
  border-radius: 4px 4px 2px 2px;
  background: var(--primary);
  transition: background 0.15s ease;
}
/* "7 gün" / "14 gün" under the mouse (or keyboard focus): its days stay dark, the rest go pale. */
.home-sales:has(.home-sales-total:not([data-days="30"]):is(:hover, :focus-visible)) .home-bar span { background: var(--surface-3); }
.home-sales:has(.home-sales-total[data-days="7"]:is(:hover, :focus-visible)) .home-bar.in-7 span,
.home-sales:has(.home-sales-total[data-days="14"]:is(:hover, :focus-visible)) .home-bar.in-14 span { background: var(--primary); }
/* One day under the mouse: yellow (white in dark mode, where the bars are yellow). */
.home-bar:hover span { background: var(--brand-strong); }
/* Dark: the system's, unless Görünüş says Açıq; Görünüş › Qaranlıq forces it (v8.3). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .home-bar:hover span { background: var(--text); }
}
:root[data-theme="dark"] .home-bar:hover span { background: var(--text); }
.home-bar:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(var(--h) + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  padding: 5px 9px;
  border-radius: 8px;
  background: var(--text);
  color: var(--surface);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-hover);
}
.home-bar:first-child:hover::after { left: 0; transform: none; }
.home-bar:last-child:hover::after { left: auto; right: 0; transform: none; }
.home-bars-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--faint);
}

/* Son fəaliyyət: day headings, then a row per sale (green) or open order (amber). */
.home-activity-tools { display: flex; align-items: center; gap: 12px; }
.home-activity-total { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.home-activity-total strong { color: var(--text); font-weight: 750; font-variant-numeric: tabular-nums; }
.home-feed { margin: 0 -10px; }
.home-day {
  padding: 14px 10px 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.home-feed > .home-day:not([hidden]) ~ .home-day:not([hidden]) { border-top: 1px solid var(--separator); margin-top: 6px; }
.home-day:first-child { padding-top: 0; }
.home-feed .home-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.home-feed .home-row:hover { background: var(--surface-2); }
.home-feed .home-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.home-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 11px;
}
.home-row-icon svg { width: 18px; height: 18px; }
.home-row-icon-sale { background: var(--ok-soft); color: var(--ok); }
.home-row-icon-order { background: var(--warn-soft); color: var(--warn); }
.home-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.home-row-title, .home-row-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-row-title { font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; }
.home-row-sub { font-size: 12.5px; color: var(--muted); }
.home-row-facts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 30%;
  min-width: 0;
  font-size: 12px;
  color: var(--muted);
}
.home-row-fact { display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-row-fact svg { width: 13px; height: 13px; flex-shrink: 0; }
.home-row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
.home-row-amount { font-size: 14.5px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-row-type { font-size: 12px; color: var(--muted); white-space: nowrap; }
.home-feed-empty { padding: 26px 10px; text-align: center; font-size: 14px; color: var(--muted); }

/* Diqqət: the alarm partials' banners and the page's own to-dos as one list of rows. */
.home-attention-list { display: flex; flex-direction: column; gap: 8px; }
.home-attention .alarm-banner,
.home-todo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: none;
  transition: background 0.15s ease;
}
.home-attention a.alarm-banner:hover, .home-todo:hover { background: var(--surface-2); }
.home-attention .alarm-banner > svg,
.home-todo-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 7px;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--muted);
}
.home-attention .alarm-banner > svg { background: var(--err-soft); color: var(--err); }
.home-attention .alarm-banner-warning > svg, .home-todo-warn .home-todo-icon { background: var(--warn-soft); color: var(--warn); }
.home-attention .alarm-banner-info > svg { background: var(--surface-2); color: var(--muted); }
.home-attention .alarm-banner strong, .home-todo strong { font-weight: 700; }
.home-attention .alarm-banner-action { color: var(--text); }
.home-attention .alarm-banner:not(.alarm-banner-warning):not(.alarm-banner-info) .alarm-banner-action { color: var(--err); }
/* Nothing to show (or every row hidden with ×): no card at all — Anbar / Kassa move up (2026-11-06). */
.home-attention:not(:has(.home-attention-list > a, .home-attention-list > .home-attn:not([hidden]))) { display: none; }
/* The × that hides a row (AttentionDismiss): a quiet round button inside the row's right edge. */
.home-attn { position: relative; }
.home-attn[hidden] { display: none; }
.home-attention .home-attn > a { padding-right: 46px; }
.home-attn-x {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 28px;
  height: 28px;
  padding: 7px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.15s ease, color 0.15s ease;
}
.home-attn-x svg { display: block; width: 100%; height: 100%; }
.home-attn-x:hover { background: var(--surface-2); color: var(--text); }

/* Anbar and Kassa: label left, figure right. */
.home-store-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--separator);
}
.home-store-row:first-of-type { border-top: 0; padding-top: 0; }
.home-store-row span { font-size: 13.5px; color: var(--muted); }
.home-store-row strong { font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-store-row:hover strong { text-decoration: underline; text-decoration-color: var(--brand-strong); text-underline-offset: 3px; }
.home-cash-value {
  display: block;
  margin: -4px 0 10px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

/* Phone: the sections outside the tab bar; six tiles. The sidebar has them on a computer. */
.home-shortcuts { display: none; }

@media (max-width: 1099px) {
  /* One column: Diqqət right after Bu gün, Anbar and Kassa last. */
  .home-grid { display: flex; flex-direction: column; align-items: stretch; }
  .home-main, .home-side { display: contents; }
  .home-today { order: 1; }
  .home-attention { order: 2; }
  .home-sales { order: 3; }
  .home-activity { order: 4; }
  .home-store { order: 5; }
  .home-cash { order: 6; }
}

/* ====== Page: Stock (catalog, filter column, product panel, sale cart) ====== */

/* A work-desk page ($contentWide, header.php) takes the window's width. */
.content-wide { max-width: 1760px; }

/* Layout: the list alone on a phone; from 1000px the cart docks beside it, and where there is room
   the filters stand as a column on the left. Rail (900–1279) and full sidebar (≥1280) widths differ,
   hence the paired ranges. Docked or not is read back by products.js (position: fixed = a sheet). */
.pos-side { display: none; }
.pos-main { min-width: 0; }
@media (min-width: 768px) {
  .pos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
}
@media (min-width: 1000px) {
  .pos { grid-template-columns: minmax(0, 1fr) 316px; }
  .pos-cart-open { display: none !important; }
}
@media (min-width: 1180px) and (max-width: 1279px), (min-width: 1400px) {
  .pos { grid-template-columns: 196px minmax(0, 1fr) 316px; }
  .pos-side { display: flex; }
  .pos-toolbar .products-cat-pick,
  .pos-toolbar .stock-chips { display: none !important; }
}

/* ---- Filter column ---- */
.pos-side {
  position: sticky;
  top: 26px;
  flex-direction: column;
  gap: 22px;
  max-height: calc(100dvh - 26px - 64px);
  overflow-y: auto;
  padding: 6px 4px 6px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}
.side-title {
  padding: 0 10px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}
.side-list { display: flex; flex-direction: column; gap: 1px; }
.side-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  padding: 6px 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}
.side-item:hover { background: var(--surface-2); }
.side-item.active { background: var(--brand-soft); font-weight: 650; }
.side-item-icon { display: inline-flex; flex-shrink: 0; color: var(--muted); }
.side-item-icon > svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.side-state-ideal .side-item-icon { color: var(--ok); }
.side-state-low .side-item-icon { color: var(--warn); }
.side-item-icon .fin-badge { width: 20px; height: 20px; border-radius: 6px; }
.side-item-icon .fin-badge svg { width: 12px; height: 12px; }
.side-item-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-item-count {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.side-item.active .side-item-count { color: var(--text); }
.side-children { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 4px 19px; padding-left: 10px; border-left: 1px solid var(--line); }
.side-child { font-size: 13px; padding-top: 5px; padding-bottom: 5px; }

/* ---- Toolbar ---- */
/* Stock's category + state wrapper: a sheet on a phone (mobile.css), no box of its own wider. */
.pos-filters { display: contents; }
.pos-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.products-search-inline { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.products-cat-pick { min-width: 15ch; }
.pos-cart-open { flex-shrink: 0; gap: 7px; }
.pos-cart-open-count {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--ink-on-brand);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
/* Stock state chips: round icon buttons; the name + count show on hover. */
.stock-chips { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; flex-shrink: 0; }
.stock-chip {
  position: relative;
  width: 46px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.stock-chip svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stock-chip-in { color: var(--text); }
.stock-chip-ideal { color: var(--ok); }
.stock-chip-low { color: var(--warn); }
.stock-chip:hover { background: var(--surface-2); }
.stock-chip.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.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(--surface);
  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; }

/* ---- Catalog rows ---- */
.product-row { cursor: pointer; transition: background 0.12s ease; }
.product-row:hover { background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
.product-row .card-row-main-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.product-row .card-row-thumb { width: 44px; height: 44px; background: var(--logo-bg); }
/* Long names wrap to 2 lines; products.js then hides that row's sub-line, so rows keep one height. */
.product-row .card-row-title {
  font-size: 14px;
  font-weight: 600;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.product-row .card-row-sub { font-size: 12.5px; }
.product-select {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}
.product-star-mark {
  display: none;
  width: 13px;
  height: 13px;
  margin-right: 5px;
  vertical-align: -1px;
  fill: var(--brand-strong);
}
.product-row[data-star="black"] .product-star-mark { fill: var(--text); }
.product-row[data-star="blue"] .product-star-mark { fill: var(--info); }
.product-row[data-star="red"] .product-star-mark { fill: var(--err); }
.product-row[data-star="orange"] .product-star-mark { fill: var(--star-orange); }
.product-row .card-row-stat-value { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.product-row .stat-cost .card-row-stat-value { color: var(--muted); font-weight: 500; }
/* Satış over Nağd, the lower (cash) price smaller. */
.stat-prices .stat-price,
.stat-prices .stat-cash { display: block; }
.product-row .stat-cash .card-row-stat-value { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.product-row .card-row-stat-hint { font-size: 11px; font-weight: 600; white-space: nowrap; }
.reserved-hint { color: var(--warn); }
.recommended-badge { color: var(--info); }
/* "+": adds the product to the cart; once there it turns yellow and shows the count. */
.pos-add {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.pos-add svg { width: 18px; height: 18px; stroke-width: 2.3; }
.pos-add:hover { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.pos-add:active { transform: scale(0.92); }
.pos-add:disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }
.pos-add.is-in-cart { background: var(--brand); border-color: var(--brand-strong); color: var(--ink-on-brand); }
.pos-add.is-in-cart svg { display: none; }
.pos-add-qty { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Desktop: one header of sortable labels over the columns (subgrid keeps them aligned). */
.product-list-head { display: none; }
@media (min-width: 768px) {
  #product-list { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-content: start; }
  #product-list > .product-row,
  #product-list > .product-list-head {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    column-gap: 16px;
    padding: 10px 14px;
  }
  #product-list > .product-row > .card-row-stats,
  #product-list > .product-list-head > .plh-stats { gap: 4px; }
  #product-list .card-row-stats .card-row-stat { width: 58px; min-width: 58px; text-align: right; }
  #product-list .card-row-stats .stat-prices { width: 84px; min-width: 84px; }
  #product-list .card-row-stats .stat-qty { width: 54px; min-width: 54px; }
  #product-list > .product-row .card-row-stat-label { display: none; }
  /* Alış, Satış and Say on the name's first line, Nağd on the second (the code's, or the name's
     2nd): both sides stack two 20px lines, so centring them in the row lines them up. */
  :root:not(.viewer-mode) #product-list > .product-row .card-row-sub { margin-top: 0; line-height: 20px; }
  :root:not(.viewer-mode) #product-list > .product-row .card-row-stat-value { line-height: 20px; }
  :root:not(.viewer-mode) #product-list > .product-row .stat-price { font-size: 14px; line-height: 20px; }
  :root:not(.viewer-mode) #product-list > .product-row .stat-cash { font-size: 12.5px; line-height: 20px; }
  /* Head reads Satış over Nağd, lined up with the prices under it (Satış dark like its price). */
  #product-list > .product-list-head .stat-prices { display: flex; flex-direction: column; align-items: flex-end; }
  #product-list > .product-list-head .stat-prices .plh-sep { display: none; }
  #product-list > .product-list-head .stat-prices .plh-sort { padding: 0; line-height: 1.35; }
  #product-list > .product-list-head .stat-prices .plh-sort[data-sort="price"] { color: var(--text); }
  #product-list > .product-row > .card-row-actions { gap: 6px; }
  .product-list-head {
    position: sticky;
    top: 0;
    z-index: 3;
    min-height: 42px;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  .plh-main { padding-left: 73px; }
  .plh-actions { width: 78px; }
  .plh-sort {
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
    background: none;
    border: 0;
    padding: 2px 0;
    cursor: pointer;
    white-space: nowrap;
  }
  .plh-sort:hover { color: var(--text); }
  .plh-sort.is-sorted { color: var(--text); }
  .plh-sort.is-sorted::after { content: " ↑"; }
  .plh-sort.is-sorted.is-desc::after { content: " ↓"; }
  /* Ticked rows: the selection bar covers the head (adds no line). */
  .plh-selection {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px 0 14px;
    background: var(--surface);
  }
  .plh-selection-count { margin-right: auto; font-size: 13.5px; color: var(--muted); }
  .plh-selection-count b { color: var(--text); }
  .plh-selection-clear {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }
  .plh-selection-clear:hover { background: var(--surface-2); color: var(--text); }
  /* With a mouse, a row's star shows on hover (or once starred). */
  @media (hover: hover) {
    .product-row .star-toggle:not(.is-favorite) { opacity: 0; transition: opacity 0.12s ease; }
    .product-row:hover .star-toggle,
    .product-row .star-toggle:focus-visible { opacity: 1; }
  }
}
/* A tight middle column: a little less space between the columns. */
@media (min-width: 768px) and (max-width: 999px), (min-width: 1180px) and (max-width: 1279px), (min-width: 1400px) and (max-width: 1559px) {
  #product-list > .product-row,
  #product-list > .product-list-head { column-gap: 12px; }
}

/* ---- Müştəri rejimi (desktop): a photo grid for a screen turned to a customer ---- */
.viewer-toggle { display: none; align-items: center; gap: 7px; }
.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; }
@media (min-width: 768px) {
  .viewer-toggle { display: inline-flex; }
  .viewer-mode body { padding-left: 0; }
  .viewer-mode .viewer-toggle { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
  .viewer-mode .viewer-toggle-on { display: none; }
  .viewer-mode .viewer-toggle-off { display: inline; }
  .viewer-mode .sidebar,
  .viewer-mode .products-header-extra,
  .viewer-mode .pos-cart,
  .viewer-mode .pos-cart-open,
  .viewer-mode .pos-cart-bar,
  .viewer-mode .side-state-low,
  .viewer-mode .stock-chip-low,
  .viewer-mode .product-list-head,
  .viewer-mode #product-list .product-select,
  .viewer-mode #product-list .stat-cost,
  .viewer-mode #product-list .stat-qty,
  .viewer-mode #product-list .card-row-sub,
  .viewer-mode #product-list .card-row-actions { display: none !important; }
  .viewer-mode .pos { grid-template-columns: minmax(0, 1fr); }
  .viewer-mode #product-list {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    padding: 2px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .viewer-mode #product-list > .product-row {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
  }
  .viewer-mode #product-list > .product-row:has(.card-row-thumb img) { cursor: zoom-in; }
  .viewer-mode #product-list .card-row-main-wrap { flex-direction: column; align-items: stretch; gap: 0; }
  .viewer-mode #product-list .card-row-thumb { width: 100%; height: auto; aspect-ratio: 1; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
  .viewer-mode #product-list .card-row-thumb-placeholder { width: 40px; height: 40px; }
  .viewer-mode #product-list .card-row-main { padding: 12px 14px 0; }
  .viewer-mode #product-list .card-row-title { font-size: 15px; }
  .viewer-mode #product-list .product-star-mark { display: none; }
  .viewer-mode #product-list > .product-row > .card-row-stats { display: flex; gap: 18px; padding: 8px 14px 14px; }
  .viewer-mode #product-list .card-row-stats .card-row-stat { width: auto; min-width: 0; text-align: left; }
  .viewer-mode #product-list > .product-row .card-row-stat-label { display: block; text-align: left; }
  .viewer-mode #product-list .card-row-stat-value { font-size: 17px; font-weight: 700; color: var(--text); }
  .viewer-mode #product-list .stat-prices { display: flex; gap: 18px; width: auto; min-width: 0; }
  .viewer-mode #product-list > .product-row .stat-cash { display: block; }
  .viewer-mode #product-list > .product-row .stat-cash .card-row-stat-label { display: block; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: none; }
  @media (min-width: 1180px) and (max-width: 1279px), (min-width: 1400px) {
    .viewer-mode .pos { grid-template-columns: 196px minmax(0, 1fr); }
  }
}

/* ---- Sale cart ---- */
.pos-cart {
  display: flex;
  flex-direction: column;
  background: var(--surface);
}
.pos-cart-form { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0; }
.pos-cart-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 10px 18px;
}
.pos-cart-head h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.pos-cart-count {
  min-width: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--ink-on-brand);
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}
.pos-cart-clear {
  margin-left: auto;
  padding: 5px 9px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.pos-cart-clear:hover { background: var(--err-soft); color: var(--err); }
.pos-cart-close { margin-left: auto; }
.pos-cart-clear:not([hidden]) + .pos-cart-close { margin-left: 0; }
.pos-cart-add { padding: 0 14px 12px; }
/* The cart's "+ Məhsul əlavə et": a search field look (it opens the product search sheet). */
.pos-cart-add .picker-trigger,
.pos-cart-customer .picker-trigger {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 14px;
}
.pos-cart-add .picker-trigger { background: var(--surface-2); border-color: transparent; color: var(--muted); font-weight: 600; }
.pos-cart-add .picker-trigger:hover { background: var(--surface-3); color: var(--text); }
.pos-cart-customer { display: flex; gap: 6px; align-items: stretch; }
.pos-cart-customer .picker-trigger { flex: 1; }
.pos-cart-customer .btn-icon { width: 40px; height: auto; border-radius: var(--radius-sm); }
.pos-cart-lines {
  flex: 1;
  min-height: 90px;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}
/* createPoCartManager's 8-cell table rows, laid out as two-line cards for a narrow column. */
.pos-cart-table,
.pos-cart-table tbody { display: block; width: 100%; }
.pos-cart-table tr {
  display: grid;
  grid-template-columns: 40px auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "thumb name name name remove"
    "thumb qty price total total";
  align-items: center;
  column-gap: 8px;
  row-gap: 7px;
  padding: 11px 12px 11px 14px;
  border-bottom: 1px solid var(--separator);
  transition: background 0.4s ease;
}
.pos-cart-table tr.is-new { background: var(--brand-soft); transition: none; }
.pos-cart-table td { display: block; padding: 0; border: 0; }
.pos-cart-table .cart-index-cell,
.pos-cart-table .cart-sku { display: none; }
.pos-cart-table .cart-thumb-cell { grid-area: thumb; align-self: start; width: auto; }
.pos-cart-table .cart-thumb { width: 40px; height: 40px; background: var(--logo-bg); }
.pos-cart-table .cart-name {
  grid-area: name;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pos-cart-table .cart-col-qty { grid-area: qty; padding-left: 0; }
.pos-cart-table td:nth-child(6) { grid-area: price; }
.pos-cart-table .cart-col-qty,
.pos-cart-table td:nth-child(6) { font-size: 12px; color: var(--muted); white-space: nowrap; text-align: left; }
.pos-cart-table .cart-qty-input { width: 44px; }
.pos-cart-table .cart-price-input { width: 62px; }
.pos-cart-table .cart-line-total { grid-area: total; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.pos-cart-table .cart-remove-cell { grid-area: remove; align-self: start; width: auto; }
.pos-cart-table .sell-cart-remove { width: 26px; height: 26px; margin: -3px -2px 0 0; }
.pos-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 160px;
  padding: 24px 28px;
  text-align: center;
  color: var(--muted);
}
.pos-cart-empty-icon { width: 34px; height: 34px; margin-bottom: 10px; color: var(--faint); }
.pos-cart-empty-title { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--text); }
.pos-cart-empty-text { margin: 0; font-size: 12.5px; line-height: 1.45; }
.pos-cart-foot { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; }
.pos-cart-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px 4px;
}
.pos-cart-total-qty { font-size: 13px; color: var(--muted); }
.pos-cart-total-sum { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pos-cart-type,
.pos-cart-notes,
.pos-quick-customer input {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.pos-cart-notes { resize: vertical; min-height: 40px; line-height: 20px; }
.pos-quick-customer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.pos-quick-customer-actions { display: flex; justify-content: flex-end; gap: 6px; }
/* "Pul hara gəldi?" as one boxed row (outside a .form-actions, so it brings its own layout). */
.pos-cart-foot .fin-sale-account {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 0 4px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 14px;
}
.pos-cart-foot .fin-sale-account .fin-pick { flex: 1; min-width: 0; max-width: none; min-height: 36px; border: 0; background: none; padding: 0 6px; }
.pos-cart-foot .fin-sale-account-fixed { flex: 1; min-width: 0; padding: 0 2px; }
.pos-cart-type {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6C70' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
}
.pos-cart-error {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--err-soft);
  color: var(--err);
  font-size: 13px;
  font-weight: 600;
}
.pos-cart-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: 2px; }
.pos-cart-actions .btn { justify-content: center; min-height: 44px; }

/* Docked: a full-height card beside the list. */
@media (min-width: 1000px) {
  .pos-cart {
    position: sticky;
    top: 26px;
    height: calc(100dvh - 26px - 64px);
    min-height: 460px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  .pos-cart-close { display: none; }
  .pos-cart-clear:not([hidden]) { margin-left: auto; }
}
/* Narrower: a sheet over the page (bottom on a phone, right side 900–999px). */
@media (max-width: 999px) {
  .pos-cart {
    position: fixed;
    z-index: 46;
    box-shadow: var(--shadow-pop);
    transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.26s;
    visibility: hidden;
  }
  .pos-cart-is-open .pos-cart { visibility: visible; transform: none; transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
}
@media (min-width: 768px) and (max-width: 999px) {
  .pos-cart {
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    border-radius: 20px 0 0 20px;
    transform: translateX(105%);
  }
}

.pos-cart-scrim {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(17, 17, 18, 0.45);
  animation: modal-fade 0.18s ease;
}
body.pos-cart-is-open { overflow: hidden; }
/* The phone's bar: what's in the cart, above the tab bar; a tap opens the sheet. */
.pos-cart-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--tabbar-h, 60px) + env(safe-area-inset-bottom) + 10px);
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 0;
  border-radius: 16px;
  background: var(--primary);
  color: var(--on-primary);
  font: inherit;
  font-size: 14px;
  box-shadow: var(--shadow-pop);
  cursor: pointer;
}
.pos-cart-bar.is-bumped { animation: pos-bump 0.35s ease; }
@keyframes pos-bump { 40% { transform: scale(1.04); } }
.pos-cart-bar-icon { width: 20px; height: 20px; flex-shrink: 0; }
.pos-cart-bar-total { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.pos-cart-bar-go {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 5px 8px 5px 11px;
  border-radius: 10px;
  background: var(--brand);
  color: var(--ink-on-brand);
  font-weight: 700;
}
.pos-cart-bar-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 768px) { .pos-cart-bar { display: none !important; } }

/* ---- Product side panel (drawer on desktop, sheet on a phone) ---- */
.drawer { display: flex; flex-direction: column; padding: 0 !important; }
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 6px 20px;
}
.drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 20px 18px; }
.drawer-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
}
@media (min-width: 768px) {
  .drawer-backdrop { justify-content: flex-end; align-items: stretch; padding: 0; }
  .drawer-backdrop > .drawer {
    width: 420px;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 20px 0 0 20px;
    animation: drawer-in 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .drawer-foot { padding-bottom: 14px; }
}
@keyframes drawer-in { from { opacity: 0.4; transform: translateX(40px); } }
.pv-sku {
  padding: 3px 9px;
  border-radius: 7px;
  background: var(--surface-2);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.pv-hero { display: flex; align-items: center; gap: 16px; margin: 8px 0 18px; }
.pv-photo {
  flex-shrink: 0;
  width: 104px;
  height: 104px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--logo-bg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
}
.pv-photo:disabled { cursor: default; }
.pv-photo img { width: 100%; height: 100%; object-fit: cover; }
.pv-photo .pd-thumb-placeholder { width: 32px; height: 32px; color: var(--faint); }
.pv-hero-text { min-width: 0; }
.pv-name { margin: 0 0 4px; font-size: 19px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.25; }
.pv-category { font-size: 13px; color: var(--muted); }
.pv-section-title {
  margin: 4px 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}
.pv-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 10px; }
.pv-levels { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.pv-tile {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  color: inherit;
}
a.pv-tile-link:hover { background: var(--warn-soft); }
.pv-tile-label { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.pv-tile-value { margin-top: 2px; font-size: 18px; font-weight: 750; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pv-tile-cost .pv-tile-value { color: var(--muted); }
.pv-order-links { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 14px; }
.pv-links { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.pv-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
.pv-link-open { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 650; color: var(--text); }
.pv-link-open svg { width: 15px; height: 15px; color: var(--muted); }
.pv-link-open:hover { text-decoration: underline; text-decoration-color: var(--brand-strong); text-underline-offset: 3px; }
.pv-actions .pv-add { flex: 1; justify-content: center; min-height: 42px; }
.pv-actions form { display: flex; margin: 0; }
.pv-actions .btn-icon { width: 42px; height: 42px; border-radius: 11px; }

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

/* Header links to the pages that hang off the catalogue (Stok düzəlişləri, Status dəyişiklikləri). */
.pd-head-link {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}
.pd-head-link:hover { background: var(--surface-2); color: var(--text); }

/* Stok düzəlişi window: the product on a well, direction and count side by side. */
.sa-product { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.sa-product-name { min-width: 0; font-size: 14px; font-weight: 650; }
.sa-product-qty { flex-shrink: 0; padding: 2px 10px; border-radius: 999px; background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.sa-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sa-row[hidden] { display: none; }

/* Toolbar: the search with the table's own tools beside it, the filters under them. */
.pd-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-bottom: 14px; }
.pd-toolbar .pd-search { margin-bottom: 0; }
.pd-tools { display: flex; align-items: center; gap: 8px; }
.pd-tools .filter-select { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; }
#pd-filter-row { grid-column: 1 / -1; margin: 0; }
#pd-filter-row .filter-row-selects { flex-wrap: wrap; gap: 8px; }
.pd-filter-group-start { margin-left: 8px; }
.pd-lock-btn[aria-pressed="false"] { background: var(--err-soft); border-color: transparent; color: var(--err); }

/* The sheet: a head (count, or the bulk bar over it) and the table. */
.pd-sheet { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.pd-sheet-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.pd-visible-count strong { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.pd-sheet-hint { display: none; margin-left: auto; font-size: 12.5px; color: var(--err); }
.pd-sheet:has(#pd-table.pd-unlocked) .pd-sheet-hint { display: inline; }
.pd-bulk-bar {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 16px;
  background: color-mix(in srgb, var(--brand) 22%, var(--surface));
  font-size: 13px;
  color: var(--text);
}
.pd-bulk-bar.is-active { display: flex; }
.pd-bulk-count-text b { font-variant-numeric: tabular-nums; }
.pd-bulk-bar #pd-bulk-status-form { display: flex; align-items: center; gap: 8px; margin: 0 0 0 8px; }
.pd-bulk-bar #pd-bulk-status-form .filter-select { height: 34px; background: var(--surface); }
.pd-bulk-bar #pd-bulk-delete-form { display: flex; margin: 0 0 0 auto; }
.pd-table-wrap { border: 0; border-radius: 0; box-shadow: none; }
/* Own scroll box so the header sticks inside it (core.js frames it to the window). */
.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; z-index: 2; background: var(--surface); }

#pd-table td { padding-top: 7px; padding-bottom: 7px; font-size: 13.5px; }
#pd-table td[data-col="name"] { font-weight: 600; min-width: 200px; }
#pd-table .pd-sku { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
#pd-table .pd-muted { color: var(--muted); font-size: 13px; }
#pd-table td.text-right { font-variant-numeric: tabular-nums; }
#pd-table .pd-onhand { font-weight: 700; }
#pd-table .pd-onhand-warning { color: var(--warn); }
#pd-table .pd-onhand-danger { color: var(--err); }
#pd-table th.pd-col-blue { color: var(--info); }
#pd-table .pd-restock-on { color: var(--ok); font-size: 13px; }
#pd-table .pd-restock-off { color: var(--text); font-size: 13px; }
/* Archived rows stay visible, faded. */
#pd-table tr.pd-archived { opacity: 0.45; }
.pd-row-select, #pd-select-all { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
/* The checkbox column and the row's buttons stay put while the table scrolls sideways. */
#pd-table th:first-child,
#pd-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
#pd-table th:last-child,
#pd-table td:last-child { position: sticky; right: 0; z-index: 1; background: var(--surface); }
#pd-table thead th:first-child,
#pd-table thead th:last-child { z-index: 3; }
#pd-table tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.pd-row-actions { white-space: nowrap; }
.pd-row-actions .btn-icon + .btn-icon,
.pd-row-actions .btn-icon + form { margin-left: 4px; }
@media (hover: hover) and (min-width: 768px) {
  #pd-table tbody .pd-row-actions .btn-icon { opacity: 0; transition: opacity 0.12s ease; }
  #pd-table tbody tr:hover .pd-row-actions .btn-icon,
  #pd-table tbody .pd-row-actions .btn-icon:focus-visible { opacity: 1; }
}

.pd-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #FFFFFF;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb-placeholder { width: 16px; height: 16px; color: var(--faint); }

/* Status cells: a select drawn as a pill, coloured by its value. */
.pd-status-form, .pd-active-form { display: inline-flex; margin: 0; }
.pd-status-select,
.pd-active-select {
  -webkit-appearance: none;
  appearance: none;
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.pd-status-select:has(option[value="Aktiv"]:checked),
.pd-status-select:has(option[value="Aktivdir"]:checked),
.pd-active-select.pd-status-active { background: var(--ok-soft); color: var(--ok); }
.pd-status-select:has(option[value="Yeni"]:checked) { background: var(--info-soft); color: var(--info); }
.pd-status-select:has(option[value="Draft"]:checked),
.pd-status-select:has(option[value="Yoxlamada"]:checked) { background: var(--warn-soft); color: var(--warn); }
.pd-status-select:has(option[value="Satışdan çıxıb"]:checked),
.pd-status-select:has(option[value="Vaxtı bitmiş"]:checked) { background: var(--err-soft); color: var(--err); }
.pd-status-select:has(option[value="Arxiv"]:checked),
.pd-active-select.pd-status-archived { background: var(--surface-3); color: var(--muted); }

/* Shopify column: always-visible state + its two small buttons. */
.pd-shopify-status { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: 4px; border-radius: 999px; vertical-align: middle; }
.pd-shopify-status svg { width: 14px; height: 14px; }
.pd-shopify-status-pending { background: var(--warn-soft); color: var(--warn); }
.pd-shopify-status-synced { background: var(--ok-soft); color: var(--ok); }
.pd-shopify-status-error { background: var(--err-soft); color: var(--err); }
.pd-shopify-cell .btn-icon { width: 24px; height: 24px; }
.pd-shopify-cell .btn-icon svg { width: 14px; height: 14px; }

/* Drag-to-resize (.data-table th is position: relative) and drag-to-reorder. */
.pd-col-resizer { position: absolute; top: 0; bottom: 0; right: -4px; z-index: 3; width: 8px; cursor: col-resize; }
.pd-col-resizer:hover,
.pd-col-resizer.is-resizing { background: color-mix(in srgb, var(--brand-strong) 55%, 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 span instead. */
#pd-table .pd-cell-display { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* Inline cell editor (Ad, prices, limits, links): locked by default; the lock enables click-to-edit. */
#pd-table.pd-unlocked .pd-editable { cursor: text; }
#pd-table.pd-unlocked .pd-editable:hover { box-shadow: inset 0 0 0 1.5px var(--brand-strong); border-radius: 6px; }
.pd-cell-input {
  display: block;
  width: 100%;
  padding: 3px 6px;
  border: 1.5px solid var(--brand-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

/* Column picker: one topic per column, a hairline between. */
.pd-columns-dropdown { position: relative; }
.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;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.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: 1px solid var(--separator); }
.pd-columns-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.pd-columns-item:hover { background: var(--surface-2); }
.pd-columns-item input[type="checkbox"] { width: 15px; height: 15px; flex-shrink: 0; accent-color: var(--primary); cursor: pointer; }

@media (max-width: 1279px) {
  .pd-head-link { display: none; }
}

/* ====== Page: Məhsul forması (product_form.php) ====== */

/* Sections on the left, the photo and what is on its way on the right (≥1100px); one column below. */
.pf-head-sku { padding: 3px 10px; border-radius: 999px; background: var(--surface-2); font-size: 13px; font-weight: 650; color: var(--muted); }
.pf-page-header { justify-content: flex-start; }
.pf-main, .pf-side { min-width: 0; }
@media (min-width: 1100px) {
  .pf { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
  .pf-side { position: sticky; top: 26px; }
  .pf-actions { grid-column: 1 / -1; }
}
.pf-card { margin-bottom: 16px; padding: 18px 20px 4px; }
.pf-card-title { margin: 0 0 14px; font-size: 15px; font-weight: 750; letter-spacing: -0.01em; }
.pf .field-row .pf-sku { flex: 0 0 150px; }
/* The photo as the side card's own canvas (photo_field.php; Avadanlıq keeps the 64px row). */
.pf-photo { padding-bottom: 14px; }
.pf-photo .field-image-row { flex-direction: column; align-items: stretch; gap: 12px; margin: 0; }
.pf-photo .field-image-canvas { width: 100%; height: auto; aspect-ratio: 1; border-radius: 14px; }
.pf-photo .field-image-canvas-placeholder { width: 40px; height: 40px; }
.pf-photo .field-image-actions { display: flex; align-items: center; justify-content: center; gap: 10px; }
.pf-photo .field-file { flex-direction: row; align-items: center; gap: 8px; }
.pf-incoming { margin-bottom: 10px; font-size: 13.5px; color: var(--muted); }
.pf-incoming b { font-size: 18px; color: var(--text); font-variant-numeric: tabular-nums; }
.pf-order-links { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
/* Yadda saxla stays in reach under a long form. */
.pf-actions {
  position: sticky;
  bottom: 12px;
  z-index: 4;
  justify-content: flex-end;
  margin-top: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}
.pf-actions .btn { flex: 0 0 auto; min-width: 140px; }

/* ====== Page: Sifarişlər (list + the open order side by side) ====== */

/* ≥1100px the list and the docked order preview (.desk, Modals section); narrower, the
   preview is a window (desktop) or a sheet (phone). */
.co-master { min-width: 0; }
.co-detail-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 340px; }
.co-detail-stats > div { padding: 10px 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.co-detail-stats span { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.co-detail-stats b { display: block; margin-top: 2px; font-size: 20px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }

/* ---- Filters ---- */
.co-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.co-search-row .co-search { flex: 1; min-width: 0; margin-bottom: 0; }
.co-date-filter-mobile { display: none; }
/* Status: labelled segments with Hamısı (desktop), two icon chips (phone). */
.co-status-toggles { display: inline-flex; gap: 6px; }
.co-status-toggles-desktop {
  flex-shrink: 0;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--surface-2);
}
.co-status-toggles-desktop > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: none;
  box-shadow: none;
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.co-status-toggles-desktop > button:hover { color: var(--text); }
.co-status-toggles-desktop > button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.co-status-toggles-desktop svg { width: 16px; height: 16px; flex: none; }
.co-status-toggle-pending svg { color: var(--warn); }
.co-status-toggle-confirmed svg { color: var(--ok); }
.co-status-toggle-count:not(:empty) {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface-3);
  font-size: 11.5px;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.co-status-toggle-pending .co-status-toggle-count:not(:empty) { background: var(--warn-soft); color: var(--warn); }
.co-status-toggles-mobile { display: none; }
.co-status-toggles-mobile .co-status-toggle-text,
.co-status-toggles-mobile .co-status-toggle-count { display: none; }
.co-date-chips { flex-wrap: wrap; gap: 6px; }
.co-date-range { display: inline-flex; align-items: center; gap: 4px; color: var(--faint); }
.co-filter-row { margin-bottom: 14px; }
/* The topbar "+" is the phone's way to Yeni sifariş; wider screens keep the page button. */
@media (min-width: 768px) {
  #co-new-top { display: none; }
}

/* ---- List ---- */
.co-list-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 6px 16px 6px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.co-list-head b { color: var(--text); font-variant-numeric: tabular-nums; }
.co-list-head-total { margin-left: auto; }
.co-check-all { display: flex; align-items: center; justify-content: center; width: 22px; cursor: pointer; }
.co-check-all input,
.co-row-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.co-check-all input:disabled { cursor: default; opacity: 0.4; }
/* Ticked orders: the bar covers the head's count and total. */
.co-bulk-bar {
  position: absolute;
  inset: 0 0 0 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 12px;
  background: var(--surface);
}
.co-bulk-bar[hidden] { display: none; }
.co-bulk-bar .filter-selected-count { margin-right: auto; color: var(--muted); }
.co-bulk-labels { display: inline-flex; align-items: center; gap: 6px; }
.co-bulk-labels svg { width: 15px; height: 15px; }

.co-row {
  display: grid;
  grid-template-columns: 22px 34px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  padding: 12px 16px 12px 14px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.co-row:hover { background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
.co-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--brand-strong); }
.co-row.is-selected { background: var(--brand-soft); }
.co-row.is-selected .co-status-icon { box-shadow: 0 0 0 2px var(--surface); }
.co-row-cancelled .co-row-customer,
.co-row-cancelled .co-row-total { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.co-row-check { display: flex; align-items: center; justify-content: center; }
.co-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  flex-shrink: 0;
}
.co-status-icon svg { width: 17px; height: 17px; }
.co-status-icon-pending { background: var(--warn-soft); color: var(--warn); }
.co-status-icon-confirmed { background: var(--ok-soft); color: var(--ok); }
.co-status-icon-cancelled { background: var(--err-soft); color: var(--err); }
.co-row-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.co-row-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.co-row-customer {
  min-width: 0;
  font-size: 14.5px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.co-row-phone { flex-shrink: 0; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.co-row-sub { align-items: center; font-size: 12.5px; color: var(--muted); }
.co-row-date { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.co-row-products { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-row-products b { color: var(--text); font-weight: 650; }
.co-row-fact {
  display: none;
  align-items: center;
  gap: 4px;
  max-width: 45%;
  flex-shrink: 1;
  min-width: 0;
  padding: 1px 8px 1px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
}
.co-row-fact svg { width: 13px; height: 13px; flex: none; color: var(--muted); }
.co-row-fact span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Dünən/Bu gün/Sabah: Ünvan and Qeyd instead of Tarix (customer-orders.js). */
#co-list.co-show-address .co-row-date { display: none; }
#co-list.co-show-address .co-row-fact { display: inline-flex; }
.co-row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.co-row-total { font-size: 14.5px; font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.co-row-meta { display: flex; align-items: center; gap: 6px; }
.co-tag {
  display: inline-block;
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.co-status-badge-text { font-size: 11.5px; font-weight: 600; color: var(--faint); white-space: nowrap; }
.co-status-badge-cancelled { color: var(--err); }
.co-no-results { padding: 40px 16px; }

/* ---- Order preview (window, sheet or docked panel) ---- */
.co-view-header-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.co-view-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
#co-view-modal-title { overflow-wrap: anywhere; }
.co-view-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  flex-shrink: 0;
}
.co-view-status-icon svg { width: 22px; height: 22px; }
.co-view-status-icon-pending { background: var(--warn-soft); color: var(--warn); }
.co-view-status-icon-confirmed { background: var(--ok-soft); color: var(--ok); }
.co-view-status-icon-cancelled { background: var(--err-soft); color: var(--err); }
/* Sifariş № · Tarix · Tip on one line. */
#co-view-header-type { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.co-view-delete:hover { background: var(--err-soft); color: var(--err); }
.co-contact-btn-whatsapp {
  background: color-mix(in srgb, #25d366 18%, var(--surface));
  color: #128c7e;
}
#co-view-modal-title[role="button"] { cursor: pointer; }
.co-contact-popup { display: flex; gap: 8px; margin-top: 8px; }
/* Up to 7 buttons: a 2-column grid at every width, DOM order = reading order. */
#co-view-modal-backdrop .form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#co-view-modal-backdrop .form-actions .btn { width: 100%; justify-content: center; }
#co-view-modal-backdrop .form-actions form { display: flex; }
#co-view-modal-backdrop .form-actions .fin-sale-account { grid-column: 1 / -1; margin-right: 0; }
#co-view-modal-backdrop .form-actions > .is-wide { grid-column: 1 / -1; }
/* "Mobil faktura" shortens to "Faktura" in a half-width phone cell. */
.co-view-btn-text-short { display: none; }
#co-view-paid-row[hidden] { display: none; }
.co-view-paid-account { display: flex; align-items: center; gap: 7px; min-height: 22px; }
#co-view-paid-row .field-icon { top: 3px; }
/* Kept for core.js to toggle, but zeroed so the empty div never adds padding/margin. */
#co-cart-empty,
#co-edit-cart-empty { padding: 0; margin-bottom: 0; }
/* Etiket: a small count of label files already on the order. */
.co-view-label-count {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.co-view-label-count[hidden] { display: none; }

/* ---- Bulk Təsdiqlə sheet ---- */
.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: 1px 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(--muted); }
.co-bulk-where { font-size: 13px; color: var(--muted); }
.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(--muted); }
.co-bulk-total b { color: var(--text); margin-left: 6px; }

@media (min-width: 768px) {
  /* 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 (min-width: 1100px) and (max-width: 1279px) {
  .co-row-phone { display: none; }
}

/* ====== Page: Müştərilər (list + the open customer) ====== */

/* ≥1100px the list and the right side (profile, form or a hint) side by side; a phone shows the
   list on its own page and the customer on the next (.crm-has-detail). */
.crm-list, .crm-detail { min-width: 0; }
@media (min-width: 1100px) {
  .crm { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(0, 1.25fr); gap: 24px; align-items: start; }
  .crm-detail { position: sticky; top: 26px; max-height: calc(100dvh - 26px - 64px); overflow-y: auto; scrollbar-width: thin; }
  .crm-detail > .breadcrumb { display: none; }
}
@media (min-width: 1500px) {
  .crm { grid-template-columns: 460px minmax(0, 1fr); }
}
@media (max-width: 1099px) {
  .crm-has-detail .crm-list,
  .crm:not(.crm-has-detail) .crm-detail { display: none; }
}
.cust-add-phone { display: none; }

/* Avatars: initials on one of six soft colours (by id). */
.crm-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.01em;
}
.crm-avatar-lg { width: 60px; height: 60px; font-size: 21px; }
.crm-avatar-icon { width: 46%; height: 46%; }
.crm-avatar-c0 { background: rgba(245, 223, 76, 0.45); color: #6B5A00; }
.crm-avatar-c1 { background: rgba(37, 99, 235, 0.13); color: #1D4ED8; }
.crm-avatar-c2 { background: rgba(22, 163, 74, 0.14); color: #15803D; }
.crm-avatar-c3 { background: rgba(234, 88, 12, 0.14); color: #C2410C; }
.crm-avatar-c4 { background: rgba(147, 51, 234, 0.13); color: #7E22CE; }
.crm-avatar-c5 { background: rgba(219, 39, 119, 0.12); color: #BE185D; }
/* Dark: the system's, unless Görünüş says Açıq; Görünüş › Qaranlıq forces it (v8.3). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .crm-avatar-c0 { color: #F5DF4C; background: rgba(245, 223, 76, 0.18); }
  :root:not([data-theme="light"]) .crm-avatar-c1 { color: #93C5FD; }
  :root:not([data-theme="light"]) .crm-avatar-c2 { color: #86EFAC; }
  :root:not([data-theme="light"]) .crm-avatar-c3 { color: #FDBA74; }
  :root:not([data-theme="light"]) .crm-avatar-c4 { color: #D8B4FE; }
  :root:not([data-theme="light"]) .crm-avatar-c5 { color: #F9A8D4; }
}
:root[data-theme="dark"] .crm-avatar-c0 { color: #F5DF4C; background: rgba(245, 223, 76, 0.18); }
:root[data-theme="dark"] .crm-avatar-c1 { color: #93C5FD; }
:root[data-theme="dark"] .crm-avatar-c2 { color: #86EFAC; }
:root[data-theme="dark"] .crm-avatar-c3 { color: #FDBA74; }
:root[data-theme="dark"] .crm-avatar-c4 { color: #D8B4FE; }
:root[data-theme="dark"] .crm-avatar-c5 { color: #F9A8D4; }

/* The list */
.crm-row { gap: 8px; padding: 9px 12px 9px 14px; }
.crm-row.is-selected { background: var(--brand-soft); }
.crm-row-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; }
.crm-row-link .card-row-title { display: block; font-size: 14.5px; }
.crm-row-link .card-row-sub { display: block; font-size: 12.5px; }
.cust-row-link:hover .card-row-title { text-decoration: underline; text-decoration-color: var(--brand-strong); text-underline-offset: 3px; }
@media (hover: hover) {
  .crm-row .favorite-toggle:not(.is-favorite) { opacity: 0; transition: opacity 0.12s ease; }
  .crm-row:hover .favorite-toggle, .crm-row .favorite-toggle:focus-visible { opacity: 1; }
}

/* The right side: a hint, a profile or the form, each a card. */
.crm-empty, .crm-profile, .crm-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.crm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 32px;
  text-align: center;
  color: var(--muted);
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}
.crm-empty-icon { width: 36px; height: 36px; margin-bottom: 12px; color: var(--faint); }
.crm-empty-title { margin: 0 0 6px; font-size: 16px; font-weight: 750; color: var(--text); }
.crm-empty-text { margin: 0 0 18px; max-width: 300px; font-size: 13px; line-height: 1.5; }
.crm-profile { padding: 22px 22px 18px; }
.crm-profile-head { display: flex; align-items: center; gap: 16px; }
.crm-profile-name { flex: 1; min-width: 0; }
.crm-profile-name h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; overflow-wrap: anywhere; }
.cust-view-sub { font-size: 14px; color: var(--muted); margin-top: 3px; }
.crm-profile-actions { display: flex; align-items: center; gap: 6px; align-self: flex-start; }
.crm-profile-actions form { display: flex; margin: 0; }
.crm-contact { display: flex; gap: 8px; margin-top: 16px; }
.crm-contact .btn { gap: 6px; }
.crm-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 6px; }
.crm-kpi { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.crm-kpi span { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.crm-kpi b { display: block; margin-top: 2px; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.crm-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 18px 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}
.crm-section-title .dash-see-all { text-transform: none; letter-spacing: 0; }
.crm-feed { display: flex; flex-direction: column; }
.crm-feed-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 2px;
  border-top: 1px solid var(--separator);
  color: inherit;
}
a.crm-feed-row:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.crm-feed-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.crm-feed-title { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.crm-feed-sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-feed-sub b { color: var(--text); }
.crm-feed-end { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.crm-feed-end b { font-size: 14.5px; font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.crm-feed-empty { padding: 14px 2px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--separator); }
.cust-view-returned { font-size: 12px; color: var(--err); white-space: nowrap; }
.crm-form { padding: 22px; }
.crm-form-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.crm-form-head h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.crm-form .form-actions { margin-top: 18px; }
/* Müqavilələr › Alıcılar: the same list + form, its list a sortable table. */
.buyers-table .buyer-row.is-selected td { background: var(--brand-soft); }
.buyers-table th, .buyers-table td { white-space: normal; }
.buyers-table td:nth-child(2) { font-size: 13px; color: var(--muted); }
.buyer-link { font-weight: 650; color: var(--text); }
.buyer-link:hover { text-decoration: underline; text-decoration-color: var(--brand-strong); text-underline-offset: 3px; }

/* ====== Page: Müraciətlər (the .crm list + the open inquiry; Kommersiya təklifləri reuses inq-*) ====== */

.inq-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.inq-search { flex: 1; min-width: 200px; margin-bottom: 0; }
.inq-row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.inq-row-date { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.inq-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.inq-meta a { font-weight: 650; }
.inq-customer-link { color: inherit; }
.inq-customer-link:hover { text-decoration: underline; text-decoration-color: var(--brand-strong); text-underline-offset: 3px; }
.inq-notes { margin: 0; padding: 12px 2px; border-top: 1px solid var(--separator); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.inq-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.inq-actions form { display: flex; margin: 0; }
.inq-items { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.inq-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.inq-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.inq-item-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inq-item-sub { font-size: 12px; color: var(--muted); }
.inq-item-qty { width: 64px; text-align: right; }
.inq-free { display: flex; gap: 8px; margin-top: 8px; }
.inq-free input { flex: 1; min-width: 0; }
.inq-kind { margin-bottom: 14px; }
.inq-item-price .qt-item-price { width: 84px; }
.inq-late { color: var(--err); font-weight: 650; }
.inq-pre-form { margin-top: 14px; }
.inq-pre-form h3 { margin: 0 0 10px; font-size: 15px; }
.inq-pre-form .qt-status { margin-bottom: 12px; }
.inq-pre-form .seg-btn { cursor: pointer; }
.inq-pre-hint { margin: 0 0 12px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.inq-pay-end { flex-direction: row; align-items: center; gap: 8px; }
.inq-pay-delete { margin: 0; }

/* ====== Page: Kommersiya təklifləri (the Müraciətlər layout + lines with prices) ====== */

.qt-row-total { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.qt-number { color: var(--text); font-weight: 700; }
.qt-status-form { margin: 0; }
.qt-status { display: flex; width: 100%; }
.qt-status .seg-btn { flex: 1; justify-content: center; border: 0; font: inherit; cursor: pointer; }
.qt-thumb { width: 34px; height: 34px; }
.qt-line-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-disc { color: var(--ok); font-weight: 650; }
.qt-totals { display: flex; flex-direction: column; gap: 3px; padding: 10px 2px 0; border-top: 1px solid var(--separator); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.qt-totals div { display: flex; justify-content: space-between; gap: 12px; }
.qt-totals-sum { margin-top: 3px; font-size: 16px; font-weight: 800; color: var(--text); }
.qt-items { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.qt-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.qt-item .cart-thumb { flex-shrink: 0; }
.qt-item-nums { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.qt-unit { display: flex; align-items: center; gap: 3px; margin: 0; font-size: 12.5px; color: var(--muted); }
.qt-unit input { text-align: right; padding-inline: 8px; }
.qt-item-qty { width: 56px; }
.qt-item-price { width: 76px; }
.qt-item-disc { width: 56px; }
.qt-item-total { min-width: 72px; text-align: right; font-size: 14px; font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qt-form-total { margin-top: 8px; text-align: right; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* The open quote's column is narrow at 1100–1439px: a line's numbers go under its name there. */
@media (max-width: 1439px) {
  .qt-item { flex-wrap: wrap; }
  .qt-item-main { flex: 1 1 calc(100% - 100px); }
  .qt-item-nums { order: 3; flex: 1 1 100%; justify-content: flex-end; padding-left: 46px; }
}

/* ====== Page: Servis müraciətləri (the Müraciətlər layout + a talon link and photos) ====== */

/* Six steps don't fit one row of the open case's column: two rows of three, read left to right. */
.sc-status { display: grid; grid-template-columns: repeat(3, 1fr); }
.sc-links { margin-top: 10px; }
.sc-links .btn { flex-shrink: 0; }
.sc-links .crm-feed-sub { white-space: normal; }
.sc-link { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 7px 8px 7px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.sc-link-text { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.sc-lookup-results { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sc-lookup-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sc-lookup-row:hover { border-color: var(--brand-strong); }
.sc-lookup-row .ch-state { flex-shrink: 0; }
.sc-lookup-empty { font-size: 13px; color: var(--muted); padding: 4px 2px; }
.sc-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; padding-top: 4px; }
.sc-photo { position: relative; aspect-ratio: 1; }
.sc-photo form { margin: 0; }
.sc-photo-open { display: block; width: 100%; height: 100%; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface-2); cursor: zoom-in; }
.sc-photo-open img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-photo-delete { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer; }
.sc-photo-delete svg { width: 14px; height: 14px; }
.sc-photo-add-form { margin: 0; aspect-ratio: 1; }
.sc-photo-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 100%; margin: 0; border: 1.5px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 12.5px; cursor: pointer; }
.sc-photo-add:hover { border-color: var(--brand-strong); color: var(--text); }
.sc-photo-add svg { width: 20px; height: 20px; }
.sc-photo-add-form.is-busy { opacity: 0.5; pointer-events: none; }

/* ====== Page: Kateqoriyalar (the tree + the open one's form) ====== */

.cat-row { gap: 10px; padding: 9px 12px 9px 10px; }
.cat-row.is-selected { background: var(--brand-soft); }
.cat-row-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: inherit; }
.cat-row-link .card-row-title { flex: 1; min-width: 0; font-size: 14.5px; }
.cat-row-link:hover .card-row-title { text-decoration: underline; text-decoration-color: var(--brand-strong); text-underline-offset: 3px; }
.cat-row-meta { flex-shrink: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.card-row-child.cat-row { padding-left: 52px; }
.cat-row-end { flex-shrink: 0; display: flex; justify-content: flex-end; width: 60px; }
.cat-add-phone { display: none; }
.cat-delete { display: flex; margin: 0 0 0 auto; }
@media (hover: hover) and (min-width: 768px) {
  .cat-row .cat-add-child { opacity: 0; transition: opacity 0.12s ease; }
  .cat-row:hover .cat-add-child, .cat-row .cat-add-child:focus-visible { opacity: 1; }
}

/* ====== Page: Keçmiş (the activity log as a day-by-day feed) ====== */

.hist-main { min-width: 0; }
.hist-side { display: flex; flex-direction: column; gap: 20px; }
.hist-side .side-item { text-decoration: none; }
.hist-side .side-item.filter-chip { justify-content: flex-start; height: auto; border: 0; background: none; box-shadow: none; font-weight: 500; }
.hist-side .side-item.active,
.hist-side .side-item.filter-chip.active { background: var(--brand-soft); color: var(--text); font-weight: 650; }
.hist-range-fields { display: flex; flex-direction: column; gap: 6px; padding: 0 2px; }
.hist-range-fields .filter-select { width: 100%; }
@media (min-width: 1100px) {
  .hist { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: start; }
  .hist-side { position: sticky; top: 26px; max-height: calc(100dvh - 26px - 64px); overflow-y: auto; padding: 6px 4px 6px 0; scrollbar-width: thin; }
}
@media (max-width: 1099px) {
  /* Periods and types as two scrolling chip rows over the feed; the free range folds away. */
  .hist-side { gap: 8px; margin-bottom: 12px; }
  .hist-side .side-title, .hist-range { display: none; }
  .hist-side .side-list { flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .hist-side .side-list::-webkit-scrollbar { display: none; }
  .hist-side .side-item,
  .hist-side .side-item.filter-chip { flex-shrink: 0; width: auto; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
  .hist-side .side-item .side-item-icon { display: none; }
  .hist { display: flex; flex-direction: column; }
  .hist-main { display: contents; }
  .hist-main > * { order: 4; }
  .hist-main > .page-header { order: 0; }
  .hist-undo { order: 1; }
  .hist-side { order: 2; }
  .hist-main > .search-bar { order: 3; }
}

.hist-undo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.hist-undo-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.hist-undo-text b { font-size: 14px; color: var(--text); }
.hist-undo .undo-bar select { max-width: 340px; }

.hist-day {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.hist-entry {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--separator);
}
.hist-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-soft);
  font-size: 11.5px;
  font-weight: 750;
}
.hist-desc { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.hist-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.hist-entity { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; font-size: 11.5px; }
.hist-entity svg { width: 12px; height: 12px; }
.hist-action { font-weight: 600; }
.hist-entry-delete .hist-action, .hist-entry-cancel .hist-action { color: var(--err); }
.hist-entry-create .hist-action, .hist-entry-confirm .hist-action, .hist-entry-receive .hist-action { color: var(--ok); }
.hist-time { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 2px; }

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

/* Orderlər: the orders and, ≥1100px, the open one beside them (.desk, Modals section). */
.po-master { min-width: 0; }
.po-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.po-toolbar .po-search { flex: 1; min-width: 0; margin-bottom: 0; }
.po-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 150px minmax(96px, auto);
  align-items: center;
  column-gap: 14px;
  padding: 12px 16px 12px 14px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.po-row:hover { background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
.po-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--brand-strong); }
.po-row.is-selected { background: var(--brand-soft); }
.po-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  flex-shrink: 0;
  background: var(--surface-2);
  color: var(--muted);
}
.po-state-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.po-state-icon-open { background: var(--warn-soft); color: var(--warn); }
.po-state-icon-partially_received { background: var(--info-soft); color: var(--info); }
.po-state-icon-received { background: var(--ok-soft); color: var(--ok); }
.po-state-icon-cancelled { background: var(--err-soft); color: var(--err); }
.po-row-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.po-row-title { font-size: 14.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-row-num { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 2px; }
.po-row-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 12.5px; color: var(--muted); }
.po-row-expected { color: var(--warn); font-weight: 600; }
.po-row-docs { display: inline-flex; align-items: center; gap: 3px; }
.po-row-docs svg { width: 13px; height: 13px; }
.po-row-progress { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.po-row-progress b { color: var(--text); }
.po-bar { display: block; height: 5px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.po-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--ok); }
.po-row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.po-row-total { font-size: 14.5px; font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.po-row-status { font-size: 11.5px; font-weight: 600; color: var(--faint); white-space: nowrap; }
.po-row-open .po-row-status { color: var(--warn); }
.po-row-partially_received .po-row-status { color: var(--info); }
.po-no-results { padding: 40px 16px; }

/* The open order (window, sheet or docked panel). */
/* Header and buttons stay put, the lines scroll — as a window and as a sheet too. */
.modal.po-view { display: flex; flex-direction: column; max-width: 560px; overflow: hidden; }
.po-view .dock-body { flex: 1; min-height: 0; overflow-y: auto; }
.modal-backdrop:not(.is-docked) > .po-view .dock-body { margin: 0 -20px; padding: 0 20px 4px; }
@media (min-width: 768px) {
  .modal-backdrop:not(.is-docked) > .po-view .dock-body { margin: 0 -24px; padding: 0 24px 4px; }
}
.po-view-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.po-view-head-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.po-state-icon.po-view-icon { width: 44px; height: 44px; border-radius: 14px; }
.po-state-icon.po-view-icon svg { width: 22px; height: 22px; }
.po-view-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--muted); }
.po-view-status { padding: 1px 8px; border-radius: 999px; background: var(--surface-2); font-size: 11.5px; font-weight: 650; color: var(--muted); }
.po-view-status-open { background: var(--warn-soft); color: var(--warn); }
.po-view-status-partially_received { background: var(--info-soft); color: var(--info); }
.po-view-status-received { background: var(--ok-soft); color: var(--ok); }
/* The supplier opens Təchizatçılar (contracts live there): text-coloured, underlined on hover. */
.order-row-supplier-link {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.order-row-supplier-link:hover { text-decoration-color: var(--brand-strong); }
.po-view-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; }
.po-view-kpi { display: flex; flex-direction: column; gap: 2px; padding: 11px 13px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
.po-view-kpi > span:first-child { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.po-view-kpi b { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.po-view-kpi .po-bar { margin-top: 5px; background: var(--surface-3); }
.po-view-section .crm-section-title { margin-top: 16px; }
.po-view-line-count { margin-left: 4px; color: var(--muted); }
.po-view-docs { display: flex; flex-wrap: wrap; gap: 6px; }
.po-view-doc {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.po-view-doc:hover { border-color: var(--line-strong); background: var(--surface-2); }
.po-view-notes { font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.po-view-lines { margin-bottom: 0; }
.po-view-line-end { flex-direction: column; align-items: flex-end; gap: 2px; }
.po-view-line-total { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.po-view-line-got { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.po-view-line-got.is-done { color: var(--ok); }
.po-view-actions { gap: 8px; }
.po-view-actions .btn { justify-content: center; white-space: nowrap; }
.po-view-actions > .is-wide { flex-basis: 100%; }
.po-view-delete:hover { background: var(--err-soft); color: var(--err); }
.modal-header-actions form { display: flex; margin: 0; }
/* Docked, the X closes the panel; Bağla is for the window and the sheet. */
.is-docked .po-view-close { display: none; }

/* Yolda olan mallar: the lines grouped by their order, each group a card whose head opens the order. */
.inc-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.inc-toolbar .inc-search { flex: 1; min-width: 0; margin-bottom: 0; }
.inc-toolbar .picker-trigger { min-width: 16ch; }
.inc-list { display: flex; flex-direction: column; gap: 14px; }
.inc-group { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.inc-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
  color: inherit;
}
.inc-group-head:hover { background: var(--surface-2); }
.inc-group-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inc-group-title b { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inc-group-sub { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.inc-group-expected { color: var(--warn); font-weight: 600; }
.inc-group-count { font-size: 13px; color: var(--muted); white-space: nowrap; }
.inc-group-count b { color: var(--text); font-variant-numeric: tabular-nums; }
.inc-group-open { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.inc-group-open svg { width: 15px; height: 15px; }
.inc-group-head:hover .inc-group-open { color: var(--text); }
.incoming-row { gap: 12px; padding: 10px 16px 10px 14px; cursor: pointer; }
.incoming-row:hover { background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.incoming-row .card-row-title { font-size: 14px; }
.incoming-row .card-row-sub { font-variant-numeric: tabular-nums; }
.inc-row-qty { flex-shrink: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.inc-row-qty b { font-size: 15px; font-weight: 750; color: var(--text); }

/* 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(--primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.po-doc-item-link:hover { text-decoration: underline; }
.po-doc-item-link { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.po-doc-item-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); }
/* Təchizatçılar (the Müştərilər layout): the order count on a row, the inline form, documents. */
.sup-row-count { flex-shrink: 0; margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.sup-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sup-form .form-actions { margin-top: 4px; justify-content: flex-end; }
.sup-form .form-actions .btn { flex: 0 0 auto; }
.sup-hint { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.sup-doc-upload .field-file { flex-direction: row; align-items: center; gap: 8px; }

.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;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  padding: 0 10px;
  font-size: 14px;
  font-family: var(--font);
  background: var(--surface);
  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(--primary) 45%, transparent);
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  box-shadow: none;
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
}
/* Malların maya dəyəri: the orders waiting for their costs | the picked one's sheet (≥1100px);
   narrower, one of the two (.lc-has-order). */
.lc-orders, .lc-main { min-width: 0; }
@media (min-width: 1100px) {
  .lc { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
  .lc-orders { position: sticky; top: 26px; max-height: calc(100dvh - 26px - 64px); overflow-y: auto; scrollbar-width: thin; }
  .lc-orders-header h1 { font-size: 24px; }
}
@media (max-width: 1099px) {
  .lc-has-order .lc-orders,
  .lc:not(.lc-has-order) .lc-main { display: none; }
}
.lc-orders .side-title { padding-left: 2px; }
.lc-order-list { display: flex; flex-direction: column; gap: 8px; }
.lc-order {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 12px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.lc-order:hover { background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.lc-order.is-selected { background: var(--brand-soft); border-color: var(--brand-strong); }
.lc-order-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lc-order-body b { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 650; white-space: nowrap; }
.lc-order-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lc-order-body .lc-order-state { margin-left: auto; }
.lc-order-body > span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.lc-order-state { padding: 2px 8px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.lc-order-state.is-done { background: var(--ok-soft); color: var(--ok); }
.lc:not(.lc-has-order) .lc-main-header,
.lc-has-order .lc-empty { display: none; }
.lc-title-plain { display: none; }
.landed-cost-header-order { cursor: default; }
.landed-cost-header-rate { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.landed-cost-header-rate > span:first-child { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
#landed-cost-rate-display { padding: 3px 10px; border-radius: 999px; background: var(--surface-2); font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Packing list: one row over the sheet. */
.lc-packing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 14px;
  padding: 12px 14px 12px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
}
.lc-packing-text { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.lc-packing-text b { font-size: 14px; font-weight: 650; }
.lc-packing-text span { font-size: 12.5px; color: var(--muted); }
.lc-packing-file { flex-direction: row; align-items: center; gap: 8px; min-width: 0; }
.lc-packing-file .field-file-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-packing-total { width: 130px; }
.lc-packing-total input {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.lc-table th, .lc-table td { padding: 6px 8px; }
.lc-table th { white-space: normal; line-height: 1.25; }
.lc-table .cart-name { min-width: 160px; white-space: normal; }
.lc-packing-status { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--muted); }
.lc-table-wrap { margin-bottom: 14px; }
.lc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.lc-cards .form-card { margin-bottom: 0; }
/* Yenilə stays in reach at the bottom of a long sheet. */
.lc-actions {
  position: sticky;
  bottom: 12px;
  z-index: 4;
  justify-content: flex-end;
  margin-top: 14px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}
.lc-actions .btn { flex: 0 0 auto; min-width: 160px; }
.landed-cost-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.landed-cost-section-header h2 { margin: 0; font-size: 16px; font-weight: 750; letter-spacing: -0.01em; }
/* 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: 1px 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: 13.5px; }
.landed-cost-check { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.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(--ok); }
.landed-cost-check.is-off span:last-child { color: var(--err); }
.landed-cost-expense-row:last-child { border-bottom: none; }
/* Əl ilə yazılmış xərclər — read-only since v7.27 (new costs: Maliyyə, tied to the order). */
.lc-extra-note { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.lc-back { display: none; }
@media (max-width: 1099px) {
  /* One column: the order's label is the way back to the list (‹ Orderlər on a phone). */
  .landed-cost-header-order { cursor: pointer; }
  .landed-cost-header-order::before { content: '‹ '; color: var(--muted); }
}

/* ====== Page: Order qaralaması (order_draft.php; lines as Kommersiya təklifi's qt-item) ====== */

.od { max-width: 1100px; }
.od-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.od-head-main { min-width: 0; flex: 1; }
.od-supplier { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--muted); }
.od-supplier-icon { width: 16px; height: 16px; }
.od-title { display: block; width: 100%; max-width: 520px; margin: 4px 0 2px; padding: 2px 0; border: 0; border-bottom: 1px dashed transparent; border-radius: 0; background: none; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); box-shadow: none; }
.od-title:hover, .od-title:focus { border-bottom-color: var(--line); outline: 0; box-shadow: none; }
.od-title::placeholder { color: var(--faint); font-weight: 650; }
.od-title-static { margin: 4px 0 2px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.od-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; color: var(--muted); }
.od-converted { font-weight: 650; color: var(--ok); }
.od-save-state { font-size: 12.5px; }
.od-save-saving { color: var(--muted); }
.od-save-saved { color: var(--ok); }
.od-save-error { color: var(--err); font-weight: 650; }
.od-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.od-delete-form { margin: 0; display: flex; }
/* Geri al / İrəli: icons only, before PDF. */
.od-history { display: flex; gap: 4px; }
.od-history-btn { width: 38px; height: 38px; background: var(--surface); border-color: var(--line); color: var(--text); }
.od-history-btn:hover { background: var(--surface-2); }
.od-history-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.od-pdf-wrap { position: relative; display: flex; }
.od-pdf-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 160px; padding: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; }
.od-pdf-menu[hidden] { display: none; }
.od-pdf-menu button { appearance: none; border: 0; background: none; font: inherit; font-size: 14px; color: var(--text); text-align: left; padding: 9px 12px; border-radius: var(--radius-xs); cursor: pointer; }
.od-pdf-menu button:hover, .od-pdf-menu button:focus-visible { background: var(--surface-2); outline: none; }
.od-lines { display: flex; flex-direction: column; gap: 6px; }
.od-item { padding-left: 10px; }
.od-grip { margin-left: -4px; }
.od-grip svg { fill: currentColor; stroke: none; }
.od-item.is-dragging { box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.15)); }
.od-item-n { width: 22px; flex-shrink: 0; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; text-align: right; }
.od-thumb-pick { cursor: pointer; border: 1px dashed var(--line-strong, var(--line)); }
.od-thumb-pick:hover, .od-thumb-pick.is-drop { border-color: var(--brand-strong); background: var(--brand-soft, var(--surface-2)); }
.od-thumb-view { cursor: zoom-in; }
/* A new product's line: as tall as the others, its catalog name typed in place (looks like the others'
   name until hovered / focused), the frame in the brand colour says it's new. */
.od-item-new { border-color: var(--brand-strong); box-shadow: 0 0 0 1px var(--brand-strong); }
.od-item-new .od-item-main { min-height: 38px; justify-content: center; }
/* A full border of its own (the browser's inset default drew only the top and left edges). */
.od-item-name-input { width: calc(100% + 8px); height: 30px; margin-left: -8px; padding: 2px 7px; border: 1px solid transparent; border-radius: var(--radius-sm); outline: none; background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; }
.od-item-name-input:hover { border-color: var(--line); }
.od-item-name-input:focus { border-color: var(--brand-strong); background: var(--surface); }
.od-item-name-input::placeholder { font-weight: 500; color: var(--warn); }
/* A new product's catalog name: the catalog's names that look like it, a click takes one. */
.od-similar { margin-top: 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); max-height: 304px; overflow-y: auto; }
.od-similar-head { padding: 7px 10px 3px; font-size: 11px; font-weight: 650; color: var(--muted); }
.od-similar-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.od-similar-row:hover { background: var(--brand-soft); }
.od-similar-img { width: 34px; height: 34px; flex-shrink: 0; border-radius: 6px; background: var(--separator); overflow: hidden; }
.od-similar-img img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.od-similar-text { min-width: 0; display: flex; flex-direction: column; }
.od-similar-text b { font-size: 13px; font-weight: 600; line-height: 1.3; }
.od-similar-text small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.od-item-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.od-item-note { width: 100%; max-width: 420px; height: 28px; margin-top: 4px; padding: 2px 8px; font-size: 12.5px; }
.od-item-nums { align-items: flex-start; padding-bottom: 15px; }
/* The last price sits under the input out of flow, so a long one never pushes Say left. */
.od-price { position: relative; display: flex; flex-direction: column; align-items: flex-end; }
.od-price .od-price-last { position: absolute; right: 0; top: calc(100% + 2px); }
.od-item-price { width: 96px; }
.od-price-last { border: 0; padding: 0; background: none; font: inherit; font-size: 11.5px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.od-price-last:hover { color: var(--brand-strong); text-decoration: underline; text-underline-offset: 2px; }
.od-price-none { cursor: default; color: var(--faint); }
.od-price-none:hover { color: var(--faint); text-decoration: none; }
.od-item-total { min-width: 92px; padding-top: 7px; }
.od-item-sub b { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.od-item-off { color: var(--err); }
.od-item-tools { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.od-add { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.od-add select, .od-add .picker-trigger { flex: 1; min-width: 0; }
.od-new { margin-top: 10px; }
.od-new-grid { display: flex; gap: 14px; align-items: flex-start; }
.od-new-photo { width: 112px; height: 112px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px dashed var(--line-strong, var(--line)); border-radius: 12px; background: var(--surface); cursor: pointer; overflow: hidden; color: var(--muted); font: inherit; }
.od-new-photo:hover, .od-new-photo.is-drop { border-color: var(--brand-strong); color: var(--brand-strong); }
.od-new-photo img { width: 100%; height: 100%; object-fit: contain; }
.od-new-photo-hint { text-align: center; font-size: 13px; font-weight: 650; line-height: 1.35; }
.od-new-photo-hint small { display: block; font-size: 11px; font-weight: 500; color: var(--faint); }
.od-new-fields { flex: 1; min-width: 0; }
.od-new-fields .field-row .field { flex: 1 1 160px; }
.od-new-fields .od-new-field-sm { flex: 0 1 110px; }
.od-new-actions { margin-top: 4px; justify-content: flex-end; }
.od-new-actions .btn { flex: 0 0 auto; }
.od-totals { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 24px; margin-top: 14px; padding: 12px 2px 0; border-top: 1px solid var(--separator); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.od-totals div { display: flex; align-items: baseline; gap: 8px; }
.od-totals b { color: var(--text); font-size: 15px; }
.od-totals-sum b { font-size: 20px; font-weight: 800; }
.od-notes-card { margin-top: 14px; }
.od-convert-lead { margin: 0 0 12px; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.od-convert-new-head { margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.od-convert-new { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--separator); }
/* The name beside the photo on its own row, SKU and Kateqoriya under it (side by side they left the name ~1 letter wide). */
.od-convert-new-name { flex: 1 1 calc(100% - 60px); min-width: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.od-convert-new-name small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.od-convert-new .field { margin: 0; }
.od-convert-sku { flex: 0 0 120px; }
.od-convert-cat { flex: 1 1 200px; }
.od-convert-new .field label { font-size: 11px; }
/* Orderlər: open drafts above the orders. */
.po-page-actions { display: flex; align-items: center; gap: 8px; }
.po-drafts { margin-bottom: 14px; }
.po-drafts-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.po-draft-row { align-items: center; }
.po-draft-row .card-row-main { flex: 1; min-width: 0; }
.po-draft-row .card-row-sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-draft-end { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.po-draft-total { font-weight: 750; font-variant-numeric: tabular-nums; }
.po-draft-sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.po-draft-icon { width: 18px; height: 18px; color: var(--brand-strong); flex-shrink: 0; }
.po-draft-start { display: grid; gap: 8px; }
.po-draft-start label { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.po-draft-start label:has(input:checked) { border-color: var(--brand-strong); background: var(--brand-soft, var(--surface-2)); }
.po-draft-start input { margin-top: 3px; }
.po-draft-start b { display: block; font-size: 14px; }
.po-draft-start span { font-size: 12.5px; color: var(--muted); }
/* The page is wide, so a line stays on one row (the quote's 1439px wrap is for its narrow column). */
.od-item { flex-wrap: nowrap; }
.od-item-main { flex: 1 1 0; }
.od-item-nums { order: 0; flex: 0 0 auto; padding-left: 0; }
/* ====== Page: Satış tarixçəsi, Qaytarmalar ====== */

/* The strip over the table: what the filters leave (reports.js fills it). */
.sh-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.sh-search { margin-bottom: 10px; }
.sh-kpi { padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.sh-kpi span { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.sh-kpi b { display: block; margin-top: 3px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-kpi-main { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.sh-kpi-main span { color: color-mix(in srgb, var(--on-primary) 70%, transparent); }
/* One toolbar: when, then what / who. */
.sh-toolbar .filter-row-selects { flex-wrap: wrap; gap: 8px; }
.sh-dates { display: inline-flex; align-items: center; gap: 4px; color: var(--faint); }
.sh-toolbar-sep { width: 1px; height: 24px; margin: 0 4px; background: var(--line-strong); }
.sh-toolbar .picker-trigger { min-width: 13ch; }
/* Ticked rows: a bar over the table. */
.sh-selection {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -4px 0 10px;
  padding: 8px 10px 8px 16px;
  border-radius: 12px;
  background: var(--err-soft);
  font-size: 13.5px;
}
.sh-selection > span { margin-right: auto; }
.sh-selection[hidden] { display: none; }
/* The table: product name over its SKU, actions on hover (with a mouse). */
.sh-table th, .sh-table td { padding-left: 10px; padding-right: 10px; }
.sh-table .sh-c-product { min-width: 200px; max-width: 320px; white-space: normal; }
.sh-table .sh-c-customer { max-width: 180px; white-space: normal; }
.sh-table .sh-product-name { display: block; font-weight: 600; }
.sh-table .sh-product-sku { display: block; font-size: 12px; color: var(--muted); }
.sh-table .sh-c-date { color: var(--muted); font-variant-numeric: tabular-nums; }
.sh-table .sh-c-amount { font-weight: 700; }
.sh-table .sh-c-notes { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; }
.sh-none { color: var(--faint); }
.sh-row-return td { color: var(--err); }
.sh-row-return .sh-product-sku { color: color-mix(in srgb, var(--err) 70%, transparent); }
.sh-return-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--err-soft);
  color: var(--err);
  font-size: 11.5px;
  font-weight: 650;
}
.sh-actions-col { width: 1%; }
.sh-row-actions { white-space: nowrap; text-align: right; }
/* 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(--ok) 14%, var(--surface)); color: #1f9d48; }
.btn-icon-return { background: color-mix(in srgb, #FFCC00 24%, var(--surface)); color: #a88400; }
.sh-row-actions .btn-icon + .btn-icon { margin-left: 6px; }
@media (hover: hover) and (min-width: 768px) {
  .sh-table tbody .sh-row-actions .btn-icon { opacity: 0; transition: opacity 0.12s ease; }
  .sh-table tbody tr:hover .sh-row-actions .btn-icon,
  .sh-table tbody .sh-row-actions .btn-icon:focus-visible { opacity: 1; }
}

/* Gəliş tarixçəsi: the same table; its Order cell is a chip that opens the order. */
.rh-order-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rh-order-chip svg { width: 13px; height: 13px; color: var(--muted); }
.rh-order-chip:hover { border-color: var(--line-strong); background: var(--surface-2); }

/* Stok düzəlişləri, Məhsul status dəyişiklikləri, Satıldı və bitdi: a hint, the strip, the same table. */
.rep-hint { margin: -8px 0 14px; max-width: 760px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.rep-hint a { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--brand-strong); text-underline-offset: 3px; }
.sh-kpi .rep-up { color: var(--ok); }
.sh-kpi .rep-down { color: var(--err); }
.rep-change { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rep-change-up { background: var(--ok-soft); color: var(--ok); }
.rep-change-down { background: var(--err-soft); color: var(--err); }
.rep-from { color: var(--muted); font-size: 12.5px; }
.rep-inline-form { display: inline-flex; margin: 0; }
.rep-toolbar .filter-row-selects { flex-wrap: wrap; gap: 8px; }
.rep-dates .btn { margin-left: 4px; }
.rep-margin { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rep-margin-bar { display: inline-block; width: 56px; height: 5px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.rep-margin-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--ok); }
.rep-table .sh-c-product { max-width: 420px; }

/* Qaytarmalar: the returns and, ≥1100px, the open one's sale beside them (.desk). */
.sr-master { min-width: 0; }
.sr-hint { margin: -8px 0 14px; max-width: 720px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.sr-toolbar .filter-row-selects { flex-wrap: wrap; gap: 8px; }
.sr-sort { display: inline-flex; gap: 4px; margin-left: auto; }
.sr-sort-dir { min-width: 40px; justify-content: center; font-size: 15px; }
.sr-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.sr-row:hover { background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
.sr-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--brand-strong); }
.sr-row.is-selected { background: var(--brand-soft); }
.sr-row-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; background: var(--err-soft); color: var(--err); }
.sr-row-icon svg { width: 17px; height: 17px; }
.sr-row-body { min-width: 0; }
.sr-row-title { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-row-sku { margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--faint); }
.sr-row-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.sr-row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.sr-row-amount { font-size: 14.5px; font-weight: 750; color: var(--err); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sr-row-meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sr-row-delete { display: flex; margin: 0; }
@media (hover: hover) {
  .sr-row .sr-row-delete .btn-icon { opacity: 0; transition: opacity 0.12s ease; }
  .sr-row:hover .sr-row-delete .btn-icon, .sr-row .sr-row-delete .btn-icon:focus-visible { opacity: 1; }
}
.sr-detail .desk-empty > svg { width: 36px; height: 36px; margin-bottom: 12px; color: var(--faint); }
#sr-view-subtitle { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; color: var(--muted); }
#sr-view-modal-backdrop .form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#sr-view-modal-backdrop .form-actions .btn { justify-content: center; }

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

/* Satış kanalları: a card per channel with its live state. */
.chx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.chx-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.chx-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-hover); }
@media (hover: hover) { .chx-card:hover { transform: translateY(-1px); } }
.chx-card-top { display: flex; align-items: center; gap: 12px; }
.chx-card-name { margin-right: auto; font-size: 17px; font-weight: 750; letter-spacing: -0.01em; }
/* The boxes sit right under the name on every card (one line across the row); the chips below may wrap. */
.chx-card-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chx-fig { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.chx-fig span { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.chx-fig b { display: block; margin-top: 2px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.chx-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--muted); }

/* A channel's logo on a white tile (the logos are drawn for white). */
.ch-logo { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: var(--logo-bg); }
.ch-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.ch-logo-lg { width: 56px; height: 56px; padding: 9px; border-radius: 15px; }

/* State pills: the reconciliation's verdict, statuses on rows. */
.ch-state { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.ch-state svg { width: 14px; height: 14px; }
.ch-state-ok { background: var(--ok-soft); color: var(--ok); }
.ch-state-off { background: var(--err-soft); color: var(--err); }
.ch-state-warn { background: var(--warn-soft); color: var(--warn); }
.ch-state-idle { background: var(--surface-2); color: var(--muted); }

/* Hub header: logo, name, last check | store links + Yenilə. */
.ch-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 18px; }
.ch-head-text { margin-right: auto; min-width: 0; }
.ch-head h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.ch-head-sub { margin-top: 3px; font-size: 13px; color: var(--muted); }
.ch-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ch-head-actions form { margin: 0; }

/* Reconciliation: what we count against what the channel shows. */
.ch-recon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.ch-recon.is-off { border-color: color-mix(in srgb, var(--err) 30%, var(--line)); }
.ch-recon-label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ch-recon-value { margin-top: 2px; font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ch-recon-parts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.ch-recon-parts b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.ch-recon-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ch-recon-mid > svg { width: 22px; height: 22px; color: var(--faint); }
.ch-recon-side:last-child { text-align: right; }
.ch-recon-side:last-child .ch-recon-parts { justify-content: flex-end; }

.ch-section { margin-bottom: 24px; }

/* Product / ad rows in a panel (expired, off sale, out of stock, general ads, unlinked). */
.ch-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ch-panels > .ch-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ch-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.ch-panel-warn { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.ch-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 14px 16px 12px; border-bottom: 1px solid var(--separator); }
.ch-panel-head h2 { margin: 0; font-size: 15px; font-weight: 750; }
.ch-panel-head p { flex-basis: 100%; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.ch-count { min-width: 22px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 750; text-align: center; font-variant-numeric: tabular-nums; }
.ch-panel-warn .ch-count:not(:empty) { background: var(--warn-soft); color: var(--warn); }
.ch-empty { margin: 0; padding: 16px; font-size: 13.5px; color: var(--muted); }
.ch-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.ch-row + .ch-row { border-top: 1px solid var(--separator); }
.ch-search { margin-bottom: 16px; }
.ch-panel .ch-row[hidden] + .ch-row { border-top: 0; }
.ch-row:hover { background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.ch-row-main { flex: 1; min-width: 0; }
.ch-row-title { font-size: 14px; font-weight: 650; line-height: 1.35; }
a.ch-row-title:hover > span { text-decoration: underline; text-decoration-color: var(--brand-strong); text-underline-offset: 3px; }
.ch-row-title > svg { display: inline-block; width: 12px; height: 12px; margin-left: 5px; color: var(--faint); vertical-align: -1px; }
.ch-row-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 3px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ch-row-end { display: flex; flex-shrink: 0; align-items: center; gap: 8px; }
.ch-row-end form { display: flex; margin: 0; }
/* A row's product picker (Bağlanmamış təkliflər › Başqa məhsul) dressed as the btn-sm beside it. */
.ch-row-end .picker-trigger {
  width: auto; min-height: 32px; padding: 5px 10px 5px 12px; gap: 6px;
  border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); box-shadow: var(--shadow-sm);
  font-size: 13px; font-weight: 650; line-height: 1.2; white-space: nowrap;
}
.ch-row-end .picker-trigger:hover { background: var(--surface-2); }
.ch-row-end .picker-trigger-icon { width: 14px; height: 14px; }
.ch-row-price { font-size: 14px; font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ch-stock { font-weight: 650; color: var(--text); }
.ch-stock-none { color: var(--err); }
@media (hover: hover) and (min-width: 768px) {
  .ch-row .ch-row-hover { opacity: 0; transition: opacity 0.12s ease; }
  .ch-row:hover .ch-row-hover, .ch-row .ch-row-hover:focus-visible, .ch-row .ch-row-hover:focus-within { opacity: 1; }
}

/* Channel tables (Qiymət uyğunluğu, Rəqib satıcılar) and single-panel pages. */
.ch-stack { display: flex; flex-direction: column; gap: 16px; max-width: 980px; }
.ch-link:hover { text-decoration: underline; text-decoration-color: var(--brand-strong); text-underline-offset: 3px; }
.cp-search { max-width: 520px; }
.cp-table .sh-c-product { min-width: 280px; max-width: 520px; }
.cp-reserved { font-size: 12px; font-weight: 500; color: var(--muted); }
.cp-same { background: var(--surface-2); color: var(--muted); }
.cp-rival { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.sh-kpis.sh-kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
.sh-kpi small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--muted); }
.sh-kpi-main small { color: color-mix(in srgb, var(--on-primary) 70%, transparent); }
.bms-table .sh-c-product { min-width: 260px; max-width: 520px; }

@media (max-width: 1099px) {
  .chx-grid { grid-template-columns: 1fr; }
  .ch-panels { grid-template-columns: 1fr; }
}

/* ====== Page: Endirimlər (promotions.php; the Müraciətlər layout, lines as Kommersiya təklifi's qt-item) ====== */

.promo-store { display: flex; align-items: center; margin: 0; }
.promo-store .checkbox-filter { margin: 0; font-size: 13px; font-weight: 600; white-space: nowrap; }
.promo-badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; }
.promo-badge svg { width: 50%; height: 50%; }
.promo-badge-lg { width: 60px; height: 60px; }
.promo-badge-daily { background: var(--err-soft); color: var(--err); }
.promo-badge-outlet { background: var(--warn-soft); color: var(--warn); }
.promo-badge-other { background: var(--info-soft); color: var(--info); }
.promo-line .crm-feed-sub { white-space: normal; }
.promo-line .crm-feed-sub s { color: var(--faint); }
.promo-types { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.promo-type { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: 12.5px; color: var(--muted); }
.promo-type b { color: var(--text); font-variant-numeric: tabular-nums; }
.promo-after { margin: 0; padding: 10px 2px 0; border-top: 1px solid var(--separator); font-size: 13.5px; line-height: 1.5; }
.promo-warn { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: 13px; font-weight: 600; }
.promo-warn svg { width: 16px; height: 16px; flex-shrink: 0; }
.promo-hint { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.promo-store-note { align-self: center; font-size: 12.5px; color: var(--muted); }
.promo-until { display: inline-flex; margin: 6px 0 0; font-size: 13px; }
.promo-margin { color: var(--ok); font-weight: 650; }
.promo-margin.is-loss { color: var(--err); }
/* A line's numbers always under its name: up to three inputs beside a margin don't fit the column. */
.promo-item { flex-wrap: wrap; }
.promo-item .qt-item-main { flex: 1 1 calc(100% - 100px); }
.promo-item .qt-item-nums { order: 3; flex: 1 1 100%; justify-content: flex-end; padding-left: 46px; }
.promo-item .qt-item-price { width: 72px; }

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

.finance-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
}

.finance-nowrap { white-space: nowrap; }
.finance-inline-form { display: inline; }

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

.finance-party-field { grid-column: 1 / -1; }
#fap { margin-top: 18px; }

/* ---------- Maliyyə › Kassa (finance.php) ---------- */

/* The kassa total with its groups as one bar | Tranzitdə; then a card per group. */
.kassa-top { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; margin-bottom: 18px; }
.kassa-top.is-single { grid-template-columns: minmax(0, 1fr); }
.kassa-hero, .kassa-transit {
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.kassa-hero-label { display: inline-flex; align-items: center; font-size: 13px; font-weight: 650; color: var(--muted); }
.kassa-hero-value { margin-top: 4px; font-size: 40px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kassa-bar { display: flex; gap: 3px; height: 10px; margin: 18px 0 14px; }
.kassa-bar span { min-width: 4px; border-radius: 3px; }
.kassa-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.kassa-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--muted); }
.kassa-legend-item i { width: 9px; height: 9px; border-radius: 50%; }
.kassa-legend-item b { color: var(--text); font-weight: 750; font-variant-numeric: tabular-nums; }
.kassa-legend-item:hover span { color: var(--text); }
.kassa-transit { position: relative; gap: 2px; color: var(--text); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.kassa-transit:hover { border-color: var(--line-strong); box-shadow: var(--shadow-hover); }
.kassa-transit-icon { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; background: var(--surface-2); color: var(--muted); }
.kassa-transit-icon svg { width: 18px; height: 18px; }
.kassa-transit.is-waiting .kassa-transit-icon { background: var(--brand-soft); color: var(--text); }
.kassa-transit-value { margin-top: 2px; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.kassa-transit-sub { font-size: 13px; color: var(--muted); }
.kassa-transit-go { display: inline-flex; align-items: center; gap: 2px; margin-top: auto; padding-top: 14px; font-size: 13.5px; font-weight: 700; }
.kassa-transit-go svg { width: 15px; height: 15px; }

.kassa-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; align-items: start; }
.kassa-group { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; scroll-margin-top: 20px; }
.kassa-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 12px; border-bottom: 1px solid var(--separator); }
.kassa-group-name { display: inline-flex; align-items: center; font-size: 15px; font-weight: 750; letter-spacing: -0.01em; }
.kassa-group-count { margin-left: 8px; padding: 0 7px; border-radius: 999px; background: var(--surface-2); font-size: 11.5px; font-weight: 700; line-height: 18px; color: var(--muted); }
.kassa-group-total { display: inline-flex; align-items: center; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kassa-account { display: flex; align-items: center; gap: 12px; padding: 11px 14px 11px 18px; color: var(--text); transition: background 0.12s ease; }
.kassa-account + .kassa-account { border-top: 1px solid var(--separator); }
.kassa-account:hover { background: var(--surface-2); }
.kassa-account.is-closed { opacity: 0.6; }
.kassa-account-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kassa-account-name { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kassa-account-sub { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.kassa-account-amount { display: flex; flex-direction: column; align-items: flex-end; font-size: 15px; font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kassa-account-amount.is-zero { color: var(--faint); font-weight: 600; }
.kassa-account-go { flex-shrink: 0; width: 15px; height: 15px; color: var(--faint); }
.kassa-fold-chevron { display: none; }

@media (max-width: 1099px) {
  .kassa-top { grid-template-columns: minmax(0, 1fr); }
  .kassa-transit { padding: 16px 18px; }
}

/* ---------- Maliyyə › Tranzitdən köçürmə (finance_transit.php) ---------- */

/* Pending sales, a card per transit | what Köçür books, sticky beside them (a bar at the bottom on a phone). */
.ft-desk { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.ft-list { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ft-lead { margin: 0; font-size: 14px; color: var(--muted); }
.ft-lead b { color: var(--text); }
.ft-hint { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.ft-group { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.ft-group-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 16px; border-bottom: 1px solid var(--separator); }
.ft-all { display: flex; align-items: center; gap: 12px; min-width: 0; cursor: pointer; }
.ft-all input, .ft-row input[type="checkbox"] { width: 17px; height: 17px; flex-shrink: 0; cursor: pointer; }
.ft-group-text { display: flex; flex-direction: column; min-width: 0; }
.ft-group-name { font-size: 15px; font-weight: 750; }
.ft-group-sub { font-size: 12.5px; color: var(--muted); }
.ft-dest-wrap { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; color: var(--muted); }
.ft-dest {
  min-height: 36px;
  max-width: 220px;
  padding: 0 32px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6C70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 14px;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
}
.ft-row {
  display: grid;
  grid-template-columns: auto 46px minmax(0, 1fr) auto 118px 32px;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.ft-row + .ft-row { border-top: 1px solid var(--separator); }
.ft-row:hover { background: var(--surface-2); }
.ft-row.is-picked { background: color-mix(in srgb, var(--brand) 14%, var(--surface)); }
.ft-date { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ft-desc { min-width: 0; font-size: 13.5px; line-height: 1.4; }
.ft-desc-sub { display: block; font-size: 12px; color: var(--muted); }
.ft-amount { font-size: 14.5px; font-weight: 750; }
.ft-commission input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  font: inherit;
  font-size: 14px;
  color: var(--text);
  text-align: right;
}
.ft-commission input:focus { outline: none; border-color: var(--text); box-shadow: var(--focus-ring); }
.ft-summary {
  position: sticky;
  top: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ft-summary-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--separator); }
.ft-summary-head h2 { margin: 0; font-size: 15px; font-weight: 750; }
#ft-count { font-size: 13px; font-weight: 600; color: var(--muted); text-align: right; }
.ft-preview:not(:empty) { padding: 4px 6px; border-bottom: 1px solid var(--separator); }
.ft-submit-row { display: flex; align-items: flex-end; gap: 12px; padding: 14px 18px 18px; }
.ft-submit-row .field { flex: 1; min-width: 0; padding: 0; }
.ft-submit-row .btn { min-width: 120px; min-height: 42px; }

@media (max-width: 1099px) {
  .ft-desk { grid-template-columns: minmax(0, 1fr); }
  .ft-summary { position: sticky; top: auto; bottom: 12px; box-shadow: var(--shadow-pop); }
}

/* ---------- Maliyyə › Borc və avanslar (finance_balance.php) ---------- */

/* Sections (Balans, Ödəniş təqvimi, Kreditlər); the first two fold from their head and
   remember it per device — folded, the head keeps a short note. */
.bl-kpis { margin-bottom: 22px; }
.bl-section { margin-bottom: 26px; }
.bl-section-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.bl-section-head h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.025em; }
.bl-section-meta, .finance-fold-note { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.finance-fold > summary { cursor: pointer; list-style: none; user-select: none; }
.finance-fold > summary::-webkit-details-marker { display: none; }
.finance-fold > summary::before {
  content: '';
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin: 0 2px 0 2px;
  border-right: 1.8px solid var(--muted);
  border-bottom: 1.8px solid var(--muted);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.15s;
}
.finance-fold:not([open]) > summary::before { transform: rotate(-45deg); }
.finance-fold[open] .finance-fold-note { display: none; }
.bl-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }

/* Balans: what's ours | what we owe, a card each; groups fold, an account opens into what its
   balance is made of. */
.bal-sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.bal-col { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.bal-col-head { display: flex; justify-content: space-between; gap: 12px; padding: 15px 18px 13px; border-bottom: 1px solid var(--separator); font-size: 15px; font-weight: 750; }
.bal-col-head .finance-amount { font-size: 16px; font-weight: 800; }
.bal-group + .bal-group { border-top: 1px solid var(--separator); }
.bal-group > summary { display: flex; align-items: center; gap: 8px; padding: 11px 18px 9px 16px; cursor: pointer; list-style: none; user-select: none; font-size: 14px; font-weight: 700; }
.bal-group > summary::-webkit-details-marker { display: none; }
.bal-group > summary::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin: -3px 3px 0 2px;
  border-right: 1.6px solid var(--faint);
  border-bottom: 1.6px solid var(--faint);
  transform: rotate(45deg);
  transition: transform 0.15s;
}
.bal-group:not([open]) > summary::before { transform: rotate(-45deg); margin-top: 0; }
.bal-group > summary:hover { background: var(--surface-2); }
.finance-balance-name { display: inline-flex; align-items: center; margin-right: auto; min-width: 0; }
.bal-group:not([open]) > summary { padding-bottom: 11px; }
.finance-balance-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bal-item { min-height: 38px; padding: 5px 18px 5px 38px; font-size: 14px; }
.bal-item.is-zero { opacity: 0.5; }
.bal-item .fin-account-name { min-width: 0; }
.bal-acc-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finance-balance-end { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.finance-balance-end > .finance-amount { min-width: 84px; font-weight: 650; }
a.finance-row-link:hover .bal-acc-label { text-decoration: underline; text-decoration-color: var(--brand-strong); text-underline-offset: 3px; }
.bal-acc > summary { cursor: pointer; list-style: none; user-select: none; }
.bal-acc > summary::-webkit-details-marker { display: none; }
.bal-acc > summary:hover { background: var(--surface-2); }
.bal-acc > summary .fin-account-name::after {
  content: '';
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  margin: -2px 0 0 4px;
  border-right: 1.5px solid var(--faint);
  border-bottom: 1.5px solid var(--faint);
  transform: rotate(-45deg);
  transition: transform 0.15s;
}
.bal-acc[open] > summary .fin-account-name::after { transform: rotate(45deg); margin-top: -4px; }
.bal-acc[open] > summary { background: var(--surface-2); }
.bal-acc-body { padding: 2px 0 8px; background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.bal-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 18px 4px 67px; font-size: 12.5px; color: var(--muted); }
.bal-line .finance-amount { font-weight: 600; color: var(--text); }
.bal-acc-desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bal-acc-date { display: inline-block; min-width: 40px; color: var(--faint); font-variant-numeric: tabular-nums; }
.bal-acc-more { font-style: italic; }
.bal-plan-link, .bal-confirm-btn {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
}
.bal-plan-link:hover, .bal-confirm-btn:hover { border-color: var(--line-strong); background: var(--surface-2); }
.bal-confirm-btn { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); color: var(--ok); }
/* A per-person account: its two sides, then the people; Şəxsi vərəqə: confirmed | waiting. */
.finance-party-split { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 2px 18px 4px 67px; font-size: 12.5px; color: var(--muted); }
.finance-party-split strong { margin-left: 4px; color: var(--text); }

/* Ödəniş təqvimi: this month and the next, Monday first; each loan month (orange) or bill
   (blue) a chip on its day, overdue red; a chip opens its payment. */
.finance-cal-card { padding: 16px 18px 18px; }
.finance-cal-older { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--separator); }
.finance-cal-older-label { margin-right: 4px; font-size: 11.5px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--err); }
.finance-cal-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.finance-cal-title { margin-bottom: 10px; font-size: 15px; font-weight: 750; }
.finance-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.finance-cal-wd { padding-bottom: 4px; font-size: 11px; font-weight: 650; text-align: center; color: var(--faint); }
.finance-cal-day { display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 70px; padding: 4px; border-radius: 9px; background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
.finance-cal-day.is-blank { background: none; }
.finance-cal-day.is-weekend { background: color-mix(in srgb, var(--surface-2) 40%, var(--surface)); }
.finance-cal-num { align-self: flex-end; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px; font-size: 12px; font-weight: 650; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.finance-cal-day.is-past .finance-cal-num { color: var(--faint); }
.finance-cal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--brand-strong); }
.finance-cal-day.is-today .finance-cal-num { background: var(--brand); color: var(--ink-on-brand); }
.finance-cal-chip { display: flex; flex-direction: column; min-width: 0; padding: 3px 6px; border-radius: 6px; background: var(--info-soft); color: var(--text); font-size: 11px; line-height: 1.25; }
.finance-cal-chip.is-loan { background: var(--warn-soft); }
.finance-cal-chip.is-late { background: var(--err-soft); color: var(--err); }
.finance-cal-chip:hover { filter: brightness(0.96); }
.finance-cal-older .finance-cal-chip { flex-direction: row; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; }
.finance-cal-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.finance-cal-chip-amt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.finance-cal-agenda { display: none; }

/* Kreditlər: three figures, then a card per loan plan (a paid-off one last). */
.finance-loans-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.bl-fig { padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.bl-fig span { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.bl-fig b { display: block; margin-top: 2px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.loan-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.loan-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.loan-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-hover); }
.loan-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.loan-card-name { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 16px; font-weight: 750; }
.loan-card-name > span { display: flex; flex-direction: column; min-width: 0; }
.loan-card-day { font-size: 12px; font-weight: 500; color: var(--muted); }
.loan-card-go { flex-shrink: 0; width: 16px; height: 16px; color: var(--faint); }
.loan-card-amounts { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); }
.loan-card-big { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--err); font-variant-numeric: tabular-nums; }
.loan-card-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.loan-card-bar span { display: block; height: 100%; border-radius: 3px; background: var(--ok); }
.loan-card-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: -6px; font-size: 12px; color: var(--muted); }
.loan-card-next { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 9px 12px; border-radius: 10px; background: var(--warn-soft); font-size: 13px; }
.loan-card-next .muted { color: var(--muted); }
.loan-card-next.is-late { background: var(--err-soft); color: var(--err); }
.loan-card-next.is-done { background: var(--ok-soft); color: var(--ok); font-weight: 650; }
.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 var(--line-strong); }
.loan-card-dots span.is-paid { border-color: var(--ok); background: var(--ok); }
.loan-card-dots span.is-late { border-color: var(--err); background: var(--err); }
@media (min-width: 1100px) {
  /* 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: 1099px) {
  .bal-sheet, .finance-cal-months { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Maliyyə › Kredit qrafiki (finance_loan.php) ---------- */

.ln-title { display: inline-flex; align-items: center; gap: 14px; }
.ln-title > span { display: flex; flex-direction: column; }
.ln-sub { margin-top: 3px; font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.ln-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 12px; }
.ln-progress { height: 8px; margin-bottom: 18px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.ln-progress span { display: block; height: 100%; border-radius: 4px; background: var(--ok); }
.ln-mismatch { margin-bottom: 16px; }
/* The months | adding to the plan. */
.ln-desk { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.ln-main { min-width: 0; }
.ln-table thead th { position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px 0 var(--separator); cursor: default; }
.ln-table thead th::after { display: none; }
.ln-table .ln-date { font-variant-numeric: tabular-nums; }
.ln-table .ln-total { font-weight: 750; }
.ln-table tr.finance-plan-paid td { color: var(--faint); }
.ln-table tr.finance-plan-paid .ln-total { color: var(--muted); font-weight: 600; }
.ln-table tr.is-next td { background: color-mix(in srgb, var(--brand) 14%, var(--surface)); }
.ln-actions-col { width: 1%; }
.ln-table td.ln-actions { padding-top: 6px; padding-bottom: 6px; white-space: nowrap; text-align: right; }
.ln-actions .btn-icon { width: 28px; height: 28px; vertical-align: middle; }
.ln-actions .btn-icon svg { width: 15px; height: 15px; }
.ln-actions .btn-icon + form { margin-left: 4px; }
@media (hover: hover) and (min-width: 768px) {
  .ln-table tbody .ln-actions .btn-icon { opacity: 0; transition: opacity 0.12s ease; }
  .ln-table tbody tr:hover .ln-actions .btn-icon, .ln-table .ln-actions .btn-icon:focus-visible { opacity: 1; }
}
.ln-state { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-weight: 650; color: var(--muted); white-space: nowrap; }
.ln-state-paid { background: var(--ok-soft); color: var(--ok); }
.ln-state-late { background: var(--err-soft); color: var(--err); }
.ln-table tr.is-next .ln-state { background: var(--surface); color: var(--text); }
.ln-edit-row td { background: var(--surface-2); }
.finance-plan-tools { display: flex; flex-direction: column; gap: 14px; }
.ln-tool { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.ln-tool h2 { margin: 0 0 10px; font-size: 15px; font-weight: 750; }
.ln-tool .field-hint { margin: 0 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.ln-tool textarea { width: 100%; min-height: 110px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: ui-monospace, Menlo, monospace; font-size: 13px; resize: vertical; }
.ln-tool .form-actions { margin-top: 12px; }
.ln-tool .form-actions .btn { width: 100%; }
.finance-plan-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.finance-plan-form label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 110px; min-width: 0; font-size: 12px; font-weight: 650; color: var(--muted); }
.finance-plan-form input { width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; }
.finance-plan-form input:focus, .ln-tool textarea:focus { outline: none; border-color: var(--text); box-shadow: var(--focus-ring); }
.ln-tool .finance-plan-form label:first-of-type { flex-basis: 100%; }
.ln-tool .finance-plan-form .btn { flex-basis: 100%; min-height: 36px; }
@media (max-width: 1279px) {
  .ln-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ln-kpis .sh-kpi-main { grid-column: span 3; }
}
@media (max-width: 1099px) {
  .ln-desk { grid-template-columns: minmax(0, 1fr); }
  .finance-plan-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Maliyyə › Avadanlıqlar (finance_assets.php) ---------- */

.fa-kpis { margin-bottom: 14px; }
.fa-search { margin-bottom: 14px; }
.fa-table thead th { position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px 0 var(--separator); }
.fa-table th.fa-actions-head::after { display: none; }
.fa-name-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fa-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  cursor: zoom-in;
}
.fa-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fa-thumb-empty { background: var(--surface-2); color: var(--faint); cursor: default; }
.fa-thumb-empty svg { width: 18px; height: 18px; }
.fa-name-text { min-width: 0; }
.fa-name { display: block; font-weight: 650; white-space: normal; }
.fa-name:hover { text-decoration: underline; text-decoration-color: var(--brand-strong); text-underline-offset: 3px; }
.fa-sub { font-size: 12px; color: var(--muted); white-space: normal; }
.fa-group, .fa-muted, .fa-forecast { color: var(--muted); }
.fa-group { white-space: nowrap; }
.fa-own { margin-left: 1px; color: var(--warn); font-weight: 750; cursor: help; }
.fa-now .finance-amount { display: block; font-weight: 750; }
/* What's left of the cost: a thin bar under İndi. */
.fa-wear { display: block; width: 64px; height: 4px; margin: 4px 0 0 auto; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.fa-wear span { display: block; height: 100%; border-radius: 2px; background: color-mix(in srgb, var(--ok) 75%, var(--surface)); }
.fa-table tr.fa-off td { color: var(--faint); }
.fa-table tr.fa-off .fa-name { text-decoration: line-through; color: var(--muted); }
.fa-table tr.fa-off .fa-wear { visibility: hidden; }
.fa-actions .btn-icon { width: 30px; height: 30px; }
@media (hover: hover) and (min-width: 768px) {
  .fa-table tbody .fa-actions .btn-icon { opacity: 0; transition: opacity 0.12s ease; }
  .fa-table tbody tr:hover .fa-actions .btn-icon, .fa-table .fa-actions .btn-icon:focus-visible { opacity: 1; }
}
/* The form's bar: Sil left (a mistake), Ləğv et / Yadda saxla right (v7.36). */
.fa-bar-left { display: flex; align-items: center; gap: 14px; margin-right: auto; }
.btn-text-danger { padding: 0 4px; border: 0; background: none; color: var(--err); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-text-danger:hover { text-decoration: underline; }
/* Balansdan çıxar window (partials/finance_assets/writeoff_modal.php). */
.fa-wo-modal { max-width: 480px; }
.fa-wo-form { margin: 0; }
.fa-wo-name { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.fa-wo-seg { display: flex; margin-bottom: 14px; }
.fa-wo-seg .seg-btn { flex: 1; justify-content: center; cursor: pointer; }
.fa-wo-seg .seg-btn:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.fa-wo-seg input { position: absolute; opacity: 0; pointer-events: none; }
.fa-wo-panes { display: grid; }
.fa-wo-pane { grid-area: 1 / 1; min-width: 0; }
.fa-wo-pane.is-off { visibility: hidden; }
/* The live line (hint → Zərər / Gəlir) keeps two lines' room: typing a price never moves the buttons. */
.fa-wo-pane .fa-wo-note { min-height: 2.9em; }
.fa-wo-note, .fa-wo-summary { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.fa-wo-note b { color: var(--text); }
.fa-wo-note.is-loss b { color: var(--err); }
.fa-wo-note.is-gain b { color: var(--ok); }
.fa-wo-form .form-actions { justify-content: flex-end; }

/* ---------- Maliyyə › Əməliyyatlar (finance_entries.php) ---------- */

/* Header, strip and filters across; under them the ledger | the open entry's form docked, or
   the period's expenses by category (≥1100px), as tall as the framed list. */
.fe-main-col { min-width: 0; }
@media (min-width: 1100px) {
  .desk.fe-desk { grid-template-columns: minmax(0, 1fr) 440px; align-items: stretch; }
  .desk-detail.fe-detail { position: relative; top: auto; height: auto; min-height: 560px; }
  .fe-detail > .modal-backdrop.is-docked { position: absolute; inset: 0; height: auto; }
  .fe-detail:has(> .modal-backdrop:not([hidden])) .fe-side { display: none; }
  .fe-detail.fe-opening .fe-side { visibility: hidden; }
  .fe-side { position: absolute; inset: 0; }
  /* The open form grows to its content (balances included) — no inner scroll while the page has room. */
  .fe-detail > #fe-modal-backdrop.is-docked { position: static; height: auto; }
  #fe-modal-backdrop.is-docked > .modal { height: auto; }
  #fe-modal-backdrop.is-docked .dock-body { overflow: visible; }
}
@media (min-width: 1500px) {
  .desk.fe-desk { grid-template-columns: minmax(0, 1fr) 480px; }
}
.fe-kpis .sh-kpi small { margin-top: 3px; }
.fe-toolbar .fin-pick.filter-select { max-width: 230px; }
.fe-auto-toggle { color: var(--muted); }
.fe-auto-toggle:has(input:checked) { color: var(--text); background: var(--surface-2); }
.fe-reset-icon { display: none; width: 16px; height: 16px; }

/* Day headings stick to the top of the framed list. */
.fe-day-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 18px 7px;
  border-bottom: 1px solid var(--separator);
  background: color-mix(in srgb, var(--surface-2) 75%, var(--surface));
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.fe-day-date { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--faint); }

/* A row: the kind's tile (colour by kind: xərc red, mədaxil green, transfer blue, borc orange…),
   what and from where, the amount over the running balance, actions on hover. */
.fe-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 74px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 16px;
  border-bottom: 1px solid var(--separator);
  transition: background 0.12s ease;
}
.fe-row:last-child { border-bottom: 0; }
.fe-row:hover { background: var(--surface-2); }
.fe-row.is-editable { cursor: pointer; }
.fe-row.is-open { background: color-mix(in srgb, var(--brand) 16%, var(--surface)); box-shadow: inset 3px 0 0 var(--brand-strong); }
.fe-tile.fin-badge { width: 36px; height: 36px; border-radius: 11px; }
.fe-tile.fin-badge svg { width: 18px; height: 18px; }
.fe-row-main { min-width: 0; }
.fe-row-title { font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fe-tag-more { font-weight: 500; color: var(--muted); }
.fe-tag-more::before { content: '· '; }
.fe-row-sub {
  display: flex;
  align-items: center;
  gap: 2px 0;
  margin-top: 3px;
  min-width: 0;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}
.fe-row-sub > * { flex-shrink: 0; }
.fe-row-sub > :last-child { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fe-row-sub > * + *::before { content: '·'; margin: 0 6px; color: var(--faint); }
.fe-row-accounts { display: inline-flex; align-items: center; gap: 4px; color: var(--text); font-weight: 550; }
.fe-row-accounts .fin-account-name { gap: 5px; }
.fe-row-accounts .fin-badge-sm { width: 17px; height: 17px; border-radius: 5px; }
.fe-row-accounts .fin-badge-sm svg { width: 11px; height: 11px; }
.fe-desc-text { color: var(--text); }
.finance-arrow { color: var(--faint); padding: 0 2px; }
.fe-row-figs { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.fe-amount-cell { font-size: 14.5px; font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* The kassa after the entry (or, an account picked, its balance); hidden where the kassa didn't move. */
/* A period picked: an automatic entry shows its part, its month's amount under it. */
.fe-accrual-note { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fe-balance { font-size: 12px; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fe-balance::before { content: 'kassa '; }
[data-balance-mode="account"] .fe-balance::before { content: 'qalıq '; }
.fe-balance.fe-balance-same { display: none; }
.fe-row-actions { display: flex; justify-content: flex-end; gap: 6px; }
.fe-row-actions .btn-icon { width: 32px; height: 32px; }
.fe-row-actions .btn-icon svg { width: 16px; height: 16px; }
@media (hover: hover) and (min-width: 768px) {
  .fe-row .fe-row-actions .btn-icon { opacity: 0; transition: opacity 0.12s ease; }
  .fe-row:hover .fe-row-actions .btn-icon,
  .fe-row .fe-row-actions .btn-icon:focus-visible { opacity: 1; }
}
/* Docked beside the form the list is narrower: the actions give their room (Sil is in the form's head). */
@media (min-width: 1100px) and (max-width: 1499px) {
  .fe-desk:has(.fe-detail > .modal-backdrop:not([hidden])) .fe-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .fe-desk:has(.fe-detail > .modal-backdrop:not([hidden])) .fe-row-actions { display: none; }
}

/* The side panel: the period's totals, then expenses by group (a bar = the group's share). */
.fe-side {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.fe-side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--separator); }
.fe-side-head h2 { margin: 0; font-size: 15px; font-weight: 750; letter-spacing: -0.01em; }
#fe-summary-range { font-size: 12.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.fe-side-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px 8px; }
.fe-side-hint { margin: 0; padding: 12px 18px 14px; border-top: 1px solid var(--separator); font-size: 12.5px; color: var(--muted); }
.fe-sum-group { padding: 4px 0 10px; }
.fe-sum-group + .fe-sum-group { padding-top: 10px; border-top: 1px solid var(--separator); }
.fe-sum-group > .finance-sum-row:first-child { font-weight: 700; }
.fe-sum-bar { height: 5px; margin: 5px 0 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.fe-sum-bar span { display: block; height: 100%; border-radius: 3px; background: color-mix(in srgb, var(--err) 70%, var(--surface)); }
.fe-sum-empty { margin: 4px 0 10px; font-size: 13px; color: var(--muted); }
.finance-sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 13.5px; }
.finance-sum-cat { padding-left: 12px; font-size: 13px; color: var(--muted); }
.finance-sum-cat .finance-amount { font-weight: 500; }
.finance-sum-total { margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--separator); font-weight: 700; }

/* Yeni / Redaktə et: a window (a sheet on a phone), docked as a card beside the list from 1100px;
   faintly tinted with the picked kind's colour. */
#fe-modal-backdrop .modal {
  max-width: 560px;
  background: color-mix(in srgb, var(--fe-tint, transparent) 5%, var(--surface));
}
#fe-modal-backdrop .modal-header-actions .btn-icon { width: 32px; height: 32px; }
#fe-modal-backdrop .modal-header-actions .btn-icon svg { width: 15px; height: 15px; }
.modal-backdrop.is-docked #fe-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.modal-backdrop.is-docked #fe-form > .form-actions { background: transparent; }

/* The four kinds — each in its own colour; a tab's two directions under it. */
.finance-type-seg {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  gap: 3px;
  padding: 3px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: var(--surface-2);
}
.finance-type-seg button {
  --seg-c: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.finance-type-seg button svg { flex-shrink: 0; width: 15px; height: 15px; }
/* Docked at 440px the four labels need the icons' room. */
@media (max-width: 1499px) {
  .modal-backdrop.is-docked .finance-type-seg button svg { display: none; }
}
.finance-type-seg button span { overflow: hidden; text-overflow: ellipsis; }
.finance-type-seg button[data-type="expense"] { --seg-c: var(--err); }
.finance-type-seg button[data-type="transfer"] { --seg-c: var(--info); }
.finance-type-seg button[data-type="loan"] { --seg-c: var(--warn); }
.finance-type-seg button[data-type="income"] { --seg-c: var(--ok); }
.finance-type-seg button:hover { color: var(--seg-c); }
.finance-type-seg button.active {
  background: var(--surface);
  color: var(--seg-c);
  box-shadow: var(--shadow-sm), inset 0 0 0 1.5px color-mix(in srgb, var(--seg-c) 45%, transparent);
}
.finance-flow-seg { display: flex; gap: 6px; margin: 0 0 14px; }
.finance-flow-space { visibility: hidden; }
.finance-flow-seg button {
  --seg-c: var(--ok);
  flex: 1;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.finance-flow-seg button[data-set-type="owner_out"] { --seg-c: #9333EA; }
.finance-flow-seg button[data-set-type="loan_received"] { --seg-c: var(--warn); }
.finance-flow-seg button[data-set-type="loan_payment"] { --seg-c: #9333EA; }
.finance-flow-seg button.active { border-color: var(--seg-c); background: color-mix(in srgb, var(--seg-c) 10%, var(--surface)); color: var(--seg-c); }
/* Dark: the system's, unless Görünüş says Açıq; Görünüş › Qaranlıq forces it (v8.3). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .finance-flow-seg button[data-set-type="owner_out"], :root:not([data-theme="light"]) .finance-flow-seg button[data-set-type="loan_payment"] { --seg-c: #C084FC; }
}
:root[data-theme="dark"] .finance-flow-seg button[data-set-type="owner_out"], :root[data-theme="dark"] .finance-flow-seg button[data-set-type="loan_payment"] { --seg-c: #C084FC; }

.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 kind) leaves the spare room at the bottom. */
  align-content: start;
}
.finance-form-grid .field { margin: 0; padding: 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,
.finance-form-grid .finance-plan-note,
.finance-party-field { grid-column: 1 / -1; }
.finance-form-grid .fin-pick { max-width: none; width: 100%; min-height: 42px; padding: 6px 10px 6px 8px; border-color: var(--line-strong); }
#fe-amount { font-size: 17px; font-weight: 750; font-variant-numeric: tabular-nums; }
.finance-plan-note .checkbox-filter { height: auto; padding-top: 8px; padding-bottom: 8px; border-radius: 12px; line-height: 1.35; white-space: normal; }
/* 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; }
/* Transfer: a round ⇄ in the gap between Hardan and Hara (turned when stacked); a click swaps them. */
.fe-to-field { position: relative; }
.finance-form-grid[data-type="transfer"] { column-gap: 46px; }
.finance-form-grid[data-type="transfer"] .fe-date-field { max-width: calc(50% - 23px); }
.fe-transfer-arrow {
  position: absolute;
  left: -37px;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: -2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--info);
  color: #fff;
  box-shadow: 0 0 0 3px var(--surface);
  cursor: pointer;
}
.fe-transfer-arrow:hover { background: color-mix(in srgb, var(--info) 85%, #000); }
.fe-transfer-arrow svg { width: 14px; height: 14px; }
/* Borc qaytardım › "Hansı ay(lar)?": a chip per unpaid month of a recurring debt. */
.fe-months { display: flex; flex-wrap: wrap; gap: 6px; }
.fe-month {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
}
.fe-month:has(input:checked) { border-color: var(--text); background: var(--surface-2); }
.fe-months-close { margin-top: 8px; }
/* "+ hesab əlavə et" and the extra source rows (Xərc / Borc qaytardım). */
.fe-add-source {
  margin-top: 7px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--brand-strong);
  text-underline-offset: 3px;
  cursor: pointer;
}
.fe-source { display: grid; grid-template-columns: minmax(0, 1fr) 130px 28px; align-items: center; gap: 10px; margin-top: 6px; }
.fe-source-remove {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
}
.fe-desc-field { padding-bottom: 12px; }
/* What the save does to each account: before → after. */
.fe-preview-box { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.fe-preview-box:has(#fe-preview:empty) { display: none; }
.fe-preview-title { padding: 9px 12px 7px; border-bottom: 1px solid var(--separator); font-size: 11.5px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.finance-preview-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; font-size: 13.5px; }
.finance-preview-row + .finance-preview-row { border-top: 1px solid var(--separator); }
.finance-preview-row .finance-amount b { font-weight: 800; }
.return-confirm { margin: 4px 0 12px; }
.return-confirm-lead { margin: 0 0 6px; font-size: 13.5px; font-weight: 650; }
.return-confirm-rows { border: 1px solid var(--separator); border-radius: 10px; }
.return-confirm-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.return-confirm-note.is-error { color: var(--danger, #d70015); }
.finance-preview-cost { font-size: 13px; color: var(--muted); }
.finance-preview-party-account { display: block; font-size: 12px; line-height: 1.2; }

/* The row sheet (phone): Redaktə et / Sil / Ləğv et from the bottom. */
.fe-row-sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; background: rgba(17, 17, 18, 0.4); }
.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; background: var(--surface); color: var(--text); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.fe-row-sheet-danger { color: var(--err); }
.fe-row-sheet-cancel { margin-top: 4px; font-weight: 750; }
.fe-mobile-total { display: none; }

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

/* Overview (system.php): Bütün hesabatlar' cards, each with what the page holds now. */
.set-status { align-self: flex-start; margin-top: 5px; }
.set-card-link .ch-logo { width: 42px; height: 42px; padding: 7px; }

/* Frame: the column of every settings page | the page (≥1100px); narrower, the page alone with
   "‹ Ayarlar" in its head. */
.set-nav { display: none; }
.set-main { min-width: 0; }
/* The settings column starts right beside the sidebar, not centred with a gap on its left. */
.content:has(> .set) { margin-left: 0; }
@media (min-width: 1100px) {
  .set { display: grid; grid-template-columns: 214px minmax(0, 1fr); gap: 32px; align-items: start; }
  .set-nav {
    position: sticky;
    top: 30px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: calc(100dvh - 54px);
    overflow-y: auto;
    padding-bottom: 12px;
    scrollbar-width: none;
  }
  .set-nav::-webkit-scrollbar { display: none; }
}
.set-nav-home { display: flex; align-items: center; gap: 9px; padding: 5px 10px; border-radius: 9px; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.set-nav-home svg { width: 18px; height: 18px; color: var(--muted); }
.set-nav-home:hover { background: var(--surface-2); }
.set-nav-group { display: flex; flex-direction: column; gap: 1px; }
.set-nav-title { padding: 0 10px 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); }
.set-nav-link { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 9px; font-size: 13.5px; font-weight: 500; line-height: 20px; color: var(--text); }
.set-nav-link span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-nav-icon { flex-shrink: 0; width: 17px; height: 17px; color: var(--muted); }
img.set-nav-icon { border-radius: 4px; object-fit: contain; background: var(--logo-bg); }
.set-nav-link:hover { background: var(--surface-2); }
.set-nav-link.active { background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); font-weight: 650; }
.set-nav-link.active .set-nav-icon { color: var(--text); }

/* A page's head (SystemMenu::head): section, title, one-line lead | the page's buttons. */
.set-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 22px; }
.set-head-text { flex: 1 1 300px; min-width: 0; }
.set-eyebrow { margin-bottom: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); }
.set-head h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.set-lead { margin: 6px 0 0; max-width: 680px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.set-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.set-head-actions form { display: flex; margin: 0; }
.set-back { display: inline-flex; flex-basis: 100%; align-items: center; gap: 3px; margin-bottom: -4px; font-size: 14px; font-weight: 650; color: var(--muted); }
.set-back-icon { width: 15px; height: 15px; transform: rotate(180deg); }
.set-back:hover { color: var(--text); }
@media (min-width: 1100px) {
  .set-back { display: none; }
}

/* A settings card: a head (title, state, what it does), rows of label | control, buttons at its foot. */
.set-card { margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.set-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 18px 20px 14px; }
.set-card-head h2 { margin: 0; font-size: 16px; font-weight: 750; letter-spacing: -0.01em; }
.set-card-head .ch-state { margin-left: auto; }
.set-card-head p { flex-basis: 100%; margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.set-card-head p strong { color: var(--text); }
.set-card-body { padding: 0 20px 18px; }
.set-card-head + .set-card-body { margin-top: -2px; }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 8px 28px; padding: 16px 20px; border-top: 1px solid var(--separator); }
.set-row-label label, .set-row-name { display: block; font-size: 14px; font-weight: 650; }
.set-row-label p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.set-row .field { padding: 0; }
.set-row-note { margin: 7px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.set-row-note strong { color: var(--text); }
.set-row-note.is-err { color: var(--err); }
.set-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--separator);
  border-radius: 0 0 var(--radius) var(--radius);
  background: color-mix(in srgb, var(--surface-2) 45%, var(--surface));
}
.set-card-foot form { display: flex; margin: 0; }
.set-foot-note { margin-right: auto; font-size: 12.5px; color: var(--muted); }
.set-note { margin: -6px 4px 18px; max-width: 760px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.set-note code, .set-card code { padding: 1px 5px; border-radius: 5px; background: var(--surface-2); font-size: 0.92em; overflow-wrap: anywhere; }

/* A list of records (users, sale types, accounts…): the row opens the record's form. */
.set-list { margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.set-item { display: flex; align-items: center; gap: 6px; min-height: 58px; padding: 0 14px 0 10px; }
.set-item + .set-item, .set-list > :not(.set-item) + .set-item { border-top: 1px solid var(--separator); }
.set-item:hover { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.set-item.is-selected { background: var(--brand-soft); }
.set-item .drag-handle { margin-left: 0; }
.set-item-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 4px; color: inherit; }
.set-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-item-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14.5px; font-weight: 650; letter-spacing: -0.005em; }
.set-item-title > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-item-sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-item-link:hover .set-item-title > span:first-child { text-decoration: underline; text-decoration-color: var(--brand-strong); text-underline-offset: 3px; }
.set-item-end { flex-shrink: 0; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.set-item-amount { font-size: 15px; font-weight: 750; color: var(--text); white-space: nowrap; }
.set-item.is-off .set-item-title, .set-item.is-off .set-item-amount { color: var(--faint); }
.set-item .ch-state { padding: 2px 8px; font-size: 11.5px; }
.set-item-icon { width: 36px; height: 36px; border-radius: 10px; }
.set-item-icon svg { width: 18px; height: 18px; }
.set-empty { padding: 36px 20px; text-align: center; font-size: 14px; color: var(--muted); }

/* A list folding from its head (Hesablar by group, Kateqoriyalar by group). */
.set-fold > summary { list-style: none; cursor: pointer; user-select: none; }
.set-fold > summary::-webkit-details-marker { display: none; }
.set-fold-head { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 12px 8px 14px; }
.set-fold-head:hover { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.set-fold[open] > .set-fold-head { border-bottom: 1px solid var(--separator); }
.set-fold-chevron { flex-shrink: 0; width: 16px; height: 16px; color: var(--muted); transition: transform 0.15s ease; }
.set-fold[open] > summary .set-fold-chevron { transform: rotate(90deg); }
.set-fold-head .fin-group-dot { margin-right: 0; }
.set-fold-title { min-width: 0; font-size: 14.5px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-fold-count { padding: 1px 8px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.set-fold-add { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; padding: 5px 10px; border-radius: 8px; font-size: 13px; font-weight: 650; color: var(--muted); white-space: nowrap; }
.set-fold-add svg { width: 14px; height: 14px; stroke-width: 2.2; }
.set-fold-add:hover { background: var(--surface-2); color: var(--text); }
.set-fold .set-fold-head > .ch-state { padding: 2px 8px; font-size: 11.5px; }
@media (hover: hover) and (min-width: 768px) {
  .set-fold-head .set-fold-add { opacity: 0; transition: opacity 0.12s ease; }
  .set-fold-head:hover .set-fold-add, .set-fold-head .set-fold-add:focus-visible { opacity: 1; }
}
/* Hesablar: closed accounts folded at a group's bottom. */
.fin-acc-closed { border-top: 1px solid var(--separator); }
.fin-acc-closed > summary { padding: 11px 16px; list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); }
.fin-acc-closed > summary::-webkit-details-marker { display: none; }
.fin-acc-closed > summary:hover { color: var(--text); }
.fin-acc-rows > .set-item + .set-item, .fin-acc-closed .set-item:first-child { border-top: 1px solid var(--separator); }
.fin-acc-rows:empty { display: none; }
.set-grid-hint { margin: -6px 0 14px; }
.set-check-sub { margin-top: 10px; }
/* Hesablar › a per-person account: its openings and the line that adds one. */
.fap .set-detail-section { display: flex; justify-content: space-between; gap: 10px; }
.fap .set-detail-section span { font-weight: 600; letter-spacing: 0; text-transform: none; }
.fap-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--separator); font-size: 14px; }
.fap-row form { display: flex; margin: 0; }
.fap-name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.fap-date { font-size: 12.5px; color: var(--muted); }
.fap-add { margin-top: 14px; }

/* Kateqoriyalar: a group's head over its categories; each group a card of its own. */
.set-cat-head { display: flex; align-items: center; gap: 6px; min-height: 60px; padding: 0 12px 0 10px; background: color-mix(in srgb, var(--surface-2) 50%, var(--surface)); }
.set-cat-head.is-selected { background: var(--brand-soft); }
.set-cat-head .set-item-title { font-weight: 750; }
.set-cat-row { padding-left: 30px; min-height: 50px; }
.set-cat-row .set-item-link { padding: 7px 4px; }
.set-cat-row .set-item-title { font-weight: 600; }
@media (hover: hover) and (min-width: 768px) {
  .set-cat-head .set-fold-add { opacity: 0; transition: opacity 0.12s ease; }
  .set-cat-head:hover .set-fold-add, .set-cat-head .set-fold-add:focus-visible { opacity: 1; }
}

.set-detail-sub { margin: -4px 0 14px; font-size: 13px; color: var(--muted); }
.field-label-note { font-weight: 500; color: var(--muted); }

/* The list and the open record's form side by side when the page is wide enough; narrower, the
   form replaces the list (the page's head stays). */
.set-split-list, .set-split-detail { min-width: 0; }
@media (min-width: 1400px) {
  .set-split.has-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }
  .set-split-detail { position: sticky; top: 30px; max-height: calc(100dvh - 54px); overflow-y: auto; border-radius: var(--radius); scrollbar-width: thin; }
}
@media (max-width: 1399px) {
  .set-split.has-detail .set-split-list { display: none; }
  .set-split-detail { max-width: 760px; }
  /* The open form stands alone: the list page's lead and buttons wait until it closes. */
  .set-main:has(> .set-split.has-detail) > .set-head :is(.set-lead, .set-head-actions) { display: none; }
}
.set-detail { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.set-detail-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px 20px; border-bottom: 1px solid var(--separator); }
.set-detail-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; overflow-wrap: anywhere; }
.set-detail-head .fin-badge { width: 36px; height: 36px; }
.set-detail-actions { display: flex; flex-shrink: 0; align-items: center; gap: 6px; }
.set-detail-actions form { display: flex; margin: 0; }
.set-detail-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; color: var(--muted); }
.set-detail-close svg { width: 18px; height: 18px; }
.set-detail-close:hover { background: var(--surface-2); color: var(--text); }
.set-detail-body { padding: 18px 20px 4px; }
/* Fields two by two in a form (Satıcı rekvizitləri, Hesablar); .is-wide takes the whole line. */
.set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
.set-grid > .is-wide { grid-column: 1 / -1; }

.field-row .set-field-btn { flex: 0 0 auto; align-self: flex-end; }
.set-detail .set-card-foot { background: none; border-radius: 0; }
/* A yes/no setting: the box, its name and what it does. */
.set-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.field label.set-check { display: flex; margin-bottom: 0; font-weight: 500; }
.set-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; }
.set-check b { display: block; font-size: 14px; font-weight: 650; }
.set-check small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--muted); }
.set-detail-section { margin: 4px 0 12px; padding-top: 16px; border-top: 1px solid var(--separator); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }

/* Small pieces the settings pages share. */
.set-fold { margin-bottom: 10px; }
.fin-badge > .fin-group-dot { margin: 0; width: 10px; height: 10px; }
.set-prefix { flex-shrink: 0; }
.field-input-suffix .set-prefix { color: var(--muted); font-size: 14px; font-weight: 500; }
.set-row .field-row { gap: 10px; }
.set-err { color: var(--err) !important; }
.set-card-head-action { display: flex; margin: 0 0 0 auto; }
.set-card-head .ch-state + .set-card-head-action { margin-left: 0; }
.set-card-head > .ch-logo, .set-card-head > .rp-card-icon, .set-card-head > .fin-badge { margin-right: 2px; }
.set-card-head > .ch-logo { width: 36px; height: 36px; padding: 6px; border-radius: 10px; }
.set-kpis { margin-bottom: 18px; }
.set-card-kpis { padding: 0 20px 16px; margin: 0; }
.set-card-kpis .sh-kpi { box-shadow: none; background: var(--surface-2); border-color: transparent; padding: 12px 14px; }
.set-card-kpis .sh-kpi b { font-size: 20px; }
.sh-kpi-main small { color: color-mix(in srgb, var(--on-primary) 70%, transparent); }
.set-kpi-bar { display: block; height: 5px; margin-top: 10px; border-radius: 3px; background: color-mix(in srgb, var(--on-primary) 22%, transparent); overflow: hidden; }
.set-kpi-bar > i { display: block; height: 100%; border-radius: 3px; background: var(--on-primary); }
.set-kpi-err { border-color: color-mix(in srgb, var(--err) 35%, var(--line)); }
.set-kpi-err b { color: var(--err); }
.set-kpi-err small { overflow-wrap: anywhere; }
.set-kpis .sh-kpi b { font-size: 20px; }

.set-inline-link { display: inline; font-size: inherit; }
.set-empty p { margin: 0 0 6px; }

/* Backup: Data / Kod / Şəkillər side by side, each with its button and files (newest first). */
.set-backups { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; align-items: start; }
.set-backup { margin-bottom: 0; }
.set-backup .set-card-head p { min-height: 4.5em; }
.set-backup-make { display: flex; flex-basis: 100%; margin: 8px 0 0; }
.set-backup-make .btn { width: 100%; }
.set-item-dl { display: inline-flex; color: var(--muted); }
.set-item-dl svg { width: 17px; height: 17px; }
.set-backup .set-item-link:hover .set-item-dl { color: var(--text); }

/* Shopify › Bağlı məhsullar: the table scrolls inside the card, its head stays. */
.shopify-linked-wrap { max-height: 65vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.shopify-linked-wrap thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.shopify-linked-action { width: 1%; white-space: nowrap; }
.shopify-linked-action form { margin: 0; }
.set-card-body .search-bar { margin-bottom: 12px; }

/* Avadanlıq qrupları: one editable line per group, a blank line adds one. */
.fag-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 90px 34px; align-items: center; gap: 12px; padding: 8px 16px; border-top: 1px solid var(--separator); }
.fag-row .field { padding: 0; }
.fag-head { padding: 12px 16px 10px; border-top: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.fag-head > :nth-child(3) { text-align: right; }
.fag-count { font-size: 13.5px; color: var(--muted); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fag-new { background: color-mix(in srgb, var(--surface-2) 40%, var(--surface)); }
.fag-row .field-input-suffix input { text-align: right; }

/* Satışdan daxilolmalar / Tranzit hesabları. */
.fss-allowed { margin-top: 10px; }
.fss-route[data-ask="0"] .fss-allowed { display: none; }
.fss-allowed-list { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.fss-allowed-item { display: inline-flex; align-items: center; gap: 6px; }
.fss-allowed-item input[type="radio"] { width: 16px; height: 16px; margin: 0; }
.fss-transits { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 0 16px; }
.fss-transit .set-card-body { padding-bottom: 6px; }
.fss-transit .field { padding-bottom: 12px; }

.fss-form .pf-actions { margin-top: 4px; }

/* Zəmanət mətni: room for the long conditions. */
.warranty-terms-input { min-height: 380px; font-size: 14px; resize: vertical; }
/* Müqavilə mətni: one box per paragraph, a folding card per section. */
.contract-token { padding: 1px 5px; border-radius: 5px; background: var(--surface-2); font-size: 12px; white-space: nowrap; }
.contract-text-section h2 { margin: 0; }
.contract-text-entries { padding: 4px 16px 8px; }
.contract-text-entry { padding: 12px 0; border-bottom: 1px solid var(--separator); }
.contract-text-entry:last-child { border-bottom: none; }
.contract-text-entry-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.contract-text-entry-actions { display: inline-flex; align-items: center; gap: 6px; }
.contract-text-type { padding: 4px 8px; border: 0; border-radius: 7px; background: var(--surface-2); font: inherit; font-size: 12px; font-weight: 650; color: var(--muted); }
.contract-text-input { display: block; width: 100%; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; line-height: 1.5; resize: none; overflow: hidden; }
.contract-text-input:focus { outline: none; border-color: var(--text); box-shadow: var(--focus-ring); }
.contract-text-entry.is-heading .contract-text-input { font-weight: 700; }
.contract-text-entry.is-subheading .contract-text-input { font-style: italic; }
.contract-text-entry.is-list .contract-text-input { padding-left: 26px; background-image: radial-gradient(circle, var(--muted) 2px, transparent 2.5px); background-repeat: no-repeat; background-size: 10px 10px; background-position: 10px 14px; }
@media (hover: hover) and (min-width: 768px) {
  .contract-text-entry .contract-text-entry-actions { opacity: 0; transition: opacity 0.12s ease; }
  .contract-text-entry:hover .contract-text-entry-actions, .contract-text-entry:focus-within .contract-text-entry-actions { opacity: 1; }
}

/* Bərpa (restore.php): a copy picked from the list. */
.restore-pick { cursor: pointer; }
.restore-pick input { flex: none; width: 18px; height: 18px; margin: 0 4px 0 6px; }
.restore-pick:has(input:checked) { background: var(--brand-soft); }
.restore-option { display: flex; gap: 10px; align-items: flex-start; padding: 14px 20px; border-top: 1px solid var(--separator); font-size: 13.5px; line-height: 1.45; }
.restore-option input { flex: none; margin-top: 2px; }

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

/* Login / Parolu unutmusunuz? / Yeni parol (partials/auth_open.php) and the error page
   (src/ErrorPage.php): standalone pages outside the app shell. ≥900px a graphite brand panel
   beside the form; a phone has the form alone. */
.auth-body {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}
.auth-shell { display: flex; min-height: 100vh; min-height: 100dvh; }
.auth-side { display: none; }
.auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 20px calc(32px + env(safe-area-inset-bottom)); }
.auth-card { width: 100%; max-width: 400px; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; }
.auth-brand .brand-mark { width: 38px; height: 30px; }
.auth-brand-text { display: flex; flex-direction: column; gap: 3px; }
.auth-brand-text > span:last-child { font-size: 13px; font-weight: 500; color: var(--muted); }
.auth-brand .env-badge { margin-left: auto; align-self: flex-start; }
.auth-title { margin: 0 0 22px; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.auth-card .field input { min-height: 46px; }
.auth-actions { margin-top: 22px; }
.auth-actions .btn { width: 100%; min-height: 46px; }
.auth-link { display: block; margin-top: 18px; text-align: center; font-size: 14px; font-weight: 600; color: var(--muted); }
.auth-link:hover { color: var(--text); }
@media (min-width: 768px) {
  .auth-side {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 0 0 min(44%, 560px);
    padding: 44px 48px;
    overflow: hidden;
    background: #17171A;
    color: #F4F4F5;
  }
  /* The mark, large and quiet, filling the panel's corner. */
  .auth-side::after {
    content: '';
    position: absolute;
    right: -90px;
    bottom: -70px;
    width: 420px;
    height: 336px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24'%3E%3Cg fill='%23F5DF4C'%3E%3Crect x='0' y='2' width='12' height='20' rx='3.4'/%3E%3Crect x='14.5' y='5.5' width='8.5' height='13' rx='2.8'/%3E%3Crect x='25' y='8.5' width='5' height='7' rx='1.8'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.08;
  }
  .auth-side-brand { display: flex; align-items: center; gap: 12px; }
  .auth-side-mark { width: 44px; height: 35px; }
  .auth-side-mark rect { fill: var(--logo-yellow); }
  .auth-side-brand .brand-word { font-size: 28px; color: #B4B6B7; }
  .auth-side-title { max-width: 380px; margin: 0 0 22px; font-size: 32px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.15; }
  .auth-side-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: #C9C9CE; }
  .auth-side-list li { display: flex; align-items: center; gap: 12px; }
  .auth-side-list li::before { content: ''; flex-shrink: 0; width: 8px; height: 8px; border-radius: 2px; background: var(--brand); }
  .auth-side-foot { font-size: 13px; color: #8E8E93; }
  .auth-brand .brand-mark, .auth-brand-text { display: none; }
  .auth-brand { margin-bottom: 18px; min-height: 0; }
}
/* Dark: the system's, unless Görünüş says Açıq; Görünüş › Qaranlıq forces it (v8.3). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auth-side { background: #1B1B1D; border-right: 1px solid #2B2B2F; }
}
:root[data-theme="dark"] .auth-side { background: #1B1B1D; border-right: 1px solid #2B2B2F; }

/* The error page: the same frame, centred. */
.error-page { text-align: center; }
.error-page .auth-brand { justify-content: center; }
.error-page-code { font-size: 64px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--brand-grey); }
.error-page h1 { margin: 14px 0 8px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.error-page p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.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: 22px; }
.error-page .auth-brand .brand-mark { display: block; }

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

/* Soruş — questions to Claude about this system's data. Conversations | the open one as a
   window-high card (the thread scrolls, the composer stays at its foot); a phone shows the
   thread, or the list when none is open, and pins the composer over the tab bar. */
.ask-head-actions { align-items: center; }
.ask-spend { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13px; color: var(--muted); white-space: nowrap; }
.ask-spend strong { color: var(--text); font-weight: 750; font-variant-numeric: tabular-nums; }
.ask-spend-limit { color: var(--faint); }
a.ask-balance:hover { border-color: var(--line-strong); background: var(--surface-2); }
.ask-balance-low, .ask-balance-low strong { color: var(--warn); }
.ask-balance-low { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); background: var(--warn-soft); }
.ask-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: stretch; height: calc(100dvh - 156px); min-height: 520px; }
.ask-history { display: flex; flex-direction: column; min-height: 0; padding: 14px 8px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); overflow-y: auto; }
.ask-history-title { margin: 0 10px 8px; font-size: 11.5px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.ask-history-empty { margin: 0 10px; font-size: 13px; color: var(--muted); }
.ask-history-list { margin: 0; padding: 0; list-style: none; }
.ask-history-item { display: block; padding: 9px 10px; border-radius: 11px; color: var(--text); transition: background 0.12s ease; }
.ask-history-item:hover { background: var(--surface-2); }
.ask-history-item.active { background: color-mix(in srgb, var(--brand) 22%, var(--surface)); }
.ask-history-name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.ask-history-meta { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

.ask-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.ask-main-head { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 14px 10px 20px; border-bottom: 1px solid var(--separator); }
.ask-main-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 750; letter-spacing: -0.01em; }
.ask-back { display: none; }
.ask-delete-form { margin: 0; }
.ask-delete.btn-icon { width: 32px; height: 32px; }
.ask-delete.btn-icon svg { width: 15px; height: 15px; }
.ask-thread { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 24px; padding: 22px 24px 20px; }
.ask-empty { display: flex; flex-direction: column; align-items: center; margin: auto; max-width: 640px; padding: 12px 0; text-align: center; }
.ask-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 16px; background: var(--brand); color: var(--ink-on-brand); }
.ask-empty-icon svg { width: 26px; height: 26px; }
.ask-empty-title { margin: 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.ask-empty-lead { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.ask-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
.ask-example { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font: inherit; font-size: 13.5px; font-weight: 550; line-height: 1.4; color: var(--text); text-align: left; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; }
.ask-example:hover { border-color: var(--line-strong); background: var(--surface-2); }

/* A turn: the question as a bubble on the right, the answer as text beside the Soruş mark. */
.ask-turn { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 16px; }
.ask-q { align-self: flex-end; max-width: min(620px, 85%); padding: 10px 15px; border-radius: 18px 18px 5px 18px; background: var(--primary); color: var(--on-primary); font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.ask-a { position: relative; padding-left: 40px; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.ask-a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317171A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.4 8.4 0 01-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.4 8.4 0 013.8-.9h.5a8.5 8.5 0 018 8v.5z'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.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: 3px 0; }
.ask-a h3 { margin: 16px 0 6px; font-size: 16px; font-weight: 750; }
.ask-a h4 { margin: 12px 0 4px; font-size: 15px; font-weight: 750; }
.ask-a hr { margin: 12px 0; border: 0; border-top: 1px solid var(--separator); }
.ask-a code { padding: 1px 5px; border-radius: 5px; background: var(--surface-2); font-size: 13px; }
.ask-table-wrap { margin: 6px 0 12px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.ask-table { min-width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ask-table th, .ask-table td { padding: 7px 12px; border-bottom: 1px solid var(--separator); text-align: left; vertical-align: top; }
.ask-table th { background: var(--surface-2); font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--muted); white-space: nowrap; }
.ask-table th.num, .ask-table td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ask-table tbody tr:last-child td { border-bottom: 0; }
.ask-loading { color: var(--muted); }
.ask-thinking::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--brand-strong); 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(--err); }
.ask-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-left: 40px; font-size: 12px; color: var(--muted); }
.ask-source { padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.ask-source[title] { cursor: help; }
.ask-source-sql { border-style: dashed; }
.ask-source-error { color: var(--err); }
.ask-cost { margin-left: auto; font-variant-numeric: tabular-nums; }

/* The composer: a rounded box with the send arrow inside. */
.ask-composer { position: relative; display: flex; align-items: flex-end; gap: 8px; margin: 0 16px 16px; padding: 6px 6px 6px 14px; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.ask-composer:focus-within { border-color: var(--text); box-shadow: var(--focus-ring); }
.ask-composer textarea { flex: 1; min-width: 0; max-height: 200px; padding: 8px 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 16px; /* 16px: iOS doesn't zoom the page on focus */ line-height: 1.4; resize: none; outline: none; }
.ask-send { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; border: 0; border-radius: 12px; background: var(--primary); color: var(--on-primary); cursor: pointer; transition: background 0.15s ease, transform 0.1s ease; }
.ask-send:hover { background: var(--primary-hover); }
.ask-send:active { transform: scale(0.95); }
.ask-send:disabled { opacity: 0.35; cursor: not-allowed; }
.ask-send svg { width: 18px; height: 18px; }

@media (max-width: 1099px) {
  .ask-layout { grid-template-columns: 230px minmax(0, 1fr); }
  .ask-examples { grid-template-columns: minmax(0, 1fr); }
}

/* ====== Page: Məhsul seqmentasiyası (segments.php; the A4 sheet has its own CSS in partials/segments/print.php) ====== */

.sg-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.sg-jump a { font-size: 13px; padding: 5px 11px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.sg-jump a:hover { background: var(--surface-2); }
.sg-jump-add { align-items: center; gap: 4px; font: inherit; font-size: 13px; padding: 5px 11px; border-radius: 20px; background: transparent; border: 1px dashed var(--line-strong); color: var(--muted); cursor: pointer; }
.sg-jump-add:hover { color: var(--text); background: var(--surface); }
.sg-jump-add svg { width: 14px; height: 14px; }
.sg-jump a.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.sg-jump a.sg-jump-outside { border-style: dashed; color: var(--err); }
.sg-jump a.sg-jump-outside.active { background: var(--err); border-color: var(--err); color: #fff; }
.sg-outside-list { margin-bottom: 24px; scroll-margin-top: 72px; }
.sg-outside-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.sg-outside-head h2 { margin: 0; font-size: 17px; }
.sg-group-outside { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.sg-outside-head h3 { margin: 0; font-size: 16px; }
.sg-group-outside .rep-hint { margin: 0 0 10px; }
/* The report over the page (report.php). */
.sg-report { margin-bottom: 16px; }
a.sg-report-ready { color: inherit; text-decoration: none; }
a.sg-report-ready:hover { background: var(--surface-2); }
.sg-report-ready-on { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.sg-report-ready-on b { color: var(--ok); }
.sg-group { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; margin-bottom: 22px; scroll-margin-top: 16px; }
.sg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.sg-head h2 { font-size: 22px; letter-spacing: -0.02em; margin: 0 0 4px; }
.sg-chg { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--muted); font-size: 13.5px; }
.sg-chg b { color: var(--text); }
.sg-head-actions { display: flex; gap: 6px; flex: none; }
.sg-matrix { display: grid; grid-template-columns: 140px repeat(var(--cols), minmax(0, 1fr)); border-top: 1px solid var(--line); }
.sg-mh { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 11px 10px 9px; }
.sg-rl { padding: 16px 10px 16px 0; border-top: 1px solid var(--line); }
.sg-rl b { display: block; font-size: 17px; letter-spacing: -0.01em; }
.sg-rl span { color: var(--muted); font-size: 12.5px; }
.sg-cell { padding: 12px 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; min-height: 64px; }
.sg-cell.span { grid-column: span var(--cols); padding-left: 25%; padding-right: 25%; }
.sg-cell.span.wide { padding-left: calc(50% / var(--cols)); padding-right: calc(50% / var(--cols)); }
.sg-cell.span.full { padding-left: 10px; padding-right: 10px; }
.sg-cell.empty { background: repeating-linear-gradient(135deg, transparent 0 8px, var(--surface-2) 8px 16px); }
.sg-cell.is-depleted { background: var(--err-soft); box-shadow: inset 3px 0 0 var(--err); }
.sg-card { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.sg-matrix[style*="--cols:4"] .sg-card, .sg-matrix[style*="--cols:5"] .sg-card, .sg-matrix[style*="--cols:6"] .sg-card { grid-template-columns: 1fr; }
.sg-matrix .sg-cell.span .sg-card { grid-template-columns: 64px 1fr; }
.sg-card.is-slot { border-style: dashed; }
.sg-thumb { width: 64px; height: 64px; border-radius: 9px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--faint); }
.sg-thumb img { width: 100%; height: 100%; object-fit: contain; }
.sg-thumb svg { width: 22px; height: 22px; }
.sg-thumb-slot { background: var(--surface-2); }
.sg-cb { min-width: 0; }
.sg-nm { font-weight: 600; font-size: 14.5px; line-height: 1.25; }
.sg-sku { color: var(--faint); font-weight: 400; font-size: 11.5px; }
.sg-role { color: var(--muted); font-size: 12.5px; margin: 3px 0 5px; }
.sg-meta { display: flex; flex-wrap: wrap; gap: 4px 9px; align-items: center; font-size: 12px; color: var(--muted); }
.sg-meta b { color: var(--text); font-size: 13.5px; }
.sg-bm { color: #E05A00; font-weight: 600; }
.sg-tag { white-space: nowrap; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px; cursor: default; }
.sg-tag.ok { background: var(--ok-soft); color: var(--ok); }
.sg-tag.reo { background: var(--info-soft); color: var(--info); }
.sg-tag.old { background: var(--warn-soft); color: var(--warn); }
.sg-tag.inc { background: rgba(122, 90, 248, 0.12); color: #7A5AF8; }
.sg-card.is-slot .sg-tag { white-space: normal; }
.sg-unplaced h3 span { color: var(--muted); font-weight: 400; }
.sg-dismiss { flex: none; border: 0; background: transparent; color: var(--muted); font-size: 18px; width: 26px; height: 26px; border-radius: 7px; cursor: pointer; }
.sg-dismiss:hover { background: var(--surface); color: var(--text); }
.sg-out { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; margin-top: 10px; min-height: 40px; border-radius: 10px; }
.sg-o { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; padding: 7px 10px; border-radius: 10px; background: var(--surface-2); }
.sg-o > div { flex: 1; min-width: 0; }
.sg-o small { color: var(--muted); display: block; }
.sg-unplaced { margin-top: 16px; }
.sg-unplaced h3 { font-size: 14.5px; margin: 0; }
.sg-unplaced .sg-o { background: var(--brand-soft); }

/* Edit mode (an admin's "Dəyiş"): grips, a cell's "+", the card's pencil, the Quruluş button. */
.sg-grip, .sg-edit-btn, .sg-edit-only { display: none; }
body.sg-editing .sg-edit-only { display: inline-flex; }
body.sg-editing .sg-unplaced.sg-edit-only { display: block; }
body.sg-editing .sg-grip { display: inline-flex; color: var(--faint); cursor: grab; touch-action: none; align-items: center; }
body.sg-editing .sg-card .sg-grip { position: absolute; top: 2px; right: 30px; padding: 4px; }
.sg-grip svg { width: 16px; height: 16px; }
body.sg-editing .sg-card, body.sg-editing .sg-o { cursor: grab; user-select: none; }
body.sg-editing .sg-edit-btn { display: inline-flex; position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.sg-edit-btn:hover { background: var(--surface-2); color: var(--text); }
.sg-edit-btn svg { width: 14px; height: 14px; }
body.sg-editing .sg-card .sg-cb { padding-right: 46px; }
.sg-add { align-self: flex-start; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px dashed var(--line-strong); border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
.sg-add:hover { background: var(--surface-2); color: var(--text); }
.sg-add svg { width: 15px; height: 15px; }
body.sg-editing .sg-cell.empty::after { content: none; }
body.sg-editing .sg-drop.is-over { outline: 2px dashed var(--brand-strong); outline-offset: -3px; }
.sg-ph { border: 2px dashed var(--brand-strong); border-radius: 12px; background: var(--brand-soft); min-height: 34px; }
.is-drag-src { opacity: 0.35; }
.sg-ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; opacity: 0.92; box-shadow: var(--shadow-pop); transform-origin: 0 0; }
body.sg-dragging, body.sg-dragging * { cursor: grabbing !important; user-select: none; }
#sg-edit-toggle[aria-pressed="true"] { background: var(--brand); color: var(--ink-on-brand); border-color: var(--brand-strong); }

/* The add window's product search and the Quruluş lists. */
.sg-add-where { color: var(--muted); margin: 0 0 10px; font-size: 13.5px; }
.sg-pick { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto; }
.sg-pick-row { display: flex; gap: 10px; align-items: center; text-align: left; border: 0; background: transparent; padding: 6px; border-radius: 9px; cursor: pointer; color: var(--text); font: inherit; }
.sg-pick-row:hover { background: var(--surface-2); }
.sg-pick-row b { display: block; font-size: 14px; font-weight: 600; }
.sg-pick-row b small { color: var(--faint); font-weight: 400; }
.sg-pick-row span span { color: var(--muted); font-size: 12px; }
.sg-pick-thumb { width: 40px; height: 40px; flex: none; border-radius: 7px; background: #fff; overflow: hidden; border: 1px solid var(--line); }
.sg-pick-thumb img { width: 100%; height: 100%; object-fit: contain; }
.sg-pick-none { color: var(--muted); font-size: 13.5px; }
.sg-add-slot h3, .sg-str-list + .btn, #sg-str-form h3 { margin-top: 0; }
#sg-str-form h3 { font-size: 15px; margin-bottom: 8px; }
.sg-str-note { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.sg-str-head { display: grid; grid-template-columns: 1fr 170px; gap: 10px; }
.sg-str-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.sg-str-item { display: flex; gap: 6px; align-items: center; padding: 0; }
#sg-str-form .btn svg, .sg-head-actions .btn svg, #sg-edit-toggle svg { width: 15px; height: 15px; }
.sg-str-item input, .sg-str-item select { min-width: 0; }
.sg-str-name { flex: 1.2; }
.sg-str-hint { flex: 1.2; }
.sg-str-span { flex: 1.3; }
.sg-str-item.is-dragging { opacity: 0.6; }
.sg-str-grip { display: inline-flex; color: var(--muted); cursor: grab; touch-action: none; padding: 4px; }
.sg-str-grip svg { width: 18px; height: 18px; }
.sg-str-del { border: 0; background: transparent; color: var(--muted); font-size: 20px; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; flex: none; }
.sg-str-del:hover { background: var(--err-soft); color: var(--err); }

@media (max-width: 767px) {
  .sg-jump { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 16px; padding: 0 16px 4px; scrollbar-width: none; }
  .sg-jump a, .sg-jump-add { flex: none; }
  .sg-report { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-report .sh-kpi b { font-size: 20px; }
  .sg-group { padding: 16px; border-radius: 14px; scroll-margin-top: 72px; }
  .sg-head { flex-direction: column; }
  .sg-matrix { grid-template-columns: 1fr; }
  .sg-mh { display: none; }
  .sg-rl { padding: 14px 0 2px; }
  .sg-cell { border-top: none; padding: 6px 0; min-height: 0; }
  .sg-cell::before { content: attr(data-col); font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .sg-cell.empty { display: none; }
  body.sg-editing .sg-cell.empty { display: flex; background: none; }
  .sg-cell.span, .sg-cell.span.wide, .sg-cell.span.full { grid-column: auto; padding: 6px 0; }
  .sg-cell.is-depleted { padding-left: 8px; }
  .sg-matrix[style*="--cols"] .sg-card { grid-template-columns: 56px 1fr; }
  .sg-thumb { width: 56px; height: 56px; }
  .sg-str-item { flex-wrap: wrap; }
  .sg-str-head { grid-template-columns: 1fr; }
}

/* ====== Page: Sayt redaktoru (site_card / site_collection / site_page / site_menu; pages/site-editor.js) ====== */

.se-list .inq-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.se-search { margin-left: auto; }
.se-search input { min-width: 240px; height: 38px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); font: inherit; color: var(--text); }
.se-row { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.se-row .rp-thumb { width: 44px; height: 44px; flex: none; }
.se-row-end { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.se-row-note { font-size: 12px; color: var(--muted); }

.se-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.se-main, .se-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.se-side { position: sticky; top: 16px; max-height: calc(100dvh - 32px); overflow-y: auto; padding-bottom: 8px; scrollbar-width: thin; }
.se-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm); }
.se-box-title { margin: 0; font-size: 15px; font-weight: 700; }
.se-box p { margin: 0; }
.se-box > .btn { align-self: flex-start; }
.se-box .btn svg { width: 15px; height: 15px; flex: none; }
.se-box > p.se-muted, .se-box > .se-hint { font-size: 12.5px; line-height: 1.45; }
.se-lang-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: sticky; top: 0; z-index: 5; padding: 8px 0; background: var(--bg); }
.se-lang-note { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); flex: 1 1 260px; height: 2.8em; display: flex; align-items: center; overflow: hidden; }
.se-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.se-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); min-height: 22px; }
.se-label > span:first-child { flex: 0 1 auto; }
.se-input { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: 14.5px; line-height: 1.45; }
.se-input:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--text); }
textarea.se-input { resize: vertical; }
.se-field-title .se-input { font-size: 18px; font-weight: 700; padding: 10px 12px; }
.se-hint { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.se-muted { color: var(--muted); }
.se-count { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
.se-count.is-over { color: var(--err); }
.se-flags { display: inline-flex; align-items: center; gap: 8px; }
.se-flag { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.se-flag.is-manual { background: var(--info-soft); color: var(--info); }
.se-link-btn { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--info); cursor: pointer; text-decoration: none; }
.se-link-btn:hover { text-decoration: underline; }
.se-danger { color: var(--err); }
.se-error { margin: 0; color: var(--err); font-size: 13px; }

/* the body editor keeps one height in both modes and all three languages */
.se-rich-tools { display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--line-strong); border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--surface-2); }
.se-tool { min-width: 32px; height: 30px; border: 0; border-radius: 7px; background: none; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.se-tool:hover { background: var(--surface); }
.se-tool.active { background: var(--primary); color: var(--on-primary); }
.se-rich-gap { flex: 1; }
.se-rich-body { position: relative; height: 380px; border: 1px solid var(--line-strong); border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--surface); }
.se-rich-area, .se-rich-code { position: absolute; inset: 0; overflow-y: auto; padding: 12px 14px; box-sizing: border-box; }
.se-rich-area { font-size: 14.5px; line-height: 1.6; outline: none; }
.se-rich-area:focus { box-shadow: inset 0 0 0 2px var(--brand); border-radius: inherit; }
.se-rich-area:empty::before { content: attr(data-placeholder); color: var(--faint); }
.se-rich-area h2, .se-rich-area h3, .se-rich-area h4 { margin: 0.8em 0 0.3em; font-size: 16px; }
.se-rich-area p { margin: 0 0 0.7em; }
.se-rich-area ul, .se-rich-area ol { margin: 0 0 0.7em; padding-left: 1.4em; }
.se-rich-area img, .se-rich-area iframe { max-width: 100%; height: auto; }
.se-rich-code { width: 100%; height: 100%; border: 0; resize: none; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); background: var(--surface); display: none; }
.se-rich.is-html .se-rich-code { display: block; }
.se-rich.is-html .se-rich-area { display: none; }

.se-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.se-img { position: relative; aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); overflow: hidden; user-select: none; -webkit-user-select: none; }
.se-img > img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.se-img.is-main { border-color: var(--text); }
.se-img-badge { position: absolute; left: 6px; bottom: 6px; padding: 1px 7px; border-radius: 999px; background: var(--brand); color: var(--ink-on-brand); font-size: 11px; font-weight: 700; }
.se-img-grip, .se-img-del { position: absolute; top: 6px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.92); color: #17171A; box-shadow: var(--shadow-sm); cursor: pointer; }
.se-img-grip { left: 6px; cursor: grab; touch-action: none; }
.se-img-del { right: 6px; }
.se-img-grip svg, .se-img-del svg { width: 16px; height: 16px; }
.se-img-video { width: 100%; height: 100%; display: grid; place-items: center; background: #17171A; color: #fff; font-size: 12px; font-weight: 700; }
.se-img-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.se-img-video span { position: relative; }
.se-img-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-style: dashed; border-color: var(--line-strong); background: var(--surface); }
.se-img-add-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.se-img-add-btn svg { width: 24px; height: 24px; }
.se-img.is-loading { display: grid; place-items: center; align-content: center; gap: 6px; padding: 8px; }
.se-img-name { font-size: 11px; color: var(--muted); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.se-spin { width: 22px; height: 22px; border: 2.5px solid var(--line-strong); border-top-color: var(--text); border-radius: 50%; animation: se-spin 0.8s linear infinite; }
@keyframes se-spin { to { transform: rotate(360deg); } }
.is-dragging { opacity: 0.45; }
.is-drop-before { box-shadow: -3px 0 0 0 var(--info); }
.is-drop-after { box-shadow: 3px 0 0 0 var(--info); }
.se-variants .is-drop-before, .se-mitems .is-drop-before, .se-cprods .is-drop-before { box-shadow: 0 -3px 0 0 var(--info); }
.se-variants .is-drop-after, .se-mitems .is-drop-after, .se-cprods .is-drop-after { box-shadow: 0 3px 0 0 var(--info); }

.se-specs { display: flex; flex-direction: column; gap: 8px; }
.se-spec { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr) 32px; gap: 8px; align-items: start; }
.se-spec-name { font-size: 13.5px; font-weight: 600; padding-top: 9px; overflow-wrap: anywhere; }
input.se-spec-name { padding-top: 9px; font-weight: 600; }
.se-spec-val { min-height: 40px; }
.se-icon-btn { width: 32px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.se-icon-btn:hover { background: var(--surface-2); color: var(--err); }
.se-icon-btn svg { width: 16px; height: 16px; }
.se-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; padding-top: 8px; }
.se-spec-add { max-width: 340px; }

.se-variants { display: flex; flex-direction: column; gap: 8px; }
.se-var { display: grid; grid-template-columns: 28px minmax(0, 1.3fr) minmax(0, 1fr) 110px 32px; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.se-grip { width: 28px; height: 32px; display: grid; place-items: center; border: 0; background: none; color: var(--faint); cursor: grab; touch-action: none; }
.se-grip svg { width: 16px; height: 16px; }
.se-var-main { min-width: 0; font-size: 13.5px; line-height: 1.35; }
.se-var-main .se-muted { overflow-wrap: anywhere; }
.se-var-meta { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.se-var-meta .ch-state { font-size: 11px; padding: 1px 7px; }
.se-field-inline { max-width: 320px; }
.se-var-add { position: relative; max-width: 420px; }
.se-results { list-style: none; margin: 4px 0 0; padding: 0; border-radius: var(--radius-sm); overflow: hidden; }
.se-results:not(:empty) { border: 1px solid var(--line); box-shadow: var(--shadow); }
.se-result { display: block; width: 100%; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.se-result:hover:not(:disabled) { background: var(--surface-2); }
.se-result:disabled { cursor: default; opacity: 0.55; }

.se-pub { display: flex; flex-direction: column; gap: 10px; }
.se-pub p { margin: 0; }
.se-pub-state { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.se-save-note { font-size: 12.5px; color: var(--muted); min-height: 1.4em; }
.se-save-note.is-bad { color: var(--err); }
.se-pub-tr { font-size: 12.5px; padding: 8px 10px; border-radius: var(--radius-xs); background: var(--info-soft); color: var(--info); }
.se-pub-activate { padding: 0; font-size: 12.5px; align-items: flex-start; }
.se-pub-activate input { margin-top: 2px; }
.se-pub-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.se-pub-btns .btn { justify-content: center; }
.se-pub-btns svg { width: 15px; height: 15px; }
.btn.is-disabled { opacity: 0.45; pointer-events: none; }
.se-pub-links { display: flex; justify-content: space-between; gap: 10px; }

.se-ai-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.se-ai-btns svg { width: 14px; height: 14px; }
.se-ai-out:empty { display: none; }
.se-ai-result { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.se-ai-html { max-height: 260px; overflow-y: auto; font-size: 13px; line-height: 1.55; padding: 10px; background: var(--surface); border-radius: var(--radius-xs); }
.se-ai-html p { margin: 0 0 0.6em; }
.se-ai-short, .se-ai-seo, .se-ai-src { margin: 0; font-size: 12.5px; line-height: 1.45; }
.se-ai-specs { margin: 0; padding-left: 1.1em; font-size: 13px; }

.se-snippet { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); height: 104px; box-sizing: border-box; overflow: hidden; }
.se-snip-url { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.se-snip-title { font-size: 16px; color: #1a0dab; line-height: 1.3; }
.se-snip-desc { font-size: 13px; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.se-colls { display: flex; flex-direction: column; height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.se-coll { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--line); font-size: 13.5px; cursor: pointer; }
.se-coll.is-auto { cursor: default; color: var(--muted); }

.se-versions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; }
.se-versions li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.se-versions li:last-child { border-bottom: 0; }
.se-ver-main { min-width: 0; }
.se-ver-now { font-size: 12px; }

.se-cprods-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.se-cprods { display: flex; flex-direction: column; gap: 6px; max-height: 560px; overflow-y: auto; }
.se-cprod { display: grid; grid-template-columns: 28px 44px minmax(0, 1fr) 32px; gap: 10px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.se-cprod-img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: #fff; display: block; }
span.se-cprod-img { background: var(--surface-2); }
.se-cprod-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13.5px; }
.se-cprod-main .se-muted { font-size: 12px; }
.se-rules { display: flex; flex-direction: column; gap: 8px; }
.se-rule { display: grid; grid-template-columns: 150px 100px minmax(0, 1fr) 32px; gap: 8px; align-items: center; }
.se-rule-rel { text-align: center; }
.se-rule-foot { display: flex; align-items: center; gap: 12px; }
.se-rule-any { max-width: 260px; }
.se-excluded { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.se-excluded:empty { display: none; }
.se-excluded .se-label { flex-basis: 100%; }
.se-chip { border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }

.se-menu-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.se-menu-other .se-input { width: auto; }
.se-mitems { display: flex; flex-direction: column; gap: 6px; }
.se-mitems.is-nested { margin: 6px 0 0 30px; padding-left: 10px; border-left: 2px solid var(--line); }
.se-mitem-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 112px minmax(0, 1fr) repeat(4, 30px); gap: 6px; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.se-mitem-btn { width: 30px; height: 34px; font-size: 15px; font-weight: 700; }
.se-mitem-prod { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12.5px; }

.se-phonebar { display: none; }

@media (max-width: 1099px) {
  .se-grid { grid-template-columns: minmax(0, 1fr); }
  .se-side { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 767px) {
  .se-search { margin-left: 0; width: 100%; }
  .se-search input { width: 100%; min-width: 0; }
  .se-box { padding: 14px; border-radius: var(--radius-sm); }
  .se-lang-row { top: var(--topbar-h, 60px); }
  .se-lang-note { flex-basis: 100%; }
  .se-rich-body { height: 320px; }
  .se-images { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .se-spec { grid-template-columns: minmax(0, 1fr) 32px; }
  .se-spec > :first-child { grid-column: 1 / -1; padding-top: 0; }
  .se-var { grid-template-columns: 28px minmax(0, 1fr) 32px; }
  .se-var > .se-input { grid-column: 2 / 3; }
  .se-var > .se-icon-btn, .se-var > span:last-child { grid-column: 3; grid-row: 1; }
  .se-rule { grid-template-columns: minmax(0, 1fr) 90px 32px; }
  .se-mitem-row { grid-template-columns: 28px minmax(0, 1fr) repeat(4, 30px); }
  .se-mitem-row > .se-mitem-title { grid-column: 2 / -1; }
  .se-mitem-row > .se-mitem-type, .se-mitem-row > :nth-child(4) { grid-column: 2 / -1; }
  .se-mitems.is-nested { margin-left: 12px; }
  .se-rule > input { grid-column: 1 / 3; }
  .se-box-publish .se-pub-btns { display: none; }
  .se-phonebar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; z-index: 40;
    bottom: calc(var(--tabbar-h, 58px) + env(safe-area-inset-bottom)); padding: 10px 16px; background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow); }
  .se-phonebar .btn { justify-content: center; }
  .se { padding-bottom: 72px; }
}

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

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

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

/* Bütün hesabatlar: the reports by group, each a card that says what it answers. */
.rp-group { margin-bottom: 26px; }
.rp-group-title { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.rp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.rp-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 84px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.rp-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-hover); }
@media (hover: hover) { .rp-card:hover { transform: translateY(-1px); } }
.rp-card-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: var(--brand-soft); color: var(--text); }
.rp-card-icon svg { width: 21px; height: 21px; }
.rp-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin-right: auto; }
.rp-card-title { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.rp-card-text { font-size: 13px; line-height: 1.4; color: var(--muted); }
.rp-tag { padding: 1px 6px; border-radius: 6px; background: var(--surface-2); color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; }
.rp-count { flex-shrink: 0; min-width: 26px; padding: 2px 8px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 12.5px; font-weight: 750; text-align: center; font-variant-numeric: tabular-nums; }
.rp-card-chevron { flex-shrink: 0; width: 16px; height: 16px; color: var(--faint); }

/* 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 {
  width: auto;
  max-width: 140px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: var(--surface);
  box-shadow: var(--shadow);
}
/* Report rows: a product's photo beside its name over SKU (thumb() in helpers.php). */
.rp-prod { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rp-prod-text { display: block; min-width: 0; }
.rp-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--logo-bg);
}
.rp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rp-thumb-none { width: 18px; height: 18px; color: var(--faint); }
.sh-kpis.sh-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* A framed report table keeps its head in view while the rows scroll. */
.rp-sticky thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); }
.rp-sticky tfoot td { z-index: 2; }

/* Anbar hesabatı: the table is also the PDF. */
.inv-toolbar .filter-row-selects { flex-wrap: wrap; gap: 8px; }
.inv-table .sh-c-product { min-width: 260px; max-width: 420px; }
.inv-table .inv-c-category, .inv-table .inv-c-supplier { color: var(--muted); }
.inv-table .inv-c-category { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.inv-table .inv-c-qty { font-weight: 700; }
.inv-table .inv-c-incoming { color: var(--muted); }
.inv-row-empty .inv-c-qty { color: var(--faint); }
.inv-row-empty .rp-thumb { opacity: 0.55; }
/* Rail widths: Kateqoriya gives way so Dəyər stays in view (the filter and the paper keep it). */
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .inv-table .inv-c-category { display: none; }
}

/* Stoku azalmış: how far each product is from its ideal count. */
.ls-toolbar .filter-row-selects { flex-wrap: wrap; gap: 8px; }
#ls-budget-summary b span { display: inline; margin: 0; font: inherit; color: inherit; }
.ls-table .ls-c-category { max-width: 220px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.ls-table .ls-c-level { width: 120px; }
.ls-level { display: flex; width: 110px; height: 7px; overflow: hidden; border-radius: 999px; background: var(--surface-3); }
.ls-level-on { background: var(--text); }
.ls-level-in { background: repeating-linear-gradient(-45deg, var(--brand-strong) 0 3px, color-mix(in srgb, var(--brand-strong) 45%, transparent) 3px 6px); }
.ls-table .ls-c-onhand { font-weight: 700; }
.ls-table .ls-c-incoming, .ls-table .ls-c-ideal { color: var(--muted); }
.ls-row-out .ls-c-onhand { color: var(--err); }
.ls-buy { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 12.5px; font-weight: 750; white-space: nowrap; }
.ls-buy-due { background: var(--err-soft); color: var(--err); }
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .ls-table .ls-c-category { display: none; }
}

/* Ölü stok: how long each product has sat unsold, and where it is offered. */
.ds-table .ds-c-days b { display: block; font-weight: 750; }
.ds-table .ds-c-days small { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.ds-table .ds-c-qty { font-weight: 700; }
.ds-channels { display: flex; flex-wrap: wrap; gap: 4px; }
.ds-channels .ch-state { padding: 2px 8px; font-size: 11.5px; }

/* Mənfəət hesabatı: Satış tarixçəsi's table with the profit and its margin per line. */
.pr-table .sh-c-amount .profit-positive, .pr-table .sh-c-amount .profit-negative { font-weight: 750; }
.pr-margin { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.pr-toolbar .fin-pick { max-width: 260px; }
.pr-net { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: -4px 0 14px; font-size: 13px; }
.pr-net-opt { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.pr-net-opt:has(input:disabled) { color: var(--muted); cursor: default; }
.pr-net-chain { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pr-net-chain b { font-weight: 750; }
.pr-net-chain a { color: var(--primary); }
/* Best sellerlər: rank by the current sort, Say with a bar against the top seller. */
.bs-table .bs-c-rank { width: 1%; padding-right: 0; }
.bs-rank { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 750; }
.bs-rank-top { background: var(--brand); color: var(--ink-on-brand); }
.bs-qty { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; font-weight: 750; }
.bs-bar { display: inline-block; width: 64px; height: 5px; overflow: hidden; border-radius: 999px; background: var(--surface-3); }
.bs-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--text); }
.bs-table th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
.bs-table .sh-c-product { min-width: 180px; }
.bs-table th[title] { text-decoration: underline dotted var(--faint); text-underline-offset: 4px; cursor: help; }
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .bs-table .bs-bar { display: none; }
}

/* ƏDV öhdəliyi: the rows | the period's VAT by bucket and (admin) the ƏDV mövqeyi beside them. */
.vat-toolbar .filter-row-selects { flex-wrap: wrap; gap: 10px; }
.vat-custom-range { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.vat-desk { display: grid; gap: 16px; }
.vat-side { display: flex; flex-direction: column; gap: 14px; }
.vat-card, .vat-position { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.vat-card-head, .vat-position-head { display: flex; justify-content: space-between; gap: 12px; padding: 13px 16px 11px; border-bottom: 1px solid var(--separator); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.vat-card-head span + span, .vat-position-head span + span { text-transform: none; letter-spacing: 0; font-weight: 600; }
.vat-group { padding: 12px 16px 12px; }
.vat-group + .vat-group { border-top: 1px solid var(--separator); }
.vat-group-title { font-size: 14px; font-weight: 700; }
.vat-group-tax { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 6px 0 4px; }
.vat-group-tax span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.vat-group-tax b { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vat-group-row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vat-group-row span:last-child { color: var(--text); font-weight: 600; white-space: nowrap; }
.vat-position-row, .vat-position-total { display: flex; justify-content: space-between; gap: 12px; padding: 9px 16px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.vat-position-row + .vat-position-row { border-top: 1px solid var(--separator); }
.vat-position-row.is-minus span:first-child { color: var(--muted); }
.vat-position-total { font-weight: 750; border-top: 1px solid var(--separator); }
.vat-position-total.is-need { background: var(--err-soft); color: var(--err); }
.vat-position-total.is-ok { background: var(--ok-soft); color: var(--ok); }
/* An amount never breaks across lines; the label wraps instead. */
.vat-position-row .num, .vat-position-total .num { white-space: nowrap; flex-shrink: 0; }
.vat-table .sh-c-product { min-width: 220px; max-width: 380px; }
.vat-table .vat-c-tax { font-weight: 700; }
.vat-row-free .vat-c-base, .vat-row-free .vat-c-tax { color: var(--faint); }
.vat-free-tag { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 650; }
@media (min-width: 768px) and (max-width: 1599px) {
  .vat-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .vat-side:has(> :only-child) { grid-template-columns: minmax(0, 560px); }
}
@media (min-width: 1600px) {
  .vat-desk { grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "main side"; align-items: start; }
  .vat-main { grid-area: main; min-width: 0; }
  .vat-side { grid-area: side; position: sticky; top: 26px; }
}

/* Rail widths: Növü and Qeyd give way so Mənfəət stays in view (the filter and the paper keep them). */
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .pr-table .pr-rail-hide { display: none; }
}

/* ---------- Maliyyə › Hesabat (finance_report.php) ---------- */
/* The period beside the title, the six tabs as a segmented switch; sections are cards whose head
   (title, then a muted note) folds them, remembered per device (core.js). */
.rpt-header { gap: 12px; }
.rpt-period { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.rpt-tabbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px; }
.rpt-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.rpt-tabs::-webkit-scrollbar { display: none; }
.rpt-tabs .seg-btn { text-decoration: none; }
.rpt-period-label { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--muted); }
.rpt-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.rpt-kpi { display: flex; flex-direction: column; min-width: 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.rpt-kpi-label { font-size: 13px; font-weight: 700; }
.rpt-kpi-en, .rpt-en { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.rpt-en { margin-left: 6px; }
.rpt-kpi-value { margin-top: 6px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rpt-kpi-sub { margin-top: 2px; font-size: 12px; color: var(--muted); }
/* İcmal cards: the value with its last 30 days beside it (look only). */
.rpt-kpi-row { display: flex; align-items: flex-end; gap: 12px; }
.rpt-kpi-spark { flex: 0 1 100px; min-width: 40px; height: 32px; margin: 0 0 4px auto; overflow: visible; }
.rpt-warn { color: var(--warn); }
.num { font-variant-numeric: tabular-nums; }
.rpt-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.rpt-two > .rpt-box { margin-bottom: 0; }
.rpt-box { min-width: 0; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.rpt-box-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 15px 18px 12px; border-bottom: 1px solid var(--separator); }
.rpt-box-head > span:first-child { font-size: 15px; font-weight: 750; letter-spacing: -0.01em; color: var(--text); }
.rpt-box-head > span + span { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.rpt-box-head a { color: var(--text); font-weight: 650; }
.rpt-box-head a:hover { text-decoration: underline; text-decoration-color: var(--brand-strong); text-underline-offset: 3px; }
.rpt-box-foot { display: flex; justify-content: space-between; gap: 12px; padding: 11px 18px 14px; border-top: 1px solid var(--separator); font-size: 13px; color: var(--muted); }
.rpt-box-foot b { color: var(--text); }
.rpt-note { margin: 0; padding: 10px 18px 14px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.rpt-empty { margin: 0; padding: 18px; font-size: 14px; color: var(--muted); }
/* İcmal: the risks | the two structures, then the daily line. */
.rpt-ov { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 16px; }
.rpt-ov > .rpt-box { margin-bottom: 0; }
.rpt-ov-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rpt-ov-side > .rpt-box { margin-bottom: 0; }
.rpt-donut-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px 18px; }
.rpt-donut { width: 150px; height: 150px; }
.rpt-leg { display: flex; flex-direction: column; gap: 7px; min-width: 0; font-size: 13px; }
.rpt-leg div { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; }
.rpt-leg i { width: 10px; height: 10px; border-radius: 3px; }
.rpt-leg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-leg-pct { min-width: 44px; color: var(--muted); text-align: right; }
.rpt-leg-amt { min-width: 80px; font-weight: 650; text-align: right; }
.rpt-chart { display: block; width: 100%; height: auto; padding: 10px 10px 6px; }
.rpt-risks { display: flex; flex-direction: column; padding: 4px 0; }
.rpt-risk { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 11px 18px; }
.rpt-risk-fold + .rpt-risk-fold { border-top: 1px solid var(--separator); }
/* A signal opens on its own line: click the row. */
summary.rpt-risk { grid-template-columns: 4px minmax(0, 1fr) auto 8px; cursor: pointer; list-style: none; user-select: none; }
summary.rpt-risk::-webkit-details-marker { display: none; }
summary.rpt-risk::after {
  content: '';
  align-self: center;
  width: 6px;
  height: 6px;
  border-right: 1.7px solid var(--muted);
  border-bottom: 1.7px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 0.15s;
}
.rpt-risk-fold[open] > summary.rpt-risk::after { transform: rotate(45deg); margin-top: -3px; }
.rpt-risk-hist { padding: 0 18px 12px 34px; }
.rpt-pie-wrap { display: flex; align-items: center; gap: 24px; padding: 8px 0 0 18px; }
.rpt-pie-wrap .rpt-table-wrap { flex: 1; min-width: 0; }
.rpt-pie-wrap.is-stacked { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 0 0; }
.rpt-pie-wrap.is-stacked .rpt-pie { align-self: center; }
.rpt-pie { flex: none; overflow: visible; }
.rpt-pie-dot { display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; vertical-align: -1px; }
@media (max-width: 720px) {
  .rpt-pie-wrap { flex-direction: column; align-items: stretch; padding-left: 0; gap: 8px; }
  .rpt-pie-wrap .rpt-pie { align-self: center; }
}

/* Hesabat — live layer (finance-report.js): a slice and whatever carries its data-pie-k light up
   together inside one [data-pie-scope]; charts with data-hover get a crosshair and a tip. */
.rpt-seg { transform-box: view-box; transform-origin: 50% 50%; transition: opacity 0.15s, transform 0.15s; cursor: default; }
[data-pie-scope].is-hover .rpt-seg { opacity: 0.3; }
[data-pie-scope].is-hover .rpt-seg.is-on { opacity: 1; transform: scale(1.04); }
[data-pie-scope] [data-pie-k]:not(.rpt-seg) { transition: background 0.15s, opacity 0.15s; }
[data-pie-scope].is-hover [data-pie-k]:not(.rpt-seg):not(.is-on) { opacity: 0.45; }
[data-pie-scope].is-hover [data-pie-k]:not(.rpt-seg).is-on { background: var(--surface-2); }
/* Legend and bar rows: the highlight spreads past the row without taking room from it. */
.rpt-leg div, .rpt-share-row { border-radius: 4px; }
[data-pie-scope].is-hover .rpt-leg div.is-on, [data-pie-scope].is-hover .rpt-share-row.is-on { box-shadow: 0 0 0 5px var(--surface-2); }
.rpt-tip { position: fixed; z-index: 1000; max-width: 280px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14); color: var(--text); font-size: 12px; line-height: 1.45; white-space: pre-line; pointer-events: none; opacity: 0; transition: opacity 0.1s; }
.rpt-tip.is-on { opacity: 1; }
.rpt-tip b { font-weight: 650; }
.rpt-tip-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.rpt-tip-row i { width: 8px; height: 8px; border-radius: 50%; }
.rpt-tip-row b { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }
.rpt-tip-t { margin-bottom: 2px; color: var(--muted); }
svg[data-hover] { cursor: crosshair; touch-action: pan-y; }
.rpt-cross line { stroke: var(--line-strong); stroke-width: 1; }
.rpt-cross circle { stroke: var(--surface); stroke-width: 2; }
/* Clickable cards: lift on hover; İcmal's open one stays marked. */
.rpt-kpi { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.rpt-kpi.is-click { cursor: pointer; }
.rpt-kpi.is-click:hover, .rpt-kpi.is-click:focus-visible { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.09); outline: none; }
.rpt-kpi.is-click:active { transform: translateY(0); }
.rpt-kpi[aria-expanded="true"] { border-color: var(--info); box-shadow: 0 0 0 1px var(--info), 0 8px 22px rgba(0, 0, 0, 0.09); }
.rpt-kpi-detail { animation: rpt-in 0.22s ease-out; }
.rpt-kpi-close { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.rpt-kpi-close:hover { color: var(--text); }
.rpt-kpi-detail-body { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); gap: 20px; padding: 6px 18px 16px; }
.rpt-kpi-parts { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.rpt-kpi-parts .rpt-list-row { display: flex; justify-content: space-between; gap: 12px; }
.rpt-kpi-parts .is-sum { padding-top: 6px; border-top: 1px solid var(--separator); font-weight: 650; }
.rpt-kpi-parts .is-key { padding-top: 6px; border-top: 1px solid var(--line-strong); font-size: 15px; font-weight: 800; }
.rpt-kpi-hist .rpt-chart { padding: 0; }
.rpt-kpi-chips { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.rpt-kpi-chips b { color: var(--text); }
@media (max-width: 720px) { .rpt-kpi-detail-body { grid-template-columns: 1fr; } }
/* Jumped-to row or box: a short glow. */
.rpt-flash { animation: rpt-flash 1.6s ease-out; }
tr.rpt-flash > td { animation: rpt-flash-bg 1.6s ease-out; }
@keyframes rpt-flash { 0%, 30% { box-shadow: 0 0 0 2px var(--info); } 100% { box-shadow: 0 0 0 2px transparent; } }
@keyframes rpt-flash-bg { 0%, 30% { background: color-mix(in srgb, var(--info) 16%, transparent); } 100% { background: transparent; } }
/* Twelve-month tables: the hovered cell's row and column. */
.rpt-pl td.is-col, .rpt-pl th.is-col { background: color-mix(in srgb, var(--info) 7%, transparent); }
.rpt-pl tbody tr:hover > td { background: color-mix(in srgb, var(--info) 5%, transparent); }
.rpt-pl tbody tr:hover > td.is-col { background: color-mix(in srgb, var(--info) 14%, transparent); }
/* Məhsullar: search and ABC filter. */
.rpt-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 4px 18px 10px; }
.rpt-filter input[type="search"] { flex: 0 1 260px; min-width: 0; }
.rpt-filter .dy-seg button .num { margin-left: 3px; color: var(--muted); font-size: 11px; }
.rpt-filter-sum { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.rpt-filter-sum b { color: var(--text); }
.rpt-name a, .rpt-list a { color: inherit; text-decoration: none; }
.rpt-name a:hover, .rpt-list a:hover { color: var(--info); text-decoration: underline; }
#pr-abc .rpt-leg div { cursor: pointer; }
/* Entrances: bars grow, lines draw, donuts and panels fade in. */
.rpt-mbar span, .rpt-track span, .rpt-share-bars span { transform-origin: left center; animation: rpt-grow 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.rpt-draw { stroke-dasharray: 1; animation: rpt-draw 0.9s ease-out both; }
.rpt-pie { animation: rpt-pie-in 0.5s ease-out both; }
@keyframes rpt-grow { from { transform: scaleX(0); } }
@keyframes rpt-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rpt-pie-in { from { opacity: 0; transform: rotate(-30deg) scale(0.92); } }
@keyframes rpt-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .rpt-mbar span, .rpt-track span, .rpt-share-bars span, .rpt-draw, .rpt-pie, .rpt-kpi-detail, .rpt-flash, tr.rpt-flash > td { animation: none; }
  .rpt-kpi, .rpt-seg { transition: none; }
  .rpt-kpi.is-click:hover { transform: none; }
}
.rpt-risk-hist .rpt-chart { padding: 0; }
.rpt-risk-narrow { display: none; }
.rpt-risk-hist-note { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0 18px 12px 34px; font-size: 12.5px; color: var(--muted); }
.rpt-risk-months { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.rpt-risk-months .rpt-risk-from { flex-basis: 100%; }
.rpt-risk-months .is-red b { color: var(--err); }
.rpt-risk-months .is-orange b { color: var(--warn); }
.rpt-risk-months .is-green b { color: var(--ok); }
/* Where each colour lies, to the right of the months. */
.rpt-risk-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; margin-left: auto; font-size: 12px; color: var(--muted); }
.rpt-risk-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; vertical-align: 0; }
.rpt-risk-legend .is-green i { background: var(--ok); }
.rpt-risk-legend .is-orange i { background: var(--warn); }
.rpt-risk-legend .is-red i { background: var(--err); }
.rpt-risk-dot { align-self: stretch; width: 4px; min-height: 30px; border-radius: 2px; background: var(--faint); }
.rpt-risk b { display: block; font-size: 13.5px; font-weight: 700; }
.rpt-risk div span { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.rpt-risk-val { font-size: 15px; font-weight: 800; white-space: nowrap; }
.rpt-risk.is-red .rpt-risk-dot { background: var(--err); }
.rpt-risk.is-red .rpt-risk-val { color: var(--err); }
.rpt-risk.is-orange .rpt-risk-dot { background: var(--warn); }
.rpt-risk.is-orange .rpt-risk-val { color: var(--warn); }
.rpt-risk.is-green .rpt-risk-dot { background: var(--ok); }
.rpt-risk.is-green .rpt-risk-val { color: var(--ok); }
.rpt-risk.is-gray .rpt-risk-dot { background: var(--line-strong); }
.rpt-risk.is-gray .rpt-risk-val { color: var(--muted); }
/* Mənfəət / Xərclər: month columns, the picked month tinted; key lines on a well. */
.rpt-table-wrap { overflow-x: auto; }
.rpt-box .data-table th { cursor: default; }
.rpt-box .data-table th:not([data-sort])::after { display: none; }
.rpt-pl td, .rpt-pl th { white-space: nowrap; }
.rpt-pl th a { color: inherit; }
.rpt-pl th a:hover { color: var(--text); }
.rpt-pl .is-cur { background: color-mix(in srgb, var(--brand) 12%, var(--surface)); }
.rpt-pl tr.rpt-total td { font-weight: 750; }
.rpt-pl tr.rpt-key td { background: var(--surface-2); font-weight: 800; }
.rpt-pl tr.rpt-key td.is-cur { background: color-mix(in srgb, var(--brand) 18%, var(--surface-2)); }
.rpt-pl tr.rpt-minor td:first-child { padding-left: 22px; color: var(--muted); }
.rpt-pl tr.rpt-sub td { font-size: 12.5px; color: var(--muted); }
.rpt-pl tr.rpt-sub td:first-child { padding-left: 38px; }
.rpt-pl tr.rpt-sub2 td:first-child { padding-left: 50px; }
.rpt-empty-cell { color: var(--faint); }
.rpt-xp { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; font: inherit; font-weight: inherit; color: inherit; cursor: pointer; }
.rpt-xp::before { content: ''; width: 6px; height: 6px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(-45deg); transition: transform 0.15s; }
.rpt-xp[aria-expanded="true"]::before { margin-top: -3px; transform: rotate(45deg); }
.rpt-ex .rpt-ex-total { border-left: 1px solid var(--separator); font-weight: 700; }
.rpt-ex td.num, .rpt-ex th.num { padding-left: 6px; padding-right: 9px; }
.rpt-ex .rpt-ex-share { color: var(--muted); }
.rpt-mbar { display: inline-block; width: 56px; height: 6px; margin-right: 8px; border-radius: 3px; background: var(--surface-2); vertical-align: middle; overflow: hidden; }
.rpt-mbar span { display: block; height: 100%; border-radius: 3px; background: var(--ok); }
.rpt-mbar.is-cost span { background: var(--err); }
.rpt-name { min-width: 220px; white-space: normal; }
.rpt-pill { display: inline-block; min-width: 24px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 750; text-align: center; }
.rpt-pill.is-A { background: var(--ok-soft); color: var(--ok); }
.rpt-pill.is-B { background: var(--warn-soft); color: var(--warn); }
.rpt-be { display: flex; flex-direction: column; gap: 9px; padding: 16px 18px 6px; }
.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(--surface-2); overflow: hidden; }
.rpt-track span { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--ok); }
.rpt-track span.is-short { background: var(--warn); }
.rpt-track span.is-bad { background: var(--err); }
.rpt-list { display: flex; flex-direction: column; gap: 6px; padding: 10px 18px; font-size: 13px; }
.rpt-list-row { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--separator); }
.rpt-share { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 8px; }
.rpt-share-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 90px; align-items: center; gap: 12px; 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; min-width: 2px; border-radius: 3px; }
.rpt-share-bars .is-stock, .rpt-legend i.is-stock { background: color-mix(in srgb, var(--muted) 55%, transparent); }
.rpt-share-bars .is-gp, .rpt-legend i.is-gp { background: var(--ok); }
.rpt-share-val { font-size: 12px; color: var(--muted); text-align: right; }
.rpt-legend { display: flex; gap: 16px; padding: 4px 18px 14px; font-size: 12px; color: var(--muted); }
.rpt-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 3px; vertical-align: -1px; }
.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: 9px; }
.rpt-fold > summary > span:first-child::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  margin: -3px 1px 0 1px;
  border-right: 1.7px solid var(--muted);
  border-bottom: 1.7px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.15s;
}
.rpt-fold:not([open]) > summary { border-bottom: 0; }
.rpt-fold:not([open]) > summary > span:first-child::before { margin-top: 0; transform: rotate(-45deg); }
.rpt-two > .rpt-fold:not([open]) { align-self: start; }
/* Dinamika: shared controls, two charts a row, plain SVG. */
.dy-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 8px; }
.dy-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.dy-seg button { height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 13px; font-weight: 650; color: var(--muted); cursor: pointer; }
.dy-seg button:hover { color: var(--text); }
.dy-seg button.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.dy-dates { display: inline-flex; align-items: center; gap: 6px; color: var(--faint); }
.dy-field { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.dy-zoom { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.dy-zoom b { color: var(--text); }
.dy-hint { margin: 0 0 12px; padding: 0; }
.dy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.dy-grid > .rpt-box { margin-bottom: 0; }
/* Desktop (two columns): a chart spans both (.is-wide) by dragging its right edge,
   moves by its head's grip; the layout is kept per device (finance-report.js). */
.dy-box { position: relative; }
.dy-box.is-wide { grid-column: 1 / -1; }
.dy-box.is-dragging { opacity: 0.45; }
.dy-box > summary > .dy-last { margin-left: auto; }
.dy-grip { flex: none; align-self: center; width: 20px; height: 20px; margin: 0 -6px 0 -4px; border-radius: 6px; cursor: grab; color: var(--faint);
  background: radial-gradient(circle, currentColor 1.1px, transparent 1.4px) 4px 4px / 6px 6px; }
.dy-grip:hover { color: var(--muted); background-color: var(--surface-2); }
.dy-grid.is-moving, .dy-grid.is-moving * { cursor: grabbing !important; user-select: none; }
.dy-resize { position: absolute; top: 12px; right: -8px; bottom: 12px; width: 14px; cursor: ew-resize; z-index: 2; }
.dy-resize::after { content: ''; position: absolute; top: 50%; right: 6px; width: 3px; height: 36px; margin-top: -18px;
  border-radius: 2px; background: var(--separator); opacity: 0; transition: opacity 0.15s; }
.dy-box:hover > .dy-resize::after, .dy-grid.is-resizing .dy-resize::after { opacity: 1; }
.dy-grid.is-resizing, .dy-grid.is-resizing * { cursor: ew-resize !important; user-select: none; }
.dy-chart { position: relative; padding: 10px 10px 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(--muted); stroke-width: 1; opacity: 0.5; }
.dy-svg .dy-axis { font-size: 10px; fill: var(--muted); }
.dy-svg .dy-val { font-size: 10px; font-weight: 650; }
.dy-svg .dy-line { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.dy-svg .dy-dot { fill: var(--surface); stroke-width: 2; }
.dy-svg .dy-guide { stroke: var(--muted); stroke-dasharray: 3 3; }
.dy-svg .dy-sel { fill: var(--brand); fill-opacity: 0.25; }
.dy-tip { position: absolute; top: 10px; z-index: 2; min-width: 190px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-pop); 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 { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.dy-tip-date { margin-bottom: 2px; font-weight: 750; color: var(--muted); }
.dy-tip-sum { margin-top: 3px; padding-top: 3px !important; border-top: 1px solid var(--separator); font-weight: 650; }
.dy-delta { margin-top: 2px; color: var(--muted); }
.dy-delta.up { color: var(--ok); }
.dy-delta.down { color: var(--err); }
.dy-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 4px 18px 14px; font-size: 12px; color: var(--muted); }
.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: 1279px) {
  .rpt-ov { grid-template-columns: minmax(0, 1fr); }
  .rpt-ov-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .dy-grid { grid-template-columns: minmax(0, 1fr); }
  .dy-grip, .dy-resize, .dy-hint-desk { display: none; }
}

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

@media print {
  .topbar, .tabbar, .sidebar, .filter-row, .flash,
  .page-header-actions, .search-bar, .checkbox-col,
  .sh-kpis, .sh-selection, .sh-row-actions, .sh-actions-col, .pr-net-opt,
  #inventory-print-btn, #profit-print-btn, #sales-history-print-btn {
    display: none !important;
  }
  /* Paper is always light and has no sidebar column (body pads for it on screen ≥900px). */
  :root { color-scheme: light; }
  body { padding: 0 !important; background: #fff; color: #17171A; }
  .content { max-width: 100%; margin: 0; padding: 0; }
  /* As before the redesign: the report's filter summary heads the paper, not the h1. */
  .page-header:not(.page-header-section) h1 { display: none; }
  html { background: #fff; }
  /* Lists framed to the window on screen (core.js applyScrollFrames) print whole. */
  .card-list, .table-wrap { max-height: none !important; overflow: visible !important; }
  .data-table tfoot td { position: static; }
  .table-wrap { box-shadow: none; border-radius: 0; border: 0; overflow: visible; }
  .data-table { font-size: 11px; }
  .data-table th, .data-table td { padding: 6px 8px; }
  /* Satış tarixçəsi: the paper carries whole notes, not the screen's one-line cut. */
  .sh-table .sh-c-notes { max-width: none; white-space: normal; overflow: visible; }
  /* Report rows: no photos on paper, and a head that repeats per page instead of sticking. */
  .rp-thumb { display: none !important; }
  .rp-sticky thead th { position: static; }
  .rp-prod .sh-product-name, .rp-prod .sh-product-sku { display: inline; }
  .rp-prod .sh-product-sku { margin-left: 6px; font-size: inherit; }
  .rp-prod-text { white-space: nowrap; }
  /* Mənfəət hesabatı: one line per sale on paper, as before. */
  .pr-table .sh-product-name, .pr-table .sh-product-sku, .pr-table .pr-margin { display: inline; }
  .pr-table .sh-product-sku, .pr-table .pr-margin { margin-left: 6px; font-size: inherit; }
  .pr-table .sh-c-product, .pr-table .sh-c-customer, .pr-table .sh-c-notes { max-width: none; white-space: nowrap; }
  .pr-table .sh-c-notes { font-size: inherit; }
  .bs-bar { display: none; }
  .sh-table .sh-c-product { max-width: none; }
}

/* 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(--surface);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); border-radius: var(--radius-sm); transition: none !important;
}

/* ====== Order › Məhsul etiketləri (v4.18; the label-modal layout, product-labels.js) ====== */
.label-own-preview .pl { flex: none; box-shadow: var(--shadow); }

.plabel-parts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 12px 0 14px; }
/* Tighter pills, so the seven fit one line in the shared Etiket-modal width. */
.plabel-parts .checkbox-filter { padding: 7px 6px; gap: 4px; }
/* Şəkil (v6.2): an icon instead of a word. */
.plabel-part-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.plabel-date {
  padding: 6px 6px;
  border: 1px solid var(--separator);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.plabel-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 2px;
}
.plabel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--separator);
  border-radius: var(--radius-sm);
}
.plabel-row.is-focus { border-color: var(--primary); }
.plabel-row.is-off { opacity: 0.55; }
.plabel-on { flex: none; width: 18px; height: 18px; margin: 0; }
.plabel-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.plabel-name {
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--separator);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 2px 0;
}
.plabel-name:focus { outline: none; border-bottom-color: var(--primary); }
.plabel-row-meta { font-size: 12px; color: var(--muted); }
.plabel-row-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.plabel-colors { display: flex; gap: 6px; }
.plabel-color {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--separator);
  cursor: pointer;
}
.plabel-color.active { box-shadow: 0 0 0 2px var(--primary); }
.plabel-qr { display: none; max-width: 100%; font: inherit; font-size: 13px; }
.plabel-rows.show-qr .plabel-qr { display: block; }
.plabel-count {
  flex: none;
  width: 64px;
  padding: 6px 8px;
  border: 1px solid var(--separator);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  text-align: center;
}
.plabel-qr-hint { text-align: left; }
.label-slot.is-skipped { background: color-mix(in srgb, var(--muted) 10%, var(--surface)); }

/* 768–899px: an upright iPad on the icon rail — the narrowest desktop; two-column blocks stack. */
@media (min-width: 768px) and (max-width: 899px) {
  .vat-desk { grid-template-columns: minmax(0, 1fr); }
  .vat-side { grid-template-columns: minmax(0, 1fr); }
  .rpt-two, .rpt-ov-side { grid-template-columns: minmax(0, 1fr); }
}

/* ====== ⌘K search (core.js) ====== */
.sidebar-top { display: flex; align-items: center; padding-right: 14px; }
.sidebar-top .sidebar-brand { flex: 1; min-width: 0; padding-right: 8px; }
/* The logo row pads 6px more on top (22 / 16): the same offset centres the 🔍 on the logo. */
.sidebar-search { flex-shrink: 0; margin-top: 6px; }
@media (min-width: 768px) and (max-width: 1279px) {
  .sidebar-top { padding-right: 0; }
  .sidebar-top .sidebar-brand { padding-right: 0; }
  .sidebar-search { display: none; }
}
.cmdk-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 16px 16px;
  background: rgba(17, 17, 18, 0.32);
  animation: modal-fade 0.12s ease;
}
.cmdk-backdrop[hidden] { display: none; }
.cmdk {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 620px;
  max-height: min(70vh, 560px);
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}
.cmdk-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
}
.cmdk-list:not(:empty) { border-top: 1px solid var(--line); }
.cmdk-head > svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--muted); }
.cmdk-input {
  flex: 1;
  min-width: 0;
  height: 54px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 17px;
  color: var(--text);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.cmdk-input::-webkit-search-cancel-button { display: none; }
.cmdk-esc {
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font: inherit;
  font-size: 11.5px;
  color: var(--faint);
  cursor: pointer;
}
.cmdk-list { overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.cmdk-list:empty { display: none; }
.cmdk-section {
  padding: 10px 10px 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--faint);
}
.cmdk-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--text);
  text-decoration: none;
}
.cmdk-item.active { background: var(--brand-soft); }
.cmdk-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
}
.cmdk-icon:empty { display: none; }
.cmdk-icon svg { width: 17px; height: 17px; }
.cmdk-icon img { width: 20px; height: 20px; border-radius: 5px; object-fit: contain; background: var(--logo-bg); }
.cmdk-body { display: flex; flex-direction: column; min-width: 0; }
.cmdk-title, .cmdk-sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cmdk-title { font-size: 14.5px; font-weight: 550; line-height: 20px; }
.cmdk-sub { font-size: 12.5px; line-height: 17px; color: var(--muted); }
.cmdk-sub b { font-weight: 600; color: var(--text); }
.cmdk-all .cmdk-title { font-size: 13px; font-weight: 500; color: var(--muted); }
.cmdk-empty { padding: 22px 12px; text-align: center; font-size: 14px; color: var(--muted); }
@media (max-width: 767px) {
  .cmdk-backdrop { padding: max(10px, env(safe-area-inset-top)) 10px 10px; }
  .cmdk { max-height: 72dvh; }
}

/* ====== Tabs (tabs.php, assets/js/pages/tabs.js) ======
   The window: sidebar + a strip of tabs + the active tab's page in an iframe. Inside a tab the page
   drops its own sidebar (html.in-tab). Inactive tabs stay laid out at full size (visibility, not
   display:none) so a page behind never sees a zero-width window and flips to the phone layout. */
html.in-tab { --sidebar-w: 0px; }
html.in-tab .sidebar, html.in-tab .tabbar { display: none !important; }

html.tabs-shell { --tabs-h: 46px; }
html.tabs-shell.tabs-single { --tabs-h: 0px; }
.tabs-single .tabs-bar { display: none; }
html.tabs-shell, html.tabs-shell body { height: 100%; overflow: hidden; }
.tabs-shell .page-layout, .tabs-shell .topbar { display: none !important; }
.tabs-bar {
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  right: 0;
  z-index: 24;
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--tabs-h);
  padding: 0 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.tabs-strip {
  display: flex;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs-strip::-webkit-scrollbar { display: none; }
.tabs-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  width: 200px;
  min-width: 104px;
  height: 32px;
  padding: 0 5px 0 12px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
.tabs-tab:hover { background: var(--surface-2); color: var(--text); }
.tabs-tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
.tabs-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tabs-tab-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tabs-tab-spin { display: none; flex-shrink: 0; width: 11px; height: 11px; border: 2px solid var(--line-strong); border-top-color: var(--text); border-radius: 50%; animation: tabs-spin 0.8s linear infinite; }
.tabs-tab.is-loading .tabs-tab-spin { display: block; }
@keyframes tabs-spin { to { transform: rotate(360deg); } }
.tabs-tab-close, .tabs-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--faint);
  cursor: pointer;
}
.tabs-tab-close { width: 22px; height: 22px; border-radius: 6px; opacity: 0; }
.tabs-tab:hover .tabs-tab-close, .tabs-tab.active .tabs-tab-close { opacity: 1; }
.tabs-tab-close:hover { background: var(--surface-3); color: var(--text); }
.tabs-tab-close svg { width: 14px; height: 14px; }
.tabs-add { width: 30px; height: 30px; border-radius: 8px; color: var(--muted); }
.tabs-add:hover { background: var(--surface-2); color: var(--text); }
.tabs-add svg { width: 18px; height: 18px; }
.tabs-frames { position: fixed; top: var(--tabs-h); left: var(--sidebar-w); right: 0; bottom: 0; }
.tabs-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--bg); visibility: hidden; }
.tabs-frame.is-active { visibility: visible; }
/* A window dragged below 768px: no sidebar, so the window's own phone tab bar moves the active tab. */
@media (max-width: 767px) {
  .tabs-bar, .tabs-frames { left: 0; }
  .tabs-frames { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  .rpt-donut-wrap { grid-template-columns: 1fr; justify-items: center; }
  .rpt-donut-wrap .rpt-leg { width: 100%; }
}
/* Mənfəət: a month's head opens it day by day; Xərclər / Kateqoriyalar: amounts and names are links. */
.rpt-mon { padding: 2px 6px; margin: -2px -6px; border: 0; border-radius: 6px; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.rpt-mon:hover { background: var(--surface-2); color: var(--info); }
.rpt-mon[aria-expanded="true"] { background: var(--info); color: #fff; }
.rpt-pl:has(.rpt-mon) tbody td:not(:first-child) { cursor: pointer; }
.rpt-day-head { display: inline-flex; align-items: center; gap: 12px; }
.rpt-day-chips { padding: 0 18px 14px; }
.rpt-day-chips .rpt-pie-dot { width: 8px; height: 8px; margin-right: 6px; }
.rpt-cell-link { color: inherit; text-decoration: none; }
.rpt-cell-link:hover { color: var(--info); text-decoration: underline; }
.rpt-share-name a { color: inherit; text-decoration: none; }
.rpt-share-name a:hover { color: var(--info); text-decoration: underline; }
.rpt-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: rpt-bar-up 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes rpt-bar-up { from { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) { .rpt-bar { animation: none; } }
/* Dinamika › own charts: the head's pencil, + Qrafik, the pick list in its window. */
.dy-add { margin-left: auto; }
.dy-edit { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: auto; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--faint); cursor: pointer; }
.dy-edit svg { width: 15px; height: 15px; }
.dy-edit:hover { color: var(--text); background: var(--surface-2); }
.dy-pick { margin: 14px 0 0; padding: 0; border: 0; }
.dy-pick legend { margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.dy-pick label { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 14px; cursor: pointer; }
.dy-pick input { width: 17px; height: 17px; margin: 0; accent-color: var(--brand); }
#dy-form .form-actions { margin-top: 16px; }
@media (min-width: 560px) { .dy-pick { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; } .dy-pick legend { grid-column: 1 / -1; } }

/* Sayt (sales_channel_website.php) */

/* ====== Ayarlar › Görünüş (v8.3: appearance.php, appearance_menu.php, appearance.js) ====== */
.ap-swatches { display: flex; flex-wrap: wrap; gap: 6px 4px; }
.ap-swatch { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 62px; padding: 6px 0; border-radius: 10px; cursor: pointer; }
.ap-swatch:hover { background: var(--surface-2); }
.ap-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.ap-swatch-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.ap-swatch input:checked + .ap-swatch-dot { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--sw); }
.ap-swatch input:focus-visible + .ap-swatch-dot { outline: 2px solid var(--text); outline-offset: 4px; }
.ap-swatch-label { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.ap-swatch input:checked ~ .ap-swatch-label { color: var(--text); }
.ap-seg { cursor: pointer; }
.ap-seg-input { position: absolute; opacity: 0; pointer-events: none; }
.ap-keys { font-size: 13px; color: var(--muted); line-height: 2; }
.ap-keys kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface-2); font: 600 12px/18px inherit; color: var(--text); text-align: center; }
.ap-check { display: flex; align-items: center; }
.ap-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand-strong); }
.ap-note { margin: -4px 20px 12px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.ap-empty { display: block; color: var(--muted); font-size: 13px; }
.ap-list { margin: 0 16px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.ap-item { min-height: 44px; gap: 10px; background: var(--surface); }
.ap-item-icon { display: flex; color: var(--muted); }
.ap-item-icon svg, .ap-item-icon img { width: 18px; height: 18px; }
.ap-item-icon img { border-radius: 5px; object-fit: contain; background: var(--logo-bg); }
.ap-item-label { flex: 1; min-width: 0; font-size: 14px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-item.is-off .ap-item-icon, .ap-item.is-off .ap-item-label { opacity: 0.45; }
.ap-unstar svg { width: 15px; height: 15px; }
.ap-eye { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.ap-eye input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand-strong); }
.ap-groups { padding: 0 0 4px; }
.ap-group { background: var(--surface); }
.ap-group-head { display: flex; align-items: center; gap: 6px; padding: 4px 16px 6px 14px; }
.ap-group-head h3 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); }
.ap-group.is-dragging .ap-list { box-shadow: var(--shadow-pop); }

/* Sayt › Statistika (site_stats.php, 2026-11-13): reuses .sh-kpi, .home-card, .home-bar, .bs-bar. */
.sh-kpis.sst-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sst-card { margin-bottom: 18px; }
.sst-bars { height: 160px; }
.sst-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sst-list { margin: 0; padding: 0; list-style: none; }
.sst-list li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.sst-list li:first-child { border-top: 0; }
.sst-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.sst-pct { min-width: 42px; text-align: right; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sst-search li b { min-width: 28px; text-align: right; font-variant-numeric: tabular-nums; }
.sst-search .sst-name:hover { text-decoration: underline; }
.sst-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.sst-empty { margin: 0; font-size: 14px; color: var(--muted); }
.sst-flag { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); font-size: 11.5px; font-weight: 650; color: var(--muted); white-space: nowrap; vertical-align: 1px; }
.sst-flag-err { background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err); }
.sst-table a.sh-product-name { color: var(--text); }
.sst-table a.sh-product-name:hover { text-decoration: underline; }