/* =========================================================
   HÅNDVERKER - MOBILOPTIMALISERING
   Lagt til 2026-07-06
   Formål: bedre visning på telefon uten å endre app-logikk.
   ========================================================= */

:root{
  --hand-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --hand-mobile-radius: 16px;
  --hand-mobile-gap: 12px;
}

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  min-width: 0;
  overflow-x: hidden;
}

img, svg, canvas, video{
  max-width: 100%;
  height: auto;
}

input, select, textarea, button, .knapp{
  font: inherit;
}

textarea{
  resize: vertical;
}

#appSide{
  width: 100%;
}

.kort,
.panel,
.card,
section > div[id$='Side'],
#topbar,
#handTopbar{
  border: 1px solid rgba(255,255,255,.08);
}

/* Desktop/tablet: behold fleksibel layout, men unngå at brede elementer sprenger siden. */
.kort,
.panel,
.card,
.rad,
.button-row,
.meny-panel,
#vareListe,
#bilListe,
#bilLagerListe,
#bilLagerFyllListe,
#kundeListe,
#kunderListe,
#ansattListe,
#trekkListe,
#fravaerListe,
#fravaerGodkjenning,
#tilbudListe,
#tilbudLinjeListe,
#okonomiOversikt,
#okonomiDetalj,
#adminLagerbestillingerListe,
#mineLagerbestillingerListe,
#handKundeAdminListe{
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Tabeller skal aldri gi vannrett side-scroll på hele appen. */
table{
  min-width: 100%;
}

