/* Sikros "Industrial Precision" standardtema: mørk marine + oransje.
   Per-firma branding overstyrer --tc-blue (primær) og --tc-blue-light (aksent) ved innlogging. */
:root {
  --tc-blue: #1B2B4B;
  --tc-blue-mid: #263A63;
  --tc-blue-light: #F26B21;
  --tc-blue-pale: #FBEADD;
  --tc-white: #FFFFFF;
  --tc-gray: #F4F6FA;
  --tc-gray-mid: #CBD5E1;
  --tc-gray-dark: #64748B;
  --tc-text: #0F172A;
  --tc-green: #16A34A;
  --tc-green-light: #DCFCE7;
  --tc-yellow: #D97706;
  --tc-yellow-light: #FEF3C7;
  --tc-red: #DC2626;
  --tc-red-light: #FEE2E2;
  --tc-orange: #EA580C;
  --tc-orange-light: #FFEDD5;
  --sidebar-w: 260px;
  --header-h: 64px;
  --radius: 12px;
  --shadow: 0 4px 24px rgba(10,61,124,0.10);
  --shadow-lg: 0 8px 40px rgba(10,61,124,0.16);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Barlow',sans-serif;background:var(--tc-gray);color:var(--tc-text);min-height:100vh;overflow-x:hidden;}

#splash{position:fixed;inset:0;z-index:9999;background:linear-gradient(160deg,var(--tc-blue) 0%,var(--tc-blue-mid) 70%,#31497B 100%);display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity .5s;}
#splash.hidden{opacity:0;pointer-events:none;}
.splash-logo{display:flex;align-items:center;gap:16px;margin-bottom:32px;}
.splash-logo-icon{width:64px;height:64px;background:white;border-radius:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 24px rgba(0,0,0,.2);}
.splash-logo-icon svg{width:40px;height:40px;}
.splash-logo-text{color:white;}
.splash-logo-text h1{font-size:2rem;font-weight:800;letter-spacing:-0.5px;font-family:'Barlow Condensed',sans-serif;}
.splash-logo-text p{font-size:.9rem;opacity:.8;letter-spacing:2px;text-transform:uppercase;}
.login-card{background:white;border-radius:20px;padding:36px;width:100%;max-width:400px;box-shadow:var(--shadow-lg);max-height:88vh;overflow-y:auto;}
.login-card h2{font-size:1.4rem;font-weight:700;color:var(--tc-blue);margin-bottom:6px;}
.login-card p{color:var(--tc-gray-dark);font-size:.9rem;margin-bottom:22px;}
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:.82rem;font-weight:600;color:var(--tc-blue);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px;}
.form-group input,.form-group select{width:100%;padding:11px 14px;border:2px solid var(--tc-gray-mid);border-radius:8px;font-family:'Barlow',sans-serif;font-size:.95rem;transition:.2s;background:white;}
.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--tc-blue-light);}
.btn-primary{width:100%;padding:13px;background:var(--tc-blue);color:white;border:none;border-radius:8px;font-family:'Barlow',sans-serif;font-size:1rem;font-weight:700;cursor:pointer;transition:.2s;letter-spacing:.5px;}
.btn-primary:hover{background:var(--tc-blue-mid);}
.auth-tabs{display:flex;gap:8px;margin-bottom:20px;}
.auth-tab{flex:1;padding:8px;border:2px solid var(--tc-gray-mid);background:white;border-radius:8px;font-family:'Barlow',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;transition:.2s;color:var(--tc-gray-dark);}
.auth-tab.active{border-color:var(--tc-blue);background:var(--tc-blue-pale);color:var(--tc-blue);}
.auth-error{background:var(--tc-red-light);color:var(--tc-red);padding:10px 12px;border-radius:8px;font-size:.85rem;margin-bottom:14px;display:none;}
.auth-error.show{display:block;}
.auth-success{background:var(--tc-green-light);color:var(--tc-green);padding:10px 12px;border-radius:8px;font-size:.85rem;margin-bottom:14px;display:none;}
.auth-success.show{display:block;}
/* «Ingen kontakt med serveren» – oransje som resten av offline-meldingene i appen (SJA), ikke rød:
   ingenting har gått galt med innloggingen, appen venter bare på nett. */
.auth-offline{background:var(--tc-orange-light);color:var(--tc-orange);padding:10px 12px;border-radius:8px;font-size:.85rem;margin-bottom:14px;display:none;}
.auth-offline.show{display:block;}

#app{display:none;min-height:100vh;}
#app.visible{display:flex;}

.sidebar{width:var(--sidebar-w);background:var(--tc-blue);min-height:100vh;display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;z-index:100;transition:.3s;}
.sidebar-header{padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,.1);}
.sidebar-logo{display:flex;align-items:center;gap:12px;}
.sidebar-logo-icon{width:42px;height:42px;background:white;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sidebar-logo-icon svg{width:26px;height:26px;}
.sidebar-logo-text h2{color:white;font-size:1.05rem;font-weight:800;font-family:'Barlow Condensed',sans-serif;line-height:1.1;}
.sidebar-logo-text p{color:rgba(255,255,255,.55);font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;}
.sidebar-user{padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.1);}
.user-info{display:flex;align-items:center;gap:10px;}
.user-avatar{width:36px;height:36px;background:var(--tc-blue-light);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:.9rem;flex-shrink:0;}
.user-name{color:white;font-size:.88rem;font-weight:600;}
.user-role{color:rgba(255,255,255,.55);font-size:.75rem;}
/* Diskré abonnements-nedtelling – kun for daglig leder/admin, bevisst lavmælt. */
.sidebar-abonnement{color:rgba(255,255,255,.38);font-size:.68rem;margin-top:9px;letter-spacing:.2px;}
.sidebar-abonnement.warn{color:#F2C879;}
.sidebar-abonnement.overdue{color:#F2957E;}
.sidebar-nav{flex:1;padding:16px 12px;overflow-y:auto;}
.nav-section-title{color:rgba(255,255,255,.4);font-size:.68rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:0 8px;margin:16px 0 6px;}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;color:rgba(255,255,255,.75);font-size:.88rem;font-weight:500;cursor:pointer;transition:.15s;margin-bottom:2px;position:relative;}
.nav-item:hover{background:rgba(255,255,255,.08);color:white;}
.nav-item.active{background:rgba(255,255,255,.15);color:white;}
.nav-item .nav-icon{width:20px;height:20px;flex-shrink:0;opacity:.85;}
.nav-badge{margin-left:auto;background:var(--tc-red);color:white;font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:20px;}
.sidebar-footer{padding:16px 20px;border-top:1px solid rgba(255,255,255,.1);}
.logout-btn{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.55);font-size:.85rem;cursor:pointer;padding:8px 0;}
.logout-btn:hover{color:white;}

/* min-width:0 er ikke pynt: et flex-barn har min-width:auto som standard, og nekter da å bli
   smalere enn innholdet sitt. Uten den dro en bred tabell hele siden sidelengs på mobil – og det
   som lå utenfor skjermen var ikke til å få tak i. KlimaOS fikk samme rettelse tidligere.
   Brede tabeller ruller i sin egen boks (overflow-x:auto rundt dem), så ingenting blir borte. */
.main-wrap{margin-left:var(--sidebar-w);flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh;}
.topbar{height:var(--header-h);background:white;border-bottom:1px solid var(--tc-gray-mid);display:flex;align-items:center;padding:0 28px;gap:16px;position:sticky;top:0;z-index:50;box-shadow:0 1px 8px rgba(10,61,124,.06);}
.topbar-title{font-size:1.1rem;font-weight:700;color:var(--tc-blue);flex:1;font-family:'Barlow Condensed',sans-serif;letter-spacing:.5px;}
.topbar-actions{display:flex;align-items:center;gap:10px;}
.icon-btn{width:38px;height:38px;border:none;background:var(--tc-gray);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;position:relative;}
.icon-btn:hover{background:var(--tc-blue-pale);}
.icon-btn .badge{position:absolute;top:4px;right:4px;min-width:8px;height:8px;background:var(--tc-red);border-radius:50%;border:1.5px solid white;font-size:.6rem;color:white;display:flex;align-items:center;justify-content:center;padding:0 2px;}
.content{padding:28px;flex:1;}

.page{display:none;}
.page.active{display:block;}

.dashboard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;}
.stat-card{background:white;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);border-left:4px solid var(--tc-blue);}
.stat-card.green{border-left-color:var(--tc-green);}
.stat-card.yellow{border-left-color:var(--tc-yellow);}
.stat-card.red{border-left-color:var(--tc-red);}
.stat-card.orange{border-left-color:var(--tc-orange);}
.stat-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--tc-gray-dark);margin-bottom:8px;}
.stat-value{font-size:2rem;font-weight:800;color:var(--tc-blue);font-family:'Barlow Condensed',sans-serif;line-height:1;}
.stat-card.green .stat-value{color:var(--tc-green);}
.stat-card.yellow .stat-value{color:var(--tc-yellow);}
.stat-card.red .stat-value{color:var(--tc-red);}
.stat-card.orange .stat-value{color:var(--tc-orange);}
.stat-sub{font-size:.78rem;color:var(--tc-gray-dark);margin-top:4px;}
.dashboard-row{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:24px;}
.card{background:white;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.card-header{padding:16px 20px;border-bottom:1px solid var(--tc-gray);display:flex;align-items:center;justify-content:space-between;}
.card-title{font-size:.95rem;font-weight:700;color:var(--tc-blue);display:flex;align-items:center;gap:8px;}
.card-body{padding:20px;}

.alert-list{display:flex;flex-direction:column;gap:8px;}
.alert-item{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:8px;background:var(--tc-gray);}
.alert-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:4px;}
.alert-dot.red{background:var(--tc-red);}
.alert-dot.yellow{background:var(--tc-yellow);}
.alert-dot.green{background:var(--tc-green);}
.alert-dot.blue{background:var(--tc-blue-light);}
.alert-text{font-size:.84rem;line-height:1.4;white-space:pre-line;}
.alert-text strong{display:block;font-weight:600;}
.alert-time{font-size:.72rem;color:var(--tc-gray-dark);}

