:root{
  --hair: rgba(255,255,255,.10);
  --hair2: rgba(255,255,255,.06);
  --glass: rgba(8,10,18,.55);
  --glass2: rgba(6,8,14,.35);
  --txt: rgba(255,255,255,.92);
  --muted: rgba(229,231,235,.70);
  --muted2: rgba(229,231,235,.55);
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --radius: 18px;

  --green: #10b981;
  --cyan:  #06b6d4;
  --blue:  #3b82f6;
  --purple:#8b5cf6;
  --red:   #ef4444;
  --amber: #f59e0b;
}

.notification-panel{
  position: fixed;   /* <- critical */
  top: 0;
  left: 0;
}

/* Shared treatment for small metric/category labels across Tailwind-driven pages. */
.uppercase[class*="tracking-"][class*="text-[11px]"],
.uppercase[class*="tracking-"][class~="text-xs"],
.uppercase[class*="tracking-"][class~="text-sm"]{
  text-transform: none;
  letter-spacing: .01em;
  font-weight: 700;
  line-height: 1.35;
}
.uppercase[class*="tracking-"][class*="text-[11px]"]{ font-size: .8125rem; }
.uppercase[class*="tracking-"][class~="text-xs"]{ font-size: .875rem; }

/* -----------------------------------------------------------
   Structural utilities (theme‑neutral)
   ----------------------------------------------------------- */
.animHeight{ transition: height .26s ease; overflow: hidden; }

.plotWrap{
  border-radius: 14px;
  padding: 10px;
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.plotWrap canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.themeToggle{
  width: 56px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 999px;
  padding: 0;
  position: relative;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.themeToggle::after{
  content:"";
  position:absolute;
  left:3px;
  top:3px;
  width:22px;
  height:22px;
  border-radius:50%;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.sorenessLegendDot{
  width:10px; height:10px;
  border-radius:999px;
  display:inline-block;
}

.animHeight{ transition: height .26s ease; overflow: hidden; }

/* Scoped dark surface */
body.theme-dark{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: #05060b;
  color: var(--txt);
}

/* Ambient “team_admin” style background */
body.theme-dark .bg-ambient{
  background:
    radial-gradient(900px 500px at 12% 12%, rgba(59,130,246,.20), transparent 60%),
    radial-gradient(700px 420px at 88% 18%, rgba(6,182,212,.18), transparent 62%),
    radial-gradient(900px 520px at 60% 88%, rgba(139,92,246,.14), transparent 62%),
    radial-gradient(480px 340px at 20% 80%, rgba(16,185,129,.12), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.40));
}

/* Glass card language */
body.theme-dark .cardGlass{
  background: linear-gradient(180deg, rgba(10,12,22,.62), rgba(6,8,14,.42));
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
body.theme-dark .cardGlass::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    linear-gradient(120deg, transparent 35%, rgba(6,182,212,.18) 50%, transparent 65%),
    linear-gradient(60deg, transparent 35%, rgba(139,92,246,.12) 50%, transparent 65%);
  opacity:.45;
  pointer-events:none;
  filter: blur(.2px);
}
body.theme-dark .cardGlass > *{ position: relative; }

body.theme-dark .inner{
  background: rgba(0,0,0,.20);
  border: 1px solid var(--hair2);
  border-radius: 14px;
}

body.theme-dark .badge{
  border: 1px solid var(--hair);
  background: rgba(0,0,0,.25);
  border-radius: 999px;
  font-weight: 600;
}

body.theme-dark .phase{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
  padding: .30rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: rgba(0,0,0,.20);
  color: rgba(229,231,235,.78);
}

body.theme-dark .explainBtn{
  width: 40px; height: 40px;
  display:grid; place-items:center;
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  border: 1px solid var(--hair);
  transition: transform .15s ease, background .15s ease;
}
body.theme-dark .explainBtn:hover{ transform: translateY(-1px); background: rgba(0,0,0,.32); }

body.theme-dark .collapseBtn{
  padding: .65rem .95rem;
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: rgba(0,0,0,.22);
  transition: transform .15s ease, background .15s ease;
  font-weight: 700;
}
body.theme-dark .collapseBtn:hover{ transform: translateY(-1px); background: rgba(0,0,0,.32); }

body.theme-dark .plotWrap{
  border: 1px solid var(--hair2);
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  padding: 10px;
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
body.theme-dark #wordCloudCanvas{
  width: 100%;
  height: 100%;
  display: block;
}

body.theme-dark .themeToggle{
  border: 1px solid rgba(255,255,255,.55);
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.05));
  box-shadow: 0 12px 24px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.18);
}
body.theme-dark .themeToggle::after{
  background:#fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.4);
}

