/* ============================================================
   Beerka Design System 2026
   Сучасний шар поверх Bootstrap 5.3 — підключається ПІСЛЯ
   bootstrap.min.css і повністю визначає вигляд застосунку.
   Жодних змін розмітки не вимагає: стилізує стандартні класи.
   ============================================================ */

/* ---------- Токени ---------- */
:root {
    /* Полотно і поверхні */
    --bk-bg:        #F7F5F2;
    --bk-surface:   #FFFFFF;
    --bk-surface-2: #FBFAF8;

    /* Текст (теплий графіт) */
    --bk-ink:   #1C1917;
    --bk-ink-2: #57534E;
    --bk-ink-3: #A8A29E;

    /* Лінії */
    --bk-line:   #E9E6E1;
    --bk-line-2: #DDD9D2;

    /* Бренд: бурштин Beerka, освіжений */
    --bk-amber:      #F59E0B;
    --bk-amber-deep: #D97706;
    --bk-amber-hot:  #F97316;
    --bk-amber-ink:  #92400E;
    --bk-amber-tint: #FEF6E7;
    --bk-grad-brand: linear-gradient(135deg, #FDBA2E 0%, #F59E0B 45%, #F97316 100%);

    /* Семантика */
    --bk-green:      #059669;
    --bk-green-ink:  #065F46;
    --bk-green-tint: #E9FBF3;
    --bk-red:        #E11D48;
    --bk-red-ink:    #9F1239;
    --bk-red-tint:   #FFF0F2;
    --bk-blue:       #2563EB;
    --bk-blue-ink:   #1E40AF;
    --bk-blue-tint:  #EEF4FF;
    --bk-sky:        #0284C7;
    --bk-sky-tint:   #EAF6FE;
    --bk-violet:     #7C3AED;

    /* Геометрія */
    --bk-r-s: 10px;
    --bk-r:   14px;
    --bk-r-l: 20px;

    /* Тіні (двошарові: ambient + key) */
    --bk-shadow-s: 0 1px 2px rgba(28, 25, 23, .05), 0 1px 1px rgba(28, 25, 23, .03);
    --bk-shadow:   0 1px 2px rgba(28, 25, 23, .05), 0 8px 24px -8px rgba(28, 25, 23, .10);
    --bk-shadow-l: 0 2px 4px rgba(28, 25, 23, .05), 0 24px 48px -12px rgba(28, 25, 23, .18);

    /* Рух */
    --bk-ease: cubic-bezier(.22, .8, .36, 1);
    --bk-t-fast: .16s;
    --bk-t: .22s;

    /* Сумісність: старі var(--ios-*) з ios-liquid-glass.css, на які досі
       посилаються інлайн-стилі частини шаблонів. Мапляться на нову палітру,
       тож жоден такий шаблон не втрачає колір. */
    --ios-blue: var(--bk-blue);
    --ios-green: var(--bk-green);
    --ios-orange: var(--bk-amber);
    --ios-red: var(--bk-red);
    --ios-purple: var(--bk-violet);
    --ios-pink: #EC4899;
    --ios-yellow: var(--bk-amber);
    --ios-teal: var(--bk-sky);
    --ios-gray: var(--bk-ink-3);
    --ios-gray-light: var(--bk-line-2);
    --ios-gray-dark: var(--bk-ink-2);
    --ios-gray5: var(--bk-line);
    --ios-glass-bg: rgba(255, 255, 255, .85);
    --ios-border: var(--bk-line);
    --glass-bg: rgba(255, 255, 255, .85);
    --glass-border: var(--bk-line);
    --shadow-soft: var(--bk-shadow);

    /* Bootstrap-змінні, які читаються компонентами напряму */
    --bs-body-bg: var(--bk-bg);
    --bs-body-color: var(--bk-ink);
    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --bs-border-radius: var(--bk-r-s);
    --bs-link-color: var(--bk-amber-deep);
    --bs-link-hover-color: var(--bk-amber-hot);
}

/* ---------- Полотно ---------- */
html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--bk-ink);
    background-color: var(--bk-bg);
    background-image:
        radial-gradient(900px 480px at 85% -10%, rgba(245, 158, 11, .07), transparent 60%),
        radial-gradient(700px 420px at -10% 30%, rgba(124, 58, 237, .045), transparent 60%);
    background-attachment: fixed;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: rgba(245, 158, 11, .25); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--bk-ink);
}