.deadline-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--tc-gray);}
.deadline-item:last-child{border:none;}
.deadline-avatar{width:32px;height:32px;border-radius:50%;background:var(--tc-blue-pale);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;color:var(--tc-blue);flex-shrink:0;}
.deadline-info{flex:1;}
.deadline-name{font-size:.85rem;font-weight:600;}
.deadline-desc{font-size:.75rem;color:var(--tc-gray-dark);}
.deadline-tag{font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap;}
.deadline-tag.overdue{background:var(--tc-red-light);color:var(--tc-red);}
.deadline-tag.soon{background:var(--tc-yellow-light);color:var(--tc-yellow);}
.deadline-tag.ok{background:var(--tc-green-light);color:var(--tc-green);}

.search-bar{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;}
.search-bar input{flex:1;min-width:200px;padding:11px 16px;border:2px solid var(--tc-gray-mid);border-radius:8px;font-family:'Barlow',sans-serif;font-size:.95rem;}
.search-bar input:focus{outline:none;border-color:var(--tc-blue-light);}
.search-bar select{padding:11px 14px;border:2px solid var(--tc-gray-mid);border-radius:8px;font-family:'Barlow',sans-serif;font-size:.88rem;background:white;}
.btn-secondary{padding:10px 18px;background:var(--tc-blue-pale);color:var(--tc-blue);border:none;border-radius:8px;font-family:'Barlow',sans-serif;font-size:.88rem;font-weight:700;cursor:pointer;transition:.15s;display:flex;align-items:center;gap:6px;}
.btn-secondary:hover{background:var(--tc-blue);color:white;}
/* Knapp som venter på AI eller annet tregt arbeid (medOpptattKnapp i app.js). */
.knapp-opptatt,.knapp-opptatt:hover{cursor:progress;opacity:.75;}
.btn-secondary.knapp-opptatt:hover{background:var(--tc-blue-pale);color:var(--tc-blue);}
.knapp-spinner{display:inline-block;flex:none;width:.95em;height:.95em;vertical-align:-.12em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:knappSpinn .75s linear infinite;}
@keyframes knappSpinn{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){.knapp-spinner{animation-duration:2.5s;}}
.chemical-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
.chemical-card{background:white;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;cursor:pointer;transition:.2s;border:2px solid transparent;}
.chemical-card:hover{border-color:var(--tc-blue-light);transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.chemical-card-header{padding:14px 16px;display:flex;align-items:center;gap:12px;}
.hazard-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;}
.hazard-icon.red{background:var(--tc-red-light);}
.hazard-icon.yellow{background:var(--tc-yellow-light);}
.hazard-icon.orange{background:var(--tc-orange-light);}
.hazard-icon.blue{background:var(--tc-blue-pale);}
.chem-name{font-size:.95rem;font-weight:700;}
.chem-cas{font-size:.75rem;color:var(--tc-gray-dark);}
.chemical-card-body{padding:0 16px 14px;display:flex;flex-wrap:wrap;gap:6px;}
.tag{font-size:.72rem;font-weight:600;padding:3px 8px;border-radius:20px;background:var(--tc-gray);}
.tag.danger{background:var(--tc-red-light);color:var(--tc-red);}
.tag.warning{background:var(--tc-yellow-light);color:var(--tc-yellow);}
.tag.info{background:var(--tc-blue-pale);color:var(--tc-blue);}
.tag.ok{background:var(--tc-green-light);color:var(--tc-green);}

.modal-overlay{position:fixed;inset:0;background:rgba(10,30,60,.5);z-index:500;display:none;align-items:center;justify-content:center;padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:white;border-radius:16px;width:100%;max-width:700px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(10,61,124,.25);}
.modal.narrow{max-width:480px;}
.modal-header{padding:20px 24px;border-bottom:1px solid var(--tc-gray);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:white;z-index:1;}
.modal-header h3{font-size:1.1rem;font-weight:700;color:var(--tc-blue);}
.modal-close{width:32px;height:32px;border:none;background:var(--tc-gray);border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;}
.modal-body{padding:24px;}
.info-section{margin-bottom:20px;}
.info-section h4{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--tc-blue);margin-bottom:10px;padding-bottom:6px;border-bottom:2px solid var(--tc-blue-pale);}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.info-item{background:var(--tc-gray);padding:10px 12px;border-radius:8px;}
.info-item-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--tc-gray-dark);margin-bottom:2px;}
.info-item-value{font-size:.88rem;font-weight:500;}
.action-box{border-radius:8px;padding:12px 14px;margin-top:10px;}
.action-box.red{background:var(--tc-red-light);border-left:4px solid var(--tc-red);}
.action-box.yellow{background:var(--tc-yellow-light);border-left:4px solid var(--tc-yellow);}
.action-box.blue{background:var(--tc-blue-pale);border-left:4px solid var(--tc-blue);}
.action-box h5{font-size:.82rem;font-weight:700;margin-bottom:4px;}
.action-box p{font-size:.82rem;line-height:1.5;white-space:pre-line;}
/* Brannvaktens signatur paa en arbeidstillatelse for varme arbeider. En PAPIRSIGNATUR skal aldri
   se ut som en signatur personen selv har gitt i Sikros: stiplet ramme og gul, ikke gronn. */
