/**
 * DomeneVakt — style.css
 * shadcn-inspirerte design tokens, varm tone som matcher megler-siden
 * Plassering : /home/domenejeger/public_html/vakt.domenejeger.no/style.css
 * Utviklet av: Tormod Kvisvik
 * Firma      : Kvisvik Nettutvikling · org.nr 981309820
 * Web        : https://kvisvik.no
 * E-post     : kundeservice@kvisvik.no
 * DomeneVakt er et produkt av Kvisvik Nettutvikling.
 * https://domenejeger.no
 */

:root {
  --bg: hsl(0 0% 100%);
  --fg: hsl(222 47% 11%);
  --muted: hsl(210 40% 96%);
  --muted-fg: hsl(215 16% 47%);
  --border: hsl(214 32% 91%);
  --primary: hsl(222 47% 11%);
  --primary-fg: hsl(210 40% 98%);
  --aksent: hsl(160 84% 39%);   /* megler-grønn */
  --aksent-fg: white;
  --varsel-rod: hsl(0 84% 60%);
  --varsel-gul: hsl(45 93% 47%);
  --kort-skygge: 0 1px 3px rgb(0 0 0 / .06), 0 1px 2px rgb(0 0 0 / .04);
  --radius: .5rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--muted); color: var(--fg); line-height: 1.5; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  background: var(--bg); border-bottom: 1px solid var(--border);
  padding: .75rem 1.5rem; display: flex; align-items: center; gap: 1.5rem;
  position: sticky; top: 0; z-index: 10;
}
.topbar .logo { font-size: 1.1rem; color: var(--fg); }
.topbar nav { display: flex; gap: .25rem; flex: 1; }
.topbar nav a {
  padding: .5rem .9rem; border-radius: var(--radius); color: var(--muted-fg);
  font-size: .9rem; font-weight: 500;
}
.topbar nav a:hover { background: var(--muted); color: var(--fg); text-decoration: none; }
.topbar nav a.aktiv { background: var(--fg); color: var(--primary-fg); }
.topbar nav a.ut { margin-left: auto; color: var(--varsel-rod); }

.container { max-width: 1200px; margin: 2rem auto; padding: 0 1.5rem; }

h1 { font-size: 1.6rem; margin: 0 0 1.5rem; font-weight: 700; }
h2 { font-size: 1.2rem; margin: 1.5rem 0 .75rem; font-weight: 600; }

.kort {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1rem;
  box-shadow: var(--kort-skygge);
}

/* Stat-kort til dashboard */
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.stat { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.stat .label { font-size: .75rem; text-transform: uppercase; color: var(--muted-fg); font-weight: 600; letter-spacing: .05em; }
.stat .verdi { font-size: 2rem; font-weight: 700; margin-top: .25rem; }
.stat.gronn .verdi { color: var(--aksent); }
.stat.gul .verdi { color: var(--varsel-gul); }
.stat.rod .verdi { color: var(--varsel-rod); }

/* Tabeller */
table { width: 100%; border-collapse: collapse; background: var(--bg); border-radius: var(--radius); overflow: hidden; }
th, td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--border); font-size: .9rem; }
th { background: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; color: var(--muted-fg); letter-spacing: .03em; }
tr:last-child td { border-bottom: none; }
tr:hover { background: var(--muted); }

/* Status-pills */
.pill { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.pill-registrert { background: hsl(160 80% 95%); color: hsl(160 84% 25%); }
.pill-ledig      { background: hsl(45 93% 90%); color: hsl(30 80% 30%); }
.pill-ukjent     { background: var(--muted); color: var(--muted-fg); }
.pill-feil       { background: hsl(0 80% 95%); color: hsl(0 70% 35%); }
.pill-reservert  { background: hsl(220 80% 95%); color: hsl(220 70% 35%); }

/* Knapper */
.knapp {
  display: inline-block; padding: .55rem 1rem; border-radius: var(--radius);
  background: var(--primary); color: var(--primary-fg); border: none;
  font-size: .9rem; font-weight: 500; cursor: pointer; text-decoration: none;
}
.knapp:hover { opacity: .9; text-decoration: none; color: var(--primary-fg); }
.knapp.gronn { background: var(--aksent); color: var(--aksent-fg); }
.knapp.lett { background: var(--bg); color: var(--fg); border: 1px solid var(--border); }
.knapp.lett:hover { background: var(--muted); }
.knapp.rod { background: var(--varsel-rod); }
.knapp.liten { padding: .3rem .6rem; font-size: .8rem; }

/* Skjema */
label { display: block; margin-top: 1rem; font-size: .85rem; font-weight: 500; color: var(--muted-fg); }
input[type=text], input[type=email], input[type=password], input[type=number],
select, textarea {
  width: 100%; padding: .55rem .75rem; margin-top: .25rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); font-size: .9rem; font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--fg); box-shadow: 0 0 0 3px hsl(222 47% 11% / .1);
}
textarea { font-family: 'SF Mono', Monaco, monospace; min-height: 120px; }

/* Flash-meldinger */
.flash { padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: .9rem; }
.flash-ok    { background: hsl(160 80% 95%); color: hsl(160 84% 25%); border: 1px solid hsl(160 84% 80%); }
.flash-feil  { background: hsl(0 80% 95%); color: hsl(0 70% 35%); border: 1px solid hsl(0 70% 85%); }
.flash-info  { background: hsl(220 80% 95%); color: hsl(220 70% 35%); border: 1px solid hsl(220 70% 85%); }

/* Login */
.login-boks { max-width: 380px; margin: 5rem auto; }
.login-boks h1 { text-align: center; }

/* Bunn */
.bunn { text-align: center; padding: 2rem; color: var(--muted-fg); font-size: .85rem; }

/* Verktøysrad */
.verktoy { display: flex; gap: .5rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.verktoy form { display: inline; }

/* Småtekst */
.smatekst { font-size: .8rem; color: var(--muted-fg); }
.score { font-weight: 700; color: var(--aksent); }