/* =========================================================
   RESPONSIV GRUND – gäller hela sajten, laddas sist.
   Mål: fungerar på alla telefon-/surfplattsstorlekar (från 320 px)
   och i moderna webbläsare (Chrome, Safari/iOS, Firefox, Edge).
   Internet Explorer stöds inte (Microsoft avvecklade den 2022).
   ========================================================= */

/* ---- Grund ---- */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}
img,video,canvas{max-width:100%;height:auto}
iframe{max-width:100%}
.main{min-width:0}                       /* låter innehållet krympa i flex-raden i stället för att tryckas ut */
.app{max-width:100%}
table{max-width:100%}
pre,code{overflow-wrap:anywhere}
.card,.dashboard,.dashboard-grid>*{min-width:0}

/* Safari <18 kräver prefix */
.sidebar{-webkit-backdrop-filter:blur(var(--sb-blur,12px))}

/* Mobilmeny-delar syns inte på bred skärm */
.mobile-topbar,.mobile-nav-backdrop{display:none}

/* ---- Skärmar ≤ 900 px: sidomenyn blir en utfällbar meny ---- */
@media (max-width:900px){

  .app{display:block;min-height:100vh;min-height:100dvh}

  .mobile-topbar{
    display:flex;align-items:center;gap:12px;
    position:-webkit-sticky;position:sticky;top:0;z-index:900;
    height:calc(56px + env(safe-area-inset-top,0px));
    padding:env(safe-area-inset-top,0px) max(16px,env(safe-area-inset-right,0px)) 0 max(8px,env(safe-area-inset-left,0px));
    background:rgba(9,8,26,.92);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .mobile-brand{color:var(--text-primary);text-decoration:none;font-weight:700;font-size:1rem;letter-spacing:.01em}

  .mobile-nav-toggle{
    width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--text-primary);
    display:grid;place-items:center;cursor:pointer;-webkit-appearance:none;appearance:none;
  }
  .mobile-nav-toggle:focus-visible{outline:2px solid var(--accent-end);outline-offset:2px}
  .mobile-nav-bars{display:block;width:22px;height:16px;position:relative}
  .mobile-nav-bars i{
    position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;
    transition:transform .25s ease,opacity .2s ease,top .25s ease;
  }
  .mobile-nav-bars i:nth-child(1){top:0}
  .mobile-nav-bars i:nth-child(2){top:7px}
  .mobile-nav-bars i:nth-child(3){top:14px}
  .nav-open .mobile-nav-bars i:nth-child(1){top:7px;transform:rotate(45deg)}
  .nav-open .mobile-nav-bars i:nth-child(2){opacity:0}
  .nav-open .mobile-nav-bars i:nth-child(3){top:7px;transform:rotate(-45deg)}

  /* Sidomenyn som sidopanel */
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;z-index:1000;
    width:min(86vw,320px);min-width:0;max-width:100%;
    height:100vh;height:100dvh;min-height:0;
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    padding-top:max(var(--sb-pad,24px),env(safe-area-inset-top,0px));
    padding-bottom:max(var(--sb-pad,24px),env(safe-area-inset-bottom,0px));
    -webkit-transform:translateX(-105%);transform:translateX(-105%);
    visibility:hidden;
    transition:transform .28s ease,visibility 0s linear .28s;
    box-shadow:none;
  }
  .nav-open .sidebar{
    -webkit-transform:none;transform:none;visibility:visible;
    transition:transform .28s ease,visibility 0s;
    box-shadow:0 0 60px rgba(0,0,0,.6);
  }
  .sidebar .sidebar-nav{overflow:visible;flex:0 0 auto}   /* hela panelen scrollar, inte bara listan */

  .mobile-nav-backdrop{
    display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:950;
    background:rgba(3,4,14,.66);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s;
  }
  .nav-open .mobile-nav-backdrop{opacity:1;visibility:visible;transition:opacity .25s ease,visibility 0s}
  .nav-open,.nav-open body{overflow:hidden}

  /* Innehållet */
  .main{
    padding:16px max(16px,env(safe-area-inset-right,0px)) 96px max(16px,env(safe-area-inset-left,0px));
    overflow-x:hidden;overflow-y:visible;
  }
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
}

