/* ============================================================
   STYL PANELU: „STALOWY” (stonowany)
   Kolorystyka, przyciski, tabele i powierzchnie wzorowane na
   szablonach 360-s (layout-top.css): granat #222D57 + akcent #7d98ff,
   jasnoszare tło, białe powierzchnie, małe „techniczne” promienie.

   Arkusz jest wpięty zawsze jako OSTATNI, ale działa tylko gdy
   <html data-panel-style="steel">. Styl domyślny = brak atrybutu
   albo data-panel-style="default", czyli bez zmian.
   ============================================================ */

html[data-panel-style="steel"] {
    --brand-navy: #222D57;
    --brand-navy-hover: #2f3d75;
    --brand-navy-active: #1a2346;
    --brand-accent: #7d98ff;

    --card-radius: .5rem;
    --btn-radius: .375rem;
    --btn-sm-radius: .3rem;
    --bs-border-radius-lg: .5rem;
    --bs-border-radius-xl: .5rem;
    --bs-border-radius-xxl: .625rem;
}

html[data-panel-style="steel"] .rounded-3 { border-radius: .375rem !important; }
html[data-panel-style="steel"] .rounded-4 { border-radius: .5rem !important; }
html[data-panel-style="steel"] .rounded-5 { border-radius: .625rem !important; }
html[data-panel-style="steel"] .rounded-top-5 { border-top-left-radius: .625rem !important; border-top-right-radius: .625rem !important; }
html[data-panel-style="steel"] .rounded-bottom-5 { border-bottom-left-radius: .625rem !important; border-bottom-right-radius: .625rem !important; }

/* ============================================================
   MOTYW JASNY — tokeny
   ============================================================ */
html[data-panel-style="steel"][data-bs-theme="light"] {
    --bs-body-bg: #ebedf2;
    --bs-body-color: #222;
    --bs-body-tertiary-bg: #ffffff;
    --bs-secondary-bg: #f5f6f8;
    --bs-tertiary-bg: #f5f6f8;
    --bs-border-color: #d5d8dc;
    --bs-border-color-translucent: #d5d8dc;
    --bs-secondary-color: #6b6b6b;
    --bs-heading-color: #222;

    --bs-primary: #222D57;
    --bs-primary-rgb: 34, 45, 87;
    --bs-primary-bg-subtle: #e5eaff;
    --bs-primary-border-subtle: #c3cfff;
    --bs-primary-text-emphasis: #222D57;
    --bs-link-color: #222D57;
    --bs-link-color-rgb: 34, 45, 87;
    --bs-link-hover-color: #7d98ff;
    --bs-link-hover-color-rgb: 125, 152, 255;

    --sidebar-bg: #ffffff;
    --sidebar-border: #d5d8dc;
    --header-bg: #ffffff;
    --surface: #ffffff;
    --surface-raised: #f5f6f8;
    --input-bg: #ffffff;
    --progress-track: #dfe2e8;

    --shadow-sm: 0 1px 2px rgba(34, 45, 87, .04);
    --shadow-md: 0 4px 12px rgba(34, 45, 87, .07);
    --shadow-lg: 0 14px 34px rgba(34, 45, 87, .14);
    --shadow-hover: 0 18px 36px -12px rgba(34, 45, 87, .3);

    --nav-hover-bg: #f5f6f8;
    --nav-active-bg: rgba(125, 152, 255, .15);
    --nav-active-color: #222D57;
    --nav-active-border: #222D57;
}

/* ============================================================
   MOTYW CIEMNY — akcent marki jak w ciemnej wersji wzorca
   ============================================================ */
html[data-panel-style="steel"][data-bs-theme="dark"] {
    --brand-navy: #7d98ff;
    --brand-navy-hover: #93aaff;
    --brand-navy-active: #6a86f0;

    --bs-primary: #7d98ff;
    --bs-primary-rgb: 125, 152, 255;
    --bs-link-color: #93aaff;
    --bs-link-color-rgb: 147, 170, 255;

    --nav-active-bg: rgba(125, 152, 255, .14);
    --nav-active-color: #93aaff;
    --nav-active-border: #7d98ff;
}

/* ============================================================
   POWIERZCHNIE I RAMKI (main.css wymusza je !important)
   ============================================================ */
