/* ====== Temaer ====== */
:root{
  --radius:16px;
  --sidebar-w: 14vw;
  --sidebar-w-min: 220px;
  --sidebar-w-max: 280px;
  --content-max: 1600px;
  --shadow: 0 10px 30px rgba(0,0,0,.18);

  /* Semantiske farger (bruk disse – ikke hardkod) */
  --bg: #0f1115;
  --panel: #151822;
  --panel-2:#1b1f2b;
  --text: #e9ecf1;
  --muted:#a9b0bf;
  --brand:#6aa6ff;
  --ok:#46d07f;
  --warn:#ffcc66;
  --danger:#ff6b6b;
  --border:#222637;
  --focus: 0 0 0 3px rgba(106,166,255,.35);

  /* Avledede UI-farger */
  --hover: color-mix(in oklab, var(--panel), white 6%);
  --hover-strong: color-mix(in oklab, var(--panel), white 10%);
  --thead: color-mix(in oklab, var(--panel), black 6%);
  --active-bg: color-mix(in oklab, var(--panel), white 8%);
  --active-border: color-mix(in oklab, var(--border), white 10%);
}

/* Mørkt (default) */
:root, body[data-theme="dark"]{
  --bg: #0f1115;
  --panel: #151822;
  --panel-2:#1b1f2b;
  --text: #e9ecf1;
  --muted:#a9b0bf;
  --brand:#6aa6ff;
  --ok:#46d07f;
  --warn:#ffcc66;
  --danger:#ff6b6b;
  --border:#222637;
  --focus: 0 0 0 3px rgba(106,166,255,.35);

  --hover: color-mix(in oklab, var(--panel), white 6%);
  --hover-strong: color-mix(in oklab, var(--panel), white 10%);
  --thead: color-mix(in oklab, var(--panel), white 6%);
  --active-bg: color-mix(in oklab, var(--panel), white 8%);
  --active-border: color-mix(in oklab, var(--border), white 12%);
}

/* Lyst */
body[data-theme="light"]{
  --bg: #f6f7fb;
  --panel: #ffffff;
  --panel-2:#f1f3f9;
  --text: #0f172a;
  --muted:#475569;
  --brand:#2b6cff;
  --ok:#15803d;
  --warn:#b45309;
  --danger:#b91c1c;
  --border:#e2e8f0;
  --focus: 0 0 0 3px rgba(43,108,255,.22);

  --hover: color-mix(in oklab, var(--panel), black 6%);
  --hover-strong: color-mix(in oklab, var(--panel), black 10%);
  --thead: color-mix(in oklab, var(--panel), black 6%);
  --active-bg: color-mix(in oklab, var(--panel), var(--brand) 6%);
  --active-border: color-mix(in oklab, var(--border), var(--brand) 14%);
}

/* Følg systemtema hvis bruker ikke har valgt selv */
@media (prefers-color-scheme: light){
  :root:not([data-user-theme]) body:not([data-theme]) {
    --bg: #f6f7fb;
    --panel: #ffffff;
    --panel-2:#f1f3f9;
    --text: #0f172a;
    --muted:#475569;
    --brand:#2b6cff;
    --ok:#15803d;
    --warn:#b45309;
    --danger:#b91c1c;
    --border:#e2e8f0;
    --focus: 0 0 0 3px rgba(43,108,255,.22);

    --hover: color-mix(in oklab, var(--panel), black 6%);
    --hover-strong: color-mix(in oklab, var(--panel), black 10%);
    --thead: color-mix(in oklab, var(--panel), black 6%);
    --active-bg: color-mix(in oklab, var(--panel), var(--brand) 6%);
    --active-border: color-mix(in oklab, var(--border), var(--brand) 14%);
  }
}

