/* THL 3 · gemensam grund
   ======================
   Färger, typsnitt och komponenter för de ombyggda vyerna (riktning C,
   "Matchprogram"). Sidor som byggs om i version 3 utgår från
   templates/v3/base.html och den här filen; de gamla sidorna rörs inte.

   Allt är tokens på :root så att organisationens utseende (Inställningar
   > Utseende) kan sätta egna färger utan att röra komponenterna. */
:root{
  --org:#14213D; --acc:#E0553A; --acct:#FFFFFF; --accp:#C8452A; --accd:#FF8A6E;
  --ink:#121417; --mut:#4A515A; --rule:#D5D8DC; --soft:#F3F4F6; --ok:#1D7A4E; --warn:#9A6A00; --bad:#B03636; --info:#2A5DA8;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
/* Plats för rullningslisten även på korta sidor, så att innehållet inte
   hoppar i sidled när man byter flik mellan en kort och en lång vy. */
html{scrollbar-gutter:stable}
/* Safari stödjer inte scrollbar-gutter i äldre versioner. Med mus kopplad
   visar macOS en fast rullningslist, och då hoppade hela sidan – menyn
   också – i sidled mellan korta och långa sidor. En alltid synlig list på
   datorn håller menyn stilla. Telefoner påverkas inte. */
@media (hover:hover) and (pointer:fine){html{overflow-y:scroll}}
/* En öppen ruta (matchsammanställning m.fl.) låser sidan under den. */
html.thl-scroll-lock,html:has(body[style*="overflow: hidden"]){overflow:hidden}
body{margin:0;background:var(--soft);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45}
.num{font-variant-numeric:tabular-nums}
button,input,select{font:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}


.appbar{background:var(--ink);color:#fff;display:flex;align-items:center;gap:28px;min-height:64px;padding-inline:clamp(16px,3vw,40px);font-family:var(--display)}
.ab-brand{display:flex;align-items:baseline;gap:8px;color:#fff;text-decoration:none}
.ab-brand img{height:28px;width:auto;display:block;align-self:center}
.ab-brand small{font:600 13px/1 var(--body);opacity:.55}
.ab-nav{display:flex;gap:26px;align-items:center;flex:1 1 0;min-width:0}
.ab-nav a,.ab-group summary{display:flex;align-items:center;gap:6px;min-height:64px;color:#fff;text-decoration:none;font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.04em;border-bottom:3px solid transparent;white-space:nowrap;cursor:pointer;list-style:none}
.ab-group summary::-webkit-details-marker{display:none}
.ab-group summary svg{width:16px;height:16px}
.ab-group.on summary{border-bottom-color:var(--acc)}
.ab-group{position:relative}
.ab-drop{position:absolute;top:100%;left:-16px;z-index:30;min-width:220px;display:flex;flex-direction:column;background:var(--ink);padding:10px 16px 12px;box-shadow:0 16px 32px rgba(0,0,0,.35)}
.ab-drop span{font:600 13px var(--body);opacity:.6;padding:6px 0}
.ab-drop a{min-height:0;border:0;color:#fff;text-decoration:none;font:600 16px/1 var(--body);text-transform:none;letter-spacing:0;padding:12px 0}
.ab-drop a.cur{color:var(--accd)}
.ab-drop i{display:block;height:1px;background:rgba(255,255,255,.15);margin:4px 0}
.ab-user{display:flex;align-items:center;gap:12px}
.avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--acc);color:var(--acct);font:800 18px/1 var(--display)}
.ab-user span{font:600 15px var(--body)}
.ab-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid rgba(255,255,255,.7);background:transparent;color:#fff;font:700 17px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}

.band{background:var(--org);color:#fff}
.band-in{max-width:1440px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 32px;padding:16px clamp(16px,3vw,40px)}
.kicker{font:700 14px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--accd)}
.band h1{margin:2px 0 0;font:italic 800 44px/.95 var(--display);text-transform:uppercase}
.steps{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.steps a{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 14px 6px 8px;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.22)}
.steps .n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);font:800 15px/1 var(--display)}
.steps b{display:block;font:800 17px/1 var(--display);text-transform:uppercase;letter-spacing:.03em}
.steps small{display:block;font-size:12px;opacity:.75;margin-top:2px}
.steps .ok .n{background:var(--ok);border-color:var(--ok)}
.steps .cur a{background:#fff;color:var(--ink);border-color:#fff}
.steps .cur .n{background:var(--acc);border-color:var(--acc);color:var(--acct)}

.page{max-width:1440px;margin:0 auto;padding:20px clamp(16px,3vw,40px) 64px;display:flex;flex-direction:column;gap:18px}
.toolbar{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px;justify-content:space-between}
.tsel{display:flex;flex-direction:column;gap:4px;min-width:320px}
.tsel label{font:700 12px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.tsel select{min-height:52px;padding:0 14px;border:1.5px solid var(--ink);background:#fff;font:800 19px var(--display);text-transform:uppercase;letter-spacing:.02em;cursor:pointer}
.tabs{display:flex;gap:0;border:1.5px solid var(--ink);background:#fff;align-self:flex-end}
.tabs button{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 18px 6px 12px;border:0;border-left:1.5px solid var(--ink);background:#fff;text-align:left;cursor:pointer}
.tabs button:first-child{border-left:0}
.tabs .n{font:800 22px/1 var(--display);color:var(--acc)}
.tabs b{display:block;font:800 17px/1 var(--display);text-transform:uppercase}
.tabs small{display:block;font-size:12px;color:var(--mut)}
.tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.tabs button[aria-selected="true"] small{color:#C3C8CE}
.tabs button[aria-selected="true"] .n{color:var(--accd)}

.card{background:#fff;border:1px solid var(--rule);padding:16px;display:flex;flex-direction:column;gap:12px}
.card h3{margin:0;font:800 20px/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.muted{color:var(--mut)}
.small{font-size:13px}
.btn{min-height:42px;padding:0 14px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);font:800 16px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.btn.pri{background:var(--acc);border-color:var(--acc);color:var(--acct)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.ghost{border-color:var(--rule)}
.btn.sm{min-height:34px;padding:0 10px;font-size:14px}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.link{border:0;background:none;padding:0;color:var(--accp);font:700 14px var(--body);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.link.del{color:var(--bad)}

/* --- Paneler och sektioner --------------------------------------------- */
.panel{background:#fff;border:1px solid var(--rule)}
.panel-h{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.panel-h .sn{display:grid;place-items:center;min-width:44px;height:40px;padding:0 6px;background:var(--ink);color:#fff;font:800 18px var(--display)}
.panel-h small{display:block;font:700 12px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--accp)}
.panel-h h2{margin:0;font:800 24px/1.05 var(--display);text-transform:uppercase}
.panel-h p{margin:0 0 0 auto;font-size:13px;color:var(--mut);max-width:48ch}
.panel-b{padding:14px 16px;display:flex;flex-direction:column;gap:12px}

/* --- Flikar med nummer -------------------------------------------------- */
.ntabs{display:flex;border:1.5px solid var(--ink);background:#fff;overflow-x:auto;max-width:100%;align-self:flex-start}
.ntabs a,.ntabs button{display:flex;align-items:center;gap:8px;min-height:50px;padding:0 16px;border:0;border-left:1.5px solid var(--ink);background:#fff;cursor:pointer;white-space:nowrap;color:var(--ink);text-decoration:none}
.ntabs a:first-child,.ntabs button:first-child{border-left:0}
.ntabs span{font:800 15px var(--display);color:var(--acc)}
.ntabs strong{font:800 17px var(--display);text-transform:uppercase}
.ntabs [aria-selected="true"],.ntabs [aria-current="page"]{background:var(--ink);color:#fff}
.ntabs [aria-selected="true"] span,.ntabs [aria-current="page"] span{color:var(--accd)}

/* --- Fält ----------------------------------------------------------------- */
.fld{display:flex;flex-direction:column;gap:5px;font:700 12px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.fld select,.fld input:not([type=checkbox]):not([type=radio]){min-height:44px;padding:0 10px;border:1.5px solid var(--ink);background:#fff;font:600 15px var(--body);color:var(--ink);text-transform:none;letter-spacing:0}
.note{margin:0;padding:10px 12px;background:#E8EFFA;color:var(--info);font-size:13px}
.warnbox{margin:0;padding:10px 12px;background:#FFF4D6;color:#5B4300;font-size:14px;border-left:4px solid #C9A94A}

/* --- Tabeller ----------------------------------------------------------- */
.tw{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tbl th{font:700 12px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);text-align:right;padding:8px;border-bottom:1.5px solid var(--ink);white-space:nowrap}
.tbl th.on{color:var(--ink)}
.tbl th.l,.tbl td.l{text-align:left}
.tbl td{padding:7px 8px;border-bottom:1px solid var(--rule);text-align:right;font-size:14px;white-space:nowrap}
.tbl td.rk{color:var(--mut);font:800 14px var(--display);text-align:left;width:30px}
.tbl td.p{font:800 17px var(--display)}
.tbl td.nm{font:800 16px var(--display);text-transform:uppercase}
.tbl tr.top td{background:#FFF8F5}
.tbl td.pos{color:var(--ok)}.tbl td.neg{color:var(--bad)}

/* --- Lagloggor -------------------------------------------------------------- */
.lg{width:24px;height:24px;object-fit:contain;flex:none;vertical-align:middle}
.lg.s{width:20px;height:20px}.lg.xl{width:64px;height:64px}

/* --- Mobilmeny ------------------------------------------------------------- */
.ab-toggle{display:none;width:44px;height:44px;border:1.5px solid rgba(255,255,255,.6);background:transparent;color:#fff;cursor:pointer}
@media (max-width:900px){
  .appbar{flex-wrap:wrap;gap:12px}
  .ab-toggle{display:grid;place-items:center;margin-left:auto}
  .ab-nav{display:none;flex:1 1 100%;flex-direction:column;align-items:stretch;gap:0}
  .appbar.open .ab-nav{display:flex}
  .ab-nav a,.ab-group summary{min-height:48px}
  .ab-drop{position:static;box-shadow:none;padding-left:0}
  .ab-user .uname{display:none}
  .band h1{font-size:34px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}