/* MacKinnon Career Dashboard | Premium UI skin
   Notes:
   - Keep animations subtle for mobile
   - Avoid em dash characters in UI text
*/

:root{
  --font: "Montserrat", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;

  /* Theme (dark default) */
  --bg0: #050708;
  --bg1: #0a1212;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.085);
  --text: #e8f0ec;
  --muted: rgba(232,240,236,.74);
  --line: rgba(232,240,236,.14);

  /* Avs-ish accents */
  --accent: #8ccaaf;      /* mint */
  --accent2:#6bd6ff;      /* icy */
  --burgundy:#6f263d;
  --gold:#f2c04c;
  --danger:#ff6b6b;

  --radius: 18px;
  --radius2: 22px;
  --shadow: 0 18px 44px rgba(0,0,0,.55);
  --shadow2: 0 14px 36px rgba(0,0,0,.38);

  --ring: 0 0 0 1px var(--line) inset;

  /* UI surfaces */
  --surface0: rgba(255,255,255,.04);
  --surface1: rgba(255,255,255,.06);
  --surface2: rgba(255,255,255,.085);

  --btnBg: rgba(255,255,255,.05);
  --btnBgHover: rgba(255,255,255,.08);
  --btnBorder: rgba(255,255,255,.14);
  --btnBorderHover: rgba(255,255,255,.22);
  --btnActiveBg: rgba(140,202,175,.16);

  --inputBg: rgba(255,255,255,.04);
  --inputBorder: rgba(255,255,255,.14);
  --inputBorderFocus: rgba(140,202,175,.50);

  --rinkStop1: rgba(255,255,255,.16);
  --rinkStop2: rgba(255,255,255,.06);
  --rinkStrokeStrong: rgba(255,255,255,.18);
  --rinkStroke: rgba(255,255,255,.14);
  --rinkStrokeSoft: rgba(255,255,255,.10);

}

[data-theme="light"]{
  --bg0:#f6fbf8;
  --bg1:#e8f2ee;
  --card: rgba(0,0,0,.045);
  --card2: rgba(0,0,0,.06);
  --text:#0d1414;
  --muted: rgba(13,20,20,.68);
  --line: rgba(13,20,20,.14);
  --shadow: 0 18px 44px rgba(0,0,0,.12);
  --shadow2: 0 14px 36px rgba(0,0,0,.09);

  --surface0: rgba(0,0,0,.03);
  --surface1: rgba(0,0,0,.045);
  --surface2: rgba(0,0,0,.06);

  --btnBg: rgba(0,0,0,.04);
  --btnBgHover: rgba(0,0,0,.06);
  --btnBorder: rgba(0,0,0,.12);
  --btnBorderHover: rgba(0,0,0,.18);
  --btnActiveBg: rgba(111,38,61,.10);

  --inputBg: rgba(0,0,0,.035);
  --inputBorder: rgba(0,0,0,.14);
  --inputBorderFocus: rgba(111,38,61,.44);

  --rinkStop1: rgba(0,0,0,.10);
  --rinkStop2: rgba(0,0,0,.03);
  --rinkStrokeStrong: rgba(0,0,0,.18);
  --rinkStroke: rgba(0,0,0,.14);
  --rinkStrokeSoft: rgba(0,0,0,.10);

}


