/* ===== Under arbeid – layout, statusbar, knapper ===== */

.work-top {
  border: 1px solid var(--sep);
  border-radius: 14px;
  background: var(--surface);
  padding: 12px;
  margin-bottom: 14px;
}

/* Progress-stav: mine (venstre), andre (høyre) */
.work-prog {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: #1f2937;
  overflow: hidden;
}
.work-prog .me {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 0%;
  background: #22c55e;
  z-index: 1;
}
.work-prog .other {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  left: auto;
  width: 0%;
  background: #a78bfa;
  opacity: .98;
  z-index: 2;
}
.work-caption {
  display: flex;
  justify-content: space-between;
  font-size: .95rem;
  color: var(--muted);
  margin-top: 8px;
}
.work-caption strong { color: var(--text); }

/* Kortet under: Nå/Neste/knapper */
.work-card {
  border: 1px solid var(--sep);
  border-radius: 14px;
  background: var(--surface);
  padding: 14px;
}

.label-muted { color: var(--muted); font-size: .9rem; }

.addr-now {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  margin-top: 4px;
}
.addr-next {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 4px;
  opacity: .9;
}

.btn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.btn-grid .btn { justify-content: center; }

.pulse { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%{transform:scale(1)} 50%{transform:scale(1.02)} 100%{transform:scale(1)} }

.work-meta {
  margin-top: 10px;
  font-size: .95rem;
  color: var(--muted);
}

@media (max-width: 420px){
  .addr-now{ font-size:1.2rem; }
  .addr-next{ font-size:1rem; }
}

/* ===== STORE KNAPPER PÅ UNDER ARBEID ===== */
#work .btn {
  min-height: 64px;
  padding: 16px 18px;
  font-size: 1.10rem;
  font-weight: 700;
  border-radius: 14px;
  justify-content: center;
}
#work .btn .ico {
  font-size: 1.25em;
  margin-right: 10px;
}
#work .btn-grid {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 420px) {
  #work .btn {
    min-height: 68px;
    font-size: 1.15rem;
  }
}

/* ===== STØRRE UNDER-KNAPPER – DOBBEL STØRRELSE ===== */
#work .btn-grid .btn {
  min-height: 120px;
  padding: 24px 28px;
  font-size: 1.5rem;
  font-weight: 800;
  border-radius: 18px;
  justify-content: center;
  text-transform: none;
  letter-spacing: 0.02em;
}
#work .btn-grid {
  gap: 20px;
  margin-top: 24px;
}
@media (max-width: 420px) {
  #work .btn-grid .btn {
    min-height: 130px;
    font-size: 1.45rem;
  }
}
/* ===== VISUELL TILBAKEMELDING PÅ START / FERDIG ===== */

/* Standardtilstand med liten skygge for dybde */
#work #act_start,
#work #act_done {
  transition: transform 0.1s ease-out, box-shadow 0.2s ease-in-out;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}

/* Trykkrespons – animasjon og kort glow */
#work #act_start:active,
#work #act_done:active {
  transform: scale(0.95);
  box-shadow: 0 0 15px rgba(255,255,255,0.25);
}

/* Etter trykk – pulser kort grønt eller blått for feedback */
#work #act_start.clicked,
#work #act_done.clicked {
  animation: pulseFeedback 0.5s ease-out;
}

@keyframes pulseFeedback {
  0%   { box-shadow: 0 0 0 rgba(0,0,0,0); transform: scale(1); }
  25%  { box-shadow: 0 0 20px rgba(59,130,246,0.6); transform: scale(1.05); }
  50%  { box-shadow: 0 0 10px rgba(59,130,246,0.4); transform: scale(0.98); }
  100% { box-shadow: 0 0 0 rgba(0,0,0,0); transform: scale(1); }
}

/* --- Halv høyde på alle unntatt Start og Ferdig --- */
#act_skip, #act_next, #act_nav, #act_block, #act_map, #act_incident {
  min-height: 60px !important;
  padding: 12px 14px !important;
  font-size: 1.2rem !important;
}

