/* Zelfde paletnaam-conventie en exacte kleurwaarden als het Toko Det-brandbook
   (branding-categorie, id 7): dit is de merkkleurenset, niet een eigen bedachte set.
   Functioneel ingericht: groot, hoog contrast, geen versiering die niets toevoegt.
   Diepte komt uit schaduwen (elevatie), niet uit gloed/blur-halo's rond elementen,
   zie CLAUDE.md logboek 2026-07-20. */
:root {
  --black:#0a0804; --deep:#110e08; --bark:#1e1608; --bark-lt:#2a1f0f;
  --gold:#c8973a; --gold-lt:#e8b86d;
  --orange:#e8621a; --orange-lt:#f0894a;
  --cream:#faf2e2; --rust:#8b3a1a;
  --text:#e8d9bc; --muted:#b8a882;
  --ok:#7fae6a; --danger:#8b3a1a; --danger-lt:#f0894a;
  --hair:rgba(200,151,58,.16);
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'DM Sans',system-ui,sans-serif;
  --safe-bottom:env(safe-area-inset-bottom,0px);
  /* Elevatie: neutrale, zachte schaduwen (geen kleur erin, dat oogt als gloed).
     shadow-1 = rustende kaarten, shadow-2 = actief/gelicht (hover, druk, sticky balk). */
  --shadow-1:0 10px 22px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(250,242,226,.04);
  --shadow-2:0 16px 34px -12px rgba(0,0,0,.68), inset 0 1px 0 rgba(250,242,226,.06);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:18px}
html,body{max-width:100%; overflow-x:hidden}
body{
  background-color:var(--black);
  background-image:
    linear-gradient(rgba(35,16,5,.48), rgba(35,16,5,.48)),
    url('../patterns/schildpad.jpg');
  background-repeat:repeat;
  background-size:auto, 520px 520px;
  background-attachment:fixed;
  color:var(--text); font-family:var(--font-body);
  min-height:100vh; padding-bottom:calc(1.5rem + var(--safe-bottom));
}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display); color:var(--cream); font-weight:600}

/* Eyebrow-label: rechtstreeks uit het brandbook (zelfde waarden), voor orientatie
   boven een paginakop. Bewust maar één per pagina, niet per lijstregel. */
.eyebrow{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange); display:block; margin-bottom:.4rem; font-weight:600;
  text-shadow:0 1px 2px rgba(0,0,0,.8), 0 4px 10px rgba(0,0,0,.6);
}

/* Feniks-beeldmerk boven de eerste kaart op de startpagina: het volledige merkteken uit het
   brandbook (feniks + "TOKO DET"-woordmerk, transparante PNG), niet de gecropte PWA-versie
   (die toont alleen de bovenste helft van de feniks, zonder de onderste staartzwaai). */
.home-logo-wrap{
  position:relative; display:flex; justify-content:center;
  margin:.3rem auto 1.3rem;
}
.home-logo-wrap::before{
  content:""; position:absolute; inset:-40% -25%;
  background:radial-gradient(ellipse at center,
    rgba(3,2,1,.92) 0%, rgba(3,2,1,.8) 35%, rgba(3,2,1,.4) 60%, rgba(3,2,1,0) 82%);
  filter:blur(8px); z-index:0;
}
.home-logo{
  position:relative; z-index:1; display:block; height:7rem; width:auto;
  filter:
    drop-shadow(0 2px 3px rgba(0,0,0,.9))
    drop-shadow(0 10px 18px rgba(0,0,0,.85))
    drop-shadow(0 0 26px rgba(0,0,0,.7));
}

.install-banner{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  background:var(--bark); color:var(--cream); padding:.8rem 1rem;
  font-size:.85rem; border-bottom:1px solid var(--gold);
}
.install-banner[hidden]{display:none}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.1rem; background:var(--deep); border-bottom:1px solid var(--hair);
  box-shadow:0 8px 20px -14px rgba(0,0,0,.75);
}
.topbar h1{font-size:1.25rem}
.topbar .wie{font-size:.85rem; color:var(--muted)}
.topbar a.uit{font-size:.85rem; color:var(--gold-lt); text-decoration:none; white-space:nowrap}

main{padding:1.1rem; max-width:640px; margin:0 auto}

