/* Оформление «Кабинет»: графитовое меню, светлое поле, один акцент — петроль.
   Файл подключается после стилей Filament и без слоёв, поэтому его правила
   перекрывают правила Filament при равной или меньшей специфичности.
   Палитра серого и радиусы заданы переменными, которыми Filament пользуется сам */

:root {
    --gray-50: #f7f8f9;
    --gray-100: #f3f4f5;
    --gray-200: #e3e6e9;
    --gray-300: #c9cfd5;
    --gray-400: #8a939e;
    --gray-500: #6b7580;
    --gray-600: #5c6672;
    --gray-700: #3e4650;
    --gray-800: #2a3038;
    --gray-900: #1b1f24;
    --gray-950: #15181c;

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --radius-2xl: 10px;

    --amx-graphite: #1b1f24;
    --amx-graphite-line: rgb(255 255 255 / 0.06);
    --amx-graphite-text: #c6ccd3;
    --amx-graphite-muted: #7c8590;
    --amx-graphite-label: #6a7380;
    --amx-petrol-100: #d6eaeb;
    --amx-petrol-300: #7ebbbf;
    --amx-petrol-600: #1d6970;
    --amx-petrol-700: #1a555b;
    --amx-line: #e3e6e9;
    --amx-line-strong: #d5dadf;
    --amx-red: #b42318;
    --amx-shadow-float: 0 8px 24px rgb(21 24 28 / 0.1);
}

*,
*::before,
*::after {
    transition: none !important;
    animation: none !important;
}

[x-cloak] {
    display: none !important;
}

.fi-body {
    background-color: var(--gray-100);
    font-size: 14px;
}

.fi-ta-table,
.fi-in-text,
.fi-fo-field-content,
.amx-num {
    font-variant-numeric: tabular-nums;
}

/* ---------- Знак ---------- */

.amx-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    height: 100%;
}

.amx-brand-mark {
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--amx-petrol-300);
    stroke-width: 3;
    stroke-linecap: butt;
    stroke-linejoin: miter;
}

.amx-brand-name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.fi-topbar .amx-brand-mark {
    stroke: var(--amx-petrol-600);
}

.fi-topbar .amx-brand-name {
    color: var(--gray-950);
}

.fi-sidebar-header .fi-logo {
    height: auto !important;
}

/* ---------- Боковое меню ---------- */

.fi-sidebar,
.fi-sidebar-header,
.fi-sidebar-nav {
    background-color: var(--amx-graphite);
}

.fi-sidebar {
    color: var(--amx-graphite-text);
}

.fi-sidebar-header {
    height: 3.5rem;
    padding-inline: 1rem;
    box-shadow: none;
    border-bottom: 1px solid var(--amx-graphite-line);
}

.fi-sidebar-nav {
    row-gap: 0.125rem;
    padding: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgb(255 255 255 / 0.15) transparent;
}

.fi-sidebar-nav-groups {
    gap: 0.125rem;
}

.fi-sidebar-group {
    row-gap: 0;
}

.fi-sidebar-group-btn {
    height: 1.875rem;
    padding: 0 0.5rem;
    column-gap: 0.5rem;
}

.fi-sidebar-group-btn > .fi-icon {
    display: none;
}

.fi-sidebar-group-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--amx-graphite-label);
    line-height: 1;
}

.fi-sidebar-group-collapse-btn {
    color: #4e5661;
    width: 1.25rem;
    height: 1.25rem;
}

.fi-sidebar-group-collapse-btn .fi-icon {
    width: 0.75rem;
    height: 0.75rem;
}

.fi-sidebar-group-collapse-btn {
    rotate: 180deg;
}

.fi-sidebar-group.fi-collapsed .fi-sidebar-group-collapse-btn {
    rotate: 90deg;
}

.fi-sidebar-group-items,
.fi-sidebar-sub-group-items {
    row-gap: 0;
}

.fi-sidebar-item-btn {
    height: 2rem;
    padding: 0 0.5rem 0 0.625rem;
    column-gap: 0.625rem;
    border-radius: 6px;
    position: relative;
}

.fi-sidebar-item-btn:hover,
.fi-sidebar-item-btn:focus-visible {
    background-color: rgb(255 255 255 / 0.04);
}

.fi-sidebar-item-label {
    font-size: 13.5px;
    font-weight: 400;
    color: var(--amx-graphite-text);
}

.fi-sidebar-item-icon {
    color: var(--amx-graphite-muted);
    width: 1rem;
    height: 1rem;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-active > .fi-sidebar-item-btn {
    background-color: rgb(255 255 255 / 0.07);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    left: -0.5rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background-color: var(--amx-petrol-300);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label {
    color: #fff;
    font-weight: 500;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon {
    color: var(--amx-petrol-300);
}

.fi-sidebar-item-grouped-border > .fi-sidebar-item-grouped-border-part {
    background-color: var(--amx-petrol-300);
}

.fi-sidebar-item-grouped-border-part-not-first,
.fi-sidebar-item-grouped-border-part-not-last {
    background-color: rgb(255 255 255 / 0.12);
}

.fi-sidebar-item-badge-ctn .fi-badge {
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.3125rem;
    border-radius: 4px;
    background-color: var(--amx-red);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    box-shadow: none;
}

.fi-sidebar-item-badge-ctn .fi-badge.fi-color-gray,
.fi-sidebar-item-badge-ctn .fi-badge.fi-color-primary,
.fi-sidebar-item-badge-ctn .fi-badge.fi-color-info {
    background-color: rgb(255 255 255 / 0.12);
    color: var(--amx-graphite-text);
}

.fi-sidebar-item-badge-ctn .fi-badge::before {
    display: none;
}

.fi-sidebar-footer {
    margin: 0;
    padding: 0.75rem 0.75rem;
    border-top: 1px solid var(--amx-graphite-line);
    background-color: var(--amx-graphite);
}

.fi-sidebar .fi-user-menu-trigger {
    padding: 0.375rem 0.5rem;
    border-radius: 6px;
    color: var(--amx-graphite-text);
}

.fi-sidebar .fi-user-menu-trigger:hover {
    background-color: rgb(255 255 255 / 0.05);
}

.fi-sidebar .fi-user-menu-trigger-text {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
}

.fi-sidebar .fi-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
}

.fi-sidebar-open-sidebar-btn,
.fi-sidebar-close-sidebar-btn,
.fi-sidebar-open-collapse-sidebar-btn,
.fi-sidebar-close-collapse-sidebar-btn {
    color: var(--amx-graphite-muted);
}

.fi-sidebar-open-collapse-sidebar-btn:hover,
.fi-sidebar-close-collapse-sidebar-btn:hover {
    background-color: rgb(255 255 255 / 0.06);
    color: #fff;
}

.fi-sidebar-close-overlay {
    background-color: rgb(21 24 28 / 0.45);
}

/* ---------- Шапка ---------- */

.fi-topbar {
    min-height: 3.5rem;
    padding-inline: 1.5rem;
    background-color: #fff;
    box-shadow: none;
    border-bottom: 1px solid var(--amx-line);
}

.fi-topbar .fi-icon-btn {
    color: var(--gray-600);
}

/* Свёртывание меню переехало в шапку самого меню, к знаку, а знак в шапке
   страницы и так был скрыт раскладкой — блок остался пустым */
.fi-topbar-start {
    display: none;
}

.amx-back-ctn {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-inline-end: 1rem;
}

/* Пока идти назад некуда, кнопка погашена: метку снимает amx-back.js */
.amx-back-ctn[data-amx-back-off] .amx-back-btn {
    color: var(--gray-300);
    pointer-events: none;
}

.amx-back-btn {
    margin-inline: 0;
}

.amx-back-btn:hover {
    background-color: var(--gray-100);
}

/* «Уведомления на экран»: кнопка стоит в шапке, пока разрешение не спрошено,
   и уходит насовсем, как только браузер ответил */
.amx-desktop-ask {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
    margin-inline-start: 0.75rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--amx-line);
    border-radius: var(--radius-md);
    background-color: var(--gray-50);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gray-700);
    white-space: nowrap;
}

.amx-desktop-ask:hover {
    background-color: var(--gray-100);
}

.amx-desktop-ask-icon {
    width: 1rem;
    height: 1rem;
    color: var(--amx-petrol-600);
}

.fi-global-search {
    margin-inline-start: auto;
}

.fi-global-search-field {
    width: 16.25rem;
}

.fi-global-search-field .fi-input-wrp {
    background-color: var(--gray-50);
    box-shadow: 0 0 0 1px var(--amx-line);
}

.fi-global-search-field .fi-input-wrp:focus-within {
    background-color: #fff;
}

.fi-global-search-field .fi-input {
    font-size: 13px;
    padding-block: 0.375rem;
}

.fi-global-search-field .fi-input-wrp-suffix {
    font-size: 11px;
    font-weight: 500;
    color: var(--gray-600);
    background-color: #fff;
    border: 1px solid var(--amx-line);
    border-radius: 4px;
    padding: 0.0625rem 0.375rem;
    margin-inline-end: 0.375rem;
}

.fi-global-search-results-ctn {
    border-radius: 8px;
    box-shadow: var(--amx-shadow-float), 0 0 0 1px var(--amx-line);
}

.fi-topbar-database-notifications-btn .fi-badge,
.fi-icon-btn-badge-ctn .fi-badge {
    background-color: var(--amx-red);
    color: #fff;
    box-shadow: none;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    font-size: 10.5px;
    font-weight: 600;
}

.fi-icon-btn-badge-ctn .fi-badge::before {
    display: none;
}

/* ---------- Заголовок страницы ---------- */

.fi-page {
    gap: 1rem;
}

.fi-main {
    padding-inline: 1.5rem;
}

.fi-page-content {
    padding-top: 1.25rem;
}

.fi-header {
    padding-bottom: 0;
}

.fi-header-heading {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.fi-header-subheading {
    font-size: 13px;
    color: var(--gray-400);
}

.fi-breadcrumbs {
    margin-bottom: 0.375rem;
}

.fi-breadcrumbs-item,
.fi-breadcrumbs-item-label {
    font-size: 12.5px;
    color: var(--gray-400);
}

.fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label {
    color: var(--gray-600);
    font-weight: 500;
}

.fi-header-actions-ctn {
    gap: 0.5rem;
}

/* ---------- Кнопки ---------- */

.fi-btn {
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 500;
    padding-block: 0.4375rem;
    padding-inline: 0.875rem;
}

.fi-btn:not(.fi-outlined):not(.fi-color) {
    background-color: #fff;
    color: var(--gray-950);
    box-shadow: 0 0 0 1px var(--amx-line);
}

.fi-btn:not(.fi-outlined):not(.fi-color):hover {
    background-color: var(--gray-50);
}

.fi-btn:not(.fi-outlined):not(.fi-color) .fi-icon {
    color: var(--gray-600);
}

.fi-btn.fi-color {
    box-shadow: none;
}

.fi-btn.fi-color:not(.fi-outlined) {
    background-color: var(--color-600);
    color: #fff;
}

.fi-btn.fi-color:not(.fi-outlined):hover {
    background-color: var(--color-700);
}

.fi-btn.fi-color.fi-outlined {
    box-shadow: 0 0 0 1px var(--color-600);
    color: var(--color-700);
}

.fi-link {
    font-weight: 500;
}

.fi-icon-btn {
    border-radius: 6px;
}

.fi-btn.fi-size-xs,
.fi-btn.fi-size-sm {
    font-size: 12.5px;
    padding-block: 0.3125rem;
    padding-inline: 0.625rem;
}

/* ---------- Поля ---------- */

.fi-input-wrp {
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 0 0 0 1px var(--amx-line-strong);
}

.fi-input-wrp:focus-within {
    box-shadow: 0 0 0 1px var(--amx-petrol-600), 0 0 0 4px var(--amx-petrol-100);
}

.fi-input-wrp:has(.fi-invalid),
.fi-input-wrp.fi-invalid {
    box-shadow: 0 0 0 1px var(--amx-red);
}

.fi-input-wrp:has(.fi-invalid):focus-within {
    box-shadow: 0 0 0 1px var(--amx-red), 0 0 0 4px #fdecea;
}

.fi-input,
.fi-select-input {
    font-size: 13.5px;
    line-height: 1.375rem;
    padding-block: 0.4375rem;
}

.fi-input::placeholder,
.fi-select-input::placeholder {
    color: var(--gray-400);
}

.fi-fo-field-label-content,
.fi-in-entry-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--gray-600);
}

.fi-fo-field-label-required-mark {
    color: var(--amx-red);
}

.fi-fo-field-wrp-error-message {
    font-size: 12px;
    color: var(--amx-red);
}

.fi-fo-field-wrp-helper-text,
.fi-fo-field-wrp-hint,
.fi-in-entry-helper-text {
    font-size: 12px;
    color: var(--gray-400);
}

.fi-checkbox-input,
.fi-radio-input {
    border-radius: 3px;
    box-shadow: 0 0 0 1.5px #b8c0c8;
}

.fi-checkbox-input:checked,
.fi-radio-input:checked {
    box-shadow: none;
}

.fi-fo-toggle-buttons .fi-btn {
    box-shadow: 0 0 0 1px var(--amx-line);
}

.fi-fo-file-upload,
.fi-fo-rich-editor,
.fi-fo-markdown-editor {
    border-radius: 6px;
}

.fi-in-text-item,
.fi-in-text {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.35;
}

.fi-in-entry {
    row-gap: 0.125rem;
}

/* ---------- Бейджи статусов ---------- */

.fi-badge {
    border-radius: 4px;
    min-height: 1.375rem;
    padding-inline: 0.5rem;
    padding-block: 0;
    column-gap: 0.375rem;
    font-size: 12px;
    font-weight: 500;
    box-shadow: none;
    white-space: nowrap;
}

.fi-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background-color: currentColor;
    flex: 0 0 auto;
}

.fi-badge:has(.fi-badge-icon)::before,
.fi-badge:has(.fi-icon)::before,
.fi-tabs-item .fi-badge::before,
.fi-btn .fi-badge::before,
.fi-link .fi-badge::before,
.fi-dropdown-list-item .fi-badge::before,
.fi-ta-filter-indicators .fi-badge::before,
.fi-fo-select .fi-badge::before,
.fi-in-key-value .fi-badge::before,
.fi-pagination .fi-badge::before,
.fi-no-notification .fi-badge::before {
    display: none;
}

.fi-badge.fi-color-gray {
    background-color: var(--gray-100);
    color: var(--gray-600);
}

.fi-badge.fi-color-success {
    background-color: #e6f4ea;
    color: #1f7a3d;
}

.fi-badge.fi-color-warning {
    background-color: #fff3dc;
    color: #9a5b00;
}

.fi-badge.fi-color-danger {
    background-color: #fdecea;
    color: var(--amx-red);
}

.fi-badge.fi-color-info {
    background-color: #e8eefb;
    color: #2f5fbf;
}

.fi-badge.fi-color-primary {
    background-color: var(--amx-petrol-100);
    color: var(--amx-petrol-700);
}

/* ---------- Секции, карточки, вкладки ---------- */

.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-fo-repeater-item,
.fi-fo-builder-item,
.fi-in-repeatable-item {
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 0 0 1px var(--amx-line);
}

.fi-section:not(.fi-section-not-contained) > .fi-section-header {
    padding: 0 1rem;
    min-height: 2.75rem;
    align-items: center;
    border-bottom: 1px solid #eef0f2;
}

.fi-section-header-heading {
    font-size: 13.5px;
    font-weight: 600;
}

.fi-section-header-description {
    font-size: 12.5px;
    color: var(--gray-400);
}

.fi-section:not(.fi-section-not-contained):not(.fi-divided) > .fi-section-content-ctn > .fi-section-content {
    padding: 0.875rem 1rem 1rem;
}

.fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn > .fi-section-footer {
    border-color: #eef0f2;
    padding: 0.75rem 1rem;
}

.fi-section-collapse-btn {
    color: var(--gray-400);
}

.fi-tabs {
    column-gap: 0.25rem;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    border-bottom: 1px solid var(--amx-line);
    box-shadow: none;
    overflow-y: hidden;
    /* У закупки вкладок полтора десятка, а Filament их не переносит, а прячет
       в боковую прокрутку — и половину ряда не видно вовсе */
    flex-wrap: wrap;
}

.fi-tabs.fi-contained {
    padding: 0;
    border-color: var(--amx-line);
}

.fi-tabs-item {
    position: relative;
    border-radius: 0;
    padding: 0.625rem 0.75rem;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--gray-600);
}

.fi-tabs-item:hover {
    background-color: transparent;
    color: var(--gray-950);
}

.fi-tabs-item.fi-active {
    background-color: transparent;
    color: var(--gray-950);
}

.fi-tabs-item.fi-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--amx-petrol-600);
}

.fi-tabs-item .fi-badge {
    min-height: 1.125rem;
    padding-inline: 0.375rem;
    font-size: 11px;
    font-weight: 600;
    background-color: var(--gray-100);
    color: var(--gray-600);
}

.fi-tabs-item .fi-badge.fi-color-danger {
    background-color: var(--amx-red);
    color: #fff;
}

.fi-tabs-item .fi-icon {
    color: var(--gray-400);
}

.fi-tabs-item.fi-active .fi-icon {
    color: var(--amx-petrol-600);
}

.fi-sc-tabs .fi-tabs {
    margin-bottom: 0.5rem;
}

/* ---------- Таблицы ---------- */

.fi-ta-header {
    padding: 0.5rem 0.75rem;
    border-color: var(--amx-line);
}

.fi-ta-header-toolbar {
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
}

.fi-ta-header-cell {
    height: 2.25rem;
    padding-block: 0;
    background-color: #fafbfb;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7580;
    white-space: nowrap;
}

.fi-ta-header-cell-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7580;
}

.fi-ta-header-cell-sort-icon {
    color: var(--amx-petrol-600);
}

.fi-ta-table thead,
.fi-ta-table > thead > tr,
.fi-ta-selection-cell {
    background-color: #fafbfb;
}

.fi-ta-cell {
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
}

.fi-ta-text,
.fi-ta-text-item,
.fi-ta-cell-content {
    font-size: 13px;
}

.fi-ta-text-item-label {
    font-size: 13px;
}

.fi-ta-text-item-description,
.fi-ta-text-item .fi-ta-text-description {
    font-size: 12px;
    color: var(--gray-400);
}

.fi-ta-row:hover,
.fi-ta-row.fi-clickable:hover {
    background-color: #f7f9f9;
}

.fi-ta-row.fi-selected:not(.fi-striped),
.fi-ta-row.fi-selected:not(.fi-striped):hover {
    background-color: #eef6f6;
}

.fi-ta-row.fi-selected > .fi-ta-cell:first-child {
    box-shadow: inset 2px 0 0 var(--amx-petrol-600);
}

/* Клетки обведены: с бледной чертой между строками и без черт между столбцами
   не было видно, где кончается поле (просьба владельца 02.10.2026). Черта
   на тон темнее прежней и такая же между столбцами; под шапкой — ещё темнее */
.fi-ta-table > tbody > tr,
.fi-ta-table > tbody > tr > td,
:where(.fi-ta-table > :not(:last-child)) {
    border-color: #d9dee3;
}

.fi-ta-table > thead {
    border-bottom-color: #c9cfd5;
}

.fi-ta-table > thead > tr > th,
.fi-ta-table > tbody > tr > td {
    border-right: 1px solid #d9dee3;
}

.fi-ta-table > thead > tr > th:last-child,
.fi-ta-table > tbody > tr > td:last-child {
    border-right: 0;
}

/* Ширина столбца — за правый край заголовка (`public/js/amx-col-resize.js`).
   Черта ручки проступает при наведении на заголовок, чтобы было видно,
   за что тянуть */
.fi-ta-header-cell {
    position: relative;
}

.amx-col-resizer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 7px;
    cursor: col-resize;
    touch-action: none;
}

.amx-col-resizer::after {
    content: '';
    position: absolute;
    top: 25%;
    bottom: 25%;
    right: 2px;
    width: 2px;
    border-radius: 1px;
}

.fi-ta-header-cell:hover > .amx-col-resizer::after {
    background-color: var(--amx-petrol-300);
}

.amx-col-resizer:hover::after {
    top: 0;
    bottom: 0;
    background-color: var(--amx-petrol-600) !important;
}

.amx-col-resizing,
.amx-col-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

.fi-ta-empty-state {
    padding-block: 3rem;
    border-color: var(--amx-line);
}

.fi-ta-empty-state-heading {
    font-size: 15px;
    font-weight: 600;
}

.fi-ta-empty-state-description {
    font-size: 13px;
    color: var(--gray-500);
}

.fi-ta-empty-state-icon-ctn {
    background-color: var(--gray-100);
    border-radius: 8px;
}

.fi-ta-filter-indicators {
    background-color: #eef6f6;
    border-color: var(--amx-petrol-100);
    padding-block: 0.5rem;
}

.fi-ta-filter-indicators .fi-badge {
    background-color: #fff;
    color: var(--amx-petrol-700);
    box-shadow: 0 0 0 1px #b0d6d8;
}

.fi-ta-summary-row,
.fi-ta-summary-row-heading-cell,
.fi-ta-summary-cell {
    background-color: #fafbfb;
    font-weight: 600;
}

.fi-ta-summary-row-heading-cell,
.fi-ta-summary-cell {
    padding-block: 0.5rem;
    font-size: 13px;
}

.fi-ta-bulk-actions-ctn,
.fi-ta-selection-indicator {
    background-color: #eef6f6;
    border-color: var(--amx-petrol-100);
    color: var(--amx-petrol-700);
    font-size: 13px;
}

.fi-ta-ctn .fi-pagination {
    padding: 0.5rem 0.875rem;
    border-color: var(--amx-line);
}

.fi-pagination-overview {
    font-size: 13px;
    color: var(--gray-600);
}

.fi-pagination-records-per-page-select-ctn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.375rem 0.75rem;
}

.fi-pagination-records-per-page-select-ctn label,
.fi-pagination-records-per-page-select-ctn .fi-select-input {
    font-size: 13px;
}

