/* =====================================================================
   MittKlasserom v99.2 – Responsive UI system
   Én felles skala for offentlige sider, brukerportal og administrasjon.
   Tavle-canvasen er med vilje ikke inkludert: den bruker et fast 1920×1080
   koordinatsystem og skaleres av tavlemotoren selv.
   ===================================================================== */

:root{
  --mk-ui-text:14px;
  --mk-ui-small:12px;
  --mk-ui-tiny:10px;
  --mk-ui-control:13px;
  --mk-ui-h1:34px;
  --mk-ui-h2:22px;
  --mk-ui-h3:17px;
  --mk-ui-card-pad:20px;
  --mk-ui-gap:14px;
  --mk-ui-radius:17px;
  --mk-ui-control-h:42px;
}

/* Ikke la store paneler bli høye bare fordi en nabokolonne er høy. */
.accountGrid,
.featureGrid,
.priceGrid,
.formGrid,
.stats{
  align-items:start;
}

/* =====================================================================
   BRED DESKTOP – dette er hovedreferansen for tetthet og lesbarhet.
   ===================================================================== */
@media (min-width:1440px){
  :root{
    --mk-ui-text:clamp(14px,.78vw,16px);
    --mk-ui-small:clamp(12px,.67vw,14px);
    --mk-ui-tiny:clamp(10px,.57vw,12px);
    --mk-ui-control:clamp(13px,.72vw,15px);
    --mk-ui-h1:clamp(36px,2.05vw,44px);
    --mk-ui-h2:clamp(22px,1.32vw,28px);
    --mk-ui-h3:clamp(17px,1vw,21px);
    --mk-ui-card-pad:clamp(20px,1.25vw,27px);
    --mk-ui-gap:clamp(14px,.9vw,19px);
    --mk-ui-radius:clamp(17px,1vw,21px);
    --mk-ui-control-h:clamp(44px,2.55vw,50px);
  }

  body{font-size:var(--mk-ui-text)}

  /* ---------- Felles offentlige sider ---------- */
  .mkPublicShell,
  .shell{
    width:min(1520px,calc(100% - clamp(72px,6vw,128px)))!important;
    max-width:none!important;
  }
  .mkHeaderInner{height:clamp(88px,4.8vw,96px)!important}
  .mkBrand img{height:clamp(58px,3.2vw,66px)!important}
  .mkNavLink,
  .mkPublicBtn{
    font-size:var(--mk-ui-control)!important;
    min-height:var(--mk-ui-control-h)!important;
  }

  .hero{padding-top:clamp(62px,4vw,82px)!important}
  .hero p,
  .heroLead,
  .lead,
  .sectionSub,
  .sectionHead p{
    font-size:clamp(14px,.84vw,17px)!important;
    line-height:1.65!important;
  }
  .eyebrow,
  .kicker,
  .hero .tag{
    font-size:clamp(10px,.6vw,12px)!important;
  }
  .section h2,
  .sectionHead h2{
    font-size:clamp(34px,2.55vw,50px)!important;
    line-height:1.05!important;
  }

  /* Forsiden */
  .feature,
  .step,
  .journeyCard,
  .productStrip,
  .pricePanel,
  .demoPanel,
  .statusCard,
  .wipCard{
    padding:var(--mk-ui-card-pad)!important;
    border-radius:var(--mk-ui-radius)!important;
  }
  .feature h3,
  .journeyCard h3,
  .statusCard h3{font-size:var(--mk-ui-h3)!important}
  .feature p,
  .journeyCard p,
  .statusCard p,
  .ctaText p,
  .wipCard p{
    font-size:var(--mk-ui-small)!important;
    line-height:1.55!important;
  }
  .step strong{font-size:clamp(14px,.82vw,17px)!important}
  .step span{font-size:var(--mk-ui-small)!important}
  .heroActions .btn,
  .heroActions .mkPublicBtn{
    min-height:var(--mk-ui-control-h)!important;
    font-size:var(--mk-ui-control)!important;
    padding-left:clamp(17px,1vw,22px)!important;
    padding-right:clamp(17px,1vw,22px)!important;
  }

  /* Funksjoner */
  .featureGrid{gap:var(--mk-ui-gap)!important}
  .featureCard{
    padding:var(--mk-ui-card-pad)!important;
    min-height:0!important;
  }
  .featureCard h3{font-size:var(--mk-ui-h3)!important}
  .featureCard p{font-size:var(--mk-ui-small)!important}
  .featureCard strong{font-size:var(--mk-ui-tiny)!important}
  .widgetGrid{gap:var(--mk-ui-gap)!important}
  .widgetCard{
    min-height:0!important;
    padding:clamp(18px,1.1vw,24px)!important;
  }
  .widgetCard h3{font-size:clamp(15px,.88vw,18px)!important}
  .widgetCard p{font-size:clamp(11px,.66vw,13px)!important}
  .flow{gap:var(--mk-ui-gap)!important}
  .flowStep{padding-top:clamp(18px,1.1vw,23px)!important;padding-bottom:clamp(18px,1.1vw,23px)!important}
  .flowStep strong{font-size:clamp(14px,.8vw,16px)!important}
  .flowStep span{font-size:var(--mk-ui-small)!important}

  /* Priser */
  .priceGrid{gap:var(--mk-ui-gap)!important}
  .priceCard{
    padding:clamp(24px,1.45vw,31px)!important;
    min-height:0!important;
  }
  .priceCard h2{font-size:clamp(20px,1.18vw,24px)!important}
  .price{font-size:clamp(38px,2.35vw,48px)!important}
  .priceCard p,
  .priceCard li,
  .schoolDeal{font-size:var(--mk-ui-small)!important}
  .schoolAdmin h2{font-size:clamp(27px,1.7vw,34px)!important}
  .schoolAdmin p{font-size:clamp(13px,.78vw,16px)!important}
  .inquiryCopy h2{font-size:clamp(34px,2.3vw,46px)!important}
  .inquiryCopy p{font-size:clamp(14px,.84vw,17px)!important}
  .field label{font-size:var(--mk-ui-small)!important}
  .field input,.field textarea,.field select{
    min-height:var(--mk-ui-control-h)!important;
    font-size:var(--mk-ui-control)!important;
  }

  /* FAQ */
  .faqLayout{grid-template-columns:minmax(290px,350px) minmax(0,1fr)!important;gap:var(--mk-ui-gap)!important}
  .faqCategory{padding:clamp(15px,.9vw,19px)!important;padding-right:50px!important}
  .faqCategory strong{font-size:clamp(13px,.76vw,15px)!important}
  .faqCategory span{font-size:clamp(10px,.62vw,12px)!important}
  .faqGroupHead h2{font-size:clamp(23px,1.45vw,29px)!important}
  .faqGroupHead p{font-size:var(--mk-ui-small)!important}
  .faqQuestion{font-size:clamp(14px,.82vw,17px)!important;padding:clamp(17px,1vw,21px) clamp(20px,1.2vw,25px)!important}
  .faqAnswer div{font-size:clamp(13px,.76vw,15px)!important}

  /* Kontakt */
  .contactSummary strong{font-size:clamp(15px,.9vw,18px)!important}
  .contactSummary p{font-size:clamp(13px,.76vw,15px)!important}
  .contactSummary span{font-size:var(--mk-ui-small)!important}
  .card{
    border-radius:var(--mk-ui-radius)!important;
  }
  .heroGrid .card{padding:var(--mk-ui-card-pad)!important}
  .card h2{font-size:var(--mk-ui-h2)!important}
  .card>p{font-size:var(--mk-ui-small)!important}

  /* Utvikling */
  .roadmapPanel{padding:clamp(16px,.95vw,20px)!important}
  .roadmapTop strong{font-size:clamp(14px,.82vw,17px)!important}
  .roadmapTop span{font-size:var(--mk-ui-small)!important}
  .roadmapItem{
    padding:clamp(16px,.95vw,20px) clamp(14px,.9vw,18px)!important;
    grid-template-columns:minmax(0,1fr) minmax(180px,220px) minmax(130px,165px)!important;
  }
  .roadmapMain h3{font-size:clamp(15px,.9vw,18px)!important}
  .roadmapMain p{font-size:clamp(12px,.7vw,14px)!important}
  .roadmapDate,
  .roadmapDate strong,
  .status,
  .legend span{font-size:clamp(10px,.6vw,12px)!important}

  /* Endringer */
  body:has(.timeline)>main{
    width:min(1180px,calc(100% - clamp(72px,6vw,128px)))!important;
    max-width:none!important;
  }
  .timeline .post{
    padding:clamp(22px,1.3vw,28px)!important;
    margin-bottom:clamp(18px,1.1vw,23px)!important;
  }
  .timeline .post h2{font-size:clamp(24px,1.5vw,30px)!important}
  .timeline .summary{font-size:clamp(14px,.82vw,16px)!important}
  .timeline .body{font-size:clamp(14px,.78vw,16px)!important}
  .timeline .meta{font-size:var(--mk-ui-small)!important}

  /* ---------- App shell / innlogget område ---------- */
  :root{
    --mk-app-shell:1480px!important;
    --mk-app-gutter:clamp(72px,6vw,128px)!important;
  }
  .mkAppHeader{height:clamp(88px,4.8vw,96px)!important}
  .mkAppBrand img{height:clamp(58px,3.2vw,66px)!important}
  .mkAppLink,.mkAppAction{
    min-height:var(--mk-ui-control-h)!important;
    font-size:var(--mk-ui-control)!important;
  }
  .mkProfileButton{min-height:var(--mk-ui-control-h)!important}
  .mkProfileAvatar{width:clamp(35px,2vw,40px)!important;height:clamp(35px,2vw,40px)!important;font-size:clamp(13px,.75vw,15px)!important}
  .mkProfileButtonText strong{font-size:clamp(11px,.66vw,13px)!important}
  .mkProfileButtonText small{font-size:clamp(9px,.54vw,11px)!important}

  /* Brukermeny */
  .mkUserDrawer{width:min(390px,calc(100vw - 34px))!important}
  .mkUserDrawerHead{padding:clamp(19px,1.2vw,24px)!important}
  .mkUserDrawerIdentity strong{font-size:clamp(13px,.78vw,15px)!important}
  .mkUserDrawerIdentity span{font-size:clamp(10px,.6vw,12px)!important}
  .mkUserDrawerLabel{font-size:clamp(9px,.55vw,11px)!important}
  .mkUserDrawerNav a{min-height:clamp(58px,3.4vw,66px)!important}
  .mkUserDrawerNav a strong{font-size:clamp(12px,.7vw,14px)!important}
  .mkUserDrawerNav a small{font-size:clamp(9px,.56vw,11px)!important}

  /* ---------- Mine tavler ---------- */
  body:has(.dashboardHero) main{
    width:min(1480px,calc(100% - clamp(72px,6vw,128px)))!important;
    max-width:none!important;
  }
  .v98Hero{
    min-height:0!important;
    padding:clamp(24px,1.5vw,31px)!important;
  }
  .v98Hero h1{font-size:var(--mk-ui-h1)!important}
  .v98Hero p{font-size:clamp(14px,.82vw,16px)!important}
  .v98HeroCreate{min-height:var(--mk-ui-control-h)!important;font-size:var(--mk-ui-control)!important}
  .syncPill,
  .v39Toolbar #boardSearch,
  .v39Toolbar .sortSelect,
  .v39Toolbar .btn,
  .viewToggle{
    min-height:var(--mk-ui-control-h)!important;
    font-size:var(--mk-ui-control)!important;
  }
  .v98Tabs .libraryTab,
  .v41Filter,
  .v41SelectToggle{font-size:var(--mk-ui-control)!important}
  .viewIntro .sectionTitle h2{font-size:var(--mk-ui-h2)!important}
  #folderSection .sectionTitle h2{font-size:clamp(12px,.7vw,14px)!important}
  .v98EmptyFolder b{font-size:clamp(11px,.68vw,13px)!important}
  .v98EmptyFolder small{font-size:clamp(10px,.6vw,12px)!important}
  #boards>.grid{
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr))!important;
    gap:var(--mk-ui-gap)!important;
  }
  .boardPreview.v39Preview{height:clamp(165px,10vw,195px)!important}
  .v39CardBody{padding:clamp(13px,.85vw,17px)!important}
  .v39CardHead h3{font-size:clamp(15px,.88vw,18px)!important}
  .v39CardHead .meta{font-size:clamp(10px,.6vw,12px)!important}
  .statPill{font-size:clamp(10px,.6vw,12px)!important}
  .v94Empty{
    min-height:0!important;
    padding:clamp(52px,4vw,78px) 28px!important;
  }
  .v94Empty h2{font-size:var(--mk-ui-h2)!important}
  .v94Empty p{font-size:clamp(13px,.76vw,15px)!important}

  /* ---------- Konto ---------- */
  .accountWrap{
    width:min(1480px,calc(100% - clamp(72px,6vw,128px)))!important;
    max-width:none!important;
  }
  .v98AccountHero{
    padding:clamp(22px,1.35vw,28px)!important;
    gap:clamp(15px,1vw,20px)!important;
  }
  .v98Avatar{
    width:clamp(58px,3.4vw,68px)!important;
    height:clamp(58px,3.4vw,68px)!important;
    font-size:clamp(23px,1.4vw,28px)!important;
  }
  .v98AccountIdentity h1{font-size:clamp(29px,1.85vw,37px)!important}
  .v98AccountIdentity .sub{font-size:clamp(12px,.72vw,14px)!important}
  .v98IdentityBadges span{font-size:clamp(9px,.55vw,11px)!important}
  .v98AccessStatus{
    min-width:clamp(190px,12vw,235px)!important;
    padding:clamp(12px,.8vw,16px)!important;
  }
  .v98AccessStatus small{font-size:clamp(9px,.55vw,11px)!important}
  .v98AccessStatus strong{font-size:clamp(12px,.72vw,14px)!important}

  .accountGrid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:var(--mk-ui-gap)!important;
    align-items:start!important;
  }
  .accountGrid>.panel{
    align-self:start!important;
    min-height:0!important;
    height:auto!important;
    padding:var(--mk-ui-card-pad)!important;
  }
  .panel h2{font-size:var(--mk-ui-h2)!important}
  .panelIntro{font-size:var(--mk-ui-small)!important}

  /* Dette er den konkrete plassfeilen i Lisens og tilgang:
     gamle regler satte 92–120px minimumshøyde per statuskort. */
  .summary{
    gap:clamp(8px,.55vw,11px)!important;
    align-items:start!important;
  }
  .summaryItem{
    min-height:0!important;
    height:auto!important;
    padding:clamp(12px,.75vw,15px)!important;
    border-radius:clamp(10px,.65vw,13px)!important;
  }
  .summaryItem small{font-size:clamp(9px,.54vw,11px)!important}
  .summaryItem strong{font-size:clamp(13px,.78vw,16px)!important}
  .summaryItem span{font-size:clamp(10px,.6vw,12px)!important}
  .tip{font-size:clamp(10px,.62vw,12px)!important;padding:clamp(9px,.6vw,12px)!important}

  .accountWrap form label{font-size:clamp(11px,.66vw,13px)!important}
  .accountWrap input{
    min-height:var(--mk-ui-control-h)!important;
    font-size:var(--mk-ui-control)!important;
  }
  .formActions .btn{
    min-height:var(--mk-ui-control-h)!important;
    font-size:var(--mk-ui-control)!important;
  }

  /* Elevlister / passord */
  body:has(.listPanel) .wrap,
  body:has(.passwordPanel) .passwordWrap{
    width:min(1480px,calc(100% - clamp(72px,6vw,128px)))!important;
    max-width:none!important;
  }
  .hero h1,
  .passwordHero h1{font-size:var(--mk-ui-h1)!important}
  .hero p,
  .passwordHero p{font-size:clamp(13px,.76vw,15px)!important}
  .listPanel,.editPanel,.passwordPanel{
    padding:var(--mk-ui-card-pad)!important;
    border-radius:var(--mk-ui-radius)!important;
  }
  .listName{font-size:clamp(16px,.95vw,19px)!important}
  .meta{font-size:var(--mk-ui-small)!important}
  .editLink,.smallBtn,.topAction{font-size:var(--mk-ui-control)!important}
  .passwordPanel{max-width:900px!important}
  .passwordPanel h2{font-size:var(--mk-ui-h2)!important}
  .passwordPanel .intro{font-size:var(--mk-ui-small)!important}
  .passwordPanel label{font-size:clamp(11px,.66vw,13px)!important}
  .passwordPanel input{min-height:var(--mk-ui-control-h)!important;font-size:var(--mk-ui-control)!important}

  /* ---------- Admin og skoleadministrasjon ---------- */
  body:has(.mkAdminSidebar) main,
  body:has(.top) main{
    width:min(1480px,calc(100% - clamp(72px,6vw,128px)))!important;
    max-width:none!important;
  }
  .top{
    gap:clamp(18px,1.2vw,26px)!important;
    margin-bottom:clamp(18px,1.2vw,24px)!important;
  }
  .top h1{font-size:var(--mk-ui-h1)!important}
  .eyebrow{font-size:clamp(10px,.6vw,12px)!important}
  .muted{font-size:clamp(13px,.76vw,15px)!important}

  .stats{
    gap:var(--mk-ui-gap)!important;
    margin-bottom:clamp(20px,1.3vw,27px)!important;
  }
  .stat{
    min-height:0!important;
    padding:clamp(17px,1.05vw,22px)!important;
    border-radius:var(--mk-ui-radius)!important;
  }
  .stat small{font-size:clamp(11px,.66vw,13px)!important}
  .stat strong{font-size:clamp(28px,1.8vw,36px)!important}

  .panel{
    min-height:0!important;
    height:auto!important;
    border-radius:var(--mk-ui-radius)!important;
  }
  .panelHead{
    min-height:0!important;
    padding:clamp(15px,.95vw,20px) clamp(18px,1.15vw,24px)!important;
  }
  .panelHead h2{font-size:var(--mk-ui-h2)!important}

  .btn{
    min-height:var(--mk-ui-control-h)!important;
    font-size:var(--mk-ui-control)!important;
    padding-left:clamp(12px,.8vw,16px)!important;
    padding-right:clamp(12px,.8vw,16px)!important;
  }
  .search,
  input.search,
  .panel input,
  .panel select,
  .panel textarea{
    min-height:var(--mk-ui-control-h)!important;
    font-size:var(--mk-ui-control)!important;
  }

  table th,
  table td{
    padding:clamp(13px,.82vw,17px) clamp(14px,.92vw,19px)!important;
    font-size:clamp(13px,.76vw,15px)!important;
  }
  table th{font-size:clamp(10px,.62vw,12px)!important}
  table .name,.name{font-size:clamp(13px,.78vw,16px)!important}
  .pill{font-size:clamp(10px,.6vw,12px)!important;padding:5px 8px!important}
  .notice{font-size:var(--mk-ui-small)!important}

  /* Adminsidebar skaleres med resten, uten å bli massiv. */
  .mkAdminSidebar{font-size:var(--mk-ui-small)!important}
  .mkAdminSidebarHead strong{font-size:clamp(13px,.76vw,15px)!important}
  .mkAdminSidebarHead small{font-size:clamp(9px,.55vw,11px)!important}
  .mkAdminSideLabel{font-size:clamp(9px,.53vw,10px)!important}
  .mkAdminSideItem{font-size:clamp(12px,.7vw,14px)!important}
}

