/**
 * responsive-fixes.css
 *
 * Cross-device visibility fixes:
 * - Replace fixed viewport assumptions with dynamic viewport support
 * - Prevent clipping on short/touch devices
 * - Stack critical panels for tablet/mobile readability
 */

:root {
    --app-viewport-height: 100vh;
}

@supports (height: 100dvh) {
    :root {
        --app-viewport-height: 100dvh;
    }
}

/* Use dynamic viewport sizing for fixed-height UI pieces */
#desk {
    min-height: var(--app-viewport-height);
}

#lens-overlay {
    height: var(--app-viewport-height);
}

#action-panel {
    max-height: calc(var(--app-viewport-height) - 200px);
}

/* Prioritize map visibility in the War Room layout */
#foreign-policy-view {
    gap: 10px;
}

#foreign-policy-view #map-area {
    flex: 3 1 0;
    min-width: 0;
    padding: 10px;
}

#foreign-policy-view #action-panel {
    flex: 0.9 1 320px;
}

#map-area .map-controls-bar {
    margin-bottom: 6px;
    padding: 5px 6px;
}

#map-area .world-map-container {
    flex: 1 1 auto;
    min-height: clamp(320px, 54vh, 820px);
    padding: 8px;
}

#map-area .game-map.ghost-map-container {
    padding-bottom: 0 !important;
    min-height: clamp(320px, 52vh, 760px);
}

#map-area .global-control-indicator {
    margin-top: 6px;
    padding: 6px 10px;
}

#map-area .region-summaries {
    margin-top: 6px;
    gap: 6px;
}

/* Constrained viewport safety: allow the app to breathe and scroll */
@media (max-width: 1200px), (max-height: 860px) {
    html,
    body {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    body:not(:has(.title-overlay)):not(:has(.advisor-overlay)) {
        overflow-y: auto;
    }

    html:has(.title-overlay),
    html:has(.advisor-overlay) {
        overflow: hidden;
    }

    #desk {
        height: auto;
        min-height: var(--app-viewport-height);
        padding: 8px;
        gap: 8px;
    }

    #header {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 12px;
    }

    .title-area {
        flex: 1 1 240px;
        min-width: 0;
    }

    .title-area h1 {
        font-size: clamp(18px, 2.6vw, 24px);
        letter-spacing: 1px;
    }

    .protocol-buttons {
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 6px;
    }

    #status-bar {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding: 8px 10px;
    }

    .status-item {
        flex: 1 1 130px;
        min-width: 0;
        padding: 4px 8px;
        border-right: none;
    }

    #main-content {
        min-height: 0;
        overflow: visible;
        gap: 10px;
    }

    .policy-view,
    .policy-view.active,
    #foreign-policy-view,
    #domestic-policy-view,
    #intel-policy-view {
        min-height: 0;
    }

    #action-panel,
    #domestic-dashboard,
    #domestic-action-panel,
    .intel-log-panel {
        min-height: 220px;
    }

    #map-area {
        min-height: 320px;
    }

    #map-area .world-map-container {
        min-height: clamp(280px, 48vh, 620px);
    }

    #map-area .game-map.ghost-map-container {
        padding-bottom: 0 !important;
        min-height: clamp(280px, 46vh, 560px);
    }

    #domestic-action-panel {
        overflow-y: auto;
    }

    #action-panel {
        min-width: 0;
        width: auto;
        flex: 1 1 auto;
        max-height: none;
        overflow-x: hidden;
    }

    #action-panel .country-selector,
    #action-panel .chokepoint-selector,
    #action-panel .agency-selector {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    #action-panel .country-selector label,
    #action-panel .chokepoint-selector label,
    #action-panel .agency-selector label {
        flex: 0 0 100%;
    }

    #action-panel .country-select,
    #action-panel .chokepoint-select,
    #action-panel .agency-select,
    #action-panel .veto-country-select,
    #action-panel .liquidate-country-select,
    #action-panel .containment-region-select,
    #action-panel .deep-battle-region-select,
    #action-panel #unified-target-dropdown {
        width: min(100%, 230px);
        max-width: 100%;
        min-width: 0;
    }

    #action-panel .country-select,
    #action-panel .chokepoint-select,
    #action-panel .agency-select {
        flex: 1 1 230px;
    }

    #action-panel .country-selector .execute-btn,
    #action-panel .chokepoint-selector .execute-btn,
    #action-panel .agency-selector .execute-btn {
        flex: 0 0 auto;
    }

    #footer {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 12px;
        text-align: center;
    }

    /* On shorter viewports, preserve map viewport by trimming secondary summaries */
    #map-area .region-summaries {
        display: none;
    }

    #map-area .region-ticker {
        display: flex;
    }
}

/* Tablet: stack large side-by-side surfaces so critical controls stay visible */
@media (max-width: 1024px) {
    #foreign-policy-view,
    #domestic-policy-view {
        flex-direction: column;
    }

    #map-area,
    #action-panel,
    #domestic-dashboard,
    #domestic-action-panel {
        width: 100%;
        flex: 1 1 auto;
    }

    #map-area {
        min-height: 300px;
    }

    #map-area .world-map-container {
        min-height: clamp(260px, 45vh, 560px);
    }

    #map-area .game-map.ghost-map-container {
        padding-bottom: 0 !important;
        min-height: clamp(260px, 44vh, 520px);
    }

    .view-toggle {
        gap: 2px;
        padding: 6px 0;
    }

    .view-btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        padding: 8px 10px;
    }

    .view-label {
        font-size: 11px;
        letter-spacing: 0.5px;
    }

    #map-area .region-ticker {
        display: flex;
    }
}

/* Phone: compact top controls, maintain readable action surfaces */
@media (max-width: 768px) {
    #desk {
        padding: 6px;
    }

    #header {
        flex-direction: column;
        align-items: stretch;
    }

    .protocol-buttons {
        justify-content: center;
    }

    .protocol-btn {
        min-height: 40px;
        padding: 6px 8px;
    }

    .protocol-btn .btn-text {
        display: none;
    }

    .protocol-btn .btn-icon {
        margin: 0;
    }

    .protocol-menu {
        position: static;
    }

    .protocol-menu-panel {
        left: 0;
        right: auto;
        min-width: 180px;
    }

    #status-bar {
        gap: 6px;
    }

    .status-item {
        flex: 1 1 calc(50% - 6px);
    }

    .status-item .label {
        font-size: 9px;
        letter-spacing: 0.5px;
    }

    .status-item .value {
        font-size: 15px;
    }

    .view-icon {
        display: none;
    }

    .view-btn {
        padding: 8px 6px;
    }

    .view-label {
        font-size: 10px;
    }

    #main-content {
        gap: 8px;
    }

    #map-area,
    #action-panel,
    #domestic-dashboard,
    #domestic-action-panel,
    .intel-log-panel {
        min-height: 180px;
    }

    #map-area {
        min-height: 250px;
        padding: 8px;
    }

    #map-area .world-map-container {
        min-height: 240px;
        padding: 6px;
    }

    #map-area .game-map.ghost-map-container {
        padding-bottom: 0 !important;
        min-height: 240px;
    }

    #map-area .global-control-indicator {
        margin-top: 4px;
        padding: 5px 8px;
    }

    #action-panel .country-select,
    #action-panel .chokepoint-select,
    #action-panel .veto-country-select,
    #action-panel .liquidate-country-select,
    #action-panel .containment-region-select,
    #action-panel .deep-battle-region-select,
    #action-panel #unified-target-dropdown {
        width: 100%;
    }

    .log-modal {
        width: 96%;
        max-height: 88dvh;
    }
}