/* Koning te Rijk-huisstijl voor de interne chat (/app) en het beheer (/admin): dezelfde kleuren, letters en
   licht/donker als planning en de andere KTR-sites. Alleen actief met <html class="ktr">; de chatwidget op de
   websites laadt dit bestand niet en houdt zijn eigen kleuren per widgetprofiel.
   styles.css gebruikt var(--k-…, oude kleur); hier krijgen die variabelen hun KTR-waarde. */

/* ============ Tokens ============ */
html.ktr {
    --navy-950: #0b1030; --navy-900: #121a44; --navy-800: #1b2560; --navy-700: #27347d;
    --gold-600: #a8821a; --gold-500: #d4ad3a; --gold-400: #e6c565; --gold-100: #faf1d6;
    --display: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
    --sans: system-ui, -apple-system, 'Segoe UI', sans-serif;

    --k-bg: #f5f7fb;
    --k-card: #ffffff;
    --k-card-2: #f8fafd;
    --k-ink: #16203f;
    --k-sub: #56607d;
    --k-faint: #8b93ab;
    --k-line: rgba(20, 24, 52, .11);
    --k-brand: var(--navy-800);
    --k-accent: var(--navy-700);
    --k-accent-bg: #eef1fb;
    --k-shadow: 0 1px 1px rgba(16, 20, 48, .03), 0 10px 30px -12px rgba(16, 20, 48, .14);
    --brand: var(--navy-800);
    --border: var(--k-line);
    --muted: var(--k-sub);
    color-scheme: light;
}
html.ktr[data-theme="dark"] {
    --k-bg: #0a0e26;
    --k-card: #121839;
    --k-card-2: #171e48;
    --k-ink: #eef0fb;
    --k-sub: #a9aecb;
    --k-faint: #767da4;
    --k-line: rgba(255, 255, 255, .1);
    --k-brand: var(--navy-700);
    --k-accent: var(--gold-400);
    --k-accent-bg: rgba(212, 173, 58, .14);
    --k-shadow: 0 10px 30px -12px rgba(0, 0, 0, .65);
    --brand: var(--navy-700);
    color-scheme: dark;
}

/* ============ Basis ============ */
html.ktr, html.ktr body { font-family: var(--sans); color: var(--k-ink); }
html.ktr body { background: var(--k-bg); -webkit-font-smoothing: antialiased; }
html.ktr :focus-visible { outline: 3px solid var(--gold-400); outline-offset: 2px; }
html.ktr .eyebrow { letter-spacing: .16em; text-transform: uppercase; color: var(--gold-600); font-weight: 800; }
html.ktr[data-theme="dark"] .eyebrow { color: var(--gold-400); }
html.ktr input, html.ktr select, html.ktr textarea { background: var(--k-card); color: var(--k-ink); border-color: var(--k-line); }
html.ktr input::placeholder, html.ktr textarea::placeholder { color: var(--k-faint); }

