/* =====================================================================
   Motyw aplikacji wg STYLE_GUIDE.md (SpeedApp CRM Design System),
   nałożony na Bootstrap 5.3 - aplikacja zostaje na Bootstrapie (modale,
   dropdowny, offcanvas, DataTables, select2), a ten plik przestawia jego
   komponenty na tokeny z przewodnika:
   - Inter, gęsta typografia (text-sm jako baza),
   - ostre rogi wszędzie (rounded-none), zaokrąglone tylko odznaki i kropki,
   - paleta slate + kolory wyłącznie semantyczne (zielony/czerwony/bursztyn/niebieski),
   - brak cieni - separację robią obramowania.
   Dołączany przez partials/layout_top.php i przez strony samodzielne
   (logowanie, oferty dla klienta itp.) zaraz po CSS Bootstrapa.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* --- TOKENY (Tailwind slate + kolory semantyczne) --- */
:root {
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    --green-100: #dcfce7; --green-400: #4ade80; --green-600: #16a34a; --green-700: #15803d;
    --red-100: #fee2e2;   --red-400: #f87171;   --red-500: #ef4444;   --red-600: #dc2626; --red-700: #b91c1c;
    --amber-100: #fef3c7; --amber-400: #fbbf24; --amber-500: #f59e0b; --amber-700: #b45309;
    --blue-100: #dbeafe;  --blue-400: #60a5fa;  --blue-600: #2563eb;  --blue-700: #1d4ed8;
    --purple-600: #9333ea; --purple-700: #7e22ce;

    /* Zmienne używane dotąd przez strony - zostają, z nowymi wartościami */
    --primary-color: var(--slate-900);
    --primary-hover: var(--slate-800);
    --bg-light: var(--slate-50);
    --bg-card: #ffffff;
    --text-main: var(--slate-900);
    --text-muted: var(--slate-500);
    --border-color: var(--slate-200);
    --success-color: var(--green-600);
    --danger-color: var(--red-600);
    --warning-color: var(--amber-500);
    --border-radius: 0;
    --sidebar-width: 256px;

    /* Bootstrap 5.3 - globalnie */
    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-font-size: 0.875rem;
    --bs-body-color: var(--slate-900);
    --bs-body-bg: var(--slate-50);
    --bs-border-color: var(--slate-200);
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
    --bs-border-radius-2xl: 0;
    --bs-primary: #0f172a;
    --bs-primary-rgb: 15, 23, 42;
    --bs-secondary-color: var(--slate-500);
    --bs-link-color: var(--slate-900);
    --bs-link-color-rgb: 15, 23, 42;
    --bs-link-hover-color: var(--slate-700);
    --bs-link-hover-color-rgb: 51, 65, 85;
    --bs-box-shadow: none;
    --bs-box-shadow-sm: none;
    --bs-box-shadow-lg: none;
    --bs-focus-ring-color: rgba(15, 23, 42, 0.25);
}

/* --- PODSTAWY --- */
body {
    background-color: var(--slate-50);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.875rem;
    color: var(--slate-900);
    line-height: 1.5;
}

h1, .h1 { font-size: 1.25rem; font-weight: 700; color: var(--slate-800); }
h2, .h2 { font-size: 1.25rem; font-weight: 700; color: var(--slate-800); }
h3, .h3 { font-size: 1.125rem; font-weight: 700; color: var(--slate-800); }
h4, .h4 { font-size: 1.125rem; font-weight: 700; color: var(--slate-800); }
h5, .h5 { font-size: 1rem; font-weight: 700; color: var(--slate-800); }
h6, .h6 { font-size: 0.875rem; font-weight: 700; color: var(--slate-800); }

a { color: var(--slate-900); }
a:hover { color: var(--slate-700); }

.text-primary { color: var(--slate-900) !important; }
.text-muted, .text-secondary { color: var(--slate-500) !important; }
.text-success { color: var(--green-700) !important; }
.text-danger { color: var(--red-600) !important; }
.text-warning { color: var(--amber-700) !important; }
.text-info { color: var(--blue-700) !important; }
.bg-light { background-color: var(--slate-50) !important; }
.bg-primary:not(.badge) { background-color: var(--slate-900) !important; }
.border { border-color: var(--slate-200) !important; }
.border-primary { border-color: var(--slate-900) !important; }

