:root{color-scheme:dark;--bg:#0f1115;--panel:#15181d;--panel2:#101318;--text:#f5f5f5;--muted:#c9c9c9;--line:#2d333b;--blue:#0f5bc9;--blue2:#0d47a1;--input:#1a1d22;--danger:#ffb4b4;--ok:#b7f7c9}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;font-size:16px}section,#appSide{max-width:1060px;margin:0 auto;padding:20px}.skjult,.hidden{display:none!important}.kort,.panel,.card,section>div[id$='Side'],#topbar,#handTopbar{background:var(--panel);border-radius:12px;padding:18px;margin:16px 0;box-shadow:0 1px 8px rgba(0,0,0,.35)}h1,h2,h3{color:var(--text);margin-top:0}p,label,span,td,th{color:var(--text)}small,.muted{color:var(--muted)}button,.knapp{background:var(--blue);color:#fff;border:0;border-radius:8px;padding:10px 16px;margin:4px;cursor:pointer;font-size:15px}button:hover,.knapp:hover{background:var(--blue2)}button.secondary{background:#444}input,select,textarea{background:var(--input);color:var(--text);border:1px solid #5d6470;border-radius:8px;padding:10px 12px;font-size:16px;max-width:100%}select{width:100%}label{display:block;font-weight:700;margin:12px 0 6px}table{width:100%;border-collapse:collapse;margin-top:12px}th,td{border-bottom:1px solid var(--line);padding:8px;text-align:left}.melding,#fakturaMelding,#modulMelding,#modulStatus,#handKundelisteStatus{margin-top:10px;color:var(--muted);white-space:pre-wrap}.rad,.button-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}#innloggetInfo{border:1px solid #31528b;border-radius:8px;padding:8px 12px;margin-bottom:8px;color:var(--text)}a{color:#8ab4ff}@media(max-width:700px){section,#appSide{padding:10px}button{width:100%;margin:4px 0}.rad,.button-row{display:block}}


/* Meny-fix */
.meny-gruppe{position:relative;display:inline-block;}
.meny-panel{display:none;position:absolute;top:100%;left:0;z-index:1000;min-width:220px;background:#15181d;border:1px solid #2d333b;border-radius:10px;padding:8px;}
.meny-gruppe.apen .meny-panel{display:block;}
.meny-panel button{display:block;width:100%;text-align:left;margin:4px 0;}


/* PROD: brede felt i registrer håndverker og bedre kundevelger */
.hand-systemadmin-form input,
.hand-systemadmin-form select,
.hand-systemadmin-form textarea,
#handSystemadminBlokk input,
#handSystemadminBlokk select,
#handSystemadminBlokk textarea{
  width:100%;
  max-width:760px;
  min-width:min(100%, 420px);
  display:block;
}

#handSystemadminBlokk label{
  max-width:760px;
}

#nyHandKundeLink,
#nyHandKundeLinknavn,
#nyHandKundeEpost,
#nyHandKundeNavn,
#nyHandKundeAdresse{
  width:100%;
  max-width:760px;
}

.hand-kunde-select,
#modulKundeVelger,
#fakturaKundeValg,
#okonomiKundeValg,
#kundeValg{
  width:100%;
  max-width:760px;
  min-width:min(100%, 360px);
  display:block;
}

.meny-panel{
  max-height:70vh;
  overflow-y:auto;
}

#handKundeAdminListe,
#kundeListe{
  max-height:70vh;
  overflow-y:auto;
  padding-right:6px;
}

@media (max-width:700px){
  .hand-systemadmin-form input,
  .hand-systemadmin-form select,
  .hand-systemadmin-form textarea,
  #handSystemadminBlokk input,
  #handSystemadminBlokk select,
  #handSystemadminBlokk textarea,
  .hand-kunde-select{
    min-width:0;
    max-width:100%;
  }
}



/* === TIMER SIDE CLEAN LAYOUT FIX 2026-06-21 === */
#timerSide.kort,
section#timerSide{
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#timerSide .rad{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px 12px !important;
  align-items: end !important;
  margin: 8px 0 10px !important;
}
#timerSide .timer-row-2{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
#timerSide .timer-row-bil{
  grid-template-columns: 1fr !important;
}
#timerSide .timer-row-vare{
  grid-template-columns: 2fr 0.8fr 1fr !important;
}
#timerSide .timer-row-utgift{
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
#timerSide label{
  margin: 8px 0 5px !important;
}
#timerSide input,
#timerSide select,
#timerSide textarea{
  width: 100% !important;
  max-width: none !important;
}
#timerSide textarea{
  min-height: 90px !important;
}
#timerSide #byttBilKnapp,
#timerSide #leggTilVarelinjeKnapp,
#timerSide #leggTilUtleggKnapp,
#timerSide #lagreTimerKnapp{
  width: auto !important;
}
@media (max-width: 800px){
  #timerSide .rad,
  #timerSide .timer-row-2,
  #timerSide .timer-row-vare,
  #timerSide .timer-row-utgift{
    grid-template-columns: 1fr !important;
  }
}

