/* ============================================
   RESPONSIVE CSS - Responsywność dla różnych rozdzielczości
   Breakpoints:
   - xs: < 480px (telefony pionowo)
   - sm: 480-768px (telefony poziomo, małe tablety)
   - md: 768-1024px (tablety)
   - lg: 1024-1440px (laptopy)
   - xl: > 1440px (monitory)
   ============================================ */

/* ============================================
   EXTRA LARGE (1440px+) - Monitory
   ============================================ */
@media (min-width: 1440px) {
    .main-content {
        padding: 40px 60px;
    }

    .detail-modal-content {
        max-width: 1300px;
    }

    .detail-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .comparison-container,
    .status-history-container {
        max-width: 1600px;
        margin: 0 auto;
    }
}

/* ============================================
   LARGE (1024-1440px) - Laptopy
   ============================================ */
@media (max-width: 1440px) {
    .main-content {
        padding: 25px;
    }

    .detail-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

/* ============================================
   MEDIUM (768-1024px) - Tablety
   ============================================ */
@media (max-width: 1024px) {
    .main-content {
        padding: 20px;
    }

    .sidebar {
        width: 180px;
        padding: 15px 10px;
    }

    .sidebar button {
        font-size: 14px;
        padding: 10px 12px;
    }

    .detail-modal-content {
        max-width: 95%;
    }

    .detail-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    /* Comparison - zmniejsz selektory */
    .compare-select {
        min-width: 160px !important;
    }

    /* Status History */
    .status-controls {
        flex-direction: column;
    }

    /* Header */
    .header-right {
        gap: 10px;
    }

    #language-selector {
        gap: 8px;
    }

    #language-selector img {
        width: 24px;
        height: 18px;
    }
}

/* ============================================
   SMALL (480-768px) - Telefony poziomo, małe tablety
   ============================================ */
