/* =========================================================
   Birchwood Portal — Unified CSS (Topbar + Sidebar + UI)
   CLEAN DROP-IN v34
   - Mobile/tablet horizontal scroll for training plan (robust)
   - Ring/Count gap fix helpers: .table-wrap.fit and .dist-list
   - Sidebar width: 150px (tweak --sidebar-w as needed)
   - A11y: larger tap targets on mobile, visible active marker
   ========================================================= */

/* ------- Theme Vars ------- */
:root{
  --bg:#0b0f14;
  --bg2:#0e141d;
  --card:#121922;
  --text:#ffffff;
  --muted:#cfe0d6;

  --topbar-bg:#294239;
  --sidebar-bg:#1b2521;
  --sidebar-bg2:#141c19;

  --link:#4bb3fd;
  --accent:#dc2626;
  --head-green:#7fc6a2;

  --sidebar-w:150px;
  --topbar-h:72px;

  --rail-gap: clamp(4px, 0.7vw, 10px);
  --content-pad: clamp(12px, 2vw, 24px);
  --content-max: 1200px;
  --content-right-pad: max(24px, 2.2vw);

  --z-top:1000;
  --z-drawer:1200;
}

/* ------- Base ------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html,body,.bw-layout{ overflow-x:hidden; max-width:100vw; }
body{
  margin:0; color:var(--text);
  background:linear-gradient(135deg,var(--bg),var(--bg2));
  font:14px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans";
}
a{ color:var(--link); text-decoration:none; }
a:focus-visible,button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

.container{ width:min(1100px,92%); margin:1.25rem auto 2rem; }

.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:1px;
  padding:1rem 1.2rem;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  margin-bottom:1rem;
}
label{ display:block; font-size:.9rem; color:var(--muted); margin:.4rem 0; }

input:not([type="checkbox"]):not([type="radio"]),select,textarea{
  width:100%; padding:.6rem .5rem; border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:#0c131b; color:var(--text);
}
input[type="checkbox"],input[type="radio"]{ width:auto; height:auto; margin:0; vertical-align:middle; }

button,a.btn{
  display:inline-block; margin-top:.6rem; padding:.6rem 1rem;
  border:none; border-radius:1px; background:var(--link); color:#00121f;
  font-weight:700; cursor:pointer; text-decoration:none;
}
button:hover,a.btn:hover{ filter:brightness(1.06); }

table{ width:100%; border-collapse:collapse; }
th,td{ text-align:left; padding:.5rem .4rem; border-bottom:1px solid rgba(255,255,255,.10); }
.muted{ color:var(--muted); font-size:.9rem; }

img,canvas,video,svg{ max-width:100%; height:auto; display:block; }

/* ------- Topbar ------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-top);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:var(--topbar-bg);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:.5rem 1rem; min-height:var(--topbar-h); overflow:visible;
}
.brand{ display:flex; align-items:center; gap:.6rem; color:#fff; text-decoration:none; white-space:nowrap; }
.brand img{ height:58px; width:auto; display:block; }
.brand .brand-title{ font-weight:700; letter-spacing:.2px; line-height:1.1; }
.brand .brand-title small{ display:block; font-weight:400; color:rgba(255,255,255,.75); font-size:12px; }

.top-quick{ position:relative; display:flex; align-items:center; gap:.6rem; white-space:nowrap; flex-wrap:wrap; justify-content:flex-end; z-index:1500; }
.top-quick a{ color:#fff; text-decoration:none; padding:.35rem .5rem; border-radius:4px; }
.top-quick a:hover{ background:rgba(255,255,255,.12); }
.top-links{ display:flex; gap:.6rem; align-items:center; }
@media (max-width:980px){ .top-links{ display:none; } }

/* Admin dropdown */
.dropdown{ position:relative; }
.dropbtn{ color:#fff; text-decoration:none; padding:.35rem .5rem; display:inline-flex; align-items:center; height:36px; line-height:36px; }
.dropdown-menu{
  position:absolute; top:100%; right:0; display:none; min-width:220px; width:max-content; max-width:90vw;
  background:#1f2d27; border:1px solid rgba(255,255,255,.15);
  border-radius:8px; padding:.25rem 0; box-shadow:0 8px 24px rgba(0,0,0,.35); z-index:10000; white-space:nowrap;
}
.dropdown-menu a{ display:block; padding:.5rem .75rem; color:#fff; text-decoration:none; }
.dropdown-menu a:hover{ background:rgba(255,255,255,.10); }
.dropdown.open .dropdown-menu,
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{ display:block; }

/* “More” menu */
.morebtn{
  display:none; align-items:center; justify-content:center;
  width:36px; height:36px; border:1px solid rgba(255,255,255,.25);
  border-radius:1px; background:transparent; color:#fff; cursor:pointer; font-size:20px; line-height:1;
}
.moremenu{
  position:absolute; right:0; top:calc(100% + 6px);
  background:#1f2d27; border:1px solid rgba(255,255,255,.15);
  border-radius:8px; padding:.25rem 0; box-shadow:0 8px 24px rgba(0,0,0,.35);
  min-width:220px; display:none; z-index:10010;
}
.moremenu a{ display:block; padding:.5rem .75rem; color:#fff; text-decoration:none; }
.moremenu a:hover{ background:rgba(255,255,255,.10); }
.moremenu.open{ display:block; }
@media (max-width:980px){ .morebtn{ display:inline-flex; } }
@media (min-width:981px){ .morebtn, .moremenu{ display:none !important; } }

/* ------- Hamburger ------- */
.hamburger{
  width:44px; height:44px; padding:0;
  display:none; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.25); border-radius:8px;
  background:transparent; color:#fff; cursor:pointer; position:relative; z-index:3000;
}
.hamburger .bar{ width:26px; height:3px; background:#fff; border-radius:2px; position:relative; transform: translateZ(0); }
.hamburger .bar::before,.hamburger .bar::after{ content:""; position:absolute; left:0; right:0; height:3px; background:#fff; border-radius:2px; }
.hamburger .bar::before{ top:-8px; } .hamburger .bar::after{ top:8px; }
@media (prefers-color-scheme: light){
  .hamburger{ border-color: rgba(0,0,0,.25); }
  .hamburger .bar,.hamburger .bar::before,.hamburger .bar::after{ background:#111; }
}
@media (max-width:1100px){ .hamburger{ display:inline-flex; } }

/* ------- Layout ------- */
.bw-layout{
  display:grid;
  grid-template-areas:"sidebar main";
  grid-template-columns:var(--sidebar-w) minmax(0,1fr);
  min-height:calc(100vh - var(--topbar-h));
  padding-top:var(--topbar-h);
}
.sidebar{ grid-area:sidebar; }
.bw-layout > main{ grid-area:main; padding-left:1.25rem; padding-right:1rem; }

/* Desktop: fixed sidebar; clamp width and spacing */
@media (min-width:1100px){
  .sidebar{
    position:fixed; left:0; top:var(--topbar-h); bottom:0; width:var(--sidebar-w);
    background:linear-gradient(180deg,var(--sidebar-bg) 0%, var(--sidebar-bg2) 100%);
    border-right:1px solid rgba(255,255,255,.10);
    overflow:auto; -ms-overflow-style:none; scrollbar-width:none; z-index:1;
  }
  .sidebar::-webkit-scrollbar{ width:0; height:0; }

  .bw-layout > main{
    padding-left: 0;
    padding-right: var(--content-right-pad);
  }
  .bw-layout > main > :where(.dashboard-grid,.container,.main-inner){
    width: min(var(--content-max), 100%);
    margin-left: var(--rail-gap);
    margin-right: 0;
    padding-inline: var(--content-pad);
    box-sizing: border-box;
  }
}

/* Mobile: sidebar drawer */
@media (max-width:1100px){
  .bw-layout{ grid-template-areas:"main"; grid-template-columns:1fr; }
  .bw-layout > main{ padding-left:0; padding-right:.75rem; }

  .sidebar{
    position:fixed; top:var(--topbar-h); left:0;
    width:min(86vw,300px); height:calc(100vh - var(--topbar-h));
    background:linear-gradient(180deg,var(--sidebar-bg) 0%, var(--sidebar-bg2) 100%);
    border-right:1px solid rgba(255,255,255,.10);
    transform:translateX(-100%); transition:transform .24s ease-out;
    z-index:var(--z-drawer); overflow:auto;
  }
  body.drawer-open .sidebar{ transform:translateX(0); }
  .drawer-backdrop{
    position:fixed; inset:var(--topbar-h) 0 0 0;
    background:rgba(0,0,0,.45); display:none; z-index:calc(var(--z-drawer) - 1);
  }
  body.drawer-open .drawer-backdrop{ display:block; }
  body.drawer-open{ overflow:hidden; touch-action:none; }
}

/* ------- Sidebar nav ------- */
.side-section{ margin:.25rem 0 .9rem; }
.side-title{
  padding:.35rem .75rem;
  font-size:14px;
font-weight:bold;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--accent);
  line-height:1.2;
  word-break:break-word;
}
.side-nav a,.side-nav button{
  position:relative;
  width:100%;
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem .75rem;
  color:var(--text); background:none; border:0;
  text-align:left; cursor:pointer; font:inherit;
  word-break:break-word;
}
.side-nav a:hover,.side-nav button:hover{ background:var(--accent); color:#fff; border-radius:0; }
.side-nav .active{ background:var(--accent); color:#fff; }

/* Active marker on desktop */
@media (min-width:1100px){
  .side-nav a.active::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:var(--head-green);
  }
}

/* Bigger tap targets on mobile */
@media (max-width:1100px){
  .side-nav a{ min-height:40px; padding:.6rem .85rem; }
}

/* Utility visibility helpers */
.mobile-only{ display:none; }
.desktop-only{ display:initial; }
@media (max-width:1100px){
  .mobile-only{ display:block; }
  .desktop-only{ display:none !important; }
  .morebtn, #moremenu, .top-links{ display:none !important; }
}

/* ------- Dashboard grid (index.php) ------- */
.dashboard-grid{
  display:grid; gap:.75rem; align-items:start; grid-template-columns:repeat(12,minmax(0,1fr));
}
@media (max-width:899px){
  .dashboard-grid{ grid-template-columns:1fr; }
  .box-hello,.box-shooter,.box-actions,.box-highlow,.box-recent{ grid-column:1 / -1; }
}
@media (min-width:900px) and (max-width:1199px){
  .box-hello{   grid-column:1 / -1; }
  .box-shooter{ grid-column:1 / span 6; }
  .box-actions{ grid-column:7 / span 6; }
  .box-recent{  grid-column:1 / span 8; }
  .box-highlow{ grid-column:9 / span 4; }
}
@media (min-width:1200px){
  .box-hello{   grid-column:1 / -1; }
  .box-shooter{ grid-column:1 / span 7; }
  .box-actions{ grid-column:8 / span 5; }
  .box-recent{  grid-column:1 / span 8; }
  .box-highlow{ grid-column:9 / span 4; }
}
@media (min-width:900px){
  .dashboard-grid{ grid-template-columns: repeat(12, minmax(88px, 1fr)); }
}
.dashboard-grid > *{ min-width:0; }
.box-shooter,.box-actions,.box-highlow{ min-width:260px; }

/* --- Tables --- */
.table-wrap{
  overflow:auto; -webkit-overflow-scrolling:touch; width:100%; max-width:100%;
  border:1px solid rgba(255,255,255,.10); border-radius:1px;
}
.table-wrap > table{ min-width:640px; border-collapse:collapse; }

.table-compact th,.table-compact td{ padding:.45rem .6rem; }
@media (max-width:600px){
  .card{ padding:.85rem .9rem; }
  h2,h3,h4{ margin:.2rem 0 .6rem; }
  table{ font-size:.95rem; }
}

/* Stack wide tables into label:value on ≤900px */
table.stack-sm{ width:100%; border-collapse:collapse; }
@media (max-width:900px){
  table.stack-sm thead{ display:none; }
  table.stack-sm tbody tr{
    display:block; margin:.55rem 0;
    border:1px solid rgba(255,255,255,.12); border-radius:1px; overflow:hidden;
  }
  table.stack-sm tbody td{
    display:grid; grid-template-columns:42% 58%;
    gap:.35rem; padding:.55rem .7rem; border-bottom:1px solid rgba(255,255,255,.08);
    word-break:break-word; overflow-wrap:anywhere;
  }
  table.stack-sm tbody td:last-child{ border-bottom:none; }
  table.stack-sm tbody td::before{
    content:attr(data-label); font-weight:700; color:var(--muted); padding-right:.6rem;
  }
}

/* =========================
   MOBILE/TABLET CONTAINER TWEAKS
   ========================= */
@media (max-width:1100px){
  .container{
    width:100%;
    max-width:100%;
    margin:1rem 0 1.5rem;
    padding-left:.5rem;
    padding-right:.5rem;
  }
}

/* =========================
   TRAINING PLAN SCROLLER (robust)
   ========================= */
.tp-scroll{
  overflow-x:auto !important;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  overscroll-behavior-x:contain;
  background:#0c141b;
  border:1px solid rgba(255,255,255,.15);
  border-radius:1px;
}
.tp-inner{ width:max-content; min-width:960px; }
@media (max-width:1100px){
  .tp-scroll{ position:relative; }
  .tp-scroll::after{
    content:""; position:absolute; top:0; right:0; bottom:0; width:16px;
    pointer-events:none;
    background:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.35));
  }
}
.tp-scroll::-webkit-scrollbar{ height:10px; }
.tp-scroll::-webkit-scrollbar-track{ background:rgba(255,255,255,.06); }
.tp-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.3); border-radius:8px; }
.tp-scroll{ scrollbar-color:rgba(255,255,255,.35) rgba(255,255,255,.06); scrollbar-width:thin; }

/* =========================
   TP MOBILE SCROLL: HARD OVERRIDES
   ========================= */
body:not(.drawer-open){ touch-action:auto !important; }

@media (max-width:1100px){
  html, body, .bw-layout, .container, .card { overflow-x:visible !important; }
}

.tp-viewport{
  position:relative; width:100%; max-width:100%;
  overflow-x:auto !important; overflow-y:auto !important;
  -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y !important;
  border:1px solid rgba(255,255,255,.15); border-radius:1px; background:#0c141b;
}
@media (max-width:1100px){
  .tp-viewport{
    height:min(72svh, calc(100svh - 160px)) !important;
    min-height:55svh !important;
  }
}
.tp-inner{ width:max-content !important; min-width:1200px !important; }
@media (max-width:1100px){
  .tp-grid .head{ position:static !important; }
}
.tp-viewport, .tp-inner, .tp-grid{ pointer-events:auto !important; }
.tp-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.45); color:#fff; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  z-index:9999 !important; cursor:pointer; pointer-events:auto !important;
}
.tp-left{ left:8px; } .tp-right{ right:8px; }
@media (max-width:700px){ .tp-nav{ width:32px; height:32px; } }
.tp-viewport::-webkit-scrollbar { height:10px; }
.tp-viewport::-webkit-scrollbar-track { background: rgba(255,255,255,.06); }
.tp-viewport::-webkit-scrollbar-thumb { background: rgba(255,255,255,.35); border-radius: 8px; }
.tp-viewport { scrollbar-color: rgba(255,255,255,.35) rgba(255,255,255,.06); scrollbar-width: thin; }

