/* PLAYER.ID Premium App Shell Contract V1
   Reusable shell anatomy for Developer, Academy Admin, Coach and Parent.

   SAFETY CONTRACT
   - Every class below is entirely new (.pid-premium-*), verified against
     the full assessment/ tree before this file was created. Nothing here
     is referenced by any existing template, so no live workspace is
     migrated onto it by adding this file.
   - This is the shell CONTRACT only. No role is wired onto it yet.
   - Tokens come from playerid-theme.css (--pid-theme-*) and
     playerid-design-system.css (--pid-*, spacing/radius/type scale).
   - Mobile drawer states are driven by the shared controller in
     assessment/js/ui/premium-shell.controller.js via the
     [data-pid-drawer] / .is-pid-drawer-open hooks below - see that file
     for the interaction contract (open/close/toggle/backdrop/Escape/
     focus/scroll-lock). This CSS only renders the visual states.

   ===================================================================
   BREAKPOINT CONTRACT (Premium)
   - Desktop: > 768px - fixed sidebar, static topbar
   - Tablet: <= 768px - sidebar collapses into the off-canvas drawer
   - Mobile: <= 390px - compact topbar, full-bleed drawer
   =================================================================== */

.pid-premium-shell {
  display: grid;
  grid-template-columns: var(--pid-app-sidebar-width, 232px) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--pid-theme-app-bg);
  color: var(--pid-theme-text-primary);
}

/* -------------------------------------------------------------------
   SIDEBAR (desktop: static structural rail / mobile: off-canvas drawer)
   ------------------------------------------------------------------- */

.pid-premium-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  width: var(--pid-app-sidebar-width, 232px);
  min-height: 100vh;
  padding: var(--pid-space-4, 16px) var(--pid-space-3, 12px);
  background: var(--pid-theme-navy);
  color: #fff;
}

.pid-premium-sidebar-brand { display: flex; align-items: center; min-height: var(--pid-app-header-height, 86px); color: #fff; text-decoration: none; }

.pid-premium-nav { display: grid; gap: 3px; margin-top: var(--pid-space-2, 8px); }
.pid-premium-nav-item {
  display: flex;
  align-items: center;
  gap: var(--pid-space-2, 8px);
  min-height: var(--pid-touch-target-min, 44px);
  padding: 0 11px;
  border: 0;
  border-radius: var(--pid-radius-control, 7px);
  outline: 0;
  background: transparent;
  color: rgba(255, 255, 255, .72);
  font: inherit;
  font-size: .78rem;
  font-weight: 650;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.pid-premium-nav-item > span { display: grid; flex: 0 0 28px; place-items: center; width: 28px; height: 28px; }
.pid-premium-nav-item > span > svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pid-premium-nav-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.pid-premium-nav-item.is-active { background: rgba(19, 170, 166, .16); color: #fff; box-shadow: inset 3px 0 0 var(--pid-theme-teal); }
.pid-premium-nav-item:focus-visible { box-shadow: inset 3px 0 0 var(--pid-theme-teal), 0 0 0 3px rgba(34, 199, 187, .35); }

.pid-premium-sidebar-footer { margin-top: auto; padding-top: var(--pid-space-4, 16px); border-top: 1px solid rgba(255, 255, 255, .1); }

/* -------------------------------------------------------------------
   MAIN COLUMN
   ------------------------------------------------------------------- */

.pid-premium-main { min-width: 0; display: flex; flex-direction: column; background: var(--pid-theme-app-bg); }

.pid-premium-topbar {
  position: sticky;
  top: 0;
  z-index: 35;
  display: flex;
  align-items: center;
  gap: var(--pid-space-3, 12px);
  min-height: var(--pid-app-header-height, 86px);
  padding: 0 var(--pid-space-5, 20px);
  border-bottom: 1px solid var(--pid-theme-border-soft);
  background: var(--pid-theme-surface);
}
.pid-premium-topbar-title { margin: 0; color: var(--pid-theme-text-primary); font-size: 1.3rem; font-weight: 800; }
.pid-premium-topbar-subtitle { display: block; margin-top: 3px; color: var(--pid-theme-text-secondary); font-size: .78rem; }

/* Hamburger: hidden on desktop, shown at the tablet breakpoint. */
.pid-premium-topbar-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--pid-theme-border-soft);
  border-radius: var(--pid-radius-control, 7px);
  background: var(--pid-theme-surface-raised);
  color: var(--pid-theme-text-primary);
  cursor: pointer;
}
.pid-premium-topbar-menu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pid-premium-topbar-menu:focus-visible { outline: 0; box-shadow: var(--pid-theme-focus-ring); }

/* Reserved slot for the shared .pid-theme-toggle (see playerid-theme.css).
   Astra places <button data-pid-theme-toggle class="pid-theme-toggle">
   inside this slot; nothing here injects the toggle itself. */
.pid-premium-topbar-actions { display: flex; align-items: center; gap: var(--pid-space-2, 8px); margin-left: auto; }

.pid-premium-contextbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pid-space-4, 16px);
  min-height: 64px;
  margin: var(--pid-space-3, 12px) var(--pid-space-5, 20px) 0;
  padding: var(--pid-space-3, 12px) var(--pid-space-4, 16px);
  border-radius: var(--pid-radius-md, 10px);
  background: var(--pid-theme-surface-raised);
  box-shadow: var(--pid-theme-shadow-raised);
}

.pid-premium-content {
  width: 100%;
  min-width: 0;
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--pid-space-5, 20px);
}

/* -------------------------------------------------------------------
   MOBILE DRAWER (off-canvas sidebar). Visual states only - open/close
   behaviour is owned by premium-shell.controller.js.
   ------------------------------------------------------------------- */

.pid-premium-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(4, 20, 34, .45);
}

.pid-premium-drawer-footer { display: none; }

@media (max-width: 768px) {
  .pid-premium-shell { grid-template-columns: 1fr; }

  .pid-premium-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 70;
    width: min(84vw, 300px);
    transform: translateX(-100%);
    box-shadow: 10px 0 30px rgba(4, 20, 34, .3);
    transition: transform .22s ease;
  }
  .pid-premium-shell.is-pid-drawer-open .pid-premium-sidebar { transform: translateX(0); }
  .pid-premium-shell.is-pid-drawer-open .pid-premium-drawer-backdrop { display: block; }
  .pid-premium-drawer-footer { display: block; margin-top: var(--pid-space-4, 16px); padding-top: var(--pid-space-4, 16px); border-top: 1px solid rgba(255, 255, 255, .1); }

  .pid-premium-topbar-menu { display: inline-flex; }
  .pid-premium-topbar { min-height: 68px; padding: 0 var(--pid-space-4, 16px); }
  .pid-premium-contextbar { align-items: stretch; flex-direction: column; margin-inline: var(--pid-space-4, 16px); }
  .pid-premium-content { padding: var(--pid-space-4, 16px); }
}

@media (max-width: 390px) {
  .pid-premium-sidebar { width: 88vw; }
  .pid-premium-topbar { padding: 0 var(--pid-space-3, 12px); }
  .pid-premium-content { padding: var(--pid-space-3, 12px); }
  .pid-premium-contextbar { margin-inline: var(--pid-space-3, 12px); }
}

@media (prefers-reduced-motion: reduce) {
  .pid-premium-sidebar { transition: none; }
}