.flash{
  background:var(--bark); border:1px solid var(--gold); color:var(--cream);
  padding:.9rem 1rem; border-radius:.6rem; margin-bottom:1rem; font-size:.95rem;
  box-shadow:var(--shadow-1);
}

/* Categorie-tegels op home */
.tegels{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.8rem; margin:1.1rem 0}
.tegel{
  display:flex; flex-direction:column; justify-content:center; gap:.3rem; align-items:flex-start;
  background:var(--deep); border:1px solid var(--hair); border-radius:.9rem;
  padding:1.2rem 1rem; text-decoration:none; min-height:5.5rem; min-width:0;
  box-shadow:var(--shadow-1);
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.tegel:active{border-color:var(--gold); box-shadow:var(--shadow-2); transform:translateY(-1px)}
.tegel .naam{font-family:var(--font-display); font-size:1.15rem; color:var(--cream); overflow-wrap:break-word; hyphens:auto}
.tegel .aantal{
  font-size:.74rem; color:var(--orange-lt); background:var(--bark-lt);
  padding:.15rem .55rem; border-radius:1rem; display:inline-block;
}

.kaart{
  background:var(--deep); border:1px solid var(--hair); border-radius:.9rem;
  padding:1.1rem; margin-bottom:1rem; box-shadow:var(--shadow-1);
}
.kaart h2{font-size:1.05rem; margin-bottom:.6rem; display:flex; align-items:center}
.feit{display:flex; justify-content:space-between; gap:1rem; padding:.4rem 0; border-bottom:1px solid var(--bark); font-size:.95rem}
.feit:last-child{border-bottom:none}
.feit .label{color:var(--muted)}
.feit .waarde{color:var(--cream); text-align:right; font-weight:500}

/* Documentenlijst */
.doc-lijst{list-style:none; display:flex; flex-direction:column; gap:.7rem; margin-bottom:1.2rem}
.doc{
  background:var(--deep); border:1px solid var(--hair); border-radius:.7rem;
  padding:.9rem 1rem; box-shadow:var(--shadow-1);
}
.doc .titel{font-weight:600; color:var(--cream); font-size:1.02rem}
.doc .beschrijving{color:var(--text); font-size:.88rem; margin-top:.2rem}

/* Gradient-rand: vloeiende overgang goud -> roest, i.p.v. de eerdere handgetekende
   ruis-PNG (zag er van dichtbij rafelig/goedkoop uit). Dubbele achtergrond-techniek:
   binnenste laag vult het vlak, buitenste laag (border-box) is enkel zichtbaar in de
   randbreedte. */
.tegel, .kaart, .doc{
  border:1.5px solid transparent;
  background:
    linear-gradient(var(--deep),var(--deep)) padding-box,
    linear-gradient(135deg, var(--gold-lt), var(--gold) 40%, var(--rust) 100%) border-box;
}
.doc .meta{color:var(--muted); font-size:.78rem; margin-top:.4rem}
.doc .sync-status{font-size:.78rem; margin-top:.3rem}
.doc .sync-status.ok{color:var(--ok)}
.doc .sync-status.nog-niet{color:var(--orange-lt)}
.doc .acties{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.7rem}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--gold); color:var(--cream); background:transparent;
  padding:.6rem 1rem; border-radius:.5rem; font-size:.88rem; font-family:var(--font-body);
  text-decoration:none; cursor:pointer; min-height:2.6rem;
  transition:box-shadow .15s, transform .15s;
}
.btn:active{background:var(--bark)}
.btn.primary{
  background:var(--gold); color:var(--black); border-color:var(--gold); font-weight:600;
  box-shadow:var(--shadow-1);
}
.btn.primary:active{box-shadow:var(--shadow-2); transform:translateY(-1px)}
.btn.danger{border-color:var(--bark); color:var(--muted); font-size:.78rem}
.btn.danger:active{border-color:var(--danger); color:var(--danger-lt)}
.btn.klein{padding:.4rem .7rem; font-size:.8rem; min-height:2.1rem}
.btn[disabled]{opacity:.45; pointer-events:none}