/* Выбора числа строк в подвале таблиц нет: его вид у Filament держится
   на контейнерных запросах, и в боевых браузерах поле остаётся голым текстом
   посреди подвала. Строк на странице столько, сколько задано у таблицы */

.fi-pagination-records-per-page-select-ctn {
    display: none;
}

.amx-pagination-jump .fi-input {
    width: 3.25rem;
    padding-inline: 0.25rem;
    text-align: center;
}

.fi-pagination-item-label {
    font-size: 13px;
}

.fi-pagination-item-btn {
    border-radius: 6px;
}

.fi-pagination-item.fi-active .fi-pagination-item-btn {
    background-color: var(--amx-petrol-100);
    color: var(--amx-petrol-700);
    font-weight: 600;
}

.fi-pagination-item.fi-disabled .fi-pagination-item-btn {
    cursor: default;
}

.fi-pagination-item.fi-disabled .fi-icon {
    opacity: 0.4;
}

.fi-ta-search-field .fi-input-wrp,
.fi-ta-filters-trigger-action-ctn .fi-btn {
    font-size: 13px;
}

.fi-ta-col-toggle-dropdown .fi-dropdown-panel,
.fi-ta-filters-dropdown .fi-dropdown-panel {
    border-radius: 8px;
}

/* Полоса-дублёр горизонтальной прокрутки таблицы, прижатая к низу экрана
   (public/js/amx-table-hscroll.js). Показывается, только когда настоящая
   полоса под таблицей ушла за нижний край */
.amx-hscroll {
    position: fixed;
    z-index: 20;
    display: none;
    height: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    border-top: 1px solid var(--amx-line);
    background-color: rgb(255 255 255 / 0.92);
    scrollbar-width: thin;
}

.amx-hscroll.amx-visible {
    display: block;
}

.amx-hscroll-track {
    height: 1px;
}

.amx-hscroll::-webkit-scrollbar {
    height: 12px;
}

.amx-hscroll::-webkit-scrollbar-track {
    background-color: transparent;
}

.amx-hscroll::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: rgb(0 0 0 / 0.35);
}

/* ---------- Всплывающие слои: меню, модалки, подсказки ---------- */

.fi-dropdown-panel {
    border-radius: 8px;
    box-shadow: var(--amx-shadow-float), 0 0 0 1px var(--amx-line);
}

.fi-dropdown-list-item {
    border-radius: 5px;
    font-size: 13.5px;
}

.fi-dropdown-header {
    font-size: 12.5px;
}

.fi-modal-window {
    border-radius: 10px;
    box-shadow: 0 24px 64px rgb(21 24 28 / 0.22), 0 0 0 1px var(--amx-line);
}

.fi-modal.fi-modal-slide-over .fi-modal-window {
    border-radius: 0;
}

.fi-modal-close-overlay {
    background-color: rgb(21 24 28 / 0.45);
}

.fi-modal-heading {
    font-size: 17px;
    font-weight: 600;
}

.fi-modal-description {
    font-size: 13.5px;
}

.fi-modal-header,
.fi-modal-footer {
    border-color: #eef0f2;
}

.fi-fo-select .fi-dropdown-panel,
.choices__list--dropdown {
    border-radius: 8px;
    box-shadow: var(--amx-shadow-float), 0 0 0 1px var(--amx-line);
}

.fi-tooltip,
[x-tooltip] + div {
    font-size: 12px;
}

/* ---------- Уведомления: иконка в цветном квадрате, заголовок, текст, действия ссылками ---------- */

.fi-no {
    z-index: 60;
    padding: 0.75rem 1.5rem;
}

/* Всплывающие уведомления начинаются под шапкой, а не поверх неё */
@media (min-width: 64rem) {
    .fi-no.fi-vertical-align-start {
        padding-top: 4.25rem;
    }
}

.fi-no-notification:not(.fi-inline) {
    width: 26.5rem;
    max-width: calc(100vw - 2rem);
    gap: 0.75rem;
    padding: 0.75rem 0.75rem 0.75rem 0.875rem;
    border-radius: 8px;
    background-color: #fff !important;
    box-shadow: var(--amx-shadow-float), 0 0 0 1px #d9dee3;
}

.fi-no-notification > .fi-no-notification-icon {
    width: 1.875rem;
    height: 1.875rem;
    padding: 0.4375rem;
    border-radius: 6px;
    flex: 0 0 auto;
    background-color: var(--gray-100);
    color: var(--gray-600);
}

.fi-no-notification.fi-status-info > .fi-no-notification-icon,
.fi-no-notification.fi-color-primary > .fi-no-notification-icon,
.fi-no-notification.fi-color-info > .fi-no-notification-icon {
    background-color: var(--amx-petrol-100);
    color: var(--amx-petrol-700);
}

.fi-no-notification.fi-status-success > .fi-no-notification-icon {
    background-color: #e6f4ea;
    color: #1f7a3d;
}

.fi-no-notification.fi-status-warning > .fi-no-notification-icon {
    background-color: #fff3dc;
    color: #9a5b00;
}

.fi-no-notification.fi-status-danger > .fi-no-notification-icon {
    background-color: #fdecea;
    color: var(--amx-red);
}

.fi-no-notification-main {
    margin-top: 0;
    gap: 0.5rem;
}

.fi-no-notification-text {
    gap: 0.1875rem;
}

.fi-no-notification-title {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.005em;
}

.fi-no-notification-body {
    font-size: 12.5px;
    color: var(--gray-600);
    line-height: 1.45;
}

.fi-no-notification-date {
    font-size: 11.5px;
    color: var(--gray-400);
}

.fi-no-notification-actions {
    gap: 0.875rem;
    margin-top: 0.125rem;
}

.fi-no-notification-actions .fi-btn,
.fi-no-notification-actions .fi-link {
    min-height: 0;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--amx-petrol-600);
}

.fi-no-notification-actions .fi-btn:hover,
.fi-no-notification-actions .fi-link:hover {
    background-color: transparent;
    color: var(--amx-petrol-700);
    text-decoration: underline;
}

/* Серому действию Filament цвет не пишет вовсе — ловим ссылку без класса цвета */
.fi-no-notification-actions .fi-btn.fi-color-gray,
.fi-no-notification-actions .fi-link.fi-color-gray,
.fi-no-notification-actions .fi-link:not(.fi-color) {
    color: var(--gray-400);
}

.fi-no-notification-actions .fi-btn.fi-color-gray:hover,
.fi-no-notification-actions .fi-link.fi-color-gray:hover,
.fi-no-notification-actions .fi-link:not(.fi-color):hover {
    color: var(--gray-600);
}

.fi-no-notification-close-btn {
    width: 1.375rem;
    height: 1.375rem;
    padding: 0;
    margin: -0.125rem -0.25rem 0 0;
    flex: 0 0 auto;
    color: var(--gray-400);
}

.fi-no-notification-close-btn .fi-icon {
    width: 0.875rem;
    height: 0.875rem;
}

.fi-no-database .fi-no-notification {
    padding: 0.625rem 1rem 0.625rem 0.875rem;
    border-bottom: 1px solid #eef0f2;
}

/* Непрочитанное в колокольчике. Filament 4 метит не саму карточку, а её
   обёртку (`.fi-no-notification-unread-ctn` / `-read-ctn`), и отличает её одной
   полоской в 2px, а карточку по статусу тонирует одинаково, прочитана она или
   нет: новое уведомление выглядело как старое (жалоба 30.09.2026). Поэтому:
   прочитанное — белое и приглушённое, непрочитанное — с петрольным фоном,
   полосой слева и точкой у заголовка */
.fi-no-database .fi-no-notification-read-ctn > .fi-no-notification {
    background-color: #fff;
}

.fi-no-database .fi-no-notification-read-ctn .fi-no-notification-title {
    font-weight: 500;
    color: var(--gray-700);
}

.fi-no-database .fi-no-notification-unread-ctn {
    position: relative;
}

.fi-no-database .fi-no-notification-unread-ctn > .fi-no-notification {
    background-color: #eef6f6;
}

.fi-no-database .fi-no-notification-unread-ctn::before {
    z-index: 1;
    width: 3px;
    background-color: var(--amx-petrol-600);
}

.fi-no-database .fi-no-notification-unread-ctn .fi-no-notification-title::before {
    content: "";
    display: inline-block;
    width: 0.4375rem;
    height: 0.4375rem;
    margin-right: 0.375rem;
    border-radius: 50%;
    background-color: var(--amx-petrol-600);
    vertical-align: 0.0625rem;
}

/* Шапка панели уведомлений. Filament подтягивает список под шапку отрицательным
   отступом в 1.5rem, а фон, отступ снизу и слой шапке даёт только правило для
   `.fi-modal-has-sticky-header`. Когда его нет — а у этой панели так и выходит, —
   шапка остаётся прозрачной и без отступа, и первая карточка наезжает
   на «Отметить как прочитанное» и «Удалить». Поэтому шапку держим сами,
   а подтяг списка снимаем (замеры 17.09.2026: карточка начиналась на 72px
   при действиях 52–72px, теперь — ровно под шапкой) */
.fi-no-database .fi-modal-header {
    position: sticky;
    top: 0;
    z-index: 20;
    /* Высота с запасом под две строки — заголовок и действия: в высоту шапки
       действия попадают не всегда, и тогда они вываливались на список
       (решение владельца 17.09.2026) */
    min-height: 6.25rem;
    padding-bottom: 0.75rem !important;
    background-color: #fff !important;
}

.fi-no-database .fi-modal-header .fi-ac {
    position: relative;
    z-index: 1;
}

/* `!important` намеренно: правило Filament той же силы, и порядок файлов
   решал бы исход — а спорить о нём при каждом обновлении панели незачем */
.fi-no-database .fi-modal-content,
.fi-no-database .fi-modal-window-ctn > .fi-modal-window .fi-modal-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ---------- Плитки рабочего стола ---------- */

.fi-wi-stats-overview-stats-ctn {
    gap: 0.75rem;
}

.fi-wi-stats-overview-stat {
    padding: 0.875rem 1rem;
}

.fi-wi-stats-overview-stat-content {
    gap: 0.25rem;
}

.fi-wi-stats-overview-stat-label {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--gray-600);
}

.fi-wi-stats-overview-stat-value {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-variant-numeric: normal;
}

.fi-wi-stats-overview-stat-description {
    font-size: 12.5px;
    color: var(--gray-400);
}

.fi-wi-stats-overview-stat.fi-color-danger .fi-wi-stats-overview-stat-value {
    color: var(--amx-red);
}

/* Полоса — блок: у строчного span высота игнорируется, и полоса разъезжалась
   на всю строку описания, выталкивая текст за нижний край плитки */
.amx-meter {
    display: block;
    height: 6px;
    border-radius: 3px;
    background-color: var(--amx-petrol-100);
    overflow: hidden;
    margin-top: 0.375rem;
}

.amx-meter > span {
    display: block;
    height: 100%;
    background-color: var(--amx-petrol-600);
}

.fi-wi-widget .fi-ta-ctn {
    box-shadow: 0 0 0 1px var(--amx-line);
}

.fi-wi-table .fi-ta-header {
    padding: 0.5rem 1rem;
}

.fi-wi-table .fi-ta-header-heading,
.amx-desk-card-title {
    font-size: 13.5px;
    font-weight: 600;
}

.amx-desk-list {
    display: flex;
    flex-direction: column;
}

.amx-desk-item {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid #eef0f2;
    font-size: 13px;
    color: inherit;
}

.amx-desk-item:last-child {
    border-bottom: 0;
}

.amx-desk-item:hover {
    background-color: #f7f9f9;
}

.amx-desk-item-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.amx-desk-item-head {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

.amx-desk-item-who {
    font-weight: 600;
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Номер заказа не переносится по дефису: длинное имя клиента рвало его пополам */
.amx-desk-item-ref {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--gray-400);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.amx-desk-item-when {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--gray-400);
    white-space: nowrap;
}

.amx-desk-item-text {
    color: var(--gray-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amx-desk-date {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    width: 2.75rem;
    flex: 0 0 auto;
}

/* Очереди отделов в широком блоке идут в два столбца: девятью строками подряд
   блок был вдвое выше соседнего, и под ним оставалась пустая полоса */
@media (min-width: 80rem) {
    .amx-desk-list-split {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .amx-desk-list-split > :nth-last-child(-n + 2):nth-child(odd),
    .amx-desk-list-split > :last-child {
        border-bottom: 0;
    }

    .amx-desk-list-split > :nth-child(odd) {
        border-right: 1px solid #eef0f2;
    }

    /* Нечётное число строк: последняя занимает левую ячейку, а правая пуста —
       без этого от неё оставалась висеть вертикальная черта */
    .amx-desk-list-split > :last-child:nth-child(odd) {
        border-right: 0;
    }
}

.amx-desk-item-change {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    overflow: visible;
}

.amx-desk-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    font-size: 13px;
    color: var(--gray-400);
    line-height: 1.6;
}

.amx-unread {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.3125rem;
    border-radius: 4px;
    background-color: var(--amx-red);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    align-self: center;
}

.amx-avatar {
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background-color: #2a7f86;
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
}

/* ---------- Маршрут заказа ---------- */

.amx-route {
    display: flex;
    align-items: center;
    padding: 0.875rem 1.125rem;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 0 1px var(--amx-line);
    overflow-x: auto;
}

.amx-route-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 12.5px;
    color: var(--gray-400);
    white-space: nowrap;
}

.amx-route-step i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--gray-300);
    background-color: #fff;
    flex: 0 0 auto;
}

.amx-route-step.is-done {
    color: var(--gray-600);
}

.amx-route-step.is-done i {
    background-color: var(--amx-petrol-600);
    border-color: var(--amx-petrol-600);
}

.amx-route-step.is-now {
    color: var(--gray-950);
    font-weight: 600;
}

.amx-route-step.is-now i {
    width: 12px;
    height: 12px;
    border-color: var(--amx-petrol-600);
}

.amx-route-step.is-off {
    color: var(--amx-red);
    font-weight: 600;
}

.amx-route-step.is-off i {
    border-color: var(--amx-red);
    background-color: var(--amx-red);
}

.amx-route-step.is-ready {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12.5px;
    color: var(--amx-petrol-600);
    cursor: pointer;
}

.amx-route-step.is-ready i {
    border-color: var(--amx-petrol-300);
}

.amx-route-step.is-ready:hover {
    color: var(--amx-petrol-700);
}

.amx-route-step.is-ready:hover span {
    text-decoration: underline;
}

.amx-route-step.is-ready:hover i {
    background-color: var(--amx-petrol-100);
    border-color: var(--amx-petrol-600);
}

.amx-route-line {
    flex: 1;
    min-width: 0.75rem;
    height: 2px;
    background-color: var(--amx-line);
    margin: 0 0.625rem;
}

.amx-route-line.is-done {
    background-color: var(--amx-petrol-600);
}

.amx-route-aside {
    margin-left: auto;
    padding-left: 1rem;
    font-size: 12.5px;
    color: var(--gray-600);
    white-space: nowrap;
}

/* ---------- Отчёты и табло, свёрстанные вручную ---------- */

.amx-report {
    font-size: 13px;
}

.amx-report-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    align-items: baseline;
    margin-bottom: 0.875rem;
}

.amx-report-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.amx-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.875rem;
}

.amx-tile {
    padding: 0.75rem 1rem;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 0 1px var(--amx-line);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.amx-tile-label {
    font-size: 12.5px;
    color: var(--gray-600);
}

.amx-tile-value {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.amx-tile-sub {
    font-size: 12.5px;
    color: var(--gray-400);
}

.amx-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 0 1px var(--amx-line);
    overflow: hidden;
}

.amx-desk-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid #eef0f2;
}

.amx-desk-head-title {
    font-size: 13.5px;
    font-weight: 600;
}

.amx-desk-head-link {
    margin-left: auto;
    font-size: 12.5px;
}

/* Отбор по статусу: кнопки вместо выпадающего списка — выбранное видно
   без открытия, а рядом с названием стоит число своих заказов */
.amx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    width: 100%;
}

.amx-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border: 0;
    border-radius: 999px;
    background-color: var(--gray-100);
    color: var(--gray-600);
    font-size: 12px;
    line-height: 1.5;
    cursor: pointer;
}

.amx-chip:hover {
    background-color: var(--gray-200);
}

.amx-chip-on,
.amx-chip-on:hover {
    background-color: var(--amx-petrol-600);
    color: #fff;
}

.amx-chip-count {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    opacity: 0.65;
}

.amx-card-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    padding: 0 1rem;
    border-bottom: 1px solid #eef0f2;
    font-size: 13.5px;
    font-weight: 600;
}

.amx-card-body {
    padding: 0.875rem 1rem 1rem;
}

.amx-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.amx-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 2.25rem;
    padding: 0 0.75rem;
    background-color: #fafbfb;
    border-bottom: 1px solid var(--amx-line);
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7580;
    white-space: nowrap;
}

.amx-table td {
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid #eef0f2;
    vertical-align: middle;
    white-space: nowrap;
}

.amx-table tr:hover > td {
    background-color: #f7f9f9;
}

/* Своя строка в отчёте: он открыт по всем менеджерам, и себя в списке
   из двух десятков человек иначе не найти */
.amx-table tr.is-me > td {
    background-color: #f1f7f7;
}

.amx-table tr.is-me:hover > td {
    background-color: #e9f2f2;
}

.amx-table tr.is-me .amx-name {
    font-weight: 700;
}

.amx-table tr.amx-total > td {
    border-top: 2px solid #d9dee3;
    border-bottom: 0;
    background-color: #fafbfb;
    font-weight: 600;
}

.amx-table .amx-num,
.amx-table th.amx-num {
    text-align: right;
}

.amx-table .amx-name {
    font-weight: 500;
}

/* Дерево отчёта: уровень задаётся отступом, группа сворачивается стрелкой.
   Пустая стрелка у листьев нужна, чтобы названия стояли в одну колонку */
.amx-tree-level {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
}

.amx-tree-toggle {
    flex: 0 0 auto;
    width: 0.875rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--gray-400);
    font-size: 9px;
    line-height: inherit;
    text-align: left;
    cursor: pointer;
}

.amx-tree-toggle:hover {
    color: var(--amx-petrol-600);
}

.amx-tree-toggle.is-empty {
    cursor: default;
}

.amx-table .amx-wrap {
    white-space: normal;
}

.amx-muted {
    color: var(--gray-400);
}

.amx-dim {
    color: var(--gray-600);
}

.amx-ok {
    color: #1f7a3d;
}

.amx-warn {
    color: #9a5b00;
}

.amx-bad {
    color: var(--amx-red);
}

.amx-strong {
    font-weight: 600;
}

.amx-small {
    font-size: 12px;
}

.amx-bar {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-end;
}

.amx-bar > i {
    display: inline-block;
    height: 6px;
    border-radius: 3px;
    background-color: var(--amx-petrol-600);
}

.amx-bar.is-low > i {
    background-color: #b0d6d8;
}

.amx-bar.is-bad > i {
    background-color: var(--amx-red);
}

.amx-bar > span {
    font-variant-numeric: tabular-nums;
    min-width: 2.75rem;
    text-align: right;
}

.amx-progress {
    height: 0.5rem;
    border-radius: 999px;
    background-color: var(--gray-200);
    overflow: hidden;
}

.amx-progress > span {
    display: block;
    height: 100%;
    background-color: var(--amx-petrol-600);
}

.amx-progress.is-done > span {
    background-color: #1f7a3d;
}

.amx-place {
    font-weight: 700;
}

.amx-place.is-1 {
    color: #b7791f;
}

.amx-place.is-2 {
    color: #6b7580;
}

.amx-place.is-3 {
    color: #9c4a1a;
}

.amx-row-accent {
    box-shadow: inset 3px 0 0 var(--amx-petrol-600);
}

.amx-row-accent.is-ok {
    box-shadow: inset 3px 0 0 #1f7a3d;
}

.amx-row-accent.is-bad {
    box-shadow: inset 3px 0 0 var(--amx-red);
}

.amx-seg {
    display: inline-flex;
    height: 1.875rem;
    border-radius: 6px;
    box-shadow: 0 0 0 1px var(--amx-line);
    overflow: hidden;
    background-color: #fff;
}

.amx-seg > * {
    display: inline-flex;
    align-items: center;
    padding: 0 0.625rem;
    font-size: 13px;
    color: var(--gray-600);
    border-right: 1px solid var(--amx-line);
}

.amx-seg > *:last-child {
    border-right: 0;
}

.amx-seg > .is-on {
    background-color: #eef6f6;
    color: var(--amx-petrol-700);
    font-weight: 500;
}

.amx-empty {
    padding: 3rem 1rem;
    text-align: center;
    font-size: 13.5px;
    color: var(--gray-400);
    line-height: 1.6;
}

.amx-note {
    padding: 0.75rem 1rem;
    border: 1px dashed var(--gray-300);
    border-radius: 6px;
    font-size: 13px;
    color: var(--gray-600);
    line-height: 1.5;
}

/* Табло продаж смотрят с телевизора: шрифт масштабируется от ширины экрана */
.amx-board {
    font-size: clamp(0.875rem, 1.1vw, 1.25rem);
}

.amx-board .amx-table {
    font-size: 1em;
}

.amx-board .amx-table th {
    font-size: 0.7em;
    height: 2.5em;
}

.amx-board .amx-table td {
    padding: 0.5em 0.75em;
}

/* ---------- Страница входа ---------- */

.fi-simple-layout {
    display: grid;
    grid-template-columns: minmax(0, 52%) minmax(0, 1fr);
    align-items: stretch;
    min-height: 100dvh;
    background-color: #fff;
}

.fi-simple-layout-header {
    grid-column: 2;
    justify-self: end;
    padding: 1rem 1.5rem;
}

.amx-login-side {
    grid-column: 1;
    grid-row: 1 / span 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem 3.5rem;
    background-color: var(--amx-graphite);
    color: var(--amx-graphite-text);
}

.amx-login-brand {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-size: 22px;
    font-weight: 600;
    color: #fff;
}

.amx-login-brand .amx-brand-mark {
    width: 2.5rem;
    height: 2.5rem;
}

