/* Komponent-CSS for prototypen. I React/Tailwind blir hver blokk en komponent i packages/ui (se DESIGN.md). */
*{box-sizing:border-box} html,body{margin:0;height:100%}
body{font:var(--zoz-weight-regular) var(--zoz-text-base)/var(--zoz-leading) var(--zoz-font);color:var(--zoz-fg);background:var(--zoz-bg);-webkit-font-smoothing:antialiased}
a{color:var(--zoz-primary);text-decoration:none} a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--zoz-focus);outline-offset:2px;border-radius:4px}
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.mono{font-family:var(--zoz-font-mono);font-size:12.5px}
.muted{color:var(--zoz-fg-2)} .subtle{color:var(--zoz-fg-3);font-size:var(--zoz-text-sm)}
h1{font-size:var(--zoz-text-xl);line-height:var(--zoz-leading-tight);margin:0;font-weight:600;letter-spacing:-.01em}
h2{font-size:var(--zoz-text-md);margin:0;font-weight:600} h3{font-size:var(--zoz-text-base);margin:0;font-weight:600}

/* ---------- Skall ---------- */
.shell{display:grid;grid-template-columns:var(--zoz-sidebar-w) 1fr;min-height:100vh;background:linear-gradient(to right,var(--zoz-sidebar) var(--zoz-sidebar-w),transparent var(--zoz-sidebar-w))}
.sidebar{background:var(--zoz-sidebar);color:var(--zoz-sidebar-fg);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto;padding:16px 12px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:16px;padding:4px 8px 18px}
.logo b{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#5B82FF,#2B4FCB);font-size:13px}
.logo small{display:block;font-weight:500;font-size:11px;color:var(--zoz-sidebar-muted)}
.nav-group{margin:10px 0 4px;padding:0 10px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--zoz-sidebar-muted)}
.nav a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;color:var(--zoz-sidebar-fg);font-size:13.5px;text-decoration:none}
.nav a:hover{background:rgba(255,255,255,.05)} .nav a.active{background:var(--zoz-sidebar-active);color:#fff;box-shadow:inset 2px 0 0 #6F8DFF}
.nav svg{width:17px;height:17px;flex:none;opacity:.85}
.nav .count{margin-left:auto;background:#2B4FCB;color:#fff;border-radius:999px;font-size:11px;padding:1px 7px;font-weight:600}
.nav .new{margin-left:auto;font-size:10px;color:#9FB4FF;border:1px solid #33467F;border-radius:999px;padding:0 6px}
.sidebar-foot{margin-top:auto;padding:12px 10px 0;font-size:12px;color:var(--zoz-sidebar-muted);border-top:1px solid rgba(255,255,255,.07)}
.sync{display:flex;align-items:center;gap:8px}.sync i{width:8px;height:8px;border-radius:50%;background:#4CC27A;box-shadow:0 0 0 3px rgba(76,194,122,.18)}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{height:var(--zoz-topbar-h);display:flex;align-items:center;gap:12px;padding:0 24px;background:var(--zoz-surface);border-bottom:1px solid var(--zoz-border);position:sticky;top:0;z-index:20}
.search{flex:1;max-width:520px;display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--zoz-border);border-radius:8px;background:var(--zoz-surface-2);color:var(--zoz-fg-3)}
.search kbd{margin-left:auto;font:11px var(--zoz-font);border:1px solid var(--zoz-border);border-radius:4px;padding:1px 5px;background:var(--zoz-surface)}
.topbar .sp{flex:1} .iconbtn{width:36px;height:36px;display:grid;place-items:center;border-radius:8px;border:0;background:none;color:var(--zoz-fg-2);cursor:pointer;position:relative}
.iconbtn:hover{background:var(--zoz-surface-sunken)} .iconbtn .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--zoz-danger)}
.avatar{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--zoz-fg-2)} .avatar span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--zoz-primary-soft);color:var(--zoz-primary);font-weight:600;font-size:12px}
.demo-banner{background:#FFF4C2;color:#5E4A00;font-size:12px;text-align:center;padding:4px;border-bottom:1px solid #F1DE8A}
.content{padding:24px;max-width:var(--zoz-content-max);width:100%;margin:0 auto}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-head p{margin:4px 0 0;color:var(--zoz-fg-2)}
.crumbs{font-size:13px;color:var(--zoz-fg-3);margin-bottom:6px} .crumbs a{color:var(--zoz-fg-2)}
.tabbar{display:none}

/* ---------- Knapper ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--zoz-control-h);padding:0 14px;border-radius:8px;border:1px solid var(--zoz-border-strong);background:var(--zoz-surface);color:var(--zoz-fg);font:500 13.5px var(--zoz-font);cursor:pointer;white-space:nowrap;transition:background var(--zoz-dur),border-color var(--zoz-dur)}
.btn:hover{background:var(--zoz-surface-2);text-decoration:none} .btn svg{width:16px;height:16px}
.btn-primary{background:var(--zoz-primary);border-color:var(--zoz-primary);color:var(--zoz-primary-fg)} .btn-primary:hover{background:var(--zoz-primary-hover)}
.btn-success{background:var(--zoz-success);border-color:var(--zoz-success);color:#fff} .btn-success:hover{filter:brightness(.95);background:var(--zoz-success)}
.btn-ghost{border-color:transparent;background:none;color:var(--zoz-fg-2)} .btn-ghost:hover{background:var(--zoz-surface-sunken)}
.btn-sm{height:30px;padding:0 10px;font-size:12.5px} .btn-lg{height:44px;padding:0 20px;font-size:15px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.kbd{font-size:11px;opacity:.75;border:1px solid currentColor;border-radius:4px;padding:0 4px;margin-left:4px}

/* ---------- Kort ---------- */
.card{background:var(--zoz-surface);border:1px solid var(--zoz-border);border-radius:var(--zoz-radius-lg);box-shadow:var(--zoz-shadow-sm)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--zoz-border)}
.card-head p{margin:2px 0 0;font-size:12.5px;color:var(--zoz-fg-3)}
.card-body{padding:18px} .card-foot{padding:12px 18px;border-top:1px solid var(--zoz-border);background:var(--zoz-surface-2);border-radius:0 0 12px 12px}
.grid{display:grid;gap:16px} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;align-items:start}
.kpi{padding:16px 18px} .kpi .l{font-size:12.5px;color:var(--zoz-fg-2)} .kpi .v{font-size:24px;font-weight:600;letter-spacing:-.01em;margin-top:4px;font-variant-numeric:tabular-nums}
.kpi .d{font-size:12px;margin-top:2px} .up{color:var(--zoz-success)} .down{color:var(--zoz-danger)}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap;background:var(--zoz-surface-sunken);color:var(--zoz-fg-2)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.b-new{background:var(--zoz-info-soft);color:var(--zoz-info)} .b-ok{background:var(--zoz-success-soft);color:var(--zoz-success)}
.b-warn{background:var(--zoz-warning-soft);color:var(--zoz-warning)} .b-err{background:var(--zoz-danger-soft);color:var(--zoz-danger)}
.b-queue{background:var(--zoz-queued-soft);color:var(--zoz-queued)} .b-draft{background:var(--zoz-primary-soft);color:var(--zoz-primary)}
.b-plain::before{display:none}
.tag{display:inline-block;font-size:11px;padding:1px 6px;border-radius:4px;background:var(--zoz-surface-sunken);color:var(--zoz-fg-2)}
.tag-changed{background:var(--zoz-changed);color:#6B5300}

/* ---------- Tabell + filtre ---------- */
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--zoz-border)}
.input,.select{height:var(--zoz-control-h);border:1px solid var(--zoz-border-strong);border-radius:8px;padding:0 10px;font:13.5px var(--zoz-font);background:var(--zoz-surface);color:var(--zoz-fg);min-width:0}
.input:focus,.select:focus,textarea.input:focus{outline:none;border-color:var(--zoz-primary);box-shadow:0 0 0 3px var(--zoz-primary-soft)}
textarea.input{height:auto;padding:8px 10px;resize:vertical;line-height:1.45}
.input.changed{background:var(--zoz-changed)}
.chips{display:flex;gap:4px;background:var(--zoz-surface-sunken);padding:3px;border-radius:9px}
.chip{border:0;background:none;padding:5px 10px;border-radius:7px;font:500 12.5px var(--zoz-font);color:var(--zoz-fg-2);cursor:pointer}
.chip b{font-weight:600;color:var(--zoz-fg-3);margin-left:4px} .chip.on{background:var(--zoz-surface);color:var(--zoz-fg);box-shadow:var(--zoz-shadow-sm)}
.table-wrap{overflow:auto}
table.t{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.t th{position:sticky;top:0;background:var(--zoz-surface-2);text-align:left;font-weight:500;font-size:12px;color:var(--zoz-fg-2);padding:9px 14px;border-bottom:1px solid var(--zoz-border);white-space:nowrap}
.t td{padding:0 14px;height:var(--zoz-row-h);border-bottom:1px solid var(--zoz-border);vertical-align:middle}
.t tr:last-child td{border-bottom:0} .t tbody tr{cursor:pointer} .t tbody tr:hover td{background:var(--zoz-surface-2)}
.t td.strong{font-weight:500} .t .sub{display:block;font-size:12px;color:var(--zoz-fg-3);line-height:1.2}
.t.edit td{height:auto;padding:6px 8px} .t.edit .input{height:32px;width:100%} .t.edit tbody tr{cursor:default} .t.edit tbody tr:hover td{background:none}
.t tfoot td{font-weight:600;background:var(--zoz-surface-2);height:40px}
.pager{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;font-size:12.5px;color:var(--zoz-fg-3);border-top:1px solid var(--zoz-border)}

/* ---------- Skjema ---------- */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0} .field.full{grid-column:1/-1}
.field label{font-size:12.5px;font-weight:500;color:var(--zoz-fg-2);display:flex;gap:6px;align-items:center}
.field .hint{font-size:12px;color:var(--zoz-fg-3)} .field .err{font-size:12px;color:var(--zoz-danger)}
.field.ro .val{height:var(--zoz-control-h);display:flex;align-items:center;font-size:13.5px}
dl.kv{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin:0;font-size:13.5px} dl.kv dt{color:var(--zoz-fg-3)} dl.kv dd{margin:0}

