/*
 * DataShells UI system
 *
 * This file is the single normalization layer for shared interface primitives.
 * Feature-specific layouts remain in app.css; reusable geometry, typography,
 * interaction states and overflow protection live here.
 */

:root {
    --muted: #5d687c;
    --ui-font-family: var(--font, "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif);

    --ui-font-caption: clamp(12px, calc(.62rem + .14vw), 14px);
    --ui-font-control: clamp(13px, calc(.65rem + .15vw), 15px);
    --ui-font-body: clamp(14px, calc(.75rem + .15vw), 17px);
    --ui-font-block-title: clamp(16px, calc(.8rem + .25vw), 20px);
    --ui-font-section-title: clamp(22px, calc(1rem + .45vw), 30px);
    --ui-font-page-title: clamp(28px, calc(1.25rem + .95vw), 40px);

    /* Dense dashboard indicators need a stronger wide-screen scale than copy. */
    --ui-font-indicator-caption: clamp(12px, calc(.62rem + .14vw), 14px);
    --ui-font-indicator-text: clamp(12px, calc(.65rem + .15vw), 15px);
    --ui-font-indicator-value: clamp(16px, calc(.75rem + .3vw), 20px);
    --ui-font-indicator-title: clamp(17px, calc(.78rem + .3vw), 22px);

    --ui-line-compact: 1.25;
    --ui-line-body: 1.5;
    --ui-line-copy: 1.65;

    --ui-space-1: 4px;
    --ui-space-2: 6px;
    --ui-space-3: 9px;
    --ui-space-4: 12px;
    --ui-space-5: 15px;
    --ui-space-6: 18px;
    --ui-space-8: 24px;

    --ui-radius-xs: 8px;
    --ui-radius-sm: 10px;
    --ui-radius-md: 12px;
    --ui-radius-lg: 18px;

    --ui-control-height-sm: 32px;
    --ui-control-height: 36px;
    --ui-control-height-lg: 44px;
    --ui-icon-size: 18px;
    --ui-icon-button-size: 32px;
    --ui-heading-action-height: 32px;
    --ui-heading-column-width: clamp(190px, 16vw, 224px);

    --ui-control-bg: var(--surface, #fff);
    --ui-control-bg-hover: color-mix(in srgb, var(--surface, #fff) 92%, var(--primary) 8%);
    --ui-control-border: var(--line, #e7eaf1);
    --ui-control-border-hover: color-mix(in srgb, var(--primary) 34%, var(--line, #e7eaf1));
    --ui-placeholder: color-mix(in srgb, var(--muted, #697386) 78%, transparent);
    --ui-focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
    --ui-disabled-opacity: .56;
    --ui-transition: 160ms ease;

    --ui-panel-bg: var(--surface, #fff);
    --ui-panel-border: var(--line, #e7eaf1);
    --ui-panel-shadow: var(--shadow-sm, 0 8px 30px rgba(28, 36, 61, .06));

    /* Compatibility aliases used by existing feature styles. */
    --control-height: var(--ui-control-height);
    --control-height-compact: var(--ui-control-height-sm);
    --control-radius: var(--ui-radius-sm);
    --ui-text: var(--ui-font-body);
    --ui-caption: var(--ui-font-caption);
}

html[data-theme="dark"] {
    --ui-control-bg: #111a27;
    --ui-control-bg-hover: #172235;
    --ui-placeholder: #7f8da2;
}

body {
    font-family: var(--ui-font-family);
    font-size: var(--ui-font-body);
    line-height: var(--ui-line-body);
    text-rendering: optimizeLegibility;
}

:is(.workspace-page, .admin-portal-page, .auth-page) {
    color: var(--ink);
    font-family: var(--ui-font-family);
    font-size: var(--ui-font-body);
}

/* Typography hierarchy */
:is(.workspace-page, .admin-portal-page) .page-heading h1 {
    margin-block: var(--ui-space-2);
    font-size: var(--ui-font-page-title);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.035em;
}

:is(.workspace-page, .admin-portal-page) :is(.section-heading-inline, .section-heading) h2 {
    font-size: var(--ui-font-section-title);
    line-height: 1.2;
    letter-spacing: -.025em;
}

:is(.workspace-page, .admin-portal-page) :is(.panel-head, .modal-head) h2,
:is(.workspace-page, .admin-portal-page) .panel h3 {
    font-size: var(--ui-font-block-title);
    line-height: 1.3;
}

:is(.workspace-page, .admin-portal-page) :is(.page-heading, .panel-head, .modal-head) p {
    color: var(--muted);
    font-size: var(--ui-font-control);
    line-height: var(--ui-line-copy);
}

/* Compact page headings: title and a bounded action group share a desktop row.
 * Two equal tracks are created only when both actions and an actuality exist.
 * Empty/missing actuality slots never reserve an invisible column. */
:is(.workspace-page, .admin-portal-page) .page-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    justify-content: stretch;
    column-gap: var(--ui-space-4);
    row-gap: var(--ui-space-2);
    margin-bottom: var(--ui-space-4);
}
:is(.workspace-page, .admin-portal-page) .page-heading > :first-child {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}
:is(.workspace-page, .admin-portal-page) .page-heading-actions {
    width: auto;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    display: flex;
    align-items: start;
    gap: var(--ui-space-2);
}
:is(.workspace-page, .admin-portal-page) .page-heading-actions:has(.page-heading-actuality-slot > *):has(.page-heading-action-row > *) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, var(--ui-heading-column-width)));
}
:is(.workspace-page, .admin-portal-page) .page-heading-actuality-slot {
    width: var(--ui-heading-column-width);
    min-width: 0;
    max-width: 100%;
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    display: grid;
    align-content: start;
    justify-items: stretch;
}
:is(.workspace-page, .admin-portal-page) .page-heading-actuality-slot:not(:has(> *)),
:is(.workspace-page, .admin-portal-page) .page-heading-action-row:empty {
    display: none;
}
:is(.workspace-page, .admin-portal-page) .page-heading-actions :is(
    .global-data-actuality.is-mounted, .stocks-live-state,
    .orders-sync-time, [data-page-actuality]
) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
:is(.workspace-page, .admin-portal-page) .page-heading-actuality-slot > .stocks-live-state {
    padding: 6px 10px;
    column-gap: 6px;
    row-gap: 2px;
}
:is(.workspace-page, .admin-portal-page) .page-heading-action-row {
    width: var(--ui-heading-column-width);
    min-width: 0;
    max-width: 100%;
    grid-column: 1;
    grid-row: 1;
    justify-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ui-space-2);
}
:is(.workspace-page, .admin-portal-page) .page-heading-action-row .section-analysis-actions {
    display: contents;
    margin: 0;
}
:is(.workspace-page, .admin-portal-page) .page-heading-action-row .button,
:is(.workspace-page, .admin-portal-page) .page-heading-action-row.is-single .button {
    width: 100%;
    height: var(--ui-heading-action-height);
    min-height: var(--ui-heading-action-height);
    max-width: 100%;
    padding-inline: 10px;
    border-radius: var(--ui-radius-sm);
    font-size: var(--ui-font-control);
    line-height: 1;
}
:is(.workspace-page, .admin-portal-page) .page-heading-actions:has(.page-heading-action-row .section-analysis-actions) .page-heading-actuality-slot > :is(.stocks-live-state, .global-data-actuality.is-mounted, [data-page-actuality]) {
    min-height: calc(var(--ui-heading-action-height) * 2 + var(--ui-space-2));
    align-content: center;
}
:is(.workspace-page, .admin-portal-page) .page-heading-inline-action {
    width: fit-content;
    max-width: 100%;
    min-height: var(--ui-heading-action-height);
    margin-top: var(--ui-space-2);
}
/* Legacy direct action/status children retain their existing non-overlap rules. */
:is(.workspace-page, .admin-portal-page) .page-heading > :is(.company-page-actions, [class$="-page-actions"]) {
    width: 100%;
    min-width: 0;
    margin: 0;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    justify-content: flex-start;
}
:is(.workspace-page, .admin-portal-page) .page-heading > :is(
    .stocks-live-state, .orders-sync-time, .admin-badge,
    .admin-modules-total, .advertising-plan-state, .status, [data-page-actuality]
) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
}

:is(.workspace-page, .admin-portal-page) small,
.auth-page small {
    font-size: max(var(--ui-font-caption), .8em);
    line-height: 1.45;
}

:is(.workspace-page, .admin-portal-page) :is(p, span, strong, small, em, a, button, label, dt, dd, th, td),
.auth-page :is(p, span, strong, small, em, a, button, label) {
    overflow-wrap: anywhere;
}

/* Meaningful captions share a scale; miniature illustration content is separate. */
body:is(.workspace-page, .admin-portal-page, .auth-page) :is(
    .account-email-state, .scheduler-state, .pricing-state, .journal-count,
    .global-console-kicker, .global-script-status, .admin-portal-label,
    .global-data-actuality > span, .sync-note, .stocks-value-check,
    .eyebrow, .admin-badge, .stocks-live-state > span,
    .stocks-summary article > span, .stocks-view-modes > span,
    .stocks-view-modes > a, .stock-source, .stock-value-toggle b,
    .export-meta span, .export-meta b, .feed-toggle b,
    .orders-pagination > a, .orders-pagination > span,
    .script-run-monitor-head span, .script-run-live, .script-run-empty,
    .script-marketplace-badge, .connected-total, .admin-brand-label,
    .company-service-link > b, .company-stores-toggle b,
    .batch-script-picker > legend, .stocks-stats article > span,
    .orders-stats article > span, .fbs-orders-stats article > span,
    .supplies-stats article > span, .supply-detail-grid article > span,
    .supply-products-section > header > div > span,
    .unit-calculation-intro > span, .unit-economics-intro > span,
    .unit-calculation-intro > strong, .unit-economics-intro > strong,
    .integration-summary > article > span,
    .cost-summary article > span, .products-storage-card p, .cost-import-body p,
    .product-marketplace-chip, .product-status, .cost-period strong,
    .cost-history-button > b, .cost-period-hint > span, .cost-period-hint > strong,
    .unit-summary article > span, .unit-formula-guide summary,
    .unit-formula-guide p, .unit-formula-guide p > b, .unit-autosave-state,
    .unit-result-bar > span, .unit-article-line > span,
    .product-abc-14d > b, .product-abc-14d .finance-abc,
    .unit-taxes > span, .unit-taxes b,
    .supply-id-cell > i, .supply-goods-table th, .supply-kiz,
    .supply-discrepancies-section > header > div > span,
    .admin-ozon-logistics-status > strong, .admin-ozon-logistics-status > span,
    .account-email-hint, .company-password-settings-copy strong,
    .company-team-shortcut strong, .company-team-shortcut > b, .tariff-label,
    .tariff-card-main p, .marketplace-title p, .store-info > strong,
    .workspace > .container > p.muted, .settings-security-note strong
) {
    font-size: var(--ui-font-caption);
    line-height: 1.45;
}
body:is(.workspace-page, .admin-portal-page) :is(.supply-discrepancy-filter > span, .supply-discrepancy-kind) {
    font-size: var(--ui-font-caption) !important;
}
body:is(.workspace-page, .admin-portal-page) .product-abc-14d .finance-abc {
    height: auto;
    min-height: 24px;
}
body:is(.workspace-page, .admin-portal-page) .unit-result-actions .unit-export-button {
    font-size: var(--ui-font-control);
    height: auto;
    min-height: var(--ui-control-height-sm);
}
body:is(.workspace-page, .admin-portal-page, .auth-page) small:not(:where(.training-invite-shot *, .catalog-tour-shot *)) {
    /* Local dense-section rules must not shrink meaningful helper copy. */
    font-size: max(var(--ui-font-caption), .8em) !important;
    line-height: 1.45;
}
body:is(.workspace-page, .admin-portal-page) :is(
    .stocks-stats article > span, .orders-stats article > span,
    .fbs-orders-stats article > span, .supplies-stats article > span,
    .sync-note, .batch-script-picker > legend, .stocks-summary article > span,
    .stocks-live-state > span, .stocks-view-modes > span, .export-meta span
) { color: var(--muted); }
body.auth-page :is(.auth-divider span, .auth-note) {
    color: var(--muted);
    font-size: var(--ui-font-caption);
    line-height: 1.5;
}
body :is(.connected-total, .orders-fast-note, .stores-empty p, .settings-security-note p) {
    color: var(--muted);
    font-size: var(--ui-font-caption);
    line-height: 1.5;
}
body :is(.stocks-summary, .fbs-orders-stats, .orders-stats, .supplies-stats) article > small {
    color: var(--muted);
}
body .add-store-button:not(:disabled) {
    color: var(--ink);
    font-size: var(--ui-font-control);
}
body .company-danger-zone :is(strong, p) {
    font-size: var(--ui-font-caption);
    line-height: 1.5;
}
body .company-danger-zone p { color: var(--muted); }
body:is(.workspace-page, .admin-portal-page) :is(
    .orders-panel-head p, .monthly-total > span,
    .billing-breakdown small, .billing-breakdown em,
    .billing-period-status p, .billing-period-status small
) {
    color: var(--muted);
    font-size: var(--ui-font-caption);
    line-height: 1.5;
}
body:is(.workspace-page, .admin-portal-page) :is(.field, .feed-form-field) > small {
    color: var(--muted);
}
body .site-footer .footer-inner { color: var(--muted); }
body .admin-brand-label { color: var(--primary-dark); }
body .admin-ozon-logistics-status.is-missing > strong { color: #895013; }
/* Badge text is distinct from indicator colors, for contrast in both themes. */
body :is(.account-email-state-ready, .pricing-state.configured, .scheduler-state-on) {
    color: #146345;
}
html[data-theme="dark"] body :is(
    .account-email-state-ready, .pricing-state.configured, .scheduler-state-on,
    .status-approved, .journal-count-success
) { color: #79e5bd; }
html[data-theme="dark"] body :is(.export-actions .button-secondary, .batch-script-picker > legend) {
    color: var(--muted);
}
html[data-theme="dark"] body .journal-count-error { color: #ff9cac; }
html[data-theme="dark"] body .journal-count-other { color: #cdb8ff; }
html[data-theme="dark"] body .pricing-state:not(.configured) { color: #ffd080; }
html[data-theme="dark"] body .admin-ozon-logistics-status.is-missing > strong { color: #ffd080; }
html[data-theme="dark"] body :is(.admin-brand-label, .company-service-link > b, .company-stores-toggle b) {
    color: var(--primary-dark);
}
html[data-theme="dark"] body .company-danger-zone strong { color: var(--red); }
html[data-theme="dark"] body .button-primary {
    color: #fff;
    background: #5556d8;
    border-color: #8384ff;
}
html[data-theme="dark"] body .button-primary:hover { background: #4849c7; }
body .script-run-live { color: #146345 !important; }
html[data-theme="dark"] body .script-run-live { color: #79e5bd !important; }
.batch-schedule-list-head p { color: var(--muted); font-size: var(--ui-font-caption); }
.sync-note.is-empty > i { background: var(--muted); }
.stocks-live-state.is-empty > i { background: var(--muted); }

/* Shared controls */
:is(.workspace-page, .admin-portal-page) :is(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea
) {
    min-width: 0;
    max-width: 100%;
    color: var(--ink);
    background-color: var(--ui-control-bg);
    border: 1px solid var(--ui-control-border);
    border-radius: var(--ui-radius-sm);
    font-family: var(--ui-font-family);
    font-size: var(--ui-font-control);
    line-height: var(--ui-line-compact);
    transition: background-color var(--ui-transition), border-color var(--ui-transition), box-shadow var(--ui-transition);
}

:is(.workspace-page, .admin-portal-page) :is(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select
) {
    height: var(--ui-control-height);
    min-height: var(--ui-control-height);
    padding-block: 0;
    padding-inline: var(--ui-space-3);
}

:is(.workspace-page, .admin-portal-page) select:not([multiple]) {
    padding-right: var(--ui-space-8) !important;
    background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50% !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(.workspace-page, .admin-portal-page) textarea {
    min-height: 96px;
    padding: 10px var(--ui-space-3);
    resize: vertical;
}

:is(.workspace-page, .admin-portal-page) :is(
    .field,
    .form-field,
    .feed-form-field,
    [class*="filter-form"] > label,
    [class*="-filters"] > label,
    [class*="-form-grid"] > label
) > :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .input-wrap) {
    width: 100%;
}

:is(.workspace-page, .admin-portal-page) :is(input, textarea)::placeholder,
.auth-page :is(input, textarea)::placeholder {
    color: var(--ui-placeholder);
    opacity: 1;
}

:is(.workspace-page, .admin-portal-page) :is(input, select, textarea):hover:not(:disabled):not(:focus) {
    border-color: var(--ui-control-border-hover);
}

:is(.workspace-page, .admin-portal-page, .auth-page) :is(input, select, textarea):focus-visible {
    border-color: var(--primary);
    box-shadow: var(--ui-focus-ring);
    outline: 0;
}

:is(.workspace-page, .admin-portal-page, .auth-page) :is(input, select, textarea):user-invalid,
:is(.workspace-page, .admin-portal-page, .auth-page) :is(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--red);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 16%, transparent);
}

:is(.workspace-page, .admin-portal-page, .auth-page) :is(input, select, textarea, button):disabled,
:is(.workspace-page, .admin-portal-page, .auth-page) [aria-disabled="true"] {
    cursor: not-allowed;
    opacity: var(--ui-disabled-opacity);
}

:is(.workspace-page, .admin-portal-page) :is(input, textarea)[readonly] {
    background: var(--soft);
    color: var(--muted);
}

/* Form labels share one baseline, regardless of feature grid. */
:is(.workspace-page, .admin-portal-page) :is(
    .field,
    .form-field,
    .feed-form-field,
    [class*="filter-form"] > label,
    [class*="-filters"] > label,
    [class*="-form-grid"] > label
) > :is(span, label):first-child {
    min-height: 16px;
    margin: 0 0 var(--ui-space-1);
    display: flex;
    align-items: flex-end;
    color: var(--muted);
    font-size: var(--ui-font-caption);
    font-weight: 750;
    line-height: var(--ui-line-compact);
}

:is(.workspace-page, .admin-portal-page) :is(
    [class*="filter-form"],
    [class*="-filters"],
    [class*="-form-grid"]
) > * {
    min-width: 0;
}

/* Buttons */
.button {
    min-height: var(--ui-control-height);
    padding: 0 var(--ui-space-4);
    gap: var(--ui-space-2);
    border-radius: var(--ui-radius-sm);
    font-family: var(--ui-font-family);
    font-size: var(--ui-font-control);
    font-weight: 750;
    line-height: var(--ui-line-compact);
    text-align: center;
    transition: color var(--ui-transition), background-color var(--ui-transition), border-color var(--ui-transition), box-shadow var(--ui-transition), transform var(--ui-transition);
}

.button-small {
    min-height: var(--ui-control-height-sm);
    padding-inline: var(--ui-space-3);
    border-radius: var(--ui-radius-xs);
    font-size: var(--ui-font-control);
}

.button-large {
    min-height: var(--ui-control-height-lg);
    padding-inline: var(--ui-space-6);
    border-radius: var(--ui-radius-md);
}

.button svg {
    width: var(--ui-icon-size);
    height: var(--ui-icon-size);
    flex: 0 0 var(--ui-icon-size);
}

.icon-button,
.theme-toggle,
.modal-close {
    width: var(--ui-icon-button-size);
    height: var(--ui-icon-button-size);
    min-width: var(--ui-icon-button-size);
    min-height: var(--ui-icon-button-size);
    padding: 0;
    flex: 0 0 var(--ui-icon-button-size);
    border-radius: var(--ui-radius-sm);
}

:is(.button, .icon-button, .theme-toggle, .modal-close, .nav-toggle, summary, a):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 32%, transparent);
    outline-offset: 2px;
}

.button:disabled:hover,
.button[aria-disabled="true"]:hover {
    box-shadow: none;
    transform: none;
}

/* Native checkboxes/radios that are not replaced by a switch. */
:is(.check-field, .scheduler-store-list, .parallel-option, .stocks-source-switches, .warehouse-picker, .stock-value-toggle, .batch-script-grid) input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    margin: 0;
    flex: 0 0 18px;
    align-self: center;
    accent-color: var(--primary);
}

/* Panels, cards and modal surfaces */
:is(.workspace-page, .admin-portal-page) .panel {
    min-width: 0;
    max-width: 100%;
    color: var(--ink);
    background: var(--ui-panel-bg);
    border-color: var(--ui-panel-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-panel-shadow);
}

:is(.workspace-page, .admin-portal-page) .panel-head {
    min-height: 64px;
    padding: var(--ui-space-3) var(--ui-space-4);
    gap: var(--ui-space-4);
    border-bottom-color: var(--ui-panel-border);
}

:is(.workspace-page, .admin-portal-page) :is(.panel, article, section, form, fieldset, .page-heading, .panel-head, .modal-head) > * {
    min-width: 0;
    max-width: 100%;
}

.modal-card,
.section-guide-shell,
dialog {
    color: var(--ink);
    background: var(--ui-panel-bg);
    border-color: var(--ui-panel-border);
}

.modal-card {
    width: min(100%, 680px);
    max-height: calc(100dvh - 32px);
    padding: var(--ui-space-6);
    border: 1px solid var(--ui-panel-border);
    border-radius: var(--ui-radius-lg);
}

.modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
}

/* Tables */
.ui-chart-tooltip {
    position: fixed !important;
    inset: auto;
    inset-block-end: auto !important;
    inset-inline-end: auto !important;
    margin: 0 !important;
    transform: none !important;
    box-sizing: border-box;
    width: max-content;
    min-width: 0 !important;
    max-width: min(320px, calc(100vw - 16px)) !important;
    max-height: calc(100dvh - 16px);
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    font: var(--ui-font-control)/1.45 var(--ui-font-family);
    overflow: auto;
    overflow-wrap: anywhere;
    white-space: normal !important;
    pointer-events: none;
    z-index: 10000;
}
.ui-chart-tooltip[hidden] { display: none !important; }
.ui-chart-tooltip :is(strong, span, small) { white-space: normal; overflow-wrap: anywhere; font-size: var(--ui-font-control); }
.ui-chart-tooltip strong { display: block; margin-bottom: 6px; }
[data-ui-submit-lock] { cursor: wait; opacity: .65; }
.script-run-connection-status {
    margin: var(--ui-space-3) 0;
    padding: var(--ui-space-3);
    border: 1px solid var(--orange);
    border-radius: var(--ui-radius-sm);
    color: var(--ink);
    background: var(--orange-soft);
    font-size: var(--ui-font-control);
    line-height: var(--ui-line-body);
}
.script-run-connection-status[hidden] { display: none; }

.table-scroll,
[class$="-table-scroll"],
[class*="-table-scroll "],
.price-matrix-scroll,
.ai-ratings-table-wrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: auto;
    overscroll-behavior-inline: contain;
    overscroll-behavior-block: auto;
    scrollbar-gutter: stable;
    scrollbar-color: color-mix(in srgb, var(--primary) 48%, var(--line)) color-mix(in srgb, var(--soft) 88%, transparent);
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
}

:is(.table-scroll, .price-matrix-scroll, .ai-ratings-table-wrap)::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

:is(.table-scroll, .price-matrix-scroll, .ai-ratings-table-wrap)::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--soft) 88%, transparent);
}

:is(.table-scroll, .price-matrix-scroll, .ai-ratings-table-wrap)::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--primary) 48%, var(--line));
    border: 3px solid color-mix(in srgb, var(--soft) 88%, transparent);
    border-radius: 999px;
}

[data-ui-scrollable-x="true"] { cursor: grab; }
[data-ui-scrollable-x="true"].is-drag-scrolling {
    cursor: grabbing;
    scroll-behavior: auto;
    user-select: none;
}
[data-ui-scrollable-x="true"] :is(input, textarea, [contenteditable]) { cursor: text; }
[data-ui-scrollable-x="true"] :is(a, button, select, label, summary, [role="button"]) { cursor: pointer; }
[data-ui-scrollable-x="true"]:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 32%, transparent);
    outline-offset: -3px;
}