/* Ostre rogi i brak cieni - także tam, gdzie strony nadpisywały je własnym <style> */
.card, .btn, .form-control, .form-select, .input-group-text, .dropdown-menu, .modal-content,
.alert, .list-group, .list-group-item, .nav-link, .nav-pills .nav-link, .page-link, .toast,
.offcanvas, .popover, .accordion, .accordion-item, .accordion-button, .progress, .table,
.rounded, .rounded-1, .rounded-2, .rounded-3, .rounded-4, .rounded-5, .rounded-top, .rounded-bottom,
.rounded-pill:not(.badge), .img-thumbnail {
    border-radius: 0 !important;
}
.shadow, .shadow-sm, .shadow-lg, .card, .modal-content, .dropdown-menu, .btn, .form-control:focus,
.form-select:focus, .btn:focus, .btn:active {
    box-shadow: none !important;
}

.small-label, .form-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate-400);
    margin-bottom: 0.25rem;
}
.form-text { font-size: 11px; color: var(--slate-400); }

/* --- PRZYCISKI (§5) --- */
.btn {
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.625rem 1.25rem;
    border-width: 1px;
    transition: background-color .15s, color .15s, border-color .15s;
}
.btn-sm { font-size: 0.75rem; padding: 0.375rem 0.75rem; }
.btn-xs { font-size: 10px; padding: 0.125rem 0.5rem; font-weight: 700; }
.btn-lg { font-size: 0.875rem; padding: 0.75rem 1.5rem; }