.text-muted { color: var(--bk-ink-2) !important; }
small, .small { color: inherit; }

a { text-decoration: none; transition: color var(--bk-t-fast) var(--bk-ease); }

/* Плавна поява контенту сторінки */
main.container, main.container-fluid {
    animation: bk-page-in .45s var(--bk-ease) both;
}
@keyframes bk-page-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Скролбари ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--bk-line-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
    background: var(--bk-line-2);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--bk-ink-3); }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Навбар ---------- */
.navbar {
    position: sticky !important;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .78) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border-bottom: 1px solid var(--bk-line);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, var(--bk-shadow-s);
    padding-top: .55rem;
    padding-bottom: .55rem;
}

.navbar-brand {
    font-family: 'Unbounded', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: -.01em;
    background: var(--bk-grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.navbar-brand i {
    -webkit-text-fill-color: var(--bk-amber);
    color: var(--bk-amber);
    font-size: 1.15em;
    filter: drop-shadow(0 2px 6px rgba(245, 158, 11, .35));
}

.navbar .nav-link {
    color: var(--bk-ink-2) !important;
    font-weight: 550;
    font-size: .92rem;
    border-radius: 999px;
    padding: .48rem .85rem !important;
    margin: 0 2px;
    transition: background var(--bk-t-fast) var(--bk-ease), color var(--bk-t-fast) var(--bk-ease);
}
.navbar .nav-link:hover {
    background: rgba(28, 25, 23, .055);
    color: var(--bk-ink) !important;
}
.navbar .nav-link.active {
    background: var(--bk-amber-tint);
    color: var(--bk-amber-ink) !important;
}
.navbar .nav-link i { margin-right: .35rem; }
.navbar .nav-link.text-success { color: var(--bk-green-ink) !important; }

.navbar-toggler {
    border: 1px solid var(--bk-line);
    border-radius: var(--bk-r-s);
    padding: .4rem .6rem;
}
.navbar-toggler:focus { box-shadow: 0 0 0 4px rgba(245, 158, 11, .2); }

/* ---------- Дропдауни ---------- */
.dropdown-menu {
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--bk-line);
    border-radius: var(--bk-r);
    box-shadow: var(--bk-shadow-l);
    padding: .45rem;
    animation: bk-pop .18s var(--bk-ease);
}
@keyframes bk-pop {
    from { opacity: 0; transform: translateY(-6px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
.dropdown-item {
    border-radius: var(--bk-r-s);
    padding: .55rem .8rem;
    font-weight: 500;
    font-size: .92rem;
    color: var(--bk-ink-2);
    transition: background var(--bk-t-fast) var(--bk-ease), color var(--bk-t-fast) var(--bk-ease);
}
.dropdown-item i { margin-right: .5rem; width: 1.15rem; text-align: center; color: var(--bk-ink-3); transition: color var(--bk-t-fast); }
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--bk-amber-tint);
    color: var(--bk-amber-ink);
}
.dropdown-item:hover i, .dropdown-item:focus i { color: var(--bk-amber-deep); }
.dropdown-item.active, .dropdown-item:active {
    background: var(--bk-grad-brand);
    color: #fff;
}
.dropdown-item.active i, .dropdown-item:active i { color: #fff; }
.dropdown-item.text-danger:hover { background: var(--bk-red-tint); color: var(--bk-red-ink) !important; }
.dropdown-item.text-danger:hover i { color: var(--bk-red); }
.dropdown-divider { border-color: var(--bk-line); opacity: 1; margin: .4rem .35rem; }
.dropdown-header { color: var(--bk-ink-3); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

/* ---------- Картки ---------- */
.card {
    background: var(--bk-surface);
    border: 1px solid var(--bk-line);
    border-radius: var(--bk-r-l);
    box-shadow: var(--bk-shadow);
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: box-shadow var(--bk-t) var(--bk-ease), transform var(--bk-t) var(--bk-ease), border-color var(--bk-t) var(--bk-ease);
}
a.card:hover, .card[onclick]:hover, .card.bk-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--bk-shadow-l);
    border-color: var(--bk-line-2);
}
.card-header {
    background: var(--bk-surface-2);
    border-bottom: 1px solid var(--bk-line);
    padding: .95rem 1.25rem;
    font-weight: 650;
    letter-spacing: -.01em;
}
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 { margin-bottom: 0; }
.card-body { padding: 1.25rem; }
.card-footer {
    background: var(--bk-surface-2);
    border-top: 1px solid var(--bk-line);
    padding: .85rem 1.25rem;
}
/* Кольорові заголовки карток, які лишились у шаблонах */
.card-header.bg-primary, .card-header.bg-success, .card-header.bg-info,
.card-header.bg-warning, .card-header.bg-danger, .card-header.bg-dark,
.card-header.bg-secondary {
    color: #fff;
    border-bottom: none;
}
.card-header.bg-primary { background: var(--bk-grad-brand) !important; }
.card-header.bg-success { background: linear-gradient(135deg, #10B981, #059669) !important; }
.card-header.bg-info    { background: linear-gradient(135deg, #38BDF8, #0284C7) !important; }
.card-header.bg-warning { background: linear-gradient(135deg, #FBBF24, #F59E0B) !important; }
.card-header.bg-danger  { background: linear-gradient(135deg, #FB7185, #E11D48) !important; }

/* ---------- Кнопки ---------- */
.btn {
    border-radius: var(--bk-r-s);
    font-weight: 600;
    font-size: .92rem;
    padding: .55rem 1.1rem;
    border: 1px solid transparent;
    letter-spacing: .005em;
    transition: transform var(--bk-t-fast) var(--bk-ease),
                box-shadow var(--bk-t-fast) var(--bk-ease),
                background-color var(--bk-t-fast) var(--bk-ease),
                border-color var(--bk-t-fast) var(--bk-ease),
                color var(--bk-t-fast) var(--bk-ease);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:focus-visible { box-shadow: 0 0 0 4px rgba(245, 158, 11, .25); }
.btn i { margin-right: .3rem; }
.btn-sm { padding: .35rem .7rem; font-size: .82rem; border-radius: 8px; }
.btn-lg { padding: .75rem 1.5rem; font-size: 1rem; border-radius: var(--bk-r); }

.btn-primary {
    background: var(--bk-grad-brand);
    border: none;
    color: #fff;
    box-shadow: 0 1px 2px rgba(217, 119, 6, .35), 0 6px 16px -6px rgba(245, 158, 11, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, #FDBA2E 0%, #F59E0B 30%, #EA580C 100%);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(217, 119, 6, .35), 0 10px 22px -6px rgba(245, 158, 11, .6), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-primary:active { background: var(--bk-amber-deep); }

.btn-success {
    background: linear-gradient(135deg, #10B981, #059669);
    border: none; color: #fff;
    box-shadow: 0 1px 2px rgba(5, 150, 105, .35), 0 6px 16px -6px rgba(16, 185, 129, .5), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-success:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(5, 150, 105, .35), 0 10px 22px -6px rgba(16, 185, 129, .55); color: #fff; }

.btn-danger {
    background: linear-gradient(135deg, #FB7185, #E11D48);
    border: none; color: #fff;
    box-shadow: 0 1px 2px rgba(225, 29, 72, .3), 0 6px 16px -6px rgba(225, 29, 72, .45), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-danger:hover { transform: translateY(-1px); color: #fff; box-shadow: 0 2px 4px rgba(225, 29, 72, .3), 0 10px 22px -6px rgba(225, 29, 72, .5); }

.btn-warning {
    background: linear-gradient(135deg, #FBBF24, #F59E0B);
    border: none; color: #78350F;
    box-shadow: 0 1px 2px rgba(245, 158, 11, .3), 0 6px 16px -6px rgba(245, 158, 11, .45), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.btn-warning:hover { transform: translateY(-1px); color: #78350F; }

.btn-info {
    background: linear-gradient(135deg, #38BDF8, #0284C7);
    border: none; color: #fff;
    box-shadow: 0 1px 2px rgba(2, 132, 199, .3), 0 6px 16px -6px rgba(56, 189, 248, .5), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-info:hover { transform: translateY(-1px); color: #fff; }

.btn-secondary, .btn-light {
    background: var(--bk-surface);
    border: 1px solid var(--bk-line-2);
    color: var(--bk-ink-2);
    box-shadow: var(--bk-shadow-s);
}
.btn-secondary:hover, .btn-light:hover {
    background: var(--bk-surface-2);
    border-color: var(--bk-ink-3);
    color: var(--bk-ink);
    transform: translateY(-1px);
}
.btn-dark { background: var(--bk-ink); border: none; color: #fff; }
.btn-dark:hover { background: #292524; color: #fff; transform: translateY(-1px); }

.btn-outline-primary { color: var(--bk-amber-deep); border-color: rgba(245, 158, 11, .5); background: transparent; }
.btn-outline-primary:hover { background: var(--bk-amber-tint); color: var(--bk-amber-ink); border-color: var(--bk-amber); }
.btn-outline-success { color: var(--bk-green); border-color: rgba(5, 150, 105, .45); }
.btn-outline-success:hover { background: var(--bk-green-tint); color: var(--bk-green-ink); border-color: var(--bk-green); }
.btn-outline-danger { color: var(--bk-red); border-color: rgba(225, 29, 72, .4); }
.btn-outline-danger:hover { background: var(--bk-red-tint); color: var(--bk-red-ink); border-color: var(--bk-red); }
.btn-outline-warning { color: var(--bk-amber-deep); border-color: rgba(245, 158, 11, .5); }
.btn-outline-warning:hover { background: var(--bk-amber-tint); color: var(--bk-amber-ink); border-color: var(--bk-amber); }
.btn-outline-info { color: var(--bk-sky); border-color: rgba(2, 132, 199, .4); }
.btn-outline-info:hover { background: var(--bk-sky-tint); color: var(--bk-sky); border-color: var(--bk-sky); }
.btn-outline-secondary, .btn-outline-dark { color: var(--bk-ink-2); border-color: var(--bk-line-2); }
.btn-outline-secondary:hover, .btn-outline-dark:hover { background: var(--bk-surface-2); color: var(--bk-ink); border-color: var(--bk-ink-3); }

.btn-group .btn { box-shadow: none; }

/* ---------- Форми ---------- */
.form-label {
    font-weight: 600;
    font-size: .85rem;
    color: var(--bk-ink-2);
    margin-bottom: .4rem;
}
.form-control, .form-select {
    background: var(--bk-surface);
    border: 1.5px solid var(--bk-line-2);
    border-radius: var(--bk-r-s);
    padding: .6rem .85rem;
    font-size: .95rem;
    color: var(--bk-ink);
    transition: border-color var(--bk-t-fast) var(--bk-ease), box-shadow var(--bk-t-fast) var(--bk-ease);
}
.form-control::placeholder { color: var(--bk-ink-3); }
.form-control:focus, .form-select:focus {
    border-color: var(--bk-amber);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, .18);
    background: #fff;
}
.form-control:disabled, .form-select:disabled { background: var(--bk-surface-2); color: var(--bk-ink-3); }
.form-control-sm, .form-select-sm { padding: .35rem .6rem; border-radius: 8px; }
.form-text { color: var(--bk-ink-3); font-size: .8rem; }

.form-check-input {
    border: 1.5px solid var(--bk-line-2);
    width: 1.15em; height: 1.15em;
    transition: background-color var(--bk-t-fast), border-color var(--bk-t-fast), box-shadow var(--bk-t-fast);
}
.form-check-input:checked { background-color: var(--bk-amber); border-color: var(--bk-amber); }
.form-check-input:focus { border-color: var(--bk-amber); box-shadow: 0 0 0 4px rgba(245, 158, 11, .18); }
.form-switch .form-check-input { height: 1.35em; width: 2.5em; }
.form-switch .form-check-input:checked { background-color: var(--bk-green); border-color: var(--bk-green); }

.input-group-text {
    background: var(--bk-surface-2);
    border: 1.5px solid var(--bk-line-2);
    color: var(--bk-ink-2);
    border-radius: var(--bk-r-s);
    font-size: .9rem;
}

/* ---------- Таблиці ---------- */
.table {
    --bs-table-bg: transparent;
    color: var(--bk-ink);
    margin-bottom: 0;
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
}
.table > :not(caption) > * > * {
    padding: .8rem .9rem;
    border-bottom-color: var(--bk-line);
    vertical-align: middle;
}
.table thead th {
    font-size: .74rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bk-ink-3);
    border-bottom: 1px solid var(--bk-line-2);
    white-space: nowrap;
}
.table tbody tr { transition: background-color var(--bk-t-fast) var(--bk-ease); }
.table-hover tbody tr:hover { background: var(--bk-amber-tint); --bs-table-accent-bg: transparent; }
.table-striped > tbody > tr:nth-of-type(odd) { --bs-table-accent-bg: rgba(28, 25, 23, .02); }
.table tbody tr:last-child td { border-bottom: none; }
.table-responsive { border-radius: var(--bk-r); }
.card .table-responsive { border-radius: 0; }
.table-light, .table thead.table-light th { background: var(--bk-surface-2) !important; }

/* ---------- Бейджі: м'які тоновані пігулки ---------- */
.badge {
    font-weight: 600;
    font-size: .74rem;
    letter-spacing: .01em;
    padding: .38em .75em;
    border-radius: 999px;
}
.badge.bg-success, .badge.text-bg-success { background: var(--bk-green-tint) !important; color: var(--bk-green-ink) !important; }
.badge.bg-danger, .badge.text-bg-danger { background: var(--bk-red-tint) !important; color: var(--bk-red-ink) !important; }
.badge.bg-warning, .badge.text-bg-warning { background: var(--bk-amber-tint) !important; color: var(--bk-amber-ink) !important; }
.badge.bg-info, .badge.text-bg-info { background: var(--bk-sky-tint) !important; color: var(--bk-sky) !important; }
.badge.bg-primary, .badge.text-bg-primary { background: var(--bk-amber-tint) !important; color: var(--bk-amber-ink) !important; }
.badge.bg-secondary, .badge.text-bg-secondary { background: #F0EEEA !important; color: var(--bk-ink-2) !important; }
.badge.bg-dark, .badge.text-bg-dark { background: var(--bk-ink) !important; color: #fff !important; }
.badge.bg-light, .badge.text-bg-light { background: var(--bk-surface-2) !important; color: var(--bk-ink-2) !important; border: 1px solid var(--bk-line); }

/* ---------- Алерти ---------- */
.alert {
    border: 1px solid;
    border-radius: var(--bk-r);
    padding: .85rem 1.05rem;
    font-size: .92rem;
    font-weight: 500;
    box-shadow: var(--bk-shadow-s);
}
.alert i { margin-right: .45rem; }
.alert-success { background: var(--bk-green-tint); border-color: rgba(5, 150, 105, .25); color: var(--bk-green-ink); }
.alert-danger  { background: var(--bk-red-tint); border-color: rgba(225, 29, 72, .22); color: var(--bk-red-ink); }
.alert-warning { background: var(--bk-amber-tint); border-color: rgba(245, 158, 11, .3); color: var(--bk-amber-ink); }
.alert-info    { background: var(--bk-sky-tint); border-color: rgba(2, 132, 199, .22); color: #075985; }
.alert .btn-close { padding: .9rem; }

/* Flash-повідомлення як плаваючі тости (клас на контейнері в base_b2b) */
.bk-flash {
    position: fixed;
    top: 76px;
    right: 16px;
    z-index: 1080;
    width: min(430px, calc(100vw - 32px));
    margin: 0 !important;
    padding: 0;
    pointer-events: none;
}
.bk-flash .alert {
    pointer-events: auto;
    background: rgba(255, 255, 255, .93);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    box-shadow: var(--bk-shadow-l);
    margin-bottom: .6rem;
    animation: bk-toast-in .38s var(--bk-ease) both;
    border-left-width: 4px;
}
@keyframes bk-toast-in {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Модальні вікна ---------- */
.modal-content {
    background: var(--bk-surface);
    border: 1px solid var(--bk-line);
    border-radius: var(--bk-r-l);
    box-shadow: var(--bk-shadow-l);
}
.modal-header {
    border-bottom: 1px solid var(--bk-line);
    padding: 1.1rem 1.4rem;
}
.modal-header .modal-title { font-weight: 700; letter-spacing: -.01em; }
.modal-body { padding: 1.4rem; }
.modal-footer { border-top: 1px solid var(--bk-line); padding: 1rem 1.4rem; }
/* Окремий елемент затемнення Bootstrap (.modal-backdrop.fade.show) вимкнено
   повністю на всіх сторінках. Легке затемнення натомість малює сам .modal:
   він зникає разом із закриттям вікна, тому «завислий» темний шар, що
   блокує сторінку, стає неможливим у принципі. */
.modal-backdrop { display: none !important; }
.modal { background: rgba(28, 25, 23, .35); }
.modal.fade .modal-dialog { transform: translateY(14px) scale(.985); transition: transform .25s var(--bk-ease); }
.modal.show .modal-dialog { transform: none; }
/* Кольорові шапки модалок зі старих шаблонів */
.modal-header.bg-primary { background: var(--bk-grad-brand) !important; color: #fff; border-bottom: none; }
.modal-header.bg-danger { background: linear-gradient(135deg, #FB7185, #E11D48) !important; color: #fff; border-bottom: none; }
.modal-header.bg-success { background: linear-gradient(135deg, #10B981, #059669) !important; color: #fff; border-bottom: none; }
.modal-header.bg-warning { background: linear-gradient(135deg, #FBBF24, #F59E0B) !important; border-bottom: none; }

/* ---------- Списки ---------- */
.list-group { border-radius: var(--bk-r); }
.list-group-item {
    background: var(--bk-surface);
    border-color: var(--bk-line);
    padding: .85rem 1.1rem;
    color: var(--bk-ink);
    transition: background-color var(--bk-t-fast) var(--bk-ease);
}
.list-group-item-action:hover { background: var(--bk-surface-2); }
.list-group-item.active {
    background: var(--bk-amber-tint);
    border-color: rgba(245, 158, 11, .35);
    color: var(--bk-amber-ink);
}

/* ---------- Таби і пігулки ---------- */
.nav-tabs {
    border-bottom: 1px solid var(--bk-line-2);
    gap: .25rem;
}
.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--bk-r-s) var(--bk-r-s) 0 0;
    color: var(--bk-ink-2);
    font-weight: 600;
    font-size: .92rem;
    padding: .6rem 1rem;
    transition: color var(--bk-t-fast), background var(--bk-t-fast), border-color var(--bk-t-fast);
}
.nav-tabs .nav-link:hover { color: var(--bk-ink); background: rgba(28, 25, 23, .04); }
.nav-tabs .nav-link.active {
    color: var(--bk-amber-ink);
    background: transparent;
    border-bottom-color: var(--bk-amber);
}
.nav-pills .nav-link {
    border-radius: 999px;
    color: var(--bk-ink-2);
    font-weight: 600;
    font-size: .92rem;
}
.nav-pills .nav-link.active { background: var(--bk-grad-brand); color: #fff; }

/* ---------- Пагінація ---------- */
.pagination { gap: .3rem; }
.page-link {
    border: 1px solid var(--bk-line);
    border-radius: var(--bk-r-s) !important;
    color: var(--bk-ink-2);
    font-weight: 600;
    font-size: .9rem;
    padding: .45rem .8rem;
    transition: all var(--bk-t-fast) var(--bk-ease);
}
.page-link:hover { background: var(--bk-amber-tint); color: var(--bk-amber-ink); border-color: rgba(245, 158, 11, .4); }
.page-item.active .page-link { background: var(--bk-grad-brand); border-color: transparent; color: #fff; box-shadow: 0 4px 12px -4px rgba(245, 158, 11, .5); }
.page-item.disabled .page-link { color: var(--bk-ink-3); background: transparent; }

/* ---------- Прогрес, спінери, акордеон ---------- */
.progress {
    height: .6rem;
    background: #EFECE7;
    border-radius: 999px;
    overflow: hidden;
}
.progress-bar { background: var(--bk-grad-brand); border-radius: 999px; }
.spinner-border { color: var(--bk-amber); }
.accordion-item { border-color: var(--bk-line); }
.accordion-item:first-of-type, .accordion-item:last-of-type { border-radius: var(--bk-r); }
.accordion-button { font-weight: 600; border-radius: var(--bk-r) !important; }
.accordion-button:not(.collapsed) { background: var(--bk-amber-tint); color: var(--bk-amber-ink); box-shadow: none; }
.accordion-button:focus { box-shadow: 0 0 0 4px rgba(245, 158, 11, .18); border-color: var(--bk-amber); }

/* ---------- Брейдкрамби, тултіпи ---------- */
.breadcrumb { font-size: .88rem; }
.breadcrumb-item a { color: var(--bk-ink-2); font-weight: 500; }
.breadcrumb-item a:hover { color: var(--bk-amber-deep); }
.breadcrumb-item.active { color: var(--bk-ink-3); }
.tooltip .tooltip-inner {
    background: var(--bk-ink);
    border-radius: var(--bk-r-s);
    padding: .45rem .7rem;
    font-size: .8rem;
    font-weight: 500;
}

/* ---------- Футер ---------- */
footer {
    background: transparent;
    border-top: 1px solid var(--bk-line);
    margin-top: 3rem !important;
}
footer p, footer small { color: var(--bk-ink-3); }

/* ---------- Утиліти, що зустрічаються в шаблонах ---------- */
.text-primary { color: var(--bk-amber-deep) !important; }
.bg-light { background: var(--bk-surface-2) !important; }
.border { border-color: var(--bk-line) !important; }
.shadow-sm { box-shadow: var(--bk-shadow-s) !important; }
.shadow { box-shadow: var(--bk-shadow) !important; }
hr { border-color: var(--bk-line-2); opacity: 1; }

/* Статистичні плитки (типовий патерн дашбордів у шаблонах) */
.card .display-4, .card .display-5, .card .display-6 {
    font-weight: 700;
    letter-spacing: -.02em;
}

/* ---------- Адаптив ---------- */
@media (max-width: 768px) {
    body { font-size: 14.5px; }
    .card { border-radius: var(--bk-r); }
    .card-body { padding: 1rem; }
    main.container { padding-left: .9rem; padding-right: .9rem; }
    .bk-flash { top: 70px; }
    .table > :not(caption) > * > * { padding: .65rem .6rem; }
}

/* ---------- Доступність і друк ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    html { scroll-behavior: auto; }
}

@media print {
    body { background: #fff !important; }
    .navbar, footer, .bk-flash, .btn { display: none !important; }
    .card { box-shadow: none; border: 1px solid #ddd; }
}