/* Fluent palette values, previously repeated as literals throughout this file. The tab bar,
   report grid and preset chips all reuse the same brand blue and greys, so they live here rather
   than drifting apart. Colours and one radius only — no spacing or type scale. */
:root {
  --nash-bg: #faf9f8;
  --nash-surface: #ffffff;
  --nash-brand: #0f6cbd;
  --nash-brand-tint: #eff6fc;
  /* The tab bar is the one large block of brand colour now that the header is white. */
  --nash-tabbar: #3c4774;
  --nash-text: #323130;
  --nash-label: #605e5c;
  --nash-muted: #a19f9d;
  --nash-border: #8a8886;
  --nash-disabled-bg: #f3f2f1;
  --nash-error-bg: #fde7e9;
  --nash-error-fg: #a80000;
  --nash-info-bg: #eff6fc;
  --nash-info-fg: #004578;
  --nash-radius: 2px;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--nash-bg);
}

/* Required, not cosmetic: `.nash-screen` below sets `display: flex`, which outranks the user-agent
   `[hidden] { display: none }` rule. Without this, every hidden tab panel stays on screen. */
[hidden] {
  display: none !important;
}

.nash-screen {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.nash-screen h2 {
  margin: 0 0 8px 0;
}

.nash-screen label {
  margin-top: 6px;
  color: var(--nash-label);
}

.nash-screen input,
.nash-screen select {
  padding: 6px 8px;
  border: 1px solid var(--nash-border);
  border-radius: var(--nash-radius);
  font-size: 14px;
}

.nash-screen input:disabled,
.nash-screen select:disabled {
  background: var(--nash-disabled-bg);
  color: var(--nash-muted);
}

.nash-screen button {
  margin-top: 12px;
  padding: 8px 12px;
  cursor: pointer;
}

.nash-screen button:disabled {
  cursor: default;
}

.nash-banner {
  padding: 8px 12px;
  border-radius: var(--nash-radius);
  font-size: 12px;
}

.nash-banner-error {
  background: var(--nash-error-bg);
  color: var(--nash-error-fg);
}

.nash-banner-info {
  background: var(--nash-info-bg);
  color: var(--nash-info-fg);
}

/* ---- Top bar + tabs ------------------------------------------------------------------------ */

/* Sticky so navigation stays reachable: the pane is ~320px wide and every tab scrolls well past a
   viewport. Safe because nothing sets `overflow` on html/body/#app, so body is the scroll
   container — adding one later would silently break this. */
.nash-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--nash-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.nash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  /* Dark on white — the header no longer carries the brand fill, the tab bar below it does. */
  color: var(--nash-text);
}

.nash-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.nash-logo {
  width: 20px;
  height: 20px;
  display: block;
  flex: none;
}

/* Fabric's `.ms-Button` forces `min-width: 80px`, which would stretch an icon-only button into a
   blob — hence the explicit reset. */
.nash-iconbtn {
  margin: 0;
  min-width: 0;
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--nash-label);
  border-radius: var(--nash-radius);
  cursor: pointer;
}

.nash-iconbtn:hover {
  background: var(--nash-disabled-bg);
  color: var(--nash-text);
}

.nash-iconbtn:focus-visible {
  outline: 2px solid var(--nash-tabbar);
  outline-offset: -2px;
}

.nash-iconbtn svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: currentColor;
}

.nash-tabs {
  display: flex;
  background: var(--nash-tabbar);
}

.nash-tabs [role="tab"] {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 6px 2px 8px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.nash-tabs [role="tab"][aria-selected="true"] {
  color: #ffffff;
  border-bottom-color: #ffffff;
  font-weight: 600;
}

.nash-tabs [role="tab"]:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}

.nash-tabs [role="tab"] svg {
  width: 14px;
  height: 14px;
  display: block;
  fill: currentColor;
}

/* ---- Scope selectors ------------------------------------------------------------------------ */

/* Label and select share a line, with the labels on a common width so the three selects align.
   Previously only the Unit row read this way, and only by accident — it was the one wrapped in a
   div, so its label and select fell out of `.nash-screen`'s flex column and back into inline flow.
   Fiscal year and Division stacked instead. All three are explicit rows now. */
.nash-scope-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nash-scope-row label {
  margin-top: 0;
  flex: none;
  width: 76px;
  font-size: 12px;
}

.nash-scope-row select {
  flex: 1;
  min-width: 0;
}

/* Unit checklist row (divisional HPPD): the row label tops-aligns with the checklist, and the
   checkbox labels inside must not inherit the scope-row's fixed 76px label width. */
.nash-hppd-units {
  align-items: flex-start;
}

.nash-hppd-units label {
  margin-top: 2px;
}

.nash-hppd-units .nash-eco-accepts {
  padding-left: 0;
  margin-top: 4px;
}

.nash-hppd-units .nash-eco-accepts label {
  width: auto;
  flex: initial;
  margin-top: 0;
}

.nash-hppd-units .nash-linkbtn {
  margin-right: 8px;
}

/* ---- Sections and report buttons ------------------------------------------------------------ */

.nash-section-title {
  margin: 12px 0 4px 0;
  font-weight: 600;
  font-size: 14px;
  color: var(--nash-text);
}

.nash-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.nash-report-grid button {
  margin: 0;
  min-height: 68px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  font-size: 11px;
  text-align: center;
  white-space: normal;
  line-height: 1.25;
  background: var(--nash-surface);
  border: 1px solid var(--nash-border);
  border-radius: var(--nash-radius);
  color: var(--nash-text);
}

.nash-report-icon {
  display: block;
  color: var(--nash-tabbar);
}

.nash-report-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}

.nash-report-grid button:hover:not(:disabled) {
  background: var(--nash-brand-tint);
}

