/* ==========================================================================
   Van de Calseyde Hydraulics — Werkplek Dashboard
   Gedeeld design systeem — Y2K bubble/chrome look, opgebouwd op de
   huisstijlkleuren PETROLEUM (#00303C) en BRIGHT YELLOW (#FFFA50).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* --- huisstijlkleuren (bron: logo guide 04) --- */
  --petroleum:        #00303C;
  --petroleum-light:  #0d4f61;
  --petroleum-soft:   #e6eef0;
  --yellow:           #FFFA50;
  --yellow-deep:      #f2df00;
  --ink:              #001217;
  --white:            #ffffff;
  --grey:             #6f8790;

  /* --- type --- */
  --font-display: 'Baloo 2', 'Arial Black', Arial, sans-serif;
  --font-body: Arial, 'Helvetica Neue', sans-serif;
  --font-data: 'Space Mono', 'Courier New', monospace;

  /* --- chunky y2k shadow --- */
  --pop: 6px 6px 0 var(--ink);
  --pop-sm: 4px 4px 0 var(--ink);
  --pop-yellow: 6px 6px 0 var(--petroleum);

  --radius: 26px;
  --radius-sm: 16px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--petroleum);
  background: var(--petroleum-soft);
  background-image:
    radial-gradient(circle at 8% 12%, rgba(255,250,80,0.35) 0, transparent 40%),
    radial-gradient(circle at 92% 85%, rgba(0,48,60,0.10) 0, transparent 45%);
  background-attachment: fixed;
  min-height: 100vh;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.98;
  margin: 0;
  letter-spacing: -0.01em;
}

p{ margin: 0 0 .6em; line-height: 1.5; }

a{ color: inherit; }

button, input, select, textarea{ font-family: var(--font-body); }

.eyebrow{
  font-family: var(--font-data);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--petroleum);
  opacity: .7;
}

/* --- reduced motion --- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   Topbar — gebruikt door alle apps
   ========================================================================== */
.vdc-topbar{
  background: var(--petroleum);
  border-bottom: 6px solid var(--yellow);
  padding: 14px clamp(16px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.vdc-brand{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--white);
}
.vdc-brand .brace{
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--yellow);
  transform: scaleY(1.15);
}
.vdc-brand-text{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1;
  text-transform: lowercase;
}
.vdc-brand-text small{
  display: block;
  font-family: var(--font-data);
  font-weight: 700;
  font-size: .6rem;
  letter-spacing: .18em;
  color: var(--yellow);
  text-transform: uppercase;
  margin-top: 3px;
}
.vdc-back{
  font-family: var(--font-data);
  font-weight: 700;
  font-size: .8rem;
  color: var(--white);
  text-decoration: none;
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,250,80,0.5);
  border-radius: 100px;
  padding: 8px 16px;
  white-space: nowrap;
}
.vdc-back:hover{ background: var(--yellow); color: var(--petroleum); border-color: var(--yellow); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  border-radius: 100px;
  padding: 14px 26px;
  border: 3px solid var(--petroleum);
  background: var(--white);
  color: var(--petroleum);
  box-shadow: var(--pop-sm);
  transition: transform .12s ease, box-shadow .12s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.btn:hover{ transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active{ transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--ink); }
.btn-primary{ background: var(--yellow); }
.btn-dark{ background: var(--petroleum); color: var(--white); }
.btn-ghost{ background: transparent; box-shadow: none; border-color: rgba(0,48,60,.3); }
.btn-ghost:hover{ box-shadow: var(--pop-sm); }
.btn-sm{ padding: 9px 16px; font-size: .8rem; }
.btn-danger{ background: var(--white); color: #a11; border-color: #a11; }
.btn:disabled{ opacity: .4; cursor: not-allowed; transform: none; box-shadow: var(--pop-sm); }
/* grote, duimvriendelijke knop voor mobiele scan-apps */
.btn-xl{
  width: 100%;
  justify-content: center;
  padding: 22px 20px;
  font-size: 1.35rem;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Cards / panels
   ========================================================================== */
.panel{
  background: var(--white);
  border: 3px solid var(--petroleum);
  border-radius: var(--radius);
  box-shadow: var(--pop);
  padding: clamp(18px, 3vw, 32px);
}

.field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  min-width: 0; /* voorkomt dat velden buiten grid/flex-kolommen uitsteken */
}
.field label{
  font-family: var(--font-data);
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--petroleum);
}
.field input[type="text"],
.field input[type="number"],
.field input[type="date"],
.field select{
  border: 2.5px solid var(--petroleum);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 1rem;
  background: var(--white);
  color: var(--petroleum);
  font-family: var(--font-body);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: 3px solid var(--yellow);
  outline-offset: 1px;
}
.field-hint{ font-size: .75rem; color: var(--grey); }

.grid{ display: grid; gap: 20px; }

.tag{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-data);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--petroleum-soft);
  border: 2px solid var(--petroleum);
  border-radius: 100px;
  padding: 4px 12px;
}
.tag.on{ background: var(--yellow); }

/* toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  background: var(--petroleum);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  padding: 14px 26px;
  border-radius: 100px;
  border: 3px solid var(--yellow);
  box-shadow: var(--pop);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 200;
  max-width: 90vw;
  text-align: center;
}
.toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }

@media print{
  .no-print{ display: none !important; }
}