/* BAZOWY CSS - Pełen ekran */
button, select, textarea { font-family: var(--app-font, 'Inter', sans-serif); }
body { 
    font-family: var(--app-font, 'Inter', sans-serif); 
    background-color: transparent; /* Pozwala prześwitywać tłu z głównej aplikacji */
    margin: 0; 
    padding: 0; /* Całkowite usunięcie marginesów wewnętrznych */
    color: #1e293b; 
    box-sizing: border-box;
    height: 100vh;
    width: 100vw;
    overflow: hidden; /* Zapobiega pojawianiu się podwójnych pasków przewijania */
}

/* 1. KARTA GŁÓWNA - Zmieniamy tło, by białe kafle się na niej odcięły! */
.card { 
    background-color: #f1f5f900; /* Subtelny, chłodny szary */
    padding: 32px; 
    border-radius: 20px; 
    box-shadow: 0 0px px rgba(0,0,0,0.05); 
    width: 100%; 
    max-width: 1450px; 
    box-sizing: border-box;
}

/* GŁÓWNA NAWIGACJA (WĄSKI PASEK) */
.main-nav {
    width: 64px;
    background: #ffffff; 
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 0;
    gap: 15px;
    height: 100%;
    box-shadow: 4px 0 10px rgba(0,0,0,0.05);
}

/* PRZYCISKI W NAWIGACJI */
.nav-item {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
}

.nav-item svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.nav-item:hover {
    background: #334155;
    color: #f8fafc;
}

.nav-item.active {
    background: #3b82f6; /* Kolor akcentu (niebieski) */
    color: #ffffff;
}

/* 2. GŁÓWNY KONTENER UKŁADU */
.main-layout {
    display: flex;
    align-items: stretch; 
    gap: 15px; 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0;
    box-sizing: border-box;
    background-color: transparent; 
}

/* 3. WĄSKA NAWIGACJA Z LEWEJ */
.main-nav {
    width: 64px;
    background: #ffffff; 
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
    gap: 16px;
    height: 100%;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

/* 4. PANEL ŚRODKOWY (SIDEBAR) - GLOBALNIE UJEDNOLICONY */
.sidebar {
    flex: 0 0 320px !important; /* Zawsze idealnie 320px we wszystkich zakładkach */
    background: #ffffff; 
    border: 1px solid #e2e8f0;
    border-radius: 12px; 
    padding: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    overflow-y: auto; /* Płynne zawijanie nadmiarowych informacji */
}

.sidebar-header h3 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.75px;
}

.sidebar-divider {
    height: 1px;
    background: linear-gradient(to right, #e2e8f0, transparent);
    margin-bottom: 24px;
}

.sidebar-content {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Stały, duży odstęp między polami formularza */
}

/* 5. PRAWA KOLUMNA ROBOCZA */
#drawingArea { 
    flex: 3; 
    display: flex; 
    flex-direction: column; 
    gap: 16px; /* IDEALNIE równy odstęp w pionie między klockami (Toolbar -> Canvas -> Toolbar) */
    align-items: stretch; /* Równa klocki do lewej i prawej krawędzi */
    width: 100%; 
}

/* 6. PASKI NARZĘDZIOWE (GÓRNY I DOLNY KAFEL) */
.toolbar { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 12px; 
    width: 100%; 
    background: #ffffff; 
    border: 1px solid #e2e8f0; 
    padding: 16px; 
    border-radius: 12px; 
    margin-bottom: 0; /* Marginalizujemy użycie starych marginesów - robotę robi `gap` */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); 
    box-sizing: border-box; 
    align-items: stretch; 
}

/* 7. OBSZAR RYSOWANIA I OPTYMALIZACJI */
#roofCanvas,
#optimizationCanvas,
#calcPreviewCanvas { 
    flex: 1 0 auto; /* Umożliwia wypełnienie, ale blokuje zgniatanie przez Flexbox */
    width: 100%; 
    height: 400px;
    min-height: 350px; 
    background-color: #ffffff; 
    border: 1px solid #e2e8f0; 
    border-radius: 12px; 
    box-sizing: border-box; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); 
    display: block; 
    margin: 0;
    flex-shrink: 0; /* Zatrzymuje obcinanie dolnej krawędzi przy małych rozdzielczościach */
    /* Blokada systemowego zaznaczania podczas przesuwania łapką */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Dodatkowe zabezpieczenie kontenera obróbek, aby na niskiej rozdzielczości nie ucinało mu dolnej ramki */
.calc-main-content {
    flex-shrink: 0 !important;
    min-height: 350px !important;
}

#roofCanvas {
    cursor: crosshair; 
}

/* --- STYLIZACJA RAMEK (FIELDSET I LEGEND) --- */
.tool-group {
    flex: 1; /* KLUCZOWE: zmusza każdą z 3 ramek do proporcjonalnego wypełnienia paska */
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 4px 12px 10px 12px;
    margin: 0;
    background: #ffffff; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    transition: border-color 0.2s;
    min-width: min-content; /* Zapobiega łamaniu się ramki przy zwężaniu ekranu */
}

.tool-group:hover {
    border-color: #94a3b8; /* Delikatne podświetlenie ramki po najechaniu na grupę */
}

.tool-group legend {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 6px;
}

.tool-group-inner {
    display: flex;
    align-items: center;
    justify-content: center; /* KLUCZOWE: estetycznie wyśrodkowuje ikonki wewnątrz rozciągniętych ramek */
    gap: 8px;
    height: 100%; 
}

/* --- NOWY, CZYSTSZY SEPARATOR (PIONOWA KRESKA) --- */
.tool-divider {
    width: 1px; 
    height: 32px; 
    background: #e2e8f0; 
    margin: 0 4px;
    border-radius: 1px;
}

/* --- ZMIENIONY WYGLĄD PRZYCISKÓW --- */
.btn-tool { 
    position: relative; /* Ważne dla absolutnego pozycjonowania tooltipa */
    background: #fff; 
    border: 1px solid #cbd5e1; 
    color: #475569; 
    width: 42px; /* Stała szerokość i wysokość tworząca idealny kwadrat */
    height: 42px;
    border-radius: 8px; 
    cursor: pointer; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
    padding: 0;
}

.btn-tool:hover { background: #e2e8f0; color: #1e293b; }
.btn-tool.active { background: #3b82f6; color: #fff; border-color: #2563eb; }
#btnToggleSnap.active { background: #8b5cf6; border-color: #7c3aed; color: #fff; }
#btnToggleEvenDim.active { background: #0d9488; border-color: #0f766e; color: #fff; }
#btnToggleEvenDim svg { transition: none; }

/* Stylizacja ikon SVG wewnątrz przycisków */
.btn-tool svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: inherit;
}

/* --- ERGONOMICZNY SYSTEM TOOLTIPÓW --- */
/* Wymuszenie wyciągnięcia aktywnego elementu nad wszystkie panele boczne */
[data-tooltip]::after,
[data-tooltip]::before {
    display: none !important;
    content: none !important;
}

/* Dymki obsługiwane przez globalTooltip JS */

/* --- PANEL INFORMACYJNY (DOLNY KAFEL) --- */
.info-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
}

.info-header {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 10px;
}

.info-header h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-icon {
    width: 16px;
    height: 16px;
    stroke: #3b82f6; /* Niebieski akcent nawiązujący do głównego motywu */
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.info-content {
    font-size: 13px;
    color: #64748b;
    min-height: 24px;
    display: flex;
    align-items: center;
}

/* --- KOLORYSTYKA AKCJI SPECJALNYCH W NARZĘDZIACH --- */
/* Nadajemy przeniesionym przyciskom unikalne kolory po najechaniu, 
   aby nawiązać do dawnych przycisków .btn-danger i .btn-secondary */

#clearBtn:hover {
    background: #fee2e2;
    color: #ef4444;
    border-color: #fca5a5;
}

#btnRotateLeft90:hover {
    background: #ede9fe;
    color: #8b5cf6;
    border-color: #c4b5fd;
}

/* --- SYSTEM WIDOKÓW (SINGLE PAGE APPLICATION) --- */
.views-container {
    flex: 1; 
    display: flex;
    min-width: 0; 
    height: 100%;
}

.app-view {
    display: none; /* Domyślnie ukrywamy wszystkie karty */
    width: 100%;
}

.app-view.active {
    display: flex; /* Zwracamy widokowi układ kaflowy! */
    gap: 16px;
    align-items: stretch;
}

/* --- BLOKADA SELEKCJI TEKSTU DLA TRIADY WIDOKÓW ROBOCZYCH CAD --- */
#viewDrawing, 
#viewOptimization, 
#viewCalculations {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Ochrona pól formularzy - użytkownik musi mieć możliwość edycji i selekcji wpisywanych wartości */
#viewDrawing input, #viewOptimization input, #viewCalculations input,
#viewDrawing select, #viewOptimization select, #viewCalculations select,
#viewDrawing textarea, #viewOptimization textarea, #viewCalculations textarea {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
}

