/* ─────────────────────────────────────────────────────────────
   BowlRx Portal · Design System (standalone, static)
   Ported from the BowlRx Design System v1.0 mockup
   (_docs/.../design/assets/colors_and_type.css + src/*.jsx).

   Loaded via a plain <link> on public portal pages — NOT processed
   by Tailwind/Vite. Every class is namespaced (.bx- / .bxp-) so it
   is additive and never collides with DaisyUI or Filament.
   ──────────────────────────────────────────────────────────── */

:root {
  --bx-red:    #D81B30;
  --bx-blue:   #2461D8;
  --bx-ink:    #0A1A2F;
  --bx-ink2:   #1F2D44;
  --bx-success:#1F8A5B;
  --bx-paper:  #FFFFFF;
  --bx-surface:#F7F8FA;
  --bx-line:   #E2E6EE;
  --bx-soft:   #CBD2DE;
  --bx-mute:   #5B6B7C;
  --bx-text7:  #3A4A5F;
  --bx-text8:  #1F2D44;
  --bx-red50:  #FDECEE;
  --bx-blue50: #EDF1FB;
  --bx-sand:   #F4DDB8;

  --bx-positive-bg:#E5F4EC; --bx-positive-fg:#1F8A5B; --bx-positive-br:#BDE3CF;
  --bx-warning-bg: #FCF1D9; --bx-warning-fg: #8A6512; --bx-warning-br: #F1DDA3;
  --bx-negative-bg:#FDECEE; --bx-negative-fg:#D81B30; --bx-negative-br:#F6C4CA;
  --bx-info-bg:    #EDF1FB; --bx-info-fg:    #2461D8; --bx-info-br:    #C8D5F2;

  --bx-font: "Space Grotesk", "Inter", system-ui, sans-serif;
  --bx-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --bx-radius-md: 8px;
  --bx-radius-lg: 10px;
  --bx-radius-xl: 16px;
  --bx-radius-pill: 999px;
  --bx-maxw: 1280px;
}

[x-cloak] { display: none !important; }