/* ====== Base ====== */
*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* ====== Layout ====== */
.app{
  display:grid;
  grid-template-columns: minmax(var(--sidebar-w-min), var(--sidebar-w)) 1fr;
  min-height:100dvh;
}
.sidebar{
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border-right: 1px solid var(--border);
  position: sticky; top:0; height:100dvh;
  padding: 18px 16px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  margin: 2px 6px 18px 6px;
}
.brand .logo{
  width:34px; height:34px; border-radius:12px;
  background: linear-gradient(145deg, #73b0ff, #4b82ff);
  display:grid; place-items:center; color:white; font-weight:700;
  box-shadow: var(--shadow);
}
.logo-img { background: var(--panel-2); border:1px solid var(--border); border-radius:12px; }
.brand .title{ font-weight:700; letter-spacing:.2px; }

.nav{
  display:flex; flex-direction:column; gap:6px;
  padding: 6px;
}
.nav a{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  color: var(--text);
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  transition: transform .06s ease, background .15s, border-color .15s, color .15s;
}
.nav a .k{
  font-size: 17px; width:22px; text-align:center; color: var(--muted);
}
.nav a:hover{
  background: var(--hover);
  border-color: var(--active-border);
  transform: translateY(-1px);
}
.nav a.active{
  background: var(--active-bg);
  border-color: var(--active-border);
  color: var(--text);
}
.nav .section{
  margin: 12px 6px 6px; 
  font-size:12px; color: var(--muted); text-transform:uppercase; letter-spacing:.08em;
}

.main{
  padding: 22px 28px;
  max-width: var(--content-max);
  width: 100%;
}

/* Topbar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  margin-bottom: 18px;
}
.topbar .left, .topbar .right{
  display:flex; align-items:center; gap:10px;
}
.search{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  display:flex; align-items:center; gap:8px;
}
.search input{
  all:unset; color:var(--text);
  width:220px;
}
.btn{
  appearance:none; border:1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 10px;
  cursor:pointer;
  transition: background .15s, border-color .15s, transform .06s, color .15s;
}
.btn:hover{ background: var(--hover); border-color: var(--active-border); transform: translateY(-1px); }
.btn.primary{
  background: color-mix(in oklab, var(--brand), var(--panel) 40%);
  border-color: color-mix(in oklab, var(--brand), var(--border) 40%);
  color: white;
}
.btn.primary:hover{
  background: color-mix(in oklab, var(--brand), black 8%);
  border-color: color-mix(in oklab, var(--brand), black 14%);
}
.btn.success{
  background: color-mix(in oklab, var(--ok), var(--panel) 35%);
  border-color: color-mix(in oklab, var(--ok), var(--border) 40%);
  color: color-mix(in oklab, white, var(--ok) 10%);
}
.btn.warn{
  background: color-mix(in oklab, var(--warn), var(--panel) 35%);
  border-color: color-mix(in oklab, var(--warn), var(--border) 40%);
  color: color-mix(in oklab, black, var(--warn) 15%);
}
.btn.danger{
  background: color-mix(in oklab, var(--danger), var(--panel) 35%);
  border-color: color-mix(in oklab, var(--danger), var(--border) 40%);
  color: color-mix(in oklab, white, var(--danger) 10%);
}
.btn:focus{ outline:none; box-shadow: var(--focus); }

/* Tema/meny-knapper (posisjonert i header.php) */
.theme-toggle{ background: var(--panel); }
.menu-toggle{ display:none; position: fixed; top:12px; left:12px; z-index:1000; }

/* ====== Cards / panels ====== */
.card{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.grid{ display:grid; gap:16px; }
.grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.cols-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1100px){ .grid.cols-3, .grid.cols-4{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 780px){ .grid, .grid.cols-2, .grid.cols-3, .grid.cols-4{ grid-template-columns: 1fr; } }

/* ====== Forms ====== */
.form{ display:grid; gap:12px; }
.field{ display:grid; gap:6px; }
.label{ color: var(--muted); font-size: 13px; }
.input, .select, .textarea{
  width:100%; background: var(--panel-2); color: var(--text);
  border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; outline:none;
}
.input:focus, .select:focus, .textarea:focus{ box-shadow: var(--focus); border-color: var(--active-border); }
.row{ display:flex; gap:10px; align-items:center; flex-wrap: wrap; }

/* ====== Tables ====== */
.table{
  width:100%; border-collapse: collapse; overflow:hidden;
  border-radius: 12px; border:1px solid var(--border);
}
.table th, .table td{
  padding:12px 12px; text-align:left; border-bottom:1px solid var(--border);
}
.table thead th{
  background: var(--thead);
  color: color-mix(in oklab, var(--text), white 10%);
  font-weight:600; font-size:13px; letter-spacing:.02em;
}
.table tbody tr:hover{ background: var(--hover-strong); }

/* ====== Badges ====== */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding: 3px 8px; border-radius:999px;
  border:1px solid var(--border); font-size:12px; color: var(--muted);
  background: var(--panel-2);
}
.badge.ok{
  background: color-mix(in oklab, var(--ok), var(--panel) 75%);
  color: color-mix(in oklab, white, var(--ok) 15%);
  border-color: color-mix(in oklab, var(--ok), var(--border) 40%);
}
.badge.warn{
  background: color-mix(in oklab, var(--warn), var(--panel) 80%);
  color: color-mix(in oklab, black, var(--warn) 10%);
  border-color: color-mix(in oklab, var(--warn), var(--border) 40%);
}
.badge.danger{
  background: color-mix(in oklab, var(--danger), var(--panel) 80%);
  color: color-mix(in oklab, white, var(--danger) 10%);
  border-color: color-mix(in oklab, var(--danger), var(--border) 40%);
}

/* ====== Typography & utils ====== */
.mt-1{ margin-top:6px; } .mt-2{ margin-top:12px; } .mt-3{ margin-top:18px; } .mt-4{ margin-top:24px; }
.mb-1{ margin-bottom:6px; } .mb-2{ margin-bottom:12px; } .mb-3{ margin-bottom:18px; } .mb-4{ margin-bottom:24px; }
.center{ display:grid; place-items:center; }
.right{ text-align:right; }
.dim{ color: var(--muted); }
.h1{ font-size:24px; font-weight:700; margin:0 0 6px; }
.h2{ font-size:18px; font-weight:600; margin:0 0 6px; color: color-mix(in oklab, var(--text), white 6%); }
.p{ margin:0; color: color-mix(in oklab, var(--text), white 4%); }

/* ====== Sidebar toggle (mobil) ====== */
@media (max-width: 820px){
  .app{ grid-template-columns: 1fr; }
  .sidebar{
    position: fixed; inset:0 auto 0 0;
    width: clamp(var(--sidebar-w-min), var(--sidebar-w), var(--sidebar-w-max));
    transform: translateX(-105%);
    transition: transform .2s ease;
    z-index: 999;
  }
  .sidebar.open{ transform: translateX(0); }
  .menu-toggle{ display:block; }
  .main{ padding-top:56px; }
}

/* ====== Links ====== */
a.link{ color: color-mix(in oklab, var(--brand), white 10%); text-decoration:none; border-bottom:1px dashed var(--active-border); }
a.link:hover{ color: var(--brand); border-bottom-color: var(--brand); }

/* Toast (enkelt) */
.toast{
  position: fixed; right:18px; bottom:18px; z-index:1001;
  background: var(--panel-2); border:1px solid var(--border); color:var(--text);
  padding:10px 14px; border-radius:10px; box-shadow:var(--shadow);
}

/* Autocomplete */
.ac-list { max-height: 320px; overflow:auto; background: var(--panel); border:1px solid var(--border); border-radius: 10px; }
.ac-item + .ac-item { border-top:1px solid var(--border); }