:root {
  --navy:#343851; --navy-dark:#282a40;
  --crimson:#920330; --crimson-hover:#7a0228;
  --teal:#1fa5a3; --teal-dark:#178886; --teal-50:#e4f4f3; --teal-line:#bfe6e4;
  --sida:#f8f9fa; --ram:#e5e6e9; --dov:#5f6167; --text:#2b2c30;
  --hover:#f3f4f6; --varning:#b8860b; --varning-50:#fdf6e3; --danger:#A32D2D;
  /* Rytm: allt bygger på fyra pixlar. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --r-s:6px; --r-m:10px; --r-l:14px;
  --skugga-l:0 1px 2px rgba(40,42,64,.04);
}
* { box-sizing:border-box; }
body { margin:0; background:var(--sida); color:var(--text);
       font:15px/1.5 "Manrope",-apple-system,"Helvetica Neue",Arial,sans-serif; }
h1,h2,h3 { font-family:"Oswald",-apple-system,"Helvetica Neue",Arial,sans-serif;
           font-weight:600; letter-spacing:.01em; }

.topbar { background:var(--navy); color:#fff; padding:var(--s4) var(--s5);
          display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap;
          border-bottom:3px solid var(--crimson); }
.topbar h1 { margin:0; font-size:21px; color:#fff; letter-spacing:.02em; }
.topbar .under { font-size:13px; color:#a9adc0; }

main { max-width:1120px; margin:0 auto; padding:var(--s5) var(--s5) 96px; }
h2 { font-size:16px; margin:var(--s6) 0 var(--s3); padding-bottom:6px;
     border-bottom:2px solid var(--navy); letter-spacing:.02em; }
h2 .antal { font-family:"Manrope",sans-serif; font-weight:400; font-size:13px;
            color:var(--dov); margin-left:8px; }
.dov { color:var(--dov); font-size:13px; }

.panel { background:#fff; border:1px solid var(--ram); border-radius:var(--r-m);
         padding:var(--s4) var(--s5); box-shadow:var(--skugga-l); }
.falt { display:flex; gap:var(--s4); flex-wrap:wrap; align-items:flex-end; }
label { display:block; font-size:11px; font-weight:700; color:#8b8e99;
        text-transform:uppercase; letter-spacing:.08em; margin-bottom:5px; }
input, select { font:inherit; padding:8px 11px; border:1px solid var(--ram);
                border-radius:var(--r-s); background:#fff; color:var(--text); }
input:focus, select:focus { outline:2px solid var(--teal-line); border-color:var(--teal); }
input[type=number] { width:110px; }

button { font:inherit; font-weight:600; font-size:14px; cursor:pointer;
         border-radius:999px; padding:9px 20px; border:1px solid #ccd1de;
         background:#f1f3f8; color:var(--navy);
         transition:background .14s, border-color .14s, color .14s; }
button:hover:not(:disabled) { background:var(--navy); border-color:var(--navy);
                              color:#fff; }
button:disabled { opacity:.5; cursor:default; }
button.stark { background:var(--crimson); border-color:var(--crimson); color:#fff; }
button.stark:hover:not(:disabled) { background:var(--crimson-hover); border-color:var(--crimson-hover); }
button.mjuk { background:var(--navy); border-color:var(--navy); color:#fff; }
button.mjuk:hover:not(:disabled) { background:var(--navy-dark); border-color:var(--navy-dark); }
button.liten { font-size:13px; padding:6px 14px; white-space:nowrap; }

/* Tävlingsradens åtgärder som EN sammanhållen grupp, inte tre lösa piller. */
.radtopp { display:flex; align-items:flex-start; justify-content:space-between;
           gap:var(--s4); }
.radnamn { display:flex; align-items:flex-start; gap:var(--s1); }
.radnamn .pil { margin-top:3px; }
.knappgrupp { flex:none; display:inline-flex; border-radius:var(--r-s);
              overflow:hidden; box-shadow:var(--skugga-l); }
.knappgrupp button { font:inherit; font-size:12px; font-weight:600;
                     white-space:nowrap; cursor:pointer; border:none;
                     border-right:1px solid rgba(255,255,255,.18);
                     border-radius:0; color:#fff; padding:7px 13px;
                     transition:background .14s; }
.knappgrupp button:last-child { border-right:none; }
/* Täckande färg, en ton per åtgärd — öppna, hämta, stänga av. */
.knappgrupp button:nth-child(1) { background:var(--navy); }
.knappgrupp button:nth-child(1):hover { background:var(--navy-dark); }
.knappgrupp button:nth-child(2) { background:#4a5070; }
.knappgrupp button:nth-child(2):hover { background:#3c4160; }
.knappgrupp button:nth-child(3) { background:#767a8c; }
.knappgrupp button:nth-child(3):hover { background:#63677a; }
.knappgrupp button.pa { background:var(--varning); }
.knappgrupp button.pa:hover { background:#a3760a; }
.knappgrupp i { font-style:normal; opacity:.6; font-size:11px; margin-left:3px; }
.knappgrupp button:hover i { opacity:.9; }

#rader tr.tavlingsrad { cursor:pointer; }
#rader tr.tavlingsrad .pil { pointer-events:none; }
.avdrad button.liten, .grupphuvud button.liten { font-size:12px; padding:4px 12px; }

.status { margin:16px 0; display:none; }
.status.syns { display:block; }
.stapel { height:6px; background:var(--ram); border-radius:999px; overflow:hidden; }
.stapel i { display:block; height:100%; width:0; background:var(--navy);
            transition:width .25s; }
.statustext { font-size:13px; color:var(--dov); margin-top:6px; }

table { width:100%; border-collapse:separate; border-spacing:0; background:#fff;
        border:1px solid var(--ram); border-radius:var(--r-m); overflow:hidden;
        box-shadow:var(--skugga-l); }
th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
     color:#c9cbd8; background:var(--navy); padding:10px 14px; font-weight:700;
     position:sticky; top:0; z-index:5; }
td { padding:11px 14px; border-top:1px solid var(--ram); vertical-align:top; }
td.tal, th.tal { text-align:right; font-variant-numeric:tabular-nums; }
#rader tr:not(.detalj):not(.summa):hover > td { background:#fbfbfc; }
#rader tr.tavlingsrad .namn { font-size:15px; }
tr.summa td { background:#eceef3; font-weight:700; font-size:15px;
              border-top:2px solid var(--navy); padding-top:14px;
              padding-bottom:14px; }

/* Varje tävling börjar med en tydlig linje — annars flyter en utfälld
   klasslista rakt in i nästa tävlings rad. */
#rader tr.tavlingsrad > td { border-top:2px solid var(--navy); padding-top:14px;
                             padding-bottom:14px; }
#rader tr.tavlingsrad:first-child > td { border-top:none; }

.tavling { font-size:12px; color:var(--dov); }
.noll { color:var(--danger); font-weight:700; }

.anm { display:block; font-size:12.5px; color:#7a6520; margin-top:3px;
       padding-left:14px; position:relative; }
.anm::before { content:"!"; position:absolute; left:0; font-weight:700;
               color:var(--varning); }
.kort { background:#fff; border:1px solid var(--ram); border-left:3px solid var(--navy);
        border-radius:6px; padding:12px 14px; margin:8px 0; }
.kort.gul { border-left-color:var(--varning); background:var(--varning-50); }
.kort .namn { font-weight:600; }
.kort .rad { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:9px; }
.tomt { color:var(--dov); font-size:14px; padding:10px 0; }

details { margin-top:14px; }
summary { display:inline-block; list-style:none; cursor:pointer;
          font-size:13px; font-weight:600; color:var(--dov);
          background:#fff; border:1px solid var(--ram);
          border-radius:999px; padding:7px 16px; }
summary::-webkit-details-marker { display:none; }
summary:hover { background:var(--hover); border-color:#bbb; color:var(--text); }
details[open] summary { margin-bottom:10px; }
.fel { background:#fdecec; border:1px solid #f3c2c2; color:var(--danger);
       border-radius:6px; padding:10px 14px; margin:14px 0; }

/* --------------------------------------------- klasser och starter i tabellen */
tr.detalj > td { background:var(--sida); padding:14px 12px 22px; }
.klasser > p { margin:0 0 10px; }

/* ------------------------------------------ klasslistan, i Equipes anda:
   en rad per klass, avdelningarna som chips till höger med antal i badge. */
.klass { border-bottom:1px solid var(--ram); background:#fff; }
.klass:first-of-type { border-top:1px solid var(--ram); border-radius:6px 6px 0 0; }
.klass:last-of-type { border-radius:0 0 6px 6px; }
.klass.av { background:#fbfbfc; }

.klassrad { display:flex; align-items:center; gap:12px; padding:9px 12px; }
.klassrad:hover { background:var(--hover); }
.klassrad.skal { background:var(--varning-50); }

.klassnr { flex:none; min-width:30px; text-align:center; font-weight:700;
           font-size:13px; color:#fff; background:var(--navy);
           border-radius:5px; padding:3px 6px; font-variant-numeric:tabular-nums; }
.klass.av .klassnr { background:#a7a9b2; }

.klassinfo { flex:1 1 300px; min-width:0; display:flex; flex-direction:column; }
/* Klassnamnen är långa av sponsortillägg — låt dem radbrytas i stället för
   att kapas, som hos Equipe. */
.klassnamn { font-weight:600; font-size:14px; }
.klass.av .klassnamn { text-decoration:line-through; color:var(--dov); }
.klassmeta { font-size:12px; color:var(--dov); white-space:nowrap;
             overflow:hidden; text-overflow:ellipsis; }
.skaltext { color:var(--varning); }
.klassantal { flex:none; font-size:13px; color:var(--dov); white-space:nowrap;
              font-variant-numeric:tabular-nums; }

/* Chipsen får inte tränga undan klassnamnet — de wrappar hellre. */
/* Avdelningarna fälls ut under klassraden och ser ut som klassraderna, bara
   indragna och lite mindre. Hela raden är klickbar. */
.avdantal { flex:none; font-size:12px; font-weight:600; color:var(--dov);
            white-space:nowrap; }
.avdlista { border-top:1px solid var(--ram); background:var(--sida);
            padding:4px 0 6px; }

.klassrad { cursor:pointer; }
.klassrad .liten { cursor:pointer; }

.avdrad { padding-left:44px; }
.avdrad:hover { background:#fff; }
.avdrad .klassnamn { font-size:13px; font-weight:600; }
.avdrad .klassmeta { font-size:12px; }
.avdnr { min-width:24px; font-size:12px; background:#8d90a1; }
.avdrad.av .avdnr { background:#c2c4c9; }
.avdrad.av .klassnamn { color:var(--dov); text-decoration:line-through; }
.avdrad.av .klassantal { color:#a7a9b2; }

.delvis { color:var(--varning); }

.starthuvud { display:flex; align-items:center; justify-content:space-between;
              gap:12px; padding:2px 0 8px; }

.starter { border-top:1px solid var(--ram); border-bottom:1px solid var(--ram);
           padding:8px 14px 12px 70px; background:#fff; }
.start { display:flex; align-items:center; gap:10px; padding:5px 0;
         border-bottom:1px solid #f1f2f4; font-size:14px; }
.start:last-child { border-bottom:none; }
.start.av .ryttare, .start.av .hast { text-decoration:line-through; color:var(--dov); }
.start .nr { width:34px; text-align:right; color:var(--dov); font-size:13px;
             font-variant-numeric:tabular-nums; }
.start .ryttare { min-width:150px; font-weight:600; }
.start .hast { min-width:150px; }
.start .res { margin-left:auto; font-variant-numeric:tabular-nums; color:var(--dov);
              font-size:13px; }

.bock { width:24px; height:24px; padding:0; border-radius:6px; font-size:14px;
        line-height:1; color:#fff; background:#fff; border:1px solid #c9cbd0; }
.bock.pa { background:var(--teal-dark); border-color:var(--teal-dark); }
.bock:hover { background:#fff; color:#fff; border-color:var(--navy); }
.bock.pa:hover { background:var(--teal-dark); }

.lapp { font-size:11px; font-weight:600; text-transform:uppercase;
        letter-spacing:.05em; color:var(--dov); background:var(--hover);
        border-radius:999px; padding:2px 9px; }
.lapp.andrad { color:#fff; background:var(--varning); }

.dag { margin-bottom:14px; }
.daghuvud { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
            padding:8px 12px; background:var(--navy); color:#fff;
            border-radius:6px 6px 0 0; margin-bottom:0; }
.daghuvud .dov, .daghuvud .siffror { color:#c9cbd8; }
.daghuvud .pil { color:#c9cbd8; }
.daghuvud .pil:hover { background:rgba(255,255,255,.15); color:#fff; }
.daghuvud button.liten { background:rgba(255,255,255,.1); color:#fff;
                         border-color:rgba(255,255,255,.25); }
.daghuvud button.liten:hover { background:rgba(255,255,255,.2); }
.dagnamn { font-family:"Oswald",-apple-system,Arial,sans-serif; font-weight:600;
           font-size:15px; color:#fff; }
.daghuvud .siffror { margin-left:auto; }
.klassnr { text-align:center; min-width:30px; flex:none; font-weight:700; font-size:13px; color:#fff;
           background:var(--navy); border-radius:5px; padding:2px 0;
           font-variant-numeric:tabular-nums; }
.grupp.av .klassnr { background:#a7a9b2; }
/* Grenarna är konturbrickor och nivåerna fyllda — då går de att skilja åt
   även när färgtonerna ligger nära varandra i intilliggande kolumner. */
.gren { display:inline-block; font-size:12px; font-weight:600;
        color:var(--dov); background:#fff; border:1px solid currentColor;
        border-radius:999px; padding:1px 9px; white-space:nowrap; }
.gren[data-gren="show_jumping"]        { color:#264f79; }
.gren[data-gren="dressage"]            { color:#8b3a86; }
.gren[data-gren="eventing"]            { color:#7a5230; }
.gren[data-gren="driving"]             { color:#41677a; }
.gren[data-gren="endurance"]           { color:#a85a1a; }
.gren[data-gren="working_equitation"]  { color:#636b22; }
.gren[data-gren="vaulting"]            { color:#5b53a6; }
.gren[data-gren="para_dressage"]       { color:#a8496e; }
.gren[data-gren="breed_eval"]          { color:#6b6f7d; }

.grentext { font-weight:700; color:var(--dov); }
.grentext[data-gren="show_jumping"]       { color:#264f79; }
.grentext[data-gren="dressage"]           { color:#8b3a86; }
.grentext[data-gren="eventing"]           { color:#7a5230; }
.grentext[data-gren="driving"]            { color:#41677a; }
.grentext[data-gren="endurance"]          { color:#a85a1a; }
.grentext[data-gren="working_equitation"] { color:#636b22; }
.grentext[data-gren="vaulting"]           { color:#5b53a6; }
.grentext[data-gren="para_dressage"]      { color:#a8496e; }

.anm.rod { color:var(--danger); font-weight:600; }

.klasstopp { display:flex; align-items:baseline; gap:12px; justify-content:space-between; }
.klasstopp p { margin:0 0 10px; }
.pil { width:22px; height:22px; padding:0; border:none; background:none;
       color:var(--dov); font-size:12px; line-height:1; border-radius:4px;
       flex:none; pointer-events:none; }
.daghuvud .pil { pointer-events:auto; }
.pil.hamtar { opacity:.4; }

/* Smala fönster: tabellen får rulla i sidled i stället för att kapas. */
.tabellsvep { overflow-x:auto; }
.tabellsvep table { min-width:640px; }
.nobreak { white-space:nowrap; }

/* ------------------------------------------------------------ inställningar */
.topbar-hoger { margin-left:auto; display:flex; align-items:center;
                gap:var(--s2); }
.topbar-hoger .dov { color:#a9adc0; font-size:13px; }
.topbar-knapp { font-size:13px; font-weight:600; color:#fff;
                background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
                border-radius:999px; padding:7px 16px; cursor:pointer; }
.topbar-knapp:hover { background:rgba(255,255,255,.2); }
.prislista { display:flex; flex-direction:column; gap:8px; }
.prisrad { display:grid; grid-template-columns:120px 100px 110px auto;
           align-items:center; gap:var(--s3); }
.prisrad .niva { justify-self:start; font-size:14px; padding-left:10px;
                 border-left-width:4px; }
.prisrad .niva b { font-size:14px; min-width:0; }
.prisrad .nyckelord { font-size:12px; font-family:ui-monospace,SFMono-Regular,
                      Menlo,monospace; }
.prisrad input { width:100%; }
/* Nivåerna: färgen bärs av en tunn linje och stjärnan, siffran står i vanlig
   text. Fyllda pastellpiller blev bara suddiga fläckar. */
.niva { display:flex; align-items:baseline; gap:var(--s2);
        border-left:3px solid currentColor; padding:1px 0 1px 8px;
        color:#8b8e99; margin:1px 0; white-space:nowrap; }
.niva + .niva { margin-top:3px; }
.niva b { font-weight:700; font-size:12px; min-width:22px; }
.niva .antal { color:var(--text); font-weight:600; font-size:13px;
               font-variant-numeric:tabular-nums; }
.niva[data-niva="club"]          { color:#8b8e99; }
.niva[data-niva="local"]         { color:#2f6fb0; }
.niva[data-niva="regional"]      { color:#5b53a6; }
.niva[data-niva="national"]      { color:#8c6210; }
.niva[data-niva="elite"]         { color:var(--crimson); }
.niva[data-niva="international"] { color:var(--navy); }
.niva.tom { border-left-style:dotted; }
.niva.tom b { font-weight:600; }

.nivatext { font-weight:700; color:#5f6167; }
.nivatext[data-niva="club"]          { color:#5c6070; }
.nivatext[data-niva="local"]         { color:#2f6fb0; }
.nivatext[data-niva="regional"]      { color:#5b53a6; }
.nivatext[data-niva="national"]      { color:#8c6210; }
.nivatext[data-niva="elite"]         { color:var(--crimson); }
.nivatext[data-niva="international"] { color:var(--navy); }
tr.handraknad td { background:#fdfbf4; }
tr.utanfor td { background:#fefcf6; }
tr.utanfor .namn { color:var(--dov); }

/* Flaggan ska synas utan att bli en gul kloss — ett litet märke och skälen
   som tunna rader bredvid. */
.flagga { display:flex; align-items:flex-start; gap:10px; margin:7px 0 3px; }
.flaggmarke { flex:none; font-size:11px; font-weight:700; letter-spacing:.05em;
              text-transform:uppercase; color:#fff; background:var(--varning);
              border-radius:999px; padding:3px 10px; margin-top:1px; }
.flaggskal { font-size:13px; color:#7a6520; line-height:1.5; }

.niva { display:inline-block; font-size:12px; font-weight:600; padding:1px 8px;
        border-radius:4px; white-space:nowrap;
        color:#5f6167; background:var(--hover); }
.niva b { font-variant-numeric:tabular-nums; }
.niva[data-niva="club"]          { color:#5c6070; background:#eef0f3; }
.niva[data-niva="local"]         { color:#2f6fb0; background:#e9f1fa; }
.niva[data-niva="regional"]      { color:#5b53a6; background:#eeecf9; }
.niva[data-niva="national"]      { color:#8c6210; background:#fbf3e0; }
.niva[data-niva="elite"]         { color:var(--crimson); background:#fbe9ee; }
.niva[data-niva="international"] { color:#fff; background:var(--navy); }
.niva.tom { background:transparent; border:1px dashed currentColor; opacity:.75; }

.nivatext { font-weight:700; color:#5f6167; }
.nivatext[data-niva="club"]          { color:#5c6070; }
.nivatext[data-niva="local"]         { color:#2f6fb0; }
.nivatext[data-niva="regional"]      { color:#5b53a6; }
.nivatext[data-niva="national"]      { color:#8c6210; }
.nivatext[data-niva="elite"]         { color:var(--crimson); }
.nivatext[data-niva="international"] { color:var(--navy); }
tr.handraknad td { background:#fdfbf4; }
tr.utanfor td { background:#fefcf6; }
tr.utanfor .namn { color:var(--dov); }

.lapp.hand { color:#fff; background:var(--varning); margin-left:8px; }

/* ------------------------------------------------------------ veckoväljare */
.veckovaljare { display:flex; align-items:stretch; border:1px solid var(--ram);
                border-radius:999px; background:#fff; overflow:hidden; }
.veckovaljare select { border:none; border-radius:0; padding:8px 6px 8px 12px;
                       font-weight:600; min-width:170px; background:#fff; }
.veckovaljare select:focus { outline:none; }
.stegknapp { border:none; border-radius:0; background:#fff; color:var(--dov);
             font-size:17px; line-height:1; padding:0 12px; cursor:pointer; }
.stegknapp:hover:not(:disabled) { background:var(--hover); color:var(--navy);
                                  border-color:transparent; }
.stegknapp:disabled { opacity:.3; cursor:default; }
.egenperiod { display:flex; gap:14px; }
.egenperiod[hidden] { display:none; }   /* display:flex slår annars ut hidden */

/* ------------------------------------------------------------- nyckeltalen */
.nyckeltal { display:flex; gap:var(--s3); flex-wrap:wrap; margin:var(--s3) 0 var(--s4); }
.nyckel { flex:1 1 150px; background:#fff; border:1px solid var(--ram);
          border-radius:var(--r-m); padding:var(--s3) var(--s4);
          box-shadow:var(--skugga-l); }
.nyckel .etikett { font-size:11px; font-weight:700; letter-spacing:.08em;
                   text-transform:uppercase; color:#8b8e99; }
.nyckel .varde { font-family:"Oswald",-apple-system,Arial,sans-serif;
                 font-size:26px; font-weight:600; line-height:1.15;
                 font-variant-numeric:tabular-nums; margin-top:2px; }
.nyckel.stark { background:var(--navy); border-color:var(--navy); }
.nyckel.stark .etikett { color:#a9adc0; }
.nyckel.stark .varde { color:#fff; }
.nyckel .bi { font-size:12px; color:var(--dov); margin-top:3px; }
.nyckel.stark .bi { color:#a9adc0; }

/* --------------------------------------------------------------- inloggning */
body.loggasida { display:flex; align-items:center; justify-content:center;
                 min-height:100vh; padding:var(--s5);
                 background:linear-gradient(160deg,#3b3f5c,#282a40); }
.loggaruta { width:100%; max-width:360px; background:#fff;
             border-radius:var(--r-l); padding:var(--s5);
             box-shadow:0 18px 50px rgba(20,21,32,.35); }
.loggaruta h1 { font-size:24px; margin:0; }
.loggaruta p { margin:6px 0 var(--s5); font-size:13px; }
.loggaruta label { margin-top:var(--s4); }
.loggaruta input { width:100%; padding:10px 12px; font-size:15px; }
.loggaruta button { width:100%; margin-top:var(--s5); padding:11px; }
.loggaruta .fel { margin:0 0 var(--s2); }

/* ------------------------------------------------------------ låst period */
.lasbanner { display:flex; align-items:flex-start; gap:var(--s3);
             background:#eef0f6; border:1px solid #ccd1de;
             border-left:4px solid var(--navy); border-radius:var(--r-s);
             padding:var(--s3) var(--s4); margin:var(--s3) 0;
             font-size:13px; color:#3d4260; }
.lasbanner.varning { background:var(--varning-50); border-color:#e6d3a3;
                     border-left-color:var(--varning); color:#7a6520; }
.lasbanner div { flex:1; }
.lasmarke { flex:none; font-size:11px; font-weight:700; letter-spacing:.05em;
            text-transform:uppercase; color:#fff; background:var(--navy);
            border-radius:999px; padding:3px 11px; }
.lasbanner.varning .lasmarke { background:var(--varning); }
.lasbanner button { flex:none; }

select[multiple] { padding:4px 6px; min-width:190px; font-size:13px; }
select[multiple] option { padding:2px 4px; }