/* =========================
   SMALL-TABLE HELPERS
   Use for the Ring/Count widget
   ========================= */

/* A) Keep a specific table tight (no giant gap) */
.table-wrap.fit{
  display:inline-block;   /* shrink wrapper to table's natural width */
  width:auto;
  max-width:100%;
}
.table-wrap.fit > table{
  width:auto;             /* don't stretch the table */
  min-width:0;            /* override the global 640px */
  table-layout:auto;
}
.table-wrap.fit th:last-child,
.table-wrap.fit td:last-child{
  text-align:right;       /* numbers line up neatly */
}
@media (max-width:900px){
  .table-wrap.fit{ display:block; width:100%; }
}

/* B) Optional non-table version (2-col grid) */
.dist-list{
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  overflow:hidden;
}
.dist-row{
  display:grid;
  grid-template-columns:1fr auto;  /* label grows, count hugs content */
  gap:.6rem;
  padding:.48rem .7rem;
  align-items:center;
}
.dist-head{ font-weight:700; background:rgba(255,255,255,.03); }
.dist-row + .dist-row{ border-top:1px solid rgba(255,255,255,.08); }
.ta-right{ text-align:right; }

/* ======== Scores page niceties (optional) ======== */
.two-col{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:1rem; }
.two-col > *{ min-width:0; }
@media (max-width:1200px){ .two-col{ grid-template-columns:1fr; } }

