/* Tokens; synkes fra Figma senere */
:root{
    --brand:#e74b29;
    --ok:#26a269; --warn:#e5a50a; --err:#c01c28;
    /* spacing scale */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px;
    /* focus ring */
    --focus: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent);
  }
  
  /* Typografi-komponenter */
  .heading-xl{font-size:clamp(2rem, 6vw, 2.5rem);font-weight:800;line-height:1.2;margin-bottom:var(--sp-3)}
  .heading-md{font-size:1.125rem;font-weight:700;line-height:1.3;margin:var(--sp-2) 0}
  .body{font-size:1rem;line-height:1.6}
  .small{font-size:.875rem;line-height:1.4;opacity:.85}
  /* Semantic heading utilities to mirror H1–H6 */
  .h1{font-size:clamp(2rem, 5vw, 2.5rem);line-height:1.2;font-weight:800;margin:0 0 var(--sp-3)}
  .h2{font-size:clamp(1.5rem, 4vw, 2rem);line-height:1.25;font-weight:700;margin:0 0 var(--sp-2)}
  .h3{font-size:clamp(1.25rem, 3vw, 1.5rem);line-height:1.3;font-weight:700;margin:0 0 var(--sp-2)}
  .h4{font-size:1.125rem;line-height:1.35;font-weight:700;margin:0 0 var(--sp-2)}
  .h5{font-size:1rem;line-height:1.4;font-weight:700;margin:0 0 var(--sp-2)}
  .h6{font-size:.875rem;line-height:1.4;font-weight:700;margin:0 0 var(--sp-2);text-transform:uppercase;letter-spacing:.02em}
  
  /* Komponenter */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1rem;border-radius:999px;border:1px solid transparent;font-weight:700;line-height:1.2;cursor:pointer;text-decoration:none}
  .btn:disabled{opacity:.6;cursor:not-allowed}
  .btn:focus-visible{outline:none;box-shadow:var(--focus)}
  /* Mikroanimasjoner for generisk .btn (uavhengig av farge) */
  .btn{transition: background-color 200ms ease-in-out, box-shadow 200ms ease-in-out, transform 200ms ease-in-out, filter 200ms ease-in-out}
  .btn:hover{filter:brightness(.96)}
  .btn:active{transform:translateY(1px) scale(.99); filter:brightness(.9); box-shadow: inset 0 2px 6px rgba(0,0,0,.2)}
  .btn-primary{background:var(--brand);border-color:color-mix(in srgb, var(--brand) 80%, black);color:#fff}
  .btn-primary:hover{filter:brightness(1.05)}
  .btn-primary:active{filter:brightness(.95)}

/* Loading spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: var(--brand);
  animation: spin 1s ease-in-out infinite;
  margin: 0 auto var(--sp-2);
}
  .btn-secondary{background:#2a2c31;border-color:#3a3d45;color:#fff}
  .btn-secondary:hover{background:#30333a}
  .btn-secondary:active{background:#2a2d34}
  .btn-ghost{background:transparent;border-color:#2a2c31;color:#e5e7eb}
  .btn-ghost:hover{background:#1a1b1f}
  .btn-ghost:active{background:#141518}
  /* CTA-knapp (webapp) */
  /* CTA-knapp (webapp) */
  .btn-cta{width:100%;border-radius:4px;background:#BC3219;display:inline-flex;padding:11px 20px 9px 20px;justify-content:center;align-items:center;color:#FFF;text-align:center;text-shadow:0 1px 1px rgba(0,0,0,.05);font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:15px;font-style:normal;font-weight:700;line-height:normal;letter-spacing:.9px;text-transform:uppercase;border:none;cursor:pointer}
  .btn-cta.h33{height:33px}
  .btn-cta.h43{height:43px}
  .btn-cta.h53{height:53px}
  /* Mikroanimasjoner for CTA-knapp (rød) */
  .btn-cta{
    transition: background-color 200ms ease-in-out, box-shadow 200ms ease-in-out, transform 200ms ease-in-out, filter 200ms ease-in-out;
    box-shadow: 0 1px 0 rgba(0,0,0,.15);
  }
  .btn-cta:hover{ /* litt mørkere på hover */
    background: color-mix(in srgb, #BC3219 88%, black);
  }
  .btn-cta:active{ /* tydelig trykkefølelse */
    background: color-mix(in srgb, #BC3219 76%, black);
    transform: translateY(1px) scale(0.99);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.2);
  }
  .btn-cta:disabled{transform:none;box-shadow:none}

  /* Grå variant: VIS ALLE (#btnReset) – samme mikroanimasjoner i gråtoner */
  #btnReset{
    transition: background-color 200ms ease-in-out, box-shadow 200ms ease-in-out, transform 200ms ease-in-out, filter 200ms ease-in-out;
    box-shadow: 0 1px 0 rgba(0,0,0,.15);
  }
  #btnReset:hover{
    background: color-mix(in srgb, #717171 88%, black);
  }
  #btnReset:active{
    background: color-mix(in srgb, #717171 76%, black);
    transform: translateY(1px) scale(0.99);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.2);
  }

  /* Redusert bevegelse: slå av overganger/transform for knapper */
  @media (prefers-reduced-motion: reduce){
    .btn,
    .btn-cta,
    #btnReset{
      transition: none !important;
      transform: none !important;
      filter: none !important;
    }
  }

  /* Lyse input-komponenter brukt i mobil CTA-flater */
  .input-cta{
    display:flex;
    width:100%;
    box-sizing:border-box;
    height:43px;
    padding:9px 25px 8px 25px;
    justify-content:center;
    align-items:center;
    border-radius:4px;
    background:#EEE;
    border:none;
    color:#0E0E0E;
    text-align:center;
    font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size:11px;
    font-style:normal;
    font-weight:600;
    line-height:normal;
    letter-spacing:.66px;
    text-transform:uppercase;
  }
  .input-cta::placeholder{
    color:#0E0E0E;
    opacity:1;
  }
  .input-cta:focus-visible{outline:none;box-shadow:var(--focus)}

  .select-cta{
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    height:53px;
    padding:9px 40px 8px 25px;
    border-radius:4px;
    background:#EEE;
    color:#0E0E0E;
    text-align:center;
    font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.66px;
    text-transform:uppercase;
    border:none;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    background-image:url('/images/ui/select-field-arraw.svg');
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:18px 18px;
  }
  .select-cta.w167{width:167px}
  .select-cta:focus-visible{outline:none;box-shadow:var(--focus)}

  /* Spesialvariant (mørk) for fields */
  .input-cta.alt{
    height:53px;
    flex-shrink:0;
    background:#1F1F1F;
    color:#B4B4B4;
    font-size:13px;
    font-weight:600;
    letter-spacing:.39px;
    text-transform:uppercase;
  }
  .input-cta.alt::placeholder{color:#B4B4B4;opacity:1}

  .select-cta.alt{
    height:53px;
    flex-shrink:0;
    background:#1F1F1F;
    color:#B4B4B4;
    font-size:13px;
    font-weight:600;
    letter-spacing:.39px;
    text-transform:uppercase;
    background-image:url('/images/ui/select-field-arraw-717171.svg');
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:18px 18px;
  }

  /* Auto-fylte felter (Topplister): Navn / Poeng / Font */
  .auto-field{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:34px; /* kompakt auto-felt i tråd med styleguide-eksempel */
    flex-shrink:0;
    border-radius:4px;
    border:1px solid #808080;
    background:#1F1F1F;
    color:#D2D2D2;
    text-align:center;
    font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size:12px;
    font-style:normal;
    font-weight:600;
    line-height:normal;
    letter-spacing:.36px;
    text-transform:uppercase;
  }

  /* Tekststiler */
  .txt-h1{
    color:#B4B4B4; text-align:center;
    font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size:20px; font-style:normal; font-weight:700; line-height:normal;
    letter-spacing:.4px; text-transform:uppercase;
  }
  .txt-name{
    color:#B4B4B4; text-align:center;
    font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size:11px; font-style:normal; font-weight:500; line-height:normal;
    letter-spacing:1.32px; text-transform:uppercase;
  }
  .txt-explain-header{
    color:#717171; text-align:center;
    font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size:12px; font-style:normal; font-weight:500; line-height:normal;
    letter-spacing:.96px; text-transform:uppercase;
  }
  .txt-link-new-password{
    color:#1F1F1F; text-align:center;
    font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size:11px; font-style:normal; font-weight:500; line-height:normal;
    letter-spacing:1.32px; text-transform:uppercase;
  }
  .txt-woohoo{
    color:#EEE; text-align:center;
    font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size:14px; font-style:normal; font-weight:800; line-height:22px;
    letter-spacing:.42px; text-transform:uppercase;
  }
  .txt-woohoo-num{
    color:#BC3219;
    font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size:14px; font-style:normal; font-weight:800; line-height:22px;
    letter-spacing:.7px; text-transform:uppercase;
  }
  .txt-dashboard-explain{
    color:#EEE; text-align:center;
    font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size:12px; font-style:normal; font-weight:600; line-height:22px;
    letter-spacing:.36px; text-transform:uppercase;
  }
  .txt-product-overview{
    color:#FFF;
    font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size:14px; font-style:normal; font-weight:700; line-height:19px;
    letter-spacing:.7px; text-transform:uppercase;
  }
  .txt-product-data{
    color:#888A8D;
    font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size:12.5px; font-style:normal; font-weight:600; line-height:normal;
    letter-spacing:.5px; text-transform:uppercase;
  }
  .txt-gratulerer{
    color:#EEE; text-align:center;
    font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size:17px; font-style:normal; font-weight:700; line-height:23px;
    letter-spacing:.68px; text-transform:uppercase;
  }
  .txt-gratulerer-sm{
    color:#EEE;
    font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size:14px; font-style:normal; font-weight:600; line-height:22px;
    letter-spacing:.42px; text-transform:uppercase;
  }
  .txt-rules-body{
    color:#EEE;
    font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size:14px; font-style:normal; font-weight:600; line-height:22px;
    letter-spacing:.42px; text-transform:uppercase;
  }
  .txt-rules-heading{
    color:#BC3219;
    font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size:14px; font-style:normal; font-weight:400; line-height:27px;
    letter-spacing:.56px;
  }
  .small.muted{
    display:flex;
    width:220px;
    height:26px;
    flex-direction:column;
    justify-content:center;
    flex-shrink:0;
    margin:0 auto;
    color:#0E0E0E;
    text-align:center;
    font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size:11px;
    font-style:normal;
    font-weight:600;
    line-height:normal;
    letter-spacing:1.76px;
    text-transform:uppercase;
  }

  /* Poeng Auto (spesialkomponent) */
  .poeng-auto{
    display:flex;
    width:106px;
    height:33px;
    padding:5px 5px;
    justify-content:center;
    align-items:center;
    gap:10px;
    border-radius:4px;
    background:#717171;
    color:#FFF;
    text-align:center;
    text-shadow:0 1px 1px rgba(0,0,0,0.05);
    font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size:13px; font-style:normal; font-weight:600; line-height:normal;
    letter-spacing:.84px; text-transform:uppercase;
  }

  /* KPI fliser */
  .kpi{
    display:flex; flex-direction:column;
    justify-content:center; align-items:center;
    width:165px; min-height:120px; padding:8px 10px; flex-shrink:0;
    border-radius:4px; background:#B4B4B4; text-align:center;
    gap:0; overflow:hidden;
  }
  .kpi .value{
    color:#1F1F1F; display:block;
    font-family:'Anek Bangla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size:83px; font-style:normal; font-weight:600; line-height:1;
    letter-spacing:-2.49px;
  }
  .kpi .small{
    color:#1F1F1F; display:block; margin-top:-5px; line-height:1;
    font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size:10px; font-style:normal; font-weight:700; line-height:normal;
    letter-spacing:.8px; text-transform:uppercase;
  }
  /* Inputs */
  .input, select, textarea{width:100%;padding:.75rem .875rem;border-radius:10px;border:1px solid #2a2c31;background:#0f1012;color:#f4f6f8;line-height:1.4}
  .input::placeholder{color:#9aa3ad}
  .input:focus-visible, select:focus-visible, textarea:focus-visible{outline:none;box-shadow:var(--focus);border-color:color-mix(in srgb, var(--brand) 60%, #2a2c31)}
  .input.invalid, select.invalid, textarea.invalid{border-color:var(--err)}
  .form-help{color:#9aa3ad;font-size:.875rem;margin-top:.375rem}
  .form-error{color:var(--err);font-size:.875rem;margin-top:.375rem}

  /* Cards */
  .card{background:#191a1e;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.25);padding:var(--sp-4)}
  .card.flat{box-shadow:none;border:1px solid #2a2c31}
  
  /* Kort & KPI (mørk variant for demo) */
  .kpi--dark{display:flex;flex-direction:column;gap:.25rem;padding:1rem;border-radius:12px;background:#191a1e}
  .kpi--dark .value{font-weight:800;font-size:1.5rem}
  .kpi--dark.ok{outline:1px solid var(--ok)}
  .kpi--dark.warn{outline:1px solid var(--warn)}
  .kpi--dark.err{outline:1px solid var(--err)}
  
  /* Grid utilities */
  .grid{display:grid;gap:var(--sp-4)}
  .grid-2{grid-template-columns:repeat(2, minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(3, minmax(0,1fr))}
  @media (max-width: 720px){
    .grid-2,.grid-3{grid-template-columns:1fr}
  }
  
  /* Bottom nav (mobile) – pill med ikoner */
  .bottom-nav{
    position:fixed; left:50%; transform:translateX(-50%); bottom:16px;
    display:flex; width:298px; height:56px; padding:5px 5px 6px; flex-direction:column;
    justify-content:center; align-items:center; gap:10px; flex-shrink:0;
    border-radius:50px; background:#434343;
  }
  .bottom-nav ul{
    display:flex; list-style:none; margin:0; padding:0; gap:0;
    justify-content:space-between; align-items:center; width:100%;
  }
  .bottom-nav a{
    display:flex; width:46px; height:46px; flex-shrink:0; border-radius:12px; padding:0;
    align-items:center; justify-content:center; text-indent:-9999px; overflow:hidden;
    background-repeat:no-repeat; background-position:center; background-size:46px 46px;
  }
  /* Smooth icon crossfade: base shows OFF as background-image; ::after holds ON icon and fades opacity */
  .bottom-nav a{ position: relative; }
  .bottom-nav a::after{
    content:""; position:absolute; inset:0; background-repeat:no-repeat; background-position:center; background-size:46px 46px;
    background-image: var(--nav-on, none); opacity:0; transition: opacity 200ms ease-in-out;
  }
  .bottom-nav a:hover::after,
  .bottom-nav a:focus-visible::after,
  .bottom-nav a[aria-current="page"]::after{ opacity:1; }
  /* Ikonbindinger (OFF som default) */
  /* Mobile: bind off/on via CSS-variabler og bruk ::after for smooth fade */
  .bottom-nav a.nav-dashboard{ --nav-off:url('/images/icons/Icon-desktop-off.svg'); --nav-on:url('/images/icons/Icon-desktop-on.svg'); background-image:var(--nav-off); }
  .bottom-nav a.nav-products{ --nav-off:url('/images/icons/Icon-produkt-off.svg'); --nav-on:url('/images/icons/Icon-produkt-on.svg'); background-image:var(--nav-off); }
  .bottom-nav a.nav-rules{ --nav-off:url('/images/icons/Icon-roles-off.svg'); --nav-on:url('/images/icons/Icon-roles-on.svg'); background-image:var(--nav-off); }
  .bottom-nav a.nav-competition{ --nav-off:url('/images/icons/Icon-price-off.svg'); --nav-on:url('/images/icons/Icon-price-on.svg'); background-image:var(--nav-off); }
  .bottom-nav a.nav-exit{ --nav-off:url('/images/icons/Icon-exit-off.svg'); --nav-on:url('/images/icons/Icon-exit-on.svg'); background-image:var(--nav-off); }
  
  /* Accessibility */
  :focus{outline:2px solid transparent}
  :focus-visible{outline:2px solid color-mix(in srgb, var(--brand) 70%, white);outline-offset:2px}

  /* Global override: Deaktiver hover-effekt på alle tabellrader */
  table tr:hover,
  table tr:hover > td,
  table tr:hover > th {
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    filter: none !important;
    outline: none !important;
  }
  /* Fjern overganger på celler for å unngå visuelle hover-endringer */
  table td,
  table th {
    transition: none !important;
  }

  /* Desktop: ny variant av mobil nav (kun farger/størrelse) */
  @media (min-width: 1024px){
    .bottom-nav{
      /* Desktop-posisjon: venstre 63px, bunn 49px */
      position:fixed;
      left:63px;
      bottom:49px;
      transform:none;
      display:flex;
      width:240px;
      height:56px;
      padding:5px 7px;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      gap:10px;
      flex-shrink:0;
      border-radius:50px;
      background:#C9C9C9;
    }
    /* Desktop-ikoner: bind OFF/ON via variabler; ::after håndterer fade */
    .bottom-nav a.nav-dashboard{ --nav-off:url('/images/icons/Desktop-Icon-desktop-off.svg'); --nav-on:url('/images/icons/Desktop-Icon-desktop-on.svg'); background-image:var(--nav-off); }
    .bottom-nav a.nav-products{ --nav-off:url('/images/icons/Desktop-Icon-produkt-off.svg'); --nav-on:url('/images/icons/Desktop-Icon-produkt-on.svg'); background-image:var(--nav-off); }
    .bottom-nav a.nav-exit{ --nav-off:url('/images/icons/Desktop-Icon-exit-off.svg'); --nav-on:url('/images/icons/Desktop-Icon-exit-on.svg'); background-image:var(--nav-off); }
    .bottom-nav a.nav-user{ --nav-off:url('/images/icons/Desktop-Icon-user-off.svg'); --nav-on:url('/images/icons/Desktop-Icon-user-on.svg'); background-image:var(--nav-off); }
  }