/* Auto-split from styles.css lines 323-2134 */

/* ── Page layout ─────────────────────────────────────────── */

.app-layout, .app-main {
    max-width: 1440px;
    margin: 0 auto;
    padding: 18px 18px 148px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* The chat page only — its left/right sidebars are fixed-width
   (--conv-w/--sidebar-w) and the middle "1fr" column in .home-grid absorbs
   all remaining space, so removing the cap here lets all three panels span
   the full viewport on wide screens instead of floating in a centered
   column. Other pages (settings/library/manual) keep the 1440px cap above —
   their single/two-column content would look odd stretched edge to edge. */
.app-main--chat {
    max-width: none;
}

main { margin-top: 0; }

.main-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Home 3-column grid ──────────────────────────────────── */

.home-grid {
    display: grid;
    grid-template-columns: var(--conv-w) 1fr var(--sidebar-w);
    gap: 14px;
    align-items: start;
    /* As a flex item of .app-main (column direction), a grid container
       defaults to a content-based minimum width unless told otherwise —
       on narrow screens that silently forces the whole page (and anything
       sharing its containing block, like the fixed header/ask-bar) wider
       than the viewport. */
    min-width: 0;
}

.home-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.home-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    top: 14px;
    height: calc(100vh - 76px);
    overflow: hidden;
    overflow-x: hidden;
}

/* Documents are rendered in the Bronnen drawer. */

/* Slaagkans widget — compact, never grows */
#slaagkans-card { flex-shrink: 0; }

/* References card fills remaining sidebar height and scrolls internally */
#references-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#references-card h2 { flex-shrink: 0; }

#references-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
}

/* Always show references card when it has content */
#references-card:not(:empty) {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
}

#references-content::-webkit-scrollbar { width: 5px; }
#references-content::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
#references-content::-webkit-scrollbar-track { background: transparent; }

/* ── Card ────────────────────────────────────────────────── */

.card {
    background: var(--surface);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.card h2,
.card h1 {
    margin: 0 0 16px;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}

.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
}

.login-card {
    width: min(420px, 100%);
    max-width: 420px;
    border-radius: calc(var(--r) + 2px);
    padding: 26px 24px;
}

@media (max-width: 560px) {
    .login-page {
        min-height: 100vh;
        min-height: 100dvh;
        padding: 16px 12px;
        align-items: center;
    }

    .login-card {
        width: 100%;
        max-width: 360px;
        padding: 20px 16px;
    }

    .login-card h1 {
        margin-bottom: 12px;
        font-size: 0.98rem;
    }

    .login-form {
        gap: 10px;
    }

    .login-hint {
        margin-top: 14px;
        font-size: 0.84rem;
    }
}

.login-form {
    display: grid;
    gap: 14px;
}

.login-hint {
    margin-top: 18px;
    font-size: 0.9rem;
    color: #5B6570;
    line-height: 1.5;
}

/* De wenk vlak onder de melding hoort daar zichtbaar bij te horen. Met de
   standaard 18px erboven zweeft hij tussen de melding en het formulier in, en
   dan leest hij als een derde losse regel in plaats van als het vervolg op wat
   er net gezegd is. */
.login-hint--wenk {
    margin-top: -6px;
    margin-bottom: 16px;
}

.login-hint a,
.login-hint .link-button {
    color: var(--blue);
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 138, 76, 0.22);
}

/* Foutdetails op de validatiefoutpagina (error_handlers.py, 422) — dezelfde
   kaart als het inlogscherm, dus dezelfde tekstkleur en afstand. */
.validation-error-list {
    margin: 4px 0 0;
    padding-left: 18px;
    font-size: 0.86rem;
    color: #5B6570;
    line-height: 1.6;
}

.login-hint a:hover,
.login-hint .link-button:hover {
    color: var(--blue-2);
}

.link-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
}

.link-button:focus-visible {
    outline: 2px solid var(--blue-2);
    outline-offset: 2px;
}

.login-card code {
    display: block;
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(248, 251, 255, 0.95);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 0.82rem;
    color: var(--text-2);
    overflow-x: auto;
}

/* ── Page banners ────────────────────────────────────────── */

.page-message, .page-banner {
    padding: 9px 15px;
    border-radius: var(--r-sm);
    font-size: 0.86rem;
    font-weight: 500;
}

.page-message-success, .page-banner--success {
    background: var(--ok-bg); border: 1px solid var(--ok-bdr); color: var(--ok);
}
.page-message-error, .page-banner--error {
    background: var(--err-bg); border: 1px solid var(--err-bdr); color: var(--err);
}
.page-message-warning, .page-banner--warn {
    background: var(--warn-bg); border: 1px solid var(--warn-bdr); color: var(--warn);
}
.page-message-info, .page-banner--info {
    background: var(--blue-bg); border: 1px solid rgba(201, 138, 76,0.18); color: var(--blue);
}

/* ── Form controls ───────────────────────────────────────── */

