﻿[hidden]{display:none!important}
:root{--black:#040608;--blue:#2678e9;--paper:#f5f7f9;--text:#101820;--muted:#687482;--line:#e2e7ec;--green:#18a64a;--orange:#e98a00;--shadow:0 8px 24px rgba(15,23,42,.08)}
*{box-sizing:border-box}html{background:var(--paper)}body{margin:0;background:var(--paper);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{cursor:pointer}.shell{width:min(1410px,calc(100% - 48px));margin-inline:auto}
.topbar{height:72px;background:var(--black);display:flex;align-items:center}.topbar__inner{height:100%;display:flex;align-items:center}.brand{display:flex;align-items:center;height:54px}.brand img{height:49px;width:auto;display:block;object-fit:contain;object-position:left center}
.hero{position:relative;height:158px;display:flex;align-items:center;background:#0a1119 url("hero.webp") center/cover no-repeat;overflow:hidden}.hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.06),rgba(0,0,0,.02),rgba(0,0,0,.08))}.hero__content{position:relative;z-index:1;display:flex;justify-content:center}
.searchbox{width:min(760px,78vw);height:58px;margin:0;background:rgba(255,255,255,.98);border-radius:17px;display:flex;align-items:center;gap:14px;padding:0 18px;box-shadow:0 12px 34px rgba(0,0,0,.26)}.searchbox__icon{width:21px;height:21px;border:2px solid #111c28;border-radius:50%;position:relative;flex:none}.searchbox__icon:after{content:"";position:absolute;right:-7px;bottom:-4px;width:9px;height:2px;background:#111c28;transform:rotate(45deg);border-radius:2px}.searchbox input{width:100%;border:0;outline:0;background:transparent;font-size:18px;color:#111820}.searchbox input::placeholder{color:#697480}.searchbox__clear{display:none;border:0;background:transparent;color:#73808c;font-size:28px;line-height:1;padding:0}.searchbox.has-value .searchbox__clear{display:block}
.datebar{background:linear-gradient(#0d151e,#070c12);color:#fff;border-top:1px solid rgba(255,255,255,.06)}.datebar__inner{height:92px;display:flex;align-items:center;gap:12px}.datebar__arrow{flex:0 0 48px;height:48px;border-radius:50%;border:1px solid #44505c;background:transparent;color:#fff;font-size:35px;line-height:1}.datebar__arrow:hover{background:rgba(255,255,255,.06)}.datebar__days{flex:1;height:100%;display:grid;grid-template-columns:repeat(7,1fr);min-width:0}.day{border:0;border-left:1px solid #3d4853;background:transparent;color:#fff;padding:12px 5px 9px;text-align:center;min-width:0}.day:last-child{border-right:1px solid #3d4853}.day__dow{display:block;font-size:15px;font-weight:650;text-transform:uppercase}.day__num{display:block;margin-top:7px;font-size:20px;font-weight:800;white-space:nowrap}.day.is-today .day__dow{font-size:0}.day.is-today .day__dow:after{content:"IDAG";font-size:15px}.day.is-selected{margin:8px;border:0!important;border-radius:12px;background:linear-gradient(#3187f2,#1767d1);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.main{padding:28px 0 44px;min-height:500px}.sectionhead{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px}.sectionhead h1{margin:0;font-size:28px;line-height:1.15;font-weight:800;letter-spacing:-.02em}.sectionhead h1:before{content:"";display:inline-block;width:26px;height:20px;margin-right:12px;vertical-align:-2px;border:3px solid var(--blue);border-radius:4px;box-shadow:0 -6px 0 -4px var(--blue)}.sectionhead__date{margin:6px 0 0 42px;color:var(--muted);font-size:14px;text-transform:capitalize}.sortbox{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #e5e9ee;border-radius:28px;padding:10px 14px;box-shadow:0 3px 14px rgba(0,0,0,.04);font-size:14px}.sortbox select{border:0;outline:0;background:transparent;color:#111820;font-weight:750}
.loading,.message{margin:0 0 16px;padding:14px 17px;border-radius:10px;background:#fff;border:1px solid var(--line);color:#5d6875}.loading{display:flex;align-items:center;gap:10px}.spinner{width:18px;height:18px;border:2px solid #c8d2dc;border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.league-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.league-card{background:#fff;border:1px solid #e0e5ea;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}.league-card__head{min-height:64px;padding:12px 18px;display:flex;align-items:center;gap:13px;border-bottom:1px solid var(--line)}.league-card__badge{width:42px;height:42px;object-fit:contain;display:block;flex:none}.league-card__badgefallback{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#eef3f8;color:#29445f;font-size:11px;font-weight:900;flex:none}.league-card__title{font-size:19px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit;text-decoration:none}.league-card__title:hover{text-decoration:underline}.match--link{color:inherit;text-decoration:none}.match--link:hover{background:#f8fafc}
.match{display:grid;grid-template-columns:92px 1fr auto;gap:10px;min-height:76px;padding:12px 18px;border-bottom:1px solid var(--line)}.match:last-child{border-bottom:0}.match__when{padding-top:3px;font-size:14px;color:#4d5966;font-weight:650}.match__when.live,.match__when.scheduled-live{font-weight:800}.match__when.live{color:var(--green)}.match__when.scheduled-live{color:#b26a00}.match__when.live:before,.match__when.scheduled-live:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px}.match__when.live:before{background:var(--green)}.match__when.scheduled-live:before{background:var(--orange)}.match__subwhen{display:block;margin-top:4px;color:#7b8690;font-size:11px;font-weight:600}.match__teams{min-width:0}.team{display:flex;align-items:center;gap:9px;min-height:26px;font-weight:650}.team-badge{width:22px;height:22px;object-fit:contain;flex:none}.team__fallback{width:22px;height:22px;border-radius:50%;background:#eef2f6;display:grid;place-items:center;font-size:8px;font-weight:900;flex:none;color:#586879}.team__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.match__score{display:grid;align-content:center;gap:8px;text-align:right;min-width:24px;font-weight:850}.event__title{font-weight:750;line-height:1.35}.event__meta{font-size:13px;color:#6d7782;margin-top:4px}.no-results{grid-column:1/-1;background:#fff;border:1px dashed #ccd5de;border-radius:12px;padding:54px 20px;text-align:center;color:#687581}
.footer{background:#fff;border-top:1px solid #dfe5ea}.footer__inner{min-height:86px;display:flex;align-items:center;justify-content:center;text-align:center;color:#697580;font-size:13px}.footer p{margin:0}.footer a{color:#286ecf;text-decoration:none;font-weight:700}.footer a:hover{text-decoration:underline}
@media(max-width:1000px){.league-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.datebar__days{grid-template-columns:repeat(5,1fr)}.day:nth-child(n+6){display:none}}
@media(max-width:680px){.shell{width:min(100% - 24px,1410px)}.topbar{height:60px}.brand img{height:40px}.hero{height:116px}.searchbox{width:94vw;height:50px;border-radius:14px}.searchbox input{font-size:16px}.datebar__inner{height:80px;gap:5px}.datebar__arrow{flex-basis:38px;height:38px;font-size:29px}.datebar__days{grid-template-columns:repeat(3,1fr)}.day:nth-child(n+4){display:none}.day.is-selected{margin:7px 4px}.day__num{font-size:17px}.sectionhead{align-items:flex-start;flex-direction:column}.sectionhead h1{font-size:23px}.sectionhead__date{margin-left:39px}.sortbox{align-self:flex-end}.league-grid{grid-template-columns:1fr}.match{grid-template-columns:78px 1fr auto;padding-inline:14px}.league-card__head{padding-inline:14px}}


/* Finjustering 2026-08-10 */
.league-grid{
  align-items:start;
}

.league-card{
  align-self:start;
}

.league-card__head{
  min-height:58px;
  padding:10px 16px;
}

.league-card__badge{
  width:36px;
  height:36px;
}

.league-card__badgefallback{
  width:36px;
  height:36px;
}

.league-card__title{
  font-size:18px;
}

.match{
  min-height:68px;
  padding:10px 16px;
  grid-template-columns:82px 1fr auto;
}

.sectionhead{
  margin-bottom:14px;
}

.sectionhead h1{
  font-size:26px;
}

.main{
  padding-top:24px;
}

@media(max-width:680px){
  .match{
    grid-template-columns:72px 1fr auto;
    padding:10px 12px;
  }
}

/* SEO-sidor: liga, lag och match */
.seo-main{padding-top:24px}.breadcrumbs{display:flex;align-items:center;gap:9px;margin-bottom:16px;color:var(--muted);font-size:13px}.breadcrumbs a{color:#286ecf;text-decoration:none;font-weight:750}.seo-page{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}.seo-page__head{display:flex;align-items:center;gap:16px;padding:24px;border-bottom:1px solid var(--line)}.seo-page__head h1{margin:2px 0 0;font-size:30px;line-height:1.15}.seo-page__type{color:var(--blue);font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:.06em}.seo-page__badge{width:68px;height:68px;object-fit:contain;flex:none}.seo-intro{margin:0;padding:20px 24px;color:#566371;line-height:1.6}.seo-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}.seo-columns>section{min-width:0;padding:22px 24px}.seo-columns>section+section{border-left:1px solid var(--line)}.seo-columns h2{margin:0 0 14px;font-size:20px}.seo-event{display:flex;flex-direction:column;gap:3px;padding:11px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}.seo-event:last-child{border-bottom:0}.seo-event:hover strong{text-decoration:underline}.seo-event span{color:var(--muted);font-size:12px}.seo-event strong{font-size:15px}.seo-empty{color:var(--muted)}.seo-match-detail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line)}.seo-match-detail>div{display:flex;flex-direction:column;gap:5px;padding:20px 24px;background:#fff}.seo-match-detail strong{font-size:12px;color:var(--muted);text-transform:uppercase}.seo-related{display:flex;flex-wrap:wrap;gap:10px;padding:20px 24px;border-top:1px solid var(--line)}.seo-related a{padding:9px 13px;border-radius:999px;background:#edf4fd;color:#1767d1;text-decoration:none;font-size:13px;font-weight:750}
@media(max-width:680px){.seo-page__head{padding:18px}.seo-page__head h1{font-size:24px}.seo-page__badge{width:54px;height:54px}.seo-columns{grid-template-columns:1fr}.seo-columns>section{padding:18px}.seo-columns>section+section{border-left:0;border-top:1px solid var(--line)}.seo-match-detail{grid-template-columns:repeat(2,minmax(0,1fr))}.seo-match-detail>div{padding:16px}.seo-intro,.seo-related{padding:18px}}


/* Söklista och förenklad innehållstopp */
.searchwrap{
  position:relative;
  width:min(760px,78vw);
}
.searchwrap .searchbox{width:100%}

.searchresults{
  position:absolute;
  top:66px;
  left:0;
  right:0;
  z-index:50;
  background:#fff;
  border:1px solid #dfe5eb;
  border-radius:14px;
  box-shadow:0 18px 45px rgba(0,0,0,.22);
  overflow:hidden;
  max-height:420px;
  overflow-y:auto;
}
.searchresult{
  width:100%;
  border:0;
  border-bottom:1px solid #edf0f3;
  background:#fff;
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  text-align:left;
  color:#101820;
}
.searchresult:last-child{border-bottom:0}
.searchresult:hover,.searchresult:focus{background:#f4f7fb;outline:0}
.searchresult__badge{
  width:38px;height:38px;flex:none;border-radius:50%;
  display:grid;place-items:center;background:#eef3f8;
  color:#536273;font-size:10px;font-weight:900;overflow:hidden;
}
.searchresult__badge img{width:32px;height:32px;object-fit:contain}
.searchresult__text{display:flex;flex-direction:column;min-width:0}
.searchresult__text strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.searchresult__text small{font-size:12px;color:#76818c;margin-top:2px}
.searchresults__empty{padding:16px;color:#6b7680;text-align:center}

.toolbar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-height:42px;
  margin:0 0 14px;
}
.selected-date{display:none}

.match__date{
  display:block;
  margin-top:3px;
  font-size:10px;
  color:#89939d;
  font-weight:600;
}

@media(max-width:680px){
  .searchwrap{width:94vw}
  .searchresults{top:58px}
}


/* Kompakt datumrad – samma visuella höjd som toppraden */
.datebar{
  min-height:64px;
  height:64px;
}

.datebar__arrow{
  width:72px;
  height:64px;
}

.datebar__days{
  height:64px;
}

.day{
  min-height:64px;
  height:64px;
  padding:5px 8px;
  border-radius:0;
}

.day.is-selected{
  margin:5px 6px;
  height:54px;
  min-height:54px;
  border-radius:10px;
}

.day__dow{
  font-size:12px;
  line-height:1.05;
  margin-bottom:3px;
}

.day__num{
  font-size:17px;
  line-height:1.05;
}

.datebar__arrow .arrow{
  width:38px;
  height:38px;
}

.main{
  padding-top:18px;
}

@media(max-width:680px){
  .datebar,
  .datebar__days,
  .datebar__arrow{
    height:58px;
    min-height:58px;
  }

  .day{
    height:58px;
    min-height:58px;
    padding:4px 3px;
  }

  .day.is-selected{
    height:50px;
    min-height:50px;
    margin:4px 3px;
  }

  .day__dow{font-size:10px}
  .day__num{font-size:14px}
}


/* Fix: kompakt kalender utan overflow */
.datebar{
  height:64px;
  min-height:64px;
  overflow:hidden;
}

.datebar__inner{
  height:64px;
  min-height:64px;
  align-items:stretch;
}

.datebar__days{
  height:64px;
  min-height:64px;
}

.datebar__arrow{
  width:64px;
  height:64px;
  min-height:64px;
  flex:0 0 64px;
  border-radius:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.datebar__arrow::before{
  margin:0;
}

.day{
  height:64px;
  min-height:64px;
  padding:7px 6px 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.day.is-selected{
  height:54px;
  min-height:54px;
  margin:5px 6px;
  padding:4px 6px;
}

.day__dow{
  margin:0 0 4px;
  line-height:1;
}

.day__num{
  margin:0;
  line-height:1;
}

@media(max-width:680px){
  .datebar,
  .datebar__inner,
  .datebar__days,
  .datebar__arrow{
    height:58px;
    min-height:58px;
  }

  .datebar__arrow{
    width:58px;
    flex-basis:58px;
  }

  .day{
    height:58px;
    min-height:58px;
    padding:5px 3px;
  }

  .day.is-selected{
    height:50px;
    min-height:50px;
    margin:4px 3px;
  }
}


/* Fix: sökresultat ska alltid ligga ovanpå kalendern */
.hero{
  position:relative;
  z-index:20;
  overflow:visible;
}

.hero__content{
  position:relative;
  z-index:30;
  overflow:visible;
}

.searchwrap{
  position:relative;
  z-index:40;
}

.searchresults{
  z-index:1000;
}

.datebar{
  position:relative;
  z-index:10;
}


/* Finjustering topp/sök/kalender */
.topbar,.topbar__inner,.brand{height:56px;min-height:56px}
.brand img{height:46px}
.hero__content{transform:translateY(11px)}

.day.is-selected{
  width:calc(100% - 20px);
  justify-self:center;
  margin:5px 10px;
}

.searchbox__clear{
  margin-left:auto;width:32px;height:32px;
  align-items:center;justify-content:center;border-radius:50%;
}
.searchbox.has-value .searchbox__clear{display:flex}

/* Sökresultatsida: spelade / kommande / info */
.league-grid:has(.search-panel){
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(250px,.7fr);
  align-items:start;
}
.search-panel,.entity-panel{
  background:#fff;border:1px solid #e0e5ea;border-radius:12px;
  overflow:hidden;box-shadow:var(--shadow);
}
.search-panel__head{
  min-height:54px;display:flex;align-items:center;padding:0 16px;
  font-size:18px;font-weight:800;border-bottom:1px solid var(--line);
}
.search-panel__empty{padding:28px 16px;color:#74808b;text-align:center;font-size:14px}
.searchmatch{
  display:grid;grid-template-columns:88px 1fr auto;gap:12px;
  padding:11px 16px;border-bottom:1px solid var(--line);align-items:center;
}
.searchmatch:last-child{border-bottom:0}
.searchmatch__date{color:#596572;font-size:12px;font-weight:700}
.searchmatch__meta{color:#7a8590;font-size:12px;margin-bottom:3px}
.searchmatch__teams{display:flex;flex-direction:column;gap:2px;font-weight:650}
.searchmatch__score{font-weight:850}
.entity-panel{padding:20px;text-align:center}
.entity-panel__badge{
  width:72px;height:72px;margin:0 auto 10px;border-radius:18px;background:#f0f4f8;
  display:grid;place-items:center;font-weight:900;color:#506070;
}
.entity-panel__badge img{width:60px;height:60px;object-fit:contain}
.entity-panel__kind{color:#7a8590;font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.entity-panel h2{margin:5px 0 10px;font-size:21px}
.entity-panel p{margin:0;color:#687481;font-size:13px;line-height:1.45}

@media(max-width:680px){
  .topbar,.topbar__inner,.brand{height:52px;min-height:52px}
  .brand img{height:42px}

  .datebar__days{
    display:flex!important;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scrollbar-width:none;
  }
  .datebar__days::-webkit-scrollbar{display:none}
  .datebar__days .day{
    display:flex!important;flex:0 0 33.3333%;scroll-snap-align:center;
  }

  .league-grid:has(.search-panel){grid-template-columns:1fr}
  .entity-panel{order:-1}
}


/* BUGFIX: alla datumceller ska alltid ha exakt samma bredd */
.datebar__days{
  display:grid !important;
  grid-template-columns:repeat(7,minmax(0,1fr)) !important;
}

.day,
.day.is-selected{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  justify-self:stretch !important;
  box-sizing:border-box !important;
}

/* Highlighten ligger inuti cellen och påverkar inte kolumnbredden */
.day.is-selected{
  margin:0 !important;
  background:transparent !important;
  border-radius:0 !important;
  position:relative;
}

.day.is-selected::after{
  content:"";
  position:absolute;
  top:5px;
  bottom:5px;
  left:5px;
  right:5px;
  border-radius:10px;
  background:linear-gradient(#3187f2,#1767d1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  z-index:-1;
}

@media(max-width:680px){
  .datebar__days{
    display:flex !important;
  }

  .datebar__days .day,
  .datebar__days .day.is-selected{
    width:auto !important;
    flex:0 0 33.3333% !important;
  }
}


/* BUGFIX: skiljelinjen ska alltid ligga ovanpå highlighten */
.day{
  border-left:0 !important;
  border-right:0 !important;
  position:relative;
}

.day:not(:first-child)::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:1px;
  background:#3d4853;
  z-index:5;
  pointer-events:none;
}

.day:last-child{
  border-right:1px solid #3d4853 !important;
}

/* Highlighten ligger under text och separator */
.day.is-selected::after{
  z-index:0 !important;
}

.day__dow,
.day__num{
  position:relative;
  z-index:2;
}


/* MOBILFIX 2026-08-12
   Säkerställ att match-/ligadelen alltid blir en kolumn på mobil,
   utan att påverka desktop/tablet-layouten. */
@media(max-width:680px){
  .league-grid,
  .league-grid:has(.search-panel){
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:12px !important;
    width:100% !important;
  }

  .league-grid > .league-card,
  .league-grid > .search-panel,
  .league-grid > .entity-panel,
  .league-grid > *{
    grid-column:1 !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  .league-card,
  .search-panel,
  .entity-panel{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
  }

  .match{
    grid-template-columns:72px minmax(0,1fr) auto !important;
    width:100% !important;
  }

  .team,
  .team__name,
  .league-card__title{
    min-width:0 !important;
  }
}