/* ui-core adds this marker only to ordinary direct-child tables with a visible
   header. UNIT, matrices and other owned layouts keep their specialised sticky
   intersections; responsive card tables lose the marker when thead is hidden. */
[data-ui-sticky-table-header="true"] {
    max-height: min(70dvh, 760px);
    overflow: auto;
    overscroll-behavior: contain;
}

[data-ui-sticky-table-header="true"] > table > thead {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    background: var(--soft);
    box-shadow: 0 1px 0 var(--line);
}

[data-ui-sticky-table-header="true"] > table > thead > tr > th {
    background: var(--soft);
}

.data-table {
    min-width: 720px;
    color: var(--ink);
    font-size: var(--ui-font-control);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.data-table th {
    height: 40px;
    padding: 10px var(--ui-space-3);
    color: var(--muted);
    background: var(--soft);
    border-color: var(--line);
    font-size: var(--ui-font-caption);
    font-weight: 800;
    line-height: 1.25;
    vertical-align: middle;
}

.data-table td {
    min-height: 44px;
    padding: 11px var(--ui-space-3);
    border-color: var(--line);
    font-size: var(--ui-font-control);
    line-height: 1.4;
    vertical-align: middle;
}

.data-table td > :is(strong, small) {
    display: block;
}

.data-table td > small {
    margin-top: var(--ui-space-1);
    color: var(--muted);
    font-size: var(--ui-font-caption);
}
body:is(.workspace-page, .admin-portal-page) .data-table td[data-label]::before {
    font-size: var(--ui-font-caption);
    line-height: 1.45;
    color: var(--muted);
}

.data-table :is(
    td[data-label="Товар"],
    td[data-label*="Наименование"],
    td[data-label*="Комментарий"],
    td[data-label*="Ошибка"]
) {
    max-width: 380px;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Protect identifier and product columns only while these tables are tabular. */
@media (min-width: 601px) {
    body.stocks-page .stocks-table td[data-label="Тип"] {
        min-width: 76px;
        white-space: nowrap;
        overflow-wrap: normal;
    }
    body.stocks-page .stocks-table td[data-label="Товар"] { min-width: 280px; }
    body.stocks-page .stocks-table td[data-label="SKU / штрихкод"] {
        min-width: 160px;
        white-space: nowrap;
        overflow-wrap: normal;
    }
    body.stocks-page .stocks-table td[data-label="Магазин"],
    body.stocks-page .stocks-table td[data-label="Склад"] {
        min-width: 180px;
        max-width: 260px;
        white-space: normal;
    }
}
@media (min-width: 721px) {
    body.product-costs-page .cost-catalog-table td[data-label="SKU"] {
        min-width: 160px;
        white-space: nowrap;
        overflow-wrap: normal;
    }
    body.product-costs-page .cost-catalog-table td[data-label="Товар"] { min-width: 280px; }
    body.product-costs-page .cost-catalog-table td[data-label="Маркетплейс / магазин"] {
        min-width: 180px;
        max-width: 260px;
        white-space: normal;
    }
}

.data-table tbody tr:hover {
    background: color-mix(in srgb, var(--primary) 3%, var(--surface));
}

.data-table :is(th, td) > * {
    min-width: 0;
    max-width: 100%;
}

.data-table :is(
    td[data-label*="Сумма"],
    td[data-label*="Цена"],
    td[data-label*="Выручка"],
    td[data-label*="Прибыль"],
    td[data-label*="Комиссия"],
    td[data-label*="ДРР"],
    td[data-label*="CTR"],
    td[data-label*="%"]
) {
    text-align: right;
}

.data-table :is(td[data-label*="Дата"], td[data-label*="Статус"]) {
    text-align: center;
}

/* Status, toast and empty states */
.status {
    min-height: 24px;
    padding: var(--ui-space-1) var(--ui-space-2);
    border-radius: var(--ui-radius-xs);
    font-size: var(--ui-font-caption);
    line-height: var(--ui-line-compact);
}

.toast {
    min-height: 48px;
    padding: var(--ui-space-3);
    gap: var(--ui-space-3);
    color: var(--ink);
    background: var(--ui-panel-bg);
    border-color: var(--ui-panel-border);
    border-radius: var(--ui-radius-md);
    font-size: var(--ui-font-control);
    line-height: var(--ui-line-body);
}

.empty-state {
    padding: var(--ui-space-8) var(--ui-space-4);
}

.empty-state h3 {
    font-size: var(--ui-font-block-title);
    line-height: 1.3;
}

.empty-state p {
    max-width: 560px;
    margin-inline: auto;
    font-size: var(--ui-font-control);
    line-height: var(--ui-line-copy);
}

/* Navigation */
.company-section-nav-frame,
.company-section-nav {
    min-width: 0;
    max-width: 100%;
}

.company-section-nav {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary) 28%, transparent) transparent;
}

