/* ============================================================
   TimeLink – felles stilark for appsidene
   Samme palett som salgssiden: marineblå, blå, amber.
   ============================================================ */
:root{
  --bg-deep:#0d1830;
  --bg:#13223f;
  --panel:#1b2c50;
  --line:rgba(132,158,212,.16);
  --line-2:rgba(132,158,212,.30);
  --paper:#eef2fb;
  --paper-2:#e6ecf8;
  --card:#ffffff;
  --card-line:#e2e8f5;
  --chalk:#e9eefa;
  --chalk-soft:#a6b6d6;
  --ink:#0e1a30;
  --ink-soft:#54668a;
  --blue:#3f86f7;
  --blue-bright:#5b9bff;
  --amber:#f7ab2e;
  --red:#ef4d4d;
  --green:#23c98d;
  /* statusfarger i tabellene */
  --rad-levert:#eefaf3;        /* svak grønn – ferdig for måneden */
  --rad-endret:#f7eddd;        /* lysebrun – endret etter innsending */
  --rad-endret-2:#f0dfc4;
  --rad-inaktiv:#fdecec;       /* rød – deaktivert bruker har ført nye timer */
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--paper);
  line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;
}
h1,h2,h3{font-family:'Archivo',sans-serif;letter-spacing:-.02em;line-height:1.1}
a{color:inherit;text-decoration:none}
.mono{font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}

.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* ---------- topplinje: mørk, avrundet boks ---------- */
header.topp{position:sticky;top:0;z-index:50;background:var(--paper);padding:12px 16px 10px}
.topp-inner{
  position:relative;max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  height:62px;gap:14px;background:var(--bg);color:var(--chalk);border-radius:28px;padding:0 22px;
  box-shadow:0 10px 26px -14px rgba(13,24,48,.55);border:1px solid var(--line-2);
}
.brand{display:flex;align-items:center;gap:10px;font-family:'Archivo';font-weight:800;font-size:1.1rem;color:#fff}
.brand .bm{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--blue-bright));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:.95rem}
.topp-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.topp-h .hvem{font-size:.8rem;color:var(--chalk-soft);margin-right:6px;background:var(--panel);
  padding:6px 14px;border-radius:40px}
@media(max-width:640px){.topp-h .hvem{display:none}}

/* ---------- hamburgermeny (kun mobil) ---------- */
.meny-knapp{display:none;background:rgba(255,255,255,.08);border:1px solid var(--line-2);
  color:var(--chalk);width:42px;height:42px;border-radius:12px;cursor:pointer;
  align-items:center;justify-content:center;flex:none;padding:0}
.meny-knapp svg{width:22px;height:22px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}
.meny-panel{display:none}
@media(max-width:640px){
  .topp-h{gap:6px}
  .topp-h .btn, .topp-h > .hvem{display:none}
  .meny-knapp{display:inline-flex}
  .meny-panel.aapen{display:block;position:absolute;top:70px;right:16px;left:16px;
    background:var(--bg);border:1px solid var(--line-2);border-radius:18px;padding:10px;
    box-shadow:0 18px 40px -12px rgba(13,24,48,.6);z-index:70}
  .meny-panel .hvem-linje{color:var(--chalk-soft);font-size:.82rem;padding:8px 12px 10px;
    border-bottom:1px solid var(--line-2);margin-bottom:6px}
  .meny-panel a, .meny-panel button{display:block;width:100%;text-align:left;background:none;
    border:none;color:var(--chalk);font-family:'Archivo',sans-serif;font-weight:600;font-size:.95rem;
    padding:11px 12px;border-radius:10px;cursor:pointer;text-decoration:none}
  .meny-panel a:hover, .meny-panel button:hover{background:rgba(255,255,255,.08)}
}

