@font-face{font-family:Roboto;src:url('/assets/fonts/Roboto-400.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Roboto;src:url('/assets/fonts/Roboto-500.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Roboto;src:url('/assets/fonts/Roboto-700.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

:root{--ink:#1c2430;--panel:#15173a;--paper:#f2f4f7;--yellow:#292e73;--cyan:#04824c;--green:#04824c;--red:#b53b32;--muted:#647182;--line:#d7dde5;--sibek-blue:#292e73;--sibek-navy:#15173a;--sibek-green:#04824c;--surface:#fff;--surface-soft:#f7f8fa;--shadow:0 10px 30px rgba(21,23,58,.08)}
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:Roboto,Arial,sans-serif;font-size:16px}
button,input,select,textarea{font-family:inherit}
button{border-radius:5px}
.kicker{color:var(--sibek-green);font:700 11px/1.2 Roboto,Arial,sans-serif;letter-spacing:.13em}
.primary{border:1px solid var(--sibek-blue);border-radius:5px;background:var(--sibek-blue);color:#fff;font-weight:500;padding:10px 16px;gap:18px;min-height:42px}
.primary:hover{background:var(--sibek-navy);border-color:var(--sibek-navy)}

/* Inloggningen följer Ritningsförteckningens tvåspaltiga uttryck. */
.login-view{display:block;place-items:normal;min-height:100vh;padding:0;background:linear-gradient(110deg,var(--sibek-navy) 0 56%,var(--paper) 56%);color:#fff}
.auth-header{height:74px;display:flex;align-items:center;padding:12px clamp(24px,3vw,40px);background:rgba(21,23,58,.97);border-bottom:1px solid rgba(255,255,255,.12)}
.auth-brand,.brand,.invitation-brand{display:flex;align-items:center;gap:14px;letter-spacing:0}
.auth-brand img,.invitation-brand img{display:block;width:138px;height:auto;filter:brightness(0) invert(1)}
.brand img{display:block;width:118px;height:auto}
.brand-divider{width:1px;height:34px;background:currentColor;opacity:.22}
.brand-copy{display:flex;flex:0 0 auto;flex-direction:column;gap:4px;min-width:max-content;line-height:1.15}
.brand-copy strong{font-size:15px;font-weight:700;line-height:1.15;letter-spacing:.01em}
.brand-copy small{font-size:11px;font-weight:400;line-height:1.25;opacity:.72;white-space:nowrap}
.auth-main{min-height:calc(100vh - 132px);display:grid;align-items:center;padding:54px clamp(26px,7vw,100px)}
.auth-layout{width:min(1080px,100%);margin:auto;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(350px,1fr);gap:76px;align-items:center}
.auth-intro{max-width:610px}
.auth-intro .kicker{color:#55c894}
.auth-intro h1{margin:17px 0 22px;color:#fff;font-size:clamp(54px,6vw,77px);line-height:.97;letter-spacing:-.035em}
.auth-intro>p:not(.kicker){max-width:520px;color:rgba(255,255,255,.76);line-height:1.65}
.auth-features{display:flex;flex-wrap:wrap;gap:9px 22px;margin-top:28px;color:rgba(255,255,255,.78);font-size:12px}
.auth-features span::before{content:'✓';margin-right:7px;color:#55c894;font-weight:700}
.login-card{width:100%;padding:34px 36px;border:1px solid #e2e6eb;border-top:0;border-radius:6px;background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.login-card h1,.login-card h2{margin:10px 0 8px;font-size:32px;line-height:1.1;letter-spacing:-.02em}
.login-card>p:not(.kicker):not(.form-error):not(.form-notice){margin:0 0 24px;color:var(--muted)}
.login-card label,.form-grid label{gap:7px;margin-top:16px;color:#313b49;font-size:12px;font-weight:500}
.login-card input,.form-grid input,.form-grid select,.form-grid textarea{border:1px solid #aeb8c4;border-radius:4px;background:#fff;padding:11px 12px}
.login-card input:focus,.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:var(--sibek-blue);box-shadow:0 0 0 3px rgba(41,46,115,.12)}
.login-card .primary{justify-content:center;margin-top:4px}
.auth-footer{min-height:58px;display:flex;justify-content:space-between;align-items:center;padding:16px clamp(24px,3vw,40px);background:var(--sibek-navy);color:rgba(255,255,255,.65);font-size:11px}
.auth-footer small{font-size:11px}

/* Applikationsskal */
.topbar{height:76px;padding:0 clamp(18px,3vw,40px);border-bottom:0;background:rgba(21,23,58,.98);color:#fff;box-shadow:0 2px 14px rgba(21,23,58,.16);backdrop-filter:none}
.brand{flex:0 0 auto;margin-right:42px;color:#fff}
.topbar nav{gap:3px}
.nav-link{border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;padding:0 15px;color:rgba(255,255,255,.72);font-size:12px;font-weight:500}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.05)}
.nav-link.active{border-color:#55c894;color:#fff}
.account b{font-size:12px;font-weight:500}.account small{color:rgba(255,255,255,.6)}
#role-badge{border-radius:3px;background:rgba(255,255,255,.12);color:#fff;font:500 9px Roboto,Arial,sans-serif;letter-spacing:.08em}
#logout,.version-link{border:1px solid rgba(255,255,255,.25);border-radius:4px;background:transparent;color:#fff}
.version-link{font:500 10px Roboto,Arial,sans-serif}.version-link.active{background:#fff;color:var(--sibek-blue)}

.hero,.table-hero,.feedback-hero{padding:58px clamp(24px,7vw,105px);background:var(--sibek-navy);color:#fff}
.hero h1,.table-hero h1,.feedback-hero h1{margin:16px 0;font-size:clamp(44px,5.5vw,70px);line-height:1;letter-spacing:-.035em}
.hero h1 em{color:#55c894}
.hero>p,.table-hero>p:last-child,.feedback-hero p:last-child{color:rgba(255,255,255,.72);line-height:1.65}
.workspace,.admin-main,.table-workspace,.feedback-workspace{padding-left:clamp(20px,5vw,72px);padding-right:clamp(20px,5vw,72px)}
.workspace{padding-top:48px;padding-bottom:56px}
.section-heading{border-color:var(--line);padding-bottom:18px}
.section-heading span{color:var(--sibek-green);font:700 10px Roboto,Arial,sans-serif;letter-spacing:.12em}
.section-heading h2{margin-top:7px;font-size:36px;letter-spacing:-.025em}
.section-heading>p,.users-head span,.feedback-heading span{font:400 11px Roboto,Arial,sans-serif;color:var(--muted)}

/* Paneler, fält och tabeller */
.value-card,.diagnosis,.users-panel,.saved-table-panel,.code-table-panel,.table-analysis,.feedback-form,.feedback-card,.version-card,.account-card{border:1px solid var(--line);border-radius:6px;background:#fff;box-shadow:0 4px 16px rgba(21,23,58,.035)}
.value-card{padding:22px}.value-card legend{color:#313b49;font-size:13px;font-weight:700}
.decimal-grid select,.decimal-grid input,.nibble-grid output,.nibble-grid input,.table-metadata input,.feedback-form input,.feedback-form select,.feedback-form textarea,.feedback-manage select,.feedback-manage textarea{border:1px solid #aeb8c4!important;border-radius:4px!important;background:#fff!important;color:var(--ink);outline:none}
.decimal-grid select,.decimal-grid input{border-bottom:2px solid var(--sibek-blue)!important;font-family:Roboto,Arial,sans-serif;font-size:19px}
.nibble-grid section{border-top:3px solid var(--sibek-blue);border-radius:4px;background:var(--surface-soft)}
.nibble-grid h3,.value-card .nibble-grid label{font-family:Roboto,Arial,sans-serif}
.nibble-grid output,.nibble-grid input{font-family:ui-monospace,SFMono-Regular,Consolas,monospace!important}
.display-panel{border-radius:6px;background:#111628;box-shadow:var(--shadow)}
.diagnosis{border-top:4px solid var(--sibek-blue)}
.diag-title>span{background:var(--sibek-blue);color:#fff}
.fault-row>b{color:var(--sibek-blue)}
.note{border-left:4px solid var(--sibek-blue);border-radius:0 4px 4px 0;background:#eef0f8;color:#3f4858}
.wire-section,.coverage-section{background:#e8ecf1}
.wire-card,.coverage-card{border-color:#d2d9e1!important;border-radius:5px!important;background:#fff!important}
.wire-card.ok,.coverage-card.complete{border-color:#8ac7aa!important;background:#eef8f2!important}
.saved-table-panel,.feedback-form{border-top:4px solid var(--sibek-blue)}
.table-metadata label,.feedback-form label{color:#4d5867;font-weight:500}
.save-table-actions button:not(.primary),.code-table-actions button,.code-table-panel header button,.edit-user,.dialog-actions>button:not(.primary){border:1px solid #aeb8c4;border-radius:4px;background:#fff;color:#313b49;font-weight:500}
.feedback-manage summary,.table-message{color:var(--sibek-blue)}
.users-head,.saved-table-head,.feedback-heading{border-color:var(--line)}
.admin-hero h1{font-size:clamp(40px,5vw,62px);letter-spacing:-.035em}

dialog{border-radius:7px;box-shadow:0 24px 80px rgba(21,23,58,.32)}
dialog::backdrop{background:rgba(21,23,58,.72)}
.invitation-view{background:linear-gradient(110deg,var(--sibek-navy) 0 55%,var(--paper) 55%)}
.invitation-brand{color:#fff}.invitation-brand img{width:138px}
.invite-explanation{border-left-color:var(--sibek-blue);background:#eef0f8}

@media(max-width:980px){
  .topbar{height:auto;min-height:76px;flex-wrap:wrap;padding-top:10px;padding-bottom:8px}.brand{margin-right:20px}.topbar nav{order:3;width:100%;height:46px;overflow-x:auto}.nav-link{flex:0 0 auto}.account{margin-left:auto}.version-link{margin-left:auto}
  .auth-layout{grid-template-columns:1fr 390px;gap:40px}.auth-intro h1{font-size:54px}
}
@media(max-width:760px){
  .login-view{background:var(--paper)}.auth-header{height:68px}.auth-brand img{width:112px}.auth-main{padding:34px 18px}.auth-layout{display:block}.auth-intro{margin:0 4px 28px;color:var(--ink)}.auth-intro .kicker{color:var(--sibek-green)}.auth-intro h1{color:var(--sibek-navy);font-size:42px}.auth-intro>p:not(.kicker){color:var(--muted)}.auth-features{color:var(--muted);font-size:11px}.login-card{padding:27px 24px}.auth-footer{background:var(--sibek-navy);gap:12px}
  .brand img{width:96px}.brand-copy small{display:none}.brand-divider{height:27px}.topbar .account>div,#role-badge{display:none}.topbar nav{margin-top:5px}.hero,.table-hero,.feedback-hero{padding-top:42px;padding-bottom:42px}.hero h1,.table-hero h1,.feedback-hero h1{font-size:42px}.section-heading h2{font-size:31px}
}
@media(max-width:480px){.auth-footer{align-items:flex-start;flex-direction:column}.auth-features{display:grid}.topbar{padding-left:12px;padding-right:12px}.brand{gap:8px}.brand img{width:82px}.version-link{padding:6px}.account{gap:6px}.nav-link{padding:0 12px}.login-card{padding:24px 20px}}