/* Smala telefoner */
@media (max-width:480px){
  .main{padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
  .card{border-radius:14px}
}

@media (prefers-reduced-motion:reduce){
  .sidebar,.mobile-nav-backdrop,.mobile-nav-bars i{transition:none !important}
}

/* ---- Modul: Varför samarbeta (mobilanpassning) ---- */
.whyme-grid>*{min-width:0}
@media (max-width:900px){
  .whyme-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .whyme-saving{padding:16px}
  .whyme-table-wrap{overflow-x:visible}
  .whyme-table,.whyme-table tbody,.whyme-table tfoot,.whyme-table tr,.whyme-table th,.whyme-table td{display:block;width:100%;min-width:0}
  .whyme-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .whyme-table tr{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .whyme-table tbody th,.whyme-table tfoot th{padding:0 0 6px;border:0;font-size:14px}
  .whyme-table td{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border:0;text-align:right}
  .whyme-table td::before{content:attr(data-label);color:var(--text-muted);text-align:left;font-weight:500}
  .whyme-table td.is-me{background:none;padding:4px 8px;border-radius:8px;background:rgba(61,220,151,.08)}
  .whyme-table tfoot tr{border-bottom:0}
}

/* ---- Formulär: undvik att iOS zoomar in vid fokus (kräver minst 16 px) ---- */
@media (max-width:900px){
  input,select,textarea{font-size:16px}
}

/* =========================================================
   FÖRSTÄRKNING – fler enheter och webbläsare
   ========================================================= */

/* Typografi: långa ord/URL:er bryter i stället för att spräcka layouten */
h1,h2,h3,h4,p,li,td,th,a,.card{overflow-wrap:break-word;word-wrap:break-word}
body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms !important;animation-iteration-count:1 !important}}

