/* ── Stage color tokens ─────────────────────────────── */

:root {
  font-size: 87.5%; /* 14px base */
  --pico-form-element-spacing-vertical: 0.35rem;
  --pico-form-element-spacing-horizontal: 0.65rem;

  --stage-none: #f3f87f;
  --stage-raw: #937df8;
  --stage-formatted: #6d9efc;
  --stage-uploaded: #6aebfc;
  --stage-validated: #98f786;
  --stage-failed: #fb7b77;

  --error-format: #fdc170;
  --error-pre_upload: #fb7b77;
  --error-upload: #f78ef0;
  --error-post_upload: #d44f4f;
}

/* ── Nav tweaks ─────────────────────────────────────── */

header.container-fluid {
  border-bottom: 1px solid var(--pico-muted-border-color);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

header nav form {
  margin: 0;
}

/* ── Flash messages ─────────────────────────────────── */

.message-alert {
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  border-radius: var(--pico-border-radius);
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
  border-left: 4px solid var(--pico-primary);
}

.message-alert.error {
  background: #fee2e2;
  color: #991b1b;
  border-left-color: #dc2626;
}

/* ── Dashboard header ───────────────────────────────── */

.dashboard-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.dashboard-header h1 {
  margin: 0;
}

.period-form {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
}

.period-form input[type="month"] {
  width: auto;
  margin: 0;
}

.period-nav {
  font-size: 1.5rem;
  line-height: 1;
  text-decoration: none;
  padding: 0 0.25rem;
  color: var(--pico-color);
}

.inactive-toggle {
  margin-left: auto;
}

/* ── Stage legend ───────────────────────────────────── */

.stage-legend {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}

.legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  color: #2c2c2c;
  font-weight: 500;
}

.legend-chip.stage-failed-format      { background: var(--error-format); }
.legend-chip.stage-failed-pre_upload  { background: var(--error-pre_upload); }
.legend-chip.stage-failed-upload      { background: var(--error-upload); }
.legend-chip.stage-failed-post_upload { background: var(--error-post_upload); }

/* ── Distributor squares grid ───────────────────────── */

.grid-section {
  margin-bottom: 1.5rem;
}

.group-heading {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--pico-muted-color);
  border-bottom: 1px solid var(--pico-muted-border-color);
  padding-bottom: 0.25rem;
}

.squares-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.dist-square {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 60px;
  border-radius: 6px;
  text-decoration: none;
  color: #2c2c2c;
  font-size: 0.65rem;
  text-align: center;
  padding: 0.25rem;
  overflow: hidden;
  cursor: pointer;
}

.square-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-weight: 500;
}

.stage-icon {
  font-size: 0.9rem;
}

/* CSS-only popover on hover */
.square-popover {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 0.75rem;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  white-space: normal;
  max-width: 220px;
  z-index: 10;
  pointer-events: none;
}

.dist-square:hover .square-popover,
.dist-square:focus-within .square-popover {
  display: block;
}

/* ── Stage color classes ────────────────────────────── */

.stage-none          { background: var(--stage-none); }
.stage-raw           { background: var(--stage-raw); }
.stage-formatted     { background: var(--stage-formatted); }
.stage-uploaded      { background: var(--stage-uploaded); }
.stage-validated     { background: var(--stage-validated); }
.stage-failed                         { background: var(--stage-failed); }
.stage-failed.error-format            { background: var(--error-format); }
.stage-failed.error-pre_upload        { background: var(--error-pre_upload); }
.stage-failed.error-upload            { background: var(--error-upload); }
.stage-failed.error-post_upload       { background: var(--error-post_upload); }

/* ── Detail page header ─────────────────────────────── */

.detail-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--pico-muted-border-color);
}

.detail-header h1 {
  margin-bottom: 0.5rem;
}

.division-label {
  color: var(--pico-muted-color);
  font-weight: 400;
}

.contact-info,
.fraznet-info,
.formatter-info {
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

/* ── Badges ─────────────────────────────────────────── */

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-active   { background: #d1fae5; color: #065f46; }
.badge-inactive { background: #fee2e2; color: #991b1b; }
.badge-warn     { background: #fef3c7; color: #92400e; }
.badge-pass     { background: #d1fae5; color: #065f46; }
.badge-fail     { background: #fee2e2; color: #991b1b; }
.badge-override { background: #ede9fe; color: #5b21b6; }

/* ── Stage badge (large, on detail page) ────────────── */

.stage-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  color: #2c2c2c;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}


/* ── Period nav bar ─────────────────────────────────── */

.period-nav-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.back-link {
  margin-left: auto;
  font-size: 0.9rem;
}

/* ── Override form in checks table ─────────────────── */

.checks-table textarea {
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
}

.btn-override {
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
}

.override-info {
  font-size: 0.85rem;
}

/* ── Narrow centered page layout ───────────────────── */

.page-narrow {
  max-width: 680px;
  margin: 0 auto;
}

.page-wide {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ── Misc ───────────────────────────────────────────── */

.placeholder-text {
  color: var(--pico-muted-color);
  font-style: italic;
}

.admin-edit-link {
  font-size: 0.8rem;
  margin-left: 0.5rem;
}

.no-load {
  color: var(--pico-muted-color);
}

.stage-detail {
  margin-top: 0.25rem;
  font-size: 0.9rem;
}