/* ===== PsyHAG UI versie 1.3.1 — warmer, toegankelijker ===== */

/*
 * Override-laag op style_v1_3.css.
 * Doel: warmer palet, rondere hoeken, subtiele schaduwen, leesbaarder font.
 * Behoud van de zakelijke structuur van v1.3.
 */

:root {
    --color-bg: #f9f7f5;                        /* warm off-white i.p.v. koud grijs */
    --color-bg-alt: #f2ede8;                    /* warm lichtgrijs */
    --color-border: #e0d9d0;                    /* warme rand */
    --color-border-light: #ece7e0;
    --color-text-muted: #6a6078;                /* iets paarsiger muted */
    --radius: 6px;                              /* ronder dan 3px */
    --radius-lg: 10px;
    --shadow-sm: 0 1px 4px rgba(61, 46, 92, 0.07);
    --shadow: 0 2px 10px rgba(61, 46, 92, 0.09);
}

/* --- Body: beter leesbaar --- */
body {
    font-size: 0.9rem;
    line-height: 1.6;
}

/* --- Sidebar: licht paarse tint --- */
.sidebar {
    background: #faf8fc;
    border-right-color: var(--color-border);
}

.sidebar-header {
    background: #f5f1fa;
    border-bottom-color: var(--color-border);
}

.sidebar-footer {
    background: #faf8fc;
    border-top-color: var(--color-border);
}

/* --- Cards: zachte schaduw --- */
.card {
    box-shadow: var(--shadow-sm);
    border-color: var(--color-border);
}

.card-header {
    background: #f5f1f7;
    border-bottom-color: var(--color-border);
    color: #2d2240;
}

/* --- Stat-card: icoon subtiel terug --- */
.stat-icon {
    display: block;
    font-size: 1.5rem;
    color: var(--color-primary);
    opacity: 0.18;
}

/* --- Tabel: warmere achtergrond --- */
.table-container {
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

.table thead th {
    background: #f2ede8;
    border-bottom-color: var(--color-border);
}

/* --- Detail-items: lucht en scheidingslijn --- */
.detail-item {
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--color-border-light);
}

.detail-item:last-child {
    border-bottom: none;
}

/* --- Page header: subtiele onderlijn --- */
.page-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: 1.25rem;
}

/* --- Login pagina: warmere achtergrond, grotere card --- */
.login-page {
    background: #ede8e2;
}

.login-card {
    max-width: 420px;
    padding: 2.75rem 2.5rem;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 24px rgba(61, 46, 92, 0.13);
}

.login-title {
    font-size: 1.4rem;
    color: var(--color-primary);
}

.login-subtitle {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin-top: 0.2rem;
}

/* --- Knoppen: iets ronder --- */
.btn {
    border-radius: var(--radius);
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

/* --- Forms --- */
.form-control,
.form-select {
    border-radius: var(--radius);
    border-color: var(--color-border);
}

/* --- Alerts --- */
.alert {
    border-radius: var(--radius);
}

/* --- Empty state --- */
.empty-state {
    padding: 2.5rem 1rem;
    color: var(--color-text-muted);
}

.empty-state i {
    font-size: 2rem;
    opacity: 0.2;
}

/* --- Logo: witte achtergrond wegsmelten op lichte sidebar --- */
.sidebar-logo-img,
.topbar-logo-img {
    mix-blend-mode: multiply;
}