/* =====================================================================
   HSG.Warehouse - єдиний стиль інтерфейсу (поверх Paper Dashboard)
   ---------------------------------------------------------------------
   Підключається ОСТАННІМ у Views/Shared/_Layout.cshtml - лише для тем "Звичайна" і "Компактна".
   Змінні (кольори, розміри) і кнопки - у theme-base.css (підключається завжди, раніше за цей файл).
   Відкат до старого вигляду: закоментувати рядки з Inter і theme.css у _Layout.cshtml
   (повна копія старого стану - git tag styles-before-redesign).

   Кольори підібрані з розрахунком контрасту (WCAG), щоб усе читалось і на дешевих TN-моніторах:
     основний текст 14.7:1, другорядний 7.6:1, підказки в полях 4.8:1,
     рамки полів 3.2:1 (норма для елементів керування - 3:1),
     білий текст на кнопках: синя 5.2, зелена 5.0, бурштинова 5.0, червона 4.8 (норма - 4.5).
   Важливі стани (активний пункт меню, рядок під курсором, поле у фокусі) позначені
   не лише кольором, а й смугою/товщиною рамки - видно навіть там, де кольори "зливаються".

   Ролі кнопок (класи ті самі, що й були - сторінки не змінювались):
     Головна дія форми   btn btn-info btn-fill        - суцільна синя ("Зберегти", "Створити")
     Підтвердження       btn btn-success btn-fill     - суцільна зелена
     Увага               btn btn-warning btn-fill     - суцільна бурштинова
     Небезпечна          btn btn-danger  btn-fill     - суцільна червона
     Другорядна          btn btn-default / btn         - біла з сірою рамкою
     Дії в таблицях      btn btn-sm btn-success|danger|warning|info (без btn-fill)
                         - спокійні білі кнопки, колір лише в іконці; кольорове тло при наведенні

   Щільність: звичайна (за замовчуванням) і компактна (html.ui-compact) - перемикач у верхній панелі,
   вибір зберігається в браузері користувача.
   ===================================================================== */

/* ---------- Типографіка та фон ---------- */

body,
.main-panel,
.sidebar,
input, select, textarea, button {
    font-family: var(--ui-font);
}