@media (max-width: 768px) {

    /* Sidebar — tryb drawer (zsuwany z lewej) zamiast skompresowanego 60px paska.
       Wcześniej w przedziale 481–768px sidebar miał 60px szerokości i tekst 10px,
       co czyniło go nieczytelnym, a hamburgera nie było (pojawiał się dopiero <=480px).
       Teraz drawer + hamburger aktywne w całym zakresie <=768px. */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        height: 100dvh; /* F4.29: iOS — pasek przeglądarki nie zasłania dołu menu */
        width: 240px;
        transform: translateX(-100%);
        display: flex;
        flex-direction: column;
        background: var(--sidebar-gradient);
        z-index: var(--z-drawer); /* F4.22 (=1000) */
        transition: transform 0.3s ease;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
        padding: 20px 12px;
        padding-left: max(12px, env(safe-area-inset-left)); /* F4.6: notch w landscape */
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar button {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
        font-size: 16px;
        padding: 12px 18px;
    }

    .sidebar button span,
    .sidebar .sidebar-logo {
        display: flex !important;
    }

    /* Overlay tła pod drawerem */
    #sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: var(--z-overlay); /* F4.22 (=999) */
    }

    #sidebar-overlay.active {
        display: block;
    }

    /* Treść główna zajmuje całą szerokość — sidebar wisi nad nią jako overlay */
    .content {
        margin-left: 0;
        width: 100%;
    }

    /* Header */
    /* F4.30 (2026-07-23): zmienna podąża za realną wysokością headera —
       .content liczy się z var(--header-height), rozjazd 70 vs 56 dawał lukę */
    :root {
        --header-height: 56px;
    }

    .header {
        padding: 0 10px;
        height: var(--header-height);
    }

    .header-logo img {
        height: 36px;
    }

    .header-icon-img {
        width: 24px;
        height: 24px;
    }

    #language-selector img {
        width: 20px;
        height: 15px;
    }

    /* Zaciśnij odstępy w prawej grupie ikon — nadpisz inline `margin-left/right`
       z `index.html`/`index.php`, bo nakładają się na flex `gap` i robi się ciasno */
    #language-selector {
        gap: 6px;
    }

    .header-right {
        gap: 10px;
    }

    #language-selector > span,
    #theme-toggle,
    #docs-btn,
    #admin-gear,
    #logout-btn,
    #user-gear {
        margin-left: 0 !important;
    }

    /* Alerts (admin) — inline `margin-right:20px` jest za duży na mobile */
    #alerts-btn {
        margin-right: 6px !important;
    }

    /* Aktywna flaga: mniejsze powiększenie, żeby nie zachodziła na sąsiada */
    #language-selector img.active-flag {
        transform: scale(1.08);
    }

    /* Theme toggle / docs glyph — zmniejsz znaki emoji */
    #theme-toggle {
        font-size: 18px !important;
    }

    #docs-btn > span,
    #alerts-btn > span:first-child {
        font-size: 20px !important;
    }

    /* Main Content */
    .main-content {
        padding: 15px;
    }

    /* Detail Modal */
    .detail-modal-overlay {
        padding: 10px;
    }

    .detail-modal-content {
        max-width: 100%;
        max-height: 95vh;
        border-radius: var(--radius-sm);
    }

    .detail-modal-header {
        padding: 12px 15px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .detail-modal-header h2 {
        font-size: 14px;
    }

    #detail-icon {
        font-size: 18px !important;
    }

    /* Copy/Print buttons */
    #copy-detail-btn,
    #print-detail-btn {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    .detail-body {
        padding: 12px;
    }

    .detail-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .detail-card {
        padding: 12px;
    }

    .detail-card h3 {
        font-size: 12px;
    }

    .detail-row {
        font-size: 12px;
        padding: 5px 0;
    }

    /* Comparison */
    .comparison-container {
        padding: 10px !important;
    }

    .comparison-controls {
        padding: 15px !important;
    }

    #comparison-selectors {
        flex-direction: column;
    }

    .compare-select {
        width: 100% !important;
        min-width: auto !important;
    }

    #period-panel>div:last-child {
        flex-direction: column;
    }

    .segmented {
        flex-wrap: wrap;
    }

    .segmented button {
        font-size: 11px;
        padding: 6px 10px;
    }

    /* Status History */
    .status-history-container {
        padding: 10px !important;
    }

    .status-controls {
        padding: 12px !important;
    }

    /* Tabele */
    #service-table th,
    #service-table td {
        padding: 8px 10px;
        font-size: 12px;
    }

    /* Charts & Maps responsive height */
    .chart-container,
    .map-container {
        height: 220px !important;
        min-height: 0 !important;
    }

    /* Wyjątek - wykres produkcji może rosnąć */
    .production-chart-container,
    .installation-chart-container {
        height: auto !important;
        min-height: 400px !important;
        max-height: 800px !important;
        overflow-y: auto !important;
    }

    .production-chart-container canvas,
    .installation-chart-container canvas {
        max-height: 100% !important;
    }

    #map {
        height: 100% !important;
    }

    /* Top 10 Compact Stack */
    .top10-col-left,
    .top10-col-right {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .top10-card {
        height: auto !important;
        min-height: 60px;
    }

}

