/* 6LG site-wide component system. Command Center nav is the default visual language. */

html,
body {
  background: var(--site-bg);
}

body {
  color: var(--site-text);
  font-family: var(--site-font-ui);
  background:
    radial-gradient(circle at 42% 0%, rgba(155,255,0,.10), transparent 24%),
    radial-gradient(circle at 86% 58%, rgba(155,255,0,.055), transparent 24%),
    linear-gradient(180deg, var(--site-bg), #010202 78%);
}

.cb-theme-command-center {
  color: var(--site-text);
  font-family: var(--site-font-ui);
}

h1,h2,h3,h4,h5,h6,
strong,b,
.brand-title,
.eyebrow,
.nav-link,
.btn,
.topbar h1,
.status-chip,
.sidebar-label,
th,
.stat-row strong,
.ops-nav a,
.ops-btn,
.ops-card h3 {
  font-family: var(--site-font-display) !important;
  letter-spacing: .07em;
  text-transform: uppercase;
}

p,
small,
.panel,
.sidebar-copy,
.ops-card,
.ops-main,
.ops-profile,
.ops-nav small,
.daily-row,
.rival,
.pilot-row,
.hero-title p {
  font-family: var(--site-font-ui) !important;
}

/* Global panels/cards */
.sidebar-card,
.panel,
.slot-card,
.rsvp-modal-card,
.rsvp-modal,
.map-shell,
.inset-panel,
.ops-card {
  border-color: rgba(155,255,0,.16) !important;
  background:
    linear-gradient(180deg, rgba(8,15,10,.92), rgba(3,6,5,.95)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 12px 28px rgba(0,0,0,.28) !important;
}

/* Global sidebar */
.sidebar {
  background:
    radial-gradient(circle at 45% 8%, rgba(155,255,0,.12), transparent 28%),
    linear-gradient(180deg, rgba(5,10,7,.98), rgba(2,4,3,.99)) !important;
  border-right: 1px solid rgba(155,255,0,.22) !important;
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,.04),
    18px 0 40px rgba(0,0,0,.32) !important;
}

.brand {
  border: 1px solid rgba(155,255,0,.16) !important;
  background:
    linear-gradient(135deg, rgba(155,255,0,.08), rgba(0,0,0,.10)) !important;
  clip-path: polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  padding: 12px !important;
}

.brand-logo,
.topbar-logo {
  filter: drop-shadow(0 0 14px rgba(155,255,0,.32));
}

.eyebrow {
  color: var(--site-accent) !important;
}

.brand-title {
  color: var(--site-text) !important;
}

/* Command Center default nav */
.nav {
  display: grid;
  gap: 12px !important;
}

.nav-link {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 58px;
  padding: 0 34px 0 18px !important;
  border: 1px solid rgba(155,255,0,.14) !important;
  border-radius: 0 !important;
  clip-path: polygon(
    0 0,
    calc(100% - 16px) 0,
    100% 16px,
    100% 100%,
    16px 100%,
    0 calc(100% - 16px)
  );
  background:
    linear-gradient(180deg, rgba(14,20,16,.80), rgba(4,7,6,.92)),
    radial-gradient(circle at 18% 50%, rgba(155,255,0,.07), transparent 28%) !important;
  color: var(--site-text) !important;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 800 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    inset 0 -16px 24px rgba(0,0,0,.36),
    0 12px 18px rgba(0,0,0,.24) !important;
  overflow: hidden;
  transition:
    transform .12s ease,
    border-color .14s ease,
    box-shadow .14s ease,
    background .14s ease;
}

.nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgba(155,255,0,.38);
  box-shadow: 0 0 12px rgba(155,255,0,.26);
  transition: width .14s ease, box-shadow .14s ease;
}

.nav-link::after {
  content: "›";
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-52%);
  font-size: 24px;
  color: #f2f7ee;
  opacity: .84;
}