form.upload, form.bedrijf-form{
  background:var(--deep); border:1px solid var(--hair); border-radius:.9rem;
  padding:1.1rem; margin-bottom:1.2rem; display:flex; flex-direction:column; gap:.7rem;
  box-shadow:var(--shadow-1);
}
label{font-size:.85rem; color:var(--muted)}
input[type=text], input[type=email], input[type=tel], input[type=password], textarea, input[type=file]{
  background:var(--black); border:1px solid var(--bark); color:var(--cream);
  padding:.7rem .8rem; border-radius:.5rem; font-family:var(--font-body); font-size:.95rem;
  width:100%;
}
input:focus, textarea:focus{outline:2px solid var(--gold)}
textarea{min-height:4.5rem; resize:vertical}
.veld{display:flex; flex-direction:column; gap:.3rem}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:.7rem}

.login-wrap{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1.5rem}
.login-kaart{
  background:var(--deep); border:1px solid var(--hair); border-radius:1rem;
  padding:2rem 1.5rem; width:100%; max-width:360px; text-align:center;
  box-shadow:var(--shadow-2);
}
.login-kaart h1{margin-bottom:1.5rem; font-size:1.6rem}
.login-kaart form{display:flex; flex-direction:column; gap:.9rem}
.namen{display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap}
.naam-optie{
  border:1px solid var(--bark); border-radius:.5rem; padding:.5rem .9rem; font-size:.9rem;
  cursor:pointer; background:var(--black); color:var(--muted);
  transition:border-color .15s, color .15s;
}
.naam-optie input{display:none}
.naam-optie:has(input:checked){border-color:var(--gold); color:var(--cream)}

.leeg{color:var(--muted); font-size:.9rem; padding:1rem 0; text-align:center}
.terug{display:inline-block; margin-bottom:1rem; font-size:.9rem; color:var(--gold-lt); text-decoration:none}

/* Iconen: overal currentColor, dus ze volgen automatisch de tekstkleur van hun context */
.icon{display:inline-block; vertical-align:-.32em; flex-shrink:0}
.btn .icon{margin-right:.4rem}
.btn.klein .icon{margin-right:.3rem}
h1 .icon, h2 .icon{margin-right:.5rem; vertical-align:-.22em; color:var(--gold-lt)}
.topbar h1 .icon{color:var(--gold)}

/* Categorie-tegel: icoon-badge boven de naam, voor snelle visuele herkenning */
.tegel-icoon{
  width:2.7rem; height:2.7rem; border-radius:50%; background:var(--bark-lt);
  border:1px solid var(--hair); color:var(--gold-lt); display:flex; align-items:center;
  justify-content:center; margin-bottom:.35rem; flex-shrink:0;
}
.tegel-icoon .icon{margin:0}

.kaart-link{display:inline-block; text-decoration:none; margin-top:.9rem; color:var(--gold-lt); font-size:.9rem}

/* Documentkop: bestandsicoon + titel/omschrijving naast elkaar (één icoon per document, geen
   herhaling per tekstregel: dat werkte juist verwarrend, zie CLAUDE.md logboek 2026-07-20) */
.doc-kop{display:flex; align-items:flex-start; gap:.7rem}
.doc-icoon{color:var(--gold-lt); margin-top:.15rem; flex-shrink:0}
.doc .sync-status{display:flex; align-items:center; gap:.35rem}
.doc .sync-status .icon{margin:0}

/* Downloaden/Delen als accordeon (details/summary, werkt zonder JS-toggle-logica) */
.deel-details{display:inline-block; position:relative}
.deel-details summary{list-style:none}
.deel-details summary::-webkit-details-marker{display:none}
.deel-details summary.btn{gap:0}
.deel-menu{
  display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem;
  padding:.6rem; background:var(--bark-lt); border:1px solid var(--hair); border-radius:.6rem;
}

/* Rolbadge naast naam in topbar */
.rolbadge{display:inline-flex; align-items:center; gap:.3rem; color:var(--gold-lt)}
.rolbadge .icon{margin:0}

/* Waarschuwingskop op de bevestig-verwijderen-pagina */
.waarschuw-kop{display:flex; align-items:center; gap:.6rem; color:var(--danger-lt)}
.waarschuw-kop .icon{color:var(--danger-lt)}

.login-kaart .storefront-icoon{color:var(--gold-lt); margin-bottom:.6rem}