/* ==========================================================================
   Karina (fa) — stock, orders & accounts dashboard, right to left
   Sticky sidebar + hash-routed views. Light / dark / system themes and four
   accent ramps, all driven by the custom properties below.
   Type is Yekan Bakh (assets/css/fonts.css), set a step smaller than the
   English build because its Persian glyphs run large. Charts keep a
   left-to-right time axis; everything else is mirrored.
   ========================================================================== */

/* ---------- Tokens: light ---------- */
:root {
    color-scheme: light;

    --backdrop: #e9e6dd;
    --app-1: #f7f5ef;
    --app-2: #f3f1ea;
    --app-3: var(--t-100);
    --card: rgba(255, 254, 250, .72);
    --card-2: #efede6;
    --solid: #fbfaf6;
    --well: #efede6;
    --edge: rgba(255, 255, 255, .9);
    --hair: rgba(31, 31, 36, .09);
    --hair-2: rgba(31, 31, 36, .16);
    --ink: #1f1f24;
    --muted: #53514d;
    --night: #1f1f24;
    --night-2: #34343c;
    --night-ink: #f4f3ee;
    --night-dim: #a6a6b0;
    --grey: #c9c6bd;

    /* accent ramp: amber */
    --t-100: #fdf3d6;
    --t-200: #fbe4a6;
    --t-300: #f8d475;
    --t-400: #f4c24a;
    --t-500: #e3a81f;
    --t-600: #c58d10;
    --t-700: #9d6f0c;
    --t-800: #7a560a;
    --t-900: #553b06;
    --acc: var(--t-400);
    --acc-ink: #1f1f24;
    --acc-soft: var(--t-200);
    --acc-text: #86600a;
    --glow: rgba(244, 194, 74, .45);

    --side: rgba(255, 254, 250, .55);
    --side-ink: var(--ink);
    --side-muted: var(--muted);
    --side-hair: var(--hair);
    --side-hover: rgba(31, 31, 36, .05);
    --side-active: var(--night);
    --side-active-ink: var(--night-ink);
    --side-active-icon: var(--acc);
    --side-field: rgba(255, 255, 255, .6);
    --side-panel: var(--t-200);
    --side-track: rgba(31, 31, 36, .12);
    --badge-warn: #f3a061;

    --good: #25693e;
    --good-bg: #e1f1e4;
    --warn: #a4500f;
    --warn-bg: #fce3d0;
    --bad: #b9392f;
    --bad-bg: #fbe3df;
    --info: var(--acc-text);
    --info-bg: var(--t-100);
    --neutral: #5d5b5a;
    --neutral-bg: #efede6;

    --grid: var(--hair);
    --axis: var(--muted);
    --prev: #dcd9d0;
    --heat-lo: var(--well);
    --heat-hi: var(--t-700);
    --stage-1: var(--t-400);
    --stage-2: var(--t-600);
    --stage-3: var(--night-2);
    --stage-4: var(--night);
    --area-alpha: .38;

    --font: "YekanBakh", Tahoma, "Segoe UI", system-ui, sans-serif;
    --display: var(--font);

    /* Persian type scale. Yekan Bakh runs large, so steps are close together and nothing
     goes under 12px; hierarchy comes from weight as much as from size. */
    --fs-xs: 12px; /* meta: table headings, pills, chart labels, badges */
    --fs-sm: 12.5px; /* captions: card subtitles, notes, small print */
    --fs-md: 13.5px; /* controls and secondary text: buttons, chips, tables */
    --fs-base: 14px; /* body */
    --fs-lg: 15.5px; /* card titles */
    --fs-xl: 17px; /* plan names, short headings */
    --fs-2xl: 19px; /* panel and product headings */
    --lh-tight: 1.4; /* headings */
    --lh-ui: 1.6; /* controls and short lines */
    --lh-text: 1.9; /* running text */
    --r-card: 24px;
    --r-md: 12px;
    --r-sm: 9px;
    --gap: 16px;
    --pad: 20px;
    --shadow: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 18px 40px -26px rgba(40, 36, 70, .35);
    --focus: 0 0 0 2px var(--solid), 0 0 0 4px var(--ink);
    --flip: .22s;
}

:root[data-accent="sky"] {
    --t-100: #e6f1fc;
    --t-200: #cfe3f9;
    --t-300: #b7d6f6;
    --t-400: #9fc9f3;
    --t-500: #74ade8;
    --t-600: #4e8fd0;
    --t-700: #3572b0;
    --t-800: #28588a;
    --t-900: #1b3f63;
    --acc-text: #1f5f9a;
    --glow: rgba(159, 201, 243, .5);
}

:root[data-accent="seaglass"] {
    --t-100: #e2f7f2;
    --t-200: #c3eee4;
    --t-300: #a6e7d9;
    --t-400: #8fe0cf;
    --t-500: #5fcbb6;
    --t-600: #34ad97;
    --t-700: #1f8a78;
    --t-800: #176a5d;
    --t-900: #104c43;
    --acc-text: var(--t-800);
    --glow: rgba(143, 224, 207, .5);
}

:root[data-accent="blush"] {
    --t-100: #fde8ef;
    --t-200: #fbd3df;
    --t-300: #f9c1d3;
    --t-400: #f7b1c9;
    --t-500: #ee8fb0;
    --t-600: #d9699a;
    --t-700: #b7467a;
    --t-800: #8f3160;
    --t-900: #672246;
    --acc-text: var(--t-700);
    --glow: rgba(247, 177, 201, .5);
}

/* ---------- Tokens: dark (forced and system) ---------- */
:root[data-theme="dark"] {
    color-scheme: dark;
    --backdrop: #121215;
    --app-1: #1a1a1f;
    --app-2: #17171b;
    --app-3: #1d1d2c;
    --card: rgba(255, 255, 255, .05);
    --card-2: rgba(255, 255, 255, .07);
    --solid: #202026;
    --well: rgba(255, 255, 255, .07);
    --edge: rgba(255, 255, 255, .08);
    --hair: rgba(255, 255, 255, .1);
    --hair-2: rgba(255, 255, 255, .18);
    --ink: #f1f0ea;
    --muted: #bdbab2;
    --night: #f1f0ea;
    --night-2: #cfcdc5;
    --night-ink: #1f1f24;
    --night-dim: #6f6e68;
    --grey: #4a4a52;
    --acc-text: var(--t-300);
    --acc-soft: color-mix(in srgb, var(--t-400) 18%, transparent);
    --glow: color-mix(in srgb, var(--t-400) 16%, transparent);
    --side: rgba(255, 255, 255, .03);
    --side-hover: rgba(255, 255, 255, .06);
    --side-active-icon: var(--t-700);
    --side-field: rgba(255, 255, 255, .06);
    --side-panel: color-mix(in srgb, var(--t-400) 16%, transparent);
    --side-track: rgba(255, 255, 255, .12);
    --badge-warn: #f28c4a;
    --good: #7fd49c;
    --good-bg: rgba(127, 212, 156, .14);
    --warn: #f28c4a;
    --warn-bg: rgba(242, 140, 74, .16);
    --bad: #f29b92;
    --bad-bg: rgba(242, 155, 146, .14);
    --info: var(--t-300);
    --info-bg: color-mix(in srgb, var(--t-400) 16%, transparent);
    --neutral: #b0aea7;
    --neutral-bg: rgba(255, 255, 255, .08);
    --prev: rgba(255, 255, 255, .14);
    --heat-lo: rgba(255, 255, 255, .06);
    --heat-hi: var(--t-300);
    --stage-1: var(--t-200);
    --stage-2: var(--t-400);
    --stage-3: var(--t-600);
    --stage-4: var(--night);
    --area-alpha: .22;
    --shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 18px 40px -26px rgba(0, 0, 0, .7);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --backdrop: #121215;
        --app-1: #1a1a1f;
        --app-2: #17171b;
        --app-3: #1d1d2c;
        --card: rgba(255, 255, 255, .05);
        --card-2: rgba(255, 255, 255, .07);
        --solid: #202026;
        --well: rgba(255, 255, 255, .07);
        --edge: rgba(255, 255, 255, .08);
        --hair: rgba(255, 255, 255, .1);
        --hair-2: rgba(255, 255, 255, .18);
        --ink: #f1f0ea;
        --muted: #bdbab2;
        --night: #f1f0ea;
        --night-2: #cfcdc5;
        --night-ink: #1f1f24;
        --night-dim: #6f6e68;
        --grey: #4a4a52;
        --acc-text: var(--t-300);
        --acc-soft: color-mix(in srgb, var(--t-400) 18%, transparent);
        --glow: color-mix(in srgb, var(--t-400) 16%, transparent);
        --side: rgba(255, 255, 255, .03);
        --side-hover: rgba(255, 255, 255, .06);
        --side-active-icon: var(--t-700);
        --side-field: rgba(255, 255, 255, .06);
        --side-panel: color-mix(in srgb, var(--t-400) 16%, transparent);
        --side-track: rgba(255, 255, 255, .12);
        --badge-warn: #f28c4a;
        --good: #7fd49c;
        --good-bg: rgba(127, 212, 156, .14);
        --warn: #f28c4a;
        --warn-bg: rgba(242, 140, 74, .16);
        --bad: #f29b92;
        --bad-bg: rgba(242, 155, 146, .14);
        --info: var(--t-300);
        --info-bg: color-mix(in srgb, var(--t-400) 16%, transparent);
        --neutral: #b0aea7;
        --neutral-bg: rgba(255, 255, 255, .08);
        --prev: rgba(255, 255, 255, .14);
        --heat-lo: rgba(255, 255, 255, .06);
        --heat-hi: var(--t-300);
        --stage-1: var(--t-200);
        --stage-2: var(--t-400);
        --stage-3: var(--t-600);
        --stage-4: var(--night);
        --area-alpha: .22;
        --shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 18px 40px -26px rgba(0, 0, 0, .7);
    }
}

/* ---------- Base ---------- */
*, ::before, ::after {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    background: var(--backdrop);
}

html.is-locked {
    overflow: hidden;
}

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--backdrop);
    color: var(--ink);
    font: 400 var(--fs-base)/var(--lh-ui) var(--font);
    -webkit-font-smoothing: antialiased;
    transition: background-color var(--flip), color var(--flip);
}

h1, h2, h3, p, ul, ol, dl, dd, figure {
    margin: 0;
}

ul, ol {
    padding: 0;
    list-style: none;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}

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

b, strong {
    font-weight: 600;
}

.d-none {
    display: none !important;
}

.mb-3 {
    margin-bottom: 16px;
}

.mb-1 {
    margin-bottom: 8px;
}

.mb-2 {
    margin-bottom: 4px;
}

.mt-3 {
    margin-top: 16px;
}

.mt-2 {
    margin-top: 8px;
}

.mt-1 {
    margin-top: 4px;
}

small {
    font-size: var(--fs-sm);
}

