:root{
  --bg:#0f1216; --panel:#0f1216; --muted:#9aa4af; --text:#e8eaed;
  --brand:#d10a2a; --brand-2:#971023; --accent:#2a2f3a;
  /* nieuw voor achtergrond + glas */
  --bg-image: none;           /* url('/static/bg.jpg') of none */
  --panel-alpha: 1;           /* 1 = opaque, 0.7 = 70% transparant bij bg */
}
*{box-sizing:border-box}
html,body{
  height:100%; margin:0;
  background:var(--bg);
  background-image: var(--bg-image, none);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color:var(--text);
  font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans'
}
.wrap{max-width:980px;margin:40px auto;padding:0 16px}

/* glaslaag op de kaart met regelbare opacity via --panel-alpha */
.card{position:relative;overflow:hidden;border:1px solid var(--accent);border-radius:16px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card::before{
  content:""; position:absolute; inset:0; border-radius:16px;
  background:var(--panel); opacity:var(--panel-alpha); pointer-events:none;
}
.card>*{position:relative; z-index:1}

.topbar{display:flex;flex-direction:column;align-items:center}
.logo{width:clamp(100px, 25vw, 120px);height:auto;display:block;margin:8px auto 6px;object-fit:contain;}
.title{margin:8px 0 6px 0}
.redline{display:block;width:100%;border-bottom:12px solid var(--brand);margin:6px 0 14px 0}

/* Tabs */
.tabs{display:flex;gap:8px;margin:6px 0 16px}
.tab-btn{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--accent);
  background:var(--panel);      /* was #11151c */
  color:var(--text);
  cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.tab-btn.active{
  background:var(--brand);      /* was #d10a2a (zelfde kleur, maar nu via var mogelijk als je wilt) */
  border-color:var(--brand-2);  /* was #971023 */
  color:#ffffff;                /* expliciet wit voor contrast */
}

.section{display:none}
.section.active{display:block}
label{display:block;font-weight:600;margin:10px 0 6px;color:var(--muted)}

/* Inputs */
input[type="text"],input[type="number"],input[type="url"]{
  width:100%;
  background:var(--panel);       /* was #0e1218 */
  border:1px solid var(--accent);/* was #2a3240 */
  color:var(--text);
  padding:10px 12px;
  border-radius:10px;
  outline:none;
}
input[type="file"]{display:block}

.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Buttons */
.btn{
  display:inline-block;
  background:#d10a2a;
  border:1px solid #971023;
  padding:10px 14px;
  border-radius:10px;
  color:#fff;
  font-weight:600;
  cursor:pointer
}
.btn.secondary{
  background:var(--panel);       /* was #0f141c */
  border-color:var(--accent);    /* was #2a3240 */
  color:var(--text);
}
.muted{color:var(--muted);font-size:12px}

/* Result cards */
.result{
  padding:12px;
  border:1px solid #263042;
  border-radius:12px;
  margin:10px 0;
  display:grid;
  grid-template-columns:84px 1fr;
  gap:12px;
  align-items:center
}
.result img{width:84px;height:84px;object-fit:cover;border-radius:10px;background:#0d1016}
.kvs{display:flex;gap:10px;flex-wrap:wrap;font-size:13px}

/* Pills */
.pill{
  background:var(--panel);       /* was #10151c */
  border:1px solid var(--accent);/* was #2a3240 */
  padding:3px 8px;
  border-radius:999px
}

footer{margin-top:18px;color:var(--muted);text-align:center}
@media(max-width:720px){.row{grid-template-columns:1fr}}

/* Tabellen */
.table{
  width:100%;
  border-collapse:collapse;
  margin-top:8px;
  font-size:14px
}
.table th,.table td{
  border:1px solid var(--accent);    /* was #2a3240 */
  padding:8px;
  vertical-align:top
}
.table th{
  background:var(--panel);           /* was #10151c */
  text-align:left
}
.small{font-size:12px}
.btn.tiny{padding:6px 8px; font-size:12px; border-radius:8px; margin-right:6px}
.btn.danger{background:#6d1420; border-color:#5a0f1a}

/* --- Transparantie fix (glas-effect voor .card) --- */
.card {
  position: relative;
  overflow: hidden;
  background: var(--panel, var(--bg));
  background-color: var(--panel, var(--bg));
  backdrop-filter: blur(8px);
  opacity: var(--panel-alpha, 1);
  transition: opacity 0.4s ease;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--panel, var(--bg));
  opacity: var(--panel-alpha, 1);
  backdrop-filter: blur(8px);
  z-index: 0;
}

.card > * {
  position: relative;
  z-index: 1;
}

/* --- Responsive adjustments --- */
@media (max-width: 1024px) {
  .container {
    max-width: 90%;
    margin: auto;
    padding: 1rem;
  }
  .settings-panel {
    width: 100%;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 0.95rem;
  }

  .header,
  .footer {
    text-align: center;
  }

  .card {
    width: 100%;
    margin: 0;
    padding: 1rem;
  }

  .form-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .form-group label {
    margin-bottom: 0.5rem;
  }

  input[type="color"],
  input[type="file"],
  input[type="text"],
  button {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

}


/* =========================
   RESPONSIVE ENHANCEMENTS
   (consolidated final version)
   ========================= */

/* Images scale */
img, svg, video { max-width: 100%; height: auto; }

/* Scrollable tab bars if needed */
.tabs, .tabbar, nav.tabs, .tab-strip, .tab-strip ul {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  gap: 8px;
}
.tabs > *, .tabbar > *, .tab-strip > * { display: inline-block; }

/* Tables: wrap instead of breaking */
.table-wrap { overflow-x: visible; }
.table-wrap table { border-collapse: collapse; }

/* Medium screens */
@media (max-width: 1024px) {
  .container {
    max-width: 90%;
    margin: auto;
    padding: 1rem;
  }
  .settings-panel {
    width: 100%;
  }
  .card {
    max-width: 720px;
    margin: 24px auto;
    padding: 16px;
  }
}

/* Phones & small tablets */
@media (max-width: 768px) {
  html, body { font-size: 16px; }
  .container { max-width: 100%; padding: 0 12px; }

  .header, .footer { text-align: center; }

  .card {
    width: 100%;
    margin: 12px auto;
    padding: 14px;
    border-radius: 12px;
    backdrop-filter: blur(8px);
  }

  /* Form: stacked full-width */
  .form-group,
  form .row { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .form-group label { margin-bottom: 0.5rem; }

  input[type="text"],
  input[type="file"],
  input[type="color"],
  input[type="number"],
  select,
  textarea,
  button,
  .btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  img.logo { max-width: 150px; height: auto; }
}

/* Extra small */
@media (max-width: 480px) {
  .card { padding: 12px; }
  button, .btn { padding: 10px 12px; }
  .muted { font-size: 0.9em; }
}

/* --- Custom NL bestand-uploadknop --- */
.custom-file{ position:relative; display:flex; align-items:center; gap:10px; }
.custom-file input[type="file"]{ opacity:0; position:absolute; left:0; top:0; width:160px; height:40px; z-index:2; cursor:pointer; }
.custom-file .file-label{ background:var(--brand); color:#fff; border-radius:10px; padding:10px 14px; font-weight:600; cursor:pointer; display:inline-block; text-align:center; transition:background .2s; z-index:1; }
.custom-file .file-label:hover{ background:var(--brand-2); }
.custom-file .file-name{ font-size:14px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60%; }


/* Mobile-only horizontal scroll for tables */
@media (max-width: 768px) {
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 640px; }
}