/* Mobilne widoki tabel i wykresów prognozy */

/* === Tryb poziomy mobilny (klasa JS, nie tylko szerokość ekranu) === */
#weather-chart-modal.forecast-landscape-mode,
#weather-table-modal.forecast-landscape-mode {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    z-index: 1000000 !important;
    pointer-events: auto !important;
}

#weather-chart-modal.forecast-landscape-mode #chart-modal-overlay {
    position: relative !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
}

#weather-chart-modal.forecast-landscape-mode .chart-modal-content,
#weather-table-modal.forecast-landscape-mode .table-modal-content {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    resize: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transform: none !important;
}

/* Stopka ukryta – więcej miejsca na dane (copyright na dole po przewinięciu w trybie pionowym użytkownika) */
#weather-chart-modal.forecast-landscape-mode .chart-modal-content > .bg-gray-100,
#weather-table-modal.forecast-landscape-mode .table-modal-content > .bg-gray-100 {
    display: none !important;
}

/* --- WYKRES: nagłówek jedna linia --- */
#weather-chart-modal.forecast-landscape-mode .chart-modal-header {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    padding: 2px 4px !important;
    cursor: default !important;
}

#weather-chart-modal.forecast-landscape-mode .chart-modal-header > .flex.items-center.justify-between {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 3px !important;
    margin: 0 !important;
}

#weather-chart-modal.forecast-landscape-mode .chart-modal-header .hidden.md\:block {
    display: none !important;
}

#weather-chart-modal.forecast-landscape-mode .chart-modal-header .flex-1.text-center {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
    order: 1;
    background: #ffffff !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

#weather-chart-modal.forecast-landscape-mode .chart-modal-header .flex-1.text-center > div {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    color: #1e3a8a !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 28vw !important;
    display: block !important;
}

#weather-chart-modal.forecast-landscape-mode .chart-modal-header > .flex.items-center.justify-between > .flex.items-center.gap-1,
#weather-chart-modal.forecast-landscape-mode .chart-modal-header > .flex.items-center.justify-between > .flex.items-center.gap-2 {
    order: 2;
    flex-shrink: 0 !important;
    gap: 2px !important;
}

#weather-chart-modal.forecast-landscape-mode .chart-modal-header .btn-3d {
    padding: 2px 4px !important;
    font-size: 0 !important;
    min-height: 22px !important;
    min-width: 22px !important;
    line-height: 1 !important;
}

#weather-chart-modal.forecast-landscape-mode .chart-modal-header .btn-3d i {
    font-size: 11px !important;
    margin: 0 !important;
}

#weather-chart-modal.forecast-landscape-mode .chart-modal-header .switch-to-table-btn .fa-table {
    margin: 0 !important;
}

/* Obszar wykresu – maksymalna wysokość */
#weather-chart-modal.forecast-landscape-mode #chart-main-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    order: 2;
}

#weather-chart-modal.forecast-landscape-mode .chart-chart-container {
    position: relative !important;
    width: 100% !important;
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

#weather-chart-modal.forecast-landscape-mode .chart-chart-container:first-child {
    flex-grow: 4 !important;
}

#weather-chart-modal.forecast-landscape-mode .chart-chart-container:last-child {
    flex-grow: 6 !important;
}

#weather-chart-modal.forecast-landscape-mode .chart-y-axis {
    width: 40px !important;
}

#weather-chart-modal.forecast-landscape-mode .chart-y-axis canvas {
    width: 40px !important;
}

#weather-chart-modal.forecast-landscape-mode #chart-scroll-container-top,
#weather-chart-modal.forecast-landscape-mode #chart-scroll-container-bottom {
    left: 40px !important;
    right: 40px !important;
}

/* Legenda na dole – mała, jedna linia */
#weather-chart-modal.forecast-landscape-mode .forecast-chart-legend-bottom,
#weather-chart-modal.forecast-landscape-mode #chart-legend-container.forecast-chart-legend-bottom {
    order: 3 !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 4px !important;
    padding: 1px 3px !important;
    margin: 0 !important;
    max-height: 20px !important;
    font-size: 7px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-top: 1px solid #cbd5e0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#weather-chart-modal.forecast-landscape-mode .forecast-chart-legend-bottom label {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    gap: 2px !important;
    margin: 0 !important;
}

#weather-chart-modal.forecast-landscape-mode .forecast-chart-legend-bottom .font-bold,
#weather-chart-modal.forecast-landscape-mode .forecast-chart-legend-bottom .text-sm,
#weather-chart-modal.forecast-landscape-mode .forecast-chart-legend-bottom .text-base,
#weather-chart-modal.forecast-landscape-mode .forecast-chart-legend-bottom span {
    font-size: 7px !important;
    line-height: 1 !important;
}

#weather-chart-modal.forecast-landscape-mode .forecast-chart-legend-bottom input[type="radio"] {
    width: 8px !important;
    height: 8px !important;
    margin: 0 !important;
}

#weather-chart-modal.forecast-landscape-mode .forecast-chart-legend-bottom label > span:first-of-type {
    width: 10px !important;
    height: 2px !important;
}

/* --- TABELA: nagłówek jedna linia --- */
#weather-table-modal.forecast-landscape-mode .table-modal-header {
    flex: 0 0 auto !important;
    padding: 2px 4px !important;
    cursor: default !important;
}

