/* =============================================================================
 * BRUTAL DESIGN CSS — layout/components (tokens live in tokens.css)
 * ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg-primary) !important;
    margin: 0;
    overflow-x: hidden;
}

/* ????? ??? ????????? ???????? (?? ????, ?? ??????????????) */
body:not(.pos-page):not(.inventory-page):not(.income-page):not(.sale-page):not(.shipment-page) {
    color: var(--text-primary) !important;
}

/* ??????? ???? - ??????????? ?????? */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: #343a40;  /* ?????? ??????? */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1050;
    box-shadow: var(--shadow-lg);
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
}

.sidebar-header {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: #2c3136;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    gap: 8px;
    flex-shrink: 0;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    flex: 1;
}

.sidebar-logo i {
    font-size: 1.2rem;
    color: #ffffff;
    min-width: 22px;
}

.sidebar-menu {
    padding: 1rem 0;
}

.sidebar-menu-item {
    display: block;
    padding: 0.75rem 1.5rem;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.sidebar-menu-item:hover,
.sidebar-menu-item.active {
    color: #ffffff !important;
    background: rgba(14, 165, 233, 0.3) !important;
    border-left-color: var(--accent-primary);
}

.sidebar-menu-item i {
    width: 20px;
    margin-right: 0.75rem;
}

/* Контент — зсув лише в sidebar.css (.main-content) */

/* ???????? - ?????? (?? ????????????? ?? inventory ?? income) */
.card:not(.inventory-page .card):not(.income-page .card) {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--brutal-radius);
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    color: var(--text-primary) !important;
}

.card:hover:not(.inventory-page .card):not(.income-page .card) {
    box-shadow: var(--shadow-lg);
}

.card-header:not(.inventory-page .card-header):not(.income-page .card-header) {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary) !important;
    border-radius: var(--brutal-radius) var(--brutal-radius) 0 0;
    color: var(--text-primary) !important;
}

.card-body:not(.inventory-page .card-body):not(.income-page .card-body) {
    padding: 1.5rem;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

.card-title:not(.inventory-page .card-title):not(.income-page .card-title) {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary) !important;
    margin: 0;
}

/* ?????? */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--brutal-radius);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    font-family: inherit;
}

