/* politi_pro.css
   Ren, operativ stil for politisystemer
   - Fokus på lesbar tabell, kompakt layout, høy kontrast
   - Sticky header og sticky første kolonne
   - Zebra-striper, hover, tastaturfokus, og print-optimalisering
*/

/* ====== Design tokens ====== */
:root{
  --bg: #f5f7fb;
  --panel: #ffffff;
  --ink: #0c1320;
  --muted: #5b6b82;
  --accent: #0e62ff;
  --accent-2: #1440b8;
  --success: #0f8f4e;
  --danger: #c62828;
  --warn: #b96b00;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --row-alt: #f9fbff;
  --row-hover: #f2f6ff;
  --badge-bg: #eef3ff;
  --badge-br: #d6e4ff;
}

/* ====== Base ====== */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font: 14px/1.45 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ====== Header ====== */
.header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:12px;
  padding:10px 16px;
  background: linear-gradient(180deg, #1140c8 0%, #0e3ab8 100%);
  color:#fff;
  box-shadow:0 1px 0 rgba(12,19,32,.08);
}
.header .logo{
  font-weight:800; letter-spacing:.4px; font-size:15px;
}
.top-controls{margin-left:auto; display:flex; gap:8px; align-items:center}
.input, select{
  padding:9px 11px; border-radius:8px; border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.1); color:#fff;
}
.input::placeholder{color:rgba(255,255,255,.8)}
select{background:#fff; color:var(--ink); border-color:transparent}
.button-primary{
  padding:9px 12px; border-radius:8px; border:0; cursor:pointer;
  background:#072e8a; color:#fff; font-weight:600;
}
.button-primary:hover{background:#05266f}

/* ====== App layout ====== */
.app{
  display:grid; grid-template-columns: 280px 1fr; gap:0;
  min-height:calc(100vh - 52px);
}
.sidebar{
  background:var(--panel);
  border-right:1px solid var(--border);
  padding:14px;
  position:sticky; top:52px; height:calc(100vh - 52px); overflow:auto;
}
.sidebar h4{margin:4px 0 8px; color:var(--muted); font-size:12px; letter-spacing:.02em; text-transform:uppercase}
.sidebar .small{color:var(--muted); font-size:12px}
.sidebar .button-primary{width:100%; margin-top:8px}

.main{padding:18px}
.page-title{margin:0 0 6px; font-size:20px; font-weight:750}
.subtle{color:var(--muted); font-size:12px}

/* ====== Badges / chips ====== */
.badge{
  display:inline-block; padding:3px 8px; border-radius:999px;
  background:var(--badge-bg); border:1px solid var(--badge-br);
  color:#1140c8; font-size:12px; font-weight:600;
}
.small-muted{font-size:12px; color:var(--muted)}

/* ====== Table ====== */
.table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  overflow:hidden;
  box-shadow:0 1px 0 rgba(12,19,32,.03);
}
.table thead th{
  position:sticky; top:0; z-index:2;
  background:#f4f7ff;
  color:#20304a; font-weight:700; font-size:12px; letter-spacing:.02em;
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--border-strong);
}
.table tbody td{
  padding:10px 12px; border-bottom:1px solid var(--border);
  vertical-align:top;
}
.table tbody tr:nth-child(odd) td{ background:var(--row-alt) }
.table tbody tr:hover td{ background:var(--row-hover) }

/* Sticky første kolonne (kode) */
.table th:first-child,
.table td:first-child{
  position:sticky; left:0; z-index:1; background:inherit; /* beholder striping */
  box-shadow: 1px 0 0 var(--border);
}

/* Kompakte celler for NOK / dager / dato */
.table td.money{white-space:nowrap; font-weight:700}
.table td.jail{white-space:nowrap; color:var(--danger); font-weight:700}
.table td.date{white-space:nowrap; color:var(--muted)}

/* Beskrivelse felt */
.table .desc{max-width: 640px}
.table .desc p{margin:.4em 0}
.table .desc .small-muted{margin-top:.35em; display:block}

/* Fokus for tastatur-navigasjon */
.table tbody tr:focus-within td{ outline:2px solid #8fb1ff; outline-offset:-2px }

/* Lenker */
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* ====== Cards (alternativ visning – hvis du trenger) ====== */
.row-list{display:flex; flex-direction:column; gap:10px}
.row{
  display:flex; gap:12px; background:var(--panel);
  border:1px solid var(--border); border-radius:10px; padding:12px;
}
.row .left{min-width:160px}
.row .right{flex:1}

/* ====== Utils ====== */
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, monospace}
.center{display:flex; align-items:center; justify-content:center}
.hidden{display:none}

/* ====== Forms (lys bakgrunn) ====== */
.sidebar select, .sidebar input{
  width:100%; padding:9px 10px; border-radius:8px; border:1px solid var(--border);
  background:#fff; color:var(--ink);
}
.sidebar select:focus, .sidebar input:focus{outline:3px solid rgba(14,98,255,.18); outline-offset:2px}

/* ====== Footer ====== */
.footer{
  margin-top:14px; padding:12px 14px; background:var(--panel);
  border:1px solid var(--border); border-radius:10px; color:var(--muted);
}

/* ====== Responsive ====== */
@media (max-width: 1024px){
  .app{grid-template-columns:1fr}
  .sidebar{position:static; height:auto; border-right:none; border-bottom:1px solid var(--border)}
  .table th:nth-child(6), .table td:nth-child(6){ display:none } /* skjul Lovhjemmel */
}
@media (max-width: 720px){
  .top-controls{display:none} /* enklere på mobil */
  .table th:nth-child(8), .table td:nth-child(8){ display:none } /* skjul Oppdatert */
}

/* ====== Print (A4) ====== */
@media print{
  @page { size: A4 portrait; margin: 14mm }
  :root{ --bg:#fff }
  body{ background:#fff; color:#000; font-size: 11.5pt }
  .header, .sidebar, .footer{ display:none !important }
  .main{ padding:0 }
  .table{ border:1px solid #000 }
  .table thead th{ background:#eee !important; color:#000; -webkit-print-color-adjust: exact; print-color-adjust: exact }
  .table tbody tr:hover td{ background:#fff !important }
  a{ color:#000; text-decoration:none }
}