.amx-login-lead {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 32rem;
}

.amx-login-title {
    font-size: clamp(30px, 3vw, 44px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: #fff;
    text-wrap: balance;
}

.amx-login-text {
    font-size: 15px;
    line-height: 1.55;
    color: #8a939e;
}

.amx-login-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding-top: 0.875rem;
    border-top: 1px solid rgb(255 255 255 / 0.08);
    font-size: 12.5px;
    color: var(--amx-graphite-label);
}

.fi-simple-main-ctn {
    grid-column: 2;
    padding: 2rem 1.5rem;
}

.fi-simple-main {
    margin: 0;
    padding: 0;
    max-width: 22.5rem;
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
}

.fi-simple-page .fi-logo {
    display: none;
}

.fi-simple-header {
    align-items: flex-start;
    text-align: left;
    margin-bottom: 1.25rem;
}

.fi-simple-header-heading {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.fi-simple-header-subheading {
    font-size: 13px;
    color: var(--gray-400);
}

.fi-simple-page .fi-input-wrp {
    min-height: 2.5rem;
}

.fi-simple-page .fi-btn.fi-color:not(.fi-outlined) {
    width: 100%;
    justify-content: center;
    height: 2.5rem;
    font-size: 14px;
}

.fi-simple-page .fi-fo-field-label-content {
    font-size: 12.5px;
}

.fi-simple-layout > .fi-simple-layout-header ~ * {
    grid-column: 2;
}

@media (max-width: 64rem) {
    .fi-simple-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .amx-login-side {
        grid-column: 1;
        grid-row: auto;
        padding: 1.5rem 1.5rem;
        gap: 1.5rem;
    }

    .amx-login-title {
        font-size: 24px;
    }

    .amx-login-foot {
        display: none;
    }

    .fi-simple-layout-header,
    .fi-simple-main-ctn,
    .fi-simple-layout > .fi-simple-layout-header ~ * {
        grid-column: 1;
    }
}

/* ---------- Чат заказа ---------- */

.amx-chat {
    display: flex;
    flex-direction: column;
}

.amx-chat-topics {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.amx-chat-topic {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0.625rem;
    border: 1px solid var(--amx-line-strong);
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--gray-600);
    background-color: #fff;
}

.amx-chat-topic.amx-active {
    background-color: #eef6f6;
    border-color: #b0d6d8;
    color: var(--amx-petrol-700);
}

.amx-chat-topic-unread {
    min-width: 1.125rem;
    padding: 0 0.3125rem;
    border-radius: 4px;
    background-color: var(--amx-red);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.amx-chat-topic-new,
.amx-chat-duty-new {
    position: relative;
}

/* Пунктиром: это не ещё одна вкладка, а кнопка завести новую */
.amx-chat-topic-new > button,
.amx-chat-duty-new > button {
    padding: 0.1875rem 0.625rem;
    border: 1px dashed var(--amx-line-strong);
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--gray-400);
    background-color: transparent;
}

.amx-chat-topic-new > button:hover,
.amx-chat-duty-new > button:hover {
    color: var(--amx-petrol-700);
    border-color: #b0d6d8;
}

.amx-chat-topic-new ul,
.amx-chat-duty-new ul {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.25rem);
    left: 0;
    min-width: 12rem;
    /* Свой сброс списка: на reset темы тут полагаться нельзя — маркеры
       и отступ браузера раздувают выпадашку и выносят её из-под кнопки */
    margin: 0;
    list-style: none;
    padding: 0.25rem;
    border: 1px solid #d9dee3;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: var(--amx-shadow-float);
}

.amx-chat-topic-new li button,
.amx-chat-duty-new li button {
    display: block;
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 0;
    border-radius: 5px;
    background-color: transparent;
    text-align: left;
    font-size: 13px;
    color: var(--gray-600);
}

.amx-chat-topic-new li button:hover,
.amx-chat-duty-new li button:hover {
    background-color: #eef6f6;
    color: var(--amx-petrol-700);
}

/* Поиск по открытому разговору: лупа в конце полоски вкладок, под ней
   строка запроса и список находок. Ищет по одной вкладке — поэтому и стоит
   при вкладках, а не над всей лентой */
.amx-chat-search-toggle {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 0.25rem 0.375rem;
    border: 1px solid var(--amx-line-strong);
    border-radius: 6px;
    color: var(--gray-400);
    background-color: #fff;
}

.amx-chat-search-toggle svg {
    width: 1rem;
    height: 1rem;
}

.amx-chat-search-toggle:hover,
.amx-chat-search-toggle.amx-active {
    border-color: #b0d6d8;
    color: var(--amx-petrol-700);
    background-color: #eef6f6;
}

.amx-chat-search {
    margin-bottom: 0.5rem;
    border: 1px solid var(--amx-line);
    border-radius: 8px;
    background-color: #fff;
}

.amx-chat-search-box {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.375rem 0.25rem 0.625rem;
}

.amx-chat-search-icon {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    color: var(--gray-400);
}

.amx-chat-search-box input {
    flex: 1;
    min-width: 0;
    padding: 0.25rem 0;
    border: 0;
    background: transparent;
    font-size: 13px;
    box-shadow: none;
    outline: none;
}

.amx-chat-search-box input:focus {
    box-shadow: none;
}

/* Свой крестик у поля уже есть — браузерный рядом с ним был бы вторым */
.amx-chat-search-box input::-webkit-search-cancel-button {
    display: none;
}

.amx-chat-search-box button {
    padding: 0 0.375rem;
    border: 0;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    color: var(--gray-400);
}

.amx-chat-search-box button:hover {
    color: var(--amx-red);
}

.amx-chat-search-note {
    padding: 0.375rem 0.625rem;
    border-top: 1px solid var(--amx-line);
    font-size: 12px;
    color: var(--gray-500);
}

.amx-chat-search-list {
    max-height: 13rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.25rem;
    list-style: none;
    border-top: 1px solid var(--amx-line);
    scrollbar-width: thin;
}

.amx-chat-search-list button {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 0;
    border-radius: 5px;
    background-color: transparent;
    text-align: left;
}

.amx-chat-search-list button:hover,
.amx-chat-search-list button.amx-active {
    background-color: #eef6f6;
}

.amx-chat-search-head {
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    font-size: 11px;
    color: var(--gray-400);
}

.amx-chat-search-head span:first-child {
    font-weight: 600;
    color: var(--gray-600);
}

.amx-chat-search-text {
    display: block;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--gray-700);
    overflow-wrap: anywhere;
}

.amx-chat-search-text .amx-chat-file-icon {
    display: inline-block;
    vertical-align: -0.125rem;
}

/* Найденное — и в списке, и в самих пузырях, пока поиск открыт */
.amx-chat-hit {
    padding: 0 0.0625rem;
    border-radius: 3px;
    background-color: #fde68a;
    color: inherit;
}

/* Пузырь, к которому перешли из списка: вспыхивает и держит обводку,
   чтобы после прокрутки было видно, какой из них искали */
.amx-chat-msg--found .amx-chat-bubble {
    box-shadow: 0 0 0 2px #f5c451;
    animation: amx-chat-found 1.4s ease-out;
}

@keyframes amx-chat-found {
    0%, 30% {
        box-shadow: 0 0 0 6px rgba(245, 196, 81, 0.55);
    }

    100% {
        box-shadow: 0 0 0 2px #f5c451;
    }
}

/* Дежурные, подключённые к чату заказа: строка под полоской разговоров.
   Отдельно от вкладок намеренно — это не ещё один разговор, а люди */
.amx-chat-duties {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
    font-size: 12px;
}

.amx-chat-duties-label {
    color: var(--gray-400);
}

.amx-chat-duty {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border: 1px solid #b0d6d8;
    border-radius: 999px;
    background-color: #eef6f6;
    color: var(--amx-petrol-700);
}

/* Подставленный графиком: та же плашка, но приглушённая и без крестика —
   отключать его нечего, он уйдёт сам, когда менеджер выйдет на работу */
.amx-chat-duty--auto {
    border-style: dashed;
    background-color: transparent;
}

.amx-chat-duty-mark {
    color: var(--gray-400);
    font-size: 11px;
    /* В узкой колонке «Обсуждений» плашка переносится целиком, а подпись
       рвать по слогам ни к чему — она в два слова */
    white-space: nowrap;
}

.amx-chat-duty > button {
    border: 0;
    background-color: transparent;
    color: var(--gray-400);
    font-size: 14px;
    line-height: 1;
}

.amx-chat-duty > button:hover {
    color: var(--amx-red);
}

/* Пустой список: это подсказка, а не пункт — нажимать в ней нечего */
.amx-chat-duty-none {
    max-width: 16rem;
    padding: 0.375rem 0.5rem;
    font-size: 12px;
    line-height: 1.35;
    color: var(--gray-400);
}

/* «Присоединиться к чату» у дежурного и страхующего: действие, а не ещё один
   участник, — залитая, как «Открыть чат» у отделов */
.amx-chat-join {
    padding: 0.125rem 0.625rem;
    border: 0;
    border-radius: 999px;
    background-color: var(--amx-petrol-700);
    color: #fff;
    font-size: 12px;
    line-height: 1.45;
}

.amx-chat-join:hover {
    background-color: var(--amx-petrol-600);
}

.amx-chat-join:disabled {
    opacity: 0.5;
}

/* Закрыт ли вопрос отделом. Плашка стоит над лентой и видна обеим сторонам:
   менеджеру — что закупка вопрос закрыла, закупке — что бухгалтерия ещё нет */
.amx-chat-holds {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.amx-chat-hold {
    display: inline-flex;
    align-items: center;
    /* В правой колонке «Обсуждений» места мало: кнопка переносится под текст,
       а не уезжает за край — без переноса плашка шире колонки не сжимается */
    flex-wrap: wrap;
    /* `min-width: 0` обязателен: без него плашка как элемент flex-строки
       не сжимается ниже своего содержимого, и `max-width` её не удержит */
    min-width: 0;
    max-width: 100%;
    gap: 0.5rem;
    padding: 0.1875rem 0.375rem 0.1875rem 0.625rem;
    border: 1px solid var(--amx-line);
    border-radius: 999px;
    background-color: #fff;
    font-size: 12px;
    color: var(--gray-600);
}

.amx-chat-hold-text {
    /* Без этого длинная строка не сжимается и распирает плашку */
    min-width: 0;
}

/* Точка состояния: часть первой строки текста, а не отдельный значок —
   иначе при переносе она осталась бы висеть строкой выше */
.amx-chat-hold-text::before {
    content: '';
    display: inline-block;
    width: 0.4375rem;
    height: 0.4375rem;
    margin-right: 0.4375rem;
    border-radius: 50%;
    background-color: var(--gray-300);
    vertical-align: middle;
}

.amx-chat-hold-text strong {
    font-weight: 600;
    color: var(--gray-700);
}

/* Вопрос открыт: висит у всего отдела, пока его не закроют */
.amx-chat-hold--open {
    border-color: #edd9a3;
    background-color: #fff8e8;
}

.amx-chat-hold--open .amx-chat-hold-text::before {
    background-color: #c98a00;
}

/* Закрыт: вопрос решён. Плашка гасится, но остаётся — спрятанная читалась бы
   как «этого разговора не было» */
.amx-chat-hold--closed {
    background-color: var(--gray-50);
    color: var(--gray-400);
}

.amx-chat-hold--closed .amx-chat-hold-text strong {
    color: var(--gray-500);
}

.amx-chat-hold-close {
    flex: 0 0 auto;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.45;
}

.amx-chat-hold-close {
    border: 1px solid #b0d6d8;
    background-color: #fff;
    color: var(--amx-petrol-700);
}

.amx-chat-hold-close:hover {
    border-color: var(--amx-petrol-300);
    color: var(--amx-petrol-600);
}

.amx-chat-hold-close:disabled {
    opacity: 0.5;
}

.amx-chat-feed {
    display: flex;
    flex-direction: column;
    min-height: 14rem;
    max-height: 55vh;
    overflow-y: auto;
    padding: 0.75rem 1rem 1rem;
    border: 1px solid var(--amx-line);
    border-radius: 8px;
    background-color: #fafbfb;
    scrollbar-width: thin;
}

.amx-chat-day,
.amx-chat-event {
    display: flex;
    justify-content: center;
    margin: 0.625rem 0 0.25rem;
    text-align: center;
}

.amx-chat-day span,
.amx-chat-event span {
    padding: 0.1875rem 0.625rem;
    border-radius: 999px;
    background-color: var(--gray-100);
    font-size: 11px;
    line-height: 1.4;
    color: var(--gray-600);
}

.amx-chat-event-who {
    margin-left: 0.375rem;
    color: var(--gray-400);
}

.amx-chat-unread {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0.75rem 0 0.25rem;
}

.amx-chat-unread::before,
.amx-chat-unread::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--amx-red);
    opacity: 0.35;
}

.amx-chat-unread span {
    color: var(--amx-red);
    font-size: 11px;
    font-weight: 600;
}

.amx-chat-msg {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    margin-top: 0.625rem;
}

.amx-chat-msg--grouped {
    margin-top: 0.125rem;
}

.amx-chat-msg--own {
    justify-content: flex-end;
}

.amx-chat-avatar {
    display: flex;
    flex: 0 0 auto;
    width: 1.625rem;
    height: 1.625rem;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
}

.amx-chat-bubble {
    max-width: min(42rem, 82%);
    padding: 0.4375rem 0.6875rem 0.3125rem;
    border: 1px solid var(--amx-line);
    border-radius: 10px;
    border-bottom-left-radius: 3px;
    background-color: #fff;
    font-size: 13px;
    line-height: 1.45;
}

.amx-chat-msg--own .amx-chat-bubble {
    border-color: #b0d6d8;
    border-radius: 10px;
    border-bottom-right-radius: 3px;
    background-color: #eef6f6;
}

.amx-chat-who {
    margin-bottom: 0.0625rem;
    font-size: 12px;
    font-weight: 600;
}

.amx-chat-text {
    overflow-wrap: anywhere;
}

.amx-chat-text a {
    color: var(--amx-petrol-600);
    text-decoration: underline;
}

.amx-chat-mention {
    padding: 0 0.1875rem;
    border-radius: 4px;
    background-color: var(--amx-petrol-100);
    color: var(--amx-petrol-700);
    font-weight: 600;
}

/* Цитата сообщения, на которое ответили (просьба 09.10.2026): полоса цветом
   автора, имя и одна строка текста; клик ведёт к исходному */
.amx-chat-quote {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0.125rem 0 0.25rem;
    padding: 0.1875rem 0.5rem;
    border-left: 3px solid var(--amx-petrol-600);
    border-radius: 4px;
    background-color: rgba(15, 23, 42, 0.045);
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
}

button.amx-chat-quote:hover {
    background-color: rgba(15, 23, 42, 0.08);
}

.amx-chat-quote--gone {
    border-left-color: var(--gray-300);
    color: var(--gray-400);
    font-style: italic;
}

.amx-chat-quote-who {
    display: block;
    font-weight: 600;
    color: var(--amx-petrol-700);
}

.amx-chat-quote-text {
    display: block;
    overflow: hidden;
    color: var(--gray-600);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amx-chat-quote-text img.amx-emoji {
    width: 1.1em;
    height: 1.1em;
}

/* Над полем ввода — на что отвечают сейчас */
.amx-chat-replying {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-left: 3px solid var(--amx-petrol-600);
    border-radius: 6px;
    background-color: var(--gray-100);
    font-size: 12px;
    line-height: 1.4;
}

.amx-chat-replying-body {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.amx-chat-replying-drop {
    font-size: 1rem;
    line-height: 1;
    color: var(--gray-400);
}

.amx-chat-replying-drop:hover {
    color: var(--gray-950);
}

.amx-chat-file {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    margin-top: 0.25rem;
    font-size: 12.5px;
    color: var(--amx-petrol-600);
    text-decoration: underline;
}

.amx-chat-file-icon {
    width: 0.875rem;
    height: 0.875rem;
}

.amx-chat-foot {
    display: flex;
    gap: 0.625rem;
    align-items: baseline;
    justify-content: flex-end;
    margin-top: 0.125rem;
    font-size: 11px;
}

.amx-chat-actions {
    display: flex;
    gap: 0.625rem;
    margin-right: auto;
    opacity: 0;
}

.amx-chat-msg:hover .amx-chat-actions,
.amx-chat-bubble:focus-within .amx-chat-actions,
.amx-chat-actions--open {
    opacity: 1;
}

.amx-chat-actions button {
    color: var(--gray-400);
}

.amx-chat-actions button:hover {
    color: var(--gray-950);
    text-decoration: underline;
}

.amx-chat-edited,
.amx-chat-time {
    color: var(--gray-400);
}

/* Галочки у своего сообщения: одна — отправлено, две — прочитал хотя бы
   один. Поле наведения шире самих галочек: в 16×11 пикселей мышью
   не попасть с первого раза */
.amx-chat-ticks {
    display: inline-flex;
    align-self: center;
    margin: -3px -4px -3px -3px;
    padding: 3px 4px 3px 3px;
    border-radius: 5px;
    color: var(--gray-400);
    cursor: default;
    outline: none;
    transition: background-color 0.12s;
}

.amx-chat-ticks:hover,
.amx-chat-ticks:focus-visible {
    background-color: rgba(15, 23, 42, 0.05);
}

.amx-chat-ticks svg {
    width: 16px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.amx-chat-ticks--read {
    color: var(--amx-petrol-600);
}

/* Карточка «кто прочитал». Место ей ставит amxChatSeen (amx-chat.js):
   fixed — чтобы лента не обрезала её у своего края. Скрыта через
   visibility, а не display: размер нужен до показа, чтобы выбрать место */
.amx-chat-seen {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
    width: max-content;
    max-width: min(20rem, calc(100vw - 1rem));
    padding: 0.5625rem 0.6875rem 0.625rem;
    border-radius: 10px;
    background-color: #fff;
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.08),
        0 12px 28px -8px rgba(15, 23, 42, 0.22),
        0 2px 6px rgba(15, 23, 42, 0.06);
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--gray-700);
    text-align: left;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.14s;
    pointer-events: none;
}

.amx-chat-seen--below {
    transform: translateY(-4px);
}

.amx-chat-seen--open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s;
    pointer-events: auto;
}

/* Стрелка к галочкам: повёрнутый квадрат, рамка только по двум внешним
   сторонам — внутренняя половина сливается с карточкой */
.amx-chat-seen::after {
    content: '';
    position: absolute;
    top: 100%;
    left: var(--amx-seen-arrow, 50%);
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    background-color: #fff;
    box-shadow: 1px 1px 0 0 rgba(15, 23, 42, 0.08);
    transform: rotate(45deg);
}

.amx-chat-seen--below::after {
    top: 0;
    box-shadow: -1px -1px 0 0 rgba(15, 23, 42, 0.08);
}

.amx-chat-seen-head {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.amx-chat-seen-count {
    min-width: 1.125rem;
    padding: 0 0.3125rem;
    border-radius: 999px;
    background-color: var(--amx-petrol-100);
    color: var(--amx-petrol-700);
    font-size: 10.5px;
    line-height: 1.6;
    text-align: center;
    letter-spacing: 0;
}

.amx-chat-seen-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    max-height: 15rem;
    overflow-y: auto;
    scrollbar-width: thin;
}

.amx-chat-seen-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
}

.amx-chat-seen-avatar {
    display: flex;
    width: 1.25rem;
    height: 1.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: #fff;
    font-size: 9px;
    font-weight: 600;
}

.amx-chat-seen-name {
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--gray-900);
}

.amx-chat-seen-at {
    padding-left: 0.75rem;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--gray-400);
}

.amx-chat-seen-empty {
    color: var(--gray-500);
}

.amx-chat-edit {
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--amx-line-strong);
    border-radius: 6px;
    background-color: #fff;
    font-size: 13px;
}

.amx-chat-earlier {
    margin-bottom: 0.25rem;
    text-align: center;
    font-size: 12px;
}

.amx-chat-earlier button {
    color: var(--gray-600);
    text-decoration: underline;
}

.amx-chat-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: var(--gray-400);
}

.amx-chat-empty strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--gray-600);
}

.amx-chat-anchor {
    height: 1px;
}

/* Строка ввода меряет свою ширину, а не экран: чат стоит и узкой колонкой
   карточки заказа, и правой половиной «Обсуждений» */
.amx-chat-composer {
    margin-top: 0.75rem;
    container-type: inline-size;
}

.amx-chat-box {
    display: flex;
    gap: 0.375rem;
    align-items: flex-end;
    padding: 0.3125rem 0.375rem;
    border: 1px solid var(--amx-line-strong);
    border-radius: 8px;
    background-color: #fff;
}

.amx-chat-box:focus-within {
    border-color: var(--amx-petrol-600);
    box-shadow: 0 0 0 3px var(--amx-petrol-100);
}

.amx-chat-input {
    position: relative;
    flex: 1;
    min-width: 0;
}

/* Узкая строка ввода (жалоба 09.10.2026: «текст сжат, а поле большое»):
   скрепка, смайлик, «Срочно менеджеру» и отправка вместе занимают около
   265 px, и полю оставалась колонка в одно-два слова — текст и подсказка
   в нём ложились столбиком, а поле вытягивалось вверх. Здесь поле встаёт
   первой строкой во всю ширину, кнопки — второй; «Срочно» переносится
   на две строки раньше, чем отправка уедет на третью */
@container (max-width: 36rem) {
    .amx-chat-box {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        row-gap: 0.25rem;
    }

    .amx-chat-box > * {
        grid-row: 2;
    }

    .amx-chat-box > .amx-chat-input {
        grid-row: 1;
        grid-column: 1 / -1;
    }

    .amx-chat-box > .amx-chat-ask-btn {
        grid-column: 3;
        justify-self: end;
        min-width: 0;
    }

    .amx-chat-box > .amx-chat-send {
        grid-column: 4;
    }
}

.amx-chat-input textarea {
    width: 100%;
    max-height: 10rem;
    padding: 0.375rem 0.375rem;
    border: 0;
    background-color: transparent;
    font-size: 13.5px;
    line-height: 1.5;
    outline: none;
    resize: none;
    /* Поле растёт под текст само; где не поддерживается — остаётся в две строки */
    field-sizing: content;
}