.nash-report-grid button:focus-visible {
  outline: 2px solid var(--nash-tabbar);
  outline-offset: 1px;
}

.nash-report-grid button[aria-pressed="true"] {
  background: var(--nash-tabbar);
  border-color: var(--nash-tabbar);
  color: #ffffff;
  font-weight: 600;
}

/* The glyph inherits the button's colour when selected so it flips to white with the label. */
.nash-report-grid button[aria-pressed="true"] .nash-report-icon {
  color: inherit;
}

.nash-report-grid button:disabled {
  background: var(--nash-disabled-bg);
  color: var(--nash-muted);
  border-color: var(--nash-disabled-bg);
}

.nash-report-grid button:disabled .nash-report-icon {
  color: var(--nash-muted);
}

/* ---- Selected item header -------------------------------------------------------------------- */

/* Shown in place of the tile grid once something is picked, so the options below have a title. The
   way back is the shell's Close button. */
.nash-selected {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 4px 0;
}

.nash-selected-glyph {
  display: inline-flex;
  align-items: center;
  color: var(--nash-tabbar);
}

.nash-selected-glyph svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: currentColor;
}

.nash-selected-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--nash-text);
  min-width: 0;
}

/* ---- Report options (period + generate) ----------------------------------------------------- */

.nash-report-options {
  margin-top: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--nash-surface);
  border: 1px solid var(--nash-tabbar);
  border-radius: var(--nash-radius);
}

.nash-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.nash-presets button {
  margin: 0;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  background: var(--nash-surface);
  border: 1px solid var(--nash-border);
  border-radius: 10px;
  color: var(--nash-text);
}

.nash-presets button[aria-pressed="true"] {
  background: var(--nash-tabbar);
  border-color: var(--nash-tabbar);
  color: #ffffff;
}

.nash-presets button:disabled {
  background: var(--nash-disabled-bg);
  border-color: var(--nash-disabled-bg);
  color: var(--nash-muted);
  cursor: default;
}

.nash-presets button:focus-visible {
  outline: 2px solid var(--nash-tabbar);
  outline-offset: 1px;
}

/* ---- Setup rows and wages criteria ---------------------------------------------------------- */

.nash-setup-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nash-setup-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nash-setup-row .nash-setup-label {
  flex: 1;
}

/* The Generate/Save pair revealed under a selected setup tile. */
.nash-setup-actions {
  display: flex;
  gap: 8px;
}

.nash-setup-actions button {
  margin: 0;
}

.nash-setup-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  color: var(--nash-tabbar);
}

.nash-setup-icon svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: currentColor;
}

.nash-setup-row button {
  margin: 0;
}

.nash-dates,
.nash-times {
  display: flex;
  gap: 8px;
}

.nash-dates > div,
.nash-times > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.nash-muted {
  color: var(--nash-muted);
}

.nash-context {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nash-context #context-line {
  flex: 1;
  min-width: 0;
}

/* Low-emphasis inline action — the Close button sits beside the context line and must not compete
   with the tab's primary buttons. */
.nash-linkbtn {
  margin: 0;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  font-size: 11px;
  background: transparent;
  border: 1px solid var(--nash-border);
  border-radius: var(--nash-radius);
  color: var(--nash-label);
  cursor: pointer;
}

.nash-linkbtn:hover:not(:disabled) {
  background: var(--nash-disabled-bg);
  color: var(--nash-text);
}

.nash-linkbtn:disabled {
  color: var(--nash-muted);
  cursor: default;
}

.nash-linkbtn:focus-visible {
  outline: 2px solid var(--nash-tabbar);
  outline-offset: 1px;
}

.nash-linkbtn svg {
  width: 11px;
  height: 11px;
  display: block;
  fill: currentColor;
}

/* Explanatory copy under a section heading — notably on Consultant, which has no scope selectors
   of its own and needs to say where its scope comes from. */
.nash-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
}

.nash-crit-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nash-crit-row select {
  flex: 1;
  min-width: 0;
}

.nash-crit-row button {
  margin: 0;
}

.nash-crit-confirm {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nash-crit-confirm-actions {
  display: flex;
  gap: 8px;
}

.nash-crit-confirm-actions button {
  margin: 0;
}

/* ── EcoSize (Tools tab) ── */

/* Vertical stack for the launch form, status card and config cards. */
#ecosize-run-section,
#ecosize-runs-section,
#ecosize-config-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nash-crit-label {
  flex: none;
  min-width: 88px;
  font-size: 12px;
  color: var(--nash-label);
}

.nash-crit-row input[type="number"] {
  flex: 1;
  min-width: 0;
}

/* The live status line while a run is watched. */
.nash-eco-status {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--nash-border);
  border-radius: var(--nash-radius);
  font-size: 12px;
}

.nash-eco-status:empty {
  display: none;
}

.nash-eco-paused {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nash-eco-warnings,
.nash-eco-errors,
.nash-eco-options {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nash-eco-errors {
  color: var(--nash-error, #a4262c);
}

/* One row per past run. */
.nash-eco-run-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--nash-border);
  border-radius: var(--nash-radius);
  font-size: 12px;
}

.nash-eco-run-row .nash-eco-run-summary {
  flex: 1;
  min-width: 0;
}

.nash-eco-run-row button {
  margin: 0;
}

.nash-eco-status-badge {
  flex: none;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--nash-disabled-bg);
  font-size: 11px;
}

/* One editable card per enabled unit in the Configuration section. */
.nash-eco-unit-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--nash-border);
  border-radius: var(--nash-radius);
}

.nash-eco-unit-card h4 {
  margin: 0;
  font-size: 12px;
}

.nash-eco-accepts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 8px;
}

.nash-eco-accepts label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.nash-eco-disabled-units {
  color: var(--nash-muted);
  font-size: 11px;
}