.nav-link:hover,
.nav-link.is-active {
  transform: translateX(4px);
  color: #fff !important;
  border-color: rgba(155,255,0,.65) !important;
  background:
    linear-gradient(180deg, rgba(38,82,18,.48), rgba(5,10,6,.94)),
    radial-gradient(circle at 18% 50%, rgba(155,255,0,.28), transparent 38%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(220,255,170,.10),
    inset 0 0 22px rgba(155,255,0,.10),
    0 0 22px rgba(155,255,0,.14),
    0 12px 20px rgba(0,0,0,.34) !important;
}

.nav-link:hover::before,
.nav-link.is-active::before {
  width: 8px;
  background: var(--site-accent);
  box-shadow:
    0 0 14px var(--site-accent),
    0 0 24px rgba(155,255,0,.28);
}

/* Global buttons */
.btn,
.ops-btn {
  border-radius: 0 !important;
  clip-path: polygon(
    0 0,
    calc(100% - 10px) 0,
    100% 10px,
    100% 100%,
    10px 100%,
    0 calc(100% - 10px)
  );
  font-family: var(--site-font-display) !important;
}

.btn-primary,
.btn-secondary,
.ops-btn.primary {
  background: linear-gradient(135deg,#9bff00,#4f9700) !important;
  color: #071006 !important;
  border-color: rgba(155,255,0,.44) !important;
  box-shadow: 0 0 18px rgba(155,255,0,.18);
}

.btn-ghost {
  border-color: rgba(155,255,0,.22) !important;
  color: var(--site-text) !important;
}

/* Forms */
input,
select,
textarea {
  border-color: rgba(155,255,0,.18) !important;
  background: rgba(2,5,4,.82) !important;
  color: var(--site-text) !important;
}

th,
.panel-subtitle,
.sidebar-copy,
.muted,
.slot-role,
.pilot-meta {
  color: var(--site-muted) !important;
}

/* Page topbar */
.topbar {
  border-bottom: 1px solid rgba(155,255,0,.18) !important;
}

/* Exact homepage button system. Copied from Command Center .ops-nav/.ops-btn and shared site-wide. */
.sidebar .nav,
.site-nav,
.ops-nav {
  display: grid !important;
  gap: 12px !important;
}

.sidebar .nav-link,
.site-nav a,
.ops-nav a {
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  grid-template-columns: 38px 1fr auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 70px !important;
  height: 70px !important;
  padding: 0 14px !important;
  color: #edf3e8 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  border: 1px solid rgba(155,255,0,.14) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(14,20,16,.80), rgba(4,7,6,.92)),
    radial-gradient(circle at 18% 50%, rgba(155,255,0,.07), transparent 28%) !important;
  clip-path: polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    inset 0 -16px 24px rgba(0,0,0,.36),
    0 12px 18px rgba(0,0,0,.24) !important;
  transition: transform .12s ease,border-color .14s ease,box-shadow .14s ease,background .14s ease !important;
  overflow: hidden !important;
}

.sidebar .nav-link::before,
.site-nav a::before,
.ops-nav a::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  width: auto !important;
  height: auto !important;
  background:
    linear-gradient(90deg, rgba(155,255,0,.10), transparent 20%, transparent 80%, rgba(155,255,0,.06)),
    linear-gradient(rgba(155,255,0,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155,255,0,.02) 1px, transparent 1px) !important;
  background-size: auto,16px 16px,16px 16px !important;
  opacity: .36 !important;
  box-shadow: none !important;
}

.sidebar .nav-link::after,
.site-nav a::after,
.ops-nav a::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  right: auto !important;
  width: 4px !important;
  height: auto !important;
  transform: none !important;
  background: rgba(155,255,0,.38) !important;
  box-shadow: 0 0 12px rgba(155,255,0,.26) !important;
  transition: width .14s ease,opacity .14s ease,box-shadow .14s ease !important;
}

.sidebar .nav-link .ico,
.site-nav a .ico,
.ops-nav a .ico {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(0,0,0,.28) !important;
  color: #d8ffd0 !important;
  clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px) !important;
  text-shadow: 0 0 8px rgba(155,255,0,.28) !important;
}

