:root{
  --navy:#0A2342; --navy-2:#123A63; --navy-3:#1D4E80; --teal:#17B3A3; --teal-d:#0B7A70; --teal-l:#E3F6F3;
  --bg:#F2F5F8; --card:#fff; --line:#D6DEE7; --text:#0F1E2E; --muted:#56687B;
  --ok:#157347; --ok-bg:#E3F4EA; --warn:#8A5A00; --warn-bg:#FFF3D6; --err:#B42318; --err-bg:#FDECEA; --info:#1D4E80; --info-bg:#E6EEF8;
  --r:10px; --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 var(--font);-webkit-text-size-adjust:100%}
a{color:var(--navy-3)} a:hover{color:var(--teal-d)}
h1{font-size:1.6rem;line-height:1.2;margin:.2rem 0 1rem;color:var(--navy);letter-spacing:-.01em}
h2{font-size:1.1rem;margin:0 0 .6rem;color:var(--navy)} h3{font-size:.95rem;margin:1rem 0 .4rem;color:var(--navy-2)}
.sec-h{margin:1.6rem 0 .6rem}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.small{font-size:.86rem}.muted{color:var(--muted)}.pre{white-space:pre-wrap}
.warn-t{color:var(--warn)}.err-t{color:var(--err)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Layout – kontor */
body.office{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{background:var(--navy);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:1.1rem 0}
.side .brand{padding:0 1.2rem 1.2rem;font-weight:700;font-size:1.15rem;letter-spacing:.01em;border-bottom:1px solid rgba(255,255,255,.12)}
.brand small{display:block;font-weight:400;font-size:.8rem;opacity:.75}
.side nav{display:flex;flex-direction:column;padding:.6rem 0;flex:1;overflow:hidden;min-height:0}
.side nav a{color:#D9E4F0;text-decoration:none;padding:.62rem 1.2rem;border-left:4px solid transparent}
.side nav a:hover{background:var(--navy-2);color:#fff}
.side nav a.on{background:var(--navy-2);color:#fff;border-left-color:var(--teal);font-weight:600}
.me{padding:1rem 1.2rem;border-top:1px solid rgba(255,255,255,.12);font-size:.88rem;display:flex;flex-direction:column;gap:.1rem}
.me span{opacity:.75}.me .linkbtn{color:var(--teal);padding:0;margin-top:.3rem}
.main{padding:1.2rem 2rem 3rem;min-width:0;max-width:1400px}
.pilot{background:var(--navy-2);color:#fff;font-size:.82rem;padding:.4rem .8rem;border-radius:6px;margin-bottom:1rem;border-left:4px solid var(--teal)}

/* Layout – skipper og kunde */
body.simple .top{background:var(--navy);color:#fff;position:sticky;top:0;z-index:5;padding-top:env(safe-area-inset-top)}
.top-in{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1rem;max-width:960px;margin:0 auto}
.top .brand{color:#fff;text-decoration:none;font-weight:700;font-size:1.1rem}
.m-only{display:none}
.top-me{display:flex;gap:.7rem;align-items:center;font-size:.9rem}.top-me .linkbtn{color:var(--teal)}
.topnav{display:flex;gap:.2rem;overflow-x:auto;max-width:960px;margin:0 auto;padding:0 .6rem}
.topnav a{color:#D9E4F0;text-decoration:none;padding:.6rem .8rem;white-space:nowrap;border-bottom:3px solid transparent}
.topnav a.on{color:#fff;border-bottom-color:var(--teal);font-weight:600}
.narrow{max-width:960px;margin:0 auto;padding:1rem 1rem 6rem}

/* Komponenter */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;margin-bottom:1rem}
.card.inset{background:var(--bg)}
.card.hl{border-color:var(--teal);box-shadow:inset 4px 0 0 var(--teal)}
details.card>summary{cursor:pointer;font-weight:600;color:var(--navy)}
details>summary{cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font:inherit;font-weight:600;border:1px solid var(--navy-3);background:#fff;color:var(--navy);padding:.55rem 1rem;border-radius:8px;cursor:pointer;text-decoration:none;min-height:42px}
.btn:hover{background:var(--teal-l)}
.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}.btn.primary:hover{background:var(--navy-2)}
.btn.danger{border-color:var(--err);color:var(--err)}.btn.danger:hover{background:var(--err-bg)}
.btn.sm{padding:.3rem .65rem;min-height:34px;font-size:.88rem}
.btn.big{min-height:52px;font-size:1.05rem;padding:.7rem 1.2rem}
.btn.huge{min-height:64px;font-size:1.2rem;width:100%;margin-bottom:1rem}
.btn.wide{width:100%}
.linkbtn{background:none;border:0;font:inherit;color:var(--navy-3);text-decoration:underline;cursor:pointer;padding:.2rem}
#pageDialog{border:0;border-radius:12px;padding:1.25rem;max-width:28rem;background:var(--card);color:var(--text);box-shadow:0 16px 48px rgba(10,35,66,.28)}
#pageDialog::backdrop{background:rgba(10,35,66,.45)}
#pageDialog p{margin:0 0 1rem}
#pageDialog form{display:flex;gap:.5rem;justify-content:flex-end}
#deviceQueue p{margin:.25rem 0}
.toolbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1rem}
form.inline{display:inline-flex;gap:.4rem;align-items:center;margin:0}
.stack{display:flex;flex-direction:column;gap:.7rem;margin:.5rem 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1rem}.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.7rem}
.grid2 .full{grid-column:1/-1}.actions{grid-column:1/-1}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
label{display:flex;flex-direction:column;gap:.25rem;font-weight:600;font-size:.9rem;color:var(--navy-2)}
label.chk{flex-direction:row;align-items:flex-start;gap:.5rem;font-weight:500;color:var(--text)}
label.chk input{width:22px;height:22px;flex:none;margin-top:.1rem}
input,select,textarea{font:inherit;font-weight:400;color:var(--text);border:1px solid #AFBCCA;border-radius:8px;padding:.55rem .65rem;background:#fff;min-height:44px;width:100%}
textarea{min-height:auto}
input:disabled,textarea:disabled,select:disabled{background:#EEF2F6;color:var(--muted)}
fieldset{border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column;gap:.4rem}
.cost-row{display:flex;flex-wrap:wrap;gap:.35rem .8rem;align-items:center}
.cost-row strong{min-width:8.5rem}
.w-price{width:8rem}.w-num{width:6rem}.w-unit{width:5rem}
fieldset .w-price{display:inline-block;margin:0 .3rem;min-height:36px;padding:.3rem .5rem}
.chip{display:inline-block;padding:.3rem .75rem;border:1px solid var(--line);border-radius:999px;background:#fff;text-decoration:none;color:var(--navy);font-size:.88rem}
.chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}

.badge{display:inline-block;font-size:.78rem;font-weight:700;padding:.15rem .55rem;border-radius:999px;white-space:nowrap;border:1px solid transparent;vertical-align:middle}
.b-neutral{background:#EDF1F5;color:#37485A;border-color:#CBD5E0}.b-info{background:var(--info-bg);color:var(--info)}
.b-warn{background:var(--warn-bg);color:var(--warn)}.b-ok{background:var(--ok-bg);color:var(--ok)}.b-danger{background:var(--err-bg);color:var(--err)}.b-muted{background:#F1F3F5;color:#6B7785}

.flash{padding:.7rem 1rem;border-radius:8px;margin-bottom:1rem;font-weight:500}
body.simple .flash{font-size:1.0625rem;line-height:1.4;padding:.9rem 1rem}
.crew-pick{display:flex;flex-direction:column;gap:.45rem}
.crew-pick label.chk{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.8rem .85rem;font-size:1.05rem}
.flash ul{margin:.3rem 0 0;padding-left:1.2rem;font-weight:400}
.flash-ok{background:var(--ok-bg);color:var(--ok);border:1px solid #A8D5B9}.flash-warn{background:var(--warn-bg);color:var(--warn);border:1px solid #E6C98A}.flash-error{background:var(--err-bg);color:var(--err);border:1px solid #F0B4AE}
.form-summary{background:var(--err-bg);color:var(--err);border:1px solid #F0B4AE;border-radius:8px;padding:.7rem 1rem;margin:0 0 .8rem}
.form-summary p{margin:0}.form-summary ul{margin:.35rem 0 0;padding-left:1.2rem}
.field-error{color:var(--err);font-size:.82rem;font-weight:500;margin:.2rem 0 0}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--err);background:var(--err-bg)}
fieldset.invalid{border-color:var(--err)}
form[data-form-error]{scroll-margin-top:1rem}
.note{background:var(--info-bg);border-radius:8px;padding:.6rem .8rem;margin:.6rem 0}
.note.warn{background:var(--warn-bg);color:#5C3D00}.note.ok{background:var(--ok-bg);color:#0F5132}.note.err{background:var(--err-bg);color:var(--err)}
.note.sim{background:#FFF;border:2px dashed var(--teal);color:var(--navy)}

table{width:100%;border-collapse:collapse;font-size:.93rem}
th,td{text-align:left;padding:.5rem .55rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.82rem;color:var(--muted);font-weight:600;background:#F7F9FB}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.card.tablewrap{padding:0}.card.tablewrap table{margin:0}
table.inv tr.sec th{background:var(--teal-l);color:var(--navy);font-size:.85rem}
table.inv tfoot td{font-weight:600;border-bottom:0}table.inv tr.grand td{font-size:1.05rem;border-top:2px solid var(--navy)}
table.lines input,table.lines select{min-height:38px;padding:.35rem .45rem}

.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.6rem 1rem;margin-bottom:.6rem}
.kv>div{display:flex;flex-direction:column}.kv span{font-size:.78rem;color:var(--muted);font-weight:600}
.cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:1rem;align-items:start}
.plain{list-style:none;padding:0;margin:0}.plain li{padding:.3rem 0;border-bottom:1px solid #EEF2F6}
.timeline{list-style:none;padding:0;margin:.4rem 0;font-size:.9rem}
.timeline li{padding:.45rem 0 .45rem .9rem;border-left:2px solid var(--line);position:relative}
.timeline li::before{content:"";position:absolute;left:-5px;top:.8rem;width:8px;height:8px;border-radius:50%;background:var(--teal)}
.timeline li.bad::before{background:var(--err)}
.timeline .t{display:block;font-size:.78rem;color:var(--muted)}.timeline .c{background:#F7F9FB;padding:.3rem .5rem;border-radius:6px;margin-top:.2rem}
.files{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.files a{display:flex;flex-direction:column;gap:.2rem;width:120px;font-size:.8rem;text-decoration:none;word-break:break-word}
.files img{width:120px;height:90px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}

/* Oversikt */
.dash{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.dcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1rem}
.dcard header{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.dcard h2{font-size:.98rem;margin:0}
.dcard .count{font-size:1.5rem;font-weight:800;color:var(--navy);text-decoration:none;min-width:2.2rem;text-align:right}
.dcard ul{list-style:none;padding:0;margin:.5rem 0 0}.dcard li{display:flex;flex-wrap:wrap;gap:.2rem .5rem;align-items:center;padding:.35rem 0;border-top:1px solid #EEF2F6;font-size:.9rem}
.dcard li span{color:var(--muted);font-size:.84rem}
.dcard.hl{border-top:4px solid var(--teal)}.dcard.err{border-top:4px solid var(--err)}
.dcard.money{background:var(--navy);color:#fff;border-color:var(--navy)}.dcard.money h2{color:#fff}.dcard.money .muted{color:#C7D6E6}
.big-num{font-size:1.9rem;font-weight:800;margin:.4rem 0 .1rem;font-variant-numeric:tabular-nums;color:var(--teal)}
.dcard.money .btn{margin-top:.5rem}

/* Kalender */
.cal-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.cal{display:grid;grid-template-columns:130px 1fr;min-width:900px}
.cal-boat{padding:.6rem .7rem;font-weight:700;border-bottom:1px solid var(--line);background:#F7F9FB;position:sticky;left:0;z-index:2;display:flex;align-items:center}
.cal-boat a{color:var(--navy);text-decoration:none}
.cal-boat.head,.cal-track.head{background:var(--navy);color:#fff}
.cal-track{display:grid;grid-auto-rows:minmax(46px,auto);border-bottom:1px solid var(--line);position:relative;padding:3px 0}
.cal-track.head{padding:0}
.cal-day{font-size:.75rem;text-align:center;padding:.35rem 0;line-height:1.15;border-left:1px solid rgba(255,255,255,.1)}
.cal-day span{display:block;opacity:.75}.cal-day.today{background:var(--teal);color:var(--navy);font-weight:700}
.cal-bg{border-left:1px solid #EEF2F6}.cal-bg.we{background:#F7F9FB}.cal-bg.today{background:var(--teal-l)}
.blk{margin:2px 2px;border-radius:6px;padding:.25rem .45rem;font-size:.76rem;line-height:1.25;text-decoration:none;color:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;z-index:1;display:flex;flex-direction:column;justify-content:center;min-width:0}
.blk strong,.blk span{overflow:hidden;text-overflow:ellipsis}
.blk:hover{filter:brightness(1.1);color:#fff}
.st-bekreftet{background:#6B84A3}.st-planlagt{background:var(--navy-3)}.st-pagar{background:var(--teal-d)}.st-arbeid_ferdig{background:#3E7C59}
.ovr{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.18) 0 6px,transparent 6px 12px);outline:2px solid var(--err)}
.legend{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0}.lg{color:#fff;padding:.1rem .5rem;border-radius:5px}.lg.ovr{color:var(--err);background-color:#fff}

/* Pipeline */
.pipeline{display:grid;grid-template-columns:repeat(5,minmax(180px,1fr));gap:.7rem;overflow-x:auto}
.pcol{background:#E9EEF3;border-radius:var(--r);padding:.6rem;min-height:120px}.pcol h3{margin:.1rem 0 .5rem}
.pcard{background:#fff;border-radius:8px;padding:.55rem;margin-bottom:.5rem;border:1px solid var(--line);font-size:.9rem}
.pcard form{margin-top:.4rem}.pcard select{min-height:34px;padding:.2rem .4rem;font-size:.85rem}
.agree{border-top:1px solid var(--line);padding:.6rem 0}

/* Dokument (tilbud/rapport) */
.doc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.5rem}
.doc-h{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-bottom:3px solid var(--navy);padding-bottom:.8rem;margin-bottom:1rem}
.doc-brand{font-size:1.3rem;font-weight:800;color:var(--navy)}
.doc-meta{display:flex;flex-direction:column;text-align:right;font-size:.9rem}
.doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

/* Mobil / skipper */
.mcard,.bigrow{display:flex;flex-direction:column;gap:.15rem;text-decoration:none;color:var(--text);padding:.85rem 1rem;border-radius:var(--r);background:#fff;border:1px solid var(--line);margin-bottom:.6rem;min-height:56px}
.bigrow span{color:var(--muted);font-size:.9rem}.bigrow .badge{align-self:flex-start;margin-top:.2rem}
.mcard{border-left:5px solid var(--teal)}.mcard-h{display:flex;justify-content:space-between;gap:.5rem;align-items:center;font-size:1.05rem}
.entry{border:1px solid var(--line);border-radius:8px;padding:.7rem;margin-bottom:.7rem;background:#FBFCFD;display:flex;flex-direction:column;gap:.6rem}
.entry-h{display:flex;justify-content:space-between;align-items:center}
.addrow{display:flex;gap:.5rem}.addrow select{flex:1}
.seg{display:flex;gap:.5rem;flex-wrap:wrap}.seg label{flex-direction:row;align-items:center;gap:.4rem;border:1px solid var(--line);border-radius:8px;padding:.6rem .8rem;font-weight:500;flex:1;min-width:150px}
.seg input{width:20px;height:20px;min-height:0}
.savestate{position:sticky;top:3.4rem;z-index:4;padding:.55rem .8rem;border-radius:8px;font-weight:600;margin-bottom:.8rem;background:#EDF1F5}
.savestate.err{background:var(--err-bg);color:var(--err)}
.savestate:empty{display:none}
.s-ok{background:var(--ok-bg);color:var(--ok)}.s-err{background:var(--err-bg);color:var(--err)}.s-busy{background:var(--info-bg);color:var(--info)}.s-dirty{background:var(--warn-bg);color:var(--warn)}
.sticky-actions{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;gap:.6rem;z-index:6}
.sticky-actions[hidden],body.send-open .sticky-actions{display:none !important}
.filebtn{position:relative;overflow:hidden}.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.portal-hero{margin-bottom:.5rem}.count-s{background:var(--teal);color:var(--navy);border-radius:999px;padding:0 .55rem;font-size:.9rem}
.decide{margin-top:1rem}

/* Innlogging */
body.bare{background:var(--navy)}
.login{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:2rem 1rem}
.login-card{background:#fff;border-radius:14px;padding:1.6rem;max-width:560px;width:100%}
.brand.big{font-size:1.6rem;font-weight:800;color:var(--navy);margin-bottom:1rem}.brand.big small{color:var(--muted);font-size:.9rem}
.demo-users{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.demo-user{width:100%;text-align:left;border:1px solid var(--line);background:#F7F9FB;border-radius:8px;padding:.6rem .7rem;cursor:pointer;font:inherit;display:flex;flex-direction:column;min-height:56px}
.demo-user:hover{border-color:var(--teal);background:var(--teal-l)}.demo-user span{font-size:.8rem;color:var(--muted)}
.qr{background:#fff;display:inline-block;padding:.4rem;border-radius:8px;margin:.4rem 0}
.qr svg{width:196px;height:auto;display:block}
.secret{font-family:ui-monospace,monospace;letter-spacing:.04em;width:100%}

/* Utskrift */
.printbar{display:flex;gap:.5rem;padding:1rem;justify-content:center;background:var(--navy)}
.print{max-width:900px;margin:1rem auto;padding:0 1rem}
body.bare .print .doc{border:0}
@media print{
  .noprint,.pilot,.side,.top,.sticky-actions{display:none!important}
  body,body.bare{background:#fff}.print{margin:0;max-width:none}.doc{border:0;padding:0}
  .tablewrap{overflow:visible}table{font-size:10pt}a{color:inherit;text-decoration:none}
}

@media (max-width:900px){
  body.office{display:block}
  .side{position:static;height:auto;padding:.6rem 0 0}
  .side .brand{padding:0 1rem .5rem;border:0}
  .side nav{flex-direction:row;overflow-x:auto;padding:0}
  .side nav a{white-space:nowrap;border-left:0;border-bottom:3px solid transparent;padding:.6rem .8rem}
  .side nav a.on{border-bottom-color:var(--teal)}
  .me{flex-direction:row;flex-wrap:wrap;gap:.6rem;align-items:center;padding:.5rem 1rem}
  .main{padding:1rem}
  .cols{grid-template-columns:1fr}
  .pipeline{grid-template-columns:repeat(5,200px)}
}
@media (max-width:600px){
  .top-me>span{display:none}.m-only{display:inline}.top-me .linkbtn{white-space:nowrap}
  .topnav a{padding:.6rem .55rem;font-size:.95rem}

  h1{font-size:1.35rem}
  .grid2,.doc-grid,.demo-users{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr 1fr}
  .doc{padding:1rem}.doc-meta{text-align:left}
  .kv{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Tabeller som blokker på smale skjermer: beløp og mengder skal alltid være synlige uten sidescroll. */
@media (max-width: 640px) {
  form.agreement-form, form.agreement-form .tablewrap { min-width: 0; max-width: 100%; overflow: visible; }
  form.agreement-form table.lines, form.agreement-form table.lines tbody, form.agreement-form table.lines tr, form.agreement-form table.lines td { display: block; width: auto; }
  form.agreement-form table.lines thead { display: none; }
  form.agreement-form table.lines tr { border: 1px solid var(--line); border-radius: 12px; padding: .55rem .7rem; margin: 0 0 .7rem; }
  form.agreement-form table.lines td { border: 0; padding: .35rem 0; }
  form.agreement-form table.lines td::before { content: attr(data-label); display: block; font-size: .78rem; font-weight: 700; color: var(--muted); }
  form.agreement-form .w-price, form.agreement-form .w-unit { width: 100%; }
  form.agreement-form select, form.agreement-form input, form.agreement-form textarea { max-width: 100%; min-width: 0; }
  form.agreement-form select.pick { width: 100%; max-width: calc(100vw - 2.5rem); }
  table.inv thead, table.work thead { display: none; }
  table.inv tbody tr:not(.sec) { display: grid; grid-template-columns: 1fr 1fr 1.3fr 1.4fr; gap: .15rem .5rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
  table.inv tbody tr:not(.sec) td { border: 0; padding: 0; }
  table.inv tbody tr:not(.sec) td:first-child { grid-column: 1 / -1; font-weight: 600; }
  table.inv tbody tr.sec, table.inv tbody tr.sec th { display: block; }
  table.inv td[data-l]::before, table.work td[data-l]::before { content: attr(data-l); display: block; font-size: .72rem; font-weight: 600; color: var(--muted); }
  table.inv tfoot tr { display: flex; justify-content: space-between; gap: 1rem; }
  table.inv tfoot td { padding: .4rem 0; }
  table.work tbody tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: .2rem .5rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
  table.work tbody td { border: 0; padding: 0; text-align: left; }
  table.work td.d { font-weight: 700; } table.work td.t { grid-column: 2 / -1; color: var(--muted); }
  table.work td.desc { grid-column: 1 / -1; }
}
@media (max-width: 640px) { table.work td.desc { order: 1; } table.work td.num { order: 2; } }
@media (max-width: 640px) {
  table.inv tfoot tr.grand { border-top: 2px solid var(--navy); }
  table.inv tfoot tr.grand td { border-top: 0; }
  table.inv tbody tr:not(.sec) td:first-child .small { font-weight: 400; }
}
@media (max-width: 640px) {
  table.inv, table.inv tbody, table.inv tfoot, table.work, table.work tbody { display: block; width: 100%; }
  table.inv tbody tr:not(.sec) { grid-template-columns: minmax(0, .8fr) minmax(0, .7fr) minmax(0, 1.25fr) minmax(0, 1.35fr); font-size: .88rem; }
  table.inv td.num { white-space: nowrap; }
  table.work tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  table.inv tbody tr:not(.sec) { grid-template-columns: auto auto minmax(0, 1fr) auto; gap: .15rem .35rem; align-items: baseline; }
  table.inv td[data-l]::before { content: none; }
  table.inv td[data-l="Pris eks. mva"] { text-align: left; color: var(--muted); }
  table.inv td[data-l="Pris eks. mva"]::before { content: "à "; display: inline; font: inherit; color: inherit; }
  table.inv td[data-l="Sum eks. mva"] { font-weight: 600; }
}
/* Megling */
.blk.prt{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.14) 0 6px,transparent 6px 12px);outline:2px dashed var(--teal);outline-offset:-2px}
.lg.prt{background:var(--navy-3);color:#fff;outline:2px dashed var(--teal);outline-offset:-2px}
.partner-box{border-left:4px solid var(--teal)}
.margin-row{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0;border-bottom:1px solid var(--line)}
.margin-row.total{font-weight:700;border-bottom:0;border-top:2px solid var(--navy)}
[hidden]{display:none !important}
.powered{display:block;margin-top:.8rem;font-size:.72rem;opacity:.6;letter-spacing:.02em}
.powered-foot{margin:2rem 0 1rem;text-align:center;font-size:.75rem;color:var(--muted)}
@media print{.powered,.powered-foot{display:none}}

/* ---------------------------------------------------------------- Hurtigregistrering (bromodus) */
body.bridge-mode{background:#0B1524;color:#E6EDF5}
body.bridge-mode main.narrow{max-width:1280px}
body.bridge-mode h1{color:#fff;font-size:1.25rem}
body.bridge-mode .note{background:#132238;color:#E6EDF5;border-color:#2A3E5C}
body.bridge-mode a{color:#5FD4C6}
.bridge-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;color:#A9B8CC}
.bridge-head strong{color:#fff;font-size:1.15rem;text-transform:uppercase;letter-spacing:.03em}
.sync{font-size:.85rem;padding:.3rem .7rem;border-radius:999px;background:#132238;color:#A9B8CC}
.sync.ok{color:#5FD4C6}.sync.off{color:#F2C14E}.sync.err{background:#4A1D1D;color:#FFD3D3}.sync.busy{color:#fff}
.bridge{display:grid;grid-template-columns:1fr 300px;gap:1.2rem;align-items:start}
.bridge-side{background:#132238;border-radius:12px;padding:1rem 1.1rem;position:sticky;top:1rem}
.bridge-side h3{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#8EA3BF;margin:.4rem 0 .6rem}
.sum-row{display:flex;justify-content:space-between;padding:.35rem 0;border-bottom:1px solid #22344F}
.act-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.9rem}
.act{min-height:128px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;gap:.4rem;padding:1rem;border-radius:12px;border:2px solid transparent;background:#17283F;color:#fff;cursor:pointer;font:inherit;touch-action:manipulation}
.act strong{font-size:1.1rem;letter-spacing:0;overflow-wrap:normal;max-width:100%}
.act span{color:#9FB2C9;font-size:.9rem}.act em{font-style:normal;color:#BFF5EC;font-variant-numeric:tabular-nums;min-height:1.2em}
.act:hover{background:#1D3150}.act:focus-visible{outline:3px solid #5FD4C6;outline-offset:2px}
.act.on{background:#0F4A3B;border-color:#2BD1B0}
.act.cat-standby{background:#1E2A3A}.act.cat-annet{background:#1A2230}
.act:disabled{opacity:.45;cursor:not-allowed}
.active-bar{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;background:#0F4A3B;border:2px solid #2BD1B0;border-radius:12px;padding:.8rem 1rem;margin-bottom:1rem}
.active-bar>div{display:flex;flex-direction:column;min-width:160px}.active-bar strong{font-size:1.1rem;text-transform:uppercase}
.active-bar .timer{font-variant-numeric:tabular-nums;font-size:1.4rem;color:#BFF5EC}
.active-bar input{flex:1;min-width:180px;background:#0B1524;color:#fff;border:1px solid #2A3E5C}
.fields{display:flex;gap:.8rem;flex-wrap:wrap;margin:1rem 0}
.field{display:flex;align-items:flex-end;gap:.4rem;background:#132238;padding:.6rem .8rem;border-radius:10px}
.field label{color:#A9B8CC;font-size:.85rem}.field input{background:#0B1524;color:#fff;border:1px solid #2A3E5C;width:7rem}
body.bridge-mode .sec-h{color:#8EA3BF;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.loglist{list-style:none;margin:0;padding:.4rem 1rem;background:#132238;border-radius:12px}
.loglist li{display:grid;grid-template-columns:3.5rem 1fr auto auto;gap:.8rem;align-items:baseline;padding:.55rem 0;border-bottom:1px solid #22344F}
.loglist li:last-child{border-bottom:0}.loglist small{display:block;color:#8EA3BF}
.tl-t{font-variant-numeric:tabular-nums;color:#A9B8CC}.tl-d{color:#A9B8CC;text-align:right;font-size:.9rem}
.loglist li.unsynced .tl-d{color:#F2C14E}.loglist li.locked{opacity:.65}
.tl-a .linkbtn{color:#5FD4C6;margin-left:.4rem}
body.bridge-mode .btn{background:#1D3150;color:#fff;border-color:#2A3E5C}
body.bridge-mode .btn.primary{background:#2BD1B0;color:#06231D;border-color:#2BD1B0}
@media (max-width: 860px){.bridge{grid-template-columns:1fr}.bridge-side{position:static}.act-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.act{min-height:104px;padding:.9rem}.act strong{font-size:1rem}
  .loglist li{grid-template-columns:3rem 1fr auto}.tl-a{grid-column:2/-1}}
/* Oppsett av arbeidsrapport */
.cfg-row{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:flex-end;padding:.7rem 0;border-top:1px solid var(--line)}
.cfg-row label{font-size:.82rem}.cfg-row.off{opacity:.55}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.8rem}
.tpl{border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;display:flex;flex-direction:column;gap:.3rem}
/* Båt ikke tilgjengelig */
.blk.oppdrag,.lg.oppdrag{background:var(--navy-3);color:#fff}
.blk.fri,.lg.fri{background:#3E5C78;color:#fff}
.blk.annet,.lg.annet{background:#6B7685;color:#fff}
.cal-boat.person{flex-direction:column;align-items:flex-start;justify-content:center;gap:.1rem}
form.inline{display:inline}
.blk.blocked{background:repeating-linear-gradient(135deg,#6B7685 0 8px,#5A6473 8px 16px);color:#fff}
.lg.blocked{background:repeating-linear-gradient(135deg,#6B7685 0 6px,#5A6473 6px 12px);color:#fff}
.blk.kontrakt,.lg.kontrakt{background:#6B4C1E;color:#fff}
.blk.tentativ,.lg.tentativ{background:repeating-linear-gradient(135deg,#d5e3ee 0 7px,#eef4f8 7px 14px);color:#1c3a52;outline:1px dashed #6d8aa3;outline-offset:-1px}
.blk.tentativ:hover{color:#1c3a52;filter:none}
.blk.tentativ.utlopt,.lg.utlopt{background:repeating-linear-gradient(135deg,#e4e4e4 0 7px,#f4f4f4 7px 14px);color:#5c6570;outline:1px dashed #9aa3ad;outline-offset:-1px}
.blk.konflikt,.lg.konflikt{outline:2px solid var(--err);outline-offset:-2px}
.lg.konflikt{background:#fff;color:var(--err)}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
/* Nøkkeltall */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.9rem;margin:.6rem 0 1rem}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1rem;display:flex;flex-direction:column;gap:.2rem}
.kpi span{font-size:.82rem;color:var(--muted);font-weight:600}.kpi strong{font-size:1.45rem}.kpi em{font-style:normal;font-size:.8rem;color:var(--muted)}
.kpi.main{background:var(--navy);border-color:var(--navy);color:#fff}.kpi.main span,.kpi.main em{color:#C9D6E6}.kpi.main strong{color:#5FE3D3}
.pipe{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.6rem}
.pipe a{display:flex;flex-direction:column;padding:.7rem .8rem;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--text)}
.pipe a strong{font-size:1.3rem}.pipe a span,.pipe a em{font-size:.8rem;color:var(--muted);font-style:normal}
.cols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:1rem}
.bar{display:inline-block;width:110px;height:10px;background:var(--line);border-radius:5px;overflow:hidden;vertical-align:middle;margin-right:.4rem}
.bar>span{display:block;height:100%;background:var(--navy-3,#1B4170)}.bar.teal>span{background:var(--teal-d,#0B7A70)}
td .bar{width:100%;max-width:240px}
.stack-bar{display:flex;height:18px;border-radius:9px;overflow:hidden;background:var(--line);margin:.4rem 0 .6rem}
.seg-aktiv{background:#0B7A70}.seg-transitt{background:#1B4170}.seg-standby{background:#C9A227}.seg-annet{background:#8A97A8}
.legend-s{list-style:none;padding:0;margin:0 0 .6rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.2rem .8rem;font-size:.88rem}
.legend-s i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:.35rem}
.statt td{vertical-align:middle}

/* =====================================================================
   DESIGN 3 – «KLAR»: rolig, lesbar, neste steg først.
   Ett temalag for hele løsningen (kontor, kunde, skipper, partner).
   ===================================================================== */
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}
:root{
  --ink:#13221E; --muted:#4A5A55; --accent:#0E6B5B; --accent-d:#0A5246; --accent-s:#E2F0EC; --surface:#F3F6F5; --line:#D5DEDB;
  --navy:var(--ink); --navy-2:#24372F; --navy-3:var(--accent); --teal:var(--accent); --teal-d:var(--accent); --teal-l:var(--accent-s);
  --bg:#FFFFFF; --card:#FFFFFF; --text:var(--ink);
  --ok:#11663F; --ok-bg:#E3F3EA; --warn:#7A4E00; --warn-bg:#FBF1D9; --err:#A8261E; --err-bg:#FBE4E2; --info:#24506E; --info-bg:#E6EFF5;
  --r:14px; --font:"Atkinson Hyperlegible",Verdana,system-ui,sans-serif;
}
html,body{background:var(--bg);font:17px/1.5 var(--font)}
h1{font-size:1.75rem;color:var(--ink);letter-spacing:0}h2{font-size:1.15rem;color:var(--ink)}h3{color:var(--ink)}
a{color:var(--accent)}a:hover{color:var(--accent-d)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.pilot{background:var(--surface);color:var(--muted);border-left:0;border-radius:12px;font-size:.85rem}

/* Kontor: lys sidemeny */
.side{background:#FFFFFF;color:var(--ink);border-right:1px solid var(--line);padding:1.4rem .9rem}
.side .brand{border-bottom:0;padding:0 .7rem 1.1rem;font-size:1.1rem}
.side .brand small{color:var(--muted);opacity:1}
.side nav{gap:2px}
.side nav a{display:block;color:var(--ink);border-left:0;border-radius:12px;padding:.6rem .8rem}
.side nav a:hover{background:var(--surface);color:var(--ink)}
.side nav a.on{background:var(--accent-s);color:var(--ink);font-weight:700}
.side nav a.sub{padding-left:1.6rem;font-size:.95rem}
.side nav .nav-h{margin:1rem .8rem .15rem;font-size:.75rem;font-weight:700;color:var(--muted)}
.side nav .nav-scroll{display:flex;flex-direction:column;gap:2px;flex:1;overflow:auto;min-height:0}
.side nav details.nav-more{min-width:0;margin-top:.35rem}
.side nav details.nav-more>summary{display:block;cursor:pointer;list-style:none;border-radius:12px;padding:.6rem .8rem;font-weight:600;color:var(--ink)}
.side nav details.nav-more>summary::-webkit-details-marker{display:none}
.side nav details.nav-more>summary::before{content:"▸ ";color:var(--muted)}
.side nav details.nav-more[open]>summary::before{content:"▾ "}
.side nav details.nav-more>summary:hover{background:var(--surface)}
.side nav a.nav-end{margin-top:.8rem;flex-shrink:0}
@media (max-width:900px){
  .side nav{flex-direction:row;overflow-x:auto;overflow-y:hidden;align-items:center}
  .side nav .nav-scroll{flex-direction:row;align-items:center;overflow:visible;gap:0}
  .side nav .nav-h{margin:0 .75rem;white-space:nowrap}
  .side nav details.nav-more{margin-top:0}
  .side nav a.nav-end{margin-top:0}
}
.me{border-top:1px solid var(--line);color:var(--muted)}.me span{opacity:1}.me .linkbtn{color:var(--accent)}
.main{padding:1.6rem 2.2rem 3rem}

/* Kunde/skipper: lys topplinje */
body.simple .top{background:#FFFFFF;color:var(--ink);border-bottom:1px solid var(--line)}
.top .brand{color:var(--ink)}.top .brand small{color:var(--muted)}
.top-me .linkbtn{color:var(--accent)}
.topnav a{color:var(--muted);border-bottom-width:3px}.topnav a.on{color:var(--ink);border-bottom-color:var(--accent);font-weight:700}

/* Knapper og felt */
.btn{border:2px solid var(--accent);color:var(--accent);border-radius:14px;min-height:48px;font-weight:700}
.btn:hover{background:var(--accent-s)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary:hover{background:var(--accent-d);border-color:var(--accent-d)}
.btn.danger{border-color:var(--err);color:var(--err)}
.btn.big{min-height:54px}.btn.huge{min-height:60px;border-radius:14px}
.btn.sm{min-height:38px;border-radius:10px;border-width:1.5px}
input,select,textarea{border:1px solid #A9B7B2;border-radius:12px}
label{color:var(--ink)}
.chip{border-radius:999px;color:var(--ink)}.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.card{border-radius:18px;padding:1.1rem 1.2rem}
.card.hl{border:2px solid var(--accent);box-shadow:none}
.card.inset{background:var(--surface)}
.note{border-radius:12px}.note.sim{border-color:var(--accent);color:var(--ink)}
th{background:var(--surface);color:var(--muted)}
table.inv tr.sec th{background:var(--accent-s);color:var(--ink)}
table.inv tr.grand td{border-top-color:var(--ink)}
.badge{font-weight:700}

/* Neste steg og fremdrift */
.nextstep{background:var(--accent-s);border-radius:18px;padding:1.1rem 1.2rem;margin-bottom:1.2rem;display:flex;flex-direction:column;gap:.6rem}
.nextstep .lbl{font-size:.9rem;font-weight:700;color:var(--accent)}
.nextstep .what{margin:0;font-size:1.3rem;font-weight:700;line-height:1.3;color:var(--ink)}
.nextstep .sub{margin:0;color:var(--muted)}
.nextstep .btn{align-self:stretch}
.nextstep.calm{background:var(--surface)}
.stepper{list-style:none;margin:.6rem 0 0;padding:0;display:flex;gap:2px}
.stepper li{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center;font-size:.75rem;color:var(--muted)}
.stepper .dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center}
.stepper li.done{color:var(--ink)}.stepper li.done .dot{background:var(--accent);border-color:var(--accent)}
.stepper li.done .dot::after{content:"";width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.stepper li.now{color:var(--ink);font-weight:700}.stepper li.now .dot{border-color:var(--accent)}
@media (max-width: 640px){.stepper{gap:0}.stepper li{font-size:.62rem;line-height:1.15}.stepper .dot{width:16px;height:16px}}
.stepper li.now .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* Kontor: arbeidsliste */
.queue-h{margin:0 0 .2rem}
.queue{list-style:none;margin:0 0 1.4rem;padding:0}
.queue li{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:.9rem;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--line)}
.queue .n{width:34px;height:34px;border-radius:50%;background:var(--accent-s);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700}
.queue li.urgent .n{background:var(--err-bg);color:var(--err)}
.queue li.urgent .btn{background:var(--err);border-color:var(--err);color:#fff}
.queue .t{font-weight:700}.queue .s{color:var(--muted);font-size:.93rem}
.queue-empty{background:var(--surface);border-radius:18px;padding:1.2rem;color:var(--muted)}
.dash-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:2rem;align-items:start}
.panel{background:var(--surface);border-radius:18px;padding:1.1rem 1.2rem;margin-bottom:1rem}
.panel .big{font-size:2rem;font-weight:700;line-height:1.1}
.boatline{margin:.35rem 0}
@media (max-width:900px){.dash-grid{grid-template-columns:1fr}}
.rev-card{background:var(--surface);border-radius:18px;padding:1.1rem 1.2rem;margin:0 0 1.4rem}
.rev-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.rev-head h2{margin:0;font-size:1.25rem;text-align:center}
.rev-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;margin:1rem 0}
.rev-figs div{background:#fff;border-radius:14px;padding:.75rem .85rem}
.rev-figs span,.rev-figs em{display:block;color:var(--muted);font-size:.78rem;font-style:normal}
.rev-figs strong{display:block;font-size:1.25rem;margin:.15rem 0}
.rev-est{outline:1px dashed var(--line)}
.rev-warn{margin:.4rem 0;padding:.55rem .9rem;background:#fff4e5;border-radius:12px}
.rev-links{display:flex;flex-wrap:wrap;gap:.75rem 1rem}
.rev-free{color:var(--muted)}
tr.rev-mark td.rev-mark,td.rev-mark{background:#fff4e5}
tr.cov-low td,tr.cov-low th{background:#fff4e5}
tr.cov-total td,tr.cov-total th{font-weight:700;background:var(--surface)}
.cov-vessel{margin-top:1rem}
.cov-vessel h2{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}

/* Kalender i design 3 */
.cal-wrap{border-radius:18px}
.cal-boat{background:#fff}.cal-boat a{color:var(--ink)}
.cal-boat.head,.cal-track.head{background:var(--surface);color:var(--ink)}
.cal-day{border-left:1px solid var(--line)}.cal-day.today{background:var(--accent);color:#fff}
.cal-bg{border-left:1px solid #EDF2F0}.cal-bg.we{background:#F8FAF9}.cal-bg.today{background:var(--accent-s)}
.blk{border-radius:8px}
.st-bekreftet{background:#6A7C77}.st-planlagt{background:#2D5470}.st-pagar{background:var(--accent)}.st-arbeid_ferdig{background:#3E7A55}
.dcard{border-radius:18px}.dcard.hl{border-top:4px solid var(--accent)}
.dcard.money{background:var(--surface);color:var(--ink);border-color:var(--surface)}.dcard.money h2{color:var(--ink)}.dcard.money .muted{color:var(--muted)}
.big-num{color:var(--accent)}
.kpi.main{background:var(--accent-s);border-color:var(--accent-s);color:var(--ink)}.kpi.main span,.kpi.main em{color:var(--muted)}.kpi.main strong{color:var(--accent)}
.kpi,.pipe a{border-radius:18px}
.bar>span{background:var(--accent)}

/* Skipper: hurtigregistrering i design 3 (lys, store rader) */
body.bridge-mode{background:#fff;color:var(--ink)}
body.bridge-mode h1{color:var(--ink)}
body.bridge-mode .note{background:var(--surface);color:var(--ink);border-color:var(--line)}
body.bridge-mode a{color:var(--accent)}
.bridge-head{color:var(--muted)}.bridge-head strong{color:var(--ink);text-transform:none;letter-spacing:0}
.sync{background:var(--surface);color:var(--accent);font-weight:700}.sync.off{background:var(--warn-bg);color:var(--warn)}.sync.err{background:var(--err-bg);color:var(--err)}.sync.busy{color:var(--ink)}
.active-bar{background:var(--accent);border:0;border-radius:18px;color:#fff;padding:1rem 1.1rem}
.active-bar .timer{color:#fff;font-size:1.8rem}.active-bar strong{text-transform:none;font-size:1.3rem}
.active-bar input{background:#fff;color:var(--ink);border:0}
.active-bar .btn{background:#fff;color:var(--accent);border-color:#fff}
.act-grid{display:flex;flex-direction:column;gap:.6rem}
.act{min-height:68px;flex-direction:row;align-items:center;justify-content:flex-start;gap:.9rem;padding:.7rem 1rem;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink)}
.act:hover{background:var(--surface)}
.act strong{font-size:1.08rem;text-transform:none;color:var(--ink);flex:0 1 auto}
.act span{color:var(--muted);font-size:.9rem;flex:1 1 auto}
.act em{color:var(--accent);font-weight:700;margin-left:auto;min-height:0;white-space:nowrap}
.act em:empty::after{content:"Start";color:var(--accent)}
.act.on{background:var(--accent-s);border:2px solid var(--accent)}
.act.cat-standby,.act.cat-annet{background:#fff}
.act:disabled{opacity:.5}
.fields{gap:.6rem}
.field{background:var(--surface);border-radius:14px}
.field label{color:var(--ink)}.field input{background:#fff;color:var(--ink);border:1px solid #A9B7B2}
body.bridge-mode .sec-h{color:var(--ink);font-size:1.1rem;letter-spacing:0;text-transform:none}
.loglist{background:#fff;border:1px solid var(--line);border-radius:18px}
.loglist li{border-bottom-color:var(--line)}.loglist small{color:var(--muted)}
.tl-t,.tl-d{color:var(--muted)}.tl-a .linkbtn{color:var(--accent)}
.loglist li.unsynced .tl-d{color:var(--warn)}
.bridge-side{background:var(--surface);color:var(--ink)}
.bridge-side h3{color:var(--accent);text-transform:none;letter-spacing:0;font-size:.95rem}
.sum-row{border-bottom-color:var(--line)}
body.bridge-mode .btn{background:#fff;color:var(--accent);border-color:var(--accent)}
body.bridge-mode .btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
@media (max-width:860px){.act{min-height:64px}.act span{display:none}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mcard{border-left:1px solid var(--line)}.mcard.new{border:2px solid var(--accent)}
.bigrow{border-radius:14px}
.portal-hero{display:flex;flex-direction:column;gap:.2rem;margin-bottom:.4rem}
/* Logo */
.login-logo{display:block;height:54px;width:auto;margin-bottom:.4rem}
.brand-mark{width:16px;height:16px;vertical-align:-3px;margin-right:.35rem}
.choices{display:flex;flex-wrap:wrap;gap:.4rem}
.choice{display:flex;align-items:center;gap:.35rem;min-height:44px;padding:.35rem .7rem;border:1px solid var(--line);border-radius:12px;background:#fff}
.fag-card{border:1px solid var(--line);border-radius:16px;padding:.8rem;margin:.6rem 0;background:var(--surface)}
.fag-photo{margin:.4rem 0}.fag-photo img{display:block;max-width:220px;max-height:160px;width:auto;height:auto;object-fit:contain;border-radius:8px}
.fag-photo-add{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.4rem 0}
.fag-photo-add input{flex:1;min-width:12rem}
.fag-miss{border:1px solid var(--warn);background:#fff7ed;border-radius:14px;padding:.7rem;margin-bottom:.6rem}
.stack{display:flex;flex-direction:column;gap:.35rem;margin:.4rem 0}
.capture-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.6rem}
.capture-row .btn{min-height:48px}
.avvik-form{display:flex;flex-direction:column;gap:.6rem;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1rem;margin:0 0 1rem}
.avvik-form h2{font-size:1.15rem;margin:0}
.avvik-form textarea,.avvik-form select{width:100%;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:.6rem}
.install-note{position:relative;padding-right:4.2rem}
.install-close{position:absolute;top:.45rem;right:.55rem}
.act-row{border-top:1px dashed var(--line);padding-top:.55rem;display:flex;flex-direction:column;gap:.45rem}
.open-timer{font-size:1.05rem}
#saveStateBottom{position:static;margin:0;grid-column:1 / -1}
.send-review{border:2px solid var(--accent)}
.fill-log{display:flex;flex-direction:column;gap:.6rem}
.install-note h3{font-size:1rem;margin:.8rem 0 .2rem}
.install-note ol{margin:.2rem 0 .4rem;padding-left:1.2rem}
.log-dev{margin:.3rem 0 0;padding-left:1.1rem}
.brreg-list{list-style:none;margin:.15rem 0 .35rem;padding:0;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:auto;max-height:18rem}
.brreg-list li{margin:0}
.brreg-list button{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;width:100%;text-align:left;background:#fff;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:.55rem .75rem;font:inherit;font-weight:400;color:var(--ink);cursor:pointer;min-height:48px}
.brreg-list li:last-child button{border-bottom:0}
.brreg-list button:hover,.brreg-list button:focus{background:var(--accent-s)}
.brreg-list small{color:var(--muted);font-weight:400}
.brreg-status{margin:.15rem 0 .2rem}
.brreg-status.err{color:var(--err);font-weight:700}
.brreg-status.warn{color:var(--warn);font-weight:700}
.brreg-status.ok{color:var(--ok)}
.kilde{display:inline-block;margin:.15rem 0 .15rem .35rem;font-size:.75rem;font-weight:700;padding:.05rem .45rem;border-radius:999px;vertical-align:middle}
.kilde-brreg{background:var(--ok-bg);color:var(--ok)}
.kilde-manuell{background:#F1F3F5;color:var(--muted);border:1px solid var(--line)}
.kilde-avvik{background:var(--warn-bg);color:var(--warn)}
.kilde-register{display:block;color:var(--warn);font-size:.82rem;font-weight:500;margin:.15rem 0 0}
.party{border-top:1px solid var(--line);margin-top:.8rem;padding-top:.8rem}
.party .btn.sm{margin-top:.35rem}

/* Mannskapsføring: plan, flere økter per dag, fakturagrunnlag */
.tabs{display:flex;gap:.4rem;margin:0 0 1rem;flex-wrap:wrap}
.tabs a{display:inline-block;padding:.45rem .85rem;border-radius:999px;text-decoration:none;border:1px solid var(--line);color:var(--ink);background:#fff}
.tabs a.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.between{display:flex;justify-content:space-between;align-items:flex-start;gap:.8rem;flex-wrap:wrap}
.crew-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin:1rem 0}
.crew-kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:.75rem 1rem}
.crew-kpi span{display:block;color:var(--muted);font-size:.85rem}
.crew-kpi b{font-size:1.45rem;line-height:1.2}
.person-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1rem;display:flex;flex-direction:column;gap:.55rem}
.session-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.crew-chips{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
body.crew input[type="time"],body.crew textarea{min-height:48px;font-size:1.05rem}
body.crew .day-nav{display:flex;gap:.5rem}
body.crew .day-nav .btn{flex:1}
@media (max-width:420px){
  .crew-kpis{grid-template-columns:1fr}
  .session-row{grid-template-columns:1fr 1fr}
}
/* Smale skjermer: mer luft mellom økter, og mellom etikett og klokkeslett. */
@media (max-width:640px){
  [data-sessions]{display:flex;flex-direction:column;gap:1.75rem}
  .session-row label{gap:.8rem}
}

/* Mannskapsplan, innstillinger (MK-4) */
.mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;border:0;margin:0 0 1rem;padding:0}
.mode-cards legend{grid-column:1/-1;padding:0}
.mode-card{display:flex;flex-direction:column;gap:.35rem;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem;background:#fff;font-weight:500;cursor:pointer}
.mode-card input{width:1.15rem;height:1.15rem;min-height:0;margin:0}
.mode-card:has(input:checked){border-color:var(--teal);box-shadow:inset 4px 0 0 var(--teal);background:var(--teal-l)}
.mode-card .when{font-weight:400;color:var(--muted);font-size:.86rem}
.mode-preview{display:grid;gap:.25rem;width:100%;margin-top:.35rem}
.mode-preview i{display:block;height:.65rem;border-radius:3px;background:var(--bg)}
.mode-preview i.on{background:var(--navy-3);opacity:.45}
dialog.plan-dialog{border:0;border-radius:12px;padding:1.25rem;max-width:34rem;background:#fff;color:var(--text);box-shadow:0 16px 48px rgba(10,35,66,.28)}
dialog.plan-dialog::backdrop{background:rgba(10,35,66,.45)}
dialog.plan-dialog h2{margin-top:0}
.reason-row{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;padding:.55rem 0;border-top:1px solid var(--line)}
.reason-row.off{opacity:.65}
.reason-row input{max-width:22rem}
@media (max-width:700px){.mode-cards{grid-template-columns:1fr}}

/* Båtkrav-visning (MK-6, B132, skisse V2). Fartøy er radgrupper, dager er kolonner.
   Dra, Ledige og utkast (B133, skisse D2–D5). */
.boat-scroll{overflow:auto;max-height:calc(100dvh - 11rem);-webkit-overflow-scrolling:touch;background:#fff;border:1px solid #bbb}
.btl{position:relative;width:max-content;min-width:100%;color:#333;font-size:11px}
.btl-row{display:flex;border-top:1px solid #eee;min-height:36px}
.btl-lab{position:sticky;left:0;z-index:3;width:230px;flex:none;display:flex;align-items:center;gap:6px;flex-wrap:wrap;border-right:1px solid #bbb;padding:4px 8px;background:#fff}
.btl-days{position:relative;flex:none;width:calc(var(--days) * 40px);min-height:inherit}
.btl-week .btl-lab,.btl-hdr .btl-lab{background:#f3f3f3;font-weight:700;z-index:4}
.btl-headdays,.btl-weekdays,.btl-covdays{display:flex}
.btl-day{width:40px;flex:none;text-align:center;border-left:1px solid #eee;font-size:10px;line-height:13px;padding:2px 0}
.btl-day span{display:block;color:#888}
.btl-day.we{background:#f3f3f3}
.btl-day.wk{border-left:1px solid #888}
.btl-day.today b{background:#333;color:#fff;padding:0 3px}
.btl-weekcell{flex:none;font-weight:700;text-align:left;padding:4px 5px;border-left:1px solid #888;background:#f3f3f3}
.btl-grp{background:#e6e6e6;border-top:1.5px solid #333;min-height:32px;font-weight:700}
.btl-grp .btl-lab{background:#e6e6e6;font-size:12px}
.btl-lag{background:#f3f3f3;border-top:1px solid #333;min-height:30px;font-weight:700}
.btl-lag .btl-lab{background:#f3f3f3;padding-left:14px}
.btl-warn{position:absolute;left:6px;top:7px;font-weight:400;color:#555;white-space:nowrap}
.btl-warn.on{color:#a33}
.btl-cov{min-height:30px;background:#f3f3f3}
.btl-cov .btl-lab{background:#f3f3f3;padding-left:28px}
.btl .cov-cell{width:40px;flex:none;display:block;text-align:center;line-height:30px;font-weight:700;border-left:1px solid #e3e3e3;font-size:11px;min-height:30px;background:#fff}
.btl .cov-cell.hull{background:repeating-linear-gradient(45deg,#ddd 0 3px,#fff 3px 6px);color:#a33}
.btl .cov-cell.dekket{background:#e9f1e9;color:#333}
.btl .cov-cell.ekstra{background:#dfe9df;border-top:2px solid #333;color:#333;line-height:28px}
.btl-role .btl-lab{padding-left:36px}
.btl-role .btl-days,.btl-xlane .btl-days{background-image:repeating-linear-gradient(90deg,transparent 0 39px,#f0f0f0 39px 40px)}
.btl-xlane .btl-lab{padding-left:22px;color:#555;background:#f3f3f3}
.btl .chip{display:inline-block;margin-left:auto;border:1px solid #888;border-radius:10px;padding:1px 8px;font-size:11px;background:#fff;font-weight:500}
.btl .rot{font-size:10px;color:#888;font-weight:400}
.btl .blk{position:absolute;top:5px;height:26px;margin:0;border-radius:0;border:1.5px solid #5b875b;background:#cfe3cf;color:#333;font-size:11px;padding:0 6px;display:flex;flex-direction:row;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;z-index:2}
.btl .blk:hover{filter:none;color:#333}
.btl .blk b{font-weight:700}
.btl .blk.opp{background:#cfe3cf;border-color:#5b875b}
.btl .blk.fri{background:#d3deee;border-color:#5a7499;color:#334}
.btl a.blk.hull,.btl span.blk.hull{background:#fff;border:2px dashed #777;color:#666;font-weight:700;justify-content:space-between;text-decoration:none}
.btl a.blk.hull:hover{color:#333;filter:none}
.btl .blk.ekstra{background:#cfe3cf;border:1.5px dashed #5b875b;outline:none}
.btl .xt{background:#333;color:#fff;font-size:9px;padding:0 4px;font-weight:700}
.btl .av{width:22px;height:22px;border-radius:50%;background:#e6e6e6;border:1px dashed #888;flex:none;font-size:10px;display:flex;align-items:center;justify-content:center;color:#555}
.btl .fyll{display:inline-block;border:1.5px solid #333;background:#fff;color:#333;padding:1px 6px;font-size:11px;font-weight:500;text-decoration:none}
.btl-today{position:absolute;top:0;bottom:0;left:calc(230px + var(--today) * 40px + 20px);width:0;border-left:2px dashed #333;z-index:4;pointer-events:none}
.btl-today b{position:absolute;top:0;left:-18px;white-space:nowrap;font-size:10px;background:#333;color:#fff;padding:0 4px}
.btl-legend{gap:14px;font-size:11px;color:#333}
.btl-legend .sw{display:inline-block;width:30px;height:14px;vertical-align:-2px;margin-right:4px;border:1.5px solid #bbb}
.btl-legend .sw.opp{background:#cfe3cf;border-color:#5b875b}
.btl-legend .sw.gap{background:#fff;border:2px dashed #777}
.btl-legend .sw.ok{background:#e9f1e9}
.btl-legend .sw.bad{background:repeating-linear-gradient(45deg,#ddd 0 3px,#fff 3px 6px)}
.btl-legend .sw.ext{background:#dfe9df;border-top:2px solid #333}
.btl-legend .sw.ekstra{background:#cfe3cf;border:1.5px dashed #5b875b}
.btl-legend .sw.utkast{background:#fff;box-shadow:inset 0 0 0 2px #333}
.utkast-banner{position:sticky;top:0;z-index:30;display:flex;flex-wrap:wrap;gap:.45rem .6rem;align-items:center;background:#fff3d6;border:1px solid #e0c36a;border-radius:10px;padding:.55rem .75rem;margin:0 0 .8rem}
.utkast-banner form{margin:0}
.utkast-banner .count{font-weight:700}
.plan-layout{display:grid;grid-template-columns:minmax(200px,240px) minmax(0,1fr);gap:.8rem;align-items:start}
.ledige{border:1px solid #bbb;background:#fff;padding:.6rem .7rem;max-height:calc(100dvh - 12rem);overflow:auto}
.ledige h2{font-size:.95rem;margin:0 0 .25rem}
.ledige .small{margin:.15rem 0 .45rem}
.ledig{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:left;font:inherit;font-weight:400;padding:.45rem .55rem;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:grab;margin:0 0 .35rem;color:var(--text)}
.ledig.muted{opacity:.55}
.ledig.match{border-color:var(--teal)}
.ledig.on,.plan-armed .ledig.on{border-color:var(--teal);box-shadow:inset 3px 0 0 var(--teal)}
.ledig.dragging,.blk.dragging{opacity:.45}
.btl .blk.utkast{box-shadow:inset 0 0 0 2px #333}
.btl .blk[draggable="true"]{cursor:grab}
.btl-hit{position:absolute;inset:0;display:flex;z-index:1}
.btl-hitcell{appearance:none;-webkit-appearance:none;width:40px;flex:none;border:0;padding:0;margin:0;background:transparent;min-height:0;height:100%;border-radius:0;cursor:pointer}
.plan-armed .btl-hit{z-index:6}
.plan-armed .btl-hitcell{background:rgba(23,179,163,.08)}
.btl-days.over,.cal-track.over,.ledige.over{outline:2px solid var(--teal);outline-offset:-2px}
.cal-bg[data-drop-cell]{min-height:100%}
.plan-armed .cal-bg[data-drop-cell]{z-index:5;background:rgba(23,179,163,.12)}
.blk.utkast{box-shadow:inset 0 0 0 2px #fff}
.cal-track .cov-cell{display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;min-height:1.6rem}
.cal-track .cov-cell.hull{background:repeating-linear-gradient(45deg,#ddd 0 3px,#fff 3px 6px);color:#a33}
.cal-track .cov-cell.ekstra{background:#dfe9df;border-top:2px solid #333;color:#333}
@media (max-width:700px){
  .boat-scroll{max-height:calc(100dvh - 8rem);max-width:100%}
  .plan-layout{grid-template-columns:minmax(0,1fr)}
  .plan-main{min-width:0}
  .btl-lab{width:148px}
  .btl-today{left:calc(148px + var(--today) * 40px + 20px)}
  .ledige{max-height:none;position:sticky;bottom:0;z-index:25;box-shadow:0 -6px 16px rgba(10,35,66,.12)}
  .ledige-list,#ledige-liste{display:flex;gap:.4rem;overflow:auto;padding-bottom:.2rem}
  .ledig{min-width:9.5rem;width:auto;margin:0}
}
button.blk{appearance:none;border:0;font:inherit;text-align:left;cursor:pointer;width:auto}
#kandidater{display:flex;flex-direction:column;gap:.4rem;max-height:18rem;overflow:auto}
#kandidater .cand{display:flex;flex-direction:column;align-items:flex-start;text-align:left;font:inherit;padding:.55rem .7rem;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}
#kandidater .cand.match{border-color:var(--teal)}
#kandidater .cand.muted{opacity:.55}
#kandidater .cand:disabled{opacity:.45;cursor:not-allowed}
.plan-info{border:1.5px solid #333;padding:.7rem .8rem .7rem 1.1rem;font-size:.86rem;margin:0 0 .8rem}
.req{color:#a33;font-weight:700}
dialog.plan-dialog.ekstra{border:2px solid #333;border-radius:0;box-shadow:6px 6px 0 #bbb}
.reason-table tr.off td{color:#999}
.reason-table td{vertical-align:middle}
.reason-table form.inline{display:inline}
.cov-note{display:flex;align-items:center;gap:.6rem;padding:.35rem .5rem}

/* Førstegangsside for tofaktor, lesbar på telefon (B137) */
.totp-setup{display:flex;flex-direction:column;gap:.75rem;max-width:100%;min-width:0}
.totp-setup .totp-hint{margin:0}
.totp-setup .btn.wide{width:100%;max-width:100%;white-space:normal;text-align:center;line-height:1.25;height:auto}
.totp-setup .qr{max-width:100%;align-self:flex-start}
.totp-setup .qr svg{max-width:100%;height:auto}
.secret-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end;max-width:100%;min-width:0}
.secret-field{flex:1 1 12rem;min-width:0;max-width:100%}
.secret-label{margin:0 0 .25rem;font-weight:700;font-size:.9rem}
.totp-setup .secret{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;line-height:1.65;margin:0;padding:.7rem .75rem;border:1px solid #A9B7B2;border-radius:12px;background:#F7F9FB;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;max-width:100%;user-select:text}
.secret-row .btn{flex:0 0 auto;max-width:100%;height:auto}
#totp-copy-status{min-height:1.3em;margin:0}
@media (max-width:420px){
  .login{padding:1rem .75rem}
  .login-card{padding:1.1rem .9rem}
  .secret-row{flex-direction:column;align-items:stretch}
  .secret-row .btn{width:100%}
  .login-logo{max-width:100%;height:auto}
}