.amx-chat-clip,
.amx-chat-send {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
}

.amx-chat-clip {
    padding: 0.4375rem;
    border-radius: 6px;
    cursor: pointer;
    color: var(--gray-400);
}

.amx-chat-clip:hover {
    background-color: var(--gray-100);
    color: var(--gray-950);
}

.amx-chat-clip input {
    display: none;
}

.amx-chat-send {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 6px;
    background-color: var(--amx-petrol-600);
    color: #fff;
}

.amx-chat-send:hover {
    background-color: var(--amx-petrol-700);
}

.amx-chat-send:disabled {
    opacity: 0.5;
}

.amx-chat-clip .fi-icon,
.amx-chat-send .fi-icon {
    width: 1rem;
    height: 1rem;
}

.amx-chat-suggest {
    position: absolute;
    z-index: 20;
    right: 0;
    bottom: calc(100% + 0.5rem);
    left: 0;
    max-height: 14rem;
    overflow-y: auto;
    padding: 0.25rem;
    border: 1px solid #d9dee3;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: var(--amx-shadow-float);
}

.amx-chat-suggest li {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.375rem 0.5rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
}

.amx-chat-suggest li.amx-active {
    background-color: #eef6f6;
}

.amx-chat-suggest small {
    margin-left: auto;
    font-size: 11px;
    color: var(--gray-400);
}

.amx-chat-attached {
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
    margin-bottom: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    background-color: var(--gray-100);
    font-size: 12px;
}

.amx-chat-attached button {
    font-size: 1rem;
    line-height: 1;
    color: var(--gray-400);
}

.amx-chat-attached button:hover {
    color: var(--gray-950);
}

.amx-chat-hint {
    margin-top: 0.375rem;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--gray-400);
}

/* «Общий» — только для чтения: вместо строки ввода — куда написать */
.amx-chat-closed {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px dashed var(--amx-line-strong);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--gray-600);
}

.amx-chat-closed button {
    color: var(--amx-petrol-600);
    text-decoration: underline;
}

.amx-chat-error {
    margin-top: 0.375rem;
    color: var(--amx-red);
    font-size: 12px;
}

.amx-chats {
    display: grid;
    grid-template-columns: minmax(16rem, 22rem) 1fr;
    gap: 1rem;
    align-items: start;
}

.amx-chats .amx-chat-feed {
    max-height: 62vh;
}

@media (max-width: 1024px) {
    .amx-chats {
        grid-template-columns: 1fr;
    }

    .amx-chats-list {
        max-height: 40vh;
    }
}

.amx-chats-list {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    max-height: 75vh;
    overflow-y: auto;
}

.amx-chats-item {
    display: block;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 1px solid transparent;
    border-radius: 6px;
    text-align: left;
}

.amx-chats-item:hover {
    background-color: var(--gray-100);
}

.amx-chats-item--active {
    border-color: #b0d6d8;
    background-color: #eef6f6;
}

.amx-chats-head {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    font-size: 13px;
    font-weight: 600;
}

.amx-chats-when {
    margin-left: auto;
    font-size: 11px;
    font-weight: 400;
    color: var(--gray-400);
}

.amx-chats-customer {
    font-size: 12px;
    color: var(--gray-600);
}

/* Чей это заказ — видно только тому, кто стоит в нём за менеджера: дежурному
   иначе непонятно, откуда в его списке чужая переписка */
.amx-chats-standin {
    margin-left: 0.375rem;
    padding: 0 0.375rem;
    border: 1px dashed var(--amx-line-strong);
    border-radius: 999px;
    color: var(--gray-400);
    font-size: 11px;
    white-space: nowrap;
}

.amx-chats-thread-head {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.amx-chats-thread-head span {
    margin-left: 0.5rem;
    font-size: 13px;
    color: var(--gray-600);
}

.amx-chats-thread-head a {
    margin-left: auto;
    font-size: 13px;
    color: var(--amx-petrol-600);
    text-decoration: underline;
}

.amx-chats-preview {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--gray-400);
}

.amx-chats-unread {
    display: inline-block;
    min-width: 1.125rem;
    padding: 0 0.3125rem;
    border-radius: 4px;
    background-color: var(--amx-red);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.amx-chats-filters {
    display: flex;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.amx-chats-filters button {
    padding: 0.1875rem 0.625rem;
    border: 1px solid var(--amx-line-strong);
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--gray-600);
    background-color: #fff;
}

.amx-chats-filters button.amx-active {
    background-color: #eef6f6;
    border-color: #b0d6d8;
    color: var(--amx-petrol-700);
}

.amx-chats-search {
    width: 100%;
    margin-bottom: 0.5rem;
    padding: 0.4375rem 0.625rem;
    border: 1px solid var(--amx-line-strong);
    border-radius: 6px;
    background-color: #fff;
    font-size: 13px;
}

.amx-chats-search:focus {
    outline: none;
    border-color: var(--amx-petrol-600);
    box-shadow: 0 0 0 3px var(--amx-petrol-100);
}

.amx-chats-empty {
    padding: 3rem 1rem;
    text-align: center;
    font-size: 13.5px;
    color: var(--gray-400);
}

.fi-wi-stats-overview-stat-description:has(.amx-meter) {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
}

.fi-wi-stats-overview-stat-description .amx-meter {
    width: 100%;
    margin-top: 0.25rem;
}

.amx-stat-danger .fi-wi-stats-overview-stat-value {
    color: var(--amx-red);
}

/* Пустая плитка не должна спорить за внимание с непустой */
.amx-stat-zero .fi-wi-stats-overview-stat-value {
    color: var(--gray-300);
    font-weight: 400;
}

/* Мелкие вспомогательные классы для самописных страниц */

.amx-nowrap {
    white-space: nowrap;
}

.amx-mt {
    margin-top: 0.875rem;
}

.amx-spacer {
    margin-left: auto;
}

.amx-fact {
    font-size: 1.4em;
    margin-left: 0.5rem;
}

.amx-big {
    font-size: 1.35em;
}

.amx-center {
    text-align: center;
}

.amx-scroll-x {
    overflow-x: auto;
}

.amx-card.is-scroll {
    overflow-x: auto;
}

.amx-table.is-wide {
    min-width: 48rem;
}

.amx-table.is-wider {
    min-width: 60rem;
}

.amx-table.is-widest {
    min-width: 82rem;
}

.amx-w-3 {
    width: 3rem;
}

.amx-w-7 {
    width: 7rem;
}

.amx-w-9 {
    width: 9rem;
}

.amx-w-12 {
    width: 12rem;
}

.amx-w-22p {
    width: 22%;
}

.amx-w-32p {
    width: 32%;
}

.amx-clickable,
.amx-seg > button,
.amx-note > summary {
    cursor: pointer;
}

.amx-link {
    color: var(--amx-petrol-600);
    text-decoration: underline;
}

.amx-link:hover {
    color: var(--amx-petrol-700);
}

.amx-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
}

.amx-row.is-tight {
    gap: 0.25rem 1rem;
}

.amx-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 0.75rem;
}

.amx-stack {
    display: grid;
    gap: 0.75rem;
}

.amx-stack.is-tight {
    gap: 0.375rem;
}

.amx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.amx-seg .amx-count {
    margin-left: 0.375rem;
    font-weight: 600;
}

.amx-input {
    width: 100%;
    padding: 0.3125rem 0.5rem;
    border: 1px solid var(--amx-line-strong);
    border-radius: 6px;
    background-color: #fff;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.amx-input:focus {
    outline: none;
    border-color: var(--amx-petrol-600);
    box-shadow: 0 0 0 3px var(--amx-petrol-100);
}

.amx-board .amx-small {
    font-size: 0.8em;
}

.amx-board .amx-report-title {
    font-size: 1.75em;
}

.amx-board .amx-tile-value {
    font-size: 1.6em;
}

.amx-stat-accent .fi-wi-stats-overview-stat-value {
    color: var(--amx-petrol-600);
}

.amx-desk-queue {
    align-items: center;
}

.amx-desk-queue-count {
    min-width: 2rem;
    text-align: right;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.amx-desk-queue-count.is-zero {
    color: var(--gray-300);
    font-weight: 400;
}

.amx-desk-queue-count.is-danger {
    color: var(--amx-red);
}

.amx-desk-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.amx-desk-unread {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    color: inherit;
}

.amx-desk-unread:hover {
    background-color: #f7f9f9;
}

.amx-desk-unread-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.amx-desk-unread-title {
    font-size: 13.5px;
    font-weight: 600;
}

.amx-desk-unread-note {
    font-size: 12.5px;
    color: var(--gray-400);
}

.amx-desk-unread-count {
    margin-left: auto;
    font-size: 20px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--gray-300);
}

.amx-desk-unread.is-unread .amx-desk-unread-count {
    color: var(--amx-red);
}

/* ---------- Раскладка: меню во всю высоту, шапка только над рабочим полем ---------- */

@media (min-width: 64rem) {
    .fi-body-has-topbar.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar {
        position: fixed;
        top: 0;
        inset-inline-start: 0;
        height: 100dvh;
        z-index: 40;
    }

    .fi-body-has-topbar .fi-sidebar-header {
        display: flex;
        justify-content: flex-start;
        background-color: var(--amx-graphite);
        box-shadow: none;
    }

    .fi-body-has-topbar.fi-body-has-sidebar-collapsible-on-desktop .fi-main-ctn {
        margin-inline-start: var(--collapsed-sidebar-width);
    }

    .fi-body-has-topbar.fi-body-has-sidebar-collapsible-on-desktop .fi-main-ctn.fi-main-ctn-sidebar-open {
        margin-inline-start: var(--sidebar-width);
    }

    .fi-body-has-topbar.fi-body-has-sidebar-collapsible-on-desktop .fi-topbar-ctn {
        padding-inline-start: var(--collapsed-sidebar-width);
    }

    .fi-body-has-topbar.fi-body-has-sidebar-collapsible-on-desktop:has(.fi-sidebar.fi-sidebar-open) .fi-topbar-ctn {
        padding-inline-start: var(--sidebar-width);
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header .amx-brand-name,
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-badge-ctn {
        display: none;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header {
        justify-content: center;
        padding-inline: 0;
    }
}

/* ---------- Таблицы: плотность как в макете ---------- */

.fi-ta-cell {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 13px;
}

.fi-ta-cell .fi-ta-text,
.fi-ta-cell .fi-ta-checkbox,
.fi-ta-cell .fi-ta-icon,
.fi-ta-cell .fi-ta-image,
.fi-ta-cell .fi-ta-color,
.fi-ta-cell .fi-ta-toggle,
.fi-ta-cell .fi-ta-select,
.fi-ta-cell .fi-ta-text-input,
.fi-ta-cell .fi-ta-actions,
.fi-ta-selection-cell {
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
}

.fi-ta-text-item,
.fi-ta-text-item-label {
    font-size: 13px;
    line-height: 1.35;
}

.fi-ta-text-description,
.fi-ta-text > .fi-ta-text-list-limited-message {
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--gray-400);
}

.fi-ta-header-cell {
    padding-block: 0;
}

.fi-ta-header-cell,
.fi-ta-header-cell-sort-btn {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7580;
    line-height: 1.2;
}

.fi-ta-header-cell-sort-btn {
    padding-block: 0.625rem;
}

.fi-ta-header-cell-sort-btn .fi-icon {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--amx-petrol-600);
}

.fi-ta-header-cell .fi-loading-indicator,
.fi-ta-search-field .fi-loading-indicator,
.fi-global-search-field .fi-loading-indicator {
    width: 0.75rem;
    height: 0.75rem;
}

.fi-ta-cell .fi-badge {
    min-height: 1.25rem;
    font-size: 11.5px;
}

.fi-ta-header-toolbar {
    min-height: 3rem;
}

.fi-ta-search-field .fi-input-wrp {
    background-color: var(--gray-50);
}

/* ---------- Карточка просмотра: значения, а не отключённые поля ---------- */

.fi-resource-view-record-page .fi-sc .fi-input-wrp,
.fi-resource-view-record-page .fi-sc .fi-input-wrp.fi-disabled {
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
}

.fi-resource-view-record-page .fi-sc .fi-input,
.fi-resource-view-record-page .fi-sc .fi-select-input,
.fi-resource-view-record-page .fi-sc .fi-input:disabled,
.fi-resource-view-record-page .fi-sc .fi-select-input:disabled {
    padding-inline: 0;
    padding-block: 0.125rem;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--gray-950);
    -webkit-text-fill-color: var(--gray-950);
    opacity: 1;
}

.fi-resource-view-record-page .fi-sc .fi-input-wrp-suffix,
.fi-resource-view-record-page .fi-sc .fi-input-wrp-actions,
.fi-resource-view-record-page .fi-sc .fi-fo-select .fi-input-wrp-suffix,
.fi-resource-view-record-page .fi-sc .fi-fo-field-wrp-helper-text,
.fi-resource-view-record-page .fi-sc .fi-fo-field-label-required-mark {
    display: none;
}

.fi-resource-view-record-page .fi-sc .fi-input::placeholder {
    color: var(--gray-300);
}

.fi-resource-view-record-page .fi-sc .fi-fo-field-label-content {
    font-size: 12px;
    font-weight: 400;
    color: var(--gray-400);
}

.fi-resource-view-record-page .fi-sc .fi-fo-field {
    gap: 0.125rem;
}

.fi-resource-view-record-page .fi-sc .fi-fo-checkbox-list,
.fi-resource-view-record-page .fi-sc .fi-fo-toggle {
    opacity: 1;
}

.fi-resource-view-record-page .fi-sc .fi-fo-textarea textarea {
    padding-inline: 0;
    background: transparent;
    box-shadow: none;
    font-size: 13.5px;
    color: var(--gray-950);
}

/* Подпись под заголовком карточки заказа: статус, магазин, менеджер, дата */

.amx-order-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 0.375rem;
    font-size: 13px;
    color: var(--gray-500);
}

.amx-order-meta .fi-badge {
    min-height: 1.5rem;
    padding-inline: 0.625rem;
    font-size: 12.5px;
}

.fi-resource-view-record-page .fi-sc .fi-fo-select .fi-select-input-btn {
    padding-inline: 0;
    color: var(--gray-950);
    opacity: 1;
    font-size: 13.5px;
    font-weight: 500;
}

.fi-resource-view-record-page .fi-sc .fi-fo-select .fi-select-input-btn > .fi-icon,
.fi-resource-view-record-page .fi-sc .fi-fo-select .fi-select-input-btn > svg,
.fi-resource-view-record-page .fi-sc .fi-fo-select button[class*='clear'],
.fi-resource-view-record-page .fi-sc .fi-fo-select .fi-select-input-value-remove-btn,
.fi-resource-view-record-page .fi-sc .fi-fo-select .fi-select-input-ctn > .fi-icon-btn {
    display: none;
}

.fi-resource-view-record-page .fi-sc .fi-fo-select .fi-select-input-value-label,
.fi-resource-view-record-page .fi-sc .fi-fo-select .fi-select-input-placeholder {
    color: var(--gray-950);
}

.fi-resource-view-record-page .fi-sc .fi-fo-select .fi-icon,
.fi-resource-view-record-page .fi-sc .fi-fo-select .fi-icon-btn {
    display: none;
}

.fi-fo-table-repeater-header-column,
.fi-fo-table-repeater > table > thead > tr > th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7580;
    background-color: #fafbfb;
}

.fi-fo-table-repeater > table {
    border-radius: 6px;
}

.fi-resource-view-record-page .fi-sc .fi-select-input-btn,
.fi-resource-view-record-page .fi-sc .fi-select-input {
    background-image: none;
}

/* ---------- Поля и кнопки формы: высота 36 px, панель действий прижата к низу ---------- */

.fi-select-input-btn {
    min-height: 2.25rem;
    padding-block: 0.375rem;
    line-height: 1.375rem;
    font-size: 13.5px;
}

.fi-input-wrp {
    min-height: 2.25rem;
}

.fi-fo-field-wrp-label,
.fi-fo-field-label {
    margin-bottom: 0.125rem;
}

.fi-fo-table-repeater > table > tbody > tr > td {
    padding-block: 0.375rem;
}

.fi-fo-table-repeater-add,
.fi-fo-repeater-add-action-ctn {
    margin-top: 0.5rem;
}

[id='content.form-actions'] {
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin: 1rem -1.5rem 0;
    padding: 0.75rem 1.5rem;
    background-color: #fff;
    border-top: 1px solid var(--amx-line);
}

[id='content.form-actions'] .fi-ac {
    gap: 0.5rem;
}

.fi-page-content > .fi-sc,
.fi-page-content .fi-sc-has-gap {
    row-gap: 1rem;
}

div.fi-select-input {
    padding-block: 0;
}

.fi-select-input div[x-ref='select'] {
    min-height: 2.25rem;
}

/* На карточке просмотра подсказки к полям не нужны: поля здесь не заполняют.
   Строка с меткой amx-field-fact — не подсказка, а сведение о заказе (ИНН
   под названием клиента): она остаётся на виду */
.fi-resource-view-record-page .fi-sc .fi-sc-text:not(.amx-field-fact) {
    display: none;
}

/* Рамки у поля на просмотре нет, и строка под ним отрывалась от значения */
.fi-resource-view-record-page .fi-sc .fi-sc-text.amx-field-fact {
    position: relative;
    top: -0.5rem;
    font-size: 13px;
}

.fi-header-heading {
    text-wrap: balance;
}

/* Шапка страницы: заголовок не ломается, кнопки переносятся строкой ниже */

.fi-header {
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
}

.fi-page-header-main-ctn {
    flex: 1 1 22rem;
    min-width: 0;
}

.fi-header-heading {
    white-space: nowrap;
}

.fi-header-actions-ctn,
.fi-header-actions-ctn .fi-ac {
    flex-wrap: wrap;
}

