/* ============================================================================
   FieldSync — Meet Manager UI upgrade ("manager.css")
   Only linked from index.html — refines the shared styles.css components
   (cards, buttons, tabs, tables, modals, pills) to match the Athlete Display
   ("presenter") visual language: soft depth, purple gradient accent, calmer
   spacing, clearer hierarchy. No HTML structure changes required — this file
   restyles existing classes and adds a handful of new, purely additive ones
   (welcome banner, help/glossary modal, feedback widget).
   Beta-readiness pass: visual + onboarding only, zero logic changes.
   ========================================================================== */

:root{
  --mgr-radius-sm: 10px;
  --mgr-radius: 14px;
  --mgr-radius-lg: 18px;
  --mgr-shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03);
  --mgr-shadow: 0 4px 16px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --mgr-shadow-lg: 0 16px 44px rgba(15,23,42,.14), 0 4px 12px rgba(15,23,42,.06);
  --mgr-accent-grad: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  --mgr-ring: 0 0 0 3px rgba(124,58,237,.16);
  --mgr-border: rgba(148,163,184,.28);
}
[data-theme="dark"]{
  --mgr-shadow-sm: 0 1px 2px rgba(0,0,0,.25);
  --mgr-shadow: 0 4px 18px rgba(0,0,0,.35);
  --mgr-shadow-lg: 0 20px 50px rgba(0,0,0,.5);
  --mgr-border: rgba(148,163,184,.16);
}

body[data-page="manager"]{
  font-family: "Inter", var(--sans);
  letter-spacing: -.005em;
}

