/*
 * Компоненти (docs/UI-Redesign-TZ.md, розділ 6).
 * Фаза 0–1: кнопки, поля, меню, картки, бейджі і місця, де Bootstrap «зашиває» свій синій (#0d6efd)
 * замість --bs-primary. Таблиці, toastr, SweetAlert2 — фаза 2.
 */

/* ---------- Кнопки: 36 / 40, на мобільному 44 ---------- */
.btn {
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: .5625rem;
    --bs-btn-font-size: var(--fs-14);
    --bs-btn-font-weight: var(--fw-medium);
    --bs-btn-line-height: 1.25rem;
    --bs-btn-border-radius: var(--r-md);
    --bs-btn-focus-box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.btn-sm {
    --bs-btn-padding-x: .75rem;
    --bs-btn-padding-y: .4375rem;
    --bs-btn-font-size: var(--fs-13);
    --bs-btn-border-radius: var(--r-sm);
}

.btn-lg {
    --bs-btn-padding-y: .6875rem;
    --bs-btn-font-size: var(--fs-16);
    --bs-btn-line-height: 1.25rem;
    --bs-btn-border-radius: var(--r-md);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-600);
    --bs-btn-border-color: var(--brand-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-700);
    --bs-btn-hover-border-color: var(--brand-700);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-900);
    --bs-btn-active-border-color: var(--brand-900);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--brand-600);
    --bs-btn-disabled-border-color: var(--brand-600);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-600);
    --bs-btn-border-color: var(--brand-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-600);
    --bs-btn-hover-border-color: var(--brand-600);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-700);
    --bs-btn-active-border-color: var(--brand-700);
    --bs-btn-disabled-color: var(--brand-600);
    --bs-btn-disabled-border-color: var(--brand-600);
}

/* secondary — біла кнопка з бордером */
.btn-secondary {
    --bs-btn-color: var(--ink-900);
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--line);
    --bs-btn-hover-color: var(--ink-900);
    --bs-btn-hover-bg: var(--canvas);
    --bs-btn-hover-border-color: #cfd7e0;
    --bs-btn-active-color: var(--ink-900);
    --bs-btn-active-bg: var(--line);
    --bs-btn-active-border-color: #cfd7e0;
    --bs-btn-disabled-color: var(--ink-400);
    --bs-btn-disabled-bg: var(--surface);
    --bs-btn-disabled-border-color: var(--line);
}

.btn-ghost {
    --bs-btn-color: var(--ink-900);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--ink-900);
    --bs-btn-hover-bg: var(--canvas);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--ink-900);
    --bs-btn-active-bg: var(--line);
    --bs-btn-active-border-color: transparent;
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--status-bad);
    --bs-btn-border-color: var(--status-bad);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #93190f;
    --bs-btn-hover-border-color: #93190f;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #7e1810;
    --bs-btn-active-border-color: #7e1810;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--status-bad);
    --bs-btn-disabled-border-color: var(--status-bad);
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--status-active);
    --bs-btn-border-color: var(--status-active);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #186240;
    --bs-btn-hover-border-color: #186240;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #155636;
    --bs-btn-active-border-color: #155636;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--status-active);
    --bs-btn-disabled-border-color: var(--status-active);
}

@media (max-width: 767.98px) {
    .btn:not(.btn-sm) { min-height: 44px; }
}

.btn-close {
    --bs-btn-close-focus-shadow: 0 0 0 2px var(--brand-100);
}

/* ---------- Поля: 40px, фокус — бордер brand-600 + кільце 2px brand-100 ---------- */
.form-control,
.form-select {
    min-height: 40px;
    border-color: var(--line);
    border-radius: var(--r-sm);
    font-size: var(--fs-14);
}

.form-control::placeholder { color: var(--ink-400); }

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--brand-600);
    box-shadow: 0 0 0 2px var(--brand-100);
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--brand-600);
    border-color: var(--brand-600);
}

.form-range::-webkit-slider-thumb { background-color: var(--brand-600); }
.form-range::-moz-range-thumb { background-color: var(--brand-600); }

.form-label,
.col-form-label {
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
    color: var(--ink-900);
}

