/* Lijnrecht v0.68 — 📌 prikbord.
   Gebruikt de bestaande tokens uit de app (v0.48) met een terugval, zodat dit
   bestand ook los te bekijken is. */

:root {
  --br-radius: var(--radius, 15px);
  --br-schaduw-paneel: 0 12px 34px rgba(22, 50, 92, .16);
  --br-schaduw-kaart: 0 2px 8px rgba(22, 50, 92, .10);
  --br-lijn: #e3e8f0;
  --br-tekst: #16325c;
  --br-zacht: #6b7a90;
  --br-vlak: #fff;
  --br-grond: #f5f7fb;
  --br-geel: #fff3bf;   --br-geel-rand: #f2dd7e;
  --br-roze: #ffe0ec;   --br-roze-rand: #f5bcd0;
  --br-blauw: #dcecff;  --br-blauw-rand: #a9cdf5;
  --br-groen: #d9f5e3;  --br-groen-rand: #a4dcbb;
  --br-grijs: #e9edf3;  --br-grijs-rand: #cbd3df;
}

/* ---------------------------------------------------------------- knop */

.br-knop {
  position: relative;
  border: 0; background: transparent; cursor: pointer;
  font-size: 19px; line-height: 1; padding: 7px 9px; border-radius: 9px;
  transition: background .15s;
}
.br-knop:hover { background: rgba(22, 50, 92, .07); }
.br-knop .br-teller {
  position: absolute; top: 1px; right: 1px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: #e5484d; color: #fff;
  font: 600 11px/17px system-ui, sans-serif; text-align: center;
}

/* ---------------------------------------------------------------- paneel */