.va-signatur-ekte,.va-papirsignatur,.va-signatur-mangler{font-size:.8rem;line-height:1.45;border-radius:8px;padding:8px 10px;margin:8px 0;}
.va-signatur-ekte{background:var(--tc-green-light,#E8F6EE);border:1px solid var(--tc-green,#17643A);}
.va-papirsignatur{background:var(--tc-yellow-light);border:1px dashed var(--tc-yellow-dark,#7A5300);}
.va-signatur-mangler{background:var(--tc-gray);border:1px solid var(--tc-gray-mid);color:var(--tc-gray-dark);}
.etat-list{display:flex;flex-direction:column;gap:8px;}
.etat-item{display:flex;align-items:center;gap:10px;background:var(--tc-gray);padding:10px 12px;border-radius:8px;}
.etat-item a{color:var(--tc-blue);font-weight:600;font-size:.85rem;text-decoration:none;}
.etat-item a:hover{text-decoration:underline;}
.etat-label{font-size:.75rem;color:var(--tc-gray-dark);}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.form-row.full{grid-template-columns:1fr;}
textarea{width:100%;padding:11px 14px;border:2px solid var(--tc-gray-mid);border-radius:8px;font-family:'Barlow',sans-serif;font-size:.95rem;resize:vertical;min-height:90px;}
textarea:focus{outline:none;border-color:var(--tc-blue-light);}
.severity-selector{display:flex;gap:8px;margin-bottom:20px;}
.severity-opt{flex:1;padding:10px;border:2px solid var(--tc-gray-mid);border-radius:8px;text-align:center;cursor:pointer;transition:.15s;}
.severity-opt .sev-icon{font-size:1.4rem;display:block;margin-bottom:4px;}
.severity-opt .sev-label{font-size:.75rem;font-weight:700;}
.severity-opt.selected.green{border-color:var(--tc-green);background:var(--tc-green-light);}
.severity-opt.selected.yellow{border-color:var(--tc-yellow);background:var(--tc-yellow-light);}
.severity-opt.selected.orange{border-color:var(--tc-orange);background:var(--tc-orange-light);}
.severity-opt.selected.red{border-color:var(--tc-red);background:var(--tc-red-light);}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;}
.btn-danger{padding:11px 22px;background:var(--tc-red);color:white;border:none;border-radius:8px;font-family:'Barlow',sans-serif;font-size:.92rem;font-weight:700;cursor:pointer;}
.btn-success{padding:11px 22px;background:var(--tc-green);color:white;border:none;border-radius:8px;font-family:'Barlow',sans-serif;font-size:.92rem;font-weight:700;cursor:pointer;}
.checkbox-row{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
.checkbox-row input{width:18px;height:18px;}
.checkbox-row label{font-size:.88rem;font-weight:600;}
/* Står i stedet for dødsfall/personskade når typen er nestenulykke (synkNestenulykke i app.js). */
.nesten-hint{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:16px;font-size:.84rem;color:var(--tc-gray-dark);}
.nesten-hint .btn-secondary{padding:7px 12px;font-size:.8rem;}

.ai-container{display:flex;flex-direction:column;height:calc(100vh - var(--header-h) - 80px);}
.ai-header{background:white;border-radius:var(--radius) var(--radius) 0 0;padding:16px 20px;border-bottom:1px solid var(--tc-gray);display:flex;align-items:center;gap:12px;}
.ai-avatar{width:40px;height:40px;background:var(--tc-blue);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:1.1rem;flex-shrink:0;}
.ai-status{width:8px;height:8px;background:var(--tc-green);border-radius:50%;display:inline-block;margin-right:4px;}
.ai-messages{flex:1;overflow-y:auto;padding:20px;background:var(--tc-gray);display:flex;flex-direction:column;gap:14px;}
.msg{max-width:80%;display:flex;flex-direction:column;gap:4px;}
.msg.self{align-self:flex-end;align-items:flex-end;}
.msg.other{align-self:flex-start;align-items:flex-start;}
.msg-bubble{padding:12px 16px;border-radius:14px;font-size:.88rem;line-height:1.55;}
.msg.self .msg-bubble{background:var(--tc-blue);color:white;border-radius:14px 14px 2px 14px;}
.msg.other .msg-bubble{background:white;color:var(--tc-text);border-radius:14px 14px 14px 2px;box-shadow:var(--shadow);}
.msg-time{font-size:.68rem;color:var(--tc-gray-dark);}
.msg-author{font-size:.72rem;font-weight:700;color:var(--tc-blue);}
.ai-input-row{display:flex;gap:8px;padding:12px 20px;background:white;border-radius:0 0 var(--radius) var(--radius);border-top:1px solid var(--tc-gray);}
.ai-input-row input{flex:1;padding:10px 14px;border:2px solid var(--tc-gray-mid);border-radius:8px;font-family:'Barlow',sans-serif;font-size:.92rem;}
.ai-input-row input:focus{outline:none;border-color:var(--tc-blue-light);}
.send-btn{padding:10px 18px;background:var(--tc-blue);color:white;border:none;border-radius:8px;font-family:'Barlow',sans-serif;font-size:.88rem;font-weight:700;cursor:pointer;transition:.15s;}
.send-btn:hover{background:var(--tc-blue-mid);}

.law-card{background:white;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden;}
.law-card-header{padding:14px 18px;display:flex;align-items:center;gap:12px;cursor:pointer;background:white;transition:.15s;}
.law-card-header:hover{background:var(--tc-blue-pale);}
.law-card-header h4{font-size:.92rem;font-weight:700;flex:1;}
.law-category{font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:20px;background:var(--tc-blue-pale);color:var(--tc-blue);}
.law-card-body{display:none;padding:0 18px 16px;font-size:.85rem;line-height:1.6;color:var(--tc-gray-dark);}
.law-card-body.open{display:block;}
.law-card-body a{color:var(--tc-blue);font-weight:600;}

.notif-panel{position:fixed;top:var(--header-h);right:0;width:360px;background:white;box-shadow:var(--shadow-lg);border-left:1px solid var(--tc-gray-mid);z-index:200;transform:translateX(100%);transition:.3s;max-height:calc(100vh - var(--header-h));overflow-y:auto;}
.notif-panel.open{transform:translateX(0);}
.notif-header{padding:16px 20px;border-bottom:1px solid var(--tc-gray);display:flex;align-items:center;justify-content:space-between;}
.notif-header h3{font-size:.95rem;font-weight:700;color:var(--tc-blue);}
.notif-list{padding:10px;}
.notif-item{padding:12px;border-radius:8px;background:var(--tc-gray);margin-bottom:8px;cursor:pointer;}
.notif-item.unread{background:var(--tc-blue-pale);border-left:3px solid var(--tc-blue);}
.notif-item.critical{border-left:3px solid var(--tc-red);background:var(--tc-red-light);}
.notif-item h5{font-size:.83rem;font-weight:700;margin-bottom:2px;}
.notif-item p{font-size:.77rem;color:var(--tc-gray-dark);line-height:1.4;white-space:pre-line;}
.notif-item .notif-time{font-size:.68rem;color:var(--tc-gray-dark);margin-top:4px;}

.report-table{width:100%;border-collapse:collapse;font-size:.86rem;}
.report-table th{text-align:left;padding:10px 14px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--tc-gray-dark);border-bottom:2px solid var(--tc-gray);}
.report-table td{padding:12px 14px;border-bottom:1px solid var(--tc-gray);vertical-align:top;}
.report-table tr:hover td{background:var(--tc-blue-pale);}
.status-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:700;}
.status-pill.open{background:var(--tc-red-light);color:var(--tc-red);}
.status-pill.progress{background:var(--tc-yellow-light);color:var(--tc-yellow);}
.status-pill.closed{background:var(--tc-green-light);color:var(--tc-green);}
.status-pill.active{background:var(--tc-blue-pale);color:var(--tc-blue);}
.status-pill.pending{background:var(--tc-yellow-light);color:var(--tc-yellow);}
.status-pill.disabled{background:var(--tc-gray);color:var(--tc-gray-dark);}

.toast{position:fixed;bottom:24px;right:24px;background:var(--tc-blue);color:white;padding:14px 20px;border-radius:10px;box-shadow:var(--shadow-lg);font-size:.88rem;font-weight:600;z-index:9999;transform:translateY(100px);opacity:0;transition:.3s;max-width:340px;}
.toast.show{transform:translateY(0);opacity:1;}
.toast.green{background:var(--tc-green);}
.toast.red{background:var(--tc-red);}

.split{display:grid;grid-template-columns:1fr 1.2fr;gap:16px;}
.split-narrow{display:grid;grid-template-columns:280px 1fr;gap:16px;}

.hamburger{display:none;width:38px;height:38px;background:none;border:none;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;}
.hamburger span{width:22px;height:2px;background:var(--tc-blue);border-radius:2px;}
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .main-wrap{margin-left:0;}
  .hamburger{display:flex;}
  .dashboard-grid{grid-template-columns:1fr 1fr;}
  .dashboard-row{grid-template-columns:1fr;}
  .info-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .chemical-grid{grid-template-columns:1fr 1fr;}
  .split,.split-narrow{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .dashboard-grid{grid-template-columns:1fr;}
  .chemical-grid{grid-template-columns:1fr;}
  .content{padding:16px;}
  .modal{border-radius:12px;}
}

.wizard-progress{display:flex;gap:4px;margin-bottom:20px;}
.wizard-progress span{flex:1;height:4px;border-radius:2px;background:var(--tc-gray-mid);}
.wizard-progress span.done{background:var(--tc-blue);}
.wizard-question{font-size:1.05rem;font-weight:700;color:var(--tc-blue);margin-bottom:16px;}
.wizard-options{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
.wizard-opt{padding:12px 16px;border:2px solid var(--tc-gray-mid);border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:600;transition:.15s;}
.wizard-opt:hover{border-color:var(--tc-blue-light);background:var(--tc-blue-pale);}
.wizard-bool-row{display:flex;gap:10px;margin-bottom:20px;}
.wizard-bool-row button{flex:1;padding:14px;border:2px solid var(--tc-gray-mid);border-radius:8px;font-weight:700;cursor:pointer;background:white;}
.wizard-bool-row button.yes:hover{border-color:var(--tc-red);background:var(--tc-red-light);}
.wizard-bool-row button.no:hover{border-color:var(--tc-green);background:var(--tc-green-light);}
.wizard-result{padding:16px;background:var(--tc-green-light);border-left:4px solid var(--tc-green);border-radius:8px;}

/* ── PMS HOLDING (systemleverandørens eget, firmaløse dashboard) ── */
#pmsHolding{min-height:100vh;background:var(--tc-gray);}
.pms-header{background:linear-gradient(160deg,var(--tc-blue) 0%,var(--tc-blue-mid) 70%,#31497B 100%);padding:0 28px;}
.pms-header-inner{max-width:1180px;margin:0 auto;height:70px;display:flex;align-items:center;justify-content:space-between;}
.pms-brand{display:flex;align-items:baseline;gap:10px;font-size:1.3rem;font-weight:800;color:white;font-family:'Barlow Condensed',sans-serif;letter-spacing:.3px;}
.pms-brand small{font-size:.72rem;font-weight:500;color:rgba(255,255,255,.6);letter-spacing:.4px;text-transform:uppercase;}
.pms-body{max-width:1180px;margin:0 auto;padding:28px;}
.pms-firma-row{border-bottom:1px solid var(--tc-gray);padding:16px 0;display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;justify-content:space-between;}
.pms-firma-row:last-child{border-bottom:none;}
.pms-firma-name{font-size:1rem;font-weight:700;color:var(--tc-blue);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pms-firma-meta{font-size:.78rem;color:var(--tc-gray-dark);margin-top:4px;line-height:1.6;}
.pms-firma-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.pms-firma-actions button{padding:7px 12px;font-size:.8rem;}
.pms-orgpick{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto;margin:14px 0;padding:4px;border:1px solid var(--tc-gray-mid);border-radius:8px;}
.pms-orgpick label{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;font-size:.88rem;font-weight:600;cursor:pointer;}
.pms-orgpick label:hover{background:var(--tc-gray);}
.pms-orgpick input{width:16px;height:16px;}
.pms-rutine-row{padding:10px 0;border-bottom:1px solid var(--tc-gray);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.pms-rutine-row:last-child{border-bottom:none;}
.pms-rutine-title{font-weight:700;font-size:.88rem;color:var(--tc-text);}
.pms-rutine-org{font-size:.72rem;color:var(--tc-gray-dark);text-transform:uppercase;letter-spacing:.4px;}
@media(max-width:700px){
  .pms-header-inner{flex-direction:column;height:auto;padding:14px 0;gap:10px;}
  .pms-body{padding:16px;}
  .pms-firma-row{flex-direction:column;}
}

/* Forenklet startmeny for teknikere – tre store handlinger + samlet "Administrativt"-felt.
   Se enterApp() i app.js: gjelder KUN role==='tekniker', uendret for alle andre roller. */
.hero-action{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px;border-radius:var(--radius);border:none;cursor:pointer;font-family:inherit;background:white;box-shadow:var(--shadow);margin-bottom:10px;}
.hero-action:active{transform:scale(.98);}
.hero-action .hero-icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0;background:var(--tc-blue-pale);}
.hero-action .hero-label{font-size:.95rem;font-weight:700;margin:0;color:var(--tc-text);}
.hero-action .hero-sub{font-size:.78rem;margin:2px 0 0;color:var(--tc-gray-dark);}
.hero-action.primary{background:var(--tc-orange);}
.hero-action.primary .hero-icon{background:rgba(255,255,255,.22);}
.hero-action.primary .hero-label,.hero-action.primary .hero-sub{color:white;}
.hero-action.primary .hero-sub{opacity:.9;}

.admin-toggle{display:flex;align-items:center;justify-content:space-between;}
.admin-toggle .chev{font-size:.75rem;transition:transform .2s ease;opacity:.6;}
.admin-toggle.open .chev{transform:rotate(180deg);}
.sidebar-admin-panel{max-height:0;overflow:hidden;transition:max-height .28s ease;}

.sb-oversikt{padding:6px 8px 4px;}
.sb-oversikt-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px;}
.sb-oversikt-card{background:rgba(255,255,255,.06);border-radius:8px;padding:8px 10px;cursor:pointer;}
.sb-oversikt-card:hover{background:rgba(255,255,255,.1);}
.sb-oversikt-card .k{font-size:.66rem;color:rgba(255,255,255,.55);margin:0;}
.sb-oversikt-card .v{font-size:1rem;font-weight:700;margin:2px 0 0;color:white;}
.sb-oversikt-avvik{grid-column:1/-1;background:rgba(255,255,255,.06);border-radius:8px;padding:8px 10px;cursor:pointer;margin-bottom:10px;}
.sb-oversikt-avvik:hover{background:rgba(255,255,255,.1);}
.sb-oversikt-avvik .k{font-size:.66rem;color:rgba(255,255,255,.55);margin:0 0 3px;}
.sb-oversikt-avvik .t{font-size:.78rem;color:white;}

/* ══════════ PROSJEKTMAPPE — restylet 2026-08-27 etter Pers godkjente mockup ══════════
   Skin på KUN prosjektmodulens fire modaler (Per: "Tenker kun nytt skin på prosjektmodulen.
   Resten kan være"). Gjenbruker de samme klassenavnene (.info-section/.deadline-item/.tag/
   .btn-primary osv.) som resten av appen allerede bruker der de finnes ~30-80 andre steder —
   derfor er ALT her skopet under #mappeModal/#deltakerPickerModal/#vernerundeModal, aldri en
   ren klasseoverstyring, så ingen andre sider berøres. */
#mappeModal, #deltakerPickerModal, #vernerundeModal {
  --pj-shadow: 0 4px 20px rgba(15,23,42,.08);
  --pj-shadow-lg: 0 20px 60px rgba(15,23,42,.22);
  --pj-surface-2: #F4F6FA;
  --pj-radius: 14px;
}
#mappeModal .modal, #deltakerPickerModal .modal, #vernerundeModal .modal { border-radius: 20px; box-shadow: var(--pj-shadow-lg); }

/* — Pagehead: mørk hero-header i stedet for den vanlige, flate modal-tittelen — */
#mappeModal .modal-header{ display: block; padding: 0; background: var(--tc-blue); border-radius: 20px 20px 0 0; }
#mappeModal .pj-pagehead{ position: relative; padding: 20px 56px 20px 24px; }
#mappeModal .pj-pagehead .pj-eyebrow{ font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: #9FB1D6; font-weight: 700; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#mappeModal .pj-pagehead .pj-eyebrow input{ width: 128px; padding: 3px 8px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; border-radius: 6px; border: 1.5px solid rgba(255,255,255,.28); background: rgba(255,255,255,.1); color: #fff; }
#mappeModal .pj-pagehead .pj-eyebrow input::placeholder{ color: #9FB1D6; }
#mappeModal .pj-pagehead .pj-eyebrow input:focus{ outline: none; border-color: var(--tc-orange); background: rgba(255,255,255,.16); }
/* Prosjekt fra KlimaOS: hvor det kommer fra og hva som skal gjøres (prosjektsynk trinn 2). */
#mappeModal .pj-pagehead .pj-eyebrow .pj-kilde{ padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font-size: .66rem; letter-spacing: .05em; }
#mappeModal .pj-pagehead h3{ font-size: 1.35rem; font-weight: 700; color: #fff; margin: 0; line-height: 1.2; }
#mappeModal .pj-pagehead .pj-sub{ font-size: .8rem; color: #C3CEE8; margin: 5px 0 0; }
#mappeModal .modal-close{ position: absolute; top: 18px; right: 18px; background: rgba(255,255,255,.12); color: #fff; }
#mappeModal .modal-close:hover{ background: rgba(255,255,255,.22); }
#mappeModal .modal-body{ background: var(--pj-surface-2); padding: 20px; border-radius: 0 0 20px 20px; }

/* — Kort i stedet for flate seksjoner — */
#mappeModal .info-section{ background: var(--tc-white); border: 1px solid var(--tc-gray-mid); border-radius: var(--pj-radius); box-shadow: var(--pj-shadow); padding: 18px 20px; margin-bottom: 16px; }
#mappeModal .info-section h4{ font-size: .98rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--tc-text); border-bottom: none; padding-bottom: 0; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
#mappeModal .info-section > p:first-of-type{ margin-bottom: 14px; }

/* — Skjemafelt — */
#mappeModal .form-group label, #deltakerPickerModal .form-group label{ font-size: .72rem; letter-spacing: .03em; color: var(--tc-gray-dark); margin-bottom: 5px; }
#mappeModal .form-group input[type=text], #mappeModal .form-group input[type=date], #mappeModal select, #mappeModal textarea,
#deltakerPickerModal .form-group input, #deltakerPickerModal select{
  border-radius: 9px; border: 1.5px solid var(--tc-gray-mid); background: var(--pj-surface-2); padding: 9px 11px; font-size: .88rem;
}
#mappeModal .form-group input:focus, #mappeModal select:focus, #mappeModal textarea:focus,
#deltakerPickerModal .form-group input:focus{ border-color: var(--tc-orange); background: var(--tc-white); }
#mappeModal textarea{ line-height: 1.5; }

/* — Knapper: mykere og mer kompakte, samme skin i alle tre modalene. Oransje som primærfarge
   (som i mockupen) i stedet for appens vanlige marineblå .btn-primary – gir samme hierarki som
   mockupen brukte: marine i den strukturelle hero-headeren, oransje på det du faktisk trykker på. */
#mappeModal .btn-primary, #deltakerPickerModal .btn-primary, #vernerundeModal .btn-primary{
  width: auto; padding: 10px 18px; border-radius: 10px; font-size: .88rem; letter-spacing: 0; background: var(--tc-orange);
}
#mappeModal .btn-primary:hover, #deltakerPickerModal .btn-primary:hover, #vernerundeModal .btn-primary:hover{ background: #C2410C; }
#mappeModal .btn-secondary, #deltakerPickerModal .btn-secondary, #vernerundeModal .btn-secondary{ padding: 9px 15px; border-radius: 10px; font-size: .82rem; border: 1.5px solid var(--tc-gray-mid); background: var(--pj-surface-2); }
#mappeModal .btn-secondary:hover, #deltakerPickerModal .btn-secondary:hover, #vernerundeModal .btn-secondary:hover{ background: var(--tc-blue-pale); color: var(--tc-blue); }
#mappeModal > div > .btn-secondary:first-child, #mappeModal .modal-body > div:first-child .btn-secondary{ background: var(--tc-white); }
#deltakerPickerModal .action-box, #vernerundeModal .action-box{ background: var(--pj-surface-2); border-radius: 10px; border-left: none; }
#deltakerPickerModal .action-box.blue{ background: var(--tc-blue-pale); }

/* — Deltakere: avatar-initialer, samme mønster som mockupen — */
#mappeModal .deadline-item{ padding: 11px 0; align-items: center; }
#mappeModal .pj-avatar{ width: 30px; height: 30px; border-radius: 50%; background: var(--tc-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 700; flex-shrink: 0; margin-right: 10px; }
#mappeModal .pj-avatar.ekstern{ background: var(--tc-blue-pale); color: var(--tc-blue); }
#mappeModal .deadline-item{ display: flex; }

/* — SJA/AI-bokser: mykere, uten venstre fargekant — */
#mappeModal .action-box{ background: var(--pj-surface-2); border-radius: 10px; border-left: none; padding: 14px 16px; }
#mappeModal .action-box.blue{ background: var(--tc-blue-pale); }

/* — Risikotabell — */
#mappeModal .report-table{ font-size: .84rem; }
#mappeModal .report-table th{ font-size: .68rem; border-bottom: 1.5px solid var(--tc-gray-mid); padding: 6px 10px; }
#mappeModal .report-table td{ padding: 9px 10px; }
#mappeModal .report-table tr:hover td{ background: var(--pj-surface-2); }
#mappeModal .status-pill{ min-width: 30px; justify-content: center; font-variant-numeric: tabular-nums; }

/* — Prosjektmal-dropdown og lignende sekundærbokser beholder litt luft — */
#mappeModal details summary{ padding: 4px 0; }

/* — Deltaker-velger: bunn-ark (bottom sheet) med fane-knapper, som i mockupen — */
#deltakerPickerModal{ align-items: flex-end; padding: 0; }
#deltakerPickerModal .modal{ border-radius: 20px 20px 0 0; max-height: 82vh; width: 100%; max-width: 440px; margin: 0 auto; }
#deltakerPickerModal .modal-header{ padding: 16px 20px 4px; border-bottom: none; }
#deltakerPickerModal .modal-body{ padding: 8px 20px 20px; }
#deltakerPickerModal #dpFaneAnsatte, #deltakerPickerModal #dpFaneEkstern{
  flex: 1; border-radius: 9px; padding: 9px; font-size: .8rem; justify-content: center;
}
#deltakerPickerModal #dpSok{ border-radius: 9px; border: 1.5px solid var(--tc-gray-mid); padding: 9px 11px; width: 100%; margin-bottom: 8px; }
#deltakerPickerModal .deadline-item{ border-radius: 9px; padding: 9px 8px; margin: 0 -8px; }
#deltakerPickerModal .deadline-item:hover{ background: var(--pj-surface-2); }

/* — Vernerunde-modal: litt luftigere punktliste — */
#vernerundeModal .vr-punkt{ padding: 12px 0 !important; }
#vernerundeModal .vr-status{ border-radius: 8px; }
/* Valget ved hvert punkt har farge etter svaret: grønn OK, gul ikke aktuelt, rød avvik (vrFarge() i app.js) */
#vernerundeModal select.vr-valg-ok,
#vernerundeModal select.vr-valg-na,
#vernerundeModal select.vr-valg-avvik{ border: 1.5px solid; border-radius: 8px; font-weight: 700; }
#vernerundeModal select.vr-valg-ok{ background-color: var(--tc-green-light); border-color: var(--tc-green); color: #14532D; }
#vernerundeModal select.vr-valg-na{ background-color: var(--tc-yellow-light); border-color: var(--tc-yellow); color: #78350F; }
#vernerundeModal select.vr-valg-avvik{ background-color: var(--tc-red-light); border-color: var(--tc-red); color: #7F1D1D; }
.vr-fargeforklaring{ display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .76rem; color: var(--tc-gray-dark); margin: 14px 0 0; }
.vr-fargeforklaring > span{ display: inline-flex; align-items: center; gap: 6px; }
.vr-prikk{ display: inline-block; width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid; flex-shrink: 0; }
.vr-prikk.ok{ background: var(--tc-green-light); border-color: var(--tc-green); }
.vr-prikk.na{ background: var(--tc-yellow-light); border-color: var(--tc-yellow); }
.vr-prikk.avvik{ background: var(--tc-red-light); border-color: var(--tc-red); }
#vernerundeModal .vr-merknad{ border-radius: 8px; border: 1.5px solid var(--tc-gray-mid); padding: 8px 10px; width: 100%; }

/* ══════════ ARBEIDSTILSYNET-SIDEN — samme visuelle stil som prosjektmodul-reskinet ══════════
   (mockup godkjent av Per 2026-08-27). Alt skopet under #page-arbeidstilsynet, aldri globale
   klasseoverstyringer — samme disiplin som #mappeModal-blokken over. */
#page-arbeidstilsynet { --at-shadow: 0 4px 20px rgba(15,23,42,.08); --at-surface-2: #F4F6FA; }
#page-arbeidstilsynet .at-pagehead{ background: var(--tc-blue); color: #fff; border-radius: 18px; padding: 22px 24px; margin-bottom: 16px; }
#page-arbeidstilsynet .at-eyebrow{ font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: #9FB1D6; font-weight: 700; margin: 0 0 6px; }
#page-arbeidstilsynet .at-pagehead h3{ font-size: 1.35rem; font-weight: 700; color: #fff; margin: 0; }
#page-arbeidstilsynet .at-sub{ font-size: .82rem; color: #C3CEE8; margin: 6px 0 0; line-height: 1.5; max-width: 540px; }
#page-arbeidstilsynet .at-access{ display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.08); border-radius: 10px; padding: 10px 14px; margin-top: 14px; flex-wrap: wrap; }
#page-arbeidstilsynet .at-access .at-who{ display: flex; align-items: center; gap: 8px; font-size: .78rem; color: #fff; }
#page-arbeidstilsynet .at-access .at-av{ width: 22px; height: 22px; border-radius: 50%; background: var(--tc-orange); display: inline-flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 700; flex-shrink: 0; }
#page-arbeidstilsynet .at-access .at-alltid{ font-size: .66rem; color: #9FB1D6; }
#page-arbeidstilsynet .at-toggle-row{ display: flex; align-items: center; gap: 8px; margin-left: auto; }
#page-arbeidstilsynet .at-toggle-label{ font-size: .74rem; color: #C3CEE8; }
#page-arbeidstilsynet .at-toggle{ width: 38px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.22); position: relative; cursor: pointer; flex-shrink: 0; transition: background .15s; border: none; padding: 0; }
#page-arbeidstilsynet .at-toggle.on{ background: var(--tc-orange); }
#page-arbeidstilsynet .at-toggle .at-knob{ position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
#page-arbeidstilsynet .at-toggle.on .at-knob{ left: 18px; }
#page-arbeidstilsynet .at-stats, #page-tilgangslogg .at-stats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
#page-arbeidstilsynet .at-stat, #page-tilgangslogg .at-stat{ background: var(--tc-white); border: 1px solid var(--tc-gray-mid); border-radius: 12px; padding: 13px; box-shadow: var(--at-shadow); }
#page-arbeidstilsynet .at-stat .n, #page-tilgangslogg .at-stat .n{ font-size: 1.4rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
#page-arbeidstilsynet .at-stat .l, #page-tilgangslogg .at-stat .l{ font-size: .68rem; color: var(--tc-gray-dark); margin-top: 5px; line-height: 1.3; }
#page-arbeidstilsynet .at-stat.ok .n, #page-tilgangslogg .at-stat.ok .n{ color: #16A34A; }
#page-arbeidstilsynet .at-stat.warn .n, #page-tilgangslogg .at-stat.warn .n{ color: #D97706; }
#page-arbeidstilsynet .at-stat.crit .n, #page-tilgangslogg .at-stat.crit .n{ color: #DC2626; }
#page-arbeidstilsynet .at-modes{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
#page-arbeidstilsynet .at-mode{ background: var(--tc-white); border: 1px solid var(--tc-gray-mid); border-radius: 14px; box-shadow: var(--at-shadow); padding: 15px 16px; cursor: pointer; transition: transform .12s, box-shadow .12s; }
#page-arbeidstilsynet .at-mode:hover{ transform: translateY(-2px); }
#page-arbeidstilsynet .at-mode.active{ border-color: var(--tc-orange); box-shadow: 0 0 0 2px var(--tc-orange); }
#page-arbeidstilsynet .at-mode-ic{ width: 34px; height: 34px; border-radius: 10px; background: #FFEDD5; display: flex; align-items: center; justify-content: center; font-size: 1rem; margin-bottom: 8px; }
#page-arbeidstilsynet .at-mode h4{ font-size: .88rem; font-weight: 700; margin: 0 0 3px; }
#page-arbeidstilsynet .at-mode p{ font-size: .72rem; color: var(--tc-gray-dark); margin: 0; line-height: 1.45; }
#page-arbeidstilsynet .at-card{ background: var(--tc-white); border: 1px solid var(--tc-gray-mid); border-radius: 14px; box-shadow: var(--at-shadow); padding: 18px 20px; margin-bottom: 16px; }
#page-arbeidstilsynet .at-card h4{ font-size: .95rem; margin: 0 0 4px; }
#page-arbeidstilsynet .at-lede{ font-size: .78rem; color: var(--tc-gray-dark); margin: 0 0 12px; line-height: 1.5; }
#page-arbeidstilsynet .at-sakliste{ display: flex; flex-direction: column; gap: 5px; max-height: 260px; overflow-y: auto; }
#page-arbeidstilsynet .at-sakrad{ display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; border: 1.5px solid transparent; }
#page-arbeidstilsynet .at-sakrad:hover{ background: var(--at-surface-2); }
#page-arbeidstilsynet .at-sakrad.valgt{ background: #FFEDD5; border-color: var(--tc-orange); }
#page-arbeidstilsynet .at-sev{ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
#page-arbeidstilsynet .at-sev.green{ background: #16A34A; } #page-arbeidstilsynet .at-sev.yellow{ background: #D97706; }
#page-arbeidstilsynet .at-sev.orange{ background: #EA580C; } #page-arbeidstilsynet .at-sev.red{ background: #DC2626; }
#page-arbeidstilsynet .at-sakrad .txt{ flex: 1; font-size: .78rem; min-width: 0; }
#page-arbeidstilsynet .at-sakrad .d{ font-size: .66rem; color: var(--tc-gray-dark); white-space: nowrap; }
#page-arbeidstilsynet .at-btn-block{ width: 100%; margin-top: 12px; padding: 12px; }
#page-arbeidstilsynet .at-btn-block:disabled{ opacity: .5; cursor: not-allowed; }
#page-arbeidstilsynet .at-period-row{ display: flex; gap: 8px; margin-bottom: 10px; }
#page-arbeidstilsynet .at-period{ flex: 1; text-align: center; font-size: .76rem; font-weight: 600; padding: 9px; border-radius: 9px; border: 1.5px solid var(--tc-gray-mid); background: var(--at-surface-2); color: var(--tc-gray-dark); cursor: pointer; font-family: inherit; }
#page-arbeidstilsynet .at-period.active{ background: var(--tc-blue); border-color: var(--tc-blue); color: #fff; }
#page-arbeidstilsynet .at-period-custom{ display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; margin-bottom: 10px; }
#page-arbeidstilsynet .at-period-custom label{ font-size: .7rem; color: var(--tc-gray-dark); display: block; }
#page-arbeidstilsynet .at-kpi-row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
#page-arbeidstilsynet .at-kpi{ background: var(--at-surface-2); border-radius: 10px; padding: 12px; text-align: center; }
#page-arbeidstilsynet .at-kpi .n{ font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
#page-arbeidstilsynet .at-kpi .l{ font-size: .66rem; color: var(--tc-gray-dark); margin-top: 3px; }
#page-arbeidstilsynet .at-chartbox{ background: var(--at-surface-2); border-radius: 10px; padding: 13px 15px; margin-bottom: 10px; }
#page-arbeidstilsynet .at-chartbox .tit{ font-size: .74rem; color: var(--tc-gray-dark); font-weight: 600; margin: 0 0 9px; }
#page-arbeidstilsynet .at-chartrow{ display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#page-arbeidstilsynet .at-chartlabel{ width: 130px; font-size: .72rem; text-align: right; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#page-arbeidstilsynet .at-charttrack{ flex: 1; height: 14px; background: rgba(15,23,42,.06); border-radius: 7px; overflow: hidden; }
#page-arbeidstilsynet .at-chartfill{ height: 100%; border-radius: 7px; min-width: 2px; }
#page-arbeidstilsynet .at-chartval{ width: 26px; font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
#page-arbeidstilsynet .at-trend{ display: flex; align-items: flex-end; gap: 4px; height: 70px; }
#page-arbeidstilsynet .at-trendbar{ flex: 1; background: var(--tc-blue); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
#page-arbeidstilsynet .at-trendlabels{ display: flex; gap: 4px; margin-top: 4px; }
#page-arbeidstilsynet .at-trendlabels span{ flex: 1; text-align: center; font-size: .58rem; color: var(--tc-gray-dark); overflow: hidden; }
#page-arbeidstilsynet .at-dokrad{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--tc-gray-mid); font-size: .8rem; }
#page-arbeidstilsynet .at-dokrad:last-child{ border-bottom: none; }
#page-arbeidstilsynet .at-tag{ font-size: .64rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
#page-arbeidstilsynet .at-tag.ok{ background: #DCFCE7; color: #166534; }
#page-arbeidstilsynet .at-tag.warn{ background: #FEF3C7; color: #92400E; }
#page-arbeidstilsynet .at-tag.crit{ background: #FEE2E2; color: #991B1B; }
#page-arbeidstilsynet .at-tsrad{ display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--tc-gray-mid); align-items: flex-start; }
#page-arbeidstilsynet .at-tsrad:last-child{ border-bottom: none; }
#page-arbeidstilsynet .at-tsdot{ width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
#page-arbeidstilsynet .at-tsdot.open{ background: #D97706; } #page-arbeidstilsynet .at-tsdot.closed{ background: #16A34A; }
#page-arbeidstilsynet .at-tsrad .t{ font-size: .82rem; font-weight: 600; }
#page-arbeidstilsynet .at-tsrad .d{ font-size: .7rem; color: var(--tc-gray-dark); margin-top: 2px; }
#page-arbeidstilsynet .at-ukonf{ background: rgba(255,255,255,.1); border: 1px dashed rgba(255,255,255,.35); border-radius: 10px; padding: 10px 14px; margin-top: 14px; font-size: .74rem; color: #C3CEE8; }
@media (max-width: 700px) {
  #page-arbeidstilsynet .at-stats, #page-tilgangslogg .at-stats{ grid-template-columns: 1fr 1fr; }
  #page-arbeidstilsynet .at-modes{ grid-template-columns: 1fr; }
  #page-arbeidstilsynet .at-toggle-row{ margin-left: 0; }
  #page-arbeidstilsynet .at-chartlabel{ width: 92px; }
  #page-arbeidstilsynet .at-period-custom{ grid-template-columns: 1fr 1fr; }
}

/* ══════════ LUKK AVVIK — tydelig 3-stegs flyt (Per 2026-08-27: «bør være tydeligere
   hvordan man lukker avvik»). Skopet under #avvikModal, ingen globale overstyringer. ══════════ */
#avvikModal .lukk-panel{ border-top: 2px solid var(--tc-gray); margin-top: 16px; padding-top: 16px; }
#avvikModal .lukk-panel h4{ color: var(--tc-blue); margin: 0 0 4px; font-size: 1rem; }
#avvikModal .lukk-intro{ font-size: .8rem; color: var(--tc-gray-dark); margin: 0 0 14px; line-height: 1.5; }
#avvikModal .lukk-steg{ display: flex; gap: 12px; margin-bottom: 16px; }
#avvikModal .lukk-nr{ width: 26px; height: 26px; border-radius: 50%; background: var(--tc-blue); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .82rem; flex-shrink: 0; }
#avvikModal .lukk-innhold{ flex: 1; min-width: 0; }
#avvikModal .lukk-innhold h5{ font-size: .88rem; margin: 3px 0 6px; }
#avvikModal .lukk-krav{ font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: #FEE2E2; color: #991B1B; padding: 2px 7px; border-radius: 999px; margin-left: 5px; }
#avvikModal .lukk-hjelp{ font-size: .76rem; color: var(--tc-gray-dark); margin: 0 0 8px; line-height: 1.5; }
#avvikModal .lukk-mangler{ font-size: .78rem; color: #92400E; background: #FEF3C7; border-radius: 8px;
  padding: 9px 12px; margin: 0 0 10px; }
