* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #111; color: #e8e8e8; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

#header { 
    padding: 20px 28px; 
    border-bottom: 1px solid #2a2a2a; 
    display: flex; 
    align-items: center; 
    gap: 16px; 
    background: linear-gradient(135deg, #1a1a1a 0%, #202020 100%); 
    flex-shrink: 0; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.3); 
    justify-content: space-between;
    min-height: 100px;
}
#header h1 { 
    font-size: 20px; 
    font-weight: 600; 
    color: #ffffff; 
    letter-spacing: 0.02em; 
    margin: 0; 
}
#header-sub { 
    font-size: 12px; 
    color: #a0a0a0; 
    white-space: nowrap; 
    margin-left: auto; 
    font-weight: 400; 
}
.hdr-btn { 
    border-radius: 10px; 
    cursor: pointer; 
    font-size: 20px; 
    display: flex; 
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    transition: all 0.2s ease; 
    flex-shrink: 0; 
    width: auto;
    min-width: 90px;
    height: 52px; 
    background: #2a2a2a; 
    border: 1px solid #404040; 
    color: #cccccc; 
    gap: 3px;
    padding: 4px 8px;
}
.hdr-label {
    font-size: 7px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    min-width: max-content;
}
.hdr-btn:hover { 
    border-color: #606060; 
    color: #ffffff; 
    background: #3a3a3a; 
    transform: translateY(-1px); 
    box-shadow: 0 2px 6px rgba(0,0,0,0.3); 
}

/* Icon-specific colors */
#new-entry-btn {
    border-color: #3a5a3a;
    color: #7ad96d;
    background: rgba(122, 217, 109, 0.08);
}
#new-entry-btn:hover {
    border-color: #7ad96d;
    background: rgba(122, 217, 109, 0.15);
    box-shadow: 0 0 12px rgba(122, 217, 109, 0.2);
}

#random-entry-btn {
    border-color: #5a4a3a;
    color: #d4a574;
    background: rgba(212, 165, 116, 0.08);
}
#random-entry-btn:hover {
    border-color: #d4a574;
    background: rgba(212, 165, 116, 0.15);
    box-shadow: 0 0 12px rgba(212, 165, 116, 0.2);
}

#tabs-menu-btn {
    border-color: #2a5a6a;
    color: #4abaaa;
    background: rgba(74, 186, 170, 0.08);
}
#tabs-menu-btn:hover {
    border-color: #4abaaa;
    background: rgba(74, 186, 170, 0.15);
    box-shadow: 0 0 12px rgba(74, 186, 170, 0.2);
}

#archief-btn {
    border-color: #3a5a3a;
    color: #7ad96d;
    background: rgba(122, 217, 109, 0.08);
}
#archief-btn:hover {
    border-color: #7ad96d;
    background: rgba(122, 217, 109, 0.15);
    box-shadow: 0 0 12px rgba(122, 217, 109, 0.2);
}

#back-to-menu-btn {
    border-color: #2a5a6a;
    color: #4abaaa;
    background: rgba(74, 186, 170, 0.08);
}
#back-to-menu-btn:hover {
    border-color: #4abaaa;
    background: rgba(74, 186, 170, 0.15);
    box-shadow: 0 0 12px rgba(74, 186, 170, 0.3);
}

#reset-btn {
    border-color: #4a4a3a;
    color: #d9b87d;
    background: rgba(217, 184, 125, 0.08);
}
#reset-btn:hover {
    border-color: #d9b87d;
    background: rgba(217, 184, 125, 0.15);
    box-shadow: 0 0 12px rgba(217, 184, 125, 0.2);
}

#shutdown-btn {
    border-color: #6a2a2a;
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.08);
}
#shutdown-btn:hover {
    border-color: #ff6b6b;
    background: rgba(255, 107, 107, 0.15);
    box-shadow: 0 0 12px rgba(255, 107, 107, 0.2);
}

#restart-ai-btn {
    border-color: #2a4a6a;
    color: #7ab8e8;
    background: rgba(122, 184, 232, 0.08);
}
#restart-ai-btn:hover {
    border-color: #7ab8e8;
    background: rgba(122, 184, 232, 0.16);
    box-shadow: 0 0 12px rgba(122, 184, 232, 0.2);
}
@keyframes flame6-pulse { 0%,100% { box-shadow: 0 0 10px rgba(200,0,200,0.5); } 50% { box-shadow: 0 0 20px rgba(200,0,200,0.8); } }

