/* Scoping application styles — follows Intricate Solutions CSS conventions */

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.sidebar-new {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 27rem;
  background: var(--primary);
  color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 10;
  transition: width 0.3s ease;
  overflow: hidden;
}
.sidebar-new.collapsed {
  width: 5.66rem;
}
.sidebar-new.collapsed .sidebar-label,
.sidebar-new.collapsed .sidebar-section-label {
  display: none;
}
.sidebar-toggle-row {
  display: flex;
  align-items: center;
  height: 4.5rem;
  padding: 0 var(--size-5);
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.sidebar-toggle-btn {
  color: #fff;
  font-size: 1.5rem;
}
.sidebar-toggle-btn:hover { color: #FFDB9F; }
.sidebar-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  overflow-y: auto;
}
.sidebar-nav-item a,
.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem var(--size-6);
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.sidebar-nav-item a:hover,
.sidebar-nav-item:hover {
  background: rgba(255,255,255,0.12);
  color: #FFDB9F;
}
.sidebar-nav-item.active a,
.sidebar-nav-item.active {
  border-left-color: #FFDB9F;
  background: rgba(255,255,255,0.15);
  color: #FFDB9F;
}
.sidebar-nav-item i { font-size: 1.1rem; min-width: 1.2rem; text-align: center; }
.sidebar-section-label {
  padding: 0.75rem var(--size-6) 0.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.5);
}
.sidebar-footer {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding: var(--size-4) 0;
}

/* Wrapper shifts with sidebar */
.wrapper.sidebar-collapsed { margin-left: 5.66rem; transition: margin-left 0.3s; }
.wrapper.sidebar-expanded  { margin-left: 27rem;   transition: margin-left 0.3s; }
.content.sidebar-collapsed { margin-left: 5.66rem; transition: margin-left 0.3s; }
.content.sidebar-expanded  { margin-left: 27rem;   transition: margin-left 0.3s; }