svg {
    flex: none;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

time {
    font-variant-numeric: tabular-nums;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

.sidebar :where(a, button, input):focus-visible {
    box-shadow: 0 0 0 3px var(--side), 0 0 0 5px var(--acc);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* the hidden <svg> icon sprite at the top of each page */
.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* a helper element that must exist in the page but never be seen (clipboard fallback, PDF render host) */
.offscreen {
    position: fixed;
    inset: 0 auto auto -20000px;
    opacity: 0;
    pointer-events: none;
}

/* karina-pdf.js lays the invoice sheet out here at A4 width (794 CSS px) before drawing it */
.pdf-host {
    width: 794px;
    background: #fff;
}

.skip {
    position: fixed;
    top: 12px;
    right: 16px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: var(--r-md);
    background: var(--acc);
    color: var(--acc-ink);
    transform: translateY(-160%);
}

.skip:focus {
    transform: none;
}

.muted {
    color: var(--muted);
}

.small {
    font-size: var(--fs-sm);
}

.num {
    text-align: end;
}

button, a, .chip, .nav__link {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* hide everything that animates in until the first intro has been set up */
html.js:not(.ready) .app {
    opacity: 0;
}

/* ---------- Frame ---------- */
.app {
    display: grid;
    grid-template-columns: clamp(248px, 15vw, 300px) minmax(0, 1fr);
    min-height: 100dvh;
    background: radial-gradient(70% 55% at 0% 0%, var(--glow), transparent 70%),
    radial-gradient(45% 40% at 100% 100%, var(--glow), transparent 70%),
    linear-gradient(200deg, var(--app-1), var(--app-2) 55%, var(--app-3));
}

.main {
    min-width: 0;
    padding: clamp(18px, 1.8vw, 36px) clamp(20px, 2.2vw, 44px) 48px;
    outline: none;
}

.view {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

/* ---------- Sidebar ---------- */
.sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    padding: 18px 14px 16px;
    background: var(--side);
    color: var(--side-ink);
    border-left: 1px solid var(--side-hair);
    overscroll-behavior: contain;
    transition: background-color var(--flip), border-color var(--flip);
}

.sidebar__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px 0 6px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.brand__mark {
    width: 30px;
    height: 30px;
    color: var(--t-500);
    stroke-width: 1.8;
}

.brand__name {
    font: 800 20px/1.3 var(--display);
}

/* the gallery logo (Settings → ظاهر) replaces the mark; a long gallery name wraps to two lines at most */
.brand {
    flex: 1 1 auto;
    min-width: 0;
}

.brand__name {
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
}

.brand__logo {
    flex: none;
    width: auto;
    max-width: 64px;
    height: 32px;
    object-fit: contain;
    border-radius: 8px;
}

.brand:has(.brand__logo) {
    gap: 8px;
}

.brand:has(.brand__logo) .brand__name {
    font-size: 14px;
    line-height: 1.4;
}

.auth__brand:has(.brand__logo) .brand__name {
    font-size: var(--fs-xl, 18px);
}

.sidebar__top {
    gap: 8px;
}

.sidebar__tools {
    flex: none;
}

.icon-btn.sidebar__close {
    display: none;
}

.sidebar__tools {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* light/dark switch beside the logo */
.mode {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 60px;
    height: 32px;
    padding: 2px;
    border-radius: 999px;
    background: var(--well);
    border: 1px solid var(--hair-2);
    transition: background-color .3s, border-color .3s;
}

.mode:hover {
    border-color: color-mix(in srgb, var(--ink) 30%, transparent);
}

.mode__knob {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--solid);
    box-shadow: 0 1px 2px rgba(20, 18, 12, .14), 0 3px 8px rgba(20, 18, 12, .1);
}

.mode[aria-checked="true"] .mode__knob {
    transform: translateX(-26px);
    background: color-mix(in srgb, var(--ink) 22%, var(--solid));
}

.mode__knob {
    transition: background-color .3s;
}

.mode__icon {
    position: relative;
    width: 26px;
    height: 26px;
    padding: 6px;
    color: var(--muted);
    stroke-width: 2;
    transition: color .3s;
}

.mode[aria-checked="false"] .mode__icon--sun {
    color: var(--t-600);
}

.mode[aria-checked="true"] .mode__icon--moon {
    color: var(--ink);
}

/* the theme change itself is a circle that grows out of the switch */
::view-transition-old(root), ::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

.search {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    margin: 18px 4px 6px;
    border-radius: var(--r-md);
    background: var(--side-field);
    border: 1px solid var(--side-hair);
}

.search__icon {
    position: absolute;
    right: 11px;
    width: 18px;
    height: 18px;
    color: var(--side-muted);
    pointer-events: none;
}

.search input {
    font-size: 12px;
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 38px 0 52px;
    color: var(--side-ink);
    background: none;
    border: 0;
    border-radius: inherit;
}

.search input::placeholder {
    color: var(--side-muted);
}

.search input::-webkit-search-cancel-button {
    display: none;
}

.search__kbd {
    position: absolute;
    left: 8px;
    direction: ltr;
    padding: 2px 6px;
    font: 500 var(--fs-xs)/1.4 var(--font);
    color: var(--side-muted);
    border: 1px solid var(--side-hair);
    border-radius: 6px;
}

.search__results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 380px;
    overflow: auto;
    padding: 6px;
    background: var(--solid);
    border: 1px solid var(--hair);
    border-radius: 14px;
    box-shadow: 0 20px 50px -20px rgba(31, 31, 36, .35);
    transform-origin: 50% 0;
}

.search__group {
    padding: 8px 10px 4px;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--muted);
}

.search__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    text-align: start;
    font-size: var(--fs-md);
}

.search__item small {
    margin-inline-start: auto;
    color: var(--muted);
    font-size: var(--fs-xs);
}

.search__item:hover, .search__item[aria-selected="true"] {
    background: var(--well);
}

.search__empty {
    padding: 12px 10px;
    color: var(--muted);
    font-size: var(--fs-sm);
}

.sidebar__navs {
    position: relative;
    flex: 1;
    overflow-y: auto;
    padding: 10px 0 8px;
    scrollbar-width: thin;
    overscroll-behavior: contain;
}

.nav + .nav {
    margin-top: 14px;
}

.nav__label {
    padding: 0 12px 6px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--side-muted);
}

.nav ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav__link {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--r-md);
    color: var(--side-ink);
    font-weight: 500;
    transition: color .3s;
}

.nav__link svg {
    width: 19px;
    height: 19px;
    color: var(--side-muted);
    transition: color .3s;
}

.nav__link:hover {
    background: var(--side-hover);
}

.nav__link[aria-current="page"] {
    color: var(--side-active-ink);
    font-weight: 700;
    background: none;
}

.nav__link[aria-current="page"] svg {
    color: var(--side-active-icon);
}

.nav__rail {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    border-radius: var(--r-md);
    background: var(--side-active);
    opacity: 0;
    pointer-events: none;
}

.nav__badge {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 20px;
    margin-inline-start: auto;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--acc);
    color: #1f1f24;
    font-size: var(--fs-xs);
    font-weight: 600;
}

.nav__badge--warn {
    background: var(--badge-warn);
}

.sidebar__foot {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--side-hair);
}

.plan {
    padding: 12px 12px 10px;
    border-radius: 14px;
    background: var(--side-panel);
    border: 1px solid var(--edge);
}

.plan__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.plan__name {
    font-size: var(--fs-md);
    font-weight: 600;
}

.plan__link {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--acc-text);
}

.plan__link:hover {
    text-decoration: underline;
}

.plan__track {
    display: block;
    height: 5px;
    margin: 10px 0 8px;
    border-radius: 3px;
    background: var(--side-track);
    overflow: hidden;
}

.plan__fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--acc-text);
    transform-origin: 100% 50%;
    transform: scaleX(0);
}

.plan__note {
    font-size: var(--fs-xs);
    color: var(--side-muted);
}

.plan__note b {
    color: var(--side-ink);
}

.me {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 10px;
    border-radius: 12px;
}

.me:hover {
    background: var(--side-hover);
}

.me__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.5;
}

.me__name {
    font-size: var(--fs-md);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.me__role {
    font-size: var(--fs-xs);
    color: var(--side-muted);
}

.me__chev {
    width: 18px;
    height: 18px;
    margin-inline-start: auto;
    color: var(--side-muted);
}

.scrim {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(31, 31, 36, .5);
}

/* ---------- Page header ---------- */
.page {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    padding: 4px 0 6px;
}

.icon-btn.page__menu {
    display: none;
}

.page__text {
    flex: 1 1 320px;
    min-width: 0;
}

.page__title {
    font: 800 clamp(24px, 1.95vw, 30px)/1.45 var(--display);
    outline: none;
}

.page__title:focus-visible {
    box-shadow: none;
}

.page__title .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-block: .1em .3em;
    margin-block: -.1em -.3em;
}

.page__title .ch {
    display: inline-block;
}

.page__sub {
    margin-top: 6px;
    max-width: 62ch;
    color: var(--muted);
}

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

/* ---------- Cards ---------- */
.card {
    position: relative;
    min-width: 0;
    padding: var(--pad);
    border-radius: var(--r-card);
    background: var(--card);
    border: 1px solid var(--edge);
    box-shadow: var(--shadow);
    transition: background-color var(--flip), border-color var(--flip);
}

.card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.card__title {
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: var(--lh-tight);
}

.card__sub {
    margin-top: 2px;
    font-size: var(--fs-sm);
    color: var(--muted);
}

.card__foot {
    margin-top: 14px;
    font-size: var(--fs-sm);
    color: var(--muted);
}

.card__foot--actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--hair);
}

.card--table, .card--list {
    padding: 8px 0 0;
}

.card--table .card__head, .card--list .card__head {
    padding: 12px var(--pad) 0;
}

.card--table .empty, .card--list .empty {
    margin: 0;
    padding: 20px;
}

.card--wide {
    grid-column: 1 / -1;
}

.link {
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--acc-text);
    white-space: nowrap;
}

.link:hover {
    text-decoration: underline;
}

.empty {
    padding: 28px 20px;
    text-align: center;
    color: var(--muted);
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    font-size: var(--fs-md);
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .2s, color .2s, border-color .2s;
}

.btn svg {
    width: 18px;
    height: 18px;
}

.btn--primary {
    background: var(--night);
    color: var(--night-ink);
}

.btn--primary:hover {
    background: var(--night-2);
}

.btn--ghost {
    background: var(--solid);
    color: var(--ink);
    border-color: var(--hair-2);
}

.btn--ghost:hover {
    background: var(--well);
}

.btn--soft {
    background: var(--acc-soft);
    color: var(--acc-text);
}

.btn--soft:hover {
    background: var(--acc);
    color: var(--acc-ink);
}

.btn--danger {
    background: var(--bad-bg);
    color: var(--bad);
}

.btn--sm {
    height: 32px;
    padding: 0 12px;
    font-size: var(--fs-sm);
}

.btn--block {
    width: 100%;
}

.btn[disabled] {
    opacity: .55;
    cursor: default;
}

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    color: var(--muted);
    transition: background-color .2s, color .2s;
}

.icon-btn:hover {
    background: var(--well);
    color: var(--ink);
}

.icon-btn--round {
    position: relative;
    border-radius: 50%;
    background: var(--solid);
    border: 1px solid var(--hair-2);
    color: var(--ink);
}

.icon-btn--side {
    color: var(--side-muted);
}

.icon-btn--side:hover {
    background: var(--side-hover);
    color: var(--side-ink);
}

.dot {
    position: absolute;
    top: 8px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bad);
    box-shadow: 0 0 0 2px var(--solid);
}

/* ---------- Chips, pills, deltas ---------- */
/* chip faces sit on ::before (layer -2), the shared pill on -1, labels on top */
.chips {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    color: var(--ink);
    font-size: var(--fs-md);
    font-weight: 500;
    transition: color .2s .08s;
}

.chip::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    background: var(--solid);
    border: 1px solid var(--hair-2);
    transition: background-color .25s, border-color .25s;
}

.chip svg {
    width: 16px;
    height: 16px;
    color: var(--muted);
    transition: color .2s .08s;
}

.chip:hover::before {
    background: var(--well);
}

.chip[aria-pressed="true"] {
    color: var(--night-ink);
    transition-delay: .14s;
}

.chip[aria-pressed="true"] svg {
    color: inherit;
    transition-delay: .14s;
}

.chips:not(.has-pill) .chip[aria-pressed="true"]::before {
    background: var(--night);
    border-color: var(--night);
}

.chips__pill {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 0;
    height: 0;
    border-radius: 999px;
    background: var(--night);
    pointer-events: none;
}

.chips--small .chip {
    height: 30px;
    padding: 0 11px;
    font-size: var(--fs-xs);
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 7px 0 9px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
}

.pill i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.pill--sm {
    gap: 4px;
    height: 20px;
    padding: 0 6px 0 7px;
    font-size: 11px;
    vertical-align: middle;
}

.pill--sm i {
    width: 5px;
    height: 5px;
}

.balance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.pill--good {
    color: var(--good);
    background: var(--good-bg);
}

.pill--warn {
    color: var(--warn);
    background: var(--warn-bg);
}

.pill--bad {
    color: var(--bad);
    background: var(--bad-bg);
}

.pill--info {
    color: var(--info);
    background: var(--info-bg);
}

.pill--muted {
    color: var(--neutral);
    background: var(--neutral-bg);
}

.delta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--good);
}

.delta svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.2;
}

.delta b {
    display: inline-block;
}

.delta--down {
    color: var(--bad);
}

.delta--flat {
    color: var(--muted);
}

/* ---------- Segmented control, tabs, switch, select, fields ---------- */
.seg {
    position: relative;
    display: inline-flex;
    max-width: 100%;
    padding: 3px;
    border-radius: var(--r-md);
    background: var(--well);
    border: 1px solid var(--hair);
    overflow-x: auto;
    scrollbar-width: none;
}

.seg::-webkit-scrollbar {
    display: none;
}

.seg__pill {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    width: 100px;
    border-radius: 9px;
    background: var(--night);
    transform-origin: 0 50%;
    pointer-events: none;
}

.seg__btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 13px;
    border-radius: 8px;
    color: var(--muted);
    font-size: var(--fs-md);
    font-weight: 500;
    white-space: nowrap;
    transition: color .3s;
}

.seg__btn:hover {
    color: var(--ink);
}

.seg__btn svg {
    width: 16px;
    height: 16px;
}

.seg__btn[aria-pressed="true"] {
    color: var(--night-ink);
}

.seg--small .seg__btn {
    height: 28px;
    padding: 0 11px;
    font-size: var(--fs-xs);
}

.tabs__list {
    position: relative;
    display: flex;
    gap: 4px;
    margin-bottom: var(--gap);
    border-bottom: 1px solid var(--hair-2);
    overflow-x: auto;
    scrollbar-width: none;
}

.tabs__tab {
    position: relative;
    height: 42px;
    padding: 0 14px;
    border-radius: 8px 8px 0 0;
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
    transition: color .25s, background-color .25s;
}

.tabs__tab:hover {
    color: var(--ink);
    background: var(--well);
}