.amx-order-meta {
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* Шапка карточки заказа держится наверху: заказ длинный — состав, адрес, оплата,
   и, пока его листаешь, номер, статус и кнопка этапа должны оставаться на виду.
   Прижимается под шапку панели, она сама липкая и стоит выше по слою.
   Только на широком экране: на узком такая шапка съедала бы пол-окна */

@media (min-width: 64rem) {
    .fi-resource-orders.fi-resource-view-record-page .fi-page-header-main-ctn > .fi-header,
    .fi-resource-orders.fi-resource-edit-record-page .fi-page-header-main-ctn > .fi-header {
        position: sticky;
        top: 3.5rem;
        z-index: 20;
        margin-inline: -1.5rem;
        padding: 0.625rem 1.5rem 0.75rem;
        background-color: var(--gray-100);
        box-shadow: 0 1px 0 var(--amx-line);
    }
}

/* Несколько действий этапа подряд: главным остаётся первое, остальные — контурные */

.fi-header-actions-ctn .fi-btn.fi-color-primary ~ .fi-btn.fi-color-primary {
    background-color: #fff;
    color: var(--amx-petrol-700);
    box-shadow: 0 0 0 1px var(--amx-line);
}

.fi-header-actions-ctn .fi-btn.fi-color-primary ~ .fi-btn.fi-color-primary:hover {
    background-color: var(--gray-50);
}

.fi-header-actions-ctn .fi-btn.fi-color-primary ~ .fi-btn.fi-color-primary .fi-icon {
    color: var(--amx-petrol-600);
}

/* Карточка товара: цены крупно и список сайтов */

.amx-price-big {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.amx-site-list {
    display: flex;
    flex-direction: column;
}

.amx-site-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    align-items: baseline;
    padding: 0.5rem 0;
    border-bottom: 1px solid #eef0f2;
    font-size: 13px;
}

.amx-site-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.amx-site-row:first-child {
    padding-top: 0;
}

.amx-site-row .amx-name {
    flex: 1 1 8rem;
}

/* Отчёты: плитки и переключатель периода над таблицей Filament */

.fi-page .amx-kpi {
    margin-bottom: 0;
}

.fi-page .amx-report-head {
    margin-bottom: 0;
}

/* Подписи бейджей центрируются по высоте: Filament ставит их по базовой линии */

.fi-badge {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.fi-badge .fi-badge-label-ctn {
    align-self: center;
    display: flex;
    align-items: center;
}

.fi-badge-label {
    line-height: 1.2;
    white-space: nowrap;
}

.fi-sidebar-item-badge-ctn {
    display: flex;
    align-items: center;
}



/* ---------- Состав возврата в карточке заказа ---------- */

.amx-return-items {
    overflow-x: auto;
}

/* Шапка отчётной таблицы липнет к верху экрана — внутри карточки возврата
   прилипать ей не к чему, а фон у карточки свой */
.amx-return-items .amx-table th {
    position: static;
    background-color: transparent;
}

.amx-return-items .amx-table tr.amx-group > td {
    padding-top: 0.625rem;
    border-bottom: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7580;
}

.amx-return-items .amx-table tr:first-child.amx-group > td {
    padding-top: 0;
}

.amx-return-items .amx-table tr.amx-total > td {
    background-color: transparent;
}

/* Причина возврата — своя строка под шапкой карточки, а не хвост даты */
.amx-return-reason {
    margin-top: 0.5rem;
}

/* Сделанная строка списка обзвона: погашена, но на месте — видно, сколько дня уже закрыто */
.amx-row-done {
    opacity: 0.55;
}


/* ---------- График работы ---------- */

/* Сетка шире экрана — прокручиваться должна она одна. Без `min-width: 0`
   на самом блоке и его частях flex разрешает им вырасти по содержимому,
   и на телефоне вбок уезжает вся страница: кисти, предупреждения и шапка */
.amx-schedule,
.amx-schedule > * {
    min-width: 0;
}

.amx-schedule {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.amx-schedule-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.amx-schedule-period {
    font-size: 15px;
    font-weight: 600;
    text-transform: capitalize;
}

.amx-schedule-switch {
    display: inline-flex;
    flex-wrap: wrap;
    border: 1px solid var(--amx-line-strong);
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: #fff;
}

.amx-schedule-switch button {
    padding: 0.25rem 0.625rem;
    border: 0;
    border-right: 1px solid var(--amx-line);
    background: none;
    font-size: 12px;
    color: var(--gray-600);
    cursor: pointer;
}

.amx-schedule-switch button:last-child {
    border-right: 0;
}

.amx-schedule-switch button.is-active {
    background-color: var(--amx-petrol-600);
    color: #fff;
}

/* Кисть: выбранной отметкой красятся ячейки, поэтому сама кнопка показана
   тем же цветом, каким отметка ляжет в сетку */
.amx-brushes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    background-color: #fff;
    border: 1px solid var(--amx-line);
    border-radius: var(--radius-lg);
}

.amx-brush {
    padding: 0.25rem 0.625rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: 12px;
    cursor: pointer;
}

.amx-brush.is-active {
    box-shadow: inset 0 0 0 2px var(--amx-petrol-600);
    font-weight: 600;
}

.amx-brush--morning {
    background-color: #d6eaeb;
    color: var(--amx-petrol-700);
}

.amx-brush--evening {
    background-color: #f7e6c8;
    color: #7a5312;
}

.amx-brush--day_off {
    background-color: var(--gray-100);
    color: var(--gray-600);
}

.amx-brush--vacation {
    background-color: #dff0e2;
    color: #2f6b3d;
}

.amx-brush--sick_leave {
    background-color: #f8dedb;
    color: var(--amx-red);
}

.amx-brush--duty {
    background-color: #fff;
    border-color: var(--amx-petrol-600);
    color: var(--amx-petrol-700);
}

.amx-brush--backup {
    background-color: #fff;
    border-color: #d69a32;
    color: #8a5a0b;
}

.amx-brush--clear {
    background-color: #fff;
    border-color: var(--amx-line-strong);
    color: var(--gray-500);
}

.amx-schedule-hint {
    font-size: 12px;
    margin-left: auto;
}

.amx-schedule-warnings {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #f0d9b5;
    border-left: 3px solid #c98a12;
    border-radius: var(--radius-lg);
    background-color: #fdf6e8;
    font-size: 12px;
    color: #7a5312;
}

/* `min-width: 0` обязателен: без него блок в колонке flex не сжимается уже
   своего содержимого, и на узком экране вбок уезжает вся страница целиком,
   а не одна сетка */
.amx-schedule-scroll {
    min-width: 0;
    overflow-x: auto;
    padding: 0;
}

/* Ширина по карточке, а не по содержимому: иначе справа от колонки «Смен»
   оставалась пустая полоса, а при узком экране работает горизонтальная
   прокрутка — ячейкам задан минимум */
.amx-schedule-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.amx-schedule-grid th,
.amx-schedule-grid td {
    border-bottom: 1px solid #eef0f2;
    border-right: 1px solid #f3f5f6;
}

/* Имя остаётся на месте, когда месяц уезжает вбок: иначе в сетке
   из тридцати одной колонки не понять, чья это строка */
/* Ширина колонки имён задана явно: в таблице во всю ширину `max-width`
   у ячейки не работает, и остаток доставался бы имени, а не дням */
.amx-schedule-grid .amx-schedule-name {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 12rem;
    min-width: 11rem;
    padding: 0.25rem 0.625rem;
    background-color: #fff;
    border-right: 1px solid var(--amx-line);
    text-align: left;
    font-weight: 500;
    white-space: nowrap;
}

.amx-schedule-grid thead .amx-schedule-name {
    z-index: 3;
    background-color: #fafbfb;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7580;
}

.amx-schedule-grid .amx-schedule-name button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.amx-schedule-grid .amx-schedule-name button:hover {
    color: var(--amx-petrol-700);
    text-decoration: underline;
}

.amx-schedule-grid thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #fafbfb;
    color: #6b7580;
}

.amx-schedule-day {
    width: 2rem;
    padding: 0.25rem 0;
    text-align: center;
    font-weight: 600;
    line-height: 1.1;
}

.amx-schedule-day button {
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.amx-schedule-day small {
    display: block;
    font-size: 9px;
    font-weight: 400;
    text-transform: lowercase;
    color: var(--gray-400);
}

.amx-schedule-day.is-rest {
    background-color: #f4f6f7;
}

/* Сегодня отмечено чертой, а не заливкой: сплошной тёмный столбец посреди
   светлой сетки перетягивал на себя взгляд при каждом движении по графику */
.amx-schedule-day.is-today {
    background-color: #eaf3f3;
    color: var(--amx-petrol-700);
    box-shadow: inset 0 -2px 0 var(--amx-petrol-600);
}

.amx-schedule-day.is-today small {
    color: var(--amx-petrol-600);
}

.amx-schedule-group > td {
    padding: 0.5rem 0.625rem 0.25rem;
    border-bottom: 1px solid var(--amx-line);
    background-color: #fafbfb;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7580;
}

.amx-schedule-cell {
    position: relative;
    padding: 1px;
    text-align: center;
}

/* Перекрестье под курсором: полоса влево до имени и вверх до числа. В сетке
   на тридцать одну колонку иначе не прочитать, чья это строка и какой день, —
   взгляд каждый раз уходит искать край таблицы.
   Полосы лежат выше залипших имени и шапки (z-index 2 и 3), поэтому заодно
   подсвечивают и их; клики сквозь полосы проходят */
.amx-schedule-cell:hover::before,
.amx-schedule-cell:hover::after {
    content: "";
    position: absolute;
    z-index: 4;
    background-color: rgb(29 105 112 / 0.09);
    pointer-events: none;
}

.amx-schedule-cell:hover::before {
    top: 0;
    bottom: 0;
    right: 100%;
    width: 100vw;
}

.amx-schedule-cell:hover::after {
    left: 0;
    right: 0;
    bottom: 100%;
    height: 300vh;
}

.amx-schedule-grid tr.is-me .amx-schedule-name {
    background-color: #f1f7f7;
    font-weight: 700;
}

.amx-cell {
    display: block;
    width: 100%;
    min-width: 1.75rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background-color: transparent;
    font: inherit;
    font-weight: 600;
    line-height: 1.5rem;
    color: var(--gray-600);
    text-align: center;
    cursor: pointer;
}

.amx-cell.is-empty:hover {
    background-color: var(--gray-100);
}

/* Отметки бледнее, чем просятся поодиночке: в месячной сетке их разом под
   тысячу, и набор, спокойный на одной ячейке, целой страницей рябит — тем
   сильнее, чем контрастнее монитор. Светлота у всех отметок одна, различают
   их тон и сама метка (9, 12, В, О, Б), поэтому ни одна не лезет вперёд */
.amx-cell.is-morning {
    background-color: #e6f0f1;
    color: #2b6a70;
}

.amx-cell.is-evening {
    background-color: #f8f0de;
    color: #7a5a1e;
}

/* Выходных в сетке почти половина: их заливка чуть заметнее белого — ровно
   настолько, чтобы отличать проставленный выходной от незаполненного дня */
.amx-cell.is-day_off {
    background-color: #f6f7f8;
    color: var(--gray-400);
    font-weight: 400;
}

.amx-cell.is-vacation {
    background-color: #e9f3ec;
    color: #3d6b49;
}

.amx-cell.is-sick_leave {
    background-color: #fbeae8;
    color: #9c4a41;
}

/* Дежурный по отделу: рамка и точка. Цвет смены остаётся — дежурство
   не заменяет смену, а стоит поверх неё */
.amx-cell.is-duty {
    position: relative;
    box-shadow: inset 0 0 0 2px var(--amx-petrol-600);
}

.amx-cell.is-duty::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--amx-petrol-600);
}

.amx-schedule-total {
    width: 2.5rem;
    padding: 0 0.5rem;
    text-align: center;
    color: var(--gray-500);
}

.amx-schedule-grid tfoot th,
.amx-schedule-grid tfoot td {
    border-top: 1px solid var(--amx-line);
    border-bottom: 0;
    background-color: #fafbfb;
}

.amx-schedule-grid tfoot .amx-schedule-name {
    background-color: #fafbfb;
    font-size: 11px;
    font-weight: 600;
    color: #6b7580;
    text-transform: none;
    letter-spacing: 0;
}

.amx-schedule-count {
    padding: 0.25rem 0;
    text-align: center;
    font-weight: 600;
    color: var(--gray-600);
}

/* Ноль на смене — дыра в графике, и видна она должна быть без пересчёта */
.amx-schedule-count.is-zero {
    color: var(--amx-red);
}

.amx-schedule-count.is-today {
    background-color: #eef6f6;
}

.amx-schedule-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-size: 12px;
    color: var(--gray-500);
}

.amx-schedule-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.amx-schedule-legend i {
    display: inline-block;
    width: 1.75rem;
    font-style: normal;
    cursor: default;
}

/* Недельный вид: в ячейку помещаются часы целиком, и колонок всего семь */
.amx-schedule-grid--week .amx-schedule-day {
    width: auto;
    min-width: 5rem;
}

.amx-schedule-grid--week .amx-cell {
    min-width: 4.5rem;
}

/* Дельта на глазах: заработок менеджера по заказу виден в любой точке страницы,
   а не только в «Итогах» под составом. Плашка плавает над правым нижним углом —
   карточка заказа длинная, и до итогов оттуда далеко (просьба владельца 24.09.2026) */
.amx-delta-pill {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.55rem 1rem;
    border: 1px solid var(--amx-petrol-300);
    border-radius: var(--radius-2xl);
    background: #fff;
    box-shadow: var(--amx-shadow-float);
    text-align: right;
    /* Плашка висит поверх страницы, а нажимать в ней нечего: клик должен уходить
       тому, что под ней, — иначе она перекрывала бы кнопки последней строки */
    pointer-events: none;
}

.amx-delta-pill-label {
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.amx-delta-pill-value {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--amx-petrol-700);
    font-variant-numeric: tabular-nums;
}

.amx-delta-pill-note {
    font-size: 11px;
    color: var(--gray-500);
}

/* Плашка не должна закрывать нижнюю строку таблицы на узком экране */
@media (max-width: 640px) {
    .amx-delta-pill {
        right: 0.75rem;
        bottom: 0.75rem;
        padding: 0.4rem 0.75rem;
    }

    .amx-delta-pill-value {
        font-size: 16px;
    }
}

/* Срочная просьба в чате: сообщение, от которого ждут дела, а не ответа.
   Цвет один, красный: степень у просьбы одна, а почему срочно — сказано
   в самом тексте */
.amx-chat-ask {
    display: flex;
    align-items: center;
    /* В правой колонке «Обсуждений» места мало: кнопки переносятся под текст */
    flex-wrap: wrap;
    /* Оба обязательны: без них плашка не сжимается ниже своего содержимого
       и уезжает за край колонки вместе с кнопками */
    min-width: 0;
    max-width: 100%;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.25rem 0.5rem 0.25rem 0.625rem;
    border: 1px solid #f0c2bd;
    border-radius: var(--radius-lg);
    background-color: #fdecea;
    color: var(--amx-red);
    font-size: 12px;
}

.amx-chat-ask-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    /* Цвет задан явно, а не `currentColor`: цвет текста у плашки тот же, что
       и её фон у кружка, и знак растворился бы в нём */
    background-color: var(--amx-red);
    color: #fff;
    font-weight: 700;
    font-size: 11px;
}

/* Кнопки держатся вместе и уезжают вправо: врозь они переносятся по одной,
   и плашка распадается на две строки без смысла */
.amx-chat-ask-buttons {
    display: inline-flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-left: auto;
}

.amx-chat-ask-text {
    /* Растём по остатку строки, но не распираем плашку: кнопки при нехватке
       места переносятся под текст целиком, а не уезжают за край */
    flex: 1 1 12rem;
    min-width: 0;
}

.amx-chat-ask-text strong {
    font-weight: 600;
}

.amx-chat-ask-take,
.amx-chat-ask-done,
.amx-chat-ask-drop {
    flex: 0 0 auto;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.45;
}

.amx-chat-ask-take {
    border: 0;
    background-color: var(--amx-red);
    color: #fff;
}

.amx-chat-ask-done {
    border: 0;
    background-color: var(--amx-petrol-700);
    color: #fff;
}

.amx-chat-ask-drop {
    border: 1px solid currentColor;
    background-color: transparent;
    color: inherit;
    opacity: 0.75;
}

.amx-chat-ask-take:disabled,
.amx-chat-ask-done:disabled,
.amx-chat-ask-drop:disabled {
    opacity: 0.5;
}

/* Реплика, которой попросили о деле. Цвет держится и после того, как дело
   сделали: по нему потом и находят, о чём просили */
.amx-chat-msg--urgent .amx-chat-bubble {
    border-color: #f0c2bd;
    background-color: #fdecea;
}