/* --- ZAKTUALIZOWANY KONTENER SUWAKA --- */
.slider-row { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    flex-wrap: nowrap; /* BEZWZGLĘDNY ZAKAZ: Elementy muszą zostać w jednej linii */
}

/* --- NOWA REGUŁA DLA WYŚWIETLACZA STOPNI --- */
#snapSensitivityDisplay {
    white-space: nowrap; /* Tekst nigdy się nie złamie */
    flex-shrink: 0;      /* Zapobiega zgnieceniu tekstu przez kurczący się suwak */
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    min-width: 24px;     /* Zapewnia stałą szerokość, by suwak nie drgał przy zmianie z "5°" na "15°" */
    text-align: right;   /* Estetyczne równanie do prawej krawędzi */
}

/* Opcjonalnie: zabezpieczenie samego suwaka przed zniknięciem */
#snapSensitivity {
    flex-shrink: 1; 
    width: 80px; /* Bazowa, rozsądna szerokość */
}

/* --- TELEMETRIA / DASHBOARD (Wnętrze panelu info) --- */
#telemetryData {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
}

.telemetry-row {
    display: flex;
    justify-content: space-between;
    align-items: center; /* NAPRAWA: Przywrócenie idealnego centrowania w pionie */
    flex-wrap: nowrap;
    gap: 12px; /* NAPRAWA: Równomierny, estetyczny odstęp pomiędzy tekstem a wartością */
    font-size: 13px;
    border-bottom: 1px dashed #e2e8f0;
    padding-top: 4px;
    padding-bottom: 6px;
}

.telemetry-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.telemetry-label {
    color: #64748b;
    font-weight: 500;
    flex: 0 1 auto; /* NAPRAWA: Naturalna szerokość, tekst zawija się bez psucia odstępów */
    white-space: normal;
    word-break: break-word;
}

.telemetry-value {
    color: #1e293b;
    font-weight: 600;
    flex: 0 1 auto;
    text-align: left; /* NAPRAWA: Domyślne wyrównanie do lewej (idealne dla kolumn w Optymalizacji) */
    white-space: normal;
    word-break: break-word;
}

/* NAPRAWA: Wymuszenie wyrównania do prawej TYLKO w poziomych wierszach (Szkicownik) */
.telemetry-row .telemetry-value {
    text-align: right;
}

/* Wyróżnienie kluczowych wartości numerycznych */
.telemetry-value.highlight {
    color: #3b82f6; /* Wiodący niebieski akcent aplikacji */
    font-family: monospace; /* Font o stałej szerokości znaków idealny dla cyfr */
    font-size: 14px;
}

/* --- KONTROLA TŁA (W RAMCE ŚRODOWISKO) --- */
.bg-control-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 0 6px;
}

.opacity-icons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #94a3b8;
    padding: 0 2px; /* Lekkie odsunięcie wewnątrz, aby ikony zrównały się ze środkiem gałki suwaka */
}

.opacity-icons svg {
    width: 12px; /* Mniejszy rozmiar ikon idealnie dopasowany do górnego paska */
    height: 12px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.opacity-icons svg:hover {
    color: #3b82f6; /* Wiodący niebieski akcent */
}

#bgOpacitySlider {
    width: 75px; /* Skondensowana szerokość dla paska narzędziowego */
    margin: 0;
    accent-color: #3b82f6;
    cursor: pointer;
}

/* --- KONTENER DLA TOOLTIPA SUWAKA TŁA --- */
.slider-tooltip-target {
    position: relative; /* Wymagane, aby dymek wiedział, gdzie jest środek elementu */
    display: flex;
    justify-content: center;
    width: 100%;
}

/* --- PASEK NARZĘDZI W PANELU WŁAŚCIWOŚCI --- */
.sidebar-toolbar {
    display: flex;
    justify-content: space-between; /* Automatycznie rozkłada 6 ikon na całej szerokości */
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px dashed #e2e8f0; /* Nawiązanie do linii z panelu telemetrii */
}

.sidebar-btn {
    position: relative; /* Niezbędne dla prawidłowego pozycjonowania dymków data-tooltip */
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    flex-shrink: 0; /* Chroni przyciski przed ściśnięciem */
}

.sidebar-btn svg {
    width: 22px; /* Optymalna, nienarzucająca się wielkość ikony */
    height: 22px;
}

.sidebar-btn:hover {
    color: #3b82f6; /* Kolor wiodący po najechaniu */
    border-color: #94a3b8;
    background: #f8fafc;
}

.sidebar-btn:active {
    transform: scale(0.95); /* Efekt fizycznego "wkliknięcia" przycisku */
}

/* --- TABELA WŁAŚCIWOŚCI W SIDEBARZE --- */
.table-container {
    width: 100%;
    max-height: 450px; /* Zwiększono o 50px */
    overflow-y: auto;
    /* Chirurgiczne cięcie: usunięto ramkę, zaokrąglenia i tło kontenera */
    border: none;
    background: transparent;
    box-sizing: border-box;
}

.properties-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    text-align: left;
}

.properties-table th,
.properties-table td {
    padding: 10px 12px;
    /* Usunięto poziome linie wierszy - zostawiamy czystą przestrzeń */
    border-bottom: none;
}

/* PIONOWE KRESKI ODDZIELAJĄCE KOLUMNY (z wyłączeniem ostatniej kolumny z prawej) */
.properties-table th:not(:last-child),
.properties-table td:not(:last-child) {
    border-right: 1px solid #cbd5e1;
}

/* Przyklejony nagłówek z JEDNĄ, WYRAŹNĄ POZIOMĄ KRESKĄ POD KOLUMNAMI */
.properties-table th {
    background-color: #ffffff; /* Zostawiamy białe tło dla nagłówków, aby przewijane w dół wiersze nie prześwitywały przez litery */
    color: #475569;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 10px;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 2px solid #94a3b8; /* Główna, pozioma kreska odcinająca nagłówki od danych */
}

.properties-table td {
    color: #1e293b;
    font-weight: 500;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Efekt podświetlenia wiersza po najechaniu (pomaga śledzić dane okiem) */
.properties-table tbody tr:not(.empty-state) {
    transition: background-color 0.2s ease;
}

.properties-table tbody tr:not(.empty-state):hover {
    background-color: #f8fafc;
    cursor: pointer;
}

/* Formatowanie pustej tabeli */
.empty-state td {
    text-align: center;
    color: #94a3b8;
    font-style: italic;
    font-weight: 400;
    padding: 24px 10px;
    border-right: none !important; /* Ukrywamy pionowe kreski, gdy nie ma jeszcze wygenerowanych danych */
}

/* --- SYSTEM OKIEN MODALNYCH (POP-UP) --- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: transparent;
    backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-out;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: #ffffff;
    border-radius: 12px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: translateY(20px);
    transition: transform 0.2s ease-out;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0; font-size: 16px; font-weight: 700; color: #1e293b;
}

.modal-close {
    background: none; border: none; font-size: 24px; cursor: pointer; color: #94a3b8; transition: color 0.2s; padding: 0; line-height: 1;
}

.modal-close:hover { color: #ef4444; }

.modal-body {
    padding: 24px; display: flex; flex-direction: column; gap: 16px;
}

.form-group {
    display: flex; flex-direction: column; gap: 6px;
}

.form-group label {
    font-size: 12px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
    padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-family: var(--app-font, 'Inter', sans-serif); font-size: 14px; outline: none; transition: border-color 0.2s;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #3b82f6; }
.form-group input:disabled { background: #f8fafc; color: #94a3b8; cursor: not-allowed; }
.form-group textarea { line-height: 1.5; box-sizing: border-box; }

#offerDescriptionInput {
    font-family: var(--app-font, 'Inter', sans-serif) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
}

/* Zunifikowany Segmented Control w stylu oprogramowania CAD */
.cad-segmented-control {
    display: flex;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
    width: 100%;
    box-sizing: border-box;
}

.cad-seg-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 4px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s ease;
    text-align: center;
}

.cad-seg-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #1e293b;
}

