/* ============================================================================
   App shell & layout
   ----------------------------------------------------------------------------
   The top app bar, the centered content container, page headers, and a handful
   of layout utilities. The bare `nav` / `main` selectors mean the existing
   shell markup is lifted immediately; the .app-bar / .brand / .nav-link classes
   add polish where the partial opts in.
   ============================================================================ */

@layer components {
  /* --- Top app bar ------------------------------------------------------- */
  nav,
  .app-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    backdrop-filter: saturate(1.2) blur(10px);
    -webkit-backdrop-filter: saturate(1.2) blur(10px);
    border-bottom: 0.5px solid var(--border);
    font-size: 12.5px;
  }

  /* Translucency is a nicety, not a requirement: users who ask for less
     transparency or more contrast get a solid bar with a firmer hairline. */
  @media (prefers-reduced-transparency: reduce) {
    nav,
    .app-bar {
      background: var(--bg-secondary);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }
  @media (prefers-contrast: more) {
    nav,
    .app-bar {
      background: var(--bg-secondary);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-bottom-color: var(--border-strong);
    }
  }

  /* Brand lockup (the leading <strong> in the nav). */
  nav > strong,
  .brand {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  nav > strong a,
  .brand a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-primary);
  }
  nav > strong a:hover,
  .brand a:hover { text-decoration: none; }

  /* A small square brand mark — `<span class="brand-mark">P</span>`. Foreground
     is the surface color rather than a literal white: --accent and --bg-primary
     are always chosen to contrast with each other (dark ink on light surface in
     light mode, light ink on dark surface in dark mode), so this stays legible
     across themes instead of going near-invisible when --accent turns pale in
     dark mode. */
  .brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--bg-primary);
    font-weight: 500;
    font-size: 14px;
  }

  /* Plain text links inside the bar read as nav items. The brand link opts back
     out via the higher-specificity .brand rules above. */
  nav a,
  .nav-link {
    color: var(--text-secondary);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    transition: background var(--speed-fast) var(--ease-out),
                color var(--speed-fast) var(--ease-out);
  }
  /* Nav items lead with a small Tabler icon; lay the pair out on a gap. */
  .nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }
  nav > strong a { padding: 0; }
  nav a:hover,
  .nav-link:hover { background: var(--bg-tertiary); color: var(--text-primary); text-decoration: none; }
  /* Current section reads as the same soft accent wash the project subnav
     uses — one "you are here" treatment across both navigation levels, with
     no underline hardware. Hover stays the neutral bg-tertiary, so the two
     states can't be confused. */
  .nav-link.active,
  .nav-link[aria-current="page"] {
    color: var(--text-primary);
    background: var(--accent-soft);
  }
  .nav-link.active:hover,
  .nav-link[aria-current="page"]:hover { background: var(--accent-soft); }

  /* The profile link and org label carry user content (a display name falls
     back to the full email address); `anywhere` lets them wrap instead of
     stretching the bar past the viewport. */
  nav a,
  nav .muted { overflow-wrap: anywhere; }

  /* The org switcher form sits inline in the bar without extra margin. */
  nav form { margin: 0; display: inline-flex; gap: var(--space-2); align-items: center; }
  nav form > div { margin: 0; }

  /* The org-switcher select stays as compact as the bar's small buttons
     instead of inheriting the roomier page-form padding. */
  nav select {
    padding: var(--space-1) var(--space-2);
    /* Compact spacing for the chevron too (see the base select rule). */
    padding-right: calc(var(--space-2) + 10px + var(--space-1));
    background-position: right var(--space-2) center;
    font-size: 12.5px;
  }

  /* --- Theme switch (segmented control) ---------------------------------- */
  .theme-switch {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: var(--bg-primary);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-md);
  }
  .theme-opt {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 12.5px;
    padding: 5px 10px;
    border: none;
    background: none;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
  }
  .theme-opt:hover { background: none; color: var(--text-primary); transform: none; }
  .theme-opt[aria-pressed="true"] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 500;
    box-shadow: 0 0 0 0.5px var(--border);
  }

  /* --- Content container ------------------------------------------------- */
  main {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-5) var(--space-10);
  }

  /* Page header: title row with optional trailing actions. */
  .page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
  }
  /* Titles carry user content (project and brand names); `anywhere` lets the
     flex item shrink past a long unbroken name instead of overflowing. */
  .page-header h1 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
  .page-header-copy { min-width: 0; }
  .page-header-copy > .muted { margin: var(--space-1) 0 0; }

  /* Project-local navigation. This deliberately overrides the generic shell
     `nav` rules above: it is an in-page location strip, not another sticky app
     bar. All three project destinations use the same order and current state. */
  nav.project-subnav {
    position: static;
    z-index: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin: calc(-1 * var(--space-2)) 0 var(--space-5);
    padding: 0 0 var(--space-3);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-bottom: 0.5px solid var(--border);
    font-size: 12.5px;
  }
  .project-subnav a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    /* Tab selection must snap when Turbo replaces the page. Inheriting the
       shell-nav transition makes the old/new active backgrounds cross-fade. */
    transition: none;
  }
  .project-subnav a:hover { color: var(--text-primary); background: var(--bg-tertiary); text-decoration: none; }
  /* The extra nav specificity keeps :hover from overriding the selected tab
     while the pointer remains over the link that initiated navigation. */
  nav.project-subnav .project-subnav-link.active,
  nav.project-subnav .project-subnav-link[aria-current="page"] {
    color: var(--text-primary);
    background: var(--accent-soft);
  }
  .project-subnav-back { padding-left: 0 !important; }
  .project-subnav-divider { width: 0.5px; height: 18px; margin: 0 var(--space-1); background: var(--border-strong); }

  /* Quota feedback shares one compact status treatment. Resource pressure
     adds warning color at 80%; report-cost feedback stays neutral until the
     projected run exceeds the remaining credits. */
  .quota-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 11.5px;
    white-space: nowrap;
  }
  .quota-pressure.is-high {
    border-color: var(--warning-border);
    background: var(--warning-bg);
    color: var(--warning-text);
  }
  .quota-status.is-full {
    border-color: var(--danger-border);
    background: var(--danger-bg);
    color: var(--danger-text);
  }

  .action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
  }
  .action-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

  .danger-zone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-8);
    padding-top: var(--space-4);
    border-top: 0.5px solid var(--border);
  }
  .danger-zone p { margin: 0; }
  .record-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

  .section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin: var(--space-6) 0 var(--space-3);
  }
  .section-header h2 { margin: 0; }

  /* --- Centered auth card ------------------------------------------------ */
  .auth-card {
    max-width: 380px;
    margin: var(--space-8) auto;
    background: var(--bg-primary);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6) var(--space-6) var(--space-5);
  }
  .auth-card h1 { margin-bottom: var(--space-5); }
  .auth-card input[type="text"],
  .auth-card input[type="email"],
  .auth-card input[type="password"] { width: 100%; }
  .auth-card input[type="submit"],
  .auth-card .btn { width: 100%; margin-top: var(--space-1); }
  .auth-footer { text-align: center; margin-top: var(--space-4); }

  /* --- Narrow screens ----------------------------------------------------- */
  @media (max-width: 640px) {
    /* The bar wraps to several rows on a phone; static (not sticky) so those
       rows scroll away instead of permanently shadowing the viewport. */
    nav,
    .app-bar {
      position: static;
      padding: var(--space-2) var(--space-4);
      gap: var(--space-2);
    }

    /* A long organization name mustn't let the switcher outgrow the bar. */
    nav select { max-width: 50vw; }

    main { padding: var(--space-5) var(--space-4) var(--space-8); }
    nav.project-subnav { padding: 0 0 var(--space-3); }
  }
}