.btn-primary, .btn-dark {
    --bs-btn-bg: var(--slate-900); --bs-btn-border-color: var(--slate-900); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--slate-800); --bs-btn-hover-border-color: var(--slate-800); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--slate-800); --bs-btn-active-border-color: var(--slate-800);
    --bs-btn-disabled-bg: var(--slate-400); --bs-btn-disabled-border-color: var(--slate-400);
}
.btn-secondary, .btn-light {
    --bs-btn-bg: var(--slate-100); --bs-btn-border-color: var(--slate-100); --bs-btn-color: var(--slate-600);
    --bs-btn-hover-bg: var(--slate-200); --bs-btn-hover-border-color: var(--slate-200); --bs-btn-hover-color: var(--slate-800);
    --bs-btn-active-bg: var(--slate-200); --bs-btn-active-border-color: var(--slate-200); --bs-btn-active-color: var(--slate-800);
}
.btn-success {
    --bs-btn-bg: var(--green-600); --bs-btn-border-color: var(--green-600);
    --bs-btn-hover-bg: var(--green-700); --bs-btn-hover-border-color: var(--green-700);
    --bs-btn-active-bg: var(--green-700); --bs-btn-active-border-color: var(--green-700);
}
.btn-danger {
    --bs-btn-bg: var(--red-600); --bs-btn-border-color: var(--red-600);
    --bs-btn-hover-bg: var(--red-700); --bs-btn-hover-border-color: var(--red-700);
    --bs-btn-active-bg: var(--red-700); --bs-btn-active-border-color: var(--red-700);
}
.btn-warning {
    --bs-btn-bg: var(--amber-500); --bs-btn-border-color: var(--amber-500); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--amber-700); --bs-btn-hover-border-color: var(--amber-700); --bs-btn-hover-color: #fff;
}
.btn-info {
    --bs-btn-bg: var(--blue-600); --bs-btn-border-color: var(--blue-600); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--blue-700); --bs-btn-hover-border-color: var(--blue-700); --bs-btn-hover-color: #fff;
}
/* Akcja "kreatywna" z przewodnika (edycja, wydanie) - fioletowa, odrębna od czarnej głównej */
.btn-accent {
    --bs-btn-bg: var(--purple-600); --bs-btn-border-color: var(--purple-600); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--purple-700); --bs-btn-hover-border-color: var(--purple-700); --bs-btn-hover-color: #fff;
}
.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark {
    --bs-btn-bg: #fff; --bs-btn-color: var(--slate-800); --bs-btn-border-color: var(--slate-200);
    --bs-btn-hover-bg: var(--slate-50); --bs-btn-hover-color: var(--slate-900); --bs-btn-hover-border-color: var(--slate-300);
    --bs-btn-active-bg: var(--slate-900); --bs-btn-active-color: #fff; --bs-btn-active-border-color: var(--slate-900);
}
.btn-check:checked + .btn-outline-primary, .btn-check:checked + .btn-outline-secondary {
    background: var(--slate-900); color: #fff; border-color: var(--slate-900);
}
.btn-outline-success { --bs-btn-color: var(--green-700); --bs-btn-border-color: var(--green-400); --bs-btn-hover-bg: var(--green-100); --bs-btn-hover-color: var(--green-700); --bs-btn-hover-border-color: var(--green-400); }
.btn-outline-danger { --bs-btn-color: var(--red-600); --bs-btn-border-color: var(--red-400); --bs-btn-hover-bg: var(--red-100); --bs-btn-hover-color: var(--red-700); --bs-btn-hover-border-color: var(--red-400); }
.btn-outline-warning { --bs-btn-color: var(--amber-700); --bs-btn-border-color: var(--amber-400); --bs-btn-hover-bg: var(--amber-100); --bs-btn-hover-color: var(--amber-700); --bs-btn-hover-border-color: var(--amber-400); }
.btn-outline-info { --bs-btn-color: var(--blue-700); --bs-btn-border-color: var(--blue-400); --bs-btn-hover-bg: var(--blue-100); --bs-btn-hover-color: var(--blue-700); --bs-btn-hover-border-color: var(--blue-400); }
.btn-outline-light { --bs-btn-color: var(--slate-200); --bs-btn-border-color: var(--slate-600); --bs-btn-hover-bg: var(--slate-700); --bs-btn-hover-color: #fff; }
.btn-link { font-weight: 700; color: var(--slate-500); text-decoration: none; }
.btn-link:hover { color: var(--slate-800); }

/* --- FORMULARZE (§6) --- */
.form-control, .form-select {
    border: 1px solid var(--slate-200);
    padding: 0.5rem;
    font-size: 0.875rem;
    color: var(--slate-900);
    background-color: #fff;
}
.form-control-sm, .form-select-sm { padding: 0.375rem 0.5rem; font-size: 0.8125rem; }
.form-control-lg, .form-select-lg { padding: 0.75rem; font-size: 0.875rem; }
.form-select { padding-right: 2.25rem; }
.form-control:focus, .form-select:focus {
    border-color: var(--slate-900);
    outline: 2px solid var(--slate-900);
    outline-offset: -1px;
}
.form-control[type="file"] { padding: 0.375rem; font-size: 0.75rem; background: var(--slate-50); }
.form-control::placeholder { color: var(--slate-400); }
.input-group-text { background: var(--slate-50); border-color: var(--slate-200); color: var(--slate-500); font-size: 0.875rem; }
.form-check-input { border-color: var(--slate-300); border-radius: 0 !important; }
.form-check-input:checked { background-color: var(--slate-900); border-color: var(--slate-900); }
.form-switch .form-check-input { border-radius: 2em !important; }
.form-check-input:focus { box-shadow: none; border-color: var(--slate-900); }

/* --- KARTY (§7) --- */
.card {
    background: #fff;
    border: 1px solid var(--slate-100);
}
.card-header, .card-footer {
    background: #fff;
    border-color: var(--slate-100);
    padding: 1rem 1.5rem;
}
.card-header { font-weight: 700; color: var(--slate-900); }
.card-body { padding: 1.5rem; }

.stat-card {
    background: #fff;
    border: 1px solid var(--slate-100) !important;
    transition: border-color .15s;
}
.stat-card:hover { border-color: var(--slate-300) !important; }
.stat-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--slate-100);
    color: var(--slate-700);
}

.filter-box {
    background: #fff;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--slate-100);
}