.tabs__tab[aria-selected="true"] {
    color: var(--ink);
}

.tabs__line {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100px;
    height: 2px;
    background: var(--ink);
    transform-origin: 0 50%;
}

.tabs > [role="tabpanel"] {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.switch {
    position: relative;
    flex: none;
    width: 44px;
    height: 26px;
    border-radius: 13px;
    background: var(--grey);
    transition: background-color .25s;
}

.switch i {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--solid);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}

.switch[aria-checked="true"] {
    background: var(--night);
}

.switch[aria-checked="true"] i {
    transform: translateX(-18px);
}

.switch[disabled] {
    opacity: .5;
    cursor: default;
}

.select {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 40px;
    border-radius: var(--r-md);
    background: var(--solid);
    border: 1px solid var(--hair-2);
}

.select select {
    appearance: none;
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 12px 0 36px;
    background: none;
    border: 0;
    border-radius: inherit;
    cursor: pointer;
}

.select svg {
    position: absolute;
    left: 10px;
    width: 16px;
    height: 16px;
    color: var(--muted);
    pointer-events: none;
}

.select--field {
    width: 100%;
}

.select:focus-within {
    box-shadow: var(--focus);
}

.select select:focus-visible {
    box-shadow: none;
}

.select select option {
    background: var(--solid);
    color: var(--ink);
}

.fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--fs-md);
    font-weight: 500;
}

.field > span:first-child, .field__label {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--muted);
}

.field__label {
    margin: 14px 0 8px;
}

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

.field input {
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--r-md);
    border: 1px solid var(--hair-2);
    background: var(--solid);
    font-weight: 400;
}

.input-prefix {
    position: relative;
    display: flex;
}

.input-prefix i {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    font-style: normal;
    color: var(--muted);
}

.input-prefix input {
    width: 100%;
    padding-inline-start: 58px;
}

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

.toolbar__count {
    margin-inline-start: auto;
    font-size: var(--fs-sm);
    color: var(--muted);
}

.avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--av, #ccc);
    color: #0f1b21;
    font-size: var(--fs-xs);
    font-weight: 700;
}

.avatar--t0 {
    --av: #f1c7a3;
}

.avatar--t1 {
    --av: #c9dfc0;
}

.avatar--t2 {
    --av: #cfe0f3;
}

.avatar--t3 {
    --av: #e7d3ef;
}

.avatar--t4 {
    --av: #f3d6d0;
}

.avatar--t5 {
    --av: #f6e2a6;
}

.avatar--t6 {
    --av: #d5e8e3;
}

.avatar--t7 {
    --av: #f0d9c4;
}

.avatar--acc {
    --av: var(--acc-soft);
}

.avatar--sm {
    width: 28px;
    height: 28px;
    font-size: var(--fs-xs);
}

.avatar--lg {
    width: 44px;
    height: 44px;
    font-size: var(--fs-base);
}

.avatar--xl {
    width: 64px;
    height: 64px;
    font-size: var(--fs-2xl);
}

.meter {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: var(--well);
    border: 1px solid var(--hair);
    overflow: hidden;
}

.meter__fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--acc);
    transform-origin: 100% 50%;
}

.meter__fill--warn {
    background: #e8884a;
}

.meter__fill--bad {
    background: var(--bad);
}

/* ---------- Tables ---------- */
.table-wrap {
    position: relative;
    overflow-x: auto;
    scrollbar-width: thin;
}

.table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    font-size: var(--fs-md);
}

.table th {
    padding: 10px var(--pad);
    text-align: start;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
    border-bottom: 1px solid var(--hair);
}

/* sortable column heads: the head's text is a button; aria-sort on the th draws the arrow */
.table--sortable th[data-sort] {
    padding-block: 6px;
}

.th-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    margin-inline: -6px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.th-sort:hover {
    background: var(--well);
    color: var(--ink);
}

.th-sort:focus-visible {
    outline: 2px solid var(--acc);
    outline-offset: 1px;
}

.th-sort::after {
    content: '↕';
    font-size: 10px;
    opacity: .35;
}

th[aria-sort="ascending"] .th-sort,
th[aria-sort="descending"] .th-sort {
    color: var(--ink);
    font-weight: 600;
}

th[aria-sort="ascending"] .th-sort::after {
    content: '▲';
    opacity: .8;
}

th[aria-sort="descending"] .th-sort::after {
    content: '▼';
    opacity: .8;
}

/* on paper only the column names are printed */
html.is-printing #print-root .th-sort::after {
    content: none;
}

.table td {
    padding: 12px var(--pad);
    vertical-align: middle;
    border-bottom: 1px solid var(--hair);
    transition: background-color .15s;
}

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

.table .num {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.table--rows tbody tr {
    cursor: pointer;
}

.table--rows tbody tr:hover td, .table--rows tbody tr:focus-within td {
    background: var(--well);
}

.table--rows td:first-child {
    font-weight: 600;
    white-space: nowrap;
}

.table .cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.table .cell b {
    display: block;
    font-weight: 600;
    white-space: nowrap;
}

.table .cell small {
    display: block;
    color: var(--muted);
}

.table .go {
    color: var(--muted);
    transition: color .2s, transform .25s;
}

.table tr:hover .go {
    color: var(--ink);
    transform: translateX(-3px);
}

.table td time, .act-when {
    white-space: nowrap;
}

.act-when {
    font-size: var(--fs-sm);
    color: var(--muted);
}

.table .type {
    font-size: var(--fs-md);
    color: var(--muted);
}

/* small screens: wide report tables scroll sideways; their first column (account, period,
   person) keeps a readable width instead of wrapping word by word next to the figures */
@media (max-width: 720px) {
    .table:not(.table--rows) th:first-child, .table:not(.table--rows) td:first-child {
        min-width: 150px;
    }
}

/* phones: a list table (.table--rows) becomes one card per row, each cell a "column name … value"
   line (the names come from data-label, set by app.js); wide report tables keep scrolling sideways */
@media (max-width: 560px) {
    .table-wrap:has(> .table--rows) {
        overflow-x: visible;
    }

    .table.table--rows, .table.table--rows tbody {
        display: block;
        min-width: 0;
        width: 100%;
    }

    .table--rows thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .table--rows tbody tr {
        display: flex;
        flex-direction: column;
        gap: 7px;
        padding: 12px var(--pad);
        border-bottom: 1px solid var(--hair);
        transition: background-color .15s;
    }

    .table--rows tbody tr:last-child {
        border-bottom: 0;
    }

    .table--rows tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-width: 0;
        padding: 0;
        border: 0;
        text-align: end;
    }

    .table--rows tbody td::before {
        content: attr(data-label);
        flex: none;
        max-width: 45%;
        color: var(--muted);
        font-size: var(--fs-xs);
        font-weight: 500;
        text-align: start;
    }

    .table--rows tbody td:not([data-label])::before, .table--rows tbody td[data-label=""]::before {
        content: none;
    }

    /* the "open" arrow column: the whole card opens the row */
    .table--rows tbody td[data-label=""]:has(> .go:only-child) {
        display: none;
    }

    .table--rows tbody td > * {
        min-width: 0;
    }

    .table--rows .cell-stack {
        align-items: flex-end;
    }

    .table--rows .cell b, .table--rows td:first-child {
        white-space: normal;
    }

    .table--rows tbody tr:hover, .table--rows tbody tr:focus-within {
        background: var(--well);
    }

    .table--rows tbody tr:hover td, .table--rows tbody tr:focus-within td {
        background: none;
    }

    .table--rows tr.live-state td {
        justify-content: center;
        text-align: center;
    }
}

/* ---------- Minis ---------- */
.minis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
}

.minis--col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stock-inf {
    color: var(--info);
    font-weight: 600;
    white-space: nowrap;
}

.mini--market [data-market-note] {
    font-size: var(--fs-xs);
}

.mini--market.is-link {
    cursor: pointer;
    transition: border-color .2s, transform .2s;
}

.mini--market.is-link:hover {
    border-color: var(--acc-text);
}

.mini--market.is-link:focus-visible {
    outline: 2px solid var(--acc-text);
    outline-offset: 2px;
}

.mini {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border-radius: var(--r-card);
    background: var(--card);
    border: 1px solid var(--edge);
    box-shadow: var(--shadow);
}

.mini__label {
    font-size: var(--fs-sm);
    color: var(--muted);
}

.mini__num {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
}

.mini__num--text {
    font-size: var(--fs-xl);
}

.mini .delta, .mini .muted {
    font-size: var(--fs-xs);
}

/* ---------- Charts ---------- */
.chart {
    position: relative;
    width: 100%;
    height: 100%;
    direction: ltr;
}

.chart__svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    outline: none;
}

.chart__bar--cur {
    stroke: var(--solid);
    stroke-width: 2;
    paint-order: stroke;
}

tr.is-flash td, .pcard.is-flash {
    animation: flash 1.6s ease-out;
}

@keyframes flash {
    0%, 25% {
        background-color: color-mix(in srgb, var(--acc) 32%, transparent);
    }
}

.chart__svg:focus-visible {
    outline: 2px solid var(--acc);
    outline-offset: 4px;
    border-radius: 8px;
    box-shadow: none;
}

.chart__grid line {
    stroke: var(--grid);
    stroke-width: 1;
}

.chart__grid text, .chart__xl text {
    fill: var(--axis);
    stroke: none;
    font-size: var(--fs-xs);
    font-family: var(--font);
    font-variant-numeric: tabular-nums;
}

.chart__area {
    fill: var(--acc);
    fill-opacity: var(--area-alpha);
    stroke: none;
}

.chart__line {
    fill: none;
    stroke: var(--ink);
    stroke-width: 2;
}

.chart__dot {
    fill: var(--acc);
    stroke: var(--ink);
    stroke-width: 2;
}

.chart__ring {
    fill: var(--solid);
    stroke: none;
}

.chart__cross line {
    stroke: var(--hair-2);
    stroke-width: 1;
}

.chart__bar {
    fill: var(--acc);
    stroke: none;
    transition: fill .2s;
}

.chart__bar.is-on {
    fill: var(--night);
}

.chart__bar.is-neg {
    fill: var(--bad);
}

.chart__bar.is-neg.is-on {
    fill: color-mix(in srgb, var(--bad) 70%, var(--night));
}

.chart__grid line.chart__zero {
    stroke: var(--axis);
}

.hbar.is-neg .hbar__fill {
    background: var(--bad);
}

.hbar.is-neg .hbar__val {
    color: var(--bad);
}

.chart__bar--prev {
    fill: var(--prev);
}

.chart__hit {
    fill: transparent;
    stroke: none;
    cursor: pointer;
    outline: none;
}

.chart__hit:focus-visible {
    fill: color-mix(in srgb, var(--acc) 8%, transparent);
}

.chart__tip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding: 7px 10px;
    border-radius: 9px;
    background: var(--night);
    color: var(--night-ink);
    font-size: var(--fs-xs);
    line-height: 1.6;
    white-space: nowrap;
    direction: rtl;
    text-align: right;
    pointer-events: none;
    opacity: 0;
}

.chart__tip b {
    font-size: var(--fs-md);
}

.chart__tip span {
    color: color-mix(in srgb, var(--night-ink) 70%, transparent);
}

.chart-box {
    height: 260px;
}

.spark {
    display: block;
    width: 100%;
    height: 36px;
    overflow: visible;
}

.spark__line {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.6;
}

.spark__area {
    fill: var(--acc);
    fill-opacity: var(--area-alpha);
    stroke: none;
}

.legend {
    display: flex;
    gap: 14px;
    font-size: var(--fs-xs);
    color: var(--muted);
    white-space: nowrap;
}

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

.legend__sw {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--acc);
}

.legend__sw--prev {
    background: var(--prev);
}

.hbars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hbar {
    display: grid;
    grid-template-columns: minmax(84px, 112px) 1fr auto;
    align-items: center;
    gap: 12px;
    font-size: var(--fs-md);
}

.hbar__label {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hbar__track {
    display: block;
    height: 10px;
    border-radius: 5px;
    background: var(--well);
    overflow: hidden;
}

.hbar__fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--acc);
    transform-origin: 100% 50%;
}

.hbar__val {
    min-width: 48px;
    text-align: end;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.stack__bar {
    display: flex;
    gap: 2px;
    height: 14px;
    border-radius: 7px;
    background: var(--well);
    overflow: hidden;
}

.stack__seg {
    display: block;
    flex: 0 0 0;
    min-width: 4px;
    height: 100%;
}

.stack__seg--new, .stack__swatch--new {
    background: var(--stage-1);
}

.stack__seg--packing, .stack__swatch--packing {
    background: var(--stage-2);
}

.stack__seg--shipped, .stack__swatch--shipped {
    background: var(--stage-3);
}

.stack__seg--delivered, .stack__swatch--delivered {
    background: var(--stage-4);
}

.stack__legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    margin-top: 16px;
}

.stack__legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-md);
}

