/* ============================================================
   Greida Montør – appen montørene har på telefonen.
   Laget for bruk i bilen: store knapper, høy kontrast (leses i sol),
   ett tydelig neste steg, og alt virker uten dekning.
   ============================================================ */
:root{
  --ink:#1b1e1b; --mut:#5f645f; --linje:#0000001a; --flate:#f4f5f2; --kort:#fff;
  --gronn:#1b7a4b; --gronn2:#22995e; --gronn-l:#e5f5ec; --blaa:#1c5f92; --blaa-l:#e8f1fa;
  --rod:#b3401f; --rod-l:#fbece7; --oransje:#a2530c; --oransje-l:#fdf0e3; --gul-l:#fdf4e1;
  --topp:#1b1e1b; --r:18px;
  --sikker-b:env(safe-area-inset-bottom, 0px); --sikker-t:env(safe-area-inset-top, 0px);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--flate);color:var(--ink)}
body{font:17px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;min-height:100vh;padding-bottom:calc(24px + var(--sikker-b))}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit}
:focus-visible{outline:3px solid var(--gronn2);outline-offset:2px}

/* --- Testmodus og toppfelt --- */
.testlinje{display:flex;align-items:center;justify-content:space-between;gap:.6rem;background:#E0A83A;color:#1b1e1b;padding:calc(.35rem + var(--sikker-t)) 16px .35rem;font-size:.8rem;font-weight:700}
.testlinje label{display:flex;align-items:center;gap:.4rem;white-space:nowrap}
.testlinje select{font-size:.85rem;font-weight:600;background:#1b1e1b;color:#fff;border:0;border-radius:99px;padding:.3rem .6rem;max-width:50vw;min-width:0}
.topp{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.6rem;background:var(--topp);color:#F4F5F2;padding:calc(.55rem + var(--sikker-t)) 12px .55rem 16px;min-height:56px}
.testlinje:not([hidden]) + .topp{padding-top:.55rem}
.logo{font-weight:600;font-size:1.25rem;letter-spacing:-.03em}
.logo span{color:#2EB873}
.topp-tittel{font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;opacity:.65;font-weight:700}
.nett{margin-left:auto;font-size:.76rem;display:flex;align-items:center;gap:.35rem;opacity:.9;text-align:right}
.nett::before{content:"";width:9px;height:9px;border-radius:50%;background:#2EB873;flex:none}
.nett.av::before{background:#E0A83A}
.nett.feil::before{background:#e0603a}
.topp-meny,.topp-tilbake{background:none;border:0;color:#fff;font-size:1.5rem;line-height:1;width:44px;height:44px;border-radius:12px;display:grid;place-items:center}
.topp-tilbake{font-size:2rem;margin-left:-8px}
.topp-meny:active,.topp-tilbake:active{background:#ffffff1a}

.app{max-width:640px;margin:0 auto;padding:14px 14px 0;outline:none}
.laster{padding:3rem 1rem;text-align:center;color:var(--mut)}

/* --- Felles --- */
.kort{background:var(--kort);border-radius:var(--r);padding:16px;box-shadow:0 1px 2px #0000000d,0 6px 24px #0000000a}
.stack{display:flex;flex-direction:column;gap:12px}
.mut{color:var(--mut)}
.liten{font-size:.85rem}
.lbl{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--mut)}
.knapp{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;min-height:56px;border-radius:16px;border:2px solid transparent;font-weight:700;font-size:1.05rem;padding:.6rem 1rem;text-align:center;text-decoration:none;line-height:1.2;transition:transform .05s}
.knapp:active{transform:scale(.98)}
.knapp small{display:block;font-weight:500;font-size:.78rem;opacity:.85}
.knapp.stor{min-height:68px;font-size:1.22rem}
.knapp.gronn{background:var(--gronn);color:#fff}
.knapp.hvit{background:#fff;border-color:#d5d9d5}
.knapp.blaa{background:var(--blaa-l);color:var(--blaa);border-color:#bcd6ee}
.knapp.rod{background:var(--rod-l);color:var(--rod);border-color:#f0c9bc}
.knapp.oransje{background:var(--oransje-l);color:var(--oransje);border-color:#f2d2ae}
.knapp.mork{background:var(--ink);color:#fff}
.knapp:disabled{opacity:.45}
.knapp.av{opacity:.5}
.rad{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rad3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.76rem;font-weight:800;border-radius:99px;padding:.22rem .6rem;white-space:nowrap}
.chip i{width:8px;height:8px;border-radius:50%}
.chip.vei{background:var(--blaa-l);color:var(--blaa)}
.chip.avvik{background:var(--rod-l);color:var(--rod)}
.chip.ny{background:#E0A83A;color:#1b1e1b}
.chip.neste{background:var(--gronn);color:#fff}
.chip.venter{background:#eee;color:#555}
.chip.test{background:#ece6f5;color:#5b3f86}
.obs.test{background:#ece6f5;color:#5b3f86;font-size:.9rem;margin-top:.2rem}
.lenke{background:none;border:0;color:var(--mut);text-decoration:underline;font-size:.92rem;padding:.5rem 0}
.obs{background:var(--rod-l);color:var(--rod);border-radius:12px;padding:.7rem .9rem;font-weight:600;font-size:.95rem}
.info{background:var(--gul-l);border:1px solid #E0A83A55;border-radius:14px;padding:.75rem .9rem;white-space:pre-line}
.tom{text-align:center;padding:2.2rem 1rem;color:var(--mut)}
.tom b{display:block;color:var(--ink);font-size:1.15rem;margin-bottom:.3rem}

/* --- Dagen --- */
.hei{display:flex;flex-direction:column;gap:.1rem;padding:2px 2px 0}
.hei b{font-size:1.3rem}
.hei span{color:var(--mut);font-size:.9rem}
.forvis{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--mut)}
.forvis select{font-size:.95rem;border:2px solid #d5d9d5;border-radius:12px;padding:.35rem .5rem;background:#fff;color:var(--ink);flex:1}
.dager{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none;margin:0 -14px;padding-inline:14px}
.dager::-webkit-scrollbar{display:none}
.dag{flex:none;border:2px solid #d5d9d5;background:#fff;border-radius:14px;padding:.4rem .75rem;font-weight:700;font-size:.9rem;display:flex;flex-direction:column;align-items:flex-start;min-width:74px}
.dag span{font-weight:500;font-size:.74rem;color:var(--mut)}
.dag.på{background:var(--ink);border-color:var(--ink);color:#fff}
.dag.på span{color:#ffffffb3}
.dag.varsel{border-color:#e0603a}
.fremdrift{display:flex;flex-direction:column;gap:.5rem}
.fremdrift .tall{display:flex;justify-content:space-between;align-items:baseline}
.fremdrift .tall b{font-size:1.5rem}
.spor{height:12px;border-radius:99px;background:#dde3dd;overflow:hidden}
.spor i{display:block;height:100%;background:var(--gronn2);border-radius:99px;transition:width .4s ease}
.stopp{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 12px;text-align:left;width:100%;border:0;background:var(--kort);border-radius:var(--r);padding:14px 14px 14px 12px;box-shadow:0 1px 2px #0000000d,0 6px 24px #0000000a;position:relative}
.stopp:active{background:#fafbf9}
.stopp .nr{grid-row:span 4;width:40px;height:40px;border-radius:12px;background:#eef0ec;display:grid;place-items:center;font-weight:800;font-size:1.05rem}
.stopp.neste{outline:3px solid var(--gronn2);outline-offset:-1px}
.stopp.neste .nr{background:var(--gronn);color:#fff}
.stopp.ferdig{opacity:.62}
.stopp.ferdig .nr{background:var(--gronn-l);color:var(--gronn)}
.stopp.kansellert{opacity:.5}
.stopp.kansellert .kunde{text-decoration:line-through}
.stopp .tid{font-size:.85rem;color:var(--mut);display:flex;justify-content:space-between;gap:.5rem;align-items:center}
.stopp .kunde{font-size:1.12rem;font-weight:800;line-height:1.25}
.stopp .adr{font-size:.95rem}
.stopp .varer{font-size:.85rem;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stopp .flagg{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.seksjon{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--mut);padding:10px 4px 0}

/* --- Ett oppdrag --- */
.hode{display:flex;flex-direction:column;gap:.35rem}
.hode .ordre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;color:var(--mut)}
.hode h1{font-size:1.6rem;line-height:1.15;letter-spacing:-.01em}
.hode .adr{font-size:1.05rem;text-align:left;background:none;border:0;padding:0;text-decoration:underline;text-decoration-color:#0003;text-underline-offset:3px}
.status-stor{align-self:flex-start;font-size:.85rem;font-weight:800;border-radius:99px;padding:.3rem .8rem;display:inline-flex;align-items:center;gap:.4rem}
.status-stor i{width:9px;height:9px;border-radius:50%}
.fakta{display:grid;grid-template-columns:auto 1fr;gap:.25rem .9rem;font-size:.95rem}
.fakta dt{color:var(--mut)}
.varer-liste{list-style:none;display:flex;flex-direction:column;gap:.35rem}
.varer-liste li{display:flex;gap:.6rem;align-items:baseline}
.varer-liste b{min-width:2.2rem;display:inline-block;text-align:right}
.handling.flat{position:static;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;margin:0}
.handling{position:sticky;bottom:calc(10px + var(--sikker-b));z-index:10;display:flex;flex-direction:column;gap:8px;padding:10px;margin:0 -4px;border-radius:22px;background:#f4f5f2ee;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ferdigboks{display:flex;flex-direction:column;gap:.35rem}
.ferdigboks b{font-size:1.1rem}
.bilder{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.bilder button{border:0;padding:0;background:#eee;border-radius:12px;overflow:hidden;aspect-ratio:1;position:relative}
.bilder img{width:100%;height:100%;object-fit:cover;display:block}
.bilder span{position:absolute;left:4px;bottom:4px;font-size:.66rem;font-weight:800;background:#000a;color:#fff;border-radius:6px;padding:.05rem .35rem}
.sign-vis{display:flex;align-items:center;gap:.8rem}
.sign-vis img{height:56px;background:#fff;border:1px solid var(--linje);border-radius:10px}
.historikk{list-style:none;display:flex;flex-direction:column;gap:.45rem;font-size:.9rem}
.historikk li{display:grid;grid-template-columns:52px 1fr;gap:.6rem}
.historikk .t{color:var(--mut);font-variant-numeric:tabular-nums}
.historikk em{display:block;font-style:normal;color:var(--mut)}
.historikk .angret{opacity:.5;text-decoration:line-through}

/* --- Ark (steg for steg nederst på skjermen) --- */
.ark-bak{position:fixed;inset:0;z-index:50;background:#0008;display:flex;align-items:flex-end;justify-content:center;animation:inn .15s ease}
.ark{background:var(--flate);width:100%;max-width:640px;max-height:94vh;overflow:auto;border-radius:24px 24px 0 0;padding:18px 16px calc(18px + var(--sikker-b));display:flex;flex-direction:column;gap:14px;animation:opp .2s ease}
@keyframes inn{from{opacity:0}to{opacity:1}}
@keyframes opp{from{transform:translateY(30px)}to{transform:none}}
.ark h2{font-size:1.35rem;line-height:1.2}
.ark .under{color:var(--mut);margin-top:.3rem}
.ark-topp{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.ark-lukk{background:#e5e8e4;border:0;border-radius:50%;width:40px;height:40px;font-size:1.3rem;flex:none}
.steg{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--gronn)}
.valg{display:grid;grid-template-columns:1fr;gap:10px}
.valg .knapp{min-height:64px;align-items:flex-start;text-align:left;padding-left:1.1rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{border:2px solid #d5d9d5;background:#fff;border-radius:99px;padding:.6rem 1rem;font-weight:700;font-size:.95rem;min-height:48px}
.chips button.på{background:var(--ink);border-color:var(--ink);color:#fff}
.felt{display:flex;flex-direction:column;gap:.35rem}
.felt textarea,.felt input{font-size:1.05rem;border:2px solid #d5d9d5;border-radius:14px;padding:.75rem .9rem;background:#fff;width:100%}
.felt textarea{min-height:96px;resize:vertical}
.felt textarea:focus,.felt input:focus{outline:none;border-color:var(--gronn2)}
.feil{background:var(--rod-l);color:var(--rod);border-radius:12px;padding:.65rem .9rem;font-weight:700}
.signatur{position:relative;background:#fff;border:2px dashed #b9beb9;border-radius:16px;height:210px;touch-action:none}
.signatur canvas{width:100%;height:100%;display:block;border-radius:14px;touch-action:none}
.signatur .strek{position:absolute;left:18px;right:18px;bottom:46px;border-bottom:1px solid #0003;pointer-events:none}
.signatur .hint{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:.8rem;color:var(--mut);pointer-events:none}
.bildeknapp{display:flex;align-items:center;gap:.8rem}
.menyliste{display:flex;flex-direction:column;gap:8px}
.menyliste .knapp{align-items:flex-start}
.fullbilde{position:fixed;inset:0;z-index:60;background:#000;display:flex;align-items:center;justify-content:center}
.fullbilde img{max-width:100%;max-height:100%}
.fullbilde button{position:absolute;top:calc(12px + var(--sikker-t));right:12px;background:#fffc;border:0;border-radius:50%;width:44px;height:44px;font-size:1.3rem}

/* --- Varsler --- */
.toast{position:fixed;left:50%;bottom:calc(20px + var(--sikker-b));transform:translateX(-50%);width:min(600px,calc(100vw - 28px));justify-content:space-between;z-index:70;background:#1b1e1b;color:#fff;border-radius:16px;padding:.7rem .8rem .7rem 1.1rem;display:flex;align-items:center;gap:.9rem;max-width:calc(100vw - 28px);box-shadow:0 10px 30px #0006;font-size:.95rem}
.toast.feil{background:#8f2f14}
.toast button{background:#fff;color:#1b1e1b;border:0;border-radius:99px;padding:.5rem .9rem;font-weight:800;min-height:40px}
.banner{background:var(--blaa-l);color:var(--blaa);border-radius:14px;padding:.7rem .9rem;font-size:.92rem;display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.banner.gul{background:var(--gul-l);color:#7a5410}
.banner button{background:var(--blaa);color:#fff;border:0;border-radius:99px;padding:.45rem .9rem;font-weight:700;white-space:nowrap}

/* --- Innlogging --- */
.login{max-width:420px;margin:8vh auto 0}
.login h1{font-size:1.5rem}
@media (min-width:700px){ .app{padding-top:22px} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }

/* --- Dag / Uke --- */
.hei-rad{display:flex;justify-content:space-between;align-items:center;gap:12px}
.hei-rad .hei{min-width:0}
.hei-rad .hei span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.visvalg{display:flex;flex:none;background:#e4e7e2;border-radius:14px;padding:3px}
.visvalg button{border:0;background:none;border-radius:11px;padding:.4rem .95rem;min-height:40px;font-weight:700;font-size:.92rem;color:var(--mut)}
.visvalg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px #00000024}
.tom .lenke{display:block;margin:.5rem auto 0}

/* --- Ukeplanen --- */
.ukenav{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:8px}
.ukenav .pil{width:48px;height:48px;border-radius:14px;border:2px solid #d5d9d5;background:#fff;font-size:1.7rem;line-height:1;display:grid;place-items:center;padding-bottom:3px}
.ukenav .pil:disabled{opacity:.35;cursor:default}
.ukenav .pil:not(:disabled):active{background:#fafbf9}
.ukenavn{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.25}
.ukenavn b{font-size:1.25rem}
.ukenavn span{font-size:.85rem;color:var(--mut)}
.lenke.tilbake-uke{align-self:center;padding:0;margin-top:-4px}
.ukesum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:12px 6px;text-align:center}
.ukesum div{display:flex;flex-direction:column;gap:.1rem;padding:0 4px}
.ukesum div + div{border-left:1px solid var(--linje)}
.ukesum b{font-size:1.45rem;line-height:1.2;font-variant-numeric:tabular-nums}
.ukesum span{font-size:.74rem;color:var(--mut);line-height:1.25}
.ukedag{background:var(--kort);border-radius:var(--r);box-shadow:0 1px 2px #0000000d,0 6px 24px #0000000a;overflow:hidden}
.ukedag.idag{outline:3px solid var(--gronn2);outline-offset:-1px}
.ukedag-h{display:flex;justify-content:space-between;align-items:center;gap:.6rem;width:100%;text-align:left;border:0;background:none;padding:12px 14px 6px;min-height:48px}
button.ukedag-h:active{background:#fafbf9}
.ukedag-navn{font-size:1rem;white-space:nowrap}
.ukedag-navn b{font-weight:800}
.ukedag.forbi .ukedag-navn{color:var(--mut)}
.ukedag-info{font-size:.8rem;font-weight:600;color:var(--mut);text-align:right;display:flex;align-items:center;gap:.25rem}
.pil-h{font-size:1.35rem;line-height:1;color:var(--ink);font-weight:500}
.chip.idag{background:var(--gronn);color:#fff;font-size:.66rem;padding:.12rem .45rem;vertical-align:2px;margin-left:.2rem}
.steder{padding:0 14px 8px;font-size:.82rem;color:var(--mut)}
.ukestopp{display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;border:0;border-top:1px solid var(--linje);background:none;padding:10px 14px;min-height:58px}
.ukestopp:active{background:#fafbf9}
.ukestopp .t{font-weight:800;font-size:.95rem;font-variant-numeric:tabular-nums}
.ukestopp .k{display:flex;flex-direction:column;min-width:0}
.ukestopp .k b{font-size:1rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ukestopp .k small{font-size:.8rem;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ukestopp .s{display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:112px;font-size:.74rem;font-weight:700;color:var(--mut);text-align:right;line-height:1.2}
.ukestopp .st{display:flex;align-items:baseline;gap:5px}
.ukestopp .st i{width:9px;height:9px;border-radius:50%;flex:none;transform:translateY(1px)}
.ukestopp .s em{font-style:normal}
.ukestopp.ferdig{opacity:.62}
.ukestopp.kansellert{opacity:.5}
.ukestopp.kansellert b{text-decoration:line-through}
.ukedag.ledig{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:10px 14px;background:transparent;box-shadow:none;border:1.5px dashed #d0d4cf}
.ukedag.ledig.idag{outline:0;border:2px solid var(--gronn2)}
.ukedag.ledig .mut{font-size:.85rem}
.ukehint{text-align:center;padding:2px 0 8px}
@media (max-width:360px){.visvalg button{padding:.4rem .7rem}.ukestopp{grid-template-columns:44px minmax(0,1fr) auto;gap:8px}}