/* CourtOracle Dashboard Layout */

/* ─── App Shell ─── */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-body {
  display: flex;
  flex: 1;
}

/* ─── Header (matches root marketing page) ─── */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--tj-background);
  border-bottom: 1px solid var(--tj-border);
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
}
.app-header .brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--tj-foreground);
  font-size: var(--text-heading-sm);
  font-weight: var(--weight-bold);
}
.app-header .brand img { height: 40px; width: auto; }
.app-header .header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.app-header .header-right a {
  font-size: var(--text-body-sm);
  color: var(--tj-primary);
  text-decoration: none;
  font-weight: var(--weight-bold);
}
.app-header .header-right a:hover { text-decoration: underline; }
.app-header .user-avatar {
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  background: transparent;
  border: 1.5px solid var(--tj-primary);
  color: var(--tj-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  text-decoration: none;
  letter-spacing: 0.05em;
}

/* ─── Sidebar ─── */
.app-sidebar {
  width: var(--sidebar-width);
  background: var(--tj-background);
  border-right: 1px solid var(--tj-border);
  padding: var(--space-6) var(--space-4);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--header-height);
  left: 0;
  height: calc(100vh - var(--header-height));
  overflow-y: auto;
  z-index: 50;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-4);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--tj-muted-foreground);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-regular);
  transition: all var(--transition-fast);
}
.nav-item svg { width: 20px; height: 20px; stroke-width: 1.5; flex-shrink: 0; }
.nav-item:hover { background: var(--tj-secondary); color: var(--tj-foreground); }
.nav-item.active { background: var(--tj-primary); color: var(--tj-primary-foreground); }
.nav-item.active svg { stroke: var(--tj-primary-foreground); }

.sidebar-record-btn {
  margin-top: auto;
  padding-top: var(--space-6);
}
.sidebar-record-btn button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px var(--space-4);
  background: var(--tj-primary);
  color: var(--tj-primary-foreground);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-serif);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.sidebar-record-btn button:hover { background: var(--tj-primary-dark); }
.sidebar-record-btn button svg { width: 20px; height: 20px; }

/* ─── Content Area ─── */
.app-content {
  flex: 1;
  /* Horizontal padding at 45% of --space-6 (was 75%). Kaden 2026-04-23
     (second pass): "the margin on every single page between the left
     navigation bar and the right side of the page can be decreased by
     40%." 0.75 × 0.60 = 0.45 applied to padding, max-width, and the
     centering calc so everything scales together. Vertical padding and
     every other page component stays at full token value. */
  padding: var(--space-8) calc(var(--space-6) * 0.45);
  max-width: calc(var(--content-max) + var(--space-6) * 0.45 * 2);
  min-height: calc(100vh - var(--header-height));
  position: relative;
  /* Center in the viewport space to the right of the fixed sidebar. The
     11px minimum floor is 18px × 0.60 so narrow viewports get the same
     40% tightening as wide ones. */
  margin-left: calc(var(--sidebar-width) + max(11px, (100vw - var(--sidebar-width) - var(--content-max) - var(--space-6) * 0.45 * 2) / 2));
  margin-right: auto;
}

/* ─── Court Lines Background (matches CourtLinesBackground.swift) ─── */
.court-lines-bg {
  position: fixed;
  top: var(--header-height);
  left: var(--sidebar-width);
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.court-lines-bg svg {
  width: 85%;
  height: 90%;
  margin: 0 auto;
  display: block;
  opacity: 0.04;
}
.app-content > * { position: relative; z-index: 1; }

/* ─── Video Panel (right side, slides in) ─── */
.video-panel {
  position: fixed;
  top: var(--header-height);
  right: 0;
  width: var(--video-panel-width);
  height: calc(100vh - var(--header-height));
  background: var(--tj-background);
  border-left: 1px solid var(--tj-border);
  box-shadow: var(--shadow-lg);
  z-index: 90;
  transform: translateX(100%);
  transition: transform var(--transition-normal);
  display: flex;
  flex-direction: column;
}
.video-panel.open { transform: translateX(0); }
/* When the right-hand video panel is open, shift the main content left by
   the panel width plus a 16px breathing gap. Previously the margin exactly
   equaled the panel width, which meant content butted right up against the
   panel edge — fine geometrically, but on narrower viewports (~1100–1280px)
   the max-width calc could allow sub-pixel rounding / sticky children to
   visually overlap. Kaden 2026-04-23: "the right panel is over top of the
   home page elements." The extra 16px guarantees a visible gap at every
   viewport size. */
.app-body.panel-open .app-content {
  margin-right: calc(var(--video-panel-width) + 16px);
  transition: margin-right var(--transition-normal);
}
.video-panel-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--tj-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.video-panel-body { flex: 1; overflow-y: auto; }
.video-panel-footer { padding: var(--space-4); border-top: 1px solid var(--tj-border); }


/* ─── Auth Gate (sign-in overlay) ─── */
.auth-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-height));
  padding: var(--space-6);
}
.auth-card {
  background: var(--tj-background);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.auth-card h2 {
  font-size: var(--text-heading-lg);
  margin-bottom: var(--space-2);
}
.auth-card .subtitle {
  color: var(--tj-muted-foreground);
  margin-bottom: var(--space-8);
}
.auth-toggle {
  margin-top: var(--space-4);
  font-size: var(--text-body-sm);
  color: var(--tj-primary);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-serif);
}
.auth-toggle:hover { text-decoration: underline; }

