/*
 * 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 {
    --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: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;
    --ui-space-8: 32px;

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

    --ui-control-height-sm: 36px;
    --ui-control-height: 40px;
    --ui-control-height-lg: 48px;
    --ui-icon-size: 18px;
    --ui-icon-button-size: 36px;

    --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-control);
    --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);
}

/*
 * Page actions use one visual rule everywhere: title first, compact actions on
 * the next line at the left edge. Actuality and status stay on the right.
 */
:is(.workspace-page, .admin-portal-page) .page-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: flex-start;
    justify-content: stretch;
    column-gap: var(--ui-space-5);
    row-gap: var(--ui-space-2);
}

: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: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    justify-items: stretch;
    gap: var(--ui-space-2);
}

:is(.workspace-page, .admin-portal-page) .page-heading-actuality-slot {
    width: fit-content;
    min-width: 0;
    max-width: min(100%, 300px);
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    display: grid;
    justify-items: end;
}

:is(.workspace-page, .admin-portal-page) .page-heading-actuality-slot: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%;
}

:is(.workspace-page, .admin-portal-page) .page-heading-action-row {
    width: fit-content;
    min-width: 0;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
}

:is(.workspace-page, .admin-portal-page) .page-heading-action-row .button {
    height: var(--ui-control-height);
    min-height: var(--ui-control-height);
    max-width: 100%;
    padding-inline: 14px;
    border-radius: var(--ui-radius-sm);
    font-size: var(--ui-font-control);
    line-height: 1;
}

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

:is(.workspace-page, .admin-portal-page) .page-heading-inline-action {
    width: fit-content;
    max-width: 100%;
    min-height: var(--ui-control-height);
    margin-top: var(--ui-space-2);
}

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

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

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

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

.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 */
@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 {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        justify-items: stretch;
    }

    :is(.workspace-page, .admin-portal-page) .page-heading-action-row {
        width: 100%;
        grid-column: 1;
        grid-row: 1;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
    }

    :is(.workspace-page, .admin-portal-page) .page-heading-actuality-slot {
        width: 100%;
        max-width: none;
        grid-column: 1;
        grid-row: 2;
        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. */
@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;
    }
}