/* ── Topbar ───────────────────────────────────────────────────────────── */
body[data-page="manager"] .topbar{
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--mgr-border);
  flex-wrap: wrap;
}
body[data-page="manager"] h1{
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.01em;
}
body[data-page="manager"] .sub{
  font-size: 12.5px;
}
body[data-page="manager"] .right{
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Pills ────────────────────────────────────────────────────────────── */
body[data-page="manager"] .pill{
  border-radius: 999px;
  box-shadow: none;
  border-color: var(--mgr-border);
  font-weight: 600;
  transition: border-color .15s ease, background .15s ease;
}
body[data-page="manager"] .dot{
  box-shadow: 0 0 0 3px rgba(239,68,68,.14);
}
body[data-page="manager"] .dot.ok{
  box-shadow: 0 0 0 3px rgba(34,197,94,.16);
}

/* Help pill (new) */
.mgrHelpPill{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 13px; border-radius:999px;
  border:1px solid var(--mgr-border); background:var(--card);
  font-size:12.5px; font-weight:700; color:var(--text);
  cursor:pointer; transition:border-color .15s ease, transform .1s ease;
}
.mgrHelpPill:hover{ border-color:rgba(124,58,237,.4); }
.mgrHelpPill:active{ transform:scale(.97); }
.mgrHelpPill .mgrHelpDot{
  width:16px;height:16px;border-radius:50%;
  background:var(--mgr-accent-grad); color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:900;flex:0 0 auto;
}

/* ── Tabs / Subtabs ───────────────────────────────────────────────────── */
body[data-page="manager"] .subtabs{
  display:flex; gap:4px; padding:4px;
  background:var(--card); border:1px solid var(--mgr-border);
  border-radius:999px; width:fit-content; margin:12px 0 18px;
  box-shadow: var(--mgr-shadow-sm);
}
body[data-page="manager"] .subtab{
  border:0; border-radius:999px; background:transparent;
  padding:8px 16px; font-size:13px; font-weight:700;
  color:var(--muted); transition:background .15s ease, color .15s ease;
}
body[data-page="manager"] .subtab.active{
  background:var(--mgr-accent-grad); color:#fff;
  box-shadow: 0 2px 8px rgba(124,58,237,.35);
}
body[data-page="manager"] .subtab:not(.active):hover{
  background:rgba(124,58,237,.08); color:var(--text);
}

/* ── Cards ────────────────────────────────────────────────────────────── */
body[data-page="manager"] .card{
  border-radius: var(--mgr-radius-lg);
  border-color: var(--mgr-border);
  box-shadow: var(--mgr-shadow);
  transition: box-shadow .18s ease;
}
body[data-page="manager"] .cardHd{
  padding: 15px 18px;
  border-color: var(--mgr-border);
}
body[data-page="manager"] .cardTitle{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.005em;
}
body[data-page="manager"] .cardBd{ padding: 18px; }
body[data-page="manager"] .cardHd .muted{ font-size: 11.5px; }

/* ── Forms ────────────────────────────────────────────────────────────── */
body[data-page="manager"] label{
  font-size: 11.5px; font-weight: 700; letter-spacing:.01em;
  text-transform: uppercase; color: var(--muted); opacity:.85;
}
body[data-page="manager"] input,
body[data-page="manager"] select,
body[data-page="manager"] textarea{
  border-radius: var(--mgr-radius-sm);
  border-color: var(--mgr-border);
  padding: 10px 12px;
  font-size: 13.5px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body[data-page="manager"] input:focus,
body[data-page="manager"] select:focus,
body[data-page="manager"] textarea:focus{
  border-color: rgba(124,58,237,.5);
  box-shadow: var(--mgr-ring);
}
body[data-page="manager"] .hint{ font-size: 11.5px; line-height:1.5; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
body[data-page="manager"] .btn,
body[data-page="manager"] .btnSmall{
  border-radius: var(--mgr-radius-sm);
  font-size: 13px;
  font-weight: 700;
  transition: transform .1s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
body[data-page="manager"] .btn:hover{ transform: translateY(-1px); }
body[data-page="manager"] .btn:active{ transform: translateY(0); }
body[data-page="manager"] .btn.primary{
  background: var(--mgr-accent-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 10px rgba(124,58,237,.3);
}
body[data-page="manager"] .btn.primary:hover{
  box-shadow: 0 6px 18px rgba(124,58,237,.4);
}
body[data-page="manager"] .btn:focus-visible,
body[data-page="manager"] .btnSmall:focus-visible{
  outline: none; box-shadow: var(--mgr-ring);
}

/* ── Tables ───────────────────────────────────────────────────────────── */
body[data-page="manager"] .tbl th{
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 800; color: var(--muted);
  padding-bottom: 12px;
}
body[data-page="manager"] .tbl td{ font-size: 13.5px; }
body[data-page="manager"] .tbl tr:hover td{ background: rgba(124,58,237,.045); }

/* ── Modals ───────────────────────────────────────────────────────────── */
body[data-page="manager"] .modalBackdrop{
  backdrop-filter: blur(3px);
  animation: mgrFadeIn .15s ease;
}
body[data-page="manager"] .modal{
  border-radius: var(--mgr-radius-lg);
  box-shadow: var(--mgr-shadow-lg);
  animation: mgrPopIn .18s cubic-bezier(.22,.61,.36,1);
}
@keyframes mgrFadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes mgrPopIn{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }

/* .modalClose / .modalFt have no rules anywhere else in the app (plain browser
   button chrome) — give every modal in Meet Manager a clean close button and
   a proper footer bar for free. */
body[data-page="manager"] .modalClose{
  border: none; background: transparent; cursor: pointer;
  width: 30px; height: 30px; border-radius: 8px;
  font-size: 20px; line-height: 1; color: var(--muted);
  display:flex; align-items:center; justify-content:center;
  flex: 0 0 auto; transition: background .12s ease, color .12s ease;
}
body[data-page="manager"] .modalClose:hover{ background: rgba(124,58,237,.1); color: var(--text); }
body[data-page="manager"] .modalFt{
  padding: 12px 18px; border-top: 1px solid var(--mgr-border);
  display:flex; align-items:center; justify-content:flex-end; gap:8px;
}

/* ── Welcome / quick-start banner (new, additive) ────────────────────── */
.mgrWelcome{
  position: relative;
  display: flex; align-items: flex-start; gap: 16px;
  background: linear-gradient(135deg, rgba(124,58,237,.10) 0%, rgba(167,139,250,.05) 100%);
  border: 1px solid rgba(124,58,237,.22);
  border-radius: var(--mgr-radius-lg);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.mgrWelcome.hidden{ display:none; }
.mgrWelcomeIcon{
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  background: var(--mgr-accent-grad); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size: 18px; font-weight: 900;
}
.mgrWelcomeBody{ flex: 1; min-width: 0; }
.mgrWelcomeTitle{ font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.mgrWelcomeText{ font-size: 13px; color: var(--muted); line-height: 1.55; margin-bottom: 10px; }
.mgrWelcomeSteps{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px; margin-bottom: 4px;
}
.mgrStep{
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--text);
  background: var(--card); border: 1px solid var(--mgr-border);
  border-radius: 10px; padding: 8px 10px;
}
.mgrStep .mgrStepNum{
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(124,58,237,.15); color: var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size: 11px; font-weight: 900;
}
.mgrWelcomeClose{
  position: absolute; top: 12px; right: 14px;
  border: none; background: transparent; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--muted);
  padding: 4px; border-radius: 6px;
}
.mgrWelcomeClose:hover{ background: rgba(124,58,237,.1); color: var(--text); }

/* ── Help / Glossary modal content (new) ─────────────────────────────── */
.mgrHelpTabs{ display:flex; gap:6px; margin-bottom:14px; }
.mgrHelpTab{
  border:1px solid var(--mgr-border); background:var(--card);
  padding:7px 13px; border-radius:999px; font-size:12.5px; font-weight:700;
  color:var(--muted); cursor:pointer;
}
.mgrHelpTab.active{ background:var(--mgr-accent-grad); color:#fff; border-color:transparent; }
.mgrGlossaryList{ display:flex; flex-direction:column; gap:10px; max-height: 360px; overflow:auto; }
.mgrGlossaryItem{ border-bottom: 1px solid var(--mgr-border); padding-bottom: 10px; }
.mgrGlossaryItem:last-child{ border-bottom:none; }
.mgrGlossaryTerm{ font-weight:800; font-size:13px; }
.mgrGlossaryDef{ font-size:12.5px; color:var(--muted); line-height:1.5; margin-top:2px; }
.mgrGettingStarted ol{ padding-left: 20px; margin: 0; }
.mgrGettingStarted li{ font-size:13px; line-height:1.7; }

/* ── Feedback widget (new, additive — beta mockup, stored locally) ──── */
.mgrFeedbackFab{
  position: fixed; bottom: 24px; left: 24px; z-index: 100;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--card); color: var(--accent);
  border: 1px solid rgba(124,58,237,.35);
  cursor: pointer; box-shadow: var(--mgr-shadow-lg);
  display:flex; align-items:center; justify-content:center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mgrFeedbackFab:hover{ transform: scale(1.07); }
.mgrFeedbackFab svg{ width:24px; height:24px; }
.mgrFeedbackBadge{
  position:absolute; top:-2px; right:-2px;
  background:#ef4444; color:#fff; font-size:10px; font-weight:900;
  min-width:16px; height:16px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  padding: 0 3px; display:none;
}
.mgrFeedbackBadge.show{ display:flex; }

.mgrFeedbackPanel{
  position: fixed; bottom: 86px; left: 24px; z-index: 101;
  width: min(360px, calc(100vw - 32px));
  background: var(--card); border:1px solid var(--mgr-border);
  border-radius: var(--mgr-radius-lg); box-shadow: var(--mgr-shadow-lg);
  padding: 16px; display:none;
}
.mgrFeedbackPanel.open{ display:block; animation: mgrPopIn .18s cubic-bezier(.22,.61,.36,1); }
.mgrFeedbackHd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.mgrFeedbackTitle{ font-weight:800; font-size:14px; }
.mgrFeedbackClose{ border:none; background:transparent; cursor:pointer; font-size:18px; color:var(--muted); }
.mgrFeedbackNote{ font-size:11.5px; color:var(--muted); line-height:1.5; margin-bottom:10px; }
.mgrFeedbackCats{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.mgrFeedbackCat{
  border:1px solid var(--mgr-border); background:transparent;
  padding:6px 11px; border-radius:999px; font-size:12px; font-weight:700;
  color:var(--muted); cursor:pointer;
}
.mgrFeedbackCat.active{ background:rgba(124,58,237,.14); border-color:rgba(124,58,237,.4); color:var(--accent); }
.mgrFeedbackPanel textarea{
  width:100%; min-height:78px; border-radius:10px; border:1px solid var(--mgr-border);
  padding:10px; font-size:13px; font-family:inherit; resize:vertical;
}
.mgrFeedbackSubmit{
  margin-top:10px; width:100%; border:none; border-radius:10px;
  background:var(--mgr-accent-grad); color:#fff; font-weight:800; font-size:13px;
  padding:10px; cursor:pointer;
}
.mgrFeedbackThanks{
  font-size:12.5px; color:#16a34a; font-weight:700; margin-top:8px; display:none;
}
.mgrFeedbackThanks.show{ display:block; }

@media (max-width: 640px){
  .mgrFeedbackFab{ bottom:16px; left:16px; }
  .mgrFeedbackPanel{ left:16px; bottom:78px; }
  .mgrWelcomeSteps{ grid-template-columns: 1fr 1fr; }
}