/* =====================================================================
   HSG.Warehouse - СПІЛЬНА частина стилю для всіх тем: змінні (кольори, розміри) і КНОПКИ.
   Підключається завжди (у т.ч. для теми "Класична").
   Решта сучасного вигляду (фон, меню, поля, таблиці) - у theme.css, лише для тем "Звичайна" і "Компактна".
   Тема користувача - Налаштування користувача (UserSettings.UiTheme), клас на <html>:
     (без класу) - Звичайна, ui-compact - Компактна, ui-classic - Класична.
   Детальний опис ролей кнопок і контрастів - на початку theme.css.
   ===================================================================== */

:root {
    /* ---- Розміри (звичайна щільність; під 24-27" 1440p без збільшення масштабу браузера) ---- */
    /* Попередній варіант (замалий на 27" 2.5K): 15 / 14 / 13 / 18 / 15, висоти 40 / 34, відступи 10x12, картка 20 */
    --fs-base: 16px;        /* основний текст, таблиці, поля */
    --fs-label: 15px;       /* підписи полів, шапки таблиць, кнопки в таблицях */
    --fs-small: 14px;       /* мінімум по сайту - дрібні підписи */
    --fs-title: 20px;       /* заголовки карток */
    --fs-button: 16px;
    --fs-icon: 17px;        /* іконки в кнопках */
    --fs-menu-icon: 20px;   /* іконки бокового меню */
    --fs-tile: 22px;        /* підписи плиток розділів (Налаштування, Права доступу...) */
    --fs-tile-icon: 48px;   /* іконки плиток */
    --h-control: 44px;      /* висота полів і кнопок */
    --h-control-sm: 38px;   /* кнопки в таблицях */
    --cell-py: 12px;        /* відступи комірок таблиць */
    --cell-px: 14px;
    --card-p: 24px;

    /* ---- Основа ---- */
    --ui-font: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --ui-text: #1f2937;           /* 14.7:1 */
    --ui-text-muted: #4b5563;     /* 7.6:1 - другорядний текст */
    --ui-text-soft: #6b7280;      /* 4.8:1 - підказки, неактивне */
    --ui-bg: #e6eaf0;             /* фон сторінки - помітно темніший за картки */
    --ui-surface: #ffffff;
    --ui-surface-alt: #f4f6f9;
    --ui-border: #d3dae3;         /* лінії таблиць */
    --ui-border-card: #c3cbd6;    /* межі карток і панелей */
    --ui-border-strong: #8592a3;  /* 3.2:1 - рамки полів і кнопок */
    --ui-radius: 6px;
    --ui-radius-lg: 10px;
    --ui-shadow: 0 1px 3px rgba(15, 23, 42, .10), 0 1px 2px rgba(15, 23, 42, .06);
    --ui-focus: 0 0 0 3px rgba(37, 99, 235, .35);

    /* ---- Таблиці ---- */
    --tbl-head: #e8edf3;
    --tbl-stripe: #f2f5f9;
    --tbl-hover: #dce8fb;

    /* ---- Кольори дій ---- */
    --ui-primary: #2563eb;
    --ui-primary-hover: #1d4ed8;
    --ui-primary-soft: #dbeafe;
    --ui-success: #15803d;
    --ui-success-hover: #166534;
    --ui-success-soft: #dcfce7;
    --ui-warning: #b45309;
    --ui-warning-hover: #92400e;
    --ui-warning-soft: #fef3c7;
    --ui-danger: #dc2626;
    --ui-danger-hover: #b91c1c;
    --ui-danger-soft: #fee2e2;
    --ui-neutral-hover: #eef1f5;
}

/* Компактна щільність - більше рядків на екрані (ноутбуки, великі таблиці) */
html.ui-compact {
    --fs-base: 14px;
    --fs-label: 13px;
    --fs-small: 12px;
    --fs-title: 16px;
    --fs-button: 14px;
    --fs-icon: 15px;
    --fs-menu-icon: 18px;
    --fs-tile: 16px;
    --fs-tile-icon: 42px;
    --h-control: 34px;
    --h-control-sm: 30px;
    --cell-py: 6px;
    --cell-px: 10px;
    --card-p: 14px;
}


/* ---------- Тема "Класична": початковий вигляд Paper Dashboard + нові кнопки ---------- */
html.ui-classic {
    --ui-font: Muli, Arial, sans-serif;
    --fs-button: 14px;
    --fs-label: 14px;
    --fs-small: 13px;
    --fs-icon: 15px;
    --h-control: 40px;
    --h-control-sm: 34px;
}

/* ---------- Кнопки: основа ---------- */