/* ─── Typography ───────────────────────────────────────────── */
.bx-display-xl, .bx-display-l, .bx-h1, .bx-h2, .bx-h3,
.bx-body-lg, .bx-body, .bx-caption, .bx-eyebrow, .bx-stat {
  font-feature-settings: "ss02", "cv11";
  margin: 0;
}
.bx-display-xl { font-family: var(--bx-font); font-weight: 500; font-size: 80px; line-height: .95; letter-spacing: -.035em; color: var(--bx-ink); }
.bx-display-l  { font-family: var(--bx-font); font-weight: 500; font-size: 56px; line-height: 1;   letter-spacing: -.030em; color: var(--bx-ink); }
.bx-h1         { font-family: var(--bx-font); font-weight: 500; font-size: 40px; line-height: 1.05;letter-spacing: -.025em; color: var(--bx-ink); }
.bx-h2         { font-family: var(--bx-font); font-weight: 500; font-size: 28px; line-height: 1.15;letter-spacing: -.020em; color: var(--bx-ink); }
.bx-h3         { font-family: var(--bx-font); font-weight: 500; font-size: 20px; line-height: 1.25;letter-spacing: -.015em; color: var(--bx-ink); }
.bx-body-lg    { font-family: var(--bx-font); font-weight: 400; font-size: 17px; line-height: 1.55;color: var(--bx-text7); }
.bx-body       { font-family: var(--bx-font); font-weight: 400; font-size: 15px; line-height: 1.55;color: var(--bx-text7); }
.bx-caption    { font-family: var(--bx-mono); font-weight: 400; font-size: 12px; line-height: 1.5; letter-spacing: .04em; color: var(--bx-mute); }
.bx-eyebrow    { font-family: var(--bx-mono); font-weight: 400; font-size: 10px; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; color: var(--bx-mute); }
.bx-mono       { font-family: var(--bx-mono); font-feature-settings: "tnum","zero"; }
.bx-stat       { font-family: var(--bx-font); font-weight: 500; letter-spacing: -.025em; font-feature-settings: "tnum"; }
.bx-link       { color: var(--bx-blue); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ─── Layout helpers ───────────────────────────────────────── */
.bxp { font-family: var(--bx-font); color: var(--bx-ink); }
.bxp-wrap { max-width: var(--bx-maxw); margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.bxp-fill { width: 100%; }
.bxp-paper   { background: var(--bx-paper); }
.bxp-surface { background: var(--bx-surface); }
.bxp-ink     { background: var(--bx-ink); color: var(--bx-paper); }
.bxp-divider-t { border-top: 1px solid var(--bx-line); }
.bxp-divider-b { border-bottom: 1px solid var(--bx-line); }

.bxp-grid { display: grid; gap: 16px; }
.bxp-grid-2 { grid-template-columns: repeat(2, 1fr); }
.bxp-grid-3 { grid-template-columns: repeat(3, 1fr); }
.bxp-grid-4 { grid-template-columns: repeat(4, 1fr); }
.bxp-grid-sidebar { grid-template-columns: 1.6fr 1fr; }
.bxp-grid-rail { grid-template-columns: 220px 1fr; align-items: start; }
.bxp-flex { display: flex; }
.bxp-items-center { align-items: center; }
.bxp-justify-between { justify-content: space-between; }
.bxp-gap-6 { gap: 6px; } .bxp-gap-8 { gap: 8px; } .bxp-gap-10 { gap: 10px; }
.bxp-gap-12 { gap: 12px; } .bxp-gap-16 { gap: 16px; } .bxp-gap-24 { gap: 24px; }
.bxp-wrapflex { flex-wrap: wrap; }

/* ─── Icon helper (inline svg stroke) ──────────────────────── */
.bxp-ico { display: inline-block; flex-shrink: 0; vertical-align: middle; }

/* ─── Buttons ──────────────────────────────────────────────── */
.bxp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--bx-font); font-weight: 500; letter-spacing: -.005em;
  border: 1px solid transparent; border-radius: var(--bx-radius-md);
  padding: 10px 16px; font-size: 13.5px; cursor: pointer;
  transition: all 120ms; text-decoration: none; white-space: nowrap;
}
.bxp-btn-sm { padding: 6px 12px; font-size: 12.5px; gap: 6px; }
.bxp-btn-lg { padding: 13px 20px; font-size: 15px; }
.bxp-btn-primary   { background: var(--bx-ink);   color: var(--bx-paper); }
.bxp-btn-primary:hover   { background: #15294a; }
.bxp-btn-secondary { background: var(--bx-paper); color: var(--bx-ink); border-color: var(--bx-line); }
.bxp-btn-secondary:hover { border-color: var(--bx-soft); }
.bxp-btn-ghost     { background: transparent; color: var(--bx-ink); }
.bxp-btn-ghost:hover { background: var(--bx-surface); }
.bxp-btn-danger    { background: var(--bx-red); color: var(--bx-paper); }
.bxp-btn-danger:hover { background: #b81428; }
.bxp-btn-block { width: 100%; }
.bxp-btn:disabled, .bxp-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ─── Badge ────────────────────────────────────────────────── */
.bxp-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: var(--bx-radius-pill);
  font-family: var(--bx-mono); font-size: 11px; letter-spacing: .04em;
  background: var(--bx-surface); color: var(--bx-ink); border: 1px solid var(--bx-line);
}
.bxp-badge-positive { background: var(--bx-positive-bg); color: var(--bx-positive-fg); border-color: var(--bx-positive-br); }
.bxp-badge-warning  { background: var(--bx-warning-bg);  color: var(--bx-warning-fg);  border-color: var(--bx-warning-br); }
.bxp-badge-negative { background: var(--bx-negative-bg); color: var(--bx-negative-fg); border-color: var(--bx-negative-br); }
.bxp-badge-info     { background: var(--bx-info-bg);     color: var(--bx-info-fg);     border-color: var(--bx-info-br); }

.bxp-dot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; }
.bxp-dot-success { background: var(--bx-success); }
.bxp-dot-red { background: var(--bx-red); }

/* ─── Cards ────────────────────────────────────────────────── */
.bxp-card {
  background: var(--bx-paper); border: 1px solid var(--bx-line);
  border-radius: 12px; padding: 22px;
}
.bxp-card-hover { transition: border-color 120ms; }
.bxp-card-hover:hover { border-color: var(--bx-blue); }

.bxp-section-card {
  background: var(--bx-paper); border: 1px solid var(--bx-line);
  border-radius: 12px; overflow: hidden;
}
.bxp-section-card.bxp-accent-red { border-left: 3px solid var(--bx-red); }
.bxp-section-head {
  padding: 22px 24px 14px; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 16px;
}
.bxp-section-body { padding: 14px 24px 24px; }
.bxp-section-body-flush { padding: 0; }
.bxp-section-head-bordered { border-bottom: 1px solid var(--bx-line); }