/* Athletes modal + badges */
body.theme-dark .detailsModalSurface{
  background: rgba(5,6,11,0.98);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 28px 70px rgba(0,0,0,0.60);
}
body.theme-dark .sorenessCard{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(120% 120% at 30% 10%, rgba(255,255,255,.08), rgba(255,255,255,.03) 45%, rgba(0,0,0,.24) 100%),
    linear-gradient(180deg, rgba(12,15,26,0.9), rgba(12,15,26,0.60));
  border: 1px solid rgba(255,255,255,0.08);
}
body.theme-dark .sorenessCard::before{
  content:"";
  position:absolute; inset:-20%;
  background:
    radial-gradient(45% 45% at 50% 32%, rgba(249,115,22,0.30), transparent 70%),
    radial-gradient(45% 45% at 50% 68%, rgba(16,185,129,0.22), transparent 70%);
  filter: blur(26px);
  opacity: 0.9;
  pointer-events: none;
}
body.theme-dark .sorenessLegendDot{
  width:10px; height:10px;
  border-radius:999px;
  display:inline-block;
}
body.theme-dark .badge--primed{
  background: rgba(16,185,129,.18);
  border-color: rgba(16,185,129,.45);
  color: #bbf7d0;
}
body.theme-dark .badge--adaptive{
  background: rgba(245,158,11,.16);
  border-color: rgba(245,158,11,.35);
  color: #fbbf24;
}
body.theme-dark .badge--overloaded{
  background: rgba(239,68,68,.16);
  border-color: rgba(239,68,68,.35);
  color: #fecdd3;
}
/* Explain panel */
body.theme-dark .panelBack{
  position: fixed;
  inset: 0;
  background: rgba(3,4,10,.45);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 50;
}
body.theme-dark .panelBack.open{
  opacity: 1;
  pointer-events: auto;
}
body.theme-dark .explainPanel{
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: min(330px, 100%);
  background: rgba(7,9,18,.95);
  border-left: 1px solid rgba(255,255,255,.08);
  box-shadow: -20px 0 60px rgba(0,0,0,.6);
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 60;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(16px);
  pointer-events: none;
}
body.theme-dark .explainPanel.open{
  transform: translateX(0);
  pointer-events: auto;
}
body.theme-dark .explainPanelHeader{
  padding: 16px;
  border-bottom: 1px solid var(--hair2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body.theme-dark .explainPanelBody{
  padding: 16px;
  color: rgba(229,231,235,.88);
  line-height: 1.6;
  font-size: 14px;
  overflow-y: auto;
}
body.theme-dark .kbd{
  font-size: 12px;
  border: 1px solid var(--hair);
  background: rgba(0,0,0,.25);
  border-radius: 10px;
  padding: .18rem .45rem;
  color: rgba(229,231,235,.86);
}

/* Tiny “score heatmap” cells */
body.theme-dark .cell{
  width: 10px; height: 10px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,.06);
}

/* Engagement dots (dark) */
body.theme-dark .engagementCell{
  width: 12px;
  height: 12px;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.28) inset;
}

body.theme-dark .custom-calendar{
  position: fixed;
  top: 0;
  left: 0;
  width: min(320px, 100%);
  padding: 1.25rem;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(10,12,22,.95), rgba(4,6,14,.98));
  box-shadow: 0 25px 55px rgba(0,0,0,.55);
  display: none;
  gap: 0.65rem;
  z-index: 100000;
}

.custom-calendar.open{
  display: grid;
}
.custom-calendar.hidden{
  display: none !important;
}
body.theme-dark .custom-calendar__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.65rem;
  font-size:0.95rem;
  color:#f8fafc;
}
body.theme-dark .custom-calendar__header-actions{
  display:flex;
  align-items:center;
  gap:0.35rem;
}
body.theme-dark .custom-calendar__month{
  flex:1;
  font-weight:600;
  font-size:1rem;
  text-align:center;
  color:#f1f5f9;
}
body.theme-dark .custom-calendar__nav-btn{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05);
  color:#fff;
  font-size:1.1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: background .2s ease, border .2s ease, transform .2s ease;
}
body.theme-dark .custom-calendar__nav-btn:hover{
  background: rgba(14,165,233,.32);
  border-color: rgba(14,165,233,.45);
  transform: translateY(-1px);
}
body.theme-dark .custom-calendar__close-btn{
  font-size:1rem;
  background: rgba(255,255,255,.08);
}
body.theme-dark .custom-calendar__weekdays{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  font-size:.75rem;
  font-weight:700;
  text-transform:none;
  letter-spacing:.01em;
  color: rgba(241,245,249,.65);
  text-align:center;
}
body.theme-dark .custom-calendar__days{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap:.3rem;
}
body.theme-dark .custom-calendar__day{
  aspect-ratio:1/1;
  border-radius:14px;
  border:1px solid transparent;
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.9);
  font-size:.9rem;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: background .2s ease, border .2s ease, transform .2s ease;
}
body.theme-dark .custom-calendar__day:hover{
  background: rgba(14,165,233,.25);
  border-color: rgba(14,165,233,.35);
  transform: translateY(-1px);
}
body.theme-dark .custom-calendar__day--today{
  border-color: rgba(16,185,129,.45);
  box-shadow: 0 0 0 1px rgba(16,185,129,.45);
}
body.theme-dark .custom-calendar__day--in-range{
  background: rgba(59,130,246,.16);
}
body.theme-dark .custom-calendar__day--selected{
  background: linear-gradient(180deg, rgba(14,165,233,.85), rgba(59,130,246,.9));
  color:#fff;
  box-shadow: 0 10px 22px rgba(14,165,233,.35);
}
body.theme-dark .custom-calendar__day--empty{
  visibility:hidden;
}
body.theme-dark .custom-calendar__note{
  margin:0;
  font-size:.78rem;
  color: rgba(226,232,240,.8);
}

body.theme-dark .notification-panel{
  border-color: rgba(255,255,255,.14);
  background: rgba(3,4,10,.96);
  box-shadow: 0 25px 65px rgba(0,0,0,.65);
  backdrop-filter: blur(24px);
  z-index: 70;
}
body.theme-dark .notification-item{
  border-color: rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  box-shadow: 0 15px 30px rgba(0,0,0,.45);
}

/* Keep soreness map content contained */
body.theme-dark [data-soreness-modal-trigger].plotWrap{
  overflow:hidden !important;
  height:240px;
  max-height:240px;
}

/* Silhouette footer labels */
body.theme-dark [data-body-soreness-map] .soreness-label{
  color: #e5e7eb;
}

/* Keep heatmap grid contained */
body.theme-dark #heatmapGrid{
  overflow:hidden;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  display:grid;
  max-height:160px;
  padding-right:2px;
}

/* Clip any chart/grid content to its card */
body.theme-dark .plotWrap{
  overflow:hidden;
}