*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  font-family:var(--font);
  background:
    radial-gradient(1000px 640px at 15% 10%, rgba(140,202,175,.18), transparent 56%),
    radial-gradient(900px 620px at 85% 0%, rgba(107,214,255,.15), transparent 60%),
    radial-gradient(1200px 780px at 50% 115%, rgba(111,38,61,.22), transparent 58%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

/* Light theme needs its own softer rink glow. The dark theme background gradients
   read as "muddy" on light surfaces, so we lower the burgundy weight and lift
   the overall haze to keep the UI actually bright. */
html[data-theme="light"] body{
  background:
    radial-gradient(1000px 640px at 15% 10%, rgba(140,202,175,.22), transparent 58%),
    radial-gradient(900px 620px at 85% 0%, rgba(107,214,255,.14), transparent 62%),
    radial-gradient(1200px 780px at 50% 115%, rgba(111,38,61,.10), transparent 62%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

a{ color:inherit; }
button, input, select{ font-family:inherit; }
small{ color:var(--muted); }

.wrap{
  max-width: 1680px;
  margin: 0 auto;
  padding: clamp(14px, 2.2vw, 26px);
}

.shell{
  min-height: 100%;
  display:grid;
  grid-template-columns: 290px 1fr;
  gap: 18px;
}

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

/* Sidebar */
.side{
  position: sticky;
  top: 14px;
  align-self:start;
  border-radius: var(--radius2);
  background: var(--card);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  overflow:hidden;
}

.sideTop{
  padding: 14px 14px 12px 14px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(260px 160px at 12% 0%, rgba(140,202,175,.25), transparent 60%),
    radial-gradient(260px 160px at 90% 0%, rgba(107,214,255,.18), transparent 62%),
    rgba(255,255,255,.02);
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
}
.brandMark{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 50%),
    linear-gradient(135deg, rgba(140,202,175,.85), rgba(107,214,255,.65));
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  position:relative;
}
.brandMark:after{
  content:"";
  position:absolute;
  inset: 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.22);
}
.brandTitle{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
.brandTitle strong{ font-size: .98rem; letter-spacing:.02em; }
.brandTitle span{ font-size:.78rem; color:var(--muted); margin-top: 4px; }

.nav{
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.nav a{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration:none;
  color: var(--muted);
  border: 1px solid transparent;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}

.nav a:hover{
  transform: translateY(-1px);
  background: var(--btnBg);
  border-color: rgba(255,255,255,.08);
  color: var(--text);
}

.nav a.router-link-active{
  background:
    radial-gradient(340px 200px at 12% 0%, rgba(140,202,175,.22), transparent 60%),
    rgba(255,255,255,.06);
  border-color: rgba(140,202,175,.30);
  color: var(--text);
}

.ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: var(--btnBg);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}

.sideFooter{
  padding: 12px 14px 14px 14px;
  border-top: 1px solid var(--line);
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
}

.pillBtn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--btnBorder);
  background: var(--btnBg);
  color: var(--text);
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.pillBtn:hover{ transform: translateY(-1px); background: var(--btnBgHover); border-color: var(--btnBorderHover); }
.pillBtn:active{ transform: translateY(0); }

/* Main content */
.main{
  display:flex;
  flex-direction:column;
  gap: 18px;
}

.card{
  position:relative;
  overflow:hidden;
  border-radius: var(--radius2);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.cardInner{
  padding: clamp(14px, 2.2vw, 22px);
}

.cardGlow:before{
  content:"";
  position:absolute;
  inset:-120px -120px auto -120px;
  height: 260px;
  background:
    radial-gradient(circle at 40% 40%, rgba(140,202,175,.25), transparent 60%),
    radial-gradient(circle at 70% 30%, rgba(107,214,255,.18), transparent 60%);
  pointer-events:none;
}

.hRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
}

.hTitle{
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.kicker{
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform:uppercase;
  color: var(--muted);
}

.hTitle h1{
  margin:0;
  font-size: clamp(1.2rem, 2.4vw, 1.75rem);
  letter-spacing: .01em;
}

.hTitle p{
  margin:0;
  color: var(--muted);
  max-width: 58ch;
  line-height:1.4;
}

.heroGrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
  margin-top: 12px;
}

@media (max-width: 980px){
  .heroGrid{ grid-template-columns: 1fr; }
}

.profile{
  display:flex;
  gap: 16px;
  align-items:center;
}

.avatar{
  width: 86px;
  height: 86px;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid var(--btnBorder);
  background: var(--btnBg);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  position:relative;
  flex: 0 0 auto;
}
.avatar img{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.02);
}
.avatar:after{
  content:"";
  position:absolute;
  inset:0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset;
  pointer-events:none;
}

.quickMeta{
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.chips{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--btnBorder);
  background: var(--surface0);
  color: var(--muted);
  font-size: .85rem;
}
.chip strong{ color: var(--text); font-weight: 700; }

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 980px){
  .grid2{ grid-template-columns: 1fr; }
}

.statGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 620px){
  .statGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.stat{
  border-radius: 18px;
  background: var(--surface0);
  border: 1px solid var(--btnBorder);
  padding: 12px 12px;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.stat:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.055);
  border-color: rgba(140,202,175,.20);
}
.stat .label{
  font-size: .78rem;
  color: var(--muted);
  letter-spacing:.08em;
  text-transform: uppercase;
}
.stat .val{
  margin-top: 8px;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing:.01em;
}
.stat .sub{
  margin-top: 6px;
  font-size: .82rem;
  color: var(--muted);
}