@layer utilities {
  .muted { color: var(--text-secondary); font-size: 12.5px; }
  td.muted { white-space: nowrap; color: var(--text-tertiary); }

  .spacer { flex: 1; }

  /* Horizontal group of inline actions/links with consistent spacing. */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
  }

  .text-right { text-align: right; }

  /* Horizontal scroll region for wide data tables (the multi-metric report
     tables) so they never push the page sideways on a narrow screen. The table
     fills the width when it fits and scrolls within this box when it doesn't.
     A soft haze marks an edge with clipped columns behind it: the shadow
     gradients pin to the box while the surface-colored covers scroll with the
     content (`local`), so each hint shows only while there is more that way. */
  .table-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
    background:
      linear-gradient(to right, var(--bg-primary) 40%, transparent) left center,
      linear-gradient(to left, var(--bg-primary) 40%, transparent) right center,
      radial-gradient(farthest-side at 0 50%, var(--scroll-shadow), transparent) left center,
      radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow), transparent) right center;
    background-repeat: no-repeat;
    background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  .table-scroll > table { min-width: 100%; width: max-content; }
  /* These tables are figure-dense (a column per metric); tighter gutters fit
     more of them before the box has to scroll. The enclosing card's padding
     already insets the edge columns. */
  .table-scroll th, .table-scroll td { padding-inline: var(--space-2); }
  .table-scroll th:first-child, .table-scroll td:first-child { padding-left: 0; }
  .table-scroll th:last-child, .table-scroll td:last-child { padding-right: 0; }

  .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}