.btn,
.navbar .navbar-nav > li > a.btn {
    font-family: var(--ui-font);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--h-control);
    padding: 7px 18px;
    font-size: var(--fs-button);
    font-weight: 500;
    line-height: 1.4;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--ui-radius);
    opacity: 1;
    filter: none;
    white-space: nowrap;
    vertical-align: middle;
    box-shadow: none;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}

    .btn:focus,
    .btn:active:focus {
        outline: 0 !important;
    }

    .btn:focus-visible {
        box-shadow: var(--ui-focus);
    }

    .btn:active {
        transform: translateY(1px);
    }

    .btn i {
        font-size: var(--fs-icon);
        line-height: 1;
    }

    .btn.btn-wd {
        min-width: 150px;
    }

.btn-sm,
.btn-group-sm > .btn {
    min-height: var(--h-control-sm);
    padding: 4px 11px;
    font-size: var(--fs-label);
}

    .btn-sm i {
        font-size: var(--fs-icon);
    }

.btn-xs {
    min-height: 28px;
    padding: 2px 8px;
    font-size: var(--fs-small);
}

.btn-lg {
    min-height: 48px;
    padding: 10px 24px;
    font-size: 16px;
}

.btn.disabled,
.btn[disabled],
.btn:disabled,
fieldset[disabled] .btn {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

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

/* Відстань між кнопками, що стоять поруч */
.btn + .btn,
.btn + form,
form + .btn {
    margin-left: 6px;
}

.btn-group > .btn + .btn {
    margin-left: -1px;
}

/* ---------- Другорядна (btn / btn-default) ---------- */

.btn,
.btn-default,
.btn.btn-default {
    background-color: var(--ui-surface);
    border-color: var(--ui-border-strong);
    color: #1e293b;
}

    .btn:hover,
    .btn:focus,
    .btn-default:hover,
    .btn-default:focus,
    .btn.btn-default.active,
    .open > .btn-default.dropdown-toggle {
        background-color: var(--ui-neutral-hover);
        border-color: #475569;
        color: var(--ui-text);
    }

    .btn.btn-fill.btn-default,
    .btn-default.btn-fill {
        background-color: #475569;
        border-color: #475569;
        color: #fff;
    }

        .btn-default.btn-fill:hover,
        .btn-default.btn-fill:focus {
            background-color: #334155;
            border-color: #334155;
            color: #fff;
        }

/* ---------- Суцільні кнопки (btn-fill) - головні дії ---------- */

.btn-info.btn-fill,
.btn-primary.btn-fill {
    background-color: var(--ui-primary);
    border-color: var(--ui-primary);
    color: #fff;
}

    .btn-info.btn-fill:hover, .btn-info.btn-fill:focus, .btn-info.btn-fill:active, .btn-info.btn-fill.active,
    .btn-primary.btn-fill:hover, .btn-primary.btn-fill:focus, .btn-primary.btn-fill:active, .btn-primary.btn-fill.active {
        background-color: var(--ui-primary-hover);
        border-color: var(--ui-primary-hover);
        color: #fff;
    }

.btn-success.btn-fill {
    background-color: var(--ui-success);
    border-color: var(--ui-success);
    color: #fff;
}

    .btn-success.btn-fill:hover, .btn-success.btn-fill:focus, .btn-success.btn-fill:active, .btn-success.btn-fill.active {
        background-color: var(--ui-success-hover);
        border-color: var(--ui-success-hover);
        color: #fff;
    }

.btn-warning.btn-fill {
    background-color: var(--ui-warning);
    border-color: var(--ui-warning);
    color: #fff;
}

    .btn-warning.btn-fill:hover, .btn-warning.btn-fill:focus, .btn-warning.btn-fill:active, .btn-warning.btn-fill.active {
        background-color: var(--ui-warning-hover);
        border-color: var(--ui-warning-hover);
        color: #fff;
    }

.btn-danger.btn-fill {
    background-color: var(--ui-danger);
    border-color: var(--ui-danger);
    color: #fff;
}

    .btn-danger.btn-fill:hover, .btn-danger.btn-fill:focus, .btn-danger.btn-fill:active, .btn-danger.btn-fill.active {
        background-color: var(--ui-danger-hover);
        border-color: var(--ui-danger-hover);
        color: #fff;
    }

/* ---------- Кнопки без заливки (переважно дії в таблицях) ----------
   Спокійні: біле тло і сіра рамка, колір - лише в тексті/іконці.
   При наведенні - кольорове тло і рамка. Так рядки таблиць не "рябіють" */

.btn-info:not(.btn-fill),
.btn-primary:not(.btn-fill) {
    background-color: var(--ui-surface);
    border-color: var(--ui-border-strong);
    color: var(--ui-primary-hover);
}

    .btn-info:not(.btn-fill):hover, .btn-info:not(.btn-fill):focus, .btn-info:not(.btn-fill).active,
    .btn-primary:not(.btn-fill):hover, .btn-primary:not(.btn-fill):focus, .btn-primary:not(.btn-fill).active {
        background-color: var(--ui-primary-soft);
        border-color: var(--ui-primary);
        color: #1e40af;
    }

.btn-success:not(.btn-fill) {
    background-color: var(--ui-surface);
    border-color: var(--ui-border-strong);
    color: var(--ui-success);
}

    .btn-success:not(.btn-fill):hover, .btn-success:not(.btn-fill):focus, .btn-success:not(.btn-fill).active {
        background-color: var(--ui-success-soft);
        border-color: var(--ui-success);
        color: var(--ui-success-hover);
    }

.btn-warning:not(.btn-fill) {
    background-color: var(--ui-surface);
    border-color: var(--ui-border-strong);
    color: var(--ui-warning);
}

    .btn-warning:not(.btn-fill):hover, .btn-warning:not(.btn-fill):focus, .btn-warning:not(.btn-fill).active {
        background-color: var(--ui-warning-soft);
        border-color: var(--ui-warning);
        color: var(--ui-warning-hover);
    }

.btn-danger:not(.btn-fill) {
    background-color: var(--ui-surface);
    border-color: var(--ui-border-strong);
    color: var(--ui-danger);
}

    .btn-danger:not(.btn-fill):hover, .btn-danger:not(.btn-fill):focus, .btn-danger:not(.btn-fill).active {
        background-color: var(--ui-danger-soft);
        border-color: var(--ui-danger);
        color: var(--ui-danger-hover);
    }

/* Кнопка-посилання - прозора, лише ВЕЛИКА.
   Маленькі btn-sm btn-link - це кнопки дій у рядках таблиць (продукція, конкуренти, звіти) -
   вони виглядають як звичайні кнопки дій: квадратна рамка, колір в іконці (як "Редагувати"/"Видалити" у продажах).
   Попередній варіант: прозорими були всі .btn-link, у т.ч. маленькі в таблицях */
.btn-link:not(.btn-sm),
.btn.btn-link:not(.btn-sm) {
    background-color: transparent !important;
    border-color: transparent !important;
    padding-left: 6px;
    padding-right: 6px;
}

    .btn-link:not(.btn-sm):hover,
    .btn.btn-link:not(.btn-sm):hover {
        text-decoration: underline;
    }

.btn-sm.btn-link,
.btn-sm.btn-link:hover,
.btn-sm.btn-link:focus {
    text-decoration: none;
}

/* Кнопки-іконки в рядках - квадратні, однакового розміру */
td > .btn-sm,
td .btn-sm:only-child {
    min-width: var(--h-control-sm);
    padding-left: 8px;
    padding-right: 8px;
}

/* Кнопки, що з'являються при наведенні (hover-btn / cell-action-right) - компактніші */
.hover-btn.btn,
.cell-action-right.btn {
    min-height: 28px;
    padding: 2px 8px;
}


/* ---------- Значки-«чипи» (стан доставки, оплата) - для всіх тем ----------
   Кольори однакові по всій програмі: сірий - створено, синій - в дорозі, жовтий - чекає,
   зелений - готово/оплачено, червоний - відмова/проблема. Текст на тлі - контраст від 5:1 */
/* Форма - як у кнопок (заокруглення var(--ui-radius), рамка 1px); попередній варіант - "пігулка" (border-radius: 999px) */
.ui-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 2px 10px;
    border-radius: var(--ui-radius);
    border: 1px solid transparent;
    font-size: var(--fs-small);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.ui-chip-grey  { background: #f1f5f9; color: #334155; border-color: #cbd5e1; }
.ui-chip-blue  { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.ui-chip-amber { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.ui-chip-green { background: #dcfce7; color: #166534; border-color: #86efac; }
.ui-chip-red   { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

/* Лічильник біля пункту бічного меню (напр. "Посилки до мене" - скільки чекають у відділенні) */
.sidebar .nav p .menu-badge,
.menu-badge {
    display: inline-block;
    min-width: 20px;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 10px;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
}

/* ---------- Комірки списків: головне жирним, уточнення дрібно сірим ---------- */
.cell-main {
    font-weight: 600;
}

.cell-main-normal {
    font-weight: 500;
}

.cell-sub {
    margin-top: 2px;
    font-size: var(--fs-small);
    color: #4b5563;
}

.cell-sub-inline {
    font-size: var(--fs-small);
    color: #4b5563;
    white-space: nowrap;
}

.cell-hint {
    cursor: help;
    font-size: var(--fs-small);
}

.cell-icons {
    margin-top: 4px;
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.nowrap {
    white-space: nowrap;
}

/* Товари - не розтягують таблицю: довга назва переноситься, максимум 2 рядки */
.sales-table .cell-products {
    max-width: 320px;
    min-width: 180px;
}

    .sales-table .cell-products .cell-main-normal {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

/* Опис продажу - повністю, з переносами рядків; дуже довгий - до 4 рядків (повний текст у підказці) */
.cell-description {
    min-width: 220px;
    max-width: 420px;
}

    .cell-description-text {
        white-space: pre-line;
        word-break: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

.sales-table .crm-list-badge {
    text-decoration: none;
    white-space: nowrap;
}

/* Статус продажу під датою в колонці "Замовлення" */
.sales-table .cell-status {
    margin-top: 4px;
    font-size: var(--fs-small);
    font-weight: 600;
}

/* Телефон: групи цифр розділені відступом, а не пробілами; "+" - з CSS.
   У тексті сторінки номер суцільний (380987818261) - копіювання і Ctrl+F працюють без пробілів */
.phone {
    white-space: nowrap;
}

    .phone-ua::before {
        content: "+";
    }

    .phone-ua > span + span {
        margin-left: .3em;
    }

/* Панель інструментів над списком (кнопка "Створити", фільтри) - в один ряд, однакової висоти */
.list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

    .list-toolbar form {
        margin: 0;
    }

    .list-toolbar .btn + form {
        margin-left: 0;
    }

    .list-toolbar .dropdown-checkbox > button {
        min-height: var(--h-control);
        font-size: var(--fs-label);
    }

/* Таблиця одразу в картці - без зайвих відступів обгорток */
.card > .content > .table-responsive {
    margin: 0;
    border: 0;
}

/* Поле швидкого пошуку в панелі інструментів - займає решту рядка */
.list-toolbar-search {
    flex: 1 1 280px;
    max-width: 480px;
}

.list-toolbar select.form-control {
    min-width: 200px;
}

/* ---------- Плитки статистики над списком продажів (Sale/Index) ---------- */
.sales-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sales-stat {
    display: block;
    min-width: 150px;
    padding: 6px 14px;
    border: 1px solid var(--ui-border-card);
    border-radius: var(--ui-radius);
    background: var(--ui-surface-alt);
    color: var(--ui-text);
    line-height: 1.3;
}

a.sales-stat:hover,
a.sales-stat:focus {
    text-decoration: none;
    color: var(--ui-text);
    border-color: var(--ui-border-strong);
}

.sales-stat-label {
    font-size: var(--fs-small);
    color: var(--ui-text-muted);
}

.sales-stat-value {
    font-size: var(--fs-title);
    font-weight: 700;
}

.sales-stat-sum {
    font-size: var(--fs-label);
    font-weight: 600;
    color: var(--ui-text-muted);
}

.sales-stat-sub {
    font-size: var(--fs-small);
    color: var(--ui-text-soft);
    white-space: nowrap;
}

.sales-stat-up   { color: var(--ui-success); font-weight: 600; }
.sales-stat-down { color: var(--ui-danger); font-weight: 600; }

.sales-stat-warn {
    background: var(--ui-warning-soft);
    border-color: #fcd34d;
}

    .sales-stat-warn .sales-stat-label,
    .sales-stat-warn .sales-stat-value {
        color: var(--ui-warning-hover);
    }

    .sales-stat-warn.active {
        border-color: var(--ui-warning);
        box-shadow: 0 0 0 2px var(--ui-warning-soft);
    }

.sales-stat-danger {
    background: var(--ui-danger-soft, #fee2e2);
    border-color: #fca5a5;
}

    .sales-stat-danger .sales-stat-label,
    .sales-stat-danger .sales-stat-value {
        color: var(--ui-danger-hover);
    }

.sales-stat-record {
    background: var(--ui-success-soft);
    border-color: #86efac;
}

.sales-stat-muted .sales-stat-value {
    color: var(--ui-text-muted);
}

/* Олівець "Картка клієнта" біля ПІБ: з'являється при наведенні на всю комірку клієнта
   (раніше - лише точно на ім'я; у новому списку продажів через помилку класу не з'являвся взагалі) */
td:hover .hover-action .hover-btn {
    opacity: 1;
    visibility: visible;
}

.client-edit-icon {
    margin-left: 8px;
    font-size: 15px;
}

/* Підписані значки під сумою (Чек / Повернення / Рахунок) - посилання у стилі станів ТТН */
.cell-chips {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

a.ui-chip.chip-link {
    text-decoration: none;
    gap: 5px;
    transition: filter .12s ease, box-shadow .12s ease;
}

    a.ui-chip.chip-link:hover {
        filter: brightness(.95);
        box-shadow: 0 0 0 2px rgba(37, 99, 235, .15);
    }

    a.ui-chip.chip-link i {
        font-size: 13px;
    }

/* Варіант 2 - збільшені картинки під сумою */
.cell-icons {
    gap: 8px;
    align-items: center;
}