.stack__swatch {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.stack__lbl {
    color: var(--muted);
}

.stack__n {
    margin-inline-start: auto;
    font-variant-numeric: tabular-nums;
}

.heat {
    position: relative;
    display: grid;
    grid-template-columns: 40px repeat(var(--cols), minmax(0, 1fr));
    align-items: center;
    gap: 3px;
}

.heat__col, .heat__row {
    font-size: var(--fs-xs);
    color: var(--muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.heat__row {
    text-align: start;
}

.heat__cell {
    height: 30px;
    border-radius: 5px;
    background: color-mix(in oklab, var(--heat-hi) calc(var(--v) * 100%), var(--heat-lo));
}

.heat__cell:hover, .heat__cell:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 1px;
    box-shadow: none;
}

/* ---------- Overview ---------- */
.ov-top {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--gap);
}

.stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
}

.ov-mid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
}

.hero {
    display: flex;
    flex-direction: column;
    min-height: clamp(400px, 50vh, 560px);
}

.hero .card__head {
    margin-bottom: 8px;
}

.hero__figure {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 8px;
}

.hero__num {
    font-size: clamp(30px, 2.7vw, 40px);
    font-weight: 700;
    line-height: 1.05;
}

.hero__delta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-md);
}

.hero__chart {
    flex: 1;
    min-height: 240px;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 160px;
}

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

.stat__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--well-bg, var(--acc-soft));
    color: var(--well-ink, var(--acc-text));
}

.stat__icon svg {
    width: 17px;
    height: 17px;
}

.stat--acc {
    --well-bg: var(--acc-soft);
    --well-ink: var(--acc-text);
}

.stat--night {
    --well-bg: var(--night);
    --well-ink: var(--night-ink);
}

.stat--warn {
    --well-bg: var(--warn-bg);
    --well-ink: var(--warn);
}

.stat--grey {
    --well-bg: var(--well);
    --well-ink: var(--muted);
}

.stat__title {
    flex: 1;
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--muted);
}

.stat__go {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--muted);
    transition: background-color .2s, color .2s;
}

.stat__go:hover {
    background: var(--card-2);
    color: var(--ink);
}

.stat__go svg {
    width: 16px;
    height: 16px;
}

.stat__num {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.05;
}

.stat__note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    color: var(--muted);
}

.stat .spark {
    flex: 1 1 36px;
    min-height: 36px;
    max-height: 110px;
    margin-top: auto;
}

.stat__list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: auto;
    font-size: var(--fs-sm);
}

.stat__list li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.stat__list li span:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat__list b {
    color: var(--warn);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.stat__list b.is-out {
    color: var(--bad);
}

.toplist {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toplist li {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-md);
}

.toplist__rank {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.toplist__body {
    min-width: 0;
}

.toplist__name {
    display: block;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toplist__bar {
    display: block;
    height: 4px;
    margin-top: 6px;
    border-radius: 2px;
    background: var(--well);
    overflow: hidden;
}

.toplist__fill {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--acc);
    transform-origin: 100% 50%;
}

.toplist__n {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.toplist__n small {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--muted);
}

/* ---------- Stock ---------- */
.level {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

.level .meter {
    position: relative;
    height: 8px;
    overflow: visible;
}

.level .meter::after {
    content: "";
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    border-radius: 1px;
    background: var(--hair-2);
}

.level .meter__fill {
    border-radius: 4px;
}

.level__n {
    font-size: var(--fs-sm);
    color: var(--muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.level__n b {
    color: var(--ink);
}

.w-level {
    min-width: 220px;
}

.cat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-md);
    color: var(--muted);
}

.cat svg {
    width: 15px;
    height: 15px;
}

/* ---------- Products ---------- */
.pgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--gap);
}

.pcard {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    height: 100%;
    padding: 16px;
    text-align: start;
    border-radius: var(--r-card);
    background: var(--card);
    border: 1px solid var(--edge);
    box-shadow: var(--shadow);
    transition: border-color .2s;
}

.pcard:hover {
    border-color: var(--hair-2);
}

.pcard__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.tile {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--acc-soft);
    color: var(--acc-text);
}

.tile svg {
    width: 22px;
    height: 22px;
}

.tile--filter {
    background: var(--night);
    color: var(--night-ink);
}

.tile--decaf {
    background: #e4efd9;
    color: #3b5a2a;
}

.tile--cold {
    background: #dde9f7;
    color: #2a4a78;
}

.tile--equipment {
    background: #ece7df;
    color: #5a4a30;
}

.tile--merch {
    background: #f3e3e0;
    color: #7a3a33;
}

:root[data-theme="dark"] :is(.tile--decaf, .tile--cold, .tile--equipment, .tile--merch) {
    background: var(--card-2);
    color: var(--ink);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) :is(.tile--decaf, .tile--cold, .tile--equipment, .tile--merch) {
        background: var(--card-2);
        color: var(--ink);
    }
}

.pcard__name {
    font-weight: 600;
    line-height: 1.5;
}

.pcard__size {
    font-size: var(--fs-sm);
    color: var(--muted);
}

.pcard__sku {
    font-size: var(--fs-xs);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.pcard__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
}

.pcard__price {
    font-size: var(--fs-2xl);
    font-weight: 700;
}

.pcard__sold {
    font-size: var(--fs-xs);
    color: var(--muted);
}

.pcard .spark {
    height: 28px;
}

/* product panel: «قیمت حدودی», information only */
.approx {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: var(--acc-soft);
    color: var(--acc-text);
}

.approx span {
    font-size: var(--fs-sm);
}

.approx b {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--ink);
}

.approx small {
    font-size: var(--fs-xs);
    color: var(--muted);
}

.integ__products b {
    font-weight: 600;
}

.pcard__trend {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pcard__trend small {
    font-size: var(--fs-xs);
    color: var(--muted);
}

.pcard.is-off {
    opacity: .6;
}

.pcard.is-off .pcard__name {
    text-decoration: line-through;
}

.tile--high {
    background: var(--night);
    color: var(--night-ink);
}

.pgrid__state {
    grid-column: 1 / -1;
    padding: 28px 20px;
    text-align: center;
    color: var(--muted);
}

.pgrid__state.is-bad {
    color: var(--bad);
}

.prod-grid .pager {
    margin-top: var(--gap);
    border-top: 0;
}

/* ---------- Accordion (suppliers, FAQ) ---------- */
.acc__item {
    border-top: 1px solid var(--hair);
}

.acc__item:first-child {
    border-top: 0;
}

.acc__btn {
    display: grid;
    grid-template-columns: 40px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto 24px;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px var(--pad);
    text-align: start;
    transition: background-color .2s;
}

.acc__btn:hover {
    background: var(--card-2);
}

.acc__name b {
    display: block;
    font-weight: 600;
}

.acc__name small {
    color: var(--muted);
}

.acc__meta {
    font-size: var(--fs-md);
    color: var(--muted);
}

.acc__meta b {
    display: block;
    color: var(--ink);
    font-weight: 600;
}

.acc__ontime {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 120px;
    font-size: var(--fs-sm);
    color: var(--muted);
}

.acc__ontime b {
    color: var(--ink);
}

.acc__chev {
    width: 18px;
    height: 18px;
    justify-self: end;
    color: var(--muted);
}

.acc__body {
    display: none;
    padding: 0 74px 18px var(--pad);
}

.acc__item.is-open .acc__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px 24px;
}

.acc__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.acc--faq .acc__btn {
    grid-template-columns: minmax(0, 1fr) auto 24px;
}

.acc--faq .acc__q {
    font-weight: 500;
}

.acc--faq .acc__body {
    padding: 0 var(--pad) 18px;
    max-width: 70ch;
    color: var(--muted);
    line-height: var(--lh-text);
}

.acc--faq .acc__item.is-open .acc__body {
    display: block;
}

.kv {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

.kv div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kv dt {
    font-size: var(--fs-xs);
    color: var(--muted);
}

.kv dd {
    font-weight: 500;
}

/* ---------- Customers, team ---------- */
.cus-top {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--gap);
}

.cus-top .hbar {
    grid-template-columns: minmax(130px, 200px) 1fr auto;
}

.team-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
    gap: var(--gap);
}

.members li {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px var(--pad);
    border-top: 1px solid var(--hair);
}

.members li:first-child {
    border-top: 0;
}

.members__who {
    min-width: 0;
}

.members__who b {
    display: block;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.members__who small {
    display: block;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.members .select {
    height: 34px;
}

.members .select select {
    padding: 0 10px 0 30px;
    font-size: var(--fs-md);
}

.members__active {
    font-size: var(--fs-xs);
    color: var(--muted);
    white-space: nowrap;
}

.members .icon-btn {
    width: 34px;
    height: 34px;
}

.matrix {
    min-width: 560px;
}

.matrix th:not(:first-child), .matrix td:not(:first-child) {
    width: 84px;
    text-align: center;
}

.matrix td:first-child {
    font-weight: 500;
}

.matrix .switch {
    width: 38px;
    height: 22px;
}

.matrix .switch i {
    width: 16px;
    height: 16px;
}

.matrix .switch[aria-checked="true"] i {
    transform: translateX(-16px);
}

.matrix .lock {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--acc);
    color: var(--acc-ink);
}

.matrix .lock svg {
    width: 12px;
    height: 12px;
    stroke-width: 2.6;
}

/* ---------- Reports ---------- */
.rep-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: var(--gap);
}

.card--chart .card__head {
    margin-bottom: 10px;
}

/* ---------- Settings ---------- */
.set-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--gap);
}

.set-grid--billing {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
}

.set-grid .seg {
    align-self: flex-start;
}

.set-grid--one {
    grid-template-columns: minmax(0, 1fr);
}

.formula {
    margin-bottom: 8px;
}

.formula textarea {
    min-height: 110px;
    font-size: var(--fs-lg);
    line-height: var(--lh-text);
}

.formula textarea[readonly] {
    background: var(--well);
    resize: none;
}

/* settings → اتصال قیمت لحظه‌ای: status above the token field */
.goldapi__status {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--hair);
}

.formula__error {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--bad-bg);
    color: var(--bad);
    font-size: var(--fs-md);
    line-height: var(--lh-text);
}

.formula__vars {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 16px;
}

.formula__vars .chip {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    height: auto;
    padding: 6px 12px;
    border: 1px solid var(--hair-2);
    border-radius: var(--r-md);
    background: var(--solid);
    text-align: start;
}

.formula__vars .chip:not(:disabled):hover {
    border-color: var(--acc);
}

.formula__vars .chip small {
    font-weight: 400;
    color: var(--muted);
}

.formula__vars .chip:disabled {
    cursor: default;
}

.profile {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.profile .muted {
    margin-top: 6px;
}

.price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin: -4px 0 16px;
}

.price b {
    font-size: 32px;
    font-weight: 700;
}

.price span {
    color: var(--muted);
}

.usage {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
}

.usage__row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: var(--fs-md);
}

.usage__row span {
    color: var(--muted);
}

.plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.plan-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border-radius: 16px;
    background: var(--solid);
    border: 1px solid var(--hair-2);
    transition: border-color .3s, box-shadow .3s;
}

.plan-card.is-current {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px var(--acc-soft);
}

.plan-card h3 {
    font: 700 var(--fs-xl)/1.45 var(--display);
}

.plan-card__for {
    font-size: var(--fs-sm);
    color: var(--muted);
}

.plan-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 6px;
    margin: 8px 0 4px;
}

.plan-card__price b {
    font-size: 24px;
    font-weight: 700;
}

.plan-card__price span {
    font-size: var(--fs-sm);
    color: var(--muted);
}

.plan-card .btn {
    margin-top: auto;
}

.ticks {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 6px 0 14px;
    font-size: var(--fs-md);
    color: var(--muted);
}

.ticks li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ticks li::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--acc);
}

.integ {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--gap);
}

.integ li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: start;
    gap: 14px;
    padding: 18px;
    border-radius: var(--r-card);
    background: var(--card);
    border: 1px solid var(--edge);
    box-shadow: var(--shadow);
}

.integ__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--acc-soft);
    color: var(--acc-text);
}

.integ__icon svg {
    width: 20px;
    height: 20px;
}

.integ__body b {
    display: block;
    font-weight: 600;
}

.integ__body p {
    margin-top: 2px;
    font-size: var(--fs-md);
    color: var(--muted);
}

.integ__body .pill {
    margin-top: 10px;
}

.swatches {
    display: flex;
    gap: 12px;
}

.swatch {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--sw);
    border: 3px solid var(--solid);
    box-shadow: 0 0 0 1px var(--hair-2);
    transition: box-shadow .2s;
}

.swatch--amber {
    --sw: #f4c24a;
}

.swatch--seaglass {
    --sw: #8fe0cf;
}

.swatch--blush {
    --sw: #f7b1c9;
}

.swatch--sky {
    --sw: #9fc9f3;
}

.swatch[aria-checked="true"] {
    box-shadow: 0 0 0 2px var(--ink);
}

.swatch[aria-checked="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 10px;
    height: 10px;
    margin: auto;
    border-radius: 50%;
    background: #1f1f24;
}