/* --- TABELE (§8) --- */
.table {
    --bs-table-bg: #fff;
    --bs-table-hover-bg: var(--slate-50);
    --bs-table-striped-bg: var(--slate-50);
    --bs-table-border-color: var(--slate-100);
    font-size: 0.875rem;
    color: var(--slate-900);
}
.table thead th, .table > thead > tr > th {
    background-color: var(--slate-50);
    color: var(--slate-500);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--slate-100);
    padding: 0.875rem 1rem;
    white-space: nowrap;
}
.table > tbody > tr > td { padding: 0.875rem 1rem; vertical-align: middle; border-color: var(--slate-100); }
.table-sm > tbody > tr > td, .table-sm > thead > tr > th, .table-sm > tbody > tr > th { padding: 0.375rem 0.5rem; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--slate-50); }
.table-light { --bs-table-bg: var(--slate-50); }
.table-bordered > :not(caption) > * > * { border-color: var(--slate-200); }

/* --- ODZNAKI (§9) - jedyne zaokrąglone elementy --- */
.badge, .status-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem !important;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.6;
}
.badge.bg-success, .status-badge.bg-success { background-color: var(--green-100) !important; color: var(--green-700) !important; }
.badge.bg-danger, .status-badge.bg-danger { background-color: var(--red-100) !important; color: var(--red-600) !important; }
.badge.bg-warning, .status-badge.bg-warning { background-color: var(--amber-100) !important; color: var(--amber-700) !important; }
.badge.bg-info, .badge.bg-primary, .status-badge.bg-info { background-color: var(--blue-100) !important; color: var(--blue-700) !important; }
.badge.bg-secondary, .badge.bg-light, .status-badge.bg-secondary { background-color: var(--slate-200) !important; color: var(--slate-700) !important; }
.badge.bg-dark { background-color: var(--slate-900) !important; color: #fff !important; }
.badge.border { border-color: var(--slate-200) !important; }

.status-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 9999px; flex-shrink: 0; }

/* --- KOMUNIKATY (§10) --- */
.alert { border: 1px solid; padding: 0.75rem 1rem; font-size: 0.875rem; }
.alert-success { background: var(--green-100); border-color: var(--green-400); color: var(--green-700); }
.alert-danger { background: var(--red-100); border-color: var(--red-400); color: var(--red-700); }
.alert-warning { background: var(--amber-100); border-color: var(--amber-400); color: var(--amber-700); }
.alert-info, .alert-primary { background: var(--blue-100); border-color: var(--blue-400); color: var(--blue-700); }
.alert-secondary, .alert-light { background: var(--slate-100); border-color: var(--slate-200); color: var(--slate-700); }

/* --- MODALE (§11) --- */
.modal-backdrop.show { opacity: 1; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(4px); }
.modal-backdrop { background: rgba(15, 23, 42, 0.5); }
.modal-content { border: 1px solid var(--slate-200); }
.modal-header {
    background: var(--slate-50);
    border-bottom: 1px solid var(--slate-100);
    padding: 1.25rem 1.5rem;
}
.modal-header h5, .modal-title { font-size: 1.125rem; font-weight: 700; color: var(--slate-800); margin: 0; }
.modal-header.bg-primary, .modal-header.bg-dark, .modal-header.bg-danger, .modal-header.bg-success,
.modal-header.bg-info, .modal-header.bg-warning, .modal-header.bg-secondary {
    background: var(--slate-50) !important;
    color: var(--slate-800) !important;
}
.modal-header.bg-primary .btn-close-white, .modal-header.bg-dark .btn-close-white,
.modal-header.bg-danger .btn-close-white, .modal-header.bg-success .btn-close-white { filter: none; }
.modal-header.text-white, .modal-header .text-white { color: var(--slate-800) !important; }
.modal-body { padding: 1.5rem; }
.modal-footer { border-top: 1px solid var(--slate-100); padding: 1rem 1.5rem; }