.cad-seg-btn.active {
    background: #ffffff;
    color: #2563eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Customowy interfejs przycisków +/- */
.number-input-group { 
    display: flex; align-items: stretch; height: 38px;
}
.number-input-group button { 
    background: #f1f5f9; border: 1px solid #cbd5e1; width: 40px; cursor: pointer; font-size: 18px; color: #475569; transition: background 0.2s;
}
.number-input-group button:first-child { border-radius: 8px 0 0 8px; border-right: none; }
.number-input-group button:last-child { border-radius: 0 8px 8px 0; border-left: none; }
.number-input-group button:hover { background: #e2e8f0; }
.number-input-group input { 
    border-radius: 0 !important; text-align: center; flex: 1; border-left: 1px solid #cbd5e1; border-right: 1px solid #cbd5e1;
}

/* Stopka modala */
.modal-footer {
    padding: 16px 24px; border-top: 1px solid #e2e8f0; display: flex; justify-content: flex-end; gap: 12px; background: #f8fafc; border-radius: 0 0 12px 12px;
}

.btn-cancel {
    background: transparent; color: #64748b; border: 1px solid #cbd5e1; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.2s;
}
.btn-cancel:hover { background: #e2e8f0; color: #1e293b; }

.btn-primary { 
    background: #3498db; color: white; border: none; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-weight: 600; transition: background 0.2s;
}
.btn-primary:hover { background: #2980b9; } 

.btn-success { 
    background: #44ba5d; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-success:hover { 
    background: #2d9544; transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.25); 
} 

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Wirtualna warstwa dla znaku ° lub % wewnątrz pola input */
.input-with-unit {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-unit input {
    width: 100%;
    padding-right: 30px !important; /* Rezerwuje miejsce na znak jednostki po prawej */
}

.input-unit {
    position: absolute;
    right: 12px;
    color: #64748b;
    font-weight: 600;
    pointer-events: none; /* Sprawia, że kliknięcie "w znak" klika w pole pod spodem */
}

/* --- TABELA WŁAŚCIWOŚCI --- */
/* Odszukaj starą regułę dla .properties-table th, td i podmień border-bottom */
.properties-table th,
.properties-table td {
    padding: 4px 12px;
    border-bottom: 1px solid #e2e8f0; /* Przywrócona pozioma kreska oddzielająca wiersze */
}

/* --- ZAZNACZONY WIERSZ W TABELI WŁAŚCIWOŚCI --- */
.properties-table tbody tr.selected-row {
    background-color: #eff6ff !important; /* Bardzo jasny, chłodny niebieski - nadpisuje szary hover */
}

.properties-table tbody tr.selected-row td {
    color: #1e40af; /* Wzmocniony, ciemnoniebieski kolor czcionki dla czytelności */
}

/* Nieinwazyjny wskaźnik aktywnego wiersza na lewej krawędzi pierwszej komórki */
.properties-table tbody tr.selected-row td:first-child {
    box-shadow: inset 3px 0 0 0 #3b82f6; 
}

/* Hover na wierszach obróbek w tabeli zestawienia — identyczny z ich selected-row */
#calcComponentsTableBody tr:hover {
    cursor: pointer;
}
/* Zapobiega "szaremu" nadpisaniu hover na zaznaczonym wierszu obróbki */
#calcComponentsTableBody tr.selected-row:hover,
#calcComponentsTableBody tr[data-comp].selected-row:hover {
    background-color: inherit !important;
}

/* --- WIZARD KALIBRACJI TŁA --- */
#drawingArea {
    position: none; /* Baza dla pozycjonowania pływającego banera */
}

.calibration-banner {
    position: absolute;
    top: 96px; /* Wymuszone idealne pozycjonowanie na górze płótna, tuż pod paskiem narzędzi */
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: #1e293b;
    color: #f8fafc;
    padding: 14px 28px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Mocniejszy cień nadający warstwie pierwszoplanowy wygląd */
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
}

.calibration-banner.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0); /* Miękki opad banera w dół */
}

.calib-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.calib-icon {
    width: 20px;
    height: 20px;
    stroke: #3b82f6;
    fill: none;
    stroke-width: 2.5;
}

.calib-skip {
    border-color: #475569;
    color: #cbd5e1;
    padding: 6px 12px;
    font-size: 12px;
}
.calib-skip:hover {
    background: #334155;
    color: #ffffff;
}
/* --- WIDOK: WYBÓR POKRYCIA (KATALOG) --- */
.roofing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    align-items: stretch;
    align-content: start;
    padding: 12px 14px 12px 4px;
}

/* Nowoczesna stylizacja paska przewijania (Web Design) */
.roofing-grid::-webkit-scrollbar {
    width: 6px;
}
.roofing-grid::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}
.roofing-grid::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.roofing-grid::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.empty-state-catalog {
    color: #94a3b8;
    font-style: italic;
    font-size: 14px;
    padding: 20px 0;
    grid-column: 1 / -1; /* Rozciąga się na całą szerokość siatki */
}

/* Karta produktu */
.roofing-card {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 10px;
    padding: 20px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.roofing-card:hover {
    background: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e1;
    transform: translateY(-2px);
    cursor: pointer;
}

/* Niebieska etykietka typu produktu */
.roofing-badge {
    align-self: flex-start;
    background: #e0f2fe;
    color: #0284c7;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}/* Parametry wewnątrz karty */
.roofing-specs {
    margin-top: auto; /* WYMUSZA: Zawsze wypycha blok parametrów na sam dół karty bez względu na jej zawartość */
}

.roofing-specs p {
    margin: 6px 0;
    font-size: 13px;
    color: #475569;
    display: flex;
    justify-content: space-between; /* Ładnie wyrównuje wartości do prawej */
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 4px;
}

.roofing-card h4 {
    margin: 0 0 12px 0;
    color: #1e293b;
    font-size: 16px;
    font-weight: 700;
}

/* Parametry wewnątrz karty */
.roofing-specs p {
    margin: 6px 0;
    font-size: 13px;
    color: #475569;
    display: flex;
    justify-content: space-between; /* Ładnie wyrównuje wartości do prawej */
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 4px;
}

.roofing-specs p:last-child {
    border-bottom: none;
}

.roofing-specs span {
    color: #64748b;
    font-weight: 500;
}

/* Ujednolicenie prawej kolumny w widoku pokryć */
#roofingCatalogArea {
    flex: 3;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    height: 100%;
}

/* Opcjonalnie: Jeśli chcesz wymusić konkretną, stałą szerokość paska bocznego (np. 320px) 
   możesz odkomentować poniższe linie w sekcji .sidebar: */
/*
.sidebar {
    flex: 0 0 320px; 
}
*/

/* Przycisk usuwania na karcie produktu */
.delete-min-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 5px;
    transition: color 0.2s;
}

.delete-min-btn:hover {
    color: #ef4444;
}

/* Hover na całą kartę może lekko podświetlać przycisk usuwania */
.roofing-card:hover .delete-min-btn {
    color: #64748b;
}
.roofing-card:hover .delete-min-btn:hover {
    color: #ef4444;
}

/* --- FILTRY BAZY PRODUKTÓW --- */
.filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

/* W panelu orynnowania odstępy daje gap:20px z .sidebar-content — zerujemy podwójny margines filtrów */
#gutterSettingsBody .filter-group {
    margin-bottom: 0;
}

/* Filtry pokrycia + baza produktów: grid wypełnia pełne rzędy, ostatni rząd od lewej */
#optMatFilterGroup,
#roofingFilters {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}
#optMatFilterGroup .filter-btn,
#roofingFilters .filter-btn {
    flex: none !important;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
}

.filter-btn {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-btn:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.filter-btn.active {
    background: #3b82f6;
    border-color: #2563eb;
    color: white;
}

/* Przyciski operacyjne na karcie (Edytuj / Usuń) */
.card-actions {
    display: flex;
    gap: 4px;
}

.edit-min-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 2px;
    transition: color 0.2s;
    display: flex;
    align-items: center;
}