/* ---------- Forhåndsvis/rediger/godkjenn-kort ---------- */
.review{border:1px solid var(--zoz-border);border-radius:var(--zoz-radius-xl);background:var(--zoz-surface);box-shadow:var(--zoz-shadow)}
.review-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 20px;border-bottom:1px solid var(--zoz-border)}
.review-head .eyebrow{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--zoz-fg-3);font-weight:600}
.review-body{padding:20px}
.review-actions{position:sticky;bottom:0;display:flex;gap:8px;align-items:center;padding:14px 20px;background:color-mix(in srgb,var(--zoz-surface) 92%,transparent);backdrop-filter:blur(6px);border-top:1px solid var(--zoz-border);border-radius:0 0 16px 16px}
.review-actions .sp{flex:1}
.source{background:var(--zoz-surface-2)}
.steps{display:flex;gap:0;align-items:center;font-size:12px;color:var(--zoz-fg-3);flex-wrap:wrap;row-gap:6px}
.steps span{display:flex;align-items:center;gap:6px} .steps span+span::before{content:"";width:22px;height:1px;background:var(--zoz-border-strong);margin:0 8px}
.steps i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--zoz-border-strong);display:grid;place-items:center;font-style:normal;font-size:10px}
.steps .done{color:var(--zoz-fg-2)} .steps .done i{background:var(--zoz-success);border-color:var(--zoz-success);color:#fff}
.steps .cur{color:var(--zoz-fg);font-weight:600} .steps .cur i{border-color:var(--zoz-primary);box-shadow:0 0 0 3px var(--zoz-primary-soft)}
.progress{height:6px;border-radius:999px;background:var(--zoz-surface-sunken);overflow:hidden} .progress>i{display:block;height:100%;background:var(--zoz-primary);border-radius:999px;transition:width .3s var(--zoz-ease)}
.match{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;background:var(--zoz-success-soft);color:var(--zoz-green-700);font-size:13px}
.match.warn{background:var(--zoz-warning-soft);color:var(--zoz-amber-700)}
.arrow-cols{display:grid;grid-template-columns:1fr 40px 1fr;align-items:stretch;gap:0}
.arrow-cols .ar{display:grid;place-items:center;color:var(--zoz-fg-3)}
.callout{display:flex;gap:10px;padding:10px 12px;border-radius:10px;font-size:13px;background:var(--zoz-info-soft);color:var(--zoz-fg)}
.callout.warn{background:var(--zoz-warning-soft)} .callout.err{background:var(--zoz-danger-soft)} .callout svg{flex:none;width:18px;height:18px;margin-top:1px}

/* ---------- Toast, dialog, skuff ---------- */
.toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:8px;z-index:100}
.toast{display:flex;gap:10px;align-items:flex-start;min-width:300px;max-width:420px;padding:12px 14px;border-radius:12px;background:var(--zoz-gray-900);color:#fff;box-shadow:var(--zoz-shadow-lg);font-size:13.5px;animation:tin .2s var(--zoz-ease)}
.toast .ti{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--zoz-success);flex:none;font-size:12px}
.toast.err .ti{background:var(--zoz-danger)} .toast small{display:block;color:#AEB6C4;font-size:12px} .toast a{color:#9FB4FF}
@keyframes tin{from{transform:translateY(8px);opacity:0}}
.overlay{position:fixed;inset:0;background:rgba(15,20,35,.42);display:grid;place-items:center;z-index:90;padding:16px}
.dialog{width:min(520px,100%);background:var(--zoz-surface);border-radius:16px;box-shadow:var(--zoz-shadow-lg)}
.dialog .dh{padding:18px 20px 6px} .dialog .db{padding:6px 20px 16px;color:var(--zoz-fg-2)} .dialog .df{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--zoz-border)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--zoz-surface);box-shadow:var(--zoz-shadow-lg);z-index:95;display:flex;flex-direction:column;border-left:1px solid var(--zoz-border)}
.drawer-head{padding:18px 20px;border-bottom:1px solid var(--zoz-border)} .drawer-body{padding:16px 20px;overflow:auto;flex:1}
.drawer-tabs{display:flex;gap:18px;padding:0 20px;border-bottom:1px solid var(--zoz-border)} .drawer-tabs a{padding:10px 0;font-size:13px;color:var(--zoz-fg-2);border-bottom:2px solid transparent} .drawer-tabs a.on{color:var(--zoz-fg);border-color:var(--zoz-primary);font-weight:500}