.rows li, .switches li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--hair);
}

.rows li:first-child, .switches li:first-child {
    border-top: 0;
    padding-top: 0;
}

.rows li:last-child, .switches li:last-child {
    padding-bottom: 0;
}

.rows li > span:not(.rows__icon), .switches li > span {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.rows small, .switches small {
    color: var(--muted);
}

.rows__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--acc-soft);
    color: var(--acc-text);
}

.rows__icon svg {
    width: 18px;
    height: 18px;
}

.keys li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    font-size: var(--fs-md);
    border-top: 1px solid var(--hair);
}

.keys li:first-child {
    border-top: 0;
    padding-top: 0;
}

.keys kbd {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    margin-inline-start: 4px;
    padding: 0 6px;
    font: 500 var(--fs-xs)/1 var(--font);
    color: var(--ink);
    background: var(--solid);
    border: 1px solid var(--hair-2);
    border-radius: 6px;
}

/* ---------- Help ---------- */
.help-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--gap);
}

.help-side {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.card--list .chips {
    justify-content: flex-end;
}

/* ---------- Tray ---------- */
.tray-wrap {
    position: relative;
}

.tray {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    width: min(360px, 100vw - 48px);
    padding: 6px 0 8px;
    border-radius: 16px;
    background: var(--solid);
    border: 1px solid var(--hair);
    box-shadow: 0 20px 50px -20px rgba(31, 31, 36, .35);
    transform-origin: 10% 0;
}

.tray__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 8px;
    border-bottom: 1px solid var(--hair);
}

.tray__title {
    font-weight: 600;
}

.tray__list li {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    font-size: var(--fs-md);
    line-height: 1.7;
    transition: background-color .4s;
}

.tray__list li + li {
    border-top: 1px solid var(--hair);
}

.tray__list .avatar {
    width: 32px;
    height: 32px;
    font-size: var(--fs-xs);
}

.tray__ago {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-xs);
    color: var(--muted);
}

.tray__list li.is-unread {
    background: color-mix(in srgb, var(--acc) 14%, transparent);
}

/* ---------- Toast, dialogs, panel ---------- */
.toast {
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom));
    left: 50%;
    z-index: 60;
    width: fit-content;
    max-width: min(480px, 100vw - 32px);
    padding: 11px 16px;
    border-radius: 12px;
    background: var(--night);
    color: var(--night-ink);
    font-size: var(--fs-md);
    font-weight: 500;
    box-shadow: 0 14px 40px -12px rgba(0, 0, 0, .4);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%);
}

.dlg {
    width: min(520px, 100vw - 32px);
    padding: 24px;
    border-radius: 22px;
    background: var(--solid);
    color: var(--ink);
    border: 1px solid var(--hair);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .45);
}

.dlg::backdrop {
    background: rgba(31, 31, 36, .45);
}

.dlg form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dlg__title {
    font: 800 20px/1.45 var(--display);
}

.dlg__text {
    margin-top: -6px;
    color: var(--muted);
}

.dlg__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.dlg__foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}

.dlg__sum {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--well);
    font-size: var(--fs-md);
}

.dlg__sum span {
    color: var(--muted);
}

.panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    width: min(440px, 100vw);
    background: var(--solid);
    border-right: 1px solid var(--hair);
    box-shadow: 20px 0 60px -30px rgba(0, 0, 0, .4);
}

.panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 24px 14px 20px;
    border-bottom: 1px solid var(--hair);
}

.panel__title {
    font: 800 var(--fs-2xl)/1.45 var(--display);
}

.panel__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 18px;
    padding: 20px 24px calc(28px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.panel-scrim {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(31, 31, 36, .4);
}

.panel__sum {
    display: flex;
    align-items: center;
    gap: 12px;
}

.panel__sum .avatar, .panel__sum .tile {
    width: 44px;
    height: 44px;
    font-size: var(--fs-base);
}

.panel__sum b {
    display: block;
    font-size: var(--fs-lg);
}

.panel__sum small {
    color: var(--muted);
}

.panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.panel h3 {
    margin-bottom: 8px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--muted);
}

.lines li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    font-size: var(--fs-md);
    border-top: 1px solid var(--hair);
}

.lines li:first-child {
    border-top: 0;
    padding-top: 0;
}

.lines small {
    color: var(--muted);
}

.lines b {
    font-variant-numeric: tabular-nums;
}

.steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 6px 0 2px;
}

.steps::before, .steps__fill {
    content: "";
    position: absolute;
    top: 16px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: var(--hair-2);
}

.steps__fill {
    background: var(--night);
    transform-origin: 100% 50%;
    transform: scaleX(var(--p, 0));
}

.steps li {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-xs);
    color: var(--muted);
    text-align: center;
}

.steps i {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--solid);
    border: 2px solid var(--hair-2);
    transition: background-color .3s, border-color .3s;
}

.steps i svg {
    width: 12px;
    height: 12px;
    stroke-width: 2.6;
    color: var(--night-ink);
}

.steps li.is-done {
    color: var(--ink);
}

.steps li.is-done i {
    background: var(--night);
    border-color: var(--night);
}

.steps li.is-now {
    color: var(--ink);
    font-weight: 600;
}

.steps li.is-now i {
    border-color: var(--acc-text);
    box-shadow: 0 0 0 4px var(--acc-soft);
}

.steps li.is-bad i {
    background: var(--bad);
    border-color: var(--bad);
}

.steps li.is-bad i svg {
    color: #fff;
}

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
    .ov-mid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ov-mid > :last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1100px) {
    .ov-top, .team-grid, .set-grid, .set-grid--billing {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* the menu becomes a drawer below 1200px (also app.js `narrow`), so tablets in landscape get the full width */
@media (max-width: 1199px) {
    .app {
        grid-template-columns: minmax(0, 1fr);
    }

    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 40;
        width: min(300px, 86vw);
        background: var(--solid);
        border-left: 0;
        transform: translateX(104%);
        transition: transform .4s cubic-bezier(.22, 1, .36, 1);
        box-shadow: -30px 0 80px -30px rgba(0, 0, 0, .5);
    }

    .sidebar.is-open {
        transform: none;
    }

    .icon-btn.sidebar__close, .icon-btn.page__menu {
        display: inline-grid;
    }

    .page__menu {
        order: -1;
    }

    .main {
        padding: 18px 20px 40px;
    }
}

@media (max-width: 1000px) {
    .rep-grid, .help-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .chart-box {
        height: 220px;
    }
}

@media (max-width: 900px) {
    .cus-top {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 860px) {
    .acc__btn {
        grid-template-columns: 40px minmax(0, 1fr) auto 24px;
    }

    .acc__meta {
        display: none;
    }

    .acc__body {
        padding-inline-start: var(--pad);
    }

    .acc__item.is-open .acc__body {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .plans {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .main {
        padding: 14px 14px 32px;
    }

    .ov-mid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero {
        min-height: 360px;
    }

    .minis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fields, .dlg__row {
        grid-template-columns: minmax(0, 1fr);
    }

    .card {
        --pad: 16px;
    }

    .stack__legend {
        grid-template-columns: minmax(0, 1fr);
    }

    .page__actions {
        width: 100%;
    }

    .page__actions .btn {
        flex: 1 1 auto;
    }

    .members li {
        grid-template-columns: 38px minmax(0, 1fr) auto auto;
    }

    .members__active {
        display: none;
    }
}

@media (max-width: 520px) {
    .stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .stat {
        min-height: 0;
    }

    .hero {
        min-height: 340px;
    }

    .hero__chart {
        min-height: 200px;
    }

    .chart-box {
        height: 200px;
    }

    .page__title {
        font-size: 24px;
        line-height: 1.45;
    }

    .pgrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .card__head {
        flex-wrap: wrap;
    }
}

@media (min-width: 1181px) and (max-height: 1060px) {
    :root {
        --pad: 18px;
        --gap: 14px;
    }

    .main {
        padding: 16px 28px 36px;
    }

    .page {
        padding: 0 0 2px;
    }

    .page__title {
        font-size: 26px;
        line-height: 1.45;
    }

    .hero {
        min-height: 380px;
    }

    .stat {
        gap: 6px;
        min-height: 0;
    }

    .stat .spark {
        max-height: 44px;
    }

    .stat__num {
        font-size: 24px;
    }

    .card__head {
        margin-bottom: 12px;
    }

    .toplist {
        gap: 8px;
    }
}

@media (min-width: 1800px) {
    :root {
        --gap: 20px;
        --pad: 24px;
    }
}

/* 27-inch (2560 px) monitors at 100 % scaling: the same layout with a slightly larger type scale */
@media (min-width: 2200px) {
    :root {
        --fs-xs: 13px;
        --fs-sm: 13.5px;
        --fs-md: 14.5px;
        --fs-base: 15.5px;
        --fs-lg: 17px;
        --fs-xl: 19px;
        --fs-2xl: 21px;
        --gap: 22px;
        --pad: 26px;
    }

    .page__title {
        font-size: 34px;
    }

    .app {
        grid-template-columns: 320px minmax(0, 1fr);
    }
}

@media (pointer: coarse) {
    .btn {
        min-height: 44px;
    }

    .btn--sm {
        min-height: 40px;
    }

    .icon-btn {
        width: 44px;
        height: 44px;
    }

    .chip {
        min-height: 40px;
    }

    .seg__btn {
        min-height: 40px;
    }

    .nav__link {
        min-height: 46px;
    }

    input, select, textarea {
        font-size: 16px;
    }

    .search__kbd {
        display: none;
    }

    .search input {
        padding-left: 14px;
    }
}

@media print {
    .sidebar, .scrim, .page__actions, .page__menu, .toolbar, .toast, .panel, .panel-scrim, .credit {
        display: none !important;
    }

    .app {
        display: block;
        background: #fff;
    }

    .card, .mini {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar, .switch, .switch i {
        transition: none;
    }
}

/* ---------- Persian, right to left ---------- */
body {
    font-synthesis: none;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}

.page__sub, .dlg__text, .integ__body p, .card__foot, .help-side p.small, .tray__list p {
    line-height: var(--lh-text);
}

.card__sub, .stat__note, .mini .muted, .rows small, .switches small {
    line-height: var(--lh-ui);
}

.ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

.field input[dir="ltr"] {
    text-align: end;
}

.push {
    margin-inline-start: auto;
}

.gap-s {
    margin-inline-start: 8px;
}

.lines--spaced {
    margin-top: 14px;
}

.spark--lg {
    height: 64px;
}

.unit {
    font-size: .5em;
    font-weight: 500;
    color: var(--muted);
}

.hero__num .unit {
    font-size: .42em;
}

.price .unit, .plan-card__price .unit {
    font-size: var(--fs-md);
}

kbd {
    font-family: var(--font);
}

/* amounts written out in Persian run longer, so the four-up stat tiles pair up sooner */
@media (max-width: 900px) {
    .minis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Karina API: login page, live-data states ---------- */
.auth {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: 24px 16px;
    background: radial-gradient(70% 55% at 0% 0%, var(--glow), transparent 70%),
    radial-gradient(45% 40% at 100% 100%, var(--glow), transparent 70%),
    linear-gradient(200deg, var(--app-1), var(--app-2) 55%, var(--app-3));
}

.auth__card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: min(420px, 100%);
    padding: 28px;
}

.auth__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
}

.auth__brand .brand__mark {
    width: 30px;
    height: 30px;
    color: var(--acc-text);
}

.auth__brand .brand__name {
    font: 800 var(--fs-2xl)/1.4 var(--display);
}

.auth__brand .brand__logo {
    max-width: 140px;
    height: 44px;
}

.auth {
    align-content: center;
    row-gap: 20px;
}

/* «طراحی و پیاده‌سازی شده با 💙 توسط کارینا» under every page */
.credit {
    margin-top: 40px;
    padding-top: 16px;
    border-top: 1px solid var(--hair);
    text-align: center;
    font-size: var(--fs-sm);
    line-height: var(--lh-text);
    color: var(--muted);
}

.credit a {
    color: var(--acc-text);
    font-weight: 700;
    text-decoration: none;
}

.credit a:hover, .credit a:focus-visible {
    text-decoration: underline;
}

.auth .credit {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* Settings → ظاهر: gallery name and logo */
.brandset__preview {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: var(--well);
}

.brandset__logo {
    display: grid;
    place-items: center;
    flex: none;
    min-width: 48px;
    height: 48px;
    color: var(--acc-text);
}

.brandset__logo img {
    max-width: 160px;
    height: 48px;
    object-fit: contain;
    border-radius: 10px;
}

.brandset__logo svg {
    width: 36px;
    height: 36px;
    stroke-width: 1.8;
}

.brandset__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 800 20px/1.3 var(--display);
}

/* file picker in the panel's language: the real input covers the box, invisible, so clicks,
   the keyboard and screen readers all reach it */
.filepick {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 6px;
    border: 1px dashed var(--hair-2);
    border-radius: var(--r-md);
    background: var(--solid);
    cursor: pointer;
}

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

.filepick:focus-within {
    outline: 2px solid var(--acc);
    outline-offset: 2px;
}

.filepick .btn {
    flex: none;
    pointer-events: none;
}

.filepick__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: var(--fs-sm);
}

.auth__title {
    font: 800 22px/1.45 var(--display);
}

.auth__sub, .auth__foot {
    margin-top: 2px;
    font-size: var(--fs-sm);
    line-height: var(--lh-text);
    color: var(--muted);
}

.auth__alert {
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--bad-bg);
    color: var(--bad);
    font-size: var(--fs-md);
    line-height: var(--lh-text);
}

.field__error {
    color: var(--bad);
    font-size: var(--fs-sm);
    font-weight: 400;
}

.field input[aria-invalid="true"] {
    border-color: var(--bad);
}

.check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-md);
    color: var(--muted);
    cursor: pointer;
}