.edit-min-btn:hover { color: #3b82f6; }
.edit-min-btn svg { width: 16px; height: 16px; stroke-width: 2; }

/* Styl dla zaznaczonej karty produktu */
.roofing-card.selected-material {
    border: 2px solid #3b82f6;
    background: #eff6ff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    position: relative;
}

/* Dodanie ikonki "check" dla potwierdzenia wyboru */
.roofing-card.selected-material::before {
    content: '✓';
    position: absolute;
    top: -10px;
    right: -10px;
    background: #3b82f6;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Style dla przełączników ikonowych */
.icon-toggle-group {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.btn-icon-toggle {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon-toggle svg {
    width: 20px;
    height: 20px;
}

.btn-icon-toggle:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.btn-icon-toggle.active {
    background: #3b82f6;
    border-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.icon-toggle-group {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.btn-icon-toggle {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon-toggle svg {
    width: 20px;
    height: 20px;
}

.btn-icon-toggle:hover {
    background: #f1f5f9;
}

.btn-icon-toggle.active {
    background: #3b82f6;
    border-color: #2563eb;
    color: #ffffff;
}

/* =========================================================
   GLOBALNE WYRÓWNANIE PRAWYCH KOLUMN (OBSZARÓW ROBOCZYCH) 
   ========================================================= */
#roofingCatalogArea, 
#optimizationArea, 
#calculationsArea,
#offerArea {
    flex: 1 1 0% !important; 
    width: auto !important; 
    min-width: 0 !important; 
    height: 100%;
    box-sizing: border-box; 
    overflow-y: auto; 
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding-bottom: px !important; /* Dodanie luzu, by cienie i ramki nie stykały się z końcem ekranu */
}

#drawingArea {
    flex: 1 1 0% !important; 
    width: auto !important; 
    min-width: 0 !important; 
    height: 100%;
    box-sizing: border-box; 
    overflow-y: auto !important; /* Włączone przewijanie dla 3 kolumny */
    overflow-x: hidden !important;
    word-wrap: break-word; /* Wymuszenie zawijania tekstu w 3 kolumnie */
    overflow-wrap: break-word;
    padding-bottom: px !important; /* Dodanie luzu, by cienie i ramki nie stykały się z końcem ekranu */
}

/* =========================================================
   ZUNIFIKOWANY SYSTEM WYDRUKÓW (OFERTA + ROZRYS CAD)
   ========================================================= */
@media print {
    /* 1. Reset i odcięcie wycieku marginesów/paddingów z widoku ekranowego monitora */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
    }

    /* DARK MODE — pełny reset do jasnego przy druku */
    body.dark-theme,
    body.dark-theme * {
        background-color: transparent !important;
        color: #000000 !important;
        border-color: #cccccc !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    body.dark-theme html,
    body.dark-theme body {
        background: #ffffff !important;
    }
    body.dark-theme .properties-table th {
        background-color: #f8fafc !important;
        color: #000 !important;
    }
    body.dark-theme .properties-table td {
        background-color: #ffffff !important;
        color: #000 !important;
    }
    body.dark-theme #offerArea,
    body.dark-theme #printableOfferContent,
    body.dark-theme #offerCutListContent div,
    body.dark-theme .print-page {
        background-color: #ffffff !important;
        color: #000 !important;
    }
    body.dark-theme #offerCutListContent div {
        background-color: #f8fafc !important;
        border-color: #e2e8f0 !important;
        color: #000 !important;
    }
    body.dark-theme #offerCutListContent strong {
        color: #2563eb !important;
    }
    body.dark-theme .print-header,
    body.dark-theme .print-footer {
        color: #000 !important;
        border-color: #000 !important;
    }
    body.dark-theme h1,
    body.dark-theme h2,
    body.dark-theme h3 {
        color: #000 !important;
        border-color: #cccccc !important;
    }

    /* 2. Jednolite, uniwersalne i równe marginesy dla każdej strony wydruku A4 */
    @page { 
        size: A4;
        margin: 10mm !important; 
    }

    /* --- 1. TRYB DRUKOWANIA OFERTY --- */
    body.print-mode-offer .main-layout {
        box-shadow: none !important;
        border: none !important;
        outline: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        display: block !important;
    }

    body.print-mode-offer .main-nav,
    body.print-mode-offer .sidebar {
        display: none !important;
    }
    body.print-mode-offer .app-view:not(#viewOffer) {
        display: none !important;
    }
    body.print-mode-offer #viewOffer {
        display: block !important;
    }
    body.print-mode-offer #offerDescriptionGroup.offer-desc-empty {
        display: none !important;
    }
    body.print-mode-offer #offerArea {
        box-shadow: none !important;
        border: none !important;
        outline: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100%;
        overflow: visible;
    }
    body.print-mode-offer .propertbody.print-mode-offer .properties-table th { background-color: #f8fafc !important; color: #000; border-bottom: 2px solid #000; }
    body.print-mode-offer .properties-table td { border-bottom: 1px solid #ccc; color: #000; }
    body.print-mode-offer #offerCutListContent .cut-list-item {
        background-color: transparent !important;
        border: 1px solid #aaaaaa !important;
        color: #000 !important;
    }ies-table th { background-color: #f8fafc !important; color: #000; border-bottom: 2px solid #000; }
    body.print-mode-offer .properties-table td { border-bottom: 1px solid #ccc; color: #000; }

    /* Dark mode — pełny reset przy druku oferty */
    body.dark-theme.print-mode-offer #offerArea,
    body.dark-theme.print-mode-offer #offerArea *,
    body.dark-theme.print-mode-offer #printableOfferContent,
    body.dark-theme.print-mode-offer #printableOfferContent * {
        background-color: #ffffff !important;
        color: #000000 !important;
        border-color: #cccccc !important;
        box-shadow: none !important;
    }
    body.dark-theme.print-mode-offer .properties-table th {
        background-color: #f8fafc !important;
        color: #000 !important;
    }
    body.dark-theme.print-mode-offer #offerCutListContent .cut-list-item {
        background-color: transparent !important;
        border: 1px solid #aaaaaa !important;
        color: #000 !important;
    }
    body.dark-theme.print-mode-offer #offerCutListContent strong {
        color: #2563eb !important;
    }
    body.dark-theme.print-mode-offer h1,
    body.dark-theme.print-mode-offer h2,
    body.dark-theme.print-mode-offer h3 {
        color: #1e293b !important;
        border-color: #e2e8f0 !important;
    }

    /* --- 2. TRYB DRUKOWANIA ROZRYSU OPTYMALIZACJI --- */
    body.print-mode-opt .main-layout {
        display: none !important; /* 🧨 KLUCZ: Całkowicie ukrywa widok aplikacji ekranowej i zakładkę oferty */
    }
    body.print-mode-opt #printableOptimizationContainer {
        display: block !important;
        width: 100%;
    }
    body.print-mode-gutter .main-layout {
        display: none !important;
    }
    @page {
        size: A4;
        margin: 10mm;
    }
    body.print-mode-gutter #printableGutterContainer {
        display: block !important;
        width: 100%;
    }
    body.print-mode-gutter .print-page {
        page-break-inside: avoid !important;
        overflow: hidden !important;
    }
    body.print-mode-gutter .print-page > .print-canvas-wrapper {
        flex: 1 1 auto;
        min-height: 0;
    }
    .print-page {
        page-break-after: always;
        
        box-sizing: border-box;
        height: auto; /* Sztywna wysokość A4 */
        width: 210mm;  /* Sztywna szerokość A4 */
        position: relative;
        overflow: hidden; /* Zapobiega "wyciekaniu" treści na drugą stronę */
        font-family: var(--app-font, 'Inter', sans-serif);
    }
    /* Eliminacja pustej strony na końcu dokumentu PDF */
    .print-page:last-child {
        page-break-after: auto;
    }
    
    .print-header { margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #e2e8f0; }
    /* Usunięto obramowanie wokół płótna (border: none) */
    .print-canvas-wrapper { width: 100%; display: flex; justify-content: center; align-items: center; border: none; background: #fff; }
    .print-footer { margin-top: 15px; font-size: 10pt; color: #64748b; border-top: 1px solid #e2e8f0; padding-top: 10px; }
}

/* Eliminacja pustej strony na końcu dokumentu PDF */
    .print-page:last-child {
        page-break-after: auto;
    }
    /* =========================================================
   FIX: NAPRAWA GENEROWANIA PDF DLA WIELU STRON
   ========================================================= */

/* KLAUZULA @media print - Zmiany zadziałają TYLKO w dokumencie PDF, ekran pozostanie nienaruszony! */
@media print {
    body.print-mode-offer {
        height: auto !important;
        overflow: visible !important;
    }

    body.print-mode-offer .app-container {
        height: auto !important;
        display: block !important;
    }

    body.print-mode-offer .views-container {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
    }

    body.print-mode-offer #viewOffer,
    body.print-mode-offer #offerArea {
        height: auto !important;
        min-height: 100% !important;
        overflow: visible !important;
        position: static !important;
    }

    body.print-mode-offer .nav-sidebar,
    body.print-mode-offer .sidebar {
        display: none !important;
    }

    body.print-mode-offer h3 {
        page-break-after: avoid;
    }

    body.print-mode-offer table {
        page-break-inside: auto;
    }

    body.print-mode-offer tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    body.print-mode-offer #offerCutListContent {
        padding-right: 2px;
        box-sizing: border-box;
        width: 100%;
    }
    body.print-mode-offer #offerCutListContent .cut-list-item {
        background: transparent !important;
        background-color: transparent !important;
        border: 1px solid #aaaaaa !important;
        color: #000000 !important;
        box-sizing: border-box;
    }
    body.print-mode-offer #offerCutListContent strong {
        color: #1d4ed8 !important;
    }
}


/* =========================================================
   DYNAMICZNA WYSOKOŚĆ TABEL W LEWYM PANELU (SIDEBAR)
   ========================================================= */

/* 1. Zmieniamy panel boczny w elastyczną kolumnę i włączamy suwak w przypadku przepełnienia */
.sidebar {
    width: 250px;
    background-color: white;
    border-right: 1px solid #e2e8f0;
    position: relative;
    /* Nadajemy wyższy z-index, aby opisy nie chowały się pod Canvas */
    z-index: 10; 
    /* Włączenie dynamicznego suwaka dla wszystkich paneli bocznych */
    overflow-y: auto; 
    overflow-x: hidden;
    /* Wymuszenie zawijania tekstu do nowej linii, gdy nie mieści się w kolumnie */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.tool-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 15px;
    text-align: left;
    white-space: nowrap; /* Zapobiega łamaniu tekstu do nowej linii */
    position: relative;
    z-index: 11;
}