/* ---------- Меню, вкладки, пагінація, прогрес ---------- */
.dropdown-menu {
    --bs-dropdown-border-color: var(--line);
    --bs-dropdown-border-radius: var(--r-md);
    --bs-dropdown-box-shadow: var(--shadow-pop);
    --bs-dropdown-padding-x: 6px;
    --bs-dropdown-padding-y: 6px;
    --bs-dropdown-font-size: var(--fs-14);
    --bs-dropdown-item-padding-x: 10px;
    --bs-dropdown-item-padding-y: 8px;
    --bs-dropdown-item-border-radius: var(--r-sm);
    --bs-dropdown-link-color: var(--ink-900);
    --bs-dropdown-link-hover-color: var(--ink-900);
    --bs-dropdown-link-hover-bg: var(--canvas);
    --bs-dropdown-link-active-color: var(--brand-700);
    --bs-dropdown-link-active-bg: var(--brand-50);
    --bs-dropdown-divider-bg: var(--line);
    box-shadow: var(--bs-dropdown-box-shadow);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-pills {
    --bs-nav-pills-border-radius: var(--r-sm);
    --bs-nav-pills-link-active-bg: var(--brand-600);
}

.nav-link:focus-visible { box-shadow: 0 0 0 2px var(--brand-100); }

.pagination {
    --bs-pagination-active-bg: var(--brand-600);
    --bs-pagination-active-border-color: var(--brand-600);
    --bs-pagination-focus-box-shadow: 0 0 0 2px var(--brand-100);
    --bs-pagination-border-radius: var(--r-sm);
}

.list-group {
    --bs-list-group-active-bg: var(--brand-600);
    --bs-list-group-active-border-color: var(--brand-600);
}

.progress,
.progress-stacked {
    --bs-progress-bar-bg: var(--brand-600);
}

.accordion {
    --bs-accordion-btn-focus-box-shadow: 0 0 0 2px var(--brand-100);
    --bs-accordion-active-color: var(--brand-700);
    --bs-accordion-active-bg: var(--brand-50);
}

/* ---------- Картки: бордер 1px, без тіні ---------- */
.card {
    --bs-card-border-color: var(--line);
    --bs-card-border-radius: var(--r-md);
    --bs-card-cap-bg: transparent;
}

/* ---------- Оверлеї: модалки, off-canvas, тости ---------- */
.modal {
    --bs-modal-border-color: var(--line);
    --bs-modal-border-radius: var(--r-lg);
    --bs-modal-box-shadow: var(--shadow-pop);
}

.modal-backdrop,
.offcanvas-backdrop {
    --bs-backdrop-bg: var(--ink-900);
    --bs-backdrop-opacity: .32;
}

.modal.fade .modal-dialog { transition: transform var(--dur) var(--ease); }

.offcanvas,
.offcanvas-lg,
.offcanvas-md,
.offcanvas-sm,
.offcanvas-xl,
.offcanvas-xxl {
    --bs-offcanvas-transition: transform var(--dur) var(--ease);
    --bs-offcanvas-border-color: var(--line);
}

.collapsing { transition: height var(--dur) var(--ease); }

/* ---------- Бейджі ---------- */
.badge {
    --bs-badge-font-weight: var(--fw-semibold);
    --bs-badge-border-radius: var(--r-sm);
}

/* Статус обладнання: точка 6px + текст на м'якому фоні */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: var(--r-sm);
    font-size: var(--fs-12);
    font-weight: var(--fw-medium);
    line-height: 1.5;
    white-space: nowrap;
    color: var(--status-off);
    background: var(--status-off-bg);
}

.status-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.status-badge.is-active { color: var(--status-active); background: var(--status-active-bg); }
.status-badge.is-stock { color: var(--status-stock); background: var(--status-stock-bg); }
.status-badge.is-repair { color: var(--status-repair); background: var(--status-repair-bg); }
.status-badge.is-bad { color: var(--status-bad); background: var(--status-bad-bg); }

/* Аватар — ініціали на суцільному brand-100 */
.avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand-100);
    color: var(--brand-700);
    font-size: var(--fs-12);
    font-weight: var(--fw-semibold);
    letter-spacing: .02em;
    line-height: 1;
    user-select: none;
}

.avatar-md { width: 36px; height: 36px; font-size: var(--fs-13); }
.avatar-lg { width: 40px; height: 40px; font-size: var(--fs-14); }

.role-badge {
    display: inline-block;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: var(--r-sm);
    background: var(--brand-50);
    color: var(--brand-700);
    font-size: var(--fs-12);
    font-weight: var(--fw-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Заголовок сторінки ---------- */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: var(--sp-6);
}

.page-header h1 { margin: 0; }

.page-header-sub {
    margin: 4px 0 0;
    color: var(--ink-600);
    font-size: var(--fs-14);
}

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* ---------- Порожній стан ---------- */
.empty-state {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: var(--sp-12) var(--sp-4);
    text-align: center;
    color: var(--ink-600);
}

.empty-state > .bi { font-size: 32px; color: var(--ink-400); }

/* ---------- Головна: швидкі дії і розділи ---------- */
.home-quick {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-8);
}

.home-quick-action {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 64px;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink-900);
    font: inherit;
    font-weight: var(--fw-medium);
    text-align: left;
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.home-quick-action:hover {
    border-color: var(--brand-100);
    background: var(--brand-50);
    color: var(--ink-900);
}

.home-quick-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    background: var(--brand-50);
    color: var(--brand-700);
    font-size: 20px;
}

.home-quick-action.is-primary .home-quick-icon {
    background: var(--brand-600);
    color: #fff;
}

.home-quick-text { display: grid; gap: 2px; min-width: 0; }

.home-quick-sub {
    color: var(--ink-600);
    font-size: var(--fs-13);
    font-weight: var(--fw-regular);
}

.home-sections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-4);
    align-items: start;
}

.home-section {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
}

.home-section-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    padding: var(--sp-4) var(--sp-4) var(--sp-2);
    font-size: var(--fs-16);
}

.home-section-title .bi { color: var(--ink-600); font-size: 18px; }

.home-section-list {
    margin: 0;
    padding: 0 var(--sp-2) var(--sp-2);
    list-style: none;
}

.home-section-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    min-height: 40px;
    padding: 0 var(--sp-2);
    border-radius: var(--r-sm);
    color: var(--ink-900);
    text-decoration: none;
}

.home-section-list a:hover { background: var(--canvas); }
.home-section-list .bi { color: var(--ink-400); font-size: 12px; }

/* ---------- Вибір карти ---------- */
.map-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sp-3);
}

.map-card {
    display: grid;
    gap: 4px;
    padding: var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink-900);
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

a.map-card:hover {
    border-color: var(--brand-100);
    background: var(--brand-50);
    color: var(--ink-900);
}

.map-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    font-weight: var(--fw-semibold);
}

.map-card-title .bi { color: var(--ink-400); }

.map-card-count {
    color: var(--ink-600);
    font-size: var(--fs-13);
    font-variant-numeric: tabular-nums;
}

.map-card.is-empty { color: var(--ink-400); background: var(--canvas); }

/* На телефоні дія в заголовку сторінки — квадратна кнопка-іконка, щоб заголовок не переносився */
@media (max-width: 575.98px) {
    .page-header {
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    .page-header .btn-label { display: none; }
    .page-header-actions .btn { width: 44px; padding-inline: 0; }
}