/* Responsive city desk shared by reports, controls, imports and exports. */
#popup-window-back { background: rgba(5,16,17,.66); backdrop-filter: blur(9px); }
#popup-window.popup-frame,
#popup-window.popup-frame:has(#zone-diagnostics:not([hidden])) {
    box-sizing: border-box;
    width: min(960px, calc(100vw - 40px));
    height: min(760px, calc(100dvh - 40px)) !important;
    margin: 0;
    padding: 0 28px;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    grid-template-rows: 100px minmax(0,1fr) 76px;
    gap: 0 24px;
    border: 1px solid #40504b;
    border-radius: 20px;
    background: #142322;
    box-shadow: 0 32px 100px #0008;
    position: relative;
    overflow: hidden;
    color: #edf1e9;
    font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
#popup-window.popup-frame #popup-top-button { display: none !important; }
#popup-window.popup-frame #popup-title {
    grid-column: 1 / -1 !important; grid-row: 1 !important;
    align-self: center;
    padding: 0 46px 0 0; margin: 0;
    color: #f4edda; text-align: left;
    font: 500 28px/1.2 Georgia, serif;
}
#popup-window.popup-frame #popup-title::before {
    content: 'NIGSIM / CITY DESK'; display: block;
    margin-bottom: 9px; color: #91aca0;
    font: 700 9px/1 sans-serif; letter-spacing: 2px;
}
#popup-window.popup-frame > :is(#popup-list,#popup-svg-wrapper,#popup-canvas-wrapper,#popup-text,#popup-file-drop,#popup-file-download,#popup-enter-name,#zone-diagnostics) {
    grid-row: 2 !important;
    min-height: 0; min-width: 0;
    overflow: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: #526b60 transparent;
    box-sizing: border-box;
}
#popup-window.popup-frame #popup-text { padding: 20px !important; font-size: 15px; line-height: 1.7; }
#popup-window.popup-frame #popup-svg-wrapper.has-dialog-data > svg { display: none !important; }
.dialog-data { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,250px),1fr)); gap: 18px; }
.dialog-data:empty { display: none; }
.dialog-data-group { background: #1b302b; border: 1px solid #344b41; border-radius: 12px; padding: 8px 16px; min-width: 0; align-self: start; }
.dialog-data-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid #ffffff0c; flex-wrap: wrap; }
.dialog-data-row:last-child { border-bottom: 0; }
.dialog-data-row[hidden] { display: none; }
.dialog-data-label { flex: 1; color: #b9cbc0; font-size: 13px; margin: 0; }
h3.dialog-data-label { flex-basis: 100%; color: #eed49c; font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; }
.dialog-data-value { color: #f5eedc; font-weight: 650; font-size: 16px; font-variant-numeric: tabular-nums; }
.dialog-value-pair { display: inline-flex; gap: 4px; align-items: baseline; }
.dialog-value-pair small { font-size: 11px; color: #91ac9d; }
.dialog-data-row.is-divider { padding: 0; height: 6px; border-bottom: 1px solid #4f6456; }
.dialog-stepper { display: flex; gap: 8px; align-items: center; background: #10231d; border: 1px solid #4a604e; padding: 3px; border-radius: 8px; }
.dialog-stepper strong { min-width: 26px; text-align: right; }
.dialog-stepper button { width: 30px; height: 30px; border: 0; border-radius: 5px; background: #2e4939; color: #cbe4cc; font-size: 20px; cursor: pointer; }
.dialog-actions { grid-column: 1/-1; grid-row: 3; display: flex; align-items: center; justify-content: flex-end; gap: 10px; border-top: 1px solid #354941; margin-top: 12px; }
.dialog-actions[hidden], .dialog-actions button[hidden], .dialog-dismiss[hidden] { display: none; }
.dialog-primary, .dialog-secondary, #file-download {
    box-sizing: border-box; min-height: 42px; padding: 11px 22px;
    border: 1px solid #e1c584; border-radius: 8px; background: #e7c983;
    color: #192c24; font: 700 13px/1.4 sans-serif; cursor: pointer; text-align: center;
}
.dialog-primary:disabled { opacity: .4; cursor: default; }
.dialog-secondary { background: transparent; border-color: #4a6155; color: #d3e0d6; }
.dialog-dismiss { position: absolute; right: 24px; top: 24px; z-index: 10; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #496055; background: #243c31; color: #dce7d9; font-size: 23px; cursor: pointer; }
#popup-window button:focus-visible, #popup-window a:focus-visible, #popup-window input:focus-visible { outline: 2px solid #eed196; outline-offset: 3px; }
#popup-window.popup-frame :is(.popup-item,.popup-item-selected) {
    box-sizing: border-box; width: 100%; display: block; padding: 16px 18px; margin: 0 0 10px;
    border: 1px solid #385448; border-radius: 10px; background: #1d352b;
    color: #c9dbce; text-align: left; font: 600 14px/1.4 sans-serif; cursor: pointer;
}
#popup-window.popup-frame .popup-item-selected { background: #314832; border-color: #d9bd76; color: #f8e4b2; box-shadow: inset 3px 0 #e2c27c; }
#popup-window.popup-frame .popup-item:hover { border-color: #799680; background: #284332; }
#popup-window.popup-frame #popup-list { padding: 0; }
#popup-window.popup-frame canvas { max-width: 100%; height: auto !important; border-radius: 12px; }
#popup-window.popup-frame #popup-svg { max-width: 100%; height: auto; }
#popup-window[data-layout="graph"] { grid-template-columns: minmax(0,2fr) minmax(180px,1fr); }
#popup-window[data-layout="graph"] #popup-svg { width: 100%; height: auto !important; }
#popup-window[data-layout="graph"] .graph-scale-text { fill: #a9c4b4; font-size: 10px; }
#popup-window[data-layout="graph"] svg line { stroke: #708d7c !important; opacity: .25; }
#popup-window[data-layout="graph"] #popup-list button { border-left: 4px solid var(--series-color, #e1c584); }
.graph-note { color: #a9bdb1; font-size: 12px; margin: 0; }

/* City history: small multiples (js/popup.js set_svg_graph). */
#popup-window[data-layout="graph"] .dialog-data { display: block; }
.graph-board { display: flex; flex-direction: column; gap: 12px; padding: 2px 2px 12px; }
.graph-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.graph-view-toggle { flex: none; padding: 5px 12px; border: 1px solid #40584c; border-radius: 999px; background: transparent; color: #d7e6dc; font: 600 12px/1.2 inherit; cursor: pointer; }
.graph-view-toggle:hover, .graph-view-toggle:focus-visible { border-color: #e1c584; outline: none; }
.graph-grid-panels { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.graph-grid-panels[hidden], .graph-panel[hidden], .graph-table-wrap[hidden] { display: none; }
.graph-panel { margin: 0; padding: 12px 14px 6px; border: 1px solid #2f463d; border-radius: 12px; background: #1a2d29; outline: none; }
.graph-panel:focus-visible { border-color: #e1c584; box-shadow: 0 0 0 2px rgba(225, 197, 132, .25); }
.graph-panel figcaption { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 10px; }
.graph-panel-title { display: inline-flex; align-items: center; gap: 7px; color: #c9dacf; font-size: 12px; font-weight: 600; }
.graph-panel-title i { width: 10px; height: 3px; border-radius: 2px; background: var(--series-color); }
.graph-panel-value { grid-row: 1 / 3; grid-column: 2; align-self: center; color: #f5eedc; font-size: 22px; font-weight: 650; line-height: 1; }
.graph-panel-delta { color: #93ab9e; font-size: 11px; }
.graph-panel-readout { grid-column: 1 / -1; min-height: 16px; color: #e8dcb8; font-size: 11px; font-variant-numeric: tabular-nums; }
.graph-panel svg { display: block; width: 100%; height: auto; overflow: visible; }
.graph-panel .graph-grid { stroke: #ffffff12; stroke-width: 1; }
.graph-panel .graph-baseline { stroke: #ffffff26; stroke-width: 1; }
.graph-panel .graph-tick { stroke: #ffffff26; stroke-width: 1; }
.graph-panel .graph-axis { fill: #849b8f; font-size: 9px; font-variant-numeric: tabular-nums; }
.graph-panel .graph-nodata { fill: #ffffff06; }
.graph-panel .graph-raw { fill: none; stroke: var(--series-color); stroke-width: 1.1; opacity: .38; stroke-linejoin: round; }
.graph-panel .graph-trend { fill: none; stroke: var(--series-color); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.graph-panel .graph-cursor { stroke: #e8dcb8; stroke-width: 1; opacity: .6; }
.graph-panel .graph-dot { fill: var(--series-color); stroke: #1a2d29; stroke-width: 2; }
.graph-panel .graph-hit { fill: transparent; cursor: crosshair; }
.graph-table-wrap { overflow: auto; border: 1px solid #2f463d; border-radius: 12px; }
.graph-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.graph-table caption { padding: 10px 14px; text-align: left; color: #a9bdb1; font-size: 12px; }
.graph-table th, .graph-table td { padding: 7px 12px; border-top: 1px solid #ffffff10; text-align: right; white-space: nowrap; }
.graph-table tr:first-of-type th { color: #93ab9e; font-size: 11px; font-weight: 600; }
.graph-table th[scope="row"] { text-align: left; color: #c9dacf; }
.graph-table td { color: #f0eadb; }
#popup-window.popup-frame #popup-file-drop { margin: 0; border: 2px dashed #638269; border-radius: 14px; background: #1c3429; padding: 24px; }
#popup-window.popup-frame #popup-file-drop div { font: 500 16px/1.5 sans-serif; color: #c4d5c7; }
#popup-window.popup-frame #popup-file-select-button { cursor: pointer; }
#popup-file-download h3 { font: 500 26px/1.2 Georgia,serif; color: #f2dfb7; margin: 4px 0 12px; }
#save-city-meta, .save-help, #save-feedback { color: #afc5b7; font-size: 13px; line-height: 1.6; }
#popup-file-download label { display: block; color: #cbd9cc; font-size: 12px; margin: 24px 0 8px; }
#save-filename { box-sizing: border-box; width: 100%; min-height: 46px; padding: 12px; border: 1px solid #59705c; border-radius: 8px; background: #10261e; color: #f7ecd2; font-size: 14px; }
#file-download { display: block; width: 100%; margin: 18px 0 10px; text-decoration: none; }
#save-feedback { min-height: 22px; color: #a3d6ad; }
@media(max-width:650px) {
    #popup-window.popup-frame, #popup-window.popup-frame:has(#zone-diagnostics:not([hidden])) {
        width: calc(100vw - 16px); height: calc(100dvh - 24px) !important; padding: 0 16px;
        grid-template-columns: minmax(0,1fr); grid-template-rows: 92px minmax(0,1fr) 72px; gap: 0;
    }
    #popup-window.popup-frame #popup-title { font-size: 24px; }
    .dialog-dismiss { top: 20px; right: 16px; }
    #popup-window.popup-frame > :is(#popup-list,#popup-svg-wrapper,#popup-canvas-wrapper,#popup-text,#popup-file-drop,#popup-file-download,#popup-enter-name,#zone-diagnostics) { grid-column: 1 !important; }
    #popup-window.popup-frame[data-layout^="canvas:"] #popup-canvas-wrapper { display: none !important; }
    #popup-window.popup-frame[data-layout="graph"] { grid-template-rows: 92px minmax(0,1fr) 170px 20px; }
    #popup-window.popup-frame[data-layout="graph"] #popup-list { grid-row: 3 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    #popup-window.popup-frame[data-layout="graph"] #popup-list button { margin: 0; padding: 8px; font-size: 12px; }
    .dialog-data-row { gap: 8px; }
    .dialog-data-value { font-size: 14px; }
}