/* Jeśli opisy są w dodatkowych spanach, upewnijmy się, że nie są ucinane */
.tool-btn span {
    overflow: visible;
    text-overflow: clip; 
}

/* Dodatkowo warto sprawdzić główny kontener aplikacji, by nie ucinał paska */
.app-container {
    display: flex;
    overflow: hidden; /* Kontener główny może być ukryty, ale sidebar w nim musi mieć visible */
}

/* 2. Chronimy formularze, nagłówki i przyciski przed ściśnięciem */
.sidebar > *:not(.table-container):not(.table-wrapper):not(:has(table)) {
    flex-shrink: 0;
}

/* 3. Zmuszamy kontener tabeli do zajęcia całej reszty wolnego miejsca */
.sidebar .table-container,
.sidebar .table-wrapper,
.sidebar div:has(> table) {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important; /* Wymagane przez Flexbox, by suwak zadziałał poprawnie */
    max-height: none !important; /* Reset ewentualnych starych ograniczeń np. 200px */
    margin-top: 10px;
    padding-right: 4px; /* Drobny odstęp na pasek przewijania */
}

/* 4. Opcjonalnie: "Przyklejamy" nagłówki tabeli, aby były zawsze widoczne przy scrollowaniu */
.sidebar table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f8fafc; /* Kolor tła nagłówka - dopasuj do swojego jeśli jest inny */
    box-shadow: 0 2px 4px -2px rgba(0,0,0,0.1); /* Odcięcie nagłówka od przewijanych danych */
}

/* Animacja i stany dla suwaka pionowej linii rozdzielającej */
#settingsHeaderSeparatorEnable:checked + span {
    background-color: #3b82f6;
}
#settingsHeaderSeparatorEnable:checked + span + span {
    transform: translateX(20px);
}

/* Rodzaj guzika filtra w wybór pokrycia */
.filter-btn {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.main-layout {
    display: flex;
    gap: 20px;
    height: 100%; 
    width: 100%;
    max-width: 100%; /* Zdejmuje limit szerokości */
    padding: 15px; /* Delikatny odstęp od samych krawędzi ekranu */
    box-sizing: border-box;
}

/* =========================================================
   OPCJA NUKLEARNA: CAŁKOWITE USUNIĘCIE RAMEK I MARGINESÓW
   ========================================================= */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
}

.card {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.main-layout {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
}

/* --- TRYB CIEMNY DLA MODUŁU OPD --- */
body.dark-theme { 
    background-color: #121212 !important; 
    color: #e0e0e0 !important; 
}

/* Nadpisywanie paneli bocznych i kart w module OPD */
body.dark-theme .panel,
body.dark-theme .sidebar,
body.dark-theme .main-nav,
body.dark-theme #roofingCatalogArea,
body.dark-theme #roofingGrid,
body.dark-theme #offerArea,
body.dark-theme #offerArea,
body.dark-theme #info-panel,
body.dark-theme .toolbar {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
    color: #e0e0e0 !important;
}

/* Pola tekstowe w module OPD */
body.dark-theme input,
body.dark-theme select,
body.dark-theme button.tool-btn {
    background-color: #2d2d2d !important;
    color: #fff !important;
    border-color: #444 !important;
}

/* --- PRZEŁĄCZNIKI FUNKCYJNE I FILTRY (DARK MODE) --- */

/* Grupy narzędzi i ich ramki (np. Zaokrąglenie arkuszy) */
body.dark-theme .tool-group {
    border-color: #444 !important;
    background-color: #1e1e1e !important;
}

body.dark-theme .tool-group legend {
    color: #3498db !important; /* Ładny niebieski dla czytelności legendy */
}

/* Standardowe przyciski funkcyjne, przełączniki i filtry */
body.dark-theme .btn-tool,
body.dark-theme .filter-btn,
body.dark-theme .btn-round-toggle {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
    transition: all 0.2s ease;
}

/* Efekt najechania myszką (Hover) */
body.dark-theme .btn-tool:hover,
body.dark-theme .filter-btn:hover,
body.dark-theme .btn-round-toggle:hover {
    background-color: #3d3d3d !important;
    border-color: #555 !important;
    color: #ffffff !important;
}

/* AKTYWNE przełączniki (np. wybrana opcja zaokrąglenia, wciśnięty filtr) */
body.dark-theme .btn-tool.active,
body.dark-theme .filter-btn.active,
body.dark-theme .btn-round-toggle.active {
    background-color: var(--app-accent, #2980b9) !important;
    color: #ffffff !important;
    border-color: var(--app-accent, #2980b9) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2) !important;
}

/* Równe wymiary reaguje w dark identycznie jak snapping */
body.dark-theme #btnToggleEvenDim.active,
body.dark-theme #btnToggleSnap.active {
    background-color: var(--app-accent, #2980b9) !important;
    border-color: var(--app-accent, #2980b9) !important;
    color: #ffffff !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2) !important;
}
body.dark-theme #btnToggleEvenDim svg { stroke: currentColor !important; }

/* Pola wyboru rozwijanego (Select) oraz wyszukiwarki dla filtrów */
body.dark-theme .styled-select,
body.dark-theme input.filter-search {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border: 1px solid #555 !important;
}

body.dark-theme .styled-select:focus,
body.dark-theme input.filter-search:focus {
    border-color: #3498db !important;
    outline: none !important;
}

/* Opcjonalnie: Jeśli masz graficzne przełączniki typu "Switch" (suwaki) */
body.dark-theme input[type="checkbox"].toggle-switch {
    background-color: #444 !important;
    border-color: #555 !important;
}

body.dark-theme input[type="checkbox"].toggle-switch:checked {
    background-color: #27ae60 !important; /* Zielony kolor aktywnego suwaka w trybie nocnym */
}
/* ================= ŁATKA: OBRÓBKI I PODSUMOWANIE OFERTY (DARK MODE) ================= */

/* 1. Główny kontener kalkulatora obróbek i jego wewnętrzne sekcje z nadpisaniem stylów inline */
body.dark-theme #flashingsCalculator {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
    color: #e0e0e0 !important;
}

body.dark-theme #flashingsCalculator fieldset {
    background-color: #252525 !important;
    border-color: #444 !important;
    color: #ffffff !important;
}

/* Naprawa białego tła inline w obszarze wokół szkicownika */
body.dark-theme #drawingSpace {
    background-color: #1a1a1a !important;
    border-color: #444 !important;
}

/* Naprawa białego tła inline w sekcji podsumowania finansowego obróbek */
body.dark-theme #summarySection {
    background-color: #252525 !important;
    border-color: #444 !important;
    color: #ffffff !important;
}

body.dark-theme #summarySection h3 {
    color: #ffffff !important;
    border-bottom-color: #444 !important;
}

body.dark-theme #rowDoZaplaty {
    border-top-color: #444 !important;
}

body.dark-theme #outSuma {
    color: #ff6b6b !important; /* Czytelny, pastelowy czerwony kolor kwoty do zapłaty w nocy */
}

/* 2. Kompleksowa łatka dla widoku "Podsumowanie i Oferta" oraz tabel ofertowych (np. Zestawienie pokrycia głównego) */
body.dark-theme #viewOffer,
body.dark-theme .offer-container,
body.dark-theme .properties-table,
body.dark-theme #offerMaterialTableBody,
body.dark-theme [id*="Offer"],
body.dark-theme [class*="offer"] {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
}

body.dark-theme .properties-table th,
body.dark-theme [class*="offer"] th {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border-bottom: 2px solid #444 !important;
}

body.dark-theme .properties-table td,
body.dark-theme [class*="offer"] td {
    background-color: #1e1e1e !important;
    border-bottom: 1px solid #333 !important;
    color: #e0e0e0 !important;
}

/* Rozjaśnienie nagłówków tekstowych sekcji w podsumowaniu oferty */
body.dark-theme #viewOffer h2,
body.dark-theme #viewOffer h3,
body.dark-theme .offer-container h2,
body.dark-theme .offer-container h3,
body.dark-theme #viewOffer label {
    color: #ffffff !important;
}

/* Dostosowanie pól wyboru (select) oraz inputów w podsumowaniu oferty */
body.dark-theme #viewOffer select,
body.dark-theme #viewOffer input {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border: 1px solid #555 !important;
}

/* ============================================================
   KOMPLETNY DARK MODE — MODUŁ OPD
   ============================================================ */