/* ============================================
   TABLET (TB336FU i podobne) — drawer + hamburger
   Aktywne dla:
   • Każde urządzenie 769–1024px szerokości (portrait tablet, wąskie okna)
   • Każde urządzenie czysto-dotykowe (hover: none + pointer: coarse) do 1920px
     — łapie tablet TB336FU niezależnie od DPR (CSS viewport może być 1280×800,
     1536×960 lub 1920×1200 w landscape).
   Mouse-only desktopy i laptopy z hoverem zachowują statyczny sidebar.
   POPRAWKA 2026-05-28 wieczór: pierwotna reguła `max-width: 1366px AND
   max-height: 900px` nie łapała tabletu z viewportem 1536+ px szerokości lub
   1200+ px wysokości w portrait. Rozluźnione do detekcji typu input (hover/pointer).
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px),
       (min-width: 769px) and (max-width: 1920px) and (hover: none) and (pointer: coarse) {

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        height: 100dvh; /* F4.29 */
        width: 260px;
        min-width: 260px;
        transform: translateX(-100%);
        display: flex;
        flex-direction: column;
        background: var(--sidebar-gradient);
        z-index: var(--z-drawer); /* F4.22 (=1000) */
        transition: transform 0.3s ease;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
        padding: 20px 12px;
        padding-left: max(12px, env(safe-area-inset-left)); /* F4.6 */
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar button {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
        font-size: 16px;
        padding: 12px 18px;
    }

    .sidebar button span,
    .sidebar .sidebar-logo {
        display: flex !important;
    }

    #sidebar-overlay,
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: var(--z-overlay); /* F4.22 (=999) */
    }

    #sidebar-overlay.active,
    .sidebar-overlay.active {
        display: block;
    }

    .content {
        margin-left: 0;
        width: 100%;
    }

    /* !important bo dalej w pliku jest bazowa reguła `.hamburger-btn { display: none }`
       (linia ~860), która ma taką samą specyficzność klasy i wygrywa przez source-order.
       Bez !important sidebar by się chował (transform), ale hamburger nie pojawiał się
       — co dawało efekt "menu zniknęło ale nie ma przycisku do otwarcia". */
    .hamburger-btn {
        display: block !important;
    }

    .main-content {
        padding: 18px;
    }

    /* ── Wysokości wykresów / mapy na tablecie ──
       Domyślnie `#monthly-chart { height: 600px }` + map/chart-container często 400–500px.
       Na tablecie landscape 800px wysokości viewportu (header 70 + padding 36 = ~694px na
       dashboard) takie wysokości powodują pionowy scroll. Skalujemy do wartości które
       mieszczą cały dashboard w jednym ekranie tabletu landscape, ale są wystarczająco
       duże w portrait (1280 wys.) żeby wykres był czytelny. */
    #monthly-chart {
        height: 360px !important;
    }

    .chart-container {
        height: 280px !important;
        min-height: 0 !important;
    }

    /* Mapa — niższa niż chart-container; donut+mapa muszą się zmieścić w lewej
       kolumnie dash-left. Iteracja na fizycznym tablecie: 280 → 210 → 180 (z bugiem
       #map height: 600px = mapa wystawała poza kontener) → po naprawie #map height: 100%
       container 180px wyglądał maluteńko → 270 → 380 → 440px. dash-left ~ donut(200)+
       gap(16)+mapa(440) = 656px, dash-right ~640px, w landscape 694px ~40px slack. */
    .map-container {
        height: 440px !important;
        min-height: 0 !important;
    }

    /* KLUCZOWE — bez tego mapa wystaje poza .map-container.
       `dashboard.css` ma `#map { height: 600px }` hardkodowane w base style
       (linia 113), poza media query. Ograniczenie samego .map-container do 180px
       nie pomaga, bo #map w środku ma swoje 600px i overflow:visible. Reszta
       breakpointów (np. <=1024px linia 349) dodaje `#map { height: 100% }` —
       mój blok tabletowy też musi. */
    #map {
        height: 100% !important;
        min-height: 0 !important;
    }

    /* Wykresy w modalach instalacji — mogą rosnąć, ale niżej niż na desktopie */
    .production-chart-container,
    .installation-chart-container {
        height: auto !important;
        min-height: 380px !important;
        max-height: 700px !important;
        overflow-y: auto !important;
    }

    /* Live power card w środkowej kolumnie — daj jej minimum, niech nie ściska zawartości */
    .live-power-card {
        min-height: 360px;
    }

    /* ── Stats-container na widoku INSTALACJI ──
       Widok instalacji wstrzykuje 12–13 kafelków (electrical, thermal, gas, methane,
       CO2e, m³, runtime, uptime, last2months, starts, reactor yield, biomass eff,
       capacity factor + weather). Z domyślnym `minmax(130px, 1fr)` i `min-height: 100px`
       na tablecie 1244px szerokości daje ~8 kolumn × ~140px wysokie = 2 rzędy × ~300px =
       same kafelki zajmują pół ekranu. Tutaj kompaktujemy: mniejszy próg minmax (90px
       zamiast 130), niższe kafelki (70 zamiast 100), mniejsze fonty i paddingi.
       Wszystkie 13 kafelków zmieszczą się w 1 rzędzie (~13×90 = 1170, slack na gap). */
    .stats-container {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
        gap: 8px;
        margin-bottom: 14px;
    }

    .stat-box {
        padding: 8px 6px;
        min-height: 70px;
    }

    .stat-title {
        font-size: 11px;
        margin-bottom: 4px;
        line-height: 1.2;
    }

    .stat-value {
        font-size: 17px;
    }

    .stat-period,
    .stat-click-hint {
        font-size: 9px;
    }

    /* Tytuł dashboardu — mniejszy margines żeby zaoszczędzić piony */
    .dashboard-title {
        margin-bottom: 14px;
    }
}

/* ============================================
   EXTRA SMALL (< 480px) - Telefony pionowo
   ============================================ */