/* Sørg for at Start og Ferdig beholder full høyde */
#act_start, #act_done {
  min-height: 120px !important;
  padding: 18px 20px !important;
  font-size: 1.6rem !important;
}
/* Behold fargene på Start/Ferdig selv om klasser mangler */
#act_start { background: var(--ok) !important; color: #fff !important; }
#act_done  { background: #111827 !important; color: #fff !important; }

/* Farger for Kart og Uhell */
#act_map {
  background: #0d9488 !important;   /* turkis / grønnblå – skiller seg fra blå */
  color: #fff !important;
}

#act_incident {
  background: #facc15 !important;   /* gul (samme som Tailwind yellow-400) */
  color: #111 !important;           /* mørk tekst for kontrast */
}

/* Skjul (nye) Kart-knappen helt */
#act_map { display: none !important; }

/* Brøytekart – bruk samme baseknapp-stil + vår farge og halv høyde */
#btnBroytKart, #btnMap {
  display: block !important;
  visibility: visible !important;
  background: #0d9488 !important;   /* turkis/grønnblå */
  color: #fff !important;
  min-height: 60px !important;      /* halv høyde */
  padding: 12px 14px !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;      /* samme “tyngde” som .btn */
  border-radius: 10px !important;
}

/* --- Under arbeid: konsistente knapper --- */

/* Skjul (nye) Kart-knappen helt */
#act_map { 
  display: none !important;
}

/* Uhell – gul varselknapp */
#act_incident {
  background: #facc15 !important;   /* gul */
  color: #111 !important;           /* mørk tekst for kontrast */
}

/* Brøytekart – turkis/grønnblå, samme stil som øvrige knapper */
#btnBroytKart, #btnMap {
  display: block !important;
  visibility: visible !important;
  background: #0d9488 !important;   /* turkis / grønnblå */
  color: #fff !important;
  min-height: 60px !important;      /* halv høyde */
  padding: 12px 14px !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
}

/* Halv høyde på alle unntatt Start/Ferdig */
#act_skip, #act_next, #act_nav, #act_block, #act_incident {
  min-height: 60px !important;
  padding: 12px 14px !important;
  font-size: 1.2rem !important;
}

/* Full høyde på Start og Ferdig */
#act_start, #act_done {
  min-height: 120px !important;
  padding: 18px 20px !important;
  font-size: 1.6rem !important;
}

/* Behold farger på Start/Ferdig uansett klasser */
#act_start { background: var(--ok) !important; color: #fff !important; }
#act_done  { background: #111827 !important;   color: #fff !important; }

#act_incident {
  width: 100% !important;
  grid-column: span 1 !important;
}
#btnBroytKart {
  width: 100% !important;
  grid-column: span 1 !important;
}
/* Skyv knappene mot venstre i "Under arbeid"-seksjonen */
#work .work-card {
  text-align: left;
}

/* Pass på at knappene beholder riktig spacing */
#work button {
  display: inline-block;
  margin-right: 6px;
  margin-bottom: 6px;
}
/* Skyv bare knappene mot venstre og stram sammen høyden */
#work .btn-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;   /* venstre-juster kun knapperaden */
  gap: 6px 8px;                  /* vertikal 6px, horisontal 8px */
}

/* Fjern ekstra margin rundt enkeltknapper inne i grid’en */
#work .btn-grid > * {
  margin: 0;
}

/* Valgfritt: litt tettere padding hvis du vil ha enda mindre høyde */
#work .btn-grid button {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.2;
}

/* --- KNAPPEREKKE: 2 kolonner, faste størrelser --- */
#work .btn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 kolonner med lik bredde */
  gap: 6px 8px;
  justify-items: stretch; /* fyll hele bredden */
}

/* Store knapper: Start + Ferdig */
#work .btn-grid button:nth-child(-n+2) {
  height: 90px;              /* stor høyde */
  font-size: 1.2em;          /* større tekst */
  font-weight: 600;
}

/* Alle andre knapper: halv høyde, samme bredde */
#work .btn-grid button:nth-child(n+3) {
  height: 45px;              /* halvparten av store */
  font-size: 1em;
  font-weight: 500;
}

/* Fjern standard margin */
#work .btn-grid button {
  width: 100%;
  margin: 0;
  line-height: 1.2;
  padding: 0;
  border-radius: 12px;
}