/* tt-polish.css — Elm app seam polish (Phase 2a, pass 1).
 *
 * Loaded LAST (after CDN Bootstrap 4 + the compiled customLight/Dark theme +
 * tt.css), so these rules win by source order. Goal: nudge the Bootstrap-4
 * component *feel* toward the Galaxy/Tailwind marketing aesthetic WITHOUT
 * touching any Elm markup — larger corner radii (Galaxy ≈0.5rem vs Bootstrap's
 * 0.25rem), softer/more diffuse shadows, and calmer buttons. Brand colors +
 * fonts already match across the seam (the design tokens were extracted from
 * this app), so this is purely component polish.
 *
 * Kept as plain CSS overrides because the SCSS toolchain (node-sass) no longer
 * builds on Node 22. Fold these into customLight/Dark.scss variables when the
 * daisyUI / Phase 2b work rebuilds the theme.
 */

:root {
  --tt-radius: 0.5rem;
}

/* ── Page background: match the Astro/Galaxy surface (Tailwind zinc) instead of
 *    pure black / white, so the app<->marketing seam doesn't jump. Astro uses
 *    light = zinc-100 (#f4f4f5), dark = zinc-900 (#18181b). ── */
@media (prefers-color-scheme: light) {
  body {
    background-color: #f4f4f5;
  }
  .bg-light {
    background-color: #f4f4f5 !important;
  }
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: #18181b;
  }
  .bg-dark {
    background-color: #18181b !important;
  }
}

/* ── Centered menu (Astro-style): center the primary nav between the brand
 *    (left) and the auth/profile buttons (right), instead of left-aligning it
 *    right after the brand. `mx-auto` is Bootstrap's canonical center-nav — the
 *    left+right auto margins center .navbar-nav and push the (auto-margin-free)
 *    custom auth items out to the right edge. ── */
.navbar-nav {
  margin-left: auto;
  margin-right: auto;
}

/* Inset the whole nav into a centered max-width band matching Astro's
 * site-container (max-w-[1100px], mx-auto), so the brand/logo sits at the band's
 * left edge — like Astro — instead of flush in the viewport corner. The nav
 * background already equals the page background (zinc), so the band is seamless. */
.navbar {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Brand: match Astro's SiteLogo — 1.5rem wordmark (text-2xl), laid out with
 * flex + items-center + a small gap so the 56px mark and text align cleanly.
 * (The 56px mark and its crisp source, logo_bold.png 500×500, are set in
 * Main.elm's Navbar.brand.) */
.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
}

/* ── Corner radius: Bootstrap 0.25rem → Galaxy ~0.5rem ── */
.btn,
.card,
.modal-content,
.dropdown-menu,
.form-control,
.list-group,
.jumbotron {
  border-radius: var(--tt-radius);
}
.card-header {
  border-top-left-radius: var(--tt-radius);
  border-top-right-radius: var(--tt-radius);
}
.card-footer {
  border-bottom-left-radius: var(--tt-radius);
  border-bottom-right-radius: var(--tt-radius);
}
.list-group-item:first-child {
  border-top-left-radius: var(--tt-radius);
  border-top-right-radius: var(--tt-radius);
}
.list-group-item:last-child {
  border-bottom-left-radius: var(--tt-radius);
  border-bottom-right-radius: var(--tt-radius);
}
.btn-lg {
  border-radius: calc(var(--tt-radius) + 0.125rem);
}
.btn-sm {
  border-radius: calc(var(--tt-radius) - 0.125rem);
}

/* ── Softer, more diffuse shadows on surfaces (less boxy, more Galaxy) ── */
.card,
.jumbotron,
.list-group,
.modal-content {
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.04),
    0 10px 28px rgba(16, 24, 40, 0.07);
}

/* ── Calmer buttons: drop the heavy per-button Stripe shadow (reads dated);
 *    keep a subtle lift + smooth hover instead. ── */
.btn:not(.dropdown-item) {
  box-shadow: none;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background-color 0.12s ease,
    border-color 0.12s ease;
}
.btn:not(.dropdown-item):hover {
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.12);
}
.btn:not(.dropdown-item):active {
  transform: translateY(0.5px);
}
.btn-primary {
  font-weight: 500;
}

/* ── Dark mode: align the whole surface family to Astro's zinc scale (was the
 *    Apple gray palette), mapping by scale position (gray-N → zinc-N). Astro
 *    dark: page = zinc-900 (#18181b), surfaces ≈ zinc-800 (#27272a), borders ≈
 *    zinc-700 (#3f3f46). (Astro's literal --card token is near-black; a
 *    conventional one-step elevation reads better for this card-heavy app.)
 *    Panels also get a hairline border instead of a shadow. ── */
@media (prefers-color-scheme: dark) {
  /* Surfaces: gray-800 (#2c2c2e) → zinc-800 (#27272a) */
  .card-header,
  .card-body,
  .card-footer,
  .modal-content,
  .jumbotron,
  .grid-row-odd {
    background-color: #27272a;
  }
  /* Second grid row: gray-700 (#3a3a3c) → zinc-700 (#3f3f46) */
  .grid-row-even {
    background-color: #3f3f46;
  }
  /* Inactive Influencers tab: gray-500 (#8e8e93) → zinc-500 (#71717a) */
  .nav-tabs .nav-link {
    background-color: #71717a;
  }
  /* Panel definition via hairline border (zinc-700), no shadow */
  .card,
  .modal-content,
  .list-group,
  .jumbotron {
    box-shadow: none;
    border: 1px solid #3f3f46;
  }
}