/* --- DROPDOWN, ZAKŁADKI, PAGINACJA --- */
.dropdown-menu { border: 1px solid var(--slate-200); padding: 0.25rem 0; font-size: 0.8125rem; }
.dropdown-item { padding: 0.5rem 1rem; color: var(--slate-700); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--slate-50); color: var(--slate-900); }
.dropdown-item.active, .dropdown-item:active { background: var(--slate-900); color: #fff; }

.nav-tabs { border-bottom: 1px solid var(--slate-200); }
.nav-tabs .nav-link { color: var(--slate-500); font-weight: 700; font-size: 0.75rem; }
.nav-tabs .nav-link.active { color: var(--slate-900); border-color: var(--slate-200) var(--slate-200) #fff; }

.nav-pills .nav-link { color: var(--slate-500); font-weight: 700; font-size: 0.75rem; border: 1px solid var(--slate-200); background: #fff; margin-right: .25rem; }
.nav-pills .nav-link.active { background: var(--slate-900); color: #fff; border-color: var(--slate-900); }

/* Zakładki "stronowe" (§5 - page-level tab bar) */
.nav-tabs-custom { border-bottom: none; gap: 0.25rem; }
.nav-tabs-custom .nav-link {
    border: 1px solid var(--slate-200);
    background: #fff;
    color: var(--slate-500) !important;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
    transition: background-color .15s;
}
.nav-tabs-custom .nav-link:hover { background: var(--slate-50); }
.nav-tabs-custom .nav-link.active {
    background: var(--slate-900) !important;
    color: #fff !important;
    border-color: var(--slate-900);
}

.pagination { --bs-pagination-color: var(--slate-700); --bs-pagination-active-bg: var(--slate-900); --bs-pagination-active-border-color: var(--slate-900); --bs-pagination-border-color: var(--slate-200); --bs-pagination-hover-bg: var(--slate-50); --bs-pagination-focus-box-shadow: none; font-size: 0.75rem; }

.list-group-item { border-color: var(--slate-100); }
.list-group-item.active { background: var(--slate-900); border-color: var(--slate-900); }

.progress { background: var(--slate-100); }
.progress-bar { background: var(--slate-900); }

/* --- DataTables / select2 --- */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select { border: 1px solid var(--slate-200); border-radius: 0; padding: 0.375rem 0.5rem; }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { font-size: 0.75rem; color: var(--slate-500); }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-dropdown { border-radius: 0 !important; border-color: var(--slate-200) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--slate-900) !important; }

/* --- DROBIAZGI Z ISTNIEJĄCYCH STRON --- */
.domain-card-wrapper .card {
    border: 1px solid var(--slate-100) !important;
    border-left-width: 4px !important; /* akcent statusu z boku */
    margin-bottom: 0.5rem;
    background: #fff;
}
.domain-card-wrapper h6 { color: var(--slate-900); font-weight: 700; }

.border-dashed { border-style: dashed !important; }

[data-bs-toggle="collapse"] .fa-chevron-down { transition: transform 0.2s ease; }
[data-bs-toggle="collapse"][aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }

.avatar-circle {
    width: 40px;
    height: 40px;
    background: var(--slate-900);
    color: #fff;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

code { color: var(--slate-800); background: var(--slate-100); padding: 0 .25rem; }
pre code { background: none; padding: 0; }

.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--slate-700); border-radius: 10px; }

/* --- LAYOUT: PASEK BOCZNY (§4) --- */
body.has-sidebar { background-color: var(--slate-50); }

.app-sidebar {
    width: var(--sidebar-width);
    background: #fff;
    border-right: 1px solid var(--slate-200);
    z-index: 1030;
}
.app-sidebar .brand {
    height: 4rem;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--slate-100);
}
.app-sidebar .brand-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: var(--slate-900);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}
.app-sidebar .brand-name { font-weight: 700; font-size: 0.875rem; color: var(--slate-900); line-height: 1.2; }
.app-sidebar .brand-role { font-size: 10px; color: var(--slate-400); text-transform: uppercase; letter-spacing: 0.08em; }