body {
    color: var(--ui-text);
    font-size: var(--fs-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

p {
    font-size: var(--fs-base);
}

small, .small {
    font-size: var(--fs-small);
}

a {
    color: var(--ui-primary-hover);
}

    a:hover,
    a:focus {
        color: #1e40af;
    }

.main-panel {
    background-color: var(--ui-bg);
    background-image: none;
}

    /* Відступи області сторінки. Раніше накопичувалось: 24 px (тут) + 15 px (container-fluid шаблону)
       + 24 px (картка) = ~63 px з кожного боку. Тепер: 20 px тут, container-fluid шаблону - без відступу */
    .main-panel > .content {
        padding: 18px 20px;
    }

        .main-panel > .content > .container-fluid,
        .main-panel > .footer > .container-fluid {
            padding-left: 0;
            padding-right: 0;
        }

    /* Хлібні крихти - на одній лінії з картками (15 px container-fluid панелі + 5 px = 20 px) */
    .main-panel > .navbar .hsg-breadcrumb {
        padding-left: 5px;
    }

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

.text-success {
    color: var(--ui-success);
}

.text-danger {
    color: var(--ui-danger-hover);
}

.text-warning {
    color: var(--ui-warning);
}

/* ---------- Верхня панель ---------- */

.main-panel .navbar {
    background-color: var(--ui-surface);
    border-bottom: 1px solid var(--ui-border-card);
}

    .main-panel .navbar .navbar-nav > li > a {
        color: #334155;
    }

        .main-panel .navbar .navbar-nav > li > a p {
            font-size: var(--fs-label);
            font-weight: 500;
            text-transform: none;
        }

        .main-panel .navbar .navbar-nav > li > a:hover {
            color: var(--ui-primary-hover);
        }

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

.sidebar,
.sidebar[data-background-color="white"] {
    background-color: var(--ui-surface);
    border-right: 1px solid var(--ui-border-card);
    box-shadow: none;
}

    .sidebar .logo h3 {
        font-size: calc(var(--fs-title) + 1px);
        font-weight: 700;
        color: var(--ui-text);
        margin: 18px 0 10px 0;
        letter-spacing: -.01em;
    }

    .sidebar .nav {
        margin-top: 8px;
    }

        .sidebar .nav li > a {
            margin: 2px 12px;
            padding: 8px 12px;
            border-radius: var(--ui-radius);
            border-left: 3px solid transparent;
            opacity: 1;
            color: #334155 !important;
            transition: background-color .12s ease, color .12s ease;
        }

        .sidebar .nav li:hover > a {
            background-color: var(--ui-neutral-hover);
            color: var(--ui-text) !important;
        }

        .sidebar .nav p {
            font-size: var(--fs-base);
            font-weight: 500;
            text-transform: none;
            line-height: 24px;
        }

        .sidebar .nav i {
            font-size: var(--fs-menu-icon);
            line-height: 24px;
            margin-right: 12px;
            color: #64748b;
        }

        /* Активний пункт: тло + синя смуга зліва + жирний текст (видно і без розрізнення кольорів) */
        .sidebar .nav li.active > a,
        .sidebar[data-active-color] .nav li.active > a {
            background-color: var(--ui-primary-soft);
            border-left-color: var(--ui-primary);
            color: var(--ui-primary-hover) !important;
        }

            .sidebar .nav li.active > a p {
                font-weight: 700;
            }

            .sidebar .nav li.active > a i {
                color: var(--ui-primary-hover);
            }

            .sidebar .nav li.active > a:before,
            .sidebar .nav li.active > a:after {
                display: none;
            }

/* ---------- Картки ---------- */

.card {
    border: 1px solid var(--ui-border-card);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow);
    color: var(--ui-text);
}

    .card .header {
        padding: var(--card-p) var(--card-p) 0;
    }

    .card .content {
        padding: calc(var(--card-p) - 4px) var(--card-p) var(--card-p);
    }

    .card .title,
    .card .card-title,
    .card-title {
        font-size: var(--fs-title);
        font-weight: 600;
        color: var(--ui-text);
    }

    .card .category {
        color: var(--ui-text-muted);
        font-size: var(--fs-label);
    }

    /* Підписи полів - чіткі, однакові по всьому сайту */
    .card label,
    .form-group > label,
    .form-group label {
        font-size: var(--fs-label);
        font-weight: 600;
        color: #374151;
        margin-bottom: 4px;
    }

/* ---------- Поля вводу ---------- */

.form-control,
.form-control.border-input {
    height: var(--h-control);
    padding: 6px 12px;
    font-size: var(--fs-base);
    color: var(--ui-text);
    background-color: var(--ui-surface);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius);
    box-shadow: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}

textarea.form-control {
    height: auto;
    min-height: var(--h-control);
    line-height: 1.5;
}

.form-control:hover {
    border-color: #64748b;
}

/* Фокус: синя рамка подвійної товщини + кільце (видно і на поганому моніторі) */
.form-control:focus,
.form-control.border-input:focus {
    background-color: var(--ui-surface);
    border-color: var(--ui-primary);
    box-shadow: inset 0 0 0 1px var(--ui-primary), var(--ui-focus);
    outline: 0;
}

/* Лише для читання - сіре тло і пунктирна рамка (відрізняється не тільки кольором) */
.form-control[readonly],
.form-control[disabled],
fieldset[disabled] .form-control {
    background-color: #eef1f5;
    color: var(--ui-text-muted);
    border-style: dashed;
    cursor: not-allowed;
}

.form-control::placeholder {
    color: var(--ui-text-soft);
    opacity: 1;
}

.input-sm,
.form-control.input-sm {
    height: var(--h-control-sm);
    padding: 4px 10px;
    font-size: var(--fs-label);
}

/* Список з пошуком (Tom Select) - як звичайне поле */
.ts-wrapper.single .ts-control,
.ts-wrapper .ts-control {
    background-color: var(--ui-surface);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius);
    min-height: var(--h-control);
    padding: 7px 12px;
    font-size: var(--fs-base);
    color: var(--ui-text);
}

.ts-wrapper.focus .ts-control {
    border-color: var(--ui-primary);
    box-shadow: inset 0 0 0 1px var(--ui-primary), var(--ui-focus);
}

.ts-dropdown {
    font-size: var(--fs-base);
    border: 1px solid var(--ui-border-card);
    border-radius: var(--ui-radius);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .16);
}

    .ts-dropdown .active {
        background-color: var(--ui-primary-soft);
        color: var(--ui-text);
    }

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