/* Główny layout i tło */
body.dark-theme,
body.dark-theme .main-layout,
body.dark-theme .views-container,
body.dark-theme .app-view {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

/* Sidebar */
body.dark-theme .sidebar {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
    color: #e0e0e0 !important;
}
body.dark-theme .sidebar-header h3,
body.dark-theme .sidebar h3 {
    color: #94a3b8 !important;
}
body.dark-theme .sidebar-divider {
    background: #333 !important;
}
body.dark-theme .form-group label {
    color: #94a3b8 !important;
}
body.dark-theme .form-group input,
body.dark-theme .form-group select,
body.dark-theme .form-group textarea {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}
body.dark-theme .form-group input::placeholder,
body.dark-theme .form-group textarea::placeholder {
    color: #64748b !important;
}
body.dark-theme .form-group input:disabled,
body.dark-theme .form-group select:disabled,
body.dark-theme .form-group textarea:disabled {
    background-color: #252525 !important;
    color: #555 !important;
}
body.dark-theme .input-unit {
    color: #94a3b8 !important;
}

/* === TRYB CIEMNY: licznik kopii (− +) === */
body.dark-theme .number-input-group button {
    background: #0f172a !important;
    border-color: #475569 !important;
    color: #cbd5e1 !important;
}
body.dark-theme .number-input-group button:hover {
    background: #1e293b !important;
}
body.dark-theme .number-input-group input {
    background: #0f172a !important;
    color: #e2e8f0 !important;
    border-left-color: #475569 !important;
    border-right-color: #475569 !important;
}

/* === TRYB CIEMNY: nachylenie (Z natury / Wg. kąta / Wg. procent) === */
body.dark-theme .cad-segmented-control {
    background: #0f172a !important;
    border-color: #475569 !important;
}
body.dark-theme .cad-seg-btn {
    color: #94a3b8 !important;
}
body.dark-theme .cad-seg-btn:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
}
body.dark-theme .cad-seg-btn.active {
    background: #1e293b !important;
    color: #60a5fa !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

/* Nawigacja boczna */
body.dark-theme .main-nav {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
}
body.dark-theme .nav-item {
    color: #64748b !important;
}
body.dark-theme .nav-item:hover {
    background-color: #2d2d3d !important;
    color: #e0e0e0 !important;
}
body.dark-theme .nav-item.active {
    background-color: var(--app-accent, #3b82f6) !important;
    color: #ffffff !important;
}

/* Katalog produktów */
body.dark-theme #roofingCatalogArea {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
}
body.dark-theme .catalog-header h2 {
    color: #e0e0e0 !important;
}
body.dark-theme .catalog-header p {
    color: #64748b !important;
}
body.dark-theme #roofingSearchInput {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}
body.dark-theme #roofingSearchInput::placeholder {
    color: #555 !important;
}
body.dark-theme .filter-btn {
    background-color: #2d2d2d !important;
    color: #94a3b8 !important;
    border-color: #444 !important;
}
body.dark-theme .filter-btn.active {
    color: #ffffff !important;
}

/* Karty produktów */
body.dark-theme .roofing-card {
    background-color: #252525 !important;
    border-color: #333 !important;
    color: #e0e0e0 !important;
}
body.dark-theme .roofing-card:hover {
    background-color: #2d2d2d !important;
    border-color: #444 !important;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.4) !important;
}
body.dark-theme .roofing-card h4 {
    color: #f1f5f9 !important;
}
body.dark-theme .roofing-badge {
    background-color: #1e3a5f !important;
    color: #60a5fa !important;
}
body.dark-theme .roofing-specs p {
    color: #94a3b8 !important;
    border-bottom-color: #333 !important;
}
body.dark-theme .roofing-specs span {
    color: #64748b !important;
}
body.dark-theme .empty-state-catalog {
    color: #555 !important;
}

/* Przyciski edycji i usuwania na kartach */
body.dark-theme .edit-min-btn {
    color: #64748b !important;
}
body.dark-theme .edit-min-btn:hover {
    color: #60a5fa !important;
}
body.dark-theme .delete-min-btn {
    color: #555 !important;
}
body.dark-theme .roofing-card:hover .delete-min-btn {
    color: #f87171 !important;
}

/* Panel info (dolny pasek) */
body.dark-theme .info-panel {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
}
body.dark-theme .info-header {
    background-color: transparent !important;
    border-bottom-color: #333 !important;
}
body.dark-theme .info-header h3 {
    color: #e0e0e0 !important;
}
body.dark-theme .info-content {
    color: #e0e0e0 !important;
}
body.dark-theme .telemetry-label {
    color: #64748b !important;
}
body.dark-theme .telemetry-value {
    color: #e0e0e0 !important;
}

/* Toolbar rysowania */
body.dark-theme .toolbar {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
}
body.dark-theme .tool-group {
    background-color: #252525 !important;
    border-color: #444 !important;
}
body.dark-theme .tool-group legend {
    color: #60a5fa !important;
    background-color: #252525 !important;
}
body.dark-theme .tool-divider {
    background-color: #444 !important;
}
body.dark-theme .btn-tool {
    background-color: #2d2d2d !important;
    color: #94a3b8 !important;
    border-color: #444 !important;
}
body.dark-theme .btn-tool:hover {
    background-color: #3d3d3d !important;
    color: #e0e0e0 !important;
}
body.dark-theme .btn-tool svg {
    stroke: currentColor !important;
}
body.dark-theme .btn-icon-toggle {
    background-color: #2d2d2d !important;
    color: #94a3b8 !important;
    border-color: #444 !important;
}
body.dark-theme .btn-icon-toggle:hover {
    background-color: #3d3d3d !important;
    color: #e0e0e0 !important;
}
body.dark-theme .slider-wrapper label {
    color: #64748b !important;
}

/* Tabele properties (połacie, optymalizacja) */
body.dark-theme .properties-table {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
}
body.dark-theme .properties-table thead th {
    background-color: #252525 !important;
    color: #94a3b8 !important;
    border-bottom-color: #444 !important;
}
body.dark-theme .properties-table tbody tr:not(.empty-state) {
    border-bottom-color: #333 !important;
}
body.dark-theme .properties-table tbody tr:not(.empty-state):hover {
    background-color: #2d2d2d !important;
}
body.dark-theme #gutterRunRow:hover,
body.dark-theme #gutterRunRow.selected-row {
    background-color: rgba(124, 58, 237, 0.5) !important;
}
body.dark-theme #gutterRunRow:hover td,
body.dark-theme #gutterRunRow.selected-row td {
    background-color: #4d1d95 !important;
    color: #ffffff !important;
    border-left: 4px solid #7c3aed !important;
    font-weight: bold !important;
}
body.dark-theme #gutterRunRow:hover td:first-child,
body.dark-theme #gutterRunRow.selected-row td:first-child {
    box-shadow: none !important;
}
body.dark-theme .properties-table td {
    color: #e0e0e0 !important;
}
body.dark-theme .empty-state td {
    color: #555 !important;
}
body.dark-theme .table-container {
    border-color: #333 !important;
}

/* Modalne okna */
body.dark-theme .modal-overlay {
    backdrop-filter: blur(3px) !important;
}
body.dark-theme .modal-content {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
    color: #e0e0e0 !important;
}
body.dark-theme .modal-header {
    background-color: #252525 !important;
    border-bottom-color: #333 !important;
}
body.dark-theme .modal-header h3 {
    color: #e0e0e0 !important;
}
body.dark-theme .modal-close {
    color: #64748b !important;
}
body.dark-theme .modal-close:hover {
    color: #e0e0e0 !important;
    background-color: #3d3d3d !important;
}
body.dark-theme .modal-footer {
    background-color: #252525 !important;
    border-top-color: #333 !important;
}
body.dark-theme .modal-body {
    color: #e0e0e0 !important;
}
body.dark-theme .modal-body input,
body.dark-theme .modal-body select,
body.dark-theme .modal-body textarea {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}
body.dark-theme .btn-cancel {
    background-color: #2d2d2d !important;
    color: #94a3b8 !important;
    border-color: #444 !important;
}
body.dark-theme .btn-cancel:hover {
    background-color: #3d3d3d !important;
    color: #e0e0e0 !important;
}

/* Obszar rysowania i optymalizacji */
body.dark-theme #drawingArea,
body.dark-theme #optimizationArea {
    background-color: #121212 !important;
}
body.dark-theme canvas {
    border-color: #333 !important;
}
body.dark-theme #optimizationCanvas {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
}
body.dark-theme .calc-main-content,
body.dark-theme .calc-preview-container {
    background-color: #1e1e1e !important;
    background: #1e1e1e !important;
    border-color: #333 !important;
}

/* Widok ustawień */
body.dark-theme #viewSettings > div,
body.dark-theme #viewSettings section {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
    color: #e0e0e0 !important;
}
body.dark-theme #viewSettings h1 {
    color: #f1f5f9 !important;
}
body.dark-theme #viewSettings h2,
body.dark-theme #viewSettings h3 {
    color: #e0e0e0 !important;
}
body.dark-theme #viewSettings span,
body.dark-theme #viewSettings label {
    color: #94a3b8 !important;
}

