/* Help button in topbar */
.court-help-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--border-default, #dfe2e8);
    border-radius: 6px;
    background: var(--surface-1, #fff); color: var(--fg-2, #525a68);
    font-size: 12.5px; font-family: inherit; cursor: pointer;
}
.court-help-btn:hover { background: var(--surface-2, #f6f7f9); border-color: var(--dk-accent, #f9bc29); }
.court-help-btn[data-help-toggle="open"] {
    background: var(--dk-accent, #f9bc29); color: #14181f; border-color: var(--dk-accent);
}

/* Slide-in panel */
.court-help-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 480px; max-width: 90vw;
    background: var(--surface-1, #fff);
    box-shadow: -8px 0 24px rgba(20, 24, 31, .12);
    display: flex; flex-direction: column;
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 200ms ease-out;
    border-left: 1px solid var(--border-default, #dfe2e8);
}
.court-help-panel--open { transform: translateX(0); }

.court-help-header {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-subtle, #eef0f4);
    background: var(--surface-2, #f6f7f9);
}
.court-help-title { flex: 1; font-weight: 600; font-size: 14px; color: var(--fg-1, #14181f); }
.court-help-close {
    background: transparent; border: none; cursor: pointer;
    color: var(--fg-3, #6c7383); font-size: 18px; line-height: 1; padding: 4px 8px;
}
.court-help-close:hover { color: var(--fg-1); }

.court-help-nav {
    display: flex; gap: 4px; padding: 8px 12px; flex-wrap: wrap;
    border-bottom: 1px solid var(--border-subtle, #eef0f4);
    background: var(--surface-2, #f6f7f9);
}
.court-help-nav button {
    cursor: pointer; padding: 3px 9px;
    border: 1px solid var(--border-default, #dfe2e8); border-radius: 999px;
    background: var(--surface-1, #fff); font-size: 11.5px; font-family: inherit; color: var(--fg-3);
}
.court-help-nav button:hover { background: var(--surface-2); border-color: var(--dk-accent); color: var(--fg-1); }
.court-help-nav button.active { background: var(--dk-accent); color: #14181f; border-color: var(--dk-accent); font-weight: 600; }

.court-help-body {
    flex: 1; overflow-y: auto; padding: 18px 22px;
    font-size: 13.5px; line-height: 1.55; color: var(--fg-2);
}
.court-help-body h1 { font-size: 22px; margin: 0 0 12px; color: var(--fg-1); font-family: var(--font-display); }
.court-help-body h2 { font-size: 16px; margin: 22px 0 8px; color: var(--fg-1); font-family: var(--font-display); }
.court-help-body h3 { font-size: 13.5px; margin: 16px 0 6px; color: var(--fg-1); }
.court-help-body p { margin: 0 0 10px; }
.court-help-body ul, .court-help-body ol { margin: 0 0 10px; padding-left: 22px; }
.court-help-body li { margin-bottom: 4px; }
.court-help-body code { font-family: var(--font-mono); font-size: 12px; background: var(--surface-2); padding: 1px 5px; border-radius: 3px; color: var(--fg-1); }
.court-help-body pre { background: #14181f; color: #e1e6eb; padding: 10px 12px; border-radius: 6px; overflow-x: auto; font-size: 11.5px; position: relative; }
.court-help-body pre code { background: transparent; color: inherit; padding: 0; }
.court-help-body a { color: var(--dk-accent-dark, #b8881e); text-decoration: underline; }
.court-help-body a:hover { color: var(--dk-accent, #f9bc29); }
.court-help-body blockquote {
    margin: 10px 0; padding: 8px 12px;
    border-left: 3px solid var(--dk-accent); background: rgba(249, 188, 41, .08);
    border-radius: 0 4px 4px 0; color: var(--fg-2);
}
.court-help-body table { border-collapse: collapse; margin: 10px 0; font-size: 12.5px; }
.court-help-body th, .court-help-body td {
    border: 1px solid var(--border-default); padding: 5px 9px; text-align: left;
}
.court-help-body th { background: var(--surface-2); font-weight: 600; color: var(--fg-1); }
.court-help-body hr { border: none; border-top: 1px solid var(--border-subtle); margin: 18px 0; }

/* Wiki: copy/playground-knoppen op code blocks */
.court-help-codebar {
    position: absolute; top: 6px; right: 6px;
    display: flex; gap: 4px;
    opacity: 0; transition: opacity 120ms ease-out;
}
.court-help-body pre:hover .court-help-codebar { opacity: 1; }
.court-help-codebar button {
    cursor: pointer; padding: 2px 8px;
    border: 1px solid rgba(225, 230, 235, .25); border-radius: 4px;
    background: rgba(225, 230, 235, .12); color: #e1e6eb;
    font-size: 10.5px; font-family: inherit;
}
.court-help-codebar button:hover { background: rgba(249, 188, 41, .85); border-color: transparent; color: #14181f; }

/* Wiki: brede modus voor de split-pane editor */
.court-help-panel--wide { width: 940px; }

/* Wiki: toolbar tussen nav en body — meta + bewerk-acties */
.court-help-toolbar {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 14px;
    border-bottom: 1px solid var(--border-subtle, #eef0f4);
    background: var(--surface-2, #f6f7f9);
    font-size: 11.5px; color: var(--fg-3, #6c7383);
}
.court-help-toolbar__meta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.court-help-toolbar__actions { display: flex; gap: 4px; }
.court-help-toolbar__actions button {
    cursor: pointer; padding: 3px 9px;
    border: 1px solid var(--border-default, #dfe2e8); border-radius: 6px;
    background: var(--surface-1, #fff); font-size: 11.5px; font-family: inherit; color: var(--fg-3);
}
.court-help-toolbar__actions button:hover { background: var(--surface-2); border-color: var(--dk-accent); color: var(--fg-1); }

/* Wiki: split-pane editor (markdown links, live preview rechts) */
.court-help-editor { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.court-help-editor__fields { display: flex; gap: 10px; }
.court-help-editor__fields label {
    flex: 1; display: flex; flex-direction: column; gap: 3px;
    font-size: 11.5px; color: var(--fg-3);
}
.court-help-editor__fields input, .court-help-editor__fields select {
    padding: 6px 10px; border: 1px solid var(--border-default, #dfe2e8);
    border-radius: 6px; font-size: 13px; font-family: inherit; color: var(--fg-1);
    background: var(--surface-1, #fff);
}
.court-help-editor__fields input[readonly] { background: var(--surface-2, #f6f7f9); color: var(--fg-3); }
/* "Zichtbaar voor klanten": een vinkje, geen veld — op één regel, aan het eind van de rij. */
.court-help-editor__fields label.court-help-editor__check {
    flex: 0 0 auto; flex-direction: row; align-items: center; align-self: flex-end;
    gap: 6px; padding-bottom: 8px; font-size: 12.5px; color: var(--fg-2); white-space: nowrap;
}
.court-help-editor__fields label.court-help-editor__check input { padding: 0; }
.court-help-editor__fields input:focus {
    outline: none; border-color: var(--dk-accent, #f9bc29);
    box-shadow: 0 0 0 3px rgba(249, 188, 41, .15);
}
.court-help-editor__split {
    flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 0;
}
.court-help-editor__split textarea {
    resize: none; padding: 10px 12px;
    border: 1px solid var(--border-default, #dfe2e8); border-radius: 6px;
    font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--fg-1);
}
.court-help-editor__split textarea:focus {
    outline: none; border-color: var(--dk-accent, #f9bc29);
    box-shadow: 0 0 0 3px rgba(249, 188, 41, .15);
}
.court-help-editor__preview {
    overflow-y: auto; padding: 10px 14px;
    border: 1px solid var(--border-subtle, #eef0f4); border-radius: 6px;
    background: var(--surface-2, #f6f7f9);
}
.court-help-editor__footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}
.court-help-editor__status { flex: 1; font-size: 12px; color: var(--dk-danger, #c0392b); }
.court-help-editor__footer button, .court-help-editor__primary {
    cursor: pointer; padding: 6px 14px;
    border: 1px solid var(--border-default, #dfe2e8); border-radius: 6px;
    background: var(--surface-1, #fff); font-size: 12.5px; font-family: inherit; color: var(--fg-2);
}
.court-help-editor__primary {
    background: var(--dk-accent, #f9bc29); border-color: var(--dk-accent, #f9bc29);
    color: #14181f; font-weight: 600;
}
.court-help-editor__primary:hover { filter: brightness(.96); }
.court-help-editor__danger { color: var(--dk-danger, #c0392b); margin-right: auto; }
.court-help-editor__danger:hover { border-color: var(--dk-danger, #c0392b); }

/* Backdrop dim */
.court-help-backdrop {
    position: fixed; inset: 0;
    background: rgba(20, 24, 31, .25);
    z-index: 999;
    opacity: 0; pointer-events: none;
    transition: opacity 200ms ease-out;
}
.court-help-backdrop--open { opacity: 1; pointer-events: auto; }

/* Search bar above the QUICK_LINKS chips */
.court-help-search {
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-subtle, #eef0f4);
    background: var(--surface-2, #f6f7f9);
}
.court-help-search__input {
    width: 100%; padding: 6px 10px;
    border: 1px solid var(--border-default, #dfe2e8);
    border-radius: 6px; background: var(--surface-1, #fff);
    font-size: 13px; font-family: inherit;
    color: var(--fg-1);
}
.court-help-search__input:focus {
    outline: none; border-color: var(--dk-accent, #f9bc29);
    box-shadow: 0 0 0 3px rgba(249, 188, 41, .15);
}

/* Search-results list (renders into .court-help-body) */
.court-help-results { list-style: none; padding: 0; margin: 0; }
.court-help-results li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle, #eef0f4);
}
.court-help-results li:last-child { border-bottom: 0; }
.court-help-results__title {
    display: block; font-weight: 600; font-size: 14px;
    color: var(--fg-1, #14181f); text-decoration: none; margin-bottom: 4px;
}
.court-help-results__title:hover { color: var(--dk-accent-dark, #b8881e); text-decoration: underline; }
.court-help-results__snippet {
    color: var(--fg-3, #6c7383); font-size: 12.5px; line-height: 1.45;
}
.court-help-results mark {
    background: rgba(249, 188, 41, .35); color: inherit; padding: 0 1px; border-radius: 2px;
}

/* Telefoon: het paneel over de volle breedte; 90vw liet een strook pagina staan die niets doet
   (klantmockup). Ook het bredere editorpaneel van het team valt dan binnen het scherm. */
@media (max-width: 600px) {
    .court-help-panel { width: 100%; max-width: 100%; }
}