:root {
  --bg: #0f1115;
  --kort: #171a21;
  --rad: #1d212a;
  --text: #e6e8ee;
  --dampad: #949bab;
  --kant: #2a2f3a;
  --primar: #4f8cff;
  --gron: #3fb950;
  --rod: #f85149;
  --gul: #d29922;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.dold { display: none !important; }
.dampad { color: var(--dampad); }
.fel { color: var(--rod); }

/* Inloggning */
.login { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login .kort { width: 340px; }
.login input { width: 100%; margin: 12px 0; }

header {
  padding: 16px 24px 0;
  border-bottom: 1px solid var(--kant);
  background: var(--kort);
}

header h1 { margin: 0 0 10px; font-size: 20px; }

.topprad { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; align-items: center; }

.nyckeltal {
  background: var(--rad);
  border: 1px solid var(--kant);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 13px;
}

.flagga { font-size: 13px; padding: 5px 10px; border-radius: 6px; }
.flagga.pa { background: rgba(63,185,80,.15); color: var(--gron); border: 1px solid var(--gron); }
.flagga.av { background: rgba(210,153,34,.15); color: var(--gul); border: 1px solid var(--gul); }

nav { display: flex; gap: 4px; }

nav button {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--dampad);
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
}

nav button.aktiv { color: var(--text); border-bottom-color: var(--primar); }

main { padding: 20px 24px 60px; }

.verktygsrad {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 14px;
}

.verktygsrad label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--dampad); }
.avdelare { flex: 1; }

input, select, button, textarea {
  background: var(--rad);
  color: var(--text);
  border: 1px solid var(--kant);
  border-radius: 6px;
  padding: 7px 10px;
  font: inherit;
  font-size: 14px;
}

input.smal { width: 70px; }
button { cursor: pointer; }
button:hover { border-color: var(--primar); }
button.primar { background: var(--primar); border-color: var(--primar); color: #fff; font-weight: 500; }
button.fara { border-color: var(--rod); color: var(--rod); }
button:disabled { opacity: .45; cursor: not-allowed; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--dampad); font-weight: 500; font-size: 12px; padding: 8px 10px; border-bottom: 1px solid var(--kant); }
td { padding: 9px 10px; border-bottom: 1px solid var(--kant); vertical-align: middle; }
tr:hover td { background: var(--rad); }

.kort {
  background: var(--kort);
  border: 1px solid var(--kant);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 14px;
}

.marke { font-size: 12px; padding: 2px 8px; border-radius: 20px; display: inline-block; white-space: nowrap; }
.marke.ledig { background: rgba(63,185,80,.15); color: var(--gron); }
.marke.upptagen { background: rgba(248,81,73,.13); color: var(--rod); }
.marke.okand { background: var(--rad); color: var(--dampad); }
.marke.fel { background: rgba(210,153,34,.15); color: var(--gul); }
.marke.godkand { background: rgba(79,140,255,.15); color: var(--primar); }
.marke.avvisad { background: var(--rad); color: var(--dampad); }
.marke.kopt { background: rgba(63,185,80,.2); color: var(--gron); }
.marke.ny { background: var(--rad); color: var(--text); }

.varning { color: var(--gul); font-size: 12px; display: block; }
.datakalla { color: var(--gron); font-size: 12px; }
.knapprad { display: flex; gap: 5px; flex-wrap: wrap; }
.knapprad button { padding: 4px 9px; font-size: 13px; }
.domannamn { font-weight: 500; }
.motivering { color: var(--dampad); font-size: 13px; max-width: 380px; }

@media (max-width: 700px) {
  main { padding: 14px; }
  header { padding: 12px 14px 0; }
  .motivering, th:nth-child(3), td:nth-child(3) { display: none; }
}

/* ---------- Sajter-fliken ---------- */
.sajtlayout { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 16px; align-items: start; }
.etikettrad { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dampad); margin-bottom: 6px; }
.sajtlista { max-height: 70vh; overflow-y: auto; border: 1px solid var(--kant); border-radius: 6px; }
.sajtlista button {
  display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--kant);
  background: var(--kort); color: var(--text); padding: 9px 11px; cursor: pointer; font-size: 13px;
}
.sajtlista button:hover { background: var(--rad); }
.sajtlista button.aktiv { background: var(--primar); color: #fff; }
.sajtlista .liten { display: block; font-size: 10px; opacity: 0.65; }

.faltrad { display: grid; gap: 4px; margin-bottom: 12px; }
.faltrad label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dampad); }
.faltrad input[type=text], .faltrad textarea, .faltrad select {
  background: var(--bg); color: var(--text); border: 1px solid var(--kant);
  border-radius: 4px; padding: 7px 9px; font: inherit; font-size: 13px; width: 100%;
}
.faltrad textarea { min-height: 58px; resize: vertical; }

.modullista { display: grid; gap: 1px; background: var(--kant); border-radius: 6px; overflow: hidden; margin-bottom: 14px; }
.modulrad { background: var(--kort); padding: 9px 11px; display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; }
.modulrad.av { opacity: 0.5; }
.modulrad__namn { font-size: 13px; font-weight: 600; }
.modulrad__om { font-size: 11px; color: var(--dampad); }
.modulrad select { background: var(--bg); color: var(--text); border: 1px solid var(--kant); border-radius: 4px; padding: 4px 6px; font-size: 11px; max-width: 190px; }
.modulrad input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--primar); }
.demoflagga { font-size: 10px; color: var(--gul); letter-spacing: 0.06em; }

.accentrad { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.accentrad input[type=color] { width: 46px; height: 30px; padding: 0; border: 1px solid var(--kant); border-radius: 4px; background: none; cursor: pointer; }
.accentforslag { display: flex; gap: 6px; }
.accentforslag i { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 1px solid var(--kant); }

@media (max-width: 820px) { .sajtlayout { grid-template-columns: 1fr; } }

/* Utloggning i toppraden. Låg tidigare inte alls — sessionen håller 30 dygn,
   så utan knappen kommer man aldrig ut. */
.utknapp {
  background: transparent; color: var(--dampad);
  border: 1px solid var(--kant); border-radius: 99px;
  padding: 4px 12px; font-size: 12px; cursor: pointer;
}
.utknapp:hover { color: var(--text); border-color: var(--rod); }