#avvikModal .lukk-nytt-tiltak{ background: var(--tc-gray-light, #F4F6FA); border-radius: 10px; padding: 12px; }
#avvikModal .lukk-nytt-tiltak select, #avvikModal .lukk-nytt-tiltak textarea{ width: 100%; margin-bottom: 8px; }
#avvikModal .lukk-knapp{ width: 100%; padding: 13px; font-size: .95rem; }
#avvikModal .tiltak-rad{ display: flex; gap: 10px; align-items: flex-start; background: var(--tc-white);
  border: 1px solid var(--tc-gray-mid); border-left: 3px solid #16A34A; border-radius: 8px;
  padding: 9px 11px; margin-bottom: 7px; }
#avvikModal .tiltak-rad.unntak{ border-left-color: #D97706; background: #FFFBEB; }
#avvikModal .tiltak-ikon{ font-size: 1rem; flex-shrink: 0; }
#avvikModal .tiltak-tekst{ flex: 1; font-size: .8rem; line-height: 1.45; min-width: 0; }
#avvikModal .tiltak-rutine{ color: var(--tc-blue); font-weight: 600; }
#avvikModal .tiltak-fjern{ padding: 3px 9px; font-size: .75rem; flex-shrink: 0; }
@media (max-width: 700px) {
  #avvikModal .lukk-steg{ gap: 9px; }
  #avvikModal .lukk-nr{ width: 22px; height: 22px; font-size: .74rem; }
}

