/* 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 and Dashboard reports): 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-unit-checklist {
  align-items: flex-start;
}

.nash-unit-checklist label {
  margin-top: 2px;
}

.nash-unit-checklist .nash-checkbox-list {
  padding-left: 0;
  margin-top: 4px;
}

.nash-unit-checklist .nash-checkbox-list label {
  width: auto;
  flex: initial;
  margin-top: 0;
}

.nash-unit-checklist .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;
}

/* The Setup tab's "Show/Hide budget details" row sits above the tiles and the scope notice. */
.nash-budget-toggle {
  margin-bottom: 8px;
}

/* The Setup tab's "Copy to days" panel, shown while a Staffing Plan weekday sheet is active. */
.nash-copy-days {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.nash-copy-days .nash-section-title {
  margin: 0;
}

/* The per-day checkboxes sit indented under "Select all". The nested list is itself a
   `.nash-checkbox-list`, whose 8px `padding-left` is declared later in this file, so this override
   is qualified with that class to win on specificity rather than on source order. */
.nash-checkbox-list.nash-copy-days-list {
  padding-left: 16px;
}

.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 — the notices on the Divisional, Unit and Setup tabs. */
.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;
}

/* ── Checkbox lists ── */

/* Shared checkbox-list styling — the Divisional tab's unit and care-team checklists and the Setup
   tab's "Copy to days" day list. `.nash-copy-days-list` re-indents its nested copy above. */
.nash-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 8px;
}

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