.check input {
    width: 16px;
    height: 16px;
    accent-color: var(--night);
}

.demo-note {
    padding: 10px 14px;
    border-radius: var(--r-md);
    background: var(--well);
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-text);
}

.demo-note b {
    color: var(--ink);
}

.live-state td {
    padding: 28px 20px;
    text-align: center;
    color: var(--muted);
}

.live-state--error td {
    color: var(--bad);
}

.me-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}

.me-wrap .me {
    flex: 1;
    min-width: 0;
}

.integ__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 4px;
    font-size: var(--fs-sm);
    color: var(--muted);
}

.integ__error {
    margin-top: 6px;
    font-size: var(--fs-sm);
    line-height: var(--lh-text);
    color: var(--bad);
}

.integ__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.integ__actions .pill {
    margin-top: 0;
}

.integ__body .ltr {
    overflow-wrap: anywhere;
}

.messages {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--fs-sm);
    line-height: var(--lh-text);
}

.messages li {
    padding: 8px 10px;
    border-radius: var(--r-md);
    background: var(--well);
}

/* ==========================================================================
   Phase 4b: forms, full-screen views, filters, invoice form, cheques,
   reports, roles, bank accounts, statement and print
   ========================================================================== */
.push-end {
    margin-inline-end: auto;
}

.gap-top {
    margin-top: 14px;
}

.pad {
    padding: 24px;
}

.flip-x {
    transform: scaleX(-1);
}

.nav__badge + .nav__badge {
    margin-inline-start: 6px;
}

.btn--danger-text {
    color: var(--bad);
}

.btn--danger-text:hover {
    background: var(--bad-bg);
}

.ov-mid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1500px) {
    .ov-mid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ov-mid > :last-child {
        grid-column: auto;
    }
}

@media (max-width: 720px) {
    .ov-mid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.order-status {
    color: var(--ink);
    font-weight: 500;
}

.cell-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.table tr.is-void td {
    color: var(--muted);
}

.table tr.is-void td b {
    text-decoration: line-through;
}

.table--compact {
    min-width: 0;
    font-size: var(--fs-sm);
}

.table--compact th, .table--compact td {
    padding: 8px 12px;
}

.table tr.table__total td {
    font-weight: 700;
    background: var(--well);
}

.toplist li[data-row], .lines li[data-row] {
    cursor: pointer;
    border-radius: 8px;
}

.toplist li[data-row]:hover, .lines li[data-row]:hover {
    background: var(--well);
}

/* clickable top-lists (best sellers, top debtors): room around the row for the hover background;
   the negative margins keep the text where it was and the rows' spacing almost the same */
.toplist li[data-row] {
    padding: 8px 10px;
    margin: -5px -10px;
}

/* clickable rows (dashboard cheques): room around the text for the hover background, pulled out so the text stays aligned */
.lines li[data-row] {
    padding: 10px;
    margin-inline: -10px;
}

.lines li[data-row]:first-child {
    padding-top: 10px;
    margin-top: -10px;
}

.lines li[data-row]:hover, .lines li[data-row]:hover + li, .lines li[data-row]:focus-visible + li {
    border-top-color: transparent;
}

/* ---- search box inside toolbars */
.searchbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 1 1 240px;
    max-width: 360px;
    height: 40px;
    border-radius: var(--r-md);
    background: var(--solid);
    border: 1px solid var(--hair-2);
}

.searchbox svg {
    position: absolute;
    right: 11px;
    width: 17px;
    height: 17px;
    color: var(--muted);
    pointer-events: none;
}

.searchbox input {
    width: 100%;
    height: 100%;
    padding: 0 36px 0 12px;
    background: none;
    border: 0;
    border-radius: inherit;
}

.searchbox:focus-within {
    box-shadow: var(--focus);
}

.searchbox input:focus-visible {
    box-shadow: none;
}

.searchbox input::-webkit-search-cancel-button {
    cursor: pointer;
}

/* ---- filters */
.filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filters__more {
    padding: 16px var(--pad);
}

.filters__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 14px;
}

.filters__foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.badge-count {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--acc);
    color: var(--acc-ink);
    font-size: var(--fs-xs);
}

.field--inline input {
    height: 40px;
    min-width: 150px;
}

@media (max-width: 1000px) {
    .filters__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .filters__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .searchbox {
        max-width: none;
    }
}

/* ---- pager */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px var(--pad);
    border-top: 1px solid var(--hair);
}

.pager:empty {
    display: none;
}

.pager__info {
    font-size: var(--fs-sm);
}

/* ---- form fields */
.field textarea, .field select {
    font: inherit;
}

.field textarea {
    min-height: 44px;
    padding: 8px 12px;
    border-radius: var(--r-md);
    border: 1px solid var(--hair-2);
    background: var(--solid);
    font-weight: 400;
    resize: vertical;
    line-height: var(--lh-ui);
}

.field input[readonly] {
    background: var(--well);
}

.field__hint {
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--muted);
    line-height: var(--lh-ui);
}

/* info icon after a field label; the bubble spans the field (at least 240px, growing from the
   start edge) so it stays readable in narrow money columns */
.field--tip {
    position: relative;
}

.tip {
    display: inline-flex;
    vertical-align: middle;
    margin-inline-start: 4px;
    color: var(--muted);
    border-radius: 50%;
    cursor: help;
}

.tip svg {
    width: 16px;
    height: 16px;
}

.tip:hover, .tip:focus-visible {
    color: var(--ink);
}

.tip:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

.tip__bubble {
    position: absolute;
    inset-inline: 0;
    min-width: min(240px, 80vw);
    top: 26px;
    z-index: 20;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    background: var(--night);
    color: var(--night-ink);
    font-size: var(--fs-xs);
    font-weight: 400;
    line-height: var(--lh-ui);
    box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s, transform .15s, visibility .15s;
    pointer-events: none;
}

.tip:hover .tip__bubble, .tip:focus-visible .tip__bubble {
    opacity: 1;
    visibility: visible;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .tip__bubble {
        transition: none;
    }
}

.field__amount {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--acc-text);
}

.field__error {
    line-height: var(--lh-ui);
}

.field .req {
    font-style: normal;
    color: var(--bad);
}

.field textarea[aria-invalid="true"], .field select[aria-invalid="true"] {
    border-color: var(--bad);
}

.field--date input {
    text-align: end;
    letter-spacing: .02em;
}

.fields .wide, .fields fieldset {
    grid-column: 1 / -1;
}

.fields--one {
    grid-template-columns: minmax(0, 1fr);
}

.checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--hair-2);
    border-radius: var(--r-md);
}

.checks legend {
    padding: 0 6px;
    font-size: var(--fs-sm);
    color: var(--muted);
}

.opening {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    margin: 0;
    padding: 12px;
    border: 1px dashed var(--hair-2);
    border-radius: var(--r-md);
}

.opening legend {
    padding: 0 6px;
    font-size: var(--fs-sm);
    color: var(--muted);
}

/* money inputs are left-to-right with the digits at the right edge, where the unit label sits */
.input-prefix input, .input-prefix input[dir="ltr"] {
    padding-right: 62px;
    padding-left: 12px;
}

.input-prefix i {
    font-size: var(--fs-sm);
    pointer-events: none;
}

.form-alert {
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--bad-bg);
    color: var(--bad);
    font-size: var(--fs-md);
    line-height: var(--lh-text);
}

@media (max-width: 720px) {
    .opening {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- dialogs */
.dlg--wide {
    width: min(760px, 100vw - 32px);
}

.dlg {
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
}

.dlg__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dlg__body:empty {
    display: none;
}

.dlg--full {
    width: min(1320px, 100vw - 24px);
    max-width: none;
    height: calc(100dvh - 24px);
    max-height: none;
    padding: 0;
    overflow: hidden;
    background: var(--app-1);
}

.dlg--full[open] {
    display: flex;
    flex-direction: column;
}

.full__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 14px 20px;
    background: var(--solid);
    border-bottom: 1px solid var(--hair);
}

.full__title {
    min-width: 0;
}

.full__title h2 {
    font: 800 var(--fs-2xl)/1.4 var(--display);
}

.full__title p {
    font-size: var(--fs-sm);
    color: var(--muted);
}

.full__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.full__body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    overscroll-behavior: contain;
}

.sheet-wrap {
    padding: 8px 0 20px;
}

.sheet-side {
    max-width: 794px;
    margin: 0 auto;
}

.sheet-side:empty {
    display: none;
}

.sheet-side h3 {
    margin-bottom: 8px;
    font-size: var(--fs-lg);
}

/* on laptop/desktop screens the on-screen sheet uses the room the full dialog gives it; print and
   the PDF (a clone in .pdf-host) keep the A4 width from sheet.css */
@media screen and (min-width: 1025px) {
    .sheet-wrap .sheet, .sheet-side {
        max-width: 1120px;
    }
}

@media screen and (min-width: 1440px) {
    .sheet-wrap .sheet, .sheet-side {
        max-width: 1240px;
    }
}

.history {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.history li {
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: var(--card);
    border: 1px solid var(--hair);
    font-size: var(--fs-md);
    line-height: var(--lh-text);
}

@media (max-width: 720px) {
    .dlg--full {
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
    }

    .full__body {
        padding: 12px;
    }
}

/* ---- person picker */
.picker {
    position: relative;
    display: block;
}

.picker input[type="search"] {
    width: 100%;
}

.picker__list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
    border-radius: 12px;
    background: var(--solid);
    border: 1px solid var(--hair-2);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .35);
}

.picker__list button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 7px 10px;
    border-radius: 8px;
    text-align: start;
}

.picker__list button:hover, .picker__list button:focus-visible {
    background: var(--well);
}

.picker__list small {
    color: var(--muted);
}

.picker__empty {
    padding: 10px;
    font-size: var(--fs-sm);
    color: var(--muted);
}

/* last row of the list: register the typed name as a new person with the invoice */
.picker__list .picker__add {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    border-top: 1px solid var(--hair);
    border-radius: 0 0 8px 8px;
    color: var(--acc-text);
    font-weight: 600;
}

.picker__list .picker__add:only-child {
    margin-top: 0;
    border-top: 0;
    border-radius: 8px;
}

.picker__add svg {
    flex: none;
    width: 16px;
    height: 16px;
}

/* ---- invoice form */
.invform {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1240px;
    margin: 0 auto;
}

.invform h3 {
    font-size: var(--fs-lg);
    font-weight: 700;
}

.invform__head {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.invform__type {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.invform__grid {
    display: grid;
    grid-template-columns: 160px minmax(0, 1.4fr) minmax(0, 1fr) 200px;
    gap: 12px 14px;
    align-items: start;
}

.invform__grid .wide {
    grid-column: 1 / -1;
}

.invform__sec {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-bottom: 10px;
}

.invform__sec .btn {
    margin-inline-start: auto;
}

.irow {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--card);
    border: 1px solid var(--edge);
    box-shadow: var(--shadow);
}

.irow__top {
    display: grid;
    grid-template-columns: 28px minmax(150px, 1.2fr) minmax(160px, 1.6fr) minmax(90px, .7fr) 80px 120px 110px 40px;
    align-items: end;
    gap: 10px;
}

.irow__top:not(:has(.irow__product)) {
    grid-template-columns: 28px minmax(200px, 2fr) minmax(90px, .7fr) 80px 120px 110px 40px;
}

.irow__n {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--night);
    color: var(--night-ink);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.irow__money {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.irow__money .field--total input {
    border-color: var(--ink);
    font-weight: 600;
}

.irow__check {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
}

.irow__check:empty {
    display: none;
}

.irow__check svg, .checks-list svg {
    width: 16px;
    height: 16px;
}

.is-ok {
    color: var(--good);
}

.is-bad {
    color: var(--bad);
}

.irow__del {
    margin-bottom: 0;
}

.irow__comm {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--well);
}

.irow__commhead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    font-size: var(--fs-sm);
}

.irow__commhead .btn {
    margin-inline-start: auto;
}

.irow__commnote {
    font-size: var(--fs-sm);
}

.crow {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) 110px minmax(160px, 1fr) 40px 40px;
    align-items: end;
    gap: 10px;
}

