/* ==========================================================================
   Haarstudio Esther — huisstijl-laag (§3.2)
   Roze tinten + modern "Windows 11 / Fluent"-gevoel: Segoe UI, afgeronde
   hoeken, zachte schaduwen, witruimte. Bovenop Bootstrap 5 + AdminLTE 4.
   Kleuren zijn bewust in variabelen zodat ze eenvoudig bij te stellen zijn.
   ========================================================================== */

:root {
    /* Roze palet — exacte merkkleur uit het logo (#E61475) */
    --he-pink: #e61475;
    --he-pink-dark: #b3105b;
    --he-pink-soft: #fde3ef;
    --he-pink-tint: #fff5fa;
    --he-ink: #3b2f36;

    /* Bootstrap-variabelen overschrijven */
    --bs-primary: var(--he-pink);
    --bs-primary-rgb: 230, 20, 117;
    --bs-link-color: var(--he-pink);
    --bs-link-color-rgb: 230, 20, 117;
    --bs-link-hover-color: var(--he-pink-dark);

    --bs-body-color: var(--he-ink);
    --bs-body-bg: #f6f1f4;
    --bs-body-font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

    --bs-border-radius: 0.65rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: 0.9rem;
    --bs-border-radius-xl: 1.15rem;
}

body {
    font-family: var(--bs-body-font-family);
}

/* --- Knoppen --- */
.btn-primary {
    --bs-btn-bg: var(--he-pink);
    --bs-btn-border-color: var(--he-pink);
    --bs-btn-hover-bg: var(--he-pink-dark);
    --bs-btn-hover-border-color: var(--he-pink-dark);
    --bs-btn-active-bg: var(--he-pink-dark);
    --bs-btn-active-border-color: var(--he-pink-dark);
    --bs-btn-disabled-bg: var(--he-pink);
    --bs-btn-disabled-border-color: var(--he-pink);
}

.btn-outline-primary {
    --bs-btn-color: var(--he-pink);
    --bs-btn-border-color: var(--he-pink);
    --bs-btn-hover-bg: var(--he-pink);
    --bs-btn-hover-border-color: var(--he-pink);
    --bs-btn-active-bg: var(--he-pink-dark);
    --bs-btn-active-border-color: var(--he-pink-dark);
}

.text-primary { color: var(--he-pink) !important; }
.bg-primary { background-color: var(--he-pink) !important; }
a { text-decoration: none; }

/* --- Kaarten: afgerond, zachte schaduw (Fluent) --- */
.card {
    border: 1px solid rgba(59, 47, 54, 0.06);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 2px 12px rgba(59, 47, 54, 0.06);
}

/* --- Header --- */
.app-header {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid rgba(214, 51, 108, 0.12);
}

/* --- Zijbalk: licht met roze accenten --- */
.app-sidebar {
    background: linear-gradient(180deg, var(--he-pink-tint), #ffffff) !important;
    border-right: 1px solid rgba(214, 51, 108, 0.10);
}

.sidebar-brand {
    border-bottom: 1px solid rgba(214, 51, 108, 0.10);
}

.brand-text {
    color: var(--he-pink-dark);
    font-weight: 600;
    letter-spacing: 0.2px;
}

.he-brand-icon {
    color: var(--he-pink);
}

/* Logo in de zijbalk (laat de brand-balk meegroeien) */
.he-sidebar-brand {
    height: auto;
    padding: 12px 10px;
    text-align: center;
}

.he-sidebar-logo {
    width: 170px;
    max-width: 90%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 0.5rem;
}

.sidebar-menu .nav-link {
    border-radius: 0.6rem;
    margin: 2px 10px;
    color: #5a5560;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-menu .nav-link:hover {
    background: var(--he-pink-soft);
    color: var(--he-pink-dark);
}

.sidebar-menu .nav-link.active {
    background: var(--he-pink);
    color: #fff;
    box-shadow: 0 6px 16px rgba(214, 51, 108, 0.32);
}

.sidebar-menu .nav-link.active .nav-icon {
    color: #fff;
}

.sidebar-menu .nav-icon {
    color: var(--he-pink);
}

.sidebar-menu .nav-header {
    color: #a08b96;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.6px;
}

/* --- Content: ruimte / witruimte --- */
.app-content {
    padding-top: 1.25rem;
    padding-bottom: 1.5rem;
}

/* Kleine statistiek-tegel voor het dashboard */
.he-stat {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.he-stat .he-stat-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.8rem;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    color: #fff;
    background: linear-gradient(135deg, var(--he-pink), var(--he-pink-dark));
    box-shadow: 0 6px 16px rgba(214, 51, 108, 0.30);
    flex: 0 0 auto;
}

/* --- Auth-/setup-schermen: premium volvlak met glass-kaart --- */
.he-auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background-color: var(--he-pink-soft);
    /* Lichte, luchtige sluier bovenop de salonfoto (login-bg.jpg): de foto
       schemert zacht door, met een subtiele lichtroze waas. */
    background-image:
        linear-gradient(135deg, rgba(253, 227, 239, 0.74), rgba(255, 249, 252, 0.80)),
        url('/img/login-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.he-auth-shell {
    width: 100%;
    max-width: 430px;
}

.he-auth-logo {
    width: 230px;
    max-width: 72%;
    height: auto;
    border-radius: 0.6rem;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.28));
}

.he-auth-footer {
    color: rgba(59, 47, 54, 0.72);
}

/* --- Bijlage-preview miniaturen --- */
.he-preview-thumb {
    width: 92px;
    height: 92px;
    object-fit: cover;
    border-radius: 0.6rem;
    border: 1px solid rgba(59, 47, 54, 0.15);
    box-shadow: 0 2px 8px rgba(59, 47, 54, 0.10);
}

/* --- Verlofkalender --- */
.he-cal {
    table-layout: fixed;
}

.he-cal td {
    vertical-align: top;
    height: 76px;
}

.he-cal .dagnr {
    font-size: 0.78rem;
    color: #9a8f96;
}

.he-cal .vandaag {
    background: var(--he-pink-soft);
}

.he-cal .weekend {
    background: rgba(59, 47, 54, 0.03);
}

/* Feestdag: zachte amber tint + naamlabel */
.he-cal .feestdag {
    background: #fff3e0;
}

.he-cal .he-cal-feest {
    display: block;
    font-size: 0.66rem;
    font-weight: 600;
    color: #b3610a;
    line-height: 1.1;
    margin-top: 1px;
    white-space: normal;
}

/* Kleurstalen in de legenda */
.he-cal-legenda-feest,
.he-cal-legenda-weekend {
    display: inline-block;
    padding: 0 0.35rem;
    border-radius: 0.35rem;
    font-size: 0.72rem;
}

.he-cal-legenda-feest {
    background: #fff3e0;
    color: #b3610a;
}

.he-cal-legenda-weekend {
    background: rgba(59, 47, 54, 0.06);
    color: #6b6169;
}

.he-cal .he-cal-naam {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    text-align: left;
    margin-top: 2px;
    white-space: normal;
}

/* Glass-kaart op de auth-schermen */
.he-auth-body .card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--bs-border-radius-xl);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
}