.btn-primary {
    background: var(--color-shell, #0f172a) !important;
    color: #fff !important;
    background-image: none !important;
}

.btn-primary:hover {
    background: var(--color-shell-mid, #1a2332) !important;
    color: #fff !important;
    transform: none;
}

.btn-success {
    background: var(--color-shell, #0f172a) !important;
    color: #fff !important;
    background-image: none !important;
}

.btn-success:hover {
    background: var(--color-shell-mid, #1a2332) !important;
    color: #fff !important;
    transform: none;
}

.btn-warning {
    background: var(--accent-warning) !important;
    color: white !important;
}

.btn-warning:hover {
    background: #d97706 !important;
    transform: none;
}

.btn-danger {
    background: var(--accent-danger) !important;
    color: white !important;
}

.btn-danger:hover {
    background: #dc2626 !important;
    transform: none;
}

/* Outline ?????? */
.btn-outline-primary {
    background: transparent !important;
    color: var(--accent-primary) !important;
    border: 2px solid var(--accent-primary) !important;
}

.btn-outline-primary:hover {
    background: var(--accent-primary) !important;
    color: white !important;
    transform: none;
}

.btn-outline-success {
    background: transparent !important;
    color: var(--accent-success) !important;
    border: 2px solid var(--accent-success) !important;
}

.btn-outline-success:hover {
    background: var(--accent-success) !important;
    color: white !important;
    transform: none;
}

.btn-outline-warning {
    background: transparent !important;
    color: #f59e0b !important;
    border: 2px solid #f59e0b !important;
}

.btn-outline-warning:hover {
    background: #f59e0b !important;
    color: white !important;
    transform: none;
}

.btn-outline-danger {
    background: transparent !important;
    color: var(--accent-danger) !important;
    border: 2px solid var(--accent-danger) !important;
}

.btn-outline-danger:hover {
    background: var(--accent-danger) !important;
    color: white !important;
    transform: none;
}

.btn-outline-secondary {
    background: transparent !important;
    color: #6c757d !important;
    border: 2px solid #6c757d !important;
}

.btn-outline-secondary:hover {
    background: #6c757d !important;
    color: white !important;
    transform: none;
}

/* ??????? ?????? */
.btn-sm {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
}

.btn-lg {
    padding: 1rem 2rem !important;
    font-size: 1.125rem !important;
}

/* ????? ?????? */
.btn-group {
    display: inline-flex;
    gap: 0;
}

.btn-group .btn {
    border-radius: 0 !important;
    margin: 0 !important;
}

.btn-group .btn:first-child {
    border-radius: var(--brutal-radius) 0 0 var(--brutal-radius) !important;
}

.btn-group .btn:last-child {
    border-radius: 0 var(--brutal-radius) var(--brutal-radius) 0 !important;
}

.btn-group .btn:not(:first-child) {
    margin-left: -1px !important;
}

/* ????? - ?????? (?? ????????????? ?? inventory ?? income) */
.form-control:not(.inventory-page .form-control):not(.income-page .form-control):not(.add-product-sidebar .form-control):not(#editProductSidebar .form-control) {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--brutal-radius);
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    font-family: inherit;
    transition: all 0.2s ease;
}

.form-control:focus:not(.inventory-page .form-control):not(.income-page .form-control):not(.add-product-sidebar .form-control):not(#editProductSidebar .form-control) {
    outline: none;
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.form-label:not(.inventory-page .form-label):not(.income-page .form-label):not(.add-product-sidebar .form-label):not(#editProductSidebar .form-label) {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-secondary) !important;
    font-weight: 500;
}

/* Utility classes - ?????? */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-success { color: var(--accent-success) !important; }
.text-warning { color: var(--accent-warning) !important; }
.text-danger { color: var(--accent-danger) !important; }

.bg-primary { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-card { background-color: var(--bg-card) !important; }

/* Заголовки — темний текст БЕЗ !important і без :not()-башти
   (інакше перебиває білий текст на .order-sidebar-head / .ui-on-dark / page-header) */
:where(h1, h2, h3, h4, h5, h6) {
    color: var(--text-primary);
}

/* ???????? ??????????? ? ????? ????? ? ????? (offcanvas-title = h5) */
.settings-sidebar .offcanvas-header,
.settings-sidebar-wide .offcanvas-header,
.user-edit-sidebar .offcanvas-header,
.settings-sidebar .offcanvas-header *,
.settings-sidebar-wide .offcanvas-header *,
.user-edit-sidebar .offcanvas-header * {
    color: #ffffff !important;
}

/* ??????? ?????? ????? ????? */
.sidebar,
.sidebar *,
.sidebar-header,
.sidebar-header *,
.sidebar-menu,
.sidebar-menu *,
.sidebar-link,
.sidebar-link *,
.sidebar-brand,
.sidebar-brand *,
.sidebar-menu-item,
.sidebar-menu-item *,
.slide-sidebar,
.slide-sidebar *,
.slide-sidebar-header,
.slide-sidebar-header *,
.slide-sidebar-menu,
.slide-sidebar-menu *,
.slide-sidebar-title,
.slide-sidebar-title * {
    color: #ffffff !important;
}

/* Document sidebar headers — white text on colored bar */
.ds-hdr,
.ds-hdr *,
.document-sidebar-header,
.document-sidebar-header *,
.acc-panel-header,
.acc-panel-header * {
    color: #ffffff !important;
}

/* ????? ????? ???? */
.top-header,
.top-header *,
.header-content,
.header-content *,
.header-left,
.header-left *,
.header-right,
.header-right *,
.header-item,
.header-item *,
.header-sync-btn,
.header-sync-btn *,
.sync-wrapper,
.sync-wrapper * {
    color: #ffffff !important;
}

/* Контентний колір іде з body. НЕ фарбувати всі div — це з’їдає білий
   текст на navy (.status-banner, .plan-tag, майбутні картки). */

input:not(.inventory-page input):not(.income-page input):not(.sale-page input):not(.shipment-page input):not(.pe-input), 
select:not(.inventory-page select):not(.income-page select):not(.sale-page select):not(.shipment-page select), 
textarea:not(.inventory-page textarea):not(.income-page textarea):not(.sale-page textarea):not(.shipment-page textarea) {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

table:not(.inventory-page table):not(.income-page table):not(.sale-page table):not(.shipment-page table):not(.ds-panel table):not(.document-sidebar table) {
    color: var(--text-primary) !important;
}

th:not(.inventory-page th):not(.income-page th):not(.sale-page th):not(.shipment-page th):not(.ds-panel th):not(.document-sidebar th), 
td:not(.inventory-page td):not(.income-page td):not(.sale-page td):not(.shipment-page td):not(.ds-panel td):not(.document-sidebar td) {
    color: var(--text-primary) !important;
}

/* ???????? ????? - ?????? ?????? */
.modal {
    z-index: 9999 !important;
}

.modal-backdrop {
    z-index: 9998 !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.modal-content {
    background: #ffffff !important;
    color: #212529 !important;
    z-index: 10000 !important;
    position: relative;
}

/* Bootstrap CRM modals: brand teal header (do not wipe to white — breaks close btn contrast) */
.modal-header:not(.add-product-sidebar .modal-header):not(.modal-overlay .modal-header):not(#addFolderModal .modal-header) {
    background: linear-gradient(135deg, var(--color-brand-light, #3d9e97) 0%, var(--color-brand, #2b7a74) 100%) !important;
    color: #ffffff !important;
    border-bottom: none;
}

.modal .modal-header .modal-title,
.modal .modal-header .modal-title * {
    color: #ffffff !important;
}

.modal .modal-header .btn-close {
    opacity: 1 !important;
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

.add-product-sidebar .modal-header,
.modal-overlay .modal-header,
#addFolderModal .modal-header {
    background: linear-gradient(135deg, #4fbcc0 0%, #4b9988 100%) !important;
    color: #ffffff !important;
}

.add-product-sidebar .modal-header *,
.modal-overlay .modal-header *,
#addFolderModal .modal-header * {
    color: #ffffff !important;
}

.modal-body {
    background: #ffffff !important;
    color: #212529 !important;
}

.modal-footer {
    background: #ffffff !important;
    color: #212529 !important;
}

.modal-body label,
.modal-body .form-label {
    color: #212529 !important;
    font-weight: 600 !important;
}

.modal-body input,
.modal-body textarea,
.modal-body select,
.modal-body .form-control,
.modal-body input[type="number"],
.modal-body input[type="text"],
.modal-body input[type="time"],
.modal-body input[type="date"],
.modal-body textarea.form-control {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #212529 !important;
    border: 2px solid #ced4da !important;
}

.modal-body input:focus,
.modal-body textarea:focus,
.modal-body select:focus,
.modal-body .form-control:focus {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #212529 !important;
    border-color: #468851 !important;
    box-shadow: 0 0 0 0.2rem rgba(70, 136, 81, 0.25) !important;
}

.modal-body .alert {
    background-color: #d1ecf1 !important;
    color: #212529 !important;
    border-color: #bee5eb !important;
}

.modal-body .alert strong,
.modal-body .alert span,
.modal-body .alert small,
.modal-body .alert .text-muted,
.modal-body .alert .text-primary,
.modal-body .alert * {
    color: #212529 !important;
}

.modal-body .fs-5 {
    color: #0d6efd !important;
    font-size: 1.25rem !important;
}

.modal-body .fw-bold {
    font-weight: 700 !important;
}

/* Do not force white text on every flex child — breaks icons/buttons in modals */
.modal-body .d-flex.align-items-center > span.text-white,
.modal-body .d-flex.gap-2 > .text-white {
    color: #ffffff !important;
}

/* Responsive */
@media (max-width: 768px) {
    .sidebar {
        width: var(--sidebar-collapsed-width);
    }
    
    .main-content {
        margin-left: var(--sidebar-collapsed-width);
    }
    
    .sidebar-menu-item span {
        display: none;
    }
}

@media (max-width: 576px) {
    .sidebar {
        transform: translateX(-100%);
    }
    
    .main-content {
        margin-left: 0;
    }
}

/* === ?????????? ????? ??? ?????????????? ?? ??????????? === */
/* ????????? ???????? ??? ????????? ?????????? ??? ??? ???????? */
.inventory-page,
.income-page,
.sale-page,
.shipment-page {
    background: #f8f9fa !important;
    color: #212529 !important;
}

/* Только color:inherit — не чіпати каталог / таблицю документа (warehouse-*.css) */
.inventory-page *:not(.sidebar):not(.sidebar *):not(.wc-catalog-root):not(.wc-catalog-root *):not(.wd-doc-root):not(.wd-doc-root *),
.income-page *:not(.sidebar):not(.sidebar *):not(.wc-catalog-root):not(.wc-catalog-root *):not(.wd-doc-root):not(.wd-doc-root *),
.sale-page *:not(.sidebar):not(.sidebar *):not(.wc-catalog-root):not(.wc-catalog-root *):not(.wd-doc-root):not(.wd-doc-root *),
.shipment-page *:not(.sidebar):not(.sidebar *):not(.wc-catalog-root):not(.wc-catalog-root *):not(.wd-doc-root):not(.wd-doc-root *) {
    color: inherit;
}

/* Светлая тема для документных страниц */
.inventory-page h1, .inventory-page h2, .inventory-page h3, .inventory-page h4, .inventory-page h5, .inventory-page h6,
.income-page h1, .income-page h2, .income-page h3, .income-page h4, .income-page h5, .income-page h6,
.sale-page h1, .sale-page h2, .sale-page h3, .sale-page h4, .sale-page h5, .sale-page h6 {
    color: inherit;
}

.inventory-page .page-header,
.income-page .page-header,
.sale-page .page-header {
    background: linear-gradient(90deg, var(--color-shell) 0%, var(--color-shell-mid) 100%) !important;
    color: #ffffff !important;
}

.inventory-page .document-panel,
.income-page .document-panel,
.sale-page .document-panel {
    background: #ffffff !important;
    color: #2c3e50 !important;
}

.inventory-page .catalog-section:not(.wc-catalog-root),
.income-page .catalog-section:not(.wc-catalog-root),
.sale-page .catalog-section:not(.wc-catalog-root) {
    background: #ffffff !important;
}

.inventory-page .document-section:not(.wd-doc-root),
.income-page .document-section:not(.wd-doc-root),
.sale-page .document-section:not(.wd-doc-root) {
    background: #ffffff !important;
}

/* Не чіпати новий каталог/шапку документів — їх стилізує warehouse-*.css */
.inventory-page .catalog-section:not(.wc-catalog-root) .catalog-header,
.income-page .catalog-section:not(.wc-catalog-root) .catalog-header,
.sale-page .catalog-section:not(.wc-catalog-root) .catalog-header {
    background: #e9ecef !important;
    color: #2c3e50 !important;
}

.inventory-page .document-section:not(.wd-doc-root) .document-header,
.income-page .document-section:not(.wd-doc-root) .document-header,
.sale-page .document-section:not(.wd-doc-root) .document-header {
    background: #e9ecef !important;
    color: #2c3e50 !important;
}

.inventory-page .form-control,
.inventory-page .form-select,
.income-page .form-control,
.income-page .form-select,
.sale-page .form-control,
.sale-page .form-select {
    background: #ffffff !important;
    color: #212529 !important;
    border: 1px solid #ced4da !important;
}

.inventory-page .form-label,
.income-page .form-label,
.sale-page .form-label {
    color: #2c3e50 !important;
}

.inventory-page .text-muted,
.income-page .text-muted,
.sale-page .text-muted {
    color: #6c757d !important;
}

.inventory-page .category-header,
.income-page .category-header,
.sale-page .category-header {
    background: #ecf0f1 !important;
    color: #2c3e50 !important;
}

.inventory-page .product-item:not(.wc-product),
.income-page .product-item:not(.wc-product),
.sale-page .product-item:not(.wc-product) {
    background: #ffffff !important;
    color: #2c3e50 !important;
}

.inventory-page .document-section:not(.wd-doc-root) .document-table thead th,
.income-page .document-section:not(.wd-doc-root) .document-table thead th,
.sale-page .document-section:not(.wd-doc-root) .document-table thead th {
    background: #e9ecef !important;
    color: #2c3e50 !important;
}

.inventory-page .document-section:not(.wd-doc-root) .document-table tbody td,
.income-page .document-section:not(.wd-doc-root) .document-table tbody td,
.sale-page .document-section:not(.wd-doc-root) .document-table tbody td {
    background: #ffffff !important;
    color: #2c3e50 !important;
}

.inventory-page .document-footer,
.income-page .document-footer,
.sale-page .document-footer {
    background: #ffffff !important;
    color: #2c3e50 !important;
}

/* === BRUTAL ????? === */
.brutal-page {
    background: var(--bg-primary);
    min-height: 100vh;
    padding: 0;
}

.brutal-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
}

.brutal-container-fluid {
    max-width: 100%;
    padding: 0 1rem;
}

.brutal-header {
    margin-bottom: 2rem;
}

.brutal-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.brutal-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
}

.brutal-card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--text-primary);
}

.brutal-card-header.accent {
    background: var(--color-shell) !important;
    color: #fff !important;
}

.brutal-card-content {
    padding: 1.5rem;
}

.brutal-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--brutal-radius);
    background: white;
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.brutal-btn:hover {
    background: var(--bg-secondary);
    transform: none;
}

.brutal-btn.success {
    background: var(--color-shell, #0f172a);
    color: white;
    border-color: var(--color-shell, #0f172a);
}

.brutal-btn.success:hover {
    background: var(--color-shell-mid, #1a2332);
    color: white;
}

.brutal-btn-mini {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.brutal-btn-mini.active {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

.brutal-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.875rem;
    text-transform: uppercase;
}

.brutal-select,
.brutal-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--brutal-radius);
    background: white;
    color: var(--text-primary);
    font-family: inherit;
}

.brutal-select:focus,
.brutal-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.brutal-search-container {
    position: relative;
}

.brutal-search {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--brutal-radius);
    background: white;
}

.brutal-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.brutal-table-container {
    overflow-x: auto;
}

.brutal-table {
    width: 100%;
    border-collapse: collapse;
}

.brutal-table thead th {
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
    text-align: left;
    border-bottom: 2px solid var(--border-color);
    text-transform: uppercase;
    font-size: 0.875rem;
}

.brutal-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}

.brutal-table tbody tr:hover {
    background: var(--bg-secondary);
}

.brutal-table tbody td {
    padding: 0.75rem 1rem;
    color: var(--text-primary);
}

.brutal-cell-text {
    font-weight: 500;
}

.brutal-category-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.brutal-level-indicator {
    color: var(--text-muted);
}

.brutal-text-muted {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.brutal-view-toggle {
    display: flex;
    gap: 0.5rem;
}

.brutal-table-row {
    transition: all 0.2s ease;
}

.brutal-table-row:hover {
    background: rgba(14, 165, 233, 0.05);
}

/* === ??????? === */
.brutal-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.brutal-modal-content {
    background: var(--bg-card);
    border-radius: var(--brutal-radius);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.brutal-modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border-radius: var(--brutal-radius) var(--brutal-radius) 0 0;
}

.brutal-modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
}

.brutal-modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.brutal-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.brutal-modal-body {
    padding: 1.5rem;
}

.brutal-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    background: var(--bg-secondary);
    border-radius: 0 0 var(--brutal-radius) var(--brutal-radius);
}

.brutal-checkbox {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-primary);
}

.brutal-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.brutal-empty-state {
    padding: 3rem;
    text-align: center;
}

.brutal-empty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.brutal-empty-content i {
    font-size: 3rem;
    color: var(--text-muted);
}

.brutal-empty-content h3 {
    color: var(--text-primary);
    margin: 0;
}

.brutal-empty-content p {
    color: var(--text-muted);
    margin: 0;
}

.brutal-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.brutal-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--brutal-radius);
    padding: 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.brutal-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.brutal-stat-card.success {
    border-color: var(--accent-success);
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, rgba(40, 167, 69, 0.05) 100%);
}

.brutal-stat-card.accent {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.1) 0%, rgba(0, 123, 255, 0.05) 100%);
}