input[type="text"],
input[type="number"],
input[type="url"],
input[type="email"],
textarea,
select {
    width: 100%;
    padding: 8px 11px;
    /* Zie --control-border in 00-tokens-base.css: 3:1, zoals WCAG 1.4.11
       vraagt voor de rand die een bedieningselement aanwijst. */
    border: 1px solid var(--control-border);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.90);
    color: var(--text);
    font-family: inherit;
    font-size: 0.88rem;
    transition: border-color 0.14s, box-shadow 0.14s;
    outline: none;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
    /* De gloed alleen is niet genoeg: die haalt 1,11:1. De rand draagt de
       zichtbaarheid, en die moet 3:1 halen. */
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 3px rgba(201, 138, 76, 0.22);
}

textarea { resize: vertical; line-height: 1.55; }

label {
    display: block;
    font-size: 0.81rem;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 5px;
}

form { display: flex; flex-direction: column; gap: 9px; }

/* ── Shared layout primitives ───────────────────────────── */

.nav-inline-form { margin: 0; }

.audit-inline-title { display: inline; }

.manual-hero-title {
    font-size: 1.15rem;
    margin-bottom: 8px;
}

.manual-status-ok { color: var(--ok); }
.manual-status-warn { color: var(--warn); }
.manual-status-err { color: var(--err); }

/* ── Auth pages (login/request/reset family) ────────────── */

.auth-page,
.auth-page * {
    box-sizing: border-box;
}

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f2f5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: 24px;
}

.auth-page .login-card {
    width: 360px;
    border-radius: var(--r);
    box-shadow: 0 4px 24px rgba(0, 17, 23, 0.10), 0 1px 4px rgba(0, 17, 23, 0.06);
    overflow: hidden;
    background: #fff;
    max-width: 100%;
    padding: 0;
}

.auth-page .login-card.login-card--wide {
    width: 400px;
}

.auth-page .login-card.login-card--verify {
    width: 380px;
}

.auth-page .setup-card {
    width: 420px;
    max-width: 100%;
    border-radius: var(--r);
    box-shadow: 0 4px 24px rgba(0, 17, 23, 0.10), 0 1px 4px rgba(0, 17, 23, 0.06);
    overflow: hidden;
    background: #fff;
}