.app-sidebar nav { overflow-y: auto; padding: 0.75rem 0 1rem; }
.app-sidebar .nav-section-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--slate-400);
    padding: 0 1.5rem;
    margin: 1rem 0 0.375rem;
}
.app-sidebar .nav-section-label:first-child { margin-top: 0.25rem; }
.app-sidebar .app-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1.5rem;
    border-left: 2px solid transparent;
    color: var(--slate-500);
    font-weight: 500;
    font-size: 13px;
    text-decoration: none;
    transition: color .15s, background-color .15s;
}
.app-sidebar .app-nav-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.app-sidebar .app-nav-link:hover { color: var(--slate-900); background: var(--slate-50); }
.app-sidebar .app-nav-link.active {
    border-left-color: var(--slate-900);
    background: var(--slate-50);
    color: var(--slate-900);
    font-weight: 600;
}
.app-sidebar .sidebar-footer {
    border-top: 1px solid var(--slate-100);
    padding: 1rem 1.5rem;
}
.app-sidebar .sidebar-footer .user-name { font-size: 0.8125rem; font-weight: 600; color: var(--slate-900); }
.app-sidebar .sidebar-footer .logout-link {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--red-500);
    text-decoration: none;
}
.app-sidebar .sidebar-footer .logout-link:hover { color: var(--red-700); }

