:root {
  --bg: #f8fafc;
  --panel: #fff;
  --border: #e2e8f0;
  --text: #0f172a;
  --muted: #64748b;
  --muted-2: #cbd5e1;
  --shadow: 0 4px 16px rgba(2,6,23,.08);
  --labelw: 300px;
}

* { box-sizing: border-box; }
html, body { 
  height: 100%; 
  overflow: hidden;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  display: flex;
  flex-direction: column;
}

/* Header + brand: hard linksboven */
header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.wrap {
  /* volledig breed en links uitlijnen */
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand img { height: 22px; width: auto; display: block; }
.brand-title { font-weight: 700; color: var(--text); font-size: 14px; }

h1 { font-size: 18px; font-weight: 600; margin: 0; }

/* Header controls rechts */
.righthead {
  margin-left: auto;
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
label { font-size: 12px; color: var(--muted); }

input[type="number"], input[type="range"], input[type="text"], button, select { font: inherit; } /* Added select */
input[type="number"], input[type="text"], select { /* Added select */
  width: 140px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px;
}
input.small { width: 110px; }
input[type="range"] { width: 160px; }

button.primary, .btn.primary {
  padding: 8px 12px; border: 0; border-radius: 10px; color: #fff; background: #0f172a; box-shadow: var(--shadow); cursor: pointer;
}
.btn {
  padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: #fff; cursor: pointer;
  text-decoration: none; color: var(--text); display: inline-flex; align-items: center; justify-content: center;
}
.btn:hover { filter: brightness(0.98); }
.btn.danger { background: #ef4444; color: #fff; border-color: #ef4444; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* Page containers voor dashboard (blijven bruikbaar) */
.container { max-width: 1000px; margin: 24px auto; padding: 0 16px; }
.panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px; box-shadow: var(--shadow); margin-bottom: 20px;
}
.panel > h2 { margin: 0 0 12px; font-size: 16px; }
.muted { color: var(--muted); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.card {
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 14px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 10px;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-title { margin: 0; font-size: 15px; }
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.badge { font-size: 11px; padding: 2px 6px; border-radius: 999px; background: #0003; color: #fff; align-self: center; }

/* Form styling */
.form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end;
}
.form-grid label { display: grid; gap: 6px; }
.form-grid input[type="text"] { width: 100%; }
.form-actions { grid-column: 1 / -1; }

/* Timeline layout */
main { 
    width: 100%; 
    margin: 16px 0 0 0; 
    padding: 0; 
    max-width: none; 
    flex-grow: 1;
    min-height: 0;
}
.sheet { 
    display: grid; 
    grid-template-columns: var(--labelw) 1fr; 
    gap: 0; 
    height: 100%;
}
.leftCol { 
    border-right: 1px solid var(--border); 
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 16px;
}
.rightCol { 
    overflow-x: auto; 
    position: relative; 
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ruler {
  position: sticky; top: 0; z-index: 5; height: 32px; background: #fff; border-bottom: 1px solid var(--border);
}
.ruler-inner {
  position: sticky; height: 20px;
  background-image: linear-gradient(to right,#eef2f7 50%,#fff 50%);
  background-size: calc(1000px * var(--pxPerMs)) 100%;
  background-repeat: repeat;
}
.ruler .mark { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--muted-2); }
.ruler .mark span {
  position: absolute; top: 2px; left: 0; transform: translateX(-50%);
  font-size: 10px; color: #475569; user-select: none; pointer-events: none;
}

.label-ruler { 
    height: 32px; 
    background: #eef2f7; 
    border-bottom: 1px solid var(--border); 
}

/* Algemene label styling (was anders per type, nu meer uniform) */
.label {
  height: 64px; /* Basis hoogte */
  padding: 0 12px;
  border-top: 1px solid var(--border);
  color: #475569;
  font-weight: 500;
  position: relative;
  display: flex; /* Gebruik flexbox voor alle labels */
  align-items: center; /* Verticaal centreren */
  justify-content: space-between; /* Verdeel ruimte */
  gap: 8px; /* Ruimte tussen content en knoppen/select */
}
/* Verwijder specifieke direction overrides */
/* .label-row { flex-direction: row; } */
/* .label-group-header { flex-direction: row; } */
/* .label-sub-channel { flex-direction: row; } */

/* Styling voor de group header specifiek */
.label-group-header {
  height: 40px;
  background-color: #e9ecef;
  font-weight: bold;
  border-bottom: 1px solid #ccc; /* Iets donkerder */
}

/* Styling voor sub-kanalen */
.label-sub-channel {
    padding-left: 30px; /* Inspringen behouden */
    border-top: 1px solid #eee;
    border-bottom: none; /* Geen dubbele border */
    height: 64px; /* Zelfde hoogte als standaard */
}

/* Styling voor de content (links) binnen een label */
.label-content {
  display: flex;
  align-items: center;
  gap: 4px; /* Iets kleinere ruimte tussen elementen */
  flex-grow: 1; /* Neemt beschikbare ruimte */
  user-select: none;
  overflow: hidden; /* Blijft nodig */
}

/* Styling voor het icoon */
.channel-icon {
  display: inline-block;
  margin-right: 2px;
  flex-shrink: 0; /* Icoon mag niet krimpen */
}

.label-content > span[id^="label-name-"] {
    flex-grow: 1; /* Geef de naam prioriteit om te groeien */
    flex-shrink: 1; /* Sta krimpen toe indien absoluut nodig */
    min-width: 50px; /* Geef het een minimale breedte */
    text-align: left; /* Zorg dat tekst links start */

    /* Verwijder of commentarieer deze regels voor word wrap: */
    /* overflow: hidden; */
    /* white-space: nowrap; */
    /* text-overflow: ellipsis; */

    /* Voeg deze toe voor word wrap: */
    white-space: normal; /* Sta normale tekstomloop toe */
    word-break: break-word; /* Optioneel: breek lange woorden af */
}

/* Groepsnaam mag wat meer ruimte */
.label-group-header .label-content > span[id^="label-name-"] {
    font-weight: bold; /* Behoud vetgedrukt */
    min-width: 80px;
}

/* Input veld tijdens bewerken naam */
.label-edit-input {
    width: 100%; /* Neem alle ruimte in de span */
    border: 1px solid #999;
    padding: 2px;
    font-family: inherit;
    font-size: inherit;
    border-radius: 3px;
    /* Belangrijk: voorkom dat input de layout verstoort */
    box-sizing: border-box;
    vertical-align: middle; /* Lijn uit met eventuele iconen */
}

/* Kleur Swatch */
.sw {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0; /* Mag niet krimpen */
}

/* Collapse/Expand toggle */
.toggle-collapse {
  cursor: pointer;
  user-select: none;
  width: 20px;
  text-align: center;
  flex-shrink: 0; /* Mag niet krimpen */
}

/* Styling for the small H/L dropdown */
.mini-select {
  margin-left: auto; /* Duwt het naar rechts (redundant door justify-content op .label) */
  font-size: 11px; /* Kleinere tekst */
  padding: 1px 18px 1px 4px; /* Boven/Onder, Rechts (voor pijl), Links */
  border-radius: 6px;
  border: 1px solid var(--border); /* Gebruik de border variabele */
  background-color: #fff; /* Wit achtergrond */
  max-width: 20px; /* Beperk de breedte */
  flex-shrink: 0; /* Voorkom krimpen */
  /* Optioneel: verwijder default uiterlijk voor consistentie */
  -webkit-appearance: none;
  appearance: none;
  /* Basis pijl (kan verder gestyled worden) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M8 11l-4-4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 10px;
}

/* Verwijder knop styling (blijft hetzelfde) */
.delete-btn {
  background: #ef4444; color: #fff; border: none; border-radius: 4px;
  padding: 2px 6px; font-size: 10px; cursor: pointer;
  /* margin-left: auto; is niet meer nodig door justify-content op .label */
  opacity: .6; transition: opacity .2s;
  flex-shrink: 0; /* Voorkom krimpen */
}
.label:hover .delete-btn { opacity: 1; } /* Fade in on hover */

/* Oude input voor MAC (indien nog gebruikt) */
.mac-input { width: 100%; padding: 4px 6px; font-size: 11px; border: 1px solid var(--border); border-radius: 6px; background-color: #f8fafc; }


/* Rechter Kolom (Timeline zelf) */
.channels { position: relative; }
.channel {
  position: relative; height: 64px; border-top: 1px solid var(--border);
  display: flex;
  background-image:
    linear-gradient(to right,rgba(0,0,0,.18) 1px,transparent 1px),
    linear-gradient(to right,rgba(0,0,0,.08) 1px,transparent 1px),
    linear-gradient(to right,#eef2f7 50%,#fff 50%);
  background-size:
    calc(1000px * var(--pxPerMs)) 100%,
    calc(500px * var(--pxPerMs)) 100%,
    calc(1000px * var(--pxPerMs)) 100%;
  background-repeat: repeat;
  cursor: crosshair;
}
/* Styling voor rechter kolom group header / sub channel */
.channel-group-header { height: 40px; background-color: #e9ecef; border-bottom: 1px solid #ccc; }
.channel-standalone { /* Geen speciale stijl nodig, gebruikt .channel */ }
.channel-sub-channel { border-top: 1px solid #eee; border-bottom: none; }


/* Clip Styling (blijft grotendeels hetzelfde) */
.clip {
  position: absolute; top: 16px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; gap: 8px; overflow: hidden;
  border: 1px solid rgba(0,0,0,.15); cursor: grab; user-select: none;
  box-shadow: 0 6px 14px rgba(0,0,0,.1); padding: 0 8px;
}
.clip.selected { outline: 2px solid #0ea5e9; z-index: 2; }
.clip-meta { font-size: 10px; line-height: 1; opacity: .95; white-space: nowrap; pointer-events: none; }
.handle { position: absolute; top: 0; bottom: 0; width: 16px; background: rgba(0,0,0,.15); cursor: ew-resize; }
.handle.left { left: -8px; }
.handle.right { right: -8px; }

/* Modal Styling (blijft hetzelfde) */
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.4); z-index: 20; overflow-y: auto; padding: 20px; }
.modal.open { display: flex; }
.modal-card { background: #fff; padding: 16px; border-radius: 14px; width: 100%; max-width: 520px; box-shadow: var(--shadow); margin: auto; }
.modal h3 { margin: 0 0 12px; font-size: 16px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.row { font-size: 12px; margin-bottom: 10px; }
.row label { display: block; margin-bottom: 6px; color: var(--muted); font-weight: 500; }
.row input, .row select { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; }
.modal-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
fieldset { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
legend { font-size: 12px; color: #334155; padding: 0 6px; }
.kv { display: flex; gap: 8px; flex-wrap: wrap; }

/* Dashboard link (blijft hetzelfde) */
.dashboard-link { margin-left: 20px; }

/* Controller Titel Editing (blijft hetzelfde) */
#controller-title {
  font-size: 1.2rem; font-weight: 700; padding: 4px; margin: 0 8px;
  border: 1px solid transparent; border-radius: 4px; transition: all .2s ease-in-out; width: fit-content; cursor: pointer;
}
#controller-title:hover { background-color: rgba(0,0,0,0.03); }
#controller-title .title-edit-input {
  font-size: 1em; font-weight: bold; font-family: inherit; border: 1px solid #007bff; color: #333;
  background-color: #fff; padding: 4px; border-radius: 4px; outline: none; width: 100%; box-sizing: border-box;
}

/* === NIEUWE STIJLEN VOOR LIGHTFX MODAL (blijft hetzelfde) === */
.color-presets span { display: inline-block; width: 20px; height: 20px; border: 1px solid #ccc; margin: 0 3px 3px 0; cursor: pointer; vertical-align: middle; }
.modal-field-group { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.modal-field-group .row { margin-bottom: 8px; }
.modal-field-group .row:last-child { margin-bottom: 0; }
.modal-field-group > label { display: block; margin-bottom: 8px; font-weight: 600; color: #334155; font-size: 13px; }
.modal-field-group input[type="color"] { padding: 0; width: 28px; height: 28px; vertical-align: middle; margin-right: 5px; border: 1px solid var(--border); border-radius: 4px; }
.modal-field-group input[type="number"], .modal-field-group input[type="text"], .modal-field-group select { width: 100%; }
.modal-field-group input[type="checkbox"] { width: auto; margin-right: 5px; vertical-align: middle; }
#params-CHASE .row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 15px; }
#params-CHASE .row label { margin-bottom: 0; display: inline-flex; align-items: center; font-size: 12px; font-weight: normal; color: var(--muted); }
#params-CHASE input[type="number"], #params-CHASE select { width: auto; min-width: 60px; padding: 4px 6px; }
/* === EINDE NIEUWE STIJLEN === */

/* --- Nieuwe regels voor scrollbare content --- */
#labels {
  flex-grow: 1; /* Vult de ruimte in leftCol */
  overflow-y: hidden;
  
  padding-bottom: 1px;
  box-sizing: border-box;
}

#channels {
  flex-grow: 1; /* Vult de ruimte in rightCol */
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 1px;
  box-sizing: border-box;
}

/* Verberg de 'border-top' van het allereerste item in beide kolommen */
#labels > .label:first-child,
#channels > .channel:first-child {
  border-top: none;
}

/* Responsief (blijft hetzelfde) */
@media (max-width: 1400px) {
  .form-grid { grid-template-columns: 1fr; }
  .sheet { grid-template-columns: 200px 1fr; --labelw: 200px; }
  .modal-card { max-width: 95%; }
}

@media (pointer: coarse) {
  .leftCol {
    padding-top: 12px;
  }
}