#weather-table-modal.forecast-landscape-mode .table-modal-header-main,
#weather-table-modal.forecast-landscape-mode .table-modal-header > .flex.items-center.justify-between {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 3px !important;
}

#weather-table-modal.forecast-landscape-mode .table-modal-left-spacer,
#weather-table-modal.forecast-landscape-mode .table-modal-header > .flex.items-center.justify-between > .hidden {
    display: none !important;
}

#weather-table-modal.forecast-landscape-mode .table-modal-title-wrap,
#weather-table-modal.forecast-landscape-mode .table-modal-header .flex-1.text-center {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
    order: 1;
}

#weather-table-modal.forecast-landscape-mode .table-modal-title-wrap > div,
#weather-table-modal.forecast-landscape-mode .table-modal-header .flex-1.text-center > div {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    padding: 0 4px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 30vw !important;
    display: block !important;
}

#weather-table-modal.forecast-landscape-mode .table-modal-actions,
#weather-table-modal.forecast-landscape-mode .table-modal-header .flex.items-center.gap-2.flex-shrink-0 {
    order: 2;
    flex-shrink: 0 !important;
    margin: 0 !important;
    gap: 2px !important;
    width: auto !important;
}

#weather-table-modal.forecast-landscape-mode .table-modal-actions .btn-3d,
#weather-table-modal.forecast-landscape-mode .table-modal-header .flex.items-center.gap-2.flex-shrink-0 .btn-3d {
    padding: 2px 4px !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    font-size: 0 !important;
}

#weather-table-modal.forecast-landscape-mode .table-modal-actions .table-btn-label,
#weather-table-modal.forecast-landscape-mode .table-modal-header .flex.items-center.gap-2.flex-shrink-0 .btn-3d span {
    display: none !important;
}

#weather-table-modal.forecast-landscape-mode .table-modal-actions .btn-3d i,
#weather-table-modal.forecast-landscape-mode .table-modal-header .flex.items-center.gap-2.flex-shrink-0 .btn-3d i {
    margin: 0 !important;
    font-size: 11px !important;
}

#weather-table-modal.forecast-landscape-mode .table-modal-content > .pt-2,
#weather-table-modal.forecast-landscape-mode .table-modal-content > .flex-1 {
    padding: 0 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

#weather-table-modal.forecast-landscape-mode .table-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
}

#weather-table-modal.forecast-landscape-mode #weather-data-table {
    font-size: 9px;
    min-width: max(640px, max-content);
}

#weather-table-modal.forecast-landscape-mode #weather-data-table th,
#weather-table-modal.forecast-landscape-mode #weather-data-table td {
    padding: 2px 3px !important;
}

#weather-table-modal.forecast-landscape-mode .weather-col-description {
    max-width: 68px !important;
    width: 68px !important;
    min-width: 52px !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    line-height: 1.1 !important;
    vertical-align: top !important;
}

#weather-table-modal.forecast-landscape-mode .weather-col-icon,
#weather-table-modal.forecast-landscape-mode .weather-col-icon .weather-icon-cell,
#weather-table-modal.forecast-landscape-mode .weather-col-icon span {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    padding: 1px !important;
}

#weather-table-modal.forecast-landscape-mode .weather-col-icon img {
    width: 18px !important;
    height: 18px !important;
}

/* Pasek narzędzi – w jednej linii z przyciskami */
.forecast-mobile-toolbar {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    order: 3;
    flex-shrink: 0 !important;
}

.forecast-mobile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px !important;
    min-width: 20px !important;
    padding: 1px 3px !important;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 8px !important;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
}

.forecast-mobile-btn.active {
    background: rgba(255, 255, 255, 0.45);
}

.forecast-zoom-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 2px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.15);
}

.forecast-zoom-label {
    min-width: 28px;
    text-align: center;
    font-size: 8px !important;
    font-weight: 700;
    color: #ffffff;
}

body.forecast-landscape-active {
    overflow: hidden !important;
}

/* Wymuszony obrót gdy telefon w pionie – tylko TABELA (wykres psuje proporcje canvas) */
@media (orientation: portrait) {
    #weather-table-modal.forecast-landscape-mode.forecast-force-rotate {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #000 !important;
    }

    #weather-table-modal.forecast-landscape-mode.forecast-force-rotate .table-modal-content {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        width: 100vh !important;
        height: 100vw !important;
        max-width: 100vh !important;
        max-height: 100vw !important;
        transform: translate(-50%, -50%) rotate(90deg) !important;
        transform-origin: center center !important;
    }
}

/* Wykres w pionie – czekamy na obrót telefonu (bez ściskania danych) */
#weather-chart-modal.forecast-chart-portrait-wait #chart-main-container,
#weather-chart-modal.forecast-chart-portrait-wait .forecast-chart-legend-bottom {
    visibility: hidden !important;
}

.forecast-rotate-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000002;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.88);
    color: #ffffff;
    text-align: center;
    padding: 16px;
}

.forecast-rotate-overlay-inner {
    max-width: 280px;
}

.forecast-rotate-overlay-inner i {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.9;
}

.forecast-rotate-overlay-inner p {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
}

.forecast-rotate-overlay-sub {
    font-size: 12px !important;
    font-weight: 400 !important;
    opacity: 0.85;
}

@media (min-width: 1025px) {
    .forecast-mobile-toolbar {
        display: none !important;
    }
}