/* zomboid-web - ét stilark, ingen byggetrin, ingen CDN. */

:root {
  --bg:      #14161a;
  --flade:   #1c1f25;
  --kant:    #2b2f38;
  --tekst:   #d9dde3;
  --mut:     #8b93a1;
  --gron:    #7fb069;
  --rod:     #c1554a;
  --gul:     #d1a54a;
  --link:    #8fb8d6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
  font: 15px/1.55 system-ui, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--link); }
code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; color: var(--mut); }

/* -- top ------------------------------------------------------------ */
.top {
  display: flex; align-items: center; gap: 1.5rem;
  padding: .85rem 1.5rem;
  background: var(--flade);
  border-bottom: 1px solid var(--kant);
  flex-wrap: wrap;
}
.brand { font-weight: 600; font-size: 1.1rem; text-decoration: none; color: var(--tekst); }
.top nav { display: flex; gap: 1.1rem; flex: 1; flex-wrap: wrap; }
.top nav a { text-decoration: none; color: var(--mut); }
.top nav a:hover { color: var(--tekst); }
.top nav a.adm { color: var(--gul); }

.status { font-size: .85rem; padding: .2rem .6rem; border-radius: 3px; white-space: nowrap; }
.status.op  { background: rgba(127,176,105,.15); color: var(--gron); }
.status.ned { background: rgba(193,85,74,.15);  color: var(--rod); }

.varsel {
  padding: .7rem 1.5rem;
  background: rgba(209,165,74,.12);
  border-bottom: 1px solid var(--kant);
  color: var(--gul);
}

main { max-width: 980px; margin: 0 auto; padding: 1.5rem; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.05rem; margin: 0 0 .8rem; }
h3 { font-size: .95rem; margin: 1.4rem 0 .6rem; color: var(--mut); }

/* -- flader ---------------------------------------------------------- */
.hero {
  padding: 2rem 1.5rem;
  border: 1px solid var(--kant);
  border-left: 3px solid var(--kant);
  border-radius: 4px;
  background: var(--flade);
  margin-bottom: 1.25rem;
}
.hero.op  { border-left-color: var(--gron); }
.hero.ned { border-left-color: var(--rod); }
.hero h1 { margin: 0 0 .4rem; }
.stort { font-size: 2rem; font-weight: 600; margin: .3rem 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }

.kort {
  background: var(--flade);
  border: 1px solid var(--kant);
  border-radius: 4px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.kort.bred { grid-column: 1 / -1; }
.kort.smal { max-width: 420px; margin: 3rem auto; }

.mut { color: var(--mut); }
.lille { font-size: .85rem; }
.tekst { white-space: pre-wrap; font-family: inherit; margin: 0; }

/* -- lister og tabeller ---------------------------------------------- */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .4rem 0; border-bottom: 1px solid var(--kant);
}
.liste li:last-child { border-bottom: 0; }

table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { text-align: left; padding: .45rem .6rem .45rem 0; border-bottom: 1px solid var(--kant); vertical-align: top; }
th { color: var(--mut); font-weight: 500; }
tbody tr:last-child td { border-bottom: 0; }
table.par th { width: 11rem; }

.mark { font-size: .78rem; padding: .1rem .45rem; border-radius: 3px; background: var(--kant); color: var(--mut); white-space: nowrap; }
.mark.ok       { background: rgba(127,176,105,.15); color: var(--gron); }
.mark.advarsel { background: rgba(209,165,74,.15);  color: var(--gul); }

/* -- formularer ------------------------------------------------------ */
form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .3rem 0; }
label { display: flex; gap: .4rem; align-items: center; color: var(--mut); }

input {
  background: var(--bg);
  border: 1px solid var(--kant);
  color: var(--tekst);
  border-radius: 3px;
  padding: .45rem .6rem;
  font: inherit;
  min-width: 8rem;
  flex: 1;
}
input[type="number"] { flex: 0 0 5rem; min-width: 5rem; }
input:focus { outline: 1px solid var(--link); }

button {
  background: var(--kant);
  border: 1px solid transparent;
  color: var(--tekst);
  border-radius: 3px;
  padding: .45rem .9rem;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
button:hover { border-color: var(--mut); }
button.farlig { background: rgba(193,85,74,.2); color: var(--rod); }
button.farlig:hover { border-color: var(--rod); }

.handlinger { display: flex; flex-direction: column; gap: .4rem; }
.handlinger form { margin: 0; flex-wrap: nowrap; }
.handlinger input { min-width: 6rem; }

.kvittering { padding: .7rem 1rem; border-radius: 4px; margin-bottom: 1.25rem; }
.kvittering.ok   { background: rgba(127,176,105,.12); color: var(--gron); }
.kvittering.fejl { background: rgba(193,85,74,.12);  color: var(--rod); }

/* -- bund ------------------------------------------------------------ */
footer {
  max-width: 980px; margin: 2rem auto 3rem; padding: 1rem 1.5rem 0;
  border-top: 1px solid var(--kant);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  color: var(--mut); font-size: .85rem;
}

/* -- kortside -------------------------------------------------------- */
.kortflade { width: 100%; overflow-x: auto; }
.verdenskort { width: 100%; max-height: 70vh; display: block; background: var(--bg); border-radius: 3px; }
.verdenskort .hav       { fill: #101216; }
.verdenskort .udforsket { fill: #232b24; }
.verdenskort .gitter    { stroke: var(--kant); stroke-width: 2; }
.verdenskort .celletekst{ fill: #454b56; font-size: 22px; font-family: ui-monospace, monospace; }
.verdenskort .prik      { stroke: #0c0e11; stroke-width: 6; }
.verdenskort .maerke:hover .prik { stroke: var(--tekst); r: 34; }

.farveprik { display: inline-block; width: .85rem; height: .85rem; border-radius: 2px; border: 1px solid var(--kant); }
.filter { margin-bottom: .8rem; }
.noegleliste { margin: 0; padding-left: 1.1rem; }
.noegleliste li { margin-bottom: .5rem; }

form.lodret { flex-direction: column; align-items: stretch; }
textarea {
  background: var(--bg); border: 1px solid var(--kant); color: var(--tekst);
  border-radius: 3px; padding: .55rem .65rem; font: inherit; width: 100%; resize: vertical;
}
textarea:focus { outline: 1px solid var(--link); }