.company-section-link {
    min-height: 48px;
    padding: var(--ui-space-2) var(--ui-space-3);
    border-radius: var(--ui-radius-sm);
}

.company-section-link strong {
    font-size: var(--ui-font-control);
    line-height: 1.25;
}

.company-section-link small {
    font-size: var(--ui-font-caption);
    line-height: 1.3;
}

.company-section-link[aria-current="page"] {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 32%, transparent);
}

/* Authentication keeps its generous field size while using the same tokens. */
.auth-page .form-grid { align-items: start; }

.auth-page .input-wrap :is(input, select) {
    height: var(--ui-control-height-lg);
    min-height: var(--ui-control-height-lg);
    border-radius: var(--ui-radius-md);
    font-size: var(--ui-font-control);
}

.auth-page .field > :is(span, label):first-child {
    color: var(--muted);
    font-size: var(--ui-font-control);
    line-height: 1.35;
}

.auth-page .auth-note,
.auth-page .auth-divider span {
    font-size: var(--ui-font-caption);
    line-height: var(--ui-line-body);
}

/* Responsive normalization */
/* SKU help occupies a separate row instead of shifting one RNP input upward. */
body.finance-rnp-page .rnp-filter-panel .rnp-filters { align-items: start; }
body.finance-rnp-page .rnp-filter-panel .rnp-filters > label {
    display: grid;
    grid-template-rows: 16px var(--ui-control-height-sm) auto;
    align-items: start;
    gap: 4px;
}
body.finance-rnp-page .rnp-filter-panel .rnp-filters > label > span {
    align-self: end;
    min-height: 0;
    margin: 0;
    font-size: var(--ui-font-caption);
    line-height: 1.4;
}
body.finance-rnp-page .rnp-filter-panel .rnp-filters :is(input, select, .button) {
    height: var(--ui-control-height-sm);
    min-height: var(--ui-control-height-sm);
}
body.finance-rnp-page .rnp-filter-actions { min-width: 0; padding-top: 20px; }
@media (min-width: 1181px) {
    body.finance-rnp-page .rnp-filters {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
    body.finance-rnp-page .rnp-filter-actions { grid-column: span 2; }
    body.finance-rnp-page .rnp-filters > label { grid-column: auto; }
}
@media (max-width: 1180px) {
    body.finance-rnp-page .rnp-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body.finance-rnp-page .rnp-filters > label,
    body.finance-rnp-page .rnp-filter-actions { grid-column: auto; }
    body.finance-rnp-page .rnp-filters > .rnp-product-filter { grid-column: span 2; }
}
body.finance-articles-page .finance-filters { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; gap: 8px; }
body.finance-articles-page .finance-filters > label { grid-column: auto; min-width: 0; }
body.finance-articles-page .finance-filter-actions { grid-column: auto; padding-top: 20px; }
@media (max-width: 1180px) {
    body.finance-articles-page .finance-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    body.finance-articles-page .finance-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.finance-articles-page .finance-filter-actions { grid-column: 1 / -1; padding-top: 0; }
}
@media (max-width: 700px) {
    body.finance-rnp-page .rnp-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.finance-rnp-page .rnp-filters > .rnp-product-filter { grid-column: auto; }
    body.finance-rnp-page .rnp-filter-panel .rnp-filters > label {
        grid-template-rows: 16px var(--ui-control-height-sm) auto;
    }
    body.finance-rnp-page .rnp-filter-actions { grid-column: 1 / -1; padding-top: 0; flex-direction: row; }
}
@media (min-width: 641px) and (max-width: 900px) {
    :is(.workspace-page, .admin-portal-page) .page-heading { grid-template-columns: minmax(0, 1fr); }
    :is(.workspace-page, .admin-portal-page) .page-heading-actions { grid-column: 1; grid-row: 2; }
}
@media (max-width: 900px) {
    :is(.workspace-page, .admin-portal-page) :is(
        [class*="filter-form"],
        [class*="-filters"]
    ) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :is(.workspace-page, .admin-portal-page) .panel-head {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    :is(.workspace-page, .admin-portal-page) :is(.panel-head, .page-heading) > :is(.button, form, [class*="actions"]) {
        max-width: 100%;
    }

    :is(.workspace-page, .admin-portal-page) .page-heading-actions {
        width: 100%;
    }
}

@media (max-width: 640px) {
    :is(.workspace-page, .admin-portal-page) .container {
        width: calc(100% - 24px);
    }

    :is(.workspace-page, .admin-portal-page) :is(
        [class*="filter-form"],
        [class*="-filters"]
    ) {
        grid-template-columns: minmax(0, 1fr);
    }

    :is(.workspace-page, .admin-portal-page) :is(
        [class*="filter-actions"],
        [class*="form-actions"],
        .modal-actions
    ) {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    :is(.workspace-page, .admin-portal-page) :is(
        [class*="filter-actions"],
        [class*="form-actions"],
        .modal-actions
    ) .button {
        width: 100%;
    }

    :is(.workspace-page, .admin-portal-page) .page-heading-actions {
        width: 100%;
        max-width: 100%;
        grid-column: 1;
        grid-row: 2;
        justify-self: stretch;
    }
    :is(.workspace-page, .admin-portal-page) .page-heading-actions:has(.page-heading-actuality-slot > *):has(.page-heading-action-row > *) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    :is(.workspace-page, .admin-portal-page) .page-heading-action-row {
        width: 100%;
        grid-column: 1;
        grid-row: 1;
        display: flex;
        flex-direction: column;
    }
    :is(.workspace-page, .admin-portal-page) .page-heading-actuality-slot {
        width: 100%;
        max-width: none;
        grid-column: 2;
        grid-row: 1;
        justify-self: stretch;
        justify-items: stretch;
    }

    :is(.workspace-page, .admin-portal-page) .page-heading {
        grid-template-columns: minmax(0, 1fr);
    }

    :is(.workspace-page, .admin-portal-page) .page-heading > :is(
        .stocks-live-state,
        .orders-sync-time,
        .admin-badge,
        .admin-modules-total,
        .advertising-plan-state,
        .status,
        [data-page-actuality]
    ) {
        width: min(100%, 320px);
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    :is(.workspace-page, .admin-portal-page) .page-heading > :is(
        .company-page-actions,
        [class$="-page-actions"]
    ) {
        grid-column: 1;
        grid-row: 2;
    }

    :is(.workspace-page, .admin-portal-page) .page-heading-action-row .button {
        width: 100%;
    }

    .button {
        white-space: normal;
    }

    .modal-card {
        padding: var(--ui-space-4);
    }

    .toast-stack {
        right: var(--ui-space-3);
        width: calc(100% - 24px);
    }
}

/* Opt-in card tables retain the column meaning on narrow screens. */
body.supplies-page .supply-card > summary :is(small, em) {
    font-size: var(--ui-font-caption);
    line-height: 1.45;
}
body.supplies-page .supply-card > summary b { font-size: var(--ui-font-body); }
body.supplies-page .supply-id-cell small {
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
}
@media (max-width: 700px) {
    body.supplies-page .supply-card > summary > :is(.supply-status-cell, .supply-date-cell) {
        display: grid;
        grid-column: 1 / -1;
        min-width: 0;
    }
    body.supplies-page .supply-card > summary > .supply-status-cell { grid-row: 2; }
    body.supplies-page .supply-card > summary > .supply-date-cell { grid-row: 3; }
    body.supplies-page .supply-card > summary > svg { grid-column: 2; grid-row: 1; }
    body.supplies-page .supply-status-cell .supply-status { width: fit-content; }
    /* Specific module spans must not create implicit mobile grid columns. */
    body .fbs-filter-form > label,
    body .fbs-filter-form .orders-search,
    body .fbs-filter-form .orders-filter-actions,
    body .advertising-keywords-filters > label,
    body .advertising-keywords-filters .advertising-sort-filter,
    body .advertising-keywords-filters .advertising-filter-actions {
        grid-column: 1 / -1 !important;
        width: 100%;
        min-width: 0;
    }
    body .fbs-filter-form,
    body .advertising-keywords-filters { grid-template-columns: minmax(0, 1fr); }
    body .admin-company-settings-page .export-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--ui-space-2);
    }
    body .admin-company-settings-page .export-actions .button {
        width: 100%;
        min-width: 0;
        white-space: nowrap;
        overflow-wrap: normal;
    }
    body .admin-company-settings-page .export-actions .journal-button {
        grid-column: 1 / -1;
        flex-wrap: wrap;
        white-space: normal;
        padding-block: var(--ui-space-2);
    }
    body .admin-company-settings-page .journal-count {
        min-width: 32px;
        width: auto;
        height: auto;
        min-height: 24px;
        white-space: nowrap;
        overflow-wrap: normal;
    }
}

@media (max-width: 600px) {
    .data-table.ui-responsive-table,
    .data-table.ui-responsive-table :is(tbody, tr) {
        display: block;
        width: 100%;
        min-width: 0;
        white-space: normal;
    }

    .data-table.ui-responsive-table thead { display: none; }

    .data-table.ui-responsive-table td[data-label] {
        display: grid;
        grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
        column-gap: var(--ui-space-3);
        width: 100%;
        max-width: none;
        padding: var(--ui-space-2) 0;
        text-align: left !important;
        white-space: normal;
    }

    .data-table.ui-responsive-table td[data-label]::before {
        content: attr(data-label);
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: start;
        color: var(--muted);
        font-size: var(--ui-font-caption);
        font-weight: 600;
        line-height: 1.4;
    }

    .data-table.ui-responsive-table td[data-label] > * { grid-column: 2; }
}

@media (prefers-contrast: more) {
    :is(.button, .icon-button, input, select, textarea, .panel, .data-table th, .data-table td) {
        border-color: currentColor;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.button, .icon-button, input, select, textarea, .panel, .toast) {
        transition: none !important;
    }
}

/* UNIT and Overview updates, 2026-10-11. */
.dashboard-indicators { display: grid; gap: 12px; margin-bottom: 20px; min-width: 0; }
.dashboard-indicators .orders-kpi-grid, .dashboard-indicators .finance-forecast-kpis { margin: 0; }
.dashboard-indicators .orders-kpi-card > small { display: block; color: var(--muted); line-height: 1.4; }
.dashboard-indicators .dashboard-marketplace-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dashboard-summary-panel { padding: 20px; min-width: 0; }
.dashboard-summary-panel h3 { margin: 0 0 6px; }
.dashboard-summary-panel p { margin: 0; color: var(--muted); }
@media (max-width: 900px) { .dashboard-indicators .dashboard-marketplace-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dashboard-indicators .dashboard-marketplace-kpis { grid-template-columns: 1fr; } }

/* One ordered KPI block, with aligned labels, values and comparison rows. */
body .dashboard-indicators .dashboard-overview-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
body .dashboard-overview-kpis .orders-kpi-card { display: grid; grid-template-rows: minmax(28px, auto) auto auto auto; align-content: start; min-width: 0; min-height: 0; padding: 8px 10px; gap: 3px; }
body .dashboard-overview-kpis .orders-kpi-label { min-height: 0; align-items: flex-start; line-height: 1.2; font-size: 12px; }
body .dashboard-overview-kpis .orders-kpi-card > strong { font-size: clamp(20px, 1.5vw, 25px); line-height: 1.2; margin: 0; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
body .dashboard-overview-kpis .dashboard-kpi-comparison { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; margin-top: 0; min-height: 0; }
body .dashboard-overview-kpis .dashboard-kpi-comparison small { font-size: 11px; color: var(--muted); line-height: 1.4; }
body .dashboard-overview-kpis .dashboard-kpi-help { color: var(--muted); font-size: 11px; line-height: 1.4; }
body .dashboard-overview-kpis .dashboard-kpi-help summary { cursor: pointer; }
body .dashboard-overview-kpis .dashboard-kpi-help p { margin: 6px 0 0; }
body .dashboard-overview-kpis .orders-kpi-card.is-highlighted { background: #fff8dc; border-color: #eadca4; }
body .dashboard-overview-kpis .orders-kpi-card.is-highlighted::before { background: #d6b758; }
html[data-theme="dark"] body .dashboard-overview-kpis .orders-kpi-card.is-highlighted { background: #393323; border-color: #71633e; }
@media (max-width: 1200px) { body .dashboard-indicators .dashboard-overview-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { body .dashboard-indicators .dashboard-overview-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { body .dashboard-indicators .dashboard-overview-kpis { grid-template-columns: 1fr; } }

/* Extra Finance metrics must not squeeze the product name into a narrow strip. */
body.finance-page .finance-article-table:not(.ui-responsive-table) th:first-child,
body.finance-page .finance-article-table:not(.ui-responsive-table) td:first-child {
    min-width: 260px;
    width: 260px;
}

/* Compact spacing must not shrink checkbox/radio touch targets. */
:is(.workspace-page, .admin-portal-page) label:has(> input:is([type="checkbox"], [type="radio"])) {
    min-height: 32px;
}