.recent-cards{ table-layout:fixed; }
.recent-cards thead th:nth-child(3),
.recent-cards tbody td:nth-child(3){
  width:21%; white-space:normal; word-break:break-word; overflow-wrap:anywhere; font-size:11pt; line-height:1.25;
}

.leaderboard table thead th:nth-child(6),
.leaderboard table tbody td:nth-child(6){
  white-space:normal; word-break:break-word; overflow-wrap:anywhere;
}
/* ====== MOBILE PATCH (≤900px) — safe to append at end ====== */
@media (max-width: 900px){
  /* 1) Filters: one per row */
  .scores-grid{
    grid-template-columns: 1fr !important;
    gap: .55rem;
  }

  /* 2) Card padding + radius a bit tighter on phones */
  .card{
    padding: .85rem .95rem;
    border-radius: 1px;
  }

  /* 3) Tables: when using stack-sm, remove the desktop min-width
        so the rows become full-width “cards” (no horizontal scroll) */
  .table-wrap > table.stack-sm{
    min-width: 0 !important;
    width: 100%;
  }

  /* 4) Card-row layout polish */
  table.stack-sm tbody tr{
    margin: .65rem 0;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    background: #0c131b;
  }
  table.stack-sm tbody td{
    grid-template-columns: 46% 54%;
    gap: .4rem;
    padding: .75rem .9rem;
  }

  /* 5) Dist list (Ring/Count) should span full width on phones */
  .dist-list{
    width: 100% !important;
  }

  /* 6) Buttons/tap targets */
  button, a.btn{ padding: .7rem 1rem; }

  /* 7) Slightly smaller table text for fit */
  table{ font-size: .96rem; }
}