.brutal-stat-card.warning {
    border-color: var(--accent-warning);
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 193, 7, 0.05) 100%);
}

.brutal-stat-icon {
    font-size: 2rem;
    color: var(--accent-primary);
    margin-bottom: 0.5rem;
}

.brutal-stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.brutal-stat-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
}

.brutal-navigation {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}


/* === BADGES — білий текст на кольорових фонах (меню + Bootstrap) === */
.badge,
.badge *,
.chat-unread-badge,
.orders-unprocessed-badge,
.unread-badge,
.messenger-badge,
.live-badge,
.ttn-badge,
.integration-status,
.integration-status > :not(.status-tip):not(.status-tip *),
[class*="-badge"]:not(.category-badge):not(.status-badge):not(.dn-badge):not(.feature-core-badge):not(.feature-core-tag):not(.feature-price-tag):not(.sec-badge),
[class*="-badge"]:not(.category-badge):not(.status-badge):not(.dn-badge):not(.feature-core-badge):not(.feature-core-tag):not(.feature-price-tag):not(.sec-badge) * {
    color: #ffffff !important;
}
/* Soft status badges — colors owned by components.css (do not force white here) */
/* Лічильники товарів у папках каталогу документів — чорний текст */
.category-badge,
.category-badge * {
    color: #111827 !important;
}
/* Світлі бейджі — темний текст */
.badge.bg-warning,
.badge.bg-warning *,
.badge.bg-light,
.badge.bg-light *,
.badge.text-dark,
.badge.text-dark *,
.qty-badge {
    color: #212529 !important;
}

