/* Layout chrome — app/views/layouts/application.html.erb
 *
 * Hosts the body styling, demo banner, pending-connection banners,
 * fixed top nav (desktop + mobile menu), main wrapper, alerts/notices,
 * and footer. Self-contained — replaces the raw Tailwind class strings
 * that previously lived in the layout ERB.
 */

/* ============ Turbo progress bar ============ */
.turbo-progress-bar {
  height: 2px;
  background: var(--brand-gradient);
}

/* Body — chrome backdrop, flex column for sticky footer.
 * Uses --background-base (the brand's semantic page-background token)
 * so the body differs from the footer's --background-surface-1 in
 * dark mode (where raw grey-900 coincides with surface-1). */
.app-body {
  background-color: var(--background-base);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Main page scrollbar — recolor to match the multiselect menu's custom
 * scrollbar (background-highlight thumb over a transparent track) while
 * keeping the browser's native scrollbar width. Uses only the standard
 * `scrollbar-color` property (not `::-webkit-scrollbar`, which would force
 * a width and change the size). */
html {
  scrollbar-color: var(--background-highlight) transparent;
}

/* ============ Demo banner ============ */
.demo-banner {
  position: fixed;
  top: var(--spacing-0);
  left: var(--spacing-0);
  right: var(--spacing-0);
  z-index: 50;
  background-color: var(--background-surface-2);   /* informational accent */
  color: var(--text-primary);
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
              0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.demo-banner-row {
  max-width: var(--width-1296);
  margin-inline: auto;
  padding-inline: var(--spacing-16);
  padding-block: var(--spacing-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8);

  @media (min-width: 40rem) { gap: var(--spacing-16); }
}

.demo-banner-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  flex-shrink: 0;

  @media (min-width: 40rem) { gap: var(--spacing-16); }
}

.demo-banner-link { font-weight: var(--font-weight-500); text-decoration: underline; }

.demo-banner-exit {
  opacity: 0.75;

  &:hover { opacity: 1; }
}

.demo-banner-spacer { height: 2.25rem; /* Note: bespoke nav spacer height */ }

/* ============ Pending connection banners ============ */
.pending-banner {
  background-color: var(--background-surface-1);
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  border-bottom-width: var(--stroke-weight-2);
  border-bottom-style: solid;
}

.pending-banner--info,
.pending-banner--success { border-bottom-color: var(--border-default); }

.pending-banner-row {
  max-width: var(--width-1296);
  margin-inline: auto;
  padding-inline: var(--spacing-16);
  padding-block: var(--spacing-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
}

.pending-banner-text--info,
.pending-banner-text--success { color: var(--text-primary); }

.pending-banner-action {
  font-weight: var(--font-weight-500);
  text-decoration: underline;
  flex-shrink: 0;
  color: var(--text-primary);
}

.pending-banner-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  flex-shrink: 0;
}

.pending-banner-dismiss {
  color: var(--text-primary);

  &:hover { color: var(--text-primary); }
}

.pending-banner-dismiss-icon { width: 1rem; height: 1rem; }

/* ============ Main wrapper ============ */
.app-main,
.app-main--full-bleed {
  flex: 1 1 0%;
  width: 100%;
  /* Standard gutter between page content and the footer. Lives on the main
     wrapper (not the footer) so it applies on both layout variants and on
     footer-less pages like the agent, which hide the footer and rely on this
     for their bottom breathing room. */
  padding-bottom: var(--spacing-32);
}
.app-main {
  max-width: 1152px; /* Note: app-owned reading width; brand --width-1296 reserved for landing/marketing */
  margin-inline: auto;
  padding-inline: var(--spacing-16);
  padding-top: 7rem; /* Note: clears fixed nav (80px) + breathing room */
}

/* Mobile needs less clearance than the desktop nav does. */
@media (max-width: 47.999rem) {
  .app-main { padding-top: 5rem; }
}

/* Matches the landing `.container`: a 1296px-wide box with 48px side gutters
   (content 1200px), so dashboard content lines up with the navbar/landing
   instead of the narrower 1152px reading width. From tablet up the gutters go
   to 48px; on mobile the base 16px stays. */
.app-main--gutter { max-width: var(--width-1296); }
@media (min-width: 48rem) {
  .app-main--gutter { padding-inline: var(--spacing-48); }
}

/* Full-bleed alert/notice wrapper — restores the bounded width for the flash. */
.app-notice-wrap {
  max-width: var(--width-1296);
  margin-inline: auto;
  padding-inline: var(--spacing-16);
  padding-top: 7rem; /* Note: clears fixed nav */
}

/* Flat tinted block — no stroke, sm radius. The tone carries fill + copy. */
.app-notice {
  margin-bottom: var(--spacing-24);
  padding: var(--spacing-16);
  background-color: var(--background-surface-1);
  border-radius: var(--corner-radius-sm);
}

.app-notice--info  { color: var(--text-primary); }
.app-notice--error {
  background-color: var(--background-warning);
  color: var(--text-warning);
}

/* ============ Footer ============ */
.app-footer {
  margin-top: auto;
  padding-block: var(--spacing-48);
  background-color: var(--background-surface-1);
}

.app-footer-inner {
  max-width: var(--width-1296);
  margin-inline: auto;
  padding-inline: var(--spacing-16);
}