/* ══════════ RUH-AGENTEN — hjelp til å fylle ut avviksmelding (2026-08-28) ══════════ */
.ruh-hjelp-knapp{ margin-top: 8px; padding: 8px 14px; font-size: .8rem; }
.ruh-hjelp{ margin-top: 10px; background: var(--tc-blue-pale); border-radius: 10px; padding: 12px 14px; }
.ruh-hjelp .ruh-tittel{ font-size: .8rem; font-weight: 700; color: var(--tc-blue); margin: 0 0 5px; }
.ruh-hjelp .ruh-sporsmal{ margin: 0 0 10px; padding-left: 18px; }
.ruh-hjelp .ruh-sporsmal li{ font-size: .82rem; line-height: 1.5; margin-bottom: 4px; }
.ruh-hjelp .ruh-forslag{ font-size: .82rem; line-height: 1.55; background: var(--tc-white); border-radius: 8px;
  padding: 10px 12px; margin: 0 0 8px; white-space: pre-wrap; }
.ruh-hjelp .ruh-alvor{ font-size: .82rem; line-height: 1.5; background: #FEF3C7; color: #92400E;
  border-radius: 8px; padding: 9px 12px; margin-bottom: 10px; font-weight: 600; }
.ruh-hjelp .ruh-bilde{ font-size: .8rem; color: var(--tc-gray-dark); margin: 8px 0 0; }
.ruh-hjelp .ruh-fot{ font-size: .74rem; color: var(--tc-gray-dark); margin: 8px 0 0; line-height: 1.45; }

