/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ── Brand tokens (Boards & More) ── */
:root {
  --bam-slate:  #465A64;
  --bam-grey:   #91979B;
  --bam-light:  #ECECEC;
  --font-base:  Arial, "HelveticaNowText", sans-serif;
}

/* ── Floating nav bar ── */
.nav {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 1000;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.10);
  font-family: var(--font-base);
}

.nav__bar {
  display: flex;
  align-items: center;
  padding: 0 28px;
  height: 72px;
}

.nav__brand {
  position: relative;
  text-decoration: none;
  margin-right: 32px;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.nav__brand-name {
  font-weight: 700;
  font-size: 26px;
  color: var(--bam-slate);
  letter-spacing: -0.5px;
}

.nav__brand-tagline {
  font-size: 12px;
  color: var(--bam-grey);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.nav__brand-heart {
  color: #e00;
  font-size: 1.5em;
  line-height: 1;
  vertical-align: middle;
}

.nav__brand[data-deploy]::after {
  content: attr(data-deploy);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: #1a1a1a;
  color: #f5f5f5;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s, transform 0.15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.nav__brand[data-deploy]:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.nav__menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
}

.nav__menu a {
  display: block;
  padding: 8px 16px;
  border-radius: 8px;
  color: #333;
  text-decoration: none;
  font-size: 16px;
  transition: background 0.15s;
}

.nav__menu a:hover {
  background: #f0f0f0;
}

.nav__menu a.active {
  background: var(--bam-light);
  font-weight: 600;
  color: var(--bam-slate);
}

/* Dropdown nav item */
.nav__dropdown {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.nav__dropdown-trigger {
  display: block;
  padding: 8px 16px;
  border-radius: 8px;
  color: #333;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  transition: background 0.15s;
  user-select: none;
}

.nav__dropdown-trigger:hover,
.nav__dropdown--open .nav__dropdown-trigger {
  background: #f0f0f0;
}

.nav__dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  padding: 6px;
  list-style: none;
  margin: 0;
  z-index: 200;
  min-width: 160px;
}

.nav__dropdown--open .nav__dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav__dropdown-menu li a {
  display: block;
  padding: 7px 12px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  border-radius: 6px;
  white-space: nowrap;
  background: none;
}

.nav__dropdown-menu li a:hover {
  background: #f0f0f0;
}

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 4px;
  margin-right: 12px;
}

.nav__burger span {
  display: block;
  height: 2px;
  background: #333;
  border-radius: 2px;
  width: 100%;
}

/* BAM logo in nav */
.nav__bam-logo {
  height: 22px;
  width: auto;
  opacity: 0.75;
  margin-right: 12px;
  vertical-align: middle;
  color: var(--bam-slate);
}

/* User info tooltip on logout */
.nav__user-info {
  margin-left: auto;
  position: relative;
}

.nav__user-info a {
  margin-left: 0 !important;
}

.nav__user-info::after {
  content: attr(data-user);
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: #1a1a1a;
  color: #f5f5f5;
  font-size: 12px;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s, transform 0.15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.nav__user-info:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* Push page content below the fixed nav */
.main-content {
  padding-top: 96px;
}

/* Dashboard */
.dashboard {
  max-width: 900px;
  margin: 48px auto;
  padding: 0 24px;
}

.dashboard__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.dashboard__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 20px;
  background: var(--bam-slate);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  color: #fff;
  transition: box-shadow 0.15s, transform 0.15s;
  text-align: center;
}

.dashboard__card:hover {
  box-shadow: 0 6px 24px rgba(70, 90, 100, 0.35);
  transform: translateY(-3px);
}

.dashboard__card-icon {
  font-size: 48px;
  line-height: 1;
  opacity: 0.85;
}

.dashboard__card-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  opacity: 0.9;
}

.dashboard__section {
  margin-top: 40px;
}

.dashboard__section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bam-grey);
  margin: 0 0 12px 4px;
  font-family: var(--font-base);
}

/* Collapsible JSON tree */
.struct-dump-container { list-style: none; margin: 0; padding: 0 0 0 16px; font-family: monospace; font-size: 12px; line-height: 1.6; }
.struct-dump-container-root { padding-left: 0; }
.struct-dump-key strong { color: #333; }
.struct-dump-value { color: #555; word-break: break-all; }
.struct-dump-container li { margin: 1px 0; }
.cursor-pointer { cursor: pointer; }
.hidden { display: none; }

/* Mobile */
@media (max-width: 640px) {
  .nav__burger {
    display: flex;
  }

  .nav__menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    flex-direction: column;
    padding: 8px;
    gap: 2px;
  }

  .nav__menu--open {
    display: flex;
  }

  .nav__menu a {
    padding: 10px 14px;
  }
}

/* JSON viewer toggle */
[data-controller="json-viewer"] { position: relative; }
.json-viewer-toggle {
  position: absolute; top: 0; right: 0;
  background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 4px;
  padding: 1px 6px; font-size: 11px; cursor: pointer;
  color: #6b7280; font-family: monospace; line-height: 1.6;
}
.json-viewer-toggle:hover { background: #e5e7eb; color: #111; }
@import "demo_beach_deal.css";

/* ── Flash toasts ── */
@keyframes flash-in  { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes flash-out { from { opacity: 1; } to { opacity: 0; } }

.flash {
  position: fixed;
  top: 96px;
  right: 16px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font-base);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  min-width: 240px;
  max-width: 420px;
  animation: flash-in .2s ease;
}
.flash--notice { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.flash--alert  { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.flash--hiding { animation: flash-out .3s ease forwards; }
.flash__close  {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: inherit;
  opacity: .6;
  padding: 0 2px;
}
.flash__close:hover { opacity: 1; }
@import "tools/prompt_rules.css";