/* SST-dashboard — huisstijl De Levensloop (Kleurcodes.docx) */
:root {
  --paars: #a92c7b;
  --donker: #6e0d4f;
  --groen: #d0e558;
  --geel: #f4d44d;
  --creme: #f9f5f0;
  --lila: #e3bde0;
  --tekst: #2a1424;
  --grijs: #7a6a74;
  --lijn: #e6dbe2;
  --rood: #c0392b;
  --oranje: #e08a1e;
  --vers: #2e9d4a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--tekst); background: var(--creme); }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { width: 100%; padding: 7px 9px; border: 1px solid var(--lijn); border-radius: 8px; background: #fff; }
input:disabled, textarea:disabled { background: #f4eff2; color: var(--grijs); }
textarea { resize: vertical; }
label { display: block; font-size: 13px; color: var(--grijs); margin-bottom: 10px; }
label > input, label > textarea, label > select { margin-top: 3px; color: var(--tekst); }
h1, h2, h3 { margin: 0 0 10px; color: var(--donker); }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
button { cursor: pointer; border: 1px solid var(--lijn); background: #fff; border-radius: 8px; padding: 7px 12px; }
button:hover { border-color: var(--paars); }
button.primair { background: var(--paars); border-color: var(--paars); color: #fff; font-weight: 600; }
button.primair:hover { background: var(--donker); }
button.gevaar { color: var(--rood); }
button.gevaar:hover { border-color: var(--rood); }
button.licht { background: transparent; }
button.breed { width: 100%; margin-bottom: 10px; }
.klein { font-size: 13px; color: var(--grijs); }
.leeg { color: var(--grijs); font-style: italic; padding: 10px; }
.fouttekst { color: var(--rood); min-height: 1.4em; }
.laden { padding: 40px; text-align: center; color: var(--grijs); }
.rij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rij > input, .rij > select { flex: 1 1 160px; width: auto; }
.vink { display: flex; gap: 6px; align-items: center; margin: 0; color: var(--tekst); }
.vink input { width: auto; }

/* inloggen */
.los { max-width: 380px; margin: 8vh auto; background: #fff; padding: 28px; border-radius: 16px; box-shadow: 0 4px 24px rgba(110, 13, 79, .12); }
.los .logo { width: 56px; height: 56px; display: block; margin-bottom: 12px; }
.los button { width: 100%; margin-top: 6px; }

/* downloadpagina */
.download { max-width: 460px; }
.download h2 { margin-top: 22px; }
.download ol { padding-left: 20px; }
.knop { display: block; text-align: center; text-decoration: none; padding: 12px; border-radius: 10px; font-weight: 600; }
.knop.primair { background: var(--paars); color: #fff; }
.knop[hidden] { display: none; }

/* frame */
#app { height: 100%; display: flex; flex-direction: column; }
#hoofd { display: flex; align-items: center; gap: 14px; padding: 8px 16px; background: var(--donker); color: #fff; flex-wrap: wrap; }
.logo-klein { width: 30px; height: 30px; }
#hoofd .titel { font-size: 16px; }
#hoofd nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
#hoofd nav button, #hoofd #uitloggen { background: transparent; border: 0; color: #f1dcea; padding: 6px 12px; }
#hoofd nav button.actief { background: var(--paars); color: #fff; }
#hoofd nav button:hover, #hoofd #uitloggen:hover { color: #fff; }
#hoofd .ik { font-size: 13px; color: #e8cfe0; }
.teller { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--groen); color: var(--tekst); font-size: 12px; font-weight: 700; text-align: center; }
.teller:empty { display: none; }
#inhoud { flex: 1; min-height: 0; display: flex; }
#inhoud > aside { width: 320px; flex: none; overflow-y: auto; border-right: 1px solid var(--lijn); background: #fff; padding: 10px; }
#inhoud > section { flex: 1; min-width: 0; overflow-y: auto; }
.view-instellingen { flex-direction: column; overflow-y: auto; padding: 16px; gap: 16px; align-items: stretch; }
.kaartje { background: #fff; border-radius: 12px; padding: 16px; border: 1px solid var(--lijn); max-width: 1000px; margin: 16px; }
.view-instellingen .kaartje { margin: 0; }
#inhoud.view-instellingen > section { flex: none; overflow: visible; }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 12px; }
.raster.twee { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* berichten */
.draad, .teamrij, .locrij { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--lijn); border-radius: 0; padding: 10px 8px; background: transparent; position: relative; }
.draad.actief, .teamrij.actief, .locrij.actief { background: var(--lila); }
.teamrij .klein { display: block; }
.draad .naam { font-weight: 600; display: block; padding-right: 30px; }
.draad .teller { position: absolute; right: 8px; top: 10px; background: var(--paars); color: #fff; }
.draad .voorbeeld { font-size: 13px; color: var(--grijs); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.draad.nieuw .voorbeeld { color: var(--tekst); }
#gesprek { display: flex; flex-direction: column; }
#gesprekkop { padding: 12px 16px; border-bottom: 1px solid var(--lijn); background: #fff; }
#gesprekkop p { margin: 0; }
#berichten { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.bericht { max-width: 70%; padding: 8px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--lijn); }
.bericht.van-team { align-self: flex-start; }
.bericht.van-sst { align-self: flex-end; background: #f3e4ef; }
.bericht.urgent { border: 2px solid var(--rood); }
.bericht .meta { font-size: 12px; color: var(--grijs); }
.bericht .tekst { white-space: pre-wrap; word-wrap: break-word; }
.bericht .label { background: var(--geel); color: var(--tekst); padding: 0 6px; border-radius: 6px; }
.bericht.urgent .label { background: var(--rood); color: #fff; }
.bericht .gelezen { font-size: 11px; color: var(--grijs); text-align: right; }
#schrijf { padding: 10px 16px; border-top: 1px solid var(--lijn); background: #fff; }
#schrijf .rij { justify-content: space-between; margin-top: 6px; }

/* kaart */
.view-kaart { position: relative; }
#kaart { flex: 1; min-width: 0; }
.view-kaart > aside { order: 2; border-right: 0; border-left: 1px solid var(--lijn); }
.locrij { display: flex; gap: 10px; align-items: flex-start; }
.stip { width: 12px; height: 12px; border-radius: 50%; margin-top: 5px; flex: none; background: #aaa; }
.stip.vers, .pin.vers span { background: var(--vers); }
.stip.oud, .pin.oud span { background: var(--oranje); }
.stip.stil, .pin.stil span { background: #8a8a8a; }
.pin span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 13px; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.pin.uit span { opacity: .55; }

/* teams */
.captain { border-top: 1px solid var(--lijn); padding: 10px 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
.captain > div:first-child { flex: 1 1 300px; }
.knoppen { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.codevak { flex-basis: 100%; }
.codevak:empty { display: none; }
.codebox { background: var(--creme); border: 1px dashed var(--paars); border-radius: 10px; padding: 12px; margin-top: 6px; }
.codebox .code-groot { font: 700 28px/1.2 ui-monospace, Consolas, monospace; letter-spacing: 3px; color: var(--donker); }
.codebox textarea, .codebox input { margin: 6px 0; font-size: 13px; }
#nieuwecaptain, #nieuwaccount { margin-top: 12px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 6px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
tr.uitklap td { border: 0; padding: 0 6px; }

#melding { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(80px); background: var(--donker); color: #fff; padding: 10px 18px; border-radius: 10px; transition: transform .2s; z-index: 2000; }
#melding.zichtbaar { transform: translateX(-50%); }
#melding.fout { background: var(--rood); }

@media (max-width: 800px) {
  #inhoud { flex-direction: column; overflow-y: auto; }
  #inhoud > aside { width: auto; max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--lijn); }
  .view-kaart > aside { order: 0; }
  #kaart { min-height: 60vh; }
  .bericht { max-width: 90%; }
}