.table-scroll,
.tabell-scroll,
#vareListe,
#bilListe,
#bilLagerListe,
#bilLagerFyllListe,
#kundeListe,
#kunderListe,
#ansattListe,
#trekkListe,
#fravaerListe,
#fravaerGodkjenning,
#tilbudListe,
#tilbudLinjeListe,
#okonomiOversikt,
#okonomiDetalj{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 820px){
  :root{
    --hand-card-width: 100%;
    --hand-wide-card-width: 100%;
  }

  body{
    font-size: 16px;
    line-height: 1.45;
    background: #0d1015;
  }

  section,
  #appSide{
    max-width: none !important;
    padding: 8px !important;
    margin: 0 !important;
  }

  #loginSide,
  #nyttPassordSide{
    width: calc(100vw - 20px) !important;
    max-width: 430px !important;
    margin: 18px auto !important;
    padding: 22px 16px !important;
    border-radius: var(--hand-mobile-radius) !important;
  }

  .kort,
  .panel,
  .card,
  section > div[id$='Side'],
  #topbar,
  #handTopbar,
  #handTopbarKort,
  #timerSide,
  #jobberSide,
  #fravaerSide,
  #bilerSide,
  #varerSide,
  #kundeSide,
  #kunderSide,
  #tilbudSide,
  #fakturaSide,
  #ansattSide,
  #ansatteSide,
  #firmaSide,
  #lonnPanel,
  #lonnSide,
  #modulerSide,
  #testSide,
  #testpanelSide,
  #sysadminPanelSide,
  #handSystemadminBlokk,
  #adminKonsollSide,
  #backupSide,
  #bilBestillingerSide{
    width: 100% !important;
    max-width: none !important;
    margin: 8px 0 !important;
    padding: 14px !important;
    border-radius: var(--hand-mobile-radius) !important;
  }

  h1{
    font-size: clamp(1.45rem, 7vw, 2rem) !important;
    line-height: 1.12 !important;
    margin-bottom: 12px !important;
  }

  h2{
    font-size: clamp(1.25rem, 5.8vw, 1.65rem) !important;
    line-height: 1.18 !important;
    margin-bottom: 12px !important;
  }

  h3{
    font-size: 1.08rem !important;
    line-height: 1.22 !important;
  }

  p,
  .info,
  .melding,
  small,
  label{
    font-size: 0.98rem !important;
  }

  label{
    margin: 10px 0 5px !important;
  }

  input,
  select,
  textarea{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 12px 13px !important;
    border-radius: 12px !important;
  }

  textarea{
    min-height: 104px !important;
  }

  input[type="checkbox"],
  input[type="radio"]{
    width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    vertical-align: middle;
  }

  button,
  .knapp,
  a[role="button"]{
    width: 100% !important;
    min-height: 46px !important;
    margin: 5px 0 !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-weight: 700;
    text-align: center !important;
    touch-action: manipulation;
  }

  .secondary,
  button.secondary,
  a.secondary{
    background: #374151 !important;
  }

  .rad,
  .button-row,
  #timerSide .rad,
  #kundeSide .kunde-form-grid,
  #kundeSide .kunde-knapperad,
  #varerSide .rad,
  #bilSkjemaRad,
  #fravaerSide .rad,
  #tilbudSide .rad,
  #fakturaSide .rad,
  #ansattSide .rad,
  #firmaSide .rad{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--hand-mobile-gap) !important;
    align-items: stretch !important;
  }

  .rad > *,
  .button-row > *,
  #timerSide .rad > *,
  #varerSide .rad > *,
  #fravaerSide .rad > *,
  #tilbudSide .rad > *,
  #fakturaSide .rad > *,
  #ansattSide .rad > *{
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Toppbar: kompakt mobilmeny og trygg admin-dropdown. */
  #handTopbarKort{
    position: sticky;
    top: 0;
    z-index: 900;
    border-radius: 0 0 var(--hand-mobile-radius) var(--hand-mobile-radius) !important;
    margin-top: 0 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
  }

  #innloggetBrukerBoks,
  #innloggetInfo{
    font-size: .9rem !important;
    padding: 9px 10px !important;
    margin-bottom: 10px !important;
  }

  #handTopbarKort .topplinje{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  #handTopbarKort .topplinje > button,
  #handTopbarKort .topplinje > a,
  #handTopbarKort .topplinje > .meny-gruppe{
    width: 100% !important;
    margin: 0 !important;
  }

  #handTopbarKort #loggUtKnapp{
    grid-column: 1 / -1;
    margin-left: 0 !important;
    display: block !important;
  }

  .meny-gruppe{
    position: static !important;
  }

  .meny-panel{
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    top: auto !important;
    bottom: calc(10px + var(--hand-mobile-safe-bottom)) !important;
    width: auto !important;
    min-width: 0 !important;
    max-height: 72vh !important;
    overflow-y: auto !important;
    padding: 12px !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 60px rgba(0,0,0,.55) !important;
  }

  .meny-panel button{
    min-height: 44px !important;
    margin: 5px 0 !important;
    text-align: left !important;
  }

  .meny-panel .meny-overskrift{
    padding: 10px 4px 4px !important;
    font-size: .8rem !important;
    letter-spacing: .02em;
    text-transform: uppercase;
  }

  /* Lister og tabeller blir kortvennlige på mobil. */
  table,
  thead,
  tbody,
  tfoot,
  tr,
  th,
  td{
    display: block !important;
    width: 100% !important;
  }

  thead{
    display: none !important;
  }

  tr{
    margin: 10px 0 !important;
    padding: 10px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.03) !important;
  }

  th,
  td{
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    padding: 8px 2px !important;
    text-align: left !important;
  }

  tr > :last-child{
    border-bottom: 0 !important;
  }

  td:empty,
  th:empty{
    display: none !important;
  }

  td button,
  td .knapp,
  td a[role="button"]{
    margin-top: 6px !important;
  }

  details{
    border-radius: var(--hand-mobile-radius) !important;
  }

  summary{
    min-height: 46px;
    padding: 10px 4px;
    cursor: pointer;
    font-weight: 700;
  }

  #vareListe,
  #bilListe,
  #bilLagerListe,
  #bilLagerFyllListe,
  #kundeListe,
  #kunderListe,
  #ansattListe,
  #trekkListe,
  #fravaerListe,
  #fravaerGodkjenning,
  #tilbudListe,
  #tilbudLinjeListe,
  #okonomiOversikt,
  #okonomiDetalj,
  #adminLagerbestillingerListe,
  #mineLagerbestillingerListe,
  #handKundeAdminListe{
    max-height: none !important;
    overflow-x: hidden !important;
    padding-right: 0 !important;
  }

  /* Skjemaer som bruker inline grid får én kolonne på telefon. */
  [style*="grid-template-columns"],
  [style*="display:grid"],
  [style*="display: grid"]{
    max-width: 100% !important;
  }

  #bilSkjemaRad,
  #timerSide .timer-row-vare,
  #timerSide .timer-row-utgift,
  #timerSide .timer-row-2{
    grid-template-columns: 1fr !important;
  }

  #timerSide #byttBilKnapp,
  #timerSide #leggTilVarelinjeKnapp,
  #timerSide #leggTilUtleggKnapp,
  #timerSide #lagreTimerKnapp,
  #kundeSide .kunde-knapperad button{
    width: 100% !important;
  }

  /* Lange tekstverdier, e-post, lenker og varenavn brytes pent. */
  a,
  code,
  pre,
  .melding,
  .info,
  td,
  th{
    overflow-wrap: anywhere !important;
    word-break: break-word;
  }

  pre{
    white-space: pre-wrap;
  }
}

@media (max-width: 430px){
  section,
  #appSide{
    padding: 6px !important;
  }

  .kort,
  .panel,
  .card,
  #handTopbarKort,
  #timerSide,
  #jobberSide,
  #fravaerSide,
  #bilerSide,
  #varerSide,
  #kundeSide,
  #kunderSide,
  #tilbudSide,
  #fakturaSide,
  #ansattSide,
  #ansatteSide,
  #firmaSide,
  #lonnPanel,
  #lonnSide,
  #modulerSide,
  #testSide,
  #testpanelSide,
  #sysadminPanelSide,
  #handSystemadminBlokk,
  #adminKonsollSide,
  #backupSide,
  #bilBestillingerSide{
    padding: 12px !important;
  }

  #handTopbarKort .topplinje{
    grid-template-columns: 1fr !important;
  }

  input,
  select,
  textarea,
  button,
  .knapp,
  a[role="button"]{
    min-height: 48px !important;
  }
}

@media (hover: none) and (pointer: coarse){
  button:hover,
  .knapp:hover{
    filter: none;
  }
}