/* === Dark chrome headers — always white (beats global text rules) === */
.ui-on-dark, .ui-on-dark *,
.order-sidebar-head, .order-sidebar-head *,
.page-header, .page-header *,
.shipment-header, .shipment-header *,
.ds-hdr, .ds-hdr *,
.ci-header, .ci-header *,
.crm-panel-header, .crm-panel-header *,
.write-modal-header, .write-modal-header *,
.doc-edit-header, .doc-edit-header *,
.telegram-header, .telegram-header *,
.inv-modal-header, .inv-modal-header *,
.integration-header, .integration-header * {
    color: #ffffff !important;
}

/* === SIDEBAR MENU — завжди білий текст на темному фоні === */
#sidebar.sidebar,
#sidebar.sidebar a,
#sidebar.sidebar button,
#sidebar.sidebar span,
#sidebar.sidebar i,
#sidebar.sidebar .sidebar-text,
#sidebar.sidebar .sidebar-link,
#sidebar.sidebar .sidebar-icon,
#sidebar.sidebar .sidebar-brand,
#sidebar.sidebar .sidebar-brand-name,
#sidebar.sidebar .sidebar-brand-tagline,
#sidebar.sidebar .create-document-btn,
#sidebar.sidebar .create-document-btn *,
#sidebar.sidebar .chat-unread-badge,
#sidebar.sidebar .orders-unprocessed-badge {
    color: #ffffff !important;
}
/* Hover підменю на білому фоні — темний текст */
#sidebar.sidebar .sidebar-submenu .sidebar-link:hover,
#sidebar.sidebar .sidebar-submenu .sidebar-link:hover .sidebar-text,
#sidebar.sidebar .sidebar-submenu .sidebar-link:hover .sidebar-icon {
    color: #ffffff !important;
}

/* Even layout — no hover lifts; cards 12px; buttons stay with dn-buttons.css */
.btn:hover,
.brutal-btn:hover,
.card:hover {
    transform: none !important;
}
.brutal-card,
.brutal-modal-content {
    border-radius: var(--radius-lg, 12px);
}
.brutal-input,
.brutal-select,
.brutal-search,
.brutal-textarea {
    border-radius: 8px;
}
.brutal-btn {
    border-radius: 8px;
}
.brutal-container,
.brutal-container-fluid {
    padding: 12px 16px 20px;
}