.split{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  align-items:center;
}
@media (max-width: 620px){
  .split{ grid-template-columns: 1fr; }
}

.donut{
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background: var(--surface0);
  border: 1px solid var(--btnBorder);
  box-shadow: 0 16px 32px rgba(0,0,0,.22);
  position:relative;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.donut:hover{ transform: translateY(-1px); border-color: rgba(107,214,255,.24); }
.donut:after{
  content:"";
  position:absolute;
  inset: 18px;
  border-radius: 999px;
  background: rgba(0,0,0,.20);
  box-shadow: var(--ring);
}
[data-theme="light"] .donut:after{ background: rgba(255,255,255,.55); }
.donutCenter{
  position:relative;
  text-align:center;
  z-index:1;
}
.donutCenter .big{
  font-size: 1.1rem;
  font-weight: 900;
}
.donutCenter .small{
  font-size: .78rem;
  color: var(--muted);
  margin-top: 4px;
}

.spark{
  width: 100%;
  height: 56px;
  border-radius: 16px;
  border: 1px solid var(--btnBorder);
  background: var(--surface0);
  overflow:hidden;
  position:relative;
}
.spark svg{ width:100%; height:100%; display:block; }
.spark .hint{
  position:absolute;
  inset:auto 10px 8px auto;
  font-size: .76rem;
  color: var(--muted);
  background: rgba(0,0,0,.22);
  border: 1px solid var(--btnBorder);
  border-radius: 999px;
  padding: 6px 10px;
}
[data-theme="light"] .spark .hint{ background: rgba(255,255,255,.65); }

.table{
  width:100%;
  border-collapse:separate;
  border-spacing: 0 10px;
}
.table th{
  text-align:left;
  color: var(--muted);
  font-size: .78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding: 0 10px;
}
.table td{
  padding: 12px 10px;
  background: var(--surface0);
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.table tr td:first-child{
  border-left: 1px solid rgba(255,255,255,.10);
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}
.table tr td:last-child{
  border-right: 1px solid rgba(255,255,255,.10);
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: .82rem;
  color: var(--muted);
}
.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(140,202,175,.18);
}

.toast{
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--btnBorder);
  background: rgba(0,0,0,.38);
  color: var(--text);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  font-size: .86rem;
  z-index: 50;
}
[data-theme="light"] .toast{ background: rgba(255,255,255,.75); }

.modalBackdrop{
  position: fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  display:grid;
  place-items:center;
  padding: 16px;
  z-index: 60;
}
.modal{
  width: min(720px, 100%);
  border-radius: 22px;
  background: rgba(12,18,18,.92);
  border: 1px solid var(--btnBorder);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  overflow:hidden;
}
[data-theme="light"] .modal{ background: rgba(255,255,255,.92); }

.modalHead{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.modalHead h3{ margin:0; font-size: 1.02rem; }
.modalBody{ padding: 14px 16px 16px 16px; color: var(--muted); line-height:1.5; }
.modalBody strong{ color: var(--text); }

.iconBtn{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid var(--btnBorder);
  background: var(--surface1);
  color: var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: transform .12s ease, background .12s ease;
}
.iconBtn:hover{ transform: translateY(-1px); background: var(--surface2); }

.skel{
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
  background-size: 220% 100%;
  animation: shimmer 1.2s linear infinite;
}
.skel.w40{ width:40%; }
.skel.w60{ width:60%; }
.skel.w80{ width:80%; }
.skel.h24{ height: 24px; border-radius: 12px; }
@keyframes shimmer{ 0%{ background-position: 0% 0; } 100%{ background-position: 220% 0; } }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}