/* Tiny phones: give labels a bit more space */
@media (max-width: 480px){
  table.stack-sm tbody td{ grid-template-columns: 50% 50%; }
}
/* --- Recent Scorecards: show all columns on desktop, stack on mobile --- */
.table-wrap.scroll-x{
  overflow: auto !important;                 /* enable horizontal scroll when needed */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}
.table-wrap.scroll-x > table{
  min-width: 960px;                          /* forces all columns to be visible on desktop */
}
@media (max-width:900px){
  .table-wrap.scroll-x > table{              /* kill min-width on phones */
    min-width: 0 !important;
    width: 100%;
  }
}

/* You already have table.stack-sm rules. This ensures .recent-cards
   benefits from them (labels in cards, no sideways scroll). */
@media (max-width:900px){
  .recent-cards thead{ display:none; }
  .recent-cards tbody tr{
    display:block; margin:.75rem 0;
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px; overflow:hidden; background:#0c131b;
    box-shadow:0 6px 18px rgba(0,0,0,.25);
  }
  .recent-cards tbody td{
    display:grid; grid-template-columns:46% 54%;
    gap:.4rem; padding:.8rem .9rem;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .recent-cards tbody td:last-child{ border-bottom:none; }
  .recent-cards tbody td::before{
    content: attr(data-label); font-weight:700; color:var(--muted);
  }
}

/* Dist list full width on phones */
@media (max-width:900px){
  .dist-list{ width:100% !important; }
}

.hl-best, .hl-worst { color: #e9f2ee; } /* readable on dark tinted tiles */

/* Theme vars (adjust to your palette) */
:root {
  --card-bg: #ffffff;
  --card-fg: #0b1220;
}
html[data-theme="dark"], body.dark, .theme-dark {
  --card-bg: #0b1118;
  --card-fg: #e9eef7;
}

/* Activity badge/pill */
.activity-badge {
  /* Expect inline style="--h:210" or a data attr that sets --h */
  --sat: 65%;
  --l-light: 92%;   /* light mode background lightness */
  --l-dark: 28%;    /* dark mode background lightness */
  --bd-light: 78%;  /* light mode border lightness */
  --bd-dark: 20%;   /* dark mode border lightness */

  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  font-size: .90rem;
  line-height: 1;
  white-space: nowrap;

  background: hsl(var(--h, 0), var(--sat), var(--l-light));
  color: #0b1118;          /* readable on light bg */
  border: 1px solid hsl(var(--h, 0), var(--sat), var(--bd-light));
}

/* Dark mode variant */
html[data-theme="dark"] .activity-badge,
body.dark .activity-badge,
.theme-dark .activity-badge {
  background: hsl(var(--h, 0), var(--sat), var(--l-dark));
  color: #ffffff;          /* readable on dark bg */
  border-color: hsl(var(--h, 0), var(--sat), var(--bd-dark));
}

/* Optional: subtle hover focus */
.activity-badge:where(a,button):hover { filter: brightness(1.02); }
.activity-badge:where(a,button):focus { outline: 2px solid rgba(255,255,255,.35); outline-offset: 2px; }


/* header sits BEHIND sticky columns */
.board thead th{
  position: sticky;
  top: 0;
  z-index: 1;                 /* ↓ lower than sticky cols */
  background:#0b1118;
  border-bottom:1px solid rgba(255,255,255,.18);
  font-size:.92rem;
}

/* sticky columns above header */
.col-sticky1{ position:sticky; left:0;  z-index:100; background:#0b1118; border-right:1px solid rgba(255,255,255,.12); }
.col-sticky2{ position:sticky; left:360px; z-index:99;  background:#0b1118; border-right:1px solid rgba(255,255,255,.12); }

/* universal small radius */
input, select, textarea, .btn, .chip-box, .btn-note {
  border-radius: 0px !important;
}

/* and keep these compact */
.chip-box{
  padding:.16rem .38rem;
  border-radius:1px; /* was 6 */
}
input.score, input.maxcap, input.pct, .sum-input{
  border-radius:1px; /* was 6 */
}
.sort-stack .btn{ border-radius:1px; } /* square-ish */

/* --- Fix layering: left sticky headers must sit above the day headers --- */
.board thead th {               /* day/activity headers */
  z-index: 2;                   /* low */
}

.board thead .col-sticky1,
.board thead .col-sticky2 {     /* "Name / Tags" and "Camper · Bow/Hand" in THEAD */
  position: sticky;
  left: auto;                   /* keep existing left from class, but ensure sticky context */
  z-index: 50;                  /* above everything else in the header */
  background: #0b1118;          /* solid bg so nothing bleeds through */
}

/* Also raise the body’s left sticky cells so they beat the header row */
.board tbody .col-sticky1 { z-index: 40; background: #0b1118; }
.board tbody .col-sticky2 { z-index: 39; background: #0b1118; }

/* --- Correct layering: day headers under left sticky columns --- */

/* Day/activity header cells across the top */
.board thead th {
  position: sticky;
  top: 0;
  z-index: 2;                 /* sit underneath the left sticky columns */
}

/* Top-left sticky header cells (Name/Tags, Camper · Bow/Hand) */
.board thead th.col-sticky1 {
  z-index: 6;                 /* above the day headers */
  left: 0;                    /* keep aligned with first sticky column */
  background: #0b1118;
}
.board thead th.col-sticky2 {
  z-index: 6;                 /* above the day headers */
  left: 360px;                /* match .col-name width */
  background: #0b1118;
}

/* Body left sticky cells should also beat the day header when scrolling */
.board tbody td.col-sticky1 {
  z-index: 5;
  left: 0;
  background: #0b1118;
}
.board tbody td.col-sticky2 {
  z-index: 4;
  left: 360px;                /* match .col-name width */
  background: #0b1118;
}

/* Keep per-camper modals above the score modal overlay */
.modal { z-index: 1001; }          /* gear/notes */
#score-modal.modal { z-index: 1000; } /* shared scoring modal */

/* =========================================================
   Birchwood Dashboard Polish (non-breaking add-on)
   Safe to append under v34
   ========================================================= */

/* Subtle depth + motion on cards (keeps your existing colors) */
.card{
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
}
.card:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 36px rgba(0,0,0,.28);
}

/* Muted helper already exists; give headings in cards a consistent rhythm */
.card h2{
  margin: .1rem 0 .45rem 0;
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  letter-spacing: .01em;
}

/* Mini primary buttons for “Quick Links” and minor CTAs */
.btn-mini{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .75rem; border-radius:10px;
  background: linear-gradient(180deg, var(--link), #3ea3e6);
  color:#041314; text-decoration:none; font-weight:700;
  border:0; box-shadow: inset 0 -1px 0 #00000033;
  transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
}
.btn-mini:hover{ filter: brightness(1.05); box-shadow: 0 6px 16px rgba(75,179,253,.35); }
.btn-mini:active{ transform: translateY(1px) scale(.995); }

/* Avatar styles for dashboard header */
.avatar{
  width:72px; height:72px; object-fit:cover; border-radius:50%;
  border:1px solid rgba(255,255,255,.20);
}
.avatar-fallback{
  width:72px; height:72px; border-radius:50%;
  background:#1c2833; color:#fff;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.20); font-weight:700;
}

/* Small stack utilities to replace inline flex gaps */
.stack-s{ display:flex; gap:.6rem; flex-wrap:wrap; }
.stack-m{ display:flex; gap:.9rem; flex-wrap:wrap; }

/* Table polish without changing layout */
table.resp{ width:100%; border-collapse:collapse; border-radius:12px; overflow:hidden; }
table.resp thead th{
  background:#ffffff10;
  text-align:left; padding:.6rem .7rem; border-bottom:1px solid rgba(255,255,255,.10);
}
table.resp tbody td{ padding:.55rem .7rem; }
table.resp tbody tr:hover{ background:#ffffff07; }

/* Highlight tiles (best/worst) using your existing palette */
.hl-grid{ display:grid; gap:.9rem; grid-template-columns:1fr; }
@media (min-width:700px){ .hl-grid{ grid-template-columns:1fr 1fr; } }

.hl-best{
  background:#103218; border:1px solid #2a6; color:#cfeadd;
  border-radius:12px; padding:.8rem .9rem;
}
.hl-worst{
  background:#261416; border:1px solid #b44444; color:#f5d1d1;
  border-radius:12px; padding:.8rem .9rem;
}

/* Sparkline wrapper (keeps your SVG) */
.spark-wrap{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.6rem; }

/* Flash helpers mapped to your palette */
.flash-ok{ background:#103218; border-color:#2a6; }
.flash-err{ background:#2a1313; border-color:#b44; }

/* Focus rings tuned to brand link color */
a:focus-visible, .btn-mini:focus-visible, button:focus-visible{
  outline:2px solid var(--link); outline-offset:2px;
}

/* Slightly nicer active marker in sidebar (keeps your logic) */
.side-nav a.active{ position:relative; }
@media (min-width:1100px){
  .side-nav a.active::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
    background: var(--head-green);
  }
}

/* --- Light mode adjustment for Best/Worst tiles --- */
html[data-theme="light"] .hl-best,
body:not(.theme-dark) .hl-best {
  background: #e7f5ec;               /* soft green tint */
  border-color: #6abf8d;
  color: #0b2e18;                    /* dark text for contrast */
}

html[data-theme="light"] .hl-worst,
body:not(.theme-dark) .hl-worst {
  background: #fce7e7;               /* soft red tint */
  border-color: #e47777;
  color: #3a0b0b;                    /* darker red text */
}