.table {
    color: var(--ui-text);
    font-size: var(--fs-base);
    font-variant-numeric: tabular-nums; /* суми і кількості рівно одна під одною */
}

    .table > thead > tr > th,
    thead th {
        background-color: var(--tbl-head);
        color: #334155;
        font-size: var(--fs-label);
        font-weight: 600;
        text-transform: none;
        border-bottom: 2px solid #94a3b8 !important;
        box-shadow: none;
        white-space: nowrap;
    }

    .table > thead > tr > th,
    .table > tbody > tr > td,
    .table > tbody > tr > th,
    .table > tfoot > tr > td,
    th, td {
        padding: var(--cell-py) var(--cell-px);
        border-color: var(--ui-border);
        vertical-align: middle;
    }

/* Смуги - нейтральні замість бежевих теми */
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--tbl-stripe);
}

.table-striped > tbody > tr:nth-of-type(even) {
    background-color: var(--ui-surface);
}

/* Рядок під курсором: блакитне тло + синя смуга зліва (видно навіть на TN) */
.table-striped > tbody > tr:hover,
.table > tbody > tr:hover {
    background-color: var(--tbl-hover);
}

    .table > tbody > tr:hover > td:first-child {
        box-shadow: inset 3px 0 0 var(--ui-primary);
    }

.table-full-width {
    margin-left: 0;
    margin-right: 0;
}

/* ---------- Пагінація ---------- */

.pagination > li > a,
.pagination > li > span {
    margin: 0 2px;
    min-width: var(--h-control-sm);
    height: var(--h-control-sm);
    line-height: 22px;
    font-size: var(--fs-label);
    text-align: center;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius) !important;
    color: #1e293b;
    background-color: var(--ui-surface);
}

    .pagination > li > a:hover,
    .pagination > li > span:hover {
        background-color: var(--ui-neutral-hover);
        color: var(--ui-text);
    }

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span {
    background-color: var(--ui-primary);
    border-color: var(--ui-primary);
    color: #fff;
    font-weight: 700;
}

.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > span {
    color: var(--ui-text-soft);
    background-color: #eef1f5;
    cursor: not-allowed;
}

/* ---------- Дрібниці ---------- */

/* Хлібні крихти */
.hsg-breadcrumb {
    font-size: var(--fs-base);
}

    .hsg-breadcrumb a {
        color: var(--ui-primary-hover);
    }

    .hsg-breadcrumb > .active {
        color: var(--ui-text);
    }

/* Іконки дій (копіювати, друк) - сірі, синій при наведенні */
.action-icon,
.copy-container.copy-center i.copy-icon {
    color: #475569;
}

    .action-icon:hover,
    .action-icon:focus,
    .copy-container.copy-center i.copy-icon:hover {
        color: var(--ui-primary);
    }

/* Випадаючі меню */
.dropdown-menu {
    font-size: var(--fs-base);
    border: 1px solid var(--ui-border-card);
    border-radius: var(--ui-radius);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .16);
}

/* Модальні вікна */
.modal-content {
    border: 0;
    border-radius: var(--ui-radius-lg);
    box-shadow: 0 20px 50px rgba(15, 23, 42, .30);
}

/* Плитки розділів на головних сторінках (Налаштування, Права доступу...) */
.card > a .content,
.card a[type="button"] .content {
    transition: background-color .12s ease;
}

.card > a:hover .content,
.card a[type="button"]:hover .content {
    background-color: var(--ui-surface-alt);
    border-radius: var(--ui-radius-lg);
}

.card .icon-big {
    font-size: var(--fs-tile-icon);
    min-height: calc(var(--fs-tile-icon) + 12px);
}

/* Попередній варіант: font-size 16px (замалий; у старій темі було 2em тонким шрифтом) */
.card .numbers {
    font-size: var(--fs-tile);
    font-weight: 600;
    line-height: 1.3;
    color: var(--ui-text);
    text-align: center; /* тема Paper вирівнює праворуч - довгі назви з'їжджали */
    min-height: calc(var(--fs-tile) * 1.3 * 2); /* місце під 2 рядки - плитки однакової висоти */
    display: flex;
    align-items: center;
    justify-content: center;
}

.card > a:hover .numbers {
    color: var(--ui-primary-hover);
}