@media (max-width: 480px) {

    /* Drawer + overlay zdefiniowane w bloku <=768px wyżej — tutaj tylko drobne korekty
       wymuszone niższym headerem (50px) na bardzo małych ekranach. */
    .content {
        height: calc(100vh - 50px) !important;
        height: calc(100dvh - 50px) !important;
    }

    /* Header */
    :root {
        --header-height: 50px; /* F4.30 */
    }

    .header {
        padding: 0 8px;
        height: var(--header-height);
        justify-content: space-between;
    }

    .header-logo img {
        height: 28px;
    }

    .header-right {
        gap: 6px;
    }

    .header-icon-img {
        width: 20px;
        height: 20px;
    }

    #language-selector {
        gap: 3px;
    }

    #language-selector img {
        width: 16px;
        height: 12px;
    }

    /* Aktywna flaga — minimalne powiększenie na bardzo małym ekranie */
    #language-selector img.active-flag {
        transform: scale(1.05);
    }

    /* Theme/docs/alerts — mniejsze emoji */
    #theme-toggle {
        font-size: 16px !important;
    }

    #docs-btn > span,
    #alerts-btn > span:first-child {
        font-size: 18px !important;
    }

    /* Hamburger nieco mniejszy, żeby nie zjadał headera */
    .hamburger-btn {
        font-size: 22px;
        padding: 4px 6px;
    }

    /* Main Content */
    .main-content {
        padding: 8px;
        height: 100% !important;
    }

    /* Stats Grid 2col on portrait small phone */
    .stats-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .stat-box {
        padding: 8px !important;
        min-height: 70px !important;
    }

    .stat-value {
        font-size: 16px !important;
    }

    /* Modal */
    .detail-modal-header {
        padding: 8px 10px;
    }

    .detail-modal-content {
        max-height: 90vh;
        /* Zostaw miejsce na paski przeglądarki */
    }

    .detail-modal-header>div:first-child {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    #detail-title {
        font-size: 14px !important;
        margin: 0 !important;
    }

    #detail-subtitle {
        font-size: 10px !important;
        margin: 0 !important;
    }

    .detail-close-btn {
        font-size: 24px;
        padding: 0 5px;
    }

    .detail-card h3 {
        font-size: 11px;
        margin-bottom: 6px;
    }

    .detail-row {
        flex-direction: row !important;
        /* Wróć do row, żeby oszczędzić pion */
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 3px 0;
        font-size: 11px !important;
    }

    .detail-value {
        text-align: right;
    }

    /* Wykresy jeszcze niższe */
    /* Wykresy jeszcze niższe */
    .chart-container,
    .map-container {
        height: 180px !important;
    }

    #comparison-chart {
        height: auto !important;
        min-height: 400px !important;
    }

    /* Wyjątek - wykres produkcji może rosnąć */
    .production-chart-container,
    .installation-chart-container {
        height: auto !important;
        min-height: 400px !important;
        max-height: 800px !important;
        overflow-y: auto !important;
    }

    .production-chart-container canvas,
    .installation-chart-container canvas {
        max-height: 100% !important;
    }

    /* Comparison */
    .comparison-container h2,
    .status-history-container h2 {
        font-size: 16px !important;
    }

    /* Service Table compact — F4.7: min 12px (tabela i tak ma scroll-x) */
    #service-table th,
    #service-table td {
        padding: 4px 6px !important;
        font-size: 12px !important;
    }


    #comp-mode button,
    #comp-scope button {
        font-size: 12px; /* F4.7: było 10px */
        padding: 5px 8px;
    }

    #period-panel h4 {
        font-size: 12px !important;
    }

    #period-panel input[type="month"] {
        width: 100%;
        font-size: 12px;
    }

    #run-comparison-btn {
        width: 100%;
        padding: 10px 16px !important;
    }

    /* Stats boxes */
    .stat-box {
        padding: 10px !important;
    }

    .stat-box>div:first-child {
        font-size: 11px !important;
    }

    .stat-box>div:last-child {
        font-size: 18px !important;
    }

    /* Navigation */
    .gf-nav {
        padding: 4px 8px !important;
        gap: 4px !important;
    }

    .gf-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 14px;
    }

    .gf-range {
        width: 80px !important;
    }

    /* Charts */
    #comparison-chart {
        height: auto !important;
        min-height: 400px !important;
    }
}