/* Thema-knop (maantje), zoals op de andere sites */
.ktr-theme {
    border: 1px solid var(--k-line); background: var(--k-card); color: var(--k-sub);
    width: 38px; height: 38px; border-radius: 12px; font-size: 16px; line-height: 1; cursor: pointer; flex: none;
}
.ktr-theme:hover { color: var(--navy-800); border-color: var(--k-sub); }
html.ktr[data-theme="dark"] .ktr-theme:hover { color: #fff; }

/* ============ Interne chat (/app) ============ */
html.ktr .user-app-body {
    --app-ink: var(--k-ink); --app-muted: var(--k-sub); --app-line: var(--k-line); --app-soft: var(--k-card-2);
    --app-blue: var(--k-accent); --app-blue-soft: var(--k-accent-bg);
    background: var(--k-bg);
}

/* Inloggen */
html.ktr .user-login-view { background: radial-gradient(circle at top, rgba(212, 173, 58, .14), var(--k-bg) 48%); }
html.ktr .user-login-card { border-radius: 22px; border-color: var(--k-line); box-shadow: var(--k-shadow); }
html.ktr .user-login-card h1 { font-family: var(--display); font-weight: 400; font-size: 36px; letter-spacing: 0; }
html.ktr .user-login-card input { border-color: var(--k-line); }
html.ktr .user-login-card input:focus { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(212, 173, 58, .22); }
html.ktr .user-login-card button[type="submit"] { background: var(--navy-800); border-radius: 12px; }

/* Zijbalk: wit zoals de navigatierail van planning; in het donkere thema navy */
html.ktr .conversation-sidebar {
    background: var(--k-card); border-right: 1px solid var(--k-line); color: var(--k-ink);
    box-shadow: 4px 0 24px -18px rgba(22, 32, 63, .25);
}
html.ktr .sidebar-brand { height: 72px; gap: 12px; padding: 14px 16px; }
html.ktr .sidebar-brand .ktr-mark {
    width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none;
    background: #fff; border: 1px solid var(--k-line); box-shadow: 0 8px 18px -12px rgba(27, 37, 96, .45);
}
html.ktr .sidebar-brand .ktr-mark img { width: 30px; height: 30px; object-fit: contain; }
html.ktr .sidebar-brand .ktr-brand-copy { display: grid; gap: 2px; min-width: 0; }
html.ktr .sidebar-brand .ktr-brand-copy small { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-600); font-weight: 800; }
html.ktr .sidebar-brand strong { font-family: var(--display); font-weight: 400; font-size: 21px; color: var(--k-ink); }
html.ktr #sidebar-close { color: var(--k-sub); }
html.ktr .sidebar-new-chat {
    background: var(--navy-800); border: 0; color: #fff; border-radius: 12px;
    box-shadow: 0 10px 22px -12px rgba(27, 37, 96, .7);
}
html.ktr .sidebar-new-chat:hover { background: var(--navy-700); }
html.ktr .sidebar-search input { background: var(--k-card-2); border-color: var(--k-line); color: var(--k-ink); }
html.ktr .sidebar-section-label { color: var(--gold-600); letter-spacing: .16em; font-weight: 800; }
html.ktr .conversation-link { color: var(--k-ink); border-radius: 12px; }
html.ktr .conversation-link:hover { background: var(--k-card-2); }
html.ktr .conversation-link.active {
    background: linear-gradient(145deg, var(--navy-700), var(--navy-900)); color: #fff;
    box-shadow: 0 10px 22px -12px rgba(27, 37, 96, .7), inset 3px 0 0 var(--gold-500);
}
html.ktr .conversation-link-time { color: var(--k-faint); }
html.ktr .conversation-link.active .conversation-link-time, html.ktr .conversation-link.active .conversation-delete { color: #c6cbe6; }
html.ktr .conversation-delete { color: var(--k-faint); }
html.ktr .sidebar-account { border-top-color: var(--k-line); }
html.ktr .sidebar-account .account-copy strong { color: var(--k-ink); }
html.ktr .sidebar-account .account-copy small { color: var(--k-faint); }
html.ktr .account-actions { align-items: center; }
html.ktr .account-actions a, html.ktr .account-actions button { color: var(--k-sub); font-size: 11px; font-weight: 600; }
html.ktr .account-actions a:hover, html.ktr .account-actions button:hover { color: var(--navy-800); }
html.ktr .account-actions .ktr-theme {
    margin-left: auto; width: 32px; height: 32px; padding: 0; font-size: 14px; border-radius: 10px;
    background: var(--k-card-2); border: 1px solid var(--k-line);
}

html.ktr[data-theme="dark"] .conversation-sidebar { background: var(--navy-950); border-right-color: rgba(255, 255, 255, .05); box-shadow: none; color: #e8ebf8; }
html.ktr[data-theme="dark"] .sidebar-brand .ktr-mark { background: linear-gradient(145deg, #fff, #e9e6dc); border: 0; }
html.ktr[data-theme="dark"] .sidebar-brand .ktr-brand-copy small,
html.ktr[data-theme="dark"] .sidebar-section-label { color: var(--gold-400); }
html.ktr[data-theme="dark"] .sidebar-brand strong, html.ktr[data-theme="dark"] .sidebar-account .account-copy strong { color: #fff; }
html.ktr[data-theme="dark"] .sidebar-new-chat {
    background: linear-gradient(145deg, var(--gold-400), var(--gold-500)); color: var(--navy-950);
    box-shadow: 0 10px 22px -12px rgba(212, 173, 58, .8);
}
html.ktr[data-theme="dark"] .sidebar-search input { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); color: #fff; }
html.ktr[data-theme="dark"] .conversation-link { color: #dfe3f5; }
html.ktr[data-theme="dark"] .conversation-link:hover { background: rgba(255, 255, 255, .07); }
html.ktr[data-theme="dark"] .conversation-link.active { background: linear-gradient(145deg, var(--gold-400), var(--gold-500)); color: var(--navy-950); box-shadow: none; }
html.ktr[data-theme="dark"] .conversation-link.active .conversation-link-time,
html.ktr[data-theme="dark"] .conversation-link.active .conversation-delete { color: var(--navy-900); }
html.ktr[data-theme="dark"] .account-actions a, html.ktr[data-theme="dark"] .account-actions button { color: #c6cbe6; }
html.ktr[data-theme="dark"] .account-actions a:hover, html.ktr[data-theme="dark"] .account-actions button:hover { color: #fff; }

/* Gespreksvenster */
html.ktr .user-chat-main { background: var(--k-bg); }
html.ktr .user-chat-header { height: 72px; background: var(--k-card); border-bottom-color: var(--k-line); }
html.ktr .chat-title-block strong { font-family: var(--display); font-weight: 400; font-size: 20px; }
html.ktr .chat-title-block span { color: var(--k-sub); }
html.ktr .header-new-chat { border-color: var(--k-line); border-radius: 12px; padding: 9px 14px; font-size: 12px; color: var(--k-ink); }
html.ktr .header-new-chat:hover { border-color: var(--k-sub); }
html.ktr .mobile-menu-button { color: var(--k-ink); }
html.ktr .app-empty h1 { font-family: var(--display); font-weight: 400; font-size: 42px; letter-spacing: 0; line-height: 1.05; }
html.ktr .app-empty .app-logo { box-shadow: 0 12px 26px -14px rgba(27, 37, 96, .6); border-radius: 16px; }
html.ktr .message-author { color: var(--k-ink); }
html.ktr .app-message.user .message-text { background: var(--navy-800); color: #fff; border-radius: 18px 18px 5px 18px; }
html.ktr .app-message.user .message-avatar { background: var(--gold-500); color: var(--navy-950); }
html.ktr .app-source-panel { border-left-color: var(--gold-500); color: var(--k-sub); }
html.ktr .app-composer-wrap { background: linear-gradient(transparent, var(--k-bg) 22%); }
html.ktr .app-composer {
    background: var(--k-card); border-color: var(--k-line); border-radius: 22px; box-shadow: var(--k-shadow);
}
html.ktr .app-composer:focus-within { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(212, 173, 58, .18), var(--k-shadow); }
html.ktr .app-send { background: var(--navy-800) !important; border-radius: 12px !important; }
html.ktr .app-send:hover:not(:disabled) { background: var(--navy-700) !important; }
html.ktr[data-theme="dark"] .app-send { background: linear-gradient(145deg, var(--gold-400), var(--gold-500)) !important; color: var(--navy-950) !important; }
html.ktr .app-disclaimer { color: var(--k-faint); }
html.ktr[data-theme="dark"] .app-message.user .message-text { background: var(--navy-700); }
html.ktr .conversation-link-main, html.ktr .conversation-link-title { color: inherit; }
html.ktr .app-composer textarea { border: 0; outline: none; background: transparent; box-shadow: none; }
html.ktr .app-feedback button, html.ktr .app-source-actions button, html.ktr .app-source-actions a {
    background: var(--k-card); border-color: var(--k-line); color: var(--k-sub); border-radius: 9px;
}

/* ============ Beheer (/admin) ============ */
html.ktr .admin-body { background: var(--k-bg); }
html.ktr .admin-topbar, html.ktr .admin-sidebar, html.ktr .card {
    background: var(--k-card); border-color: var(--k-line); box-shadow: var(--k-shadow); border-radius: 22px;
}
html.ktr .admin-brand-heading img, html.ktr .admin-brand img {
    border-radius: 14px; background: linear-gradient(145deg, #fff, #e9e6dc); padding: 5px; object-fit: contain;
    box-shadow: 0 8px 18px -12px rgba(27, 37, 96, .45); border: 1px solid var(--k-line);
}
html.ktr .admin-brand-heading h1, html.ktr .admin-login-card h1 { font-family: var(--display); font-weight: 400; letter-spacing: 0; }
html.ktr .page-heading h2 { font-family: var(--display); font-weight: 400; letter-spacing: 0; font-size: 38px; line-height: 1.05; }
html.ktr .page-kicker, html.ktr .card-kicker, html.ktr .sidebar-label, html.ktr .nav-group-label {
    color: var(--gold-600); letter-spacing: .16em; font-weight: 800;
}
html.ktr[data-theme="dark"] .page-kicker, html.ktr[data-theme="dark"] .card-kicker,
html.ktr[data-theme="dark"] .sidebar-label, html.ktr[data-theme="dark"] .nav-group-label { color: var(--gold-400); }
html.ktr .card h3, html.ktr .card-heading h3 { font-family: var(--display); font-weight: 400; letter-spacing: 0; }

/* Navigatie links: zoals de rail van planning (actief = navy met gouden streep). styles.css gebruikt hier
   !important, dus deze regels ook. */
html.ktr .admin-body .admin-page-nav button { color: var(--k-sub) !important; border-radius: 12px !important; }
html.ktr .admin-body .admin-page-nav button:hover { background: var(--k-card-2) !important; color: var(--k-ink) !important; }
html.ktr .admin-body .admin-page-nav .nav-icon { background: var(--k-card-2); color: var(--k-sub); }
html.ktr .admin-body .admin-page-nav button.active {
    background: linear-gradient(145deg, var(--navy-700), var(--navy-900)) !important; color: #fff !important;
    box-shadow: 0 10px 22px -12px rgba(27, 37, 96, .7), inset 3px 0 0 var(--gold-500) !important;
}
html.ktr .admin-body .admin-page-nav button.active .nav-icon { background: rgba(255, 255, 255, .14); color: var(--gold-400); }
html.ktr .admin-body .admin-page-nav button::before { display: none; }
html.ktr[data-theme="dark"] .admin-body .admin-page-nav button.active {
    background: linear-gradient(145deg, var(--gold-400), var(--gold-500)) !important; color: var(--navy-950) !important; box-shadow: none !important;
}
html.ktr[data-theme="dark"] .admin-body .admin-page-nav button.active .nav-icon { background: rgba(11, 16, 48, .14); color: var(--navy-950); }

/* Knoppen: primair navy (donker: goud), secundair wit met lijn */
html.ktr .button { background: var(--navy-800); border-color: var(--navy-800); color: #fff; border-radius: 12px; }
html.ktr .button:hover { background: var(--navy-700); }
html.ktr .button.secondary { background: var(--k-card); border: 1px solid var(--k-line); color: var(--k-ink); }
html.ktr .button.secondary:hover { border-color: var(--k-sub); background: var(--k-card); }
html.ktr .button.danger, html.ktr .button.secondary.danger { color: #c23b3b; }
html.ktr[data-theme="dark"] .button:not(.secondary) { background: linear-gradient(145deg, var(--gold-400), var(--gold-500)); border-color: transparent; color: var(--navy-950); }
html.ktr .admin-top-actions { align-items: center; }

/* Mobiel: knop "Nieuw gesprek" blijft een plusje, kop iets lager */
@media (max-width: 850px) {
    html.ktr .header-new-chat { font-size: 0; padding: 6px 10px; }
    html.ktr .user-chat-header { height: 62px; }
    html.ktr .chat-title-block strong { font-size: 18px; }
    html.ktr .app-empty h1 { font-size: 32px; }
    html.ktr .page-heading h2 { font-size: 30px; }
}