@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{--bg:#f5f7fb;--panel:#fff;--line:#dbe4ef;--text:#162137;--muted:#68778f;--blue:#2467d6;--blue2:#eaf2ff;--green:#16714a;--green2:#e5f6ee;--amber:#a36b00;--amber2:#fff3d7}
*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:Inter,'Segoe UI',Arial,sans-serif;color:var(--text);font-size:14px}
.topbar{height:48px;padding:0 16px;display:flex;justify-content:space-between;align-items:center;background:#fff;border-bottom:1px solid var(--line)}
.topbar>div:first-child{display:flex;align-items:center;gap:12px}.topbar b{font-size:17px;color:var(--blue)}.topbar span{font-weight:800}.legend{display:flex;gap:18px;color:var(--muted);font-size:12px}
.draftLockBanner{padding:9px 16px;background:#fff3d7;color:#805600;border-bottom:1px solid #f0d99a;font-size:12.5px;font-weight:800;text-align:center}
.controls{height:48px;display:grid;grid-template-columns:1fr 150px auto;gap:8px;padding:7px 12px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
input,select,button{font:inherit;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);padding:7px 10px}button{cursor:pointer;font-weight:800}
.tabs{display:flex;gap:5px;overflow-x:auto;padding:7px 12px;background:#f7f9fc;border-bottom:1px solid var(--line)}
.tabs button{white-space:nowrap;border-radius:999px;padding:6px 10px}.tabs button.active{background:var(--blue);border-color:var(--blue);color:#fff}
.teamLine{display:flex;align-items:center;gap:22px;padding:8px 14px;background:#fff;border-bottom:1px solid var(--line);min-height:44px}
.teamLine h1{font-size:21px;margin:0}.teamMeta{display:flex;gap:18px;flex-wrap:wrap}.teamMeta span{color:var(--muted)}.teamMeta b{color:var(--text)}
main{padding:8px 12px 24px}.tableWrap{background:#fff;border:1px solid var(--line);border-radius:11px;overflow:auto;max-height:calc(100vh - 165px)}
table{width:100%;border-collapse:separate;border-spacing:0;min-width:1700px;font-variant-numeric:tabular-nums}
th{position:sticky;top:0;z-index:4;background:#eef3f9;color:#4f6079;font-size:11px;text-align:right;padding:7px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
th.left{text-align:left}td{padding:6px;border-bottom:1px solid #e5ebf3;text-align:right;white-space:nowrap;height:43px}
tbody tr:hover{background:#f7fbff}td.left{text-align:left}
.sticky1{position:sticky;left:0;z-index:3;background:inherit}.sticky2{position:sticky;left:63px;z-index:3;background:inherit}.sticky3{position:sticky;left:126px;z-index:3;background:inherit}.sticky4{position:sticky;left:189px;z-index:3;background:inherit}
th.sticky1,th.sticky2,th.sticky3,th.sticky4{z-index:7;background:#eef3f9}
.status{width:45px;height:29px;padding:0;border-radius:7px;background:#f3f5f8;font-weight:950;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);cursor:default}.status.x{background:var(--green2);color:var(--green)}.status.tx{background:var(--blue2);color:var(--blue)}.status.FA{background:var(--amber2);color:var(--amber)}.status.LOP{background:#eceff4;color:#596375}.status.t26{background:#eceff4;color:#596375;font-size:11px}
.status.editable{cursor:pointer}.status.editable:hover{filter:brightness(.97)}
.status.pending{opacity:.75;cursor:wait}
.miniSpinner{width:13px;height:13px;border:2px solid rgba(22,33,55,.18);border-top-color:var(--blue);border-radius:50%;animation:miniSpin .6s linear infinite}
@keyframes miniSpin{to{transform:rotate(360deg)}}
.teamStepBtn{display:none}

.statusMenu{position:fixed;z-index:60;background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 16px 38px rgba(20,40,70,.2);padding:6px;min-width:200px;display:flex;flex-direction:column;gap:2px}
.statusMenuItem{width:100%;text-align:left;padding:9px 11px;border-radius:8px;border:1px solid transparent;background:#fff;font-weight:800;font-size:12.5px;cursor:pointer}
.statusMenuItem:hover:not(:disabled){background:#f4f7fb}
.statusMenuItem.active{background:var(--blue2);color:var(--blue);border-color:#bcd6f7}
.statusMenuItem:disabled{opacity:.4;cursor:not-allowed}
.statusMenuLabel{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:900;padding:7px 11px 3px}
.statusMenuDivider{height:1px;background:var(--line);margin:5px 3px}
.statusMenuNote{font-size:10.5px;color:var(--muted);padding:2px 11px 5px}
.stars{color:#b97a00;font-weight:950;font-size:16px}.salary{font-weight:950;font-size:15px}
.playerCell{min-width:245px;cursor:pointer}.playerMain{display:flex;align-items:center;gap:7px}.playerName{font-weight:950;font-size:14px}.playerSub{font-size:11px;color:var(--muted);margin-top:2px}
.playerStatLine{display:none}
.tulokasBadge{background:var(--blue2);color:var(--blue);font-size:10px;font-weight:900;padding:2px 7px;border-radius:999px}
.vhlDraftBadge{background:var(--amber2);color:#805600;font-size:10px;font-weight:900;padding:2px 7px;border-radius:999px}
.pos{display:inline-flex;align-items:center;justify-content:center;min-width:37px;height:27px;border-radius:7px;color:#fff;font-weight:950;font-size:13px;border:1px solid transparent}
.pos-forward{background:#294f80;border-color:#234570}
.pos-defense{background:#38775f;border-color:#2f6651}
.pos-goalie{background:#78558d;border-color:#674878}
.ovr{display:inline-flex;align-items:center;justify-content:center;width:42px;height:29px;border-radius:8px;background:#edf1f7;font-weight:950;position:relative}.ovr.high{background:var(--green2);color:var(--green)}.ovr.mid{background:var(--blue2);color:#1f509c}.ovr.low{background:var(--amber2);color:#805600}
.ovr:hover::after{content:attr(data-tip);position:absolute;left:50%;top:34px;transform:translateX(-50%);z-index:30;width:390px;background:#162137;color:#fff;border-radius:10px;padding:10px;white-space:normal;font-size:11px;line-height:1.45;box-shadow:0 14px 35px rgba(0,0,0,.25)}
.bold{font-weight:950}.drawer{position:fixed;right:0;top:0;bottom:0;width:min(540px,95vw);background:#fff;z-index:50;box-shadow:-18px 0 40px rgba(20,40,70,.2);overflow:auto}
.drawerHead{display:flex;gap:12px;align-items:center;padding:14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}.drawerHead button{font-size:22px;width:40px;height:40px;padding:0}.drawerName{font-size:23px;font-weight:950}.drawerSub{font-size:12px;color:var(--muted);margin-top:2px}
.drawerSection{padding:14px;border-bottom:1px solid var(--line)}.drawerSection h3{margin:0 0 10px;font-size:17px}.statGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.stat{background:#f4f7fb;border-radius:9px;padding:9px}.stat span{display:block;color:var(--muted);font-size:10px;font-weight:900}.stat b{font-size:16px}
.attrGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.attr{display:flex;justify-content:space-between;background:#f4f7fb;border-radius:8px;padding:7px 9px;font-size:11px}.attr b{font-size:13px}
.overlay{position:fixed;inset:0;background:rgba(16,28,46,.25);z-index:40}.hidden{display:none!important}

tbody tr.status-row.fa td{background:#fff1f1}
tbody tr.status-row.lop td{background:#f0f2f5;color:#6c7480}
tbody tr.status-row.fa:hover td{background:#ffe6e6}
tbody tr.status-row.lop:hover td{background:#e7eaee}
tbody tr.status-row.fa .sticky1,
tbody tr.status-row.fa .sticky2,
tbody tr.status-row.fa .sticky3,
tbody tr.status-row.fa .sticky4{background:#fff1f1}
tbody tr.status-row.lop .sticky1,
tbody tr.status-row.lop .sticky2,
tbody tr.status-row.lop .sticky3,
tbody tr.status-row.lop .sticky4{background:#f0f2f5}

tbody tr.status-row.vhldraft td{background:#fff8ea;color:#8a6100}
tbody tr.status-row.vhldraft:hover td{background:#fef1d4}
tbody tr.status-row.vhldraft .sticky1,
tbody tr.status-row.vhldraft .sticky2,
tbody tr.status-row.vhldraft .sticky3,
tbody tr.status-row.vhldraft .sticky4{background:#fff8ea}

.tabs button{display:inline-flex;align-items:center;gap:6px}
.tabs button img{width:22px;height:22px;object-fit:contain;border-radius:50%;background:#fff}
.tabs.orgGrid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);row-gap:3px;column-gap:5px;align-items:start}
.tabTeam.farm{padding:3px 9px;font-size:11px;opacity:.8}
.tabTeam.farm img{width:15px;height:15px}
.tabTeam.farm.active{opacity:1}
.tabTeam.empty{visibility:hidden}
.teamIdentity{display:flex;align-items:center;gap:10px;min-width:max-content}
.teamIdentity.allTeams{gap:12px}
.teamLogo{width:34px;height:34px;object-fit:contain;border-radius:50%;background:#fff;border:1px solid var(--line)}
.teamLogoStack{display:flex;align-items:center}
.teamLogoStack img{width:28px;height:28px;object-fit:contain;border-radius:50%;background:#fff;border:1px solid var(--line);margin-left:-7px}
.teamLogoStack img:first-child{margin-left:0}

body.control-embedded .topbar{display:none}
body.control-embedded .controls{top:0}
body.control-embedded .tableWrap{max-height:calc(100vh - 118px)}
.playerName{font-weight:600;letter-spacing:-.01em}
table{font-variant-numeric:tabular-nums}

@media(max-width:760px){
  .legend{display:none}
  .controls{grid-template-columns:1fr 110px}
  .controls button{display:none}
  #search{font-size:16px}

  /* Team switcher: single-row scroll strip with bigger touch targets, plus
     prev/next stepping so an admin can move through every team without
     returning to this strip each time. */
  .tabs.orgGrid{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;row-gap:0}
  .tabs button{min-height:40px}
  .tabTeam.farm{padding:8px 10px;font-size:12px}
  .tabTeam.farm img{width:18px;height:18px}
  .tabTeam img{width:22px;height:22px}
  .teamLine{flex-wrap:wrap;gap:8px 10px}
  .teamStepBtn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 auto;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:20px;font-weight:900;color:var(--text)}
  .teamIdentity{flex:1;min-width:0}
  .teamIdentity h1{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .teamMeta{width:100%;flex-wrap:wrap;gap:6px 14px;font-size:12px}

  /* Status control + menu: larger touch targets than the desktop table cell. */
  .status{width:56px;height:42px;font-size:15px;border-radius:9px}
  .statusMenu{min-width:220px}
  .statusMenuItem{padding:12px 14px;font-size:14px}

  /* Player rows become compact cards instead of a horizontally-scrolling
     table: the full stat columns stay hidden (still available via the player
     drawer), but stars/salary and a curated G-A-Pts / W-SV%-GAA line stay
     visible -- see mobileStatLineHtml() in script.js. Visual order is set
     via the `order` property rather than reordering the DOM, so the same
     row() markup serves both desktop and mobile unchanged. */
  table{min-width:0;width:100%}
  .tableWrap{overflow-x:hidden;overflow-y:auto}
  thead{display:none}
  tbody tr.colHeadRow{display:none}
  tbody tr.section th{display:block;padding:10px 12px 4px;font-size:11px;border-bottom:0}
  tbody tr[data-id]{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 8px;padding:10px 12px;height:auto;border-bottom:1px solid #e5ebf3}
  tbody tr[data-id] td{padding:0;border:0;height:auto;white-space:normal;text-align:left;position:static}
  tbody tr[data-id] td.sticky1{order:1;align-self:center}
  tbody tr[data-id] td.playerCell{order:2;flex:1 1 150px;min-width:0}
  tbody tr[data-id] td:nth-child(5){order:3;align-self:center}
  tbody tr[data-id] td:nth-child(6){order:4;align-self:center}
  tbody tr[data-id] td.sticky2,tbody tr[data-id] td.sticky3{display:inline-flex;align-items:center;justify-content:center;order:5;flex:0 0 auto;align-self:center;background:#f4f7fb;border-radius:8px;padding:3px 8px;font-size:12px}
  tbody tr[data-id] td.sticky3{order:6}
  tbody tr[data-id] td.sticky3::before{content:"Palkka ";font-weight:700;color:var(--muted);margin-right:3px}
  tbody tr[data-id] td:nth-child(6)::before{content:"OVR ";font-size:9px;font-weight:900;color:var(--muted);display:block;text-align:center;line-height:1}
  tbody tr[data-id] td.playerCell .playerMain{min-width:0}
  tbody tr[data-id] td.playerCell .playerName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  tbody tr[data-id] td.playerCell .playerStatLine{display:flex;gap:9px;margin-top:2px;font-size:11px;color:var(--muted)}
  tbody tr[data-id] td.playerCell .playerStatLine b{color:var(--text);font-weight:900}
  tbody tr[data-id] td:nth-child(n+7){display:none}
  tbody tr.status-row.fa td,tbody tr.status-row.lop td,tbody tr.status-row.vhldraft td{background:transparent}
  tbody tr.status-row.fa{background:#fff1f1}
  tbody tr.status-row.lop{background:#f0f2f5}
  tbody tr.status-row.vhldraft{background:#fff8ea}
}