/* ===== Desktop polish pass (widescreen) ===== */
@media (min-width: 1200px){
  .shell{ grid-template-columns: 320px 1fr; gap: 22px; }
  .side{
    position: sticky;
    top: 18px;
    align-self: start;
    max-height: calc(100dvh - 36px);
  }
  .main{ padding: 18px; }
  .heroGrid{ gap: 20px; }
  .statGrid{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .card{ border-radius: 22px; }
  body{
    background:
      radial-gradient(1100px 680px at 18% -10%, rgba(140,202,175,.22), transparent 62%),
      radial-gradient(900px 560px at 92% 12%, rgba(107,214,255,.18), transparent 60%),
      radial-gradient(800px 520px at 60% 120%, rgba(255,255,255,.08), transparent 60%),
      #070b12;
  }
  body::before{
    content:"";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
      repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 56px),
      repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0px, rgba(255,255,255,.02) 1px, transparent 1px, transparent 56px);
    opacity: .22;
  }
}

@media (min-width: 1400px){
  .shell{ grid-template-columns: 340px 1fr; gap: 26px; }
  .grid2{ grid-template-columns: 1.2fr .8fr; }
  .brandTitle{ font-size: 1.06rem; }
  .sub{ font-size: .92rem; }
  .spark{ transform: translateZ(0); }
}


/* Live game module */
.liveBlock{
  border-radius: var(--radius2);
  border: 1px solid var(--btnBorder);
  background:
    radial-gradient(540px 220px at 20% 0%, rgba(140,202,175,.16), transparent 60%),
    radial-gradient(540px 240px at 88% 0%, rgba(107,214,255,.12), transparent 62%),
    rgba(255,255,255,.035);
  box-shadow: var(--shadow2);
  padding: 14px 14px 12px 14px;
}

.liveHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}

.liveScore{
  margin-top: 6px;
  font-size: 1.15rem;
  letter-spacing: .02em;
}
.liveDash{ opacity:.6; padding: 0 8px; }

.liveMeta{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  margin-top: 8px;
}

.livePlayerLine{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  margin-top: 8px;
}

.liveGrid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
  align-items:stretch;
}

@media (max-width: 980px){
  .liveGrid{ grid-template-columns: 1fr; }
}

.rink{
  border-radius: 18px;
  border: 1px solid var(--btnBorder);
  background: var(--surface0);
  overflow:hidden;
  padding: 10px;
}

.rink svg{
  width:100%;
  height:auto;
  display:block;
}

.liveSide{
  border-radius: 18px;
  border: 1px solid var(--btnBorder);
  background: var(--surface0);
  padding: 12px;
}

@media (min-width: 1200px){
  .heroGrid{ grid-template-columns: 1.25fr .75fr; gap: 18px; }
  .cardInner{ padding: clamp(16px, 2vw, 24px); }
}



/* === Icon system (SVG uses currentColor) === */
.ico svg, .icon svg{
  width: 18px;
  height: 18px;
  display:block;
}
.ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow: var(--ring);
}
[data-theme="light"] .ico{
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.02));
}

.pillBtn .icon{
  display:inline-grid;
  place-items:center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

/* === Desktop polish === */
@media (min-width: 1100px){
  .shell{
    grid-template-columns: 320px 1fr;
    gap: 22px;
  }
  .card{
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
  }
  .card:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.10) inset;
  }
  [data-theme="light"] .card:hover{
    box-shadow: var(--shadow), 0 0 0 1px rgba(0,0,0,.10) inset;
  }
}

/* === Live feels alive === */
.liveDot{
  animation: livePulse 1.4s var(--ease) infinite;
  transform-origin: center;
  filter: drop-shadow(0 0 14px rgba(140,202,175,.35));
}
@keyframes livePulse{
  0%{ transform: scale(1); opacity:.72; }
  50%{ transform: scale(1.22); opacity:1; }
  100%{ transform: scale(1); opacity:.72; }
}

/* Improve light theme readability on small text */
[data-theme="light"] .kicker{
  color: rgba(13,20,20,.72);
}
[data-theme="light"] .muted, [data-theme="light"] .sub{
  color: rgba(13,20,20,.64);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .card, .liveDot{ animation: none !important; transition: none !important; }
}

/* Active / selected button state */
.pillBtn.isActive{
  background: var(--btnActiveBg);
  border-color: color-mix(in srgb, var(--btnBorder) 40%, var(--accent) 60%);
}

/* Subtle pill for tags */
.pillBtnSubtle{
  background: var(--surface0);
}
.pillBtnSubtle:hover{
  background: var(--surface1);
}

/* Form input */
.textInput{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--inputBorder);
  background: var(--inputBg);
  color: var(--text);
  outline: none;
}
.textInput:focus{
  border-color: var(--inputBorderFocus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}