/* ============================================================
   layout.css — Sidebar, topbar, hamburger, backdrop, mobile
   ============================================================ */

/* ---- Sidebar ---- */
.sb {
  grid-column: 1; grid-row: 1 / 3;
  background: var(--bg);
  border-right: 1px solid rgba(255,255,255,.05);
  padding: 16px 10px;
  display: flex; flex-direction: column; gap: 1px;
  overflow-y: auto;
}

.logo {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 18px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  margin-bottom: 6px;
}
.lt      { font-family: "Syne", sans-serif; font-weight: 800; font-size: 17px; letter-spacing: -.4px }
.lt span { color: var(--gold); text-shadow: 0 0 24px rgba(235,83,158,.5) }

.ns {
  font-size: 9px; font-weight: 700; letter-spacing: 1.8px;
  color: var(--t3); text-transform: uppercase;
  padding: 14px 12px 4px;
}

.ni {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px 8px 12px;
  border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--t2);
  transition: all .15s cubic-bezier(.4,0,.2,1);
  border: 1px solid transparent;
}
.ni:hover { background: var(--bg3); color: var(--tx) }

.ni.on {
  background: linear-gradient(90deg, rgba(235,83,158,.12) 0%, rgba(235,83,158,.03) 100%);
  color: var(--gold);
  border-color: rgba(235,83,158,.14);
}
.ni.on::before {
  content: '';
  position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 2px; border-radius: 0 2px 2px 0;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(235,83,158,.9), 0 0 22px rgba(235,83,158,.4);
}
.ni svg       { width: 15px; height: 15px; flex-shrink: 0; opacity: .55; transition: opacity .15s }
.ni:hover svg { opacity: .85 }
.ni.on svg    { opacity: 1 }
.nb  { margin-left: auto; background: var(--gold); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 20px }
.sf  { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.05) }

/* ---- Topbar ---- */
.tb {
  grid-column: 2; grid-row: 1;
  background: var(--tb-bg);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid rgba(255,255,255,.05);
  box-shadow: 0 1px 0 rgba(255,255,255,.025);
  padding: 0 22px;
  display: flex; align-items: center; justify-content: space-between;
}
.tt { font-family: "Syne", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: -.1px }

/* ---- Hamburger ---- */
.ham {
  display: none; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: var(--bg3); border: 1px solid var(--bo); border-radius: 8px;
  cursor: pointer; flex-shrink: 0; transition: background .15s;
}
.ham:hover { background: var(--bg4) }
.ham svg { width: 15px; height: 15px }

/* ---- Sidebar backdrop ---- */
.sb-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.78); z-index: 99;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
  .app  { grid-template-columns: 1fr; grid-template-rows: 52px 1fr }
  .tb   { grid-column: 1; padding: 0 14px; padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)) }
  .main { grid-column: 1 }
  .ham  { display: flex }
  .sb   { position: fixed; left: 0; top: 0; bottom: 0; width: 260px; z-index: 100; transform: translateX(-100%); transition: transform .25s cubic-bezier(.4,0,.2,1); box-shadow: 12px 0 48px rgba(0,0,0,.75); padding-bottom: env(safe-area-inset-bottom, 0px) }
  .sb.open { transform: translateX(0) }
  .sb-backdrop.open { display: block }
  .sc   { padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)) }
  .grid-4 { grid-template-columns: 1fr 1fr !important }
  #shot-setup .pb > div:first-child,
  #shot-weather-section > div:last-child { grid-template-columns: 1fr 1fr !important }
  #shot-scoring .pb > div:first-child { grid-template-columns: 1fr 1fr !important }
  #shots-table { display: block !important; overflow-x: auto; -webkit-overflow-scrolling: touch }
  #shots-table thead, #shots-table tbody { display: table; width: 100% }
  .pn { border-radius: 10px }
  .wx-inner    { padding: 14px 16px; gap: 10px }
  .wx-icon     { font-size: 36px }
  .wx-temp     { font-size: 34px }
  .wx-unit     { font-size: 16px }
  .wx-stats    { padding: 8px 12px }
  .wx-stat-num { font-size: 16px }
  .wx-sep      { margin: 0 10px }
}