.auth-page .setup-card__header {
    background: linear-gradient(135deg, #001117 0%, #2A2F36 100%);
    padding: 28px 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.auth-page .setup-card__header,
.auth-page .exp-card__header,
.auth-page .login-card__header {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.auth-page .setup-card__mark {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.auth-page .setup-card__brand-name {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.auth-page .setup-card__brand-tagline {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    letter-spacing: 0.06em;
    margin-top: 2px;
}

.auth-page .setup-card__body {
    padding: 24px 32px 32px;
}

.auth-page .setup-card__footer {
    text-align: center;
    font-size: 11px;
    color: #9ca3af;
    margin-top: 20px;
}

.auth-page .setup-card__body h2 {
    font-size: 15px;
    font-weight: 600;
    color: #001117;
    margin-bottom: 6px;
}

.auth-page p.desc {
    font-size: 13px;
    color: #88929A;
    margin-bottom: 18px;
    line-height: 1.5;
}

.auth-page .steps {
    margin-bottom: 18px;
}

.auth-page .step {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: flex-start;
}

.auth-page .step-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: #001117;
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-page .step-text {
    font-size: 13px;
    color: #2A2F36;
    line-height: 1.5;
}

.auth-page .qr-wrap {
    display: flex;
    justify-content: center;
    margin: 16px 0;
}

.auth-page .qr-wrap svg {
    width: 160px;
    height: 160px;
    border-radius: var(--r);
}

.auth-page .secret-box {
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: var(--r);
    padding: 10px 14px;
    font-family: monospace;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-align: center;
    color: #111827;
    word-break: break-all;
    margin-bottom: 18px;
}

.auth-page .code-input {
    font-size: 22px;
    letter-spacing: 0.18em;
    text-align: center;
    font-family: monospace;
}

.auth-page .btn-primary {
    display: block;
    margin-top: 8px;
    width: 100%;
    padding: 11px;
    background: #001117;
    color: #fff;
    border: none;
    border-radius: var(--btn-r);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    text-align: center;
}

.auth-page .btn-primary:hover {
    background: #2A2F36;
}

.auth-page .btn-secondary-link {
    display: block;
    margin-top: 10px;
    text-align: center;
    font-size: 12px;
    color: #88929A;
}

.auth-page .btn-secondary-link a {
    color: #2A2F36;
}

.auth-page .toggle-section {
    display: none;
}

.auth-page .toggle-section.visible {
    display: block;
}

.auth-page .backup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 16px 0;
}

.auth-page .backup-code-item {
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: var(--r-sm);
    padding: 8px 10px;
    font-family: monospace;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-align: center;
    color: #111827;
}

.auth-page .backup-grid-wrap {
    position: relative;
    margin: 16px 0;
}
.auth-page .backup-grid-wrap .backup-grid {
    margin: 0;
}
.auth-page .backup-copy-btn {
    position: absolute;
    top: -28px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #f3f4f6;
    border: 1.5px solid #d1d5db;
    border-radius: var(--btn-r);
    color: #88929A;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    padding: 0;
}
.auth-page .backup-copy-btn:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
    color: #2A2F36;
}
.auth-page .backup-copy-btn--done {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #065f46;
}

.auth-page .backup-notice {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    border-radius: var(--r);
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 16px;
}

.auth-page .exp-card {
    width: 100%;
    max-width: 560px;
    border-radius: var(--r);
    box-shadow: 0 4px 24px rgba(0, 17, 23, 0.10), 0 1px 4px rgba(0, 17, 23, 0.06);
    overflow: hidden;
    background: #fff;
}

.auth-page .exp-card__header {
    background: linear-gradient(135deg, #001117 0%, #2A2F36 100%);
    padding: 32px 32px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.auth-page .exp-card__mark {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.auth-page .exp-card__brand-name {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.auth-page .exp-card__brand-tagline {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    letter-spacing: 0.06em;
    margin-top: 3px;
}

.auth-page .exp-card__body {
    padding: 32px;
}

.auth-page .exp-card__body h2 {
    font-size: 17px;
    font-weight: 700;
    color: #001117;
    margin-bottom: 10px;
}

.auth-page .exp-card__body p {
    font-size: 14px;
    color: #2A2F36;
    line-height: 1.6;
    margin-bottom: 28px;
}

.auth-page .exp-card__body p strong {
    color: #001117;
}

.auth-page .plans {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.auth-page .plan-card {
    border: 1.5px solid #e5e7eb;
    border-radius: var(--r);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-page .plan-card:hover {
    border-color: #2A2F36;
}

.auth-page .plan-card__name {
    font-size: 15px;
    font-weight: 700;
    color: #001117;
}

.auth-page .plan-card__desc {
    font-size: 12px;
    color: #88929A;
    line-height: 1.5;
    flex: 1;
}

.auth-page .plan-card__pricing {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 4px;
}

.auth-page .plan-card__btn {
    margin-top: 12px;
    width: 100%;
    padding: 10px;
    background: #001117;
    color: #fff;
    border: none;
    border-radius: var(--btn-r);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: block;
    text-align: center;
    transition: background 0.15s;
}

.auth-page .plan-card__btn:hover {
    background: #2A2F36;
}

.auth-page .plan-card--team .plan-card__btn {
    background: #2A2F36;
}

.auth-page .plan-card--team .plan-card__btn:hover {
    background: #001117;
}

.auth-page .exp-card__footer {
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
    padding-bottom: 28px;
}

.auth-page .exp-card__footer a {
    color: #2A2F36;
}

.auth-page .grace-banner {
    background: #fef9c3;
    border: 1px solid #fde68a;
    border-radius: var(--r);
    padding: 12px 16px;
    font-size: 13px;
    color: #854d0e;
    margin-bottom: 20px;
}

@media (max-width: 480px) {
    .auth-page .plans {
        grid-template-columns: 1fr;
    }
}

/* ── Pricing page ─────────────────────────────────────────────────────────── */

.auth-page .pricing-wrap {
    width: 100%;
    max-width: 760px;
    border-radius: var(--r);
    box-shadow: 0 4px 24px rgba(0, 17, 23, 0.10), 0 1px 4px rgba(0, 17, 23, 0.06);
    overflow: hidden;
    background: #fff;
}

.auth-page .pricing-header {
    background: linear-gradient(135deg, #001117 0%, #2A2F36 100%);
    padding: 28px 36px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.auth-page .pricing-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.auth-page .pricing-brand {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.auth-page .pricing-tagline {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    letter-spacing: 0.06em;
    margin-top: 3px;
}

.auth-page .pricing-body {
    padding: 36px;
}

.auth-page .pricing-body h2 {
    font-size: 20px;
    font-weight: 700;
    color: #001117;
    margin-bottom: 8px;
}

.auth-page .pricing-intro {
    font-size: 14px;
    color: #2A2F36;
    line-height: 1.6;
    margin-bottom: 24px;
}

.pricing-toggle {
    display: inline-flex;
    border: 1.5px solid #e5e7eb;
    border-radius: var(--r);
    overflow: hidden;
    margin-bottom: 24px;
}

.pricing-toggle-btn {
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #88929A;
    background: #fff;
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pricing-toggle-btn--active {
    background: #001117;
    color: #fff;
}

.pricing-discount-badge {
    display: inline-block;
    background: #dcfce7;
    color: #15803d;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--r-sm);
}

.pricing-toggle-btn--active .pricing-discount-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 28px;
}

.pricing-grid--settings {
    margin-bottom: 0;
}

.pricing-card {
    border: 1.5px solid #e5e7eb;
    border-radius: var(--r);
    padding: 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color 0.15s;
}

.pricing-card:hover {
    border-color: #2A2F36;
}

.pricing-card--featured {
    border-color: #2A2F36;
    background: #f8faff;
}

.pricing-card__badge {
    display: inline-block;
    background: #2A2F36;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--r);
    letter-spacing: 0.04em;
    margin-bottom: 10px;
    align-self: flex-start;
}

.pricing-card__name {
    font-size: 17px;
    font-weight: 700;
    color: #001117;
    margin-bottom: 8px;
}

.pricing-card__desc {
    font-size: 13px;
    color: #88929A;
    line-height: 1.5;
    margin-bottom: 18px;
}

.pricing-card__desc strong {
    color: #001117;
}

.pricing-card__price-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 6px;
}

.pricing-card__amount {
    font-size: 32px;
    font-weight: 800;
    color: #001117;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pricing-card__period {
    font-size: 12px;
    color: #9ca3af;
}

.pricing-card__billing-note {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 18px;
}

.pricing-team-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
}

.pricing-team-label {
    font-size: 12px;
    font-weight: 600;
    color: #2A2F36;
}

.pricing-stepper {
    display: flex;
    align-items: center;
    border: 1.5px solid #e5e7eb;
    border-radius: var(--r-sm);
    overflow: hidden;
}

.pricing-stepper-btn {
    width: 38px;
    height: 38px;
    background: #f9fafb;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #2A2F36;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s;
    flex-shrink: 0;
    line-height: 1;
}

.pricing-stepper-btn:hover {
    background: #f3f4f6;
}

.pricing-stepper-input {
    width: 56px;
    text-align: center;
    border: none;
    border-left: 1.5px solid #e5e7eb;
    border-right: 1.5px solid #e5e7eb;
    font-size: 14px;
    font-weight: 600;
    color: #001117;
    outline: none;
    padding: 7px 0;
    -moz-appearance: textfield;
}

.pricing-stepper-input:focus-visible {
    outline: 2px solid var(--blue-2);
    outline-offset: -2px;
}

.pricing-stepper-input::-webkit-outer-spin-button,
.pricing-stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pricing-stepper--sm .pricing-stepper-input {
    width: 46px;
    font-size: 13px;
    padding: 6px 0;
}

.pricing-stepper--sm .pricing-stepper-btn {
    width: 34px;
    height: 34px;
    font-size: 16px;
}

.pricing-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 22px 0;
    flex: 1;
}

.pricing-card__features li {
    font-size: 13px;
    color: #2A2F36;
    padding: 5px 0 5px 22px;
    position: relative;
    line-height: 1.4;
}

.pricing-card__features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #2A2F36;
    font-weight: 700;
}

.pricing-card__btn {
    margin-top: auto;
    padding: 11px 16px;
    background: #001117;
    color: #fff;
    border: none;
    border-radius: var(--btn-r);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: block;
    text-align: center;
    transition: background 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.pricing-card__btn:hover {
    background: #2A2F36;
}

.pricing-card__btn--featured {
    background: #2A2F36;
}

.pricing-card__btn--featured:hover {
    background: #001117;
}

.auth-page .pricing-footer {
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
    padding-bottom: 4px;
}

.pricing-vat-note {
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
    margin: 0;
}

.auth-page .pricing-footer a {
    color: #2A2F36;
}

@media (max-width: 640px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    .auth-page .pricing-body {
        padding: 20px;
    }
    .auth-page .pricing-wrap {
        border-radius: var(--r);
    }
}

.auth-page .login-card__header {
    background: linear-gradient(135deg, #001117 0%, #2A2F36 100%);
    padding: 22px 28px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.auth-page .login-card__mark {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.auth-page .login-card__mark.login-card__mark--lg {
    width: 48px;
    height: 48px;
}

.auth-brand-center {
    text-align: center;
}

.auth-page .login-card__brand-name {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: center;
}

.auth-page .login-card__brand-name span {
    font-variant: small-caps;
    font-size: 0.72em;
    font-weight: 400;
    opacity: 0.70;
    letter-spacing: 0.08em;
}

.auth-page .login-card__brand-tagline {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    letter-spacing: 0.06em;
    margin-top: 3px;
    text-align: center;
}

.auth-page .login-card__body {
    padding: 22px 28px 24px;
}

.auth-page .login-card__body h2 {
    font-size: 15px;
    font-weight: 600;
    color: #001117;
    margin-bottom: 12px;
}

.auth-page .login-card__body p {
    font-size: 13px;
    color: #88929A;
    margin-bottom: 18px;
    line-height: 1.5;
}

.auth-page .login-banner {
    border-radius: var(--r);
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
}

.auth-page .login-banner--error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.auth-page .login-banner--success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.auth-page .login-banner--warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.auth-page .login-banner--info { background: rgba(201, 138, 76, 0.06); border: 1px solid rgba(201, 138, 76, 0.28); color: #C98A4C; }
.auth-page .login-banner--info code {
    background: rgba(201, 138, 76, 0.10);
    padding: 1px 5px;
    border-radius: var(--r);
    font-size: 12px;
}

.auth-page .login-banner--info p {
    margin-top: 6px;
    font-size: 12px;
}

.auth-page .login-field {
    margin-bottom: 10px;
}

/* Aanmelden (18-10-2026): twee velden naast elkaar, een wachtwoordveld met
   oogje, de sterktemeter en het akkoordvinkje. Op een smal scherm onder elkaar. */
.auth-page .login-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 560px) { .auth-page .login-rij { grid-template-columns: 1fr; } }
.auth-page .ww-veld { position: relative; }
/* Specifieker dan .auth-page input[type="text"] verderop, anders loopt het
   wachtwoord onder het oogje door. */
.auth-page .ww-veld input[type="password"],
.auth-page .ww-veld input[type="text"] { padding-right: 44px; }
.auth-page .ww-toon {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border: 0; background: transparent; color: #5A646E;
    border-radius: var(--r-sm); cursor: pointer; display: grid; place-items: center; padding: 0;
}
.auth-page .ww-toon:hover, .auth-page .ww-toon[aria-pressed="true"] { color: #111827; }
.auth-page .ww-meter { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.auth-page .ww-meter i { flex: 1; height: 4px; border-radius: 2px; background: #e5e7eb; }
.auth-page .ww-meter i.is-aan.is-1 { background: #c2410c; }
.auth-page .ww-meter i.is-aan.is-2 { background: #d97706; }
.auth-page .ww-meter i.is-aan.is-3, .auth-page .ww-meter i.is-aan.is-4 { background: #15803d; }
.auth-page .ww-meter-label { flex: none; min-width: 7em; text-align: right; font-size: 11px; color: #5A646E; }
.auth-page .login-hulp { font-size: 12px; color: #5A646E; margin-top: 4px; }
.auth-page .login-akkoord {
    display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 16px;
    font-size: 13px; font-weight: 400; color: #2A2F36; letter-spacing: 0; line-height: 1.5;
}
.auth-page .login-akkoord input { margin-top: 3px; flex: none; width: 16px; height: 16px; accent-color: #001117; }
.auth-page .login-akkoord a { color: inherit; text-decoration: underline; }
.auth-page .login-support { font-size: 12px; color: #5A646E; text-align: center; margin-top: 14px; }
.auth-page .login-support a { color: inherit; }

.auth-page label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #2A2F36;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}

.auth-page input[type="text"],
.auth-page input[type="password"],
.auth-page input[type="email"],
.auth-page textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #d1d5db;
    border-radius: var(--r-sm);
    font-size: 14px;
    color: #111827;
    outline: none;
    transition: border-color 0.15s;
    font-family: inherit;
}

.auth-page input[type="text"]:focus,
.auth-page input[type="password"]:focus,
.auth-page input[type="email"]:focus,
.auth-page textarea:focus {
    border-color: #2A2F36;
}
/* Visible keyboard focus ring (WCAG 2.4.7) — border-color change alone is
   too subtle. */
.auth-page input:focus-visible,
.auth-page textarea:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--vf-orange-soft);
    border-color: var(--blue);
}

.auth-page textarea {
    resize: vertical;
    min-height: 88px;
}

/* De :not() erbij is niet cosmetisch. Verderop in dit bestand staat een
   generieke omlijnde-knopregel — button[type="submit"]:not(.nav-dropdown-item) —
   met exact dezelfde specificiteit als deze, en die staat later, dus die won.
   Daardoor kreeg de primaire actie op elk auth-scherm hetzelfde witte
   uiterlijk als de secundaire knop ernaast, en was het verschil tussen
   "Inloggen" en "Stuur inloglink" weg. Met de uitsluiting erbij wint deze
   regel weer, zonder dat .login-btn-secondary zijn eigen stijl verliest. */
.auth-page button[type="submit"]:not(.login-btn-secondary) {
    margin-top: 8px;
    width: 100%;
    padding: 11px;
    background: #001117;
    color: #fff;
    border: none;
    border-radius: var(--btn-r);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.auth-page button[type="submit"]:not(.login-btn-secondary):hover {
    background: #2A2F36;
    color: #fff;
}

.auth-page .login-btn-secondary {
    margin-top: 6px;
    background: #ffffff;
    color: #0b1e3d;
    border: 1.5px solid rgba(11, 30, 61, 0.22);
}

.auth-page .login-btn-secondary:hover {
    background: #eef3ff;
    color: #0b1e3d;
    border-color: rgba(11, 30, 61, 0.34);
}

.auth-page .login-btn-secondary[disabled] {
    background: #e8edf5;
    color: #5d6675;
    border-color: rgba(11, 30, 61, 0.2);
    cursor: not-allowed;
}

.auth-page .login-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 18px 0 14px;
    font-size: 12px;
    color: #7a828b;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.auth-page .login-divider::before,
.auth-page .login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.auth-page .magic-link-form {
    margin-bottom: 6px;
}

.auth-page .login-hint {
    margin-top: 10px;
    font-size: 12px;
    color: #5B6570;
    text-align: center;
    line-height: 1.5;
}

.auth-page .login-hint a,
.auth-page .login-hint .link-button {
    color: #2A2F36;
}

.auth-page .login-hint--compact {
    margin-top: 6px;
}

/* De drie verwijzingen onderaan stonden als losse alinea's onder elkaar en
   kostten zo zestig pixels voor drie korte links. Naast elkaar, met een
   scheidingsteken ertussen dat schermlezers overslaan. */
.auth-page .login-hint--rij {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 8px;
    margin-top: 14px;
}

.auth-page .login-hint--rij span {
    color: #c3c9cf;
}

/* ── Twee inlogmanieren naast elkaar ───────────────────────────────────────

   Wachtwoord en inloglink stonden onder elkaar in een kolom van 360 breed.
   Samen met de kop kwam de kaart daarmee op 965px, en dat past op geen enkele
   laptop: op 1366x768 blijft er na de browserbalk zo'n 625px over, op
   1920x1080 ruim 900. Je moest dus scrollen op een inlogscherm.

   Een laptop heeft breedte over en hoogte tekort, dus zetten we de twee naast
   elkaar zodra daar plek voor is. Onder die grens — telefoon, smal venster —
   blijft alles onder elkaar staan zoals het was; daar is verticaal scrollen
   normaal en de breedte juist krap. */
@media (min-width: 720px) {
    .auth-page .login-card.login-card--twee-kolommen {
        width: 660px;
    }

    .auth-page .login-card--twee-kolommen .login-methods {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: start;
        gap: 0 20px;
    }

    /* De scheiding wordt een staande lijn tussen de twee kolommen. */
    .auth-page .login-card--twee-kolommen .login-methods .login-divider {
        flex-direction: column;
        align-self: stretch;
        margin: 0;
        gap: 8px;
    }

    .auth-page .login-card--twee-kolommen .login-methods .login-divider::before,
    .auth-page .login-card--twee-kolommen .login-methods .login-divider::after {
        width: 1px;
        height: auto;
        flex: 1;
    }

    /* Logo en merknaam naast elkaar in plaats van gestapeld. Op de brede
       kaart is daar plek voor, en het scheelt de volle hoogte van het merk. */
    .auth-page .login-card--twee-kolommen .login-card__header {
        flex-direction: row;
        justify-content: center;
        gap: 14px;
    }

    .auth-page .login-card--twee-kolommen .login-card__brand-name,
    .auth-page .login-card--twee-kolommen .login-card__brand-tagline {
        text-align: left;
    }

    /* Staat de inloglink uit, dan zet de server de klasse niet en blijft alles
       hierboven buiten werking: één kolom van 360 breed, zoals voorheen. Dat
       is met opzet geen :has()-regel — die kent niet elke browser, en dan zou
       het formulier geknepen in een brede bak eindigen. De server weet dit
       gewoon, dus laat hem het zeggen. */
}

.auth-page .magic-link-cooldown {
    min-height: 1.4em;
    margin-top: 8px;
}

.auth-page .login-card__footer {
    text-align: center;
    font-size: 11px;
    color: #9ca3af;
    margin-top: 20px;
}

.page-main-narrow {
    max-width: 1020px;
    margin: 28px auto;
    padding: 0 18px 48px;
}

.card-block { margin-bottom: 20px; }

.form-field--full { grid-column: 1 / -1; }

.settings-hint--tight { margin-top: 0; }
.settings-hint--inline { margin: 0; }
.settings-hint--spaced { margin-top: 8px; }

.inline-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.export-form-inline { margin-top: 20px; }

.sidebar-kicker {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3);
}

.refs-turn-label {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-3);
    margin-left: 0.5rem;
    vertical-align: middle;
    white-space: normal;
}

.panel-head-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.panel-head-title {
    margin: 0;
}

.panel-head-sub {
    font-size: 0.74rem;
    color: var(--text-3);
}

.lib-add-link--mt { margin-top: 8px; }

.pin-picker-list {
    padding: 6px 0 2px;
}

.pin-empty {
    font-size: 0.8rem;
    color: var(--text-3);
    font-style: italic;
    margin: 2px 0 4px;
}

.pin-empty--inline {
    margin: 2px 0 8px;
}

.pin-section {
    margin-bottom: 8px;
}

.pin-section-title {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
    margin: 6px 0 4px;
}

.pin-row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 0;
}

.pin-row .remove-cross {
    opacity: 1;
    padding: 2px 3px !important;
}

.pin-row--lined {
    border-bottom: 1px solid var(--border);
}

.pin-name {
    flex: 1;
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}

.pin-add-btn {
    font-size: 0.78rem !important;
    padding: 2px 8px !important;
}

.pin-source-badge {
    flex-shrink: 0;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-3);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 6px;
}

.main-content--flex {
    flex: 1;
}

.ls-load-btn {
    flex-shrink: 0;
}

.delete-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    background: rgba(30, 20, 10, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #f5ede4;
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

/* ── Dashboard page ─────────────────────────────────────── */

.dash-summary {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.dash-stat-card {
    flex: 1;
    min-width: 150px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 18px 20px;
    text-align: center;
}

.dash-stat-card .stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--blue);
    line-height: 1;
}

.dash-stat-card .stat-label {
    font-size: 0.78rem;
    color: var(--text-2);
    margin-top: 4px;
}

.dash-section {
    margin-bottom: 32px;
}

.dash-section h2 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text);
}

.guardrail-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--r-sm);
    font-size: 0.82rem;
    font-weight: 600;
}

.guardrail-badge--green {
    background: var(--ok-bg);
    color: var(--ok);
    border: 1px solid var(--ok-bdr);
}

.guardrail-badge--amber {
    background: var(--warn-bg);
    color: var(--warn);
    border: 1px solid var(--warn-bdr);
}

.guardrail-badge--red {
    background: var(--err-bg);
    color: var(--err);
    border: 1px solid var(--err-bdr);
}

.rep-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.rep-table th {
    text-align: left;
    padding: 6px 10px;
    font-weight: 600;
    color: var(--text-2);
    border-bottom: 1px solid var(--border);
}

.rep-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.rep-bar-wrap {
    width: 120px;
    background: var(--surface-2);
    border-radius: var(--r);
    overflow: hidden;
    height: 8px;
    display: inline-block;
    vertical-align: middle;
}

.rep-bar {
    height: 8px;
    border-radius: 4px;
}

.rep-bar--good { background: var(--ok); }
.rep-bar--warn { background: var(--warn); }
.rep-bar--bad { background: var(--err); }

.flag-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 80px;
    margin-top: 8px;
}

.flag-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.flag-bar-fill {
    width: 20px;
    background: var(--blue);
    border-radius: 3px 3px 0 0;
    min-height: 2px;
}

.flag-bar-day {
    font-size: 0.6rem;
    color: var(--text-3);
    white-space: nowrap;
    transform: rotate(-45deg);
    margin-top: 2px;
}

.corrections-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.corrections-table th {
    text-align: left;
    padding: 6px 8px;
    font-weight: 600;
    color: var(--text-2);
    border-bottom: 1px solid var(--border);
}

.corrections-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    word-break: break-word;
    max-width: 200px;
}

.export-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.export-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--btn-r);
    font-size: 0.82rem;
    color: var(--text);
    text-decoration: none;
}

.export-btn:hover {
    background: var(--surface-2);
    border-color: var(--blue);
    color: var(--blue);
}

.dash-section details > summary {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    padding: 4px 0;
    user-select: none;
}

.dash-section details[open] > summary {
    color: var(--blue);
}

.dash-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
    margin-bottom: 32px;
}

.dash-two-col .dash-section {
    margin-bottom: 0;
}

.corrections-scroll {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: auto;
    margin-top: 10px;
}

.dash-inline-summary {
    font-size: 0.75rem;
    color: var(--text-2);
    cursor: pointer;
}

.dash-inline-excerpt {
    margin: 4px 0 0;
    font-size: 0.75rem;
    color: var(--text-2);
    font-style: italic;
    white-space: pre-wrap;
}

.dash-empty-note {
    color: var(--text-2);
    font-size: 0.82rem;
    margin-top: 8px;
}

@media (max-width: 680px) {
    .dash-two-col {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .dash-two-col .dash-section {
        margin-bottom: 24px;
    }
}

/* ── Buttons ─────────────────────────────────────────────── */

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
}

button[type="submit"]:not(.nav-dropdown-item),
button[type="button"]:not(.remove-cross):not(.lib-source-tab):not(.corpus-filter-toggle):not(.nav-mode-btn):not(.btn-danger-sm):not(.add-doc-btn):not(.conv-drawer-toggle):not(.ref-drawer-toggle):not(.pinned-drawer-toggle):not(.wm-drawer-toggle):not(.app-modal-btn):not(.home-sidebar-close):not(.approve-trigger-btn):not(.nav-icon-btn):not(.nav-avatar-btn):not(.ask-send-btn):not(.password-modal-close):not(.lib-chip):not(.lib-jur-pill):not(.lib-doc-star-btn):not(.lib-doc-refresh-btn):not(.lib-export-btn):not(.lib-banner-close):not(.lib-bulk-load-btn):not(.lib-cm-del):not(.lib-idx-btn):not(.conv-search-menu-btn):not(.doc-expand-btn):not(.conv-turn-toggle):not(.dossier-tab-btn):not(.dossier-btn):not(.filter-trigger):not(.filter-menu-item):not(.dossier-card-trash):not(.tab-add-trigger):not(.tab-del-btn):not(.doc-del-btn):not(.dossier-sidebar-add-btn):not(.dossier-sidebar-trash-btn):not(.dossier-sidebar-switch-btn):not(.followup-chip):not(.slash-command-option):not(.draft-mode-pill-stop):not(.nav-dropdown-item):not(.intro-card):not(.pack-start-knop):not(.reading-chip):not(.profiel-correctie-knop):not(.scroll-down-btn):not(.ww-toon):not(.ref-action):not(.ref-toggle):not(.bronnen-paneel-knop):not(.ask-verbeter-knop):not(.conv-turn-edit):not(.conv-turn-kopieer):not(.conv-turn-kopieer):not(.ask-verbeter-btn):not(.conv-item-menu-knop):not(.conv-filter-chip):not(.conv-filter-wis):not(.conv-item-meer):not(.kop-titel):not(.conv-new-btn):not(.menu-icon-btn):not(.concept-kaart-knop):not(.concept-kaart-meer):not(.pricing-toggle-btn) {
    display: inline-block;
    padding: 8px 18px;
    border-radius: var(--btn-r);
    background: transparent;
    color: var(--navy);
    border: 1.5px solid rgba(0, 17, 23, 0.30);
    font-size: 0.86rem;
    font-weight: 600;
    transition: background 0.14s, color 0.14s, border-color 0.14s, box-shadow 0.14s;
    box-shadow: none;
}

button[type="submit"]:not(.nav-dropdown-item):hover,
button[type="button"]:not(.remove-cross):not(.lib-source-tab):not(.corpus-filter-toggle):not(.nav-mode-btn):not(.btn-danger-sm):not(.add-doc-btn):not(.conv-drawer-toggle):not(.ref-drawer-toggle):not(.pinned-drawer-toggle):not(.wm-drawer-toggle):not(.app-modal-btn):not(.home-sidebar-close):not(.approve-trigger-btn):not(.nav-icon-btn):not(.nav-avatar-btn):not(.ask-send-btn):not(.password-modal-close):not(.lib-chip):not(.lib-jur-pill):not(.lib-doc-star-btn):not(.lib-doc-refresh-btn):not(.lib-export-btn):not(.lib-banner-close):not(.lib-bulk-load-btn):not(.lib-cm-del):not(.lib-idx-btn):not(.conv-search-menu-btn):not(.doc-expand-btn):not(.conv-turn-toggle):not(.dossier-tab-btn):not(.dossier-btn):not(.filter-trigger):not(.filter-menu-item):not(.dossier-card-trash):not(.tab-add-trigger):not(.tab-del-btn):not(.doc-del-btn):not(.dossier-sidebar-add-btn):not(.dossier-sidebar-trash-btn):not(.dossier-sidebar-switch-btn):not(.followup-chip):not(.slash-command-option):not(.draft-mode-pill-stop):not(.nav-dropdown-item):not(.pack-start-knop):not(.reading-chip):not(.profiel-correctie-knop):not(.scroll-down-btn):not(.ww-toon):not(.ref-action):not(.ref-toggle):not(.bronnen-paneel-knop):not(.ask-verbeter-knop):not(.conv-turn-edit):not(.conv-turn-kopieer):not(.conv-turn-kopieer):not(.ask-verbeter-btn):not(.conv-item-menu-knop):not(.conv-filter-chip):not(.conv-filter-wis):not(.conv-item-meer):not(.kop-titel):not(.conv-new-btn):not(.concept-kaart-knop):not(.concept-kaart-meer):not(.pricing-toggle-btn):hover {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
    box-shadow: var(--shadow-sm);
}

/* Chat send button — keep prominent dark style */
.ask-send-btn {
    background: var(--navy) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: var(--shadow-sm) !important;
}
.ask-send-btn:hover { background: #2A2F36 !important; }

button[type="submit"]:disabled { opacity: 0.50; cursor: not-allowed; }

.btn-secondary, .json-button {
    display: inline-block;
    padding: 8px 18px;
    border-radius: var(--btn-r);
    font-size: 0.86rem;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.14s, border-color 0.14s;
    background: transparent !important;
    color: var(--blue) !important;
    border: 1px solid var(--border-2) !important;
    box-shadow: none !important;
}

.btn-secondary:hover, .json-button:hover {
    background: var(--blue-bg) !important;
    border-color: rgba(201, 138, 76, 0.28) !important;
}

/* ── Dropzone ────────────────────────────────────────────── */

.dropzone {
    border: 1.5px dashed var(--border-2);
    border-radius: var(--r);
    padding: 22px 14px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.14s, background 0.14s;
    background: rgba(255, 255, 255, 0.50);
    user-select: none;
}

.dropzone:hover, .dropzone-active {
    border-color: var(--blue-2);
    background: rgba(201, 138, 76, 0.04);
}

.dropzone-label { pointer-events: none; }

.dropzone-title {
    margin: 0 0 4px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-2);
}

.dropzone-hint {
    font-size: 0.73rem;
    color: var(--text-3);
    letter-spacing: 0.02em;
}

#file-input, .file-preview { display: none !important; }

/* ── Upload status ───────────────────────────────────────── */

/* .upload-status is vervallen: die tekstmelding stond onder de documentenlijst
   terwijl de vraagbalk dezelfde tekst al naast een spinner toont. */


/* ── Document list ───────────────────────────────────────── */

.uploaded-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
}
.uploaded-list::-webkit-scrollbar { width: 4px; }
.uploaded-list::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; }

.doc-indexing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.inline-remove {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.remove-cross {
    background: none !important;
    border: none !important;
    color: var(--text-3) !important;
    opacity: 0;
    cursor: pointer;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    border-radius: 3px !important;
    transition: opacity 0.12s, color 0.12s, background 0.12s;
    box-shadow: none !important;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-cross:hover {
    color: var(--err) !important;
    background: var(--err-bg) !important;
    opacity: 1;
}
/* Keyboard focus must reveal the hidden delete button (WCAG 2.4.7). */
.remove-cross:focus-visible { opacity: 1; }

@media (hover: none), (pointer: coarse) {
    .remove-cross { opacity: 1; }
}