.amx-chat-badge {
    margin-bottom: 0.125rem;
    color: var(--amx-red);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* «Срочно» в строке ввода, слева от кнопки отправки: просьба ставится тем же
   сообщением, которое пишут, и отдельная строка с кнопкой оставляла над полем
   полупустую полосу */
.amx-chat-ask-btn {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    align-self: flex-end;
    gap: 0.3125rem;
    margin-bottom: 0.125rem;
    border: 1px solid #f0c2bd;
    border-radius: 999px;
    padding: 0.1875rem 0.625rem 0.1875rem 0.375rem;
    background-color: #fdecea;
    color: var(--amx-red);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

/* Восклицательный знак кружком — тот же, что стоит у просьбы в ленте:
   кнопку ищут глазами в тот момент, когда некогда */
.amx-chat-ask-btn::before {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: var(--amx-red);
    color: #fdecea;
    font-weight: 700;
    font-size: 10px;
}

.amx-chat-ask-btn:hover {
    border-color: var(--amx-red);
}

.amx-chat-ask-btn.amx-active {
    border-color: var(--amx-red);
    background-color: var(--amx-red);
    color: #fff;
}

.amx-chat-ask-btn.amx-active::before {
    background-color: #fff;
    color: var(--amx-red);
}

/* Нажатая кнопка красит всю строку ввода: видно, что уйдёт не реплика,
   а срочная просьба. Подсветка при наборе — тоже красная: петролевая рамка
   фокуса иначе перебила бы её ровно в тот момент, когда человек печатает */
.amx-chat-box--urgent {
    border-color: var(--amx-red);
    background-color: #fffafa;
}

.amx-chat-box--urgent:focus-within {
    border-color: var(--amx-red);
    box-shadow: 0 0 0 3px #fdecea;
}

/* Срочные просьбы поверх любой страницы. Полоса внизу, а не сверху: шапка
   и меню остаются доступными, и раскладка панели не трогается */
.amx-urgent {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 50;
    /* Сетка, а не flex: `minmax(0, 1fr)` не даёт тревоге растолкать полосу,
       и «Свернуть» во второй колонке остаётся внутри экрана при любой длине
       текста. На flex она уезжала за край вместе с переполненной строкой */
    display: grid;
    /* Вторая колонка — под «Свернуть»; у того, кто должен ответить, её нет,
       и `auto` схлопывается в ноль */
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    max-width: 100vw;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    background-color: var(--amx-red);
    box-shadow: 0 -8px 24px rgb(21 24 28 / 0.18);
    color: #fff;
    font-size: 13px;
}

/* Развёрнутая полоса закрывает низ страницы: отодвигаем содержимое, иначе
   последняя строка таблицы остаётся под ней и до неё не добраться */
body:has(.amx-urgent:not(.amx-urgent--folded)) .fi-main {
    padding-bottom: 7rem;
}

/* Свёрнутая тревога — капля в углу. Совсем закрыть её нельзя: пока просьбу
   не взяли, она должна оставаться на виду */
.amx-urgent--folded {
    inset: auto 1rem 1rem auto;
    grid-template-columns: auto;
    padding: 0;
    border-radius: 999px;
}

.amx-urgent--folded .amx-urgent-fold {
    justify-self: stretch;
    padding: 0.3125rem 0.875rem;
    border-color: transparent;
    font-weight: 600;
}

.amx-urgent-list {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.5rem;
}

.amx-urgent-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
    gap: 0.5rem;
}

.amx-urgent-mark {
    flex: 0 0 auto;
    padding: 0.0625rem 0.4375rem;
    border-radius: 999px;
    background-color: #fff;
    color: var(--amx-red);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.amx-urgent-body {
    display: flex;
    flex-direction: column;
    /* Базис поменьше ширины узкого окна: иначе строка переполняется и кнопки
       уезжают за край вместе с «Свернуть» */
    flex: 1 1 14rem;
    min-width: 0;
    gap: 0.0625rem;
}

.amx-urgent-head strong {
    font-weight: 600;
}

.amx-urgent-clock {
    font-variant-numeric: tabular-nums;
}

.amx-urgent-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amx-urgent-where {
    color: rgb(255 255 255 / 0.75);
    font-size: 12px;
}

.amx-urgent-open,
.amx-urgent-take,
.amx-urgent-fold {
    flex: 0 0 auto;
    padding: 0.1875rem 0.75rem;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.45;
}

.amx-urgent-take {
    border: 0;
    background-color: #fff;
    color: var(--amx-red);
    font-weight: 600;
}

.amx-urgent-open {
    border: 1px solid rgb(255 255 255 / 0.5);
    color: #fff;
}

.amx-urgent-open:hover {
    background-color: rgb(255 255 255 / 0.12);
}

.amx-urgent-fold {
    justify-self: end;
    border: 1px solid rgb(255 255 255 / 0.4);
    background-color: transparent;
    color: #fff;
    font-size: 12px;
}

/* В узком окне тревога раскладывается столбиком: текст занимает строку
   целиком, кнопки уходят под него — иначе они встают «на грани» и последняя
   вылезает за край */
@media (max-width: 720px) {
    .amx-urgent-body {
        flex-basis: 100%;
    }
}

/* Своя просьба: тихой строкой — бить тревогу самому себе незачем, а видеть,
   докуда дошла лестница, нужно */
.amx-urgent-mine {
    position: fixed;
    inset: auto 1rem 1rem auto;
    z-index: 49;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: min(26rem, calc(100vw - 2rem));
    padding: 0.3125rem 0.75rem;
    border: 1px solid #f0c2bd;
    border-radius: 999px;
    background-color: #fdecea;
    color: var(--amx-red);
    font-size: 12px;
}

/* Просьба в списке обсуждений: такие строки стоят сверху, и по метке видно,
   ждут там дела или просто разговаривают */
.amx-chats-ask {
    flex: 0 0 auto;
    padding: 0.0625rem 0.375rem;
    border-radius: 999px;
    background-color: var(--amx-red);
    color: #fff;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ---------- Заведение заказа: блоки внутри карточки ---------- */

/* Новый заказ свёрстан двумя колонками, и «Оплата», «Партнёрская программа»,
   «Контактное лицо» и «Доставка» стоят подзаголовками внутри карточек, а не
   карточками в карточке (`OrderForm::nested()`). Правило привязано к странице
   заведения: в карточке заказа на правку те же секции остаются отдельными */

.fi-resource-orders.fi-resource-create-record-page .fi-section-not-contained > .fi-section-header {
    min-height: 0;
    padding: 0 0 0.4375rem;
    border-bottom: 1px solid var(--amx-line);
}

.fi-resource-orders.fi-resource-create-record-page .fi-section-not-contained .fi-section-header-heading {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.fi-resource-orders.fi-resource-create-record-page .fi-section-not-contained > .fi-section-content-ctn > .fi-section-content {
    padding: 0;
}

/* Плотность формы заведения: полей тут под сорок, и пустого места между рядами
   было больше, чем самих полей. Ряды и подпись с полем сдвинуты, столбцы — нет */

.fi-resource-orders.fi-resource-create-record-page .fi-section-content.fi-sc-has-gap {
    gap: 0.625rem 1rem;
}

.fi-resource-orders.fi-resource-create-record-page .fi-fo-field {
    gap: 0.1875rem;
}

/* Выбранное значение списка — одной строкой с многоточием. Filament переносит
   длинные названия («Оплата через банк с НДС», улица с домом из подсказки),
   и поле становилось вдвое выше соседних, а ряд — рваным. Целиком значение
   видно при наведении — подпись ставит amx-select-title.js.
   Пункты раскрытого списка переносятся, как везде в панели: список лежит
   поверх формы и ряды не двигает, а от длинной улицы в подсказках оставалось
   начало, и какую из них выбирать, было не понять */

.fi-resource-orders.fi-resource-create-record-page .fi-select-input .fi-select-input-value-ctn > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-wrap: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

/* Блок значения — элемент флекса и без этого не ужимается уже своего текста:
   многоточие тогда не встаёт, а значение уходит за край поля */

.fi-resource-orders.fi-resource-create-record-page .fi-select-input .fi-select-input-value-ctn {
    min-width: 0;
}

/* ������� ���������: �������������� ������� �����������. */
.amx-cell.is-backup { box-shadow: inset 0 0 0 2px #f59e0b; }
.amx-backup-mark { color: #b45309; margin-left: 2px; }

/* ---------- График работы: обеды и перерывы ---------- */

/* Пока клик едет на сервер, сетка гаснет — видно, что он принят. Клики при
   этом не запрещены: ячейки красят подряд, не дожидаясь ответа */
.amx-schedule .is-busy {
    opacity: 0.65;
    transition: opacity 0.15s;
}

/* Подсказка без тревоги: «смены ещё не поставлены» — не ошибка графика */
.amx-schedule-note {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--amx-line);
    border-left: 3px solid var(--amx-petrol-300);
    border-radius: var(--radius-lg);
    background-color: #fff;
    font-size: 12px;
    color: var(--gray-600);
}

/* Кисть обедов: что ставим, с какого времени и на сколько */
.amx-brushes--breaks .amx-schedule-hint {
    flex-basis: 100%;
    margin-left: 0;
}

.amx-brush--lunch {
    background-color: var(--amx-petrol-100);
    color: var(--amx-petrol-700);
}

.amx-brush--break {
    background-color: #fbecd0;
    color: #7a5312;
}

/* «с … до …» переносится целиком: подпись не отрывается от своего поля */
.amx-brush-group {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: 0.375rem;
}

/* Поля «с» и «до» кисти обедов: время пишут руками, поэтому крупно и по центру */
.amx-brush-input {
    width: 4.25rem;
    height: 2rem;
    padding: 0 0.375rem;
    border: 1px solid var(--amx-line-strong);
    border-radius: var(--radius-md);
    background-color: #fff;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--gray-800);
}

.amx-brush-input:focus {
    border-color: var(--amx-petrol-600);
    outline: 1px solid var(--amx-petrol-600);
}

/* Сетка обедов: в ячейке время, поэтому колонка шире, чем у смен */
.amx-schedule-grid--breaks .amx-schedule-day {
    width: 2.25rem;
}

.amx-schedule-grid--breaks .amx-schedule-total {
    width: 3.25rem;
    font-size: 11px;
    white-space: nowrap;
}

/* Обед стоит не во все рабочие дни — строка с дырами находится по числу */
.amx-schedule-grid--breaks .amx-schedule-total.is-short {
    font-weight: 600;
    color: #9a6a12;
}

/* День, открытый на шкале под сеткой: шапка колонки залита, сама колонка
   чуть подсвечена — видно, какой день сейчас разобран внизу */
.amx-schedule-day.is-picked {
    background-color: var(--amx-petrol-600);
    box-shadow: none;
    color: #fff;
}

.amx-schedule-day.is-picked small {
    color: rgb(255 255 255 / 0.75);
}

.amx-schedule-cell.is-picked {
    background-color: #eef5f5;
}

.amx-bcell {
    min-width: 2.125rem;
    font-size: 11px;
}

span.amx-bcell,
i.amx-bcell {
    cursor: default;
}

/* Нерабочий день: обеда в нём нет и быть не может — отметка дня серым,
   без заливки, чтобы не спорить с рабочими ячейками */
.amx-bcell.is-off {
    background-color: transparent;
    font-weight: 400;
    color: var(--gray-300);
}

/* Рабочий день без обеда: цвет смены бледнее, чем у ячейки с обедом, —
   дыра видна, но не кричит: обед могли и не планировать */
.amx-bcell.is-hole.is-morning {
    background-color: #f2f8f8;
}

.amx-bcell.is-hole.is-evening {
    background-color: #fcf8ee;
}

button.amx-bcell:hover {
    box-shadow: inset 0 0 0 1px var(--amx-petrol-300);
}

/* В ячейке только перерыв, обеда нет: время тоньше */
.amx-bcell.has-break {
    font-weight: 400;
}

/* Кроме показанного времени в ячейке есть ещё интервалы — точка в углу */
.amx-bcell.has-more {
    position: relative;
}

.amx-bcell.has-more::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: currentColor;
}

.amx-bcell.is-outside,
button.amx-bcell.is-outside:hover {
    box-shadow: inset 0 0 0 1px var(--amx-red);
    color: var(--amx-red);
}

/* Черновик: ячейка отличается от сохранённой. Пунктир бледный: после
   распределения черновик — вся сетка, и яркая рамка на каждой ячейке рябила бы */
.amx-bcell.is-draft {
    outline: 1px dashed var(--amx-petrol-300);
    outline-offset: -1px;
}

/* Неделя: колонок семь, и в ячейку помещаются все интервалы целиком */
.amx-schedule-grid--breaks.amx-schedule-grid--week .amx-bcell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    height: auto;
    min-height: 1.75rem;
    padding: 0.1875rem 0.25rem;
    line-height: 1.3;
}

.amx-schedule-grid--week .amx-bcell.has-more::after {
    display: none;
}

.amx-bpill {
    display: block;
    font-style: normal;
    white-space: nowrap;
}

.amx-bpill.is-break {
    font-weight: 400;
}

.amx-schedule-count.is-none:not(.is-zero) {
    font-weight: 400;
    color: var(--gray-300);
}

/* Образцы в расшифровке лежат на сером фоне страницы: бледной заливке нужен край */
.amx-schedule-legend i.amx-bcell {
    width: 2.5rem;
    box-shadow: inset 0 0 0 1px rgb(21 24 28 / 0.08);
}

/* ---------- День на шкале времени ---------- */

.amx-day-board-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 1rem;
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid var(--amx-line);
    font-size: 12px;
}

.amx-day-board-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.amx-day-board-nav strong {
    display: inline-block;
    min-width: 11.5rem;
    font-size: 14px;
    text-align: center;
}

.amx-day-board-nav strong::first-letter {
    text-transform: uppercase;
}

.amx-day-board-nav button {
    width: 1.625rem;
    height: 1.625rem;
    border: 1px solid var(--amx-line-strong);
    border-radius: var(--radius-md);
    background-color: #fff;
    font-size: 15px;
    line-height: 1;
    color: var(--gray-600);
    cursor: pointer;
}

.amx-day-board-nav button:hover:not(:disabled) {
    border-color: var(--amx-petrol-300);
    color: var(--amx-petrol-700);
}

.amx-day-board-nav button:disabled {
    opacity: 0.4;
    cursor: default;
}

.amx-day-board-today {
    padding: 0.0625rem 0.4375rem;
    border-radius: 999px;
    background-color: var(--amx-petrol-100);
    font-size: 11px;
    font-weight: 600;
    color: var(--amx-petrol-700);
}

.amx-day-board-scroll {
    overflow-x: auto;
}

.amx-day-board-body {
    min-width: 50rem;
    padding: 0.375rem 0 0.625rem;
    font-size: 12px;
}

.amx-day-group {
    padding: 0.5rem 0.875rem 0.125rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7580;
}

.amx-day-row {
    display: grid;
    grid-template-columns: 11.5rem minmax(0, 1fr) 15.5rem;
    align-items: center;
    column-gap: 0.75rem;
    padding: 1px 0.875rem;
}

.amx-day-row {
    background-color: #fff;
}

.amx-day-row:hover:not(.amx-day-row--axis) {
    background-color: #f7f9f9;
}

/* Имя остаётся на месте, когда шкала на узком экране уезжает вбок */
.amx-day-name {
    position: sticky;
    left: 0;
    z-index: 3;
    overflow: hidden;
    margin-left: -0.875rem;
    padding-left: 0.875rem;
    background-color: inherit;
    line-height: 1.625rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amx-day-row.is-me .amx-day-name {
    font-weight: 700;
}

/* Шкала: деление — час. Смена лежит полосой, обед и перерывы — поверх неё.
   Число часов приходит из разметки, чтобы линии совпали с подписями */
.amx-day-track {
    position: relative;
    height: 1.625rem;
    border-right: 1px solid #e6e9ec;
    background-image: repeating-linear-gradient(
        to right,
        #e6e9ec 0,
        #e6e9ec 1px,
        transparent 1px,
        transparent calc(100% / var(--amx-hours, 12))
    );
}

.amx-day-row--axis .amx-day-track,
.amx-day-row--present .amx-day-track {
    height: 1.125rem;
    border-right: 0;
    background-image: none;
}

.amx-day-row--axis .amx-day-track span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    color: var(--gray-400);
}

.amx-day-shift {
    position: absolute;
    top: 3px;
    bottom: 3px;
    border-radius: 4px;
}

.amx-day-shift.is-morning {
    background-color: #dcebec;
}

.amx-day-shift.is-evening {
    background-color: #f5e8cb;
}

/* Деления, по которым кликают в правке: сами не видны, под курсором —
   подсветка того получаса, с которого встанет интервал */
.amx-day-slot {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.amx-day-slot:hover {
    border-radius: 4px;
    background-color: rgb(29 105 112 / 0.28);
}

.amx-day-item {
    position: absolute;
    top: 3px;
    bottom: 3px;
    z-index: 2;
    padding: 0;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 0 0 1px #fff;
}

.amx-day-item.is-lunch {
    background-color: var(--amx-petrol-600);
}

.amx-day-item.is-break {
    background-color: #d69a32;
}

button.amx-day-item {
    cursor: pointer;
}

button.amx-day-item:hover {
    opacity: 0.75;
}

/* Несохранённый интервал — в штриховку */
.amx-day-item.is-draft {
    background-image: repeating-linear-gradient(
        135deg,
        rgb(255 255 255 / 0.4) 0,
        rgb(255 255 255 / 0.4) 3px,
        transparent 3px,
        transparent 6px
    );
}

.amx-day-item.is-outside {
    box-shadow: 0 0 0 2px var(--amx-red);
}

/* Точное время словами: на шкале получасовой обед — полоска в палец,
   и минуты по ней не прочитать */
.amx-day-text {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--gray-700);
}

.amx-day-text span[class^="is-"]::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.3125rem;
    border-radius: 2px;
}

.amx-day-text .is-lunch::before {
    background-color: var(--amx-petrol-600);
}

.amx-day-text .is-break::before {
    background-color: #d69a32;
}

.amx-day-row--present .amx-day-name {
    font-size: 11px;
    font-weight: 600;
    color: #6b7580;
}

.amx-day-row--present .amx-day-track span {
    position: absolute;
    top: 0;
    bottom: 0;
    font-size: 10.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.125rem;
    text-align: center;
    color: var(--gray-500);
}

/* На месте никого — то, ради чего обеды и ставят лесенкой */
.amx-day-row--present .amx-day-track span.is-zero {
    border-radius: 3px;
    background-color: #fbeae8;
    color: var(--amx-red);
}

.amx-day-off,
.amx-day-empty {
    padding: 0.25rem 0.875rem;
    font-size: 12px;
}

/* Заметки закупки на рабочем столе: текст с переносами строк, как его набрали */
.amx-purchase-notes-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.55; }
.amx-purchase-notes-input { display: block; width: 100%; padding: .5rem .625rem; border: 1px solid var(--amx-line-strong); border-radius: var(--radius-md); font-size: 13.5px; line-height: 1.55; resize: vertical; }
.amx-purchase-notes-input:focus { outline: none; border-color: var(--amx-petrol-600); box-shadow: 0 0 0 1px var(--amx-petrol-600); }


/* Причина возврата на доработку — первой строкой карточки заказа, целиком и с переносами, как её написала закупка */
.amx-return-note { padding: .625rem .875rem; border: 1px solid #f4c7c3; border-left: 3px solid var(--amx-red); border-radius: 6px; background-color: #fdecea; font-size: 13.5px; line-height: 1.5; }
.amx-return-note-head { font-weight: 600; color: var(--amx-red); }
.amx-return-note-text { margin-top: .25rem; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--gray-800, #1f2937); }

/* «Ответственные менеджеры» в карточке заказа: полоса долей дельты и по человеку
   карточка — позиции, сумма, дельта. Люди различаются оттенками петроля */
.amx-split { display: flex; flex-direction: column; gap: .75rem; }
.amx-split-bar { display: flex; height: 8px; overflow: hidden; border-radius: 999px; background: var(--gray-100); gap: 2px; }
.amx-split-bar > span { display: block; height: 100%; }
.amx-split-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); gap: .625rem; }
.amx-split-person { display: flex; align-items: flex-start; gap: .75rem; padding: .7rem .875rem; border: 1px solid var(--amx-line); border-radius: var(--radius-xl); background: #fff; min-width: 0; }
.amx-split-person-you { border-color: var(--amx-petrol-300); box-shadow: inset 3px 0 0 var(--amx-petrol-600); }
.amx-split-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.amx-split-who { flex: 1; min-width: 0; }
.amx-split-name { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .35rem; font-weight: 600; color: var(--gray-900); line-height: 1.35; }
.amx-split-tag { display: inline-block; padding: 0 .4rem; white-space: nowrap; border-radius: 999px; background: var(--gray-100); color: var(--gray-600); font-size: 11px; font-weight: 500; line-height: 1.6; vertical-align: 1px; }
.amx-split-tag-you { background: var(--amx-petrol-100); color: var(--amx-petrol-700); }
.amx-split-meta { margin-top: .1rem; font-size: 12.5px; color: var(--gray-600); font-variant-numeric: tabular-nums; }
.amx-split-titles { margin-top: .15rem; overflow: hidden; font-size: 12px; color: var(--gray-500); white-space: nowrap; text-overflow: ellipsis; }
.amx-split-delta { flex: none; text-align: right; }
.amx-split-delta-value { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--amx-petrol-700); font-variant-numeric: tabular-nums; white-space: nowrap; }
.amx-split-delta-note { font-size: 11.5px; color: var(--gray-500); white-space: nowrap; }