/* Skróty klawiszowe kbd w ustawieniach */
body.dark-theme kbd {
    background: #2d2d2d !important;
    border-color: #555 !important;
    color: #e0e0e0 !important;
}

/* Badge "Suma" w tabeli obróbek */
body.dark-theme .badge[style*="background: #dbeafe"],
body.dark-theme span[style*="background: #dbeafe"] {
    background: #1e3a5f !important;
    color: #60a5fa !important;
    border-color: #2d5a8e !important;
}
/* Badge RYNNA — analogicznie do DACH, w kolorystyce fioletowej */
body.dark-theme .badge[style*="background: #ede9fe"],
body.dark-theme span[style*="background: #ede9fe"] {
    background: #3b2a5f !important;
    color: #a78bfa !important;
    border-color: #5b3fa0 !important;
}
body.dark-theme #viewSettings input,
body.dark-theme #viewSettings select,
body.dark-theme #viewSettings textarea {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}
body.dark-theme #logoDropZone {
    background-color: #2d2d2d !important;
    border-color: #444 !important;
    color: #64748b !important;
}
body.dark-theme #headerSettingsBody {
    background-color: transparent !important;
}

/* Widok oferty */
body.dark-theme #viewOffer,
body.dark-theme #offerArea {
    background-color: #00000000 !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
}
body.dark-theme #offerArea h2,
body.dark-theme #offerArea h3,
body.dark-theme #offerArea label {
    color: #e0e0e0 !important;
}
body.dark-theme #offerCutListContainer > div {
    background-color: #252525 !important;
    border-color: #333 !important;
    color: #e0e0e0 !important;
}
body.dark-theme #offerFlashingsTable th {
    background-color: #252525 !important;
    color: #94a3b8 !important;
    border-color: #444 !important;
}
body.dark-theme #offerFlashingsTable td {
    color: #e0e0e0 !important;
    border-color: #333 !important;
}

/* Sidebar toolbar (przyciski dodaj/usuń połać) */
body.dark-theme .sidebar-btn {
    background-color: #2d2d2d !important;
    color: #64748b !important;
    border-color: #444 !important;
}
body.dark-theme .sidebar-btn:hover {
    background-color: #3d3d3d !important;
    color: #e0e0e0 !important;
}

/* Globalny tooltip */
body.dark-theme #globalTooltip {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
    border: 1px solid #334155 !important;
}

/* Suwaki i kontrolki zakresu */
body.dark-theme input[type="range"] {
    accent-color: #3b82f6 !important;
}
body.dark-theme input[type="color"] {
    background-color: #2d2d2d !important;
    border-color: #444 !important;
}

/* Obróbki — zestawienie (inline style override) */
body.dark-theme #calcComponentsSummary > div {
    background: transparent !important;
    border-color: rgba(255,255,255,0.1) !important;
}
body.dark-theme #calcComponentsSummary span {
    color: #e0e0e0 !important;
}
body.dark-theme #calcComponentsSummary span[style*="color: #64748b"],
body.dark-theme #calcComponentsSummary span[style*="color: #1e293b"] {
    color: #94a3b8 !important;
}
/* Kolorowe kwadraty obróbek — zachowaj oryginalny kolor div wewnętrznego */
body.dark-theme #calcComponentsSummary > div > div:first-child {
    filter: brightness(1.3) !important;
    opacity: 1 !important;
}

/* Zestawienie obróbek w sidebar */
body.dark-theme #calcComponentsTableBody tr td {
    color: #e0e0e0 !important;
    background: transparent !important;
}
body.dark-theme #calcComponentsTableBody tr[data-comp] td:first-child {
    color: #e0e0e0 !important;
}

/* Obszar obróbek */
body.dark-theme #viewCalculations .calc-main-content,
body.dark-theme #calculationsArea {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

/* Oferta — nadpisanie inline style na elementach HTML */
body.dark-theme #printableOfferContent,
body.dark-theme #printableOfferContent * {
    color: #e0e0e0 !important;
    border-color: #333 !important;
}
body.dark-theme #offerDescriptionInput {
    border-color: #444 !important;
    background-color: #2d2d2d !important;
}
body.dark-theme #printableOfferContent h1,
body.dark-theme #printableOfferContent h2,
body.dark-theme #printableOfferContent h3 {
    color: #f1f5f9 !important;
    border-bottom-color: #333 !important;
}
body.dark-theme #printableOfferContent table thead tr {
    background-color: #252525 !important;
}
body.dark-theme #printableOfferContent table th {
    background-color: #252525 !important;
    color: #94a3b8 !important;
    border-color: #444 !important;
}
body.dark-theme #printableOfferContent table td {
    color: #e0e0e0 !important;
    border-color: #333 !important;
    background-color: #1e1e1e !important;
}

/* Nagłówek i stopka oferty (generowane dynamicznie przez JS) */
body.dark-theme #offerCustomHeader,
body.dark-theme #offerCustomHeader * {
    color: #e0e0e0 !important;
    border-color: #333 !important;
    background-color: transparent !important;
}

/* Widok oferty — obszar główny */
body.dark-theme #offerArea {
    background-color: #1e1e1e !important;
}
body.dark-theme #offerArea h1,
body.dark-theme #offerArea h2,
body.dark-theme #offerArea h3,
body.dark-theme #offerArea p,
body.dark-theme #offerArea span,
body.dark-theme #offerArea label,
body.dark-theme #offerArea td,
body.dark-theme #offerArea th {
    color: #e0e0e0 !important;
}

/* Specyfikacja arkuszy w ofercie */
/* Specyfikacja długości — optymalizacja i oferta */
body.dark-theme .info-content div[style*="background: #f8fafc"],
body.dark-theme .info-content div[style*="background:#f8fafc"],
body.dark-theme #offerCutListContent div[style*="background: #f8fafc"],
body.dark-theme #offerCutListContent div[style*="background:#f8fafc"] {
    background: #252525 !important;
    border-color: #333 !important;
    color: #e0e0e0 !important;
}
body.dark-theme .info-content div[style*="background: #f8fafc"] strong,
body.dark-theme .info-content div[style*="background:#f8fafc"] strong,
body.dark-theme #offerCutListContent div[style*="background: #f8fafc"] strong,
body.dark-theme #offerCutListContent div[style*="background:#f8fafc"] strong {
    color: #60a5fa !important;
}
body.dark-theme ::-webkit-scrollbar-thumb {
    background: #3d3d3d !important;
}
body.dark-theme ::-webkit-scrollbar-thumb:hover {
    background: #555 !important;
}
/* Specyfikacja długości — wygląd ekranowy */
.cut-list-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
@media print {
    .cut-list-item {
        background: transparent !important;
        background-color: transparent !important;
        border: 1px solid #aaaaaa !important;
    }
    .cut-list-count {
        color: #1d4ed8 !important;
    }
}
.cut-list-count {
    color: #3b82f6;
}
body.dark-theme .cut-list-item {
    background: #252525 !important;
    border-color: #333 !important;
    color: #e0e0e0 !important;
}
body.dark-theme .cut-list-count {
    color: #60a5fa !important;
}
/* === OBSŁUGA RYSIKA / DOTYKU NA SZKICOWNIKU === */
#roofCanvas {
    touch-action: none;          /* blokuje natywny scroll/zoom przeglądarki na płótnie */
    -ms-touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none; /* blokuje menu kontekstowe po przytrzymaniu na iOS */
}
/* === OBSŁUGA GESTÓW DOTYKU NA PŁÓTNACH OPTYMALIZACJI I OBRÓBEK === */
#optimizationCanvas, #calcPreviewCanvas {
    touch-action: none;
    -ms-touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
