@charset "UTF-8";

/* ===================================================================
   Generic popup shell - loaded globally (see css.php), reused by any
   topic/tab that needs an on-demand detail popup (Final Demise is the
   first; more will feed into the same shell later). This file styles
   only the shell chrome (overlay, inner frame, close button, content
   scroll area) - topic-specific content templates (popupACFD.php etc,
   fetched into .popupContent) own their own internal layout entirely,
   the same way tabPanel content owns its own layout inside
   contentData.
   =================================================================== */

.popupOverlay {
	display: none;
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.85);
	z-index: 600; /* above the gallery lightbox (500) - no known case
	                 today where both could be open at once, but costs
	                 nothing to order them deliberately rather than
	                 leave it to source order. */
	align-items: center;
	justify-content: center;
}

.popupOverlay.popupOpen {
	display: flex;
}

.popupInner {
	position: relative;
	width: 1300px;      /* matches .page (style.css), widened 1200->1300
	                        2026-09-08 alongside it - unlike
	                        .galleryLightboxInner (left at 1200 for
	                        now, per Peter, see style.css's note), this
	                        one Peter explicitly wants growing along
	                        with the page, feeding the extra width
	                        straight into the map column below rather
	                        than the data column - see .popupColLeft/
	                        .popupColRight. */
	height: 800px;      /* static size, not content-sized - per
	                        explicit instruction, rather than the
	                        flex column's natural height-to-content
	                        behavior */
	max-width: 96vw;
	max-height: 92vh;   /* still cap on small viewports even though
	                        height is now a fixed target */
	background-color: rgb(221, 214, 192); /* matches .contentBlock (style.css)
	                                          - contentBlock uses this exact
	                                          value directly, not a CSS
	                                          variable, so matched literally
	                                          here rather than introducing
	                                          a mismatched var() reference */
	border: 1px solid var(--color-border-dark);
	box-shadow: 1px 3px 6px var(--color-border-dark);
	display: flex;
	flex-direction: column;
	/* overflow: hidden removed - was clipping .popupClose now that it
	   floats partially outside this box's edge (see below). No
	   border-radius here to protect, and everything scrollable
	   already has its own overflow-y: auto further down the chain
	   (.popupContent, .popupACFDDContent), so nothing relied on this
	   clipping as far as I can tell - worth a visual check after
	   deploying, but should be safe. */
}

.popupClose {
	position: absolute;
	top: -11px;    /* half outside .popupInner's edge, recalculated
	                  for the smaller 22px size (was -13px for 26px) */
	right: -11px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.45);
	color: var(--color-chrome); /* was var(--color-border-light) - now
	                                matches the border color */
	border: 2px solid var(--color-border-dark);
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
}

.popupClose:hover {
	color: var(--color-border-light); /* was the default text color
	                                      before this change - now
	                                      swapped in on hover instead */
	/* no background-color change on hover, per instruction - stays
	   the same rgba(0,0,0,0.45) as the base state */
}