/* =====================================================================
   EKSTRA STORE SKJERMER – mer bredde, men begrenset vertikal oppblåsing.
   ===================================================================== */
@media (min-width:1900px){
  :root{
    --mk-app-shell:1760px!important;
    --mk-app-gutter:clamp(100px,7vw,160px)!important;
  }
  .mkPublicShell,.shell,
  body:has(.dashboardHero) main,
  .accountWrap,
  body:has(.listPanel) .wrap,
  body:has(.passwordPanel) .passwordWrap,
  body:has(.mkAdminSidebar) main,
  body:has(.top) main{
    width:min(1760px,calc(100% - clamp(100px,7vw,160px)))!important;
  }
  #boards>.grid{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))!important}
}

/* =====================================================================
   LAPTOP / TABLET – behold kompakt uttrykk, men aldri mikrotekst.
   ===================================================================== */
@media (min-width:861px) and (max-width:1439px){
  .featureCard p,.widgetCard p,.roadmapMain p{font-size:max(11px,.72vw)!important}
  .mkNavLink,.mkPublicBtn,.mkAppLink,.mkAppAction{font-size:max(11px,.76vw)!important}
  .accountGrid>.panel{align-self:start!important;height:auto!important}
  .summaryItem{min-height:0!important;height:auto!important}
}