html[data-panel-style="steel"][data-bs-theme="light"] .border-secondary-subtle { border-color: #d5d8dc !important; }
html[data-panel-style="steel"][data-bs-theme="light"] .bg-body { background-color: #ffffff !important; }
html[data-panel-style="steel"][data-bs-theme="light"] body.bg-body,
html[data-panel-style="steel"][data-bs-theme="light"] main.bg-body { background-color: #ebedf2 !important; }
html[data-panel-style="steel"][data-bs-theme="light"] .card { border-color: #d5d8dc; }
html[data-panel-style="steel"][data-bs-theme="light"] .card.border-0 { border: 1px solid #d5d8dc !important; }
html[data-panel-style="steel"] .card { box-shadow: var(--shadow-sm); }
html[data-panel-style="steel"] .card:hover { transform: none; }

/* ============================================================
   SIDEBAR + NAGŁÓWEK
   ============================================================ */
html[data-panel-style="steel"] aside { border-top: 5px solid var(--brand-navy); }
html[data-panel-style="steel"] main > header {
    border-top: 5px solid var(--brand-navy);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html[data-panel-style="steel"][data-bs-theme="dark"] main > header { background: #0b1222 !important; }

html[data-panel-style="steel"] .nav-btn {
    border-left: 0;
    border: 1px solid transparent !important;
    color: var(--bs-body-color);
}
html[data-panel-style="steel"] .nav-btn:hover {
    color: var(--brand-accent) !important;
    border-color: var(--brand-accent) !important;
    background-color: var(--surface-raised) !important;
}
html[data-panel-style="steel"] .nav-btn.active,
html[data-panel-style="steel"] .nav-btn.active:hover {
    background-color: var(--brand-navy) !important;
    border-color: var(--brand-navy) !important;
    color: #fff !important;
}
html[data-panel-style="steel"][data-bs-theme="dark"] .nav-btn.active,
html[data-panel-style="steel"][data-bs-theme="dark"] .nav-btn.active:hover { color: #181818 !important; }
html[data-panel-style="steel"] .nav-btn.active .badge { background: rgba(255, 255, 255, .2) !important; color: inherit !important; }

/* Kwadratowe przyciski w nagłówku (motyw, powiadomienia) */
html[data-panel-style="steel"] main > header .btn-light {
    background-color: var(--surface-raised) !important;
    color: var(--brand-navy) !important;
    box-shadow: none;
}
html[data-panel-style="steel"] main > header .btn-light:hover {
    color: var(--brand-accent) !important;
    border-color: var(--brand-accent) !important;
    box-shadow: none;
    transform: none;
}

/* ============================================================
   PRZYCISKI
   ============================================================ */
html[data-panel-style="steel"][data-bs-theme="light"] .btn-primary {
    --bs-btn-bg: #222D57;
    --bs-btn-border-color: #222D57;
    --bs-btn-hover-bg: #2f3d75;
    --bs-btn-hover-border-color: #2f3d75;
    --bs-btn-active-bg: #1a2346;
    --bs-btn-active-border-color: #1a2346;
    --bs-btn-disabled-bg: #222D57;
    --bs-btn-disabled-border-color: #222D57;
    --bs-btn-focus-shadow-rgb: 125, 152, 255;
}
html[data-panel-style="steel"][data-bs-theme="light"] .btn-outline-primary {
    --bs-btn-color: #222D57;
    --bs-btn-border-color: #222D57;
    --bs-btn-hover-bg: #222D57;
    --bs-btn-hover-border-color: #222D57;
    --bs-btn-active-bg: #1a2346;
    --bs-btn-active-border-color: #1a2346;
    --bs-btn-focus-shadow-rgb: 125, 152, 255;
}
html[data-panel-style="steel"][data-bs-theme="dark"] .btn-primary {
    --bs-btn-bg: #7d98ff;
    --bs-btn-border-color: #7d98ff;
    --bs-btn-color: #181818;
    --bs-btn-hover-bg: #93aaff;
    --bs-btn-hover-border-color: #93aaff;
    --bs-btn-hover-color: #181818;
    --bs-btn-active-bg: #6a86f0;
    --bs-btn-active-border-color: #6a86f0;
    --bs-btn-active-color: #181818;
}
html[data-panel-style="steel"][data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #93aaff;
    --bs-btn-border-color: #7d98ff;
    --bs-btn-hover-bg: #7d98ff;
    --bs-btn-hover-border-color: #7d98ff;
    --bs-btn-hover-color: #181818;
    --bs-btn-active-bg: #6a86f0;
    --bs-btn-active-border-color: #6a86f0;
    --bs-btn-active-color: #181818;
}
html[data-panel-style="steel"] .btn { box-shadow: none !important; }
html[data-panel-style="steel"] .btn:hover { transform: none !important; }
html[data-panel-style="steel"][data-bs-theme="light"] .btn-light {
    --bs-btn-bg: #f5f6f8;
    --bs-btn-border-color: #d5d8dc;
    --bs-btn-hover-bg: #ffffff;
    --bs-btn-hover-border-color: #7d98ff;
    --bs-btn-hover-color: #222D57;
}

/* Tła i teksty „primary” (badge, ikony, liczniki) */
html[data-panel-style="steel"][data-bs-theme="light"] .bg-primary,
html[data-panel-style="steel"][data-bs-theme="light"] .text-bg-primary { background-color: #222D57 !important; color: #fff !important; }
html[data-panel-style="steel"][data-bs-theme="light"] .text-primary { color: #222D57 !important; }
html[data-panel-style="steel"][data-bs-theme="dark"] .bg-primary,
html[data-panel-style="steel"][data-bs-theme="dark"] .text-bg-primary { background-color: #7d98ff !important; color: #181818 !important; }
html[data-panel-style="steel"][data-bs-theme="dark"] .text-primary { color: #93aaff !important; }

/* Elementy, które miały zaszyty niebieski #2563eb → granat marki */
html[data-panel-style="steel"] .fleet-filter-btn.fleet-filter-active,
html[data-panel-style="steel"] .group_by_button.btn.btn-secondary,
html[data-panel-style="steel"] .group_by_button.btn.btn-secondary:hover,
html[data-panel-style="steel"] .group_by_button.btn.btn-secondary:focus,
html[data-panel-style="steel"] .group_by_button.btn.btn-secondary:active,
html[data-panel-style="steel"] .period_button.btn.btn-secondary,
html[data-panel-style="steel"] .period_button.btn.btn-secondary:hover,
html[data-panel-style="steel"] .period_button.btn.btn-secondary:focus,
html[data-panel-style="steel"] .period_button.btn.btn-secondary:active {
    background-color: var(--brand-navy) !important;
    border-color: var(--brand-navy) !important;
    color: #fff !important;
    box-shadow: none !important;
}
html[data-panel-style="steel"][data-bs-theme="dark"] .group_by_button.btn.btn-secondary,
html[data-panel-style="steel"][data-bs-theme="dark"] .period_button.btn.btn-secondary,
html[data-panel-style="steel"][data-bs-theme="dark"] .fleet-filter-btn.fleet-filter-active { color: #181818 !important; }

html[data-panel-style="steel"] .fs-view-btn.active,
html[data-panel-style="steel"] .repair-tab-btn.active {
    background: var(--brand-navy);
    box-shadow: none;
}
html[data-panel-style="steel"][data-bs-theme="dark"] .fs-view-btn.active,
html[data-panel-style="steel"][data-bs-theme="dark"] .repair-tab-btn.active { color: #181818; }

html[data-panel-style="steel"] .admin-tab-btn.active { color: var(--brand-navy); }
html[data-panel-style="steel"] .admin-tab-btn.active::after { background-color: var(--brand-navy); }
html[data-panel-style="steel"] .dash-util-bar { background: var(--brand-navy); }

/* Karta „Status systemu”, ikony wyboru panelu, logowanie — granat zamiast niebieskiego */
html[data-panel-style="steel"] .dash-status-card { background: linear-gradient(135deg, #222D57 0%, #2f3d75 60%, #3d4f96 100%); }
html[data-panel-style="steel"] .dash-status-card.card { border: 0 !important; box-shadow: 0 10px 30px rgba(34, 45, 87, .3) !important; }
html[data-panel-style="steel"] .chooser-icon { background: linear-gradient(135deg, #222D57 0%, #4a5fb0 100%); }
html[data-panel-style="steel"] .auth-panel { background: linear-gradient(135deg, #222D57 0%, #34437e 100%) !important; }

html[data-panel-style="steel"] .fleet-filter-bar.card { border-left: 5px solid var(--brand-navy) !important; }

/* ============================================================
   FORMULARZE
   ============================================================ */
html[data-panel-style="steel"] .form-control:focus,
html[data-panel-style="steel"] .form-select:focus {
    border-color: var(--brand-accent) !important;
    box-shadow: 0 0 0 .2rem rgba(125, 152, 255, .25) !important;
}
html[data-panel-style="steel"] .form-check-input:checked {
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
}
html[data-panel-style="steel"] .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(125, 152, 255, .25); }
html[data-panel-style="steel"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--brand-navy);
}

/* ============================================================
   TABELE — nagłówek na szarym pasku, wyraźne linie, hover akcentem
   ============================================================ */
html[data-panel-style="steel"] .orders-table thead th,
html[data-panel-style="steel"] .table > thead.text-uppercase > tr > th {
    background: var(--surface-raised) !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
    color: var(--bs-secondary-color);
    font-size: 11px;
    letter-spacing: .4px;
}
html[data-panel-style="steel"] .orders-table tbody td { border-bottom-color: var(--bs-border-color) !important; }
html[data-panel-style="steel"][data-bs-theme="light"] .orders-table tbody tr:hover td,
html[data-panel-style="steel"][data-bs-theme="light"] .table-hover > tbody > tr:hover > * {
    background: rgba(125, 152, 255, .08) !important;
}
html[data-panel-style="steel"][data-bs-theme="dark"] .orders-table tbody tr:hover td,
html[data-panel-style="steel"][data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
    background: rgba(125, 152, 255, .07) !important;
}
html[data-panel-style="steel"][data-bs-theme="light"] .orders-table tbody.repair_container:hover td { background: rgba(125, 152, 255, .08) !important; }
html[data-panel-style="steel"][data-bs-theme="dark"] .orders-table tbody.repair_container:hover td { background: rgba(125, 152, 255, .07) !important; }
html[data-panel-style="steel"][data-bs-theme="light"] .table { --bs-table-border-color: #d5d8dc; }

/* ============================================================
   PAGINACJA, MODALE, DROPDOWNY
   ============================================================ */
html[data-panel-style="steel"] .pagination {
    --bs-pagination-active-bg: var(--brand-navy);
    --bs-pagination-active-border-color: var(--brand-navy);
    --bs-pagination-color: var(--brand-navy);
    --bs-pagination-hover-color: var(--brand-accent);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(125, 152, 255, .25);
}
html[data-panel-style="steel"][data-bs-theme="dark"] .pagination { --bs-pagination-active-color: #181818; }
html[data-panel-style="steel"] .modal-content { box-shadow: var(--shadow-lg) !important; }
html[data-panel-style="steel"] .dropdown-item.active,
html[data-panel-style="steel"] .dropdown-item:active { background-color: var(--brand-navy); }
html[data-panel-style="steel"] .progress-bar.bg-primary { background-color: var(--brand-navy) !important; }

/* ============================================================
   WYBÓR STYLU (edycja profilu / ustawienia) — karty z podglądem
   ============================================================ */
.panel-style-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; }
.panel-style-option { position: relative; display: block; cursor: pointer; margin: 0; }
.panel-style-option input { position: absolute; opacity: 0; pointer-events: none; }
.panel-style-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    height: 100%;
    padding: .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--surface, var(--bs-body-bg));
    transition: border-color .15s ease, box-shadow .15s ease;
}
.panel-style-option:hover .panel-style-card { border-color: var(--bs-secondary-color); }
.panel-style-option input:checked + .panel-style-card {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), .25);
}
.panel-style-option input:focus-visible + .panel-style-card { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.panel-style-preview { display: flex; height: 54px; border-radius: .375rem; overflow: hidden; border: 1px solid var(--bs-border-color); }
.panel-style-preview > span { display: block; }
.panel-style-preview .psp-side { width: 30%; }
.panel-style-preview .psp-main { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 7px; }
.panel-style-preview .psp-bar { height: 7px; border-radius: 3px; }
.panel-style-preview .psp-btn { width: 40%; height: 11px; margin-top: auto; }
.panel-style-preview--default .psp-side { background: #ffffff; border-right: 1px solid #e2e8f0; }
.panel-style-preview--default .psp-main { background: #f1f5f9; }
.panel-style-preview--default .psp-bar { background: #cbd5e1; }
.panel-style-preview--default .psp-btn { background: #2563eb; border-radius: 6px; }
.panel-style-preview--steel .psp-side { background: #ffffff; border-top: 4px solid #222D57; border-right: 1px solid #d5d8dc; }
.panel-style-preview--steel .psp-main { background: #ebedf2; }
.panel-style-preview--steel .psp-bar { background: #c4c9d2; }
.panel-style-preview--steel .psp-btn { background: #222D57; border-radius: 2px; }
.panel-style-name { font-size: .85rem; font-weight: 600; color: var(--bs-body-color); line-height: 1.2; }
.panel-style-desc { font-size: .72rem; color: var(--bs-secondary-color); line-height: 1.3; }