/* ── Header overrides ─────────────────────────────────────────────────── */
.new-ui-topheader {
  background: #878a91;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.5rem;
  padding: 0 var(--size-6);
  position: fixed;
  top: 0;
  z-index: 9;
  width: 100%;
  box-sizing: border-box;
}
.new-ui-topheader.sidebar-collapsed { padding-left: calc(5.66rem + var(--size-6)); transition: padding-left 0.3s; }
.new-ui-topheader.sidebar-expanded  { padding-left: calc(27rem + var(--size-6)); transition: padding-left 0.3s; }
.new-logo { height: 2.5rem; }
#new-toprightnav { display: flex; align-items: center; gap: var(--size-5); }
.header-user-name { color: #fff; font-size: 0.9rem; }
.header-dialog-button { border:none; background:none; font-size:2rem; color:#EFEFEF; transition:color 0.3s; cursor:pointer; }
.header-dialog-button:hover { color:#fff; }
.header-icon-background { opacity: 0; color: #ACAEB3; transition: opacity 0.3s; }
.header-dialog-button:hover .header-icon-background { opacity: 1; }
.header-icon { color: #EFEFEF; }

/* Breadcrumb */
div.breadcrumb {
  background: #eee;
  font-style: italic;
  font-size: 1rem;
  color: #7F7F7F;
  height: 2.8rem;
  border-bottom: 0.075rem solid #ccc;
  display: flex;
  align-items: center;
  position: fixed;
  top: 4.5rem;
  left: 0;
  right: 0;
  z-index: 8;
  padding-left: 5.66rem;
}
div.breadcrumb a { color: var(--primary); }

/* Content area — wrapper's margin-top already clears header + breadcrumb */
.content {
  padding-top: var(--size-6);
  min-height: calc(100vh - 7.3rem);
}

/* Alert overlays */
.alert-overlay {
  position: fixed;
  bottom: var(--size-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  padding: var(--size-5) var(--size-7);
  border-radius: 0.4rem;
  box-shadow: var(--shadow);
  background: #eee;
  max-width: 36rem;
  width: 90%;
}
.alert-overlay.error { background: #fee; color: #f44; }
.alert-overlay.warning { background: #878a91; color: #fff400; }
.alert-overlay-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.error_message   { color:#f00; background:#fee; border:1px solid #fcc; }
.success_message { color:#0a0; background:#efe; border:1px solid #cfc; }
.notice_message  { color:#333; background:#eef; border:1px solid #ccf; }

/* ── Scenario header (shared across FEMP Scope Development / Cost Estimate
   Planner / Alt-FEMP Scenarios pages) ───────────────────────────────────── */
.scenario-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--size-7);
  flex-wrap: wrap;
  gap: var(--size-5);
}

/* ── Scenario-level and FEMP-sub-level tab navigation ────────────────────
   These are plain <a> links (every "tab" elsewhere in this app is a real
   Flask route, not a JS-toggled panel) styled in the spirit of
   css/new-tabs.css's .horizontal-tab-button (rounded top corners, grey→white
   on active, var(--shadow)) but sized for a compact nav row instead of that
   component's fixed 25rem card width. */
.scenario-tabs, .femp-subtabs {
  display: flex;
  gap: var(--size-2);
  border-bottom: var(--size-1) solid var(--accent-faded);
  margin-bottom: var(--size-7);
  flex-wrap: wrap;
}
.femp-subtabs { margin-top: calc(-1 * var(--size-6)); }
.scenario-tab, .femp-subtab {
  display: inline-block;
  padding: var(--size-5) var(--size-7);
  background: #ddd;
  color: var(--dark);
  text-decoration: none;
  font-weight: bold;
  border-radius: var(--size-4) var(--size-4) 0 0;
  box-shadow: var(--shadow);
  transition: background 0.2s, color 0.2s;
}
.femp-subtab {
  font-size: 0.9rem;
  font-weight: normal;
  padding: var(--size-4) var(--size-6);
}
.scenario-tab:hover, .femp-subtab:hover { background: #eee; }
.scenario-tab.active, .femp-subtab.active {
  background: #fff;
  color: var(--primary);
  border-bottom: var(--size-2) solid var(--secondary);
}

/* ── Stat cards (facility/location/classification counts) ───────────────── */
.stat-card-row {
  display: flex;
  gap: var(--size-8);
  flex-wrap: wrap;
  margin-bottom: var(--size-8);
}
.stat-card {
  padding: var(--size-6);
  background: var(--primary-faded);
  border-radius: 0.3rem;
  min-width: 12rem;
}
.stat-card-value { font-size: 1.8rem; font-weight: bold; color: var(--primary); }
.stat-card-label { color: var(--accent); text-transform: uppercase; font-size: 0.85rem; }

/* ── Grouped assumption-input panels (Cost Estimate Planner / Alt-FEMP) ──── */
.assumptions-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--size-6);
  margin-bottom: var(--size-7);
}
.assumptions-group h4 {
  text-transform: uppercase;
  color: var(--accent);
  font-size: 0.9rem;
  margin-top: 0;
  margin-bottom: var(--size-5);
}
.assumptions-group-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-5); }
.assumptions-group-fields label {
  font-weight: bold;
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
}
@media only screen and (max-width: 850px) {
  .assumptions-group-fields { grid-template-columns: 1fr; }
}

/* Manual-override indicator, formalizing the inline var(--secondary) text
   already used ad hoc for "(manual)" overrides. */
.override-badge { color: var(--secondary); font-size: 0.8rem; font-weight: bold; }

/* Honest placeholder for Phase 2 (CEP/Alt-FEMP calculation engine — not built yet) */
.phase2-notice {
  border: var(--size-1) dashed var(--accent-faded);
  border-radius: var(--size-6);
  padding: var(--size-7);
  text-align: center;
  color: var(--accent);
  background: var(--primary-faded);
}

/* ── Collapsible section headers (css/new-style.css's .collapsible, wired
   up with a click handler in scoping.js — no toggle JS existed before) ──── */
.collapsible-header { cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.collapsible div.collapsible-header span.collapsible-controls i { color: var(--secondary); transition: transform 0.2s; }
.collapsible.collapsed div.collapsible-header span.collapsible-controls i { transform: scale(0.7, 0.7) rotate(-90deg); }

/* ── Scenario dashboard (card grid, checkout status, handoff notes) ──────── */
.dashboard-toolbar {
  display: flex;
  gap: var(--size-6);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--size-6);
}
.dashboard-toolbar .text-input-container { margin: 0; min-width: 14rem; flex: 1; }
.dashboard-active-users {
  background: var(--primary-faded);
  border-radius: 0.4rem;
  padding: var(--size-5) var(--size-6);
  color: var(--primary-dark);
  font-size: 0.9rem;
  margin-bottom: var(--size-6);
}
.dashboard-active-users.none { color: var(--accent); background: #f4f4f4; }

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: var(--size-7);
}
.scenario-card {
  background: #fff;
  border-radius: 0.6rem;
  box-shadow: var(--shadow);
  padding: var(--size-6);
  display: flex;
  flex-direction: column;
  gap: var(--size-5);
}
.scenario-card-header { display: flex; gap: var(--size-5); align-items: flex-start; }
.avatar-badge {
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  font-size: 1.1rem;
}
.avatar-badge-0 { background: var(--primary); }
.avatar-badge-1 { background: var(--secondary); }
.avatar-badge-2 { background: var(--primary-darker); }
.avatar-badge-3 { background: #6b4fa0; }
.avatar-badge-4 { background: #3b7dd8; }
.scenario-card-title { font-weight: bold; font-size: 1.1rem; color: var(--dark); }
.scenario-card-company { color: var(--primary); font-size: 0.9rem; }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: bold;
  border-radius: 1rem;
  padding: 0.15rem 0.7rem;
}
.status-badge.available { background: #efe; color: #0a0; }
.status-badge.checked-out { background: var(--primary-faded); color: var(--secondary); }
.status-badge.archived { background: var(--accent-faded); color: var(--accent); }

.scenario-card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--size-4);
  font-size: 0.8rem;
  color: var(--accent);
}
.scenario-card-meta strong { color: var(--dark); display: block; font-size: 0.75rem; text-transform: uppercase; }

.handoff-note {
  background: var(--primary-faded);
  border-left: var(--size-3) solid var(--secondary);
  border-radius: 0.3rem;
  padding: var(--size-5);
  font-size: 0.8rem;
}
.handoff-note-meta { color: var(--accent); font-size: 0.75rem; margin-bottom: 0.2rem; }

.scenario-card-actions { display: flex; gap: var(--size-4); flex-wrap: wrap; margin-top: auto; }

/* ── Notes flyout (reuses css/new-style.css's .header-dialog component) ──── */
.notes-list { max-height: 20rem; overflow-y: auto; margin-bottom: var(--size-6); }
.note-item { padding: var(--size-5) 0; border-bottom: 1px solid var(--accent-faded); }
.note-item-meta { color: var(--accent); font-size: 0.75rem; margin-bottom: 0.2rem; }
.note-item-text { white-space: pre-wrap; }

/* ── Alt-FEMP: the eleven Table 6 programs ───────────────────────────────────
   EVERYTHING HERE STARTS BY UNDOING ONE INHERITED RULE. The base-case sheet
   sets `.content { text-align: center }`, so every paragraph, table cell and
   card in this app is centred unless it says otherwise -- which is why the
   program cards read as centred prose and a colspan group header floated in
   the middle of the metrics table. That rule is shared by nine apps and is not
   ours to change, so each block below states its own alignment.
   ─────────────────────────────────────────────────────────────────────────── */

/* The selected program, above the comparison. */
.program-banner {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(0, 2fr);
  gap: var(--size-7);
  align-items: start;
  text-align: left;
}
.program-banner-name { font-size: 1.5rem; font-weight: bold; line-height: 1.2; }
.program-banner p { margin: var(--size-4) 0 var(--size-5) 0; }
@media only screen and (max-width: 900px) {
  .program-banner { grid-template-columns: 1fr; }
}

/* The spec rows (MDT / Quantification / Screening / Follow-up). A definition
   grid rather than a table: the values wrap to several lines and a table was
   giving every row the width of its longest neighbour. */
.program-spec {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  gap: var(--size-4) var(--size-5);
  text-align: left;
  font-size: 0.85rem;
}
.program-spec dt { color: var(--accent); }
.program-spec dd { margin: 0; }

/* ── Program Selection Guide cards ──────────────────────────────────────── */
.program-cards {
  display: grid;
  /* 24rem, not 20: at 20 the follow-up sentences wrapped to five lines each
     and the cards became columns of ragged text. */
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
  gap: var(--size-6);
  text-align: left;
}
.program-card {
  display: flex;
  flex-direction: column;
  gap: var(--size-5);
  padding: var(--size-6);
  border: 1px solid var(--accent-faded);
  border-left-width: 4px;          /* colour set inline, per program */
  border-radius: 0.3rem;
  background: #fff;
  text-align: left;
}
.program-card.is-selected {
  box-shadow: 0 0 0 2px var(--primary);
  background: var(--primary-faded);
}
.program-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--size-5);
}
.program-card-name { font-weight: bold; font-size: 1.05rem; }
.program-card-cost { font-weight: bold; color: var(--primary); white-space: nowrap; }
.program-card-delta { color: var(--accent); font-size: 0.8rem; margin-top: var(--size-3); }
.program-card p { margin: 0; font-size: 0.85rem; }
/* Pinned to the bottom so the variability chip lines up across a row of cards
   whose descriptions are different lengths. */
.program-card-risk { margin-top: auto; padding-top: var(--size-5); font-size: 0.8rem;
                     border-top: 1px solid var(--accent-faded); }
.program-card-consider { font-size: 0.8rem; color: var(--accent); }
.program-card-consider strong { color: var(--dark); }

/* ── Comparison + Detailed Annual Metrics tables ────────────────────────── */
.program-table-scroll { overflow-x: auto; }
.program-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.85rem;
}
.program-table th, .program-table td { padding: var(--size-4) var(--size-5); }
.program-table thead th {
  color: var(--accent);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--accent-faded);
  white-space: nowrap;
}
.program-table tbody tr { border-top: 1px solid var(--accent-faded); }
.program-table tbody tr.is-selected { background: var(--primary-faded); }
/* A row that heads a group rather than carrying a value. Used on the send-to-
   Quoting table, where eleven drivers are two different ways of counting the
   same facilities and a reader who takes them for one list prices the work
   twice. The heavier rule is the whole point: it has to read as a division,
   not as another driver. The same class with an empty cell closes the group. */
.program-table tbody tr.is-subhead { border-top: 2px solid var(--accent-faded); }
.program-table tbody tr.is-subhead td { font-size: 0.85rem; }
/* Numbers line up only if the glyphs are the same width. */
.program-table .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.program-table .money { font-weight: bold; color: var(--primary); }

/* The metrics table is transposed -- eleven program columns -- so it scrolls
   sideways and the metric name has to stay put or the numbers mean nothing. */
.metrics-table th.metric-name,
.metrics-table td.metric-name {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 1;
  min-width: 14rem;
}
.metrics-table tbody tr.is-total td.metric-name,
.metrics-table tbody tr.metrics-group td.metric-name { background: #fff; }
/* A group heading spans the table; left-aligned, because a centred colspan
   parks the label in the middle of eleven columns with nothing near it. */
.metrics-table tr.metrics-group td {
  text-align: left;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--accent);
  padding-top: var(--size-6);
  border-top: 1px solid var(--accent-faded);
}
.metrics-table tr.metrics-group + tr { border-top: none; }
.metrics-table td.metric-sub { padding-left: var(--size-7); color: var(--accent); }
.metrics-table tr.is-total { border-top: 2px solid var(--accent-faded); }
.metrics-table tr.is-total td { font-weight: bold; }

.program-footnotes { text-align: left; color: var(--accent); font-size: 0.8rem;
                     max-width: 72rem; }
.program-footnotes p { margin: var(--size-4) 0; }

/* A collapsible's body is left-aligned, open or closed.
   The base-case sheet already says so -- but only for the COLLAPSED state:

       .collapsible.collapsed div.collapsible-body { display: none; text-align: left; }

   which is the one state where nothing is visible to align. Open, the body
   falls back to `.content { text-align: center }` and every paragraph, label
   and table cell in it centres. Left is plainly the intent; this applies it
   when it can actually be seen. Scoped to this app's own sheet -- the base
   sheet is shared by nine apps. */
.collapsible div.collapsible-body { text-align: left; }

/* Form controls inherit the page font.
   `html { font-family: 'Lato' }` in the base sheet covers everything that
   inherits -- but a browser never inherits font-family into <input>, <select>,
   <textarea> or <button>; they default to the system UI face. So every rate box
   and dropdown in this app was rendering in Segoe UI beside Lato labels. The
   webfonts are present and served (app.py's /webfonts route), so this is only
   about the controls asking for them. */
input, select, textarea, button { font-family: inherit; }

/* Room under a collapsible's heading. The header and the body sit flush, so a
   grid of cards or a table starts hard against the title. */
.collapsible div.collapsible-body { padding-top: var(--size-5); }
.collapsible div.collapsible-body > :first-child { margin-top: 0; }

/* Variability reads as a column of its own, so it is right-aligned like the
   numbers rather than ragged against whatever the row above it printed. */
.program-table .variability { text-align: right; white-space: nowrap; }