/* ---------- Tom/feil/laster ---------- */
.state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:48px 24px;color:var(--zoz-fg-2)}
.state .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--zoz-surface-sunken);color:var(--zoz-fg-3);margin-bottom:6px}
.state h3{color:var(--zoz-fg);font-size:15px} .state p{margin:0;max-width:420px;font-size:13.5px}
.state.err .ic{background:var(--zoz-danger-soft);color:var(--zoz-danger)}
.sk{background:linear-gradient(90deg,var(--zoz-surface-sunken) 0,var(--zoz-gray-50) 50%,var(--zoz-surface-sunken) 100%);background-size:200% 100%;animation:sk 1.2s infinite linear;border-radius:6px;height:12px}
@keyframes sk{to{background-position:-200% 0}}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Lister i dashbord ---------- */
.list{list-style:none;margin:0;padding:0} .list li{display:flex;gap:12px;align-items:center;padding:11px 18px;border-bottom:1px solid var(--zoz-border);font-size:13.5px}
.list li:last-child{border-bottom:0} .list .grow{flex:1;min-width:0} .list .grow small{display:block;color:var(--zoz-fg-3);font-size:12px}
.bar{display:flex;align-items:flex-end;gap:10px;height:150px;padding:8px 4px 0}
.bar div{flex:1;background:var(--zoz-brand-100);border-radius:6px 6px 2px 2px;position:relative} .bar div.cur{background:var(--zoz-primary)}
.bar-l{display:flex;gap:10px;padding:6px 4px 0;font-size:11.5px;color:var(--zoz-fg-3)} .bar-l span{flex:1;text-align:center}
.timeline{list-style:none;margin:0;padding:0 0 0 4px} .timeline li{display:flex;gap:12px;padding:6px 0;font-size:13px}
.timeline li i{width:10px;height:10px;margin-top:5px;border-radius:50%;flex:none;background:var(--zoz-border-strong)} .timeline li.ok i{background:var(--zoz-success)} .timeline li.cur i{background:var(--zoz-primary);box-shadow:0 0 0 3px var(--zoz-primary-soft)}
.dfsteps{display:flex;gap:6px;margin-top:10px}.dfsteps .p{flex:1;border:1px solid var(--zoz-border);border-radius:10px;padding:8px 10px;font-size:12px;background:var(--zoz-surface-2)} .dfsteps .p b{display:block;font-size:13px;color:var(--zoz-fg)}
.dfsteps .p.cur{border-color:var(--zoz-warning);background:var(--zoz-warning-soft)} .dfsteps .p.ok{border-color:#BFE3CB;background:var(--zoz-success-soft)}

/* ---------- Mobil ---------- */
@media (max-width: 900px){ .shell{background:none}
  .shell{grid-template-columns:1fr} .sidebar{display:none}
  .topbar{padding:0 12px} .search kbd,.avatar b{display:none}
  .content{padding:16px 14px 88px} .g4{grid-template-columns:repeat(2,minmax(0,1fr))} .g3,.g2,.split,.form{grid-template-columns:1fr}
  .arrow-cols{grid-template-columns:1fr} .arrow-cols .ar{transform:rotate(90deg);height:32px}
  .tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--zoz-surface);border-top:1px solid var(--zoz-border);z-index:40;padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;font-size:11px;color:var(--zoz-fg-3)} .tabbar a.active{color:var(--zoz-primary)} .tabbar svg{width:20px;height:20px}
  .hide-m{display:none} .t td,.t th{padding-left:10px;padding-right:10px}
  .review-actions{flex-wrap:wrap} .review-actions .btn{flex:1}
  .toasts{left:12px;right:12px;bottom:76px} .toast{min-width:0}
}
.t.edit td:nth-child(3){min-width:220px}
.grid>*,.split>*,.arrow-cols>*{min-width:0}
.search span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){.page-head h1{font-size:20px}.t.edit td:nth-child(3){min-width:160px}.card-body .t{font-size:12.5px}}
.search{min-width:0}
@media (max-width:900px){.chips{max-width:100%;overflow-x:auto;scrollbar-width:none}.chip{white-space:nowrap}.toolbar .input{width:100%!important;flex:1 1 100%}.content{overflow-x:hidden}}