.app-topbar-mobile { background: #fff; border-bottom: 1px solid var(--slate-200); }
.app-topbar-mobile .brand-name { font-weight: 700; color: var(--slate-900); text-decoration: none; }

.app-main { min-height: 100vh; }
.app-main > .container-fluid { padding: 2rem !important; }

@media (min-width: 992px) {
    .app-sidebar { position: fixed; top: 0; left: 0; height: 100vh; }
    .app-main { margin-left: var(--sidebar-width); }
}
@media (max-width: 767.98px) {
    .app-main > .container-fluid { padding: 1rem !important; }
}

/* --- CZARNO-BIAŁE PORZĄDKI (2026-09-23) ---
   Strony mają jeszcze kolorowe klasy Bootstrapa na elementach, które wg przewodnika
   są neutralne (nagłówki kart/modali, kafelki statystyk, awatary). Tu sprowadzamy je
   do bieli/slate; kolor zostaje tylko w odznakach, komunikatach i przyciskach
   o znaczeniu (sukces/usuń). */

/* Kafelki statystyk: jasne tło + ciemna ikona, niezależnie od koloru w markupie */
.stat-icon, .stat-icon[class*="bg-"] {
    background-color: var(--slate-100) !important;
    color: var(--slate-700) !important;
}
.stat-icon i { color: inherit !important; }

/* Półprzezroczyste tła (bg-X bg-opacity-10/25) - neutralne albo jasne semantyczne */
.bg-primary.bg-opacity-10, .bg-primary.bg-opacity-25,
.bg-info.bg-opacity-10, .bg-info.bg-opacity-25,
.bg-secondary.bg-opacity-10, .bg-secondary.bg-opacity-25,
.bg-dark.bg-opacity-10, .bg-dark.bg-opacity-25 { background-color: var(--slate-100) !important; }
.bg-success.bg-opacity-10, .bg-success.bg-opacity-25 { background-color: var(--green-100) !important; }
.bg-danger.bg-opacity-10, .bg-danger.bg-opacity-25 { background-color: var(--red-100) !important; }
.bg-warning.bg-opacity-10, .bg-warning.bg-opacity-25 { background-color: var(--amber-100) !important; }
.border-warning { border-color: var(--amber-400) !important; }
.border-success { border-color: var(--green-400) !important; }
.border-danger { border-color: var(--red-400) !important; }
.border-info { border-color: var(--slate-200) !important; }

/* Nagłówki kart w kolorze - jak zwykły nagłówek karty (biały, czarny tekst) */
.card-header.bg-primary, .card-header.bg-dark, .card-header.bg-info, .card-header.bg-secondary,
.card-header.bg-success, .card-header.bg-danger, .card-header.bg-warning {
    background: var(--slate-50) !important;
    color: var(--slate-900) !important;
    border-bottom: 1px solid var(--slate-100);
}
.card-header.text-white, .card-header .text-white, .card-header .text-white-50 { color: var(--slate-900) !important; }

/* Pełne kolorowe tła na zwykłych blokach (nie odznaki, nie przyciski) - czerń */
/* (bez nagłówków kart/modali - te mają być jasne, patrz wyżej) */
div.bg-primary:not(.badge):not(.progress-bar):not(.modal-header):not(.card-header):not(.bg-opacity-10):not(.bg-opacity-25),
span.bg-primary:not(.badge),
div.bg-info:not(.badge):not(.progress-bar):not(.modal-header):not(.card-header):not(.bg-opacity-10):not(.bg-opacity-25) {
    background-color: var(--slate-900) !important;
    color: #fff !important;
}

/* Tekst "informacyjny" (niebieski) - w czarno-białym wariancie szary */
.text-info { color: var(--slate-600) !important; }
.badge.bg-info, .badge.bg-primary { background-color: var(--slate-200) !important; color: var(--slate-800) !important; }

/* Awatary - zawsze czarne kółko, bez koloru roli */
.avatar-circle, .avatar-circle[class*="bg-"] { background-color: var(--slate-900) !important; color: #fff !important; }

/* Ikony, które zostały w treści (głównie przyciski z samą ikoną) - bez koloru */
i[class*="fa-"] { color: inherit; }
.text-primary i[class*="fa-"], i[class*="fa-"].text-primary { color: var(--slate-900) !important; }

/* Linki w tekście - czarne, podkreślone po najechaniu */
.app-main a:not(.btn):not(.dropdown-item):not(.nav-link):not(.app-nav-link):not(.page-link):not(.badge) { text-decoration: none; }
.app-main a:not(.btn):not(.dropdown-item):not(.nav-link):not(.app-nav-link):not(.page-link):not(.badge):hover { text-decoration: underline; }

/* Przyciski wg §5: czarny główny, szary pomocniczy, czerwony tylko dla usuwania.
   Zielone/niebieskie/żółte przyciski z markupu stron -> czarny główny,
   ich wersje "outline" -> neutralny obrys. */
.btn-success, .btn-info, .btn-warning {
    --bs-btn-bg: var(--slate-900); --bs-btn-border-color: var(--slate-900); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--slate-800); --bs-btn-hover-border-color: var(--slate-800); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--slate-800); --bs-btn-active-border-color: var(--slate-800); --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--slate-400); --bs-btn-disabled-border-color: var(--slate-400); --bs-btn-disabled-color: #fff;
}
.btn-outline-success, .btn-outline-info, .btn-outline-warning {
    --bs-btn-bg: #fff; --bs-btn-color: var(--slate-800); --bs-btn-border-color: var(--slate-200);
    --bs-btn-hover-bg: var(--slate-50); --bs-btn-hover-color: var(--slate-900); --bs-btn-hover-border-color: var(--slate-300);
    --bs-btn-active-bg: var(--slate-900); --bs-btn-active-color: #fff; --bs-btn-active-border-color: var(--slate-900);
}
.btn-check:checked + .btn-outline-success, .btn-check:checked + .btn-outline-info, .btn-check:checked + .btn-outline-warning {
    background: var(--slate-900); color: #fff; border-color: var(--slate-900);
}

/* --- Tom Select (wyszukiwane pola wyboru) - skórka wg STYLE_GUIDE.md §14 --- */
.ts-control { border-radius: 0 !important; padding: 0.5rem 0.75rem !important; border-color: var(--slate-200) !important; background-color: #fff !important; font-size: 0.875rem; box-shadow: none !important; min-height: 38px; }
.ts-wrapper.single .ts-control { padding-right: 2.5rem !important; }
.ts-wrapper.focus .ts-control { border-color: var(--slate-900) !important; outline: 2px solid var(--slate-900); outline-offset: -1px; }
.ts-dropdown { border-radius: 0 !important; margin-top: 4px; border: 1px solid var(--slate-200) !important; box-shadow: none !important; font-size: 0.8125rem; z-index: 1060; }
.ts-dropdown .option { padding: 0.5rem 0.75rem; }
.ts-dropdown .active { background: var(--slate-50) !important; color: var(--slate-900) !important; }
.ts-dropdown .no-results { padding: 0.5rem 0.75rem; color: var(--slate-400); }
.ts-wrapper .clear-button { color: var(--slate-400); }
.ts-wrapper .clear-button:hover { color: var(--slate-900); }