/* Styles for the export subpage */

.link-plain {
    text-decoration: none;
}

.export-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 16px;
    align-items: start;
}

@media (max-width: 980px) {
    .export-layout {
        grid-template-columns: 1fr;
    }
}

.export-controls {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    box-shadow: var(--shadow);
}

.export-controls h2 {
    margin: 4px 0 12px;
    font-size: 16px;
}

.controls-form label {
    display: block;
    margin-bottom: 10px;
}

.controls-form input[type="text"],
.controls-form input[type="number"],
.controls-form select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--control-bg);
    color: var(--control-text);
}

.controls-form .row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.controls-form .row.wrap {
    flex-wrap: wrap;
}

.controls-form .check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.controls-form .check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.controls-form select {
    width: 100%;
}

.controls-form fieldset {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
}

.controls-form legend {
    padding: 0 4px;
    color: var(--muted);
}

.controls-form .row.wrap {
    gap: 8px 12px;
}

.hint {
    color: var(--muted);
    font-size: 12px;
    margin-top: 8px;
}

.export-preview {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    box-shadow: var(--shadow);
}

/* A4 preview page area */
.preview-page {
    display: grid;
    place-content: start center;
}

.page-inner {
    width: 209mm;  /* slightly under A4 to prevent rounding overflow */
    height: 296mm; /* slightly under A4 to prevent rounding overflow */
    background: #fff;
    color: #111;
    border: none;
    border-radius: 0;
    padding: 12mm 12mm 10mm;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    gap: 6mm;
    justify-items: center;
    overflow: hidden;
    /* center items horizontally */
    /* local light theme */
    --bg: #ffffff;
    --panel: #ffffff;
    --text: #111111;
    --muted: #555555;
    --border: #e0e0e0;
    --map-bg: #ffffff;
    --map-frame: #a80000;
    --label-bg: rgba(255, 255, 255, 0.85);
    --label-text: #111111;
}

/* In preview we always force light theme (white background and dark text) */

.print-title {
    font-size: 16px;
    font-weight: 700;
}

.preview-viewport {
    width: 100%;
    /* height will be set by script, but enforce a square ratio */
    aspect-ratio: 1 / 1;
    background: var(--map-bg);
    border: none;
    border-radius: 0;
    overflow: hidden;
    position: relative;
    box-shadow: none;
}

/* Map in preview fills the square */
.preview-viewport #map {
    width: 100%;
    height: 100%;
    border: none !important;
}

/* In export preview, disable shadows on markers/labels for clean print */
.preview-viewport .station-marker,
.preview-viewport .station-marker::after,
.preview-viewport .station-label,
.preview-viewport canvas {
    box-shadow: none !important;
    filter: none !important;
}

.preview-viewport .station-label {
    text-shadow: none !important;
}

.print-legend {
    border-top: none;
    padding-top: 6mm;
    background: #fff;
    justify-self: center;
    /* center the legend */
}

.print-footer {
    font-size: 10px;
    color: var(--muted);
}

/* Preview should always fit the entire map – we use fit-to-bounds on start. */

/* Primary button for export actions */
.btn-primary {
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
}

.btn-primary:hover {
    background: var(--accent-hover);
}

/* ====== Print-only rules ====== */
@page {
    size: A4 portrait;
    margin: 0;
}

@media print {
    html, body {
        background: #fff !important;
    }

    /* Hide everything except the preview */
    .topbar,
    .export-controls,
    .site-footer {
        display: none !important;
    }

    /* Stretch container and remove constraints */
    .container {
        max-width: none !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .export-layout {
        display: block !important;
    }

    .export-preview {
        padding: 0 !important;
    }

    .preview-page {
        display: block !important;
    }

    .page-inner,
    .page-inner.print-mode {
        width: 209mm !important;
        height: 296mm !important;
        margin: 0 auto !important;
        box-shadow: none !important;
        border: none !important;
        background: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    padding: 9mm 9mm 7mm !important;
    /* slightly smaller inner margins for print */
    gap: 3.5mm !important;
    /* smaller spacing between sections for print */
    grid-template-rows: 12mm 1fr auto 8mm !important;
    /* title, map, legend, footer */
    overflow: hidden !important;
    }

    .preview-viewport {
        margin: 0 auto !important;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }

    /* Map size will be computed by JS before print based on actual legend height */

    /* slightly smaller legend typography for print */
    .print-legend { font-size: 0.95em !important; overflow: visible; }
}

/* Force light theme inside the preview only */
.page-inner.force-light {
    /* Re-declare light theme variables locally so children use light palette */
    --bg: #f7f7f9;
    --panel: #ffffff;
    --text: #111111;
    --muted: #555;
    --border: #e0e0e0;
    --accent: #2e7d32;
    --accent-hover: #276a2a;
    --accent-ring: rgba(46, 125, 50, 0.35);
    --accent-soft-bg: rgba(46, 125, 50, 0.12);
    --accent-soft-hover: rgba(46, 125, 50, 0.18);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.06);
    --map-bg: #ffffff;
    --map-frame: #a80000;
    --label-bg: rgba(255, 255, 255, 0.85);
    --label-text: #111;
    --control-bg: #ffffff;
    --control-text: #111;
}

/* Ensure map backgrounds in preview use light variants regardless of global theme */
.page-inner.force-light #map.satellite-active {
    background-image: url('map_light.webp') !important;
}
.page-inner.force-light #map.political-active::after {
    background-image: url('map_political_light.webp') !important;
}