/* =====================================================================
   MOBIL
   ===================================================================== */
@media (max-width:760px){
  .accountGrid{grid-template-columns:1fr!important}
  .summary{grid-template-columns:1fr!important}
  .roadmapItem{grid-template-columns:1fr!important}
}

/* v99.0 konkret kontojustering */
.v99AccessPanel{align-self:start!important;height:auto!important;min-height:0!important}
.v99AccessPanel .summary{grid-auto-rows:auto!important}
.v99AccessPanel .summaryItem{min-height:0!important;height:auto!important}


/* =====================================================================
   v99.2 – Wide-screen refinement
   NY oppførsel aktiveres kun på reelt brede skjermer. Vanlig desktop
   (inkludert 1920px) beholder det etablerte uttrykket fra tidligere.
   ===================================================================== */
@media (min-width:2200px){

  /* Mine tavler: bruk bredden uten å blåse opp hele grensesnittet. */
  body:has(.dashboardHero) main{
    width:min(1880px,calc(100% - 9vw))!important;
  }

  .v98Hero{
    padding:clamp(26px,1.55vw,32px)!important;
  }

  /* Siste brukt skal oppleves som ordentlige snarveier, ikke små tekstlapper. */
  .recentBoards,
  .recentStrip,
  .v98RecentGrid{
    gap:12px!important;
  }
  .recentBoards>*,
  .recentStrip>*,
  .v98RecentGrid>*{
    min-height:58px!important;
  }

  /* Mapper får en brukbar fysisk størrelse på brede skjermer. */
  .folderGrid,
  #folders{
    gap:14px!important;
  }
  .folderCard,
  .folder{
    min-width:250px!important;
  }

  /* Tavlene er hovedinnholdet: større thumbnails og færre mikrokort per rad. */
  #boards>.grid{
    grid-template-columns:repeat(auto-fill,minmax(350px,1fr))!important;
    gap:18px!important;
  }
  .boardPreview.v39Preview{
    height:clamp(205px,12vw,235px)!important;
  }
  .v39CardBody{
    padding:16px 17px!important;
  }
  .v39CardHead h3{
    font-size:17px!important;
  }
  .v39CardHead .meta,
  .statPill{
    font-size:12px!important;
  }

  /* Dashboard-seksjoner får tydeligere vertikal rytme. */
  #folderSection{
    margin-top:18px!important;
    margin-bottom:30px!important;
  }
  #boards{
    margin-top:24px!important;
  }
  .viewIntro .sectionTitle h2{
    font-size:25px!important;
  }

  /* Konto: behold kompakt panelhøyde, men utnytt stor skjerm litt bedre. */
  .accountWrap{
    width:min(1760px,calc(100% - 9vw))!important;
  }
  .accountGrid{
    gap:18px!important;
  }
  .accountGrid>.panel{
    padding:25px!important;
  }
  .v99AccessPanel .summary{
    gap:10px!important;
  }
  .v99AccessPanel .summaryItem{
    padding:15px 16px!important;
  }

  /* Admin/skoleadmin får samme lesbare arbeidsbredde. */
  body:has(.mkAdminSidebar) main,
  body:has(.top) main{
    width:min(1880px,calc(100% - 9vw))!important;
  }
}

@media (min-width:3000px){
  /* På ultrabrede skjermer øker vi arbeidsflaten, ikke hele UI-skalaen. */
  body:has(.dashboardHero) main,
  body:has(.mkAdminSidebar) main,
  body:has(.top) main{
    width:min(2200px,calc(100% - 10vw))!important;
  }
  .accountWrap{
    width:min(1980px,calc(100% - 10vw))!important;
  }
  #boards>.grid{
    grid-template-columns:repeat(auto-fill,minmax(390px,1fr))!important;
    gap:20px!important;
  }
  .boardPreview.v39Preview{
    height:245px!important;
  }
}