/*
  ----------------------------------------
  Application (Global styles)
  ----------------------------------------
*/

@layer styles {
  html,
  body {
    margin: 0;
    padding: 0;
    min-height: 100%;
  }

  /* Desktop nav links */
  .desktop {
    display: flex;
    position: relative;
    align-items: center;
    gap: var(--space-md);
    height: 100%;
    min-height: var(--height-md);

    .nav-link {
      position: relative;
      display: flex;
      align-items: center;
      height: 100%;
      text-decoration: none;
      color: var(--darker);
      font-weight: 600;

      &.active::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 0.25rem;
        background-color: var(--brand-1);
      }
    }
  }

  /* Mobile menu */
  .mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    padding-top: var(--space-md);
    gap: var(--space-sm);

    .nav-link {
      padding: var(--space-sm);
      font-size: var(--text-lg);
      font-weight: var(--font-semibold);
      text-decoration: none;
      color: var(--white);

      &:active {
        background-color: var(--brand-1);
      }
    }
  }

  .main-logo {
    display: block;
    max-width: 100%;
    height: auto;
  }

  .main-logo--header {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 3.25rem;
    height: auto;
    object-fit: contain;
  }

  /* Crud Header (for tables, forms – also used in custom scaffolds /erb/scaffold/*) */
  .crud-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--space-2xl);
    margin-top: var(--space-sm);

    h2,
    h3 {
      margin: 0;
    }
  }

  /* No-breadcrumb variant: the title leads the page, so top-align the row and
     let the action button sit up beside the title rather than centre/bottom. */
  .crud-header--top {
    align-items: flex-start;
  }

  /* Wrap variant: for a header whose actions slot carries a full content block
     (not just buttons). It sits beside the title on wide screens with a gap, and
     drops onto its own line on narrow ones instead of crushing into the title. */
  .crud-header--wrap {
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  /* Search / filter / sort toolbar on the division admin index pages.
     The shared form styles cap forms at --max-w-form and give every .ui-field a
     16rem floor with flex:1 — great for stacked forms, but here it forces the
     three controls to wrap. This overrides both so the search box grows to fill
     the row while State and Sort by stay compact beside it on one line. */
  .division-toolbar:has(.ui-field) {
    max-width: 100%;
  }
  .division-toolbar .toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    /* Fixed gap so the spacing stays even at every width, rather than the
       clamped --space-sm which stretches to 18px on wide screens. */
    gap: 1rem;
  }
  /* Defeat the global 16rem min-width so the compact selects can be narrow. */
  .division-toolbar .toolbar-row .ui-field {
    min-width: 0;
  }
  .division-toolbar .toolbar-search {
    flex: 1 1 20rem; /* grows to fill the leftover width */
  }
  .division-toolbar .toolbar-select {
    flex: 0 0 13rem; /* fixed, matches the reference layout */
  }
  /* On narrow screens let the selects wrap full-width instead of squishing. */
  @media (max-width: 40rem) {
    .division-toolbar .toolbar-select {
      flex-basis: 100%;
    }
  }

  /* Stack – vertical flex containers with themed spacing */
  .stack-3xs {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
  }
  .stack-2xs {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }
  .stack-xs {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }
  .stack-sm {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
  .stack-md {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  .stack-lg {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }
  .stack-xl {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
  }

  .stack-2xl {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
  }

  /* Card – white surface with border, radius, and shadow */
  .card {
    background: var(--white);
    border: var(--border) solid var(--light);
    border-radius: var(--rounded-lg);
    box-shadow: var(--shadow-sm);
  }

  /* Eyebrow – small-caps label placed above a heading */
  .eyebrow {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--midtone);
  }

  /* Grid display utility (complements Prewind flex utilities) */
  .grid {
    display: grid;
  }

  /* Scoped table grid borders for denser admin listings */
  .ui-table-grid {
    border-collapse: collapse;

    th,
    td {
      border-right: 1px solid var(--light);
    }

    th:last-child,
    td:last-child {
      border-right: 0;
    }
  }

  /* Extra-small border radius between none and sm */
  .rounded-xs {
    border-radius: 0.1875rem;
  }

  /* Remove border */
  .border-none {
    border: none;
  }

  /* ── Missing Prewind utilities ─────────────────────────────────────────────
     Prewind 1.2.5 omits these — defined here so views can use them freely.
  ── */

  /* Font size — xs sits below Prewind's .text-sm */
  .text-xs {
    font-size: var(--text-xs);
  }

  /* Font weight — Prewind only ships .font-normal and .font-bold */
  .font-medium {
    font-weight: var(--font-medium);   /* 500 */
  }
  .font-semibold {
    font-weight: var(--font-semibold); /* 600 */
  }

  /* Font family — monospace for IDs, codes, etc. */
  .font-display {
    font-family: var(--font-display);
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  /* Text colour utilities missing from Prewind */
  .text-darker { color: var(--darker); }
  .text-dark   { color: var(--dark); }

  /* Shadow utilities */
  .shadow    { box-shadow: var(--shadow); }
  .shadow-lg { box-shadow: var(--shadow-lg); }

  /* Border radius utilities */
  .rounded-lg { border-radius: var(--rounded-lg); }

  /* ── Bare .ui-input ─────────────────────────────────────────────────────────
     A standalone input (outside a .ui-field wrapper) that inherits the same
     height, padding, border, and radius as form builder fields.
     Used in .ui-input-group when a raw field_tag is needed.
  ── */
  .ui-input {
    height: var(--ui-field-height);
    font-size: var(--ui-field-font-size);
    padding: 0 var(--ui-field-padding);
    border: var(--ui-field-border);
    border-radius: var(--ui-field-border-radius);
    background: var(--ui-field-bg);
    color: var(--ui-field-value-color);
    width: 100%;

    &:focus {
      outline: none;
      border-color: var(--ui-field-focus-color);
      box-shadow: var(--ui-field-focus-shadow);
    }

    &::placeholder {
      color: var(--ui-field-placeholder-color);
    }
  }

  /* ── Input Group ────────────────────────────────────────────────────────────
     Attaches an input and a button side-by-side with joined borders.
     Works with .ui-input (bare input) or a .ui-field wrapper containing an input.
  ── */
  /* ── Input Group ────────────────────────────────────────────────────────────
     Lays out an input and button side-by-side with a small gap.
     Button matches the input height; all 4 corners stay rounded.
  ── */
  .ui-input-group {
    display: flex;
    align-items: center;
    gap: var(--space-xs);

    /* If form_with wraps the contents, flatten it so input+button are flex siblings */
    > form {
      display: contents;
    }

    input:not([type="checkbox"], [type="radio"]),
    .ui-field {
      flex: 1;
      min-width: 0;
      margin-bottom: 0;
    }

    /* Match button height to field height and keep all 4 corners rounded */
    .ui-button {
      height: var(--ui-field-height);
      border-radius: var(--rounded-md);
      flex-shrink: 0;
    }
  }
}