/* Root font-size is 16px unconditionally, on every viewport. The scaffold's stock ASP.NET Core
   template set 14px below 768px and only 16px at/above it — backwards for this project, because
   that breakpoint sets the root em-size to 14px on exactly the viewport (every phone) where the
   iOS auto-zoom threshold matters. Any input at font-size: 1rem then inherited 14px on a phone and
   Safari zoomed on focus. user-scalable=no cannot suppress that zoom; only this floor does. */
html {
  font-size: 16px;
}

:root {
  /* Brand — raw (image and decorative-only usage; measured from the brand PNGs, not chosen
     freehand — see 01-UI-SPEC.md Color for the computed contrast ratios behind every value here) */
  --brand-amber: #FDB414;
  --brand-olive: #8A961E;
  --brand-orange: #F26222;
  --brand-cream: #FDF5CE;

  /* Brand — darkened, AA-safe for text/links/backgrounds */
  --brand-olive-dark: #5A6214;   /* 6.58:1 vs white; also nav-bg vs white nav text */
  --brand-orange-dark: #9D4016;  /* 6.61:1 vs white — decorative inline text/badges only */

  /* Semantic roles consumed by markup */
  --color-bg: #FFFFFF;
  --color-panel: #F8F9FA;
  --color-panel-border: #DEE2E6;
  --color-nav-bg: var(--brand-olive-dark);
  --color-nav-text: #FFFFFF;
  --color-accent: var(--brand-amber);
  --color-accent-text: #1A1A1A;   /* 9.71:1 AAA on --color-accent */
  --color-deactivate: #6C757D;
  --color-destructive: #DC3545;   /* 4.53:1 vs white */
}

/* Bootstrap's own color-contrast Sass helper isn't available at runtime here (no recompile), so
   .btn-primary is repointed explicitly — the one deliberate override in the whole system.
   .btn-danger and .btn-outline-secondary are used unmodified: their default Bootstrap colours
   already are the destructive and deactivate roles, at zero override cost. */
.btn-primary {
  --bs-btn-bg: var(--color-accent);
  --bs-btn-border-color: var(--color-accent);
  --bs-btn-color: var(--color-accent-text);
  --bs-btn-hover-bg: #E0A812; /* amber, ~8% darker, kept in-family */
  --bs-btn-hover-color: var(--color-accent-text);
  --bs-btn-focus-shadow-rgb: 253, 180, 20;
}

.navbar-brand-surface {
  background-color: var(--color-nav-bg);
  color: var(--color-nav-text);
}
.navbar-brand-surface a {
  color: var(--color-nav-text);
}

/* Tap-target sizing (UI-SPEC Decision 5): 44px minimum on every interactive control, 48px on the
   single primary action per screen, minimum 8px gap between adjacent targets. The usage context is
   one hand, direct Florida sun, sometimes wet hands — not a generic accessibility number. */
.btn,
.form-control,
.form-select,
.nav-link,
input[type="checkbox"],
input[type="radio"] {
  min-height: 44px;
}
.btn-primary {
  min-height: 48px;
}
.tap-target-group > * + * {
  margin-left: 8px;
}

/* The stacking rule for wide tabular data on a phone (UI-SPEC Decision 2). One semantic <table>,
   CSS-only reflow to a card-per-row layout below 768px via a data-label attribute on every <td>.
   Every data table in this app uses this one class and this one rule — this phase's CRUD lists,
   Phase 2's events list, Phase 4's approval diff, Phase 6's season summary. */
.table-stack { width: 100%; border-collapse: collapse; }

@media (max-width: 767px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr {
    margin-bottom: 16px; /* --space-md */
    border: 1px solid var(--color-panel-border);
    border-radius: 8px;
    padding: 8px 16px; /* --space-sm --space-md */
  }
  .table-stack td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px; /* --space-sm */
    padding: 8px 0; /* --space-sm */
    border: none;
    text-align: right;
    word-break: break-word; /* long names/emails wrap, never silently truncate */
  }
  .table-stack td::before {
    content: attr(data-label);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    color: var(--color-deactivate);
    flex-shrink: 0;
  }
}

@media (min-width: 768px) {
  .table-stack th, .table-stack td {
    padding: 8px 16px;
    border-bottom: 1px solid var(--color-panel-border);
    text-align: left;
  }
}

/* Nav cafe switcher (UI-SPEC "overflow" row): a native <select> with its own arrow suppressed in
   favour of the vendored chevron icon, truncating a long cafe name with an ellipsis — the one
   place in this app where truncation is correct, because it is width-constrained. The full name
   is still available via the option's title attribute. */
.cafe-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.cafe-switcher-select {
  appearance: none;
  max-width: 200px;
  min-height: 44px;
  padding-right: 28px;
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cafe-switcher-chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}