/* ══════════ PSYKOSOSIAL KARTLEGGING (2026-09-08) ══════════ */
/* Skalaen: fem like store knapper. Høy verdi er BRA på alle spørsmål – aldri snudd, siden en
   blandet skala gir feilsvar fra folk som skummer. */
.psyk-sp{ padding: 14px 0; border-bottom: 1px solid var(--tc-gray); }
.psyk-sp:last-child{ border-bottom: none; }
.psyk-sp .sp-tema{ font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--tc-blue); margin-bottom: 3px; }
.psyk-sp .sp-tekst{ font-size: .92rem; line-height: 1.5; margin-bottom: 9px; }
.psyk-skala{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.psyk-skala button{ padding: 10px 4px; font-size: .82rem; font-weight: 600; border-radius: 8px;
  border: 1.5px solid var(--tc-gray); background: var(--tc-white); color: var(--tc-gray-dark);
  cursor: pointer; transition: .12s; }
.psyk-skala button:hover{ border-color: var(--tc-blue); }
.psyk-skala button.valgt{ background: var(--tc-blue); border-color: var(--tc-blue); color: #fff; }
.psyk-skala-hjelp{ display: flex; justify-content: space-between; font-size: .7rem;
  color: var(--tc-gray-dark); margin-top: 5px; }

/* Resultat: fordelingen er viktigere enn snittet – åtte fornøyde og to som har det vondt
   gir snitt 4,2 og ser bra ut. */
.psyk-res{ padding: 13px 0; border-bottom: 1px solid var(--tc-gray); }
.psyk-res:last-child{ border-bottom: none; }
.psyk-res-topp{ display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.psyk-res-navn{ font-size: .9rem; font-weight: 600; flex: 1; }
.psyk-res-snitt{ font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.psyk-stolpe{ display: flex; height: 9px; border-radius: 5px; overflow: hidden; background: var(--tc-gray); }
.psyk-stolpe span{ display: block; }
.psyk-stolpe .s1{ background: var(--tc-red); }
.psyk-stolpe .s2{ background: #F59E0B; }
.psyk-stolpe .s3{ background: var(--tc-yellow); }
.psyk-stolpe .s4{ background: #86C440; }
.psyk-stolpe .s5{ background: var(--tc-green); }
.psyk-res-fot{ display: flex; justify-content: space-between; gap: 10px; margin-top: 5px;
  font-size: .75rem; color: var(--tc-gray-dark); }
.psyk-res.lav .psyk-res-navn{ color: var(--tc-red); }
.psyk-laast{ background: var(--tc-blue-pale); border-radius: 10px; padding: 18px 20px;
  font-size: .88rem; line-height: 1.55; }

/* Undermeny under Verneombud: ett trykk rett til området som skal gås. Følger samme
   uttrykk som .admin-toggle, bare innrykket ett hakk. */
.nav-undermeny-topp{ display: flex; align-items: center; justify-content: space-between; }
.nav-undermeny-topp .chev{ font-size: .75rem; opacity: .6; }
.nav-undermeny{ margin: 0 0 4px; }
.nav-undermeny .nav-item{ padding-left: 34px; font-size: .84rem; font-weight: 400; }
.nav-undermeny-tom{ padding: 8px 34px; font-size: .8rem; color: rgba(255,255,255,.5); }

/* ══════════ VERNERUNDER — mapper per område og skjemaredigering (2026-09-08) ══════════ */
.vr-mappe{ border: 1px solid var(--tc-gray); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.vr-mappe-topp{ display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer;
  background: var(--tc-white); }
.vr-mappe-topp:hover{ background: var(--tc-blue-pale); }
.vr-mappe-ikon{ font-size: 1.3rem; flex-shrink: 0; }
.vr-mappe-tekst{ flex: 1; min-width: 0; }
.vr-mappe-navn{ font-size: .9rem; font-weight: 700; }
.vr-mappe-meta{ font-size: .75rem; color: var(--tc-gray-dark); margin-top: 2px; }
.vr-mappe-chev{ color: var(--tc-gray-dark); font-size: .8rem; flex-shrink: 0; }
.vr-mappe-innhold{ padding: 0 14px 14px; border-top: 1px solid var(--tc-gray); }
.vr-mappe-knapper{ display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 0; }
.vr-mappe-knapper button{ font-size: .78rem; padding: 7px 12px; }
.vr-gruppe{ font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tc-blue); margin: 14px 0 4px; }
.vr-gruppe:first-child{ margin-top: 4px; }
.vr-punkt{ padding: 9px 0; border-bottom: 1px solid var(--tc-gray); }
.vr-punkt:last-child{ border-bottom: none; }
.vr-punkt-topp{ display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.vr-punkt-topp strong{ font-size: .86rem; font-weight: 600; line-height: 1.4; }
/* Forslag fra forrige runde – en opplysning, ikke en avgjørelse. Punktet står der som før. */
.vr-forslag{ font-size: .74rem; color: var(--tc-gray-dark); margin: 0 0 5px; font-style: italic; }
/* Punkt lagt til mens runden pågår */
/* Nøytral bakgrunn: grønt betyr OK i valgene nå, og et nytt punkt er ofte et avvik. */
.vr-punkt.vr-ekstra{ background: var(--tc-gray); border-radius: 8px; padding: 10px 12px; margin-top: 8px; }
/* Feltene i et nytt punkt var smale – samme bredde og kant som merknaden på de faste punktene. */
.vr-punkt.vr-ekstra input[type="text"]{ width: 100%; border-radius: 8px; border: 1.5px solid var(--tc-gray-mid); padding: 8px 10px; background: #fff; }
.vr-ekstra-merke{ font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tc-green); }
.vr-ekstra-lagre{ display: flex; align-items: center; gap: 7px; font-size: .76rem;
  color: var(--tc-gray-dark); margin-top: 7px; cursor: pointer; }
.vr-ekstra-lagre input{ width: auto; }
.vr-punkt select{ max-width: 110px; flex-shrink: 0; }
/* Bilder på et punkt (2026-09-14): miniatyrer + knapp. Knappen er en label rundt en usynlig
   filvelger – display:none på selve input-en gjør at iOS Safari ikke åpner kameraet. */
.vr-bilder{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.vr-bilder:empty{ display: none; }
.vr-miniatyr{ position: relative; width: 64px; height: 64px; border-radius: 6px; overflow: hidden;
  background: var(--tc-gray); flex-shrink: 0; }
.vr-miniatyr img{ width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.vr-miniatyr button{ position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; padding: 0;
  border: none; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: .7rem; line-height: 22px; cursor: pointer; }
.vr-bilde-knapp{ position: relative; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px;
  border: 1px dashed var(--tc-gray-dark); border-radius: 6px; font-size: .76rem; color: var(--tc-gray-dark);
  cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 500; margin: 0; }
.vr-bilde-knapp:hover{ border-color: var(--tc-blue); color: var(--tc-blue); }
.vr-bilde-knapp input{ position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.vr-status-merke{ font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; flex-shrink: 0; }
.vr-status-merke.ok{ background: var(--tc-green-light); color: var(--tc-green); }
.vr-status-merke.avvik{ background: var(--tc-red-light); color: var(--tc-red); }
.vr-status-merke.na{ background: var(--tc-yellow-light); color: #92400E; }
/* Stort bilde over alt annet – klikk hvor som helst for å lukke. */
#vrStortBilde{ position: fixed; inset: 0; z-index: 9900; background: rgba(0,0,0,.88); display: flex;
  align-items: center; justify-content: center; padding: 16px; cursor: zoom-out; }
#vrStortBilde img{ max-width: 100%; max-height: 100%; border-radius: 6px; }
#vrStortBilde[hidden]{ display: none; }   /* display:flex over ville ellers overstyrt hidden */
/* Skjemaredigering: én rad per punkt, gruppe + tekst + fjern. */
.vr-rediger-rad{ display: flex; gap: 6px; align-items: flex-start; margin-bottom: 6px; }
.vr-rediger-rad .vr-r-gruppe{ flex: 0 0 30%; min-width: 110px; }
.vr-rediger-rad .vr-r-tekst{ flex: 1; }
.vr-rediger-rad .vr-r-fjern{ flex-shrink: 0; padding: 7px 10px; font-size: .8rem; }
.vr-rediger-rad.vr-ny .vr-r-tekst{ border-color: var(--tc-green); background: var(--tc-green-light); }
.vr-ai-boks{ background: var(--tc-blue-pale); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.vr-ai-boks p{ font-size: .8rem; color: var(--tc-gray-dark); margin: 0 0 8px; line-height: 1.5; }
@media (max-width: 700px) {
  .vr-rediger-rad{ flex-wrap: wrap; }
  .vr-rediger-rad .vr-r-gruppe{ flex: 1 1 100%; }
}

/* ══════════ FOKUSMODUS – ett prosjekt fra KlimaOS, uten Sikros-menyen (2026-09-16) ══════════
   Prosjektmappen fyller skjermen under en smal linje med «Tilbake til KlimaOS». Andre vinduer som
   åpnes fra mappen (z-index 9500+) legger seg fortsatt over både mappen og linjen. */
.fokus-ramme{ display: none; }
body.fokusmodus .fokus-ramme{ display: block; }
body.fokusmodus .sidebar, body.fokusmodus .topbar{ display: none; }
body.fokusmodus .main-wrap{ margin-left: 0; }
.fokuslinje{ position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 9450; background: var(--tc-blue); color: #fff;
  display: flex; align-items: center; gap: 12px; padding: 0 16px; box-shadow: 0 2px 12px rgba(15,23,42,.18); }
.fokus-tilbake{ background: rgba(255,255,255,.14); color: #fff; border: none; border-radius: 9px; padding: 9px 14px;
  font-family: 'Barlow', sans-serif; font-size: .9rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.fokus-tilbake:hover{ background: rgba(255,255,255,.24); }
.fokus-firma{ flex: 1; min-width: 0; font-family: 'Barlow Condensed', sans-serif; font-size: 1.05rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
.fokus-hele{ background: none; border: 1.5px solid rgba(255,255,255,.32); color: #fff; border-radius: 9px; padding: 7px 12px;
  font-family: 'Barlow', sans-serif; font-size: .8rem; font-weight: 600; cursor: pointer; flex-shrink: 0; }
.fokus-hele:hover{ border-color: #fff; }
.fokus-tilbake:focus-visible, .fokus-hele:focus-visible{ outline: 2px solid var(--tc-blue-light); outline-offset: 2px; }
body.fokusmodus #mappeModal{ top: 56px; background: var(--tc-gray); align-items: flex-start; overflow-y: auto; }
body.fokusmodus #mappeModal .modal{ max-width: 1100px; max-height: none; box-shadow: none; margin: 0 auto; }
body.fokusmodus #mappeModal .modal-close{ display: none; }
body.fokusmodus #mappeModal .pj-pagehead{ padding-right: 24px; }
.fokus-melding{ position: fixed; top: 56px; left: 0; right: 0; bottom: 0; z-index: 9440; background: var(--tc-gray);
  display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; }
.fokus-melding .card{ max-width: 460px; width: 100%; }
@media (max-width: 600px) {
  .fokus-firma{ display: none; }
  .fokuslinje{ justify-content: space-between; }
  body.fokusmodus #mappeModal{ padding: 0; }
  body.fokusmodus #mappeModal .modal, body.fokusmodus #mappeModal .modal-header{ border-radius: 0; }
}

/* SJA startet fra påminnelsen i prosjektmappen (prosjektsynk trinn 4): da legger SJA-vinduet seg over mappen (9400)
   og fokuslinjen (9450), og synk-linjen fra sjaOffline.js (inline 8000) over SJA-vinduet, som ellers i appen.
   Uten åpen mappe beholder begge lagene sine. Krever at begge står etter #mappeModal i body. */
#mappeModal.open ~ #sjaModal{ z-index: 9500; }
#mappeModal.open ~ #sjaSynkBanner{ z-index: 9510 !important; }

/* Medarbeidersamtaler (IK-S08). Små, gjenbrukbare klasser – btn-small og tom-liste fantes ikke
   fra før, og brukes nå der en handling eller en tom liste skal være tydelig, men dempet. */
.btn-small{padding:8px 14px;background:var(--tc-blue-pale);color:var(--tc-blue);border:none;border-radius:8px;font-family:'Barlow',sans-serif;font-size:.82rem;font-weight:700;cursor:pointer;transition:.15s;}
.btn-small:hover{background:var(--tc-blue);color:white;}
.btn-small.btn-danger{padding:8px 14px;font-size:.82rem;background:var(--tc-red-light);color:var(--tc-red);}
.btn-small.btn-danger:hover{background:var(--tc-red);color:white;}
.tom-liste{font-size:.85rem;color:var(--tc-gray-dark);margin:6px 0;}
/* Lest referat/forberedelse: linjeskiftene skal beholdes slik de ble skrevet. */
.mas-lest{white-space:pre-wrap;background:var(--tc-gray);border-radius:8px;padding:10px 12px;font-size:.88rem;line-height:1.5;}
.mas-tiltak{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px;}
.mas-tiltak .mas-t-tekst{flex:1;min-width:200px;}
.mas-tiltak input,.mas-tiltak select{padding:9px 10px;border:1px solid var(--tc-gray-mid);border-radius:8px;font-family:'Barlow',sans-serif;font-size:.88rem;}
@media (max-width:700px){ .mas-tiltak{flex-direction:column;align-items:stretch;} .mas-tiltak .mas-t-tekst{min-width:0;} }

/* Arbeidskontrakter: kontrollresultatet. Fargene har alltid tekst ved siden av (samme regel
   som i vernerunden), slik at de som ikke skiller fargene får samme beskjed. */
.k-resultat{font-size:.86rem;}
.k-sammendrag{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px;}
.k-funn{border-radius:10px;padding:10px 12px;margin-bottom:10px;border-left:4px solid var(--tc-gray-mid);background:var(--tc-gray);}
.k-funn p{margin:4px 0;line-height:1.45;}
.k-funn-topp{font-weight:700;margin-bottom:2px;}
.k-krav{border-left-color:var(--tc-red);background:var(--tc-red-light);}
.k-sjekk{border-left-color:var(--tc-yellow);background:var(--tc-yellow-light);}
.k-tips{border-left-color:var(--tc-blue);background:var(--tc-blue-pale);}
.k-ok{border-left-color:var(--tc-green);background:var(--tc-green-light);}
.k-lov{font-size:.78rem;color:var(--tc-gray-dark);font-style:italic;}
.k-fot{font-size:.78rem;color:var(--tc-gray-dark);margin-bottom:8px;line-height:1.45;}
.k-melding{font-size:.82rem;background:var(--tc-yellow-light);border-radius:8px;padding:8px 10px;margin-bottom:8px;}
.k-detaljer{margin-top:8px;font-size:.8rem;color:var(--tc-gray-dark);}
.k-detaljer summary{cursor:pointer;}
.k-lagre{margin-top:12px;padding-top:12px;border-top:1px solid var(--tc-gray-mid);}
#page-kontrakter textarea{font-family:'Barlow',sans-serif;line-height:1.5;}

/* ── Bransjevalg og orgnr-oppslag (2026-09-15) ──
   Komponenten brukes både i registreringsskjemaet (inni .form-group, som ellers gjør alle
   input 100 % brede og alle label til store bokstaver) og i innstillingene – derfor de
   eksplisitte overstyringene under. */
.orgnr-status{ display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; line-height: 1.4; margin-top: 6px; min-height: 1px; }
.orgnr-status:empty{ display: none; }
.orgnr-status::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; margin-top: .35em; flex: none; background: currentColor; }
.orgnr-status.ok{ color: var(--tc-green); }
.orgnr-status.warn{ color: var(--tc-yellow); }
.orgnr-status.bad{ color: var(--tc-red); }
.orgnr-status.laster{ color: var(--tc-gray-dark); }
.orgnr-status .orgnr-ekstra{ display: block; color: var(--tc-gray-dark); }
.bransjevalg{ border: 2px solid var(--tc-gray-mid); border-radius: 10px; padding: 4px 12px; background: white; }
.bransjevalg [hidden]{ display: none !important; }   /* label har display:inline-flex under, som ellers overstyrer hidden */
.bransjevalg .bv-register{ font-size: .8rem; color: var(--tc-gray-dark); margin: 8px 0 2px; line-height: 1.4; }
.bransjevalg .bv-valg{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--tc-gray-mid); }
.bransjevalg .bv-valg:first-of-type{ border-top: 0; }
.bransjevalg .bv-valg input[type="radio"]{ width: 18px; height: 18px; padding: 0; margin: 2px 0 0; accent-color: var(--tc-orange); }
.bransjevalg .bv-valg label{ display: block; margin: 0; font-size: .92rem; font-weight: 600; color: var(--tc-text); text-transform: none; letter-spacing: 0; }
.bransjevalg .bv-hint{ grid-column: 2; font-size: .78rem; color: var(--tc-gray-dark); line-height: 1.4; }
.bransjevalg .bv-ekstra{ grid-column: 2; margin-top: 6px; }
.bransjevalg .bv-ekstra select{ width: 100%; padding: 9px 12px; border: 2px solid var(--tc-gray-mid); border-radius: 8px; font-family: inherit; font-size: .9rem; background: white; }
.bransjevalg .bv-ekstra select:disabled{ opacity: .55; }
.bransjevalg .bv-tillegg{ padding: 8px 0 10px; border-top: 1px solid var(--tc-gray-mid); }
.bransjevalg .bv-tillegg-tittel{ font-size: .78rem; font-weight: 600; color: var(--tc-gray-dark); margin-bottom: 4px; }
.bransjevalg .bv-tillegg label{ display: inline-flex; align-items: center; gap: 6px; margin: 2px 14px 2px 0; font-size: .85rem; font-weight: 500; color: var(--tc-text); text-transform: none; letter-spacing: 0; }
.bransjevalg .bv-tillegg input[type="checkbox"]{ width: 16px; height: 16px; padding: 0; margin: 0; accent-color: var(--tc-orange); }
.bransjevalg-note{ font-size: .75rem; color: var(--tc-gray-dark); margin-top: 6px; line-height: 1.45; }
.login-card .kildenote, .kildenote{ font-size: .72rem; color: var(--tc-gray-dark); margin: 10px 0 0; }
.pms-bransje{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.pms-bransje-varsel{ display: inline-block; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--tc-yellow-light); color: var(--tc-yellow); }

/* ── Gantt for fremdriftsplanen på prosjektet (2026-10-12) ──
   Tegnet for hånd, uten bibliotek: Sikros har ingen byggesteg, og ukenummer, helgemerking og
   norsk datoformat er ting ingen ferdig Gantt-pakke gjør. Se public/gantt.js. */
.gt-ramme{border:1px solid var(--tc-gray-mid);border-radius:10px;overflow:hidden;}
.gt-rull{overflow-x:auto;}
.gt-gantt{min-width:700px;}
.gt-hode{display:flex;background:var(--tc-gray);border-bottom:1px solid var(--tc-gray-mid);}
.gt-navn{flex:0 0 190px;padding:7px 11px;border-right:1px solid var(--tc-gray-mid);}
.gt-hode .gt-navn{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--tc-gray-dark);}
.gt-tid{flex:1;}
.gt-uker{display:flex;border-bottom:1px solid var(--tc-gray-mid);}
.gt-uke{font-size:.66rem;font-weight:700;color:var(--tc-gray-dark);text-align:center;padding:3px 0;
  border-right:1px solid var(--tc-gray-mid);text-transform:uppercase;letter-spacing:.4px;overflow:hidden;}
.gt-dager{display:flex;}
.gt-dag{font-size:.62rem;color:var(--tc-gray-dark);text-align:center;padding:2px 0;border-right:1px solid #eef1f6;overflow:hidden;}
.gt-dag.gt-helg{background:#eceff5;color:#94a3b8;}
.gt-dag.gt-idag{background:var(--tc-blue-light);color:#fff;font-weight:800;}

.gt-rad{display:flex;border-bottom:1px solid #eef1f6;min-height:34px;}
.gt-rad:hover{background:#fafbfd;}
.gt-rad .gt-navn{font-size:.8rem;font-weight:500;color:var(--tc-text);display:flex;flex-direction:column;justify-content:center;}
.gt-sted{font-size:.68rem;color:var(--tc-gray-dark);}
.gt-spor{flex:1;position:relative;}
.gt-bakgrunn{position:absolute;inset:0;display:flex;}
.gt-bakgrunn div{border-right:1px solid #eef1f6;}
.gt-bakgrunn div.gt-helg{background:#f6f8fb;}
.gt-bakgrunn div.gt-idag{background:rgba(242,107,33,.10);}

.gt-stolpe{position:absolute;top:6px;height:21px;border-radius:5px;display:flex;align-items:center;
  padding:0 7px;font-size:.69rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;z-index:2;}

.gt-forklaring{display:flex;flex-wrap:wrap;gap:12px;margin-top:9px;font-size:.73rem;color:var(--tc-gray-dark);}
.gt-forklaring div{display:flex;align-items:center;gap:5px;}
.gt-prikk{width:12px;height:12px;border-radius:3px;display:inline-block;}

.gt-tom{font-size:.84rem;color:var(--tc-gray-dark);padding:10px 0;}
.gt-uten{font-size:.78rem;color:var(--tc-gray-dark);background:var(--tc-yellow-light);
  border-left:4px solid var(--tc-yellow);border-radius:8px;padding:9px 12px;margin-top:10px;line-height:1.5;}

@media(max-width:700px){ .gt-navn,.gt-rad .gt-navn{flex:0 0 120px;} }