/* CTX BAR */
/* Archief context bar */
#archief-ctx-label { font-size: 11px; color: #5a5a5a; white-space: nowrap; font-weight: 500; }
#archief-ctx-track { flex: 1; height: 4px; background: #252525; border-radius: 2px; overflow: hidden; }
#archief-ctx-fill { height: 100%; width: 0%; border-radius: 2px; background: #3a7a6a; transition: width 0.6s ease, background 0.3s; }
#archief-ctx-fill.warn { background: #aa8a20; } #archief-ctx-fill.full { background: #aa2a2a; }
#archief-ctx-pct { font-size: 11px; color: #e0e0e0; white-space: nowrap; font-weight: 600; }
bodybody/* MAIN */
#main-area { flex: 1; display: flex; overflow: hidden; }
.copy-btn { font-size: 10px; color: #2a5a8a; background: transparent; border: 1px solid #1a2a4a; border-radius: 8px; padding: 1px 6px; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.copy-btn:hover { color: #4a8ab8; border-color: #2a4a7a; }
bodybody.followup-chip { font-size: 12px; color: #4a6a8a; border: 1px solid #1a2a3a; background: #101620; border-radius: 16px; padding: 4px 12px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.followup-chip:hover { background: #162030; color: #7aa8c8; }

.status-bubble { display: flex; align-items: center; gap: 8px; padding: 4px 20px; max-width: 760px; margin: 0 auto; width: 100%; }
.status-text { font-size: 12px; color: #444; font-style: italic; }
.dot-pulse { display: flex; gap: 3px; align-items: center; }
.dot-pulse span { width: 4px; height: 4px; border-radius: 50%; background: #3a7a5a; animation: pulse 1.2s ease-in-out infinite; }
.dot-pulse span:nth-child(2) { animation-delay: 0.2s; } .dot-pulse span:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulse { 0%,80%,100% { opacity:.2; transform:scale(.8); } 40% { opacity:1; transform:scale(1); } }
@keyframes slideInDown { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* TIMER BAR — onder user bericht, dynamisch geplaatst */
.msg-timer-wrap { height: 2px; background: transparent; max-width: 760px; margin: 0 auto; width: 100%; padding: 0 20px; }
.msg-timer-bar { height: 100%; width: 0%; background: #2a5a8a; border-radius: 2px; transition: width 0.25s linear; }
body/* NORMALE UI: groen/blauw accenten */
.tl-entry:hover { border-left-color: #2a5a8a; }
.tl-entry.active { background: #0a1420; border-left-color: #2a5a8a; }
.dot-pulse span { background: #2a5a8a; }
#bar-inner:focus-within { border-color: #2a5a8a; }

/* K7: TEMPLATES */
#templates-left { display: flex; gap: 8px; }
#templates-right { display: flex; gap: 8px; }
#templates-center { flex: 1; }
.template-chip { background: #1a2a3a; border: 1px solid #2a4a6a; border-radius: 8px; color: #7ab8e8; padding: 10px 18px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.15s; font-family: inherit; white-space: nowrap; }
.template-chip:hover { background: #1f3a50; border-color: #3a5a8a; transform: translateY(-2px); }
.template-chip:active { transform: scale(0.98); }

/* FULLSCREEN ARCHIEF */
#archief-fullscreen { display: none; position: fixed; inset: 0; background: #0f0f0f; z-index: 140; flex-direction: column; }
#archief-fullscreen.visible { display: flex; }
#personen-fullscreen { display: none; position: fixed; inset: 0; background: #0f0f0f; z-index: 141; flex-direction: column; }
#personen-fullscreen.visible { display: flex; }
#boeken-fullscreen { display: none; position: fixed; inset: 0; background: #111; z-index: 142; flex-direction: column; }
#boeken-fullscreen.visible { display: flex; }
#boeken-header { padding: 20px 28px; border-bottom: 1px solid #2a2a2a; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; background: linear-gradient(135deg, #1a1a1a 0%, #202020 100%); flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.3); justify-content: space-between; }
.boeken-title { display: flex; align-items: center; gap: 14px; }
.boeken-icon { font-size: 34px; }
.boeken-title h1 { margin: 0; font-size: 28px; }
.boeken-subtitle { margin: 6px 0 0; font-size: 13px; color: #aaa; max-width: 500px; }
.boeken-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.boeken-action-btn { min-width: 96px; height: 44px; font-size: 14px; }
.boeken-toolbar { padding: 20px 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: space-between; background: #0c0c0c; border-bottom: 1px solid #1f1f1f; }
#boeken-count { font-size: 14px; color: #ccc; font-weight: 600; }
.boeken-search { flex: 1; min-width: 220px; background: #121212; border: 1px solid #2a2a2a; border-radius: 10px; padding: 10px 14px; color: #eee; font-size: 13px; outline: none; }
.boeken-search:focus { border-color: #3a5a8a; }
.boeken-list { padding: 20px 28px 40px 28px; display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 1180px; margin: 0 auto; }
.boek-card { background: rgba(255,255,255,0.02); border: 1px solid #2a2a2a; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.boek-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.boek-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #ccc; }
.boek-field input, .boek-field textarea { width: 100%; background: #121212; border: 1px solid #2a2a2a; border-radius: 10px; padding: 10px 12px; color: #eee; font-size: 13px; outline: none; resize: vertical; }
.boek-field textarea { min-height: 84px; }
.boek-actions { display: flex; justify-content: flex-end; gap: 10px; }
.boek-empty { padding: 18px 14px; border: 1px solid #2a2a2a; border-radius: 16px; background: rgba(255,255,255,0.02); color: #999; font-size: 13px; text-align: center; }
#stamboom-fullscreen { display: none; position: fixed; inset: 0; background: #0d100d; z-index: 143; flex-direction: column; }
#stamboom-fullscreen.visible { display: flex; }
#archief-header { padding: 20px 28px; border-bottom: 1px solid #2a2a2a; display: flex; align-items: flex-start; gap: 16px; background: linear-gradient(135deg, #1a1a1a 0%, #202020 100%); flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.3); min-height: 100px; }
#personen-header { padding: 20px 28px; border-bottom: 1px solid #2a2a2a; display: flex; align-items: flex-start; gap: 16px; background: linear-gradient(135deg, #1a1a1a 0%, #202020 100%); flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.3); min-height: 100px; }
#stamboom-header { padding: 20px 28px; border-bottom: 1px solid #253025; display: flex; align-items: flex-start; gap: 16px; background: linear-gradient(135deg, #171d17 0%, #202820 100%); flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.35); min-height: 100px; }
#archief-title { font-size: 18px; font-weight: 600; color: #ffffff; flex: 1; }
#archief-write-btn { border-color: #3a5a3a; color: #7ad96d; background: rgba(122, 217, 109, 0.12); }
#archief-back-btn { border-color: #3a5a7a; color: #6ac9ff; background: rgba(106, 201, 255, 0.12); }
#archief-random-btn { border-color: #5a4a3a; color: #d4a574; background: rgba(212, 165, 116, 0.12); }
#archief-personen-btn { border-color: #7a3a6a; color: #e8a0d0; background: rgba(232, 160, 208, 0.12); }
#personen-btn { border-color: #7a3a6a; color: #e8a0d0; background: rgba(232, 160, 208, 0.08); }
#personen-btn:hover { border-color: #e8a0d0; background: rgba(232, 160, 208, 0.15); box-shadow: 0 0 12px rgba(232, 160, 208, 0.25); }

#archief-tijdlijn-btn { border-color: #2a5a6a; color: #4abaaa; background: rgba(74, 186, 170, 0.12); }
#archief-tijdlijn-btn:hover { border-color: #4abaaa; color: #6fd4c4; background: rgba(74, 186, 170, 0.2); box-shadow: 0 0 16px rgba(74, 186, 170, 0.3); transform: translateY(-1px); }
#archief-menu-btn { border-color: #2a5a6a; color: #4abaaa; background: rgba(74, 186, 170, 0.12); }
#archief-write-btn:hover { border-color: #7ad96d; color: #9ae98a; background: rgba(122, 217, 109, 0.2); box-shadow: 0 0 16px rgba(122, 217, 109, 0.3); transform: translateY(-1px); }
#archief-back-btn:hover { border-color: #6ac9ff; color: #8fdbff; background: rgba(106, 201, 255, 0.2); box-shadow: 0 0 16px rgba(106, 201, 255, 0.3); transform: translateY(-1px); }
#archief-random-btn:hover { border-color: #d4a574; color: #e8c494; background: rgba(212, 165, 116, 0.2); box-shadow: 0 0 16px rgba(212, 165, 116, 0.3); transform: translateY(-1px); }
#archief-personen-btn:hover { border-color: #e8a0d0; color: #f0bfdf; background: rgba(232, 160, 208, 0.2); box-shadow: 0 0 16px rgba(232, 160, 208, 0.25); transform: translateY(-1px); }

#archief-stop-btn { border-color: #6a2a2a; color: #ff6b6b; background: rgba(255, 107, 107, 0.12); }
#archief-stop-btn:hover { border-color: #ff6b6b; color: #ff9494; background: rgba(255, 107, 107, 0.2); box-shadow: 0 0 16px rgba(255, 107, 107, 0.3); transform: translateY(-1px); }
#archief-menu-btn:hover { border-color: #4abaaa; color: #6fd4c4; background: rgba(74, 186, 170, 0.2); box-shadow: 0 0 16px rgba(74, 186, 170, 0.3); transform: translateY(-1px); }
#archief-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#personen-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#stamboom-content { flex: 1; display: grid; grid-template-columns: 320px minmax(0, 1fr); overflow: hidden; min-height: 0; }
#tl-tabs-fullscreen { display: flex; border-bottom: 1px solid #1a1a1a; flex-shrink: 0; gap: 0; }
.tl-tab-fullscreen { flex: 1; padding: 16px 0; font-size: 14px; font-weight: 500; text-align: center; cursor: pointer; color: #3a3a3a; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; letter-spacing: 0.02em; }
.tl-tab-fullscreen.active { color: #3aaa6a; border-bottom-color: #2a8a5a; }  /* default, overschreven per id */
#tab-entries-fs.active { color: #3aaa6a; border-bottom-color: #2a8a5a; }
#tab-contexts-fs.active { color: #7a6acc; border-bottom-color: #5a4aaa; }
#tab-brieven-fs.active { color: #d9902a; border-bottom-color: #b97020; }
#tab-reflecties-fs.active { color: #c09ade; border-bottom-color: #9060c0; }
#tab-reviews-fs.active { color: #cc7a2a; border-bottom-color: #aa5a1a; }
#tab-herinnering-fs.active { color: #d9779a; border-bottom-color: #b94a7a; }
#tab-chatlog-fs.active { color: #ff6b5b; border-bottom-color: #c84a3a; }
#tab-werken-fs { color: #3a3a3a !important; border-bottom-color: #3aa9c8 !important; }
#tab-werken-fs.active { color: #3a3a3a !important; background: rgba(58, 169, 200, 0.08) !important; }
#tl-search-wrap-fullscreen { padding: 14px 20px; border-bottom: 1px solid #1a1a1a; flex-shrink: 0; display: none; }
#tl-search-fullscreen { width: 100%; background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 8px; padding: 8px 14px; color: #e8e8e8; font-size: 14px; font-family: inherit; outline: none; }
#tl-search-fullscreen:focus { border-color: #3a3a3a; }
#tl-filters-fullscreen { margin-top: 0; padding: 8px 20px; display: none; border-top: 1px solid #1a1a1a; display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
#tl-filters-fullscreen.active { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
#tl-filters-fullscreen h3 { width: auto; margin: 0; font-size: 11px; color: #999999; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
#tl-filters-fullscreen .filter-row { display: flex; flex-direction: row; gap: 12px; flex-wrap: wrap; align-items: center; }
#tl-filters-fullscreen .filter-row-horizontal { display: flex; gap: 12px; flex-wrap: wrap; flex: 1; }
#tl-list-fullscreen { flex: 1; overflow-y: auto; padding: 4px 0; }
.filter-row { display: flex; flex-direction: row; gap: 6px; }
.tl-filter-lbl { font-size: 12px; color: #4a4a4a; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.tl-filter-lbl input { accent-color: #666666; cursor: pointer; }
.tl-filter-lbl:has(input:checked) { color: #999999; font-weight: 500; }
.tl-filter-lbl input[type="radio"]:checked + span::before { content: ""; }

/* K2: Geen preview modus */

:root {
    --text: #3a3a3a;
    --text-hover: #666;
    --accent: #4abaaa;
    --accent-border: #2a8a7a;
}

/* basis knopstijl */
.preview-toggle {
    flex-shrink: 0;
    background: rgba(90, 205, 122, 0.08) !important;
    border: 2px solid #5acd7a !important;
    border-bottom: 2px solid #5acd7a !important;

    color: #5acd7a !important;
    font-weight: 500;
    letter-spacing: 0.02em;

    cursor: pointer;
    white-space: nowrap;

    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.1s ease;
}

/* normale variant */
#preview-toggle-btn {
    padding: 11px 10px;
    font-size: 11px;
}

/* fullscreen variant */
#preview-toggle-btn-fs {
  padding: 16px 12px;
  font-size: 13px;
  background: #0a0a0a;
  border: none;

  /* kleuren */
  color: var(--text);
  border-bottom: 2px solid transparent;

  /* optioneel voor hover/transitions */
  transition: color 0.15s, border-color 0.15s;
}

/* hover effect */
.preview-toggle:hover {
    color: #7ae390 !important;
    border-color: #7ae390 !important;
    background: rgba(90, 205, 122, 0.15) !important;
    transform: translateY(-1px);
}

/* active state - preview hidden (red) */
.preview-toggle.active {
    color: #ff6b6b !important;
    border-color: #ff6b6b !important;
    background: rgba(255, 107, 107, 0.18) !important;
    box-shadow: 0 0 12px rgba(255, 107, 107, 0.18);
}
.hdr-btn.preview-toggle.active {
    border-color: #ff6b6b !important;
    background: rgba(255, 107, 107, 0.18) !important;
    box-shadow: 0 0 12px rgba(255, 107, 107, 0.18);
}

/* focus (toegankelijkheid) */
.preview-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

#archief-fullscreen.hide-preview .tl-preview,
#archief-fullscreen.hide-preview .tl-kaart-preview,
#tijdlijn-fullscreen.hide-preview .tl-kaart-preview,
#personen-fullscreen.hide-preview .dossier-entry-preview,
#persoon-modal.hide-preview .dossier-entry-preview {
    display: none !important;
}

/* De zijbalk */

/* --- FULLSCREEN ARCHIEF --- */
#archief-fullscreen { 
    display: none; 
    position: fixed; 
    inset: 0; 
    background: #0f0f0f; 
    z-index: 140; 
    flex-direction: column; 
}
#archief-fullscreen.visible { display: flex; }
#personen-fullscreen {
    display: none;
    position: fixed;
    inset: 0;
    background: #0f0f0f;
    z-index: 141;
    flex-direction: column;
}
#personen-fullscreen.visible { display: flex; }

/* --- SHARED LIST LOGIC (Grid & Layout) --- */

/* --- DE CONTAINERS --- */
#tl-list-fullscreen {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-content: flex-start;
    gap: 12px;
    padding: 20px;
    width: 100%;
}

/* --- DE MAAND HEADERS --- */
/* Deze MOETEN 100% breed zijn om de kolommen te breken */
.tl-month {
    flex: 0 0 100% !important; 
    width: 100% !important;
    box-sizing: border-box;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.25em;
    padding: 32px 0 16px 0;
    color: #4a9a6a;
    text-transform: uppercase;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 28px;
    white-space: nowrap;
    overflow: hidden;
}

.tl-month.month-entries { color: #5acd7a; }
.tl-month.month-brieven { color: #edbf52; }
.tl-month.month-brieven::before,
.tl-month.month-brieven::after { background: rgba(237, 191, 82, 0.2); }
.tl-month.month-brieven-vz { color: #edbf52; }
.tl-month.month-brieven-vz::before,
.tl-month.month-brieven-vz::after { background: rgba(237, 191, 82, 0.2); }

.tl-month.month-brieven-onvz { color: #edbf52; }
.tl-month.month-brieven-onvz::before,
.tl-month.month-brieven-onvz::after { background: rgba(237, 191, 82, 0.2); }

.tl-month.month-contexts { color: #9b88d4; }
.tl-month.month-contexts::before,
.tl-month.month-contexts::after { background: rgba(155, 136, 212, 0.2); }

.tl-month.month-reflecties { color: #d9aaff; }
.tl-month.month-reflecties::before,
.tl-month.month-reflecties::after { background: rgba(217, 170, 255, 0.2); }

.tl-month.month-reviews { color: #f5ad43; }
.tl-month.month-reviews::before,
.tl-month.month-reviews::after { background: rgba(245, 173, 67, 0.2); }

.tl-month.month-herinnering { color: #7a9ade; }
.tl-month.month-herinnering::before,
.tl-month.month-herinnering::after { background: rgba(122, 154, 222, 0.2); }

.tl-month.month-search { color: #999999; }
.tl-month.month-search::before,
.tl-month.month-search::after { background: rgba(153, 153, 153, 0.2); }

.tl-month.month-chatlog { color: #ff6b5b; }
.tl-month.month-chatlog::before,
.tl-month.month-chatlog::after { background: rgba(255, 107, 91, 0.2); }

.tl-month::before, .tl-month::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(74, 154, 106, 0.2);
    margin: 0 20px;
}

/* --- DE ENTRIES (De strips) --- */
.tl-entry {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 11px 14px;
    display: grid;
    grid-template-columns: auto auto auto 1fr;
    align-items: center;
    gap: 0 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 52px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    
    /* Standaard voor sidebar: 1 per rij */
    flex: 1 1 100%;
    max-width: 100%;
}

.tl-entry:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.tl-entry.active {
    background: linear-gradient(135deg, rgba(10, 20, 32, 0.8) 0%, rgba(10, 20, 32, 0.5) 100%);
    border-color: rgba(42, 90, 136, 0.4);
    box-shadow: 0 4px 12px rgba(42, 90, 136, 0.2), inset 0 1px 2px rgba(255,255,255,0.05);
}

/* FULLSCREEN SPECIFIEK: 2 kolommen */
#tl-list-fullscreen .tl-entry {
    flex: 1 1 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
    display: grid !important;
    grid-template-columns: auto auto auto 1fr !important;
}

/* Context specifieke kleuren in de strips */
.tl-date {
    font-size: 12px;
    font-weight: 600;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    grid-column: 1;
}
.entry-meta-icons {
    grid-column: 3;
}
.tl-title {
    font-size: 13px;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    grid-column: 2;
    font-weight: 500;
}
.tl-preview {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    grid-column: 4;
}
.entry-type-context .tl-date-day {
    color: #7a6acc !important;
}
.entry-type-context .tl-date-num {
    color: #5a9ade !important;
    font-size: 16px !important; /* "CTX" is langer dan een getal, dus iets kleiner */
}

/* tl-entry defined above */

/* SPECIFIEK VOOR ZIJBALK (1 kolom) */

/* ── BRIEF SECTIEHEADER (Verzonden / Onverzonden) ── */
.brief-section-hdr {
    flex: 0 0 100% !important; width: 100% !important;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
    padding: 24px 20px 10px; color: #d9a02a;
}
.brief-section-hdr::before, .brief-section-hdr::after {
    content: ""; flex: 1; height: 1px; background: rgba(217,160,42,0.2); margin: 0 16px;
}
.brief-section-hdr.hdr-onvz { color: #c84a3a; }
.brief-section-hdr.hdr-onvz::before,
.brief-section-hdr.hdr-onvz::after { background: rgba(200,74,58,0.2); }

.brief-section-hdr.hdr-gk { color: #e8b000; }
.brief-section-hdr.hdr-gk::before,
.brief-section-hdr.hdr-gk::after { background: rgba(232,176,0,0.2); }

/* ── BRIEF SUBHEADER (Met datum / Zonder datum) ── */
.brief-sub-hdr {
    flex: 0 0 100% !important; width: 100% !important;
    font-size: 10px; font-weight: 600; color: #444; letter-spacing: 0.1em;
    text-transform: uppercase; padding: 6px 4px 4px;
}

/* ── BRIEF RIJ ── */
.brief-row {
    flex: 1 1 100%; max-width: 100%;
    display: grid;
    grid-template-columns: auto auto auto 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    gap: 0 6px;
    padding: 9px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    cursor: pointer;
    min-height: 44px;
    transition: background 0.15s;
    overflow: hidden;
}
.brief-row:hover { background: rgba(255,255,255,0.07); }
.brief-date {
    font-size: 12px; font-weight: 500;
    color: inherit;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0;
}
.brief-naam {
    font-size: 13px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: inherit;
    min-width: 0;
}
.brief-date::after {
    content: "•";
    margin: 0 8px;
    color: inherit;
}
.brief-prev {
    font-size: 11px; color: rgba(255,255,255,0.35);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0;
}
/* Fullscreen: 2 kolommen */
#tl-list-fullscreen .brief-row {
    flex: 1 1 calc(50% - 8px); max-width: calc(50% - 8px);
}
#tl-list-fullscreen .brief-section-hdr,
#tl-list-fullscreen .brief-sub-hdr {
    flex: 0 0 100% !important; width: 100% !important;
}
#tl-list-fullscreen {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px;
}
/* tl-entry styles defined above */
/* Entry type colors */
.tl-entry.entry-type-entry .tl-date { color: #5acd7a; font-weight: 600; }
.tl-entry.entry-type-entry { border-color: rgba(90, 205, 122, 0.3); }
.tl-entry.entry-type-entry:hover { border-color: rgba(90, 205, 122, 0.5); background: rgba(90, 205, 122, 0.05); }
.tl-entry.entry-type-entry.active { border-color: rgba(90, 205, 122, 0.6); background: rgba(90, 205, 122, 0.08); }

.entry-type-context .tl-date { color: #9b88d4 !important; font-weight: 600; }
.entry-type-context { border-color: rgba(155, 136, 212, 0.3) !important; }
.entry-type-context:hover { border-color: rgba(155, 136, 212, 0.5) !important; background: rgba(155, 136, 212, 0.05) !important; }
.entry-type-context.active { border-color: rgba(155, 136, 212, 0.6) !important; background: rgba(155, 136, 212, 0.08) !important; }

/* Brieven colors - all orange */
.tl-entry.entry-type-brief.verzonden .tl-date,
.tl-entry.entry-type-brief.verzonden .tl-date-num,
.tl-entry.entry-type-brief.verzonden .tl-date-day,
.tl-entry.entry-type-brief.verzonden .brief-title { color: #edbf52 !important; font-weight: 600; }
.tl-entry.entry-type-brief.verzonden { border-color: rgba(237, 191, 82, 0.3); }
.tl-entry.entry-type-brief.verzonden:hover { border-color: rgba(237, 191, 82, 0.5); background: rgba(237, 191, 82, 0.05); }

.tl-entry.entry-type-brief.onverzonden .tl-date,
.tl-entry.entry-type-brief.onverzonden .tl-date-num,
.tl-entry.entry-type-brief.onverzonden .tl-date-day,
.tl-entry.entry-type-brief.onverzonden .brief-title { color: #edbf52 !important; font-weight: 600; }
.tl-entry.entry-type-brief.onverzonden { border-color: rgba(237, 191, 82, 0.3); }
.tl-entry.entry-type-brief.onverzonden:hover { border-color: rgba(237, 191, 82, 0.5); background: rgba(237, 191, 82, 0.05); }

.tl-entry.entry-type-brief.gekregen .tl-date,
.tl-entry.entry-type-brief.gekregen .tl-date-num,
.tl-entry.entry-type-brief.gekregen .tl-date-day,
.tl-entry.entry-type-brief.gekregen .brief-title { color: #edbf52 !important; font-weight: 600; }
.tl-entry.entry-type-brief.gekregen { border-color: rgba(237, 191, 82, 0.3); }
.tl-entry.entry-type-brief.gekregen:hover { border-color: rgba(237, 191, 82, 0.5); background: rgba(237, 191, 82, 0.05); }

.tl-entry.entry-type-reflectie .tl-date,
.tl-entry.entry-type-reflectie .tl-date-num,
.tl-entry.entry-type-reflectie .tl-date-day { color: #d9aaff !important; font-weight: 600; }
.tl-entry.entry-type-reflectie { border-color: rgba(217, 170, 255, 0.3); }
.tl-entry.entry-type-reflectie:hover { border-color: rgba(217, 170, 255, 0.5); background: rgba(217, 170, 255, 0.05); }

/* Review colors: Oranje */
.tl-entry.entry-type-review .tl-date,
.tl-entry.entry-type-review .tl-date-num,
.tl-entry.entry-type-review .tl-date-day { color: #f5ad43 !important; font-weight: 600; }
.tl-entry.entry-type-review { border-color: rgba(245, 173, 67, 0.3); }
.tl-entry.entry-type-review:hover { border-color: rgba(245, 173, 67, 0.5); background: rgba(245, 173, 67, 0.05); }

/* Herinnering colors: Blauw */
.tl-entry.entry-type-herinnering .tl-date,
.tl-entry.entry-type-herinnering .tl-date-num,
.tl-entry.entry-type-herinnering .tl-date-day { color: #7a9ade !important; font-weight: 600; }
.tl-entry.entry-type-herinnering { border-color: rgba(122, 154, 222, 0.3); }
.tl-entry.entry-type-herinnering:hover { border-color: rgba(122, 154, 222, 0.5); background: rgba(122, 154, 222, 0.05); }

/* Chatlog colors: Rood (was grijs, wissel met zoeken) */
.tl-entry.entry-type-chatlog .tl-date { color: #ff6b5b !important; font-weight: 600; }
.tl-entry.entry-type-chatlog { border-color: rgba(255, 107, 91, 0.3); }
.tl-entry.entry-type-chatlog:hover { border-color: rgba(255, 107, 91, 0.5); background: rgba(255, 107, 91, 0.05); }

/* Search/Zoeken colors: Grijs (was rood, wissel met chatlogs) */
.tl-entry.entry-type-search .tl-date { color: #999999 !important; font-weight: 600; }
.tl-entry.entry-type-search { border-color: rgba(102, 102, 102, 0.3); }
.tl-entry.entry-type-search:hover { border-color: rgba(102, 102, 102, 0.5); background: rgba(102, 102, 102, 0.05); }

/* Werken colors: Groen-blauw */
.tl-entry.entry-type-werk .tl-date { color: #3aa9c8 !important; font-weight: 600; }
.tl-entry.entry-type-werk { border-color: rgba(58, 169, 200, 0.3); }
.tl-entry.entry-type-werk:hover { border-color: rgba(58, 169, 200, 0.5); background: rgba(58, 169, 200, 0.05); }

.tl-month.month-werken { color: #3aa9c8; }
.tl-month.month-werken::before,
.tl-month.month-werken::after { background: rgba(58, 169, 200, 0.2); }

.brief-entry { display: inline-flex; gap: 8px; padding: 10px 14px; background: linear-gradient(135deg, #1a1410 0%, #0f0c08 100%); border: 1px solid #3a2a18; border-radius: 6px; cursor: pointer; transition: all 0.2s; margin: 6px 0; width: calc(100% - 30px); }
.brief-entry:hover { background: linear-gradient(135deg, #2a2015 0%, #1a1408 100%); border-color: #5a3a20; }
.brief-entry .brief-label { color: #d9a02a; font-weight: 500; font-size: 13px; flex: 0 0 auto; }
.brief-entry .brief-preview { color: #8a7a6a; font-size: 12px; flex: 1; }
/* Tab colors */
#tab-entries.active  { color: #5acd7a; border-bottom-color: #3aaa5a; }
#tab-contexts.active { color: #9b88d4; border-bottom-color: #7a6acc; }
#tab-brieven.active  { color: #edbf52; border-bottom-color: #d9a02a; }
#tab-reflecties.active { color: #d9aaff; border-bottom-color: #c09ade; }
#tab-reviews.active   { color: #f5ad43; border-bottom-color: #cc7a2a; }
#tab-herinnering.active { color: #7a9ade; border-bottom-color: #4a7aaa; }
#tab-search.active   { color: #999999; border-bottom-color: #666666; }
/* Flame mode */

/* ENTRY MODAL */
#entry-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 1000; align-items: center; justify-content: center; padding: 40px; }
#entry-modal.visible { display: flex; }
#entry-box { background: #161616; border: 1px solid #2a2a2a; border-radius: 14px; max-width: 680px; width: 100%; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; }
#entry-modal-header { padding: 14px 18px; border-bottom: 1px solid #1e1e1e; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
#entry-modal-date { font-size: 14px; font-weight: 500; color: #4a7a6a; }
#entry-modal-close { background: transparent; border: 1px solid #2a2a2a; color: #555; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }

.werk-entry-modal { padding: 18px 0; display: flex; flex-direction: column; gap: 16px; }
.werk-entry-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.werk-entry-title { font-size: 15px; font-weight: 700; color: #e8e8e8; }
.werk-entry-meta { font-size: 12px; color: #9ac5d9; background: rgba(58, 169, 200, 0.12); padding: 6px 10px; border-radius: 10px; align-self: flex-start; }
.werk-entry-body { background: rgba(255,255,255,0.03); border: 1px solid rgba(74, 122, 145, 0.18); border-radius: 12px; padding: 14px; color: #d0d8e0; line-height: 1.6; }
.werk-entry-body p { margin: 0; }
.werk-entry-download { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 10px; background: #2c6f8b; color: #fff; text-decoration: none; font-weight: 600; transition: background 0.2s ease; }
.werk-entry-download:hover { background: #3a93b5; }
#entry-modal-close:hover { border-color: #444; color: #aaa; }
#entry-modal-body { padding: 18px; overflow-y: auto; font-size: 14px; line-height: 1.8; color: #c8c8c8; white-space: pre-wrap; }
#entry-modal-body::-webkit-scrollbar { width: 4px; } #entry-modal-body::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 4px; }
#entry-modal-ask { padding: 12px 18px; border-top: 1px solid #1e1e1e; flex-shrink: 0; }
#entry-ask-btn { width: 100%; background: #1a3a5c; border: none; border-radius: 8px; color: #7ab8e8; font-size: 13px; padding: 8px; cursor: pointer; }
#entry-ask-btn:hover { background: #1f4a74; }

/* ENTRY MODAL SEARCH */
#entry-modal-search-wrap { padding: 12px 18px; border-bottom: 1px solid #1e1e1e; flex-shrink: 0; display: flex; gap: 10px; align-items: center; }
#entry-modal-search { flex: 1; background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 8px; padding: 8px 12px; color: #d8d8d8; font-size: 13px; font-family: inherit; outline: none; }
#entry-modal-search:focus { border-color: #3a5a5a; }
#entry-modal-search::placeholder { color: #3a3a3a; }
#entry-modal-search-clear { background: transparent; border: 1px solid #2a2a2a; color: #555; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; transition: color 0.15s, border-color 0.15s; }
#entry-modal-search-clear:hover { border-color: #444; color: #aaa; }
#entry-modal-search-clear:disabled { opacity: 0.3; cursor: not-allowed; }
.highlight { background: #4ade80; color: #000; padding: 2px 4px; border-radius: 3px; font-weight: 500; }

/* NEW ENTRY MODAL */
#new-entry-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 300; align-items: center; justify-content: center; padding: 40px; }
#new-entry-modal.visible { display: flex; }
#entry-form-box { background: #161616; border: 1px solid #2a2a2a; border-radius: 14px; max-width: 600px; width: 100%; display: flex; flex-direction: column; overflow: hidden; max-height: 85vh; }
#entry-form-header { padding: 14px 18px; border-bottom: 1px solid #1e1e1e; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
#entry-form-title { font-size: 14px; font-weight: 500; color: #e8e8e8; }
#entry-form-close { background: transparent; border: 1px solid #2a2a2a; color: #555; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
#entry-form-close:hover { border-color: #444; color: #aaa; }
#entry-form-content { padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; flex: 1; }
#entry-form-content::-webkit-scrollbar { width: 4px; }
#entry-form-content::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 4px; }
.entry-form-group { display: flex; flex-direction: column; gap: 6px; }
.entry-form-group label { font-size: 12px; color: #888; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.entry-form-group input, .entry-form-group textarea, .entry-form-group select { 
    background: #1a1a1a; 
    border: 1px solid #2a2a2a; 
    border-radius: 8px; 
    color: #d8d8d8; 
    font-size: 13px; 
    font-family: inherit; 
    padding: 8px 12px; 
    outline: none; 
}
.entry-form-group input:focus, .entry-form-group textarea:focus, .entry-form-group select:focus { 
    border-color: #2a5a8a; 
}
.entry-form-group textarea { 
    resize: vertical; 
    min-height: 200px; 
    line-height: 1.5;
}
.entry-form-buttons { padding: 0 18px 18px; display: flex; gap: 12px; flex-shrink: 0; }
.entry-form-btn { flex: 1; padding: 10px; border-radius: 8px; border: none; font-size: 13px; cursor: pointer; transition: all 0.2s; }
#entry-form-save { background: #1a3a5c; color: #7ab8e8; }
#entry-form-save:hover { background: #1f4a74; }
#entry-form-cancel { background: #2a2a2a; color: #888; border: 1px solid #404040; }
#entry-form-cancel:hover { background: #333; color: #aaa; }

/* TYPE SELECTION MENU */
.entry-type-menu { display: flex; flex-direction: column; gap: 10px; padding: 18px; width: 100%; }
.entry-type-btn { padding: 14px 16px; border-radius: 10px; border: 1px solid #2a2a2a; background: #1c1c1c; color: #d8d8d8; font-size: 14px; text-align: left; cursor: pointer; transition: all 0.2s; }
.entry-type-btn:hover { background: #252525; border-color: #3a3a3a; }
.entry-type-btn-label { font-weight: 500; }
.entry-type-btn-desc { font-size: 11px; color: #666; margin-top: 4px; }

/* SUCCESS MESSAGE */
#entry-saved-message { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 301; align-items: center; justify-content: center; padding: 40px; }
#entry-saved-message.visible { display: flex; }
#entry-saved-box { background: #161616; border: 1px solid #2a2a2a; border-radius: 14px; max-width: 400px; width: 100%; padding: 40px; text-align: center; display: flex; flex-direction: column; gap: 20px; }
#entry-saved-icon { font-size: 48px; }
#entry-saved-title { font-size: 18px; font-weight: 600; color: #e8e8e8; }
#entry-saved-text { font-size: 13px; color: #aaa; line-height: 1.6; }
#entry-saved-btn { background: #1a3a5c; border: none; border-radius: 8px; color: #7ab8e8; font-size: 13px; padding: 10px 20px; cursor: pointer; }
#entry-saved-btn:hover { background: #1f4a74; }
#entry-saved-actions { display: flex; gap: 12px; }
#entry-saved-actions { justify-content: center; align-items: center; }
#entry-saved-restart-btn { background: #17324e; border: 1px solid #2a5a8a; border-radius: 8px; color: #8fc8ff; font-size: 13px; padding: 10px 20px; cursor: pointer; }
#entry-saved-restart-btn:hover { background: #1d4468; }

/* RANDOM ENTRY MODAL */
#random-entry-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 300; align-items: center; justify-content: center; padding: 40px; }
#random-entry-modal.visible { display: flex; }
#random-entry-box { background: #161616; border: 1px solid #2a2a2a; border-radius: 14px; max-width: 500px; width: 100%; display: flex; flex-direction: column; overflow: hidden; }
#random-entry-header { padding: 14px 18px; border-bottom: 1px solid #1e1e1e; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
#random-entry-title { font-size: 14px; font-weight: 500; color: #e8e8e8; }
#random-entry-close { background: transparent; border: 1px solid #2a2a2a; color: #555; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
#random-entry-close:hover { border-color: #444; color: #aaa; }
#random-entry-content { padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }
.random-entry-section h3 { font-size: 12px; color: #888; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
.random-entry-options { display: flex; flex-direction: column; gap: 8px; }
.random-entry-option { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #d8d8d8; cursor: pointer; }
.random-entry-option input { cursor: pointer; accent-color: #4abaaa; }
.random-entry-option input:checked + span { color: #4abaaa; font-weight: 500; }
.random-entry-option input:disabled { cursor: not-allowed; accent-color: #555; }
.random-entry-option input:disabled + span { color: #555; cursor: not-allowed; }
.random-entry-option.disabled { opacity: 0.5; cursor: not-allowed; user-select: none; position: relative; }
.random-entry-option.disabled span::after { content: " (geen entries)"; font-size: 11px; color: #666; }
#random-entry-buttons { padding: 12px 18px; border-top: 1px solid #1e1e1e; display: flex; gap: 10px; flex-shrink: 0; }
.random-entry-btn { flex: 1; padding: 10px; border-radius: 8px; border: none; font-size: 13px; cursor: pointer; transition: all 0.2s; }
#random-entry-select { background: #1a3a5c; color: #7ab8e8; }
#random-entry-select:hover:not(:disabled) { background: #1f4a74; }
#random-entry-select:disabled { background: #1a1a1a; color: #555; cursor: not-allowed; opacity: 0.5; }
#random-entry-cancel { background: #2a2a2a; color: #888; border: 1px solid #404040; }
#random-entry-cancel:hover { background: #333; color: #aaa; }

/* NO ENTRIES FOUND MODAL */
#no-entries-found-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 300; align-items: center; justify-content: center; padding: 40px; }
#no-entries-found-modal.visible { display: flex; }
#no-entries-found-box { background: #161616; border: 1px solid #2a2a2a; border-radius: 14px; max-width: 460px; width: 100%; display: flex; flex-direction: column; overflow: hidden; }
#no-entries-found-header { padding: 14px 18px; border-bottom: 1px solid #1e1e1e; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
#no-entries-found-title { font-size: 14px; font-weight: 500; color: #e8e8e8; }
#no-entries-found-close { background: transparent; border: 1px solid #2a2a2a; color: #555; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
#no-entries-found-close:hover { border-color: #444; color: #aaa; }
#no-entries-found-content { padding: 28px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
#no-entries-found-icon { font-size: 44px; opacity: 0.6; }
#no-entries-found-message { font-size: 13px; color: #aaa; line-height: 1.7; white-space: pre-wrap; }
#no-entries-found-buttons { padding: 12px 18px; border-top: 1px solid #1e1e1e; flex-shrink: 0; }
.no-entries-found-btn { width: 100%; background: #1a3a5c; border: none; border-radius: 8px; color: #7ab8e8; font-size: 13px; padding: 10px; cursor: pointer; transition: all 0.2s; }
.no-entries-found-btn:hover { background: #1f4a74; }

/* VALIDATION ERROR MODAL */
#validation-error-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 300; align-items: center; justify-content: center; padding: 40px; }
#validation-error-modal.visible { display: flex; }
#validation-error-box { background: #161616; border: 1px solid #2a2a2a; border-radius: 14px; max-width: 460px; width: 100%; display: flex; flex-direction: column; overflow: hidden; }
#validation-error-header { padding: 14px 18px; border-bottom: 1px solid #1e1e1e; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
#validation-error-title { font-size: 14px; font-weight: 500; color: #e8e8e8; }
#validation-error-close { background: transparent; border: 1px solid #2a2a2a; color: #555; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
#validation-error-close:hover { border-color: #444; color: #aaa; }
#validation-error-content { padding: 28px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
#validation-error-icon { font-size: 44px; opacity: 0.7; }
#validation-error-message { font-size: 13px; color: #aaa; line-height: 1.6; }
#validation-error-buttons { padding: 12px 18px; border-top: 1px solid #1e1e1e; flex-shrink: 0; }
.validation-error-btn { width: 100%; background: #1a3a5c; border: none; border-radius: 8px; color: #7ab8e8; font-size: 13px; padding: 10px; cursor: pointer; transition: all 0.2s; }
.validation-error-btn:hover { background: #1f4a74; }

/* SAVE ERROR MODAL */
#save-error-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 300; align-items: center; justify-content: center; padding: 40px; }
#save-error-modal.visible { display: flex; }
#save-error-box { background: #161616; border: 1px solid #2a2a2a; border-radius: 14px; max-width: 460px; width: 100%; display: flex; flex-direction: column; overflow: hidden; }
#save-error-header { padding: 14px 18px; border-bottom: 1px solid #1e1e1e; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
#save-error-title { font-size: 14px; font-weight: 500; color: #e8e8e8; }
#save-error-close { background: transparent; border: 1px solid #2a2a2a; color: #555; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
#save-error-close:hover { border-color: #444; color: #aaa; }
#save-error-content { padding: 28px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
#save-error-icon { font-size: 44px; opacity: 0.7; }
#save-error-message { font-size: 13px; color: #aaa; line-height: 1.6; }
#save-error-buttons { padding: 12px 18px; border-top: 1px solid #1e1e1e; flex-shrink: 0; }
.save-error-btn { width: 100%; background: #1a3a5c; border: none; border-radius: 8px; color: #7ab8e8; font-size: 13px; padding: 10px; cursor: pointer; transition: all 0.2s; }
.save-error-btn:hover { background: #1f4a74; }

#delete-entry-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.78); z-index: 9999; align-items: center; justify-content: center; padding: 40px; flex-direction: column; }
#delete-entry-modal.visible { display: flex; }
#delete-entry-box { background: #161616; border: 1px solid #402020; border-radius: 16px; max-width: 500px; width: 100%; overflow: hidden; box-shadow: 0 16px 44px rgba(0,0,0,0.45); }
#delete-entry-header { padding: 16px 20px; border-bottom: 1px solid #241414; display: flex; align-items: center; justify-content: space-between; }
#delete-entry-title { font-size: 15px; font-weight: 600; color: #ffb0b0; }
#delete-entry-close { background: transparent; border: 1px solid #342020; color: #766; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; }
#delete-entry-close:hover { border-color: #6a3838; color: #d0a0a0; }
#delete-entry-content { padding: 28px 22px 20px; display: flex; flex-direction: column; gap: 16px; text-align: center; }
#delete-entry-icon { font-size: 42px; opacity: 0.85; }
#delete-entry-message { font-size: 14px; color: #d6d6d6; line-height: 1.7; }
#delete-entry-label { font-size: 13px; color: #ffb0b0; background: rgba(120, 30, 30, 0.18); border: 1px solid rgba(190, 60, 60, 0.2); border-radius: 10px; padding: 10px 12px; word-break: break-word; }
#delete-entry-buttons { padding: 14px 20px 20px; display: flex; gap: 12px; }
#delete-entry-cancel { flex: 1; background: #242424; border: 1px solid #404040; border-radius: 10px; color: #aaa; padding: 10px; cursor: pointer; }
#delete-entry-cancel:hover { background: #2d2d2d; color: #ddd; }
#delete-entry-confirm { flex: 1; background: linear-gradient(135deg, #5a1c1c 0%, #6a2222 100%); border: 1px solid #8a3434; border-radius: 10px; color: #ffd5d5; padding: 10px; cursor: pointer; font-weight: 600; }
#delete-entry-confirm:hover { background: linear-gradient(135deg, #6a2222 0%, #822828 100%); }


/* CONFIG MODAL */
#config-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#config-modal.visible {
    opacity: 1;
    pointer-events: auto;
}

#config-modal > div {
    background: linear-gradient(135deg, #1a1a1a 0%, #202020 100%);
    border: 1px solid #3a4a4a;
    border-radius: 12px;
    padding: 0;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    max-height: 90vh;
    overflow-y: auto;
}

#config-modal input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #2a3a3a;
    border-radius: 6px;
    background: #0f1414;
    color: #d8d8d8;
    font-size: 13px;
    font-family: inherit;
}

#config-modal select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #2a3a3a;
    border-radius: 6px;
    background: #0f1414;
    color: #d8d8d8;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

#config-modal select option {
    background: #0f1414;
    color: #d8d8d8;
}

#config-modal select:focus {
    outline: none;
    border-color: #4abaaa;
    background: #141a1a;
    box-shadow: 0 0 0 3px rgba(74, 186, 170, 0.1);
}

/* ENTRY UNLOCK MODAL */
#entry-unlock-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#entry-unlock-modal.visible {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

#update-logs-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#update-logs-modal.visible {
    opacity: 1;
    pointer-events: auto;
}

#update-logs-modal > div {
    background: linear-gradient(135deg, #1a1a1a 0%, #202020 100%);
    border: 1px solid #3a4a4a;
    border-radius: 12px;
    padding: 0;
    width: min(620px, 92vw);
    max-height: 82vh;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#update-logs-modal .modal-header {
    padding: 20px 22px;
    border-bottom: 1px solid #2a3a2a;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#update-logs-modal .modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #4abaaa;
}

#update-logs-modal .modal-status {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

#update-logs-modal .modal-time {
    font-size: 13px;
    color: #b4d4c3;
    margin-top: 4px;
}

#update-logs-modal .modal-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
}

#update-logs-modal .modal-body {
    padding: 0 20px 16px;
    overflow: hidden;
    flex: none;
    color: #d8d8d8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.75;
    white-space: pre-wrap;
    word-break: break-word;
    background: transparent;
}

#update-logs-modal .modal-content {
    min-height: 0;
    max-height: calc(82vh - 132px);
    padding: 12px 18px 16px;
    background: linear-gradient(135deg, #131912 0%, #101410 100%);
    border: 1px solid rgba(74, 186, 170, 0.15);
    border-radius: 16px;
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.03);
    overflow: auto;
}

#update-logs-modal .modal-content::-webkit-scrollbar {
    width: 8px;
}

#update-logs-modal .modal-content::-webkit-scrollbar-thumb {
    background: rgba(74, 186, 170, 0.25);
    border-radius: 999px;
}

#update-logs-modal .modal-content::selection {
    background: rgba(74, 186, 170, 0.25);
}

#update-logs-modal .modal-content strong,
#update-logs-modal .modal-content b {
    color: #ffffff;
}

#update-logs-modal .modal-content em,
#update-logs-modal .modal-content i {
    color: #a8ffda;
}

#update-logs-modal .modal-content p,
#update-logs-modal .modal-content .update-log-line {
    margin: 0 0 8px;
}

#update-logs-modal .modal-content .update-log-version {
    margin-bottom: 14px;
    font-size: 16px;
    letter-spacing: 0.03em;
}

#update-logs-modal .modal-content .update-log-tag {
    margin: 0 0 10px;
    color: #7df3a6;
    font-size: 13px;
    font-weight: 600;
}

#update-logs-modal .modal-content .update-log-list {
    margin: 0 0 14px 18px;
    color: #d8e6d6;
    line-height: 1.7;
}

#update-logs-modal .modal-content .update-log-list li {
    margin-bottom: 8px;
}

#update-logs-modal .modal-content .update-log-separator {
    height: 10px;
}

#update-logs-modal .modal-content h1,
#update-logs-modal .modal-content h2,
#update-logs-modal .modal-content h3,
#update-logs-modal .modal-content .update-log-version {
    margin: 0 0 16px;
    color: #8ef29d;
    font-weight: 700;
}

#update-logs-modal .modal-content .update-log-tag {
    margin: 0 0 12px;
    color: #7df3a6;
    font-weight: 600;
}

#update-logs-modal .modal-content .update-log-list {
    margin: 0 0 18px 18px;
    color: #d8e6d6;
}

#update-logs-modal .modal-content .update-log-list li {
    margin-bottom: 10px;
}

#update-logs-modal .modal-footer {
    padding: 16px 22px;
    border-top: 1px solid #2a3a2a;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#update-logs-modal .modal-btn {
    flex: 1;
    min-width: 120px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid #6ad270;
    background: linear-gradient(135deg, #0d0d0d 0%, #131313 100%);
    color: #c7f7d5;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 12px 34px rgba(106, 210, 112, 0.36), inset 0 0 42px rgba(106, 210, 112, 0.24);
}

#update-logs-modal .modal-btn:hover {
    background: linear-gradient(135deg, #131313 0%, #1c1c1c 100%);
    border-color: #8ef29d;
    box-shadow: 0 26px 72px rgba(106, 210, 112, 0.44), inset 0 0 72px rgba(106, 210, 112, 0.28);
    transform: translateY(-4px);
    color: #ffffff;
}

#reset-confirm-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#reset-confirm-modal.visible {
    opacity: 1;
    pointer-events: auto;
}

#reset-confirm-modal input {
    border: 1px solid #2a3a3a;
    background: #0f1414;
    color: #d8d8d8;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    transition: border-color 0.2s ease;
}

#reset-confirm-modal input:focus {
    outline: none;
    border-color: #4abaaa;
    box-shadow: 0 0 0 2px rgba(74, 186, 170, 0.2);
}

#reset-confirm-modal button {
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
}

#reset-confirm-modal button:hover {
    transform: translateY(-1px);
}

#config-modal input:focus {
    outline: none;
    border-color: #4abaaa;
    background: #141a1a;
    box-shadow: 0 0 0 3px rgba(74, 186, 170, 0.1);
}

#config-modal button {
    transition: all 0.2s ease;
}

#config-modal button:hover {
    transform: translateY(-1px);
}

/* CUSTOM CHECKBOX TOGGLE STYLING */
#config-preview-enabled {
    transition: background 0.3s ease, border-color 0.3s ease !important;
    appearance: none !important;
}

#config-preview-enabled:checked {
    background: #3ab86f !important;
    border-color: #2a8b5f !important;
}

#config-preview-toggle-dot {
    transition: left 0.3s ease !important;
}

#config-preview-enabled:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(76, 76, 76, 0.3) !important;
}


/* NOTIFICATION TOAST */
#notification-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(135deg, rgba(74, 186, 170, 0.95), rgba(50, 140, 130, 0.95));
    color: #ffffff;
    padding: 14px 20px;
    border-radius: 6px;
    border-left: 4px solid #4abaaa;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    font-size: 13px;
    font-weight: 500;
    z-index: 10000;
    max-width: 300px;
}

#notification-toast.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#notification-toast.error {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.95), rgba(200, 50, 50, 0.95));
    border-left-color: #ff6b6b;
}

/* NOTIFICATION TOAST */
#notification-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(135deg, rgba(74, 186, 170, 0.95), rgba(50, 140, 130, 0.95));
    color: #ffffff;
    padding: 14px 20px;
    border-radius: 6px;
    border-left: 4px solid #4abaaa;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    font-size: 13px;
    font-weight: 500;
    z-index: 10000;
    max-width: 300px;
}

#notification-toast.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#notification-toast.error {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.95), rgba(200, 50, 50, 0.95));
    border-left-color: #ff6b6b;
}

#notification-toast.success {
    background: linear-gradient(135deg, rgba(122, 217, 109, 0.95), rgba(80, 180, 70, 0.95));
    border-left-color: #7ad96d;
}


/* CTX WARNING TOAST */
/* START MENU */
#start-menu { display: none; position: fixed; inset: 0; background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #0e1618 100%); z-index: 150; flex-direction: column; align-items: center; justify-content: center; gap: 0; overflow: hidden; }
#start-menu::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 50%, rgba(74, 222, 128, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 50%); pointer-events: none; }
#start-menu.visible { display: flex; }
#start-menu-container { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 40px; position: relative; z-index: 1; padding: 40px 20px; }
#start-menu-header { margin-bottom: 10px; }
#start-menu-title { font-size: 48px; font-weight: 700; color: #ffffff; letter-spacing: 0.02em; margin-bottom: 12px; text-shadow: 0 4px 12px rgba(0,0,0,0.5); }
#start-menu-subtitle { font-size: 14px; color: #a0a0a0; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; }
#start-menu-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; justify-content: center; max-width: 860px; width: 100%; }
#start-menu-todo { border-color: #5a2a2a; background: linear-gradient(135deg, #1a0a0a 0%, #2a0f0f 100%); box-shadow: 0 8px 24px rgba(239, 68, 68, 0.12), inset 0 0 35px rgba(239, 68, 68, 0.35); }
#start-menu-todo:hover { border-color: #ef4444; background: linear-gradient(135deg, #2a0a0a 0%, #3a0f0f 100%); box-shadow: 0 16px 40px rgba(239, 68, 68, 0.25), inset 0 0 50px rgba(239, 68, 68, 0.45); }
#start-menu-todo .start-menu-btn-label { color: #ffffff; }
#start-menu-todo .start-menu-btn-desc { color: #909090; }
#start-menu-update-logs { border-color: #6ad270; background: linear-gradient(135deg, #0d0d0d 0%, #131313 100%); box-shadow: 0 12px 34px rgba(106, 210, 112, 0.28), inset 0 0 42px rgba(106, 210, 112, 0.18); }
#start-menu-update-logs:hover { border-color: #8ef29d; background: linear-gradient(135deg, #131313 0%, #1c1c1c 100%); box-shadow: 0 22px 56px rgba(106, 210, 112, 0.34), inset 0 0 58px rgba(106, 210, 112, 0.22); transform: translateY(-4px); }
#start-menu-update-logs .start-menu-btn-label { color: #ffffff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
#start-menu-update-logs .start-menu-btn-desc { color: #bde8b3; }
#start-menu-boeken { border-color: #3a5a8a; background: linear-gradient(135deg, #111b2b 0%, #1a2943 100%); box-shadow: 0 8px 24px rgba(58, 90, 138, 0.12), inset 0 0 35px rgba(58, 90, 138, 0.25); }
#start-menu-boeken:hover { border-color: #7da6f0; background: linear-gradient(135deg, #13203f 0%, #1f3b61 100%); }
.start-menu-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px 20px; border-radius: 18px; border: 2px solid #333333; background: linear-gradient(135deg, #151515 0%, #1a1a1a 100%); cursor: pointer; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); width: 100%; box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05); }
.start-menu-btn:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08); border-color: #505050; background: linear-gradient(135deg, #1a1a1a 0%, #202020 100%); }
.start-menu-btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; transform: none !important; }
.start-menu-btn-icon { font-size: 40px; display: block; }
.start-menu-btn-label { font-size: 17px; font-weight: 600; color: #ffffff; }
.start-menu-btn-desc { font-size: 13px; color: #909090; font-weight: 400; }
.start-menu-btn:disabled .start-menu-btn-label { color: #666; }
.start-menu-btn:disabled .start-menu-btn-desc { color: #555; }

/* NO FILES MESSAGE */
#start-menu-warning { 
    display: none;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    max-width: 700px;
    padding: 28px 32px;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.08) 0%, rgba(255, 107, 53, 0.04) 100%);
    border: 1px solid rgba(255, 107, 53, 0.3);
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.05);
}
#start-menu-warning.visible { display: flex; }
.warning-icon { 
    font-size: 36px; 
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
}
.warning-content { text-align: left; flex: 1; }
.warning-title { font-size: 16px; font-weight: 600; color: #ff9a6b; margin-bottom: 6px; }
.warning-text { font-size: 13px; color: #d9a086; line-height: 1.5; }

/* No-JS and JS load fallback */
.no-js-fallback {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(10, 10, 10, 0.95);
    color: #f0f6ff;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.no-js-fallback.visible,
html.no-js .no-js-fallback {
    display: flex;
}

.no-js-fallback-card {
    max-width: 720px;
    width: 100%;
    border: 1px solid rgba(122, 210, 255, 0.18);
    background: rgba(18, 24, 38, 0.98);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.no-js-fallback-card .warning-icon {
    font-size: 44px;
    min-width: 54px;
    color: #7ad9ff;
}

.no-js-fallback-card .warning-content {
    flex: 1;
}

.no-js-fallback-card .warning-title {
    font-size: 22px;
    margin-bottom: 12px;
    color: #9ad2ff;
}

.no-js-fallback-card .warning-text {
    font-size: 15px;
    color: #d9e7ff;
    margin-bottom: 12px;
}

.no-js-fallback-card .warning-actions button {
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid #3c8fcf;
    background: rgba(64, 142, 255, 0.12);
    color: #cde7ff;
    cursor: pointer;
    font-size: 14px;
}

.no-js-fallback-card .warning-actions button:hover {
    background: rgba(64, 142, 255, 0.2);
}

/* STOP BUTTON SECTION */
#start-menu-stop-section {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    width: 100%;
}
#start-menu-stop-section.visible { display: flex; }
.start-menu-btn-stop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 56px;
    border-radius: 14px;
    border: 2px solid rgba(200, 74, 58, 0.4);
    background: linear-gradient(135deg, rgba(42, 16, 16, 0.8) 0%, rgba(26, 10, 10, 0.9) 100%);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-width: 220px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.start-menu-btn-stop:hover {
    border-color: #e0604a;
    background: linear-gradient(135deg, rgba(58, 26, 26, 0.9) 0%, rgba(42, 16, 16, 1) 100%);
    box-shadow: 0 8px 24px rgba(224, 96, 74, 0.25);
    transform: translateY(-2px);
}
#start-menu-ai { border-color: #2a5a5a; box-shadow: 0 8px 24px rgba(74, 222, 128, 0.12), inset 0 0 35px rgba(74, 222, 128, 0.35); }
#start-menu-ai:hover { border-color: #4ade80; background: linear-gradient(135deg, #0a2a2a 0%, #0f3a3a 100%); box-shadow: 0 16px 40px rgba(74, 222, 128, 0.25), inset 0 0 50px rgba(74, 222, 128, 0.45); }
#start-menu-config { border-color: #3a3a3a; box-shadow: 0 8px 24px rgba(156, 163, 175, 0.12), inset 0 0 35px rgba(156, 163, 175, 0.35); }
#start-menu-config:hover { border-color: #9ca3af; background: linear-gradient(135deg, #1a1a1a 0%, #242424 100%); box-shadow: 0 16px 40px rgba(156, 163, 175, 0.25), inset 0 0 50px rgba(156, 163, 175, 0.45); }
#start-menu-archief { border-color: #5a4a2a; box-shadow: 0 8px 24px rgba(245, 158, 11, 0.12), inset 0 0 35px rgba(245, 158, 11, 0.35); }
#start-menu-archief:hover { border-color: #f59e0b; background: linear-gradient(135deg, #2a1a0a 0%, #3a2a0f 100%); box-shadow: 0 16px 40px rgba(245, 158, 11, 0.25), inset 0 0 50px rgba(245, 158, 11, 0.45); }
#start-menu-tijdlijn { border-color: #2a4a5a; box-shadow: 0 8px 24px rgba(74, 186, 170, 0.12), inset 0 0 35px rgba(74, 186, 170, 0.35); }
#start-menu-tijdlijn:hover { border-color: #4abaaa; background: linear-gradient(135deg, #0a2a2a 0%, #0f3545 100%); box-shadow: 0 16px 40px rgba(74, 186, 170, 0.25), inset 0 0 50px rgba(74, 186, 170, 0.45); }
#start-menu-personen { border-color: #5a2a4a; box-shadow: 0 8px 24px rgba(232, 160, 208, 0.12), inset 0 0 35px rgba(232, 160, 208, 0.35); }
#start-menu-personen:hover { border-color: #e8a0d0; background: linear-gradient(135deg, #2a1022 0%, #3a1632 100%); box-shadow: 0 16px 40px rgba(232, 160, 208, 0.25), inset 0 0 50px rgba(232, 160, 208, 0.45); }
#start-menu-write { border-color: #2a4a3a; box-shadow: 0 8px 24px rgba(74, 222, 128, 0.12), inset 0 0 35px rgba(74, 222, 128, 0.35); }
#start-menu-write:hover { border-color: #4ade80; background: linear-gradient(135deg, #0a2a1a 0%, #0f3a22 100%); box-shadow: 0 16px 40px rgba(74, 222, 128, 0.25), inset 0 0 50px rgba(74, 222, 128, 0.45); }
#start-menu-info { border-color: #2a3a5a; box-shadow: 0 8px 24px rgba(59, 130, 246, 0.12), inset 0 0 35px rgba(59, 130, 246, 0.35); }
#start-menu-info:hover { border-color: #3b82f6; background: linear-gradient(135deg, #0a1a3a 0%, #0f2a4a 100%); box-shadow: 0 16px 40px rgba(59, 130, 246, 0.25), inset 0 0 50px rgba(59, 130, 246, 0.45); }
#start-menu-levensdoelen { border-color: #6a3a6a; box-shadow: 0 8px 24px rgba(232, 102, 232, 0.12), inset 0 0 35px rgba(232, 102, 232, 0.35); }
#start-menu-levensdoelen:hover { border-color: #e866e8; background: linear-gradient(135deg, #2a0f2a 0%, #3a1a3a 100%); box-shadow: 0 16px 40px rgba(232, 102, 232, 0.25), inset 0 0 50px rgba(232, 102, 232, 0.45); }

/* INFO MODAL */
#info-modal { display: none; position: fixed; inset: 0; background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #0e1618 100%); z-index: 150; align-items: center; justify-content: center; padding: 20px; }
#info-modal.visible { display: flex; }
#info-container { background: linear-gradient(135deg, #151515 0%, #1a1a1a 100%); border: 1px solid #333333; border-radius: 18px; max-width: 700px; width: 100%; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05); }
#info-header { padding: 28px; border-bottom: 1px solid #242424; flex-shrink: 0; }
#info-title { font-size: 28px; font-weight: 700; color: #ffffff; letter-spacing: 0.02em; }
#info-content { flex: 1; overflow-y: auto; padding: 28px; font-size: 14px; line-height: 1.7; color: #d8d8d8; }
#info-content h2 { font-size: 18px; font-weight: 600; color: #4abaaa; margin-top: 24px; margin-bottom: 12px; }
#info-content h2:first-child { margin-top: 0; }
#info-content p { margin-bottom: 12px; }
#info-content ul { margin-left: 24px; margin-bottom: 12px; }
#info-content li { margin-bottom: 8px; }
#info-content strong { color: #ffffff; }
#info-content::-webkit-scrollbar { width: 4px; }
#info-content::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 4px; }
#info-footer { padding: 20px 28px; border-top: 1px solid #242424; flex-shrink: 0; display: flex; justify-content: center; }
#info-back-btn { background: linear-gradient(135deg, #0a2a3a 0%, #0f3a4a 100%); border: 1px solid #2a5a6a; color: #4abaaa; padding: 12px 28px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; }
#info-back-btn:hover { background: linear-gradient(135deg, #0f3a4a 0%, #143a5a 100%); border-color: #4abaaa; box-shadow: 0 4px 16px rgba(74, 186, 170, 0.2); }

#archief-fullscreen {
    background: radial-gradient(circle at top, #161616 0%, #0f0f0f 100%);
}

#tl-list-fullscreen {
    padding: 20px 40px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.tl-entry-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    padding: 16px;
    transition: transform 0.2s, border-color 0.2s;
    cursor: pointer;
}

.tl-entry-card:hover {
    transform: translateY(-2px);
    border-color: #3aaa6a;
    background: #1f1f1f;
}

/* Context specifieke kleuren */
.entry-type-context .tl-date-day {
    color: #7a6acc; /* Blauw accent voor context */
}

#tl-list .tl-entry.entry-type-context:hover, 
#tl-list-fullscreen .tl-entry.entry-type-context:hover {
    border-color: rgba(122, 106, 204, 0.4);
}

/* Zorg dat de icon/label box in context-items ook 95px breed is */

/* Context specifieke kleuren */
.entry-type-context .tl-date-day {
    color: #7a6acc !important; /* Blauw voor context */
}

.entry-type-context .tl-date-num {
    color: #5a9ade !important;
    font-size: 15px !important; /* CTX is langer dan een getal, dus iets kleiner font */
}

/* Hover effect voor context */
.tl-entry.entry-type-context:hover {
    border-color: rgba(122, 106, 204, 0.4) !important;
}

/* Zorg dat context-items blauw zijn ipv groen */
.entry-type-context .tl-date-num {
    color: #7a6acc !important;
}
.entry-type-context .tl-date-day {
    color: #5a9ade !important;
}
.entry-type-context:hover {
    border-color: rgba(122, 106, 204, 0.4) !important;
}

/* ENTRY MODAL EDIT MODE */
#entry-edit-btn { background: transparent; border: 1px solid #2a3a4a; color: #4a7a9a; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0; }
#entry-edit-btn:hover { border-color: #4a7a9a; color: #7ab8e8; background: #0e1a28; }
#entry-edit-btn.active { border-color: #5a9a4a; color: #7acc6a; background: #0e1a10; }
#entry-copy-btn { background: transparent; border: 1px solid #2a4a2a; color: #4a9a4a; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0; }
#entry-copy-btn:hover { border-color: #4a9a4a; color: #7acc7a; background: #0e1a0e; }
#entry-delete-btn { background: transparent; border: 1px solid #4a2a2a; color: #c84a3a; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0; }
#entry-delete-btn:hover { border-color: #c84a3a; color: #ff6a5a; background: #2a1010; }
#entry-modal-body.editing { display: none; }
#entry-modal-edit-area { display: none; flex: 1; overflow: hidden; padding: 18px; }
#entry-modal-edit-area.visible { display: flex; flex-direction: column; gap: 10px; }
#entry-modal-textarea { flex: 1; background: #141414; border: 1px solid #2a3a2a; border-radius: 8px; color: #d8d8d8; font-size: 14px; font-family: inherit; padding: 12px 14px; resize: none; outline: none; line-height: 1.7; min-height: 200px; }
#entry-modal-textarea:focus { border-color: #3a7a4a; }
#entry-edit-actions { display: flex; gap: 10px; flex-shrink: 0; }
.entry-edit-save-btn { flex: 1; background: #1a4a2a; border: none; border-radius: 8px; color: #6acc6a; font-size: 13px; padding: 9px; cursor: pointer; transition: background 0.15s; }
.entry-edit-save-btn:hover { background: #1f5a30; }
.entry-edit-cancel-btn { flex: 1; background: #2a2a2a; border: none; border-radius: 8px; color: #888; font-size: 13px; padding: 9px; cursor: pointer; transition: background 0.15s; }
.entry-edit-cancel-btn:hover { background: #333; }
#entry-edit-saved { font-size: 11px; color: #4a9a4a; text-align: center; display: none; padding: 4px; }

/* START MENU: stop-knop naast info */
#start-menu-info-row { display: flex; gap: 16px; justify-content: center; align-items: center; grid-column: 1 / -1; }
#start-menu-info { grid-column: unset; width: auto; justify-self: unset; }
#start-menu-shutdown-btn:hover { border-color: #8a3a2a; background: linear-gradient(135deg, #2a0a0a 0%, #320c0c 100%); }
.start-menu-btn-stop-small { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px 32px; border-radius: 18px; border: 2px solid #4a1a1a; background: linear-gradient(135deg, #1a0808 0%, #220a0a 100%); cursor: pointer; transition: all 0.3s ease; min-width: 160px; }
.start-menu-btn-stop-small:hover { border-color: #cc3a2a; background: linear-gradient(135deg, #2a0a0a 0%, #320c0c 100%); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(200,50,30,0.2); }

/* K1 VINK + K2 STER */
.entry-meta-icons { display: inline-flex; gap: 2px; align-items: center; font-size: 11px; line-height: 1; }
.entry-star, .entry-hand { background: transparent; border: none; cursor: pointer; font-size: 13px; opacity: 0.3; transition: opacity 0.15s, transform 0.1s; padding: 0; line-height: 1; }
.entry-star:hover, .entry-hand:hover { opacity: 0.8; transform: scale(1.2); }
.entry-star.active { opacity: 1; }
.entry-hand.active { opacity: 1; }
/* In modal */
#entry-modal-meta { display: flex; gap: 10px; padding: 8px 18px; border-bottom: 1px solid #1e1e1e; align-items: center; flex-shrink: 0; }
.modal-meta-btn { background: transparent; border: 1px solid #2a2a2a; border-radius: 6px; padding: 3px 10px; font-size: 12px; cursor: pointer; color: #555; transition: all 0.15s; display: flex; align-items: center; gap: 5px; }
.modal-meta-btn:hover { border-color: #555; color: #aaa; }
.modal-meta-btn.active { border-color: currentColor; }
.modal-meta-btn.star-btn.active { color: #f5c518; border-color: #f5c518; background: rgba(245,197,24,0.08); }
.modal-meta-btn.hand-btn.active { color: #4abaaa; border-color: #4abaaa; background: rgba(74,186,170,0.08); }
.modal-meta-date { font-size: 10px; color: #444; margin-left: 4px; }
#modal-hand-date-editor { 
    display: none; 
    gap: 6px; 
    align-items: center;
    margin-left: 4px;
}
/* Zoekfilter */
.meta-filter-row { display: flex; gap: 8px; align-items: center; padding: 4px 0; }
.meta-filter-btn { background: transparent; border: 1px solid #2a2a2a; border-radius: 6px; padding: 3px 10px; font-size: 11px; cursor: pointer; color: #555; transition: all 0.15s; }
.meta-filter-btn:hover { border-color: #555; color: #aaa; }
.meta-filter-btn.active { border-color: #f5c518; color: #f5c518; background: rgba(245,197,24,0.08); }
.meta-filter-btn.hand-active { border-color: #666666; color: #999999; background: rgba(102,102,102,0.08); }

/* HEADER ENTRIES TOOLTIP */
#header-sub { position: relative; cursor: default; }
#entries-count-icon { cursor: default; }
#info-icon-hover-fullscreen { font-size: 20px; display: inline-flex; align-items: center; }
#tijdlijn-info-wrap { font-size: 20px; display: inline-flex; align-items: center; }
#archief-entries-count { cursor: default; }
#entries-tooltip {
    display: none;
    position: fixed;
    background: #181818;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 12px;
    color: #bbb;
    white-space: nowrap;
    z-index: 99999;
    box-shadow: 0 8px 28px rgba(0,0,0,0.8);
    line-height: 2.1;
    pointer-events: none;
}
#entries-tooltip.tt-visible { display: block; }

/* K13: Entry metadata styling removed - disabled toggle is no longer available */

#preview-toggle-btn {
    appearance: none;
    -webkit-appearance: none;

    background: transparent;
    color: #cfcfcf;

    border: 1px solid #2a2a2a;
    border-radius: 6px;

    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;

    cursor: pointer;

    transition: all 0.15s ease;
}

#tijdlijn-btn {
    border-color: #2a5a6a !important;
    color: #4abaaa !important;
    background: rgba(74, 186, 170, 0.08) !important;
}
#tijdlijn-btn:hover {
    border-color: #4abaaa !important;
    color: #6fd4c4 !important;
    background: rgba(74, 186, 170, 0.18) !important;
    box-shadow: 0 0 12px rgba(74, 186, 170, 0.25) !important;
}

/* ══════════════════════════════════════════
   TIJDLIJN FULLSCREEN
══════════════════════════════════════════ */
#tijdlijn-fullscreen {
    display: none;
    position: fixed;
    inset: 0;
    background: #0a0a0a;
    z-index: 145;
    flex-direction: column;
}
#tijdlijn-fullscreen.visible { display: flex; }

#tijdlijn-header {
    padding: 16px 28px;
    border-bottom: 1px solid #1e1e1e;
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #111 0%, #161616 100%);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    min-height: 72px;
}
#tijdlijn-header h1 { font-size: 18px; color: #fff; font-weight: 600; }

#tijdlijn-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    gap: 0;
}

#tijdlijn-main {
    flex: 1;
    overflow-y: auto;
    padding: 32px 0 60px;
}
#tijdlijn-main::-webkit-scrollbar { width: 4px; }
#tijdlijn-main::-webkit-scrollbar-thumb { background: #222; border-radius: 4px; }

/* Rechterzijbalk: items zonder datum */
#tijdlijn-sidebar {
    width: 240px;
    flex-shrink: 0;
    border-left: 1px solid #1a1a1a;
    background: #0c0c0c;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
#tijdlijn-sidebar::-webkit-scrollbar { width: 3px; }
#tijdlijn-sidebar::-webkit-scrollbar-thumb { background: #1a1a1a; border-radius: 3px; }
#tijdlijn-sidebar-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #2a3a3a;
    padding: 16px 14px 8px;
    border-bottom: 1px solid #161616;
    flex-shrink: 0;
}
#tijdlijn-sidebar-list {
    flex: 1;
    padding: 8px 0;
}

@media screen and (max-width: 800px) {
    #tijdlijn-header {
        flex-wrap: wrap;
        align-items: stretch;
        padding: 12px 14px;
        min-height: auto;
        gap: 10px;
    }

    #tijdlijn-header > div,
    #tijdlijn-header > span,
    #tijdlijn-header > button,
    #tijdlijn-header > .hdr-dropdown {
        flex: 1 1 auto;
        min-width: 0;
    }

    #tijdlijn-header h1 {
        font-size: 16px;
        flex: 1 1 100%;
        margin-bottom: 4px;
    }

    #tijdlijn-count,
    #tijdlijn-info-wrap,
    #tl-type-filter-wrap,
    #tijdlijn-sort,
    #tijdlijn-search,
    #tijdlijn-tabs-menu-btn,
    #tijdlijn-date-from,
    #tijdlijn-date-to {
        min-width: 0;
    }

    #tijdlijn-search {
        width: 110px !important;
        min-width: 90px;
        font-size: 12px;
        padding: 6px 8px;
    }

    #tijdlijn-date-from,
    #tijdlijn-date-to {
        width: 40px !important;
        padding: 8px 8px;
        font-size: 0;
        color: transparent;
        text-indent: 9999px;
        position: relative;
        background-repeat: no-repeat;
        background-position: center right 10px;
        background-size: 16px 16px;
        background-color: #1a1a1a;
        border-color: #2a2a2a;
        border-radius: 8px;
        cursor: pointer;
    }

    #tijdlijn-date-from {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23aaa' d='M7 2h2v2H7V2zm8 0h2v2h-2V2zM5 4h14a1 1 0 011 1v16a1 1 0 01-1 1H5a1 1 0 01-1-1V5a1 1 0 011-1zm0 2v14h14V6H5zm2 4h10v2H7v-2zm0 4h10v2H7v-2z'/%3E%3C/svg%3E");
    }
    #tijdlijn-date-to {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23aaa' d='M7 2h2v2H7V2zm8 0h2v2h-2V2zM5 4h14a1 1 0 011 1v16a1 1 0 01-1 1H5a1 1 0 01-1-1V5a1 1 0 011-1zm0 2v14h14V6H5zm2 4h10v2H7v-2zm0 4h10v2H7v-2z'/%3E%3C/svg%3E");
    }

    #tijdlijn-header .hdr-btn {
        min-width: 42px;
        width: 42px;
        height: 42px;
        padding: 6px;
        font-size: 17px;
    }

    #tijdlijn-header .hdr-label {
        display: none;
    }

    #tijdlijn-header .hdr-dropdown {
        flex: 0 0 auto;
    }

    #tijdlijn-header > div:last-child {
        flex-wrap: wrap;
        flex-shrink: 1 !important;
        gap: 8px;
    }

    #tijdlijn-header > div:last-child > * {
        min-width: 0;
        flex: 1 1 auto;
    }

    #tijdlijn-header > div:last-child > div {
        flex: 1 1 100%;
        min-width: 0;
    }

    #tijdlijn-header {
        overflow-x: auto;
    }
}

.tl-sidebar-item {
    padding: 7px 14px;
    border-bottom: 1px solid #111;
    cursor: pointer;
    transition: background 0.12s;
}
.tl-sidebar-item:hover { background: #141414; }
.tl-sidebar-type {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.tl-sidebar-titel {
    font-size: 11px;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#tijdlijn-list {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
}

/* De verticale lijn — exact uitgelijnd op midden bolletje */
#tijdlijn-list::before {
    content: "";
    position: absolute;
    left: 88px; /* 32px padding + 56px datumkolom = 88px, dan midden van 12px dot = +6px → 94px maar we centreren op kolom */
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, transparent, #1a2a2a 4%, #1a2a2a 96%, transparent);
}

/* Jaar-sectie header */
.tl-jaar-header {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 48px 0 12px;
    padding-left: 0;
}
.tl-jaar-header:first-child { margin-top: 0; }
.tl-jaar-dot {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #0d1a1a;
    border: 2px solid #2a6a7a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #4abaaa;
    flex-shrink: 0;
    /* Positioneer op de lijn: 32px padding + 56px - 24px (helft dot) = 64px van links */
    position: relative;
    left: 64px;
    z-index: 2;
    box-shadow: 0 0 20px rgba(74,186,170,0.12);
}
.tl-jaar-label {
    font-size: 22px;
    font-weight: 700;
    color: #3a9a9a;
    letter-spacing: 0.04em;
    margin-left: 36px;
}

/* Maand-sectie header */
.tl-maand-header {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 32px 0 8px;
}
/* Spacer = zelfde breedte als datumkolom (56px) + lijn-offset zodat dot op de lijn valt */
.tl-maand-spacer { width: 56px; flex-shrink: 0; }
.tl-maand-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #0a0a0a;
    border: 2px solid #2a5a5a;
    flex-shrink: 0;
    position: relative;
    left: 1px; /* fijn afstemmen op de 2px lijn */
    z-index: 2;
}
.tl-maand-label {
    font-size: 11px;
    font-weight: 700;
    color: #2a7a7a;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-left: 18px;
}

/* Dag-rij */
.tl-dag-rij {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 14px 0; /* meer ruimte tussen dagen */
    position: relative;
}

/* Datum kolom — vaste breedte zodat de lijn altijd op dezelfde x-positie valt */
.tl-dag-datum {
    width: 56px;
    flex-shrink: 0;
    font-size: 11px;
    color: #2a5a5a;
    text-align: right;
    padding-right: 14px;
    padding-top: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
}

/* Het bolletje op de lijn — vaste breedte zodat kaarten altijd op dezelfde x starten */
.tl-dag-dot-wrap {
    width: 12px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    padding-top: 11px;
    position: relative;
    z-index: 2;
}
.tl-dag-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #0a0a0a;
    border: 2px solid #4a9a6a;
    transition: transform 0.15s, box-shadow 0.15s;
}
.tl-dag-dot.type-entry      { border-color: #4a9a6a; }
.tl-dag-dot.type-reflectie  { border-color: #c09ade; }
.tl-dag-dot.type-brief      { border-color: #d9a02a; }
.tl-dag-dot.type-herinnering { border-color: #d9779a; }
.tl-dag-dot.type-review     { border-color: #cc7a2a; }
.tl-dag-dot.type-context    { border-color: #7a6acc; }
.tl-dag-dot.type-chatlog    { border-color: #ff6b5b; }
.tl-dag-dot.type-notitie    { border-color: #8a8a3a; background: #0f0f06; }
.tl-dag-dot.type-levensdoel { border-color: #d4a832; border-width: 2px; background: rgba(212,168,50,0.2); box-shadow: 0 0 8px rgba(212,168,50,0.7), 0 0 16px rgba(212,168,50,0.3); }
.tl-dag-dot.multi           { width: 14px; height: 14px; margin-top: -1px; }

/* Kaart(en) rechts van het bolletje */
.tl-dag-kaarten {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 4px 0 4px 16px;
    min-width: 0;
}

.tl-kaart {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.055);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    min-width: 0;
}
.tl-kaart:hover { background: rgba(255,255,255,0.06); transform: translateX(3px); }
.tl-kaart.type-entry      { border-color: rgba(74,154,106,0.18); }
.tl-kaart.type-entry:hover { border-color: #4a9a6a; }
.tl-kaart.type-reflectie  { border-color: rgba(192,154,222,0.18); }
.tl-kaart.type-reflectie:hover { border-color: #c09ade; }
.tl-kaart.type-brief      { border-color: rgba(217,160,42,0.18); }
.tl-kaart.type-brief:hover { border-color: #d9a02a; }
.tl-kaart.type-herinnering { border-color: rgba(217,119,154,0.18); }
.tl-kaart.type-herinnering:hover { border-color: #d9779a; }
.tl-kaart.type-review     { border-color: rgba(204,122,42,0.18); }
.tl-kaart.type-review:hover { border-color: #cc7a2a; }
.tl-kaart.type-werken     { border-color: rgba(58,169,200,0.18); }
.tl-kaart.type-werken:hover { border-color: #3aa9c8; }
.tl-kaart.type-werken .tl-date { color: #3aa9c8; font-weight: 600; }
.tl-kaart.type-context    { border-color: rgba(122,106,204,0.18); }
.tl-kaart.type-context:hover { border-color: #7a6acc; }
.tl-kaart.type-chatlog    { border-color: rgba(255,107,91,0.18); }
.tl-kaart.type-chatlog:hover { border-color: #ff6b5b; }
.tl-kaart.type-notitie    { border-color: rgba(138,138,58,0.25); background: rgba(20,20,6,0.6); cursor:default; }
.tl-kaart.type-notitie:hover { border-color: rgba(180,180,58,0.4); transform: none; }
.tl-kaart.type-levensdoel { border-color: rgba(212,168,50,0.4); background: rgba(212,168,50,0.06); box-shadow: 0 0 14px rgba(212,168,50,0.15), inset 0 0 20px rgba(212,168,50,0.04); }
.tl-kaart.type-levensdoel:hover { border-color: #d4a832; box-shadow: 0 0 22px rgba(212,168,50,0.35), inset 0 0 30px rgba(212,168,50,0.08); }

.tl-kaart-type {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    flex-shrink: 0;
    min-width: 62px;
}
.type-entry      .tl-kaart-type { color: #4a9a6a; }
.type-reflectie  .tl-kaart-type { color: #c09ade; }
.type-brief      .tl-kaart-type { color: #d9a02a; }
.type-herinnering .tl-kaart-type { color: #d9779a; }
.type-review     .tl-kaart-type { color: #cc7a2a; }
.type-werken     .tl-kaart-type { color: #3aa9c8; }
.type-context    .tl-kaart-type { color: #7a6acc; }
.type-chatlog    .tl-kaart-type { color: #ff6b5b; }
.type-notitie    .tl-kaart-type { color: #8a8a3a; }
.type-levensdoel .tl-kaart-type { color: #d4a832; font-weight: 700; letter-spacing: 0.3px; }

.tl-kaart-titel {
    font-size: 13px;
    font-weight: 500;
    color: #c8c8c8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.tl-kaart-title-subtitle-container {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.tl-kaart-subtitle {
    font-size: 10px;
    color: #888888;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.tl-kaart-preview {
    font-size: 11px;
    color: #2a4a3a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 2;
    min-width: 0;
    border-left: 1px solid #1a2a1a;
    padding-left: 10px;
}
.type-notitie .tl-kaart-preview { color: #5a5a2a; border-left-color: #2a2a10; }

.tl-kaart-del {
    background: none;
    border: none;
    color: #2a2a2a;
    cursor: pointer;
    font-size: 12px;
    padding: 0 2px;
    flex-shrink: 0;
    transition: color 0.15s;
    line-height: 1;
}
.tl-kaart-del:hover { color: #ff6b6b; }

/* Collapsed Group Styling */
.tl-group-collapsed {
    background: rgba(74,154,106,0.08);
    border: 1px solid rgba(74,154,106,0.2);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 16px 0 !important;
    align-items: center;
    gap: 12px !important;
}
.tl-group-collapsed:hover {
    background: rgba(74,154,106,0.12);
    border-color: rgba(74,154,106,0.3);
}
.tl-group-collapsed .tl-dag-datum {
    width: auto;
    padding: 0;
    text-align: left;
    color: #4a9a6a;
    font-weight: 600;
}
.tl-group-collapsed .tl-dag-dot-wrap {
    width: auto;
    padding: 0;
}
.tl-group-summary {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #2a5a5a;
}
.tl-group-count {
    font-weight: 500;
    color: #4a9a6a;
}
.tl-group-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.tl-group-expand-btn {
    background: none;
    border: none;
    color: #4a9a6a;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    transition: transform 0.2s;
    line-height: 1;
    flex-shrink: 0;
}
.tl-group-expand-btn:hover {
    transform: scale(1.15);
}
.tl-group-expanded-state .tl-group-expand-btn {
    transform: rotate(0deg);
}

/* Expanded group content */
.tl-group-expanded {
    display: none;
    background: rgba(74,154,106,0.03);
    border: 1px dashed rgba(74,154,106,0.15);
    border-radius: 8px;
    margin: 0 0 16px 68px;
    padding: 12px;
    gap: 8px;
    flex-direction: column;
}
.tl-group-day {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(74,154,106,0.1);
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tl-group-day-label {
    font-size: 11px;
    font-weight: 600;
    color: #4a9a6a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(74,154,106,0.1);
}

/* Info tooltip hover */
#tijdlijn-info-wrap:hover #tijdlijn-info-tooltip { display: block !important; }

/* Notitie modal */
#tijdlijn-notitie-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    align-items: center;
    justify-content: center;
    z-index: 200;
}
#tijdlijn-notitie-modal.visible { display: flex; }
#tijdlijn-notitie-box {
    background: #161616;
    border: 1px solid #2a3a2a;
    border-radius: 14px;
    width: 400px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    overflow: hidden;
}
#tijdlijn-notitie-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #1e2e1e;
    font-size: 14px;
    font-weight: 600;
    color: #ccc;
}
#tijdlijn-notitie-header button {
    background: none; border: none; color: #555; cursor: pointer; font-size: 16px;
}
#tijdlijn-notitie-header button:hover { color: #ccc; }

/* Lege tijdlijn */
.tl-leeg {
    text-align: center;
    padding: 80px 20px;
    color: #2a3a3a;
    font-size: 14px;
}

/* ══════════════════════════════════════════
   G2: PERSONEN
══════════════════════════════════════════ */
#personen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 20px;
    padding: 24px;
    align-content: flex-start;
    max-width: 100%;
    justify-items: center;
}

/* Politiemap-folder */
.persoon-folder {
    width: 130px;
    cursor: pointer;
    transition: transform 0.18s, filter 0.18s, box-shadow 0.18s;
    position: relative;
    user-select: none;
    flex-shrink: 0;
}
.persoon-folder:hover { transform: translateY(-6px); filter: brightness(1.08); }

.folder-tab {
    height: 20px;
    width: 96px;
    background: linear-gradient(180deg, #be8e3c 0%, #94621a 100%);
    border-radius: 8px 8px 0 0;
    margin-left: 14px;
    border: 1px solid rgba(74, 44, 8, 0.55);
    border-bottom: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.folder-body {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 24%),
        linear-gradient(160deg, #be8a30 0%, #9f6d1e 45%, #7c4d0c 100%);
    border-radius: 0 14px 14px 14px;
    padding: 12px 12px 10px;
    border: 1px solid rgba(83, 53, 10, 0.82);
    box-shadow: 0 14px 24px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.08);
    height: 156px;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    overflow: hidden;
}
.folder-body::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 0 14px 14px 14px;
    background: repeating-linear-gradient(
        0deg, transparent, transparent 18px,
        rgba(0,0,0,0.04) 18px, rgba(0,0,0,0.04) 19px
    );
    pointer-events: none;
}
.folder-label {
    font-size: 9px;
    font-weight: 700;
    color: rgba(42,20,0,0.52);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(58, 32, 2, 0.22);
    padding-bottom: 5px;
    margin-bottom: 4px;
    flex-shrink: 0;
}
.folder-name {
    font-size: 16px;
    font-weight: 700;
    color: #fff1c9;
    line-height: 1.2;
    word-break: break-word;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
    flex-shrink: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}
.folder-subtitle {
    font-size: 10px;
    color: rgba(60, 36, 6, 0.75);
    line-height: 1.3;
    flex-shrink: 0;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.folder-stats {
    font-size: 10px;
    color: rgba(245,220,140,0.6);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    overflow-y: auto;
    flex: 1;
    align-content: flex-start;
    scrollbar-width: none;
}
.folder-stats::-webkit-scrollbar { display: none; }
.folder-badge {
    background: rgba(24,12,0,0.2);
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 10px;
    color: rgba(245,210,120,0.78);
    font-weight: 600;
    border: 1px solid rgba(0,0,0,0.08);
}
.folder-badge.badge-dagboek    { color: #7ad96d; background: rgba(122,217,109,0.16); }
.folder-badge.badge-context    { color: #8d7ee0; background: rgba(122,106,204,0.16); }
.folder-badge.badge-brieven    { color: #d9a02a; background: rgba(217,160,42,0.16); }
.folder-badge.badge-reflecties { color: #c09ade; background: rgba(192,154,222,0.16); }
.folder-badge.badge-werken      { color: #3aa9c8; background: rgba(58,169,200,0.16); }
.folder-badge.badge-reviews    { color: #cc7a2a; background: rgba(204,122,42,0.16); }
.folder-badge.badge-herinneringen { color: #d9779a; background: rgba(217,119,154,0.16); }
.folder-badge.badge-chatlogs   { color: #ff6b5b; background: rgba(255,107,91,0.16); }
.folder-badge.badge-vooraan    { color: #f5d080; background: rgba(245,208,128,0.22); }

/* Persoon zoekbalk */
#personen-search-wrap {
    padding: 14px 20px;
    border-bottom: 1px solid #1a1a1a;
    flex-shrink: 0;
}
#personen-search {
    width: 100%;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 8px 14px;
    color: #e8e8e8;
    font-size: 14px;
    font-family: inherit;
    outline: none;
}
#personen-search:focus { border-color: #c060a0; }
#personen-count { font-size: 11px; color: #444; margin-top: 6px; }
.personen-toolbar {
    padding: 14px 20px;
    border-bottom: 1px solid #1a1a1a;
    flex-shrink: 0;
}
.personen-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.persoon-action-btn {
    border-radius: 8px;
    border: 1px solid #4a3a18;
    background: #1a1408;
    color: #d9b060;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    transition: all 0.15s ease;
}
.persoon-action-btn:hover {
    border-color: #8a6030;
    color: #f0d090;
    background: #24190a;
}
.persoon-action-btn.active {
    border-color: #d9a02a;
    background: rgba(217,160,42,0.14);
    color: #f5d78a;
}

/* Namen menu items */
.summary-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 13px;
    color: #d4d47a;
    border-radius: 6px;
    transition: all 0.15s ease;
    background: transparent;
    margin: 4px 0;
}

.summary-item span {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.summary-item:hover {
    background: rgba(212, 212, 122, 0.15);
    color: #f5f5a0;
    transform: translateX(2px);
}

.summary-item:active {
    transform: translateX(0px);
    background: rgba(212, 212, 122, 0.25);
}

/* Persoon dossier modal */
#persoon-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    z-index: 250;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
#persoon-modal.visible { display: flex; }
#persoon-dossier {
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 16px;
    width: 100%;
    max-width: 820px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0,0,0,0.7);
}
#persoon-dossier-header {
    background: linear-gradient(135deg, #101822 0%, #171321 55%, #18140f 100%);
    border-bottom: 1px solid #2b3340;
    padding: 20px 24px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.dossier-folder-icon {
    font-size: 40px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.dossier-naam {
    font-size: 22px;
    font-weight: 700;
    color: #e8eef8;
    letter-spacing: 0.02em;
}
.dossier-stats-row {
    display: flex;
    gap: 14px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.dossier-stat {
    font-size: 11px;
    color: #7f93a8;
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
    padding: 2px 8px;
    font-weight: 600;
}
#persoon-dossier-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#persoon-dossier-body::-webkit-scrollbar { width: 4px; }
#persoon-dossier-body::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 4px; }

/* Sectie in dossier */
.dossier-sectie {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dossier-sectie-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #1e1e1e;
    padding-bottom: 6px;
}
.dossier-sectie-titel {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #7f93a8;
}
.dossier-meer-btn {
    font-size: 10px;
    color: #7f93a8;
    background: none;
    border: 1px solid #3a2a10;
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.dossier-meer-btn:hover { color: #d8e6ff; border-color: #5a6f92; }

/* Mini entry kaart in dossier — zelfde outline als archief (.tl-entry) */
.dossier-entry {
    background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 9px 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 8px;
    align-items: start;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.dossier-entry:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
/* Type-specifieke border kleuren — zelfde waarden als archief */
.dossier-sectie.dossier-type-entry      .dossier-entry { border-color: #3aaa5a; }
.dossier-sectie.dossier-type-entry      .dossier-entry:hover { border-color: rgba(58,170,90,0.7); background: linear-gradient(135deg, rgba(58,170,90,0.05) 0%, rgba(58,170,90,0.01) 100%); }
.dossier-sectie.dossier-type-context    .dossier-entry { border-color: #7a6acc; }
.dossier-sectie.dossier-type-context    .dossier-entry:hover { border-color: rgba(122,106,204,0.7); background: linear-gradient(135deg, rgba(122,106,204,0.05) 0%, rgba(122,106,204,0.01) 100%); }
.dossier-sectie.dossier-type-brief      .dossier-entry { border-color: #d9a02a; }
.dossier-sectie.dossier-type-brief      .dossier-entry:hover { border-color: rgba(217,160,42,0.7); background: linear-gradient(135deg, rgba(217,160,42,0.05) 0%, rgba(217,160,42,0.01) 100%); }
.dossier-sectie.dossier-type-reflectie  .dossier-entry { border-color: #c09ade; }
.dossier-sectie.dossier-type-reflectie  .dossier-entry:hover { border-color: rgba(192,154,222,0.7); background: linear-gradient(135deg, rgba(192,154,222,0.05) 0%, rgba(192,154,222,0.01) 100%); }
.dossier-sectie.dossier-type-werken      .dossier-entry { border-color: #3aa9c8; }
.dossier-sectie.dossier-type-werken      .dossier-entry:hover { border-color: rgba(58,169,200,0.7); background: linear-gradient(135deg, rgba(58,169,200,0.05) 0%, rgba(58,169,200,0.01) 100%); }
.dossier-sectie.dossier-type-review     .dossier-entry { border-color: #cc7a2a; }
.dossier-sectie.dossier-type-review     .dossier-entry:hover { border-color: rgba(204,122,42,0.7); background: linear-gradient(135deg, rgba(204,122,42,0.05) 0%, rgba(204,122,42,0.01) 100%); }
.dossier-sectie.dossier-type-herinnering .dossier-entry { border-color: #4a7aaa; }
.dossier-sectie.dossier-type-herinnering .dossier-entry:hover { border-color: rgba(74,122,170,0.7); background: linear-gradient(135deg, rgba(74,122,170,0.05) 0%, rgba(74,122,170,0.01) 100%); }
.dossier-sectie.dossier-type-chatlog    .dossier-entry { border-color: #c84a3a; }
.dossier-sectie.dossier-type-chatlog    .dossier-entry:hover { border-color: rgba(200,74,58,0.7); background: linear-gradient(135deg, rgba(200,74,58,0.05) 0%, rgba(200,74,58,0.01) 100%); }
.dossier-entry-datum { font-size: 11px; color: #7f93a8; font-weight: 500; }
.dossier-entry-preview { font-size: 12px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dossier-stat.stat-mentions { color: #d8dde6; }
.dossier-stat.stat-entry { color: #5acd7a; }
.dossier-stat.stat-context { color: #9b88d4; }
.dossier-stat.stat-brief { color: #edbf52; }
.dossier-stat.stat-reflectie { color: #d9aaff; }
.dossier-stat.stat-review { color: #f5ad43; }
.dossier-stat.stat-werken  { color: #3aa9c8; }
.dossier-stat.stat-herinnering { color: #7a9ade; }
.dossier-stat.stat-chatlog { color: #ff6b5b; }
/* Sectietitels en datumkleuren per type */
.dossier-sectie.dossier-type-entry      .dossier-sectie-titel { color: #5acd7a; }
.dossier-sectie.dossier-type-entry      .dossier-entry-datum  { color: #5acd7a; }
.dossier-sectie.dossier-type-context    .dossier-sectie-titel { color: #9b88d4; }
.dossier-sectie.dossier-type-context    .dossier-entry-datum  { color: #9b88d4; }
.dossier-sectie.dossier-type-brief      .dossier-sectie-titel { color: #edbf52; }
.dossier-sectie.dossier-type-brief      .dossier-entry-datum  { color: #edbf52; }
.dossier-sectie.dossier-type-reflectie  .dossier-sectie-titel { color: #d9aaff; }
.dossier-sectie.dossier-type-reflectie  .dossier-entry-datum  { color: #d9aaff; }
.dossier-sectie.dossier-type-review     .dossier-sectie-titel { color: #f5ad43; }
.dossier-sectie.dossier-type-review     .dossier-entry-datum  { color: #f5ad43; }
.dossier-sectie.dossier-type-herinnering .dossier-sectie-titel { color: #7a9ade; }
.dossier-sectie.dossier-type-herinnering .dossier-entry-datum  { color: #7a9ade; }
.dossier-sectie.dossier-type-chatlog    .dossier-sectie-titel { color: #ff6b5b; }
.dossier-sectie.dossier-type-chatlog    .dossier-entry-datum  { color: #ff6b5b; }

/* Notities veld in dossier */
#persoon-notities-tekst {
    width: 100%;
    min-height: 80px;
    background: #0e0e0e;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    color: #c8c8c8;
    font-size: 13px;
    font-family: inherit;
    padding: 10px 12px;
    resize: vertical;
    outline: none;
    line-height: 1.6;
    box-sizing: border-box;
}
#persoon-notities-tekst:focus { border-color: #8a6030; }
#persoon-notities-opslaan {
    margin-top: 6px;
    padding: 6px 16px;
    background: #3a2a10;
    border: 1px solid #6a4a18;
    border-radius: 6px;
    color: #d9a02a;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
#persoon-notities-opslaan:hover { background: #4a3a18; }
#persoon-notities-opgeslagen { font-size: 11px; color: #6a9a4a; display: none; margin-left: 10px; }

/* Dossier footer */
#persoon-dossier-footer {
    border-top: 1px solid #1e1e1e;
    padding: 12px 24px;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#persoon-sluiten-btn {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    color: #666;
    font-size: 13px;
    padding: 7px 20px;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s, border-color 0.15s;
}
#persoon-sluiten-btn:hover { color: #aaa; border-color: #444; }

/* Alle entries popup voor persoon */
#persoon-entries-popup {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 400;
    align-items: center;
    justify-content: center;
    padding: 28px;
}
#persoon-entries-popup.visible { display: flex; }
#persoon-entries-popup-box {
    background: #141414;
    border: 1px solid #2a2a2a;
    border-radius: 14px;
    width: 100%;
    max-width: 640px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
#persoon-entries-popup-header {
    padding: 14px 18px;
    border-bottom: 1px solid #1e1e1e;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
#persoon-entries-popup-titel { font-size: 14px; font-weight: 600; color: #d9a02a; }
#persoon-entries-popup-close { background: none; border: 1px solid #2a2a2a; color: #555; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; }
#persoon-entries-popup-close:hover { color: #aaa; border-color: #444; }
#persoon-entries-popup-list { flex: 1; overflow-y: auto; padding: 8px 0; }
#persoon-entries-popup-list::-webkit-scrollbar { width: 4px; }
#persoon-entries-popup-list::-webkit-scrollbar-thumb { background: #222; border-radius: 4px; }

/* ===== TO-DO PANEL ===== */
#todo-btn { border-color: #4a3a5a; color: #c084fc; background: rgba(192,132,252,0.08); }
#todo-btn:hover { border-color: #c084fc; background: rgba(192,132,252,0.15); box-shadow: 0 0 12px rgba(192,132,252,0.2); }
#todo-panel { background: #111; color: #e8e8e8; }
#todo-header { padding: 20px 28px 12px; border-bottom: 1px solid #2a2a2a; display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
#todo-header h2 { font-size: 18px; font-weight: 600; color: #c084fc; margin: 0; flex: 1; }
#todo-add-btn { padding: 8px 18px; border-radius: 8px; border: 1px solid #7a4a9a; background: rgba(192,132,252,0.1); color: #c084fc; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.15s; }
#todo-add-btn:hover { background: rgba(192,132,252,0.2); border-color: #c084fc; }
#todo-filter-bar { padding: 10px 28px; display: flex; gap: 8px; flex-shrink: 0; border-bottom: 1px solid #1e1e1e; align-items: center; }
.todo-filter-chip { padding: 4px 12px; border-radius: 14px; border: 1px solid #2a2a2a; background: transparent; color: #666; font-size: 12px; cursor: pointer; font-family: inherit; transition: all 0.15s; }
.todo-filter-chip.active { border-color: #7a4a9a; background: rgba(192,132,252,0.12); color: #c084fc; }
.todo-sort-chip { padding: 4px 12px; border-radius: 14px; border: 1px solid #2a2a2a; background: transparent; color: #666; font-size: 12px; cursor: pointer; font-family: inherit; transition: all 0.15s; }
.todo-sort-chip:hover { border-color: #4abaaa; color: #4abaaa; background: rgba(74, 186, 170, 0.1); }
#todo-list { flex: 1; overflow-y: auto; padding: 16px 28px; display: flex; flex-direction: column; gap: 8px; }
#todo-list::-webkit-scrollbar { width: 4px; }
#todo-list::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 4px; }
#todo-empty { text-align: center; color: #444; font-size: 14px; padding: 60px 20px; display: none; }
.todo-item { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 10px; overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; cursor: grab; }
.todo-item:active { cursor: grabbing; }
.todo-item.dragging { opacity: 0.4; border-color: #7a4a9a; }
.todo-item.drag-over { border-color: #c084fc; box-shadow: 0 0 0 2px rgba(192,132,252,0.25); }
.todo-item.done-item { opacity: 0.5; }
.todo-item-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.todo-drag-handle { color: #333; font-size: 14px; cursor: grab; flex-shrink: 0; user-select: none; }
.todo-check { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #444; background: transparent; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.todo-check.checked { background: #5a3a7a; border-color: #c084fc; color: #c084fc; font-size: 10px; }
.todo-check.in-progress { background: rgba(245,158,11,0.15); border-color: #f59e0b; color: #f59e0b; font-size: 10px; }
.todo-status-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; border: 1px solid rgba(255,255,255,0.08); margin-right: 8px; }
.todo-status-chip.open { background: rgba(255,255,255,0.04); color: #c7c7c7; border-color: rgba(255,255,255,0.08); }
.todo-status-chip.bezig { background: rgba(245,158,11,0.12); color: #f59e0b; border-color: rgba(245,158,11,0.25); }
.todo-status-chip.afgerond { background: rgba(74,222,128,0.12); color: #4ade80; border-color: rgba(74,222,128,0.25); }
.todo-title-wrap { flex: 1; min-width: 0; user-select: text; }
.todo-title { font-size: 14px; color: #d8d8d8; font-weight: 500; cursor: pointer; word-break: break-word; user-select: text; }
.todo-title.strikethrough { text-decoration: line-through; color: #555; }
.todo-title-input { background: transparent; border: none; border-bottom: 1px solid #5a3a7a; color: #d8d8d8; font-size: 14px; font-family: inherit; font-weight: 500; outline: none; width: 100%; padding: 2px 0; }
.todo-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.todo-prio-dot { display: inline-flex; width: 10px; height: 10px; min-width: 10px; min-height: 10px; border-radius: 50%; flex-shrink: 0; margin-left: 4px; }
.prio-hoog { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.5); }
.prio-midden { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,0.4); }
.prio-laag { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.4); }
.prio-geen { background: #444; }

/* Subtask priority selector */
.subtask-prio-selector { display: flex; gap: 2px; margin-bottom: 4px; }
.subtask-prio-opt { background: none; border: 1px solid #3a3a3a; color: #aaa; font-size: 10px; padding: 2px 4px; border-radius: 3px; cursor: pointer; transition: all 0.15s; }
.subtask-prio-opt:hover { color: #fff; }
.subtask-prio-opt.sel-hoog { background: #ef4444; border-color: #ef4444; }
.subtask-prio-opt.sel-midden { background: #f59e0b; border-color: #f59e0b; }
.subtask-prio-opt.sel-laag { background: #22c55e; border-color: #22c55e; }
.subtask-prio-opt.sel-geen { background: #444; border-color: #444; }
.todo-deadline-type { display: inline-flex; align-items: center; background: rgba(255,255,255,0.08); border-radius: 4px; padding: 0 5px; font-size: 10px; color: #ccc; margin-right: 4px; }
.todo-deadline-type.hard { background: rgba(239,68,68,0.12); color: #ef4444; }
.todo-deadline-type.soft { background: rgba(245,158,11,0.12); color: #f59e0b; }
.todo-prio-opt.sel-soft { border-color:#f59e0b; background:rgba(245,158,11,0.12); color:#f59e0b; }
.todo-prio-opt.sel-hard { border-color:#ef4444; background:rgba(239,68,68,0.12); color:#ef4444; }
.todo-prio-opt.sel-geen { background: #444; border-color: #444; }
.todo-prio-opt.sel-open { border-color:#64748b; background:rgba(100,116,139,0.12); color:#c7d2fe; }
.todo-prio-opt.sel-bezig { border-color:#f59e0b; background:rgba(245,158,11,0.12); color:#f59e0b; }
.todo-prio-opt.sel-afgerond { border-color:#22c55e; background:rgba(34,197,94,0.12); color:#22c55e; }
.todo-deadline { font-size: 11px; color: #666; white-space: nowrap; }
.todo-deadline.overdue { color: #ef4444; font-weight: 600; }
.todo-deadline.soon { color: #f59e0b; }
.todo-deadline.strikethrough { text-decoration: line-through; color: #555; }
.todo-expand-btn { background: none; border: none; color: #444; font-size: 11px; cursor: pointer; padding: 2px 4px; transition: color 0.15s; flex-shrink: 0; }
.todo-expand-btn:hover { color: #aaa; }
.todo-actions { display: flex; gap: 4px; flex-shrink: 0; }
.todo-action-btn { background: none; border: none; color: #444; font-size: 13px; cursor: pointer; padding: 2px 5px; border-radius: 4px; transition: all 0.15s; }
.todo-action-btn:hover { color: #aaa; background: #2a2a2a; }
.todo-subtasks { padding: 0 14px 12px 42px; display: flex; flex-direction: column; gap: 6px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s ease, padding 0.35s ease; }
.todo-subtasks.open { max-height: 2000px; opacity: 1; }
.todo-progress-wrap { height: 3px; background: #2a2a2a; border-radius: 3px; overflow: hidden; margin: 0 14px 10px 42px; display: none; }
.todo-progress-wrap.visible { display: block; }
.todo-progress-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #7a3a9a, #c084fc); transition: width 0.3s ease; }
.subtask-row { display: flex; flex-direction: column; gap: 2px; animation: slideIn 0.3s ease-out; transition: opacity 0.15s, background 0.15s; }
@keyframes slideIn { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 500px; } }
.subtask-row.dragging { opacity: 0.4; }
.subtask-row.drag-over { background: rgba(74, 186, 170, 0.15); border-radius: 6px; }
.subtask-children.drag-over { background: rgba(74, 186, 170, 0.15); border-radius: 6px; }
.subtask-check { width: 14px; height: 14px; border-radius: 3px; border: 1px solid #3a3a3a; background: transparent; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; transition: all 0.15s; }
.subtask-check.checked { background: #4a2a6a; border-color: #9a5aaa; color: #c084fc; }
.subtask-check.in-progress { background: rgba(245,158,11,0.15); border-color: #f59e0b; color: #f59e0b; }
.subtask-title { font-size: 12px; color: #aaa; flex: 1; cursor: pointer; user-select: text; }
.subtask-title.strikethrough { text-decoration: line-through; color: #555; }
.subtask-title-input { background: transparent; border: none; border-bottom: 1px solid #3a3a3a; color: #aaa; font-size: 12px; font-family: inherit; outline: none; width: 100%; padding: 1px 0; }
.subtask-del { background: none; border: none; color: #333; font-size: 11px; cursor: pointer; padding: 1px 4px; transition: color 0.15s; }
.subtask-del:hover { color: #888; }
.subtask-expand-btn { background: none; border: none; color: #444; font-size: 10px; cursor: pointer; padding: 2px 4px; transition: color 0.15s; flex-shrink: 0; }
.subtask-expand-btn:hover { color: #aaa; }
.subtask-add-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.subtask-add-input { background: transparent; border: none; border-bottom: 1px dashed #2a2a2a; color: #666; font-size: 12px; font-family: inherit; outline: none; flex: 1; padding: 2px 0; }
.subtask-add-input::placeholder { color: #333; }
.subtask-add-input:focus { border-bottom-color: #5a3a7a; color: #aaa; }
/* Todo modal */
#todo-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 500; align-items: center; justify-content: center; padding: 28px; }
#todo-modal.open { display: flex; }
#todo-modal-box { background: rgba(18,18,22,0.96); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; width: 100%; max-width: 520px; overflow: hidden; box-shadow: 0 22px 55px rgba(0,0,0,0.48); }
#todo-modal-header { padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: space-between; }
#todo-modal-title { font-size: 15px; font-weight: 700; color: #d6b3ff; }
#todo-modal-close { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: #ccc; width: 30px; height: 30px; border-radius: 10px; cursor: pointer; font-size: 14px; }
#todo-modal-body { padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.todo-form-group { display: flex; flex-direction: column; gap: 6px; }
.todo-form-label { font-size: 12px; color: #666; font-weight: 500; }
.todo-form-input { background: #0e0e0e; border: 1px solid #2a2a2a; border-radius: 7px; color: #d8d8d8; font-size: 13px; font-family: inherit; padding: 8px 12px; outline: none; transition: border-color 0.15s; }
.todo-form-input:focus { border-color: #7a4a9a; }
.todo-prio-selector,
.todo-deadline-type-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.todo-prio-opt { padding: 10px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); color: #c7c7c7; font-size: 12px; cursor: pointer; font-family: inherit; transition: all 0.18s; }
.todo-prio-opt:hover { background: rgba(255,255,255,0.08); }
.todo-prio-opt:disabled { border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); color: #777; cursor: not-allowed; }
.todo-prio-opt.sel-hoog { border-color: #ef4444; background: rgba(239,68,68,0.12); color: #ef4444; }
.todo-prio-opt.sel-midden { border-color: #f59e0b; background: rgba(245,158,11,0.12); color: #f59e0b; }
.todo-prio-opt.sel-laag { border-color: #22c55e; background: rgba(34,197,94,0.12); color: #22c55e; }
.todo-prio-opt.sel-geen { border-color: #666; background: rgba(120,120,120,0.12); color: #aaa; }
.todo-prio-opt.sel-hard:disabled,
.todo-prio-opt.sel-soft:disabled { background: rgba(255,255,255,0.02); color: #777; border-color: rgba(255,255,255,0.08); }
.todo-deadline-type-selector { display: flex; gap: 8px; }
.todo-deadline-type { display: inline-flex; align-items: center; justify-content: center; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(255,255,255,0.05); color: #ddd; }
.todo-deadline-type.hard { background: rgba(239,68,68,0.14); color: #ef4444; }
.todo-deadline-type.soft { background: rgba(245,158,11,0.14); color: #f59e0b; }
#todo-modal-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; gap: 10px; justify-content: flex-end; }
.todo-modal-btn { padding: 7px 20px; border-radius: 7px; font-size: 13px; font-family: inherit; cursor: pointer; font-weight: 500; }
#todo-modal-cancel { border: 1px solid #2a2a2a; background: #1a1a1a; color: #888; }
#todo-modal-save { border: none; background: #5a2a8a; color: #e0b0ff; font-weight: 600; }
#todo-modal-save:hover { background: #6a3a9a; }

.hdr-dropdown {
    position: relative;
    display: inline-block;
}

.hdr-dropdown-content {
    display: none !important;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #1a1a1a;
    border: 1px solid #4abaaa;
    border-radius: 6px;
    min-width: 220px;
    z-index: 2000;
    padding: 6px;
    flex-direction: column;
}

.hdr-dropdown-content.open {
    display: flex !important;
}

.hdr-dropdown-content button {
    width: 100%;
    background: none;
    border: none;
    color: #aaa;
    text-align: left;
    padding: 8px;
    cursor: pointer;
    border-radius: 4px;
}

.hdr-dropdown-content button:hover {
    background: #2a2a2a;
    color: #6fd4c4;
}

/* TABS MENU STYLES */
#tabs-menu-dropdown {
    min-width: 220px;
    display: none;
    flex-direction: column;
}

#tabs-menu-dropdown .tab-menu-item {
    padding: 8px 12px;
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 1px solid #333;
}

.tab-menu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    text-align: left !important;
    color: #aaa !important;
    width: 100% !important;
    background: none !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-family: inherit !important;
    text-transform: none !important;
}

.tab-menu-btn:hover {
    background: #2a2a2a !important;
    color: #4abaaa !important;
}

.tab-indicator {
    margin-left: auto;
    color: #4abaaa;
    font-weight: bold;
    font-size: 12px;
    display: none;
}

/* TODO FULLSCREEN */
#todo-fullscreen {
    display: none;
    position: fixed;
    inset: 0;
    background: #111;
    flex-direction: column;
    z-index: 50;
    overflow: hidden;
}

#todo-fullscreen.visible {
    display: flex;
}

#todo-fullscreen-header {
    padding: 20px 28px;
    border-bottom: 1px solid #2a2a2a;
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #1a1a1a 0%, #202020 100%);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    justify-content: space-between;
}

#todo-fullscreen-header h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

#todo-fullscreen-content {
    flex: 1;
    overflow: auto;
    padding: 20px;
}

#todo-fullscreen-inner {
    display: flex;
    flex-direction: column;
}

/* ===== SUBTAAK DEADLINES & SUB-SUBTAKEN ===== */
.subtask-row-main {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 4px 6px;
    border-radius: 5px;
    background: rgba(255,255,255,0.02);
    transition: all 0.15s;
}
.subtask-row-main:hover {
    background: rgba(255,255,255,0.04);
    cursor: grab;
}

.subtask-content {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    user-select: text;
}

.subtask-row-actions {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.15s;
}
.subtask-row:hover .subtask-row-actions { opacity: 1; }

.subtask-deadline-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 11px;
    padding: 2px 4px;
    border-radius: 4px;
    color: #555;
    transition: color 0.15s, background 0.15s;
}
.subtask-deadline-btn:hover { color: #4abaaa; background: rgba(74,186,170,0.1); }

.subtask-addsub-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    padding: 2px 5px;
    border-radius: 4px;
    color: #555;
    transition: color 0.15s, background 0.15s;
}
.subtask-addsub-btn:hover { color: #7ad96d; background: rgba(122,217,109,0.1); }

.subtask-deadline, .subsubtask-deadline {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(74,186,170,0.1);
    color: #4abaaa;
    white-space: nowrap;
    flex-shrink: 0;
}
.subtask-deadline.strikethrough, .subsubtask-deadline.strikethrough {
    text-decoration: line-through;
    color: #555;
}
.subtask-deadline.overdue, .subsubtask-deadline.overdue {
    background: rgba(180,60,60,0.15);
    color: #c07070;
}
.subtask-deadline.soon, .subsubtask-deadline.soon {
    background: rgba(200,150,50,0.15);
    color: #c8a050;
}

/* Subtasks container for arbitrary nesting */
.subtask-children {
    margin-left: 22px;
    margin-top: 3px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-left: 1px solid #2a2a2a;
    padding-left: 10px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s ease, padding 0.35s ease;
}
.subtask-children.open {
    max-height: 3000px;
    opacity: 1;
    padding-left: 10px;
}

/* Sub-subtaken (niveau 3) */
.subsubtask-list {
    margin-left: 22px;
    margin-top: 3px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-left: 1px solid #2a2a2a;
    padding-left: 10px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s ease, padding 0.35s ease;
}
.subsubtask-list.open {
    max-height: 3000px;
    opacity: 1;
    padding-left: 10px;
}

.subsubtask-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 5px;
    font-size: 12px;
    color: #999;
    background: rgba(255,255,255,0.02);
    animation: slideIn 0.25s ease-out;
}
.subsubtask-row:hover { background: rgba(255,255,255,0.04); }
.subsubtask-row:hover .subtask-deadline-btn { opacity: 1; }
.subsubtask-row .subtask-deadline-btn { opacity: 0; }
.subsubtask-row .subtask-del { opacity: 0; transition: opacity 0.15s; font-size: 10px; }
.subsubtask-row:hover .subtask-del { opacity: 1; }

.subsubtask-add-row {
    display: none;
    align-items: center;
    padding: 3px 6px;
    margin-top: 2px;
}
.subsubtask-add-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid #2a3a2a;
    color: #aaa;
    font-size: 12px;
    font-family: inherit;
    outline: none;
    width: 100%;
    padding: 3px 2px;
}
.subsubtask-add-input:focus { border-bottom-color: #4abaaa; }

/* ===== DEADLINE PICKER MODAL ===== */
.deadline-quick-btn {
    padding: 6px 12px;
    border-radius: 7px;
    border: 1px solid #2a3a2a;
    background: #1a2a1a;
    color: #7ad9c8;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
}
.deadline-quick-btn:hover {
    background: #1e3a2a;
    border-color: #4abaaa;
}

.deadline-type-opt {
    border-color: #2a3a2a;
}

.deadline-type-opt.sel-hard {
    border-color: #ef4444;
    background: rgba(239,68,68,0.12);
    color: #ef4444;
}

.deadline-type-opt.sel-soft {
    border-color: #f59e0b;
    background: rgba(245,158,11,0.12);
    color: #f59e0b;
}

#deadline-picker-input:focus {
    border-color: #4abaaa;
}

/* ===== NOTES STYLING ===== */
.todo-note {
    background: rgba(74, 186, 170, 0.08);
    border: 1px solid rgba(74, 186, 170, 0.2);
    border-radius: 6px;
    padding: 8px 10px;
    margin: 4px 0 4px 42px;
    font-size: 11px;
    color: #8ac8b8;
    position: relative;
    transition: all 0.15s ease;
}

.todo-note:hover {
    background: rgba(74, 186, 170, 0.12);
    border-color: rgba(74, 186, 170, 0.3);
}

.todo-note .note-content {
    flex: 1;
    line-height: 1.4;
    word-wrap: break-word;
    cursor: pointer;
}

.todo-note .note-delete-btn {
    position: absolute;
    top: 4px;
    right: 6px;
    background: none;
    border: none;
    color: #666;
    font-size: 10px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    opacity: 0;
    transition: all 0.15s ease;
}

.todo-note:hover .note-delete-btn {
    opacity: 1;
}

.subtask-note {
    background: rgba(74, 186, 170, 0.08);
    border: 1px solid rgba(74, 186, 170, 0.2);
    border-radius: 6px;
    padding: 8px 10px;
    margin: 4px 0 4px 32px;
    font-size: 11px;
    color: #8ac8b8;
    position: relative;
    transition: all 0.15s ease;
}

.subtask-note:hover {
    background: rgba(74, 186, 170, 0.12);
    border-color: rgba(74, 186, 170, 0.3);
}

.subtask-note .note-content {
    flex: 1;
    line-height: 1.4;
    word-wrap: break-word;
}

.subsubtask-note {
    background: rgba(122, 217, 109, 0.08);
    border: 1px solid rgba(122, 217, 109, 0.2);
    border-radius: 4px;
    padding: 6px 8px;
    margin: 3px 0 3px 28px;
    font-size: 10px;
    color: #9dd990;
    position: relative;
    transition: all 0.15s ease;
}

.subsubtask-note:hover {
    background: rgba(122, 217, 109, 0.12);
    border-color: rgba(122, 217, 109, 0.3);
}

.subsubtask-note .note-content {
    flex: 1;
    line-height: 1.3;
    word-wrap: break-word;
}

.note-delete-btn {
    position: absolute;
    top: 4px;
    right: 6px;
    background: none;
    border: none;
    color: #666;
    font-size: 10px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    opacity: 0;
    transition: all 0.15s ease;
}

.subtask-note:hover .note-delete-btn,
.subsubtask-note:hover .note-delete-btn {
    opacity: 1;
}

.note-delete-btn:hover {
    background: rgba(255, 100, 100, 0.2);
    color: #ff6464;
}

.note-add-btn {
    background: none;
    border: none;
    color: #4abaaa;
    font-size: 11px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    transition: all 0.15s ease;
}

.subtask-row:hover .note-add-btn,
.subsubtask-row:hover .note-add-btn {
    opacity: 1;
}

.note-add-btn:hover {
    background: rgba(74, 186, 170, 0.15);
    color: #5ad4c4;
}

/* ===== ENHANCED COLLAPSIBLE SUB-SUBTASKS ===== */
.subtask-expand-btn {
    background: none;
    border: 1px solid #3a3a3a;
    color: #666;
    font-size: 10px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    margin-right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.subtask-expand-btn:hover {
    background: rgba(74, 186, 170, 0.1);
    border-color: #4abaaa;
    color: #4abaaa;
}

.subtask-expand-btn.expanded {
    transform: rotate(180deg);
}

.subtask-prio-btn {
    background: none;
    border: none;
    color: #444;
    font-size: 11px;
    cursor: pointer;
    padding: 2px 4px;
    transition: all 0.15s;
    flex-shrink: 0;
}

.subtask-prio-btn:hover {
    color: #ffc107;
    transform: scale(1.1);
}

.subtask-expand-btn.expanded {
    background: rgba(74, 186, 170, 0.15);
    border-color: #4abaaa;
    color: #4abaaa;
}

.subsubtask-list {
    margin-left: 22px;
    margin-top: 3px;
    display: none;
    flex-direction: column;
    gap: 2px;
    border-left: 1px solid #2a2a2a;
    padding-left: 10px;
    transition: all 0.2s ease;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-5px);
}

.subsubtask-list.open {
    display: flex;
    max-height: 2000px;
    opacity: 1;
    transform: translateY(0);
}

/* ===== ENTRY TYPE COLORS FOR ARCHIEF ===== */

/* Dagboek entries: Groen */
.tl-entry.entry-type-entry {
    border-color: #3aaa5a !important;
}
.tl-entry.entry-type-entry:hover {
    background: rgba(58, 170, 90, 0.05) !important;
    border-color: rgba(58, 170, 90, 0.6) !important;
}
.tl-entry.entry-type-entry .tl-date-day {
    color: #5acd7a !important;
}
.tl-entry.entry-type-entry .tl-date-num {
    color: #4aaa5a !important;
}

/* Context entries: Paars */
.tl-entry.entry-type-context {
    border-color: #7a6acc !important;
}
.tl-entry.entry-type-context:hover {
    background: rgba(122, 106, 204, 0.05) !important;
    border-color: rgba(122, 106, 204, 0.6) !important;
}
.tl-entry.entry-type-context .tl-date-day {
    color: #9b88d4 !important;
}
.tl-entry.entry-type-context .tl-date-num {
    color: #7a6acc !important;
}

/* Brieven: Oranje */
.tl-entry.entry-type-brief {
    border-color: #d9a02a !important;
}
.tl-entry.entry-type-brief:hover {
    background: rgba(217, 160, 42, 0.05) !important;
    border-color: rgba(217, 160, 42, 0.6) !important;
}
.tl-entry.entry-type-brief .tl-date-day {
    color: #edbf52 !important;
}
.tl-entry.entry-type-brief .tl-date-num {
    color: #d9a02a !important;
}

/* Reflecties: Roze */
.tl-entry.entry-type-reflectie {
    border-color: #c09ade !important;
}
.tl-entry.entry-type-reflectie:hover {
    background: rgba(192, 154, 222, 0.05) !important;
    border-color: rgba(192, 154, 222, 0.6) !important;
}
.tl-entry.entry-type-reflectie .tl-date-day {
    color: #d9aaff !important;
}
.tl-entry.entry-type-reflectie .tl-date-num {
    color: #c09ade !important;
}

/* Reviews: Geel */
.tl-entry.entry-type-review {
    border-color: #cc7a2a !important;
}
.tl-entry.entry-type-review:hover {
    background: rgba(204, 122, 42, 0.05) !important;
    border-color: rgba(204, 122, 42, 0.6) !important;
}
.tl-entry.entry-type-review .tl-date-day {
    color: #f5ad43 !important;
}
.tl-entry.entry-type-review .tl-date-num {
    color: #cc7a2a !important;
}

/* Herinneringen: Blauw */
.tl-entry.entry-type-herinnering {
    border-color: #4a7aaa !important;
}
.tl-entry.entry-type-herinnering:hover {
    background: rgba(74, 122, 170, 0.05) !important;
    border-color: rgba(74, 122, 170, 0.6) !important;
}
.tl-entry.entry-type-herinnering .tl-date-day {
    color: #7a9ade !important;
}
.tl-entry.entry-type-herinnering .tl-date-num {
    color: #4a7aaa !important;
}

/* Chatlogs: Rood (wissel met zoeken) */
.tl-entry.entry-type-chatlog {
    border-color: #c84a3a !important;
}
.tl-entry.entry-type-chatlog:hover {
    background: rgba(200, 74, 58, 0.05) !important;
    border-color: rgba(200, 74, 58, 0.6) !important;
}
.tl-entry.entry-type-chatlog .tl-date-day {
    color: #ff6b5b !important;
}
.tl-entry.entry-type-chatlog .tl-date-num {
    color: #c84a3a !important;
}

/* Zoeken/Search: Grijs (wissel met chatlogs) */
.tl-entry.entry-type-search {
    border-color: #666666 !important;
}
.tl-entry.entry-type-search:hover {
    background: rgba(102, 102, 102, 0.05) !important;
    border-color: rgba(102, 102, 102, 0.6) !important;
}
.tl-entry.entry-type-search .tl-date-day {
    color: #999999 !important;
}
.tl-entry.entry-type-search .tl-date-num {
    color: #888888 !important;
}

/* Tab headers met kleuren */
#tab-entries-fs { border-bottom-color: #3aaa5a !important; }
#tab-entries-fs.active { color: #5acd7a !important; background: rgba(58, 170, 90, 0.1) !important; }

#tab-contexts-fs { border-bottom-color: #7a6acc !important; }
#tab-contexts-fs.active { color: #9b88d4 !important; background: rgba(122, 106, 204, 0.1) !important; }

#tab-brieven-fs { border-bottom-color: #d9a02a !important; }
#tab-brieven-fs.active { color: #edbf52 !important; background: rgba(217, 160, 42, 0.1) !important; }

#tab-reflecties-fs { border-bottom-color: #c09ade !important; }
#tab-reflecties-fs.active { color: #d9aaff !important; background: rgba(192, 154, 222, 0.1) !important; }

#tab-werken-fs { color: #3a3a3a !important; border-bottom-color: #3aa9c8 !important; }
#tab-werken-fs.active { color: #3a3a3a !important; background: rgba(58, 169, 200, 0.08) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   LEVENSDOELEN (Life Goals) - PINK THEME
   ═════════════════════════════════════════════════════════════════════════ */

#levensdoelen-fullscreen {
    display: none !important;
}

#levensdoelen-fullscreen.visible {
    display: flex !important;
}

#levensdoelen-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px;
    width: 100%;
    overflow-x: visible;
    flex-wrap: wrap;
    align-items: stretch;
    padding: 0;
}

#levensdoelen-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    padding: 32px 40px;
    overflow-x: visible;
}

.levensdoelen-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    min-width: 100%;
    max-width: 100%;
    position: relative;
}

.levensdoelen-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #e866e8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(232, 102, 232, 0.3);
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.levensdoelen-section-lock-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.levensdoelen-section-lock-btn:hover {
    background: rgba(232, 102, 232, 0.1);
    transform: scale(1.15);
}

.levensdoelen-section.locked .levensdoelen-grid {
    opacity: 0.5;
    pointer-events: none;
    filter: blur(2px);
}

.levensdoelen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    justify-content: stretch;
}

.levensdoelen-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(232, 102, 232, 0.06);
    border: 1px solid rgba(232, 102, 232, 0.25);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.levensdoelen-card:hover {
    background: rgba(232, 102, 232, 0.12);
    border-color: rgba(232, 102, 232, 0.55);
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(232, 102, 232, 0.15);
}

.levensdoelen-card.aspirational {
    opacity: 0.72;
}

.levensdoelen-card.aspirational:hover {
    opacity: 1;
}

.levensdoelen-card.bezig {
    border-color: rgba(74, 186, 170, 0.35);
    background: rgba(74, 186, 170, 0.06);
    box-shadow: 0 4px 16px rgba(74, 186, 170, 0.08);
}

.levensdoelen-card.bezig:hover {
    border-color: rgba(74, 186, 170, 0.65);
    background: rgba(74, 186, 170, 0.1);
    box-shadow: 0 10px 28px rgba(74, 186, 170, 0.15);
}

.levensdoelen-card.achieved {
    border-color: rgba(100, 200, 100, 0.35);
    background: rgba(100, 200, 100, 0.06);
    box-shadow: 0 4px 16px rgba(100, 200, 100, 0.08);
}

.levensdoelen-card.achieved:hover {
    border-color: rgba(100, 200, 100, 0.65);
    background: rgba(100, 200, 100, 0.1);
    box-shadow: 0 10px 28px rgba(100, 200, 100, 0.15);
}

.levensdoelen-card.ready {
    border-color: rgba(79, 124, 217, 0.35);
    background: rgba(79, 124, 217, 0.08);
    box-shadow: 0 4px 16px rgba(79, 124, 217, 0.08);
}

.levensdoelen-card.ready:hover {
    border-color: rgba(79, 124, 217, 0.65);
    background: rgba(79, 124, 217, 0.14);
    box-shadow: 0 10px 28px rgba(79, 124, 217, 0.18);
}

.levensdoelen-icon {
    font-size: 32px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.levensdoelen-card.aspirational .levensdoelen-icon {
    opacity: 0.55;
    filter: grayscale(40%);
}

.levensdoelen-card.ready .levensdoelen-icon {
    opacity: 1;
    filter: none;
}

.levensdoelen-card-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.levensdoelen-category {
    font-size: 11px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    font-weight: 600;
}

.levensdoelen-title {
    font-size: 14px;
    font-weight: 600;
    color: #e8e8e8;
    text-align: left;
    line-height: 1.3;
    word-break: break-word;
}

.levensdoelen-card.aspirational .levensdoelen-title {
    color: #aaa;
}

.levensdoelen-subtitle {
    font-size: 12px;
    color: #a8b0c0;
    margin-top: -2px;
    margin-bottom: 4px;
    line-height: 1.3;
}

.levensdoelen-card.achieved .levensdoelen-title {
    color: #aaffaa;
}

.levensdoelen-card.ready .levensdoelen-title {
    color: #e8e8e8;
}

.levensdoelen-date {
    font-size: 11px;
    color: #999;
    text-align: left;
}

.levensdoelen-card.achieved .levensdoelen-date {
    color: #88dd88;
}

#levensdoelen-modal.visible {
    display: flex !important;
}

#levensdoelen-detail-modal.visible {
    display: flex !important;
}

/* Styling for detail modal action buttons */
#levensdoelen-detail-modal button[style*="padding:8px"] {
    transition: all 0.2s ease;
}

#levensdoelen-detail-modal button[onclick*="toggleLevensdoelen"]:hover {
    background: rgba(232, 102, 232, 0.2) !important;
    border-color: rgba(232, 102, 232, 0.7) !important;
    transform: translateY(-1px);
}

#levensdoelen-detail-modal button[onclick*="openLevensdoelen"]:hover {
    background: #2a2a2a !important;
    border-color: #555 !important;
    transform: translateY(-1px);
}

#levensdoelen-detail-modal button[onclick*="deleteLevensdoelen"]:hover {
    background: rgba(200, 74, 74, 0.2) !important;
    border-color: rgba(200, 74, 74, 0.7) !important;
    transform: translateY(-1px);
}

#levensdoelen-detail-modal button[onclick*="closeLevensdoelen"]:hover {
    background: #1a3a1a !important;
    border-color: #4a8a4a !important;
    transform: translateY(-1px);
}

/* Icon Picker Styling */
#levensdoelen-icon-picker {
    margin-bottom: 12px;
}

#levensdoelen-icon-toggle:hover {
    background: #2a2a2a !important;
    border-color: #555 !important;
}

.levensdoelen-icon-btn {
    width: 36px;
    height: 36px;
    border: 2px solid #2a2a2a;
    background: #0e0e0e;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.levensdoelen-icon-btn:hover {
    border-color: #e866e8;
    background: rgba(232, 102, 232, 0.1);
    transform: scale(1.1);
}

.levensdoelen-icon-btn.selected {
    border-color: #e866e8;
    background: rgba(232, 102, 232, 0.2);
    box-shadow: 0 0 12px rgba(232, 102, 232, 0.3);
}

/* Animation for notifications */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal styling for levensdoelen */
#levensdoelen-modal {
    display: none;
}

#levensdoelen-detail-modal {
    display: none;
}

#tab-reviews-fs { border-bottom-color: #cc7a2a !important; }
#tab-reviews-fs.active { color: #f5ad43 !important; background: rgba(204, 122, 42, 0.1) !important; }

#tab-herinnering-fs { border-bottom-color: #4a7aaa !important; }
#tab-herinnering-fs.active { color: #7a9ade !important; background: rgba(74, 122, 170, 0.1) !important; }

#tab-chatlog-fs { border-bottom-color: #c84a3a !important; }
#tab-chatlog-fs.active { color: #ff6b5b !important; background: rgba(200, 74, 58, 0.1) !important; }

#tab-search-fs { border-bottom-color: #666666 !important; color: #3a3a3a !important; }
#tab-search-fs.active { color: #999999 !important; background: rgba(102, 102, 102, 0.1) !important; }

/* Preview button styling - unified across all panels */
/* All styling is now handled by .preview-toggle class */

/* ===== IMPROVED TODO HEADER & BUTTONS ===== */
#todo-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #2a2a2a;
    background: linear-gradient(135deg, #1a1a1a 0%, #202020 100%);
    flex-shrink: 0;
}

#todo-header h2 {
    margin: 0;
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
}

#todo-header-right {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.todo-header-btn {
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #3a5a5a;
    background: #1a2a2a;
    color: #4abaaa;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.todo-header-btn:hover {
    border-color: #4abaaa;
    background: rgba(74, 186, 170, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(74, 186, 170, 0.15);
}

.todo-header-btn:active {
    transform: translateY(0);
}

.todo-add-btn-header {
    border-color: #2a5a6a;
    background: rgba(74, 186, 170, 0.08);
    font-weight: 600;
}

.todo-add-btn-header:hover {
    border-color: #4abaaa;
    background: rgba(74, 186, 170, 0.15);
    box-shadow: 0 0 12px rgba(74, 186, 170, 0.2);
}

#todo-filter-bar {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid #2a2a2a;
    flex-wrap: wrap;
    align-items: center;
    background: #151515;
}

.todo-filter-chip {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #2a3a3a;
    background: #0f1a1a;
    color: #666;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.todo-filter-chip:hover {
    border-color: #4abaaa;
    background: rgba(74, 186, 170, 0.08);
    color: #7ad4c4;
}

.todo-filter-chip.active {
    border-color: #4abaaa;
    background: rgba(74, 186, 170, 0.15);
    color: #4abaaa;
    font-weight: 600;
}

.todo-sort-chip {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #3a3a3a;
    background: transparent;
    color: #666;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
    margin-left: auto;
}

.todo-sort-chip:first-of-type {
    margin-left: auto;
}

.todo-sort-chip:hover {
    border-color: #666;
    color: #aaa;
    background: rgba(100, 100, 100, 0.1);
}

/* ===== UPDATER WARNING BANNER ===== */
#updater-warning-banner {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: linear-gradient(135deg, rgba(255,160,50,0.12) 0%, rgba(255,100,30,0.07) 100%);
    border: 1px solid rgba(255,140,40,0.35);
    border-radius: 12px;
    font-size: 13px;
    color: #ffb870;
    max-width: 660px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: -10px;
}
#updater-warning-banner.visible { display: flex; }
#updater-warning-icon { font-size: 16px; flex-shrink: 0; }
#updater-warning-text { flex: 1; font-weight: 500; }
#updater-warning-info-btn {
    background: none;
    border: 1.5px solid rgba(255,140,40,0.5);
    color: #ffb870;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
}
#updater-warning-info-btn:hover {
    background: rgba(255,140,40,0.2);
    border-color: #ffb870;
}

/* ===== UPDATER INFO MODAL ===== */
#updater-info-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
#updater-info-modal.visible { display: flex; }
#updater-info-box {
    background: #1a1a1a;
    border: 1px solid rgba(255,140,40,0.4);
    border-radius: 18px;
    padding: 32px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 16px 48px rgba(0,0,0,0.6);
}
#updater-info-title {
    font-size: 18px;
    font-weight: 700;
    color: #ffb870;
    margin-bottom: 18px;
}
#updater-info-body {
    font-size: 13px;
    color: #ccc;
    line-height: 1.7;
}
#updater-info-body ol {
    padding-left: 20px;
    margin: 10px 0;
}
#updater-info-body li { margin-bottom: 6px; }
#updater-info-body code {
    background: rgba(255,255,255,0.08);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
    color: #4abaaa;
}
#updater-info-body strong { color: #fff; }
#updater-info-footer {
    display: flex;
    gap: 10px;
    margin-top: 22px;
    flex-wrap: wrap;
}
#updater-info-footer button {
    flex: 1;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid #444;
    background: #222;
    color: #aaa;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    min-width: 120px;
}
#updater-info-footer button:hover { background: #2a2a2a; }

#start-menu-stamboom {
    border-color: #37503a;
    background: linear-gradient(135deg, #131815 0%, #18221a 100%);
}
#start-menu-stamboom:hover {
    border-color: #7fbe8b;
    box-shadow: 0 12px 28px rgba(0,0,0,0.5), 0 0 24px rgba(127,190,139,0.12);
}

#stamboom-sidebar {
    border-right: 1px solid #213021;
    background: linear-gradient(180deg, rgba(20,29,21,0.98) 0%, rgba(13,18,14,0.98) 100%);
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.stamboom-sidebar-top {
    padding: 18px;
    border-bottom: 1px solid #1b271c;
}
#stamboom-search,
.stamboom-form-grid input,
.stamboom-form-grid select,
.stamboom-form-group textarea,
#stamboom-gedcom-file {
    width: 100%;
    background: #131916;
    border: 1px solid #2d3a31;
    color: #e6eee8;
    border-radius: 10px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 13px;
    outline: none;
}
#stamboom-search:focus,
.stamboom-form-grid input:focus,
.stamboom-form-grid select:focus,
.stamboom-form-group textarea:focus {
    border-color: #7bbd8b;
    box-shadow: 0 0 0 3px rgba(123,189,139,0.1);
}
#stamboom-summary {
    margin-top: 10px;
    color: #7f9683;
    font-size: 12px;
    line-height: 1.5;
}
#stamboom-person-list {
    flex: 1;
    overflow: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.stamboom-person-row {
    width: 100%;
    text-align: left;
    border: 1px solid #28352b;
    background: linear-gradient(135deg, rgba(23,31,24,0.95) 0%, rgba(15,20,16,0.95) 100%);
    border-radius: 12px;
    padding: 12px 14px;
    color: #dbe7dd;
    cursor: pointer;
    transition: all 0.18s ease;
}
.stamboom-person-row:hover {
    border-color: #7bbd8b;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.24);
}
.stamboom-person-row-name {
    font-size: 14px;
    font-weight: 700;
}
.stamboom-person-row-meta {
    margin-top: 5px;
    color: #8ba08f;
    font-size: 12px;
}
#stamboom-canvas-panel {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at top, rgba(141,214,157,0.08), transparent 30%), linear-gradient(180deg, #101611 0%, #0d120d 100%);
}
#stamboom-zoom-controls {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;
    display: flex;
    gap: 8px;
}
#stamboom-zoom-controls button {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1px solid #324133;
    background: rgba(15,22,16,0.92);
    color: #dbe7dd;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,0,0,0.22);
}
#stamboom-zoom-controls button:hover {
    border-color: #7bbd8b;
}
#stamboom-canvas-scroll {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 20px;
    cursor: grab;
    user-select: none;
}
#stamboom-canvas-scroll.panning { cursor: grabbing; }
#stamboom-canvas-zoom {
    position: relative;
    transform-origin: top left;
}
#stamboom-canvas {
    position: relative;
    min-width: 100%;
    min-height: 100%;
    transform-origin: top left;
}
#stamboom-lines {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
}
#stamboom-nodes {
    position: absolute;
    inset: 0;
}
.stamboom-node {
    position: absolute;
    width: 188px;
    min-height: 90px;
    border: 1px solid #647a66;
    border-radius: 6px;
    text-align: left;
    padding: 10px 12px 10px 18px;
    background: linear-gradient(180deg, rgba(243,247,238,0.96) 0%, rgba(222,232,220,0.95) 100%);
    color: #243026;
    box-shadow: 0 6px 14px rgba(0,0,0,0.18);
    cursor: pointer;
    overflow: hidden;
}
.stamboom-node:hover {
    border-color: #89a98f;
    transform: translateY(-1px);
}
.stamboom-node.male {
    background: linear-gradient(180deg, rgba(227,238,247,0.98) 0%, rgba(204,221,235,0.96) 100%);
    border-color: #88a6bc;
}
.stamboom-node.female {
    background: linear-gradient(180deg, rgba(248,229,241,0.98) 0%, rgba(238,209,230,0.96) 100%);
    border-color: #c597b4;
}
.stamboom-node-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: #97b28e;
}
.stamboom-node.male .stamboom-node-accent { background: #7ea9c9; }
.stamboom-node.female .stamboom-node-accent { background: #d48fbd; }
.stamboom-node.deceased {
    border-color: #000;
    border-width: 2px;
    background: linear-gradient(180deg, rgba(235, 235, 235, 0.98) 0%, rgba(210, 210, 210, 0.95) 100%);
}
.stamboom-node.deceased:hover {
    border-color: #000;
}
.stamboom-node-name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}
.stamboom-node-meta,
.stamboom-node-extra {
    margin-top: 6px;
    font-size: 11px;
    color: #5a675d;
}
.stamboom-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.child-line {
    stroke: rgba(90, 96, 92, 0.9);
    stroke-width: 1.6;
}
.partner-line {
    stroke: rgba(90, 96, 92, 0.9);
    stroke-width: 1.6;
}
.sibling-line,
.parent-drop-line {
    stroke: rgba(90, 96, 92, 0.9);
    stroke-width: 1.6;
}
.partner-line.divorced-line {
    stroke-dasharray: 6 5;
}
.stamboom-union-dot {
    fill: #5a605c;
}
#stamboom-empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #8ea392;
    text-align: center;
    padding: 28px;
}
.stamboom-empty-icon { font-size: 52px; }
.stamboom-empty-title {
    font-size: 22px;
    font-weight: 700;
    color: #dbe7dd;
}
.stamboom-empty-text {
    max-width: 420px;
    line-height: 1.6;
}
#stamboom-person-modal,
#stamboom-import-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2200;
    background: rgba(0,0,0,0.58);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
#stamboom-person-modal.visible,
#stamboom-import-modal.visible {
    display: flex;
}
#stamboom-person-box {
    width: min(920px, 100%);
    max-height: 90vh;
    overflow: auto;
    background: linear-gradient(180deg, #141a15 0%, #0f1310 100%);
    border: 1px solid #304033;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
#stamboom-import-box { width: min(560px, 100%); }
.stamboom-modal-header,
.stamboom-modal-footer {
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.stamboom-modal-header {
    border-bottom: 1px solid #233125;
    justify-content: space-between;
    color: #edf5ef;
    font-size: 18px;
    font-weight: 700;
}
.stamboom-modal-header button {
    border: none;
    background: transparent;
    color: #9fb7a4;
    font-size: 20px;
    cursor: pointer;
}
.stamboom-modal-body { padding: 20px 22px; }
.stamboom-tabs {
    display: flex;
    border-bottom: 1px solid #233125;
    margin-bottom: 20px;
}
.stamboom-tab {
    background: none;
    border: none;
    color: #92a693;
    padding: 12px 16px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}
.stamboom-tab.active {
    color: #cbf0d2;
    border-bottom-color: #6fa97a;
}
.stamboom-tab:hover {
    color: #b8d4ba;
}
.stamboom-tab-content {
    display: none;
}
.stamboom-tab-content.active {
    display: block;
}
.stamboom-modal-footer { border-top: 1px solid #233125; }
.stamboom-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.stamboom-form-grid label,
.stamboom-form-group label {
    display: block;
    color: #9fb7a4;
    font-size: 12px;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.stamboom-form-group { margin-top: 18px; }
.stamboom-relation-selector {
    position: relative;
}
.stamboom-relation-selector input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #304033;
    border-radius: 8px;
    background: #1a1a1a;
    color: #dbe7dd;
    font-family: inherit;
    font-size: 13px;
    outline: none;
}
.stamboom-relation-selector input:focus {
    border-color: #6fa97a;
}
.stamboom-relation-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1a1a1a;
    border: 1px solid #304033;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}
.stamboom-relation-results.show {
    display: block;
}
.stamboom-relation-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #233125;
    color: #dbe7dd;
    font-size: 13px;
}
.stamboom-relation-item:hover {
    background: rgba(141,214,157,0.1);
}
.stamboom-relation-item:last-child {
    border-bottom: none;
}
.stamboom-selected-relations {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.stamboom-selected-relation {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(141,214,157,0.15);
    border: 1px solid rgba(141,214,157,0.3);
    border-radius: 16px;
    color: #cbf0d2;
    font-size: 12px;
    cursor: pointer;
}
.stamboom-selected-relation:hover {
    background: rgba(141,214,157,0.2);
}
.stamboom-selected-relation-remove {
    color: #8a8a8a;
    font-weight: bold;
    font-size: 14px;
    line-height: 1;
}
.stamboom-selected-relation-remove:hover {
    color: #aaa;
}
.stamboom-empty-options,
.stamboom-helper-text {
    color: #92a693;
    font-size: 13px;
    line-height: 1.6;
}
.stamboom-primary-btn,
.stamboom-secondary-btn {
    border-radius: 10px;
    padding: 10px 16px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    border: 1px solid transparent;
}
.stamboom-primary-btn {
    background: rgba(141,214,157,0.12);
    border-color: #6fa97a;
    color: #cbf0d2;
}
.stamboom-secondary-btn {
    background: rgba(255,255,255,0.04);
    border-color: #314034;
    color: #c7d7ca;
}
@media (max-width: 980px) {
    #stamboom-content { grid-template-columns: 1fr; }
    #stamboom-sidebar {
        max-height: 280px;
        border-right: none;
        border-bottom: 1px solid #213021;
    }
    .stamboom-form-grid { grid-template-columns: 1fr; }
}