@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:#0f0f1a;color:#e8e0d0;height:100vh;display:flex;flex-direction:column;overflow:hidden}

/* HEADER */
header{background:linear-gradient(135deg,#1a0a2e,#0d1b2a);padding:7px 14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-bottom:1px solid #2a2a4a;flex-shrink:0}
.logo{font-family:'Playfair Display',serif;font-size:1.05em;color:#f39c12;white-space:nowrap}
.logo span{color:#e8e0d0;font-size:.73em;font-weight:300}
.header-actions{display:flex;gap:5px;margin-left:auto;flex-wrap:wrap}
.btn-hdr{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#e8e0d0;padding:4px 9px;border-radius:6px;cursor:pointer;font-size:.76em;transition:all .2s;white-space:nowrap}
.btn-hdr:hover{background:rgba(255,255,255,.2)}
.btn-hdr.green{background:rgba(39,174,96,.2);border-color:rgba(39,174,96,.4)}
.btn-hdr.green:hover{background:rgba(39,174,96,.35)}
.legend{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.legend-dot{display:flex;align-items:center;gap:4px;cursor:pointer;padding:3px 8px;border-radius:20px;border:1px solid transparent;font-size:.71em;transition:all .2s;user-select:none}
.legend-dot:hover{border-color:rgba(255,255,255,.3)}
.legend-dot.active{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.1)}
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* MAIN LAYOUT */
main{display:flex;flex:1;overflow:hidden;min-height:0}

/* BANK */
.bank{width:200px;flex-shrink:0;background:#12121f;border-right:1px solid #2a2a4a;display:flex;flex-direction:column;overflow:hidden}
.bank-header{padding:7px 9px;border-bottom:1px solid #2a2a4a;flex-shrink:0;display:flex;flex-direction:column;gap:4px}
.bank-title{font-size:.7em;color:#888;text-transform:uppercase;letter-spacing:.08em}
.bank-controls{display:flex;gap:4px}
#bankSearch{flex:1;background:#1a1a2e;border:1px solid #2a2a4a;color:#e8e0d0;padding:4px 7px;border-radius:5px;font-size:.76em;outline:none;min-width:0}
#bankSearch:focus{border-color:#f39c12}
#bankSort{background:#1a1a2e;border:1px solid #2a2a4a;color:#e8e0d0;padding:4px 5px;border-radius:5px;font-size:.7em;outline:none;cursor:pointer;flex-shrink:0}
#bankSort option{background:#1a1a2e}
.bank-list{overflow-y:auto;flex:1;padding:4px}
.btn-add-act{width:100%;background:rgba(243,156,18,.1);border:1px dashed rgba(243,156,18,.4);color:#f39c12;padding:5px;border-radius:6px;cursor:pointer;font-size:.73em;margin-top:3px;transition:all .2s}
.btn-add-act:hover{background:rgba(243,156,18,.2)}

/* BANK CARDS */
.bank-card{background:#1e1e30;border-radius:6px;margin-bottom:3px;padding:6px 8px;cursor:grab;user-select:none}
.bank-card:hover{background:#252540}
.bank-card:active{cursor:grabbing}
.card-header{display:flex;align-items:flex-start;gap:5px}
.card-emoji{font-size:1.15em;flex-shrink:0;margin-top:1px}
.card-info{flex:1;min-width:0}
.card-name{font-size:.76em;font-weight:600;color:#e8e0d0;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-scores{display:flex;gap:3px;margin-top:2px;flex-wrap:wrap;align-items:center}
.score{font-size:.61em;padding:1px 4px;border-radius:3px}
.score.ta{background:#e67e2222;color:#e67e22}
.score.g{background:#74b9ff22;color:#74b9ff}
.card-duration{font-size:.6em;color:#888}
.bank-card-edit{background:none;border:none;color:#444;cursor:pointer;font-size:.68em;padding:1px 3px;line-height:1;flex-shrink:0}
.bank-card-edit:hover{color:#f39c12}

/* PLANNER — horizontal timeline */
.planner{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}

/* Sticky time header */
.time-header-wrap{display:flex;flex-shrink:0;border-bottom:1px solid #2a2a4a;background:#12121f}
.time-header-label{width:110px;flex-shrink:0;font-size:.6em;color:#555;padding:5px 8px;border-right:1px solid #2a2a4a;display:flex;align-items:center}
.time-header-scroll{flex:1;overflow:hidden} /* mirrors planner-body scroll */
.time-axis-row{position:relative;height:24px}
.time-tick{position:absolute;top:0;transform:translateX(-50%);font-size:.58em;color:#444;white-space:nowrap;padding-top:4px;pointer-events:none;user-select:none}
.time-tick-line{position:absolute;top:0;width:1px;background:#1e1e2e;height:100%;pointer-events:none}

/* Scrollable planner area */
.planner-scroll{flex:1;overflow:auto;min-height:0}
.planner-body{display:flex;flex-direction:column}

/* Each day row */
.day-row{display:flex;border-bottom:1px solid #1a1a2e;flex-shrink:0}
.day-row:hover .day-label{background:#1a1a2e}
.day-label{width:110px;flex-shrink:0;border-right:1px solid #2a2a4a;padding:5px 8px;background:#12121f;display:flex;flex-direction:column;justify-content:center;cursor:default;z-index:5;position:relative}
.day-label-date{font-size:.68em;color:#f39c12;font-weight:600;white-space:nowrap}
.day-label-name{font-size:.6em;color:#777;margin-top:1px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:94px}
.day-body{position:relative;flex-shrink:0;height:82px}
.day-body.drag-over{background:rgba(243,156,18,.05)!important}

/* Hour lines inside day body */
.h-line{position:absolute;top:0;bottom:0;width:1px;background:#1a1a2e;pointer-events:none;z-index:1}
.h-line.main{background:#222240}

/* Plan cards — horizontal */
.plan-card{position:absolute;top:4px;bottom:4px;border-radius:5px;border-top:3px solid #999;overflow:hidden;cursor:default;z-index:10;display:flex;flex-direction:column;min-width:22px;transition:box-shadow .1s;user-select:none}
.plan-card:hover{box-shadow:0 2px 12px rgba(0,0,0,.5);z-index:20}
.plan-card.conflict{box-shadow:0 0 0 2px rgba(231,76,60,.8);z-index:22}
.plan-card.cross-drag-src{opacity:.35;z-index:50}
.plan-card.dragging{opacity:.45;z-index:50}
.plan-card-inner{flex:1;padding:2px 22px 2px 12px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;cursor:grab;position:relative}
.plan-card-inner:active{cursor:grabbing}
.plan-card-name{font-size:.63em;color:#e8e0d0;line-height:1.25;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:500}
.plan-card-time{font-size:.55em;color:#888;margin-top:1px;white-space:nowrap}
.plan-remove{position:absolute;top:1px;right:20px;background:none;border:none;color:#444;cursor:pointer;font-size:.65em;padding:1px 2px;line-height:1;z-index:15}
.plan-remove:hover{color:#e74c3c}
.plan-reset{position:absolute;top:1px;right:2px;background:none;border:none;color:#444;cursor:pointer;font-size:.6em;padding:1px 2px;line-height:1;z-index:15;title:'reset'}
.plan-reset:hover{color:#f39c12}
.resize-handle{position:absolute;top:0;bottom:0;width:8px;cursor:ew-resize;background:rgba(255,255,255,.04);z-index:12;display:flex;align-items:center;justify-content:center}
.resize-handle::after{content:'';width:2px;height:14px;background:rgba(255,255,255,.22);border-radius:2px}
.resize-handle:hover{background:rgba(255,255,255,.14)}
.resize-handle.rh-right{right:0;border-left:1px solid rgba(255,255,255,.12)}
.resize-handle.rh-left{left:0;border-right:1px solid rgba(255,255,255,.12)}
/* Travel blocks */
.travel-block{position:absolute;top:6px;bottom:6px;border-radius:3px;background:rgba(255,160,0,.06);border:1px dashed rgba(255,160,0,.25);z-index:6;display:flex;align-items:center;justify-content:center;overflow:hidden;pointer-events:none}
.travel-label{font-size:.5em;color:rgba(255,160,0,.65);white-space:nowrap;padding:0 2px}
/* Cross-day drag handle on card */
.plan-xday{position:absolute;top:50%;transform:translateY(-50%);left:10px;color:#444;font-size:.72em;cursor:grab;z-index:16;line-height:1}
.plan-xday:hover{color:#ccc}
/* Day label stats */
.day-stats{font-size:.54em;margin-top:3px;color:#555;line-height:1.5}
.stat-planned{color:#6ab}
.stat-free{color:#555}
.stat-warn{color:#e67e22!important}
/* Compact button */
.btn-compact{position:absolute;bottom:4px;right:4px;background:rgba(243,156,18,.1);border:1px solid rgba(243,156,18,.25);color:#c87;border-radius:4px;cursor:pointer;font-size:.55em;padding:2px 5px;z-index:6;white-space:nowrap;transition:all .15s}
.btn-compact:hover{background:rgba(243,156,18,.28);color:#f39c12}
.day-label{position:relative}

/* Hotel / morning blocks */
.hotel-block{position:absolute;top:4px;bottom:4px;border-radius:5px;background:linear-gradient(90deg,rgba(20,35,20,.95),rgba(12,24,12,.9));border-top:3px solid #2a4a2a;z-index:8;display:flex;align-items:center;padding:0 6px;gap:4px;overflow:hidden;cursor:pointer;min-width:10px}
.hotel-block:hover{border-top-color:#3a6a3a}
.hotel-block-name{font-size:.6em;color:#7ab;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.hotel-edit-btn{background:none;border:none;color:#345;cursor:pointer;font-size:.62em;padding:0 2px;flex-shrink:0}
.hotel-edit-btn:hover{color:#7ab}

/* INFO PANEL */
#infoPanel{position:fixed;right:-520px;top:0;width:480px;height:100vh;background:#16162a;border-left:1px solid #2a2a4a;overflow-y:auto;transition:right .3s;z-index:100;display:flex;flex-direction:column}
#infoPanel.open{right:0}
.info-placeholder{height:200px;display:flex;align-items:center;justify-content:center;font-size:4em;flex-shrink:0;position:relative;overflow:hidden}
.info-placeholder img{width:100%;height:100%;object-fit:cover}
.info-body{padding:16px;flex:1}
.info-close{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.6);border:none;color:#fff;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:.9em;z-index:1}
.info-meta{font-size:.7em;color:#888;text-transform:uppercase;letter-spacing:.08em}
.info-title{font-family:'Playfair Display',serif;font-size:1.35em;color:#f39c12;margin:5px 0;line-height:1.3}
.info-ratings{background:#1e1e2e;border-radius:7px;padding:9px;margin:9px 0}
.info-rating-row{display:flex;justify-content:space-between;font-size:.77em;padding:3px 0;color:#ccc}
.info-tip{background:#1a2a1a;border:1px solid #2a4a2a;border-radius:6px;padding:9px;font-size:.77em;color:#adc;margin:9px 0;line-height:1.5}
.info-link{display:inline-block;padding:6px 12px;border-radius:6px;text-decoration:none;font-size:.76em;font-weight:500;transition:opacity .2s}
.info-link:hover{opacity:.8}
.ta-link{background:#e67e22;color:white}
.g-link{background:#3498db;color:white}
.gyg-link{background:#2ecc71;color:white}

/* MODALS */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:400;align-items:flex-start;justify-content:center;overflow-y:auto;padding:20px}
.modal-overlay.open{display:flex}
.modal-box{background:#1e1e30;border-radius:13px;padding:20px;width:100%;border:1px solid #2a2a4a;margin:auto}
.modal-box h3{color:#f39c12;font-family:'Playfair Display',serif;margin-bottom:13px;font-size:1.02em}
.modal-box label{font-size:.73em;color:#888;display:block;margin-bottom:3px;margin-top:9px}
.modal-box input,.modal-box select,.modal-box textarea{width:100%;background:#12121f;border:1px solid #2a2a4a;color:#e8e0d0;padding:6px 9px;border-radius:6px;font-size:.8em;outline:none;font-family:'Inter',sans-serif}
.modal-box input:focus,.modal-box select:focus,.modal-box textarea:focus{border-color:#f39c12}
.modal-box textarea{resize:vertical;min-height:60px}
.modal-box select option{background:#1e1e30}
.modal-actions{display:flex;gap:7px;margin-top:14px;justify-content:flex-end;align-items:center}
.btn-save{background:#f39c12;border:none;color:#0f0f1a;padding:7px 16px;border-radius:6px;cursor:pointer;font-size:.82em;font-weight:600}
.btn-cancel{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#e8e0d0;padding:7px 14px;border-radius:6px;cursor:pointer;font-size:.82em}
.btn-danger{background:rgba(231,76,60,.15);border:1px solid rgba(231,76,60,.3);color:#e74c3c;padding:7px 12px;border-radius:6px;cursor:pointer;font-size:.79em}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.modal-grid .full{grid-column:1/-1}
.modal-section{font-size:.67em;color:#f39c12;text-transform:uppercase;letter-spacing:.08em;grid-column:1/-1;border-top:1px solid #2a2a4a;padding-top:10px;margin-top:5px}

/* OUTPUT */
.output-screen{position:fixed;inset:0;background:#0f0f1a;z-index:200;display:none;flex-direction:column;overflow:hidden}
.output-screen.open{display:flex}
.output-header{padding:10px 15px;background:#16162a;border-bottom:1px solid #2a2a4a;display:flex;align-items:center;justify-content:space-between}
.output-body{flex:1;overflow-y:auto;padding:16px}
#outputInner{max-width:700px;margin:0 auto}
/* SAVES PANEL */
.save-item{display:flex;align-items:center;gap:8px;padding:10px;background:#1e1e30;border-radius:8px;margin-bottom:6px}
.save-info{flex:1;min-width:0}
.save-name{font-size:.8em;font-weight:600;color:#e8e0d0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.save-meta{font-size:.68em;color:#666;margin-top:2px}
.btn-load-save{background:#f39c12;border:none;color:#0f0f1a;padding:5px 12px;border-radius:6px;cursor:pointer;font-size:.75em;font-weight:600;white-space:nowrap}
.btn-del-save{background:none;border:1px solid #333;color:#666;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:.75em}
.btn-del-save:hover{color:#e74c3c;border-color:#e74c3c}

/* Planned badge in bank */
.badge-planned{font-size:.65em;background:rgba(39,174,96,.18);color:#27ae60;border:1px solid rgba(39,174,96,.3);border-radius:4px;padding:1px 5px;margin-left:5px;white-space:nowrap;vertical-align:middle}
/* Ingeplande kaart — volledig leesbaar, dunne groene topbalk als bevestiging */
.bank-card.planned {
  opacity: 1;
}
.bank-card.planned::before {
  content: '';
  display: block;
  height: 2px;
  background: rgba(39, 174, 96, 0.5);
  border-radius: 2px 2px 0 0;
  margin: -6px -8px 4px -8px;
}
/* Niet-ingeplande kaart — subtiele gouden rand als "nog te plannen"-signaal */
.bank-card:not(.planned) {
  box-shadow: inset 0 0 0 1px rgba(243, 156, 18, 0.25);
}
.bank-card:not(.planned):hover {
  box-shadow: inset 0 0 0 1px rgba(243, 156, 18, 0.5);
}

/* Data status strip */
.card-data-strip{display:flex;gap:3px;padding:3px 10px 5px;flex-wrap:wrap}
.data-dot{font-size:.65em;padding:2px 5px;border-radius:3px;cursor:default;font-weight:600}
.dot-ok{background:rgba(39,174,96,.15);color:#27ae60}
.dot-miss{background:rgba(231,76,60,.12);color:#c0392b;opacity:.7}

/* Tooltip — vaste kleuren, altijd leesbaar ongeacht thema */
#bankTooltip{
  display:none;position:fixed;
  width:230px;background:#1c1c24;border:1px solid #38384a;border-radius:8px;
  padding:10px 12px;z-index:99999;pointer-events:none;
  box-shadow:0 6px 24px rgba(0,0,0,.8);
}
.tt-name{color:#f5a623;font-weight:700;font-size:.82em;margin-bottom:5px}
.tt-desc{color:#d8d8e8;font-size:.75em;line-height:1.5;margin-bottom:6px}
.tt-row{color:#a0a0b8;font-size:.72em;margin-bottom:5px}
.tt-tip{color:#7fe8c0;font-size:.73em;line-height:1.4;border-top:1px solid #38384a;padding-top:5px;margin-top:4px}

/* ── THEME PICKER ────────────────────────────────────── */
.theme-picker{position:absolute;top:44px;right:8px;background:#1a1a2e;border:1px solid #3a3a5a;border-radius:10px;padding:10px;z-index:9999;display:flex;flex-wrap:wrap;gap:7px;width:230px;box-shadow:0 8px 32px rgba(0,0,0,.6)}
.theme-picker.hidden{display:none}
.theme-swatch{width:48px;height:48px;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:all .2s;display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;font-size:.58em;color:rgba(255,255,255,.8);font-weight:600}
.theme-swatch:hover{transform:scale(1.1);border-color:rgba(255,255,255,.5)}
.theme-swatch.active{border-color:#f39c12;transform:scale(1.08)}

/* Theme CSS variables */
:root{
  --bg:         #0f0f1a;
  --bg2:        #12121f;
  --bg3:        #1a1a2e;
  --bg4:        #1e1e30;
  --border:     #2a2a4a;
  --accent:     #f39c12;
  --text:       #e8e0d0;
  --text2:      #888;
  --header-bg:  linear-gradient(135deg,#1a0a2e,#0d1b2a);
}

/* Apply variables */
body{background:var(--bg);color:var(--text)}
header{background:var(--header-bg);border-bottom-color:var(--border)}
.bank{background:var(--bg2);border-right-color:var(--border)}
.bank-header{border-bottom-color:var(--border)}
.bank-card{background:var(--bg4)}
.bank-card:hover{filter:brightness(1.15)}
#bankSearch,#bankSort{background:var(--bg3);border-color:var(--border);color:var(--text)}
.time-header-wrap{background:var(--bg2);border-bottom-color:var(--border)}
.day-label{background:var(--bg2);border-right-color:var(--border)}
.day-body{background:var(--bg)}
#infoPanel{background:var(--bg3)}
.logo{color:var(--accent)}
.btn-hdr{border-color:rgba(255,255,255,.2)}
#bankTooltip{background:var(--bg3);border-color:var(--border)}

/* Corporate: header is donkerblauw dus tekst wit */
body.theme-corporate header .logo,
body.theme-corporate header .logo span,
body.theme-corporate header .btn-hdr,
body.theme-corporate header .legend-dot {
  color: rgba(255,255,255,0.9) !important;
}
body.theme-corporate header .btn-hdr {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.12);
}
body.theme-corporate header .btn-hdr:hover {
  background: rgba(255,255,255,0.22);
}

/* Clean: lichte header, donkere tekst */
body.theme-clean header {
  border-bottom: 1px solid #dee2e6 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
body.theme-clean header .logo { color: #f59e0b !important; }
body.theme-clean header .logo span { color: #1a1d23 !important; }
body.theme-clean header .btn-hdr { color: #1a1d23 !important; border-color: #ced4da !important; background: #f8f9fa !important; }
body.theme-clean header .btn-hdr:hover { background: #e9ecef !important; }
body.theme-clean header .legend-dot { color: #1a1d23 !important; }

/* Save indicator — versienummer + autosave status als compact blokje */
.save-indicator{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0 6px;line-height:1.3;border-left:1px solid rgba(255,255,255,.08);margin-left:2px}
.save-indicator #versionIndicator{font-size:.62em;color:#f39c12;font-family:monospace;font-weight:700;letter-spacing:.02em}
.save-indicator #autosaveStatus{font-size:.58em;color:#5a8a6a;white-space:nowrap}

/* Systeemkaart in bank (ochtend/overnachting) */
.bank-card-system{background:rgba(26,32,48,.7);border-left-color:#5a7a9a !important;cursor:grab}
.bank-card-system .card-name{color:#8ab0c8;font-size:.82em;font-weight:600}

/* Trip picker items */
.trip-item{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:7px;margin-bottom:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);transition:background .15s}
.trip-item:hover{background:rgba(255,255,255,.08)}
.trip-active{border-color:rgba(243,156,18,.4) !important;background:rgba(243,156,18,.05) !important}
.trip-info{flex:1;min-width:0}
.trip-name{color:var(--text);font-size:.88em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trip-meta{color:var(--text2);font-size:.72em;margin-top:1px}
.trip-open-btn{white-space:nowrap}