/* Tangentbordsfokus synligt i alla webbläsare (äldre Safari saknar :focus-visible → fallback) */
a:focus,button:focus,summary:focus,[tabindex]:focus{outline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent-end,#7c8cff);outline-offset:2px}

/* Pekskärmar: större träffytor (minst ~44 px) och ingen "fast" hover */
@media (hover:none) and (pointer:coarse){
  button,.btn,[role="button"],select,input[type="checkbox"],input[type="radio"],.sidebar a,.nav a,summary{min-height:44px}
  input[type="checkbox"],input[type="radio"]{min-width:24px;min-height:24px}
  .estimator-item,.booking-card a,.lead-dialog button{min-height:44px}
  a,button{touch-action:manipulation}   /* tar bort 300 ms-fördröjning vid dubbeltryck */
}

/* Dialoger och iframe: dvh så adressfältet i mobilwebbläsare inte klipper */
@supports (height:100dvh){
  .lead-dialog{max-height:calc(100dvh - 32px)}
  .booking-frame{height:min(680px,calc(100dvh - 110px))}
}
.lead-dialog{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
dialog::backdrop{background:rgba(3,4,14,.7)}

/* Liggande telefon: låg höjd → kompaktare topplist och meny */
@media (max-height:480px) and (orientation:landscape){
  .mobile-topbar{height:calc(48px + env(safe-area-inset-top,0px))}
  .hero-card,.hero{min-height:0}
  .main{padding-bottom:32px}
}

/* Mellanstora surfplattor (portrait) */
@media (min-width:601px) and (max-width:900px){
  .main{padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
}

/* Mycket breda skärmar: innehållet blir inte absurt utsträckt */
@media (min-width:1800px){
  .main{max-width:1600px;margin-left:auto;margin-right:auto}
}

/* Tvåfingerszoom/textstorlek: tillåt att knappar radbryter i stället för att klippas */
button,.btn{white-space:normal}

/* Äldre webbläsare utan gap i flex / aspect-ratio hanteras redan i pulse.css; backdrop-filter faller tillbaka till solid bakgrund */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .mobile-topbar{background:#09081a}
  .mobile-nav-backdrop{background:rgba(3,4,14,.85)}
  .sidebar{background-color:#0b0a1f}
}

/* Hög kontrast / Windows-läge (Edge) */
@media (forced-colors:active){
  .card,.lead-dialog{border:1px solid CanvasText}
  .mobile-nav-toggle{border:1px solid ButtonText}
}

/* Utskrift */
@media print{
  .sidebar,.mobile-topbar,.mobile-nav-backdrop,.booking-card,.estimator,dialog{display:none !important}
  html,body,.app,.main{background:#fff !important;color:#000 !important;display:block !important;overflow:visible !important;padding:0 !important}
  .card{break-inside:avoid;box-shadow:none !important;border:1px solid #ccc !important;background:#fff !important;color:#000 !important}
  a{color:#000;text-decoration:underline}
}

/* ---- Undermeny (Projekt → Alla/Aktiva/Planerade/Klara) ----
   Grundregeln för menylänkar är ett 3-kolumners rutnät (ikon | text | status), vilket
   pressade in undermenyns text i den smala ikonkolumnen. Undermenyn är vanliga block-länkar. */
.sidebar .sidebar-nav .sidebar-subnav a,
.sidebar .sidebar-subnav a{
  display:block !important;
  grid-template-columns:none !important;
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
  font-size:.85rem;
  line-height:1.3;
}

/* =========================================================
   MELLANSTORA SKÄRMAR (bärbara datorer, små Mac-fönster, surfplatta liggande)
   Två kolumner på startsidan kräver bred skärm. Under ~1700 px blir hero-kortet
   fullbredds och högerkolumnens kort läggs under (2 kolumner när det får plats).
   ========================================================= */
@media (min-width:981px) and (max-width:1699px){
  body[data-page="dashboard"] .dashboard-grid{grid-template-columns:minmax(0,1fr)}
  body[data-page="dashboard"] .dashboard-grid>div:first-child{display:block}
}
@media (min-width:1200px) and (max-width:1699px){
  body[data-page="dashboard"] .dashboard-right{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
  body[data-page="dashboard"] .dashboard-right .dashboard-leads{margin-top:0}
}
@media (min-width:981px) and (max-width:1199px){
  body[data-page="dashboard"] .dashboard-right{display:grid;gap:16px}
  body[data-page="dashboard"] .dashboard-right .dashboard-leads{margin-top:0}
}

/* Hero: när kortet blir smalare läggs bilderna bredvid varandra under texten */
@media (min-width:701px) and (max-width:1100px){
  body[data-page="dashboard"] .profile-card.hero{grid-template-columns:minmax(0,1fr)}
  .hero-photos{flex-direction:row;align-items:flex-end;justify-content:flex-start;gap:16px;align-self:auto;max-width:none;padding:0}
  .hero-photo--main{width:52%;margin:0}
  .hero-photo--second{width:34%;margin:0;aspect-ratio:4/5;align-self:auto}
}
/* Hero-text: bryt aldrig mitt i ord, mindre bokstavsavstånd på smala kolumner */
.hero-eyebrow,.hero-title{overflow-wrap:normal;word-break:normal;hyphens:none}
@media (max-width:1100px){.hero-eyebrow{letter-spacing:.1em}}

/* Sidomeny: "Tävlingar" + pill får plats utan att texten bryts */
.sidebar-nav a[data-nav="competitions"]{column-gap:8px}
.sidebar-nav a[data-nav="competitions"] .nav-label{white-space:nowrap;overflow:visible;text-overflow:clip}
.sidebar .nav-status{white-space:nowrap;padding-left:8px;padding-right:8px}

/* Tävlingar-raden: etikett får aldrig brytas, pillret krymper på smala sidomenyer */
.sidebar-nav a[data-nav="competitions"] .nav-label{min-width:max-content;word-break:keep-all;overflow-wrap:normal}
@media (min-width:901px) and (max-width:1300px){
  .sidebar .nav-status{font-size:.62rem;padding:2px 6px;letter-spacing:0}
}