.popupContent {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.popupLoading {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-style: italic;
	color: var(--color-divider);
}

/* Generic two-column layout - most popups will be single-column and
   simply won't use this; reusable by any future topic that needs a
   data/map (or data/data) split the way ACFD does.
   Originally an even 40/60 flex-basis split (data side narrower than
   the map side, per explicit instruction). Changed 2026-09-08, when
   .popupInner grew from 1200px to 1300px: Peter wants the data side
   to stay the same physical size and the map to absorb 100% of any
   future width change, so .popupColLeft is now a fixed px width
   (frozen at what 40% used to compute to at 1200px) instead of a
   percentage, and .popupColRight is flex:1 1 auto to soak up
   whatever's left. Net effect at 1300px is the same ~40/60 look, but
   .popupColLeft won't move again if .popupInner's width changes -
   only .popupColRight will. */
.popupTwoCol {
	display: flex;
	flex-direction: row;
	gap: 0; /* was 20px - now that popupColLeftDivider draws a hard inset
	           shadow on the left column's right edge, any gap here reads
	           as a stray offset between that edge and the map instead of
	           a clean seam. Zeroed so the map sits flush against it. */
	flex: 1 1 auto;
	min-height: 0;
	padding: 0 10px 10px 10px; /* side/bottom padding lives here now,
	                              not on .popupACFD, so .popupHeader
	                              (a sibling) can span edge-to-edge */
}

.popupColLeft {
	/* Fixed at 471px, 2026-09-08 - was `flex: 1 1 40%`, which at the
	   old 1200px .popupInner worked out to 40% of the 1178px available
	   inside .popupTwoCol's padding (1200 - 2px border - 20px padding
	   = 1178; 1178 * 0.4 = 471.2, rounded down to a whole pixel). Kept
	   as that same literal px value rather than a percentage so this
	   column's width no longer depends on .popupInner's total width at
	   all - it stays this size regardless of how wide the popup gets,
	   per Peter's ask that the map (not this side) absorb any future
	   growth. Worth an eyeball check against the old rendering to
	   confirm 471px still reads the same as the old 40% did. */
	flex: 0 0 471px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.popupColRight {
	/* flex: 1 1 auto (was `flex: 1 1 60%`), 2026-09-08 - fills whatever
	   width .popupTwoCol has left after .popupColLeft's now-fixed
	   471px, so this column (and the Leaflet map inside it, via
	   .popupMap's own flex: 1 1 auto) is the one that grows if
	   .popupInner's width ever changes again, per Peter's ask. */
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* Same inset-shadow-on-one-edge effect as .navWrap (nav.css) - divider
   feel between popupColLeft and the map, matching the site's existing
   pattern for this rather than a full outward .shadow on all sides. */
.popupColLeftDivider {
	box-shadow: inset -8px 0 10px -9px rgba(0,0,0,0.55);
}

/* Full-width header bar, mirrors .contentTitle from details.php
   (see style.css for the source pattern - colors/gradient below are
   a starting approximation, not yet matched pixel-for-pixel; revisit
   once contentTitle's actual CSS is shared). Sits above .popupTwoCol
   as a sibling inside .popupACFD, spanning the full popup width. */
.popupHeader {
	flex: 0 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 20px 60px 20px 20px; /* right padding increased to 60px
	                                  (was 20px, matching left) - the
	                                  .popupClose button sits at
	                                  top:10px/right:10px with its own
	                                  32px width, and 20px wasn't
	                                  enough clearance, so mission
	                                  number text was rendering behind
	                                  it. Left stays 20px per original
	                                  instruction. */
	background-color: var(--color-chrome);
	color: var(--color-border-light); /* matches menu bar text color -
	                                      was unset before, inheriting
	                                      dark text that was unreadable
	                                      against the chrome bar */
	font-size: 14px; /* was inheriting body's 12px (text.css) */
	border-bottom: 1px solid var(--color-border-dark);
}

.popupHeaderDate {
	flex: 0 0 auto;
}

.popupHeaderTitle {
	flex: 1 1 auto;
	text-align: center;
	font-style: italic;
	font-variant: small-caps; /* matches contentTitleText - was
	                              font-weight:bold instead, which
	                              contentTitleText doesn't use */
	font-size: 18px;          /* matches contentTitleText - was
	                              inheriting .popupHeader's 14px */
	/* line-height and color intentionally NOT matched to
	   contentTitleText - those were specific to the details.php
	   context (50px line-height for that page's own title bar
	   height; dark red text for its light background), not
	   applicable here. color inherits .popupHeader's light color
	   as before. */
}

.popupHeaderMission {
	flex: 0 0 auto;
}

/* Back-link variant of the header's left slot (ACFDD's popup uses this
   where ACFD's uses .popupHeaderDate) - same positioning, adds the
   clickable affordance. */
.popupHeaderBack {
	flex: 0 0 auto;
	cursor: pointer;
}

.popupHeaderBack:hover {
	text-decoration: underline;
}

/* ACFD topic content */

.popupACFD {
	height: 100%;
	display: flex;
	flex-direction: column;
	min-height: 0;
	/* no side/bottom padding here anymore - .popupHeader needs to
	   span full width; .popupTwoCol carries its own padding instead */
}

.popupACFDSummary {
	flex: 0 0 auto;
	margin-bottom: 40px; /* was 20px - another 20px added per
	                         instruction. Gap to whatever follows (the
	                         portal table, or the empty-state message).
	                         Note: if a Comment is present, it sits
	                         between Description and the portal, so
	                         this margin technically governs the gap
	                         after Comment in that case, not strictly
	                         after Description - worth flagging in
	                         case that distinction matters for real
	                         records that have one. */
}

.popupACFDCode {
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;    /* generic body text size (text.css body),
	                        was 14px bold on the whole row - now only
	                        the value itself (see .popupACFDCodeValue
	                        below) gets the larger/bold treatment */
	font-weight: normal;
}

.popupACFDCodeValue {
	font-size: 14px;
	font-weight: bold;
	margin-left: 6px; /* a little extra breathing room from the "Code:" label */
}

/* .popupACFDDate removed - zc_ArmyDate now lives in .popupHeaderDate */

.popupACFDDescription {
	margin-top: 5px; /* was 20px - that gap is now handled by
	                     .popupACFDSummary's own margin-bottom
	                     instead, so this stays tight against Code */
	text-align: center;
}

.popupACFDComment {
	margin-top: 30px; /* was 10px, +20px per instruction */
	margin-left: 40px;
	margin-right: 40px;
	font-style: italic;
}

.popupACFDDEmpty {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.7;
}

/* ACFDD single-record popup (popupACFDD.php) - restructured this
   session into the same popupTwoCol shell ACFD uses, to add a
   per-marker map. Reuses .popupACFDDRowHeader/.popupACFDDRowBody/
   .popupACFDDField* below rather than duplicating them, since this is
   the same field content already proven inside ACFD's portal card. */

.popupACFDD {
	height: 100%;
	display: flex;
	flex-direction: column;
	min-height: 0;
	/* no padding here anymore - .popupHeader needs to span full width,
	   same reasoning as .popupACFD; .popupTwoCol carries its own
	   padding instead */
}

/* ACFDD portal list - restructured from a shared-header table into
   self-contained cards, one per record. Each card has its own header
   strip (Topic left / Time right) rather than one table header shared
   across all rows. */

.popupACFDDContent {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.popupACFDDRow {
	height: 200px; /* to start with, per instruction - revisit if
	                   real content needs more/less */
	display: flex;
	flex-direction: column;
	cursor: pointer;
	margin-bottom: 10px; /* not explicitly specified - added for
	                         legibility between stacked cards; easy to
	                         remove/adjust if not wanted */
	/* hover now handled by the generic .clickableRow class in
	   style.css - see aircraftInfo.php/popupACFD.php for usage */
}

.popupACFDDRowHeader {
	flex: 0 0 auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 8px 20px; /* 20px indent both sides, per instruction */
	font-size: 14px;
	border-top: 1px solid var(--color-divider);
	border-bottom: 1px solid var(--color-divider);
}

.popupACFDDTopic {
	flex: 0 0 auto;
}

.popupACFDDTime {
	flex: 0 0 auto;
}

.popupACFDDRowBody {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding: 10px 20px;
}

.popupACFDDField {
	display: flex;
	flex-direction: row;
	margin-bottom: 8px; /* not explicitly specified - added for
	                        legibility between the three stacked
	                        rows; easy to remove/adjust if not
	                        wanted */
}

.popupACFDDFieldLabel {
	flex: 0 0 120px;
	width: 120px;
}

.popupACFDDFieldValue {
	flex: 1 1 auto;
	margin-left: 20px;
}

/* Actual Leaflet map container - sibling to .popupMapPlaceholder.
   Shown instead of the placeholder once a record has map data
   (zw_webCode for ACFD, zw_markerCode+zw_mCount+zc_LatDD/zc_LongDD for
   ACFDD). No centering/dimming here - Leaflet renders its own
   tiles/controls into this box, so it should just fill the available
   space cleanly. */
.popupMap {
	flex: 1 1 auto;
}

.popupMapPlaceholder {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.05);
	opacity: 0.7;
}