/* ============================================
   LANDSCAPE MODE (TELEFONY POZIOMO)
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {

    body {
        padding-bottom: 0 !important;
    }

    /* 1. SIDEBAR - ukryty domyślnie (hamburger), jak w pionie */
    .sidebar {
        position: fixed;
        left: 0;
        transform: translateX(-100%);
        top: 0;
        height: 100vh;
        height: 100dvh; /* F4.29 */
        width: 240px !important;
        display: flex;
        flex-direction: column;
        /* F4.15 (2026-07-23): było hardcodowane #1a1a2e — sidebar robił się
           GRANATOWY po obróceniu telefonu; token = spójny z resztą motywu */
        background: var(--sidebar-gradient);
        z-index: var(--z-drawer); /* F4.22 (=1000) */
        transition: transform 0.3s ease;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
        padding: 10px !important;
        padding-left: max(10px, env(safe-area-inset-left)) !important; /* F4.6: notch */
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar button {
        justify-content: flex-start !important;
        padding-left: 20px !important;
        height: auto !important;
    }

    .sidebar button span {
        display: inline !important;
        /* Pokaż tekst w otwartym menu */
    }

    .sidebar-logo {
        display: flex !important;
    }

    /* Przesuń content na 100% szerokości */
    .content {
        margin-left: 0 !important;
        width: 100%;
        height: calc(100vh - 40px) !important;
        height: calc(100dvh - 40px) !important;
    }

    /* Pokaż hamburgera */
    .hamburger-btn {
        display: block !important;
    }

    /* 2. HEADER - kompaktowy */
    :root {
        --header-height: 40px; /* F4.30 */
    }

    .header {
        height: var(--header-height) !important;
        padding: 0 10px !important;
    }

    .header-logo img {
        height: 25px !important;
        /* Mniejsze logo */
    }

    /* Języki */
    #language-selector img {
        width: 16px !important;
        height: 11px !important;
    }

    .header-icon-img {
        width: 18px !important;
        height: 18px !important;
    }

    /* 3. MAIN CONTENT - paddingi */
    .main-content {
        padding: 5px !important;
        height: 100% !important;
    }

    /* 4. STATYSTYKI (Te niebieskie kafelki) */
    .stats-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr) !important;
        /* Wszystkie w 1 rzędzie */
        gap: 5px !important;
        margin-bottom: 5px !important;
    }

    .stat-box {
        min-height: 0 !important;
        padding: 5px !important;
        height: auto !important;
    }

    .stat-title {
        font-size: 11px !important; /* F4.7: było 9px */
        margin-bottom: 2px !important;
    }

    .stat-value {
        font-size: 14px !important;
    }

    .stat-change {
        font-size: 11px !important; /* F4.7: było 8px */
    }

    /* Mapy i Wykresy */
    .grid-2col {
        grid-template-columns: 1fr 1fr !important;
        /* Obok siebie */
        gap: 5px !important;
    }

    .chart-container,
    .map-container {
        height: 180px !important;
        /* Mniejsze wykresy */
        min-height: 0 !important;
    }

    /* Wyjątki dla wykresów produkcji i porównania */
    .production-chart-container,
    .installation-chart-container,
    #comparison-chart-container,
    #comparison-chart {
        height: auto !important;
        min-height: 400px !important;
    }

    .production-chart-container canvas,
    .installation-chart-container canvas,
    #comparison-chart {
        min-height: 400px !important;
    }

    #map {
        height: 100% !important;
        min-height: 0 !important;
    }
}

/* ============================================
   MOBILE-FIRST ENHANCEMENTS - Dodatkowe style dla telefonów
   ============================================ */

