/* ===== GATOR CARD VAULT RESPONSIVE NAV V2 ===== */

:root {
  --gator-nav-width: 258px;
  --gator-nav-bg: #0d1728;
  --gator-nav-accent: #14b8a6;
}

#gatorSideNav {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(var(--gator-nav-width), 86vw);
  height: 100vh;
  height: 100dvh;
  z-index: 10000;
  background: var(--gator-nav-bg);
  border-right: 1px solid #314158;
  box-shadow: 4px 0 24px rgba(0,0,0,.28);
  display: flex;
  flex-direction: column;
  transform: translateX(-105%);
  transition: transform .22s ease;
  box-sizing: border-box;
  color: #e5edf8;
}

body.gator-nav-open #gatorSideNav {
  transform: translateX(0);
}

.gator-nav-header {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #293a50;
}

.gator-nav-title {
  font-size: 16px;
  font-weight: 800;
}

#gatorNavLinks {
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1;
  padding: 12px 10px 30px;
}

.gator-nav-link {
  display: block;
  color: #b9c8dc;
  text-decoration: none;
  border-radius: 8px;
  padding: 12px;
  margin: 3px 0;
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.gator-nav-link:hover,
.gator-nav-link:focus-visible {
  background: #203147;
  color: white;
}

.gator-nav-link.active {
  background: rgba(20,184,166,.16);
  color: #5eead4;
  font-weight: 750;
  box-shadow: inset 3px 0 var(--gator-nav-accent);
}

.gator-nav-button {
  border: 1px solid #426077;
  background: #123c42;
  color: white;
  border-radius: 8px;
  cursor: pointer;
  padding: 10px 13px;
  font-size: 14px;
  min-height: 42px;
}

#gatorNavOpen {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 9998;
  box-shadow: 0 4px 15px rgba(0,0,0,.35);
}

body.gator-nav-open #gatorNavOpen {
  display: none;
}

#gatorNavBackdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.6);
}

.gator-nav-group {
  margin: 4px 0;
}

.gator-nav-group summary {
  list-style: none;
  cursor: pointer;
  border-radius: 8px;
}

.gator-nav-group summary::-webkit-details-marker {
  display: none;
}

.gator-nav-group summary::after {
  content: "⌄";
  float: right;
  opacity: .7;
}

.gator-nav-group[open] summary::after {
  content: "⌃";
}

.gator-nav-children {
  margin-left: 13px;
  padding-left: 9px;
  border-left: 1px solid #314158;
}

.gator-nav-children .gator-nav-link {
  font-size: 12px;
  padding: 11px 10px;
}

section.section {
  scroll-margin-top: 24px;
}

/* DESKTOP — give the content the remaining viewport width */
@media (min-width: 1101px) {
  body.gator-nav-open {
    padding-left: var(--gator-nav-width) !important;
  }

  body.gator-nav-open .page-shell {
    width: calc(100% - 40px) !important;
    max-width: 1510px;
    margin-left: 20px !important;
    margin-right: auto !important;
    min-width: 0;
  }
}

/* TABLET AND MOBILE — overlay the page, never push it */
@media (max-width: 1100px) {
  body.gator-nav-open {
    overflow: hidden;
  }

  body.gator-nav-open #gatorNavBackdrop {
    display: block;
  }

  .page-shell {
    max-width: 100%;
  }
}

/* PHONES */
@media (max-width: 700px) {
  .page-shell {
    width: calc(100% - 24px) !important;
    margin-inline: 12px !important;
    padding-top: 66px !important;
    min-width: 0;
  }

  .page-shell > *,
  .section,
  .section > * {
    min-width: 0;
    max-width: 100%;
  }

  .header h1 {
    font-size: clamp(29px, 8vw, 42px);
    overflow-wrap: anywhere;
  }

  #commanderLabDashboard .lab-stats {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  #commanderLabDashboard .lab-layout {
    grid-template-columns: minmax(0,1fr);
  }

  #commanderLabDashboard .lab-panel {
    min-width: 0;
  }

  #commanderLabDashboard .lab-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #commanderLabDashboard table {
    min-width: 460px;
  }

  #gatorBattleArena {
    padding: 14px;
  }

  #gatorBattleArena .battle-controls {
    grid-template-columns: minmax(0,1fr);
  }

  #gatorBattleArena select,
  #gatorBattleArena button {
    min-height: 44px;
  }
}

@media (max-width: 380px) {
  #commanderLabDashboard .lab-stats {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  #gatorSideNav {
    transition: none;
  }
}