.crow:has([data-crow-pct][hidden]) {
    grid-template-columns: minmax(170px, 1fr) minmax(160px, 1fr) 40px 40px;
}

[data-comms]:empty {
    display: none;
}

.invform__bottom {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.invform__pays, .invform__totals {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.prow {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: var(--r-md);
    background: var(--well);
}

.prow__main {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 40px;
    align-items: end;
    gap: 10px;
}

.prow__cheque {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--hair-2);
}

.invform__totals .field--total input {
    border-color: var(--ink);
    font-size: var(--fs-lg);
    font-weight: 700;
}

.checks-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--well);
    font-size: var(--fs-sm);
    line-height: var(--lh-ui);
}

.checks-list li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.checks-list li:empty {
    display: none;
}

@media (max-width: 1200px) {
    .invform__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .irow__money {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .invform__bottom {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* tablets and small laptops: a row's top on two lines, every field placed (auto-placement put
   «کد» into the 40px delete column and «تعداد» into the row-number column) */
@media (min-width: 721px) and (max-width: 1200px) {
    .irow__top, .irow__top:not(:has(.irow__product)) {
        grid-template-columns: 28px repeat(4, minmax(0, 1fr)) 40px;
        grid-template-areas: "n prod prod title title ." ". code qty karat weight del";
    }

    .irow__top:not(:has(.irow__product)) {
        grid-template-areas: "n title title title title ." ". code qty karat weight del";
    }

    .irow__top > .irow__n {
        grid-area: n;
        align-self: center;
    }

    .irow__top > .irow__product {
        grid-area: prod;
    }

    .irow__top > .irow__title {
        grid-area: title;
    }

    .irow__top > [data-field$=".code"] {
        grid-area: code;
    }

    .irow__top > [data-field$=".quantity"] {
        grid-area: qty;
    }

    .irow__top > [data-field$=".karat"] {
        grid-area: karat;
    }

    .irow__top > [data-field$=".weight"] {
        grid-area: weight;
    }

    .irow__top > .irow__del {
        grid-area: del;
    }
}

@media (max-width: 720px) {
    .invform__grid, .irow__money, .prow__main, .prow__cheque {
        grid-template-columns: minmax(0, 1fr);
    }

    .irow__top, .irow__top:not(:has(.irow__product)) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .irow__top .irow__title, .irow__top .irow__product {
        grid-column: 1 / -1;
    }

    .irow__n {
        position: absolute;
        top: 10px;
        left: 10px;
    }

    .crow {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px 40px;
    }

    .crow:has([data-crow-pct][hidden]) {
        grid-template-columns: minmax(0, 1fr) 40px 40px;
    }

    .crow > .field:first-child {
        grid-column: 1 / -1;
    }
}

/* ---- reports */
.report-filters {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.report-filters__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
}

.report-filters__row .field--date {
    width: 150px;
}

.report-filters__row .checks {
    flex: 1 1 360px;
}

.quick {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.quick .chip {
    height: 32px;
    font-size: var(--fs-sm);
}

.quick .chip::before {
    background: var(--solid);
}

.quick .chip[aria-pressed="true"] {
    color: var(--night-ink);
}

.quick .chip[aria-pressed="true"]::before {
    background: var(--night);
    border-color: var(--night);
}

.minis--split {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.minis--split .mini__num {
    font-size: 19px;
}

.rep-grid--even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-body {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    transition: opacity .2s;
}

.report-body.is-loading {
    opacity: .55;
    pointer-events: none;
}

@media (max-width: 1200px) {
    .minis--split {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1000px) {
    .rep-grid--even {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .minis--split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

[data-tabs="reports"] > [role="tabpanel"] {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

[data-tabs="reports"] > [role="tabpanel"][hidden] {
    display: none;
}

.tabs__list--scroll .tabs__tab {
    flex-shrink: 0;
    white-space: nowrap;
}

.report-filters__row > .field:not(.field--date) {
    min-width: 170px;
}

.report-filters__row > .check {
    align-self: center;
}

/* ---- ledger reports (profit & loss, trial balance, balance sheet, balances, inventory) */
.is-neg {
    color: var(--bad);
}

.mini__num.is-neg {
    color: var(--bad);
}

.mini .pill {
    align-self: flex-start;
}

.acc-name {
    display: inline-block;
    padding-inline-start: calc(var(--depth, 0) * 16px);
}

/* tree depth comes from data-depth (no inline style); deeper levels stay at the last step */
.acc-name[data-depth="1"] {
    --depth: 1;
}

.acc-name[data-depth="2"] {
    --depth: 2;
}

.acc-name[data-depth="3"] {
    --depth: 3;
}

.acc-name[data-depth="4"] {
    --depth: 4;
}

.acc-name[data-depth="5"] {
    --depth: 5;
}

.acc-name[data-depth="6"] {
    --depth: 6;
}

.table tr.is-group td {
    font-weight: 600;
}

.table tr.is-group td:first-child .acc-name {
    color: var(--ink);
}

.table tr.is-result td {
    font-style: italic;
}

.table tr.table__group td {
    padding-top: 14px;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0;
    border-bottom: 1px solid var(--hair-2);
}

.table tr.table__grand td {
    font-size: var(--fs-md);
    background: var(--acc-soft);
}

.table tr.is-warn td {
    background: var(--warn-bg);
}

.table--ledger td.num, .table--ledger th.num {
    white-space: nowrap;
}

.table--ledger thead tr:first-child th[colspan] {
    text-align: center;
    border-bottom: 1px solid var(--hair);
}

.card__title .pill {
    margin-inline-start: 8px;
    vertical-align: middle;
    font-size: var(--fs-xs);
}

/* ---- audit trail */
.audit-detail {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.audit-detail h3 {
    margin-top: 4px;
}

.audit-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    border-radius: var(--r-md);
    background: var(--well);
    font-size: var(--fs-sm);
    line-height: var(--lh-text);
}

.audit-changes th[scope="row"] {
    width: 22%;
    font-weight: 600;
    color: var(--muted);
    vertical-align: top;
}

.audit-changes td {
    vertical-align: top;
    line-height: var(--lh-text);
}

.audit-changes td.audit-old {
    color: var(--muted);
    background: color-mix(in srgb, var(--bad-bg) 55%, transparent);
}

.audit-changes td.audit-new {
    color: var(--ink);
    background: color-mix(in srgb, var(--good-bg) 55%, transparent);
}

.audit-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding-inline-start: 18px;
    list-style: persian;
}

.audit-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.kvi {
    white-space: nowrap;
}

.kvi i {
    font-style: normal;
    font-size: var(--fs-xs);
    color: var(--muted);
}

.audit-timeline li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.audit-timeline .audit-meta {
    align-self: stretch;
    padding: 6px 10px;
}

.audit-timeline [data-audit-changes]:not(:empty) {
    align-self: stretch;
}

.sheet-side .table-wrap, .panel__body .audit-timeline .table-wrap {
    overflow-x: auto;
}

/* ---- roles and users */
.members li {
    grid-template-columns: 38px minmax(0, 1fr) auto auto 34px;
}

.members__roles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
}

.roles li {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto 34px;
    align-items: center;
    gap: 12px;
    padding: 12px var(--pad);
    border-top: 1px solid var(--hair);
}

.roles li:first-child {
    border-top: 0;
}

.roles__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--acc-soft);
    color: var(--acc-text);
}

.roles__icon svg {
    width: 18px;
    height: 18px;
}

.roles__who b {
    display: block;
    font-weight: 600;
}

.roles__who small {
    display: block;
    color: var(--muted);
}

.roles__meta {
    font-size: var(--fs-sm);
    color: var(--muted);
    white-space: nowrap;
}

/* phones: the "N دسترسی · N کاربر" line goes under the description, which keeps the full width */
@media (max-width: 560px) {
    .roles li {
        grid-template-columns: 36px minmax(0, 1fr) 34px;
        grid-template-areas: "icon who edit" "icon meta edit";
        row-gap: 4px;
    }

    .roles__icon {
        grid-area: icon;
    }

    .roles__who {
        grid-area: who;
    }

    .roles__meta {
        grid-area: meta;
        white-space: normal;
    }

    .roles li > :last-child {
        grid-area: edit;
    }
}

.perm-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.perm-groups .checks {
    flex-direction: column;
    gap: 6px;
}

@media (max-width: 720px) {
    .perm-groups {
        grid-template-columns: minmax(0, 1fr);
    }

    .members li {
        grid-template-columns: 38px minmax(0, 1fr) 34px;
    }

    .members__roles {
        display: none;
    }
}

/* ---- bank accounts */
.banks {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr));
}

.banks li {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 16px;
    padding: 24px;
    min-height: 190px;
}

.banks li.is-off {
    opacity: .7;
}

.banks .integ__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
}

.banks .integ__icon svg {
    width: 24px;
    height: 24px;
}

.banks .integ__body b {
    font-size: 17px;
}

.banks .integ__body p {
    margin-top: 4px;
}

.banks .integ__meta {
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
    font-size: var(--fs-md);
}

.bank__num {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
}

.bank__label {
    min-width: 84px;
    font-weight: 600;
    color: var(--ink);
}

.bank__num bdi {
    overflow-wrap: anywhere;
}

.bank__copy {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.bank__copy svg {
    width: 16px;
    height: 16px;
}

.bank__copy.is-done {
    color: var(--good);
    background: var(--good-bg);
}

@media (max-width: 720px) {
    /* the details take the full card width under the icon / edit row, so long numbers stay on one line */
    .banks li {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        grid-template-areas: "icon . edit" "body body body";
        gap: 12px;
        padding: 18px;
    }

    .banks .integ__icon {
        grid-area: icon;
        width: 44px;
        height: 44px;
    }

    .banks .integ__body {
        grid-area: body;
    }

    .banks li > :last-child {
        grid-area: edit;
    }

    .bank__label {
        min-width: 76px;
    }

    .bank__num bdi {
        overflow-wrap: normal;
        white-space: nowrap;
        font-size: var(--fs-sm);
    }
}

.banks .integ__actions {
    margin-top: 14px;
}

/* ---- sales channels added by hand (Settings → اتصال‌ها → کانال‌های فروش افزوده): one card, one row per channel */
.cchan-card .card__head .btn {
    flex-shrink: 0;
}

.cchan {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
    gap: 10px;
}

.cchan__row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--well);
    border: 1px solid var(--edge);
}

.cchan__row.is-off {
    opacity: .65;
}

.cchan__row .integ__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.cchan__name {
    display: block;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cchan__meta {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-sm);
    color: var(--muted);
}

.cchan__empty {
    grid-column: 1 / -1;
    padding: 18px 12px;
    border-radius: var(--r-md);
    border: 1px dashed var(--edge);
    color: var(--muted);
    font-size: var(--fs-sm);
    text-align: center;
}

@media (max-width: 560px) {
    .cchan-card .card__head {
        flex-wrap: wrap;
    }
}

.bank__balance {
    font-size: 16px;
}

/* ---- channel connection wizard (Settings → اتصال‌ها → راه‌اندازی گام‌به‌گام) */
.wiz {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 8px 0 24px;
}

.wiz__steps {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    counter-reset: none;
}

.wiz__steps li {
    position: relative;
}

.wiz__steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-inline-start: 31px;
    top: 52px;
    bottom: -6px;
    width: 2px;
    border-radius: 2px;
    background: var(--hair-2);
}

.wiz__step {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--r-md);
    text-align: start;
    color: var(--ink);
    transition: background-color .2s;
}

.wiz__step:not(:disabled):hover {
    background: var(--well);
}

.wiz__step:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.wiz__step.is-current {
    background: var(--card);
    border: 1px solid var(--edge);
    box-shadow: var(--shadow);
}

.wiz__n {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--hair-2);
    background: var(--solid);
    font-weight: 700;
    color: var(--muted);
}

.wiz__n svg {
    width: 18px;
    height: 18px;
}

.wiz__step.is-current .wiz__n {
    border-color: var(--night);
    background: var(--night);
    color: var(--night-ink);
}

.wiz__step.is-done .wiz__n {
    border-color: var(--good);
    background: var(--good-bg);
    color: var(--good);
}

.wiz__t {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wiz__t b {
    font-weight: 600;
}

.wiz__t small {
    font-size: var(--fs-xs);
    color: var(--muted);
}

.wiz__panel {
    padding: 28px;
}

.wiz__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wiz__count {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--acc-text);
}

.wiz__title {
    margin-top: -10px;
    font-size: 22px;
    font-weight: 700;
}

.wiz__lead {
    line-height: var(--lh-text);
    color: var(--muted);
}

.wiz__lead b, .wiz__list b {
    color: var(--ink);
}

.wiz__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-inline-start: 22px;
    list-style: persian;
    line-height: var(--lh-text);
}

.wiz__box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--r-md);
    line-height: var(--lh-text);
}

.wiz__box > svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
}

.wiz__box small {
    color: var(--muted);
}

.wiz__box--good {
    background: var(--good-bg);
}