/* Tabele responsywne - poziomy scroll */
@media (max-width: 768px) {
    .table-responsive-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Ukryj mniej ważne kolumny na małych ekranach */
    .hide-on-mobile {
        display: none !important;
    }

    /* Większe obszary dotykowe — TYLKO główne CTA (klasa `.btn`).
       Wcześniej reguła obejmowała też goły `button`, co rozjeżdżało drobne
       inline-buttony w modalach (close ×, kebab itp.) wymuszając min 44×44. */
    .btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Hamburger ma własną wysokość poniżej 44px — daj mu touch-friendly target */
    .hamburger-btn {
        min-height: 40px;
        min-width: 40px;
    }

    /* Lepsze inputy na mobile */
    input,
    select,
    textarea {
        font-size: 16px !important;
        /* Zapobiega zoomowi na iOS */
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {

    /* Urządzenia dotykowe */
    .btn:active,
    button:active {
        transform: scale(0.98);
    }

    /* Większe cele dotykowe */
    .sidebar button {
        min-height: 48px;
    }

    /* Usuń hover effects na touch */
    .admin-tile:hover,
    .tile:hover {
        transform: none !important;
    }
}

/* ============================================
   UTILITIES - Klasy pomocnicze do ukrywania
   ============================================ */
.hide-xs {
    display: none !important;
}

@media (min-width: 480px) {
    .hide-xs {
        display: initial !important;
    }

    .show-xs {
        display: none !important;
    }
}

.hide-sm {
    display: none !important;
}

@media (min-width: 768px) {
    .hide-sm {
        display: initial !important;
    }

    .show-sm {
        display: none !important;
    }
}

.hide-md {
    display: none !important;
}

@media (min-width: 1024px) {
    .hide-md {
        display: initial !important;
    }

    .show-md {
        display: none !important;
    }
}

/* ============================================
   HAMBURGER MENU BUTTON (dla bardzo małych ekranów)
   ============================================ */
.hamburger-btn {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
    color: var(--text-color);
}

/* Hamburger widoczny od 768px (rozszerzone z 480px — patrz drawer wyżej) */
@media (max-width: 768px) {
    .hamburger-btn {
        display: block;
    }
}

/* Overlay dla menu mobilnego */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-overlay); /* F4.22 (=999) */
}

.sidebar-overlay.active {
    display: block;
}

/* ============================================
   LANDSCAPE ORIENTATION (telefony poziomo) — uzupełnienia
   Główny blok landscape jest wyżej (drawer 240px). Tutaj tylko nadpisania
   modala/grida specyficzne dla niskiej wysokości — sidebar 50px / button 9px
   były martwe (nie mogły wygrać z !important w głównym bloku) i zostały usunięte.
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .main-content {
        padding: 10px;
    }

    .detail-modal-content {
        max-height: 98vh;
    }

    .detail-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {

    .sidebar,
    .header,
    .hamburger-btn,
    #copy-detail-btn,
    #print-detail-btn,
    .detail-close-btn {
        display: none !important;
    }

    .main-content {
        padding: 0;
        overflow: visible;
    }

    .detail-modal-overlay {
        position: static;
        background: none;
        padding: 0;
    }

    .detail-modal-content {
        max-width: 100%;
        max-height: none;
        box-shadow: none;
        border: none;
    }

    .detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* ============================================
   F4.3 (2026-07-23) — TOUCH TARGETS >=44px na urzadzeniach dotykowych.
   Grafika/emoji zostaja male; rosnie wylacznie klikalna powierzchnia
   (padding/min-wymiary), wiec wyglad na desktopie (pointer:fine) bez zmian.
   ============================================ */
@media (pointer: coarse) {

    /* Flagi jezyka: span-rodzic dostaje padding -> hitbox ~44px
       (dziala tez przy pomniejszonych flagach 20x15/16x12 z breakpointow) */
    #language-selector > span {
        padding: 12px 6px;
        display: inline-flex;
        align-items: center;
    }

    /* Ikony headera (alarmy, benchmark, TV, motyw, dokumenty, kolo zebate,
       wylogowanie): min 44x44. Uwaga: JS pokazuje czesc z nich przez inline
       display, dlatego bez wymuszania display tutaj — min-wymiary wystarcza. */
    #alerts-btn,
    #benchmark-btn,
    #tv-rotation-btn,
    #theme-toggle,
    #docs-btn,
    #admin-gear,
    #logout-btn {
        min-width: 44px;
        min-height: 44px;
        text-align: center;
        vertical-align: middle;
    }

    /* Strzalki nawigacji Top10/Sammenligning: hitbox 40x40
       (nadpisuje 24px z breakpointu 480px — stad !important) */
    .gf-btn {
        width: 40px !important;
        height: 40px !important;
    }

    /* Zamkniecie popupow (instalacja 32px, alarmy/benchmark ✖ 32px) —
       wieksze pole dotyku; !important nadpisuje inline width/height */
    #close-popup,
    .popup-close-btn {
        width: 44px !important;
        height: 44px !important;
    }

    /* Hamburger: pewny hitbox */
    .hamburger-btn {
        min-width: 44px;
        min-height: 44px;
    }
}