/* Підписи біля чекбоксів/радіо - звичайної товщини */
.checkbox label,
.radio label,
label.checkbox,
label.radio,
.form-group input[type="checkbox"] + label,
.form-group input[type="radio"] + label {
    font-weight: 400;
}

/* Чекбокси трохи більші - легше влучити */
input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--ui-primary);
    vertical-align: -3px;
}

/* ---------- Адаптація під екран ---------- */

/* Ноутбуки (вікно до 1440 px) - менше "повітря" навколо, текст той самий */
@media (max-width: 1440px) {
    .main-panel > .content {
        padding: 14px 16px;
    }
}

/* Великі монітори - більше повітря */
@media (min-width: 1700px) {
    /* Попередній варіант: 24px 32px - забагато порожнього місця по боках */
    .main-panel > .content {
        padding: 20px 24px;
    }
}

/* =====================================================================
   Один стандарт сторінок з таблицями: ОДНА картка, всередині - одразу вміст.
   Майже всі сторінки мають стару структуру "картка в картці":
     card > content > container-fluid > row > card > content > content.table-responsive > table
   звідси дві рамки і подвійні-потрійні відступи навколо таблиць.
   Ці правила "вирівнюють" вкладені блоки без зміни розмітки сторінок:
   вкладена картка - без рамки/тіні (стає просто розділом), зайві обгортки - без відступів.
   (Сторінка продажів уже має нову розмітку - Views/Sale/Index.cshtml)
   ===================================================================== */

/* Вкладена картка - розділ основної картки, а не окрема рамка */
.card .card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    margin-bottom: 0;
}

    /* Розділи один під одним - тонка лінія між ними */
    .card .card + .card {
        border-top: 1px solid var(--ui-border);
        margin-top: var(--card-p);
        padding-top: 4px;
    }

    /* Бічні відступи вкладеної картки прибираю лише коли вона вже всередині відступу зовнішньої
       (card > content > ... > card). Якщо вкладена картка лежить прямо в зовнішній (card > card, як на
       сторінці "Категорії") - її відступи потрібні, інакше вміст прилипає до краю */
    .card .content .card > .header {
        padding-left: 0;
        padding-right: 0;
    }

    .card .content .card > .content {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }

/* Відступ усередині відступу (content > content) - зайвий */
.card .content > .content,
.card .content > .row > .content {
    padding-left: 0;
    padding-right: 0;
}

/* Обгортки з Bootstrap всередині картки - без власних полів */
.card .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

    .card .container-fluid > .row {
        margin-left: 0;
        margin-right: 0;
    }

/* Таблиця на всю ширину вмісту картки */
.card .table-responsive,
.card .content.table-responsive {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    border: 0;
}

.card .table-full-width {
    margin-left: 0;
    margin-right: 0;
}

/* Таблиця не "прилипає" до кнопок/фільтрів над нею */
.card .content > .row + .container-fluid,
.card .content > .row + .content {
    margin-top: 4px;
}

/* Блок заміток CRM всередині сторінки - свій розділ з лінією зверху */
.card .card.crm-notes {
    border-top: 1px solid var(--ui-border);
    margin-top: var(--card-p);
}

/* Іконки плиток розділів (Налаштування, Права доступу, Інтеграції...) - у гамі теми замість помаранчевих (icon-warning з Paper).
   Синя іконка на світло-блакитному квадраті; при наведенні - насичено синій квадрат з білою іконкою.
   Лише плитки-посилання (card > a), кольорові іконки статистики на головній не змінюються */
.card > a .icon-big,
.card > a .icon-big[class*="icon-"] {
    color: var(--ui-primary);
    min-height: 0;
    margin-bottom: 4px;
}

    .card > a .icon-big i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: calc(var(--fs-tile-icon) + 28px);
        height: calc(var(--fs-tile-icon) + 28px);
        font-size: calc(var(--fs-tile-icon) * .75);
        border-radius: 14px;
        background-color: #e8f0fe;
        color: var(--ui-primary-hover);
        transition: background-color .15s ease, color .15s ease;
    }

.card > a:hover .icon-big i {
    background-color: var(--ui-primary);
    color: #fff;
}

/* Лінія між іконкою і підписом у плитці - світліша */
.card > a .footer hr {
    border-color: var(--ui-border);
    margin: 12px 0 8px;
}