/* ─── Responsive ─── */
@media (max-width: 1200px) {
  .app-sidebar { width: 64px; padding: var(--space-4) var(--space-2); }
  .nav-item span { display: none; }
  .nav-item { justify-content: center; padding: 10px; }
  .sidebar-record-btn button span { display: none; }
  .sidebar-record-btn button { padding: 14px; }
  .app-content { margin-left: calc(64px + max(11px, (100vw - 64px - var(--content-max) - var(--space-6) * 0.45 * 2) / 2)); margin-right: auto; }
  .court-lines-bg { left: 64px; }
}

@media (max-width: 768px) {
  /* Kaden 2026-04-24: lock horizontal overflow at the viewport so the
     shared-video page and dashboard pages never require a side swipe
     on phone. Any child that tries to exceed 100vw gets clipped
     instead of pushing the layout wide. We also clamp .app-content
     max-width explicitly so the --content-max: 1280px token (used by
     the desktop centering math) can't escape the viewport on phones. */
  html, body { overflow-x: hidden; max-width: 100vw; }
  .app-sidebar { display: none; }
  .app-content {
    margin-left: 0;
    margin-right: auto;
    padding: var(--space-4);
    max-width: 100vw;
    box-sizing: border-box;
  }
  .court-lines-bg { left: 0; }
  .video-panel { width: 100%; }
  .header-desktop-only { display: none !important; }
  .hamburger-btn { display: flex !important; }

  /* Video containers on phone — cap at viewport width and preserve
     aspect ratio. Prevents the analysis-player iframe or match-bundle
     video player from rendering wider than the screen. */
  #video-player-container,
  .mb-video-fill,
  .match-bundle-root .mb-video-wrapper,
  .match-bundle-root .mb-video-wrapper iframe {
    max-width: 100vw !important;
  }
}

/* ─── Mobile hamburger + drawer (≤768px only) ─── */
.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1.5px solid var(--tj-primary);
  border-radius: var(--radius-full);
  color: var(--tj-primary);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.hamburger-btn svg { width: 22px; height: 22px; }
.hamburger-btn:hover { background: var(--tj-secondary); }
.hamburger-btn:focus-visible { outline: 2px solid var(--tj-primary); outline-offset: 2px; }

.mobile-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  z-index: 90;
}
.mobile-drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--tj-background);
  border-left: 1px solid var(--tj-border);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
  transform: translateX(100%);
  transition: transform 250ms ease;
  z-index: 100;
  padding: var(--space-4) var(--space-3) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  overflow-y: auto;
}
.mobile-drawer.open { transform: translateX(0); }

.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--tj-border);
}
.mobile-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  color: var(--tj-muted-foreground);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.mobile-drawer-close svg { width: 22px; height: 22px; }
.mobile-drawer-close:hover { background: var(--tj-secondary); color: var(--tj-foreground); }

.mobile-drawer-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px var(--space-4);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--tj-muted-foreground);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-regular);
  transition: all var(--transition-fast);
}
.mobile-drawer-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.mobile-drawer-item:hover { background: var(--tj-secondary); color: var(--tj-foreground); }
.mobile-drawer-item.active { background: var(--tj-primary); color: var(--tj-primary-foreground); }
.mobile-drawer-item.active svg { stroke: var(--tj-primary-foreground); }

.mobile-drawer-cta {
  margin-top: auto;
  padding: 12px var(--space-4);
  text-align: center;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-bold);
  color: var(--tj-primary);
  text-decoration: none;
  border: 1.5px solid var(--tj-primary);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
.mobile-drawer-cta:hover { background: var(--tj-primary); color: var(--tj-primary-foreground); }

/* Lock body scroll when drawer is open (applied via JS) */
body.drawer-open { overflow: hidden; }