:root {
    --color-primary: #191e32;
    --color-primary-hover: #242b46;
    --color-primary-soft: #eef0f6;
    --color-accent: #e4572e;
    --color-accent-hover: #c94722;
    --color-accent-active: #ad3b1b;
    --color-surface: #ffffff;
    --color-surface-muted: #fafbfc;
    --color-background: #f5f6f8;
    --color-border: #e2e5ea;
    --color-text: #202431;
    --color-muted: #6d7382;
    --color-success: #2e7d5b;
    --font-family: 'Inter', Arial, sans-serif;
    --font-size-page-title: 24px;
    --font-size-dialog-title: 19px;
    --font-size-section-title: 14px;
    --font-size-subsection-title: 13px;
    --font-size-control: 13px;
    --font-size-body: 12px;
    --font-size-body-small: 12px;
    --font-size-label: 11px;
    --font-size-label-small: 11px;
    --font-size-caption: 10px;
    --line-height-title: 1.22;
    --line-height-body: 1.45;
    --line-height-control: 20px;
    --font-weight-title: 700;
    --font-weight-control: 600;
    --font-weight-label: 600;
    --header-height: 68px;
    --content-width: 1440px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --shadow-menu: 0 12px 32px rgb(25 30 50 / 14%);
    --shadow-soft: 0 10px 26px rgb(25 30 50 / 8%);
    --transition: 160ms ease;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    min-width: 320px;
    overflow-x: clip;
    background: var(--color-background);
    font-family: var(--font-family);
    color: var(--color-text);
}

body {
    min-height: 100vh;
    margin: 0;
    overflow-x: clip;
    background: var(--color-background);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}

.miniapp-body {
    min-height: 100dvh;
    background: var(--tg-theme-bg-color, #ffffff);
    color: var(--tg-theme-text-color, #17212b);
}

button,
a {
    font: inherit;
}

button {
    border: 0;
}

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

.app-header {
    position: sticky;
    z-index: 40;
    top: 0;
    height: var(--header-height);
    border-bottom: 1px solid rgb(255 255 255 / 10%);
    background: var(--color-primary);
    color: #fff;
}

.navbar {
    display: flex;
    width: min(100%, var(--content-width));
    height: 100%;
    margin: 0 auto;
    padding: 0 28px;
    align-items: center;
    gap: 30px;
}

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

.app-brand-logo {
    display: block;
    width: 212px;
    max-width: 24vw;
    height: auto;
}

.brand-symbol {
    display: inline-grid;
    width: 34px;
    height: 34px;
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-primary);
    font-weight: 800;
    place-items: center;
}

.brand-name {
    font-size: var(--font-size-section-title);
    font-weight: var(--font-weight-title);
    letter-spacing: 0;
    white-space: nowrap;
}

.desktop-navigation {
    display: flex;
    min-width: 0;
    height: 100%;
    align-items: center;
    gap: 4px;
}

.nav-link {
    position: relative;
    display: inline-flex;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    align-items: center;
    gap: 8px;
    color: rgb(255 255 255 / 72%);
    cursor: pointer;
    font-size: var(--font-size-body);
    font-weight: 500;
    list-style: none;
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
}

.nav-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    overflow: hidden;
    font-family: 'Material Symbols Outlined', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    text-align: center;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 20;
}

.nav-link .nav-icon {
    opacity: .9;
}

.nav-link span:not(.nav-chevron) {
    line-height: 1;
}

.nav-link::-webkit-details-marker {
    display: none;
}

.nav-link:hover,
.nav-link.is-active,
.nav-dropdown[open] > .nav-link {
    background: rgb(255 255 255 / 10%);
    color: #fff;
}

.nav-link.is-active::after {
    position: absolute;
    right: 12px;
    bottom: -14px;
    left: 12px;
    height: 2px;
    background: var(--color-surface);
    content: '';
}

.nav-dropdown {
    position: relative;
}

.nav-chevron {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--transition);
}

.nav-dropdown[open] .nav-chevron {
    transform: translateY(2px) rotate(225deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    display: grid;
    width: 252px;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-menu);
    color: var(--color-text);
    gap: 2px;
}

.dropdown-link {
    display: flex;
    min-height: 40px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    align-items: center;
    gap: 10px;
    color: #3d4352;
    font-size: var(--font-size-body);
    transition: background var(--transition), color var(--transition);
}

.dropdown-link .dropdown-icon {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
    color: #7a8190;
    font-size: 17px;
    line-height: 17px;
}

.dropdown-link:hover .dropdown-icon,
.dropdown-link.is-active .dropdown-icon {
    color: var(--color-primary);
}

.dropdown-link:hover,
.dropdown-link.is-active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.navbar-actions {
    display: flex;
    margin-left: auto;
    align-items: center;
    gap: 8px;
}

.icon-button,
.mobile-menu-button {
    position: relative;
    display: inline-grid;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: transparent;
    color: #fff;
    cursor: pointer;
    place-items: center;
    transition: background var(--transition);
}

.icon-button:hover,
.mobile-menu-button:hover {
    background: rgb(255 255 255 / 10%);
}

.notification-icon {
    width: 21px;
    height: 21px;
    fill: currentColor;
}

.help-icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.help-icon circle {
    fill: none;
    stroke: currentColor;
}

.notification-count {
    position: absolute;
    z-index: 1;
    top: 2px;
    right: 1px;
    display: inline-grid;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid var(--color-primary);
    border-radius: 9px;
    background: var(--color-accent);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    place-items: center;
}

.notification-count[hidden] {
    display: none;
}

.notification-menu {
    position: relative;
}

.notification-button {
    list-style: none;
}

.notification-button::-webkit-details-marker {
    display: none;
}

.saas-expired-access-shell {
    border-bottom: 1px solid #f0c2b9;
    background: #fff4f1;
}

.saas-expired-access-banner {
    display: grid;
    width: min(100%, var(--content-width));
    margin: 0 auto;
    padding: 12px 28px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    color: #9a3412;
}

.saas-expired-access-banner > .nav-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    color: #c93535;
    font-size: 22px;
    line-height: 22px;
}

.saas-expired-access-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.saas-expired-access-copy strong {
    color: var(--color-text);
    font-size: var(--font-size-body);
    font-weight: 800;
}

.saas-expired-access-copy span,
.saas-expired-access-copy small {
    color: #8a3b2d;
    font-size: var(--font-size-body);
    line-height: 1.35;
}

.saas-expired-access-link {
    display: inline-flex;
    min-height: 36px;
    padding: 0 13px;
    border-radius: var(--radius-sm);
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: #fff;
    font-size: var(--font-size-body);
    font-weight: 800;
    white-space: nowrap;
}

.saas-expired-access-link:hover {
    background: var(--color-accent-hover);
}

.saas-admin-alert-shell {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-background);
}

.saas-admin-alert-stack {
    display: grid;
    width: min(100%, var(--content-width));
    margin: 0 auto;
    padding: 12px 28px;
    gap: 8px;
}

.saas-admin-alert {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #f2d4a7;
    border-radius: var(--radius-md);
    background: #fff8ed;
    color: #7c4a10;
    box-shadow: 0 10px 24px rgb(25 30 50 / 6%);
}

.saas-admin-alert.is-critical {
    border-color: #f0c2b9;
    background: #fff4f1;
    color: #9a3412;
}

.saas-admin-alert-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.saas-admin-alert-copy strong {
    color: var(--color-text);
    font-size: var(--font-size-body);
    font-weight: 700;
}

.saas-admin-alert-copy span {
    color: inherit;
    font-size: var(--font-size-body);
    line-height: 1.35;
}

.saas-admin-alert-link {
    display: inline-flex;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgb(25 30 50 / 12%);
    border-radius: var(--radius-sm);
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    color: var(--color-primary);
    font-size: var(--font-size-body);
    font-weight: 700;
    white-space: nowrap;
}

.saas-admin-alert-close {
    display: inline-grid;
    width: 34px;
    height: 34px;
    border: 1px solid rgb(25 30 50 / 12%);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-muted);
    cursor: pointer;
    place-items: center;
}

.saas-admin-alert-close:hover,
.saas-admin-alert-link:hover {
    border-color: rgb(25 30 50 / 22%);
    background: var(--color-primary-soft);
}

.notification-dropdown {
    position: absolute;
    z-index: 80;
    top: calc(100% + 12px);
    right: 0;
    width: min(360px, calc(100vw - 28px));
    overflow: hidden;
    border: 1px solid #e2e5eb;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: var(--shadow-menu);
}

.notification-dropdown-header {
    display: flex;
    min-height: 54px;
    padding: 12px 14px;
    border-bottom: 1px solid #eef0f4;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.notification-dropdown-header strong {
    color: var(--color-primary);
    font-size: 13px;
}

.notification-dropdown-header span {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 600;
}

.notification-task-list {
    max-height: 360px;
    overflow-y: auto;
}

.notification-task {
    display: grid;
    min-height: 74px;
    padding: 12px 14px;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
}

.notification-task + .notification-task {
    border-top: 1px solid #f0f1f4;
}

.notification-task.is-completed .notification-task-copy {
    opacity: 0.62;
}

.notification-task-check {
    position: relative;
    display: inline-grid;
    width: 24px;
    height: 24px;
    margin-top: 2px;
    cursor: pointer;
    place-items: center;
}

.notification-task-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.notification-task-check span {
    display: block;
    width: 22px;
    height: 22px;
    border: 2px solid #cfd4de;
    border-radius: 50%;
    background: var(--color-surface);
    transition: border-color var(--transition), background var(--transition);
}

.notification-task-check span::after {
    position: absolute;
    width: 8px;
    height: 4px;
    top: 8px;
    left: 7px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    content: '';
    opacity: 0;
    transform: rotate(-45deg);
}

.notification-task-check input:checked + span {
    border-color: var(--color-accent);
    background: var(--color-accent);
}

.notification-task-check input:checked + span::after {
    opacity: 1;
}

.notification-task-copy {
    display: grid;
    min-width: 0;
    color: inherit;
    gap: 3px;
    text-decoration: none;
}

.notification-task-copy strong {
    overflow: hidden;
    color: var(--color-primary);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-task-copy span,
.notification-task-copy small {
    overflow: hidden;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-empty {
    padding: 20px 14px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.tasks-heading {
    align-items: flex-start;
}

.tasks-heading-actions {
    align-items: center;
}

.tasks-page-tabs.order-tabs {
    display: flex;
    min-height: 54px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    align-items: stretch;
    gap: 4px;
    background: var(--color-surface);
    overflow-x: auto;
}

.tasks-page-tabs .order-tab {
    min-height: auto;
    padding: 0 15px;
    border: 0;
    border-radius: 0;
    justify-content: flex-start;
    background: transparent;
    box-shadow: none;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 600;
    gap: 7px;
    line-height: 1.25;
    white-space: nowrap;
}

.tasks-page-tabs .order-tab::after {
    display: block;
    right: 11px;
    bottom: -1px;
    left: 11px;
    height: 2px;
}

.tasks-page-tabs .order-tab.is-active {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--color-primary);
}

.tasks-page-tabs .order-tab > span:not(.tab-state-dot) {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--color-primary-soft);
    color: var(--color-muted);
    font-size: 10px;
}

.tasks-page-tabs + [data-task-page-panel] {
    margin-top: -1px;
}

.tasks-grid,
.task-rules-grid {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    overflow: visible;
}

.tasks-grid .table-scroll,
.task-rules-grid .table-scroll {
    overflow: visible;
}

.tasks-filter-toolbar {
    align-items: center;
    justify-content: flex-end;
}

.tasks-filter-list {
    width: 100%;
    justify-content: flex-end;
}

.attention-center-toolbar {
    justify-content: stretch;
}

.attention-center-toolbar-main {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.attention-center-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.attention-center-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.attention-status-switch {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
}

.attention-status-link {
    display: inline-flex;
    min-height: 30px;
    padding: 0 9px;
    border-radius: var(--radius-md);
    align-items: center;
    gap: 6px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.attention-status-link:hover,
.attention-status-link.is-active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.attention-status-link span {
    display: inline-flex;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--color-surface);
    align-items: center;
    justify-content: center;
    color: inherit;
    font-size: 11px;
    line-height: 1;
}

.attention-settings-link {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.attention-settings-link:hover {
    color: var(--color-primary);
}

.attention-center-list {
    display: grid;
    border-top: 1px solid var(--color-border);
}

.attention-center-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 11px 112px 11px 12px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.attention-center-item:hover {
    background: var(--color-surface-muted);
}

.attention-center-item.is-dismissed {
    background: var(--color-surface-muted);
}

.attention-center-item-main {
    display: grid;
    min-width: 0;
    gap: 8px;
}

.attention-center-item-head {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.attention-center-badges {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.attention-type-label {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
}

.attention-center-message {
    display: grid;
    gap: 3px;
}

.attention-center-message h3 {
    margin: 0;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.attention-center-message p {
    max-width: 960px;
    margin: 0;
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.45;
}

.attention-center-message strong {
    color: var(--color-text-soft);
    font-weight: 700;
}

.attention-center-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px 14px;
    margin: 0;
}

.attention-center-meta div {
    min-width: 0;
}

.attention-center-meta dt {
    margin: 0 0 2px;
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 700;
}

.attention-center-meta dd {
    margin: 0;
    overflow: hidden;
    color: var(--color-text-soft);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.attention-center-actions {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.attention-center-actions form {
    margin: 0;
}

.attention-center-actions .order-square-action.attention-icon-action {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
}

.attention-center-actions .attention-icon-action .button-svg-icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
}

.attention-center-empty {
    margin: 0;
    border: 0;
}

@media (max-width: 920px) {
    .attention-center-toolbar-main,
    .attention-center-controls,
    .attention-center-item {
        align-items: flex-start;
    }

    .attention-center-item {
        grid-template-columns: 1fr;
        padding-right: 12px;
        padding-bottom: 46px;
    }

    .attention-center-toolbar-main,
    .attention-center-controls,
    .attention-center-item-head {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

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

@media (max-width: 640px) {
    .attention-center-toolbar-main,
    .attention-center-controls,
    .attention-status-switch {
        width: 100%;
    }

    .attention-status-link {
        flex: 1 1 0;
        justify-content: center;
    }

    .attention-center-meta {
        grid-template-columns: 1fr;
    }
}

.attention-action-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.attention-action-list form {
    margin: 0;
}

.ai-rules-actions {
    align-items: center;
}

.ai-rules-actions form {
    margin: 0;
}

.ai-rules-tabs {
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-bottom: 0;
    border-radius: 0;
    background: var(--color-surface);
    overflow-x: auto;
}

.ai-rules-tabs .order-tab {
    text-decoration: none;
}

.ai-check-rules-grid,
.ai-rules-workspace .door-kit-rules-grid {
    border-radius: 0;
}

.ai-checks-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ai-attention-settings-modal-window,
.ai-check-rule-modal-window {
    width: min(100%, 620px);
}

.ai-check-status-modal-window {
    width: min(100%, 420px);
}

.ai-attention-settings-grid {
    grid-template-columns: 1fr;
}

.ai-scan-time-list {
    display: grid;
    gap: 8px;
}

.ai-scan-time-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.ai-scan-time-row .ai-scan-time-remove-button {
    position: static;
    place-self: center;
}

.ai-scan-time-add {
    width: fit-content;
    margin-top: 8px;
}

.ai-check-status-picker {
    display: grid;
    gap: 8px;
}

.ai-check-status-list {
    display: flex;
    min-height: 32px;
    flex-wrap: wrap;
    gap: 6px;
}

.ai-check-status-row {
    display: inline-grid;
    min-width: 0;
    min-height: 32px;
    grid-template-columns: minmax(0, 1fr) 24px;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
    color: var(--color-text-soft);
}

.ai-check-status-row > span {
    min-width: 0;
    font-size: var(--font-size-body);
    font-weight: 600;
    line-height: var(--line-height-control);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-check-status-remove-button {
    position: static;
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: var(--color-muted);
    font-size: 0;
}

.ai-check-status-remove-button:hover {
    color: var(--color-danger);
}

.ai-check-status-remove-button .button-svg-icon {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
}

.ai-check-status-open-button {
    width: auto;
    height: 32px;
    min-height: 32px;
    padding: 0 12px;
    flex: 0 0 auto;
}

.ai-check-status-form-grid {
    grid-template-columns: 1fr;
}

.task-date-filter {
    display: inline-flex;
    height: 40px;
    min-width: 168px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    align-items: center;
    background: var(--color-surface);
    color: var(--color-muted);
    overflow: hidden;
}

.task-date-filter > span {
    display: inline-flex;
    width: 34px;
    height: 100%;
    border-right: 1px solid var(--color-border);
    align-items: center;
    justify-content: center;
    background: var(--color-surface-muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.task-date-filter input.filter-button {
    width: 132px;
    min-width: 0;
    height: 38px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.task-status-filter {
    width: 180px;
    min-width: 180px;
}

.tasks-table,
.task-rules-table {
    min-width: 1080px;
    table-layout: fixed;
}

.tasks-table th:nth-child(1),
.tasks-table td:nth-child(1) {
    width: 30%;
}

.tasks-table th:nth-child(2),
.tasks-table td:nth-child(2) {
    width: 18%;
}

.tasks-table th:nth-child(3),
.tasks-table th:nth-child(4),
.tasks-table th:nth-child(6),
.tasks-table td:nth-child(3),
.tasks-table td:nth-child(4),
.tasks-table td:nth-child(6) {
    width: 13%;
}

.tasks-table th:nth-child(5),
.tasks-table td:nth-child(5) {
    width: 13%;
}

.tasks-table tbody tr[data-task-status-row] {
    cursor: pointer;
}

.tasks-table tbody tr[data-task-status-row]:hover td {
    background: var(--color-surface-muted);
}

.tasks-table tr.is-completed td {
    opacity: 0.64;
}

.tasks-table .cell-secondary {
    max-width: 360px;
}

.tasks-table td:nth-child(3),
.tasks-table td:nth-child(4),
.tasks-table td:nth-child(6),
.task-rules-table td:nth-child(2),
.task-rules-table td:nth-child(3),
.task-rules-table td:nth-child(4) {
    color: var(--color-text-soft);
    font-size: var(--font-size-body-small);
    font-weight: 600;
}

.task-rules-table td:nth-child(1) {
    width: 28%;
}

.task-rules-table tbody tr[data-task-rule-edit-row] {
    cursor: pointer;
}

.task-rules-table tbody tr[data-task-rule-edit-row]:hover td {
    background: var(--color-surface-muted);
}

.task-weekdays {
    align-self: stretch;
}

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

.task-file-upload {
    padding: 0;
    border-bottom: 0;
    grid-template-columns: 1fr;
    align-items: stretch;
}

.task-file-links {
    display: flex;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 6px;
}

.task-file-links a {
    display: inline-flex;
    max-width: 180px;
    min-height: 24px;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    align-items: center;
    overflow: hidden;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-file-links a:hover {
    background: var(--color-border);
}

.task-rule-modal-grid [hidden] {
    display: none !important;
}

.task-weekday-list {
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.task-weekday-option {
    position: relative;
    display: inline-flex;
}

.task-weekday-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.task-weekday-option span {
    display: inline-flex;
    min-width: 38px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    color: var(--color-muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    transition: border-color var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
}

.task-weekday-option input:checked + span {
    border-color: rgb(238 78 42 / 35%);
    background: rgb(238 78 42 / 10%);
    color: var(--color-accent);
}

.task-weekday-option input:focus-visible + span {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgb(238 78 42 / 16%);
}

.tasks-grid-footer {
    min-height: 58px;
}

.task-modal-window {
    width: min(100%, 720px);
}

.task-rule-modal-window {
    width: min(100%, 820px);
}

.task-status-modal-window {
    width: min(100%, 660px);
}

.task-status-details {
    display: grid;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
    gap: 12px;
}

.task-status-detail-header {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.task-status-detail-header strong {
    min-width: 0;
    color: var(--color-primary);
    font-size: var(--font-size-section-title);
    font-weight: var(--font-weight-title);
    line-height: 1.3;
}

.task-status-detail-grid {
    display: grid;
    margin: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
}

.task-status-detail-grid div {
    min-width: 0;
}

.task-status-detail-grid dt {
    margin-bottom: 3px;
    color: var(--color-muted);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-label);
    text-transform: uppercase;
}

.task-status-detail-grid dd {
    min-width: 0;
    margin: 0;
    color: var(--color-primary);
    font-size: var(--font-size-body);
    font-weight: 600;
    line-height: var(--line-height-body);
}

.task-status-detail-grid dd a {
    color: var(--color-primary);
    text-decoration: none;
}

.task-status-detail-grid dd a:hover {
    color: var(--color-accent);
}

.task-status-detail-wide {
    grid-column: 1 / -1;
}

.task-status-file-links {
    margin-top: 2px;
}

.task-status-form-grid {
    grid-template-columns: 1fr;
}

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

@media (max-width: 700px) {
    .tasks-heading {
        align-items: stretch;
    }

    .tasks-heading,
    .tasks-heading-actions {
        flex-direction: column;
    }

    .tasks-heading-actions .primary-button,
    .tasks-heading-actions .secondary-button {
        width: 100%;
    }

    .task-rule-modal-grid {
        grid-template-columns: 1fr;
    }

    .task-status-detail-grid {
        grid-template-columns: 1fr;
    }

    .tasks-filter-toolbar .grid-filters {
        width: 100%;
        margin-left: 0;
        justify-content: stretch;
    }

    .tasks-filter-list {
        display: grid;
        grid-template-columns: 1fr;
    }

    .task-date-filter,
    .task-status-filter,
    .tasks-filter-toolbar .secondary-button {
        width: 100%;
        min-width: 0;
    }

    .task-date-filter input.filter-button {
        width: 100%;
    }

    .tasks-grid-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}

.profile-button {
    display: flex;
    min-width: 0;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    align-items: center;
    gap: 9px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition);
}

.profile-button:hover {
    background: rgb(255 255 255 / 10%);
}

.profile-menu {
    position: relative;
}

.profile-menu summary {
    list-style: none;
}

.profile-menu summary::-webkit-details-marker {
    display: none;
}

.profile-menu-dropdown {
    position: absolute;
    z-index: 30;
    top: calc(100% + 10px);
    right: 0;
    width: 150px;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-menu);
}

.profile-menu-dropdown button {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    background: transparent;
    color: #424855;
    cursor: pointer;
    text-align: left;
}

.profile-menu-dropdown button:hover {
    background: var(--color-primary-soft);
}

.profile-avatar {
    display: inline-grid;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #dce2f7;
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 700;
    place-items: center;
}

.profile-avatar-image {
    display: block;
    border: 1px solid rgb(255 255 255 / 24%);
    object-fit: cover;
}

.profile-copy {
    display: grid;
    gap: 1px;
}

.profile-name {
    font-size: 13px;
    font-weight: 600;
}

.profile-role {
    color: rgb(255 255 255 / 58%);
    font-size: 11px;
}

.mobile-menu-button {
    display: none;
    padding: 10px;
    align-content: center;
    gap: 4px;
}

.mobile-menu-button span {
    display: block;
    width: 19px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.mobile-navigation,
.mobile-backdrop {
    display: none;
}

.app-main {
    min-height: calc(100vh - var(--header-height));
}

.workspace {
    width: min(100%, var(--content-width));
    margin: 0 auto;
    padding: 32px 28px 48px;
}

.page-heading {
    display: flex;
    margin-bottom: 22px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.page-heading-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.page-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: var(--color-muted);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-label);
    text-transform: uppercase;
}

.page-heading h1 {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-page-title);
    font-weight: var(--font-weight-title);
    line-height: var(--line-height-title);
}

.page-hint {
    max-width: 520px;
    margin: 8px 0 0;
    color: var(--color-muted);
    font-size: var(--font-size-body-small);
    line-height: var(--line-height-body);
}

.primary-button {
    display: inline-flex;
    min-height: 40px;
    padding: 0 16px;
    border-radius: var(--radius-sm);
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: var(--color-accent);
    color: #fff;
    cursor: pointer;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-control);
    line-height: var(--line-height-control);
    box-shadow: 0 3px 10px rgb(228 87 46 / 22%);
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}

.primary-button:hover {
    background: var(--color-accent-hover);
    box-shadow: 0 5px 14px rgb(228 87 46 / 28%);
}

.primary-button:active {
    background: var(--color-accent-active);
    box-shadow: 0 2px 6px rgb(228 87 46 / 20%);
    transform: translateY(1px);
}

.primary-button:focus-visible {
    outline: 3px solid rgb(228 87 46 / 25%);
    outline-offset: 2px;
}

.primary-button:disabled {
    background: #a8acb5;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.72;
}

.danger-button {
    display: inline-flex;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #ef4444;
    border-radius: var(--radius-sm);
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: #ef4444;
    color: #fff;
    cursor: pointer;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-control);
    line-height: var(--line-height-control);
    box-shadow: 0 3px 10px rgb(239 68 68 / 18%);
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.danger-button:hover {
    border-color: #dc2626;
    background: #dc2626;
    box-shadow: 0 5px 14px rgb(239 68 68 / 24%);
}

.danger-button:active {
    transform: translateY(1px);
}

.danger-button:disabled {
    border-color: #f3a7a7;
    background: #f3a7a7;
    box-shadow: none;
    cursor: not-allowed;
}

.plus-icon {
    position: relative;
    width: 14px;
    height: 14px;
}

.plus-icon::before,
.plus-icon::after {
    position: absolute;
    top: 6px;
    left: 1px;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    content: '';
}

.plus-icon::after {
    transform: rotate(90deg);
}

.workspace-panel {
    min-height: 440px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.import-empty-state {
    max-width: 420px;
    min-height: 280px;
}

.import-setting-modal-window {
    width: min(100%, 760px);
}

.import-progress-panel {
    display: grid;
    margin-bottom: 18px;
    padding: 18px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
    gap: 12px;
}

.import-progress-panel[hidden] {
    display: none;
}

.import-progress-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.import-progress-summary > div {
    display: grid;
    gap: 4px;
}

.import-progress-eyebrow {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.import-progress-summary strong {
    color: var(--color-primary);
    font-size: 18px;
    line-height: 1.25;
}

.import-progress-summary b {
    color: var(--color-primary);
    font-size: 18px;
    line-height: 1.25;
}

.import-progress-track {
    overflow: hidden;
    height: 8px;
    border-radius: 999px;
    background: #edf0f5;
}

.import-progress-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--color-accent);
    transition: width 0.25s ease;
}

.import-progress-panel p {
    margin: 0;
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.45;
}

.import-progress-panel[data-status='completed'] .import-progress-track span {
    background: #2f8b64;
}

.import-progress-panel[data-status='failed'] {
    border-color: #ffd0c8;
    background: #fff8f6;
}

.import-progress-panel[data-status='failed'] .import-progress-track span {
    background: #d6452f;
}

.empty-state {
    display: grid;
    max-width: 390px;
    min-height: 438px;
    margin: 0 auto;
    padding: 48px 24px;
    align-content: center;
    justify-items: center;
    text-align: center;
}

.empty-state-symbol {
    display: grid;
    width: 52px;
    height: 52px;
    margin-bottom: 20px;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 20px;
    font-weight: 700;
    place-items: center;
}

.empty-state h2 {
    margin: 0 0 8px;
    font-size: 18px;
}

.empty-state p {
    margin: 0;
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.6;
}

.error-page {
    display: grid;
    width: min(100%, var(--content-width));
    min-height: calc(100dvh - var(--header-height));
    margin: 0 auto;
    padding: 48px 28px;
    place-items: center;
}

.error-content {
    width: min(100%, 480px);
    text-align: center;
}

.error-code {
    display: block;
    margin-bottom: 16px;
    color: var(--color-accent);
    font-size: 72px;
    font-weight: 700;
    line-height: 1;
}

.error-content h1 {
    margin: 0 0 10px;
    color: var(--color-primary);
    font-size: 28px;
    line-height: 1.25;
}

.error-content p {
    margin: 0 auto 26px;
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.65;
}

.error-content .primary-button {
    justify-content: center;
}

.data-grid {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.order-status-settings-grid {
    overflow: visible;
}

.order-status-settings-grid .table-scroll {
    overflow: visible;
}

.order-statuses-table {
    min-width: 1040px;
}

.order-statuses-table td:nth-child(1) {
    width: 28%;
}

.order-status-color-chip {
    display: inline-flex;
    align-items: center;
    color: #555c6b;
    font-size: 12px;
    font-weight: 700;
    gap: 8px;
    white-space: nowrap;
}

.order-status-color-chip i {
    display: block;
    width: 26px;
    height: 26px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.subscription-status-panel {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.subscription-status-card {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    align-items: center;
    background: var(--color-surface);
}

.subscription-status-card .status-badge {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    justify-self: start;
}

.subscription-status-card h2 {
    margin: 0;
    color: var(--color-primary);
    font-size: 18px;
    line-height: 1.25;
}

.subscription-status-card p {
    flex-basis: 100%;
    margin: 0;
    color: var(--color-muted);
    font-size: 13px;
}

.subscription-workspace {
    width: min(100%, 1600px);
}

.subscription-editor-layout,
.subscription-content-panel,
.subscription-table-scroll {
    min-width: 0;
}

.subscription-tab-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.subscription-tab-list {
    width: 100%;
}

.subscription-tab-list label {
    cursor: pointer;
}

.subscription-tab-list label:hover {
    background: transparent;
    color: var(--color-primary);
}

.subscription-tab-panels {
    min-width: 0;
}

.subscription-tab-panel {
    display: none;
}

#subscription-tab-services:checked ~ .subscription-tab-list label[for="subscription-tab-services"],
#subscription-tab-packages:checked ~ .subscription-tab-list label[for="subscription-tab-packages"],
#subscription-tab-invoices:checked ~ .subscription-tab-list label[for="subscription-tab-invoices"],
#subscription-tab-operations:checked ~ .subscription-tab-list label[for="subscription-tab-operations"] {
    color: var(--color-primary);
}

#subscription-tab-services:checked ~ .subscription-tab-list label[for="subscription-tab-services"]::after,
#subscription-tab-packages:checked ~ .subscription-tab-list label[for="subscription-tab-packages"]::after,
#subscription-tab-invoices:checked ~ .subscription-tab-list label[for="subscription-tab-invoices"]::after,
#subscription-tab-operations:checked ~ .subscription-tab-list label[for="subscription-tab-operations"]::after {
    background: var(--color-accent);
}

#subscription-tab-services:checked ~ .subscription-tab-panels .subscription-tab-panel-services,
#subscription-tab-packages:checked ~ .subscription-tab-panels .subscription-tab-panel-packages,
#subscription-tab-invoices:checked ~ .subscription-tab-panels .subscription-tab-panel-invoices,
#subscription-tab-operations:checked ~ .subscription-tab-panels .subscription-tab-panel-operations {
    display: block;
}

.subscription-tab-panel {
    min-height: 480px;
}

.subscription-summary-list strong {
    font-size: 12px;
}

.subscription-summary-list > .subscription-resource-row {
    align-items: start;
}

.subscription-resource-progress {
    display: grid;
    min-width: 0;
    padding-top: 1px;
    gap: 7px;
}

.subscription-resource-topline {
    min-width: 0;
}

.subscription-resource-topline strong {
    min-width: 0;
}

.subscription-resource-caption {
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.subscription-progress-track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef1f5;
}

.subscription-progress-track span {
    display: block;
    width: var(--subscription-progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--color-success);
}

.subscription-resource-progress.is-warning .subscription-progress-track span {
    background: #d98c24;
}

.subscription-resource-progress.is-danger .subscription-progress-track span {
    background: #ef4444;
}

.subscription-resource-progress.is-muted .subscription-progress-track span {
    background: #cfd5df;
}

.subscription-summary-note {
    margin: 0 18px 16px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}

.subscription-balance-positive {
    color: var(--color-success);
}

.subscription-balance-negative {
    color: #c93535;
}

.subscription-operation-amount {
    font-weight: 700;
    white-space: nowrap;
}

.subscription-operation-amount-positive {
    color: var(--color-success);
}

.subscription-operation-amount-negative {
    color: #c93535;
}

.subscription-operation-amount-neutral {
    color: var(--color-text);
}

.subscription-label-button {
    cursor: pointer;
}

.subscription-service-volume-list {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 3px 8px;
}

.subscription-service-volume-list span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.subscription-service-volume-list span + span::before {
    color: var(--color-muted);
    content: '· ';
}

.subscription-inline-form {
    display: inline-flex;
    justify-content: flex-end;
    margin: 0;
}

.subscription-service-heading form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.subscription-select {
    min-height: 38px;
    max-width: 320px;
    padding: 0 36px 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

.subscription-amount-input {
    width: 150px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

.subscription-service-cards {
    display: grid;
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.subscription-service-card {
    display: flex;
    min-width: 0;
    min-height: 126px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
}

.subscription-service-card h3 {
    margin: 3px 0 0;
    color: var(--color-primary);
    font-size: 14px;
}

.subscription-service-card p {
    margin: 6px 0 0;
    color: var(--color-muted);
    font-size: 12px;
}

.subscription-service-card form {
    margin: 0;
}

.subscription-panel-empty {
    display: grid;
    padding: 20px;
    gap: 10px;
}

.subscription-panel-empty .status-badge {
    justify-self: start;
}

.subscription-panel-empty h2 {
    margin: 0;
    color: var(--color-primary);
    font-size: 16px;
    line-height: 1.25;
}

.subscription-panel-empty p {
    max-width: 760px;
    margin: 0;
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.45;
}

.orders-table.subscription-table {
    min-width: 920px;
}

.orders-table.subscription-invoices-table {
    min-width: 0;
    table-layout: fixed;
}

.subscription-invoices-table th:nth-child(1) {
    width: 32%;
}

.subscription-invoices-table th:nth-child(2) {
    width: 16%;
}

.subscription-invoices-table th:nth-child(3) {
    width: 18%;
}

.subscription-invoices-table th:nth-child(4) {
    width: 17%;
}

.subscription-invoices-table th:nth-child(5) {
    width: 132px;
}

.subscription-invoices-table .actions-cell {
    white-space: nowrap;
    text-align: right;
}

.subscription-invoices-table td:first-child {
    overflow-wrap: anywhere;
}

.subscription-invoices-table .actions-cell .secondary-button {
    width: 112px;
    justify-content: center;
}

.subscription-modal-window {
    width: min(100%, 560px);
}

.subscription-modal-body {
    display: grid;
    padding: 18px 20px 20px;
    gap: 12px;
}

.subscription-modal-body .form-field {
    display: grid;
    gap: 6px;
}

.subscription-modal-body .form-field > span {
    color: #555c6b;
    font-size: 12px;
    font-weight: 700;
}

.subscription-modal-body .form-field input {
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

.subscription-service-confirm {
    display: grid;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
    gap: 4px;
}

.subscription-service-confirm strong {
    color: var(--color-primary);
    font-size: 14px;
}

.subscription-service-confirm span {
    color: var(--color-muted);
    font-size: 12px;
}

.subscription-modal-window .modal-actions {
    display: flex;
    min-height: 62px;
    padding: 12px 20px;
    border-top: 1px solid var(--color-border);
    align-items: center;
    justify-content: flex-end;
    background: var(--color-surface-muted);
    gap: 10px;
}

.subscription-modal-window .modal-actions .secondary-button,
.subscription-modal-window .modal-actions .primary-button,
.subscription-modal-window .modal-actions .danger-button {
    min-height: 38px;
    padding: 0 15px;
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 640px) {
    #subscription-tab-services:checked ~ .subscription-tab-list label[for="subscription-tab-services"],
    #subscription-tab-packages:checked ~ .subscription-tab-list label[for="subscription-tab-packages"],
    #subscription-tab-invoices:checked ~ .subscription-tab-list label[for="subscription-tab-invoices"],
    #subscription-tab-operations:checked ~ .subscription-tab-list label[for="subscription-tab-operations"] {
        border-color: rgb(238 78 42 / 34%);
        background: #fff5f1;
        box-shadow: inset 0 0 0 1px rgb(238 78 42 / 16%);
        color: var(--color-primary);
    }

    .subscription-invoice-form,
    .subscription-select,
    .subscription-amount-input,
    .subscription-inline-form,
    .subscription-inline-form .secondary-button {
        width: 100%;
    }

    .subscription-service-cards {
        padding: 12px 14px;
        grid-template-columns: 1fr;
    }

    .orders-table.subscription-table,
    .orders-table.subscription-invoices-table {
        min-width: 0;
    }

    .subscription-modal-window .modal-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .subscription-modal-window .modal-actions .secondary-button,
    .subscription-modal-window .modal-actions .primary-button,
    .subscription-modal-window .modal-actions .danger-button {
        width: 100%;
    }

    .orders-table.subscription-table tbody tr {
        padding-right: 14px;
    }

    .orders-table.subscription-table .actions-cell {
        position: static;
        display: grid;
        width: 100%;
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 10px;
    }

    .orders-table.subscription-table .actions-cell::before {
        display: block;
    }

    .orders-table.subscription-table .actions-cell .secondary-button,
    .orders-table.subscription-table .actions-cell .primary-button,
    .orders-table.subscription-table .actions-cell .danger-button {
        width: 100%;
        justify-content: center;
    }
}

.orders-grid {
    overflow: visible;
}

.orders-grid .table-scroll {
    overflow: visible;
}

.users-grid {
    overflow: visible;
}

.organizations-grid {
    overflow: visible;
}

.stores-grid {
    overflow: visible;
}

.order-sources-grid {
    overflow: visible;
}

.order-sources-grid .table-scroll {
    overflow: visible;
}

.import-settings-grid {
    overflow: visible;
}

.import-settings-grid .table-scroll {
    overflow: visible;
}

.data-exchange-tabs {
    display: grid;
    min-height: 0;
    margin-bottom: 18px;
    overflow: hidden;
}

.data-exchange-tab-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.data-exchange-tab-list {
    width: 100%;
}

.data-exchange-tab-list label {
    cursor: pointer;
}

.data-exchange-tab-list label:hover {
    background: transparent;
    color: var(--color-primary);
}

#data-exchange-tab-export:checked ~ .data-exchange-tab-list label[for='data-exchange-tab-export'],
#data-exchange-tab-import:checked ~ .data-exchange-tab-list label[for='data-exchange-tab-import'] {
    color: var(--color-primary);
}

#data-exchange-tab-export:checked ~ .data-exchange-tab-list label[for='data-exchange-tab-export']::after,
#data-exchange-tab-import:checked ~ .data-exchange-tab-list label[for='data-exchange-tab-import']::after {
    background: var(--color-accent);
}

.data-exchange-tab-panels {
    min-width: 0;
}

.data-exchange-tab-panel {
    display: none;
    min-width: 0;
    padding: 16px;
    gap: 14px;
}

#data-exchange-tab-export:checked ~ .data-exchange-tab-panels .data-exchange-tab-panel-export,
#data-exchange-tab-import:checked ~ .data-exchange-tab-panels .data-exchange-tab-panel-import {
    display: grid;
}

.data-exchange-card-header,
.data-exchange-report-header,
.data-exchange-structure-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.data-exchange-card-header h2,
.data-exchange-report-header h2,
.data-exchange-structure-header h2 {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-section-title);
    font-weight: var(--font-weight-title);
}

.data-exchange-form {
    display: grid;
    gap: 12px;
}

.data-exchange-export-grid {
    align-items: end;
}

.data-exchange-inline-check {
    display: flex;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    align-items: center;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-control);
    font-weight: 500;
    line-height: var(--line-height-control);
    gap: 8px;
}

.data-exchange-inline-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--color-accent);
}

.data-exchange-note {
    margin: -2px 0 0;
    color: var(--color-muted);
    font-size: var(--font-size-body-small);
    line-height: var(--line-height-body);
}

.data-exchange-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.data-exchange-actions .primary-button,
.data-exchange-actions .secondary-button {
    min-height: 38px;
    padding: 0 14px;
    font-size: var(--font-size-body);
}

.data-exchange-actions .secondary-button {
    height: 38px;
}

.data-exchange-errors {
    margin-bottom: 18px;
}

.data-exchange-report {
    margin-bottom: 18px;
    padding: 18px;
}

.data-exchange-report-table,
.data-exchange-message-table,
.data-exchange-sections-table,
.data-exchange-fields-table {
    min-width: 720px;
}

.data-exchange-message-list {
    display: grid;
    margin-top: 16px;
    gap: 10px;
}

.data-exchange-message-list h3 {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-section-title);
    font-weight: var(--font-weight-title);
}

.data-exchange-structure,
.data-exchange-sections {
    display: grid;
    margin-top: 18px;
    padding: 16px;
    gap: 14px;
}

.data-exchange-top-fields,
.data-exchange-section-list {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.data-exchange-top-field {
    display: grid;
    min-width: 0;
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: minmax(120px, 180px) minmax(86px, 110px) minmax(0, 1fr);
    gap: 10px;
}

.data-exchange-top-field:last-child {
    border-bottom: 0;
}

.data-exchange-top-field code,
.data-exchange-section-meta code,
.data-exchange-fields-table code {
    color: var(--color-primary);
    font-size: var(--font-size-body-small);
}

.data-exchange-top-field span,
.data-exchange-section-meta span,
.data-exchange-fields-table td:nth-child(2),
.data-exchange-fields-table td:nth-child(3) {
    color: var(--color-muted);
    font-size: var(--font-size-body-small);
    font-weight: 700;
}

.data-exchange-top-field small,
.data-exchange-section-title small {
    min-width: 0;
    color: var(--color-muted);
    font-size: var(--font-size-body-small);
    line-height: var(--line-height-body);
}

.data-exchange-section-list {
    display: grid;
}

.data-exchange-section-detail {
    border-bottom: 1px solid var(--color-border);
}

.data-exchange-section-detail:last-child {
    border-bottom: 0;
}

.data-exchange-section-detail summary {
    display: grid;
    padding: 10px 12px;
    align-items: center;
    cursor: pointer;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
}

.data-exchange-section-detail[open] summary {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-muted);
}

.data-exchange-section-title {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.data-exchange-section-title strong {
    color: var(--color-text);
    font-size: var(--font-size-control);
    font-weight: var(--font-weight-title);
}

.data-exchange-section-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.data-exchange-section-detail .table-scroll {
    border-radius: 0;
}

.data-exchange-fields-table th:nth-child(1) {
    width: 24%;
}

.data-exchange-fields-table th:nth-child(2),
.data-exchange-fields-table th:nth-child(3) {
    width: 12%;
}

@media (max-width: 900px) {
    .data-exchange-tab-panel .form-grid {
        grid-template-columns: 1fr;
    }

    .data-exchange-top-field {
        grid-template-columns: minmax(110px, 150px) minmax(76px, 96px) minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .data-exchange-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .data-exchange-actions .primary-button,
    .data-exchange-actions .secondary-button {
        justify-content: center;
        width: 100%;
    }

    .data-exchange-structure,
    .data-exchange-tab-panel,
    .data-exchange-report {
        padding: 14px;
    }

    .data-exchange-tab-list {
        padding-right: 10px;
        padding-left: 10px;
        overflow-x: auto;
    }

    .data-exchange-top-field,
    .data-exchange-section-detail summary {
        grid-template-columns: 1fr;
    }

    .data-exchange-section-meta {
        justify-content: space-between;
        white-space: normal;
    }
}

.messenger-connections-grid {
    overflow: visible;
}

.messenger-connections-grid .table-scroll {
    overflow: visible;
}

.smtp-settings-grid {
    overflow: visible;
}

.smtp-settings-grid .table-scroll {
    overflow: visible;
}

.smtp-settings-table {
    min-width: 1120px;
}

.sales-channel-integrations-grid {
    overflow: visible;
}

.sales-channel-integrations-grid .table-scroll {
    overflow: visible;
}

.integration-mapping-grid {
    overflow: visible;
}

.integration-mapping-grid .table-scroll {
    overflow: visible;
}

.brands-grid {
    overflow: visible;
}

.bank-accounts-grid {
    overflow: visible;
}

.customers-grid {
    overflow: visible;
}

.suppliers-grid {
    overflow: visible;
}

.purchases-grid {
    overflow: visible;
}

.organizations-grid .table-scroll {
    overflow: visible;
}

.stores-grid .table-scroll {
    overflow: visible;
}

.brands-grid .table-scroll {
    overflow: visible;
}

.bank-accounts-grid .table-scroll {
    overflow: visible;
}

.customers-grid .table-scroll {
    overflow: visible;
}

.suppliers-grid .table-scroll {
    overflow: visible;
}

.purchases-grid .table-scroll {
    overflow: visible;
}

.nomenclature-grid {
    overflow: visible;
}

.nomenclature-grid .table-scroll {
    overflow: visible;
}

.organizations-table tbody tr {
    position: relative;
}

.stores-table tbody tr {
    position: relative;
}

.brands-table tbody tr {
    position: relative;
}

.bank-accounts-table tbody tr {
    position: relative;
}

.customers-table tbody tr {
    position: relative;
}

.suppliers-table tbody tr {
    position: relative;
}

.purchases-table tbody tr {
    position: relative;
}

.order-sources-table tbody tr {
    position: relative;
}

.import-settings-table tbody tr {
    position: relative;
}

.messenger-connections-table tbody tr {
    position: relative;
}

.sales-channel-integrations-table tbody tr {
    position: relative;
}

.integration-mapping-table tbody tr {
    position: relative;
}

.nomenclature-table tbody tr {
    position: relative;
}

.organizations-table tbody tr:has(.row-actions[open]) {
    z-index: 3;
}

.stores-table tbody tr:has(.row-actions[open]) {
    z-index: 3;
}

.brands-table tbody tr:has(.row-actions[open]) {
    z-index: 3;
}

.bank-accounts-table tbody tr:has(.row-actions[open]) {
    z-index: 3;
}

.customers-table tbody tr:has(.row-actions[open]) {
    z-index: 3;
}

.suppliers-table tbody tr:has(.row-actions[open]) {
    z-index: 3;
}

.purchases-table tbody tr:has(.row-actions[open]) {
    z-index: 3;
}

.order-sources-table tbody tr:has(.row-actions[open]) {
    z-index: 3;
}

.import-settings-table tbody tr:has(.row-actions[open]) {
    z-index: 3;
}

.messenger-connections-table tbody tr:has(.row-actions[open]) {
    z-index: 3;
}

.sales-channel-integrations-table tbody tr:has(.row-actions[open]) {
    z-index: 3;
}

.integration-mapping-table tbody tr:has(.row-actions[open]) {
    z-index: 3;
}

.nomenclature-table tbody tr:has(.row-actions[open]) {
    z-index: 30;
}

.nomenclature-table tbody tr:nth-last-child(-n + 2) .row-actions-menu {
    top: auto;
    bottom: calc(100% + 5px);
}

.organizations-table {
    min-width: 1100px;
}

.stores-table {
    min-width: 1050px;
}

.import-settings-table {
    min-width: 1100px;
}

.messenger-connections-table {
    min-width: 1220px;
    table-layout: fixed;
}

.messenger-connections-table .messenger-col-name {
    width: 14%;
}

.messenger-connections-table .messenger-col-channel {
    width: 8%;
}

.messenger-connections-table .messenger-col-store {
    width: 12%;
}

.messenger-connections-table .messenger-col-api {
    width: 18%;
}

.messenger-connections-table .messenger-col-webhook {
    width: 31%;
}

.messenger-connections-table .messenger-col-status {
    width: 11%;
}

.messenger-connections-table .messenger-col-actions {
    width: 6%;
}

.messenger-connections-table th,
.messenger-connections-table td {
    vertical-align: middle;
}

.messenger-connections-table .cell-stack {
    min-width: 0;
    max-width: 100%;
}

.messenger-url-text {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messenger-connection-state {
    display: grid;
    justify-items: start;
    gap: 5px;
}

.messenger-connection-state small {
    max-width: 220px;
    color: var(--color-muted);
    font-size: 11px;
    line-height: 1.35;
}

.messenger-connection-check-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
}

.messenger-actions-cell {
    text-align: right;
}

.messenger-connection-check-button {
    display: inline-flex;
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: #727988;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
}

.messenger-connection-check-button .button-svg-icon {
    width: 18px;
    height: 18px;
}

.messenger-connection-check-button:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    box-shadow: none;
}

.messenger-connections-table .row-menu-button {
    color: #727988;
}

.messenger-connections-table .row-menu-button:hover {
    background: var(--color-primary-soft);
}

.messenger-connections-table .row-menu-button:hover span {
    background: var(--color-primary);
}

.messenger-connection-check-button:disabled {
    cursor: progress;
    opacity: 0.72;
}

.messenger-connection-check-button.is-loading .button-svg-icon {
    animation: messenger-spin 0.8s linear infinite;
}

@keyframes messenger-spin {
    to {
        transform: rotate(360deg);
    }
}

.brands-table {
    min-width: 780px;
}

.bank-accounts-table {
    min-width: 1120px;
}

.customers-table {
    min-width: 1120px;
}

.suppliers-table {
    min-width: 1120px;
}

.purchases-table {
    min-width: 1280px;
}

.nomenclature-table {
    min-width: 1180px;
}

.nomenclature-types-table {
    min-width: 760px;
}

.categories-table {
    min-width: 960px;
}

.organizations-table tr[data-deleted='1'] {
    background: #fafafa;
}

.stores-table tr[data-deleted='1'] {
    background: #fafafa;
}

.brands-table tr[data-deleted='1'] {
    background: #fafafa;
}

.bank-accounts-table tr[data-deleted='1'] {
    background: #fafafa;
}

.customers-table tr[data-deleted='1'] {
    background: #fafafa;
}

.suppliers-table tr[data-deleted='1'] {
    background: #fafafa;
}

.purchases-table tr[data-deleted='1'] {
    background: #fafafa;
}

.nomenclature-table tr[data-deleted='1'] {
    background: #fafafa;
}

.nomenclature-types-table tr[data-deleted='1'],
.categories-table tr[data-deleted='1'] {
    background: #fafafa;
}

.organizations-table tr[data-deleted='1'] td:not(.actions-cell) {
    opacity: 0.62;
}

.stores-table tr[data-deleted='1'] td:not(.actions-cell) {
    opacity: 0.62;
}

.brands-table tr[data-deleted='1'] td:not(.actions-cell) {
    opacity: 0.62;
}

.bank-accounts-table tr[data-deleted='1'] td:not(.actions-cell) {
    opacity: 0.62;
}

.customers-table tr[data-deleted='1'] td:not(.actions-cell) {
    opacity: 0.62;
}

.suppliers-table tr[data-deleted='1'] td:not(.actions-cell) {
    opacity: 0.62;
}

.purchases-table tr[data-deleted='1'] td:not(.actions-cell) {
    opacity: 0.62;
}

.nomenclature-table tr[data-deleted='1'] td:not(.actions-cell) {
    opacity: 0.62;
}

.nomenclature-types-table tr[data-deleted='1'] td:not(.actions-cell),
.categories-table tr[data-deleted='1'] td:not(.actions-cell) {
    opacity: 0.62;
}

.nomenclature-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.nomenclature-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.nomenclature-favorite-button {
    display: inline-grid;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-muted);
    cursor: pointer;
    place-items: center;
    transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

.nomenclature-favorite-button:hover {
    border-color: #f3b59e;
    background: #fff6f2;
    color: var(--color-accent);
}

.nomenclature-favorite-button.is-active {
    border-color: #f3b59e;
    background: #fff1eb;
    color: var(--color-accent);
}

.nomenclature-favorite-button:disabled {
    cursor: progress;
    opacity: 0.72;
}

.favorite-star-icon {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nomenclature-favorite-button.is-active .favorite-star-icon {
    fill: currentColor;
}

.nomenclature-breadcrumbs {
    display: flex;
    min-height: 46px;
    padding: 0 18px;
    border-top: 1px solid var(--color-border);
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    color: var(--color-muted);
    font-size: 13px;
}

.nomenclature-breadcrumbs button {
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
}

.nomenclature-breadcrumbs button:hover {
    color: var(--color-accent);
}

.nomenclature-breadcrumbs [aria-current='page'] {
    color: var(--color-muted);
    font-weight: 600;
}

.nomenclature-page-breadcrumbs {
    min-height: 0;
    margin-top: 7px;
    padding: 0;
    border-top: 0;
    gap: 5px;
    font-size: 11px;
    line-height: 1.35;
}

.nomenclature-page-breadcrumbs:empty {
    display: none;
}

.nomenclature-folder-row {
    background: #f8f9fb;
}

.nomenclature-folder-row:hover {
    background: #f3f5f8;
}

.nomenclature-folder-row td {
    height: 46px;
    padding-top: 0;
    padding-bottom: 0;
}

.nomenclature-folder {
    display: flex;
    min-width: 0;
    height: 46px;
    width: 100%;
    border: 0;
    align-items: center;
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
    font: inherit;
    gap: 8px;
    text-align: left;
}

.nomenclature-folder > strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nomenclature-folder > span:last-child {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #e9ebf0;
    color: #687080;
    font-size: 10px;
    place-items: center;
}

.nomenclature-folder-toggle,
.nomenclature-folder-toggle-spacer {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}

.nomenclature-folder-toggle {
    display: grid;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    place-items: center;
}

.nomenclature-folder-toggle:hover {
    background: #e7eaf0;
}

.nomenclature-folder-toggle span {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid #687080;
    border-bottom: 1.5px solid #687080;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform var(--transition);
}

.is-folder-collapsed .nomenclature-folder-toggle span {
    transform: rotate(-45deg) translate(-1px, -1px);
}

.nomenclature-folder-icon {
    position: relative;
    width: 20px;
    height: 15px;
    flex: 0 0 20px;
    border-radius: 2px;
    background: #d99a2b;
}

.nomenclature-folder-icon::before {
    position: absolute;
    top: -3px;
    left: 1px;
    width: 8px;
    height: 4px;
    border-radius: 2px 2px 0 0;
    background: #d99a2b;
    content: '';
}

.nomenclature-image {
    display: block;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    object-fit: contain;
}

.nomenclature-image-default-icon {
    padding: 11px;
    background: #f4f6fa;
    opacity: 0.76;
}

.nomenclature-image-placeholder {
    position: relative;
    background: #f4f5f7;
}

.nomenclature-image-placeholder::before,
.nomenclature-image-placeholder::after {
    position: absolute;
    content: '';
}

.nomenclature-image-placeholder::before {
    width: 20px;
    height: 16px;
    border: 1.5px solid #9da3af;
    border-radius: 2px;
    inset: 14px 12px;
}

.nomenclature-image-placeholder::after {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #9da3af;
    top: 18px;
    left: 17px;
}

.nomenclature-type-preview-default {
    display: grid;
    background: #f4f6fa;
    place-items: center;
}

.nomenclature-type-preview-default::before {
    width: 22px;
    height: 22px;
    background: #8c93a3;
    content: '';
    mask-image: url('/icons/editor/nomenclature-type-preview.svg');
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    opacity: 0.72;
    -webkit-mask-image: url('/icons/editor/nomenclature-type-preview.svg');
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.nomenclature-type-identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nomenclature-price {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.nomenclature-modal-window {
    width: min(100%, 820px);
}

.nomenclature-filters {
    flex: 1;
    justify-content: flex-end;
}

.nomenclature-filters .select-filter {
    min-width: 160px;
}

.reference-small-modal {
    width: min(100%, 680px);
}

.reference-description {
    display: -webkit-box;
    max-width: 360px;
    overflow: hidden;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.reference-active-option {
    min-height: 62px;
    padding: 0;
}

.category-filters {
    flex: 1;
    justify-content: flex-end;
}

.category-filters .select-filter {
    min-width: 180px;
}

.category-folder .cell-stack {
    min-width: 0;
}

.category-folder .cell-stack strong {
    display: block;
    overflow: hidden;
    color: var(--color-primary);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-folder .cell-stack span {
    display: block;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 600;
}

.category-tree-node {
    display: flex;
    min-width: 0;
    padding-left: calc(var(--category-depth) * 26px);
    align-items: center;
    gap: 7px;
}

.category-tree-node .cell-stack {
    min-width: 0;
}

.category-tree-toggle,
.category-tree-spacer {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}

.category-tree-toggle {
    position: relative;
    display: grid;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    place-items: center;
}

.category-tree-toggle:hover {
    background: var(--color-primary-soft);
}

.category-tree-toggle span {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid #687080;
    border-bottom: 1.5px solid #687080;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform var(--transition);
}

.is-tree-collapsed .category-tree-toggle span {
    transform: rotate(-45deg) translate(-1px, -1px);
}

.account-number {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.brand-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.brand-logo {
    display: block;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    object-fit: contain;
}

.brand-logo-placeholder {
    display: grid;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 700;
    place-items: center;
}

.brand-website {
    color: #315db6;
    overflow-wrap: anywhere;
}

.brand-website:hover {
    text-decoration: underline;
}

.store-address {
    display: -webkit-box;
    max-width: 280px;
    overflow: hidden;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.customer-address {
    display: -webkit-box;
    max-width: 280px;
    overflow: hidden;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.supplier-address {
    display: -webkit-box;
    max-width: 280px;
    overflow: hidden;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.organization-modal-window {
    width: min(100%, 900px);
}

.store-modal-window {
    width: min(100%, 720px);
}

.brand-modal-window {
    width: min(100%, 620px);
}

.bank-account-modal-window {
    width: min(100%, 760px);
}

.customer-modal-window {
    width: min(100%, 900px);
}

.supplier-modal-window {
    width: min(100%, 720px);
}

.purchase-modal-window {
    width: min(100%, 820px);
}

.purchases-filters {
    display: flex;
    gap: 10px;
}

.purchase-file-field a,
.file-link {
    color: #315db6;
}

.purchase-file-field a:hover,
.file-link:hover {
    text-decoration: underline;
}

.purchase-file-field a[hidden] {
    display: none;
}

.payment-balance-hint {
    display: block;
    margin-top: 8px;
    color: var(--color-muted);
    font-size: var(--font-size-body);
    font-weight: 700;
}

.purchase-offset-panel {
    padding: 14px;
    border: 1px solid #dce2ec;
    border-radius: 8px;
    background: #f8fafc;
}

.purchase-offset-summary,
.purchase-offset-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.purchase-offset-summary span,
.purchase-offset-input span,
.purchase-offset-panel small {
    color: #6f7788;
    font-weight: 700;
}

.purchase-offset-summary strong {
    color: #1f2535;
    font-size: 1rem;
}

.purchase-offset-input {
    margin-top: 12px;
}

.purchase-offset-input input {
    width: min(100%, 220px);
}

.purchase-offset-panel small {
    display: block;
    margin-top: 10px;
}

.order-editor-workspace {
    width: min(100%, 1600px);
}

.order-editor-header {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.order-editor-heading,
.order-editor-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.order-editor-heading h1 {
    margin: 0;
    font-size: 25px;
}

.order-editor-heading .page-eyebrow {
    margin-bottom: 4px;
}

.order-print-menu,
.order-command-menu,
.order-chat-open-button {
    flex: 0 0 auto;
}

.order-editor-actions .row-actions {
    display: block;
    min-width: 0;
    height: 38px;
    overflow: visible;
}

.order-editor-actions .row-actions[open] {
    z-index: 80;
}

.order-editor-actions .row-actions > summary {
    display: flex;
    box-sizing: border-box;
    height: 38px;
    align-items: center;
}

.order-print-button,
.order-command-button,
.order-chat-open-button {
    min-height: 38px;
    padding: 0 12px;
    user-select: none;
}

.order-chat-open-button {
    position: relative;
    border: 0;
}

.order-chat-open-button b {
    display: inline-grid;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    place-items: center;
}

.button-svg-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}

.button-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    animation: button-spin .72s linear infinite;
}

@keyframes button-spin {
    to {
        transform: rotate(360deg);
    }
}

.button-mask-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    background: currentColor;
    display: inline-block;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.chat-mask-icon {
    -webkit-mask-image: url('/icons/editor/chat.svg');
    mask-image: url('/icons/editor/chat.svg');
}

.lucide-icon {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.menu-chevron {
    width: 7px;
    height: 7px;
    margin-left: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--transition);
}

.order-print-menu[open] .menu-chevron,
.order-command-menu[open] .menu-chevron {
    transform: translateY(2px) rotate(225deg);
}

.order-print-menu-list,
.order-command-menu-list {
    width: max-content;
    min-width: 220px;
    max-width: min(380px, calc(100vw - 36px));
}

.order-print-menu-list button,
.order-print-menu-list a,
.order-command-menu-list button,
.order-command-menu-list a {
    display: -webkit-box;
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.35;
}

.order-print-empty {
    display: block;
    padding: 10px;
    color: var(--color-muted);
    font-size: 12px;
}

.back-link {
    display: inline-flex;
    min-height: 38px;
    padding: 0 11px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    align-items: center;
    background: var(--color-surface);
    color: #4f5666;
    font-size: 13px;
    gap: 7px;
}

.back-link:hover {
    border-color: #c9ced8;
    color: var(--color-primary);
}

.order-editor-layout {
    display: grid;
    grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

.order-editor-sidebar {
    display: grid;
    gap: 18px;
}

.order-editor-content {
    display: grid;
    gap: 18px;
}

.order-section {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.order-section-header {
    display: flex;
    min-height: 70px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--color-border);
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.order-section-header h2,
.order-content-header h2 {
    margin: 0;
    color: var(--color-primary);
    font-size: 16px;
}

.order-section-kicker {
    display: block;
    margin-bottom: 3px;
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.order-autosave {
    color: var(--color-success);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.order-field-grid,
.measurement-fields {
    display: grid;
    padding: 18px;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.order-summary-list {
    display: grid;
    padding: 7px 18px;
}

.order-summary-list > div {
    display: grid;
    min-height: 43px;
    padding: 9px 0;
    grid-template-columns: 100px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.order-summary-list > div + div {
    border-top: 1px solid #f0f1f4;
}

.order-summary-list > div > span:first-child,
.order-summary-note > span {
    color: var(--color-muted);
    font-size: 11px;
}

.order-summary-list strong {
    min-width: 0;
    font-size: 11px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.order-summary-list .status-badge {
    justify-self: start;
}

.order-subsection {
    margin: 0 18px;
    padding: 18px 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.order-subsection-heading {
    display: flex;
    margin-bottom: 13px;
    align-items: center;
    justify-content: space-between;
}

.order-subsection-heading h3 {
    margin: 0;
    font-size: 13px;
}

.text-action {
    padding: 0;
    background: transparent;
    color: #315db6;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.order-info-list {
    display: grid;
    gap: 10px;
}

.order-info-list div {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
}

.order-info-list span {
    color: var(--color-muted);
    font-size: 11px;
}

.order-info-list strong {
    min-width: 0;
    font-size: 11px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.customer-phone-line {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.customer-contact-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
}

.customer-contact-button {
    display: inline-grid;
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    padding: 0;
    cursor: pointer;
    place-items: center;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.customer-contact-button img {
    display: block;
    width: 15px;
    height: 15px;
    object-fit: contain;
}

.contact-max img {
    width: 18px;
    height: 18px;
    border-radius: 5px;
}

.contact-phone img {
    width: 14px;
    height: 14px;
    filter: brightness(0) saturate(100%) invert(10%) sepia(19%) saturate(1727%) hue-rotate(190deg) brightness(92%) contrast(94%);
}

.work-schedules-list-section .return-section-header {
    align-items: center;
}

.work-schedules-list-section .list-search-form {
    display: grid;
    width: min(100%, 760px);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.work-schedules-list-section .list-search-form .search-field {
    min-width: 0;
    width: 100%;
}

.work-schedules-list-section .list-search-form .secondary-button {
    width: auto;
    min-width: 132px;
}

@media (max-width: 520px) {
    .work-schedules-list-section .list-search-form {
        grid-template-columns: 1fr;
    }

    .work-schedules-list-section .list-search-form .secondary-button {
        width: 100%;
    }
}

@media (prefers-color-scheme: dark) {
    .contact-phone img {
        filter: brightness(0) saturate(100%) invert(98%) sepia(7%) saturate(122%) hue-rotate(184deg) brightness(101%) contrast(96%);
    }
}

.customer-contact-button:hover {
    border-color: currentColor;
}

.contact-whatsapp {
    color: #168b50;
}

.contact-whatsapp:hover {
    background: #edf9f2;
}

.contact-telegram {
    color: #257ca8;
}

.contact-telegram:hover {
    background: #edf7fb;
}

.contact-max {
    color: #7252a3;
}

.contact-max:hover {
    background: #f5f0fb;
}

.contact-phone {
    color: var(--color-primary);
}

.contact-phone:hover {
    background: var(--color-primary-soft);
}

.order-summary-note {
    margin: 0 18px;
    padding: 18px 0;
    border-top: 1px solid var(--color-border);
}

.order-summary-note p {
    display: -webkit-box;
    margin: 7px 0 0;
    overflow: hidden;
    color: #424855;
    font-size: 11px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.order-calculation-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 12px 16px 16px;
    gap: 8px;
}

.order-calculation-card {
    display: grid;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #f8fafc;
    align-content: start;
    gap: 8px;
}

.order-calculation-card.is-current {
    background: var(--color-surface);
}

.order-calculation-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-primary);
    text-decoration: none;
    gap: 8px;
}

.order-calculation-top strong {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-calculation-top .status-badge {
    flex: 0 1 auto;
    max-width: 58%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-calculation-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-primary);
    text-decoration: none;
    gap: 8px;
}

.order-calculation-main strong {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.order-calculation-main span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-calculation-main span,
.order-calculation-empty {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 600;
}

.order-calculation-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.order-calculation-meta strong {
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.order-calculation-link {
    width: 100%;
    min-height: 34px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.order-calculation-link:hover {
    border-color: #cfd5df;
    background: var(--color-primary-soft);
}

.order-calculation-empty {
    margin: 0;
    grid-column: 1 / -1;
}

@media (max-width: 1100px) {
    .order-calculation-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .order-calculation-list {
        grid-template-columns: 1fr;
        padding: 10px 14px 14px;
    }
}

.icon-text-button {
    display: inline-flex;
    min-height: 34px;
    padding: 0 11px;
    border-radius: var(--radius-sm);
    align-items: center;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    gap: 7px;
}

.edit-icon {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    background: currentColor;
    display: inline-block;
    mask-image: url('/icons/editor/pencil.svg');
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('/icons/editor/pencil.svg');
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

@media (prefers-color-scheme: dark) {
    .order-section-header .icon-text-button,
    .field-action-buttons .icon-text-button,
    .customer-picker-buttons .icon-text-button,
    .nomenclature-picker-actions .icon-text-button,
    .order-line-picker-toolbar .icon-text-button,
    .order-line-picker-item-actions button,
    .nomenclature-favorite-button {
        background: rgb(255 255 255 / 12%);
        color: #f8fafc;
    }

    .order-section-header .icon-text-button:hover,
    .field-action-buttons .icon-text-button:hover,
    .customer-picker-buttons .icon-text-button:hover,
    .nomenclature-picker-actions .icon-text-button:hover,
    .order-line-picker-toolbar .icon-text-button:hover,
    .order-line-picker-item-actions button:hover,
    .nomenclature-favorite-button:hover {
        background: rgb(255 255 255 / 18%);
        color: #fff;
    }

    .nomenclature-favorite-button.is-active {
        border-color: rgb(239 82 47 / 50%);
        background: rgb(239 82 47 / 18%);
        color: #ff8b70;
    }

    .order-line-picker-add-button,
    .order-line-picker-related-action,
    .order-line-picker-row-actions .row-menu-button {
        border-color: rgb(255 255 255 / 14%);
        background: rgb(255 255 255 / 12%);
        color: #f8fafc;
    }

    .order-line-picker-add-button:hover,
    .order-line-picker-related-action:hover {
        border-color: rgb(239 82 47 / 45%);
        background: rgb(239 82 47 / 15%);
        color: #ff8b70;
    }

    .order-line-picker-added-count {
        background: rgb(255 255 255 / 10%);
        color: #cbd5e1;
    }

    .order-line-picker-added-count.is-active {
        background: rgb(45 131 93 / 28%);
        color: #9fe1c0;
    }

    .order-line-picker-tabs {
        border-color: rgb(255 255 255 / 14%);
        background: rgb(255 255 255 / 8%);
    }

    .order-line-picker-tabs button {
        color: #cbd5e1;
    }

    .order-line-picker-tabs button.is-active {
        background: rgb(255 255 255 / 14%);
        color: #fff;
    }

    .field-action-buttons .icon-text-button:disabled,
    .field-action-buttons .icon-text-button.is-disabled,
    .customer-picker-buttons .icon-text-button:disabled,
    .customer-picker-buttons .icon-text-button.is-disabled,
    .nomenclature-picker-actions .icon-text-button.is-disabled {
        background: rgb(255 255 255 / 7%);
        color: #9ca3af;
    }

    .icon-text-button .plus-icon::before,
    .icon-text-button .plus-icon::after,
    .primary-button .plus-icon::before,
    .primary-button .plus-icon::after,
    .secondary-button .plus-icon::before,
    .secondary-button .plus-icon::after {
        background: currentColor;
    }

}

.order-event-list {
    display: grid;
}

.order-payment-summary {
    display: flex;
    min-height: 58px;
    padding: 13px 18px;
    border-top: 1px solid var(--color-border);
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.order-payment-summary span {
    color: var(--color-muted);
    font-size: 11px;
}

.order-payment-summary strong {
    color: var(--color-primary);
    font-size: 15px;
}

.order-payment-list {
    display: grid;
}

.order-payment-item {
    position: relative;
    display: grid;
    min-height: 66px;
    padding: 13px 18px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
}

.order-payment-item + .order-payment-item {
    border-top: 1px solid var(--color-border);
}

.order-payment-item:has(.row-actions[open]) {
    z-index: 10;
}

.order-payment-main,
.order-payment-value {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.order-payment-main strong,
.order-payment-value strong {
    font-size: 11px;
}

.order-payment-main span:not(.status-badge) {
    color: var(--color-muted);
    font-size: 10px;
}

.order-payment-method-line {
    display: grid;
    gap: 2px;
}

.order-payment-method-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.order-payment-method-title strong {
    color: #303542;
    font-size: 11px;
}

.order-payment-method-line time {
    color: var(--color-muted);
    font-size: 10px;
}

.order-payment-file-icon {
    display: inline-grid;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    align-items: center;
    color: #315db6;
    justify-items: center;
}

.order-payment-file-icon:hover {
    background: var(--color-primary-soft);
}

.order-payment-file-icon img {
    width: 15px;
    height: 15px;
}

.order-payment-receipt {
    color: #8a91a0 !important;
}

.order-payment-receipt.is-issued {
    color: #287152 !important;
}

.order-payment-comment {
    display: -webkit-box;
    margin: 2px 0 0;
    overflow: hidden;
    color: #555c6b;
    font-size: 10px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.order-payment-value {
    justify-items: end;
}

.order-payment-actions {
    justify-self: end;
}

.order-payment-empty {
    min-height: 130px;
}

.order-payment-modal-window {
    width: min(100%, 680px);
}

.order-cashback-title {
    flex-wrap: wrap;
}

.order-cashback-meta {
    color: var(--color-muted);
    font-size: 10px;
    line-height: 1.4;
}

.order-cashback-item .status-badge {
    width: fit-content;
}

.orders-cashback-cell .cell-primary {
    margin-bottom: 2px;
}

.order-print-options-modal-window {
    width: min(100%, 620px);
}

.order-print-options-modal-window .modal-header p {
    margin: 6px 0 0;
    color: var(--color-muted);
    font-size: var(--font-size-body-small);
    font-weight: 700;
}

.order-print-options-body {
    display: grid;
    flex: 0 0 auto;
    padding: 20px 22px;
    overflow: visible;
    gap: 10px;
}

.order-print-date-card {
    display: grid;
    min-height: 68px;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
    align-items: center;
    gap: 14px;
}

.order-print-date-card > span {
    color: var(--color-text);
    font-size: var(--font-size-body-small);
    font-weight: 700;
}

.order-print-date-card input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    outline: none;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--font-size-control);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.order-print-date-card input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgb(238 82 48 / 14%);
}

.order-print-option {
    min-height: 56px;
    padding: 0 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    background: #f7f8fb;
    font-size: var(--font-size-body-small);
    font-weight: 700;
}

.order-print-option:hover {
    border-color: #ccd2dc;
    background: var(--color-surface);
}

.order-print-options-modal-window .modal-actions {
    display: flex;
    min-height: 64px;
    padding: 12px 22px;
    border-top: 1px solid var(--color-border);
    align-items: center;
    justify-content: flex-end;
    background: var(--color-surface-muted);
    gap: 10px;
}

.order-print-options-modal-window .modal-actions .primary-button,
.order-print-options-modal-window .modal-actions .secondary-button {
    min-width: 150px;
    justify-content: center;
}

@media (max-width: 640px) {
    .order-print-date-card {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .order-print-options-modal-window .modal-actions {
        padding: 10px 14px;
    }

    .order-print-options-modal-window .modal-actions .primary-button,
    .order-print-options-modal-window .modal-actions .secondary-button {
        min-width: 0;
        flex: 1 1 0;
    }
}

.setup-password-option.payment-receipt-toggle {
    padding: 10px 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.payment-file-field {
    gap: 7px;
}

.payment-file-field .order-file-picker {
    width: 100%;
}

.payment-file-selection {
    overflow: hidden;
    color: var(--color-muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-file-field .file-link {
    width: fit-content;
    font-size: 11px;
}

.payment-file-field .file-link[hidden] {
    display: none;
}

.order-event-item {
    position: relative;
    display: grid;
    min-width: 0;
    padding: 15px 42px 15px 18px;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 11px;
}

.order-event-item + .order-event-item {
    border-top: 1px solid var(--color-border);
}

.order-event-item:has(.row-actions[open]) {
    z-index: 10;
}

.event-type-mark {
    width: 5px;
    height: 5px;
    margin-top: 6px;
    border-radius: 50%;
    background: #8791a4;
}

.event-type-call {
    background: #e4572e;
}

.event-type-delivery {
    background: #315db6;
}

.event-type-measurement {
    background: #8b5cf6;
}

.event-type-installation {
    background: #168b50;
}

.order-event-copy {
    min-width: 0;
}

.order-event-title {
    display: flex;
    margin-bottom: 4px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.order-event-title strong {
    font-size: 12px;
}

.order-event-copy time {
    color: var(--color-muted);
    font-size: 10px;
}

.order-event-copy p {
    display: -webkit-box;
    margin: 7px 0 0;
    overflow: hidden;
    color: #555c6b;
    font-size: 11px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.order-event-item > .event-menu-button {
    position: absolute;
    top: 7px;
    right: 7px;
}

.order-event-item > .event-menu-button .row-actions-menu {
    top: 34px;
}

.order-event-more {
    display: flex;
    padding: 10px 18px 14px 39px;
    border-top: 1px solid var(--color-border);
}

.order-event-more-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
}

.order-event-more-button:hover,
.order-event-more-button:focus-visible {
    color: var(--color-accent);
}

.order-event-modal-window {
    width: min(100%, 620px);
}

.event-comment-field {
    grid-column: 1 / -1;
}

.order-tabs {
    display: flex;
    min-height: 54px;
    padding: 0 18px;
    border-bottom: 1px solid var(--color-border);
    align-items: stretch;
    gap: 4px;
}

.order-tab {
    position: relative;
    display: inline-flex;
    padding: 0 15px;
    align-items: center;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    gap: 7px;
    white-space: nowrap;
}

.order-tab::after {
    position: absolute;
    right: 11px;
    bottom: -1px;
    left: 11px;
    height: 2px;
    background: transparent;
    content: '';
}

.order-tab.is-active {
    color: var(--color-primary);
}

.order-tab.is-active::after {
    background: var(--color-accent);
}

.order-tab > span:not(.tab-state-dot) {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #f0f1f4;
    color: #646b79;
    font-size: 10px;
    place-items: center;
}

.tab-state-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e2a32e;
}

.order-tab-panel {
    min-height: 480px;
}

.order-file-upload {
    display: grid;
    padding: 18px 20px;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 1fr) auto;
    align-items: end;
    gap: 12px;
}

.order-file-modal-window {
    width: min(100%, 620px);
}

.order-service-bulk-modal-window {
    width: min(100%, 860px);
}

.order-purchase-reconciliation-modal-window {
    width: min(100%, 980px);
}

.category-picker-layer {
    z-index: 140;
}

.category-picker-modal-window {
    width: min(100%, 720px);
}

.category-picker-body {
    display: grid;
    gap: 14px;
}

.category-picker-search {
    width: 100%;
}

.category-picker-current {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.category-picker-list {
    display: grid;
    max-height: min(52vh, 520px);
    overflow: auto;
    gap: 8px;
}

.category-picker-row {
    display: grid;
    min-height: 58px;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    background: var(--color-surface);
}

.category-picker-row:hover {
    border-color: #d6dbe4;
    background: var(--color-surface-muted);
}

.category-picker-folder-button {
    display: grid;
    min-width: 0;
    padding: 8px;
    border: 0;
    border-radius: var(--radius-sm);
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.category-picker-folder-button:hover {
    background: var(--color-primary-soft);
}

.category-picker-folder-button strong {
    color: var(--color-primary);
}

.category-picker-folder-button small {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
}

.category-picker-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 8px;
}

.category-picker-value {
    display: flex;
    min-height: 42px;
    min-width: 0;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    align-items: center;
    background: var(--color-surface);
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.category-picker-value:hover,
.category-picker-value:focus {
    border-color: #cfd6e4;
    background: var(--color-surface-muted);
    box-shadow: 0 0 0 3px rgb(25 30 50 / 6%);
    outline: none;
}

.category-picker-clear-button {
    position: relative;
    width: 42px;
    height: 42px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-muted);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.category-picker-clear-button:hover {
    border-color: #d6dbe4;
    background: var(--color-surface);
    color: var(--color-primary);
}

.category-picker-clear-button span {
    position: absolute;
    top: 19px;
    left: 12px;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.category-picker-clear-button span:first-child {
    transform: rotate(45deg);
}

.category-picker-clear-button span:last-child {
    transform: rotate(-45deg);
}

.order-service-bulk-body {
    display: grid;
    gap: 14px;
}

.order-service-bulk-search {
    width: 100%;
}

.order-service-bulk-list {
    display: grid;
    max-height: min(56vh, 560px);
    overflow: auto;
    gap: 8px;
}

.order-service-bulk-row {
    display: grid;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 12px;
    background: var(--color-surface);
}

.order-service-bulk-row:hover {
    border-color: #d6dbe4;
    background: var(--color-surface-muted);
}

.order-service-bulk-row strong {
    color: var(--color-primary);
}

.order-service-bulk-row small {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 600;
}

.order-service-bulk-price {
    font-size: 13px;
    white-space: nowrap;
}

.order-service-bulk-count {
    display: inline-flex;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    align-items: center;
    background: #eef1f6;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.order-service-bulk-count.is-active {
    background: #e6f7ef;
    color: #2f7a55;
}

.order-service-bulk-add-button {
    justify-self: end;
}

.order-purchase-reconciliation-body {
    display: grid;
    gap: 14px;
}

.purchase-reconciliation-result {
    display: grid;
    gap: 14px;
}

.purchase-reconciliation-summary,
.purchase-reconciliation-warnings,
.purchase-reconciliation-extra {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.purchase-reconciliation-summary span {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.purchase-reconciliation-summary strong,
.purchase-reconciliation-extra h3 {
    margin: 0;
    color: var(--color-primary);
    font-size: 15px;
}

.purchase-reconciliation-warnings {
    background: #fffaf4;
    color: #8a5b12;
    font-size: 12px;
    font-weight: 700;
}

.purchase-reconciliation-table {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.purchase-reconciliation-table-head,
.purchase-reconciliation-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.3fr) minmax(220px, 1.2fr) 110px 120px;
    align-items: center;
    gap: 12px;
}

.purchase-reconciliation-table-head {
    min-height: 48px;
    padding: 0 14px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.purchase-reconciliation-row {
    min-height: 70px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
}

.purchase-reconciliation-row:last-child {
    border-bottom: 0;
}

.purchase-reconciliation-row strong {
    display: block;
    color: var(--color-primary);
    font-size: 13px;
}

.purchase-reconciliation-row small,
.purchase-reconciliation-extra small {
    display: block;
    margin-top: 4px;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 600;
}

.purchase-reconciliation-extra > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
}

.purchase-reconciliation-extra > div:last-child {
    border-bottom: 0;
}

.purchase-reconciliation-extra small {
    grid-column: 1 / -1;
}

@media (max-width: 720px) {
    .order-purchase-reconciliation-modal-window {
        width: 100%;
    }

    .purchase-reconciliation-table {
        border: 0;
        background: transparent;
    }

    .purchase-reconciliation-table-head {
        display: none;
    }

    .purchase-reconciliation-row {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 10px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        background: var(--color-surface);
    }

    .purchase-reconciliation-row > div:nth-child(3) {
        color: var(--color-muted);
        font-size: 12px;
        font-weight: 700;
    }
}

.order-file-upload-modal {
    padding: 0;
    border-bottom: 0;
    grid-template-columns: 1fr;
    align-items: stretch;
}

.order-file-upload .error-banner {
    margin: 0;
    grid-column: 1 / -1;
}

.order-file-picker {
    display: flex;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px dashed #b7bdc9;
    border-radius: var(--radius-sm);
    align-items: center;
    background: var(--color-surface-muted);
    cursor: pointer;
    gap: 10px;
}

.order-file-picker:hover {
    border-color: #8e96a9;
    background: var(--color-primary-soft);
}

.order-file-picker img {
    width: 20px;
    height: 20px;
}

.order-file-picker strong,
.order-file-picker small {
    display: block;
}

.order-file-picker strong {
    color: var(--color-primary);
    font-size: 12px;
}

.order-file-picker small,
.order-file-selection {
    color: var(--color-muted);
    font-size: 10px;
}

.order-file-picker input {
    position: fixed;
    top: -100vh;
    left: -100vw;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.order-file-note input {
    height: 58px;
}

.order-file-selection {
    grid-column: 1 / -1;
}

.measurement-selected-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.measurement-selected-photo {
    display: inline-flex;
    max-width: 100%;
    min-height: 28px;
    padding: 0 4px 0 9px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    align-items: center;
    background: var(--color-surface);
    color: #4f5667;
    font-size: 11px;
    font-weight: 700;
    gap: 6px;
}

.measurement-selected-photo span {
    overflow: hidden;
    max-width: 220px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.measurement-selected-photo button {
    display: grid;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: var(--radius-sm);
    place-items: center;
    background: #eef1f7;
    color: #5c6372;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.measurement-selected-photo button:hover {
    background: #f7dedb;
    color: #9d3d3d;
}

.order-file-list {
    display: grid;
    padding: 16px 20px;
    gap: 12px;
}

.order-file-item {
    position: relative;
    display: grid;
    min-height: 76px;
    padding: 13px 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.order-file-item[data-file-open-url],
.order-schedule-item:has([data-order-measurement-edit]),
.order-schedule-item:has([data-order-delivery-edit]),
.order-schedule-item:has([data-order-installation-edit]) {
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.order-file-item[data-file-open-url]:hover,
.order-schedule-item:has([data-order-measurement-edit]):hover,
.order-schedule-item:has([data-order-delivery-edit]):hover,
.order-schedule-item:has([data-order-installation-edit]):hover {
    border-color: #d7dce5;
    background: var(--color-surface-muted);
}

.order-file-item:has(.row-actions[open]) {
    z-index: 10;
}

.order-file-icon {
    display: inline-grid;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    place-items: center;
}

.order-file-icon img {
    width: 19px;
    height: 19px;
}

.order-file-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.order-file-copy > a {
    overflow: hidden;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-file-copy span {
    color: var(--color-muted);
    font-size: 10px;
}

.order-file-copy p {
    margin: 2px 0 0;
    color: #555c6b;
    font-size: 11px;
}

.order-file-actions {
    justify-self: end;
}

.order-chat-drawer {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: grid;
    pointer-events: none;
}

.order-chat-drawer.is-open {
    pointer-events: auto;
}

.order-chat-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(25 30 50 / 42%);
    opacity: 0;
    transition: opacity var(--transition);
}

.order-chat-drawer.is-open .order-chat-drawer-backdrop {
    opacity: 1;
}

.order-chat-drawer-panel {
    position: relative;
    justify-self: end;
    display: grid;
    width: min(100vw, 560px);
    height: 100vh;
    overflow: hidden;
    grid-template-rows: minmax(0, 1fr);
    background: var(--color-surface);
    box-shadow: -28px 0 60px rgb(25 30 50 / 20%);
    transform: translateX(104%);
    transition: transform 220ms ease;
}

.order-chat-drawer.is-open .order-chat-drawer-panel {
    transform: translateX(0);
}

.order-chat-frame {
    display: grid;
    min-height: 0;
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
}

.order-chat-drawer-header {
    display: grid;
    min-width: 0;
    min-height: 54px;
    padding: 0 10px 0 16px;
    border-bottom: 1px solid var(--color-border);
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    background: var(--color-surface);
}

.order-chat-drawer-header h2 {
    margin: 0;
    color: var(--color-primary);
    font-size: var(--font-size-section-title);
    font-weight: 800;
    line-height: 1.15;
}

.order-chat-drawer-header p {
    margin: 4px 0 0;
    overflow: hidden;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-chat-drawer-close {
    flex: 0 0 auto;
    align-self: center;
}

.order-chat-drawer .order-chat-shell {
    min-height: 0;
    height: 100%;
    border-top: 0;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
}

.order-chat-drawer .order-chat-list {
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

.order-chat-drawer .order-chat-channel-list {
    display: flex;
    min-width: 0;
    padding: 0;
    gap: 4px;
    overflow-x: auto;
    align-items: stretch;
}

.order-chat-drawer .order-chat-channel {
    position: relative;
    display: inline-flex;
    min-width: auto;
    min-height: 54px;
    padding: 0 11px;
    border: 0;
    border-radius: 0;
    align-items: center;
    background: transparent;
    color: var(--color-muted);
    font-weight: 600;
    gap: 7px;
    white-space: nowrap;
    box-shadow: none;
}

.order-chat-drawer .order-chat-channel::after {
    position: absolute;
    right: 8px;
    bottom: -1px;
    left: 8px;
    height: 2px;
    background: transparent;
    content: "";
}

.order-chat-drawer .order-chat-channel:hover:not(:disabled),
.order-chat-drawer .order-chat-channel.is-active {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.order-chat-drawer .order-chat-channel.is-active {
    color: var(--color-primary);
}

.order-chat-drawer .order-chat-channel.is-active::after {
    background: var(--color-accent);
}

.order-chat-drawer .order-chat-channel small {
    display: none;
}

.order-chat-drawer .order-chat-channel span {
    font-size: 12px;
}

.order-chat-drawer .order-chat-channel b {
    position: static;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    font-size: 10px;
    transform: none;
}

.order-chat-drawer .order-chat-main {
    min-height: 0;
    overflow: hidden;
}

.order-chat-shell {
    display: grid;
    min-height: 620px;
    border-top: 1px solid var(--color-border);
    grid-template-columns: 280px minmax(0, 1fr);
    background: var(--color-surface);
}

.order-chat-sidebar {
    display: grid;
    border-right: 1px solid var(--color-border);
    align-content: start;
    background: var(--color-surface-muted);
}

.order-chat-contact {
    display: grid;
    padding: 18px 20px;
    border-bottom: 1px solid var(--color-border);
    gap: 5px;
}

.order-chat-contact strong {
    overflow: hidden;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-chat-contact span {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
}

.order-chat-channel-list {
    display: grid;
    padding: 12px;
    gap: 8px;
}

.order-chat-channel {
    display: grid;
    min-height: 64px;
    padding: 12px 42px 12px 13px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
    gap: 3px;
    position: relative;
    text-align: left;
}

.order-chat-channel:hover:not(:disabled),
.order-chat-channel.is-active {
    border-color: #dfe3ed;
    background: var(--color-surface);
    box-shadow: 0 8px 22px rgb(25 30 50 / 6%);
}

.order-chat-channel.is-active {
    border-color: rgb(238 78 42 / 38%);
}

.order-chat-channel:disabled {
    color: #98a0af;
    cursor: not-allowed;
}

.order-chat-channel span {
    font-size: 13px;
    font-weight: 800;
}

.order-chat-channel small {
    overflow: hidden;
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-chat-channel b {
    display: inline-grid;
    min-width: 23px;
    height: 23px;
    padding: 0 7px;
    border-radius: 999px;
    background: #eef1f7;
    color: #5e6675;
    font-size: 10px;
    font-weight: 800;
    place-items: center;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.order-chat-main {
    display: grid;
    min-width: 0;
    grid-template-rows: minmax(0, 1fr) auto;
}

.order-chat-list {
    display: grid;
    max-height: 540px;
    padding: 18px 20px 24px;
    align-content: start;
    gap: 12px;
    overflow: auto;
    background:
        linear-gradient(180deg, rgb(250 251 252 / 92%), rgb(255 255 255 / 92%)),
        var(--color-surface);
}

.order-chat-message {
    display: flex;
    min-width: 0;
}

.order-chat-message.is-outgoing {
    justify-content: flex-end;
}

.order-chat-message.is-incoming {
    justify-content: flex-start;
}

.order-chat-bubble {
    width: min(680px, 84%);
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: 0 8px 22px rgb(25 30 50 / 5%);
}

.order-chat-message.is-outgoing .order-chat-bubble {
    border-color: rgb(238 78 42 / 20%);
    background: #fff7f3;
}

.order-chat-message.is-incoming .order-chat-bubble {
    border-color: rgb(29 155 240 / 18%);
    background: #eef7ff;
}

.order-chat-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    position: relative;
}

.order-chat-meta strong {
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 800;
}

.order-chat-meta span:not(.status-badge),
.order-chat-footer {
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 700;
}

.order-chat-status-icon {
    display: inline-grid;
    width: 22px;
    height: 14px;
    place-items: center;
    color: #9aa2b1;
}

.order-chat-status-icon.is-stored,
.order-chat-status-icon.is-sent {
    color: var(--color-accent);
}

.order-chat-status-icon.is-delivered {
    color: #2c9f66;
}

.order-chat-status-icon.is-read {
    color: #1d9bf0;
}

.order-chat-status-icon.is-failed {
    color: #d84b2a;
}

.order-chat-status-icon.is-stored .order-chat-status-checks,
.order-chat-status-icon.is-sent .order-chat-status-checks {
    color: var(--color-accent);
}

.order-chat-status-icon.is-delivered .order-chat-status-checks {
    color: #2c9f66;
}

.order-chat-status-icon.is-read .order-chat-status-checks {
    color: #1d9bf0;
}

.order-chat-status-checks {
    position: relative;
    display: block;
    width: 17px;
    height: 11px;
}

.order-chat-status-checks::before,
.order-chat-status-checks::after {
    content: "";
    position: absolute;
    top: 0;
    width: 4px;
    height: 8px;
    border-right: 1.7px solid currentColor;
    border-bottom: 1.7px solid currentColor;
    border-radius: 1px;
    transform: rotate(42deg);
}

.order-chat-status-checks::before {
    left: 4px;
}

.order-chat-status-checks::after {
    left: 9px;
}

.order-chat-status-icon.is-sent .order-chat-status-checks::after,
.order-chat-status-icon.is-stored .order-chat-status-checks::after {
    display: none;
}

.order-chat-status-clock {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.order-chat-status-clock::before,
.order-chat-status-clock::after {
    content: "";
    position: absolute;
    left: 5px;
    bottom: 5px;
    width: 2px;
    border-radius: 2px;
    background: currentColor;
    transform-origin: bottom center;
}

.order-chat-status-clock::before {
    height: 5px;
}

.order-chat-status-clock::after {
    height: 4px;
    transform: rotate(90deg);
}

.order-chat-status-error {
    display: inline-grid;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    place-items: center;
}

.order-chat-message-menu {
    position: relative;
    z-index: 2;
    margin-left: auto;
}

.order-chat-message-menu[open] {
    z-index: 30;
}

.order-chat-message-menu summary {
    list-style: none;
}

.order-chat-message-menu summary::-webkit-details-marker {
    display: none;
}

.order-chat-message-menu .row-menu-button {
    width: 28px;
    height: 28px;
}

.order-chat-bubble p {
    margin: 10px 0 0;
    color: #252a36;
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.order-chat-reactions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 7px;
}

.order-chat-message.is-outgoing .order-chat-reactions {
    justify-content: flex-end;
}

.order-chat-reactions span {
    display: inline-flex;
    min-width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    box-shadow: 0 4px 12px rgb(25 30 50 / 8%);
    font-size: 15px;
    line-height: 1;
}

.order-chat-deleted-text {
    color: #8b93a3 !important;
    font-style: italic;
}

.order-chat-reply-preview,
.order-chat-reply-composer {
    display: grid;
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-sm);
    background: rgb(238 241 247 / 70%);
    cursor: default;
    gap: 3px;
    text-align: left;
}

.order-chat-reply-preview {
    margin-top: 10px;
}

button.order-chat-reply-preview {
    cursor: pointer;
}

button.order-chat-reply-preview:hover {
    background: rgb(229 234 244 / 92%);
}

.order-chat-reply-preview strong,
.order-chat-reply-composer strong {
    overflow: hidden;
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-chat-reply-preview span,
.order-chat-reply-composer span {
    overflow: hidden;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-chat-message.is-chat-highlighted .order-chat-bubble {
    outline: 3px solid rgb(239 82 47 / 24%);
    outline-offset: 3px;
}

.order-chat-reply-composer {
    position: relative;
    grid-template-columns: minmax(0, 1fr) 26px;
    align-items: center;
    background: var(--color-surface);
}

.order-chat-reply-composer button {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
}

.order-chat-reply-composer button:hover {
    background: var(--color-primary-soft);
}

.order-chat-reply-composer button span {
    position: absolute;
    top: 12px;
    left: 7px;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: #737b8c;
    transform: rotate(45deg);
}

.order-chat-reply-composer button span:last-child {
    transform: rotate(-45deg);
}

.chat-deleted-modal-window,
.chat-edit-modal-window {
    width: min(100%, 520px);
    border-radius: var(--radius-md);
}

.chat-deleted-modal-window .modal-header,
.chat-edit-modal-window .modal-header {
    min-height: 68px;
    padding: 16px 18px;
    gap: 14px;
}

.chat-deleted-modal-window .modal-eyebrow,
.chat-edit-modal-window .modal-eyebrow {
    margin-bottom: 3px;
    font-size: 9px;
    letter-spacing: 0;
}

.chat-deleted-modal-window .modal-header h2,
.chat-edit-modal-window .modal-header h2 {
    color: var(--color-primary);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
}

.chat-deleted-modal-window .modal-header p,
.chat-edit-modal-window .modal-header p {
    margin: 4px 0 0;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
}

.chat-deleted-modal-window .modal-close-button,
.chat-edit-modal-window .modal-close-button {
    width: 34px;
    height: 34px;
}

.chat-deleted-modal-window .modal-close-button span,
.chat-edit-modal-window .modal-close-button span {
    top: 16px;
    left: 9px;
    width: 16px;
    background: #555c6b;
}

.chat-deleted-modal-window .modal-body,
.chat-edit-modal-window .modal-body {
    padding: 16px 18px;
}

.chat-deleted-preview {
    display: grid;
    padding: 12px 13px;
    border: 1px solid #edf0f5;
    border-radius: var(--radius-sm);
    background: #f8fafc;
    gap: 10px;
}

.chat-deleted-preview p {
    margin: 0;
    color: #252a36;
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-deleted-modal-window .modal-actions,
.chat-edit-modal-window .modal-actions {
    display: flex;
    min-height: 58px;
    padding: 10px 18px;
    border-top: 1px solid var(--color-border);
    align-items: center;
    justify-content: flex-end;
    background: #fafbfc;
}

.chat-deleted-modal-window .modal-actions .secondary-button,
.chat-edit-modal-window .modal-actions .secondary-button,
.chat-edit-modal-window .modal-actions .primary-button {
    height: 38px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 700;
}

.chat-edit-modal-window .form-field {
    margin: 0;
}

.chat-edit-modal-window textarea {
    min-height: 132px;
    resize: vertical;
}

.order-chat-attachment-image {
    display: block;
    width: min(320px, 100%);
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid #e1e5ed;
    border-radius: var(--radius-sm);
    background: #fff;
}

.order-chat-attachment-image img {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: cover;
}

.order-chat-attachment-video {
    display: block;
    width: min(420px, 100%);
    max-height: 320px;
    margin-top: 10px;
    border: 1px solid #e1e5ed;
    border-radius: var(--radius-sm);
    background: #111827;
}

.order-chat-attachment-video-preview {
    position: relative;
    display: grid;
    width: min(360px, 100%);
    min-height: 108px;
    margin-top: 10px;
    padding: 18px 18px 16px;
    overflow: hidden;
    border: 1px solid #dfe5ee;
    border-radius: var(--radius-sm);
    align-items: end;
    gap: 14px;
    background:
        linear-gradient(135deg, rgb(25 30 50 / 92%), rgb(51 62 89 / 92%)),
        radial-gradient(circle at 82% 18%, rgb(239 84 47 / 30%), transparent 28%);
    background-position: center;
    background-size: cover;
    color: #fff;
    text-decoration: none;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.order-chat-attachment-video-preview.has-preview {
    min-height: 170px;
    background-image:
        linear-gradient(180deg, rgb(25 30 50 / 20%), rgb(25 30 50 / 84%)),
        var(--chat-video-preview);
}

.order-chat-attachment-video-preview:hover {
    border-color: rgb(239 84 47 / 42%);
    box-shadow: 0 16px 34px rgb(25 30 50 / 16%);
    transform: translateY(-1px);
}

.order-chat-attachment-video-preview > span:last-child {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.order-chat-attachment-video-preview strong {
    overflow: hidden;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-chat-attachment-video-preview small {
    color: rgb(255 255 255 / 72%);
    font-size: 11px;
    font-weight: 700;
}

.order-chat-video-play {
    position: absolute;
    top: 16px;
    left: 16px;
    display: grid;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-accent, #ef542f);
    place-items: center;
    box-shadow: 0 10px 24px rgb(239 84 47 / 28%);
}

.order-chat-video-play::before {
    width: 0;
    height: 0;
    margin-left: 3px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid #fff;
    content: "";
}

.order-chat-attachment-audio {
    display: grid;
    width: min(360px, 100%);
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid #e1e5ed;
    border-radius: var(--radius-sm);
    background: #fff;
    gap: 8px;
}

.order-chat-attachment-audio > div {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.order-chat-attachment-audio strong {
    overflow: hidden;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-chat-attachment-audio small {
    flex: 0 0 auto;
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 700;
}

.order-chat-attachment-audio audio {
    display: block;
    width: 100%;
    height: 34px;
}

.order-chat-attachment-file {
    display: inline-flex;
    max-width: 100%;
    min-height: 44px;
    margin-top: 10px;
    padding: 9px 11px;
    border: 1px solid #e1e5ed;
    border-radius: var(--radius-sm);
    align-items: center;
    gap: 9px;
    background: #fff;
    color: var(--color-primary);
    text-decoration: none;
}

.order-chat-attachment-file img {
    width: 19px;
    height: 19px;
}

.order-chat-attachment-file span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.order-chat-attachment-file strong {
    overflow: hidden;
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-chat-attachment-file small {
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 700;
}

.order-chat-footer {
    display: flex;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
}

.order-chat-edited-mark {
    margin-right: auto;
    color: #8b93a3 !important;
    font-style: italic;
}

.order-chat-composer {
    display: grid;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--color-border);
    grid-template-columns: 1fr;
    gap: 8px;
    background: #fafbfc;
}

.order-chat-send-status {
    display: inline-flex;
    width: fit-content;
    min-height: 24px;
    padding: 0 2px;
    align-items: center;
    gap: 8px;
    color: #687386;
    font-size: 12px;
    font-weight: 700;
}

.order-chat-send-status[hidden] {
    display: none !important;
}

.order-chat-send-status span {
    width: 16px;
    height: 16px;
    border: 2px solid #dfe4ec;
    border-top-color: var(--color-accent, #ef542f);
    border-radius: 50%;
    animation: chat-send-spinner 760ms linear infinite;
}

.order-chat-send-status b {
    font: inherit;
}

.order-chat-send-status em {
    position: relative;
    display: block;
    width: 98px;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: #e7ebf2;
}

.order-chat-send-status em::after {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--chat-send-progress, 0%);
    border-radius: inherit;
    background: var(--color-accent, #ef542f);
    content: "";
    transition: width 160ms ease;
}

.order-chat-send-status em[hidden] {
    display: none !important;
}

@keyframes chat-send-spinner {
    to {
        transform: rotate(360deg);
    }
}

.order-chat-emoji-picker {
    position: relative;
}

.order-chat-emoji-picker summary {
    display: inline-grid;
    width: 36px;
    height: 36px;
    border: 1px solid #dfe3ec;
    border-radius: var(--radius-sm);
    place-items: center;
    background: #fff;
    cursor: pointer;
    font-size: 18px;
    list-style: none;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.order-chat-emoji-picker summary::-webkit-details-marker {
    display: none;
}

.order-chat-emoji-picker summary:hover {
    border-color: rgb(228 87 46 / 45%);
    box-shadow: 0 8px 18px rgb(25 30 50 / 8%);
    transform: translateY(-1px);
}

.order-chat-emoji-row {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(4, 32px);
    gap: 4px;
    padding: 8px;
    border: 1px solid #dfe3ec;
    border-radius: var(--radius-sm);
    background: #fff;
    box-shadow: 0 16px 34px rgb(25 30 50 / 14%);
}

.order-chat-emoji-row button {
    display: inline-grid;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    font-size: 17px;
    place-items: center;
    transition: background var(--transition), transform var(--transition);
}

.order-chat-emoji-row button:hover {
    background: #eef1f7;
    transform: translateY(-1px);
}

.order-chat-composer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.order-chat-composer-tools {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.order-chat-suggest-button {
    min-height: 36px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.order-chat-unlink-button {
    min-height: 36px;
    padding: 0 12px;
    border-color: rgb(239 68 68 / 28%);
    background: rgb(239 68 68 / 7%);
    color: #b42318;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.order-chat-suggestion {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #dfe3ec;
    border-radius: var(--radius-sm);
    align-items: start;
    background: #fff;
}

.order-chat-suggestion[hidden] {
    display: none;
}

.order-chat-suggestion span {
    display: block;
    margin-bottom: 4px;
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.order-chat-suggestion p {
    margin: 0;
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
}

.order-chat-suggestion-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.order-chat-suggestion-actions .secondary-button {
    min-height: 34px;
    padding: 0 12px;
    font-size: 11px;
    white-space: nowrap;
}

.order-chat-suggestion-actions .icon-button {
    position: relative;
    display: inline-grid;
    width: 34px;
    height: 34px;
    border: 1px solid #dfe3ec;
    border-radius: var(--radius-sm);
    place-items: center;
    background: #fff;
}

.order-chat-suggestion-actions .icon-button span {
    position: absolute;
    width: 14px;
    height: 2px;
    margin: 0;
    border-radius: 999px;
    background: var(--color-muted);
}

.order-chat-suggestion-actions .icon-button span:first-child {
    transform: rotate(45deg);
}

.order-chat-suggestion-actions .icon-button span:last-child {
    transform: rotate(-45deg);
}

.order-chat-file-control {
    display: inline-grid;
    min-width: 0;
    min-height: 36px;
    cursor: pointer;
}

.order-chat-file-control input {
    display: none;
}

.order-chat-file-control span {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid #dfe3ec;
    border-radius: var(--radius-sm);
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff;
    color: var(--color-primary);
}

.order-chat-file-control img {
    width: 16px;
    height: 16px;
}

.order-chat-file-control b {
    overflow: hidden;
    max-width: 190px;
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-chat-composer textarea {
    width: 100%;
    min-height: 84px;
    max-height: 160px;
    padding: 12px 13px;
    border: 1px solid #dfe3ec;
    border-radius: var(--radius-sm);
    outline: none;
    background: #fff;
    color: var(--color-text);
    font: inherit;
    font-size: 13px;
    line-height: 1.45;
    resize: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.order-chat-composer textarea:focus {
    border-color: rgb(228 87 46 / 55%);
    box-shadow: 0 0 0 3px rgb(228 87 46 / 10%);
}

.order-chat-send {
    min-height: 38px;
    padding: 0 18px;
    font-size: 12px;
    font-weight: 800;
}

.order-ai-widget {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 120;
}

.order-ai-toggle {
    display: grid;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 18px 36px rgb(238 78 42 / 28%);
    color: #fff;
    cursor: pointer;
    font-size: 17px;
    font-weight: 900;
    place-items: center;
    transition: transform var(--transition), box-shadow var(--transition);
}

.order-ai-toggle:hover {
    box-shadow: 0 20px 42px rgb(238 78 42 / 36%);
    transform: translateY(-2px);
}

.order-ai-widget.is-open .order-ai-toggle {
    display: none;
}

body.dialog-open .order-ai-widget:not(.is-open) .order-ai-toggle {
    display: none;
}

.order-ai-panel {
    position: absolute;
    right: 0;
    bottom: 74px;
    display: grid;
    width: min(390px, calc(100vw - 32px));
    height: min(620px, calc(100vh - 120px));
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: #fff;
    box-shadow: 0 26px 70px rgb(25 30 50 / 22%);
}

.order-ai-widget.is-open .order-ai-panel {
    bottom: 0;
}

.order-ai-header {
    display: flex;
    min-height: 68px;
    padding: 14px 16px;
    align-items: center;
    justify-content: space-between;
    background: var(--color-primary);
    color: #fff;
}

.order-ai-header div {
    display: grid;
    gap: 2px;
}

.order-ai-header span {
    color: rgb(255 255 255 / 68%);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.order-ai-header strong {
    font-size: 16px;
    font-weight: 800;
}

.order-ai-header button {
    display: grid;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: var(--radius-sm);
    place-items: center;
    background: transparent;
    color: #fff;
    cursor: pointer;
    opacity: 0.9;
    transition: background var(--transition), opacity var(--transition), transform var(--transition);
}

.order-ai-header button:hover {
    background: rgb(255 255 255 / 8%);
    opacity: 1;
}

.order-ai-header button:active {
    transform: scale(0.96);
}

.order-ai-header button svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentcolor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
}

.order-ai-messages {
    display: grid;
    padding: 14px;
    align-content: start;
    gap: 10px;
    overflow: auto;
    background: #f6f8fb;
}

.order-ai-empty {
    display: grid;
    min-height: 140px;
    place-content: center;
    text-align: center;
    gap: 5px;
    color: var(--color-muted);
}

.order-ai-empty strong {
    color: var(--color-primary);
    font-size: 15px;
    font-weight: 800;
}

.order-ai-empty span {
    font-size: 12px;
    font-weight: 700;
}

.order-ai-message {
    display: flex;
}

.order-ai-message.is-user {
    justify-content: flex-end;
}

.order-ai-message.is-assistant {
    justify-content: flex-start;
}

.order-ai-message.is-processing .order-ai-message-bubble {
    border-color: rgb(25 30 50 / 8%);
    background: #fff;
}

.order-ai-message.is-processing p {
    color: var(--color-muted);
    font-weight: 700;
}

.order-ai-processing-dots::after {
    display: inline-block;
    width: 18px;
    content: "...";
    animation: ai-processing-dots 1.2s steps(4, end) infinite;
    overflow: hidden;
    vertical-align: bottom;
}

@keyframes ai-processing-dots {
    0% {
        width: 0;
    }

    100% {
        width: 18px;
    }
}

.order-ai-message-bubble {
    width: min(86%, 310px);
    padding: 11px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 22px rgb(25 30 50 / 6%);
}

.order-ai-message.is-user .order-ai-message-bubble {
    border-color: rgb(238 78 42 / 22%);
    background: #fff7f3;
}

.order-ai-message-meta {
    display: flex;
    margin-bottom: 7px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.order-ai-message-meta strong {
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 800;
}

.order-ai-message-meta span {
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.order-ai-message-bubble p {
    margin: 0;
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.order-ai-attachment {
    display: inline-flex;
    max-width: 100%;
    margin-top: 8px;
    padding: 7px 9px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    align-items: center;
    gap: 7px;
    background: rgb(255 255 255 / 72%);
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.order-ai-attachment svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentcolor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.order-ai-attachment span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-ai-form {
    display: grid;
    padding: 12px;
    border-top: 1px solid var(--color-border);
    gap: 9px;
    background: #fff;
}

.order-ai-composer-field {
    display: grid;
    min-height: 112px;
    padding: 0;
    border: 1px solid #dfe3ec;
    border-radius: var(--radius-sm);
    background: #fff;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.order-ai-composer-field:focus-within {
    border-color: rgb(228 87 46 / 34%);
    box-shadow: 0 0 0 2px rgb(228 87 46 / 8%);
}

.order-ai-form textarea {
    width: 100%;
    min-height: 68px;
    max-height: 150px;
    padding: 11px 12px 4px;
    border: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    outline: none;
    color: var(--color-text);
    font: inherit;
    font-size: 13px;
    line-height: 1.45;
    resize: none;
}

.order-ai-form textarea:focus {
    box-shadow: none;
}

.order-ai-composer-actions {
    display: flex;
    min-height: 42px;
    padding: 6px;
    align-items: center;
    gap: 6px;
}

.order-ai-file-button,
.order-ai-send-button {
    display: grid;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: var(--radius-sm);
    align-items: center;
    justify-items: center;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), opacity var(--transition);
}

.order-ai-file-button {
    background: #f0f3f9;
    color: var(--color-primary);
}

.order-ai-file-button:hover {
    background: #e7ebf3;
}

.order-ai-file-button input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.order-ai-file-button svg,
.order-ai-send-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentcolor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.order-ai-file-name {
    min-width: 0;
    overflow: hidden;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

button.order-ai-send-button {
    margin-left: auto;
    width: 36px;
    height: 36px;
    border: 0 !important;
    border-radius: 50%;
    background: var(--color-accent) !important;
    background-color: var(--color-accent) !important;
    color: #fff !important;
    box-shadow: 0 10px 20px rgb(238 78 42 / 18%);
}

button.order-ai-send-button:hover,
button.order-ai-send-button:focus-visible,
button.order-ai-send-button:active,
button.order-ai-send-button.is-loading,
button.order-ai-send-button.is-loading:hover {
    background: var(--color-accent-dark) !important;
    background-color: var(--color-accent-dark) !important;
    color: #fff !important;
    box-shadow: 0 12px 24px rgb(238 78 42 / 24%);
    outline: none;
}

button.order-ai-send-button:disabled,
button.order-ai-send-button:disabled:hover,
button.order-ai-send-button:disabled:focus-visible {
    background: var(--color-accent) !important;
    background-color: var(--color-accent) !important;
    color: #fff !important;
    cursor: default;
    opacity: 0.86;
    box-shadow: 0 10px 20px rgb(238 78 42 / 14%);
}

.messenger-connection-modal-window,
.smtp-setting-modal-window,
.order-status-modal-window {
    width: min(100%, 660px);
    border-radius: var(--radius-md);
}

.messenger-connection-modal-window .modal-header,
.smtp-setting-modal-window .modal-header,
.order-status-modal-window .modal-header {
    min-height: 70px;
    padding: 16px 20px;
    gap: 14px;
}

.messenger-connection-modal-window .modal-eyebrow,
.smtp-setting-modal-window .modal-eyebrow,
.order-status-modal-window .modal-eyebrow {
    margin-bottom: 3px;
    font-size: 9px;
    letter-spacing: 0;
}

.messenger-connection-modal-window .modal-header h2,
.smtp-setting-modal-window .modal-header h2,
.order-status-modal-window .modal-header h2 {
    color: var(--color-primary);
    font-size: 20px;
    font-weight: 800;
}

.messenger-connection-modal-window .modal-close-button,
.smtp-setting-modal-window .modal-close-button,
.order-status-modal-window .modal-close-button {
    width: 34px;
    height: 34px;
}

.messenger-connection-modal-window .modal-close-button:focus-visible,
.smtp-setting-modal-window .modal-close-button:focus-visible,
.order-status-modal-window .modal-close-button:focus-visible {
    outline: 3px solid rgb(228 87 46 / 22%);
    outline-offset: 2px;
}

.messenger-connection-modal-window .modal-close-button span,
.smtp-setting-modal-window .modal-close-button span,
.order-status-modal-window .modal-close-button span {
    top: 16px;
    left: 9px;
    width: 16px;
}

.messenger-connection-modal-window .modal-body,
.smtp-setting-modal-window .modal-body,
.order-status-modal-window .modal-body {
    padding: 18px 20px 20px;
}

.messenger-connection-modal-window .form-grid,
.smtp-setting-modal-window .form-grid,
.order-status-modal-window .form-grid {
    gap: 14px;
}

.messenger-connection-modal-window .form-field > span,
.smtp-setting-modal-window .form-field > span,
.order-status-modal-window .form-field > span {
    color: #555c6b;
    font-size: 12px;
    font-weight: 700;
}

.messenger-connection-modal-window .form-field input,
.messenger-connection-modal-window .form-field select,
.smtp-setting-modal-window .form-field input,
.smtp-setting-modal-window .form-field select,
.order-status-modal-window .form-field input,
.order-status-modal-window .form-field select {
    height: 42px;
    padding: 0 12px;
    font-size: 14px;
}

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

.order-status-modal-grid .messenger-connection-switch {
    min-height: 42px;
    align-self: center;
}

.order-status-color-palette {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.order-status-color-option {
    position: relative;
    display: block;
}

.order-status-modal-window .order-status-color-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.order-status-color-option span {
    display: flex;
    min-height: 42px;
    padding: 8px 9px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    align-items: center;
    background: var(--color-surface);
    color: var(--color-primary);
    cursor: pointer;
    gap: 7px;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.order-status-color-option span:hover {
    border-color: #cfd6e4;
    background: var(--color-surface-muted);
}

.order-status-color-option input:checked + span {
    border-color: rgb(238 78 42 / 56%);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px rgb(238 78 42 / 12%);
}

.order-status-color-option input:focus-visible + span {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.order-status-color-option i {
    width: 18px;
    height: 18px;
    border: 1px solid rgb(25 30 50 / 10%);
    border-radius: 999px;
    flex: 0 0 auto;
    background: var(--swatch-bg);
    box-shadow: inset 0 0 0 4px var(--swatch-bg), inset 0 0 0 5px var(--swatch-text);
}

.order-status-color-option strong {
    overflow: hidden;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .page-heading-actions {
        width: 100%;
    }

    .page-heading-actions .primary-button,
    .page-heading-actions .secondary-button {
        flex: 1 1 160px;
        justify-content: center;
    }

    .order-status-modal-grid {
        grid-template-columns: 1fr;
    }

    .order-status-color-palette {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.messenger-connection-switch {
    display: inline-flex;
    width: fit-content;
    margin-top: 2px;
    align-items: center;
    cursor: pointer;
    gap: 10px;
}

.messenger-connection-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.messenger-connection-switch .switch-control {
    width: 38px;
    height: 22px;
    flex: 0 0 38px;
    border-radius: 11px;
    background: #c7cbd3;
}

.messenger-connection-switch input:checked + .switch-control {
    background: var(--color-accent);
}

.messenger-connection-switch strong {
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 800;
}

.messenger-connection-modal-window .modal-actions,
.smtp-setting-modal-window .modal-actions {
    display: flex;
    min-height: 62px;
    padding: 12px 20px;
    border-top: 1px solid var(--color-border);
    align-items: center;
    justify-content: flex-end;
    background: var(--color-surface-muted);
    gap: 10px;
}

.messenger-connection-modal-window .modal-actions .secondary-button,
.messenger-connection-modal-window .modal-actions .primary-button,
.smtp-setting-modal-window .modal-actions .secondary-button,
.smtp-setting-modal-window .modal-actions .primary-button {
    min-height: 38px;
    padding: 0 15px;
    font-size: 13px;
    font-weight: 700;
}

.messenger-qr-modal-window {
    width: min(100%, 520px);
}

.messenger-qr-box {
    display: grid;
    min-height: 280px;
    padding: 18px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    place-items: center;
    text-align: center;
}

.messenger-qr-image {
    width: min(240px, 70vw);
    height: min(240px, 70vw);
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    object-fit: contain;
}

.messenger-qr-box strong {
    margin-top: 12px;
    color: var(--color-primary);
    font-size: 14px;
}

.messenger-qr-state {
    max-width: 320px;
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

.messenger-qr-state.is-error {
    color: #b42318;
}

.messenger-qr-note {
    margin-top: 12px;
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.45;
}

.order-max-invite-box {
    gap: 10px;
}

.order-max-invite-link {
    display: block;
    margin-top: 12px;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
    text-align: center;
}

.order-max-invite-open-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.order-wholesale-message-modal-window {
    width: min(100%, 760px);
    border-radius: var(--radius-md);
}

.order-wholesale-message-modal-window .modal-header {
    min-height: 70px;
    padding: 16px 20px;
}

.order-wholesale-message-modal-window .modal-body {
    display: grid;
    padding: 18px 20px 20px;
    gap: 14px;
}

.order-wholesale-message-modal-window textarea {
    min-height: 280px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.45;
}

.order-wholesale-message-modal-window .modal-actions {
    display: flex;
    min-height: 62px;
    padding: 12px 20px;
    border-top: 1px solid var(--color-border);
    align-items: center;
    justify-content: flex-end;
    background: var(--color-surface-muted);
    gap: 10px;
}

.order-wholesale-message-modal-window .modal-actions .secondary-button,
.order-wholesale-message-modal-window .modal-actions .primary-button {
    min-height: 38px;
    padding: 0 15px;
    font-size: 13px;
    font-weight: 700;
}

.order-wholesale-message-modal-window [aria-disabled="true"] {
    pointer-events: none;
    opacity: .55;
}

.order-door-constructor-modal-window {
    width: min(1040px, calc(100vw - 32px));
    border-radius: var(--radius-md);
}

.order-door-constructor-modal-window .modal-header {
    min-height: 70px;
    padding: 16px 20px;
}

.order-door-constructor-modal-window .modal-body {
    padding: 18px 20px 20px;
}

.door-constructor-model-picker {
    display: block;
}

.door-constructor-model-select {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.order-door-constructor-modal-window .primary-button,
.order-door-constructor-modal-window .secondary-button,
.order-door-model-picker-modal-window .primary-button,
.order-door-model-picker-modal-window .secondary-button {
    gap: 9px;
}

.door-constructor-model-preview {
    display: grid;
    min-height: 64px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    background: var(--color-surface-muted);
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.door-constructor-model-select:hover .door-constructor-model-preview {
    border-color: var(--color-accent);
    background: var(--color-surface);
    box-shadow: 0 8px 20px rgb(25 30 50 / 8%);
}

.door-constructor-model-select:focus-visible .door-constructor-model-preview {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.door-constructor-model-thumb {
    display: block;
    width: 38px;
    height: 44px;
    border: 1px solid #dfe2e8;
    border-radius: 4px;
    background: var(--color-surface);
    object-fit: contain;
}

.door-constructor-model-thumb-placeholder {
    background:
        linear-gradient(90deg, transparent 45%, #cdd2dc 45%, #cdd2dc 55%, transparent 55%),
        #f2f3f6;
}

.door-constructor-model-thumb-default-icon {
    padding: 9px;
    background: #f4f6fa;
    opacity: 0.76;
}

.door-constructor-model-preview strong {
    color: var(--color-text);
    font-size: 12px;
}

.door-constructor-model-preview small {
    color: var(--color-muted);
    font-size: 11px;
}

.door-constructor-models {
    display: grid;
    gap: 14px;
}

.door-constructor-model-card {
    position: relative;
    display: grid;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    gap: 14px;
}

.door-constructor-model-remove-button {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
}

.door-constructor-model-card:first-child > .line-remove-button {
    visibility: hidden;
}

.door-constructor-toggle,
.door-constructor-opening-toggle {
    min-height: 42px;
    align-self: end;
}

.door-constructor-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.door-constructor-section-header h3 {
    margin: 0;
}

.door-constructor-openings-header {
    margin: 2px 0 0;
}

.door-constructor-openings {
    display: grid;
    gap: 12px;
}

.door-constructor-opening {
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.door-constructor-opening header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.door-constructor-opening header strong {
    color: var(--color-text);
    font-size: 13px;
}

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

.order-door-model-picker-row {
    grid-template-columns: 46px minmax(0, 1fr) auto;
}

.door-constructor-opening:first-child .line-remove-button {
    visibility: hidden;
}

.order-door-kit-preview-modal-window {
    width: min(900px, calc(100vw - 32px));
    border-radius: var(--radius-md);
}

.order-door-kit-preview-modal-window .modal-header {
    min-height: 70px;
    padding: 16px 20px;
}

.order-door-kit-preview-modal-window .modal-body {
    padding: 18px 20px 20px;
}

.door-kit-preview {
    display: grid;
    gap: 12px;
}

.door-kit-preview-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
}

.door-kit-preview-warning {
    padding: 10px 12px;
    border: 1px solid #f4d7a3;
    border-radius: var(--radius-sm);
    background: #fff7e8;
    color: #7a5413;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.door-kit-preview-text {
    max-height: min(62vh, 620px);
    overflow: auto;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
    color: var(--color-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
    white-space: normal;
}

.door-kit-preview-lines {
    display: grid;
    max-height: min(62vh, 620px);
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.door-kit-preview-line {
    display: grid;
    min-height: 52px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border-light);
    grid-template-columns: 22px minmax(0, 1fr) 76px 110px 120px;
    align-items: center;
    gap: 10px;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .16s ease;
}

.door-kit-preview-line:hover {
    background: var(--color-surface-muted);
}

.door-kit-preview-line:last-child {
    border-bottom: 0;
}

.door-kit-preview-line > span:not(.cell-stack),
.door-kit-preview-line > strong:last-child {
    text-align: right;
    white-space: nowrap;
}

.door-kit-preview-line .cell-stack {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.door-kit-preview-line .cell-stack strong {
    display: -webkit-box;
    overflow: hidden;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.door-kit-preview-line .cell-secondary {
    display: -webkit-box;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.door-kit-preview-checkbox {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--color-accent);
}

.door-kit-preview-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.order-content-header {
    display: flex;
    min-height: 78px;
    padding: 17px 20px;
    border-bottom: 1px solid var(--color-border);
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.order-content-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.order-content-actions .primary-button,
.order-content-actions .secondary-button {
    gap: 9px;
}

.order-content-header p {
    margin: 4px 0 0;
    color: var(--color-muted);
    font-size: 11px;
}

.compact-button {
    min-height: 36px;
    padding: 0 13px;
    font-size: 12px;
}

.order-content-header .primary-button.compact-button,
.order-content-header .secondary-button.compact-button {
    width: auto;
    height: 40px;
    min-width: 0;
    flex: 0 0 auto;
    align-self: center;
}

.order-square-action {
    position: relative;
    width: 40px;
    min-width: 40px;
    padding: 0;
    justify-content: center;
}

.order-square-action::after {
    position: absolute;
    z-index: 80;
    top: calc(100% + 8px);
    left: 50%;
    min-width: max-content;
    max-width: min(220px, calc(100vw - 40px));
    padding: 7px 9px;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: #fff;
    content: attr(aria-label);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -2px);
    transition: opacity var(--transition), transform var(--transition);
    white-space: nowrap;
}

.order-square-action:hover::after,
.order-square-action:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.order-lines {
    overflow: visible;
}

.order-lines-head,
.order-line-row {
    display: grid;
    min-width: 0;
    grid-template-columns:
        32px
        minmax(300px, 1fr)
        56px
        54px
        100px
        86px
        96px
        76px
        126px
        32px;
    align-items: center;
    gap: 8px;
}

.order-lines-has-markup .order-lines-head,
.order-lines-has-markup .order-line-row {
    min-width: 0;
    grid-template-columns:
        32px
        minmax(300px, 1fr)
        56px
        54px
        98px
        84px
        86px
        96px
        76px
        126px
        32px;
}

.order-lines-head {
    min-height: 38px;
    padding: 0 18px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    color: #7b8290;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.order-lines-head span:nth-last-child(2) {
    text-align: right;
}

.order-line-row {
    position: relative;
    min-height: 72px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--color-border);
}

.order-line-row:has(.row-actions[open]) {
    z-index: 25;
}

.order-line-row .row-actions-menu {
    top: auto;
    bottom: calc(100% + 5px);
}

.order-line-index {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.order-line-mobile-index {
    display: none;
}

.order-line-product {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.order-line-thumb {
    display: block;
    width: 38px;
    height: 44px;
    flex: 0 0 auto;
    border: 1px solid #dfe2e8;
    border-radius: 4px;
    background: var(--color-surface);
    object-fit: contain;
}

.order-line-thumb-placeholder {
    background:
        linear-gradient(90deg, transparent 45%, #cdd2dc 45%, #cdd2dc 55%, transparent 55%),
        #f2f3f6;
}

.order-line-thumb-default-icon {
    padding: 8px;
    background: #f7f8fb;
    opacity: 0.78;
}

.order-line-product strong {
    font-size: 11px;
}

.order-line-row label {
    min-width: 0;
}

.order-line-row input,
.order-line-row select {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font: inherit;
    font-size: 11px;
    box-shadow: none;
    color: var(--color-text);
    pointer-events: none;
}

.order-line-row input:disabled,
.order-line-row select:disabled {
    opacity: 1;
    -webkit-text-fill-color: var(--color-text);
}

.input-suffix {
    position: relative;
    display: block;
}

.input-suffix input {
    padding-right: 22px;
}

.input-suffix > span {
    position: absolute;
    top: 9px;
    right: 8px;
    color: var(--color-muted);
    font-size: 10px;
}

.order-line-quantity-display {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.order-line-quantity-display input {
    flex: 1 1 auto;
    min-width: 0;
    appearance: textfield;
    -moz-appearance: textfield;
}

.order-line-quantity-display input::-webkit-inner-spin-button,
.order-line-quantity-display input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
}

.order-line-unit-cell {
    min-width: 0;
}

.order-line-unit-label {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 400;
    white-space: nowrap;
}

.order-line-total {
    font-size: 11px;
    padding-right: 6px;
    text-align: right;
    white-space: nowrap;
}

.order-lines-has-markup .order-line-total {
    padding-right: 10px;
}

.line-remove-button {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background: transparent;
    color: #9a4a3b;
    cursor: pointer;
    font-size: 19px;
}

.line-remove-button:hover {
    background: #fff1ee;
}

.mobile-field-label {
    display: none;
}

.order-line-name-field {
    width: 100%;
}

.order-delivery-charge-card {
    display: grid;
    margin: 12px 18px 0;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.8fr) auto auto;
    align-items: center;
    gap: 14px;
    background: var(--color-surface);
    transition: border-color var(--transition), background var(--transition);
}

.order-delivery-charge-card:hover {
    border-color: #d7dce5;
    background: var(--color-surface-muted);
}

.order-delivery-charge-main strong,
.order-delivery-charge-card > strong {
    color: var(--color-text);
    font-size: var(--font-size-body);
    font-weight: 800;
}

.order-delivery-charge-details {
    color: #454b59;
    font-size: var(--font-size-body-small);
}

.order-delivery-charge-comment {
    margin: 6px 18px 0;
    color: var(--color-muted);
    font-size: var(--font-size-body-small);
}

.delivery-charge-summary {
    display: grid;
    margin-bottom: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-surface);
}

.delivery-charge-summary span {
    display: flex;
    min-height: 38px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--color-muted);
    font-size: var(--font-size-body-small);
}

.delivery-charge-summary span:last-child {
    border-bottom: 0;
    background: var(--color-surface-muted);
    color: var(--color-primary);
    font-weight: 700;
}

.delivery-charge-summary strong {
    color: var(--color-text);
    font-weight: 800;
    white-space: nowrap;
}

.delivery-charge-summary .summary-money-input {
    width: 150px;
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-weight: 800;
    text-align: right;
}

.delivery-tariff-rule-list,
.delivery-charge-rule-list {
    display: grid;
    margin-top: 14px;
    gap: 10px;
}

.delivery-tariff-rule-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.3fr) minmax(150px, 0.8fr) minmax(110px, 0.5fr) minmax(130px, 0.6fr) auto;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    align-items: end;
}

.door-kit-rule-modal-window {
    width: min(1120px, calc(100vw - 32px));
}

.door-kit-rule-line-list {
    display: grid;
    margin-top: 14px;
    gap: 12px;
}

.door-kit-rule-line-row {
    display: grid;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    gap: 12px;
}

.door-kit-rule-line-row > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.door-kit-rule-line-row > header strong {
    color: var(--color-text);
    font-size: var(--font-size-body);
}

.door-kit-rule-line-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.door-kit-rule-required-toggle {
    min-height: 42px;
    align-self: end;
}

.delivery-charge-rule-row {
    display: flex;
    min-height: 58px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.delivery-charge-rule-row span {
    display: grid;
    gap: 3px;
}

.delivery-charge-rule-row small {
    color: var(--color-muted);
    font-size: var(--font-size-body-small);
    font-weight: 700;
}

.delivery-charge-rule-row.is-muted {
    color: var(--color-muted);
}

.order-purchase-list {
    display: grid;
    padding: 16px 20px;
    gap: 12px;
}

.order-purchase-row {
    display: grid;
    min-height: 70px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    grid-template-columns: minmax(180px, 1fr) minmax(130px, auto) minmax(150px, auto) auto 34px;
    align-items: center;
    gap: 16px;
}

.order-purchase-row:has([data-purchase-edit]) {
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.order-purchase-row:has([data-purchase-edit]):hover {
    border-color: #d7dce5;
    background: #fafbfc;
}

.order-purchase-row > div {
    display: grid;
    gap: 4px;
}

.order-purchase-row strong {
    font-size: 12px;
}

.order-purchase-row span:not(.status-badge) {
    color: var(--color-muted);
    font-size: 10px;
}

.order-purchase-row .row-actions {
    justify-self: end;
}

.order-purchase-row .row-actions-menu {
    width: 210px;
}

.order-purchase-row .row-actions-menu a {
    display: flex;
    align-items: center;
    line-height: var(--line-height-control);
}

.purchase-payment-add-button {
    justify-self: end;
    gap: 8px;
    white-space: nowrap;
}

.purchase-payment-list {
    display: grid;
    padding-top: 4px;
    grid-column: 1 / -1;
    gap: 8px;
}

.purchase-payment-item,
.purchase-payment-empty {
    display: grid;
    min-height: 44px;
    padding: 9px 10px;
    border: 1px solid #eef0f5;
    border-radius: var(--radius-sm);
    grid-template-columns: minmax(160px, 1fr) auto 30px;
    align-items: center;
    background: #fafbfe;
    color: #4d5361;
    gap: 10px;
}

.purchase-payment-empty {
    display: flex;
    min-height: 48px;
    border-color: #f3d5c9;
    align-items: center;
    background: #fff7f3;
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 700;
}

.purchase-payment-item > div {
    display: grid;
    gap: 2px;
}

.purchase-payment-item strong {
    color: var(--color-text);
    font-size: 12px;
}

.purchase-payment-item span,
.purchase-payment-item p {
    margin: 0;
    color: var(--color-muted);
    font-size: 10px;
}

.purchase-payment-meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.purchase-payment-file-link {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

.form-field.order-schedule-check {
    display: flex;
    min-height: 58px;
    padding: 11px 13px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    align-items: center;
    justify-content: flex-start;
    background: var(--color-surface);
    color: #454b59;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    gap: 14px;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.form-field.order-schedule-check:hover {
    border-color: #c8cfda;
    background: var(--color-surface);
}

.form-field.order-schedule-check:has(input:checked) {
    border-color: var(--color-border);
    background: var(--color-surface);
}

.form-field.order-schedule-check > input {
    position: relative;
    width: 66px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    flex: 0 0 66px;
    appearance: none;
    background: #c7cbd3;
    cursor: pointer;
    transition: background var(--transition), box-shadow var(--transition);
}

.form-field.order-schedule-check > input:checked {
    background: var(--color-accent);
}

.form-field.order-schedule-check > input::after {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: 0 2px 5px rgb(25 30 50 / 20%);
    content: '';
    transition: transform var(--transition);
}

.form-field.order-schedule-check > input:checked::after {
    transform: translateX(26px);
}

.form-field.order-schedule-check > input:focus-visible {
    box-shadow: 0 0 0 3px rgb(228 87 46 / 22%);
}

.form-field.order-schedule-check > span {
    color: var(--color-text);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
}

.installation-status-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    align-items: end;
    gap: 12px;
}

.installation-status-row .order-schedule-check {
    min-height: 42px;
    padding: 6px 10px;
    gap: 9px;
}

.installation-status-row .order-schedule-check > input {
    width: 44px;
    height: 26px;
    flex-basis: 44px;
}

.installation-status-row .order-schedule-check > input::after {
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
}

.installation-status-row .order-schedule-check > input:checked::after {
    transform: translateX(18px);
}

.installation-status-row .order-schedule-check > span {
    font-size: 12px;
    white-space: nowrap;
}

.segmented-action {
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: #596172;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.segmented-action + .segmented-action {
    border-left: 1px solid var(--color-border);
}

.segmented-action.is-active,
.segmented-action:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.order-schedule-list {
    display: grid;
    padding: 16px 20px;
    gap: 0;
}

.order-schedule-table-head {
    display: grid;
    min-height: 40px;
    padding: 0 10px 0 14px;
    border: 1px solid var(--color-border);
    border-bottom: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: #f8fafc;
    grid-template-columns: 25% 31% minmax(0, 1fr) 44px;
    align-items: center;
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: uppercase;
}

.order-schedule-actions {
    display: flex;
    min-height: 100%;
    padding-right: 10px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.order-schedule-file {
    display: inline-flex;
    width: fit-content;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    align-items: center;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
    gap: 8px;
}

.order-schedule-file img {
    width: 17px;
    height: 17px;
}

.order-schedule-item {
    display: grid;
    min-height: 58px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: 0;
    overflow: visible;
}

.order-schedule-table-head + .order-schedule-item {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.order-schedule-item + .order-schedule-item {
    border-top: 0;
    border-radius: 0;
}

.order-schedule-item:last-child {
    border-bottom-right-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
}

.order-schedule-main {
    display: grid;
    min-width: 0;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

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

.measurement-icon,
.delivery-icon,
.installation-icon {
    display: grid;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary-soft);
}

.measurement-icon::before,
.delivery-icon::before,
.installation-icon::before {
    width: 12px;
    height: 12px;
    margin: auto;
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    content: '';
}

.delivery-icon::before {
    width: 16px;
    height: 9px;
    border-radius: 2px;
}

.installation-icon::before {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    transform: rotate(45deg);
}

.order-schedule-main > div {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.order-schedule-card-main {
    padding: 13px 0 13px 14px;
    grid-template-columns: 25% 31% minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.order-schedule-main .order-schedule-title-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.order-schedule-title-row .status-badge {
    width: fit-content;
    max-width: 100%;
    font-weight: 600;
}

.order-schedule-main .order-schedule-meta-grid {
    display: contents;
    min-width: 0;
}

.order-schedule-meta-item {
    display: inline-flex;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    align-items: baseline;
    gap: 6px;
}

.order-schedule-meta-item > span {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
}

.order-schedule-meta-item > strong {
    overflow: hidden;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-schedule-main strong {
    overflow: hidden;
    font-size: 12px;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-schedule-main span:not(.status-badge),
.order-schedule-item p {
    color: var(--color-muted);
    font-size: 10px;
}

.order-schedule-main span:not(.status-badge) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-schedule-item p {
    margin: 0;
    padding: 0 14px 12px;
    grid-column: 1 / -1;
    line-height: 1.45;
}

.order-schedule-item .order-measurement-photo-list,
.order-schedule-item .order-access-summary {
    margin: 0 14px 12px;
    grid-column: 1 / -1;
}

.order-schedule-item .order-access-summary {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 400;
}

.order-schedule-main .order-schedule-meta-item > span {
    display: none;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
}

.order-schedule-main .order-schedule-meta-item > strong {
    overflow: hidden;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .order-schedule-list {
        padding: 12px;
        gap: 10px;
    }

    .order-schedule-table-head {
        display: none;
    }

    .order-schedule-item,
    .order-schedule-table-head + .order-schedule-item,
    .order-schedule-item + .order-schedule-item,
    .order-schedule-item:last-child {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
    }

    .order-schedule-card-main {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .order-schedule-main .order-schedule-meta-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
    }

    .order-schedule-main .order-schedule-meta-item > span {
        display: inline;
    }

    .order-schedule-item .order-schedule-actions {
        padding: 0 12px 12px 12px;
        justify-content: flex-end;
    }

    .order-measurement-result {
        margin: 0 12px 12px;
        padding: 10px;
    }

    .order-measurement-result-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

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

    .order-measurement-opening-values {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .order-measurement-opening-values div:last-child {
        grid-column: 1 / -1;
    }

    .order-measurement-opening-scheme {
        width: 100%;
        height: 66px;
    }
}

.link-danger-button {
    border: 0;
    background: transparent;
    color: #a64545;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.link-danger-button:hover {
    color: #8f3030;
    text-decoration: underline;
}

.measurement-fields {
    padding: 20px 0 0;
}

.measurement-toggle {
    min-height: 58px;
}

.measurement-workspace {
    display: grid;
    gap: 16px;
}

.measurement-workspace-heading {
    align-items: center;
}

.measurement-week {
    display: grid;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    background: #fff;
    gap: 12px;
}

.measurement-week-nav {
    display: inline-flex;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    align-items: center;
    color: #4b5262;
    font-size: 12px;
    font-weight: 800;
}

.measurement-week-nav:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.measurement-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(80px, 1fr));
    gap: 8px;
}

.measurement-day {
    display: grid;
    min-height: 74px;
    padding: 9px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    align-content: center;
    background: #fafbfe;
    color: #1b2130;
    text-align: center;
    gap: 3px;
}

.measurement-day span {
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.measurement-day strong {
    font-size: 22px;
    line-height: 1;
}

.measurement-day small {
    display: inline-grid;
    min-width: 22px;
    height: 22px;
    margin: 2px auto 0;
    border-radius: 999px;
    place-items: center;
    background: #eef1f7;
    color: #6d7482;
    font-size: 11px;
    font-weight: 800;
}

.measurement-day.has-items small {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.measurement-day.is-active {
    border-color: var(--color-accent);
    background: #fff6f3;
    box-shadow: 0 0 0 2px rgba(239, 83, 49, 0.14);
}

.measurement-day-title {
    display: flex;
    min-height: 70px;
    padding: 0 2px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.measurement-day-title span {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.measurement-day-title h2 {
    margin: 2px 0 0;
    color: var(--color-text);
    font-size: 28px;
}

.measurement-day-title strong {
    color: var(--color-muted);
    font-size: 13px;
}

.measurement-cards {
    display: grid;
    gap: 12px;
}

.measurement-card {
    display: grid;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #fff;
    gap: 14px;
}

.measurement-card.is-completed {
    background: #fbfffd;
}

.measurement-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.measurement-card-header span:not(.status-badge) {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 800;
}

.measurement-card-header h3 {
    margin: 3px 0 0;
    color: var(--color-text);
    font-size: 20px;
}

.measurement-contact-grid,
.measurement-update-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.measurement-contact-grid > div {
    display: grid;
    min-height: 54px;
    padding: 10px;
    border: 1px solid #edf0f5;
    border-radius: var(--radius-sm);
    background: #fafbfe;
    gap: 3px;
}

.measurement-contact-grid span,
.measurement-update-form .form-field > span,
.measurement-update-form .form-field > span:first-child {
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.measurement-contact-grid strong,
.measurement-contact-grid a {
    color: var(--color-text);
    font-size: 13px;
    font-weight: 800;
}

.measurement-contact-grid a {
    color: var(--color-primary);
}

.measurement-contact-wide {
    grid-column: 1 / -1;
}

.measurement-note {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: #f6f7fa;
    color: #555d6d;
    font-size: 12px;
    line-height: 1.45;
}

.measurement-update-form {
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    align-items: end;
}

.measurement-update-form .form-field {
    min-width: 0;
}

.measurement-update-form textarea {
    min-height: 84px;
}

.measurement-performed-check {
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    align-items: center;
    flex-direction: row;
    background: #fff;
    gap: 8px;
}

.measurement-performed-check input[type='checkbox'] {
    width: 16px;
    height: 16px;
}

.measurement-performed-check span {
    color: #454b59;
    font-size: 12px;
    font-weight: 800;
    text-transform: none;
}

.measurement-photo-picker {
    width: 100%;
}

.measurement-photo-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.order-measurement-photo-list {
    display: flex;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 8px;
}

.order-measurement-photo-list a {
    display: block;
    overflow: hidden;
    width: 58px;
    height: 50px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fafbfe;
}

.order-measurement-photo-list img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-measurement-result {
    display: grid;
    margin: 0 14px 14px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
    grid-column: 1 / -1;
    gap: 10px;
}

.order-measurement-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.order-measurement-result-head strong {
    color: var(--color-text);
    font-size: 13px;
    font-weight: 700;
}

.order-measurement-result-head span,
.order-measurement-result-empty {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 600;
}

.order-measurement-openings {
    display: grid;
    gap: 8px;
}

.order-measurement-opening {
    display: grid;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 12px;
}

.order-measurement-opening-main {
    display: grid;
    min-width: 0;
    gap: 8px;
}

.order-measurement-opening-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.order-measurement-opening-title > span {
    display: inline-grid;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    flex: 0 0 22px;
    font-size: 11px;
    font-weight: 800;
    place-items: center;
}

.order-measurement-opening-title strong {
    overflow: hidden;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-measurement-opening-title small {
    min-width: 0;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 600;
}

.order-measurement-opening-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.order-measurement-opening-values div {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.order-measurement-opening-values span {
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.order-measurement-opening-values strong {
    overflow: hidden;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-measurement-opening p {
    margin: 0;
    padding: 0;
    color: var(--color-muted);
    font-size: 11px;
    line-height: 1.35;
}

.order-measurement-opening-scheme {
    display: grid;
    width: 116px;
    height: 70px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    align-self: start;
    background: var(--color-surface);
    place-items: center;
}

.order-measurement-opening-scheme img {
    display: block;
    width: 96px;
    height: auto;
}

.order-measurement-opening-photos {
    display: flex;
    min-width: 0;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 8px;
}

.order-measurement-opening-photos a {
    display: block;
    overflow: hidden;
    width: 52px;
    height: 46px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fafbfe;
}

.order-measurement-opening-photos img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-access-summary {
    grid-column: 1 / -1;
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
}

.measurement-photo-link,
.measurement-photo-thumb {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fafbfe;
}

.measurement-photo-link {
    display: inline-flex;
    min-height: 72px;
    padding: 0 12px;
    align-items: center;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 800;
}

.measurement-photo-thumb {
    position: relative;
    overflow: hidden;
    width: 86px;
    height: 72px;
}

.measurement-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.measurement-photo-thumb form {
    position: absolute;
    top: 4px;
    right: 4px;
}

.measurement-photo-thumb button {
    display: grid;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    place-items: center;
    background: rgba(25, 30, 50, 0.86);
    color: #fff;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
}

.installer-data-section {
    display: grid;
    margin: 0 0 16px;
    gap: 8px;
}

.installer-data-section h3 {
    margin: 0;
    color: #555c6b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.installer-data-list {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
}

.installer-data-list > div {
    display: grid;
    min-height: 42px;
    padding: 8px 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.installer-data-list > div + div {
    border-top: 1px solid var(--color-border);
}

.installer-data-list strong,
.installer-data-list span {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.installer-data-list strong {
    color: var(--color-text);
}

.installer-data-list span {
    color: var(--color-muted);
    font-weight: 800;
}

.measurement-empty {
    margin: 0;
}

.measurement-layout {
    display: grid;
    grid-template-columns: minmax(292px, 340px) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
}

.measurement-month-panel,
.measurement-day-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.measurement-month-panel {
    position: sticky;
    top: calc(var(--header-height) + 18px);
    padding: 14px;
}

.measurement-month-header {
    display: grid;
    min-height: 44px;
    margin: -14px -14px 14px;
    padding: 0 12px;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.measurement-month-header a {
    display: grid;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: var(--radius-sm);
    place-items: center;
    color: #4f5667;
    font-size: 22px;
    line-height: 1;
}

.measurement-month-header a:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.measurement-month-header strong {
    display: block;
    color: var(--color-text);
    font-size: 14px;
}

.measurement-month-header span {
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 800;
}

.measurement-calendar-weekdays,
.measurement-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.measurement-calendar-weekdays {
    margin-bottom: 8px;
}

.measurement-calendar-weekdays span {
    color: #7b8291;
    font-size: 10px;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

.measurement-calendar-day {
    position: relative;
    display: grid;
    min-height: 38px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    place-items: center;
    background: var(--color-surface);
    color: #252b3a;
    font-size: 12px;
    font-weight: 900;
}

.measurement-calendar-day:hover {
    border-color: #cfd5df;
    background: var(--color-surface);
}

.measurement-calendar-day.is-muted {
    color: #b3bac8;
    background: var(--color-surface);
}

.measurement-calendar-day.has-items {
    border-color: transparent;
    background: var(--color-surface);
    color: var(--color-primary);
}

.measurement-calendar-day.is-active {
    border-color: var(--color-primary);
    background: var(--color-surface);
    color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.measurement-calendar-dots {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: flex;
    max-width: calc(100% - 10px);
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
}

.measurement-calendar-dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
}

.measurement-dot-new {
    background: #315db6;
}

.measurement-dot-planned {
    background: #8c6813;
}

.measurement-dot-approved {
    background: #8c6813;
}

.measurement-dot-measurement {
    background: #236a72;
}

.measurement-dot-completed {
    background: #2f7a53;
}

.measurement-dot-cancelled {
    background: #9d3d3d;
}

.measurement-day-panel {
    overflow: hidden;
}

.measurement-day-header {
    display: flex;
    min-height: 70px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.measurement-day-header span {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.measurement-day-header h2 {
    margin: 4px 0 0;
    color: var(--color-text);
    font-size: 18px;
    font-weight: 700;
}

.measurement-day-header strong {
    color: var(--color-muted);
    font-size: 13px;
}

.measurement-list {
    display: grid;
    padding: 14px;
    gap: 0;
}

.measurement-list-head {
    display: grid;
    min-height: 34px;
    padding: 0 12px;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 62px minmax(170px, 1.2fr) minmax(98px, 0.65fr) minmax(220px, 1.65fr) minmax(92px, 0.55fr) minmax(104px, auto);
    align-items: center;
    color: #8a91a0;
    font-size: 10px;
    font-weight: 900;
    gap: 14px;
    text-transform: uppercase;
}

.measurement-list-card {
    display: grid;
    width: 100%;
    min-height: 64px;
    padding: 11px 12px;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    grid-template-columns: 62px minmax(170px, 1.2fr) minmax(98px, 0.65fr) minmax(220px, 1.65fr) minmax(92px, 0.55fr) minmax(104px, auto);
    align-items: center;
    background: var(--color-surface);
    color: inherit;
    cursor: pointer;
    text-align: left;
    gap: 14px;
}

.measurement-list-card:hover {
    background: #fafbfe;
}

.measurement-list-card:last-of-type {
    border-bottom: 0;
}

.measurement-list-time {
    color: var(--color-text);
    font-size: 12px;
    font-weight: 900;
}

.measurement-list-customer,
.measurement-list-details {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.measurement-list-customer strong {
    overflow: hidden;
    color: var(--color-text);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.measurement-list-customer small,
.measurement-list-customer span,
.measurement-list-order,
.measurement-list-phone,
.measurement-list-details span,
.measurement-list-details small {
    overflow: hidden;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.measurement-list-order,
.measurement-list-phone {
    color: #4f5667;
    font-weight: 800;
}

.measurement-list-details small {
    color: #555d6d;
    font-weight: 600;
}

.measurement-list-card .status-badge {
    justify-self: start;
}

.measurement-list-status {
    display: flex;
    min-width: 0;
    justify-content: flex-start;
}

.measurement-list-photos {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 4px;
}

.measurement-list-photo,
.measurement-list-file,
.measurement-list-photo-count {
    display: inline-grid;
    width: 26px;
    height: 26px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    place-items: center;
    background: var(--color-surface-muted);
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 800;
}

.measurement-list-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.measurement-list-file img {
    width: 15px;
    height: 15px;
}

.measurement-list-empty {
    color: var(--color-muted);
    font-size: 12px;
}

.measurement-modal-window {
    width: min(720px, calc(100vw - 32px));
}

.measurement-modal-summary {
    margin-bottom: 16px;
}

.measurement-contact-summary {
    display: grid;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
}

.measurement-contact-item {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.measurement-contact-item span {
    color: #8a91a0;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.measurement-contact-item p {
    margin: 0;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.measurement-contact-item a {
    color: var(--color-primary);
}

.measurement-readonly-field strong {
    display: flex;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    align-items: center;
    background: var(--color-surface-muted);
    color: var(--color-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.measurement-readonly-field a {
    color: var(--color-primary);
}

.installation-modal-tabs {
    display: grid;
    margin-top: 16px;
    gap: 12px;
}

.installation-modal-tab-list {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid var(--color-border);
    gap: 4px;
}

.installation-modal-tab-list button {
    position: relative;
    min-height: 38px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.installation-modal-tab-list button::after {
    position: absolute;
    right: 10px;
    bottom: -1px;
    left: 10px;
    height: 2px;
    border-radius: 999px;
    background: transparent;
    content: '';
}

.installation-modal-tab-list button.is-active {
    color: var(--color-primary);
}

.installation-modal-tab-list button.is-active::after {
    background: var(--color-accent);
}

.installer-data-empty {
    min-height: 42px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
}

.delivery-modal-window {
    width: min(980px, calc(100vw - 32px));
}

.delivery-summary-report {
    display: grid;
    margin-bottom: 16px;
    grid-template-columns: minmax(170px, 0.5fr) minmax(0, 1.3fr) repeat(2, minmax(170px, 0.5fr));
    gap: 12px;
}

.delivery-summary-card {
    display: grid;
    min-height: 92px;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    align-content: center;
    background: var(--color-surface);
    gap: 5px;
}

.delivery-summary-card span,
.delivery-summary-card small {
    overflow: hidden;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.delivery-summary-card span {
    text-transform: uppercase;
}

.delivery-summary-card strong {
    overflow: hidden;
    color: var(--color-text);
    font-size: 18px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.delivery-summary-card-wide strong {
    font-size: 15px;
}

.accountable-balance-panel {
    display: grid;
    margin-bottom: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    overflow: hidden;
}

.accountable-balance-panel header {
    display: flex;
    min-height: 58px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.accountable-balance-panel h2 {
    margin: 4px 0 0;
    color: var(--color-text);
    font-size: 18px;
    font-weight: 900;
}

.accountable-balance-panel header small {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 800;
}

.accountable-balance-list {
    display: grid;
    max-height: 260px;
    overflow: auto;
}

.accountable-balance-row {
    display: grid;
    min-height: 52px;
    padding: 10px 16px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.accountable-balance-row + .accountable-balance-row {
    border-top: 1px solid var(--color-border);
}

.accountable-balance-total {
    position: sticky;
    bottom: 0;
    border-top: 1px solid var(--color-border);
    background: #f8fafc;
}

.accountable-balance-row span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.accountable-balance-row span strong,
.accountable-balance-row > strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accountable-balance-row span strong {
    color: var(--color-text);
    font-size: 13px;
    font-weight: 900;
}

.accountable-balance-row small {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
}

.accountable-balance-empty {
    padding: 16px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
}

.accountable-filters {
    grid-template-columns: repeat(3, minmax(150px, 220px)) auto;
}

.accountable-filter-button {
    min-width: 112px;
}

.accountable-grid-footer {
    gap: 12px;
}

.accountable-grid,
.accountable-grid .table-scroll {
    overflow: visible;
}

.accountable-table tbody tr:has(.row-actions[open]) {
    z-index: 30;
}

.accountable-table tbody tr:nth-last-child(-n + 2) .row-actions-menu {
    top: auto;
    bottom: calc(100% + 5px);
}

.accountable-income {
    color: #16803c;
}

.accountable-expense {
    color: #c92a2a;
}

.accountable-table td[data-label='Сумма'] .accountable-income {
    color: #16803c;
}

.accountable-table td[data-label='Сумма'] .accountable-expense {
    color: #c92a2a;
}

.delivery-purchases-section {
    display: grid;
    margin-top: 16px;
    gap: 10px;
}

.delivery-print-section {
    display: grid;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eef0f5;
    gap: 10px;
}

.delivery-print-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.delivery-purchases-header {
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.delivery-purchases-header h3 {
    margin: 0;
    color: #555c6b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.delivery-purchases-header span {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 800;
}

.delivery-purchase-card {
    display: grid;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    gap: 10px;
}

.delivery-purchase-summary {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(150px, 0.6fr) auto;
    align-items: center;
    gap: 12px;
}

.delivery-purchase-summary > div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.delivery-purchase-summary strong {
    overflow: hidden;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.delivery-purchase-summary span {
    overflow: hidden;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.delivery-payment-list {
    margin-top: 0;
    padding-top: 10px;
    border-top: 1px solid #eef0f5;
}

.delivery-payment-edit-button {
    width: 100%;
    border: 1px solid var(--color-border);
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.delivery-payment-edit-button:hover {
    border-color: #cfd5df;
    background: var(--color-surface);
}

.measurement-date-field > span {
    color: #555c6b;
    font-size: 14px;
    font-weight: 700;
}

.measurement-date-field input {
    height: 58px;
    padding: 0 48px 0 16px;
    color: var(--color-text);
    font-size: 20px;
    font-weight: 500;
}

.measurement-date-field input::-webkit-calendar-picker-indicator {
    width: 22px;
    height: 22px;
    cursor: pointer;
    opacity: 1;
}

.order-total-bar {
    display: flex;
    min-height: 74px;
    padding: 13px 20px;
    border-top: 1px solid var(--color-border);
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 34px;
}

.order-discount-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-adjustments {
    display: grid;
    gap: 10px;
}

.order-adjustments-summary {
    margin: 14px 18px 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.order-adjustment-card {
    display: flex;
    min-height: 64px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.order-panel-discount {
    margin: 14px 18px 18px;
    padding: 12px;
    border-top: 1px solid var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    flex: 0 0 auto;
}

.order-discount-caption {
    display: grid;
    min-width: 220px;
    margin-right: auto;
    gap: 3px;
}

.order-discount-caption strong {
    color: var(--color-primary);
    font-size: 12px;
}

.order-discount-caption span {
    color: var(--color-muted);
    font-size: 10px;
}

.order-discount-form label {
    display: grid;
    min-width: 110px;
    gap: 4px;
}

.order-discount-form select,
.order-discount-form input {
    width: 112px;
    height: 36px;
    padding: 0 9px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-size: 11px;
}

.order-discount-form .secondary-button {
    min-width: 104px;
}

.order-adjustment-modal-window {
    width: min(100%, 620px);
}

.order-adjustment-modal-body {
    display: grid;
    gap: 14px;
}

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

.order-discount-lines-modal-window {
    width: min(100%, 640px);
    max-height: min(88vh, 700px);
    border-radius: var(--radius-md);
}

.order-discount-lines-modal-window .modal-header {
    min-height: 68px;
    padding: 16px 18px;
    gap: 14px;
}

.order-discount-lines-modal-window .modal-eyebrow {
    margin-bottom: 3px;
    font-size: var(--font-size-caption);
    line-height: 14px;
}

.order-discount-lines-modal-window .modal-header h2 {
    font-size: var(--font-size-dialog-title);
    line-height: 1.18;
}

.order-discount-lines-modal-window .modal-header p {
    margin: 3px 0 0;
    color: var(--color-muted);
    font-size: var(--font-size-body-small);
    line-height: 1.35;
}

.order-discount-lines-modal-window .modal-close-button {
    width: 34px;
    height: 34px;
}

.order-discount-lines-modal-window .modal-close-button span {
    top: 16px;
    left: 8px;
}

.order-discount-lines-modal-window .modal-body {
    padding: 16px 18px;
}

.order-discount-lines-modal-window .modal-actions {
    display: flex;
    min-height: 58px;
    padding: 10px 18px;
    border-top: 1px solid var(--color-border);
    align-items: center;
    justify-content: flex-end;
    background: var(--color-surface-muted);
    gap: 8px;
}

.order-discount-lines-modal-window .modal-actions .primary-button,
.order-discount-lines-modal-window .modal-actions .secondary-button,
.discount-lines-toolbar .secondary-button {
    height: 34px;
    min-height: 34px;
    padding: 0 12px;
    font-size: var(--font-size-body);
}

.discount-lines-toolbar {
    display: flex;
    margin-bottom: 10px;
    gap: 8px;
    flex-wrap: wrap;
}

.discount-lines-list {
    display: grid;
    max-height: min(46vh, 340px);
    overflow-y: auto;
    gap: 8px;
}

.discount-line-option {
    display: grid;
    min-height: 50px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.discount-line-option:hover {
    border-color: #d7dce5;
    background: var(--color-surface-muted);
}

.discount-line-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.discount-line-check {
    position: relative;
    width: 18px;
    height: 18px;
    border: 1px solid #cfd5df;
    border-radius: 5px;
    background: var(--color-surface);
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.discount-line-check::after {
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    content: '';
    opacity: 0;
    transform: rotate(45deg) scale(0.8);
    transition: opacity var(--transition), transform var(--transition);
}

.discount-line-option input:checked + .discount-line-check {
    border-color: var(--color-accent);
    background: var(--color-accent);
    box-shadow: 0 3px 8px rgb(228 87 46 / 16%);
}

.discount-line-option input:checked + .discount-line-check::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

.discount-line-option input:focus-visible + .discount-line-check {
    outline: 2px solid rgb(228 87 46 / 20%);
    outline-offset: 2px;
}

.discount-line-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.discount-line-copy strong {
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--font-size-body-small);
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.discount-line-copy small {
    overflow: hidden;
    color: var(--color-muted);
    font-size: var(--font-size-label);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.discount-line-option b {
    color: var(--color-text);
    font-size: var(--font-size-body-small);
    font-weight: 800;
    white-space: nowrap;
}

.order-line-modal-window {
    width: min(100%, 720px);
    max-height: min(92dvh, 760px);
    overflow: hidden;
}

.order-line-modal-window .modal-form {
    min-height: 0;
    overflow: hidden;
}

.order-line-modal-window .modal-body {
    min-height: 0;
    overflow-y: auto;
}

.order-line-modal-window .modal-footer {
    flex: 0 0 auto;
}

.order-delivery-charge-modal-window {
    max-height: min(92vh, 760px);
    overflow: hidden;
}

.order-delivery-charge-modal-window .modal-form {
    min-height: 0;
    overflow: hidden;
}

.order-delivery-charge-modal-window .modal-body {
    min-height: 0;
    overflow-y: auto;
}

.order-delivery-charge-modal-window .modal-footer {
    flex: 0 0 auto;
}

.nomenclature-picker {
    position: relative;
}

.nomenclature-picker-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
}

.nomenclature-picker-actions {
    align-items: center;
}

.nomenclature-picker-actions .icon-text-button {
    text-decoration: none;
}

.nomenclature-picker-actions .icon-text-button.is-disabled {
    pointer-events: none;
}

.order-line-modal-window [data-order-line-selected] {
    background: #f4f6fa;
    color: var(--color-muted);
    cursor: default;
}

.order-line-modal-window [data-order-line-selected]:focus {
    border-color: var(--color-border);
    box-shadow: none;
}

.order-line-alias-field {
    margin-top: 18px;
}

.order-line-mode-tabs {
    margin-bottom: 18px;
}

.order-line-manual-section {
    display: grid;
    gap: 16px;
}

.order-line-manual-search {
    position: relative;
}

.order-line-manual-suggestions {
    position: absolute;
    z-index: 1700;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: var(--shadow-menu);
}

.order-line-manual-suggestion {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--color-border-soft);
    background: var(--color-surface);
    color: var(--color-primary);
    text-align: left;
    cursor: pointer;
}

.order-line-manual-suggestion:last-child {
    border-bottom: 0;
}

.order-line-manual-suggestion:hover {
    background: var(--color-primary-soft);
}

.order-line-manual-suggestion strong {
    display: block;
    font-size: 13px;
    line-height: 1.3;
}

.order-line-manual-suggestion span {
    display: block;
    margin-top: 4px;
    color: var(--color-muted);
    font-size: 12px;
}

.order-line-manual-suggestion-empty {
    padding: 12px 14px;
    color: var(--color-muted);
    font-weight: 700;
}

.size-inline-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.size-inline-fields input {
    width: 100%;
}

.folder-select-icon {
    position: relative;
    width: 18px;
    height: 14px;
    flex: 0 0 18px;
    border: 2px solid currentColor;
    border-radius: 3px;
}

.folder-select-icon::before {
    position: absolute;
    top: -6px;
    left: 1px;
    width: 8px;
    height: 5px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
    content: '';
}

.nomenclature-picker-dropdown {
    position: absolute;
    z-index: 1200;
    width: 100%;
    max-height: 310px;
    top: calc(100% + 6px);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: var(--shadow-menu);
}

.nomenclature-picker-results {
    max-height: 254px;
    overflow-y: auto;
}

.nomenclature-picker-state {
    padding: 14px 12px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
}

.nomenclature-picker-option {
    display: grid;
    width: 100%;
    min-height: 58px;
    padding: 9px 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    border-bottom: 1px solid #eef0f3;
    background: var(--color-surface);
    cursor: pointer;
    text-align: left;
    gap: 3px 12px;
}

.nomenclature-picker-option:hover {
    background: #f6f7fa;
}

.nomenclature-picker-option strong {
    color: var(--color-primary);
    font-size: 12px;
}

.nomenclature-picker-option span {
    grid-column: 1;
    color: var(--color-muted);
    font-size: 10px;
}

.nomenclature-picker-option small {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    font-size: 11px;
}

.nomenclature-picker-create-option {
    display: flex;
    width: 100%;
    min-height: 48px;
    padding: 0 12px;
    align-items: center;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    gap: 8px;
}

.order-line-values {
    margin-top: 18px;
}

.order-line-picker-modal-window {
    width: min(100%, 840px);
}

.order-line-picker-body {
    display: grid;
    gap: 14px;
}

.order-line-picker-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-line-picker-toolbar .search-field {
    flex: 1 1 auto;
}

.order-line-picker-create-action {
    min-height: 46px;
    flex: 0 0 auto;
}

.order-line-picker-search {
    max-width: none;
}

.order-line-picker-tabs {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    padding: 4px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #f4f6fa;
    gap: 4px;
}

.order-line-picker-tabs button {
    min-height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: calc(var(--radius-sm) - 2px);
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}

.order-line-picker-tabs button:hover {
    color: var(--color-primary);
}

.order-line-picker-tabs button.is-active {
    background: var(--color-surface);
    color: var(--color-primary);
    box-shadow: 0 8px 22px rgb(25 30 50 / 8%);
}

.order-line-picker-breadcrumbs {
    min-height: 40px;
    padding: 0;
    border-top: 0;
}

.order-line-picker-list {
    display: grid;
    max-height: min(56dvh, 520px);
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.order-line-picker-row {
    display: grid;
    width: 100%;
    min-height: 64px;
    padding: 10px 14px;
    border-bottom: 1px solid #eef0f3;
    align-items: center;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    gap: 12px;
    text-align: left;
}

.order-line-picker-row:last-child {
    border-bottom: 0;
}

.order-line-picker-row:hover {
    background: #f7f8fb;
}

.order-line-picker-folder-row {
    grid-template-columns: 24px minmax(0, 1fr);
}

.order-line-picker-return-row {
    grid-template-columns: 24px minmax(0, 1fr);
    background: #f7f8fb;
}

.order-line-picker-return-row > span:first-child {
    color: var(--color-accent);
    font-size: 18px;
    font-weight: 800;
}

.order-line-picker-item-row {
    min-height: 82px;
    grid-template-columns: 62px minmax(0, 1fr) auto;
}

.order-line-picker-item-row.is-action-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.order-line-picker-select-area {
    display: grid;
    min-width: 0;
    padding: 0;
    border: 0;
    align-items: center;
    background: transparent;
    color: inherit;
    cursor: pointer;
    gap: 12px;
    text-align: left;
}

.order-line-picker-item-row .order-line-picker-select-area {
    grid-template-columns: 62px minmax(0, 1fr);
}

.order-line-picker-variant-row .order-line-picker-select-area {
    grid-template-columns: minmax(0, 1fr);
}

.order-line-picker-item-card {
    border-bottom: 1px solid #eef0f3;
    background: var(--color-surface);
}

.order-line-picker-item-card:last-child {
    border-bottom: 0;
}

.order-line-picker-item-card > .order-line-picker-row {
    border-bottom: 0;
}

.order-line-picker-side {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 10px;
}

.order-line-picker-added-count {
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #f0f2f6;
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 800;
    line-height: 24px;
    white-space: nowrap;
}

.order-line-picker-added-count.is-active {
    background: #e5f6ee;
    color: #2d835d;
}

.order-line-picker-add-button {
    display: inline-grid;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    place-items: center;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition);
}

.order-line-picker-add-button:hover {
    border-color: #d6dbe4;
    background: var(--color-surface);
    color: var(--color-accent);
}

.order-line-picker-add-button:disabled {
    cursor: wait;
    opacity: .72;
}

.order-line-picker-related-action {
    display: inline-grid;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    place-items: center;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.order-line-picker-related-action:hover {
    border-color: #d6dbe4;
    background: var(--color-surface);
    color: var(--color-accent);
}

.order-line-picker-row-actions {
    position: relative;
    flex: 0 0 auto;
}

.order-line-picker-row-actions .row-menu-button {
    width: 34px;
    height: 34px;
    background: var(--color-primary-soft);
}

.order-line-picker-row-actions .row-actions-menu {
    min-width: 210px;
}

.order-line-picker-side > b {
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.order-line-picker-model-side {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 8px;
    min-width: max-content;
}

.order-line-picker-collapse-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    background: var(--color-muted);
    mask-image: url('/icons/editor/chevron-down.svg');
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('/icons/editor/chevron-down.svg');
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    transition: transform var(--transition), background var(--transition);
}

.order-line-picker-model-row:hover .order-line-picker-collapse-icon,
.order-line-picker-model-row.is-expanded .order-line-picker-collapse-icon {
    background: var(--color-primary);
}

.order-line-picker-model-row.is-expanded .order-line-picker-collapse-icon {
    transform: rotate(180deg);
}

.order-line-picker-item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.order-line-picker-item-actions button {
    display: inline-grid;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    cursor: pointer;
    place-items: center;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.order-line-picker-item-actions .nomenclature-favorite-button {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.order-line-picker-item-actions .nomenclature-favorite-button.is-active {
    border-color: #f3b59e;
    background: #fff1eb;
    color: var(--color-accent);
}

.order-line-picker-action-icon {
    width: 17px;
    height: 17px;
    background: currentColor;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.order-line-picker-action-icon.is-pencil {
    mask-image: url('/icons/editor/pencil.svg');
    -webkit-mask-image: url('/icons/editor/pencil.svg');
}

.order-line-picker-action-icon.is-copy {
    mask-image: url('/icons/editor/copy.svg');
    -webkit-mask-image: url('/icons/editor/copy.svg');
}

.order-line-picker-item-actions button:hover {
    border-color: #d6dbe4;
    background: var(--color-surface);
}

.order-line-picker-item-card.is-scroll-target {
    box-shadow: inset 3px 0 0 var(--color-accent);
}

.order-line-picker-related {
    display: grid;
    gap: 6px;
    padding: 0 14px 12px 86px;
}

.order-line-picker-variants {
    display: grid;
    gap: 6px;
    padding: 0 14px 12px 72px;
}

.order-line-picker-variant-row {
    display: grid;
    width: 100%;
    min-height: 42px;
    padding: 7px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    background: #f7f8fb;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
}

.order-line-picker-variant-row:hover {
    border-color: #d6dbe4;
    background: var(--color-surface);
}

.order-line-picker-variant-row strong {
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 800;
}

.order-line-picker-variant-row small {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 600;
}

.order-line-picker-variant-row > span:last-child {
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.order-line-picker-variant-row .order-line-picker-side > b {
    font-size: 12px;
}

.order-line-picker-related-group {
    display: grid;
    gap: 6px;
}

.order-line-picker-related-toggle,
.order-line-picker-related-folder,
.order-line-picker-related-item {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #f7f8fb;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
}

.order-line-picker-related-toggle {
    display: flex;
    min-height: 34px;
    padding: 7px 10px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
}

.order-line-picker-related-toggle:hover,
.order-line-picker-related-folder:hover,
.order-line-picker-related-item:hover {
    border-color: #d6dbe4;
    background: var(--color-surface);
}

.order-line-picker-related-toggle small {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.order-line-picker-related-items {
    display: grid;
    gap: 6px;
}

.order-line-picker-related-item {
    display: grid;
    min-height: 42px;
    padding: 7px 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.order-line-picker-related-item strong {
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 800;
}

.order-line-picker-related-item small {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 600;
}

.order-line-picker-related-item > span:last-child {
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.order-line-picker-related-folder {
    display: grid;
    min-height: 42px;
    padding: 7px 10px;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    background: #f7f8fb;
}

.order-line-picker-related-folder .cell-stack,
.order-line-picker-related-folder strong,
.order-line-picker-related-folder small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-line-picker-related-folder strong {
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 800;
}

.order-line-picker-related-folder small {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 600;
}

.order-line-picker-related-folder > span:last-child {
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.order-line-picker-row strong {
    color: var(--color-primary);
    font-size: 13px;
}

.order-line-picker-row small {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 600;
}

.order-line-picker-thumb {
    width: 62px;
    height: 62px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    object-fit: contain;
}

.order-line-picker-thumb-default-icon {
    padding: 15px;
    background: #f4f6fa;
    opacity: 0.76;
}

.order-line-picker-thumb-placeholder {
    display: block;
    background: #f4f5f7;
}

.order-line-picker-price {
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.order-line-picker-empty {
    margin: 0;
}

.order-general-modal-window {
    width: min(100%, 720px);
}

.customer-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
}

.customer-picker-control {
    position: relative;
    min-width: 0;
}

.field-action-buttons,
.customer-picker-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.field-action-buttons .icon-text-button,
.customer-picker-buttons .icon-text-button {
    min-height: 42px;
    padding: 0 11px;
    white-space: nowrap;
}

.field-action-buttons .icon-text-button:disabled,
.field-action-buttons .icon-text-button.is-disabled,
.customer-picker-buttons .icon-text-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.customer-picker-dropdown {
    position: absolute;
    z-index: 1200;
    width: 100%;
    max-height: 290px;
    top: calc(100% + 6px);
    left: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: 0 14px 32px rgba(25, 30, 50, 0.14);
}

.customer-picker-results {
    max-height: 238px;
    overflow-y: auto;
}

.customer-picker-state {
    padding: 14px 12px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
}

.customer-picker-results.is-empty::after {
    display: block;
    padding: 15px;
    color: var(--color-muted);
    content: 'Покупатели не найдены';
    font-size: 12px;
    text-align: center;
}

.customer-picker-option {
    display: grid;
    width: 100%;
    min-height: 54px;
    padding: 9px 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    border-bottom: 1px solid #f0f1f4;
    background: var(--color-surface);
    cursor: pointer;
    text-align: left;
    gap: 3px 10px;
}

.customer-picker-option:hover,
.customer-picker-option:focus-visible {
    background: #f6f7fa;
}

.customer-picker-option strong {
    min-width: 0;
    overflow: hidden;
    color: var(--color-primary);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-picker-option span {
    grid-column: 1;
    color: var(--color-muted);
    font-size: 11px;
}

.customer-picker-option small {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    color: #8a91a0;
    font-size: 10px;
}

.customer-picker-create-option {
    display: flex;
    width: 100%;
    min-height: 48px;
    padding: 0 12px;
    align-items: center;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    gap: 9px;
    text-decoration: none;
}

.customer-picker-create-option:hover {
    background: #e5e8f1;
}

.quick-customer-modal-window {
    width: min(100%, 720px);
}

.quick-customer-form {
    padding: 18px 20px;
}

.quick-customer-heading,
.quick-customer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.quick-customer-heading {
    margin-bottom: 14px;
}

.quick-customer-heading strong {
    font-size: 13px;
}

.quick-customer-heading button {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    font-size: 18px;
}

.quick-customer-heading button:hover {
    background: var(--color-primary-soft);
}

.quick-customer-legal-fields {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.quick-customer-footer {
    margin-top: 14px;
}

.form-inline-error {
    color: #b42318;
    font-size: 11px;
}

.form-inline-error.is-success {
    color: #1f7a4d;
    font-weight: 700;
}

.order-total-bar > div {
    display: grid;
    gap: 4px;
}

.order-total-bar span {
    color: var(--color-muted);
    font-size: 10px;
}

.order-total-bar strong {
    font-size: 13px;
}

.order-grand-total {
    min-width: 160px;
    padding-left: 24px;
    border-left: 1px solid var(--color-border);
}

.order-grand-total strong {
    color: var(--color-primary);
    font-size: 18px;
}

[data-customer-legal-fields][hidden] {
    display: none;
}

.bank-account-option {
    min-height: 58px;
}

.brand-logo-form {
    padding-bottom: 22px;
    border-bottom: 1px solid var(--color-border);
}

.brand-logo-upload {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 14px;
}

.brand-logo-upload input {
    position: fixed;
    top: -100vh;
    left: -100vw;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.brand-logo-preview {
    display: grid;
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
    border: 1px dashed #b7bdc9;
    border-radius: var(--radius-sm);
    background: #f5f6f8 center / contain no-repeat;
    color: #687080;
    font-size: 25px;
    place-items: center;
}

.brand-logo-preview.has-image {
    border-style: solid;
    background-color: var(--color-surface);
    color: transparent;
}

.brand-logo-preview.is-default-icon {
    position: relative;
    border-style: dashed;
    background: #f4f6fa;
    color: transparent;
}

.brand-logo-preview.is-default-icon::before {
    width: 30px;
    height: 30px;
    background: #8c93a3;
    content: '';
    mask-image: url('/icons/editor/nomenclature-type-preview.svg');
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    opacity: 0.7;
    -webkit-mask-image: url('/icons/editor/nomenclature-type-preview.svg');
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.brand-logo-upload strong,
.brand-logo-upload small {
    display: block;
}

.brand-logo-upload strong {
    margin-bottom: 4px;
    font-size: 13px;
}

.brand-logo-upload small {
    color: var(--color-muted);
    font-size: 11px;
}

.brand-active-option {
    min-height: 62px;
    padding: 0;
}

.organization-form-section-first {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

.organization-vat-option {
    min-height: 63px;
}

.organization-document-files > span {
    display: block;
    margin-bottom: 8px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
}

.organization-document-file-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.organization-document-file {
    display: flex;
    min-width: 0;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px dashed #b7bdc9;
    border-radius: var(--radius-sm);
    align-items: center;
    background: var(--color-surface-muted);
    cursor: pointer;
    gap: 10px;
}

.organization-document-file > span:last-child {
    min-width: 0;
    flex: 1 1 auto;
}

.organization-document-file:hover {
    border-color: #8e96a9;
    background: var(--color-primary-soft);
}

.organization-document-file input {
    position: fixed;
    top: -100vh;
    left: -100vw;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.organization-document-file-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    background: currentColor;
    color: var(--color-primary);
    mask-image: url('/icons/editor/file-text.svg');
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('/icons/editor/file-text.svg');
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.organization-document-file strong,
.organization-document-file small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.organization-document-file strong {
    margin-bottom: 3px;
    color: var(--color-primary);
    font-size: 12px;
}

.organization-document-file small {
    color: var(--color-muted);
    font-size: 10.5px;
}

.organization-document-file.has-file {
    border-style: solid;
    border-color: #aeb6c5;
    background: #f4f6fa;
}

.grid-toolbar {
    display: flex;
    min-height: 68px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.search-field {
    position: relative;
    display: flex;
    width: min(100%, 390px);
    align-items: center;
}

.search-field input {
    width: 100%;
    height: 40px;
    padding: 0 14px 0 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    outline: none;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-body);
    line-height: var(--line-height-control);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.search-field input:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: #8e96a9;
    box-shadow: 0 0 0 3px rgb(25 30 50 / 8%);
}

.search-field input::placeholder,
.form-field input::placeholder,
.form-field textarea::placeholder {
    color: #979dab;
}

.search-icon {
    position: absolute;
    z-index: 1;
    left: 14px;
    width: 14px;
    height: 14px;
    border: 1.7px solid #747b8b;
    border-radius: 50%;
}

.search-icon::after {
    position: absolute;
    right: -5px;
    bottom: -3px;
    width: 6px;
    height: 1.7px;
    border-radius: 2px;
    background: #747b8b;
    content: '';
    transform: rotate(45deg);
}

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

.filter-button,
.icon-control,
.secondary-button {
    display: inline-flex;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    color: #454b59;
    cursor: pointer;
    font-size: var(--font-size-body);
    font-weight: 500;
    line-height: var(--line-height-control);
    transition: border-color var(--transition), background var(--transition);
}

.filter-button {
    min-width: 138px;
    padding: 0 12px;
    justify-content: space-between;
    gap: 14px;
}

.orders-filter-toolbar {
    align-items: flex-start;
}

.orders-filter-toolbar .search-field {
    margin-top: 2px;
}

.filter-reset-button {
    padding: 0 12px;
}

.filter-button:hover,
.icon-control:hover,
.secondary-button:hover {
    border-color: #b8bdc8;
    background: var(--color-surface-muted);
}

.select-chevron {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

.icon-control {
    width: 40px;
}

.filter-icon {
    position: relative;
    width: 17px;
    height: 13px;
    border-top: 1.7px solid currentColor;
    border-bottom: 1.7px solid currentColor;
}

.filter-icon::before {
    position: absolute;
    top: 4px;
    left: 0;
    width: 17px;
    border-top: 1.7px solid currentColor;
    content: '';
}

.filter-icon::after {
    position: absolute;
    top: -4px;
    left: 4px;
    width: 3px;
    height: 3px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: 6px 6px 0 -1px var(--color-surface), 6px 6px 0 0 currentColor;
    content: '';
}

.table-scroll {
    overflow-x: auto;
}

.users-grid .table-scroll {
    overflow: visible;
}

.orders-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    font-size: 13px;
}

.orders-table th {
    height: 42px;
    padding: 0 14px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    color: #757c8c;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.orders-table td {
    height: 64px;
    padding: 10px 14px;
    border-bottom: 1px solid #eceef1;
    color: #414755;
    vertical-align: middle;
}

.orders-table tbody tr {
    position: relative;
    transition: background var(--transition);
}

.is-row-clickable {
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.is-row-clickable:hover {
    border-color: #d7dce5;
    background: var(--color-surface-muted);
}

tr.is-row-clickable:hover td {
    background: var(--color-surface-muted);
}

.orders-table tbody tr:hover {
    background: var(--color-surface-muted);
}

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

.orders-list-table tbody tr:has(.row-actions[open]) {
    z-index: 3;
}

.orders-list-table tr[data-deleted='1'] {
    background: #fafafa;
}

.orders-list-table tr[data-deleted='1'] .cell-stack,
.orders-list-table tr[data-deleted='1'] .note-clamp,
.orders-list-table tr[data-deleted='1'] .amount-cell {
    opacity: 0.62;
}

.order-number {
    display: block;
    margin-bottom: 4px;
    color: var(--color-primary);
    font-weight: 700;
}

.order-number:hover {
    color: var(--color-accent);
}

.cell-primary,
.cell-secondary {
    display: block;
}

.cell-stack {
    display: block;
    min-width: 0;
}

.cell-primary {
    margin-bottom: 4px;
    color: #303542;
    font-weight: 600;
}

.cell-secondary {
    color: #8a91a0;
    font-size: 12px;
}

.amount-cell {
    color: #282d39 !important;
    font-weight: 700;
    white-space: nowrap;
}

.note-clamp {
    display: -webkit-box;
    max-width: 260px;
    overflow: hidden;
    color: #555c6b;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.status-badge {
    display: inline-flex;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 13px;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.status-new {
    background: #edf2ff;
    color: #315db6;
}

.status-progress {
    background: #fff1e9;
    color: #b84a21;
}

.status-measurement {
    background: #eaf7f8;
    color: #236a72;
}

.status-manufacturing {
    background: #f1edfb;
    color: #65509b;
}

.status-ready {
    background: #e9f6ef;
    color: #287152;
}

.status-delivery {
    background: #eef0f6;
    color: #414a63;
}

.status-waiting {
    background: #fff7dc;
    color: #8c6813;
}

.status-done {
    background: #e9f6ef;
    color: #287152;
}

.status-blocked {
    background: #fdecec;
    color: #b42318;
}

.status-draft {
    background: #eef0f6;
    color: #596174;
}

.status-purchase {
    background: #f1edfb;
    color: #65509b;
}

.status-custom,
.status-badge[style*='--status-bg'] {
    background: var(--status-bg, #edf2ff);
    color: var(--status-text, #315db6);
}

.payment-registry-workspace {
    display: grid;
    gap: 18px;
}

.payment-registry-heading {
    margin-bottom: 0;
}

.payment-registry-summary {
    display: grid;
    width: min(100%, 420px);
    padding: 16px 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
    gap: 5px;
}

.payment-registry-summary span,
.payment-registry-summary small {
    color: var(--color-muted);
    font-size: 12px;
}

.payment-registry-summary strong {
    color: var(--color-text);
    font-size: 24px;
    line-height: 1;
}

.payment-registry-filters {
    display: grid;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(150px, 190px)) repeat(2, minmax(140px, 160px)) auto;
    align-items: end;
    background: var(--color-surface);
    gap: 12px;
}

.payment-registry-filters > label:not(.search-field):not(.select-filter) {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.payment-registry-filters > label > span:not(.search-icon):not(.select-chevron) {
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.payment-registry-filters input[type='date'] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

.payment-registry-table th {
    border-bottom: 0;
}

.deleted-objects-toolbar {
    align-items: center;
}

.deleted-objects-toolbar .search-field {
    flex: 1 1 320px;
}

.deleted-objects-actions {
    display: flex;
    padding: 14px 16px;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--color-surface-muted);
}

.deleted-objects-actions strong {
    display: block;
    color: var(--color-text);
    font-size: var(--font-size-section);
    line-height: var(--line-height-title);
}

.deleted-objects-actions span {
    color: var(--color-muted);
    font-size: var(--font-size-body-small);
}

.deleted-objects-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.deleted-objects-table .checkbox-cell {
    width: 58px;
    text-align: center;
}

.deleted-object-check {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.deleted-object-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.deleted-object-check span {
    position: relative;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border-strong);
    border-radius: 6px;
    background: var(--color-surface);
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.deleted-object-check span::after {
    position: absolute;
    top: 2px;
    left: 6px;
    width: 5px;
    height: 10px;
    border-right: 2px solid var(--color-surface);
    border-bottom: 2px solid var(--color-surface);
    content: '';
    opacity: 0;
    transform: rotate(45deg) scale(0.8);
    transition: opacity var(--transition), transform var(--transition);
}

.deleted-object-check input:checked + span {
    border-color: var(--color-accent);
    background: var(--color-accent);
    box-shadow: 0 4px 10px rgb(228 87 46 / 18%);
}

.deleted-object-check input:checked + span::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

.deleted-object-check input:focus-visible + span {
    outline: 3px solid rgb(228 87 46 / 22%);
    outline-offset: 2px;
}

.actions-cell {
    width: 54px;
    overflow: visible;
    text-align: right;
}

.row-menu-button {
    display: inline-flex;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
    gap: 3px;
}

.row-menu-button:hover {
    background: var(--color-primary-soft);
}

.row-menu-button span {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #727988;
}

.grid-footer {
    display: flex;
    min-height: 58px;
    padding: 10px 16px;
    border-top: 1px solid var(--color-border);
    align-items: center;
    justify-content: space-between;
    color: var(--color-muted);
    font-size: 12px;
}

.pagination {
    display: flex;
    gap: 4px;
}

.pagination-button {
    display: inline-grid;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: #555c6b;
    cursor: pointer;
    place-items: center;
}

.pagination-button:hover:not(:disabled),
.pagination-button.is-active {
    border-color: var(--color-border);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 700;
}

.pagination-button:disabled {
    cursor: default;
    opacity: 0.35;
}

.pagination-button.is-disabled {
    cursor: default;
    opacity: 0.35;
}

.order-open-button .menu-chevron {
    transform: rotate(-45deg);
}

.order-block-empty {
    display: grid;
    min-height: 150px;
    padding: 24px;
    align-content: center;
    justify-items: center;
    color: #555c6b;
    text-align: center;
    gap: 5px;
}

.order-block-empty span {
    color: #9298a5;
    font-size: 12px;
}

.sales-funnel-workspace {
    width: 100%;
    max-width: none;
    padding-right: clamp(16px, 1.5vw, 28px);
    padding-left: clamp(16px, 1.5vw, 28px);
}

.funnel-status-manager {
    display: grid;
    margin-bottom: 16px;
    gap: 12px;
}

.funnel-status-form,
.funnel-status-row {
    display: grid;
    align-items: end;
    gap: 10px;
}

.funnel-status-form {
    grid-template-columns: minmax(180px, 1fr) 90px 90px minmax(140px, auto) auto;
}

.funnel-status-row {
    grid-template-columns: minmax(130px, auto) minmax(160px, 1fr) 74px 74px 90px auto auto auto;
}

.funnel-status-list {
    display: grid;
    gap: 8px;
}

.funnel-status-form input[type='text'],
.funnel-status-row input[type='text'],
.funnel-status-row input[type='number'] {
    width: 100%;
    height: 40px;
    padding: 0 11px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

.funnel-status-form input[type='color'],
.funnel-status-row input[type='color'] {
    width: 100%;
    height: 40px;
    padding: 3px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.funnel-status-toggle,
.compact-check {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
    gap: 7px;
}

.sales-funnel-board {
    display: grid;
    grid-auto-columns: minmax(282px, 1fr);
    grid-auto-flow: column;
    min-width: 0;
    min-height: calc(100dvh - var(--header-height) - 150px);
    overflow-x: auto;
    padding-bottom: 10px;
    gap: 14px;
    scroll-snap-type: x proximity;
}

.funnel-column {
    display: flex;
    min-width: 282px;
    max-height: calc(100dvh - var(--header-height) - 150px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #f9fafc;
    flex-direction: column;
    scroll-snap-align: start;
}

.funnel-column-header {
    display: flex;
    min-height: 58px;
    padding: 12px;
    border-bottom: 1px solid var(--color-border);
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.funnel-column-header > div {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.funnel-column-header strong {
    display: inline-grid;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 12px;
    background: var(--color-surface);
    color: #4f5666;
    font-size: 12px;
    place-items: center;
}

.funnel-column-header > span {
    color: #343947;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.funnel-column-body {
    display: flex;
    min-height: 180px;
    overflow-y: auto;
    padding: 8px;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    transition: background var(--transition);
}

.funnel-column.is-over .funnel-column-body {
    background: #eef3ff;
}

.funnel-card {
    display: block;
    padding: 9px 10px;
    border: 1px solid #e4e7ee;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: 0 5px 14px rgb(25 30 50 / 5%);
    color: inherit;
    cursor: grab;
    text-decoration: none;
    transition: border-color var(--transition), box-shadow var(--transition), opacity var(--transition), transform var(--transition);
}

.funnel-card:hover {
    border-color: #c9ceda;
    box-shadow: 0 7px 18px rgb(25 30 50 / 8%);
}

.funnel-card.is-dragging {
    opacity: 0.48;
    transform: rotate(1deg);
}

.funnel-card.is-updating {
    pointer-events: none;
    opacity: 0.62;
}

.funnel-card-topline,
.funnel-card-footer,
.funnel-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.funnel-card-topline {
    margin-bottom: 5px;
}

.funnel-card-topline span,
.funnel-card-meta,
.funnel-card-footer span,
.funnel-payment {
    color: var(--color-muted);
    font-size: 11px;
}

.funnel-card .order-number {
    margin-bottom: 0;
    font-size: 13px;
}

.funnel-customer {
    display: block;
    margin-bottom: 5px;
    overflow: hidden;
    color: #252b38;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.funnel-card:hover .funnel-customer {
    color: var(--color-accent);
}

.funnel-card-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    line-height: 1.35;
}

.funnel-note {
    display: -webkit-box;
    margin: 6px 0 0;
    overflow: hidden;
    color: #535b6a;
    font-size: 11px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.funnel-card-footer {
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid #eef0f4;
}

.funnel-card-footer > span {
    display: grid;
    min-width: 0;
    line-height: 1.35;
    gap: 1px;
}

.funnel-card-footer small {
    color: #8a91a0;
    font-size: 10px;
}

.funnel-card-footer strong {
    color: #202431;
    font-size: 13px;
    white-space: nowrap;
}

.funnel-payment {
    margin-top: 5px;
}

.funnel-empty {
    display: grid;
    min-height: 92px;
    border: 1px dashed #d6dae3;
    border-radius: var(--radius-md);
    color: #8a91a0;
    font-size: 12px;
    place-items: center;
}

.reports-workspace {
    width: min(100%, 1560px);
}

.reports-heading {
    align-items: flex-start;
}

.reports-period-form {
    display: flex;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    align-items: end;
    background: var(--color-surface);
    gap: 8px;
}

.reports-period-form label {
    display: grid;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
    gap: 4px;
    text-transform: uppercase;
}

.reports-period-form input,
.reports-period-form select {
    width: 148px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    outline: none;
    color: var(--color-text);
    background: var(--color-surface);
    font: inherit;
}

.employee-orders-filter select[name='manager_id'] {
    width: 220px;
}

.employee-status-table {
    min-width: 1320px;
    table-layout: fixed;
}

.employee-status-table__employee-col {
    width: 220px;
}

.employee-status-table th,
.employee-status-table td {
    width: auto;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.employee-status-table th {
    white-space: normal;
}

.employee-status-table .cell-primary,
.employee-status-table .cell-secondary {
    display: block;
}

.reports-period-form .primary-button {
    min-height: 38px;
}

.task-report-filters {
    margin-bottom: 14px;
    justify-content: flex-start;
}

.task-report-filters label:nth-child(3) select {
    width: 190px;
}

.task-report-filters label:nth-child(4) select {
    width: 230px;
}

.task-report-summary {
    display: grid;
    margin-bottom: 16px;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 10px;
}

.task-report-status-card {
    display: grid;
    min-height: 78px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    align-content: space-between;
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
    gap: 8px;
}

.task-report-status-card .status-badge {
    width: fit-content;
}

.task-report-status-card strong {
    color: var(--color-primary);
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.task-report-status-card small {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
}

.task-report-grid {
    overflow: visible;
}

.task-report-grid .table-scroll {
    overflow: visible;
}

.report-metrics {
    display: grid;
    margin-bottom: 16px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.report-metric,
.report-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.report-metric {
    display: grid;
    min-height: 116px;
    padding: 16px;
    align-content: space-between;
    gap: 8px;
}

.report-metric span,
.report-metric small {
    color: var(--color-muted);
    font-size: 12px;
}

.report-metric strong {
    color: var(--color-primary);
    font-size: 23px;
    line-height: 1.15;
}

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

.report-panel {
    min-height: 290px;
    overflow: hidden;
}

.report-panel-wide {
    grid-row: span 2;
}

.report-panel-header {
    display: flex;
    min-height: 70px;
    padding: 16px;
    border-bottom: 1px solid var(--color-border);
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.report-panel-header h2 {
    margin: 0;
    font-size: 18px;
}

.report-panel-header .page-eyebrow {
    margin-bottom: 5px;
}

.report-panel-header > strong {
    color: var(--color-primary);
    font-size: 13px;
    white-space: nowrap;
}

.report-status-list,
.report-ranking-list {
    display: grid;
    padding: 10px 16px 16px;
    gap: 10px;
}

.report-status-row {
    display: grid;
    min-height: 38px;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) 46px 120px;
    gap: 10px;
}

.report-status-row > strong {
    color: var(--color-primary);
    text-align: right;
}

.report-status-row > span:last-child {
    color: #444b5a;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
}

.report-ranking-row {
    display: grid;
    gap: 8px;
}

.report-ranking-copy {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.report-ranking-copy strong {
    min-width: 0;
    overflow: hidden;
    color: #2b303d;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-ranking-copy span {
    color: var(--color-muted);
    font-size: 12px;
    white-space: nowrap;
}

.report-bar {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-primary-soft);
}

.report-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-accent);
}

.report-empty {
    display: grid;
    min-height: 180px;
    color: var(--color-muted);
    font-size: 13px;
    place-items: center;
}

.delivery-schedule-filter {
    flex-wrap: wrap;
}

.delivery-schedule-filter select {
    width: 190px;
    height: 38px;
    padding: 0 34px 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    outline: none;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

.delivery-schedule-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.delivery-schedule-panel {
    min-height: 0;
}

.delivery-schedule-scroll {
    overflow-x: auto;
}

.delivery-schedule-grid {
    display: grid;
    min-width: max(1180px, calc(190px + var(--delivery-schedule-days) * 260px));
    grid-template-columns: 190px repeat(var(--delivery-schedule-days), minmax(260px, 1fr));
}

.delivery-schedule-corner,
.delivery-schedule-day-head,
.delivery-schedule-driver,
.delivery-schedule-cell {
    border-right: 1px solid #eef0f3;
    border-bottom: 1px solid #eef0f3;
}

.delivery-schedule-corner,
.delivery-schedule-day-head {
    min-height: 54px;
    padding: 10px 12px;
    background: var(--color-surface-muted);
}

.delivery-schedule-corner {
    display: flex;
    align-items: center;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.delivery-schedule-day-head {
    display: grid;
    align-content: center;
    gap: 2px;
}

.delivery-schedule-day-head span {
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.delivery-schedule-day-head strong {
    color: var(--color-primary);
    font-size: 16px;
}

.delivery-schedule-driver {
    display: grid;
    min-height: 128px;
    padding: 14px 12px;
    align-content: start;
    gap: 4px;
    background: var(--color-surface);
}

.delivery-schedule-driver strong {
    color: var(--color-text);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
}

.delivery-schedule-driver span {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
}

.delivery-schedule-cell {
    display: grid;
    min-height: 128px;
    padding: 10px;
    align-content: start;
    background: var(--color-surface);
    gap: 8px;
}

.delivery-schedule-card {
    display: grid;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    gap: 5px;
}

.delivery-schedule-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.delivery-schedule-card time {
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 900;
}

.delivery-schedule-card a {
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 900;
}

.delivery-schedule-card strong {
    color: var(--color-text);
    font-size: 12px;
    line-height: 1.35;
}

.delivery-schedule-card > span {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.delivery-schedule-address {
    display: -webkit-box;
    overflow: hidden;
    color: #555c6b !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.delivery-schedule-empty {
    color: #a1a7b3;
    font-size: 11px;
    font-weight: 700;
}

.modal-layer {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: none;
    padding: 28px;
    align-items: center;
    justify-content: center;
}

.modal-layer.is-open {
    display: flex;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(16 20 34 / 58%);
    backdrop-filter: blur(2px);
}

body.modal-open {
    overflow: hidden;
}

.modal-window {
    position: relative;
    z-index: 1;
    display: flex;
    width: min(100%, 720px);
    max-height: calc(100dvh - 56px);
    overflow: hidden;
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: 0 24px 70px rgb(10 14 25 / 30%);
    flex-direction: column;
    animation: modal-enter 180ms ease-out;
}

@keyframes modal-enter {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    display: flex;
    min-height: 78px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--color-border);
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.modal-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--color-muted);
    font-size: var(--font-size-caption);
    font-weight: 700;
    text-transform: uppercase;
}

.modal-header h2 {
    margin: 0;
    color: var(--color-primary);
    font-size: var(--font-size-dialog-title);
    font-weight: var(--font-weight-title);
    line-height: var(--line-height-title);
}

.modal-close-button {
    position: relative;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
}

.modal-close-button:hover {
    background: var(--color-primary-soft);
}

.modal-close-button span {
    position: absolute;
    top: 18px;
    left: 10px;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #555c6b;
    transform: rotate(45deg);
}

.modal-close-button span:last-child {
    transform: rotate(-45deg);
}

.modal-form {
    display: flex;
    min-height: 0;
    flex: 0 1 auto;
    flex-direction: column;
}

.audit-history-window {
    width: min(100%, 760px);
}

.audit-history-body {
    min-height: 240px;
}

.audit-history-loading,
.audit-history-empty {
    display: grid;
    min-height: 190px;
    color: var(--color-muted);
    font-size: var(--font-size-body-small);
    place-items: center;
    text-align: center;
}

.audit-timeline {
    display: grid;
    gap: 0;
}

.audit-entry {
    position: relative;
    padding: 0 0 24px 28px;
}

.audit-entry::before {
    position: absolute;
    top: 5px;
    left: 4px;
    width: 9px;
    height: 9px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent);
    content: "";
}

.audit-entry:not(:last-child)::after {
    position: absolute;
    top: 18px;
    bottom: 0;
    left: 8px;
    width: 1px;
    background: var(--color-border);
    content: "";
}

.audit-entry-header {
    display: flex;
    margin-bottom: 10px;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}

.audit-entry-header strong {
    color: var(--color-primary);
    font-size: var(--font-size-body-small);
}

.audit-entry-header span {
    color: var(--color-muted);
    font-size: var(--font-size-label-small);
    white-space: nowrap;
}

.audit-changes {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.audit-change {
    display: grid;
    min-height: 42px;
    padding: 9px 12px;
    grid-template-columns: minmax(120px, 0.7fr) minmax(0, 1.3fr);
    align-items: start;
    gap: 16px;
}

.audit-change + .audit-change {
    border-top: 1px solid var(--color-border);
}

.audit-change-label {
    color: var(--color-muted);
    font-size: var(--font-size-label-small);
    font-weight: var(--font-weight-label);
}

.audit-change-values {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #353b48;
    font-size: var(--font-size-label);
}

.audit-old-value {
    color: #8a91a0;
    text-decoration: line-through;
}

.audit-value-arrow {
    margin: 0 8px;
    color: var(--color-accent);
    text-decoration: none;
}

.modal-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 22px;
}

.form-section + .form-section {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--color-border);
}

.form-section h3 {
    margin: 0 0 14px;
    font-size: var(--font-size-subsection-title);
    font-weight: var(--font-weight-title);
    line-height: var(--line-height-title);
}

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

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

.form-field {
    display: grid;
    min-width: 0;
    gap: 7px;
}

.form-field-wide {
    grid-column: 1 / -1;
}

.form-field > span {
    color: #555c6b;
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-label);
    line-height: var(--line-height-control);
}

.form-field b {
    color: var(--color-accent);
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    outline: none;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--font-size-control);
    line-height: var(--line-height-control);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-field input,
.form-field select {
    height: 42px;
    padding: 0 12px;
}

.modal-window input[type='number'] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.modal-window input[type='number']::-webkit-inner-spin-button,
.modal-window input[type='number']::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
}

.form-field textarea {
    min-height: 84px;
    padding: 11px 12px;
    resize: vertical;
}

.modal-footer {
    display: flex;
    flex: 0 0 auto;
    min-height: 68px;
    padding: 12px 22px;
    border-top: 1px solid var(--color-border);
    align-items: center;
    justify-content: flex-end;
    background: var(--color-surface-muted);
    gap: 10px;
}

.secondary-button {
    padding: 0 16px;
}

.sort-button {
    display: inline-flex;
    height: 40px;
    padding: 0 13px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    align-items: center;
    background: var(--color-surface);
    color: #454b59;
    cursor: pointer;
    font-size: var(--font-size-body);
    font-weight: 500;
    line-height: var(--line-height-control);
    gap: 8px;
}

.select-filter {
    position: relative;
    display: block;
    min-width: 190px;
}

.select-filter select {
    width: 100%;
    height: 40px;
    padding: 0 36px 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    outline: none;
    appearance: none;
    background: var(--color-surface);
    color: #454b59;
    cursor: pointer;
    font: inherit;
    font-size: var(--font-size-body);
    font-weight: 500;
    line-height: var(--line-height-control);
}

.select-filter .select-chevron {
    position: absolute;
    top: 15px;
    right: 14px;
    pointer-events: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.sort-button:hover {
    border-color: #b8bdc8;
    background: var(--color-surface-muted);
}

.sort-icon {
    position: relative;
    width: 14px;
    height: 14px;
}

.sort-icon::before,
.sort-icon::after {
    position: absolute;
    left: 1px;
    width: 11px;
    height: 1.5px;
    background: currentColor;
    content: '';
}

.sort-icon::before {
    top: 3px;
    box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor;
}

.users-table td {
    height: 70px;
}

.user-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
}

.user-avatar {
    display: inline-grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    place-items: center;
}

.user-avatar-image {
    object-fit: cover;
}

.role-avatar-admin {
    background: #e9eaf1;
    color: var(--color-primary);
}

.role-avatar-manager {
    background: #edf2ff;
    color: #315db6;
}

.role-avatar-accountant {
    background: #e9f6ef;
    color: #287152;
}

.role-avatar-driver,
.role-avatar-installer {
    background: #fff1e9;
    color: #b84a21;
}

.role-avatar-measurer {
    background: #f1edfb;
    color: #65509b;
}

.role-badge {
    display: inline-flex;
    min-height: 27px;
    padding: 0 9px;
    border-radius: 4px;
    align-items: center;
    background: #f0f2f5;
    color: #515866;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.role-admin {
    background: #e9eaf1;
    color: var(--color-primary);
}

.role-manager {
    background: #edf2ff;
    color: #315db6;
}

.role-accountant {
    background: #e9f6ef;
    color: #287152;
}

.role-driver,
.role-installer {
    background: #fff1e9;
    color: #b84a21;
}

.role-measurer {
    background: #f1edfb;
    color: #65509b;
}

.status-blocked {
    background: #f3f4f6;
    color: #747b89;
}

.users-table tr[data-blocked='1'] {
    background: #fafafa;
}

.users-table tr[data-blocked='1'] .user-identity,
.users-table tr[data-blocked='1'] .contact-email {
    opacity: 0.58;
}

.row-actions {
    position: relative;
    z-index: 2;
    display: inline-block;
}

.row-actions[open] {
    z-index: 25;
}

.row-actions summary {
    list-style: none;
}

.row-actions summary::-webkit-details-marker {
    display: none;
}

.row-actions-menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 5px);
    right: 0;
    display: grid;
    width: 180px;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-menu);
    gap: 2px;
}

.row-actions-menu.is-portaled {
    position: fixed;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 5000;
    max-height: min(420px, calc(100dvh - 16px));
    overflow-y: auto;
}

.row-actions-menu button,
.row-actions-menu a {
    display: flex;
    width: 100%;
    min-height: 36px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    align-items: center;
    background: transparent;
    color: #424855;
    cursor: pointer;
    font-size: 13px;
    text-align: left;
}

.row-actions-menu form {
    display: contents;
}

.row-actions-menu button:hover,
.row-actions-menu a:hover {
    background: var(--color-primary-soft);
}

.order-editor-actions .row-actions-menu.order-print-menu-list,
.order-editor-actions .row-actions-menu.order-command-menu-list {
    width: max-content;
    min-width: 220px;
    max-width: min(380px, calc(100vw - 36px));
}

.order-editor-actions .order-print-menu-list button,
.order-editor-actions .order-print-menu-list a,
.order-editor-actions .order-command-menu-list button,
.order-editor-actions .order-command-menu-list a {
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: normal;
    word-break: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.35;
}

.order-editor-actions .order-command-menu-list a,
.order-editor-actions .order-command-menu-list button {
    display: flex;
    min-height: 44px;
    max-height: calc(2 * 1.3em + 18px);
    padding: 9px 12px;
    align-items: center;
    line-height: 1.3;
}

.order-editor-actions .order-command-menu-list input[type="hidden"] {
    display: none;
}

.integration-mapping-summary {
    display: grid;
    margin-bottom: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.integration-mapping-summary article {
    display: grid;
    min-height: 82px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    align-content: center;
    background: var(--color-surface);
    gap: 7px;
}

.integration-mapping-summary span {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.integration-mapping-summary strong {
    color: var(--color-text);
    font-size: 22px;
    line-height: 1;
}

.integration-mapping-toolbar {
    grid-template-columns: minmax(260px, 1fr) auto;
}

.integration-mapping-table {
    min-width: 1080px;
}

.product-mapping-modal-window {
    max-width: 780px;
}

.product-mapping-external-card,
.product-mapping-selected {
    display: grid;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    gap: 5px;
}

.product-mapping-external-card span,
.product-mapping-selected span {
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.product-mapping-external-card strong,
.product-mapping-selected strong {
    color: var(--color-text);
    font-size: 14px;
}

.product-mapping-external-card small,
.product-mapping-selected small {
    color: var(--color-muted);
    font-size: 11px;
    line-height: 1.4;
}

.product-mapping-search {
    margin-top: 14px;
}

.product-mapping-results {
    display: grid;
    max-height: 330px;
    overflow: auto;
    margin-top: 12px;
    gap: 8px;
}

.product-mapping-result {
    display: grid;
    width: 100%;
    min-height: 62px;
    padding: 11px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    gap: 12px;
    text-align: left;
    transition: border-color var(--transition), background var(--transition);
}

.product-mapping-result:hover,
.product-mapping-result.is-selected {
    border-color: #cfd6e2;
    background: var(--color-surface-muted);
}

.product-mapping-result strong,
.product-mapping-result span,
.product-mapping-result small {
    display: block;
}

.product-mapping-result strong {
    font-size: 13px;
}

.product-mapping-result span,
.product-mapping-result small {
    color: var(--color-muted);
    font-size: 11px;
    line-height: 1.35;
}

.product-mapping-result-badge {
    display: inline-flex;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    align-items: center;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.document-template-groups {
    display: grid;
    gap: 16px;
}

.document-template-group {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.document-template-group-header {
    display: flex;
    min-height: 68px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.document-template-group-header span {
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.document-template-group-header h2 {
    margin: 3px 0 0;
    color: var(--color-primary);
    font-size: 16px;
}

.template-version-count {
    white-space: nowrap;
}

.document-template-list {
    display: grid;
}

.document-template-row {
    display: grid;
    min-height: 72px;
    padding: 12px 18px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 20px;
}

.document-template-row + .document-template-row {
    border-top: 1px solid #eef0f3;
}

.document-template-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.document-template-identity > div {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.document-template-identity strong {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-template-identity span,
.document-template-meta small {
    color: var(--color-muted);
    font-size: 11px;
}

.document-template-icon {
    position: relative;
    width: 28px;
    height: 34px;
    flex: 0 0 28px;
    border: 1px solid #c9ced8;
    border-radius: 3px;
    background: var(--color-surface);
}

.document-template-icon::before,
.document-template-icon::after {
    position: absolute;
    height: 1px;
    left: 6px;
    background: #a0a6b2;
    content: '';
}

.document-template-icon::before {
    width: 14px;
    top: 11px;
    box-shadow: 0 5px 0 #a0a6b2, 0 10px 0 #a0a6b2;
}

.document-template-meta {
    display: grid;
    justify-items: end;
    gap: 5px;
}

.document-template-driver-note {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.document-template-empty {
    padding: 22px 18px;
    color: var(--color-muted);
    font-size: 12px;
}

.document-editor-workspace {
    width: min(100%, 1700px);
    min-height: calc(100dvh - var(--header-height));
}

.document-editor-header {
    position: sticky;
    top: var(--header-height);
    z-index: 20;
    display: flex;
    margin: -24px -24px 18px;
    padding: 18px 24px 12px;
    align-items: flex-end;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-background);
    gap: 18px;
    isolation: isolate;
}

.document-editor-header h1 {
    margin: 7px 0 0;
    color: var(--color-primary);
    font-size: 24px;
}

.document-editor-actions {
    display: flex;
    gap: 8px;
}

.document-editor-layout {
    display: grid;
    height: calc(100dvh - var(--header-height) - 132px);
    min-height: 620px;
    grid-template-columns: 380px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    overflow: hidden;
}

.document-editor-sidebar {
    display: grid;
    max-height: 100%;
    padding-right: 2px;
    align-content: start;
    gap: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.document-editor-panel,
.document-editor-main {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.document-editor-panel {
    display: grid;
    padding: 16px;
    gap: 14px;
}

.document-editor-panel h2 {
    margin: 0;
    color: var(--color-primary);
    font-size: 14px;
}

.document-margin-fields {
    display: grid;
    gap: 8px;
}

.document-store-visibility {
    display: grid;
    gap: 8px;
}

.document-store-visibility small {
    color: var(--color-muted);
    font-size: 11px;
    line-height: 1.4;
}

.document-store-list {
    display: grid;
    max-height: 172px;
    overflow: auto;
    border: 1px solid #e6e8ed;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.document-store-list label {
    display: flex;
    min-height: 38px;
    padding: 8px 10px;
    border-bottom: 1px solid #eef0f3;
    align-items: center;
    color: var(--color-text);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    gap: 9px;
}

.document-store-list label:last-child {
    border-bottom: 0;
}

.document-store-list input {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
}

.document-store-empty {
    padding: 12px;
    color: var(--color-muted);
    font-size: 12px;
}

.document-field-label {
    color: #555c6b;
    font-size: 12px;
    font-weight: 600;
}

.toggle-field {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    gap: 9px;
}

.toggle-field input {
    position: absolute;
    opacity: 0;
}

.toggle-line {
    position: relative;
    display: flex;
    min-height: 42px;
    align-items: center;
    cursor: pointer;
    gap: 10px;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 700;
}

.toggle-line input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.toggle-control {
    position: relative;
    width: 34px;
    height: 20px;
    flex: 0 0 34px;
    border-radius: 10px;
    background: #c8ccd5;
    transition: background var(--transition);
}

.toggle-control::after {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 2px;
    left: 2px;
    border-radius: 50%;
    background: var(--color-surface);
    content: '';
    transition: transform var(--transition);
}

.toggle-field input:checked + .toggle-control {
    background: var(--color-accent);
}

.toggle-field input:checked + .toggle-control::after {
    transform: translateX(14px);
}

.document-attribute-list {
    display: grid;
    gap: 5px;
}

.document-attribute-groups {
    display: grid;
    gap: 7px;
}

.document-attribute-groups details {
    border: 1px solid #e6e8ed;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.document-attribute-groups summary {
    min-height: 38px;
    padding: 0 10px;
    align-content: center;
    color: var(--color-primary);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.document-attribute-groups .document-attribute-list {
    padding: 0 7px 7px;
}

.document-attribute-list button {
    display: grid;
    min-height: 42px;
    padding: 7px 9px;
    border-radius: var(--radius-sm);
    background: #f7f8fa;
    cursor: pointer;
    text-align: left;
    gap: 3px;
}

.document-attribute-list button:hover {
    background: var(--color-primary-soft);
}

.document-attribute-list span {
    color: #474d5a;
    font-size: 11px;
    font-weight: 600;
}

.document-attribute-list code {
    color: #315db6;
    font-size: 10px;
}

.document-danger-panel {
    border-color: #f1cbc4;
}

.danger-outline-button {
    min-height: 38px;
    border: 1px solid #d96752;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: #b43f2c;
    cursor: pointer;
    font-weight: 600;
}

.document-editor-main {
    display: grid;
    height: 100%;
    max-height: 100%;
    min-width: 0;
    align-self: start;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}

.document-toolbar {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 52px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
    align-items: center;
    background: var(--color-surface-muted);
    flex-wrap: wrap;
    gap: 4px;
}

.document-toolbar button {
    display: inline-grid;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
    font-size: 14px;
    place-items: center;
}

.document-toolbar button:hover {
    background: var(--color-primary-soft);
}

.document-toolbar .document-source-button {
    width: auto;
    min-width: 48px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 800;
}

.document-toolbar select {
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-size: 12px;
}

.table-tool {
    display: flex;
    align-items: center;
    gap: 3px;
}

.table-tool select {
    width: 68px;
}

.table-tool [data-editor-table-border] {
    width: 132px;
}

.document-source-modal-window {
    width: min(calc(100vw - 48px), 980px);
    max-height: min(820px, calc(100dvh - 56px));
    border-radius: var(--radius-md);
}

.document-source-modal-window .modal-header {
    min-height: 72px;
    padding: 16px 20px;
}

.document-source-body {
    display: flex;
    min-height: 0;
    height: min(58vh, 520px);
    padding: 18px 20px 20px;
    background: var(--color-surface-muted);
    flex-direction: column;
    gap: 12px;
}

.document-source-tabs {
    display: inline-flex;
    width: max-content;
    padding: 4px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #eef1f6;
    gap: 4px;
}

.document-source-tabs button {
    min-height: 36px;
    padding: 0 16px;
    border-radius: calc(var(--radius-sm) - 2px);
    color: var(--color-muted);
    cursor: pointer;
    font-size: var(--font-size-body);
    font-weight: 800;
}

.document-source-tabs button.is-active {
    background: var(--color-surface);
    color: var(--color-primary);
    box-shadow: 0 1px 2px rgb(20 26 40 / 8%);
}

.document-source-body textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    outline: 0;
    resize: none;
    background: var(--color-surface);
    color: var(--color-primary);
    font-family: "DejaVu Sans Mono", "Menlo", "Consolas", monospace;
    font-size: 12px;
    line-height: 1.55;
    overflow: auto;
}

.document-source-body textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgb(239 82 49 / 14%);
}

.document-source-modal-window .modal-actions {
    display: flex;
    min-height: 64px;
    padding: 12px 20px;
    border-top: 1px solid var(--color-border);
    align-items: center;
    justify-content: flex-end;
    background: var(--color-surface-muted);
    gap: 10px;
}

.document-source-modal-window .modal-actions .secondary-button,
.document-source-modal-window .modal-actions .primary-button {
    min-width: 132px;
    min-height: 40px;
    padding: 0 16px;
    justify-content: center;
}

.logo-tool {
    display: flex;
    align-items: center;
    gap: 3px;
}

.logo-tool label {
    display: flex;
    height: 34px;
    padding-right: 7px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    align-items: center;
    background: var(--color-surface);
    color: #6c7280;
    font-size: 11px;
}

.logo-tool input {
    width: 52px;
    height: 32px;
    padding: 0 3px 0 7px;
    border: 0;
    outline: 0;
    font-size: 12px;
}

.toolbar-separator {
    width: 1px;
    height: 24px;
    margin: 0 4px;
    background: var(--color-border);
}

.editor-tool-icon {
    display: block;
    width: 18px;
    height: 18px;
}

.image-tool-icon {
    position: relative;
    width: 17px;
    height: 14px;
    border: 1.5px solid currentColor;
    border-radius: 2px;
}

.image-tool-icon::before {
    position: absolute;
    width: 4px;
    height: 4px;
    top: 2px;
    right: 2px;
    border-radius: 50%;
    background: currentColor;
    content: '';
}

.table-tool-icon {
    width: 17px;
    height: 15px;
    border: 1.5px solid currentColor;
    background:
        linear-gradient(currentColor, currentColor) 50% 0 / 1px 100% no-repeat,
        linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat;
}

.image-tool-icon::after {
    position: absolute;
    width: 9px;
    height: 7px;
    bottom: 1px;
    left: 2px;
    background: currentColor;
    clip-path: polygon(0 100%, 42% 30%, 62% 58%, 78% 38%, 100% 100%);
    content: '';
}

.document-canvas-wrap {
    min-height: 0;
    padding: 28px;
    overflow: auto;
    background: #e8eaf0;
}

.document-pages {
    display: grid;
    justify-items: center;
    gap: 28px;
}

.document-page-shell {
    position: relative;
    width: min(100%, 794px);
}

.document-page-shell:has(.document-page-a5) {
    width: min(100%, 560px);
}

.document-page-shell:has(.document-page-a4.document-orientation-landscape) {
    width: min(100%, 1123px);
}

.document-page-shell:has(.document-page-a5.document-orientation-landscape) {
    width: min(100%, 794px);
}

.document-canvas {
    box-sizing: border-box;
    width: 100%;
    height: 1123px;
    margin: 0 auto;
    padding:
        var(--document-margin-top, 18mm)
        var(--document-margin-right, 18mm)
        calc(var(--document-margin-bottom, 18mm) + 22mm)
        var(--document-margin-left, 18mm);
    overflow: hidden;
    outline: none;
    background: var(--color-surface);
    color: #171a22;
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1.45;
    box-shadow: 0 4px 18px rgba(25, 30, 50, 0.12);
}

.document-canvas.document-page-a5 {
    width: min(100%, 560px);
    height: 794px;
}

.document-canvas.document-page-a4.document-orientation-landscape {
    width: min(100%, 1123px);
    height: 794px;
}

.document-canvas.document-page-a5.document-orientation-landscape {
    width: min(100%, 794px);
    height: 560px;
}

.document-canvas:focus {
    box-shadow: 0 4px 18px rgba(25, 30, 50, 0.12), 0 0 0 2px rgba(49, 93, 182, 0.16);
}

.document-canvas img {
    max-width: 100%;
}

.document-canvas img[data-document-brand-logo] {
    display: inline-block;
    height: auto;
    cursor: pointer;
}

.document-canvas img[data-document-brand-logo].is-selected {
    outline: 2px solid rgba(49, 93, 182, 0.55);
    outline-offset: 2px;
}

.document-page-footer-preview {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 18mm;
    padding:
        4mm
        var(--document-margin-right, 18mm)
        5mm
        var(--document-margin-left, 18mm);
    overflow: hidden;
    outline: 0;
    border-top: 1px dashed #ccd2df;
    color: #555c6b;
    font-size: 10px;
    line-height: 1.35;
}

.document-page-footer-preview:empty::before {
    color: #9aa1af;
    content: 'Подвал страницы';
}

.document-canvas table {
    width: 100%;
    border-collapse: collapse;
}

.document-canvas table[data-table-layout="fixed"] {
    table-layout: fixed;
}

.document-canvas table[data-table-layout="fixed"] td,
.document-canvas table[data-table-layout="fixed"] th {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.document-canvas td,
.document-canvas th {
    padding: 7px;
    border: 1px solid #cfd3dc;
}

.document-canvas table[data-border="hidden"] td,
.document-canvas table[data-border="hidden"] th {
    border: 0;
}

.row-actions-menu .danger-action {
    color: #bd412d;
}

.blocked-hint {
    color: #9096a3;
}

.grid-empty-search {
    display: grid;
    min-height: 220px;
    border-top: 1px solid var(--color-border);
    align-content: center;
    justify-items: center;
    color: #555c6b;
    gap: 5px;
}

.grid-empty-search[hidden] {
    display: none;
}

.grid-empty-search small {
    color: #9298a5;
}

.user-modal-window {
    width: min(100%, 760px);
}

.user-modal-window .modal-form {
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.user-modal-window .modal-body {
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 22px;
}

.user-modal-window .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--color-surface);
    box-shadow: 0 -10px 24px rgb(25 30 50 / 8%);
}

.user-profile-form {
    padding-bottom: 22px;
    border-bottom: 1px solid var(--color-border);
}

.avatar-upload {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 13px;
}

.avatar-upload input {
    position: fixed;
    top: -100vh;
    left: -100vw;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.avatar-upload-preview {
    display: inline-grid;
    width: 58px;
    height: 58px;
    border: 1px dashed #b7bdc9;
    border-radius: 50%;
    background: var(--color-background) center / cover no-repeat;
    color: #687080;
    font-size: 24px;
    place-items: center;
}

.avatar-upload-preview.has-image {
    border-style: solid;
    color: transparent;
}

.avatar-upload strong,
.avatar-upload small {
    display: block;
}

.avatar-upload strong {
    margin-bottom: 4px;
    color: var(--color-primary);
    font-size: 13px;
}

.avatar-upload small {
    color: var(--color-muted);
    font-size: 11px;
}

.section-heading-inline {
    display: flex;
    margin-bottom: 14px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.section-heading-inline h3 {
    margin-bottom: 4px;
}

.section-heading-inline p {
    margin: 0;
    color: var(--color-muted);
    font-size: 12px;
}

.super-access-note {
    display: inline-flex;
    min-height: 27px;
    padding: 0 9px;
    border-radius: 14px;
    align-items: center;
    background: var(--color-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.super-access-note[hidden] {
    display: none;
}

.access-summary-panel {
    display: grid;
    gap: 10px;
}

.user-security-actions {
    margin-top: 18px;
}

.user-security-actions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.user-security-actions-list .primary-button,
.user-security-actions-list .secondary-button,
.user-security-actions-list .danger-button {
    min-width: 180px;
}

.user-block-button:disabled {
    opacity: 0.72;
}

.access-settings-button {
    width: fit-content;
}

.access-settings-button[hidden],
.access-fixed-note[hidden] {
    display: none;
}

.access-fixed-note,
.access-section-note {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--font-size-body-small);
    font-weight: var(--font-weight-label);
    line-height: var(--line-height-body);
}

.access-modal-layer {
    position: fixed;
    inset: 0;
    z-index: 320;
    display: flex;
    padding: 20px;
    align-items: center;
    justify-content: center;
}

.access-modal-layer[hidden] {
    display: none;
}

.access-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(16 20 34 / 44%);
}

.access-modal-window {
    position: relative;
    z-index: 1;
    width: min(980px, 100%);
    max-height: min(820px, calc(100vh - 40px));
}

.access-toggle-row {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.store-access-list {
    display: grid;
    overflow: hidden;
    margin-top: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.store-access-list .permission-row + .permission-row {
    border-top: 1px solid var(--color-border);
}

.access-permission-groups {
    display: grid;
    gap: 14px;
}

.access-permission-group {
    display: grid;
    gap: 10px;
}

.access-permission-group-header {
    display: grid;
    gap: 3px;
}

.access-permission-group-header strong {
    color: var(--color-text);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-title);
}

.access-permission-group-header small {
    color: var(--color-muted);
    font-size: var(--font-size-body-small);
    font-weight: var(--font-weight-label);
    line-height: var(--line-height-body);
}

.permission-list {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.permission-row,
.setup-password-option {
    position: relative;
    display: flex;
    min-height: 58px;
    padding: 10px 13px;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    gap: 16px;
}

.permission-row + .permission-row {
    border-top: 1px solid var(--color-border);
}

.permission-row strong,
.permission-row small,
.setup-password-option strong,
.setup-password-option small {
    display: block;
}

.permission-row strong,
.setup-password-option strong {
    margin-bottom: 3px;
    font-size: 12px;
}

.permission-row small,
.setup-password-option small {
    color: var(--color-muted);
    font-size: 11px;
}

.permission-row input,
.setup-password-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.switch-control {
    position: relative;
    width: 38px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: 11px;
    background: #c7cbd3;
    transition: background var(--transition);
}

.switch-control::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
    content: '';
    transition: transform var(--transition);
}

input:checked + .switch-control {
    background: var(--color-primary);
}

.toggle-line input:checked + .switch-control {
    background: var(--color-accent);
}

input:checked + .switch-control::after {
    transform: translateX(16px);
}

input:disabled + .switch-control {
    opacity: 0.7;
}

.setup-password-option {
    padding: 0;
}

.password-fields {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
}

.password-fields[hidden] {
    display: none;
}

.form-error-summary,
.success-banner,
.error-banner {
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.success-banner,
.error-banner {
    transition: opacity 0.22s ease, transform 0.22s ease, margin 0.22s ease, padding 0.22s ease, max-height 0.22s ease;
}

.success-banner.is-dismissing,
.error-banner.is-dismissing {
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
}

.form-error-summary {
    display: grid;
    margin-bottom: 20px;
    padding: 12px 14px;
    border: 1px solid #f0c2b9;
    background: #fff4f1;
    color: #a33b28;
    gap: 3px;
}

.form-error-summary span {
    font-size: 12px;
}

.success-banner {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid #b9dfca;
    background: #edf8f2;
    color: #256847;
    font-weight: 600;
}

.error-banner {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid #f0c2b9;
    background: #fff4f1;
    color: #a33b28;
    font-weight: 600;
}

.toast-stack {
    position: fixed;
    z-index: 2600;
    top: calc(var(--header-height) + 14px);
    right: 18px;
    display: grid;
    width: min(360px, calc(100vw - 28px));
    gap: 10px;
    pointer-events: none;
}

.toast-message {
    position: relative;
    display: flex;
    min-height: 64px;
    padding: 16px 18px 16px 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    align-items: center;
    background: var(--color-surface);
    box-shadow: var(--shadow-menu);
    color: var(--color-text);
    font-size: var(--font-size-control);
    font-weight: var(--font-weight-control);
    line-height: var(--line-height-body);
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 180ms ease, transform 180ms ease;
}

.toast-message::before {
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: 12px;
    width: 3px;
    border-radius: 999px;
    background: var(--color-accent);
    content: "";
    opacity: .8;
}

.toast-message.is-success {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
}

.toast-message.is-error {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
}

.toast-message.is-error::before {
    background: #a33b28;
}

.toast-message.is-hiding {
    opacity: 0;
    transform: translateY(-8px);
}

@media (max-width: 640px) {
    .toast-stack {
        top: calc(var(--header-height) + 10px);
        right: 12px;
        left: 12px;
        width: auto;
    }
}

.auth-body {
    min-height: 100dvh;
    background: var(--color-primary);
}

.auth-page {
    display: grid;
    min-height: 100dvh;
    padding: 24px;
    align-items: center;
    justify-items: center;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 18px;
}

.auth-panel {
    width: min(100%, 420px);
    padding: 32px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: 0 24px 60px rgb(5 9 24 / 30%);
}

.auth-brand {
    display: flex;
    margin-bottom: 28px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--color-primary);
}

.auth-brand-logo {
    display: block;
    width: min(280px, 100%);
    height: auto;
}

.auth-heading {
    margin-bottom: 26px;
}

.auth-heading h1 {
    margin: 5px 0 8px;
    color: var(--color-primary);
    font-size: 28px;
    line-height: 1.2;
}

.auth-heading p {
    margin: 0;
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.55;
}

.auth-form {
    display: grid;
    gap: 17px;
}

.auth-form .form-error-summary {
    margin-bottom: 0;
}

.remember-option {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 9px;
    color: #424855;
    cursor: pointer;
    font-size: 13px;
}

.remember-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkbox-control {
    display: grid;
    width: 18px;
    height: 18px;
    border: 1px solid #bcc1cc;
    border-radius: 4px;
    background: var(--color-surface);
    place-items: center;
}

.remember-option input:checked + .checkbox-control {
    border-color: var(--color-accent);
    background: var(--color-accent);
}

.remember-option input:checked + .checkbox-control::after {
    width: 8px;
    height: 4px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    content: "";
    transform: translateY(-1px) rotate(-45deg);
}

.remember-option input:focus-visible + .checkbox-control {
    outline: 3px solid rgb(228 87 46 / 20%);
}

.auth-submit {
    width: 100%;
    justify-content: center;
}

.auth-page-footer {
    text-align: center;
}

.auth-page-footer a {
    color: rgb(255 255 255 / 72%);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: color var(--transition);
}

.auth-page-footer a:hover {
    color: #fff;
}

.auth-subscription-note {
    margin: 0;
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.55;
}

.confirm-modal-window {
    width: min(100%, 450px);
}

.confirm-modal-body {
    display: grid;
    padding: 28px 24px 30px;
    justify-items: center;
    text-align: center;
}

.confirm-symbol {
    display: grid;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: #fff1e9;
    color: var(--color-accent);
    font-size: 25px;
    font-weight: 700;
    place-items: center;
}

.confirm-modal-body p {
    margin: 0 0 7px;
    font-size: 14px;
    line-height: 1.5;
}

.confirm-modal-body small {
    color: var(--color-muted);
    line-height: 1.5;
}

/* Shared typography roles keep pages and dialogs on the same Material-style scale. */
.workspace :where(.page-heading h1, .order-editor-heading h1, .document-editor-header h1, .auth-heading h1, .work-schedule-title h1) {
    font-size: var(--font-size-page-title);
    font-weight: var(--font-weight-title);
    line-height: var(--line-height-title);
    letter-spacing: 0;
}

.workspace :where(.order-section-header h2, .order-content-header h2, .report-panel-header h2, .return-section-header h2, .document-template-group-header h2, .accountable-balance-panel h2, .measurement-day-header h2, .work-schedule-calendar-header h2) {
    font-size: var(--font-size-section-title);
    font-weight: var(--font-weight-title);
    line-height: var(--line-height-title);
    letter-spacing: 0;
}

.workspace :where(.form-section h3, .section-heading-inline h3, .delivery-purchases-header h3, .installer-data-section h3, .order-subsection-heading h3, .modal-section-title) {
    font-size: var(--font-size-subsection-title);
    font-weight: var(--font-weight-title);
    line-height: var(--line-height-title);
    letter-spacing: 0;
}

body .modal-window .modal-eyebrow {
    color: var(--color-muted);
    font-size: var(--font-size-caption);
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0;
    text-transform: uppercase;
}

body .modal-window .modal-header h2 {
    color: var(--color-primary);
    font-size: var(--font-size-dialog-title);
    font-weight: var(--font-weight-title);
    line-height: var(--line-height-title);
    letter-spacing: 0;
}

body .modal-window .modal-header p {
    color: var(--color-muted);
    font-size: var(--font-size-body-small);
    font-weight: var(--font-weight-label);
    line-height: var(--line-height-body);
}

body .modal-window .modal-body,
body .modal-window .modal-form,
body .modal-window .modal-actions,
body .modal-window .modal-footer {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}

body .modal-window .form-field > span,
body .modal-window .form-field > span:first-child,
body .modal-window .toggle-field strong,
body .modal-window .messenger-connection-switch strong {
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-label);
    line-height: var(--line-height-control);
}

body .modal-window .form-field input,
body .modal-window .form-field select,
body .modal-window .form-field textarea,
body .modal-window .measurement-date-field input {
    font-size: var(--font-size-control);
    font-weight: 400;
    line-height: var(--line-height-control);
}

.primary-button,
.secondary-button,
.danger-button,
.filter-button,
.sort-button,
.icon-text-button,
.modal-actions .primary-button,
.modal-actions .secondary-button,
.modal-actions .danger-button,
.modal-footer .primary-button,
.modal-footer .secondary-button,
.modal-footer .danger-button {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-control);
    line-height: 1;
    letter-spacing: 0;
}

.modal-actions .primary-button,
.modal-actions .secondary-button,
.modal-actions .danger-button,
.modal-footer .primary-button,
.modal-footer .secondary-button,
.modal-footer .danger-button {
    display: inline-flex;
    height: 40px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
}

.primary-button.compact-button,
.secondary-button.compact-button {
    min-height: 40px;
}

.search-field input,
.select-filter select,
.grid-filters input,
.grid-filters select,
.reports-period-form input,
.delivery-schedule-filter select {
    font-size: var(--font-size-body);
    line-height: var(--line-height-control);
}

.field-action-buttons .icon-text-button,
.nomenclature-picker-actions .icon-text-button {
    min-height: 40px;
}

/* Cross-page CRM consistency pass. Keep list/report/settings pages aligned with the order page primitives. */
.workspace :where(.data-grid, .return-section, .report-panel, .workspace-panel, .payment-registry-filters, .payment-registry-summary, .work-schedule-summary, .integration-mapping-summary article, .return-summary-card) {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.workspace :where(.return-section, .report-panel, .data-grid, .workspace-panel, .work-schedules-list-section):has(.row-actions[open]) {
    overflow: visible;
}

.workspace :where(.orders-table, .compact-table) {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}

.workspace :where(.orders-table th, .compact-table th) {
    height: 42px;
    padding: 0 14px;
    color: #757c8c;
    font-size: var(--font-size-label);
    font-weight: 800;
    line-height: 1.2;
}

.workspace :where(.orders-table td, .compact-table td) {
    min-height: 58px;
    padding: 10px 14px;
}

.workspace :where(.cell-primary, .cell-secondary, .amount-cell, .note-clamp) {
    line-height: 1.35;
}

.workspace :where(.status-badge, .role-badge) {
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    align-items: center;
    font-size: var(--font-size-label);
    font-weight: 800;
    line-height: 1;
}

.row-actions[open] {
    z-index: 90;
}

.row-actions[open] .row-actions-menu {
    z-index: 120;
}

.row-actions-menu {
    width: max-content;
    min-width: 210px;
    max-width: min(340px, calc(100vw - 36px));
}

.row-actions-menu button,
.row-actions-menu a {
    display: -webkit-box;
    min-height: 36px;
    padding: 0 10px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-control);
    line-height: var(--line-height-control);
    white-space: normal;
    overflow-wrap: anywhere;
}

.row-actions-menu button span,
.row-actions-menu a span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.row-menu-button {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
}

.workspace :where(.reports-period-form input, .reports-period-form select, .payment-registry-filters input[type='date'], .work-schedule-requisites input, .work-schedule-requisites select, .work-schedule-requisites textarea) {
    min-height: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    background: var(--color-surface);
    font-size: var(--font-size-body);
    line-height: var(--line-height-control);
}

.workspace :where(.brand-logo-upload, .avatar-upload) {
    min-height: 58px;
    padding: 10px 12px;
    border: 1px dashed #b7bdc9;
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
    gap: 12px;
}

.workspace :where(.brand-logo-upload, .avatar-upload):hover {
    border-color: #8e96a9;
    background: var(--color-primary-soft);
}

.workspace :where(.brand-logo-upload strong, .avatar-upload strong, .order-file-picker strong) {
    color: var(--color-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-title);
    line-height: 1.25;
}

.workspace :where(.brand-logo-upload small, .avatar-upload small, .order-file-picker small, .order-file-selection) {
    color: var(--color-muted);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-label);
    line-height: 1.35;
}

.modal-window :where(.primary-button, .secondary-button),
.modal-footer :where(.primary-button, .secondary-button) {
    min-width: 128px;
    min-height: 40px;
}

.orders-table .status-badge,
.compact-table .status-badge,
.orders-table .role-badge,
.compact-table .role-badge {
    width: fit-content;
    justify-self: start;
}

@media (max-width: 900px) {
    :root {
        --font-size-page-title: 23px;
        --font-size-dialog-title: 18px;
        --font-size-section-title: 14px;
        --font-size-subsection-title: 13px;
        --font-size-control: 13px;
        --font-size-body: 12px;
        --font-size-body-small: 12px;
        --font-size-label: 11px;
    }
}

@media (max-width: 1080px) {
    .navbar {
        gap: 18px;
    }

    .desktop-navigation {
        gap: 0;
    }

    .nav-link {
        padding: 0 8px;
        gap: 6px;
    }

    .nav-link .nav-icon {
        width: 17px;
        height: 17px;
        flex-basis: 17px;
        font-size: 17px;
        line-height: 17px;
    }

    .profile-copy {
        display: none;
    }

    .order-editor-layout {
        grid-template-columns: 1fr;
    }

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

    .document-editor-layout {
        grid-template-columns: 360px minmax(0, 1fr);
    }
}

@media (max-width: 820px) {
    .navbar {
        padding: 0 18px;
    }

    .saas-expired-access-banner {
        padding: 10px 18px;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .saas-expired-access-link {
        grid-column: 2;
        justify-self: start;
    }

    .saas-admin-alert-stack {
        padding: 10px 18px;
    }

    .saas-admin-alert {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .saas-admin-alert-link {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .desktop-navigation {
        display: none;
    }

    .profile-button {
        padding: 4px;
    }

    .notification-button {
        display: inline-grid;
    }

    .installation-status-row {
        grid-template-columns: 1fr;
    }

    .installation-status-row .order-schedule-check {
        justify-content: flex-start;
    }

    .mobile-menu-button {
        display: grid;
    }

    .mobile-backdrop {
        position: fixed;
        z-index: 44;
        inset: var(--header-height) 0 0;
        background: rgb(13 17 29 / 48%);
        opacity: 0;
        transition: opacity 220ms ease;
    }

    .mobile-navigation {
        position: fixed;
        z-index: 45;
        top: 0;
        right: 0;
        display: flex;
        width: min(88vw, 360px);
        height: 100dvh;
        background: var(--color-surface);
        color: var(--color-text);
        flex-direction: column;
        transform: translateX(100%);
        transition: transform 220ms ease;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }

    body.mobile-menu-open .mobile-backdrop {
        display: block;
        opacity: 1;
    }

    body.mobile-menu-open .mobile-navigation {
        transform: translateX(0);
    }

    .mobile-navigation-header {
        display: flex;
        min-height: var(--header-height);
        padding: 0 20px;
        border-bottom: 1px solid var(--color-border);
        align-items: center;
        justify-content: space-between;
    }

    .mobile-navigation-title {
        font-size: 16px;
        font-weight: 700;
    }

    .sales-funnel-workspace {
        padding-right: 0;
        padding-left: 0;
    }

    .sales-funnel-board {
        grid-auto-columns: minmax(272px, 84vw);
        min-height: calc(100dvh - var(--header-height) - 170px);
    }

    .funnel-column {
        max-height: calc(100dvh - var(--header-height) - 170px);
    }

    .reports-heading,
    .reports-period-form {
        align-items: stretch;
        flex-direction: column;
    }

    .reports-period-form {
        width: 100%;
    }

    .reports-period-form input,
    .delivery-schedule-filter select,
    .reports-period-form .primary-button {
        width: 100%;
    }

    .task-report-filters label:nth-child(3) select,
    .task-report-filters label:nth-child(4) select {
        width: 100%;
    }

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

    .report-metrics,
    .reports-grid {
        grid-template-columns: 1fr;
    }

    .report-panel-wide {
        grid-row: auto;
    }

    .delivery-schedule-metrics {
        grid-template-columns: 1fr;
    }

    .delivery-schedule-grid {
        min-width: max(980px, calc(170px + var(--delivery-schedule-days) * 230px));
        grid-template-columns: 170px repeat(var(--delivery-schedule-days), minmax(230px, 1fr));
    }

    .delivery-schedule-driver,
    .delivery-schedule-cell {
        min-height: 112px;
    }

    .payment-registry-filters {
        grid-template-columns: 1fr 1fr;
    }

    .payment-registry-filters .search-field,
    .payment-registry-filters .primary-button {
        width: 100%;
        grid-column: 1 / -1;
    }

    .payment-registry-filters .select-filter {
        min-width: 0;
    }

    .deleted-objects-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .deleted-objects-buttons {
        justify-content: stretch;
    }

    .deleted-objects-buttons .secondary-button,
    .deleted-objects-buttons .danger-button {
        flex: 1 1 150px;
    }

    .deleted-objects-grid {
        overflow: visible;
    }

    .deleted-objects-toolbar {
        display: grid;
        min-height: 0;
        padding: 14px 16px;
        grid-template-columns: 1fr;
        align-items: stretch;
        justify-content: start;
        gap: 10px;
    }

    .deleted-objects-toolbar .select-filter,
    .deleted-objects-toolbar .search-field,
    .deleted-objects-toolbar .secondary-button {
        width: 100%;
        min-width: 0;
    }

    .deleted-objects-toolbar .search-field {
        flex: none;
    }

    .deleted-objects-actions {
        padding: 14px 16px;
        gap: 12px;
    }

    .deleted-objects-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .deleted-objects-buttons .secondary-button,
    .deleted-objects-buttons .danger-button {
        width: 100%;
        min-height: 42px;
        flex: none;
        justify-content: center;
    }

    .deleted-objects-buttons .danger-button {
        grid-column: 1 / -1;
    }

    .report-status-row {
        grid-template-columns: minmax(0, 1fr) 36px 100px;
    }

    .mobile-close-button {
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: var(--radius-sm);
        background: transparent;
        cursor: pointer;
    }

    .mobile-close-button span {
        position: absolute;
        top: 19px;
        left: 10px;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: var(--color-primary);
        transform: rotate(45deg);
    }

    .mobile-close-button span:last-child {
        transform: rotate(-45deg);
    }

    .mobile-navigation-content {
        overflow-y: auto;
        padding: 12px;
    }

    .mobile-nav-link {
        display: flex;
        min-height: 44px;
        padding: 0 12px;
        border-radius: var(--radius-sm);
        align-items: center;
        gap: 10px;
        color: #3d4352;
        font-size: 14px;
        font-weight: 500;
    }

    .mobile-nav-link .nav-icon {
        width: 18px;
        height: 18px;
        flex-basis: 18px;
        color: #7a8190;
        font-size: 18px;
        line-height: 18px;
    }

    .mobile-nav-link:hover,
    .mobile-nav-link.is-active {
        background: var(--color-primary-soft);
        color: var(--color-primary);
    }

    .mobile-nav-link:hover .nav-icon,
    .mobile-nav-link.is-active .nav-icon {
        color: var(--color-primary);
    }

    .mobile-nav-section {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--color-border);
    }

    .mobile-nav-label {
        display: block;
        padding: 6px 12px 8px;
        color: var(--color-muted);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .mobile-nav-child {
        padding-left: 18px;
        font-weight: 400;
    }

    .workspace {
        padding: 24px 0 36px;
    }

    .page-heading,
    .document-editor-header {
        padding-right: 18px;
        padding-left: 18px;
    }

    .order-editor-workspace {
        padding-right: 0;
        padding-left: 0;
    }

    .subscription-workspace {
        width: 100%;
        padding-right: 14px;
        padding-left: 14px;
    }

    .delivery-tariff-rule-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .door-kit-rule-line-grid {
        grid-template-columns: 1fr;
    }

    .door-kit-rule-modal-window {
        width: 100vw;
    }

    .delivery-charge-rule-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .order-editor-header {
        padding-right: 18px;
        padding-left: 18px;
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .order-editor-heading {
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
    }

    .order-editor-heading h1 {
        font-size: 28px;
        line-height: 1.08;
    }

    .order-editor-actions {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .order-editor-actions .primary-button,
    .order-editor-actions .secondary-button {
        flex: 1 1 0;
        justify-content: center;
    }

    .order-print-menu,
    .order-print-button,
    .order-command-menu,
    .order-command-button,
    .order-chat-open-button {
        width: 100%;
    }

    .order-editor-sidebar {
        grid-template-columns: 1fr;
    }

    .document-editor-layout {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .document-editor-main {
        position: static;
        height: auto;
        max-height: none;
    }

    .document-canvas-wrap {
        min-height: 760px;
    }

    .document-editor-sidebar {
        grid-template-columns: 1fr 1fr;
        max-height: none;
        overflow: visible;
    }

    .document-danger-panel {
        grid-column: 1 / -1;
    }

    .order-tabs {
        display: grid;
        min-height: 0;
        padding: 10px;
        border-bottom: 1px solid var(--color-border);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .order-tab {
        min-height: 38px;
        padding: 0 10px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        justify-content: space-between;
        background: var(--color-surface);
        font-size: 11px;
        gap: 6px;
        white-space: normal;
    }

    .order-tab::after {
        display: none;
    }

    .order-tab.is-active {
        border-color: rgb(238 78 42 / 34%);
        background: #fff5f1;
        box-shadow: inset 0 0 0 1px rgb(238 78 42 / 16%);
    }

    .order-tab > span:not(.tab-state-dot) {
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        font-size: 9px;
    }

    .order-content-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .order-content-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: none;
    }

    .order-content-actions::-webkit-scrollbar {
        display: none;
    }

    .order-content-header .primary-button,
    .order-content-header .secondary-button {
        flex: 1 1 160px;
        justify-content: center;
    }

    .order-content-header .primary-button.compact-button,
    .order-content-header .secondary-button.compact-button {
        width: auto;
        height: 40px;
        min-width: 0;
        flex: 1 1 0;
        align-self: stretch;
    }

    .order-content-header .order-square-action {
        width: 40px;
        min-width: 40px;
        flex: 0 0 40px;
        padding: 0;
    }

    .order-content-header .order-product-actions {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
    }

    .order-content-header .order-product-actions .order-product-action {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: 40px;
        padding: 0 8px;
        flex: none;
        align-self: stretch;
        justify-content: center;
        white-space: nowrap;
    }

    .order-content-header .order-product-actions .order-product-action-icon {
        padding: 0;
    }

    .order-content-header .order-product-actions .order-product-action .button-svg-icon,
    .order-content-header .order-product-actions .order-product-action .plus-icon {
        flex: 0 0 auto;
    }

    .order-content-header .order-product-actions .order-product-action > span:not(.plus-icon) {
        display: inline-block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .order-content-header .order-product-actions .order-product-action > b {
        display: none;
    }

    .order-content-header .order-product-actions .order-product-action-icon > span:not(.plus-icon),
    .order-content-header .order-product-actions .order-product-action-icon > b {
        display: none;
    }

    .order-content-header .order-product-actions .order-product-action-catalog {
        grid-column: 1 / 3;
    }

    .order-content-header .order-product-actions .order-product-action-add {
        grid-column: 3 / 4;
        padding: 0;
    }

    .order-square-action::after {
        display: none;
    }

    .order-wholesale-message-modal-window {
        width: min(100%, calc(100vw - 16px));
    }

    .order-wholesale-message-modal-window .modal-body {
        padding: 16px;
    }

    .order-wholesale-message-modal-window .modal-actions {
        display: grid;
        grid-template-columns: 1fr;
        padding: 12px 16px;
    }

    .order-wholesale-message-modal-window .modal-actions .secondary-button,
    .order-wholesale-message-modal-window .modal-actions .primary-button {
        width: 100%;
        justify-content: center;
    }

    .order-service-bulk-modal-window {
        width: min(100%, calc(100vw - 16px));
    }

    .category-picker-modal-window {
        width: min(100%, calc(100vw - 16px));
    }

    .category-picker-modal-window .modal-body {
        padding: 16px;
    }

    .category-picker-current {
        display: grid;
        grid-template-columns: 1fr;
    }

    .category-picker-row {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .category-picker-row .secondary-button {
        width: 100%;
        justify-content: center;
    }

    .order-service-bulk-modal-window .modal-body {
        padding: 16px;
    }

    .order-service-bulk-row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .order-service-bulk-row .cell-stack {
        grid-column: 1 / -1;
    }

    .order-service-bulk-row .secondary-button {
        width: 38px;
        justify-content: center;
    }

    .order-service-bulk-price {
        justify-self: start;
    }

    .order-service-bulk-count {
        justify-self: start;
    }

    .order-service-bulk-add-button {
        justify-self: end;
    }

    .order-door-constructor-modal-window {
        width: min(100%, calc(100vw - 16px));
        max-height: 94dvh;
        overflow: hidden;
    }

    .order-door-constructor-modal-window .modal-form {
        min-height: 0;
        overflow: hidden;
    }

    .order-door-constructor-modal-window .modal-body {
        min-height: 0;
        overflow-y: auto;
        padding: 16px;
    }

    .order-door-constructor-modal-window .modal-footer {
        position: sticky;
        bottom: 0;
        z-index: 2;
        border-top: 1px solid var(--color-border);
        background: var(--color-surface);
        box-shadow: 0 -10px 24px rgb(25 30 50 / 8%);
    }

    .door-constructor-model-picker,
    .door-constructor-opening-grid {
        grid-template-columns: 1fr;
    }

    .door-constructor-model-picker .secondary-button {
        width: 100%;
        justify-content: center;
    }

    .door-constructor-section-header {
        align-items: stretch;
        flex-direction: column;
    }

    .door-constructor-section-header .secondary-button {
        width: 100%;
        justify-content: center;
    }

    .order-file-upload {
        grid-template-columns: 1fr;
    }

    .order-chat-drawer-panel {
        width: 100vw;
    }

    .order-chat-drawer-header {
        min-height: 54px;
        padding: 0 8px 0 12px;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .order-chat-drawer-header .order-chat-channel-list {
        grid-column: auto;
        grid-row: auto;
    }

    .order-chat-shell {
        min-height: 0;
        grid-template-columns: 1fr;
    }

    .order-chat-sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
        background: var(--color-surface);
    }

    .order-chat-contact {
        padding: 15px 16px;
    }

    .order-chat-channel-list {
        display: flex;
        padding: 0 16px 14px;
        gap: 8px;
        overflow-x: auto;
    }

    .order-chat-channel {
        min-width: 154px;
        min-height: 58px;
        padding: 10px 38px 10px 12px;
        background: #f7f8fb;
    }

    .order-chat-list {
        max-height: 520px;
        padding: 14px 14px 18px;
    }

    .order-ai-widget {
        right: 16px;
        bottom: 16px;
    }

    .order-ai-toggle {
        width: 54px;
        height: 54px;
    }

    .order-ai-panel {
        right: -2px;
        bottom: 68px;
        width: calc(100vw - 28px);
        height: min(560px, calc(100vh - 104px));
    }

    .order-ai-widget.is-open .order-ai-panel {
        bottom: 0;
    }

    .order-chat-bubble {
        width: 100%;
        padding: 11px 12px;
    }

    .order-chat-message.is-outgoing,
    .order-chat-message.is-incoming {
        justify-content: stretch;
    }

    .order-chat-composer {
        padding: 12px;
        grid-template-columns: 1fr;
    }

    .order-chat-composer-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .order-chat-composer-tools {
        display: grid;
        width: 100%;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr) 44px 44px;
        gap: 8px;
    }

    .order-chat-suggest-button {
        width: 100%;
        justify-content: center;
    }

    .order-chat-file-control {
        width: 44px;
        min-width: 0;
    }

    .order-chat-file-control span {
        padding: 0;
    }

    .order-chat-file-control b {
        display: none;
    }

    .order-chat-emoji-picker summary {
        width: 44px;
        height: 36px;
    }

    .order-chat-emoji-row {
        right: 0;
        left: auto;
        min-width: 152px;
    }

    .order-chat-send {
        width: 100%;
        justify-content: center;
    }

    .order-chat-suggestion {
        grid-template-columns: 1fr;
    }

    .order-chat-suggestion-actions {
        justify-content: space-between;
    }

    .order-chat-suggestion-actions .secondary-button {
        flex: 1 1 auto;
        justify-content: center;
    }

    .order-file-note input {
        height: 44px;
    }

    .order-file-selection {
        grid-column: auto;
    }

    .order-lines {
        overflow: visible;
    }

    .order-lines-head {
        display: none;
    }

    .order-line-row {
        position: relative;
        min-width: 0;
        min-height: 0;
        padding: 12px 44px 12px 12px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
        gap: 8px 10px;
    }

    .order-lines-has-markup .order-line-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .order-line-product {
        grid-column: 1 / -1;
        padding-right: 6px;
        align-items: flex-start;
        gap: 9px;
    }

    .order-line-product .cell-stack {
        min-width: 0;
        flex: 1 1 auto;
    }

    .order-line-thumb {
        width: 34px;
        height: 42px;
    }

    .order-line-product strong {
        display: -webkit-box;
        overflow: hidden;
        font-size: 13px;
        line-height: 1.25;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .order-line-product .cell-secondary {
        font-size: 11px;
        line-height: 1.2;
    }

    .order-line-row label {
        display: grid;
        min-width: 0;
        gap: 2px;
    }

    .order-line-row > label:nth-of-type(1) {
        grid-column: 1;
        grid-row: 2;
    }

    .order-line-unit-cell {
        display: grid;
        grid-column: 2;
        grid-row: 2;
        gap: 2px;
        min-width: 0;
    }

    .order-line-row > label:nth-of-type(2) {
        grid-column: 3;
        grid-row: 2;
    }

    .order-line-row > label:nth-of-type(3) {
        grid-column: 1;
        grid-row: 3;
    }

    .order-line-row > label:nth-of-type(4) {
        grid-column: 2;
        grid-row: 3;
    }

    .order-line-row > label:nth-of-type(5) {
        grid-column: 3;
        grid-row: 3;
    }

    .order-line-row input,
    .order-line-row select {
        height: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--color-text);
        font-size: 11px;
        font-weight: 700;
        line-height: 1.25;
        overflow: hidden;
        pointer-events: none;
        text-overflow: ellipsis;
    }

    .mobile-field-label {
        display: block;
        overflow: hidden;
        color: var(--color-muted);
        font-size: 7.5px;
        font-weight: 700;
        line-height: 1.1;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .order-line-total {
        grid-column: 3;
        grid-row: 3;
        align-self: start;
        justify-self: end;
        padding-top: 13px;
        font-size: 12px;
        line-height: 1.25;
        text-align: right;
    }

    .order-lines-has-markup .order-line-total {
        grid-column: 1 / -1;
        grid-row: 4;
        padding-top: 0;
    }

    .order-line-row > .row-actions {
        position: absolute;
        top: 12px;
        right: 8px;
    }

    .order-delivery-charge-card {
        position: relative;
        margin: 12px;
        padding: 14px 46px 14px 14px;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 9px;
    }

    .order-delivery-charge-card > .row-actions {
        position: absolute;
        top: 12px;
        right: 12px;
    }

    .order-delivery-charge-card > strong {
        justify-self: start;
    }

    .order-delivery-charge-comment {
        margin: 6px 12px 0;
    }

    .line-remove-button {
        position: absolute;
        top: 12px;
        right: 10px;
    }

    .order-purchase-list {
        padding: 12px;
    }

    .order-purchase-row {
        position: relative;
        padding: 14px 46px 14px 14px;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 10px;
    }

    .order-purchase-row > div {
        min-width: 0;
        grid-column: 1;
    }

    .order-purchase-row > div:nth-child(2),
    .order-purchase-row > div:nth-child(3) {
        grid-column: 1;
    }

    .order-purchase-row > .purchase-payment-add-button {
        width: 100%;
        justify-content: center;
        grid-column: 1;
    }

    .order-purchase-row > .row-actions {
        position: absolute;
        top: 13px;
        right: 12px;
    }

    .order-purchase-row > .row-actions .row-menu-button {
        grid-row: auto;
        grid-column: auto;
    }

    .order-purchase-row > .row-actions .row-actions-menu {
        top: 34px;
    }

    .purchase-payment-list {
        margin-top: 2px;
        padding-top: 10px;
        border-top: 1px solid #eef0f5;
        grid-column: 1;
    }

    .purchase-payment-item {
        position: relative;
        min-height: 54px;
        padding: 10px 42px 10px 12px;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .purchase-payment-item > div {
        min-width: 0;
    }

    .purchase-payment-item > strong {
        align-self: center;
        white-space: nowrap;
    }

    .purchase-payment-item > .row-actions {
        position: absolute;
        top: 10px;
        right: 8px;
    }

    .purchase-payment-item > .row-actions .row-actions-menu {
        top: 34px;
    }

    .delivery-purchase-summary {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 8px;
    }

    .delivery-purchase-summary .compact-button {
        width: 100%;
    }

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

    .accountable-balance-panel header {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .accountable-filter-button {
        width: 100%;
    }

    .accountable-grid-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .delivery-summary-card {
        min-height: 78px;
    }

    .grid-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

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

    .nomenclature-filters .select-filter {
        min-width: 0;
    }

    .category-filters {
        grid-template-columns: 1fr 1fr;
    }

    .category-filters .select-filter {
        min-width: 0;
    }

    .search-field {
        width: 100%;
    }

    .grid-filters {
        display: grid;
        grid-template-columns: 1fr 1fr 40px;
    }

    .orders-filter-toolbar .grid-filters {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .orders-filter-toolbar .filter-button {
        width: 100%;
    }

    .orders-filter-toolbar .filter-reset-button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .users-toolbar .grid-filters {
        display: block;
    }

    .users-toolbar .select-filter {
        width: 100%;
        min-width: 0;
    }

    .filter-button {
        min-width: 0;
    }

    .table-scroll {
        overflow: visible;
    }

    .orders-table {
        min-width: 0;
    }

    .orders-table thead {
        display: none;
    }

    .orders-table,
    .orders-table tbody,
    .orders-table tr,
    .orders-table td {
        display: block;
        width: 100%;
    }

    .orders-table tbody tr {
        position: relative;
        padding: 14px 50px 14px 14px;
        border-bottom: 1px solid var(--color-border);
    }

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

    .orders-table td {
        display: grid;
        height: auto;
        min-height: 32px;
        padding: 5px 0;
        border: 0;
        grid-template-columns: 92px minmax(0, 1fr);
        align-items: start;
        gap: 10px;
    }

    .orders-table td > .cell-stack,
    .orders-table td > .amount-cell {
        grid-column: 2;
    }

    .orders-table .cell-secondary {
        overflow-wrap: anywhere;
    }

    .orders-table .note-clamp {
        max-width: none;
        -webkit-line-clamp: 2;
    }

    .orders-table td::before {
        color: #8a91a0;
        content: attr(data-label);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
    }

    .orders-table .actions-cell {
        position: absolute;
        top: 12px;
        right: 10px;
        display: block;
        width: 36px;
    }

    .orders-table .actions-cell .row-actions {
        display: flex;
        width: 34px;
        height: 34px;
        margin-left: auto;
        align-items: center;
        justify-content: center;
    }

    .orders-table .actions-cell .row-menu-button {
        margin: 0;
        transform: none;
    }

    .orders-table .actions-cell > .messenger-connection-check-actions {
        transform: translateX(calc(-100% + 36px));
    }

    .orders-table .actions-cell::before {
        display: none;
    }

    .employee-status-table {
        min-width: 0;
        table-layout: auto;
    }

    .employee-status-table tbody tr {
        display: grid;
        padding: 12px 14px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 8px;
    }

    .employee-status-table td {
        display: grid;
        min-height: 0;
        padding: 0;
        grid-template-columns: minmax(0, 1fr);
        gap: 3px;
    }

    .employee-status-table td::before {
        font-size: 10px;
        line-height: 1.2;
    }

    .employee-status-table__person {
        grid-column: 1 / -1;
        padding-bottom: 2px;
    }

    .employee-status-table__person::before {
        display: none;
    }

    .employee-status-table__person .cell-primary {
        color: var(--color-primary);
        font-size: 14px;
        line-height: 1.2;
    }

    .employee-status-table__person .cell-secondary {
        color: var(--color-muted);
        font-size: 11px;
        line-height: 1.25;
    }

    .employee-status-table__metric,
    .employee-status-table__status {
        min-height: 54px;
        padding: 8px 10px;
        border: 1px solid #eceff4;
        border-radius: var(--radius-sm);
        background: var(--color-surface-muted);
    }

    .employee-status-table__metric {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .employee-status-table__metric::before {
        align-self: center;
    }

    .employee-status-table__metric > .cell-primary,
    .employee-status-table__metric > strong,
    .employee-status-table__metric > .status-badge {
        justify-self: end;
    }

    .employee-status-table__status .cell-primary {
        color: var(--color-primary);
        font-size: 14px;
        line-height: 1.15;
    }

    .employee-status-table__status .cell-secondary {
        color: var(--color-muted);
        font-size: 11px;
        line-height: 1.2;
    }

    .employee-status-table__status.is-empty {
        display: none;
    }

    .nomenclature-table .nomenclature-identity {
        grid-column: 1 / -1;
        padding-right: 28px;
        padding-left: 0;
        gap: 10px;
    }

    .nomenclature-table .nomenclature-image {
        width: 44px;
        height: 56px;
        flex: 0 0 44px;
    }

    .nomenclature-table tr[data-nomenclature-row] {
        display: grid;
        padding: 10px 82px 10px 14px;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: start;
        gap: 5px 12px;
    }

    .nomenclature-table .actions-cell {
        width: auto;
    }

    .nomenclature-table .nomenclature-row-actions {
        gap: 4px;
    }

    .nomenclature-table .nomenclature-favorite-button {
        width: 34px;
        height: 34px;
    }

    .nomenclature-table tr[data-nomenclature-row] td {
        display: block;
        width: auto;
        min-height: 0;
        padding: 0;
    }

    .nomenclature-table tr[data-nomenclature-row] td::before {
        display: none;
    }

    .nomenclature-table tr[data-nomenclature-row] td[data-label='Номенклатура'] {
        grid-column: 1 / -1;
    }

    .nomenclature-table tr[data-nomenclature-row] td[data-label='Классификация'],
    .nomenclature-table tr[data-nomenclature-row] td[data-label='Бренд'],
    .nomenclature-table tr[data-nomenclature-row] td[data-label='Статус'] {
        color: var(--color-muted);
        font-size: 11px;
        line-height: 1.25;
    }

    .nomenclature-table tr[data-nomenclature-row] td[data-label='Классификация'] {
        grid-column: 1 / -1;
    }

    .nomenclature-table tr[data-nomenclature-row] td[data-label='Классификация'] .cell-stack {
        display: flex;
        align-items: center;
        gap: 7px;
        flex-wrap: wrap;
    }

    .nomenclature-table tr[data-nomenclature-row] td[data-label='Классификация'] .cell-primary,
    .nomenclature-table tr[data-nomenclature-row] td[data-label='Классификация'] .cell-secondary {
        margin: 0;
        color: var(--color-muted);
        font-size: 11px;
        font-weight: 600;
    }

    .nomenclature-table tr[data-nomenclature-row] td[data-label='Бренд'] {
        grid-column: 1;
        align-self: center;
        font-weight: 600;
    }

    .nomenclature-table tr[data-nomenclature-row] td[data-label='Розница'],
    .nomenclature-table tr[data-nomenclature-row] td[data-label='Опт'] {
        align-self: center;
        font-size: 12px;
        line-height: 1.2;
        white-space: nowrap;
    }

    .nomenclature-table tr[data-nomenclature-row] td[data-label='Розница'] {
        grid-column: 2;
    }

    .nomenclature-table tr[data-nomenclature-row] td[data-label='Опт'] {
        grid-column: 3;
    }

    .nomenclature-table tr[data-nomenclature-row] td[data-label='Статус'] {
        grid-column: 1 / -1;
    }

    .nomenclature-table tr[data-nomenclature-row] .status-badge {
        padding: 4px 10px;
        font-size: 11px;
    }

    .nomenclature-table .cell-primary {
        margin-bottom: 2px;
        line-height: 1.25;
    }

    .nomenclature-table .cell-secondary {
        display: -webkit-box;
        overflow: hidden;
        font-size: 11px;
        line-height: 1.35;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }

    .nomenclature-table .nomenclature-folder-row {
        padding: 0 14px;
    }

    .nomenclature-table .nomenclature-folder-row td {
        display: block;
        min-height: 46px;
        padding: 0;
    }

    .nomenclature-table .nomenclature-folder-row td::before {
        display: none;
    }

    .nomenclature-folder {
        padding-left: calc(var(--folder-depth, 0) * 16px);
    }

    .categories-table .category-tree-node {
        grid-column: 2;
        padding-left: calc(var(--category-depth) * 18px);
    }

    .users-table .user-identity {
        display: flex;
        grid-column: 2;
        gap: 11px;
    }

    .users-table .user-avatar {
        justify-self: start;
    }

    .users-table .user-identity .cell-stack {
        display: grid;
        align-content: center;
        gap: 3px;
    }

    .users-table .user-identity .cell-primary,
    .users-table .user-identity .cell-secondary {
        margin: 0;
    }

    .users-table .role-badge,
    .users-table .status-badge {
        justify-self: start;
    }

    .row-actions-menu {
        position: absolute;
        top: 38px;
        right: 0;
        bottom: auto;
        left: auto;
        width: 190px;
        padding: 6px;
    }

    .order-editor-actions .order-print-menu-list,
    .order-editor-actions .order-command-menu-list {
        width: max-content;
        min-width: 220px;
        max-width: min(380px, calc(100vw - 36px));
    }

    .users-table tbody tr:last-child .row-actions-menu {
        top: auto;
        bottom: 38px;
    }

    .measurement-workspace {
        padding-right: 14px;
        padding-left: 14px;
    }

    .measurement-week {
        grid-template-columns: 1fr;
    }

    .measurement-week-nav {
        justify-content: center;
    }

    .measurement-days {
        overflow-x: auto;
        margin: 0 -14px;
        padding: 0 14px 4px;
        grid-auto-columns: 78px;
        grid-auto-flow: column;
        grid-template-columns: none;
        scrollbar-width: thin;
    }

    .measurement-day {
        min-height: 68px;
    }

    .measurement-day-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .measurement-card {
        padding: 14px;
    }

    .measurement-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .measurement-contact-grid,
    .measurement-update-form {
        grid-template-columns: 1fr;
    }

    .measurement-contact-wide {
        grid-column: auto;
    }

    .measurement-contact-summary {
        grid-template-columns: 1fr;
    }

    .measurement-update-form .primary-button {
        width: 100%;
    }

    .measurement-layout {
        grid-template-columns: 1fr;
    }

    .measurement-month-panel {
        position: static;
    }

    .measurement-day-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .measurement-list-head {
        display: none;
    }

    .measurement-list-card {
        grid-template-columns: minmax(0, 1fr);
        padding: 12px 0;
        border: 0;
        border-bottom: 1px solid var(--color-border);
        border-radius: 0;
        gap: 8px;
    }

    .measurement-list-time,
    .measurement-list-customer,
    .measurement-list-order,
    .measurement-list-details,
    .measurement-list-photos,
    .measurement-list-status {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        align-items: start;
        gap: 10px;
    }

    .measurement-list-time::before,
    .measurement-list-customer::before,
    .measurement-list-order::before,
    .measurement-list-details::before,
    .measurement-list-photos::before,
    .measurement-list-status::before {
        color: #8a91a0;
        content: attr(data-label);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
    }

    .measurement-list-customer strong,
    .measurement-list-customer span,
    .measurement-list-customer small,
    .measurement-list-details span,
    .measurement-list-details small,
    .measurement-list-photos > * {
        grid-column: 2;
    }

    .measurement-list-photos {
        align-items: center;
    }

    .measurement-list-time,
    .measurement-list-order {
        color: var(--color-muted);
        font-size: 12px;
        font-weight: 700;
    }

    .measurement-list-customer strong {
        font-size: 12px;
    }

    .measurement-list-status .status-badge {
        width: fit-content;
        justify-self: start;
    }

    .measurement-list-time {
        width: auto;
    }

    .measurement-modal-summary {
        grid-template-columns: 1fr;
    }

    .grid-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .integration-mapping-summary {
        grid-template-columns: 1fr;
    }

    .integration-mapping-toolbar {
        grid-template-columns: 1fr;
    }

    .integration-mapping-toolbar .grid-filters,
    .integration-mapping-toolbar .filter-button,
    .integration-mapping-toolbar .filter-reset-button {
        width: 100%;
    }
}

@media (max-width: 820px) {
    .order-line-row,
    .order-lines-has-markup .order-line-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) 32px !important;
        gap: 9px 8px !important;
        padding: 12px 44px 12px 12px !important;
        overflow: visible !important;
    }

    .order-line-product {
        grid-column: 1 / -2 !important;
        grid-row: 1 !important;
    }

    .order-line-row > label:nth-of-type(1) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .order-line-unit-cell {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    .order-line-row > label:nth-of-type(2) {
        grid-column: 3 !important;
        grid-row: 2 !important;
    }

    .order-line-row > label:nth-of-type(3) {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    .order-line-row > label:nth-of-type(4) {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    .order-line-row > label:nth-of-type(5) {
        grid-column: 3 !important;
        grid-row: 3 !important;
    }

    .order-lines-has-markup .order-line-row > label:nth-of-type(4) {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    .order-lines-has-markup .order-line-row > label:nth-of-type(5) {
        grid-column: 3 !important;
        grid-row: 3 !important;
    }

    .order-lines-has-markup .order-line-row > label:nth-of-type(6) {
        grid-column: 3 !important;
        grid-row: 3 !important;
    }

    .order-line-total {
        display: block !important;
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
        justify-self: stretch !important;
        padding-top: 4px !important;
        text-align: left !important;
        white-space: nowrap;
    }

    .order-lines-has-markup .order-line-total {
        grid-row: 5 !important;
    }
}

@media (min-width: 821px) {
    .order-lines {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
    }

    .order-lines-head,
    .order-line-row {
        width: max-content !important;
        max-width: none !important;
        min-width: 0 !important;
        grid-template-columns:
            420px
            48px
            48px
            82px
            74px
            82px
            62px
            minmax(112px, 122px)
            28px !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }

    .order-lines-has-markup .order-lines-head,
    .order-lines-has-markup .order-line-row {
        grid-template-columns:
            390px
            48px
            48px
            82px
            70px
            74px
            78px
            62px
            minmax(112px, 122px)
            28px !important;
    }

    .order-line-total,
    .order-lines-has-markup .order-line-total {
        min-width: 0 !important;
        padding-right: 0 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 820px) {
    .order-line-row,
    .order-lines-has-markup .order-line-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) 32px !important;
        gap: 7px 8px !important;
        padding: 10px 44px 10px 12px !important;
        overflow: visible !important;
    }

    .order-line-index {
        display: none !important;
    }

    .order-line-product {
        grid-column: 1 / -2 !important;
        grid-row: 1 !important;
        gap: 8px !important;
        padding-left: 0 !important;
    }

    .order-line-thumb {
        width: 34px;
        height: 40px;
    }

    .order-line-title-row {
        display: flex;
        min-width: 0;
        align-items: baseline;
        gap: 6px;
    }

    .order-line-mobile-index {
        display: inline;
        flex: 0 0 auto;
        color: var(--color-text);
        font: inherit;
        font-weight: 800;
    }

    .order-line-product strong {
        min-width: 0;
        font-size: 12px !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere;
    }

    .order-line-product .cell-secondary {
        font-size: 11px !important;
        line-height: 1.15 !important;
    }

    .order-line-row > label,
    .order-line-unit-cell {
        display: grid !important;
        min-width: 0 !important;
        align-content: start;
        gap: 1px !important;
    }

    .order-line-row > label:nth-of-type(1) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .order-line-unit-cell {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    .order-line-row > label:nth-of-type(2) {
        grid-column: 3 !important;
        grid-row: 2 !important;
    }

    .order-line-row > label:nth-of-type(3) {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    .order-line-row > label:nth-of-type(4) {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    .order-line-row > label:nth-of-type(5) {
        grid-column: 3 !important;
        grid-row: 3 !important;
    }

    .order-lines-has-markup .order-line-row > label:nth-of-type(4) {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    .order-lines-has-markup .order-line-row > label:nth-of-type(5) {
        grid-column: 3 !important;
        grid-row: 3 !important;
    }

    .order-lines-has-markup .order-line-row > label:nth-of-type(6) {
        grid-column: 1 !important;
        grid-row: 4 !important;
    }

    .order-line-row input,
    .order-line-row select,
    .order-line-unit-label {
        height: auto !important;
        min-height: 16px !important;
        font-size: 11px !important;
        font-weight: 750 !important;
        line-height: 1.15 !important;
    }

    .order-line-row .mobile-field-label,
    .order-line-unit-cell .mobile-field-label {
        font-size: 8px !important;
        line-height: 1.05 !important;
    }

    .order-line-total {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
        padding-top: 2px !important;
        font-size: 15px !important;
        line-height: 1.15 !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    .order-lines-has-markup .order-line-total {
        grid-column: 2 / -1 !important;
        grid-row: 4 !important;
        align-self: end;
        justify-self: stretch;
        text-align: left !important;
    }

    .order-line-row > .row-actions {
        grid-column: -2 / -1 !important;
        grid-row: 1 !important;
        justify-self: end;
        align-self: start;
    }
}

@media (max-width: 820px) {
    .order-line-row,
    .order-lines-has-markup .order-line-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) 24px !important;
        gap: 6px 5px !important;
        padding: 9px 30px 9px 8px !important;
    }

    .order-line-product {
        gap: 7px !important;
    }

    .order-line-thumb {
        width: 30px;
        height: 36px;
    }

    .order-line-title-row {
        gap: 4px;
    }

    .order-line-product strong {
        font-size: 11px !important;
        line-height: 1.15 !important;
    }

    .order-line-product .cell-secondary {
        font-size: 10px !important;
    }

    .order-line-row input,
    .order-line-row select,
    .order-line-unit-label {
        min-height: 15px !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
    }

    .order-line-row .mobile-field-label,
    .order-line-unit-cell .mobile-field-label {
        font-size: 7px !important;
    }

    .order-line-total {
        font-size: 14px !important;
    }
}

@media (max-width: 820px) {
    .order-line-row,
    .order-lines-has-markup .order-line-row {
        grid-template-columns: repeat(4, minmax(0, 1fr)) 24px !important;
        gap: 6px 4px !important;
    }

    .order-line-product {
        grid-column: 1 / -2 !important;
    }

    .order-line-row > label:nth-of-type(1) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .order-line-unit-cell {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    .order-line-row > label:nth-of-type(2) {
        grid-column: 3 !important;
        grid-row: 2 !important;
    }

    .order-line-row > label:nth-of-type(3) {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    .order-line-row > label:nth-of-type(4) {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    .order-line-row > label:nth-of-type(5) {
        grid-column: 3 !important;
        grid-row: 3 !important;
    }

    .order-lines-has-markup .order-line-row > label:nth-of-type(4) {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    .order-lines-has-markup .order-line-row > label:nth-of-type(5) {
        grid-column: 3 !important;
        grid-row: 3 !important;
    }

    .order-lines-has-markup .order-line-row > label:nth-of-type(6) {
        grid-column: 4 !important;
        grid-row: 3 !important;
    }

    .order-line-total,
    .order-lines-has-markup .order-line-total {
        grid-column: 1 / -2 !important;
        grid-row: 4 !important;
        justify-self: stretch !important;
        text-align: right !important;
    }

    .order-line-row > .row-actions {
        grid-column: -2 / -1 !important;
        grid-row: 1 !important;
    }
}

@media (max-width: 820px) {
    .orders-table.subscription-table tbody tr {
        padding: 13px 14px;
    }

    .orders-table.subscription-table td {
        min-height: 30px;
        grid-template-columns: minmax(82px, 30%) minmax(0, 1fr);
        gap: 8px 10px;
    }

    .orders-table.subscription-table td::before {
        min-width: 0;
        line-height: 1.25;
        text-align: left;
        overflow-wrap: anywhere;
    }

    .orders-table.subscription-table td > .cell-stack,
    .orders-table.subscription-table td > .amount-cell,
    .orders-table.subscription-table td > .subscription-service-volume-list {
        min-width: 0;
        grid-column: 2;
    }

    .orders-table.subscription-table td[data-label='Объем'],
    .orders-table.subscription-table td[data-label='Стоимость'],
    .orders-table.subscription-table td[data-label='Период'] {
        overflow-wrap: anywhere;
    }

    .orders-table.subscription-table .subscription-service-volume-list {
        display: grid;
        gap: 2px;
    }

    .orders-table.subscription-table .subscription-service-volume-list span + span::before {
        content: none;
    }

    .orders-table.subscription-table .actions-cell {
        position: static;
        display: block;
        width: 100%;
        padding-top: 8px;
        text-align: left;
    }

    .orders-table.subscription-table .actions-cell::before {
        display: none;
    }

    .orders-table.subscription-table .actions-cell .secondary-button,
    .orders-table.subscription-table .actions-cell .primary-button,
    .orders-table.subscription-table .actions-cell .danger-button,
    .orders-table.subscription-table .actions-cell .subscription-label-button {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        justify-content: center;
    }
}

@media (max-width: 520px) {
    .task-report-summary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .order-line-row,
    .order-lines-has-markup .order-line-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) 32px !important;
        gap: 7px 8px !important;
        padding: 10px 44px 10px 12px !important;
        overflow: visible !important;
    }

    .order-line-index {
        display: none !important;
    }

    .order-line-product {
        grid-column: 1 / -2 !important;
        grid-row: 1 !important;
        gap: 8px !important;
        padding-left: 0 !important;
    }

    .order-line-thumb {
        width: 34px;
        height: 40px;
    }

    .order-line-title-row {
        display: flex;
        min-width: 0;
        align-items: baseline;
        gap: 6px;
    }

    .order-line-mobile-index {
        display: inline;
        flex: 0 0 auto;
        color: var(--color-text);
        font: inherit;
        font-weight: 800;
    }

    .order-line-product strong {
        min-width: 0;
        font-size: 12px !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere;
    }

    .order-line-product .cell-secondary {
        font-size: 11px !important;
        line-height: 1.15 !important;
    }

    .order-line-row > label,
    .order-line-unit-cell {
        display: grid !important;
        min-width: 0 !important;
        align-content: start;
        gap: 1px !important;
    }

    .order-line-row > label:nth-of-type(1) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .order-line-unit-cell {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    .order-line-row > label:nth-of-type(2) {
        grid-column: 3 !important;
        grid-row: 2 !important;
    }

    .order-line-row > label:nth-of-type(3) {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    .order-line-row > label:nth-of-type(4) {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    .order-line-row > label:nth-of-type(5) {
        grid-column: 3 !important;
        grid-row: 3 !important;
    }

    .order-lines-has-markup .order-line-row > label:nth-of-type(4) {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    .order-lines-has-markup .order-line-row > label:nth-of-type(5) {
        grid-column: 3 !important;
        grid-row: 3 !important;
    }

    .order-lines-has-markup .order-line-row > label:nth-of-type(6) {
        grid-column: 1 !important;
        grid-row: 4 !important;
    }

    .order-line-row input,
    .order-line-row select,
    .order-line-unit-label {
        height: auto !important;
        min-height: 16px !important;
        font-size: 11px !important;
        font-weight: 750 !important;
        line-height: 1.15 !important;
    }

    .order-line-row .mobile-field-label,
    .order-line-unit-cell .mobile-field-label {
        font-size: 8px !important;
        line-height: 1.05 !important;
    }

    .order-line-total {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
        padding-top: 2px !important;
        font-size: 15px !important;
        line-height: 1.15 !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    .order-lines-has-markup .order-line-total {
        grid-column: 2 / -1 !important;
        grid-row: 4 !important;
        align-self: end;
        justify-self: stretch;
        text-align: left !important;
    }

    .order-line-row > .row-actions {
        grid-column: -2 / -1 !important;
        grid-row: 1 !important;
        justify-self: end;
        align-self: start;
    }
}

@media (min-width: 821px) {
    .order-lines {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
    }

    .order-lines-head,
    .order-line-row {
        width: max-content !important;
        max-width: none !important;
        min-width: 0 !important;
        grid-template-columns:
            420px
            48px
            48px
            82px
            74px
            82px
            62px
            minmax(112px, 122px)
            28px !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }

    .order-lines-has-markup .order-lines-head,
    .order-lines-has-markup .order-line-row {
        grid-template-columns:
            390px
            48px
            48px
            82px
            70px
            74px
            78px
            62px
            minmax(112px, 122px)
            28px !important;
    }

    .order-line-total,
    .order-lines-has-markup .order-line-total {
        min-width: 0 !important;
        padding-right: 0 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 560px) {
    :root {
        --font-size-page-title: 22px;
        --font-size-dialog-title: 18px;
        --font-size-section-title: 14px;
        --font-size-subsection-title: 13px;
        --font-size-control: 13px;
        --font-size-body: 12px;
        --font-size-body-small: 12px;
        --font-size-label: 11px;
        --font-size-label-small: 10px;
    }

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

    .payment-registry-summary {
        width: 100%;
    }

    .payment-registry-filters .search-field,
    .payment-registry-filters .select-filter,
    .payment-registry-filters .primary-button {
        grid-column: 1 / -1;
    }

    .payment-registry-table tbody tr {
        border-bottom: 0;
    }

    .order-purchase-row {
        padding-right: 42px;
    }

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

    .purchase-payment-item > strong {
        justify-self: start;
    }

    .audit-entry-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .audit-entry-header span {
        white-space: normal;
    }

    .audit-change {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .error-page {
        padding: 36px 20px;
    }

    .error-code {
        font-size: 58px;
    }

    .error-content h1 {
        font-size: 24px;
    }

    .error-content .primary-button {
        width: 100%;
    }

    .auth-page {
        padding: 16px;
    }

    .auth-panel {
        padding: 26px 20px;
    }

    .auth-brand {
        margin-bottom: 24px;
    }

    .auth-brand-logo {
        width: min(240px, 100%);
    }

    .brand-name {
        font-size: 15px;
    }

    .app-brand-logo {
        width: 170px;
        max-width: 50vw;
    }

    .page-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .page-heading h1 {
        font-size: var(--font-size-page-title);
    }

    .document-template-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
    }

    .document-template-meta {
        grid-column: 1;
        grid-row: 2;
        justify-items: start;
    }

    .document-template-row .secondary-button {
        grid-column: 2;
        grid-row: 1 / 3;
    }

    .order-tabs {
        padding: 8px;
        gap: 6px;
    }

    .order-tab {
        min-height: 36px;
        padding: 0 8px;
        font-size: 10px;
        line-height: 1.15;
    }

    .discount-line-option {
        grid-template-columns: 20px minmax(0, 1fr);
        align-items: start;
    }

    .discount-line-option b {
        grid-column: 2;
        justify-self: start;
    }

    .order-discount-lines-modal-window .modal-header,
    .order-discount-lines-modal-window .modal-body,
    .order-discount-lines-modal-window .modal-actions {
        padding-right: 14px;
        padding-left: 14px;
    }

    .discount-lines-toolbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .discount-lines-toolbar .secondary-button {
        width: 100%;
    }

    .document-editor-header {
        position: static;
        align-items: stretch;
        margin-top: 0;
        flex-direction: column;
        background: var(--color-background);
    }

    .document-editor-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .document-editor-sidebar {
        grid-template-columns: 1fr;
    }

    .document-danger-panel {
        grid-column: auto;
    }

    .document-canvas-wrap {
        min-height: 560px;
        padding: 12px;
    }

    .document-canvas {
        min-height: 720px;
    }

    .document-source-modal-window {
        width: 100%;
        max-height: 92dvh;
    }

    .document-source-body {
        height: 58dvh;
        padding: 14px;
    }

    .document-source-tabs {
        width: 100%;
    }

    .document-source-tabs button {
        flex: 1 1 0;
        padding: 0 10px;
    }

    .document-source-modal-window .modal-actions {
        padding: 10px 14px;
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .document-source-modal-window .modal-actions .secondary-button,
    .document-source-modal-window .modal-actions .primary-button {
        width: 100%;
    }

    .order-editor-heading h1 {
        font-size: var(--font-size-page-title);
        line-height: 1.12;
    }

    .back-link span:last-child {
        display: none;
    }

    .order-editor-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .order-print-menu,
    .order-print-button,
    .order-command-menu,
    .order-command-button,
    .order-chat-open-button {
        width: 100%;
    }

    .order-print-button,
    .order-command-button,
    .order-chat-open-button {
        min-width: 0;
        min-height: 44px;
        padding-inline: 8px;
        justify-content: center;
        gap: 6px;
        white-space: nowrap;
        font-size: 12px;
    }

    .order-chat-open-button b {
        min-width: 17px;
        height: 17px;
        padding-inline: 4px;
        font-size: 8px;
    }

    .order-field-grid,
    .measurement-fields {
        grid-template-columns: 1fr;
    }

    .order-field-grid .form-field-wide,
    .measurement-fields .form-field-wide {
        grid-column: auto;
    }

    .order-summary-list > div {
        min-height: 38px;
        padding: 7px 0;
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 8px;
    }

    .customer-phone-line {
        gap: 6px;
    }

    .order-event-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .order-line-product {
        grid-column: 1 / -1;
    }

    .order-total-bar {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .order-discount-form {
        display: grid;
        margin: 0;
        grid-template-columns: 1fr 1fr;
    }

    .order-adjustments-summary {
        margin: 12px;
        grid-template-columns: 1fr;
    }

    .order-adjustment-card {
        align-items: stretch;
        flex-direction: column;
    }

    .order-adjustment-card .secondary-button {
        width: 100%;
    }

    .order-panel-discount {
        margin: 12px;
    }

    .order-discount-caption {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .order-discount-form select,
    .order-discount-form input {
        width: 100%;
    }

    .order-discount-form button {
        grid-column: 1 / -1;
    }

    .order-adjustment-form-grid {
        grid-template-columns: 1fr;
    }

    .order-grand-total {
        padding-top: 12px;
        padding-left: 0;
        border-top: 1px solid var(--color-border);
        border-left: 0;
    }

    .order-schedule-item {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .order-schedule-actions {
        justify-content: flex-start;
    }

    .order-schedule-item form {
        justify-self: start;
    }

    .primary-button {
        width: 100%;
        justify-content: center;
    }

    .chat-deleted-modal-window {
        width: min(100%, 420px);
    }

    .chat-deleted-modal-window .modal-header {
        padding: 14px 15px;
    }

    .chat-deleted-modal-window .modal-body {
        padding: 14px 15px;
    }

    .chat-deleted-modal-window .modal-actions {
        padding: 10px 15px;
    }

    .chat-deleted-modal-window .modal-actions .secondary-button {
        width: auto;
    }

    .customer-picker {
        grid-template-columns: 1fr;
    }

    .customer-picker-buttons {
        justify-content: flex-end;
    }

    .quick-customer-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .workspace-panel {
        min-height: 360px;
    }

    .import-settings-table {
        min-width: 0;
    }

    .smtp-settings-table,
    .messenger-connections-table,
    .sales-channel-integrations-table,
    .ai-settings-grid .orders-table {
        min-width: 0;
    }

    .empty-state {
        min-height: 358px;
    }

    .grid-filters {
        grid-template-columns: 1fr 40px;
    }

    .nomenclature-filters {
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .nomenclature-filters .select-filter,
    .nomenclature-filters select {
        width: 100%;
        min-width: 0;
    }

    .grid-filters .filter-button:nth-child(2) {
        display: none;
    }

    .orders-filter-toolbar .grid-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .orders-filter-toolbar .grid-filters .filter-button:nth-child(2) {
        display: inline-flex;
    }

    .orders-filter-toolbar .filter-reset-button {
        min-height: 40px;
    }


    .orders-table td {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .modal-layer {
        padding: 0;
        align-items: flex-end;
    }

    .modal-window {
        width: 100%;
        max-height: 94dvh;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding-right: 18px;
        padding-left: 18px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .order-line-modal-window {
        max-height: 94dvh;
        overflow: hidden;
    }

    .order-line-modal-window .modal-form {
        min-height: 0;
        overflow: hidden;
    }

    .order-line-modal-window .modal-body {
        min-height: 0;
        overflow-y: auto;
        padding-bottom: 18px;
    }

    .order-line-modal-window .modal-footer {
        position: sticky;
        bottom: 0;
        z-index: 2;
        flex: 0 0 auto;
        border-top: 1px solid var(--color-border);
        background: var(--color-surface);
        box-shadow: 0 -10px 24px rgb(25 30 50 / 8%);
    }

    .nomenclature-picker-header {
        grid-template-columns: 1fr;
    }

    .nomenclature-picker-actions {
        align-items: stretch;
    }

    .nomenclature-picker-actions .icon-text-button {
        flex: 1 1 0;
    }

    .order-line-picker-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: stretch;
    }

    .order-line-picker-tabs {
        width: 100%;
    }

    .order-line-picker-tabs button {
        flex: 1 1 0;
    }

    .order-line-picker-create-action {
        min-width: 46px;
        padding-inline: 13px;
    }

    .order-line-picker-item-row {
        min-height: 68px;
        grid-template-columns: 48px minmax(0, 1fr) auto;
    }

    .order-line-picker-item-row.is-action-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .order-line-picker-item-row .order-line-picker-select-area {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .order-line-picker-thumb {
        width: 48px;
        height: 48px;
    }

    .order-line-picker-price {
        justify-self: end;
    }

    .order-line-picker-side {
        display: grid;
        justify-items: end;
        gap: 6px;
    }

    .order-line-picker-model-side {
        display: grid;
        justify-items: end;
        gap: 4px;
    }

    .order-line-picker-collapse-icon {
        width: 16px;
        height: 16px;
    }

    .order-line-picker-related,
    .order-line-picker-variants {
        padding-left: 58px;
        padding-right: 10px;
    }

    .order-line-picker-related-folder {
        min-height: 32px;
        padding: 6px 8px;
    }

    .order-line-picker-item-actions button {
        width: 30px;
        height: 30px;
    }

    .form-field-wide {
        grid-column: auto;
    }

    .modal-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .modal-footer .primary-button,
    .modal-footer .secondary-button {
        width: 100%;
    }

    .blocked-hint {
        display: none;
    }

    .user-profile-form {
        display: flex;
        justify-content: center;
    }

    .section-heading-inline {
        flex-direction: column;
    }
}

html body .order-ai-widget .order-ai-form button.order-ai-send-button,
html body .order-ai-widget .order-ai-form button.order-ai-send-button:hover,
html body .order-ai-widget .order-ai-form button.order-ai-send-button:focus,
html body .order-ai-widget .order-ai-form button.order-ai-send-button:focus-visible,
html body .order-ai-widget .order-ai-form button.order-ai-send-button:active,
html body .order-ai-widget .order-ai-form button.order-ai-send-button:disabled,
html body .order-ai-widget .order-ai-form button.order-ai-send-button.is-loading {
    width: 36px !important;
    height: 36px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #ee4e2a !important;
    background-color: #ee4e2a !important;
    color: #fff !important;
    opacity: 1 !important;
    box-shadow: 0 10px 22px rgb(238 78 42 / 24%) !important;
    -webkit-appearance: none;
    appearance: none;
}

html body .order-ai-widget .order-ai-form button.order-ai-send-button:hover,
html body .order-ai-widget .order-ai-form button.order-ai-send-button:focus-visible,
html body .order-ai-widget .order-ai-form button.order-ai-send-button:active,
html body .order-ai-widget .order-ai-form button.order-ai-send-button.is-loading {
    background: #d94120 !important;
    background-color: #d94120 !important;
    box-shadow: 0 12px 26px rgb(217 65 32 / 28%) !important;
}

html body .order-ai-widget .order-ai-form button.order-ai-send-button svg {
    width: 18px !important;
    height: 18px !important;
    color: #fff !important;
    stroke: #fff !important;
}

.miniapp-shell {
    display: grid;
    width: min(100%, 640px);
    min-height: 100dvh;
    margin: 0 auto;
    padding: calc(8px + env(safe-area-inset-top)) 0 env(safe-area-inset-bottom);
    align-content: start;
    gap: 0;
    background: var(--tg-theme-bg-color, #fff);
}

.miniapp-body.is-max .miniapp-shell {
    padding-top: 0;
}

.miniapp-centered {
    align-content: center;
}

.miniapp-header {
    display: flex;
    min-height: 52px;
    padding: 0 16px;
    border-bottom: 1px solid var(--tg-theme-section-separator-color, #e8edf3);
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--tg-theme-bg-color, #fff);
}

.miniapp-eyebrow {
    display: block;
    margin-bottom: 1px;
    color: var(--tg-theme-hint-color, #8a96a3);
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
}

.miniapp-header h1,
.miniapp-empty-card h1 {
    margin: 0;
    color: var(--tg-theme-text-color, #17212b);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
}

.miniapp-unread-total {
    display: inline-grid;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--tg-theme-button-color, #2aabee);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    place-items: center;
}

.miniapp-chat-list {
    display: grid;
    gap: 0;
}

.miniapp-chat-card,
.miniapp-empty-card {
    border: 0;
    border-radius: 0;
    background: var(--tg-theme-bg-color, #fff);
    box-shadow: none;
}

.miniapp-chat-card {
    position: relative;
    display: grid;
    min-height: 72px;
    padding: 9px 14px;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

.miniapp-chat-card::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 75px;
    height: 1px;
    background: var(--tg-theme-section-separator-color, #edf1f5);
    content: "";
}

.miniapp-chat-card:hover {
    background: var(--tg-theme-secondary-bg-color, #f4f7fb);
}

.miniapp-chat-card:active {
    transform: none;
    background: #e8f3fb;
}

.miniapp-chat-card.is-new-message {
    animation: miniapp-new-message 1.8s ease;
}

@keyframes miniapp-new-message {
    0%,
    100% {
        background: var(--tg-theme-bg-color, #fff);
    }

    18%,
    72% {
        background: color-mix(in srgb, var(--tg-theme-button-color, #2aabee) 13%, var(--tg-theme-bg-color, #fff));
    }
}

.miniapp-chat-avatar {
    display: grid;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #65b9f4, #2b8bdc);
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    place-items: center;
}

.miniapp-chat-card-main {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.miniapp-chat-card-main strong {
    overflow: hidden;
    color: var(--tg-theme-text-color, #17212b);
    font-size: 15px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-chat-card-main small,
.miniapp-chat-card-main span,
.miniapp-chat-card-meta time {
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 13px;
    line-height: 1.35;
}

.miniapp-chat-card-main span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.miniapp-chat-card-meta {
    display: grid;
    justify-items: end;
    gap: 7px;
}

.miniapp-chat-card-meta b {
    display: inline-grid;
    min-width: 21px;
    height: 21px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--tg-theme-button-color, #2aabee);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    place-items: center;
}

.miniapp-empty-card {
    display: grid;
    margin: 18px 14px;
    padding: 24px 18px;
    border-radius: 14px;
    gap: 8px;
    background: var(--tg-theme-secondary-bg-color, #f4f7fb);
    text-align: center;
}

.miniapp-empty-card p {
    margin: 0;
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 13px;
    line-height: 1.5;
}

.miniapp-chat-page {
    width: min(100%, 640px);
    height: 100dvh;
    margin: 0 auto;
    background: var(--tg-theme-secondary-bg-color, #dfe8ef);
}

.miniapp-chat-frame {
    display: grid;
    height: 100dvh;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    background: var(--tg-theme-secondary-bg-color, #dfe8ef);
}

.miniapp-chat-header {
    display: grid;
    min-height: calc(52px + env(safe-area-inset-top));
    padding: calc(7px + env(safe-area-inset-top)) 10px 7px;
    border-bottom: 1px solid var(--tg-theme-section-separator-color, #e4e9ef);
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 6px;
    background: var(--tg-theme-bg-color, #fff);
}

.miniapp-body.is-max .miniapp-chat-header {
    min-height: 52px;
    padding-top: 7px;
}

.miniapp-back-link {
    position: relative;
    display: grid;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: transparent;
    place-items: center;
}

.miniapp-back-link:active {
    background: var(--tg-theme-secondary-bg-color, #eef3f7);
}

.miniapp-back-link span {
    width: 11px;
    height: 11px;
    border-bottom: 2px solid var(--tg-theme-button-color, #2aabee);
    border-left: 2px solid var(--tg-theme-button-color, #2aabee);
    transform: translateX(2px) rotate(45deg);
}

.miniapp-open-order-link {
    display: grid;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--tg-theme-button-color, #2aabee);
    place-items: center;
}

.miniapp-open-order-link:active {
    background: var(--tg-theme-secondary-bg-color, #eef3f7);
}

.miniapp-open-order-link svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.15;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.miniapp-chat-header strong,
.miniapp-chat-header span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-chat-header strong {
    color: var(--tg-theme-text-color, #17212b);
    font-size: 16px;
    font-weight: 700;
}

.miniapp-chat-header span {
    margin-top: 1px;
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 12px;
    font-weight: 500;
}

.miniapp-channel-list {
    display: flex;
    min-height: 46px;
    padding: 0 6px;
    border-bottom: 1px solid var(--tg-theme-section-separator-color, #e4e9ef);
    gap: 2px;
    overflow-x: auto;
    background: var(--tg-theme-bg-color, #fff);
}

.miniapp-channel-list .order-chat-channel {
    display: inline-flex;
    min-width: 92px;
    min-height: 45px;
    padding: 0 10px;
    border: 0;
    border-radius: 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    box-shadow: none;
    color: var(--tg-theme-hint-color, #7d8b99);
}

.miniapp-channel-list .order-chat-channel:hover:not(:disabled),
.miniapp-channel-list .order-chat-channel.is-active {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.miniapp-channel-list .order-chat-channel.is-active {
    color: var(--tg-theme-button-color, #2aabee);
}

.miniapp-channel-list .order-chat-channel::after {
    position: absolute;
    right: 10px;
    bottom: 0;
    left: 10px;
    height: 2px;
    border-radius: 999px 999px 0 0;
    background: transparent;
    content: "";
}

.miniapp-channel-list .order-chat-channel.is-active::after {
    background: var(--tg-theme-button-color, #2aabee);
}

.miniapp-channel-list .order-chat-channel span {
    font-size: 13px;
    font-weight: 700;
}

.miniapp-channel-list .order-chat-channel b {
    position: static;
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    background: #e7edf3;
    color: #768493;
    font-size: 11px;
    font-weight: 700;
    transform: none;
}

.miniapp-channel-list .order-chat-channel small {
    display: none;
}

.miniapp-message-list {
    max-height: none;
    padding: 10px 8px 12px;
    overflow-y: auto;
    background:
        radial-gradient(circle at 20% 10%, rgb(255 255 255 / 22%) 0 2px, transparent 3px),
        radial-gradient(circle at 80% 30%, rgb(255 255 255 / 16%) 0 2px, transparent 3px),
        var(--tg-theme-secondary-bg-color, #dfe8ef);
    background-size: 92px 92px, 116px 116px, auto;
}

.miniapp-message-list .order-chat-message {
    display: flex;
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 2px 0;
    touch-action: pan-y;
}

.miniapp-message-list .order-chat-message.is-menu-open,
.miniapp-message-list .order-chat-message:has(.order-chat-message-menu[open]) {
    z-index: 30;
}

.miniapp-message-list .order-chat-message.is-incoming {
    justify-content: flex-start !important;
}

.miniapp-message-list .order-chat-message.is-outgoing {
    justify-content: flex-end !important;
}

.miniapp-message-list .order-chat-bubble {
    width: fit-content !important;
    max-width: min(500px, 78%) !important;
    padding: 6px 8px 5px;
    border: 0;
    border-radius: 15px;
    box-shadow: 0 1px 1px rgb(15 35 55 / 8%);
    transition: transform 140ms ease;
    will-change: transform;
    overflow: visible;
}

.miniapp-message-list .order-chat-message.is-swipe-reply .order-chat-bubble {
    transform: translateX(34px);
}

.miniapp-message-list .order-chat-message.is-incoming .order-chat-bubble {
    background: var(--tg-theme-bg-color, #fff);
    border-bottom-left-radius: 5px;
}

.miniapp-message-list .order-chat-message.is-outgoing .order-chat-bubble {
    background: #d9fdd3;
    border-bottom-right-radius: 5px;
}

.miniapp-message-list .order-chat-bubble p {
    margin: 3px 0 0;
    color: var(--tg-theme-text-color, #17212b);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.36;
}

.miniapp-message-list .order-chat-reactions {
    margin-top: 4px;
    justify-content: flex-end;
}

.miniapp-message-list .order-chat-reactions span {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border: 0;
    background: rgb(255 255 255 / 76%);
    box-shadow: 0 1px 4px rgb(15 23 42 / 12%);
    font-size: 14px;
}

.miniapp-message-list .order-chat-meta {
    min-height: 18px;
    justify-content: flex-end;
    gap: 5px;
    overflow: visible;
}

.miniapp-message-list .order-chat-meta span:not(.status-badge),
.miniapp-message-list .order-chat-footer {
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 11px;
    font-weight: 500;
}

.miniapp-message-list .order-chat-footer {
    margin-top: 4px;
}

.miniapp-message-list .order-chat-footer span:first-child {
    display: none;
}

.miniapp-message-list .order-chat-status-icon {
    width: 18px;
    height: 12px;
}

.miniapp-message-list .order-chat-status-icon.is-stored,
.miniapp-message-list .order-chat-status-icon.is-sent,
.miniapp-message-list .order-chat-status-icon.is-stored .order-chat-status-checks,
.miniapp-message-list .order-chat-status-icon.is-sent .order-chat-status-checks {
    color: #7eb7df !important;
}

.miniapp-message-list .order-chat-status-icon.is-delivered,
.miniapp-message-list .order-chat-status-icon.is-delivered .order-chat-status-checks {
    color: #4fb3f6 !important;
}

.miniapp-message-list .order-chat-status-icon.is-read,
.miniapp-message-list .order-chat-status-icon.is-read .order-chat-status-checks {
    color: #4fc3ff !important;
}

.miniapp-message-list .order-chat-status-icon.is-failed,
.miniapp-message-list .order-chat-status-icon.is-failed .order-chat-status-error {
    color: #ff6b5d !important;
}

.miniapp-message-list .order-chat-message-menu .row-menu-button {
    width: 24px;
    height: 24px;
    opacity: .62;
}

.miniapp-message-list .order-chat-message-menu {
    position: relative;
    z-index: 5;
}

.miniapp-message-list .order-chat-message-menu .row-actions-menu {
    top: calc(100% + 4px);
    width: max-content;
    min-width: 148px;
    max-width: min(220px, calc(100vw - 24px));
    border-color: var(--tg-theme-section-separator-color, #dbe3ec);
    background: var(--tg-theme-bg-color, #fff);
    box-shadow: 0 10px 28px rgb(15 23 42 / 18%);
    white-space: normal;
    z-index: 80;
}

.miniapp-message-list .order-chat-message.is-incoming .order-chat-message-menu .row-actions-menu {
    right: auto;
    left: 0;
}

.miniapp-message-list .order-chat-message.is-outgoing .order-chat-message-menu .row-actions-menu {
    right: 0;
    left: auto;
}

.miniapp-message-list .order-chat-message-menu .row-actions-menu button {
    min-height: 34px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.2;
}

.miniapp-message-list .order-chat-reply-preview {
    margin-top: 4px;
    padding: 5px 7px;
    border-left-color: var(--tg-theme-button-color, #2aabee);
    border-radius: 7px;
    background: rgb(0 0 0 / 5%);
    max-width: 100%;
}

.miniapp-message-list .order-chat-reply-preview span,
.miniapp-chat-composer .order-chat-reply-composer span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
}

.miniapp-chat-composer .order-chat-reply-composer {
    min-width: 0;
}

.miniapp-chat-composer .order-chat-reply-composer > div {
    min-width: 0;
}

.miniapp-message-list .order-chat-attachment-image img {
    max-height: 260px;
    border-radius: 11px;
}

.miniapp-message-list .order-chat-attachment-video {
    width: min(280px, 100%);
    max-height: 260px;
    border-radius: 11px;
}

.miniapp-message-list .order-chat-attachment-audio {
    width: min(260px, 100%);
    margin-top: 6px;
    padding: 8px;
    border: 0;
    border-radius: 11px;
    background: rgb(0 0 0 / 5%);
}

.miniapp-message-list .order-chat-attachment-audio audio {
    height: 32px;
}

.miniapp-message-list .order-block-empty {
    margin: auto;
    padding: 10px 14px;
    border: 0;
    border-radius: 999px;
    background: rgb(0 0 0 / 18%);
    color: #fff;
}

.miniapp-message-list .order-block-empty span {
    color: rgb(255 255 255 / 82%);
}

.miniapp-chat-composer {
    display: grid;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--tg-theme-section-separator-color, #e4e9ef);
    background: var(--tg-theme-bg-color, #fff);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "reply"
        "file"
        "status"
        "ai"
        "input";
    align-items: center;
    gap: 5px;
}

.miniapp-chat-input-shell {
    display: grid;
    min-width: 0;
    min-height: 42px;
    padding: 3px 4px 3px 14px;
    border: 1px solid var(--tg-theme-section-separator-color, #dbe3ec);
    border-radius: 22px;
    grid-area: input;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 4px;
    background: var(--tg-theme-bg-color, #fff);
}

.miniapp-chat-input-shell:focus-within {
    border-color: var(--tg-theme-button-color, #2aabee);
}

.miniapp-chat-composer textarea {
    height: 34px;
    min-height: 34px;
    max-height: 88px;
    padding: 6px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--tg-theme-text-color, #17212b);
    font-size: 15px;
    line-height: 22px;
    overflow-y: auto;
}

.miniapp-chat-composer textarea::placeholder {
    color: var(--tg-theme-hint-color, #9aa3ad);
    opacity: 1;
}

.miniapp-chat-composer textarea:focus {
    border-color: transparent;
    box-shadow: none;
}

.miniapp-selected-file {
    display: inline-flex;
    min-width: 0;
    max-width: min(100%, 280px);
    height: 30px;
    padding: 0 4px 0 9px;
    border: 1px solid rgb(42 171 238 / 18%);
    border-radius: 999px;
    align-items: center;
    gap: 4px;
    grid-area: file;
    justify-self: start;
    background: color-mix(in srgb, var(--tg-theme-button-color, #2aabee) 10%, var(--tg-theme-secondary-bg-color, #eef3f7));
    color: var(--tg-theme-text-color, #17212b);
}

.miniapp-selected-file[hidden] {
    display: none !important;
}

.miniapp-selected-file > span {
    overflow: hidden;
    min-width: 0;
    color: inherit;
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-selected-file button {
    position: relative;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.miniapp-selected-file button span {
    position: absolute;
    top: 10px;
    left: 6px;
    width: 10px;
    height: 1.5px;
    border-radius: 999px;
    background: var(--tg-theme-hint-color, #8a96a3);
}

.miniapp-selected-file button span:first-child {
    transform: rotate(45deg);
}

.miniapp-selected-file button span:last-child {
    transform: rotate(-45deg);
}

.miniapp-chat-send-status {
    margin: 0 4px;
    grid-area: status;
    color: var(--tg-theme-hint-color, #7d8b99);
}

.miniapp-chat-send-status span {
    border-color: var(--tg-theme-section-separator-color, #dbe3ec);
    border-top-color: var(--tg-theme-button-color, #2aabee);
}

.miniapp-chat-send-status em {
    width: 74px;
    background: var(--tg-theme-secondary-bg-color, #eef3f7);
}

.miniapp-chat-send-status em::after {
    background: var(--tg-theme-button-color, #2aabee);
}

.miniapp-chat-ai-row {
    display: grid;
    grid-area: ai;
    gap: 6px;
}

.miniapp-chat-suggest-button {
    width: fit-content;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--tg-theme-section-separator-color, #dbe3ec);
    border-radius: 999px;
    background: var(--tg-theme-secondary-bg-color, #eef3f7);
    color: var(--tg-theme-button-color, #2aabee);
    font-size: 12px;
    font-weight: 700;
}

.miniapp-chat-suggest-button:disabled {
    cursor: wait;
    opacity: .64;
}

.miniapp-chat-unlink-button {
    width: fit-content;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid rgb(239 68 68 / 32%);
    border-radius: 999px;
    background: rgb(239 68 68 / 8%);
    color: #d92d20;
    font-size: 12px;
    font-weight: 700;
}

.miniapp-chat-suggestion {
    display: grid;
    padding: 9px 10px;
    border: 1px solid var(--tg-theme-section-separator-color, #dbe3ec);
    border-left: 3px solid var(--tg-theme-button-color, #2aabee);
    border-radius: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    background: var(--tg-theme-bg-color, #fff);
}

.miniapp-chat-suggestion[hidden] {
    display: none !important;
}

.miniapp-chat-suggestion span {
    display: block;
    margin-bottom: 2px;
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.miniapp-chat-suggestion p {
    margin: 0;
    color: var(--tg-theme-text-color, #17212b);
    font-size: 13px;
    line-height: 1.35;
}

.miniapp-chat-suggestion > div:last-child {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.miniapp-chat-suggestion button {
    min-height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    color: var(--tg-theme-button-color, #2aabee);
    font-size: 12px;
    font-weight: 700;
}

.miniapp-chat-suggestion button[data-chat-suggestion-close] {
    position: relative;
    width: 28px;
    padding: 0;
}

.miniapp-chat-suggestion button[data-chat-suggestion-close] span {
    position: absolute;
    top: 13px;
    left: 8px;
    width: 12px;
    height: 1.5px;
    margin: 0;
    border-radius: 999px;
    background: var(--tg-theme-hint-color, #7d8b99);
}

.miniapp-chat-suggestion button[data-chat-suggestion-close] span:first-child {
    transform: rotate(45deg);
}

.miniapp-chat-suggestion button[data-chat-suggestion-close] span:last-child {
    transform: rotate(-45deg);
}

.miniapp-chat-composer .order-chat-reply-composer {
    grid-area: reply;
    border-left-color: var(--tg-theme-button-color, #2aabee);
    background: var(--tg-theme-secondary-bg-color, #eef3f7);
}

.miniapp-chat-composer .order-chat-composer-actions {
    display: flex;
    align-items: center;
    gap: 3px;
}

.miniapp-chat-composer .order-chat-file-control {
    min-height: 34px;
}

.miniapp-chat-composer .order-chat-file-control span {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--tg-theme-text-color, #17212b);
    box-shadow: none;
}

.miniapp-chat-composer .order-chat-file-control span b {
    display: none;
}

.miniapp-chat-composer .order-chat-file-control img {
    width: 20px;
    height: 20px;
    filter: var(--miniapp-file-icon-filter, brightness(0) saturate(100%) invert(12%) sepia(22%) saturate(674%) hue-rotate(171deg) brightness(92%) contrast(91%));
}

.miniapp-chat-composer .order-chat-send {
    position: relative;
    display: grid;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 50%;
    background: var(--tg-theme-button-color, #2aabee);
    color: #fff;
    place-items: center;
    box-shadow: none;
}

.miniapp-chat-composer .order-chat-send:hover,
.miniapp-chat-composer .order-chat-send:focus-visible {
    background: var(--tg-theme-button-color, #2aabee);
    opacity: .92;
}

.miniapp-chat-composer .order-chat-send:disabled,
.miniapp-chat-composer .order-chat-send:disabled:hover,
.miniapp-chat-composer .order-chat-send:disabled:focus-visible {
    background: var(--tg-theme-button-color, #2aabee);
    color: #fff;
    cursor: wait;
    opacity: .82;
    box-shadow: none;
}

.miniapp-chat-composer .order-chat-send svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.miniapp-chat-composer .order-chat-send.is-sending svg {
    animation: miniapp-send-pulse 760ms ease-in-out infinite alternate;
}

@keyframes miniapp-send-pulse {
    from {
        opacity: .58;
        transform: translateY(1px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.miniapp-chat-composer .order-chat-send span {
    position: absolute;
    width: 16px;
    height: 16px;
    overflow: hidden;
    color: transparent;
    font-size: 0;
}

.miniapp-chat-edit-window {
    width: min(100% - 24px, 480px);
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    background: var(--tg-theme-bg-color, #fff);
    box-shadow: 0 18px 48px rgb(15 23 42 / 22%);
}

.miniapp-chat-edit-window form {
    display: grid;
}

.miniapp-chat-edit-header {
    display: grid;
    min-height: 48px;
    padding: 0 10px;
    border-bottom: 1px solid var(--tg-theme-section-separator-color, #dbe3ec);
    grid-template-columns: 82px minmax(0, 1fr) 82px;
    align-items: center;
    background: var(--tg-theme-bg-color, #fff);
}

.miniapp-chat-edit-header h2 {
    margin: 0;
    color: var(--tg-theme-text-color, #17212b);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

.miniapp-chat-edit-action {
    min-height: 36px;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: var(--tg-theme-button-color, #2aabee);
    font-size: 15px;
    font-weight: 600;
}

.miniapp-chat-edit-action:first-child {
    justify-self: start;
}

.miniapp-chat-edit-action.is-primary {
    justify-self: end;
    font-weight: 700;
}

.miniapp-chat-edit-body {
    padding: 12px;
    background: var(--tg-theme-bg-color, #fff);
}

.miniapp-chat-edit-textarea {
    width: 100%;
    min-height: 124px;
    padding: 10px 12px;
    border: 0;
    border-radius: 14px;
    outline: none;
    background: var(--tg-theme-secondary-bg-color, #eef3f7);
    color: var(--tg-theme-text-color, #17212b);
    font-size: 15px;
    line-height: 1.4;
    resize: vertical;
}

@media (max-width: 560px) {
    .miniapp-shell {
        width: 100%;
    }

    .miniapp-chat-page {
        width: 100%;
    }

    .miniapp-message-list .order-chat-message.is-incoming {
        justify-content: flex-start !important;
    }

    .miniapp-message-list .order-chat-message.is-outgoing {
        justify-content: flex-end !important;
    }

    .miniapp-message-list .order-chat-bubble {
        width: fit-content !important;
        max-width: 86% !important;
    }

    .miniapp-chat-composer .order-chat-composer-actions {
        display: flex;
        width: auto;
        min-width: max-content;
        align-items: center;
    }

    .miniapp-chat-composer textarea {
        min-width: 0;
    }
}

@media (prefers-color-scheme: dark) {
    .order-chat-attachment-audio {
        border-color: rgb(255 255 255 / 14%);
        background: rgb(255 255 255 / 8%);
    }

    .order-chat-attachment-audio strong {
        color: #f8fafc;
    }

    .order-chat-attachment-audio small {
        color: #cbd5e1;
    }

    .miniapp-body {
        --miniapp-file-icon-filter: brightness(0) saturate(100%) invert(89%) sepia(10%) saturate(277%) hue-rotate(174deg) brightness(99%) contrast(91%);
        background: var(--tg-theme-bg-color, #17212b);
        color: var(--tg-theme-text-color, #f5f7fb);
    }

    .miniapp-chat-page,
    .miniapp-chat-frame {
        background: var(--tg-theme-secondary-bg-color, #0f1a23);
    }

    .miniapp-chat-header,
    .miniapp-channel-list,
    .miniapp-chat-composer {
        border-color: var(--tg-theme-section-separator-color, #111a22);
        background: var(--tg-theme-bg-color, #17212b);
    }

    .miniapp-channel-list .order-chat-channel b {
        background: #d8e1ea;
        color: #52606d;
    }

    .miniapp-message-list {
        background:
            radial-gradient(circle at 20% 10%, rgb(255 255 255 / 14%) 0 2px, transparent 3px),
            radial-gradient(circle at 80% 30%, rgb(255 255 255 / 11%) 0 2px, transparent 3px),
            var(--tg-theme-secondary-bg-color, #0f1a23);
        background-size: 92px 92px, 116px 116px, auto;
    }

    .miniapp-message-list .order-chat-message.is-incoming .order-chat-bubble {
        background: #243241;
    }

    .miniapp-message-list .order-chat-message.is-outgoing .order-chat-bubble {
        background: #2b5278;
    }

    .miniapp-message-list .order-chat-bubble p {
        color: var(--tg-theme-text-color, #f5f7fb);
    }

    .miniapp-message-list .order-chat-reply-preview {
        border-left-color: #4fb3f6;
        background: rgb(6 14 21 / 28%);
    }

    .miniapp-message-list .order-chat-reply-preview strong {
        color: #64b5f6;
    }

    .miniapp-message-list .order-chat-reply-preview span {
        color: #d3dde6;
    }

    .miniapp-message-list .order-chat-message-menu .row-actions-menu,
    .miniapp-chat-suggestion,
    .miniapp-chat-edit-window,
    .miniapp-chat-edit-header,
    .miniapp-chat-edit-body {
        border-color: #263646;
        background: #17212b;
    }

    .miniapp-chat-suggest-button {
        border-color: #263646;
        background: #172431;
    }

    .miniapp-chat-suggestion p,
    .miniapp-chat-edit-header h2 {
        color: var(--tg-theme-text-color, #f5f7fb);
    }

    .miniapp-chat-edit-textarea {
        background: #1f2c37;
        color: var(--tg-theme-text-color, #f5f7fb);
    }

    .miniapp-message-list .order-chat-attachment-audio {
        background: rgb(6 14 21 / 24%);
    }

    .miniapp-chat-composer .order-chat-reply-composer {
        border-left-color: #4fb3f6;
        background: #172431;
    }

    .miniapp-chat-composer .order-chat-reply-composer strong {
        color: #64b5f6;
    }

    .miniapp-chat-composer .order-chat-reply-composer span {
        color: #d3dde6;
    }

    .miniapp-chat-composer .order-chat-reply-composer button:hover {
        background: rgb(255 255 255 / 8%);
    }

    .miniapp-chat-send-status span {
        border-color: #344759;
        border-top-color: var(--tg-theme-button-color, #4fb3f6);
    }

    .miniapp-chat-send-status em {
        background: #172431;
    }

    .miniapp-chat-input-shell {
        border-color: #101820;
        background: #1f2c37;
    }

    .miniapp-selected-file {
        border-color: rgb(79 179 246 / 24%);
        background: #172431;
        color: #e8eef5;
    }

    .miniapp-selected-file button span {
        background: #9fb0bf;
    }

    .miniapp-chat-composer textarea {
        color: var(--tg-theme-text-color, #f5f7fb);
    }

    .miniapp-chat-composer textarea::placeholder {
        color: var(--tg-theme-hint-color, #7f8b96);
    }
}

.miniapp-body.is-telegram-dark {
    --miniapp-file-icon-filter: brightness(0) saturate(100%) invert(89%) sepia(10%) saturate(277%) hue-rotate(174deg) brightness(99%) contrast(91%);
    background: var(--tg-theme-bg-color, #17212b);
    color: var(--tg-theme-text-color, #f5f7fb);
}

.miniapp-body.is-telegram-dark .miniapp-chat-page,
.miniapp-body.is-telegram-dark .miniapp-chat-frame {
    background: var(--tg-theme-secondary-bg-color, #0f1a23);
}

.miniapp-body.is-telegram-dark .miniapp-chat-header,
.miniapp-body.is-telegram-dark .miniapp-channel-list,
.miniapp-body.is-telegram-dark .miniapp-chat-composer {
    border-color: var(--tg-theme-section-separator-color, #111a22);
    background: var(--tg-theme-bg-color, #17212b);
}

.miniapp-body.is-telegram-dark .miniapp-channel-list .order-chat-channel b {
    background: #d8e1ea;
    color: #52606d;
}

.miniapp-body.is-telegram-dark .miniapp-message-list {
    background:
        radial-gradient(circle at 20% 10%, rgb(255 255 255 / 14%) 0 2px, transparent 3px),
        radial-gradient(circle at 80% 30%, rgb(255 255 255 / 11%) 0 2px, transparent 3px),
        var(--tg-theme-secondary-bg-color, #0f1a23);
    background-size: 92px 92px, 116px 116px, auto;
}

.miniapp-body.is-telegram-dark .miniapp-message-list .order-chat-message.is-incoming .order-chat-bubble {
    background: #243241;
}

.miniapp-body.is-telegram-dark .miniapp-message-list .order-chat-message.is-outgoing .order-chat-bubble {
    background: #2b5278;
}

.miniapp-body.is-telegram-dark .miniapp-message-list .order-chat-bubble p,
.miniapp-body.is-telegram-dark .miniapp-chat-composer textarea {
    color: var(--tg-theme-text-color, #f5f7fb);
}

.miniapp-body.is-telegram-dark .miniapp-message-list .order-chat-reply-preview {
    border-left-color: #4fb3f6;
    background: rgb(6 14 21 / 28%);
}

.miniapp-body.is-telegram-dark .miniapp-message-list .order-chat-reply-preview strong {
    color: #64b5f6;
}

.miniapp-body.is-telegram-dark .miniapp-message-list .order-chat-reply-preview span {
    color: #d3dde6;
}

.miniapp-body.is-telegram-dark .miniapp-message-list .order-chat-reactions span {
    background: rgb(255 255 255 / 14%);
    box-shadow: none;
}

.miniapp-body.is-telegram-dark .miniapp-message-list .order-chat-message-menu .row-actions-menu,
.miniapp-body.is-telegram-dark .miniapp-chat-suggestion,
.miniapp-body.is-telegram-dark .miniapp-chat-edit-window,
.miniapp-body.is-telegram-dark .miniapp-chat-edit-header,
.miniapp-body.is-telegram-dark .miniapp-chat-edit-body {
    border-color: #263646;
    background: #17212b;
}

.miniapp-body.is-telegram-dark .miniapp-chat-suggest-button {
    border-color: #263646;
    background: #172431;
}

.miniapp-body.is-telegram-dark .miniapp-chat-suggestion p,
.miniapp-body.is-telegram-dark .miniapp-chat-edit-header h2 {
    color: var(--tg-theme-text-color, #f5f7fb);
}

.miniapp-body.is-telegram-dark .miniapp-chat-edit-textarea {
    background: #1f2c37;
    color: var(--tg-theme-text-color, #f5f7fb);
}

.miniapp-body.is-telegram-dark .miniapp-message-list .order-chat-attachment-audio {
    background: rgb(6 14 21 / 24%);
}

.miniapp-body.is-telegram-dark .miniapp-message-list .order-chat-attachment-audio strong {
    color: #f5f7fb;
}

.miniapp-body.is-telegram-dark .miniapp-message-list .order-chat-attachment-audio small {
    color: #b8c4d0;
}

.miniapp-body.is-telegram-dark .miniapp-chat-composer .order-chat-reply-composer {
    border-left-color: #4fb3f6;
    background: #172431;
}

.miniapp-body.is-telegram-dark .miniapp-chat-composer .order-chat-reply-composer strong {
    color: #64b5f6;
}

.miniapp-body.is-telegram-dark .miniapp-chat-composer .order-chat-reply-composer span {
    color: #d3dde6;
}

.miniapp-body.is-telegram-dark .miniapp-chat-composer .order-chat-reply-composer button:hover {
    background: rgb(255 255 255 / 8%);
}

.miniapp-body.is-telegram-dark .miniapp-chat-send-status span {
    border-color: #344759;
    border-top-color: var(--tg-theme-button-color, #4fb3f6);
}

.miniapp-body.is-telegram-dark .miniapp-chat-send-status em {
    background: #172431;
}

.miniapp-body.is-telegram-dark .miniapp-message-list .order-chat-status-icon.is-stored,
.miniapp-body.is-telegram-dark .miniapp-message-list .order-chat-status-icon.is-sent,
.miniapp-body.is-telegram-dark .miniapp-message-list .order-chat-status-icon.is-stored .order-chat-status-checks,
.miniapp-body.is-telegram-dark .miniapp-message-list .order-chat-status-icon.is-sent .order-chat-status-checks {
    color: #7eb7df !important;
}

.miniapp-body.is-telegram-dark .miniapp-message-list .order-chat-status-icon.is-delivered,
.miniapp-body.is-telegram-dark .miniapp-message-list .order-chat-status-icon.is-delivered .order-chat-status-checks {
    color: #4fb3f6 !important;
}

.miniapp-body.is-telegram-dark .miniapp-message-list .order-chat-status-icon.is-read,
.miniapp-body.is-telegram-dark .miniapp-message-list .order-chat-status-icon.is-read .order-chat-status-checks {
    color: #4fc3ff !important;
}

.miniapp-body.is-telegram-dark .miniapp-message-list .order-chat-status-icon.is-failed,
.miniapp-body.is-telegram-dark .miniapp-message-list .order-chat-status-icon.is-failed .order-chat-status-error {
    color: #ff6b5d !important;
}

.miniapp-body.is-telegram-dark .miniapp-chat-input-shell {
    border-color: #101820;
    background: #1f2c37;
}

.miniapp-body.is-telegram-dark .miniapp-selected-file {
    border-color: rgb(79 179 246 / 24%);
    background: #172431;
    color: #e8eef5;
}

.miniapp-body.is-telegram-dark .miniapp-selected-file button span {
    background: #9fb0bf;
}

.miniapp-body.is-telegram-dark .miniapp-chat-composer textarea::placeholder {
    color: var(--tg-theme-hint-color, #7f8b96);
}

.miniapp-workspace {
    background: var(--tg-theme-secondary-bg-color, #eef3f7);
}

.miniapp-work-header {
    position: sticky;
    top: 0;
    z-index: 12;
}

.miniapp-work-user {
    display: grid;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--tg-theme-button-color, #2aabee);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    place-items: center;
}

.miniapp-manager-shell {
    background: var(--tg-theme-secondary-bg-color, #eef3f7);
}

.miniapp-manager-header {
    position: sticky;
    top: 0;
    z-index: 14;
    box-shadow: 0 1px 0 var(--tg-theme-section-separator-color, #e8edf3);
}

.miniapp-manager-tabs {
    position: sticky;
    top: calc(52px + env(safe-area-inset-top));
    z-index: 13;
    display: grid;
    min-height: 46px;
    border-bottom: 1px solid var(--tg-theme-section-separator-color, #e4e9ef);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--tg-theme-bg-color, #fff);
}

.miniapp-body.is-max .miniapp-manager-tabs {
    top: 52px;
}

.miniapp-manager-tabs a {
    position: relative;
    display: flex;
    min-width: 0;
    padding: 0 8px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 13px;
    font-weight: 800;
    -webkit-tap-highlight-color: transparent;
}

.miniapp-manager-tabs a::after {
    position: absolute;
    right: 14px;
    bottom: 0;
    left: 14px;
    height: 2px;
    border-radius: 999px 999px 0 0;
    background: transparent;
    content: "";
}

.miniapp-manager-tabs a.is-active {
    color: var(--tg-theme-button-color, #2aabee);
}

.miniapp-manager-tabs a.is-active::after {
    background: var(--tg-theme-button-color, #2aabee);
}

.miniapp-manager-tabs span {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-manager-tabs b,
.miniapp-manager-order-footer small {
    display: grid;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #e7edf3;
    color: #768493;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    place-items: center;
}

.miniapp-manager-tabs a.is-active b {
    background: rgb(42 171 238 / 14%);
    color: var(--tg-theme-button-color, #2aabee);
}

.miniapp-manager-panel {
    display: grid;
    gap: 10px;
    padding: 10px 10px 16px;
}

.miniapp-manager-filters {
    display: grid;
    gap: 8px;
}

.miniapp-stat-filters label {
    display: grid;
    gap: 5px;
}

.miniapp-stat-filters label span {
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.miniapp-manager-filters input,
.miniapp-manager-filters select {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--tg-theme-section-separator-color, #dce4ed);
    border-radius: 13px;
    background: var(--tg-theme-bg-color, #fff);
    color: var(--tg-theme-text-color, #17212b);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    outline: 0;
}

.miniapp-manager-filters input::placeholder {
    color: var(--tg-theme-hint-color, #8a96a3);
}

.miniapp-manager-filters input:focus,
.miniapp-manager-filters select:focus {
    border-color: var(--tg-theme-button-color, #2aabee);
    box-shadow: 0 0 0 3px rgb(42 171 238 / 13%);
}

.miniapp-manager-filters button {
    min-height: 42px;
    border-radius: 13px;
    background: var(--tg-theme-button-color, #2aabee);
    color: var(--tg-theme-button-text-color, #fff);
    font-size: 14px;
    font-weight: 800;
}

.miniapp-manager-order-list,
.miniapp-manager-task-list {
    display: grid;
    gap: 8px;
}

.miniapp-manager-order-card,
.miniapp-manager-task-card {
    display: grid;
    border-radius: 16px;
    background: var(--tg-theme-bg-color, #fff);
    color: inherit;
    box-shadow: 0 1px 2px rgb(15 35 55 / 7%);
    -webkit-tap-highlight-color: transparent;
}

.miniapp-manager-order-card {
    padding: 12px;
    gap: 6px;
}

.miniapp-manager-order-card:active,
.miniapp-manager-task-card:active {
    opacity: .82;
}

.miniapp-manager-order-card > span:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.miniapp-manager-order-card b,
.miniapp-manager-task-card strong {
    color: var(--tg-theme-text-color, #17212b);
    font-size: 15px;
    font-weight: 800;
}

.miniapp-manager-order-card small,
.miniapp-manager-order-card em,
.miniapp-manager-order-card p,
.miniapp-manager-task-card span,
.miniapp-manager-task-card p {
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.35;
}

.miniapp-manager-order-card > strong {
    overflow: hidden;
    color: var(--tg-theme-text-color, #17212b);
    font-size: 15px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-manager-order-card p,
.miniapp-manager-task-card p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.miniapp-manager-order-footer {
    display: flex;
    margin-top: 4px;
    align-items: center;
    gap: 8px;
}

.miniapp-manager-order-footer .status-badge {
    min-height: 24px;
    padding: 0 10px;
    font-size: 12px;
}

.miniapp-manager-order-footer > b {
    margin-left: auto;
    font-size: 15px;
}

.miniapp-fab {
    position: fixed;
    right: max(16px, calc((100vw - 640px) / 2 + 16px));
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 24;
    display: grid;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--tg-theme-button-color, #2aabee);
    color: var(--tg-theme-button-text-color, #fff);
    box-shadow: 0 10px 24px rgb(42 171 238 / 26%);
    place-items: center;
    -webkit-tap-highlight-color: transparent;
}

.miniapp-fab:active {
    opacity: .84;
    transform: translateY(1px);
}

.miniapp-fab span,
.miniapp-fab span::after {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    content: "";
}

.miniapp-fab span::after {
    transform: rotate(90deg);
}

.miniapp-stat-cards {
    display: grid;
    gap: 8px;
}

.miniapp-stat-cards article,
.miniapp-stat-table {
    display: grid;
    padding: 12px;
    border-radius: 16px;
    background: var(--tg-theme-bg-color, #fff);
    box-shadow: 0 1px 2px rgb(15 35 55 / 7%);
}

.miniapp-stat-cards article {
    gap: 3px;
}

.miniapp-stat-cards span,
.miniapp-stat-cards small {
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 12px;
    font-weight: 700;
}

.miniapp-stat-cards span {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.miniapp-stat-cards strong {
    color: var(--tg-theme-text-color, #17212b);
    font-size: 24px;
    font-weight: 900;
    line-height: 1.1;
}

.miniapp-stat-table {
    overflow: hidden;
    padding: 0;
}

.miniapp-stat-table header,
.miniapp-stat-table div {
    display: grid;
    min-height: 48px;
    padding: 8px 12px;
    border-top: 1px solid var(--tg-theme-section-separator-color, #edf1f5);
    grid-template-columns: minmax(0, 1.4fr) 56px minmax(92px, .8fr);
    align-items: center;
    gap: 8px;
}

.miniapp-stat-table header {
    min-height: 40px;
    border-top: 0;
    background: var(--tg-theme-secondary-bg-color, #f4f7fb);
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.miniapp-stat-table strong,
.miniapp-stat-table b {
    color: var(--tg-theme-text-color, #17212b);
    font-size: 13px;
    font-weight: 800;
}

.miniapp-stat-table b {
    justify-self: end;
    white-space: nowrap;
}

.miniapp-order-page {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

.miniapp-order-header {
    position: sticky;
    top: 0;
    z-index: 16;
}

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

.miniapp-order-top-actions.is-single {
    grid-template-columns: 1fr;
}

.miniapp-order-open-web {
    display: flex;
    min-height: 44px;
    margin: 10px;
    border: 0;
    border-radius: 14px;
    align-items: center;
    justify-content: center;
    background: var(--tg-theme-button-color, #2aabee);
    color: var(--tg-theme-button-text-color, #fff);
    font-size: 14px;
    font-weight: 850;
    box-shadow: 0 10px 24px rgb(42 171 238 / 20%);
    -webkit-tap-highlight-color: transparent;
}

.miniapp-order-top-actions .miniapp-order-open-web {
    margin: 0;
}

.miniapp-order-max-invite-button {
    background: var(--tg-theme-secondary-bg-color, #eef3f7);
    color: var(--tg-theme-text-color, #17212b);
    box-shadow: 0 10px 24px rgb(15 35 55 / 8%);
}

.miniapp-order-open-web:active {
    opacity: .86;
    transform: translateY(1px);
}

.miniapp-order-form {
    display: grid;
    gap: 10px;
    padding: 10px;
}

.miniapp-order-section,
.miniapp-order-summary,
.miniapp-form-errors {
    display: grid;
    padding: 12px;
    border-radius: 16px;
    gap: 10px;
    background: var(--tg-theme-bg-color, #fff);
    box-shadow: 0 1px 2px rgb(15 35 55 / 7%);
}

.miniapp-order-summary {
    margin: 10px;
    gap: 12px;
}

.miniapp-order-summary summary {
    position: relative;
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 10px;
    cursor: pointer;
    list-style: none;
}

.miniapp-order-summary summary::-webkit-details-marker {
    display: none;
}

.miniapp-order-summary summary::after {
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--tg-theme-hint-color, #7d8b99);
    border-bottom: 2px solid var(--tg-theme-hint-color, #7d8b99);
    content: "";
    transform: rotate(45deg) translateY(-2px);
    transition: transform 160ms ease;
}

.miniapp-order-summary[open] summary::after {
    transform: rotate(225deg) translate(-1px, -1px);
}

.miniapp-order-summary h2 {
    margin: 0;
    color: var(--tg-theme-text-color, #17212b);
    font-size: 18px;
    font-weight: 800;
}

.miniapp-order-summary-preview {
    display: grid;
    min-width: 0;
    margin-top: 6px;
    gap: 3px;
}

.miniapp-order-summary-preview strong,
.miniapp-order-summary-preview span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-order-summary-preview strong {
    color: var(--tg-theme-text-color, #17212b);
    font-size: 14px;
    font-weight: 800;
}

.miniapp-order-summary-preview span {
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.25;
}

.miniapp-order-summary-list {
    display: grid;
    margin-top: 12px;
    gap: 0;
}

.miniapp-order-summary-list > div {
    display: grid;
    min-height: 43px;
    padding: 8px 0;
    border-top: 1px solid var(--tg-theme-section-separator-color, #edf1f5);
    grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
    align-items: start;
    gap: 10px;
}

.miniapp-order-summary-list > div:first-child {
    border-top: 0;
}

.miniapp-order-summary-list > div > span:not(.status-badge),
.miniapp-order-note span {
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.miniapp-order-summary-list strong,
.miniapp-order-note p {
    margin: 0;
    color: var(--tg-theme-text-color, #17212b);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.miniapp-order-summary-list .status-badge {
    width: max-content;
    align-self: center;
}

.miniapp-order-phone-line {
    display: grid;
    gap: 5px;
}

.miniapp-order-phone-line a {
    width: max-content;
    color: var(--tg-theme-button-color, #2aabee);
    font-size: 13px;
    font-weight: 800;
}

.miniapp-order-note {
    display: grid;
    padding-top: 10px;
    border-top: 1px solid var(--tg-theme-section-separator-color, #edf1f5);
    gap: 5px;
}

.miniapp-order-summary-action {
    display: inline-flex;
    width: 100%;
    min-height: 40px;
    margin-top: 4px;
    border: 1px solid rgb(42 171 238 / 22%);
    border-radius: 13px;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgb(42 171 238 / 16%), rgb(42 171 238 / 10%));
    color: var(--tg-theme-button-color, #2aabee);
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 5px 14px rgb(42 171 238 / 10%);
}

.miniapp-order-summary-action:active {
    transform: translateY(1px);
    opacity: .88;
}

.miniapp-max-invite-modal .miniapp-work-modal-sheet {
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.miniapp-max-invite-body {
    display: grid;
    min-height: 0;
    padding: 12px;
    gap: 12px;
    overflow-y: auto;
}

.miniapp-max-invite-description {
    margin: 0;
    color: var(--tg-theme-hint-color, #73808f);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.miniapp-max-invite-tabs {
    display: grid;
    padding: 3px;
    border-radius: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--tg-theme-secondary-bg-color, #eef3f7);
    gap: 3px;
}

.miniapp-max-invite-tabs button {
    min-height: 36px;
    border-radius: 11px;
    background: transparent;
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 13px;
    font-weight: 800;
}

.miniapp-max-invite-tabs button.is-active {
    background: var(--tg-theme-bg-color, #fff);
    color: var(--tg-theme-text-color, #17212b);
    box-shadow: 0 4px 12px rgb(15 35 55 / 8%);
}

.miniapp-max-invite-state {
    display: grid;
    min-height: 220px;
    padding: 18px;
    border: 1px dashed var(--tg-theme-section-separator-color, #dfe7ef);
    border-radius: 16px;
    place-items: center;
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
    text-align: center;
}

.miniapp-max-invite-state.is-error {
    color: #b42318;
}

.miniapp-max-invite-panel {
    display: none;
    min-height: 220px;
}

.miniapp-max-invite-panel.is-active {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 12px;
}

.miniapp-max-invite-qr {
    width: min(240px, 74vw);
    height: min(240px, 74vw);
    padding: 12px;
    border: 1px solid var(--tg-theme-section-separator-color, #dfe7ef);
    border-radius: 16px;
    background: #fff;
    object-fit: contain;
}

.miniapp-max-invite-link {
    width: 100%;
    margin: 0;
    padding: 12px;
    border-radius: 14px;
    background: var(--tg-theme-secondary-bg-color, #eef3f7);
    color: var(--tg-theme-text-color, #17212b);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.45;
    overflow-wrap: anywhere;
    text-align: center;
}

.miniapp-max-invite-actions {
    display: grid;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--tg-theme-section-separator-color, #edf1f5);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    background: var(--tg-theme-bg-color, #fff);
}

.miniapp-max-invite-actions button,
.miniapp-max-invite-actions a {
    display: inline-flex;
    min-height: 44px;
    border-radius: 13px;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 850;
}

.miniapp-max-invite-actions button {
    border: 1px solid rgb(42 171 238 / 20%);
    background: rgb(42 171 238 / 9%);
    color: var(--tg-theme-button-color, #2aabee);
}

.miniapp-max-invite-actions button:disabled {
    opacity: .55;
}

.miniapp-max-invite-actions a {
    background: var(--tg-theme-button-color, #2aabee);
    color: var(--tg-theme-button-text-color, #fff);
}

.miniapp-order-payments {
    margin: 10px;
    padding: 12px;
    border-top: 0;
    border-radius: 16px;
    background: var(--tg-theme-bg-color, #fff);
    box-shadow: 0 1px 2px rgb(15 35 55 / 7%);
}

.miniapp-order-payments .miniapp-client-payments {
    margin-top: 8px;
}

.miniapp-order-lines {
    display: grid;
    margin-top: 8px;
    gap: 10px;
}

.miniapp-order-lines section {
    display: grid;
    gap: 7px;
}

.miniapp-order-lines-title {
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.miniapp-order-line {
    width: 100%;
    display: grid;
    min-height: 52px;
    padding: 9px 10px;
    border: 1px solid var(--tg-theme-section-separator-color, #edf1f5);
    border-radius: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    background: var(--tg-theme-bg-color, #fff);
    color: inherit;
    font: inherit;
    text-align: left;
    appearance: none;
    cursor: pointer;
}

.miniapp-order-line.is-clickable:active {
    transform: translateY(1px);
    opacity: .82;
}

.miniapp-order-line div {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.miniapp-order-line strong,
.miniapp-order-line b {
    color: var(--tg-theme-text-color, #17212b);
    font-size: 13px;
    font-weight: 800;
}

.miniapp-order-line strong,
.miniapp-order-line span,
.miniapp-order-line small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-order-line span,
.miniapp-order-line small {
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 12px;
    font-weight: 600;
}

.miniapp-order-line b {
    white-space: nowrap;
}

.miniapp-order-readonly .miniapp-order-line,
.miniapp-order-readonly .miniapp-schedule-row,
.miniapp-order-readonly .miniapp-file-row {
    cursor: default;
}

.miniapp-order-readonly .miniapp-order-line:active,
.miniapp-order-readonly .miniapp-schedule-row:active,
.miniapp-order-readonly .miniapp-file-row:active {
    opacity: 1;
    transform: none;
}

.miniapp-empty-card-compact {
    padding: 12px;
}

.miniapp-empty-card-compact p {
    margin: 0;
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 13px;
    font-weight: 650;
}

.miniapp-order-action-stack {
    display: grid;
    gap: 7px;
}

.miniapp-order-action-stack .miniapp-order-summary-action {
    margin-top: 0;
}

.miniapp-purchase-list,
.miniapp-purchase-payment-list {
    display: grid;
    gap: 7px;
}

.miniapp-purchase-list {
    margin-top: 8px;
}

.miniapp-purchase-main,
.miniapp-purchase-payment-row {
    display: grid;
    width: 100%;
    min-height: 52px;
    padding: 9px 10px;
    border: 1px solid var(--tg-theme-section-separator-color, #edf1f5);
    border-radius: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    background: var(--tg-theme-bg-color, #fff);
    color: inherit;
    font: inherit;
    text-align: left;
}

.miniapp-purchase-main:active,
.miniapp-purchase-payment-row:active {
    transform: translateY(1px);
    opacity: .86;
}

.miniapp-purchase-main span,
.miniapp-purchase-payment-row span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.miniapp-purchase-main b,
.miniapp-purchase-main strong,
.miniapp-purchase-payment-row b,
.miniapp-purchase-payment-row strong {
    color: var(--tg-theme-text-color, #17212b);
    font-size: 13px;
    font-weight: 800;
}

.miniapp-purchase-main small,
.miniapp-purchase-payment-row small {
    overflow: hidden;
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-purchase-main strong,
.miniapp-purchase-payment-row strong {
    white-space: nowrap;
}

.miniapp-purchase-card > .miniapp-order-summary-action {
    margin-top: 2px;
}

.miniapp-schedule-list {
    display: grid;
    margin-top: 8px;
    gap: 7px;
}

.miniapp-schedule-row,
.miniapp-file-row {
    display: grid;
    width: 100%;
    min-height: 52px;
    padding: 9px 10px;
    border: 1px solid var(--tg-theme-section-separator-color, #edf1f5);
    border-radius: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    background: var(--tg-theme-bg-color, #fff);
    color: inherit;
    font: inherit;
    text-align: left;
}

.miniapp-schedule-row:active,
.miniapp-file-row a:active {
    transform: translateY(1px);
    opacity: .86;
}

.miniapp-schedule-row > span:first-child,
.miniapp-file-row a span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.miniapp-schedule-row b,
.miniapp-file-row b {
    overflow: hidden;
    color: var(--tg-theme-text-color, #17212b);
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-schedule-row small,
.miniapp-schedule-row em,
.miniapp-file-row small,
.miniapp-file-row em {
    overflow: hidden;
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-schedule-row .status-badge {
    align-self: center;
}

.miniapp-file-row a {
    min-width: 0;
    color: inherit;
}

.miniapp-file-row form {
    display: grid;
    place-items: center;
}

.miniapp-file-row form button {
    position: relative;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--tg-theme-hint-color, #7d8b99);
}

.miniapp-file-row form button::before,
.miniapp-file-row form button::after {
    position: absolute;
    top: 16px;
    left: 9px;
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    content: "";
}

.miniapp-file-row form button::before {
    transform: rotate(45deg);
}

.miniapp-file-row form button::after {
    transform: rotate(-45deg);
}

.miniapp-attached-list {
    display: grid;
    gap: 6px;
}

.miniapp-attached-list a {
    display: flex;
    min-height: 38px;
    padding: 0 11px;
    border: 1px solid var(--tg-theme-section-separator-color, #edf1f5);
    border-radius: 12px;
    align-items: center;
    overflow: hidden;
    background: var(--tg-theme-secondary-bg-color, #f4f7fb);
    color: var(--tg-theme-button-color, #2aabee);
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-chat-channel-rows {
    display: grid;
    margin-top: 8px;
    gap: 7px;
}

.miniapp-chat-channel-row {
    display: grid;
    min-height: 58px;
    padding: 9px 10px;
    border: 1px solid var(--tg-theme-section-separator-color, #edf1f5);
    border-radius: 14px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    background: var(--tg-theme-bg-color, #fff);
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

.miniapp-chat-channel-row:active {
    transform: translateY(1px);
    opacity: .86;
}

.miniapp-chat-channel-avatar {
    display: grid;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgb(42 171 238 / 14%);
    color: var(--tg-theme-button-color, #2aabee);
    font-size: 15px;
    font-weight: 900;
    place-items: center;
}

.miniapp-chat-channel-main {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.miniapp-chat-channel-main b {
    overflow: hidden;
    color: var(--tg-theme-text-color, #17212b);
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-chat-channel-main small {
    overflow: hidden;
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-chat-channel-meta {
    display: grid;
    justify-items: end;
}

.miniapp-chat-channel-meta b,
.miniapp-chat-channel-meta small {
    display: grid;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    place-items: center;
    font-size: 12px;
    font-weight: 800;
}

.miniapp-chat-channel-meta b {
    background: var(--tg-theme-button-color, #2aabee);
    color: var(--tg-theme-button-text-color, #fff);
}

.miniapp-chat-channel-meta small {
    background: var(--tg-theme-secondary-bg-color, #f4f7fb);
    color: var(--tg-theme-hint-color, #7d8b99);
}

.miniapp-order-total-preview {
    display: flex;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--tg-theme-section-separator-color, #edf1f5);
    border-radius: 13px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--tg-theme-secondary-bg-color, #f4f7fb);
}

.miniapp-order-total-preview span {
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.miniapp-order-total-preview strong {
    color: var(--tg-theme-text-color, #17212b);
    font-size: 14px;
    font-weight: 800;
}

.miniapp-order-picker-field {
    display: grid;
    gap: 6px;
}

.miniapp-order-picker-field > span {
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 11px;
    font-weight: 800;
}

.miniapp-order-picker-field input[readonly] {
    background: var(--tg-theme-secondary-bg-color, #f4f7fb);
}

.miniapp-product-picker-list {
    display: grid;
    max-height: min(58dvh, 520px);
    gap: 7px;
    overflow-y: auto;
}

.miniapp-product-picker-breadcrumbs {
    display: flex;
    min-width: 0;
    padding: 2px 0;
    align-items: center;
    gap: 5px;
    overflow-x: auto;
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.miniapp-product-picker-breadcrumbs button {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--tg-theme-button-color, #2aabee);
    font: inherit;
    font-weight: 800;
    appearance: none;
}

.miniapp-product-picker-breadcrumbs span {
    color: var(--tg-theme-text-color, #17212b);
}

.miniapp-product-picker-breadcrumbs i {
    color: var(--tg-theme-hint-color, #7d8b99);
    font-style: normal;
}

.miniapp-product-picker-list button {
    display: grid;
    min-height: 52px;
    padding: 9px 10px;
    border: 1px solid var(--tg-theme-section-separator-color, #edf1f5);
    border-radius: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    background: var(--tg-theme-bg-color, #fff);
    color: var(--tg-theme-text-color, #17212b);
    text-align: left;
}

.miniapp-product-picker-card {
    display: grid;
    gap: 6px;
}

.miniapp-product-picker-card.is-scroll-target > button:first-child {
    box-shadow: inset 3px 0 0 var(--tg-theme-button-color, #2aabee);
}

.miniapp-product-picker-list button.is-folder {
    grid-template-columns: minmax(0, 1fr);
    background: var(--tg-theme-secondary-bg-color, #f4f7fb);
}

.miniapp-product-picker-list button.miniapp-product-picker-return {
    grid-template-columns: minmax(0, 1fr);
    background: var(--tg-theme-secondary-bg-color, #f4f7fb);
}

.miniapp-product-picker-list button.miniapp-product-picker-return strong::before {
    content: "←";
    margin-right: 7px;
    color: var(--tg-theme-button-color, #2aabee);
}

.miniapp-product-picker-list button.is-folder strong::before {
    display: inline-block;
    width: 14px;
    height: 10px;
    margin-right: 7px;
    border-radius: 3px 3px 2px 2px;
    background: var(--tg-theme-button-color, #2aabee);
    content: "";
    opacity: .9;
}

.miniapp-product-picker-list button:active {
    opacity: .82;
}

.miniapp-product-picker-list span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.miniapp-product-picker-list strong,
.miniapp-product-picker-list b {
    color: var(--tg-theme-text-color, #17212b);
    font-size: 13px;
    font-weight: 800;
}

.miniapp-product-picker-list strong,
.miniapp-product-picker-list small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-product-picker-list small {
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 12px;
    font-weight: 600;
}

.miniapp-product-picker-related {
    display: grid;
    gap: 6px;
    padding-left: 10px;
}

.miniapp-product-picker-variants {
    display: grid;
    gap: 6px;
    padding-left: 10px;
}

.miniapp-product-picker-related-group,
.miniapp-product-picker-related-items {
    display: grid;
    gap: 6px;
}

.miniapp-product-picker-list button.miniapp-product-picker-related-toggle,
.miniapp-product-picker-list button.miniapp-product-picker-related-folder,
.miniapp-product-picker-list button.miniapp-product-picker-related-item,
.miniapp-product-picker-list button.miniapp-product-picker-variant {
    min-height: 40px;
    border-color: var(--tg-theme-section-separator-color, #edf1f5);
    background: var(--tg-theme-secondary-bg-color, #f4f7fb);
}

.miniapp-product-picker-list button.miniapp-product-picker-related-toggle {
    display: flex;
    justify-content: space-between;
}

.miniapp-product-picker-related-toggle small {
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 11px;
    font-weight: 700;
}

.miniapp-product-picker-list button.miniapp-product-picker-related-folder {
    grid-template-columns: minmax(0, 1fr);
    color: var(--tg-theme-button-color, #2aabee);
    font-size: 12px;
    font-weight: 800;
}

.miniapp-order-payments button.miniapp-client-payment-row,
.miniapp-order-payments .miniapp-client-payment-empty {
    border: 1px solid var(--tg-theme-section-separator-color, #edf1f5);
    background: var(--tg-theme-bg-color, #fff);
}

.miniapp-order-payment-form .miniapp-file-field {
    padding-top: 2px;
}

.miniapp-form-errors {
    margin: 10px 10px 0;
    background: #fff1ef;
    color: #c2412f;
}

.miniapp-form-errors p {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.miniapp-order-section label,
.miniapp-order-static {
    display: grid;
    gap: 6px;
}

.miniapp-order-section label > span,
.miniapp-order-static > span {
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 11px;
    font-weight: 800;
}

.miniapp-order-section input,
.miniapp-order-section select,
.miniapp-order-section textarea,
.miniapp-order-static strong {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--tg-theme-section-separator-color, #dce4ed);
    border-radius: 13px;
    background: var(--tg-theme-bg-color, #fff);
    color: var(--tg-theme-text-color, #17212b);
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    outline: 0;
}

.miniapp-order-section textarea {
    min-height: 104px;
    padding-top: 11px;
    resize: vertical;
}

.miniapp-order-form .miniapp-toggle-field {
    min-height: 42px;
    padding: 2px 0;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
}

.miniapp-order-form .miniapp-toggle-field input {
    position: relative;
    width: 46px;
    min-height: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    appearance: none;
    background: var(--tg-theme-section-separator-color, #dbe3ec);
    cursor: pointer;
    transition: background 160ms ease;
}

.miniapp-order-form .miniapp-toggle-field input::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgb(15 23 42 / 16%);
    content: "";
    transition: transform 160ms ease;
}

.miniapp-order-form .miniapp-toggle-field input:checked {
    background: var(--tg-theme-button-color, #2aabee);
}

.miniapp-order-form .miniapp-toggle-field input:checked::after {
    transform: translateX(20px);
}

.miniapp-order-form .miniapp-toggle-field > span {
    color: var(--tg-theme-text-color, #17212b);
    font-size: 14px;
    font-weight: 700;
}

.miniapp-order-static strong {
    display: flex;
    align-items: center;
    background: var(--tg-theme-secondary-bg-color, #f4f7fb);
}

.miniapp-order-section input:focus,
.miniapp-order-section select:focus,
.miniapp-order-section textarea:focus {
    border-color: var(--tg-theme-button-color, #2aabee);
    box-shadow: 0 0 0 3px rgb(42 171 238 / 13%);
}

.miniapp-order-section .miniapp-status-field select,
.miniapp-work-form .miniapp-status-field select {
    min-height: 40px;
    border-color: rgb(42 171 238 / 24%);
    background-color: rgb(42 171 238 / 11%);
    color: var(--tg-theme-button-color, #2aabee);
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 24%);
}

.miniapp-order-section .miniapp-status-field select:focus,
.miniapp-work-form .miniapp-status-field select:focus {
    border-color: var(--tg-theme-button-color, #2aabee);
    box-shadow: 0 0 0 3px rgb(42 171 238 / 14%);
}

.miniapp-order-modal {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: none;
}

.miniapp-order-modal.is-open {
    display: block;
}

.miniapp-nomenclature-picker-modal {
    z-index: 95;
}

.miniapp-order-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(15 23 42 / 42%);
}

.miniapp-order-modal-sheet {
    position: absolute;
    right: max(0px, calc((100vw - 640px) / 2));
    bottom: 0;
    left: max(0px, calc((100vw - 640px) / 2));
    display: grid;
    max-height: calc(100dvh - env(safe-area-inset-top) - 12px);
    border-radius: 18px 18px 0 0;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    background: var(--tg-theme-bg-color, #fff);
}

.miniapp-order-modal .miniapp-order-form {
    min-height: 0;
    padding: 0;
    overflow-y: auto;
}

.miniapp-order-modal .miniapp-order-section {
    margin: 0;
    padding: 10px;
    border-radius: 0;
    gap: 8px;
    box-shadow: none;
}

.miniapp-order-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: grid;
    margin-top: 10px;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--tg-theme-section-separator-color, #e4e9ef);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    background: var(--tg-theme-bg-color, #fff);
}

.miniapp-order-actions a,
.miniapp-order-actions button {
    display: inline-flex;
    min-height: 44px;
    border-radius: 13px;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
}

.miniapp-order-actions a,
.miniapp-order-actions button[type="button"] {
    border: 1px solid rgb(42 171 238 / 20%);
    background: rgb(42 171 238 / 9%);
    color: var(--tg-theme-button-color, #2aabee);
}

.miniapp-order-actions button[type="submit"] {
    box-shadow: 0 8px 18px rgb(42 171 238 / 18%);
    background: var(--tg-theme-button-color, #2aabee);
    color: var(--tg-theme-button-text-color, #fff);
}

.miniapp-order-actions button:active,
.miniapp-order-actions a:active {
    transform: translateY(1px);
    opacity: .9;
}

.miniapp-order-delete-form {
    padding: 0 10px 10px;
}

.miniapp-order-delete-form button {
    display: inline-flex;
    width: 100%;
    min-height: 42px;
    border: 1px solid rgb(239 68 68 / 30%);
    border-radius: 13px;
    align-items: center;
    justify-content: center;
    background: rgb(239 68 68 / 8%);
    color: #ef4444;
    font-size: 14px;
    font-weight: 800;
}

.miniapp-order-delete-form button:active {
    opacity: .82;
}

.miniapp-manager-task-calendar {
    margin: 0;
}

.miniapp-manager-task-head {
    padding: 8px 4px 0;
}

.miniapp-manager-task-head strong {
    font-size: 19px;
}

.miniapp-manager-task-card {
    padding: 11px 12px;
    grid-template-columns: 45px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 10px;
}

.miniapp-manager-task-card time {
    display: grid;
    height: 36px;
    border-radius: 12px;
    background: var(--tg-theme-secondary-bg-color, #eef3f7);
    color: var(--tg-theme-text-color, #17212b);
    font-size: 13px;
    font-weight: 800;
    place-items: center;
}

.miniapp-manager-task-card div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.miniapp-manager-task-card strong,
.miniapp-manager-task-card span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-manager-task-card.is-completed {
    opacity: .68;
}

.miniapp-manager-task-card form {
    display: grid;
    place-items: center;
}

.miniapp-manager-task-card button {
    display: grid;
    width: 28px;
    height: 28px;
    border: 1px solid var(--tg-theme-section-separator-color, #dce4ed);
    border-radius: 50%;
    background: var(--tg-theme-bg-color, #fff);
    color: var(--tg-theme-button-color, #2aabee);
    place-items: center;
}

.miniapp-manager-task-card button span {
    width: 10px;
    height: 6px;
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    opacity: 0;
    transform: translateY(-1px) rotate(-45deg);
}

.miniapp-manager-task-card button:disabled {
    border-color: transparent;
    background: #d9fdd3;
    color: #2d8f5c;
}

.miniapp-manager-task-card button:disabled span {
    opacity: 1;
}

.miniapp-body.is-telegram-dark .miniapp-manager-tabs b,
.miniapp-body.is-telegram-dark .miniapp-manager-order-footer small {
    background: #2b3946;
    color: #9fb0bf;
}

.miniapp-body.is-telegram-dark .miniapp-manager-tabs a.is-active b {
    background: rgb(79 179 246 / 18%);
    color: var(--tg-theme-button-color, #4fb3f6);
}

.miniapp-body.is-telegram-dark .miniapp-manager-order-card,
.miniapp-body.is-telegram-dark .miniapp-manager-task-card,
.miniapp-body.is-telegram-dark .miniapp-stat-cards article,
.miniapp-body.is-telegram-dark .miniapp-stat-table,
.miniapp-body.is-telegram-dark .miniapp-order-section,
.miniapp-body.is-telegram-dark .miniapp-order-summary,
.miniapp-body.is-telegram-dark .miniapp-order-payments,
.miniapp-body.is-telegram-dark .miniapp-calendar-card {
    box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
}

.miniapp-body.is-telegram-dark .miniapp-manager-filters input,
.miniapp-body.is-telegram-dark .miniapp-manager-filters select,
.miniapp-body.is-telegram-dark .miniapp-order-section input,
.miniapp-body.is-telegram-dark .miniapp-order-section select,
.miniapp-body.is-telegram-dark .miniapp-order-section textarea,
.miniapp-body.is-telegram-dark .miniapp-order-actions a,
.miniapp-body.is-telegram-dark .miniapp-order-summary-action,
.miniapp-body.is-telegram-dark .miniapp-manager-task-card button {
    border-color: #263441;
}

.miniapp-body.is-telegram-dark .miniapp-order-summary-action {
    border-color: rgb(42 171 238 / 26%);
    background: rgb(42 171 238 / 14%);
    color: #5fc8ff;
    box-shadow: none;
}

.miniapp-body.is-telegram-dark .miniapp-order-max-invite-button,
.miniapp-body.is-telegram-dark .miniapp-max-invite-tabs,
.miniapp-body.is-telegram-dark .miniapp-max-invite-link {
    background: #1f2c37;
}

.miniapp-body.is-telegram-dark .miniapp-max-invite-tabs button.is-active {
    background: var(--tg-theme-bg-color, #17212b);
    color: var(--tg-theme-text-color, #f5f7fb);
    box-shadow: none;
}

.miniapp-body.is-telegram-dark .miniapp-max-invite-state,
.miniapp-body.is-telegram-dark .miniapp-max-invite-qr {
    border-color: #263441;
}

.miniapp-body.is-telegram-dark .miniapp-order-actions a,
.miniapp-body.is-telegram-dark .miniapp-order-actions button[type="button"] {
    border-color: rgb(42 171 238 / 26%);
    background: rgb(42 171 238 / 12%);
    color: #5fc8ff;
}

.miniapp-body.is-telegram-dark .miniapp-order-actions button[type="submit"] {
    box-shadow: none;
}

.miniapp-body.is-telegram-dark .miniapp-order-section .miniapp-status-field select,
.miniapp-body.is-telegram-dark .miniapp-work-form .miniapp-status-field select {
    border-color: rgb(42 171 238 / 28%);
    background-color: rgb(42 171 238 / 16%);
    color: #5fc8ff;
    box-shadow: none;
}

.miniapp-body.is-telegram-dark .miniapp-order-delete-form button {
    border-color: rgb(248 113 113 / 32%);
    background: rgb(248 113 113 / 12%);
    color: #f87171;
}

.miniapp-body.is-telegram-dark .miniapp-order-payments button.miniapp-client-payment-row,
.miniapp-body.is-telegram-dark .miniapp-order-payments .miniapp-client-payment-empty,
.miniapp-body.is-telegram-dark .miniapp-order-line,
.miniapp-body.is-telegram-dark .miniapp-stat-table header,
.miniapp-body.is-telegram-dark .miniapp-purchase-main,
.miniapp-body.is-telegram-dark .miniapp-purchase-payment-row,
.miniapp-body.is-telegram-dark .miniapp-schedule-row,
.miniapp-body.is-telegram-dark .miniapp-file-row,
.miniapp-body.is-telegram-dark .miniapp-chat-channel-row,
.miniapp-body.is-telegram-dark .miniapp-order-total-preview,
.miniapp-body.is-telegram-dark .miniapp-product-picker-list button {
    border-color: #263441;
    background: var(--tg-theme-bg-color, #17212b);
}

.miniapp-body.is-telegram-dark .miniapp-attached-list a {
    border-color: #263441;
    background: #1f2c37;
}

.miniapp-body.is-telegram-dark .miniapp-chat-channel-avatar {
    background: rgb(79 179 246 / 16%);
    color: #5fc8ff;
}

.miniapp-body.is-telegram-dark .miniapp-chat-channel-meta small {
    background: #1f2c37;
    color: #9fb0bf;
}

.miniapp-body.is-telegram-dark .miniapp-order-static strong {
    background: #1f2c37;
}

.miniapp-body.is-telegram-dark .miniapp-order-modal-sheet {
    background: var(--tg-theme-bg-color, #17212b);
}

.miniapp-body.is-telegram-dark .miniapp-order-modal-backdrop {
    background: rgb(0 0 0 / 56%);
}

.miniapp-body.is-telegram-dark .miniapp-form-errors {
    background: rgb(239 91 76 / 14%);
    color: #ff9b91;
}

.miniapp-body.is-telegram-dark .miniapp-manager-task-card button:disabled {
    background: rgb(48 164 108 / 18%);
    color: #5fd08f;
}

.miniapp-flash {
    margin: 10px 12px 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: #d9fdd3;
    color: #1d6f3f;
    font-size: 13px;
    font-weight: 600;
    transition: opacity 220ms ease, transform 220ms ease, margin 220ms ease, padding 220ms ease, max-height 220ms ease;
    max-height: 80px;
}

.miniapp-flash.is-hiding {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-6px);
}

.miniapp-calendar-card {
    margin: 10px 10px 0;
    padding: 10px;
    border-radius: 18px;
    background: var(--tg-theme-bg-color, #fff);
    box-shadow: 0 1px 2px rgb(15 35 55 / 7%);
}

.miniapp-calendar-head {
    display: grid;
    min-height: 34px;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
}

.miniapp-calendar-head strong {
    color: var(--tg-theme-text-color, #17212b);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

.miniapp-calendar-head a {
    position: relative;
    display: grid;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    place-items: center;
}

.miniapp-calendar-head a::before {
    width: 9px;
    height: 9px;
    border-bottom: 2px solid var(--tg-theme-button-color, #2aabee);
    border-left: 2px solid var(--tg-theme-button-color, #2aabee);
    content: "";
}

.miniapp-calendar-head a:first-child::before {
    transform: translateX(2px) rotate(45deg);
}

.miniapp-calendar-head a:last-child::before {
    transform: translateX(-2px) rotate(-135deg);
}

.miniapp-calendar-head a:active,
.miniapp-calendar-day:active {
    background: var(--tg-theme-secondary-bg-color, #eef3f7);
}

.miniapp-calendar-weekdays,
.miniapp-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.miniapp-calendar-weekdays {
    margin-top: 4px;
}

.miniapp-calendar-weekdays span {
    padding: 5px 0;
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.miniapp-calendar-day {
    display: grid;
    min-height: 42px;
    border-radius: 12px;
    align-content: center;
    justify-items: center;
    gap: 3px;
    color: var(--tg-theme-text-color, #17212b);
    -webkit-tap-highlight-color: transparent;
}

.miniapp-calendar-day span {
    display: grid;
    min-width: 25px;
    height: 25px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 600;
    place-items: center;
}

.miniapp-calendar-day.is-muted span {
    color: var(--tg-theme-hint-color, #a2acb6);
    font-weight: 500;
}

.miniapp-calendar-day.is-selected span {
    background: var(--tg-theme-button-color, #2aabee);
    color: #fff;
}

.miniapp-calendar-day i {
    display: flex;
    min-height: 5px;
    gap: 3px;
}

.miniapp-dot {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #9aa8b8;
}

.miniapp-dot-new {
    background: #8aa0b6;
}

.miniapp-dot-measurement,
.miniapp-dot-approved {
    background: #2aabee;
}

.miniapp-dot-completed {
    background: #30a46c;
}

.miniapp-dot-cancelled {
    background: #ef5b4c;
}

.miniapp-day-head {
    display: flex;
    padding: 16px 14px 8px;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}

.miniapp-day-head span {
    display: block;
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.miniapp-day-head strong {
    color: var(--tg-theme-text-color, #17212b);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
}

.miniapp-day-head b {
    display: grid;
    min-width: 25px;
    height: 25px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--tg-theme-bg-color, #fff);
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 12px;
    font-weight: 700;
    place-items: center;
}

.miniapp-driver-summary {
    display: grid;
    margin: 10px 10px 12px;
    grid-auto-columns: minmax(168px, 1fr);
    grid-auto-flow: column;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.miniapp-driver-summary::-webkit-scrollbar {
    display: none;
}

.miniapp-driver-balance-summary {
    grid-auto-columns: minmax(0, 1fr);
    overflow-x: visible;
}

.miniapp-driver-purchase-summary {
    grid-auto-columns: unset;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: visible;
}

.miniapp-driver-purchase-summary article.is-wide {
    min-width: 0;
    grid-column: 1 / -1;
}

.miniapp-driver-summary article {
    display: grid;
    min-height: 86px;
    padding: 11px 12px;
    border-radius: 14px;
    align-content: center;
    gap: 5px;
    background: var(--tg-theme-bg-color, #fff);
    box-shadow: 0 1px 2px rgb(15 35 55 / 7%);
}

.miniapp-driver-summary article.is-wide {
    min-width: 230px;
}

.miniapp-driver-summary span {
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.miniapp-driver-summary strong {
    overflow: hidden;
    color: var(--tg-theme-text-color, #17212b);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-driver-summary small {
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 11px;
    font-weight: 700;
}

.miniapp-driver-summary-button {
    position: relative;
    display: grid;
    width: 100%;
    min-height: 64px;
    padding: 0 22px 0 0;
    align-content: center;
    gap: 5px;
    background: transparent;
    color: inherit;
    text-align: left;
}

.miniapp-driver-summary-button::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 2px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--tg-theme-hint-color, #7d8b99);
    border-bottom: 2px solid var(--tg-theme-hint-color, #7d8b99);
    opacity: .8;
    transform: translateY(-50%) rotate(-45deg);
}

.miniapp-driver-summary-button:active {
    opacity: .82;
}

.miniapp-status-filter {
    display: grid;
    margin: 0 10px 12px;
    grid-auto-columns: minmax(128px, 1fr);
    grid-auto-flow: column;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.miniapp-status-filter::-webkit-scrollbar {
    display: none;
}

.miniapp-status-filter a {
    display: grid;
    min-height: 58px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 14px;
    align-content: center;
    gap: 4px;
    background: var(--tg-theme-bg-color, #fff);
    box-shadow: 0 1px 2px rgb(15 35 55 / 7%);
}

.miniapp-status-filter a:active {
    opacity: .82;
}

.miniapp-status-filter span {
    overflow: hidden;
    color: var(--tg-theme-text-color, #17212b);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-status-filter b {
    display: grid;
    width: max-content;
    min-width: 23px;
    height: 23px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--tg-theme-secondary-bg-color, #eef3f7);
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 12px;
    font-weight: 800;
    place-items: center;
}

.miniapp-status-filter a.is-active {
    border-color: rgb(42 171 238 / 32%);
    background: var(--tg-theme-button-color, #2aabee);
}

.miniapp-status-filter a.is-active span,
.miniapp-status-filter a.is-active b {
    color: var(--tg-theme-button-text-color, #fff);
}

.miniapp-status-filter a.is-active b {
    background: rgb(255 255 255 / 22%);
}

.miniapp-work-list {
    display: grid;
    gap: 10px;
    padding: 0 10px 16px;
}

.miniapp-work-card {
    display: grid;
    padding: 12px;
    border-radius: 18px;
    gap: 12px;
    background: var(--tg-theme-bg-color, #fff);
    box-shadow: 0 1px 2px rgb(15 35 55 / 7%);
    -webkit-tap-highlight-color: transparent;
}

.miniapp-work-card-main {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    list-style: none;
}

.miniapp-work-card-main::-webkit-details-marker {
    display: none;
}

.miniapp-work-card-main::after {
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--tg-theme-hint-color, #7d8b99);
    border-bottom: 2px solid var(--tg-theme-hint-color, #7d8b99);
    content: "";
    transform: rotate(45deg) translateY(-2px);
    transition: transform 160ms ease;
}

.miniapp-work-record[open] .miniapp-work-card-main::after {
    transform: rotate(225deg) translate(-1px, -1px);
}

.miniapp-work-card-main:active {
    opacity: .82;
}

.miniapp-work-card-main time {
    display: grid;
    height: 38px;
    border-radius: 12px;
    background: var(--tg-theme-secondary-bg-color, #eef3f7);
    color: var(--tg-theme-text-color, #17212b);
    font-size: 13px;
    font-weight: 700;
    place-items: center;
}

.miniapp-work-card-main h2 {
    overflow: hidden;
    margin: 0;
    color: var(--tg-theme-text-color, #17212b);
    font-size: 16px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-work-card-main p {
    margin: 3px 0 0;
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 13px;
    font-weight: 600;
}

.miniapp-work-card-main small {
    display: block;
    overflow: hidden;
    margin-top: 2px;
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-record-status {
    display: inline-grid;
    width: max-content;
    min-height: 22px;
    margin-top: 6px;
    padding: 0 9px;
    align-items: center;
    font-size: 11px;
    line-height: 1;
}

.miniapp-work-card-body {
    display: grid;
    gap: 12px;
}

.miniapp-work-details {
    display: grid;
    margin: 0;
    gap: 8px;
}

.miniapp-work-details div {
    display: grid;
    padding: 9px 10px;
    border-radius: 12px;
    gap: 3px;
    background: var(--tg-theme-secondary-bg-color, #f4f7fb);
}

.miniapp-work-details dt {
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.miniapp-work-details dd {
    margin: 0;
    color: var(--tg-theme-text-color, #17212b);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.miniapp-work-details a {
    color: var(--tg-theme-link-color, var(--tg-theme-button-color, #2aabee));
    font-weight: 700;
}

.miniapp-link-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.miniapp-link-list span {
    color: var(--tg-theme-text-color, #17212b);
}

.miniapp-manager-contact {
    display: grid;
    gap: 3px;
}

.miniapp-manager-contact span {
    color: var(--tg-theme-text-color, #17212b);
}

.miniapp-manager-contact a {
    width: max-content;
}

.miniapp-map-link {
    display: inline;
}

.miniapp-delivery-cost {
    display: grid;
    gap: 3px;
}

.miniapp-delivery-cost strong {
    color: var(--tg-theme-text-color, #17212b);
    font-size: 14px;
    font-weight: 800;
}

.miniapp-delivery-cost small {
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.miniapp-delivery-charge-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.miniapp-delivery-charge-grid div {
    display: grid;
    min-height: 68px;
    padding: 9px 10px;
    border-radius: 12px;
    align-content: center;
    gap: 3px;
    background: var(--tg-theme-secondary-bg-color, #f4f7fb);
}

.miniapp-delivery-charge-grid div.is-wide {
    grid-column: 1 / -1;
}

.miniapp-delivery-charge-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.miniapp-delivery-charge-actions form {
    display: grid;
}

.miniapp-delivery-charge-edit,
.miniapp-delivery-charge-account {
    min-height: 38px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
}

.miniapp-delivery-charge-edit,
.miniapp-delivery-charge-account {
    background: var(--tg-theme-button-color, #2aabee);
    color: var(--tg-theme-button-text-color, #fff);
}

.miniapp-delivery-charge-edit:active,
.miniapp-delivery-charge-account:active {
    opacity: .82;
}

.miniapp-delivery-charge-grid span {
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.miniapp-delivery-charge-grid strong {
    color: var(--tg-theme-text-color, #17212b);
    font-size: 15px;
    font-weight: 800;
}

.miniapp-delivery-charge-grid small,
.miniapp-delivery-charge-grid p {
    margin: 0;
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.miniapp-collapse {
    display: grid;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid var(--tg-theme-section-separator-color, #edf1f5);
    gap: 8px;
}

.miniapp-collapse:first-of-type {
    margin-top: 4px;
}

.miniapp-collapse summary {
    display: grid;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 12px;
    grid-template-columns: minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 8px;
    background: var(--tg-theme-secondary-bg-color, #f4f7fb);
    color: var(--tg-theme-text-color, #17212b);
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

.miniapp-collapse summary::-webkit-details-marker {
    display: none;
}

.miniapp-collapse summary::after {
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--tg-theme-hint-color, #7d8b99);
    border-bottom: 2px solid var(--tg-theme-hint-color, #7d8b99);
    content: "";
    transform: rotate(45deg) translateY(-2px);
    transition: transform 160ms ease;
}

.miniapp-collapse[open] summary::after {
    transform: rotate(225deg) translate(-1px, -1px);
}

.miniapp-collapse summary:active {
    opacity: .82;
}

.miniapp-collapse summary span {
    overflow: hidden;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-collapse summary b {
    display: grid;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--tg-theme-bg-color, #fff);
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 11px;
    font-weight: 800;
    place-items: center;
    white-space: nowrap;
}

.miniapp-collapse summary b:empty {
    display: none;
}

.miniapp-collapse summary b.miniapp-collapse-summary-total {
    display: flex;
    width: max-content;
    max-width: 180px;
    height: 26px;
    padding: 0 9px;
    gap: 6px;
    color: var(--tg-theme-text-color, #17212b);
    font-size: 12px;
}

.miniapp-collapse summary b.miniapp-collapse-summary-total small {
    display: grid;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--tg-theme-secondary-bg-color, #eef3f7);
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 10px;
    font-weight: 800;
    place-items: center;
}

.miniapp-collapse .miniapp-work-details {
    margin-top: 3px;
}

.miniapp-collapse .miniapp-print-actions,
.miniapp-collapse .miniapp-purchase-card {
    margin-top: 3px;
}

.miniapp-collapse .miniapp-delivery-charge-grid {
    margin-top: 3px;
}

.miniapp-collapse-empty {
    margin: 3px 0 0;
    padding: 10px;
    border-radius: 12px;
    background: var(--tg-theme-secondary-bg-color, #f4f7fb);
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.miniapp-installation-modal-data {
    display: grid;
    gap: 8px;
}

.miniapp-installation-modal-data .miniapp-collapse {
    margin-top: 0;
}

.miniapp-installation-days {
    display: grid;
    gap: 7px;
}

.miniapp-installation-days > span {
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 11px;
    font-weight: 700;
}

.miniapp-installation-days-list {
    display: grid;
    gap: 6px;
}

.miniapp-installation-day-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    align-items: center;
    gap: 7px;
}

.miniapp-work-form .miniapp-installation-day-row input {
    min-height: 40px;
}

.miniapp-work-form .miniapp-installation-day-row button,
.miniapp-work-form .miniapp-installation-day-add {
    min-height: 40px;
    padding: 0;
    border: 1px solid rgb(42 171 238 / 22%);
    background: rgb(42 171 238 / 10%);
    color: var(--tg-theme-button-color, #2aabee);
    grid-column: auto;
    box-shadow: 0 4px 12px rgb(42 171 238 / 8%);
}

.miniapp-work-form .miniapp-installation-day-row button {
    position: relative;
    width: 36px;
    border-radius: 12px;
}

.miniapp-work-form .miniapp-installation-day-row button i {
    position: absolute;
    top: 18px;
    left: 11px;
    width: 14px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.miniapp-work-form .miniapp-installation-day-row button i:first-child {
    transform: rotate(45deg);
}

.miniapp-work-form .miniapp-installation-day-row button i:last-child {
    transform: rotate(-45deg);
}

.miniapp-work-form .miniapp-installation-day-add {
    width: max-content;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.miniapp-work-section {
    display: grid;
    gap: 7px;
    padding-top: 10px;
    border-top: 1px solid var(--tg-theme-section-separator-color, #edf1f5);
}

.miniapp-work-section h3 {
    margin: 0 0 2px;
    color: var(--tg-theme-text-color, #17212b);
    font-size: 14px;
    font-weight: 700;
}

.miniapp-work-section p {
    margin: 0;
    color: var(--tg-theme-text-color, #17212b);
    font-size: 13px;
    line-height: 1.45;
}

.miniapp-simple-row,
.miniapp-purchase-card {
    border-radius: 12px;
    background: var(--tg-theme-secondary-bg-color, #f4f7fb);
}

.miniapp-simple-row {
    display: grid;
    min-height: 42px;
    padding: 8px 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.miniapp-simple-row span {
    color: var(--tg-theme-text-color, #17212b);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.miniapp-simple-row span small {
    display: block;
    margin-top: 2px;
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 12px;
    font-weight: 600;
}

.miniapp-simple-row b {
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.miniapp-purchase-card {
    display: grid;
    padding: 10px;
    gap: 4px;
}

.miniapp-purchase-card strong {
    color: var(--tg-theme-text-color, #17212b);
    font-size: 14px;
    font-weight: 700;
}

.miniapp-purchase-card span,
.miniapp-purchase-card small {
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.miniapp-print-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.miniapp-print-actions a,
.miniapp-file-link {
    display: inline-flex;
    min-height: 34px;
    padding: 0 11px;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    background: var(--tg-theme-secondary-bg-color, #f4f7fb);
    color: var(--tg-theme-button-color, #2aabee);
    font-size: 12px;
    font-weight: 700;
}

.miniapp-file-link {
    width: max-content;
    max-width: 100%;
    min-height: 30px;
    padding: 0;
    background: transparent;
}

.miniapp-inline-upload-form {
    display: grid;
    margin-top: 4px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 7px;
}

.miniapp-compact-file-field {
    gap: 3px;
}

.miniapp-compact-file-field .miniapp-file-button {
    min-height: 38px;
    padding: 0 11px;
    justify-content: flex-start;
}

.miniapp-compact-file-field .miniapp-file-button b {
    font-size: 13px;
}

.miniapp-inline-upload-form > button {
    min-height: 38px;
    padding: 0 12px;
    border-radius: 12px;
    background: var(--tg-theme-button-color, #2aabee);
    color: var(--tg-theme-button-text-color, #fff);
    font-size: 13px;
    font-weight: 700;
}

.miniapp-payment-row {
    display: grid;
    min-height: 44px;
    border-radius: 12px;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: center;
    gap: 4px;
    background: var(--tg-theme-bg-color, #fff);
}

.miniapp-payment-row button {
    display: grid;
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--tg-theme-text-color, #17212b);
    text-align: left;
}

.miniapp-payment-row button span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.miniapp-payment-row button b {
    overflow: hidden;
    color: var(--tg-theme-text-color, #17212b);
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-payment-row button small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-payment-row button strong {
    color: var(--tg-theme-text-color, #17212b);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.miniapp-payment-row button:active,
.miniapp-inline-upload-form > button:active,
.miniapp-print-actions a:active {
    opacity: .82;
}

.miniapp-payment-file {
    display: grid;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    place-items: center;
}

.miniapp-payment-file:active {
    background: var(--tg-theme-secondary-bg-color, #eef3f7);
}

.miniapp-payment-file img {
    width: 18px;
    height: 18px;
    filter: var(--miniapp-file-icon-filter, brightness(0) saturate(100%) invert(12%) sepia(22%) saturate(674%) hue-rotate(171deg) brightness(92%) contrast(91%));
}

.miniapp-client-payments {
    display: grid;
    margin-top: 3px;
    gap: 7px;
}

.miniapp-client-payment-add {
    width: 100%;
}

.miniapp-client-payment-row-wrap,
.miniapp-client-payment-row {
    border-radius: 12px;
    background: var(--tg-theme-bg-color, #fff);
}

.miniapp-client-payment-row-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 4px;
}

.miniapp-client-payment-row {
    display: grid;
    min-height: 46px;
    padding: 8px 10px;
    border: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    color: var(--tg-theme-text-color, #17212b);
    text-align: left;
}

button.miniapp-client-payment-row {
    width: 100%;
    background: transparent;
}

.miniapp-client-payment-row.is-clickable:active,
.miniapp-client-payment-add:active {
    opacity: .82;
}

.miniapp-client-payment-row span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.miniapp-client-payment-row b,
.miniapp-client-payment-row strong {
    color: var(--tg-theme-text-color, #17212b);
    font-size: 13px;
    font-weight: 800;
}

.miniapp-client-payment-row b,
.miniapp-client-payment-row small,
.miniapp-client-payment-row em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-client-payment-row small,
.miniapp-client-payment-row em,
.miniapp-client-payment-empty {
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 12px;
    font-weight: 600;
}

.miniapp-client-payment-row em {
    font-style: normal;
}

.miniapp-client-payment-row strong {
    white-space: nowrap;
}

.miniapp-client-payment-empty {
    margin: 0;
    padding: 9px 10px;
    border-radius: 12px;
    background: var(--tg-theme-bg-color, #fff);
}

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

.miniapp-photo-item {
    position: relative;
}

.miniapp-photo-grid a,
.miniapp-photo-grid img,
.miniapp-photo-item {
    display: block;
    aspect-ratio: 1;
    border-radius: 10px;
}

.miniapp-photo-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.miniapp-photo-item form {
    position: absolute;
    top: 4px;
    right: 4px;
}

.miniapp-photo-item button {
    position: relative;
    display: grid;
    width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 0;
    border-radius: 50%;
    background: rgb(20 29 43 / 72%);
    color: #fff;
    grid-column: auto;
    place-items: center;
    box-shadow: 0 2px 8px rgb(0 0 0 / 22%);
}

.miniapp-photo-item button:active {
    transform: scale(.94);
    opacity: .88;
}

.miniapp-photo-item button span {
    position: absolute;
    width: 11px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.miniapp-photo-item button span:first-child {
    transform: rotate(45deg);
}

.miniapp-photo-item button span:last-child {
    transform: rotate(-45deg);
}

.miniapp-work-form {
    display: grid;
    padding-top: 10px;
    border-top: 1px solid var(--tg-theme-section-separator-color, #edf1f5);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 9px;
}

.miniapp-work-form label,
.miniapp-file-field {
    display: grid;
    gap: 5px;
}

.miniapp-work-form label > span,
.miniapp-file-field > span {
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 11px;
    font-weight: 700;
}

.miniapp-work-form input,
.miniapp-work-form select,
.miniapp-work-form textarea {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--tg-theme-section-separator-color, #dbe3ec);
    border-radius: 12px;
    background: var(--tg-theme-bg-color, #fff);
    color: var(--tg-theme-text-color, #17212b);
    font-size: 14px;
}

.miniapp-work-form textarea {
    resize: vertical;
}

.miniapp-work-form input:focus,
.miniapp-work-form select:focus,
.miniapp-work-form textarea:focus {
    border-color: var(--tg-theme-button-color, #2aabee);
    box-shadow: none;
    outline: 0;
}

.miniapp-work-form .miniapp-toggle-field {
    min-height: 42px;
    padding: 0;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    align-self: end;
    gap: 9px;
}

.miniapp-work-form .miniapp-toggle-field input {
    position: relative;
    width: 46px;
    min-height: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    appearance: none;
    background: var(--tg-theme-section-separator-color, #dbe3ec);
    cursor: pointer;
    transition: background 160ms ease;
}

.miniapp-work-form .miniapp-toggle-field input::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgb(15 23 42 / 16%);
    content: "";
    transition: transform 160ms ease;
}

.miniapp-work-form .miniapp-toggle-field input:checked {
    background: var(--tg-theme-button-color, #2aabee);
}

.miniapp-work-form .miniapp-toggle-field input:checked::after {
    transform: translateX(20px);
}

.miniapp-work-form .miniapp-toggle-field > span {
    color: var(--tg-theme-text-color, #17212b);
    font-size: 14px;
    font-weight: 700;
}

.miniapp-work-form-wide {
    grid-column: 1 / -1;
}

.miniapp-file-field input {
    position: fixed;
    top: -100vh;
    left: -100vw;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.miniapp-file-button {
    display: inline-flex;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid rgb(42 171 238 / 22%);
    border-radius: 13px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgb(42 171 238 / 10%);
    color: var(--tg-theme-button-color, #2aabee);
    box-shadow: 0 4px 12px rgb(42 171 238 / 8%);
}

.miniapp-order-section .miniapp-file-button,
.miniapp-work-form .miniapp-file-button {
    display: inline-flex;
    width: 100%;
    min-height: 42px;
    padding: 0 13px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.miniapp-file-button svg {
    width: 19px;
    min-width: 19px;
    height: 19px;
    fill: none;
    stroke: var(--tg-theme-button-color, #2aabee);
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.miniapp-file-button b {
    font-size: 14px;
    font-weight: 800;
}

.miniapp-file-field:active .miniapp-file-button {
    opacity: .82;
}

.miniapp-file-field small {
    overflow: hidden;
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-file-list {
    display: grid;
    margin: 4px 0 0;
    padding: 0;
    gap: 6px;
    list-style: none;
}

.miniapp-file-list[hidden] {
    display: none;
}

.miniapp-file-list li {
    display: grid;
    min-height: 36px;
    padding: 6px 6px 6px 10px;
    border-radius: 11px;
    grid-template-columns: minmax(0, 1fr) 28px;
    align-items: center;
    gap: 8px;
    background: var(--tg-theme-secondary-bg-color, #eef3f7);
}

.miniapp-file-list span {
    overflow: hidden;
    color: var(--tg-theme-text-color, #17212b);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-file-list button {
    position: relative;
    display: block;
    width: 28px;
    min-height: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--tg-theme-hint-color, #7d8b99);
    grid-column: auto;
}

.miniapp-file-list button:active {
    background: rgb(0 0 0 / 7%);
}

.miniapp-file-list button i {
    position: absolute;
    top: 13px;
    left: 8px;
    width: 12px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.miniapp-file-list button i:first-child {
    transform: rotate(45deg);
}

.miniapp-file-list button i:last-child {
    transform: rotate(-45deg);
}

.miniapp-work-form button {
    min-height: 44px;
    border-radius: 12px;
    background: var(--tg-theme-button-color, #2aabee);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    grid-column: 1 / -1;
    box-shadow: 0 8px 18px rgb(42 171 238 / 18%);
}

.miniapp-work-form button:active {
    opacity: .86;
}

.miniapp-work-form .miniapp-file-list {
    display: grid;
    margin: 4px 0 0;
    padding: 0;
    gap: 6px;
    list-style: none;
}

.miniapp-work-form .miniapp-file-list[hidden] {
    display: none;
}

.miniapp-work-form .miniapp-file-list li {
    display: grid;
    min-height: 38px;
    padding: 6px 6px 6px 10px;
    grid-template-columns: minmax(0, 1fr) 30px;
    align-items: center;
    gap: 8px;
}

.miniapp-work-form .miniapp-file-list button {
    position: relative;
    display: block;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--tg-theme-hint-color, #7d8b99);
    grid-column: auto;
    justify-self: end;
    box-shadow: none;
}

.miniapp-work-card .status-badge {
    white-space: nowrap;
}

.miniapp-edit-button {
    display: inline-flex;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    justify-self: start;
    border: 1px solid rgb(42 171 238 / 22%);
    background: rgb(42 171 238 / 10%);
    color: var(--tg-theme-button-color, #2aabee);
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgb(42 171 238 / 8%);
}

.miniapp-edit-button:active {
    transform: translateY(1px);
    opacity: .88;
}

.is-miniapp-modal-open {
    overflow: hidden;
}

.miniapp-work-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
}

.miniapp-work-modal.is-open {
    display: block;
}

.miniapp-work-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 32%);
}

.miniapp-work-modal-sheet {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    max-height: min(84dvh, 640px);
    border-radius: 20px 20px 0 0;
    grid-template-rows: auto minmax(0, 1fr);
    background: var(--tg-theme-bg-color, #fff);
    box-shadow: 0 -10px 34px rgb(15 35 55 / 18%);
    overflow: hidden;
}

.miniapp-work-modal-header {
    display: grid;
    min-height: 64px;
    padding: 13px 12px 11px 16px;
    border-bottom: 1px solid var(--tg-theme-section-separator-color, #edf1f5);
    grid-template-columns: minmax(0, 1fr) 36px;
    align-items: center;
    gap: 10px;
}

.miniapp-work-modal-header h2 {
    overflow: hidden;
    margin: 0;
    color: var(--tg-theme-text-color, #17212b);
    font-size: 17px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-work-modal-header button {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
}

.miniapp-work-modal-header button:active {
    background: var(--tg-theme-secondary-bg-color, #eef3f7);
}

.miniapp-work-modal-header button::before,
.miniapp-work-modal-header button::after {
    position: absolute;
    top: 17px;
    left: 9px;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--tg-theme-hint-color, #7d8b99);
    content: "";
}

.miniapp-work-modal-header button::before {
    transform: rotate(45deg);
}

.miniapp-work-modal-header button::after {
    transform: rotate(-45deg);
}

.miniapp-work-modal-form {
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
    border-top: 0;
    overflow-y: auto;
}

.miniapp-accountable-modal-body {
    display: grid;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
    gap: 12px;
    overflow-y: auto;
}

.miniapp-accountable-balance-card {
    display: grid;
    min-height: 82px;
    padding: 12px;
    border-radius: 14px;
    align-content: center;
    gap: 5px;
    background: var(--tg-theme-secondary-bg-color, #f4f7fb);
}

.miniapp-accountable-balance-card span,
.miniapp-accountable-list h3 {
    margin: 0;
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.miniapp-accountable-balance-card strong {
    color: var(--tg-theme-text-color, #17212b);
    font-size: 22px;
    font-weight: 800;
}

.miniapp-accountable-list {
    display: grid;
    gap: 7px;
}

.miniapp-accountable-row {
    display: grid;
    min-height: 62px;
    padding: 10px;
    border-radius: 13px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    background: var(--tg-theme-secondary-bg-color, #f4f7fb);
}

.miniapp-accountable-row div {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.miniapp-accountable-row strong {
    overflow: hidden;
    color: var(--tg-theme-text-color, #17212b);
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-accountable-row span,
.miniapp-accountable-row p,
.miniapp-accountable-empty {
    margin: 0;
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.miniapp-accountable-row b {
    color: #218c5a;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.miniapp-accountable-row.is-expense b {
    color: #d74b43;
}

.miniapp-delivery-charge-row {
    display: grid;
    min-height: 72px;
    padding: 10px;
    border-radius: 13px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    background: var(--tg-theme-secondary-bg-color, #f4f7fb);
}

.miniapp-delivery-charge-row div {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.miniapp-delivery-charge-row strong {
    overflow: hidden;
    color: var(--tg-theme-text-color, #17212b);
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.miniapp-delivery-charge-row span,
.miniapp-delivery-charge-row p,
.miniapp-delivery-charge-row small {
    margin: 0;
    color: var(--tg-theme-hint-color, #7d8b99);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.miniapp-delivery-charge-row b {
    color: var(--tg-theme-text-color, #17212b);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.miniapp-accountable-empty {
    padding: 14px 10px;
    border-radius: 13px;
    background: var(--tg-theme-secondary-bg-color, #f4f7fb);
    text-align: center;
}

@media (max-width: 420px) {
    .miniapp-work-list {
        padding-right: 8px;
        padding-left: 8px;
    }

    .miniapp-calendar-card {
        margin-right: 8px;
        margin-left: 8px;
    }

    .miniapp-driver-summary {
        margin-right: 8px;
        margin-left: 8px;
        grid-auto-columns: minmax(154px, 78%);
    }

    .miniapp-driver-balance-summary {
        grid-auto-columns: minmax(0, 1fr);
    }

    .miniapp-driver-purchase-summary {
        grid-auto-columns: unset;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .miniapp-status-filter {
        margin-right: 8px;
        margin-left: 8px;
        grid-auto-columns: minmax(118px, 46%);
    }

    .miniapp-work-card-main {
        grid-template-columns: 44px minmax(0, 1fr) 18px;
    }

    .miniapp-work-form {
        grid-template-columns: 1fr;
    }

    .miniapp-inline-upload-form {
        grid-template-columns: 1fr;
    }

    .miniapp-inline-upload-form > button {
        width: 100%;
    }

    .miniapp-work-modal-sheet {
        max-height: 88dvh;
    }
}

@media (prefers-color-scheme: dark) {
    .miniapp-workspace {
        background: var(--tg-theme-secondary-bg-color, #0f1a23);
    }

    .miniapp-calendar-card,
    .miniapp-work-card,
    .miniapp-driver-summary article,
    .miniapp-status-filter a:not(.is-active),
    .miniapp-day-head b {
        background: var(--tg-theme-bg-color, #17212b);
    }

    .miniapp-work-card-main time,
    .miniapp-work-details div,
    .miniapp-simple-row,
    .miniapp-purchase-card,
    .miniapp-collapse summary,
    .miniapp-delivery-charge-grid div,
    .miniapp-collapse-empty,
    .miniapp-accountable-balance-card,
    .miniapp-accountable-row,
    .miniapp-delivery-charge-row,
    .miniapp-accountable-empty,
    .miniapp-client-payment-row,
    .miniapp-client-payment-row-wrap,
    .miniapp-client-payment-empty,
    .miniapp-payment-row,
    .miniapp-print-actions a {
        background: #1f2c37;
    }

    .miniapp-work-section,
    .miniapp-collapse,
    .miniapp-work-form,
    .miniapp-work-modal-header {
        border-color: #111a22;
    }

    .miniapp-work-form input,
    .miniapp-work-form select,
    .miniapp-work-form textarea {
        border-color: #101820;
        background: #1f2c37;
        color: var(--tg-theme-text-color, #f5f7fb);
    }

    .miniapp-work-form .miniapp-installation-day-row button,
    .miniapp-work-form .miniapp-installation-day-add {
        border-color: #101820;
        background: #1f2c37;
    }

    .miniapp-file-button {
        border-color: #101820;
        background: #1f2c37;
        color: #d7e0e8;
    }

    .miniapp-file-list li {
        background: #1f2c37;
    }

    .miniapp-file-list span {
        color: var(--tg-theme-text-color, #f5f7fb);
    }

    .miniapp-file-list button:active {
        background: rgb(255 255 255 / 8%);
    }

    .miniapp-payment-file:active {
        background: rgb(255 255 255 / 8%);
    }

    .miniapp-work-modal-sheet {
        background: var(--tg-theme-bg-color, #17212b);
    }

    .miniapp-work-modal-backdrop {
        background: rgb(0 0 0 / 56%);
    }
}

.miniapp-body.is-telegram-dark .miniapp-workspace {
    background: var(--tg-theme-secondary-bg-color, #0f1a23);
}

.miniapp-body.is-telegram-dark .miniapp-calendar-card,
.miniapp-body.is-telegram-dark .miniapp-work-card,
.miniapp-body.is-telegram-dark .miniapp-driver-summary article,
.miniapp-body.is-telegram-dark .miniapp-status-filter a:not(.is-active),
.miniapp-body.is-telegram-dark .miniapp-day-head b {
    background: var(--tg-theme-bg-color, #17212b);
}

.miniapp-body.is-telegram-dark .miniapp-work-card-main time,
.miniapp-body.is-telegram-dark .miniapp-work-details div,
.miniapp-body.is-telegram-dark .miniapp-simple-row,
.miniapp-body.is-telegram-dark .miniapp-purchase-card,
.miniapp-body.is-telegram-dark .miniapp-collapse summary,
.miniapp-body.is-telegram-dark .miniapp-delivery-charge-grid div,
.miniapp-body.is-telegram-dark .miniapp-collapse-empty,
.miniapp-body.is-telegram-dark .miniapp-accountable-balance-card,
.miniapp-body.is-telegram-dark .miniapp-accountable-row,
.miniapp-body.is-telegram-dark .miniapp-delivery-charge-row,
.miniapp-body.is-telegram-dark .miniapp-accountable-empty,
.miniapp-body.is-telegram-dark .miniapp-client-payment-row,
.miniapp-body.is-telegram-dark .miniapp-client-payment-row-wrap,
.miniapp-body.is-telegram-dark .miniapp-client-payment-empty,
.miniapp-body.is-telegram-dark .miniapp-payment-row,
.miniapp-body.is-telegram-dark .miniapp-print-actions a {
    background: #1f2c37;
}

.miniapp-body.is-telegram-dark .miniapp-work-section,
.miniapp-body.is-telegram-dark .miniapp-collapse,
.miniapp-body.is-telegram-dark .miniapp-work-form,
.miniapp-body.is-telegram-dark .miniapp-work-modal-header {
    border-color: #111a22;
}

.miniapp-body.is-telegram-dark .miniapp-work-form input,
.miniapp-body.is-telegram-dark .miniapp-work-form select,
.miniapp-body.is-telegram-dark .miniapp-work-form textarea {
    border-color: #101820;
    background: #1f2c37;
    color: var(--tg-theme-text-color, #f5f7fb);
}

.miniapp-body.is-telegram-dark .miniapp-work-form .miniapp-installation-day-row button,
.miniapp-body.is-telegram-dark .miniapp-work-form .miniapp-installation-day-add {
    border-color: rgb(42 171 238 / 26%);
    background: rgb(42 171 238 / 13%);
    color: #5fc8ff;
    box-shadow: none;
}

.miniapp-body.is-telegram-dark .miniapp-collapse summary b.miniapp-collapse-summary-total small {
    background: #2b3946;
    color: #9fb0bf;
}

.miniapp-body.is-telegram-dark .miniapp-file-button {
    border-color: rgb(42 171 238 / 26%);
    background: rgb(42 171 238 / 13%);
    color: #5fc8ff;
    box-shadow: none;
}

.miniapp-body.is-telegram-dark .miniapp-edit-button {
    border-color: rgb(42 171 238 / 26%);
    background: rgb(42 171 238 / 13%);
    color: #5fc8ff;
    box-shadow: none;
}

.miniapp-body.is-telegram-dark .miniapp-file-list li {
    background: #1f2c37;
}

.miniapp-body.is-telegram-dark .miniapp-file-list span {
    color: var(--tg-theme-text-color, #f5f7fb);
}

.miniapp-body.is-telegram-dark .miniapp-file-list button:active {
    background: rgb(255 255 255 / 8%);
}

.miniapp-body.is-telegram-dark .miniapp-payment-file:active {
    background: rgb(255 255 255 / 8%);
}

.miniapp-body.is-telegram-dark .miniapp-work-modal-sheet {
    background: var(--tg-theme-bg-color, #17212b);
}

.miniapp-body.is-telegram-dark .miniapp-work-modal-backdrop {
    background: rgb(0 0 0 / 56%);
}

@media (prefers-color-scheme: dark) {
    html body .order-section-header .icon-text-button,
    html body .customer-picker-buttons .icon-text-button,
    html body .field-action-buttons .icon-text-button,
    html body .nomenclature-picker-actions .icon-text-button,
    html body .order-content-header .secondary-button {
        background: rgb(255 255 255 / 12%) !important;
        background-color: rgb(255 255 255 / 12%) !important;
        color: #f8fafc !important;
        -webkit-text-fill-color: #f8fafc;
    }

    html body .order-section-header .icon-text-button:hover,
    html body .customer-picker-buttons .icon-text-button:hover,
    html body .field-action-buttons .icon-text-button:hover,
    html body .nomenclature-picker-actions .icon-text-button:hover,
    html body .order-content-header .secondary-button:hover {
        background: rgb(255 255 255 / 18%) !important;
        background-color: rgb(255 255 255 / 18%) !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff;
    }

    html body .order-content-header .primary-button,
    html body .modal-footer .primary-button,
    html body .modal-actions .primary-button {
        color: #fff !important;
        -webkit-text-fill-color: #fff;
    }

    html body .icon-text-button .plus-icon,
    html body .icon-text-button .edit-icon,
    html body .primary-button .plus-icon,
    html body .secondary-button .plus-icon {
        color: currentColor !important;
        -webkit-text-fill-color: currentColor;
    }

    html body .icon-text-button .plus-icon::before,
    html body .icon-text-button .plus-icon::after,
    html body .primary-button .plus-icon::before,
    html body .primary-button .plus-icon::after,
    html body .secondary-button .plus-icon::before,
    html body .secondary-button .plus-icon::after {
        background: currentColor !important;
        background-color: currentColor !important;
    }

    html body .icon-text-button .edit-icon {
        background: currentColor !important;
        background-color: currentColor !important;
    }

    html body .field-action-buttons .icon-text-button:disabled,
    html body .field-action-buttons .icon-text-button.is-disabled,
    html body .customer-picker-buttons .icon-text-button:disabled,
    html body .customer-picker-buttons .icon-text-button.is-disabled,
    html body .nomenclature-picker-actions .icon-text-button.is-disabled {
        background: rgb(255 255 255 / 7%) !important;
        background-color: rgb(255 255 255 / 7%) !important;
        color: #9ca3af !important;
        -webkit-text-fill-color: #9ca3af;
    }
}

.product-returns-workspace {
    display: grid;
    gap: 20px;
}

.product-returns-workspace .data-grid,
.product-returns-workspace .table-scroll {
    overflow: visible;
}

.return-section:has(.row-actions[open]) {
    overflow: visible;
}

.customer-returns-table tbody tr:has(.row-actions[open]),
.stock-transfers-table tbody tr:has(.row-actions[open]),
.supplier-returns-table tbody tr:has(.row-actions[open]),
.work-schedules-table tbody tr:has(.row-actions[open]) {
    position: relative;
    z-index: 5;
}

.work-schedules-list-section,
.work-schedules-list-section .data-grid,
.work-schedules-list-section .table-scroll {
    overflow: visible;
}

.work-schedules-table {
    min-width: 900px;
}

.work-schedules-table .row-actions-menu {
    width: max-content;
    min-width: 210px;
    max-width: min(320px, calc(100vw - 36px));
}

.work-schedules-table tbody tr:nth-last-child(-n + 2) .row-actions-menu {
    top: auto;
    bottom: calc(100% + 5px);
}

.work-schedules-workspace {
    display: grid;
    min-width: 0;
    gap: 22px;
}

.work-schedules-workspace form {
    display: grid;
    min-width: 0;
    gap: 20px;
}

.work-schedule-header {
    display: flex;
    min-width: 0;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.work-schedule-title {
    min-width: 0;
}

.work-schedule-title h1 {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-page-title);
    font-weight: var(--font-weight-title);
    line-height: var(--line-height-title);
}

.work-schedule-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.work-schedule-save-status {
    display: inline-flex;
    min-height: 40px;
    padding: 0 4px;
    border-radius: 999px;
    align-items: center;
    color: var(--color-muted);
    background: transparent;
    font-size: var(--font-size-caption);
    font-weight: 800;
}

.work-schedule-save-status[data-state='saving'] {
    color: #7c5f14;
}

.work-schedule-save-status[data-state='saved'] {
    color: #28704f;
}

.work-schedule-save-status[data-state='error'] {
    color: #9b2c2c;
}

.work-schedule-summary {
    display: grid;
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    grid-template-columns: minmax(120px, .6fr) minmax(170px, .8fr) minmax(180px, 1fr) minmax(220px, 1.4fr);
    gap: 12px;
}

.work-schedule-summary div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.work-schedule-summary span {
    color: var(--color-muted);
    font-size: var(--font-size-caption);
    font-weight: 800;
    text-transform: uppercase;
}

.work-schedule-summary strong {
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-title);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-schedule-calendar-header {
    align-items: center;
}

.work-schedule-calendar-section {
    min-width: 0;
    overflow: hidden;
}

.work-schedule-calendar-header .secondary-button {
    display: inline-flex;
    width: auto;
    min-width: 238px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;
}

.work-schedule-calendar-header .secondary-button .plus-icon {
    flex: 0 0 auto;
}

.work-schedule-requisites {
    display: grid;
    padding: 22px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.work-schedule-requisites label {
    display: grid;
    color: var(--color-muted);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-control);
    gap: 8px;
}

.work-schedule-requisites input,
.work-schedule-requisites select,
.work-schedule-requisites textarea {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    outline: none;
    color: var(--color-text);
    background: var(--color-surface);
    font: inherit;
}

.work-schedule-requisites textarea {
    min-height: 86px;
    padding-top: 12px;
    resize: vertical;
}

.work-schedule-notes {
    grid-column: 1 / -1;
}

.work-schedule-legend {
    display: flex;
    padding: 0;
    flex-wrap: wrap;
    gap: 10px;
}

.work-schedule-legend-panel {
    display: grid;
    min-width: 0;
    padding: 0 2px;
    gap: 10px;
}

.work-schedule-legend-item {
    display: inline-flex;
    min-height: 34px;
    padding: 5px 11px 5px 7px;
    border-radius: 999px;
    align-items: center;
    color: var(--color-text);
    background: #f3f5f8;
    font-size: var(--font-size-body);
    font-weight: 700;
    gap: 8px;
}

.work-schedule-legend-item strong {
    display: inline-grid;
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    place-items: center;
    color: var(--color-surface);
    background: var(--color-primary);
    font-size: 12px;
}

.work-schedule-legend-item.status-work strong,
.work-schedule-day-select.status-work {
    background: var(--color-accent);
}

.work-schedule-legend-item.status-day_off strong,
.work-schedule-day-select.status-day_off {
    background: #8a91a0;
}

.work-schedule-legend-item.status-vacation strong,
.work-schedule-day-select.status-vacation {
    background: #316bdc;
}

.work-schedule-legend-item.status-time_off strong,
.work-schedule-day-select.status-time_off {
    background: #805ad5;
}

.work-schedule-legend-item.status-sick strong,
.work-schedule-day-select.status-sick {
    background: #d99018;
}

.work-schedule-legend-item.status-absence strong,
.work-schedule-day-select.status-absence {
    background: #dc3545;
}

.work-schedule-scroll {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    border-top: 1px solid var(--color-border);
    overscroll-behavior-x: contain;
}

.work-schedule-calendar {
    min-width: 1480px;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 13px;
}

.work-schedule-calendar th,
.work-schedule-calendar td {
    min-width: 42px;
    height: 52px;
    padding: 6px;
    border-right: 1px solid #eceef1;
    border-bottom: 1px solid #eceef1;
    background: var(--color-surface);
    text-align: center;
}

.work-schedule-calendar thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    color: var(--color-muted);
    background: var(--color-surface-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.work-schedule-calendar thead th span,
.work-schedule-calendar thead th small {
    display: block;
}

.work-schedule-calendar .work-schedule-employee-column {
    position: sticky;
    left: 0;
    z-index: 3;
    min-width: 260px;
    max-width: 260px;
    border-left: 0;
    text-align: left;
}

.work-schedule-calendar tbody .work-schedule-employee-column {
    background: var(--color-surface-muted);
}

.work-schedule-employee-info {
    min-width: 0;
}

.work-schedule-employee-info span,
.work-schedule-employee-info small {
    display: block;
}

.work-schedule-employee-info span {
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-title);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-schedule-employee-info small {
    margin-top: 3px;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
}

.work-schedule-remove-employee {
    display: inline-flex;
    padding: 0 8px;
    min-height: 26px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    align-items: center;
    color: #454b59;
    background: var(--color-surface);
    font-size: var(--font-size-caption);
    font-weight: 800;
    cursor: pointer;
}

.work-schedule-remove-employee:hover {
    border-color: #b8bdc8;
    background: var(--color-surface-muted);
}

.work-schedule-calendar .work-schedule-actions-column {
    min-width: 96px;
    width: 96px;
    text-align: center;
}

.work-schedule-empty {
    padding: 28px 18px !important;
    color: var(--color-muted);
    background: var(--color-surface-muted) !important;
    font-weight: 800;
    text-align: center !important;
}

.work-schedule-calendar tr.is-hidden,
.is-hidden {
    display: none !important;
}

.work-schedule-calendar th.is-weekend,
.work-schedule-calendar td.is-weekend {
    background: var(--color-surface-muted);
}

.work-schedule-day-select {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    outline: none;
    color: var(--color-surface);
    background: transparent;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    text-align-last: center;
    cursor: pointer;
    appearance: none;
}

.work-schedule-day-select.status-empty {
    border-color: #dce1ea;
    color: var(--color-muted);
    background: var(--color-surface);
}

.work-schedule-day-select:disabled {
    cursor: default;
    opacity: 1;
}

.work-schedule-modal-window,
.work-schedule-employee-modal-window {
    width: min(100%, 720px);
    border-radius: var(--radius-md);
}

@media (max-width: 820px) {
    .work-schedule-header {
        display: grid;
        align-items: start;
    }

    .work-schedule-header-actions {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: stretch;
        gap: 8px;
    }

    .work-schedule-save-status {
        min-height: auto;
        justify-content: flex-start;
        padding: 0;
    }

    .work-schedule-header-actions .primary-button,
    .work-schedule-header-actions .secondary-button {
        width: 100%;
    }

    .work-schedule-summary {
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        padding: 14px 18px;
        grid-template-columns: 1fr 1fr;
    }

    .work-schedule-requisites {
        padding: 16px;
        grid-template-columns: 1fr;
    }

    .work-schedule-legend {
        gap: 8px;
    }

    .work-schedule-calendar {
        min-width: 1180px;
    }

    .work-schedules-list-section .table-scroll {
        overflow: visible;
    }

    .work-schedules-list-section .work-schedules-table {
        min-width: 0;
    }

    .work-schedule-calendar .work-schedule-employee-column {
        min-width: 190px;
        max-width: 190px;
    }

    .work-schedule-calendar th,
    .work-schedule-calendar td {
        min-width: 36px;
        height: 48px;
        padding: 5px;
    }

    .work-schedule-day-select {
        width: 30px;
        height: 30px;
    }
}

.product-return-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.return-document-type-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.return-document-type-card {
    display: flex;
    min-height: 98px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    align-items: flex-start;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
    gap: 14px;
}

.return-document-type-card:hover {
    border-color: #d1d6df;
    box-shadow: 0 12px 28px rgb(25 30 50 / 8%);
    transform: translateY(-1px);
}

.return-document-type-card strong,
.return-document-type-card small {
    display: block;
}

.return-document-type-card strong {
    margin-bottom: 5px;
    font-size: var(--font-size-control);
    font-weight: var(--font-weight-title);
}

.return-document-type-card small {
    color: var(--color-muted);
    font-size: var(--font-size-body);
    font-weight: 600;
    line-height: 1.35;
}

.return-document-type-icon {
    width: 24px;
    height: 24px;
    margin-top: 2px;
    flex: 0 0 auto;
    color: var(--color-accent);
}

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

.return-summary-card {
    display: grid;
    min-height: 94px;
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    align-content: center;
    background: var(--color-surface);
    gap: 6px;
}

.return-summary-card strong {
    color: var(--color-text);
    font-size: var(--font-size-page-title);
    font-weight: var(--font-weight-title);
    line-height: 1.1;
}

.return-summary-card small {
    color: var(--color-muted);
    font-size: var(--font-size-body);
    font-weight: 700;
}

.return-section {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.return-section-header {
    display: flex;
    min-height: 68px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--color-border);
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.return-section-header h2 {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-dialog-title);
    line-height: var(--line-height-title);
}

.return-section-header p {
    margin: 4px 0 0;
    color: var(--color-muted);
    font-size: var(--font-size-body);
}

.return-section-header > div:first-child {
    min-width: 0;
    width: 100%;
}

.list-search-form {
    display: flex;
    width: min(100%, 760px);
    align-items: center;
    gap: 10px;
}

.list-search-form .search-field {
    min-width: 260px;
    flex: 1 1 auto;
}

.list-search-form .secondary-button {
    min-height: 44px;
    padding-inline: 22px;
    white-space: nowrap;
    flex: 0 0 auto;
}

.return-document-list {
    display: grid;
    padding: 16px;
    gap: 12px;
}

.return-document-card {
    position: relative;
    display: grid;
    padding: 15px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    align-items: start;
    background: var(--color-surface-muted);
    grid-template-columns: minmax(0, 1fr) minmax(160px, auto) auto;
    gap: 14px;
}

.return-document-card > div {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.return-document-card strong {
    color: var(--color-text);
    font-size: var(--font-size-control);
    font-weight: var(--font-weight-title);
}

.return-document-card small,
.return-document-card li {
    color: var(--color-muted);
    font-size: var(--font-size-body);
    font-weight: 600;
}

.return-document-card ul {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    grid-column: 1 / -1;
    gap: 6px;
}

.return-document-card .row-actions {
    justify-self: end;
}

.product-return-modal-window {
    width: min(1180px, calc(100vw - 32px));
}

.modal-section-title {
    margin: 18px 0 12px;
    color: var(--color-text);
    font-size: var(--font-size-control);
    font-weight: var(--font-weight-title);
}

.return-lines-grid {
    display: grid;
    align-items: end;
    grid-template-columns: minmax(220px, 1.5fr) minmax(100px, .45fr) minmax(150px, .8fr) minmax(170px, 1fr);
    gap: 12px;
}

.return-lines-grid-transfer {
    grid-template-columns: minmax(220px, 1.5fr) minmax(100px, .45fr) minmax(170px, 1fr);
}

.stock-balances-filter label:first-child select {
    width: 220px;
}

.stock-balances-filter label:nth-child(2) input {
    width: 260px;
}

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

.supplier-receivables-filter input {
    width: 300px;
}

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

.stock-transfer-toolbar {
    display: flex;
    margin-bottom: 12px;
    justify-content: flex-start;
}

.stock-transfer-lines,
.stock-transfer-picker-list {
    display: grid;
    gap: 10px;
}

.stock-transfer-line-row,
.stock-transfer-stock-option {
    display: grid;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    align-items: end;
    background: var(--color-surface-muted);
    gap: 10px;
}

.stock-transfer-line-row {
    grid-template-columns: minmax(260px, 1.5fr) minmax(110px, .45fr) minmax(180px, .9fr) auto;
}

.supplier-return-line-row {
    grid-template-columns: minmax(260px, 1.45fr) minmax(105px, .4fr) minmax(120px, .45fr) minmax(160px, .75fr) auto;
}

.stock-transfer-stock-option {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.stock-transfer-stock-option.is-added {
    border-color: #bde8d7;
    background: #f1fbf6;
}

.stock-transfer-stock-option.is-added .stock-transfer-line-info strong {
    color: #287b57;
}

.stock-transfer-stock-option.is-added .secondary-button {
    border-color: #bde8d7;
    color: #287b57;
    background: #e3f6ec;
    box-shadow: none;
    cursor: default;
}

.stock-transfer-line-info {
    display: grid;
    min-width: 0;
    align-self: center;
    gap: 4px;
}

.stock-transfer-line-info strong,
.stock-transfer-line-info span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.stock-transfer-line-info strong {
    color: var(--color-text);
    font-size: var(--font-size-control);
    font-weight: var(--font-weight-title);
    white-space: nowrap;
}

.stock-transfer-line-info span {
    color: var(--color-muted);
    font-size: var(--font-size-body);
    font-weight: 600;
}

.stock-transfer-line-remove {
    min-width: 96px;
}

.stock-transfer-picker-window {
    z-index: 120;
}

.product-return-order-picker .customer-picker-dropdown {
    z-index: 80;
}

.product-return-lines-hint {
    margin: -2px 0 12px;
    color: var(--color-muted);
    font-size: var(--font-size-body);
    font-weight: 600;
}

.product-return-line-row {
    display: grid;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    align-items: end;
    background: var(--color-surface-muted);
    grid-column: 1 / -1;
    grid-template-columns: minmax(240px, 1.6fr) minmax(96px, .45fr) minmax(150px, .7fr) minmax(170px, .9fr) auto;
    gap: 10px;
}

.product-return-line-info {
    display: grid;
    min-width: 0;
    align-self: center;
    gap: 4px;
}

.product-return-line-info strong,
.product-return-line-info span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-return-line-info strong {
    color: var(--color-text);
    font-size: var(--font-size-control);
    font-weight: var(--font-weight-title);
    white-space: nowrap;
}

.product-return-line-info span {
    color: var(--color-muted);
    font-size: var(--font-size-body);
    font-weight: 600;
}

.product-return-line-remove {
    min-width: 96px;
    align-self: end;
}

.product-return-lines-empty {
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-muted);
    background: var(--color-surface-muted);
    font-weight: 700;
    grid-column: 1 / -1;
}

.warehouses-grid .orders-table tr[data-deleted='1'] {
    background: #fafafa;
}

.warehouses-grid .orders-table tr[data-deleted='1'] .cell-stack,
.warehouses-grid .orders-table tr[data-deleted='1'] .status-badge {
    opacity: .62;
}

@media (max-width: 760px) {
    .product-return-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .return-summary-grid {
        grid-template-columns: 1fr;
    }

    .return-document-type-grid {
        grid-template-columns: 1fr;
    }

    .return-document-type-card {
        min-height: auto;
        padding: 14px 16px;
    }

    .return-summary-card {
        min-height: auto;
        padding: 14px;
    }

    .return-summary-card strong {
        font-size: var(--font-size-dialog-title);
    }

    .return-section {
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .return-section-header {
        display: grid;
        padding: 14px 16px;
        align-items: start;
    }

    .list-search-form {
        display: grid;
        width: 100%;
        gap: 10px;
    }

    .list-search-form .search-field {
        min-width: 0;
        width: 100%;
    }

    .list-search-form .secondary-button {
        width: 100%;
    }

    .return-document-list {
        padding: 12px 0;
    }

    .return-document-card {
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        background: var(--color-surface);
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .return-document-card > div:nth-child(2) {
        grid-column: 1 / -1;
    }

    .return-lines-grid,
    .return-lines-grid-transfer {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .stock-balances-filter {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .stock-balances-filter label:first-child select,
    .stock-balances-filter label:nth-child(2) input {
        width: 100%;
    }

    .supplier-receivables-filter input {
        width: 100%;
    }

    .stock-balances-metrics,
    .supplier-receivables-metrics {
        grid-template-columns: 1fr;
    }

    .product-return-line-row {
        grid-template-columns: 1fr;
    }

    .stock-transfer-line-row,
    .supplier-return-line-row,
    .stock-transfer-stock-option {
        grid-template-columns: 1fr;
    }

    .product-return-line-info strong {
        white-space: normal;
    }

    .stock-transfer-line-info strong {
        white-space: normal;
    }

    .product-return-line-remove,
    .stock-transfer-line-remove {
        width: 100%;
    }

    .product-return-modal-window {
        width: 100vw;
    }

    .organization-document-file-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-color-scheme: dark) {
    .nomenclature-favorite-button {
        border-color: rgb(255 255 255 / 14%);
        background: rgb(255 255 255 / 10%);
        color: #cbd5e1;
    }

    .order-line-picker-item-actions .nomenclature-favorite-button {
        border-color: rgb(255 255 255 / 14%);
        background: rgb(255 255 255 / 12%);
        color: #f8fafc;
    }

    .nomenclature-favorite-button:hover {
        border-color: rgb(239 82 47 / 50%);
        background: rgb(239 82 47 / 14%);
        color: #ff8b70;
    }

    .nomenclature-favorite-button.is-active {
        border-color: rgb(239 82 47 / 55%);
        background: rgb(239 82 47 / 18%);
        color: #ff8b70;
    }

    .order-line-picker-item-actions .nomenclature-favorite-button.is-active {
        border-color: rgb(239 82 47 / 55%);
        background: rgb(239 82 47 / 18%);
        color: #ff8b70;
    }

    .order-line-picker-tabs {
        border-color: rgb(255 255 255 / 14%);
        background: rgb(255 255 255 / 8%);
    }

    .order-line-picker-tabs button {
        color: #cbd5e1;
    }

    .order-line-picker-tabs button.is-active {
        background: rgb(255 255 255 / 14%);
        color: #fff;
        box-shadow: none;
    }

    .organization-document-file {
        border-color: rgb(255 255 255 / 16%);
        background: rgb(255 255 255 / 8%);
    }

    .organization-document-file:hover,
    .organization-document-file.has-file {
        border-color: rgb(255 255 255 / 24%);
        background: rgb(255 255 255 / 12%);
    }

    .organization-document-file-icon,
    .organization-document-file strong {
        color: #f8fafc;
    }

    .organization-document-file small {
        color: #cbd5e1;
    }
}

@media (max-width: 820px) {
    .order-content-header .order-content-actions.order-product-actions {
        display: grid !important;
        width: 100% !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    .order-content-header .order-content-actions.order-product-actions .order-product-action {
        display: inline-flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 8px !important;
        flex: none !important;
        justify-content: center !important;
        align-items: center !important;
        white-space: nowrap !important;
    }

    .order-content-header .order-content-actions.order-product-actions .order-product-action-icon,
    .order-content-header .order-content-actions.order-product-actions .order-product-action-add {
        padding: 0 !important;
    }

    .order-content-header .order-content-actions.order-product-actions .order-product-action > span:not(.plus-icon) {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .order-content-header .order-content-actions.order-product-actions .order-product-action-icon > span:not(.plus-icon),
    .order-content-header .order-content-actions.order-product-actions .order-product-action-icon > b {
        display: none !important;
    }

    .order-content-header .order-content-actions.order-product-actions .order-product-action-catalog {
        grid-column: 1 / 3 !important;
    }

    .order-content-header .order-content-actions.order-product-actions .order-product-action-add {
        grid-column: 3 / 4 !important;
    }

    .order-lines,
    .order-lines [data-order-lines],
    .order-line-row,
    .order-lines-has-markup .order-line-row {
        width: 100%;
        max-width: 100%;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    .order-lines {
        overflow-x: hidden;
    }

    .order-line-row,
    .order-lines-has-markup .order-line-row {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr)) 32px !important;
        gap: 8px 7px;
        padding: 12px 46px 12px 22px;
        overflow: hidden;
    }

    .order-lines-has-markup .order-line-row {
        grid-template-columns: repeat(7, minmax(0, 1fr)) 32px !important;
    }

    .order-line-index {
        width: 22px;
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: start;
        justify-self: start;
        padding-top: 2px;
        font-size: 10px;
        line-height: 1.2;
        text-align: left;
    }

    .order-line-product {
        width: 100%;
        max-width: 100%;
        grid-column: 1 / -2 !important;
        padding-left: 28px;
        padding-right: 0;
    }

    .order-line-product .cell-stack,
    .order-line-product strong,
    .order-line-product .cell-secondary {
        max-width: 100%;
        min-width: 0;
    }

    .order-line-product strong {
        overflow-wrap: anywhere;
    }

    .order-line-row > label,
    .order-line-unit-cell {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        display: grid;
        align-content: start;
        gap: 2px;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .order-line-row > label:nth-of-type(1) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .order-line-unit-cell {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    .order-line-row > label:nth-of-type(2) {
        grid-column: 3 !important;
        grid-row: 2 !important;
    }

    .order-line-row > label:nth-of-type(3) {
        grid-column: 4 !important;
        grid-row: 2 !important;
    }

    .order-line-row > label:nth-of-type(4) {
        grid-column: 5 !important;
        grid-row: 2 !important;
    }

    .order-line-row > label:nth-of-type(5) {
        grid-column: 6 !important;
        grid-row: 2 !important;
    }

    .order-lines-has-markup .order-line-row > label:nth-of-type(4) {
        grid-column: 5 !important;
        grid-row: 2 !important;
    }

    .order-lines-has-markup .order-line-row > label:nth-of-type(5) {
        grid-column: 6 !important;
        grid-row: 2 !important;
    }

    .order-lines-has-markup .order-line-row > label:nth-of-type(6) {
        grid-column: 7 !important;
        grid-row: 2 !important;
    }

    .order-line-row > .row-actions {
        grid-column: -2 / -1 !important;
        grid-row: 1 !important;
        justify-self: end;
        align-self: start;
    }

    .order-line-row input,
    .order-line-row select,
    .order-line-unit-label {
        max-width: 100%;
        min-width: 0;
        font-size: 10px;
        line-height: 1.2;
    }

    .order-line-unit-label {
        font-weight: 400;
    }

    .order-line-row .mobile-field-label,
    .order-line-unit-cell .mobile-field-label {
        font-size: 7px;
        line-height: 1.1;
    }

    .order-line-total,
    .order-lines-has-markup .order-line-total {
        width: 100%;
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        justify-self: start;
        padding-top: 2px;
        font-size: 13px;
        line-height: 1.2;
        text-align: left;
    }
}

@media (max-width: 820px) {
    .order-line-picker-modal-window {
        width: 100vw;
        max-height: 94dvh;
    }

    .order-line-picker-body {
        gap: 12px;
    }

    .order-line-picker-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .order-line-picker-create-action {
        min-width: 46px;
        padding: 0 12px;
    }

    .order-line-picker-breadcrumbs {
        min-height: 0;
        gap: 6px;
        font-size: 12px;
        line-height: 1.35;
    }

    .order-line-picker-list {
        max-height: min(58dvh, 560px);
        overflow-x: hidden;
    }

    .order-line-picker-row {
        min-width: 0;
        box-sizing: border-box;
    }

    .order-line-picker-item-row,
    .order-line-picker-item-row.is-action-row,
    .order-line-picker-model-row {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
    }

    .order-line-picker-item-row .order-line-picker-select-area,
    .order-line-picker-item-row.is-action-row .order-line-picker-select-area,
    .order-line-picker-model-row > .order-line-picker-thumb + .cell-stack {
        min-width: 0;
    }

    .order-line-picker-item-row .order-line-picker-select-area,
    .order-line-picker-item-row.is-action-row .order-line-picker-select-area {
        width: 100%;
        grid-template-columns: 58px minmax(0, 1fr) !important;
        align-items: center;
        gap: 10px;
    }

    .order-line-picker-model-row {
        grid-template-columns: 58px minmax(0, 1fr) !important;
    }

    .order-line-picker-model-row .order-line-picker-model-side {
        width: 100%;
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        justify-items: start;
        align-items: center;
    }

    .order-line-picker-thumb {
        width: 58px;
        height: 58px;
    }

    .order-line-picker-item-row .cell-stack strong,
    .order-line-picker-variant-row strong {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
        word-break: break-word;
    }

    .order-line-picker-item-row .cell-stack small,
    .order-line-picker-variant-row small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .order-line-picker-side,
    .order-line-picker-variant-row .order-line-picker-side {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(76px, 1fr) auto auto auto;
        justify-items: start;
        align-items: center;
        gap: 8px;
    }

    .order-line-picker-side > b,
    .order-line-picker-price {
        justify-self: start;
        font-size: 13px;
    }

    .order-line-picker-added-count {
        justify-self: start;
        min-height: 26px;
        line-height: 26px;
    }

    .order-line-picker-add-button,
    .order-line-picker-related-action,
    .order-line-picker-row-actions .row-menu-button {
        width: 38px;
        height: 38px;
    }

    .order-line-picker-related,
    .order-line-picker-variants {
        padding: 0 10px 10px;
    }

    .order-line-picker-variant-row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px;
        padding: 10px;
    }

    .order-line-picker-row-actions .row-actions-menu {
        right: 0;
        min-width: min(230px, calc(100vw - 48px));
    }
}

@media (max-width: 820px) {
    .order-line-picker-side,
    .order-line-picker-variant-row .order-line-picker-side {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: 7px;
        min-width: 0;
        width: 100%;
    }

    .order-line-picker-side .order-line-picker-price,
    .order-line-picker-side > b {
        flex: 1 1 auto;
        min-width: 0;
        margin-right: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .order-line-picker-side .order-line-picker-added-count,
    .order-line-picker-side .order-line-picker-add-button,
    .order-line-picker-side .order-line-picker-related-action,
    .order-line-picker-side .order-line-picker-row-actions,
    .order-line-picker-side .row-menu-button {
        flex: 0 0 auto;
    }

    .order-line-picker-side .order-line-picker-row-actions {
        display: inline-flex;
        align-items: center;
        min-width: 0;
    }

    .order-line-picker-side .order-line-picker-add-button,
    .order-line-picker-side .order-line-picker-related-action,
    .order-line-picker-side .row-menu-button {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 820px) {
    .order-content-header .order-content-actions.order-product-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .order-content-header .order-content-actions.order-product-actions .order-product-action {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 42px !important;
        min-height: 42px !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }

    .order-content-header .order-content-actions.order-product-actions .order-product-action-icon {
        flex: 0 0 44px !important;
        width: 48px !important;
        min-width: 44px !important;
        max-width: 48px !important;
        aspect-ratio: 1 / 1;
        padding: 0 !important;
    }

    .order-content-header .order-content-actions.order-product-actions .order-product-action-icon:nth-child(1) {
        order: 1 !important;
    }

    .order-content-header .order-content-actions.order-product-actions .order-product-action-icon:nth-child(2) {
        order: 2 !important;
    }

    .order-content-header .order-content-actions.order-product-actions .order-product-action-delivery {
        order: 3 !important;
        flex: 1 1 calc(100% - 104px) !important;
        width: calc(100% - 104px) !important;
        padding: 0 10px !important;
    }

    .order-content-header .order-content-actions.order-product-actions .order-product-action-catalog {
        order: 4 !important;
        flex: 1 1 calc(50% - 4px) !important;
        width: calc(50% - 4px) !important;
        padding: 0 10px !important;
    }

    .order-content-header .order-content-actions.order-product-actions .order-product-action-add {
        order: 5 !important;
        flex: 1 1 calc(50% - 4px) !important;
        width: calc(50% - 4px) !important;
        padding: 0 10px !important;
        gap: 8px !important;
    }

    .order-content-header .order-content-actions.order-product-actions .order-product-action-delivery > span,
    .order-content-header .order-content-actions.order-product-actions .order-product-action-catalog > span:not(.plus-icon) {
        display: inline-block !important;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .order-content-header .order-content-actions.order-product-actions .order-product-action-add > span:not(.plus-icon) {
        display: inline-block !important;
        min-width: 0;
        overflow: visible;
        text-overflow: clip;
        white-space: nowrap;
    }
}

@media (max-width: 820px) {
    .order-line-row,
    .order-lines-has-markup .order-line-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) 32px !important;
        gap: 9px 8px !important;
        padding: 12px 44px 12px 12px !important;
        overflow: visible !important;
    }

    .order-line-product {
        grid-column: 1 / -2 !important;
        grid-row: 1 !important;
    }

    .order-line-row > label:nth-of-type(1) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .order-line-unit-cell {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    .order-line-row > label:nth-of-type(2) {
        grid-column: 3 !important;
        grid-row: 2 !important;
    }

    .order-line-row > label:nth-of-type(3) {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    .order-line-row > label:nth-of-type(4) {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    .order-line-row > label:nth-of-type(5) {
        grid-column: 3 !important;
        grid-row: 3 !important;
    }

    .order-lines-has-markup .order-line-row > label:nth-of-type(4) {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    .order-lines-has-markup .order-line-row > label:nth-of-type(5) {
        grid-column: 3 !important;
        grid-row: 3 !important;
    }

    .order-lines-has-markup .order-line-row > label:nth-of-type(6) {
        grid-column: 1 !important;
        grid-row: 4 !important;
    }

    .order-line-total {
        display: block !important;
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
        justify-self: stretch !important;
        padding-top: 4px !important;
        text-align: left !important;
        white-space: nowrap;
    }

    .order-lines-has-markup .order-line-total {
        grid-row: 5 !important;
    }
}

@media (min-width: 821px) {
    .order-lines {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
    }

    .order-lines-head,
    .order-line-row {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 876px !important;
        grid-template-columns:
            30px
            minmax(360px, 1fr)
            46px
            46px
            68px
            60px
            58px
            50px
            58px
            28px !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }

    .order-lines-has-markup .order-lines-head,
    .order-lines-has-markup .order-line-row {
        min-width: 940px !important;
        grid-template-columns:
            30px
            minmax(330px, 1fr)
            46px
            46px
            68px
            58px
            62px
            58px
            50px
            58px
            28px !important;
    }

    .order-line-total,
    .order-lines-has-markup .order-line-total {
        min-width: 0 !important;
        padding-right: 0 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 820px) {
    .order-line-row,
    .order-lines-has-markup .order-line-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) 32px !important;
        gap: 7px 8px !important;
        padding: 10px 44px 10px 12px !important;
        overflow: visible !important;
    }

    .order-line-index {
        display: none !important;
    }

    .order-line-product {
        grid-column: 1 / -2 !important;
        grid-row: 1 !important;
        gap: 8px !important;
        padding-left: 0 !important;
    }

    .order-line-thumb {
        width: 34px;
        height: 40px;
    }

    .order-line-title-row {
        display: flex;
        min-width: 0;
        align-items: baseline;
        gap: 6px;
    }

    .order-line-mobile-index {
        display: inline;
        flex: 0 0 auto;
        color: var(--color-text);
        font: inherit;
        font-weight: 800;
    }

    .order-line-product strong {
        min-width: 0;
        font-size: 12px !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere;
    }

    .order-line-product .cell-secondary {
        font-size: 11px !important;
        line-height: 1.15 !important;
    }

    .order-line-row > label,
    .order-line-unit-cell {
        display: grid !important;
        min-width: 0 !important;
        align-content: start;
        gap: 1px !important;
    }

    .order-line-row > label:nth-of-type(1) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .order-line-unit-cell {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    .order-line-row > label:nth-of-type(2) {
        grid-column: 3 !important;
        grid-row: 2 !important;
    }

    .order-line-row > label:nth-of-type(3) {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    .order-line-row > label:nth-of-type(4) {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    .order-line-row > label:nth-of-type(5) {
        grid-column: 3 !important;
        grid-row: 3 !important;
    }

    .order-lines-has-markup .order-line-row > label:nth-of-type(4) {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    .order-lines-has-markup .order-line-row > label:nth-of-type(5) {
        grid-column: 3 !important;
        grid-row: 3 !important;
    }

    .order-lines-has-markup .order-line-row > label:nth-of-type(6) {
        grid-column: 3 !important;
        grid-row: 3 !important;
    }

    .order-line-row input,
    .order-line-row select,
    .order-line-unit-label {
        height: auto !important;
        min-height: 16px !important;
        font-size: 11px !important;
        font-weight: 750 !important;
        line-height: 1.15 !important;
    }

    .order-line-row .mobile-field-label,
    .order-line-unit-cell .mobile-field-label {
        font-size: 8px !important;
        line-height: 1.05 !important;
    }

    .order-line-total {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
        padding-top: 2px !important;
        font-size: 15px !important;
        line-height: 1.15 !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    .order-lines-has-markup .order-line-total {
        grid-column: 2 / -1 !important;
        grid-row: 4 !important;
        align-self: end;
        justify-self: stretch;
        text-align: left !important;
    }

    .order-line-row > .row-actions {
        grid-column: -2 / -1 !important;
        grid-row: 1 !important;
        justify-self: end;
        align-self: start;
    }
}

@media (max-width: 820px) {
    .order-line-row,
    .order-lines-has-markup .order-line-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) 24px !important;
        gap: 6px 5px !important;
        padding: 9px 30px 9px 8px !important;
    }

    .order-line-product {
        gap: 7px !important;
    }

    .order-line-thumb {
        width: 30px;
        height: 36px;
    }

    .order-line-title-row {
        gap: 4px;
    }

    .order-line-product strong {
        font-size: 11px !important;
        line-height: 1.15 !important;
    }

    .order-line-product .cell-secondary {
        font-size: 10px !important;
    }

    .order-line-row input,
    .order-line-row select,
    .order-line-unit-label {
        min-height: 15px !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
    }

    .order-line-row .mobile-field-label,
    .order-line-unit-cell .mobile-field-label {
        font-size: 7px !important;
    }

    .order-line-total {
        font-size: 14px !important;
    }
}

@media (max-width: 820px) {
    .order-line-row,
    .order-lines-has-markup .order-line-row {
        grid-template-columns: repeat(4, minmax(0, 1fr)) 24px !important;
        gap: 6px 4px !important;
    }

    .order-line-product {
        grid-column: 1 / -2 !important;
    }

    .order-line-row > label:nth-of-type(1) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .order-line-unit-cell {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    .order-line-row > label:nth-of-type(2) {
        grid-column: 3 !important;
        grid-row: 2 !important;
    }

    .order-line-row > label:nth-of-type(3) {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    .order-line-row > label:nth-of-type(4) {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    .order-line-row > label:nth-of-type(5) {
        grid-column: 3 !important;
        grid-row: 3 !important;
    }

    .order-lines-has-markup .order-line-row > label:nth-of-type(4) {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    .order-lines-has-markup .order-line-row > label:nth-of-type(5) {
        grid-column: 3 !important;
        grid-row: 3 !important;
    }

    .order-lines-has-markup .order-line-row > label:nth-of-type(6) {
        grid-column: 4 !important;
        grid-row: 3 !important;
    }

    .order-line-total,
    .order-lines-has-markup .order-line-total {
        grid-column: 1 / -2 !important;
        grid-row: 4 !important;
        justify-self: stretch !important;
        text-align: right !important;
    }

    .order-line-row > .row-actions {
        grid-column: -2 / -1 !important;
        grid-row: 1 !important;
    }
}