/* === KUNDER SIDE CLEAN LAYOUT FIX 2026-06-21 === */
#kundeSide.kort,
section#kundeSide{
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#kundeSide .kunde-form-grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 16px !important;
  align-items: end !important;
  max-width: 720px !important;
}
#kundeSide .felt{
  min-width: 0 !important;
}
#kundeSide label{
  margin: 8px 0 5px !important;
}
#kundeSide input,
#kundeSide select,
#kundeSide textarea{
  width: 100% !important;
  max-width: none !important;
  display: block !important;
}
#kundeSide textarea{
  min-height: 90px !important;
}
#kundeSide .kunde-knapperad{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  margin: 14px 0 10px !important;
}
#kundeSide .kunde-knapperad button{
  width: auto !important;
  margin: 0 !important;
}
#kundeSide .prosjekt-beskrivelse-felt{
  grid-column: 1 / -1 !important;
}
#kundeSide #kundeListe{
  margin-top: 16px !important;
}
@media (max-width: 800px){
  #kundeSide .kunde-form-grid{
    grid-template-columns: 1fr !important;
  }
  #kundeSide .kunde-knapperad button{
    width: 100% !important;
  }
}

/* Sentrer toppoverskriften */
#handSideOverskrift {
  text-align: center;
  width: 100%;
}

/* FIX: Midtstill overskriften inne i hver innholdsboks, f.eks. "Registrer timer" */
section.kort > h2:first-child,
.kort > h2:first-child,
.panel > h2:first-child,
.card > h2:first-child {
  text-align: center !important;
  width: 100%;
  display: block;
}

#timerSide > h2, #bilerSide > h2 { text-align: center !important; width: 100%; }


/* Firma-side bredere felter */
#firmaSide {
    max-width: 900px !important;
    margin: 0 auto !important;
}

#firmaSide input,
#firmaSide textarea,
#firmaSide select {
    width: 100% !important;
    max-width: none !important;
    display: block;
}


/* Fravær - bredt kommentarfelt */
#fravaerSide textarea,
#fravaerKommentar,
textarea[name="kommentar"]{
  width:100% !important;
  max-width:none !important;
  min-height:100px !important;
  display:block;
}


/* PROD 7069: Større og stabile felter i Varer-skjema */
#varerSide .rad{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;align-items:end;}
#varerSide input,#varerSide textarea,#varerSide select{width:100%;max-width:none;box-sizing:border-box;}
#varerSide textarea{min-height:74px;}
#vareMelding:empty{display:none;}

/* PROD 7069: demp blinking fra oppstarts- og rollejusteringer */
html:not(.ril-role-ready) #handTopbarKort{visibility:hidden;}
#appSide.ril-starter > section:not(#handTopbarKort){display:none!important;}


/* RIL trygg login-stil v1 */
#loginSide,
#nyttPassordSide{
  max-width:430px;
  margin:7vh auto;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,#151c28,#101722);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  padding:32px;
}
#loginSide h1,
#nyttPassordSide h2{text-align:center;margin-top:0;}
#loginSide input[type="email"],
#loginSide input[type="password"],
#nyttPassordSide input[type="password"]{width:100%;}
#loginKnapp,
#lagreNyttPassordKnapp{width:100%;margin-top:14px;font-weight:700;}
#glemtPassordKnapp,
#tilbakeTilLoginKnapp{width:100%;}

/* === RIL HANDVERKER: lik kortbredde i appen 2026-07-05 ===
   Gjør toppkortet like bredt som innholdskortene og sentrerer de vanligste modulene.
   Dette er kun layout/CSS og endrer ikke login- eller app-logikk. */
:root{
  --hand-card-width: 760px;
  --hand-wide-card-width: 900px;
}

#handTopbarKort,
#timerSide,
#jobberSide,
#fravaerSide,
#bilerSide,
#varerSide,
#kundeSide,
#kunderSide,
#tilbudSide,
#fakturaSide,
#ansattSide,
#ansatteSide,
#lonnPanel,
#lonnSide,
#modulerSide,
#testSide,
#testpanelSide{
  width: 100% !important;
  max-width: var(--hand-card-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#firmaSide,
#adminSide,
#sysadminPanelSide,
#handSystemadminBlokk,
#adminKonsollSide{
  width: 100% !important;
  max-width: var(--hand-wide-card-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#handTopbarKort .topplinje{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

#handTopbarKort button,
#handTopbarKort .knapp,
#handTopbarKort a[role="button"]{
  margin: 0 !important;
}

#handTopbarKort #loggUtKnapp{
  margin-left: auto !important;
}

@media (max-width: 820px){
  #handTopbarKort,
  #timerSide,
  #jobberSide,
  #fravaerSide,
  #bilerSide,
  #varerSide,
  #kundeSide,
  #kunderSide,
  #tilbudSide,
  #fakturaSide,
  #ansattSide,
  #ansatteSide,
  #lonnPanel,
  #lonnSide,
  #modulerSide,
  #testSide,
  #testpanelSide,
  #firmaSide,
  #adminSide,
  #sysadminPanelSide,
  #handSystemadminBlokk,
  #adminKonsollSide{
    max-width: 100% !important;
  }

  #handTopbarKort #loggUtKnapp{
    margin-left: 0 !important;
  }
}