.wiz__box--good > svg {
    color: var(--good);
}

.wiz__box--warn {
    background: var(--warn-bg);
}

.wiz__box--warn > svg {
    color: var(--warn);
}

.wiz__box--bad {
    background: var(--bad-bg);
    color: var(--bad);
}

.wiz__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.wiz__key pre {
    max-height: 240px;
    overflow: auto;
    margin-bottom: 10px;
    padding: 14px;
    border-radius: var(--r-md);
    background: var(--well);
    border: 1px solid var(--hair-2);
    font: 12px/1.55 Consolas, "Courier New", monospace;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-all;
    user-select: all;
}

.wiz textarea[dir="ltr"] {
    font: 13px/1.5 Consolas, "Courier New", monospace;
    text-align: left;
}

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

.wiz__checklist li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: var(--well);
}

.wiz__checklist li b {
    display: block;
    font-weight: 600;
}

.wiz__checklist li small {
    color: var(--muted);
}

.wiz__tick {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--solid);
    color: var(--muted);
}

.wiz__tick svg {
    width: 16px;
    height: 16px;
}

.wiz__checklist li.is-ok .wiz__tick {
    background: var(--good-bg);
    color: var(--good);
}

.wiz__roles {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: var(--well);
}

.wiz__roles label {
    position: relative;
    cursor: pointer;
}

.wiz__roles input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.wiz__roles span {
    display: block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: var(--fs-sm);
    color: var(--muted);
    white-space: nowrap;
    transition: background-color .2s, color .2s;
}

.wiz__roles input:focus-visible + span {
    outline: 2px solid var(--acc-text);
    outline-offset: 1px;
}

.wiz__roles input[value="import"]:checked + span {
    background: var(--good);
    color: #fff;
}

.wiz__roles input[value="cancel"]:checked + span {
    background: var(--bad);
    color: #fff;
}

.wiz__roles input[value="ignore"]:checked + span {
    background: var(--solid);
    color: var(--ink);
    box-shadow: var(--shadow);
}

.wiz__statuses td {
    vertical-align: middle;
}

.wiz__add {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.wiz__add .field {
    flex: 0 1 260px;
}

.wiz__more {
    padding-top: 16px;
    border-top: 1px solid var(--hair);
}

.wiz__foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--hair);
}

.wiz .integ__stats {
    margin-top: 0;
}

@media (max-width: 900px) {
    .wiz {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .wiz__steps {
        position: static;
        flex-direction: row;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .wiz__steps li:not(:last-child)::after {
        display: none;
    }

    .wiz__step {
        padding: 6px 10px 6px 6px;
    }

    .wiz__step:not(.is-current) .wiz__t {
        display: none;
    }

    .wiz__t small {
        display: none;
    }

    .wiz__t b {
        white-space: nowrap;
    }

    .wiz__n {
        width: 32px;
        height: 32px;
    }

    .wiz__panel {
        padding: 18px;
    }

    .wiz__title {
        font-size: 19px;
    }
}

@media (max-width: 560px) {
    .wiz__statuses th:nth-child(2), .wiz__statuses td:nth-child(2) {
        display: none;
    }

    .wiz__roles span {
        padding: 4px 8px;
    }

    .wiz__foot .btn {
        flex: 1;
        justify-content: center;
    }
}

/* sales channels (Settings → اتصال‌ها): same large cards as the bank accounts */
.channels {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr));
}

.channels li {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 16px;
    padding: 24px;
    min-height: 190px;
}

.channels .integ__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
}

.channels .integ__icon svg {
    width: 24px;
    height: 24px;
}

.channels .integ__body b {
    font-size: 17px;
}

.channels .integ__body p {
    margin-top: 4px;
}

.channels .integ__body bdi.ltr {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 8px;
    background: var(--well);
    font-size: var(--fs-sm);
    color: var(--ink);
}

.integ__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.integ__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 6px;
    border-radius: 12px;
    background: var(--well);
    text-align: center;
}

.integ__stat b {
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--ink);
}

.integ__stat small {
    font-size: var(--fs-xs);
    color: var(--muted);
    white-space: nowrap;
}

.integ__stat--on b {
    color: var(--good);
}

.integ__stat--warn {
    background: var(--warn-bg);
}

.integ__stat--warn b {
    color: var(--warn);
}

.integ__stat--bad {
    background: var(--bad-bg);
}

.integ__stat--bad b {
    color: var(--bad);
}

.channels .integ__meta {
    gap: 4px 16px;
    margin-top: 10px;
}

.channels .integ__error {
    margin-top: 10px;
    font-size: var(--fs-md);
}

.channels .integ__actions {
    margin-top: 14px;
}

@media (max-width: 720px) {
    .channels li {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        grid-template-areas: "icon . switch" "body body body";
        gap: 12px;
        padding: 18px;
    }

    .channels .integ__icon {
        grid-area: icon;
        width: 44px;
        height: 44px;
    }

    .channels .integ__body {
        grid-area: body;
    }

    .channels li > .switch {
        grid-area: switch;
    }

    .integ__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.integ li > .icon-btn {
    align-self: start;
}

/* ---- statement */
.dlg .statement-filters {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    max-width: 1240px;
    margin: 0 auto 16px;
}

.statement-filters .check {
    align-self: center;
}

.statement-filters .form-alert {
    flex-basis: 100%;
}

.statement-filters .field {
    width: 160px;
}

.statement-filters .field:has(select) {
    width: 200px;
}

.statement {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.statement__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
}

.statement__balances {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.statement__balances div {
    padding: 10px 14px;
    border-radius: var(--r-md);
    background: var(--card);
    border: 1px solid var(--edge);
}

.statement__balances dt {
    font-size: var(--fs-xs);
    color: var(--muted);
}

.statement__balances dd {
    font-weight: 600;
}

.table--statement {
    background: var(--card);
    border-radius: var(--r-md);
}

.table--statement td {
    padding: 9px 12px;
    font-size: var(--fs-sm);
}

.table--statement th {
    padding: 9px 12px;
}

.table--statement tr.is-reversal td {
    color: var(--muted);
    font-style: italic;
}

.table--statement tr.is-link {
    cursor: pointer;
}

.table--statement tr.is-link:hover td {
    background: var(--well);
}

/* ---- print: only #print-root (an invoice sheet, a statement or a report) reaches the paper */
#print-root {
    display: none;
}

@media print {
    @page {
        size: A4;
        margin: 12mm;
    }

    html.is-printing, html.is-printing body {
        background: #fff !important;
    }

    html.is-printing body > *:not(#print-root) {
        display: none !important;
    }

    html.is-printing #print-root {
        display: block;
        color: #17171b;
        --ink: #17171b;
        --muted: #55534e;
        --card: #fff;
        --card-2: #f4f2ec;
        --solid: #fff;
        --well: #f4f2ec;
        --hair: #dcd8cd;
        --hair-2: #c9c4b6;
        --edge: #dcd8cd;
        --night: #17171b;
        --night-ink: #fff;
        --acc: #e3a81f;
        --acc-soft: #fbe4a6;
        --shadow: none;
    }
}

/* ---- a report on paper (printNode frames it as .sheet--report, see sheet.css): compact ink-on-paper
   blocks instead of screen cards. Scoped to #print-root, which is hidden on screen. */
#print-root .sheet--report {
    font-size: 11px;
}

#print-root .rprint {
    margin-top: 12px;
}

#print-root .rprint .report-body, #print-root .rprint > .card {
    display: block;
    opacity: 1;
}

#print-root .rprint .report-body > * + *, #print-root .rprint .rep-grid + *, #print-root .rprint .minis + * {
    margin-top: 12px;
}

#print-root .rprint .minis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

#print-root .rprint .minis--split {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

#print-root .rprint .minis + .minis {
    margin-top: 6px;
}

#print-root .rprint .mini {
    gap: 0;
    padding: 6px 9px;
    border: 1px solid #d8d4c8;
    border-radius: 4px;
    background: #fff;
    box-shadow: none;
    break-inside: avoid;
}

#print-root .rprint .mini__label {
    font-size: 9.5px;
    color: #5c5a55;
}

#print-root .rprint .mini__num {
    font-size: 14px;
    line-height: 1.5;
}

#print-root .rprint .minis--split .mini__num {
    font-size: 12px;
}

#print-root .rprint .mini .muted, #print-root .rprint .mini .delta {
    font-size: 8.5px;
}

#print-root .rprint .delta svg {
    width: 9px;
    height: 9px;
}

#print-root .rprint .rep-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

#print-root .rprint .rep-grid--even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#print-root .rprint .card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    break-inside: auto;
}

#print-root .rprint .card__head {
    display: block;
    margin: 0 0 4px;
    padding: 0 0 3px;
    border-bottom: 1.5px solid #17171b;
}

#print-root .rprint .card__title {
    font-size: 12.5px;
    font-weight: 800;
}

#print-root .rprint .card__title .pill {
    margin-inline-start: 6px;
}

#print-root .rprint .card__sub {
    margin: 0;
    font-size: 9.5px;
    color: #5c5a55;
}

#print-root .rprint .table-wrap {
    overflow: visible;
    margin: 0;
}

#print-root .rprint .table {
    width: 100%;
    min-width: 0;
    margin: 0;
    border-collapse: collapse;
    font-size: 9.5px;
    break-inside: auto;
}

#print-root .rprint .table th {
    padding: 4px 5px;
    background: #17171b;
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    border: 0;
}

#print-root .rprint .table thead tr + tr th {
    background: #3d3b37;
}

#print-root .rprint .table th[colspan] {
    text-align: center;
    border-inline-start: 1px solid #5c5a55;
}

#print-root .rprint .table td {
    padding: 3px 5px;
    border-bottom: 1px solid #e3dfd4;
    color: #17171b;
    background: #fff;
    text-align: right;
    vertical-align: top;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

#print-root .rprint .table td:first-child {
    white-space: normal;
}

#print-root .rprint .table th.num, #print-root .rprint .table td.num {
    text-align: left;
}

#print-root .rprint .table tbody tr:nth-child(even) td {
    background: #faf8f2;
}

#print-root .rprint .table tr {
    break-inside: avoid;
}

#print-root .rprint .table thead {
    display: table-header-group;
}

#print-root .rprint .table td small, #print-root .rprint .table td .muted {
    color: #5c5a55;
}

#print-root .rprint .table td span.muted {
    font-size: inherit;
}

#print-root .rprint .table tr.table__group td {
    padding-top: 7px;
    background: #fff;
    border-bottom: 1px solid #17171b;
    font-size: 9.5px;
    font-weight: 800;
    color: #17171b;
}

#print-root .rprint .table tr.table__total td {
    background: #f1eee5;
    border-top: 1.5px solid #17171b;
    font-weight: 800;
}

#print-root .rprint .table tr.table__grand td {
    background: #fdf3d6;
    border-bottom: 1.5px solid #17171b;
}

#print-root .rprint .table tr.is-group td {
    font-weight: 700;
}

#print-root .rprint .table tr.is-warn td {
    background: #fdf3d6;
}

#print-root .rprint .table tr.live-state td {
    padding: 10px;
    color: #5c5a55;
    text-align: center;
}

#print-root .rprint .acc-name {
    padding-inline-start: calc(var(--depth, 0) * 10px);
}

#print-root .rprint .is-neg {
    color: #b9392f;
}

#print-root .rprint .stock-inf {
    color: #17171b;
}

#print-root .rprint .pill {
    height: auto;
    padding: 0 5px;
    border: 1px solid currentColor;
    border-radius: 3px;
    background: none;
    font-size: 8.5px;
    line-height: 1.5;
}

#print-root .rprint .pill i {
    display: none;
}

#print-root .rprint .demo-note {
    margin-top: 10px;
    padding: 6px 9px;
    border: 1px solid #d8d4c8;
    border-radius: 4px;
    background: #faf8f2;
    color: #3d3b37;
    font-size: 9.5px;
    break-inside: avoid;
}

#print-root .rprint .kv {
    gap: 4px 14px;
    margin-top: 4px;
    font-size: 10.5px;
}

#print-root .rprint .kv dt {
    font-size: 9px;
}

#print-root .rprint .chart-box {
    height: 190px;
}

#print-root .rprint .chart__svg text {
    fill: #3d3b37;
}

#print-root .rprint .chart__grid line {
    stroke: #e3dfd4;
}

#print-root .rprint .hbar {
    padding: 2px 0;
}

#print-root .rprint .hbar__track {
    background: #f1eee5;
}

#print-root .rprint .table td.small {
    min-width: 160px;
    font-size: 9px;
    white-space: normal;
}

#print-root .rprint .table tr.table__grand td {
    font-size: 10.5px;
}

#print-root .rprint .audit-meta {
    padding: 0;
    background: none;
}

@media print {
    /* a long table may run over pages; rows and small blocks may not */
    html.is-printing #print-root .sheet--report table {
        break-inside: auto;
    }

    html.is-printing #print-root .rprint .card__head {
        break-after: avoid;
    }
}