@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:var(--bel);color:var(--op-bel);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:var(--achter-venster)}
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}
/* Het leesbare adres (assets/adres-kaart.js), klein onder de datum. */
.tile-adres{color:var(--dim);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-adres::before{content:'/';margin-right:1px;opacity:.6}
.tile-voet{display:flex;align-items:center;gap:0;margin-top:-2px}
.tile-voet .icon.sm{min-width:28px;padding-left:0;padding-right:0}
.tile-voet [data-act=delete]:hover{color:var(--fout)}

.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:var(--op-accent);font:inherit;cursor:pointer}
.row .ghost{background:var(--verhoogd);color:var(--dim)}
.err{color:var(--fout);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) }
}

.tile{position:relative}

/* 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)}

/* Projectcontract en project importeren (index.php) */
.card.breed{width:min(680px,92vw)}
.dlg-uitleg{margin:0;color:var(--dim);font-size:13px;line-height:1.5}
.dlg-status{margin:0;min-height:1.2em;color:var(--dim);font-size:12.5px;white-space:pre-line;max-height:40vh;overflow:auto}
#import-delen{display:flex;flex-direction:column;gap:8px}
#import-delen textarea{width:100%;box-sizing:border-box;height:180px;resize:vertical;background:var(--groef);border:1px solid var(--lijn);
  color:var(--ink);border-radius:8px;padding:10px 12px;font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace}
dialog .knop-link{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;
  border:1px solid var(--lijn);border-radius:8px;color:var(--ink);text-decoration:none}
#import-dialoog.sleep .card{outline:2px dashed var(--accent);outline-offset:-8px}

/* Exportdialoog: twee blokken met uitleg, knoppen die laten zien dat ze werken */
.exp-blok{display:grid;gap:8px;padding:12px 14px;border:1px solid var(--lijn);border-radius:10px}
.exp-blok h4{margin:0;font-size:13.5px;font-weight:600;color:var(--ink)}
.exp-stappen{margin:0;padding-left:20px;color:var(--dim);font-size:13px;line-height:1.5;display:grid;gap:4px}
dialog .row button{transition:transform .08s ease, filter .12s ease}
dialog .row button:hover{filter:brightness(1.12)}
dialog .row button:active{transform:scale(.97);filter:brightness(.9)}
dialog .row button.bezig{pointer-events:none;opacity:.75;position:relative;padding-left:26px}
dialog .row button.bezig::before{content:"";position:absolute;left:10px;top:50%;width:12px;height:12px;margin-top:-6px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:dl-draai .7s linear infinite}
@keyframes dl-draai{to{transform:rotate(360deg)}}
dialog .card h3{color:var(--ink)}

/* Uploadpagina (upload.php): één kaart, een sleepvlak en wat er binnenkwam. */
.upload-vak{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.upload-vak h1{font-size:20px;margin:0}
.upload-vak p{margin:0;color:var(--dim)}
.upload-uitleg{margin:0;padding-left:18px;color:var(--dim);font-size:14px;display:grid;gap:4px}
.upload-sleep{display:grid;place-items:center;min-height:150px;border:2px dashed var(--lijn-sterk);border-radius:12px;
  color:var(--dim);cursor:pointer;text-align:center;padding:16px}
.upload-sleep:hover,.upload-sleep.over{border-color:var(--accent);color:var(--ink)}
.upload-lijst{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px}
.upload-lijst .gelukt{color:var(--goed)}
.upload-lijst .mislukt{color:var(--fout)}

/* Toegang en versies (assets/toegang.js): toegang geven aan een klant met zijn
   eigen AI, de uitnodiging, en eerdere versies terugzetten. */
.tg-kaart{width:min(720px,94vw);max-height:88vh;overflow:auto;color:var(--ink)}
.tg-kaart h3{display:flex;align-items:center;gap:8px}
.tg-kaart h4{margin:10px 0 0;font-size:14px;color:var(--ink)}
.tg-kaart p{margin:0;color:var(--dim);font-size:13px}
.tg-tabs{display:flex;gap:6px}
.tg-tabs button{flex:1;min-height:38px;border:1px solid var(--lijn-sterk);border-radius:8px;background:none;color:var(--dim);font:inherit;cursor:pointer}
.tg-tabs button.on{background:var(--verhoogd);color:var(--ink);border-color:var(--accent)}
.tg-form{display:grid;gap:8px}
.tg-form label{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--ink)}
.tg-form select,.tg-kaart textarea{background:var(--groef);border:1px solid var(--lijn);color:var(--ink);border-radius:8px;padding:10px 12px;font:inherit}
.tg-kaart textarea{width:100%;min-height:230px;resize:vertical;font-size:13px;line-height:1.5}
.tg-lijst{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tg-lijst li{display:flex;gap:8px;align-items:center;background:var(--groef);border-radius:8px;padding:8px 10px;font-size:13px}
.tg-lijst li .tg-tekst{flex:1;min-width:0}
.tg-lijst li .tg-sub{color:var(--dim);font-size:12px}
.tg-lijst li.vast{outline:1px solid var(--accent)}
.tg-knop{min-height:34px;border:1px solid var(--lijn-sterk);border-radius:8px;background:var(--verhoogd);color:var(--ink);
  font:inherit;font-size:13px;padding:0 12px;cursor:pointer;white-space:nowrap}
.tg-knop:hover{border-color:var(--accent)}
.tg-knop.hoofd{background:var(--accent);border-color:var(--accent);color:var(--op-accent)}
.tg-melding{font-size:13px;min-height:1.2em}
.tg-melding.goed{color:var(--goed)}
.tg-melding.fout{color:var(--fout)}

/* Klantomgeving (assets/klantomgeving.js): label op de tegel en de klantnaam als ingang. */
.om-tegel-label{position:absolute;top:8px;left:8px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;
                background:var(--verhoogd);color:var(--ink);pointer-events:auto}
.om-tegel-label.stijl{background:var(--accent);color:var(--op-accent)}
td .om-tegel-label{position:static;margin-left:6px}
a.om-naar-omgeving{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
a.om-naar-omgeving:hover{border-bottom-color:currentColor}
.groep-titel .icon.sm.om-beheer-knop{opacity:.75;display:inline-grid;place-items:center;color:inherit}