/* web-v2/css/layout.css Two desktop layouts controlled by class on . .layout-sidebar — map 65% + alert feed 35% (default) .layout-command — feed 20% + map 50% + stats 30% Both hidden on mobile (<= 768px) — mobile.css takes over. */ .app-shell { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } /* ── Shared: main content area below header ── */ .app-main { flex: 1; min-height: 0; display: flex; overflow: hidden; } /* ── Layout A: Map + Sidebar ── */ body.layout-sidebar .app-main { display: grid; grid-template-columns: 1fr 320px; grid-template-rows: 1fr; grid-template-areas: "map feed"; } body.layout-sidebar .map-container { grid-area: map; } body.layout-sidebar .feed-panel { grid-area: feed; } body.layout-sidebar .stats-panel { display: none; } /* ── Layout B: Command Center ── */ body.layout-command .app-main { display: grid; grid-template-columns: 240px 1fr 220px; grid-template-rows: 1fr; grid-template-areas: "feed map stats"; } body.layout-command .map-container { grid-area: map; } body.layout-command .feed-panel { grid-area: feed; } body.layout-command .stats-panel { grid-area: stats; display: flex; flex-direction: column; } /* ── Utility ── */ .hidden { display: none !important; } /* ── History panel on desktop — occupies same grid area as feed, swapped by JS ── */ body.layout-sidebar .history-panel, body.layout-command .history-panel { grid-area: feed; background: var(--bg-surface); border-left: 1px solid var(--border); display: none; flex-direction: column; overflow: hidden; } body.layout-sidebar .history-panel.tab-active, body.layout-command .history-panel.tab-active { display: flex; } /* ── Feed panel ── */ .feed-panel { background: var(--bg-surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; min-height: 0; /* allow .feed-panel__list (flex:1 overflow-y:auto) to scroll */ } .feed-panel__header { padding: .4rem .6rem; font-size: .55rem; letter-spacing: .12em; color: var(--text-muted); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; } .feed-panel__list { flex: 1; overflow-y: auto; padding: .4rem; display: flex; flex-direction: column; gap: .3rem; } /* ── Stats panel ── */ .stats-panel { background: var(--bg-surface); border-left: 1px solid var(--border); padding: .6rem; overflow-y: auto; } .stats-panel__section { margin-bottom: 1rem; } .stats-panel__title { font-size: .5rem; letter-spacing: .1em; color: var(--text-muted); margin-bottom: .35rem; } .stats-panel__value { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); } .stats-panel__sub { font-size: .5rem; color: var(--accent-dim); } /* Mini bar chart */ .mini-chart { display: flex; align-items: flex-end; gap: 2px; height: 24px; margin-top: .3rem; } .mini-chart__bar { flex: 1; background: var(--threat-rockets); border-radius: 1px 1px 0 0; opacity: .7; min-height: 2px; } .mini-chart__bar:last-child { opacity: 1; } /* ── History panel controls ── */ .history-panel__header { padding: .5rem .6rem; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: .35rem; flex-shrink: 0; } .history-search { width: 100%; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 3px; color: var(--text-primary); font-family: var(--font-mono); font-size: .6rem; letter-spacing: .05em; padding: .3rem .45rem; outline: none; box-sizing: border-box; } .history-search::placeholder { color: var(--text-muted); } .history-search:focus { border-color: var(--accent); } .hist-filters { display: flex; gap: .25rem; flex-wrap: wrap; } .hist-filter-btn { padding: .2rem .45rem; border: 1px solid var(--border); border-radius: 3px; background: var(--bg-primary); color: var(--text-muted); font-family: var(--font-mono); font-size: .55rem; letter-spacing: .06em; cursor: pointer; transition: border-color .15s, color .15s; } .hist-filter-btn:hover { border-color: var(--accent); color: var(--accent); } .hist-filter-btn.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } .history-panel__list { flex: 1; overflow-y: auto; padding: .4rem; display: flex; flex-direction: column; gap: .3rem; } /* Prevent flex shrink from squashing history cards */ .history-panel__list > * { flex-shrink: 0; }