@import url('kleuren.css');
/* app.css — projectenlijst en login. Iconen, geen labels. */
*{box-sizing:border-box}
body{margin:0;background:var(--werkvlak);color:var(--ink);
     font:15px/1.45 Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
body.centered{display:grid;place-items:center;min-height:100vh}

.bar{display:flex;align-items:center;gap:8px;padding:10px 14px;
     background:var(--paneel);border-bottom:1px solid var(--lijn)}
.spacer{flex:1}

.icon{min-width:44px;min-height:44px;display:grid;place-items:center;
      background:none;border:0;color:var(--dim);font-size:18px;border-radius:10px;
      cursor:pointer;position:relative;text-decoration:none;line-height:1}
.icon:hover{background:var(--verhoogd);color:var(--ink)}
.icon.on{color:var(--accent)}
.icon.sm{min-width:34px;min-height:34px;font-size:15px}

/* Gelabelde knop: icoon met het woord ernaast. Voor knoppen waarvan het icoon
   alleen niet spreekt. De tooltip valt weg — het label staat er immers al. */
.icon.lbl{width:auto;gap:7px;padding:0 12px;grid-auto-flow:column;
          place-items:center;color:var(--dim)}
.icon.lbl .icon-woord{font-size:12px;line-height:1;white-space:nowrap}
.icon.lbl:hover{color:var(--ink)}
.icon.lbl[data-tip]::after{display:none}

/* tooltip pas na 600ms, anders flikkert het scherm vol tekst */
.icon[data-tip]::after{
  content:attr(data-tip);position:absolute;top:100%;left:50%;translate:-50% 6px;
  background:#000c;color:#fff;font-size:12px;white-space:nowrap;
  padding:4px 8px;border-radius:6px;opacity:0;pointer-events:none;
  transition:opacity .12s .6s;z-index:50}
.icon[data-tip]:hover::after{opacity:1}

/* Weergavekeuze en de lijstweergave. */
.weergave{display:inline-flex;gap:2px;margin-right:6px;border:1px solid var(--lijn);border-radius:10px;padding:2px}
.weergave .icon{min-width:34px;min-height:32px;font-size:15px}
.projectlijst{width:100%;border-collapse:collapse;margin:8px 0}
.projectlijst th{text-align:left;font-weight:500;font-size:12px;color:var(--dim);padding:8px 12px;border-bottom:1px solid var(--lijn);white-space:nowrap}
.projectlijst th[data-sort]{cursor:pointer;user-select:none}
.projectlijst th[data-sort]:hover{color:var(--ink)}
.projectlijst th.on{color:var(--ink)}
.projectlijst th.on[data-richting=op]::after{content:' \2191'}
.projectlijst th.on[data-richting=af]::after{content:' \2193'}
.projectlijst td{padding:6px 12px;border-bottom:1px solid var(--lijn);vertical-align:middle}
.projectlijst tr.rij:hover td{background:var(--paneel)}
.th-thumb,.projectlijst td:first-child{width:96px;padding-left:18px}
.rij-thumb{display:block;width:96px;aspect-ratio:16/9;border-radius:6px;background:#000 center/cover no-repeat}
.rij-naam{color:var(--ink);text-decoration:none}
.rij-naam:hover{text-decoration:underline}
.rij-klant{color:var(--dim)}
.rij-datum{color:var(--dim);font-size:12px;white-space:nowrap}
.rij-knoppen{white-space:nowrap;text-align:right;padding-right:12px}
.rij-knoppen .icon{display:inline-grid;opacity:0;transition:opacity .15s}
tr.rij:hover .rij-knoppen .icon{opacity:1}
.tekst-knop{background:none;border:1px solid var(--lijn);color:var(--dim);border-radius:8px;padding:6px 12px;font:inherit;cursor:pointer}
.tekst-knop:hover{color:var(--ink);border-color:var(--dim)}
.groep-titel{display:flex;align-items:center;gap:8px}
.groep-aantal{font-size:12px;color:var(--dim);font-weight:400;background:var(--paneel);border:1px solid var(--lijn);border-radius:10px;padding:1px 8px}
.groep-titel .icon.sm{opacity:0;transition:opacity .15s}
.groep-titel:hover .icon.sm{opacity:1}
.groep-leeg{color:var(--dim);padding:0 18px 4px;margin:0;font-size:13px}
dialog{border:0;background:transparent;padding:0}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog .card h3{margin:0 0 4px;font-size:16px}
dialog select{background:var(--groef);border:1px solid var(--lijn);color:var(--ink);border-radius:8px;padding:10px 12px;font:inherit}
dialog .row button.stil{background:none;border:1px solid var(--lijn);color:var(--dim)}
.grid{list-style:none;margin:0;padding:18px;display:grid;gap:16px;
      grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.tile{background:var(--paneel);border:1px solid var(--lijn);border-radius:12px;overflow:hidden}
.thumb{display:block;aspect-ratio:16/9;background:#000 center/cover no-repeat}
.meta{display:flex;flex-direction:column;gap:4px;padding:8px 6px 4px 12px}
/* De hele naam, op de volle breedte, tot drie regels; daarna pas afkappen. */
.tile-naam{overflow:hidden;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;
      -webkit-box-orient:vertical;overflow-wrap:anywhere}
/* Onderaan: aangemaakt → laatst bewerkt links, de knoppen rechts. */
.tile-data{color:var(--dim);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-voet{display:flex;align-items:center;gap:2px;margin-top:-2px}

.card{background:var(--paneel);border:1px solid var(--lijn);border-radius:14px;
      padding:22px;display:grid;gap:10px;width:min(340px,90vw)}
.card input{background:var(--groef);border:1px solid var(--lijn);color:var(--ink);
            border-radius:8px;padding:11px 12px;font:inherit}
.row{display:flex;gap:8px}
.row button{flex:1;min-height:44px;border:0;border-radius:8px;background:var(--accent);
            color:#fff;font:inherit;cursor:pointer}
.row .ghost{background:var(--verhoogd);color:var(--dim)}
.err{color:#f87171;min-height:1.2em;margin:0;font-size:13px}

/* De Bewaren-knop bevestigt zichtbaar: even een vinkje in de accentkleur en een
   zachte puls. Een handeling hoort altijd een antwoord te geven. */
.icon.tb-save.ok { color:var(--accent) }
.icon.tb-save.ok { animation:save-puls .4s ease-out }
@keyframes save-puls {
  0%   { transform:scale(1) }
  40%  { transform:scale(1.25) }
  100% { transform:scale(1) }
}

/* Openstaande briefings ("Wacht op de klant") en de "Nieuw"-badge. */
.groep.wacht .groep-titel{color:#f0d27a}
.brieflijst{list-style:none;margin:0;padding:0 18px 6px;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.briefkaart{background:var(--paneel);border:1px solid #4a4324;border-radius:12px;padding:12px 14px}
.bk-naam{font-weight:600}
.bk-status{color:var(--dim);font-size:12px;margin:2px 0 10px}
.bk-knoppen{display:flex;flex-wrap:wrap;gap:6px}
.bk-knop{background:var(--verhoogd);color:var(--ink);border:1px solid var(--lijn);border-radius:6px;padding:5px 9px;font:inherit;font-size:11px;cursor:pointer}
.bk-knop:hover{border-color:var(--dim)}
.tile{position:relative}
.badge-nieuw{position:absolute;top:8px;left:8px;background:var(--accent);color:#fff;font-size:10px;font-weight:600;
             border-radius:6px;padding:2px 8px;z-index:2;letter-spacing:.02em}
.dot-nieuw{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);vertical-align:middle}

/* Slotje: een vergrendeld project toont het slot op de tegel. */
.badge-slot{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:24px;height:24px;
            background:#000a;border-radius:6px;color:var(--ink);z-index:2}
/* Vergrendeld: de hele balk onder de miniatuur (en in de lijst de hele rij)
   krijgt een koelere tint; het slotje zelf in gewone inktkleur. */
.tile.op-slot .meta, .tile.op-slot .tile-voet{background:var(--slot-vlak)}
.projectlijst tr.op-slot td{background:var(--slot-vlak)}
.projectlijst tr.op-slot:hover td{background:var(--slot-lijn)}
.projectlijst tr.op-slot .slot-knop{opacity:1}
.slot-knop.on{color:var(--ink)}
/* Slepen naar een klant: de tegel die je vasthebt wordt vaag, de groep waar je
   boven hangt krijgt een accentrand. */
.tile[draggable]{cursor:grab}
.tile.sleept{opacity:.4}
.groep{border:2px dashed transparent;border-radius:14px;transition:border-color .12s,background .12s}
body.ordenen .groep[data-klant-id]{border-color:var(--lijn)}
.groep.drop{border-color:var(--accent)!important;background:#3b82f614}
.tile.op-slot{border-color:var(--slot-lijn)}