.br-paneel {
  position: fixed; top: 58px; right: 14px; z-index: 40;
  width: min(880px, calc(100vw - 28px)); max-height: calc(100vh - 78px);
  display: flex; flex-direction: column;
  background: var(--br-vlak); color: var(--br-tekst);
  border: 1px solid var(--br-lijn); border-radius: 14px;
  box-shadow: var(--br-schaduw-paneel);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.br-paneel[hidden] { display: none; }

.br-kop { display: flex; align-items: center; gap: 10px; padding: 12px 14px 0; }
.br-kop h2 { margin: 0; font-size: 16px; font-weight: 650; }
.br-kop .br-rek { flex: 1; }

.br-tabs { display: flex; gap: 4px; padding: 10px 14px 0; flex-wrap: wrap; }
.br-tab {
  border: 1px solid transparent; background: transparent; cursor: pointer;
  padding: 6px 11px; border-radius: 9px 9px 0 0; color: var(--br-zacht);
  font: inherit; font-weight: 550;
}
.br-tab[aria-selected="true"] {
  background: var(--br-grond); border-color: var(--br-lijn); border-bottom-color: var(--br-grond);
  color: var(--br-tekst);
}
.br-tab .br-n { color: var(--br-zacht); font-weight: 500; }

.br-balk {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-top: 1px solid var(--br-lijn); background: var(--br-grond);
}
.br-nieuw {
  flex: 1; min-width: 0; padding: 9px 12px; font: inherit;
  border: 1px solid var(--br-lijn); border-radius: 10px; background: var(--br-vlak);
}
.br-nieuw:focus { outline: 2px solid #4c8dff55; border-color: #4c8dff; }
.br-mini {
  border: 1px solid var(--br-lijn); background: var(--br-vlak); color: var(--br-tekst);
  border-radius: 9px; padding: 7px 10px; font: inherit; cursor: pointer;
}
.br-mini[aria-pressed="true"] { background: #e7efff; border-color: #a9cdf5; }

.br-koppel {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 14px; font-size: 13px; color: var(--br-zacht);
  background: var(--br-grond); border-top: 1px solid var(--br-lijn);
}
.br-koppel[hidden] { display: none; }
.br-koppel .br-rek { flex: 1; }
.br-koppel .br-mini { font-size: 13px; padding: 5px 9px; }

.br-bord {
  flex: 1; overflow: auto; padding: 14px; background: var(--br-grond);
  border-radius: 0 0 14px 14px;
}

/* ---------------------------------------------------------------- kolommen */

.br-kolommen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: start; }
.br-kolom {
  background: var(--br-vlak); border: 1px solid var(--br-lijn); border-radius: 12px;
  padding: 10px; min-height: 90px;
}
.br-kolom.br-doel { outline: 2px dashed #4c8dff; outline-offset: -4px; }
.br-kolom > h3 {
  margin: 0 0 9px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--br-zacht); font-weight: 650;
}
.br-leeg { color: var(--br-zacht); font-size: 13px; padding: 6px 2px; }

/* ---------------------------------------------------------------- briefje */

.br-kaart {
  position: relative; margin-bottom: 9px; padding: 10px 11px 8px;
  border-radius: 11px; border: 1px solid var(--br-geel-rand); background: var(--br-geel);
  box-shadow: var(--br-schaduw-kaart); cursor: grab; touch-action: none;
}
.br-kaart:last-child { margin-bottom: 0; }
.br-kaart.br-sleept { opacity: .65; cursor: grabbing; }
.br-kaart[data-kleur="roze"]  { background: var(--br-roze);  border-color: var(--br-roze-rand); }
.br-kaart[data-kleur="blauw"] { background: var(--br-blauw); border-color: var(--br-blauw-rand); }
.br-kaart[data-kleur="groen"] { background: var(--br-groen); border-color: var(--br-groen-rand); }
.br-kaart[data-kleur="grijs"] { background: var(--br-grijs); border-color: var(--br-grijs-rand); }
.br-kaart.br-gereed .br-tekst { text-decoration: line-through; opacity: .6; }

.br-tekst { white-space: pre-wrap; word-break: break-word; min-height: 20px; }
.br-tekst[contenteditable="true"] { outline: 2px solid #4c8dff55; border-radius: 5px; }

.br-voet {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 7px; font-size: 12px; color: #4a5a72;
}
.br-merk {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255, 255, 255, .65); border-radius: 7px; padding: 1px 6px;
}
.br-merk.br-verlopen { background: #ffe0e0; color: #9b2226; font-weight: 600; }
.br-acties { margin-left: auto; display: flex; gap: 2px; }
.br-acties button {
  border: 0; background: transparent; cursor: pointer; font-size: 13px;
  padding: 3px 5px; border-radius: 6px; color: #4a5a72;
}
.br-acties button:hover { background: rgba(255, 255, 255, .8); }
.br-kaart:focus-visible, .br-acties button:focus-visible { outline: 2px solid #16325c; outline-offset: 2px; }

/* ---------------------------------------------------------------- vrij plakken */

.br-vrij { position: relative; min-height: 420px; background:
  radial-gradient(circle at 12px 12px, #dfe5ee 1px, transparent 1px) 0 0 / 24px 24px; }
.br-vrij .br-kaart { position: absolute; width: 210px; margin: 0; }

/* ---------------------------------------------------------------- smal scherm */

@media (max-width: 700px) {
  .br-paneel { top: 0; right: 0; left: 0; width: auto; max-height: 100vh; border-radius: 0; }
  .br-kolommen { grid-template-columns: 1fr; }
  .br-vrij { min-height: 0; background: none; }
  .br-vrij .br-kaart { position: static; width: auto; margin-bottom: 9px; }
}

/* ---------------------------------------------------------------- donker */

@media (prefers-color-scheme: dark) {
  .br-paneel:not([data-thema="licht"]) {
    --br-vlak: #1b2230; --br-grond: #151b26; --br-lijn: #2c3648;
    --br-tekst: #e7edf7; --br-zacht: #9aa8bd;
    --br-geel: #4a4320;  --br-geel-rand: #6b6030;
    --br-roze: #4a2433;  --br-roze-rand: #6d3a4c;
    --br-blauw: #1f3752; --br-blauw-rand: #2f5478;
    --br-groen: #1e4033; --br-groen-rand: #2e6350;
    --br-grijs: #2a3241; --br-grijs-rand: #3b4659;
  }
  .br-paneel:not([data-thema="licht"]) .br-voet { color: #b6c2d4; }
  .br-paneel:not([data-thema="licht"]) .br-merk { background: rgba(255, 255, 255, .10); }
}