/* Окно «Разделить заказ»: позиция с количеством и ценой, итог по людям снизу */
.amx-split-line-name { font-weight: 500; color: var(--gray-900); line-height: 1.35; }
.amx-split-line-meta { font-size: 12px; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.amx-split-returned { color: var(--amx-red); }
.amx-split-sum { padding: .625rem .875rem; border: 1px solid var(--amx-petrol-300); border-radius: var(--radius-xl); background: #f4f9f9; }
.amx-split-sum-head { margin-bottom: .35rem; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--amx-petrol-700); }
.amx-split-sum-row { display: flex; align-items: baseline; gap: .75rem; padding: .2rem 0; }
.amx-split-sum-row + .amx-split-sum-row { border-top: 1px dashed var(--amx-line-strong); }
.amx-split-sum-name { flex: 1; min-width: 0; font-weight: 500; color: var(--gray-900); }
.amx-split-sum-meta { font-size: 12.5px; color: var(--gray-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.amx-split-sum-delta { min-width: 8rem; text-align: right; font-weight: 600; color: var(--amx-petrol-700); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) {
    .amx-split-people { grid-template-columns: 1fr; }
    .amx-split-sum-row { flex-wrap: wrap; }
    .amx-split-sum-delta { min-width: 0; }
}

/* Окно «Столбцы» списка заказов. Filament раскладывает пункты CSS-колонками
   (`columns`), и Chrome выталкивал хвост в лишнюю колонку за правый край окна —
   половины пунктов не было видно. Сеткой пункты всегда в окне, колонок столько,
   сколько влезает, а порядок читается слева направо — как столбцы в таблице.
   Каждый столбец — плитка: включённый обведён петролем, выключенный приглушён,
   и что скрыто, видно сразу, не вчитываясь в галочки */
.fi-ta-col-manager-modal .fi-ta-col-manager-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .5rem; margin-top: 0; columns: auto; }
.fi-ta-col-manager-modal .fi-ta-col-manager-item { gap: .5rem; padding: .375rem .375rem .375rem .75rem; border: 1px solid var(--amx-line); border-radius: var(--radius-xl); background: #fff; transition: border-color .15s, background-color .15s; }
.fi-ta-col-manager-modal .fi-ta-col-manager-item:hover { border-color: var(--amx-line-strong); background: var(--gray-50); }
.fi-ta-col-manager-modal .fi-ta-col-manager-item:has(.fi-checkbox-input:checked) { border-color: var(--amx-petrol-300); background: #f4f9f9; }
.fi-ta-col-manager-modal .fi-ta-col-manager-label { min-width: 0; min-height: 2rem; cursor: pointer; line-height: 1.3; }
.fi-ta-col-manager-modal .fi-ta-col-manager-label:has(.fi-checkbox-input:not(:checked)) { color: var(--gray-500); }
.fi-ta-col-manager-modal .fi-ta-col-manager-reorder-handle { flex: none; color: var(--gray-300); }
.fi-ta-col-manager-modal .fi-ta-col-manager-item:hover .fi-ta-col-manager-reorder-handle { color: var(--gray-600); }
/* Куда ляжет перетаскиваемая плитка: у Filament это место почти прозрачное */
.fi-ta-col-manager-modal .fi-sortable-ghost { opacity: 1; }
.fi-ta-col-manager-modal .fi-ta-col-manager-items .fi-sortable-ghost .fi-ta-col-manager-item { border-style: dashed; border-color: var(--amx-petrol-600); background: var(--amx-petrol-100); }
.fi-ta-col-manager-modal .fi-sortable-ghost .fi-ta-col-manager-item > * { opacity: .45; }
/* Копируемая ячейка (`amx-copy-cell`): в буфер копирует клик по всей ячейке, а не
   только по тексту. Номер счёта бывает в пару знаков, мимо него легко промахнуться,
   а клик рядом с текстом открывал окно правки строки */
.fi-ta-cell.amx-copy-cell { position: relative; }
.fi-ta-cell.amx-copy-cell .fi-copyable::after { content: ''; position: absolute; inset: 0; }

/* Похожие клиенты в форме клиента (`CustomerForm::duplicates()`): что в базе
   совпало с набранным. Тот же клиент — красной полосой: его второй раз
   не завести; похожие — спокойным петролем: решает человек */
.amx-dup { display: grid; gap: .625rem; padding: .75rem .875rem; border: 1px solid var(--amx-petrol-300); border-left: 3px solid var(--amx-petrol-600); border-radius: var(--radius-xl); background: #f4f9f9; }
.amx-dup.is-blocking { border-color: #f4c7c3; border-left-color: var(--amx-red); background: #fdf3f2; }
.amx-dup-head { display: flex; align-items: flex-start; gap: .625rem; }
.amx-dup-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem; margin-top: .05rem; border-radius: 999px; background: var(--amx-petrol-600); color: #fff; font-size: 12.5px; font-weight: 700; }
.amx-dup.is-blocking .amx-dup-mark { background: var(--amx-red); }
.amx-dup-title { font-size: 14px; font-weight: 600; color: var(--gray-900); line-height: 1.4; }
.amx-dup.is-blocking .amx-dup-title { color: var(--amx-red); }
.amx-dup-hint { margin-top: .1rem; font-size: 12.5px; color: var(--gray-600); line-height: 1.45; }
.amx-dup-list { display: grid; gap: .5rem; }
.amx-dup-row { display: flex; align-items: center; gap: .75rem 1rem; padding: .625rem .75rem; border: 1px solid var(--amx-line); border-radius: var(--radius-lg); background: #fff; }
.amx-dup-row.is-exact { border-color: #f0b8b2; box-shadow: inset 3px 0 0 var(--amx-red); }
.amx-dup-who { flex: 1; min-width: 0; }
.amx-dup-name { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .4rem; font-weight: 600; color: var(--gray-900); line-height: 1.35; overflow-wrap: anywhere; }
.amx-dup-tag { display: inline-block; padding: 0 .45rem; border-radius: 999px; background: var(--amx-petrol-100); color: var(--amx-petrol-700); font-size: 11px; font-weight: 500; line-height: 1.65; white-space: nowrap; }
.amx-dup-tag.is-exact { background: #fbe3e0; color: var(--amx-red); }
.amx-dup-why { margin-top: .1rem; font-size: 12.5px; font-weight: 500; color: var(--gray-700); }
.amx-dup-meta { display: flex; flex-wrap: wrap; gap: .1rem .75rem; margin-top: .15rem; font-size: 12px; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.amx-dup-actions { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .375rem; }
.amx-dup-btn { display: inline-flex; align-items: center; padding: .35rem .75rem; border: 1px solid var(--amx-line-strong); border-radius: var(--radius-lg); background: #fff; color: var(--gray-700); font-size: 12.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; cursor: pointer; }
.amx-dup-btn:hover { background: var(--gray-50); color: var(--gray-900); }
.amx-dup-btn.is-primary { border-color: var(--amx-petrol-600); background: var(--amx-petrol-600); color: #fff; }
.amx-dup-btn.is-primary:hover { border-color: var(--amx-petrol-700); background: var(--amx-petrol-700); }
.amx-dup-btn:disabled { opacity: .6; cursor: default; }
.amx-dup-note { max-width: 16rem; font-size: 12px; line-height: 1.4; color: var(--gray-500); text-align: right; }
.amx-dup-more { justify-self: start; padding: 0; border: 0; background: none; color: var(--amx-petrol-600); font-size: 12.5px; text-decoration: underline; cursor: pointer; }
.amx-dup-other { display: flex; align-items: center; gap: .5rem; padding-top: .125rem; font-size: 13px; color: var(--gray-800); cursor: pointer; }
@media (max-width: 640px) {
    .amx-dup-row { flex-direction: column; align-items: stretch; }
    .amx-dup-actions { justify-content: flex-start; }
}

/* Страница «Дубли клиентов» (`CustomerDuplicates`): группа — карточкой,
   в ней таблица карточек; основная подсвечена, невключённые приглушены */
.amx-dups { display: grid; gap: 1rem; }
.amx-dups-intro { max-width: 60rem; margin: 0; font-size: 13px; color: var(--gray-600); line-height: 1.5; }
.amx-dups-group .amx-card-head { flex-wrap: wrap; font-weight: 500; }
.amx-dups-size { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--gray-500); }
/* Столбцы фиксированной ширины, имя клиента забирает остальное — не меньше 16rem */
.amx-dups-table { width: 100%; min-width: 72rem; border-collapse: collapse; table-layout: fixed; font-size: 13px; font-variant-numeric: tabular-nums; }
.amx-dups-table col.is-pick { width: 6.75rem; }
.amx-dups-table col.is-keep { width: 5rem; }
.amx-dups-table col.is-inn { width: 7rem; }
.amx-dups-table col.is-phone { width: 8.5rem; }
.amx-dups-table col.is-email { width: 10rem; }
.amx-dups-table col.is-manager { width: 8.5rem; }
.amx-dups-table col.is-orders { width: 4.75rem; }
.amx-dups-table col.is-created { width: 6rem; }
.amx-dups-table th { padding: .5rem .75rem; border-bottom: 1px solid #eef0f2; font-size: 11.5px; font-weight: 500; color: var(--gray-500); text-align: left; white-space: nowrap; }
.amx-dups-table td { padding: .55rem .75rem; border-bottom: 1px solid #f1f3f4; vertical-align: top; color: var(--gray-800); }
.amx-dups-table tr:last-child td { border-bottom: 0; }
.amx-dups-table tr.is-keep td { background: #f1f8f8; }
.amx-dups-table tr.is-keep td:first-child { box-shadow: inset 3px 0 0 var(--amx-petrol-600); }
.amx-dups-table tr.is-out td { color: var(--gray-400); }
.amx-dups-table tr.is-out .amx-dups-name { color: var(--gray-500); }
.amx-dups-col-pick, .amx-dups-col-keep { width: 1%; text-align: center !important; }
.amx-dups-num { text-align: right !important; }
.amx-dups-name { font-weight: 600; color: var(--gray-900); text-decoration: none; overflow-wrap: anywhere; }
.amx-dups-name:hover { color: var(--amx-petrol-700); text-decoration: underline; }
.amx-dups-type { font-size: 11.5px; color: var(--gray-500); }
.amx-dups-email { max-width: 14rem; overflow-wrap: anywhere; }
.amx-dups-foot { display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid #eef0f2; background: var(--gray-50); }
.amx-dups-empty { color: var(--gray-500); font-size: 13px; }
.amx-dups-pages { display: flex; flex-wrap: wrap; gap: .375rem; }
/* Таблица шире узкого экрана — прокручивается внутри своей карточки */
.amx-dups-group { overflow-x: auto; }

/* Окно объединения: по каждой вливаемой карточке — что с ней произойдёт */
.amx-merge-card { margin-top: .75rem; padding: .625rem .75rem; border: 1px solid var(--amx-line); border-radius: var(--radius-lg); background: #fff; text-align: left; }
.amx-merge-name { font-weight: 600; color: var(--gray-900); }
.amx-merge-lines { margin: .35rem 0 0; padding-left: 1.1rem; list-style: disc; font-size: 13px; color: var(--gray-700); text-align: left; }
.amx-merge-lines li + li { margin-top: .15rem; }
.amx-merge-warn { margin-top: .75rem; font-size: 12.5px; font-weight: 500; color: var(--amx-red); }

/* Сколько строк на странице — над списком заказов и каталога, рядом с поиском
   (resources/views/filament/tables/per-page.blade.php). Своими отступами, без
   контейнерных запросов: на них держался выбор в подвале, и в боевых браузерах
   он оставался голым текстом */
.amx-per-page { display: block; flex-shrink: 0; }
.amx-per-page .fi-input-wrp { min-height: 2.25rem; font-size: 13px; }
.amx-per-page .fi-input-wrp-prefix { padding-inline-start: 0.625rem; gap: 0.375rem; }
.amx-per-page .fi-input-wrp-label { font-size: 13px; color: var(--gray-600); white-space: nowrap; }
.amx-per-page .fi-select-input { width: auto; min-width: 4.5rem; padding-inline: 0.5rem 1.75rem; font-size: 13px; font-weight: 600; color: var(--gray-900); cursor: pointer; }
.amx-per-page .fi-loading-indicator { width: 0.75rem; height: 0.75rem; }
.fi-ta-ctn:has(.amx-per-page.is-busy) .fi-ta-content-ctn { opacity: 0.45; pointer-events: none; transition: opacity 0.15s 0.2s; }
/* На телефоне подпись не помещается рядом с поиском: число остаётся,
   что оно значит — в подсказке и у экранного диктора */
@media (max-width: 639px) {
    .amx-per-page .fi-input-wrp-prefix { display: none; }
}

/* Панель «Фильтры» (`App\Support\FiltersPanel`). Группы разделены линией,
   а заголовок группы — мелкий серый капсом: обычным жирным он читался
   как ещё одна подпись поля */
.fi-ta-filters-modal .fi-grid-col:has(> .fi-sc-component > .amx-filters-group) ~ .fi-grid-col:has(> .fi-sc-component > .amx-filters-group) {
    border-top: 1px solid var(--gray-200);
    padding-top: 1.25rem;
}
.fi-ta-filters-modal .amx-filters-group .fi-section-header-heading {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-500);
}
/* Пока ни один отбор не включён, «0» на кнопке «Фильтры» — шум */
.amx-filters-idle .fi-btn-badge-ctn { display: none; }

/* ---------- Вкладки списка заказов ---------- */
/* resources/views/filament/orders/list-tabs.blade.php — в шапке карточки
   таблицы, над поиском и фильтрами: вкладки отбирают её строки. Каждая группа —
   своя строка, все строки начинаются от одного края. Подписи групп — колонкой
   слева в стиле заголовков таблицы; где этапы рядом с подписью не встают
   (уже 1440), подпись над строкой. Отмеченная вкладка — как текущая страница
   в подвале таблицы. Нули не выводятся: ряд нулей прятал вкладки, где заказы
   есть. Этапы должны вставать в строку и на экране в 1280: оттого шрифт и поля
   чуть плотнее, чем у вкладок карточки */
.amx-order-tabs { padding: 0.25rem 0.75rem; border-bottom: 1px solid var(--amx-line); }
.amx-order-tabs-nav { display: grid; grid-template-columns: minmax(0, 1fr); }
.amx-order-tabs-nav.is-labelled { grid-template-columns: max-content minmax(0, 1fr); }
/* Отступ от подписи — полем, а не промежутком колонок: иначе черта между
   строками рвалась бы между подписью и вкладками */
.amx-order-tabs-nav.is-labelled .amx-order-tabs-caption { padding-inline-end: 1.25rem; }
.amx-order-tabs-group { display: contents; }
.amx-order-tabs-caption { display: flex; align-items: center; padding-inline-start: 0.5rem; font-size: 11px; font-weight: 600; line-height: 1rem; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7580; white-space: nowrap; }
.amx-order-tabs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.125rem; min-width: 0; padding-block: 0.375rem; }
.amx-order-tabs-group + .amx-order-tabs-group > * { border-top: 1px solid #eef0f2; }
.amx-order-tab { display: inline-flex; align-items: center; gap: 0.375rem; height: 2rem; padding-inline: 0.5rem; border-radius: 6px; font-size: 13px; font-weight: 500; line-height: 1; color: var(--gray-600); white-space: nowrap; cursor: pointer; transition: background-color 0.12s, color 0.12s; }
.amx-order-tab:hover { background-color: rgb(21 24 28 / 0.05); color: var(--gray-950); }
.amx-order-tab:focus-visible { outline: 2px solid var(--amx-petrol-600); outline-offset: 1px; }
.amx-order-tab.is-active { background-color: var(--amx-petrol-100); color: var(--amx-petrol-700); font-weight: 600; }
.amx-order-tab-count { font-size: 12px; font-weight: 600; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.amx-order-tab.is-active .amx-order-tab-count { color: var(--amx-petrol-600); }
.amx-order-tab-count.is-alert { display: inline-flex; align-items: center; justify-content: center; min-width: 1.125rem; height: 1.125rem; padding-inline: 0.3125rem; border-radius: 999px; background-color: var(--amx-red); color: #fff; font-size: 11px; }
.amx-order-tab.is-active .amx-order-tab-count.is-alert { color: #fff; }
.amx-order-tabs-step { width: 0.75rem; height: 0.75rem; margin-inline: -0.125rem; color: #b8bfc6; flex: none; }
.amx-order-tabs-divider { width: 1px; height: 1rem; margin-inline: 0.375rem; background-color: var(--amx-line-strong); flex: none; }
/* Пока вкладка не принесла строки, таблица бледнеет — как при выборе числа строк */
.fi-page-content:has(.amx-order-tabs.is-busy) .fi-ta-content-ctn { opacity: 0.45; pointer-events: none; transition: opacity 0.15s 0.2s; }
@media (max-width: 1439px) {
    .amx-order-tabs-nav.is-labelled { grid-template-columns: minmax(0, 1fr); }
    .amx-order-tabs-nav.is-labelled .amx-order-tabs-caption { padding-top: 0.625rem; }
    .amx-order-tabs-nav.is-labelled .amx-order-tabs-row { padding-top: 0.25rem; }
    .amx-order-tabs-group + .amx-order-tabs-group > .amx-order-tabs-row { border-top: 0; }
}
/* На телефоне группа — строкой с прокруткой вбок до краёв карточки: перенос
   по словам давал полэкрана вкладок над таблицей. Там же прячется пустой ряд
   действий Filament над таблицей: панель на телефоне переносится, и пустой
   контейнер занимал свою строку — полоса пустоты в каждой таблице. На широком
   экране он остаётся: без него поиск и фильтры уехали бы влево */
@media (max-width: 639px) {
    .fi-ta-header-toolbar > .fi-ta-actions:not(:has(*)) { display: none; }
    .amx-order-tabs-row { flex-wrap: nowrap; overflow-x: auto; margin-inline: -0.75rem; padding-inline: 0.75rem; scroll-padding-inline: 0.75rem; scrollbar-width: none; }
    .amx-order-tabs-row::-webkit-scrollbar { display: none; }
}

/* Окно «Ваш день» (App\Livewire\AmxMyDay): подпись слева, значение справа;
   на телефоне подпись встаёт над значением */
.amx-myday { display: grid; gap: .5rem; margin: 0; font-size: 14px; line-height: 1.45; }
.amx-myday-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .75rem; align-items: baseline; }
.amx-myday-row dt { font-size: 12.5px; color: var(--gray-500); }
.amx-myday-row dd { margin: 0; color: var(--gray-900); overflow-wrap: anywhere; }
.amx-myday-row.is-role { padding: .5rem .625rem; margin-inline: -.625rem; border-radius: var(--radius-lg); background: var(--amx-petrol-100); }
.amx-myday-row.is-role strong { color: var(--amx-petrol-700); }
.amx-myday-break { display: block; font-variant-numeric: tabular-nums; }
.amx-myday-break.is-past { color: var(--gray-500); }
.amx-myday-note, .amx-myday-muted { color: var(--gray-500); }
@media (max-width: 480px) {
    .amx-myday-row { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
}

/* Карточка дня наверху графика работы (work-schedule-today.blade.php): по отделу
   колонка; подпись строки слева, на телефоне — над значением */
.amx-today.is-busy { opacity: .6; }
.amx-today-back { width: auto !important; padding: 0 .5rem; font-size: 12px !important; }
.amx-today-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); }
.amx-today-group { padding: .75rem 1rem .875rem; border-top: 1px solid var(--amx-line); }
.amx-today-group:first-child { border-top: 0; }
@media (min-width: 64rem) {
    .amx-today-group { border-top: 0; border-left: 1px solid var(--amx-line); }
    .amx-today-group:first-child { border-left: 0; }
}
.amx-today-title { margin: 0 0 .5rem; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-500); }
.amx-today-list { display: grid; gap: .375rem; margin: 0; font-size: 13px; line-height: 1.45; }
.amx-today-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .75rem; align-items: baseline; }
.amx-today-row dt { font-size: 12px; color: var(--gray-500); }
.amx-today-row dd { display: flex; flex-wrap: wrap; gap: .25rem .375rem; margin: 0; color: var(--gray-900); }
.amx-today-row.is-key dd { gap: .25rem 1.25rem; }
.amx-today-row.is-key strong { color: var(--amx-petrol-700); }
.amx-today-row strong.is-me { text-decoration: underline; text-underline-offset: 3px; }
.amx-today-duty small { margin-right: .25rem; font-size: 11.5px; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.amx-today-missing { font-weight: 600; color: var(--amx-red); }
.amx-today-empty { padding: .75rem 1rem; }
@media (max-width: 480px) {
    .amx-today-row { grid-template-columns: minmax(0, 1fr); gap: .125rem; }
}

/* Строка о черновике над формой «Новый заказ» (draft-autosave.blade.php) */
.amx-draft-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--gray-500); }
.amx-draft-note strong { font-weight: 600; color: var(--gray-700); }

/* ── Эмодзи в чате (01.10.2026): картинки Microsoft Fluent 3D — ChatEmoji, ──
   окно выбора — amxEmojiPicker в amx-chat.js. Картинки одинаковы у всех:
   системные эмодзи на Windows 10 плоские и старые, а новых там нет вовсе */
img.amx-emoji {
    display: inline-block;
    width: 1.375em;
    height: 1.375em;
    margin: 0 0.0625em;
    vertical-align: -0.3125em;
    object-fit: contain;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.amx-chat-text img.amx-emoji:hover {
    transform: scale(1.25);
}

/* Одно-три эмодзи без текста — крупно и без пузыря, как в мессенджерах.
   Появляются с лёгким «пружинящим» увеличением */
.amx-chat-text--jumbo {
    padding: 0.125rem 0;
    line-height: 1;
}

.amx-chat-text--jumbo img.amx-emoji {
    width: 3rem;
    height: 3rem;
    margin: 0 0.125rem 0 0;
    vertical-align: middle;
    animation: amx-emoji-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.amx-chat-text--jumbo img.amx-emoji:hover {
    transform: scale(1.15) rotate(-6deg);
}

.amx-chat-bubble:has(> .amx-chat-text--jumbo) {
    border-color: transparent;
    background-color: transparent;
}

@keyframes amx-emoji-pop {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
}

@media (prefers-reduced-motion: reduce) {
    img.amx-emoji,
    .amx-emoji-grid img {
        transition: none;
        animation: none;
    }
}

/* Кнопка в строке ввода и окно над ней — от правого края поля */
.amx-chat-box {
    position: relative;
}

.amx-emoji-picker {
    display: flex;
    flex: 0 0 auto;
}

.amx-chat-emoji-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    border-radius: 6px;
    color: var(--gray-400);
    transition: color 0.15s, background-color 0.15s;
}

.amx-chat-emoji-btn:hover,
.amx-chat-emoji-btn.amx-active {
    background-color: var(--gray-100);
    color: var(--amx-petrol-600);
}

.amx-chat-emoji-btn .fi-icon {
    width: 1.1875rem;
    height: 1.1875rem;
}

.amx-emoji-panel {
    position: absolute;
    z-index: 30;
    right: 0;
    bottom: calc(100% + 0.5rem);
    display: flex;
    flex-direction: column;
    width: min(23rem, calc(100vw - 2rem));
    height: min(26rem, 70vh);
    overflow: hidden;
    border: 1px solid var(--amx-line);
    border-radius: 14px;
    background-color: #fff;
    box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.28), 0 2px 6px rgba(15, 23, 42, 0.06);
}

.amx-emoji-enter {
    transform-origin: bottom right;
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.amx-emoji-enter-start {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
}

.amx-emoji-enter-end {
    opacity: 1;
    transform: none;
}

.amx-emoji-search {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    margin: 0.625rem 0.625rem 0.375rem;
    padding: 0 0.625rem;
    border-radius: 9px;
    background-color: var(--gray-100);
    color: var(--gray-400);
    transition: background-color 0.15s, box-shadow 0.15s;
}

.amx-emoji-search:focus-within {
    background-color: #fff;
    box-shadow: inset 0 0 0 1px var(--amx-petrol-600), 0 0 0 3px var(--amx-petrol-100);
}

.amx-emoji-search .fi-icon {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
}

.amx-emoji-search input,
.amx-emoji-search input:focus {
    flex: 1;
    min-width: 0;
    padding: 0.4375rem 0;
    border: 0;
    background: transparent;
    font-size: 13px;
    outline: none;
    box-shadow: none;
}

.amx-emoji-tabs {
    display: flex;
    gap: 0.125rem;
    justify-content: space-between;
    padding: 0 0.5rem 0.375rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--amx-line);
    scrollbar-width: none;
}

.amx-emoji-tabs button {
    display: flex;
    flex: 0 0 auto;
    padding: 0.3125rem;
    border-radius: 8px;
    opacity: 0.5;
    filter: grayscale(0.7);
    transition: opacity 0.15s, filter 0.15s, background-color 0.15s;
}

.amx-emoji-tabs button:hover,
.amx-emoji-tabs button.amx-active {
    opacity: 1;
    filter: none;
}

.amx-emoji-tabs button:hover {
    background-color: var(--gray-100);
}

.amx-emoji-tabs button.amx-active {
    background-color: var(--amx-petrol-100);
}

.amx-emoji-tabs img {
    width: 1.25rem;
    height: 1.25rem;
}

.amx-emoji-scroll {
    flex: 1;
    padding: 0 0.5rem 0.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.amx-emoji-scroll h4 {
    position: sticky;
    z-index: 1;
    top: 0;
    margin: 0 -0.5rem;
    padding: 0.5rem 0.75rem 0.25rem;
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.amx-emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr));
}

.amx-emoji-grid button {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: 10px;
    transition: background-color 0.12s;
}

.amx-emoji-grid button:hover {
    background-color: var(--gray-100);
}

.amx-emoji-grid img {
    width: 1.75rem;
    height: 1.75rem;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Картинка ещё не подгружена — пустая клетка, а не значок «битой» картинки */
.amx-emoji-grid img:not([src]) {
    visibility: hidden;
}

.amx-emoji-grid button:hover img {
    transform: scale(1.25);
}

.amx-emoji-grid button:active img {
    transform: scale(0.9);
}

.amx-emoji-empty {
    padding: 2.5rem 1rem;
    font-size: 12.5px;
    text-align: center;
    color: var(--gray-500);
}

.amx-emoji-foot {
    display: flex;
    align-items: center;
    min-height: 2.625rem;
    padding: 0.375rem 0.75rem;
    border-top: 1px solid var(--amx-line);
    background-color: var(--gray-50);
    font-size: 12.5px;
    color: var(--gray-700);
}

.amx-emoji-foot-item {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    min-width: 0;
}

.amx-emoji-foot-item img {
    flex: 0 0 auto;
    width: 1.625rem;
    height: 1.625rem;
}

.amx-emoji-foot-item span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amx-emoji-foot-item span::first-letter {
    text-transform: uppercase;
}

.amx-emoji-foot-hint {
    font-size: 12px;
    color: var(--gray-400);
}

/* Строка услуги без дельты: «не платится» серым, а не «0,00 ₽» рядом с суммой */
.amx-delta-none { color: var(--gray-500); font-size: 13px; }

/* ── Учёт рабочего времени (docs/УЧЁТ-ВРЕМЕНИ.md) ─────────────────────────
   Кнопка дня в шапке: серая «Начать день», петроль «В работе 3:42»,
   янтарь «Обед 0:12», приглушённая «День завершён 8:05» */
.amx-workday-host { display: inline-flex; align-items: center; gap: .5rem; }
.amx-workday-btn {
    display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto;
    height: 1.875rem; padding: 0 .7rem; border-radius: var(--radius-md);
    border: 1px solid var(--amx-line); background-color: var(--gray-50);
    font-size: 12.5px; font-weight: 600; color: var(--gray-700); white-space: nowrap; cursor: pointer;
}
.amx-workday-btn:hover { background-color: var(--gray-100); }
/* «Начать рабочий день» — зелёная, как в Битрикс24: её должно быть видно сразу */
.amx-workday-btn.is-idle { border-color: #15803d; background-color: #16a34a; color: #fff; font-weight: 600; }
.amx-workday-btn.is-idle:hover { background-color: #15803d; }
.amx-workday-btn.is-idle .amx-workday-icon { color: #fff; }
.amx-workday-short { display: none; }
.amx-workday-report.is-early { margin-bottom: .75rem; }
.amx-workday-report.is-early > span { color: #93500d; }
.amx-worktime-running { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--amx-petrol-700); }
.amx-worktime-early { margin: 0 0 .5rem; padding: .35rem .6rem; border-radius: 6px; background-color: #fff6e8; color: #93500d; font-size: 13px; }
.amx-workday-btn.is-working { border-color: var(--amx-petrol-300); background-color: var(--amx-petrol-100); color: var(--amx-petrol-700); }
.amx-workday-btn.is-lunch, .amx-workday-btn.is-break { border-color: #f5c88a; background-color: #fff6e8; color: #93500d; }
.amx-workday-btn.is-finished { color: var(--gray-500); }
.amx-workday-icon { width: 1rem; height: 1rem; color: var(--amx-petrol-600); }
.amx-workday-dot { width: .5rem; height: .5rem; border-radius: 999px; background-color: var(--gray-400); }
.amx-workday-btn.is-working .amx-workday-dot { background-color: var(--amx-petrol-600); box-shadow: 0 0 0 3px rgb(29 105 112 / .18); }
.amx-workday-btn.is-lunch .amx-workday-dot, .amx-workday-btn.is-break .amx-workday-dot { background-color: #d97706; }
.amx-workday-clock { font-variant-numeric: tabular-nums; font-weight: 700; }
.amx-workday-of { font-weight: 500; opacity: .75; }
.amx-workday-panel { display: grid; gap: .75rem; padding: .875rem 1rem 1rem; font-size: 13px; }
.amx-workday-head { display: grid; gap: .1rem; }
.amx-workday-head strong::first-letter { text-transform: uppercase; }
.amx-workday-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .75rem; margin: 0; }
.amx-workday-facts dt { font-size: 11.5px; color: var(--gray-500); }
.amx-workday-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.amx-workday-facts.is-modal { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: .75rem; }
.amx-workday-scale { display: grid; gap: 3px; }
.amx-workday-track { position: relative; height: 6px; border-radius: 3px; background-color: var(--gray-100); overflow: hidden; }
.amx-workday-track.is-fact { height: 10px; }
.amx-workday-track > span { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.amx-workday-track.is-plan > span { background-color: var(--gray-300); }
.amx-workday-track.is-fact > .is-work { background-color: var(--amx-petrol-600); }
.amx-workday-track.is-fact > .is-lunch, .amx-workday-track.is-fact > .is-break { background-color: #f0a33a; }
.amx-workday-hours { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--gray-400); padding-right: 14%; }
.amx-workday-scale.is-mini { min-width: 9rem; }
.amx-workday-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.amx-workday-late { border: 0; padding: 0; background: none; text-align: left; font-size: 12.5px; font-weight: 600; color: #b54708; cursor: pointer; }
.amx-workday-late:hover { text-decoration: underline; }
.amx-workday-late.is-inline { white-space: nowrap; }
.amx-workday-link { font-size: 12.5px; color: var(--amx-petrol-700); }
.amx-workday-report { display: grid; gap: .35rem; font-size: 13px; font-weight: 600; }
.amx-workday-report textarea {
    width: 100%; min-height: 8rem; padding: .5rem .625rem; border: 1px solid var(--amx-line-strong);
    border-radius: var(--radius-md); font: inherit; font-weight: 400; resize: vertical;
}
.amx-workday-report textarea:focus { outline: 2px solid var(--amx-petrol-300); outline-offset: 0; border-color: var(--amx-petrol-600); }
.amx-workday-req { color: var(--amx-red); }
.amx-workday-error { margin-top: .25rem; font-size: 12.5px; color: var(--amx-red); }
.amx-workday-footer, .amx-myday-footer { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 40rem) {
    /* На телефоне в шапке тесно: остаются точка и время */
    .amx-workday-of, .amx-workday-late.is-inline, .amx-workday-btn:not(.is-idle) .amx-workday-label { display: none; }
    .amx-workday-full { display: none; }
    .amx-workday-short { display: inline; }
    /* Кнопка дня стоит за поиском — на телефоне поиск уступает ей место */
    .fi-topbar-end:has(.amx-workday-host) { flex: 1 1 auto; min-width: 0; }
    .fi-topbar-end:has(.amx-workday-host) .fi-global-search { flex: 1 1 auto; min-width: 0; }
    .fi-topbar-end:has(.amx-workday-host) .fi-global-search-field { width: auto; min-width: 0; }
    .fi-topbar-end:has(.amx-workday-host) .fi-global-search-field .fi-input-wrp-suffix { display: none; }
    /* «Уведомления на экран» на телефоне — одним значком, иначе шапка не помещается */
    .amx-desktop-ask { margin-inline-start: .35rem; padding: .25rem .4rem; }
    .amx-desktop-ask-label { display: none; }
    .amx-workday-facts.is-modal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Страница «Рабочее время» */
.amx-worktime-note { padding: .625rem .875rem; border-radius: 8px; background-color: #fff6e8; color: #93500d; font-size: 13px; }
.amx-worktime-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.amx-worktime-list { display: grid; gap: 1rem; }
.amx-worktime-late { color: #b54708; font-weight: 600; }
.amx-worktime-scroll { overflow-x: auto; }
.amx-worktime-table th, .amx-worktime-table td { padding: .5rem .75rem; text-align: left; white-space: nowrap; border-bottom: 1px solid #eef0f2; }
.amx-worktime-table th { font-size: 12px; font-weight: 600; color: var(--gray-500); }
.amx-worktime-table tr.is-me td { background-color: #f7fbfb; }
.amx-worktime-scale-head { min-width: 10rem; }
.amx-worktime-scale-cell { width: 30%; }
.amx-worktime-name { border: 0; padding: 0; background: none; font: inherit; font-weight: 600; color: var(--gray-900); cursor: pointer; }
.amx-worktime-name:hover { color: var(--amx-petrol-700); text-decoration: underline; }
.amx-worktime-state { display: inline-flex; gap: .35rem; align-items: baseline; font-weight: 600; }
.amx-worktime-state.is-working { color: var(--amx-petrol-700); }
.amx-worktime-state.is-lunch, .amx-worktime-state.is-break { color: #93500d; }
.amx-worktime-state.is-finished, .amx-worktime-state.is-not_started { color: var(--gray-600); }
.amx-worktime-flag { display: inline-block; margin-inline-start: .35rem; padding: 0 .4rem; border-radius: 999px; background-color: #fde8e7; color: var(--amx-red); font-size: 11px; font-weight: 600; }
.amx-worktime-flag.is-info { background-color: var(--amx-petrol-100); color: var(--amx-petrol-700); }
.amx-worktime-sheet { font-size: 12px; }
.amx-worktime-sheet th, .amx-worktime-sheet td { padding: .3rem .2rem; text-align: center; border-bottom: 1px solid #eef0f2; border-right: 1px solid #f3f4f5; }
.amx-worktime-sheet th { font-weight: 600; color: var(--gray-600); }
.amx-worktime-sheet th small { display: block; font-size: 10px; font-weight: 400; color: var(--gray-400); }
.amx-worktime-sheet th.is-today { color: var(--amx-petrol-700); background-color: var(--amx-petrol-100); }
.amx-worktime-sheet .is-weekend { background-color: #fafbfb; }
.amx-worktime-sheet .is-name { position: sticky; left: 0; z-index: 1; min-width: 11rem; padding-inline: .75rem; text-align: left; background-color: #fff; white-space: nowrap; }
.amx-worktime-sheet .is-total { min-width: 3.25rem; font-weight: 600; background-color: #f7f8f9; }
.amx-worktime-sheet .is-total.is-last { border-right: 2px solid var(--amx-line-strong); }
.amx-worktime-cell { min-width: 2.6rem; font-variant-numeric: tabular-nums; }
.amx-worktime-cell button, .amx-worktime-cell > span { border: 0; padding: .1rem .2rem; border-radius: 4px; background: none; font: inherit; cursor: pointer; }
.amx-worktime-cell button:hover { background-color: var(--amx-petrol-100); }
.amx-worktime-cell.is-open button, .amx-worktime-cell.is-open > span { color: var(--amx-petrol-700); font-weight: 700; }
.amx-worktime-cell.is-auto button, .amx-worktime-cell.is-auto > span { box-shadow: inset 0 -2px 0 var(--amx-red); }
.amx-worktime-cell.is-offday button, .amx-worktime-cell.is-offday > span { background-color: #fff6e8; }
.amx-worktime-cell.is-absent { color: var(--gray-400); }
.amx-worktime-cell.is-missed { color: var(--amx-red); }
.amx-worktime-legend { margin-top: .75rem; line-height: 2; }
.amx-worktime-legend .amx-worktime-cell { display: inline-block; min-width: 0; }
.amx-worktime-report .amx-card-head { flex-wrap: wrap; }
.amx-worktime-report-text { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.5; }
.amx-worktime-intervals { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.amx-worktime-intervals li { display: flex; gap: .5rem; align-items: baseline; }
.amx-worktime-intervals li > span:first-child { min-width: 6.5rem; font-variant-numeric: tabular-nums; color: var(--gray-600); }
.amx-worktime-intervals li.is-lunch, .amx-worktime-intervals li.is-break { color: #93500d; }

/* ── Лиды (docs/ЛИДЫ-CRM-ПЛАН.md §6.2) ─────────────────────────────────── */
.amx-lead { display: grid; gap: 1rem; }
.amx-lead-head { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; padding: 1rem 1.25rem; }
.amx-lead-head-main { display: grid; gap: .5rem; min-width: 0; }
.amx-lead-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; font-size: 15px; }
.amx-lead-who strong { font-size: 17px; }
.amx-lead-phone { font-weight: 600; color: var(--amx-petrol-700); font-variant-numeric: tabular-nums; }
.amx-lead-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; font-size: 13px; }
.amx-lead-wait { font-weight: 600; color: var(--gray-700); }
.amx-lead-wait.is-long { color: var(--amx-red); }
.amx-lead-repeat { padding: 0 .45rem; border-radius: 999px; background-color: #fff6e8; color: #93500d; font-size: 12px; font-weight: 600; }
.amx-lead-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; font-size: 13px; }
.amx-lead-facts dt { font-size: 11.5px; color: var(--gray-500); }
.amx-lead-facts dd { margin: 0; font-weight: 600; }
.amx-lead-facts.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.amx-lead-facts.is-grid .is-wide { grid-column: 1 / -1; }
.amx-lead-facts.is-grid dd { font-weight: 400; }
.amx-lead-due { color: var(--amx-red); }
.amx-lead-grid { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1rem; align-items: start; }
.amx-lead-col { display: grid; gap: 1rem; min-width: 0; }
.amx-lead-items th, .amx-lead-items td { padding: .45rem .6rem; text-align: left; border-bottom: 1px solid #eef0f2; vertical-align: top; }
.amx-lead-items th { font-size: 12px; font-weight: 600; color: var(--gray-500); }
.amx-lead-items td:nth-child(n+2) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.amx-lead-flag { display: inline-block; margin-inline-start: .35rem; padding: 0 .4rem; border-radius: 999px; background-color: #fff6e8; color: #93500d; font-size: 11px; font-weight: 600; }
.amx-lead-price-diff { color: #93500d; font-weight: 600; }
.amx-lead-comment p { margin: .2rem 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.amx-lead-comment > span { font-size: 11.5px; color: var(--gray-500); }
.amx-lead-hint { margin-top: .4rem; padding: .4rem .6rem; border-radius: 6px; background-color: #fff6e8; color: #93500d; font-size: 12.5px; line-height: 1.4; }
.amx-lead-timeline { display: grid; gap: 0; margin: 0; padding: .5rem 1rem 1rem; list-style: none; font-size: 13px; }
.amx-lead-timeline li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; padding: .45rem 0; border-bottom: 1px solid #f3f4f5; }
.amx-lead-timeline li:last-child { border-bottom: 0; }
.amx-lead-timeline time { color: var(--gray-500); font-variant-numeric: tabular-nums; }
.amx-lead-timeline li.is-order { color: #067647; font-weight: 600; }
.amx-lead-timeline li.is-repeat { color: #93500d; }
.amx-lead-note { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.amx-lead-by { margin-inline-start: .5rem; font-size: 12px; color: var(--gray-500); }
.amx-lead-list { display: grid; gap: .2rem; margin: .2rem 0 0; padding: 0; list-style: none; font-size: 13px; }
.amx-lead-marks { display: grid; gap: .25rem; margin: 0; font-size: 12.5px; }
.amx-lead-marks div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .5rem; }
.amx-lead-marks dt { color: var(--gray-500); }
.amx-lead-marks dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 64rem) { .amx-lead-grid { grid-template-columns: minmax(0, 1fr); } }

/* Над формой заказа из лида: что пришло с сайта */
.amx-lead-source { margin-bottom: 1rem; padding: .75rem 1rem; border-radius: 8px; background-color: #f2f8f8; box-shadow: 0 0 0 1px var(--amx-petrol-100); font-size: 13px; }
.amx-lead-source-head { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-bottom: .4rem; }
.amx-lead-source dl { display: grid; gap: .2rem; margin: 0; }
.amx-lead-source dl div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .5rem; }
.amx-lead-source dt { color: var(--gray-500); }
.amx-lead-source dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

/* ── Доска лидов и карточка (переделка 06.10.2026: этапы как в Битрикс24) ── */
.amx-leadboard { display: grid; gap: .875rem; }
.amx-leadboard-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.amx-leadboard-search, .amx-leadboard-select {
    height: 1.875rem; padding: 0 .625rem; border: 1px solid var(--amx-line-strong); border-radius: 6px;
    background-color: #fff; font: inherit; font-size: 13px; color: var(--gray-800);
}
.amx-leadboard-search { flex: 1 1 16rem; max-width: 26rem; }
.amx-leadboard-columns { display: grid; grid-template-columns: repeat(5, minmax(13rem, 1fr)); gap: .75rem; overflow-x: auto; padding-bottom: .25rem; align-items: start; }
.amx-leadboard-column { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: .5rem; min-width: 0; min-height: 12rem; padding: .5rem; border-radius: 10px; background-color: #eef0f2; transition: box-shadow .12s, background-color .12s; }
.amx-leadboard-column.is-over { background-color: var(--amx-petrol-100); box-shadow: inset 0 0 0 2px var(--amx-petrol-300); }
.amx-leadboard-head { display: flex; align-items: baseline; gap: .4rem; padding: .25rem .25rem .375rem; border-bottom: 3px solid var(--gray-300); font-size: 13px; font-weight: 700; color: var(--gray-800); }
.amx-leadboard-column.is-new .amx-leadboard-head { border-color: #2a78d6; }
.amx-leadboard-column.is-in_work .amx-leadboard-head { border-color: var(--amx-petrol-600); }
.amx-leadboard-column.is-waiting .amx-leadboard-head { border-color: #f0a33a; }
.amx-leadboard-column.is-converted .amx-leadboard-head { border-color: #1baf7a; }
.amx-leadboard-column.is-lost .amx-leadboard-head { border-color: #9aa3ad; }
.amx-leadboard-count { font-weight: 600; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.amx-leadboard-hint { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--gray-500); }
.amx-leadboard-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; min-width: 0; }
.amx-leadboard-empty { padding: 1.25rem .5rem; text-align: center; font-size: 12.5px; color: var(--gray-400); }
.amx-leadboard-more { display: block; padding: .25rem; text-align: center; font-size: 12.5px; color: var(--amx-petrol-700); }
.amx-leadboard-help { margin: 0; }
.amx-leadcard {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: .2rem; min-width: 0; padding: .55rem .65rem; border-radius: 8px; background-color: #fff;
    box-shadow: 0 0 0 1px var(--amx-line), 0 1px 2px rgb(21 24 28 / .05); color: var(--gray-900); font-size: 12.5px; line-height: 1.35;
}
.amx-leadcard:hover { box-shadow: 0 0 0 1px var(--amx-petrol-300), 0 2px 6px rgb(21 24 28 / .08); }
.amx-leadcard[draggable="true"] { cursor: grab; }
.amx-leadcard-top { display: flex; gap: .4rem; align-items: baseline; min-width: 0; }
.amx-leadcard-number { flex: 0 0 auto; }
.amx-leadcard-number { font-weight: 700; font-size: 11.5px; color: var(--gray-500); }
.amx-leadcard-source { flex: 1 1 auto; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--gray-500); }
.amx-leadcard-client { font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.amx-leadcard-phone { color: var(--amx-petrol-700); font-variant-numeric: tabular-nums; }
.amx-leadcard-items { color: var(--gray-600); overflow-wrap: anywhere; }
.amx-leadcard-foot { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .2rem; }
.amx-leadcard-sum { font-weight: 700; font-variant-numeric: tabular-nums; }
.amx-leadcard-badge { padding: 0 .4rem; border-radius: 999px; background-color: var(--gray-100); color: var(--gray-600); font-size: 11px; font-weight: 600; }
.amx-leadcard-badge.is-alert { background-color: #fde8e7; color: var(--amx-red); }
.amx-leadcard-manager { margin-left: auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--gray-500); }

/* Полоса этапов лида: те же шаги, что у заказа, плюс «Отказ» в стороне */
.amx-lead-stages { margin-bottom: 1rem; }
.amx-lead-stage-lost { margin-left: .75rem; }
.amx-lead-stage-lost button { padding: .2rem .65rem; border: 1px solid #f3c1bd; border-radius: 999px; background-color: #fff; color: var(--amx-red); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.amx-lead-stage-lost button:hover { background-color: #fde8e7; }
.amx-lead-stage-lost-now { padding: .2rem .65rem; border-radius: 999px; background-color: #fde8e7; color: var(--amx-red); font-size: 12.5px; font-weight: 600; }
.amx-lead-queue { color: #b54708; }
.amx-lead-match { padding: .5rem .65rem; border-radius: 8px; background-color: #f7f8f9; font-size: 13px; }
.amx-lead-match-new { font-weight: 700; color: #2a78d6; }
.amx-lead-match-found { color: var(--gray-500); }
.amx-lead-side { display: grid; gap: 1rem; }
.amx-lead-comment-box { display: grid; gap: .4rem; padding: .75rem 1rem 0; }
.amx-lead-comment-box textarea { width: 100%; padding: .45rem .6rem; border: 1px solid var(--amx-line-strong); border-radius: 6px; font: inherit; font-size: 13px; resize: vertical; }
.amx-lead-comment-box .fi-btn { justify-self: start; }
.amx-lead-link { color: var(--amx-petrol-700); overflow-wrap: anywhere; }
@media (max-width: 64rem) { .amx-leadboard-columns { grid-template-columns: repeat(5, minmax(15rem, 85vw)); } }

/* ── Чаты с клиентами (онлайн-чат сайтов, docs/ЧАТ.md) ── */
.amx-cchats .amx-chats-item.is-closed { opacity: .6; }
.amx-cchats-count { margin-left: .25rem; padding: 0 .35rem; border-radius: 999px; background-color: var(--gray-200); font-size: 11px; font-weight: 700; }
.amx-cchats-status.is-bot { color: #6b4fbb; }
.amx-cchats-status.is-waiting { color: #b54708; font-weight: 600; }
.amx-cchats-status.is-open { color: var(--amx-petrol-700); }
.amx-cchats-wait { font-size: 11.5px; font-weight: 600; color: #b54708; }
.amx-cchats-wait.is-alert { color: var(--amx-red); }
.amx-cchat { display: flex; flex-direction: column; gap: .625rem; min-width: 0; padding: .875rem 1rem; border-radius: 10px; background-color: #fff; box-shadow: 0 0 0 1px var(--amx-line); }
.amx-cchat-head { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; justify-content: space-between; }
.amx-cchat-who { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: baseline; font-size: 13px; min-width: 0; }
.amx-cchat-who strong { font-size: 15px; }
.amx-cchat-who a { color: var(--amx-petrol-700); }
.amx-cchat-page { flex-basis: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.amx-cchat-actions { display: flex; flex-wrap: wrap; gap: .375rem; }
.amx-cchat-summary { padding: .5rem .75rem; border-radius: 8px; background-color: #f3f0fb; color: #3f3168; font-size: 13px; line-height: 1.45; }
.amx-cchat-feed { display: flex; flex-direction: column; gap: .5rem; height: 55vh; min-height: 18rem; overflow-y: auto; padding: .75rem; border-radius: 8px; background-color: #f4f6f8; }
.amx-cchat-msg { max-width: 78%; padding: .45rem .7rem; border-radius: 10px; background-color: #fff; box-shadow: 0 0 0 1px var(--amx-line); font-size: 13.5px; line-height: 1.45; }
.amx-cchat-msg.is-client { align-self: flex-start; }
.amx-cchat-msg.is-manager { align-self: flex-end; background-color: var(--amx-petrol-100); box-shadow: none; }
.amx-cchat-msg.is-bot { align-self: flex-end; background-color: #f3f0fb; box-shadow: none; }
.amx-cchat-msg.is-system { align-self: center; max-width: 90%; background: none; box-shadow: none; color: var(--gray-500); font-size: 12px; text-align: center; }
.amx-cchat-author { display: flex; gap: .4rem; font-size: 11.5px; font-weight: 700; color: var(--gray-600); }
.amx-cchat-author span { font-weight: 400; color: var(--gray-400); }
.amx-cchat-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.amx-cchat-compose { display: grid; gap: .5rem; }
.amx-cchat-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.amx-cchat-product { position: relative; flex: 1 1 16rem; max-width: 26rem; }
.amx-cchat-product input { width: 100%; height: 1.75rem; padding: 0 .55rem; border: 1px solid var(--amx-line-strong); border-radius: 6px; font: inherit; font-size: 12.5px; }
.amx-cchat-product ul { position: absolute; bottom: 2rem; left: 0; right: 0; z-index: 20; max-height: 16rem; overflow-y: auto; margin: 0; padding: .25rem; list-style: none; border-radius: 8px; background-color: #fff; box-shadow: var(--amx-shadow-float), 0 0 0 1px var(--amx-line); }
.amx-cchat-product li button { display: grid; width: 100%; padding: .35rem .5rem; border-radius: 6px; text-align: left; font-size: 12.5px; }
.amx-cchat-product li button:hover { background-color: var(--gray-100); }
.amx-cchat-product li span { color: var(--gray-500); font-size: 11.5px; }
.amx-cchat-form { display: flex; gap: .5rem; align-items: flex-end; }
.amx-cchat-form textarea { flex: 1; padding: .5rem .65rem; border: 1px solid var(--amx-line-strong); border-radius: 8px; font: inherit; font-size: 13.5px; resize: vertical; }
.amx-cchat-form textarea:focus { outline: 2px solid var(--amx-petrol-300); border-color: var(--amx-petrol-600); }
.amx-cchat-photo { display: block; margin: .15rem 0; }
.amx-cchat-photo img { display: block; max-width: 100%; max-height: 16rem; border-radius: 8px; }
.amx-cchat-clip { display: inline-flex; gap: .3rem; align-items: center; height: 1.75rem; padding: 0 .55rem; border: 1px solid var(--amx-line-strong); border-radius: 6px; font-size: 12.5px; color: var(--gray-700); cursor: pointer; }
.amx-cchat-clip:hover { background-color: var(--gray-100); }
.amx-cchat-rate { margin-left: auto; padding: 0 .2rem; border-radius: 4px; font-size: 12px; opacity: .35; filter: grayscale(1); }
.amx-cchat-rate:hover { opacity: .8; }
.amx-cchat-rate.is-bad { opacity: 1; filter: none; background-color: #fde8e8; }
.amx-leadcard-badge.is-bot { background-color: #f3f0fb; color: #6b4fbb; }
.amx-lead-chat { display: grid; gap: .4rem; }
.amx-lead-chat-open { float: right; font-size: 12.5px; font-weight: 600; color: var(--amx-petrol-700); }
.amx-lead-chat-msg { font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.amx-lead-chat-msg span { font-weight: 700; color: var(--gray-600); margin-right: .25rem; }
.amx-lead-chat-msg.is-bot span { color: #6b4fbb; }
.amx-lead-chat-msg.is-system { color: var(--gray-500); font-style: italic; }
.amx-lead-call { font-size: 12.5px; line-height: 1.4; }
.amx-lead-call-dir { display: inline-block; width: 1rem; font-weight: 700; color: var(--amx-petrol-700); }
.amx-lead-call-dir.is-lost { color: var(--amx-red); }
.amx-lead-call-summary { margin: .1rem 0 .3rem 1rem; color: var(--gray-600); }

/* «Отчёт по заказам» заказами: строка заказа, под ней — позиции (08.10.2026) */
.amx-register-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--amx-line); }
.amx-register-search { flex: 1 1 16rem; max-width: 24rem; }
.amx-register-tools > button { margin-left: auto; border: 0; background: none; cursor: pointer; }
.amx-register > .is-scroll { overflow-x: auto; }
.amx-register-table { min-width: 56rem; }
.amx-register-table .amx-register-toggle-cell { width: 2rem; padding-right: 0; }
.amx-register-table .amx-register-head { cursor: pointer; }
.amx-register-table .amx-register-head > td { vertical-align: top; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.amx-register-table .amx-register-head .amx-tree-toggle { line-height: 1.6; }
.amx-register-table .amx-register-order.is-open .amx-register-head > td { background-color: #f1f7f7; border-bottom-color: transparent; }
.amx-register-table .amx-register-line > td { background-color: #fafcfc; border-bottom-color: #f0f2f3; font-size: 12.5px; }
.amx-register-table .amx-register-order.is-open .amx-register-line:last-child > td { border-bottom: 1px solid var(--amx-line); }
.amx-register-table .amx-register-product,
.amx-register-table .amx-register-client { white-space: normal; }
.amx-register-table .amx-register-client { min-width: 12rem; }
.amx-register-table .amx-register-product { padding-left: 0.75rem; }