/* ===== EDYTOR SKRÓTÓW KLAWISZOWYCH ===== */
.shortcut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
}
.shortcut-label { font-size: 13px; color: #1e293b; }
.shortcut-keycap {
    min-width: 48px;
    height: 32px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    color: #1e293b;
    cursor: pointer;
    transition: 0.15s;
}
.shortcut-keycap:hover { border-color: #3b82f6; }
.shortcut-keycap.recording { border-color: #3b82f6; background: #eff6ff; color: #1d4ed8; }

/* Tryb ciemny */
body.dark-theme .shortcut-row {
    background: #1e293b;
    border-color: #334155;
}
body.dark-theme .shortcut-label { color: #e2e8f0; }
body.dark-theme .shortcut-keycap {
    background: #0f172a;
    border-color: #475569;
    color: #e2e8f0;
}
body.dark-theme .shortcut-keycap:hover { border-color: #60a5fa; }
body.dark-theme .shortcut-keycap.recording { background: #1e3a5f; border-color: #60a5fa; color: #bfdbfe; }

/* Drag & drop dymków skrótów */
.shortcut-row { cursor: grab; }
.shortcut-row.dragging { opacity: 0.5; cursor: grabbing; }
.shortcut-row.drop-target { border-color: #3b82f6; box-shadow: inset 0 2px 0 #3b82f6; }
body.dark-theme .shortcut-row.drop-target { border-color: #60a5fa; box-shadow: inset 0 2px 0 #60a5fa; }
/* Klawisz pozostaje normalnie klikalny mimo przeciągalnego wiersza */
.shortcut-keycap { cursor: pointer; }

/* === WIDOCZNY FOCUS DLA NAWIGACJI TAB W ORYNNOWANIU === */
/* Przyciski materiału (plastik/metal) i reset — wyraźna obwódka przy fokusie z klawiatury */
#gutterMaterialFilters .filter-btn:focus,
#gutterToolFilters .filter-btn:focus,
#gutterOptModeFilters .filter-btn:focus,
#gutterResetLength:focus,
#gutterAddGroup:focus,
#gutterSettingsBody .gutter-pipe-remove:focus {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px;
    border-color: #3b82f6 !important;
}

/* Przełącznik włącz/wyłącz — input jest ukryty, więc fokus pokazujemy na jego wizualnym tle */
#gutterEnabledToggle:focus + #gutterToggleBg {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}
/* === TRYB NOCNY: przyciski orynnowania z jasnym tłem inline === */
body.dark-theme #gutterAddGroup {
    background-color: #2d2d2d !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}
body.dark-theme #gutterAddGroup:hover {
    background-color: #3d3d3d !important;
    border-color: #555 !important;
    color: #ffffff !important;
}

body.dark-theme #gutterSettingsBody .gutter-pipe-remove {
    background-color: #2d2d2d !important;
    border-color: #444 !important;
    color: #f87171 !important;
}
body.dark-theme #gutterSettingsBody .gutter-pipe-remove:hover {
    background-color: #3d3d3d !important;
    border-color: #555 !important;
    color: #ef4444 !important;
}

/* === Przyciski: zarządzanie projektem i eksport === */
#btnLoadProjectFile { background: #ffffff !important; color: #2563eb !important; border: 1px solid #93c5fd !important; }
#btnLoadProjectFile:hover { background: #eff6ff !important; }

#btnSaveProjectFile { background: #3b82f6 !important; color: #ffffff !important; border: none !important; }
#btnSaveProjectFile:hover { background: #2563eb !important; }

#btnPrintOptimization,
#btnPrintGutter,
#btnGeneratePDF { background: #ffffff !important; color: #475569 !important; border: 1px solid #cbd5e1 !important; }
#btnPrintOptimization:hover,
#btnPrintGutter:hover,
#btnGeneratePDF:hover { background: #f1f5f9 !important; color: #1e293b !important; }
/* Wyrównanie ikon w przyciskach eksportu do osi tekstu */
#btnPrintOptimization svg,
#btnPrintGutter svg,
#btnGeneratePDF svg { display: block; flex-shrink: 0; }
/* Ikona dachu leży wysoko w viewBox — opuszczamy ją do środka */
#btnPrintOptimization svg { transform: translateY(1px); }
/* Litera "U" orynnowania — bez korekty (już na osi) */
#btnPrintGutter svg { transform: translateY(-1px); }
/* === Tryb nocny: przyciski projektu i eksportu === */
body.dark-theme #btnLoadProjectFile { background: #1e293b !important; color: #93c5fd !important; border-color: #3b5577 !important; }
body.dark-theme #btnLoadProjectFile:hover { background: #28364a !important; }

body.dark-theme #btnSaveProjectFile { background: var(--app-accent, #3b82f6) !important; color: #ffffff !important; border: none !important; }
body.dark-theme #btnSaveProjectFile:hover { background: var(--app-accent, #2563eb) !important; }

body.dark-theme #btnPrintOptimization,
body.dark-theme #btnPrintGutter,
body.dark-theme #btnGeneratePDF { background: #2d2d2d !important; color: #cbd5e1 !important; border-color: #444 !important; }
body.dark-theme #btnPrintOptimization:hover,
body.dark-theme #btnPrintGutter:hover,
body.dark-theme #btnGeneratePDF:hover { background: #3d3d3d !important; color: #f1f5f9 !important; }
.opt-mat-btn {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #1e293b;
}
body.dark-theme .opt-mat-btn {
    background: #1e293b;
    border: 1px solid #334155;
    color: #e2e8f0;
}
.opt-mat-item {
    border: 1px solid #e2e8f0;
    background: #fff;
}
.opt-mat-item.selected {
    border-color: #3b82f6;
    background: #eff6ff;
}
.opt-mat-item-name { color: #1e293b; }
.opt-mat-item-spec { color: #64748b; }
body.dark-theme .opt-mat-item {
    border: 1px solid #334155;
    background: #1e293b;
}
body.dark-theme .opt-mat-item.selected {
    border-color: #3b82f6;
    background: #1e3a5f;
}
body.dark-theme .opt-mat-item-name { color: #e2e8f0; }
body.dark-theme .opt-mat-item-spec { color: #94a3b8; }
.opt-mat-item {
    transition: background 0.15s ease, border-color 0.15s ease;
}
.opt-mat-item:hover {
    border-color: #3b82f6;
    background: #f1f5f9;
}
.opt-mat-item.selected:hover {
    background: #dbeafe;
}
body.dark-theme .opt-mat-item:hover {
    border-color: #3b82f6;
    background: #334155;
}
body.dark-theme .opt-mat-item.selected:hover {
    background: #1e40af;
}
/* Wyszukiwarka kontrahenta w polu "Nazwa oferty" — LIGHT */
#offerContactResults { background: #fff; border: 1px solid #cbd5e1; --och-border: rgba(0,0,0,0.06); box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
#offerContactResults .offer-contact-hit { border-bottom: 1px solid var(--och-border) !important; }
#offerContactResults .offer-contact-hit:last-child { border-bottom: none !important; }
.offer-contact-hit .och-name { color: #2c3e50; }
.offer-contact-hit .och-sub { color: #7f8c8d; }
#offerContactResults .offer-contact-hit:hover { background: #eaf3fb; }
#offerAddContactBtn { background: #fff; border: 1px solid #cbd5e1; box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
#offerAddContactBtn:hover { background: #eaf3fb; }
body.dark-theme #offerAddContactBtn { background: #1e293b; border-color: #334155; box-shadow: 0 8px 20px rgba(0,0,0,0.5); }
body.dark-theme #offerAddContactBtn:hover { background: #2d4260; }
body.dark-theme #offerAddContactBtn .oacb-label { color: #e2e8f0; }

/* DARK */
body.dark-theme #offerContactResults { background: #1e293b; --och-border: rgba(255,255,255,0.07); box-shadow: 0 8px 20px rgba(0,0,0,0.5); }
body.dark-theme .offer-contact-hit .och-name { color: #e2e8f0; }
body.dark-theme .offer-contact-hit .och-sub { color: #94a3b8; }
body.dark-theme #offerContactResults .offer-contact-hit:hover { background: #2d4260; }
/* Logo w nagłówku oferty/rozrysu: EKRAN pokazuje wersję zależną od motywu,
   DRUK zawsze jasną (na białym papierze ciemne logo znika). */
.opd-logo-print { display: none; }
.opd-logo-screen { display: inline-block; }
@media print {
    .opd-logo-screen { display: none !important; }
    .opd-logo-print { display: inline-block !important; }
}
/* Narzędzia zablokowane dla rynny — wyszarzone, kursor "zakaz", tooltip nadal działa */
.btn-tool.tool-locked,
.btn-icon-toggle.tool-locked {
    opacity: 0.35;
    cursor: not-allowed;
}
.btn-tool.tool-locked:hover,
.btn-icon-toggle.tool-locked:hover {
    opacity: 0.45;
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}
/* Pole opisu produktu — tryb ciemny */
body.dark-theme #roofDescInput,
body.dark-theme #editMatDesc {
    background: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}
body.dark-theme #roofDescInput::placeholder,
body.dark-theme #editMatDesc::placeholder {
    color: #777 !important;
}
body.dark-theme .roofing-desc {
    color: #a0a0a0 !important;
    border-top-color: #3a3a3a !important;
}
/* Komunikat o dodaniu produktu — tryb ciemny */
body.dark-theme #roofSaveMsg {
    background: #14532d !important;
    color: #86efac !important;
    border-color: #166534 !important;
}

body.dark-theme #offerAddContactBtn .oacb-label {
    color: #e2e8f0 !important;
}
#offerAddToCrmBtn:hover {
    background-color: #f0fdf4 !important;
}
body.dark-theme #offerAddToCrmBtn {
    background-color: #2d2d2d !important;
    color: #e2e8f0 !important;
    border-color: #16a34a !important;
}
body.dark-theme #offerAddToCrmBtn:hover {
    background-color: #3d3d3d !important;
}