/* ─── Icon tile ────────────────────────────────────────────── */
.bxp-icon-tile {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--bx-surface); border: 1px solid var(--bx-line);
  display: inline-flex; align-items: center; justify-content: center;
}
.bxp-icon-tile-red  { background: var(--bx-red50);  border-color: var(--bx-negative-br); }
.bxp-icon-tile-blue { background: var(--bx-blue50); border-color: var(--bx-info-br); }

/* ─── Avatar ───────────────────────────────────────────────── */
.bxp-avatar {
  border-radius: 999px; background: var(--bx-ink); color: var(--bx-paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--bx-font); font-weight: 600; letter-spacing: -.02em;
  flex-shrink: 0; overflow: hidden; object-fit: cover;
}

/* ─── Forms ────────────────────────────────────────────────── */
.bxp-field { display: block; }
.bxp-label {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--bx-mono); font-size: 10px; color: var(--bx-mute);
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px;
}
.bxp-label .req { color: var(--bx-red); }
.bxp-hint {
  display: block; font-family: var(--bx-mono); font-size: 10.5px;
  color: var(--bx-mute); letter-spacing: .04em; margin-top: 6px;
}
.bxp-input {
  width: 100%; padding: 10px 12px; border-radius: var(--bx-radius-md);
  border: 1px solid var(--bx-line); background: var(--bx-paper);
  font-family: var(--bx-font); font-size: 14px; color: var(--bx-ink);
  outline: none; transition: border-color 120ms, box-shadow 120ms;
}
.bxp-input:focus { border-color: var(--bx-blue); box-shadow: 0 0 0 3px rgba(36,97,216,.13); }
.bxp-input:disabled { background: var(--bx-surface); color: var(--bx-mute); cursor: not-allowed; }
.bxp-input-lg { padding: 12px 14px; font-size: 15px; }

/* ─── Table ────────────────────────────────────────────────── */
.bxp-table { width: 100%; border-collapse: collapse; font-family: var(--bx-font); font-size: 14px; }
.bxp-table th {
  text-align: left; padding: 12px 18px; font-family: var(--bx-mono);
  font-size: 10px; color: var(--bx-mute); letter-spacing: .14em;
  text-transform: uppercase; font-weight: 400;
}
.bxp-table td { padding: 16px 18px; }
.bxp-table tbody tr { border-bottom: 1px solid var(--bx-line); }
.bxp-table tbody tr:last-child { border-bottom: none; }
.bxp-table thead tr { border-top: 1px solid var(--bx-line); border-bottom: 1px solid var(--bx-line); background: var(--bx-surface); }

/* ─── TopNav chrome ────────────────────────────────────────── */
.bxp-topnav {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bx-line);
}
.bxp-topnav-inner {
  max-width: var(--bx-maxw); margin: 0 auto;
  padding: 14px 32px; display: flex; align-items: center; gap: 28px;
}
.bxp-wordmark { display: inline-flex; align-items: center; gap: 12px; }
.bxp-wordmark img { display: block; width: auto; }
.bxp-kicker {
  font-family: var(--bx-mono); font-size: 9.5px; color: var(--bx-mute);
  letter-spacing: .16em; text-transform: uppercase;
  padding-left: 12px; border-left: 1px solid var(--bx-line);
}
.bxp-navlinks { display: none; gap: 22px; margin-left: 12px; }
@media (min-width: 1024px) { .bxp-navlinks { display: flex; } }
/* Hide the avatar's first-name label on small screens (keeps the pill compact) */
@media (max-width: 640px) { .bxp-hide-sm { display: none !important; } }
/* Mobile hamburger — shown only below the desktop-nav breakpoint */
.bxp-hamburger {
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid var(--bx-line); border-radius: 8px; background: var(--bx-paper);
}
@media (min-width: 1024px) { .bxp-hamburger { display: none; } }
.bxp-navlink {
  font-family: var(--bx-font); font-size: 13.5px; color: var(--bx-text7);
  padding: 4px 0; border-bottom: 2px solid transparent; text-decoration: none;
}
.bxp-navlink:hover { color: var(--bx-ink); }
.bxp-navlink.active { color: var(--bx-ink); font-weight: 500; border-bottom-color: var(--bx-red); }

.bxp-avatar-btn {
  border: 1px solid var(--bx-line); background: var(--bx-paper);
  padding: 3px 10px 3px 4px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; transition: border-color 120ms;
}
.bxp-avatar-btn:hover { border-color: var(--bx-ink); }
.bxp-menu {
  width: 260px; background: var(--bx-paper); border: 1px solid var(--bx-line);
  border-radius: 12px; box-shadow: 0 14px 32px rgba(10,26,47,.10); padding: 10px;
}
.bxp-menu-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 8px; cursor: pointer; text-decoration: none;
  font-family: var(--bx-font); color: var(--bx-ink); transition: background 120ms;
}
.bxp-menu-item:hover { background: var(--bx-surface); }