/* ---------- knapper ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:.88rem;
  padding:9px 16px;border-radius:30px;cursor:pointer;border:1px solid transparent;
  transition:transform .15s ease,background .15s ease,border-color .15s ease;white-space:nowrap;
}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--blue-bright);transform:translateY(-1px)}
.btn-lys{background:#fff;color:var(--ink);border-color:var(--card-line)}
.btn-lys:hover:not(:disabled){border-color:var(--blue);transform:translateY(-1px)}
.btn-mork{background:var(--panel);color:var(--chalk);border-color:var(--line-2)}
.btn-ghost{background:rgba(255,255,255,.06);color:var(--chalk);border-color:var(--line-2)}
.btn-ghost:hover:not(:disabled){border-color:var(--chalk-soft)}
.btn-rod{background:#fff;color:var(--red);border-color:#f3cbcb}
.btn-rod:hover:not(:disabled){background:#fdf1f1}
.btn-gronn{background:var(--green);color:#fff}
.btn-gronn:hover:not(:disabled){filter:brightness(1.06)}
.btn-liten{padding:6px 12px;font-size:.78rem}

/* ---------- kort og seksjoner ---------- */
main{padding:26px 0 70px}
.kort{
  background:var(--card);border:1px solid rgba(226,232,245,.7);border-radius:26px;
  padding:24px;margin-bottom:20px;box-shadow:0 4px 18px rgba(14,26,48,.07);
}
.kort h2{font-size:1.15rem;margin-bottom:14px;border-left:5px solid var(--blue);padding-left:13px;border-radius:2px}
.kort .hint{font-size:.83rem;color:var(--ink-soft)}
.verktoy{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.verktoy .fyll{flex:1}

/* ---------- månedsvelger ---------- */
.mndvelger{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.mnd-knapp{
  font-family:'Inter',system-ui,sans-serif;font-size:.74rem;letter-spacing:.04em;
  padding:7px 12px;border-radius:20px;border:1px solid var(--card-line);background:#fff;
  cursor:pointer;color:var(--ink-soft);transition:all .13s;
}
.mnd-knapp:hover{border-color:var(--blue);color:var(--ink)}
.mnd-knapp.valgt{background:var(--bg);color:#fff;border-color:var(--bg)}
.mnd-knapp.endret{background:var(--rad-endret-2);color:#7a5518;border-color:#e3c48f}
.mnd-knapp.endret.valgt{outline:2px solid #c99a3f}
.aar-velger{font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-size:.82rem;padding:7px 10px;border-radius:10px;border:1px solid var(--card-line);background:#fff}

/* ---------- tabeller ---------- */
.tabellramme{overflow-x:auto;max-height:640px;overflow-y:auto;border:1px solid var(--card-line);
  border-radius:20px;background:#fff}
table.tl{width:100%;border-collapse:collapse;font-size:.88rem;min-width:640px}
table.tl th{
  font-family:'Inter',system-ui,sans-serif;font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-soft);text-align:left;padding:12px 14px;border-bottom:2px solid var(--card-line);
  background:#f7f9fd;white-space:nowrap;position:sticky;top:0;z-index:2;
}
table.tl td{padding:11px 14px;border-bottom:1px solid var(--card-line);vertical-align:top}
table.tl tr:last-child td{border-bottom:none}
table.tl tr.klikkbar{cursor:pointer}
table.tl tr.klikkbar:hover td{background:rgba(63,134,247,.05)}
tr.rad-levert td{background:var(--rad-levert)}
tr.rad-endret td{background:var(--rad-endret)}
tr.rad-inaktiv td{background:var(--rad-inaktiv)}
tr.rad-levert.klikkbar:hover td{background:#e2f5ea}
tr.rad-endret.klikkbar:hover td{background:#f2e3c9}
tr.rad-inaktiv.klikkbar:hover td{background:#fbdfdf}
.gml{color:var(--ink-soft);font-size:.8em}
td .sum{font-weight:600}

/* ---------- status/badges ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-family:'Inter',system-ui,sans-serif;font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:20px;white-space:nowrap}
.badge .pk{width:7px;height:7px;border-radius:50%}
.b-gronn{background:#e4f7ee;color:#137a53}.b-gronn .pk{background:var(--green)}
.b-graa{background:var(--paper-2);color:var(--ink-soft)}.b-graa .pk{background:#9aa8c4}
.b-brun{background:var(--rad-endret-2);color:#7a5518}.b-brun .pk{background:#c99a3f}
.b-rod{background:#fde3e3;color:#a72525}.b-rod .pk{background:var(--red)}
.b-blaa{background:#e3edfd;color:#1e5cc0}.b-blaa .pk{background:var(--blue)}

/* ---------- skjema ---------- */
label.felt{display:block;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#334155;margin:12px 0 5px}
input.felt,select.felt,textarea.felt{
  width:100%;padding:10px 14px;border:1px solid var(--card-line);border-radius:16px;
  font:inherit;font-size:.9rem;background:#fff;color:var(--ink)
}
input.felt:focus,select.felt:focus,textarea.felt:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(63,134,247,.14)}
input.tid{width:96px;text-align:center;font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-size:.85rem;padding:8px 6px;
  border:1px solid var(--card-line);border-radius:14px}
input.tall{width:80px;text-align:center;font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-size:.85rem;padding:8px 6px;
  border:1px solid var(--card-line);border-radius:14px}
.skjema-rad{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:640px){.skjema-rad{grid-template-columns:1fr}}

/* ---------- meldinger ---------- */
.melding{border-radius:14px;padding:11px 14px;font-size:.86rem;margin:12px 0;display:none}
.melding.vis{display:block}
.m-ok{background:#e4f7ee;color:#137a53;border:1px solid #bfe9d4}
.m-feil{background:#fde3e3;color:#a72525;border:1px solid #f3c2c2}
.m-info{background:#e3edfd;color:#1e5cc0;border:1px solid #c4d8f7}

.banner-trial{background:linear-gradient(90deg,#1b2c50,#13223f);color:var(--chalk);border-radius:22px;
  padding:14px 18px;margin-bottom:20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid var(--line-2)}
.banner-trial .t{font-size:.88rem}
.banner-trial b{color:var(--amber)}

/* ---------- dagkort (ansatt-registrering) ---------- */
.ukeblokk{margin-bottom:18px}
.uke-topp{display:flex;align-items:center;justify-content:space-between;padding:6px 4px 10px;
  font-family:'Inter',system-ui,sans-serif}
.uke-nr{font-size:.82rem;font-weight:600;letter-spacing:.08em;color:var(--ink);
  text-transform:uppercase;background:var(--paper-2);padding:5px 12px;border-radius:20px}
.uke-sum{font-size:.78rem;color:var(--ink-soft)}
.uke-dager{display:flex;flex-direction:column;gap:8px}
.dag-etikett{display:block;font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:#334155;margin:0 0 5px}
.paakrevd{color:var(--red)}
.ot-begrunnelse{margin-top:10px}
.dag{border:1px solid var(--card-line);border-radius:18px;background:#fff;margin-bottom:0;overflow:hidden;
  box-shadow:0 2px 8px rgba(14,26,48,.05)}
.dag-topp{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;user-select:none}
.dag-topp:hover{background:var(--paper)}
.dag-topp .dnavn{font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-size:.8rem;min-width:112px;color:var(--ink)}
.dag-topp .dsum{font-size:.8rem;color:var(--ink-soft)}
.dag-topp .pil{margin-left:auto;color:var(--ink-soft);transition:transform .15s}
.dag.aapen .pil{transform:rotate(90deg)}
.dag-innhold{display:none;padding:4px 16px 16px;border-top:1px dashed var(--card-line)}
.dag.aapen .dag-innhold{display:block}
.dag.helg .dnavn{color:var(--ink-soft)}
.dag.harTimer{border-left:4px solid var(--blue)}
.skift{display:flex;align-items:center;gap:8px;margin:8px 0;flex-wrap:wrap}
.skift .strek{color:var(--ink-soft)}
.fjern-skift{background:none;border:none;color:var(--red);cursor:pointer;font-size:1rem;padding:4px}
.dag-felt{display:flex;align-items:center;gap:10px;margin:10px 0;flex-wrap:wrap;font-size:.86rem}
.dag-felt label{display:flex;align-items:center;gap:7px;cursor:pointer}
.dag-felt input[type=checkbox]{width:17px;height:17px;accent-color:var(--blue)}
@media(max-width:640px){
  .dag-topp .dnavn{min-width:0;font-size:.82rem}
  .skift{gap:6px}
  .skift .tid{flex:1;min-width:0;width:auto}
  .dag-felt label{width:100%}
  .kort{padding:18px;border-radius:20px}
  main{padding:16px 0 60px}
}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(13,24,48,.6);display:none;align-items:center;justify-content:center;z-index:100;padding:18px}
.modal.open{display:flex}
.modal-boks{background:#fff;border-radius:16px;max-width:480px;width:100%;padding:26px;max-height:92vh;overflow:auto}
.modal-boks h3{margin-bottom:6px}
.modal-lukk{float:right;background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--ink-soft)}

/* ---------- utskrift ---------- */
.kun-utskrift{display:none}
@media print{
  header.topp,.verktoy,.mndvelger-ramme,.btn,.banner-trial,.ikke-utskrift{display:none !important}
  body{background:#fff}
  main{padding:0}
  .kort,.tabellramme{border:none;box-shadow:none;padding:0}
  .kun-utskrift{display:block;margin-bottom:14px}
  .kun-utskrift h1{font-size:1.5rem}
  .kun-utskrift .u-info{font-family:'Inter',system-ui,sans-serif;font-size:.8rem;color:#333;margin-top:4px}
  table.tl{min-width:0;font-size:.78rem}
  table.tl th{background:#eee !important;color:#000}
  tr.rad-levert td,tr.rad-endret td,tr.rad-inaktiv td{background:#fff !important}
}

.tom{padding:34px;text-align:center;color:var(--ink-soft);font-size:.9rem}
.laster{padding:34px;text-align:center;color:var(--ink-soft);font-family:'Inter',system-ui,sans-serif;font-size:.8rem}

/* Dag endret av daglig leder (låst for den ansatte) */
.dag.lederEndret{background:#fdeceb;border-color:#f3c1bd}
.leder-info{font-size:.9rem;background:#fff;border:1px solid #f3c1bd;border-radius:12px;padding:12px 14px;color:var(--ink, #1c2740)}