.sidebar .nav-link small,
.site-nav a small,
.ops-nav a small {
  display: block !important;
  margin-top: 6px !important;
  color: #a8b4a1 !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
  font-weight: 650 !important;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.is-active,
.site-nav a:hover,
.site-nav a.is-active,
.site-nav a.active,
.ops-nav a:hover,
.ops-nav a.active,
.ops-nav a.is-active {
  transform: translateX(4px) !important;
  color: #fff !important;
  border-color: rgba(155,255,0,.65) !important;
  background:
    linear-gradient(180deg, rgba(38,82,18,.48), rgba(5,10,6,.94)),
    radial-gradient(circle at 18% 50%, rgba(155,255,0,.28), transparent 38%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(220,255,170,.10),
    inset 0 0 22px rgba(155,255,0,.10),
    0 0 22px rgba(155,255,0,.14),
    0 12px 20px rgba(0,0,0,.34) !important;
}

.sidebar .nav-link:hover::after,
.sidebar .nav-link.is-active::after,
.site-nav a:hover::after,
.site-nav a.is-active::after,
.site-nav a.active::after,
.ops-nav a:hover::after,
.ops-nav a.active::after,
.ops-nav a.is-active::after {
  width: 8px !important;
  background: #9bff00 !important;
  box-shadow: 0 0 14px #9bff00,0 0 24px rgba(155,255,0,.28) !important;
}

.sidebar .nav-link:hover .ico,
.sidebar .nav-link.is-active .ico,
.site-nav a:hover .ico,
.site-nav a.is-active .ico,
.site-nav a.active .ico,
.ops-nav a:hover .ico,
.ops-nav a.active .ico,
.ops-nav a.is-active .ico {
  color: #9bff00 !important;
  border-color: rgba(155,255,0,.36) !important;
  background: rgba(155,255,0,.08) !important;
  box-shadow: inset 0 0 14px rgba(155,255,0,.12),0 0 16px rgba(155,255,0,.12) !important;
}

/* Exact homepage action button. */
.btn,
.ops-btn,
.site-button,
a.btn,
button.btn,
input[type="submit"].btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 28px !important;
  border: 1px solid rgba(118,255,0,.52) !important;
  color: #dfffca !important;
  background: rgba(2,5,4,.58) !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  border-radius: 0 !important;
  clip-path: polygon(10px 0, calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px) !important;
}

.btn-primary,
.btn-secondary,
.ops-btn.primary,
.site-button.primary {
  background: linear-gradient(180deg, #a7ff38, #54bf00) !important;
  color: #071004 !important;
  box-shadow: 0 0 32px rgba(118,255,0,.28) !important;
}

/* Shared Command Center top header. */
.topbar {
  position:relative;
  min-height:92px;
  padding:18px 28px !important;
  border-bottom:1px solid rgba(155,255,0,.22) !important;
  background:
    radial-gradient(circle at 18% 50%, rgba(155,255,0,.10), transparent 28%),
    linear-gradient(90deg, rgba(2,5,4,.98), rgba(8,18,10,.94), rgba(2,5,4,.98)) !important;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.035),0 12px 32px rgba(0,0,0,.28) !important;
  clip-path:none !important;
}
.topbar::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(155,255,0,.72), transparent);
  pointer-events:none;
}
.topbar-title-wrap {
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  min-width:0;
}
.topbar-logo {
  width:54px !important;
  height:54px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 0 12px rgba(155,255,0,.34)) !important;
  flex:none;
}
.topbar .eyebrow {
  color:#9bff00 !important;
  font-family:var(--site-font-display) !important;
  font-size:11px !important;
  font-weight:950 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  margin:0 0 4px !important;
}
.topbar h1 {
  margin:0 !important;
  color:#ffffff !important;
  font-family:var(--site-font-display) !important;
  font-size:clamp(26px, 2.6vw, 42px) !important;
  line-height:.95 !important;
  font-weight:950 !important;
  letter-spacing:.09em !important;
  text-transform:uppercase !important;
  text-shadow:0 0 12px rgba(155,255,0,.14) !important;
}
.auth-actions {
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}
.auth-meta {
  min-width:86px;
  padding-right:8px;
  border-right:1px solid rgba(155,255,0,.26);
}
.auth-user {
  color:#ffffff !important;
  font-family:var(--site-font-display) !important;
  font-size:13px !important;
  font-weight:900 !important;
  letter-spacing:.05em !important;
}
.auth-role {
  color:#9bff00 !important;
  font-family:var(--site-font-display) !important;
  font-size:10px !important;
  font-weight:950 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}
@media(max-width:980px){
  .topbar { align-items:flex-start !important; flex-direction:column !important; padding:16px !important; }
  .auth-actions { justify-content:flex-start !important; }
  .auth-meta { align-items:flex-start !important; border-right:0; border-bottom:1px solid rgba(155,255,0,.22); padding:0 0 8px; }
}