/* ─── Footer chrome ────────────────────────────────────────── */
.bxp-footer { background: var(--bx-ink); color: var(--bx-paper); }
.bxp-footer-inner { max-width: var(--bx-maxw); margin: 0 auto; padding: 56px 32px 28px; }
.bxp-footer-cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
.bxp-footer-title { font-family: var(--bx-mono); font-size: 10px; color: #9aa5b8; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
.bxp-footer-link { font-family: var(--bx-font); font-size: 13.5px; color: var(--bx-paper); opacity: .9; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.bxp-footer-link:hover { opacity: 1; }
.bxp-footer-bar {
  margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.10);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: var(--bx-mono); font-size: 10.5px; color: #9aa5b8;
  letter-spacing: .08em; text-transform: uppercase;
}

/* ─── Hero scrim ───────────────────────────────────────────── */
.bxp-hero { position: relative; overflow: hidden; }
.bxp-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bxp-hero-scrim { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(10,26,47,.78) 0%, rgba(10,26,47,.55) 45%, rgba(10,26,47,.82) 100%); }
.bxp-hero-inner { position: relative; max-width: var(--bx-maxw); margin: 0 auto; padding: 80px 32px 72px; }
.bxp-on-dark { color: var(--bx-paper); }
.bxp-eyebrow-sand { color: var(--bx-sand) !important; }

/* ─── Chips ────────────────────────────────────────────────── */
.bxp-chip {
  font-family: var(--bx-mono); font-size: 11px; color: var(--bx-text7);
  padding: 4px 10px; background: var(--bx-paper); border: 1px solid var(--bx-line);
  border-radius: 999px; letter-spacing: .04em;
}

/* ─── Misc helpers ─────────────────────────────────────────── */
.bxp-method-active { border-color: var(--bx-blue) !important; background: var(--bx-blue50); }
.bxp-tab { font-family: var(--bx-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--bx-line); background: var(--bx-paper); color: var(--bx-text7); cursor: pointer; }
.bxp-tab-active { background: var(--bx-ink); color: var(--bx-paper); border-color: var(--bx-ink); }
.bxp-err { font-family: var(--bx-mono); font-size: 10.5px; color: var(--bx-red); letter-spacing: .04em; margin-top: 6px; display: block; }

.bxp-status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--bx-mono); font-size: 10.5px; color: var(--bx-mute);
  letter-spacing: .08em; text-transform: uppercase;
}

/* ─── Light touch-up for the wrapped Filament profile form ───
   The profile General page keeps its Livewire/Filament form; nudge
   its inputs toward the design without restructuring the markup. */
.bxp-fi-scope .fi-input,
.bxp-fi-scope .fi-select-input,
.bxp-fi-scope input[type="text"],
.bxp-fi-scope input[type="email"],
.bxp-fi-scope input[type="tel"] {
  border-radius: var(--bx-radius-md);
}
.bxp-fi-scope .fi-fieldset-label,
.bxp-fi-scope .fi-fo-field-wrp-label {
  font-family: var(--bx-mono); letter-spacing: .06em; text-transform: uppercase; font-size: 11px;
}

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .bxp-footer-cols { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 900px) {
  .bxp-grid-3, .bxp-grid-4 { grid-template-columns: 1fr; }
  .bxp-grid-sidebar, .bxp-grid-rail { grid-template-columns: 1fr; }
  /* collapse inline-ratio 2-col grids (overrides inline style) */
  .bxp-2col { grid-template-columns: 1fr !important; gap: 28px !important; }
  .bxp-wrap, .bxp-topnav-inner, .bxp-hero-inner, .bxp-footer-inner { padding-left: 20px; padding-right: 20px; }
  .bx-display-xl { font-size: 52px; }
  .bx-display-l  { font-size: 40px; }
  .bx-h1 { font-size: 32px; }
  .bxp-hero-inner { padding-top: 56px; padding-bottom: 52px; }
}
@media (max-width: 640px) {
  .bxp-grid-2 { grid-template-columns: 1fr; }
  .bxp-footer-cols { grid-template-columns: 1fr; gap: 24px; }
  .bx-display-xl { font-size: 40px; }
  .bx-display-l  { font-size: 32px; }
}