/* ====== AgendaTotaal style ====== */
:root {
    --sidebar-width: 204px;
    --topbar-height: 72px;
    --primary: #1d4ed8;
    --primary-dark: #1e3a8a;
    --primary-light: #eaf2ff;
    --primary-gradient: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
    --accent: #0f766e;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --sidebar-bg: rgba(255, 255, 255, 0.96);
    --topbar-bg: rgba(255, 255, 255, 0.94);
    --bg: #f4f7fb;
    --text: #0f172a;
    --text-muted: #64748b;
    --border: #dbe4ee;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 12px 32px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 18px 42px rgba(15, 23, 42, 0.08);
    --shadow-hover: 0 24px 52px rgba(15, 23, 42, 0.1);
    --surface: rgba(255, 255, 255, 0.94);
    --surface-muted: #f8fbff;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.05), transparent 22%),
        radial-gradient(circle at top right, rgba(15, 118, 110, 0.04), transparent 18%),
        var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    font-size: 15px;
    line-height: 1.6;
}
body.sidebar-open { overflow: hidden; }
a { color: var(--primary); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--primary-dark); }

/* ===== AUTH / LANDING ===== */
.auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    background: linear-gradient(135deg, #3730a3 0%, #4f46e5 50%, #3b82f6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
}
.auth-page::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: rgba(255,255,255,.08);
    border-radius: 50%;
    top: -200px;
    right: -200px;
}
.auth-page::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(255,255,255,.05);
    border-radius: 50%;
    bottom: -100px;
    left: -100px;
}

@media (max-height: 820px) {
    .auth-page {
        align-items: flex-start;
        padding-top: 28px;
        padding-bottom: 28px;
    }
}
.auth-card {
    width: 100%;
    max-width: 460px;
    border-radius: 24px;
    box-shadow: 0 28px 64px rgba(15,23,42,.18);
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.96));
    border: 1px solid rgba(148, 163, 184, 0.14);
    overflow: hidden;
}
.auth-card-top {
    padding: 36px 32px 18px;
    text-align: center;
}
.auth-logo-link {
    display: block;
}
.auth-logo-image {
    max-height: 72px;
    max-width: 280px;
    display: block;
    margin: 0 auto;
}
.auth-switcher {
    background: var(--gray-50);
    border-radius: 14px;
    padding: 4px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
}
.auth-switcher-link {
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 15px;
    letter-spacing: 0.01em;
    color: var(--gray-700) !important;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.auth-switcher .nav-link:not(.active):hover {
    background: rgba(29, 78, 216, 0.08);
    color: var(--gray-900) !important;
}
.auth-switcher .nav-link.active {
    background: var(--primary-gradient);
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(29, 78, 216, 0.28);
}
.auth-switcher .nav-link.active:hover {
    transform: translateY(-1px);
}
.auth-switcher .nav-link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.22), 0 10px 22px rgba(15, 23, 42, 0.05);
}
.auth-trial-alert {
    background: linear-gradient(180deg, rgba(234,242,255,0.98), rgba(255,255,255,0.96));
    color: var(--primary-dark);
    border-color: rgba(29, 78, 216, 0.14);
    border-radius: 14px;
}
.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--gray-50);
    border-bottom: 1px solid var(--border);
}
.auth-tab {
    padding: 14px;
    text-align: center;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all .15s;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}
.auth-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: white;
}
.auth-card .card-body { padding: 32px; }
.auth-card .input-group {
    flex-wrap: nowrap;
}
.auth-card .input-group > .input-group-text,
.auth-card .input-group > .form-control,
.auth-card .input-group > .btn {
    width: auto;
}
.auth-card .input-group > .form-control {
    flex: 1 1 auto;
    min-width: 0;
}
.auth-meta-row {
    gap: 12px;
}
.auth-password-toggle {
    flex: 0 0 auto;
}
.auth-card-login {
    max-width: 460px;
}
.auth-card-signup {
    max-width: 560px;
}
.auth-heading-wrap {
    margin-top: 18px;
}
.auth-title {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--gray-900);
}
.auth-subtitle {
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.5;
}
.auth-panel {
    border-radius: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(148, 163, 184, 0.14);
}
.auth-panel-soft {
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(234, 242, 255, 0.78));
}
.auth-panel-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-900);
}
.auth-panel-text {
    margin-top: 4px;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.45;
}
.auth-form .form-control,
.auth-form .form-select,
.auth-form .input-group-text {
    min-height: 48px;
}
.auth-form .mb-3,
.auth-form .mb-4 {
    margin-bottom: 14px !important;
}
.auth-form .input-group-text {
    align-items: center;
}
.auth-section-title {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-dark);
}
.auth-primary-btn {
    min-height: 50px;
    border-radius: 14px;
}
.auth-footer-note {
    line-height: 1.5;
}

@media (min-width: 992px) {
    .auth-switcher {
        padding: 6px;
        border-radius: 16px;
    }
    .auth-switcher-link {
        padding: 12px 18px;
        font-size: 16px;
    }
}

.landing-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 10; padding: 20px 0; }
.landing-nav-inner {
    z-index: 2;
}
.landing-logo-image {
    height: 38px;
    filter: brightness(0) invert(1);
}
.landing-hero {
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 24%),
        linear-gradient(135deg, #0f172a 0%, #1e3a8a 42%, #2563eb 100%);
    color: white;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.landing-hero::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background: rgba(255,255,255,.08);
    border-radius: 50%;
    top: -100px;
    right: -100px;
}
.landing-hero::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(255,255,255,.05);
    border-radius: 50%;
    bottom: -50px;
    left: -50px;
}
.hero-content { position: relative; z-index: 2; padding: 80px 0; }
.landing-hero-title {
    line-height: 1.1;
}
.landing-hero-highlight {
    background: linear-gradient(90deg,#fbbf24,#f472b6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero-badge {
    display: inline-block;
    background: rgba(255,255,255,.2);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
}
.landing-preview-card {
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 26px 60px rgba(15,23,42,.2);
}
.landing-preview-topbar {
    background: #f9fafb;
    padding: 12px 20px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    gap: 6px;
}
.landing-preview-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.landing-preview-dot-danger { background: #ef4444; }
.landing-preview-dot-warning { background: #f59e0b; }
.landing-preview-dot-success { background: #28a745; }
.landing-preview-body {
    padding: 20px;
}
.landing-preview-team {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
}
.landing-preview-staff-card {
    text-align: center;
    padding: 10px;
    background: #f9fafb;
    border-radius: 12px;
}
.landing-preview-avatar {
    width: 32px;
    height: 32px;
    font-size: 13px;
}
.landing-preview-meta {
    font-size: 10px;
}
.landing-feature-card {
    border-radius: 20px;
}
.feature-icon {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 18px;
}
.landing-feature-primary { background: rgba(29, 78, 216, 0.12); color: var(--primary); }
.landing-feature-success { background: rgba(16, 185, 129, 0.12); color: #059669; }
.landing-feature-warm { background: rgba(245, 158, 11, 0.14); color: #d97706; }
.landing-feature-danger { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.landing-feature-secondary { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.landing-feature-soft { background: rgba(14, 165, 233, 0.12); color: #0284c7; }
.landing-footer {
    background: var(--gray-50);
}

.pricing-hero {
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 26%),
        linear-gradient(135deg, #0f172a, #1e3a8a 58%, #2563eb 100%);
    color: #fff;
    padding: 70px 0 120px;
}
.pricing-hero-subtitle {
    max-width: 680px;
    margin: 0 auto;
}
.pricing-shell {
    margin-top: -60px;
    position: relative;
    z-index: 2;
}
.pricing-card {
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 24px;
    padding: 32px;
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
    height: 100%;
    position: relative;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}
.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px rgba(15,23,42,.1);
}
.pricing-card.popular {
    border: 2px solid var(--primary);
    box-shadow: 0 16px 36px rgba(29, 78, 216, .14);
}
.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: #fff;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
}
.price-amount {
    font-size: 48px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}
.price-currency {
    font-size: 24px;
    font-weight: 700;
    vertical-align: top;
}
.price-period {
    color: #64748b;
    font-size: 14px;
}
.pricing-toggle .btn {
    border-radius: 12px;
    padding: 8px 18px;
    font-weight: 600;
    font-size: 14px;
}
.pricing-toggle .btn-check:checked + .btn {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.pricing-discount-badge {
    font-size: 10px;
}
.pricing-yearly-note {
    display: none;
}
.pricing-feature-list {
    flex-grow: 1;
}
.feature-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #dcf1e0;
    color: #16a34a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 10px;
    font-size: 12px;
}

/* ===== APP LAYOUT (Salonized style) ===== */
.app-layout { display: flex; min-height: 100vh; min-height: 100dvh; }
.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    border-right: 1px solid rgba(148, 163, 184, 0.16);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: 100;
    transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 14px 0 36px rgba(15,23,42,0.05);
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }

.sidebar-brand {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}
.sidebar-brand a, .sidebar-brand img { display: block; }
.sidebar-brand-logo { display: none; }
.brand-logo-full {
    height: 34px;
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
.salon-switcher {
    padding: 12px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.salon-switcher select {
    border-radius: 8px;
    border: 1px solid var(--border);
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 500;
    width: 100%;
    background: var(--gray-50);
    color: var(--text);
}
.salon-switcher-summary {
    border-radius: 14px;
    padding: 7px !important;
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(255,255,255,0.82));
    border: 1px solid rgba(148, 163, 184, 0.12);
}
.salon-switcher-avatar {
    width: 30px;
    height: 30px;
    font-size: 12px;
    background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
    box-shadow: 0 10px 20px rgba(29, 78, 216, 0.18);
}
.salon-switcher-name { max-width: 124px; }
.salon-switcher-role { font-size: 11px; }
.sidebar-nav { padding: 8px 8px 20px; }
.sidebar-section-title {
    font-size: 10.5px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: .6px;
    padding: 12px 10px 6px;
}
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 12px;
    color: var(--gray-700);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
    transition: all .16s ease;
}
.sidebar-link i { font-size: 15px; width: 18px; text-align: center; color: var(--text-muted); }
.sidebar-link:hover { background: rgba(29, 78, 216, 0.06); color: var(--text); }
.sidebar-link.active {
    background: linear-gradient(180deg, rgba(29, 78, 216, 0.12), rgba(29, 78, 216, 0.07));
    color: var(--primary-dark);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.08);
}
.sidebar-link.active i { color: var(--primary); }

.main-area {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg);
}
.topbar {
    height: var(--topbar-height);
    background: var(--topbar-bg);
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    padding: 0 18px;
    gap: 20px;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 10px 26px rgba(15,23,42,0.04);
}
.topbar-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--gray-900);
}
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.topbar-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255,255,255,0.92);
    color: var(--gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .16s ease;
}
.topbar-btn:hover { background: #ffffff; color: var(--text); box-shadow: var(--shadow-sm); }
.topbar-user-trigger {
    width: auto;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 14px;
}
.topbar-user-avatar {
    width: 32px;
    height: 32px;
    font-size: 13px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}

/* === Live klantzoeken (klantenpagina + afspraak-modal) === */
.customer-search-wrapper { position: relative; }
.customer-search-toggle i { transition: transform .18s ease; }
.customer-search-wrapper:has(.customer-search-dropdown.open) .customer-search-toggle i { transform: rotate(180deg); }
.customer-search-dropdown {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    margin-top: 6px; background: #fff; border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
    z-index: 1080; max-height: 380px; overflow-y: auto; padding: 6px;
}
.customer-search-dropdown.open { display: block; }
.customer-search-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 9px; text-decoration: none;
    color: var(--text); transition: background .12s ease;
}
.customer-search-item:hover,
.customer-search-item.active { background: var(--primary-light); color: var(--text); }
.customer-search-avatar {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
    background: var(--primary-gradient); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 13px;
}
.customer-search-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.customer-search-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.customer-search-contact { font-size: 12px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.customer-search-meta { font-size: 11px; color: var(--gray-500); }
.customer-search-item:hover .customer-search-contact,
.customer-search-item.active .customer-search-contact,
.customer-search-item:hover .customer-search-meta,
.customer-search-item.active .customer-search-meta { color: var(--gray-600); }
.avatar-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
}
.page-content { padding: 16px; }
.mobile-toggle {
    display: none;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: white;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 99;
}

/* ===== CARDS ===== */
.card {
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: var(--radius-md);
    background: var(--surface);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-md);
    margin-bottom: 24px;
    overflow: hidden;
    transition: box-shadow 0.24s ease, border-color 0.24s ease;
}
.card:hover {
    box-shadow: var(--shadow-lg);
    border-color: rgba(148, 163, 184, 0.2);
}
.card-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.92), rgba(255,255,255,0.76));
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--gray-800);
}
.card-body { padding: 24px; }

.stat-card {
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: var(--radius-md);
    padding: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.96));
    box-shadow: var(--shadow-md);
    transition: box-shadow .2s ease, border-color .2s ease;
}
.stat-card:hover { 
    box-shadow: var(--shadow-lg);
    border-color: rgba(29, 78, 216, 0.16);
}
.stat-label {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted);
}
.stat-value {
    font-size: 26px;
    font-weight: 700;
    margin: 4px 0 0;
    color: var(--gray-900);
    line-height: 1.1;
}
.icon-box {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: white;
    flex-shrink: 0;
}

/* Buttons */
.btn {
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
}
.btn-primary {
    background: var(--primary-gradient);
    border: none;
    font-weight: 600;
    padding: 10px 20px;
    box-shadow: 0 10px 22px rgba(29, 78, 216, 0.2);
    color: white;
    transition: all 0.25s ease;
}
.btn-primary:hover { 
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%); 
    color: white; 
    box-shadow: 0 14px 28px rgba(29, 78, 216, 0.24);
    transform: translateY(-1px);
}
.btn-light-primary {
    background: var(--primary-light);
    color: var(--primary-dark);
    border: 1px solid rgba(29, 78, 216, 0.08);
    font-weight: 600;
    padding: 10px 20px;
    transition: all 0.25s ease;
}
.btn-light-primary:hover { background: #dce9ff; color: var(--primary-dark); transform: translateY(-1px); }
.btn-light {
    background: #f6f9fc;
    border: 1px solid rgba(148, 163, 184, 0.14);
    color: var(--gray-700);
    font-weight: 500;
}
.btn-light:hover { background: #eef4fa; color: var(--text); }
.btn-outline-primary {
    border-color: rgba(29, 78, 216, 0.28);
    color: var(--primary);
    background: #fff;
}
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); color: white; box-shadow: 0 12px 24px rgba(29, 78, 216, 0.18); }
.btn-outline-danger {
    border-color: #ef4444;
    color: #dc2626;
    background: #fff;
}
.btn-outline-danger:hover { background: #ef4444; border-color: #ef4444; color: white; }

/* Tables */
.table { margin: 0; font-size: 14px; }
.table th {
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .5px;
    border-top: none;
    padding: 10px 16px;
    background: var(--gray-50);
}
.table td { padding: 12px 16px; vertical-align: middle; border-color: var(--gray-100); }
.table-hover tbody tr:hover { background: var(--gray-50); }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* Badges */
.badge { font-weight: 500; padding: 4px 9px; border-radius: 6px; font-size: 11.5px; }
.bg-indigo { background: var(--primary) !important; }
.status-pending { background: #fef3c7; color: #92400e; }
.status-confirmed { background: #e0eef7; color: #004578; }
.status-completed { background: #d1fae5; color: #065f46; }
.status-cancelled { background: #f1f3f5; color: #6b7280; }
.status-no_show { background: #fee2e2; color: #991b1b; }
.status-active { background: #e0eef7; color: #004578; }
.status-contacted { background: #fef3c7; color: #92400e; }
.status-booked { background: #d1fae5; color: #065f46; }
.status-archived { background: #f1f3f5; color: #6b7280; }

/* Forms */
.form-control, .form-select {
    border-radius: 12px;
    border-color: rgba(148, 163, 184, 0.22);
    font-size: 14px;
    padding: 10px 14px;
    min-height: 46px;
    background: rgba(255,255,255,0.98);
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.12);
}
.form-label { color: var(--gray-700); font-weight: 500; margin-bottom: 6px; font-size: 13px; }

/* ===== AGENDA (MULTI-COLUMN) ===== */
.agenda-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.96));
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 16px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    box-shadow: var(--shadow-sm);
}
.agenda-date-nav { display: flex; align-items: center; gap: 4px; }
.agenda-date-nav button {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(255,255,255,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--gray-600);
}
.agenda-date-nav button:hover { background: #fff; box-shadow: var(--shadow-sm); }
.agenda-today-btn {
    min-height: 32px;
    padding: 0 10px !important;
}
.agenda-date-jump-btn {
    width: 32px !important;
    height: 32px;
    padding: 0;
    color: var(--gray-600) !important;
}
.agenda-date-label { font-size: 14px; font-weight: 700; min-width: 168px; text-align: center; color: var(--text); letter-spacing: -0.01em; }
.agenda-view-toggle { display: flex; border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); }
.agenda-view-toggle button {
    border: none;
    background: transparent;
    padding: 6px 10px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    color: var(--gray-600);
}
.agenda-view-toggle button.active { background: var(--primary-gradient); color: white; box-shadow: 0 10px 18px rgba(29, 78, 216, 0.16); }
.agenda-day-picker-wrap {
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.96));
    padding: 8px;
    margin-bottom: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.agenda-day-picker {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(66px, 1fr);
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.agenda-day-pill {
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    min-height: 62px;
    padding: 6px 7px 5px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2px;
    color: var(--gray-800);
    cursor: pointer;
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.agenda-day-pill:hover {
    transform: translateY(-1px);
    border-color: rgba(29, 78, 216, .22);
    box-shadow: 0 12px 26px rgba(15, 23, 42, .08);
}
.agenda-day-pill.is-today {
    border-color: rgba(29, 78, 216, .18);
    background: linear-gradient(180deg, #ffffff 0%, #f1f7ff 100%);
}
.agenda-day-pill.active {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px rgba(29, 78, 216, .10), 0 14px 28px rgba(29, 78, 216, .12);
    background: linear-gradient(180deg, #f6faff 0%, #eef4ff 100%);
}
.agenda-day-pill-weekday {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    font-weight: 700;
}
.agenda-day-pill-date {
    font-size: 19px;
    line-height: 1;
    font-weight: 700;
    color: var(--gray-900);
}
.agenda-day-pill-month {
    font-size: 10px;
    color: var(--gray-600);
    font-weight: 600;
}
.agenda-day-pill-indicator {
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: #e5e7eb;
    margin-top: 4px;
}
.agenda-day-pill-indicator.has-items {
    background: linear-gradient(90deg, #8dd3a8 0%, #6abf88 100%);
}
.agenda-day-pill.active .agenda-day-pill-indicator.has-items {
    background: linear-gradient(90deg, #6cb5ff 0%, #2b7de9 100%);
}
.flatpickr-calendar.agenda-flatpickr {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    box-shadow: 0 22px 48px rgba(15, 23, 42, .18);
    background: #ffffff;
    font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow: hidden;
}
.flatpickr-calendar.agenda-flatpickr.arrowTop::before,
.flatpickr-calendar.agenda-flatpickr.arrowTop::after,
.flatpickr-calendar.agenda-flatpickr.arrowBottom::before,
.flatpickr-calendar.agenda-flatpickr.arrowBottom::after {
    display: none;
}
.agenda-flatpickr .flatpickr-months {
    background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
    border-bottom: 1px solid rgba(0, 90, 158, .08);
    padding: 8px 6px 6px;
}
.agenda-flatpickr .flatpickr-month {
    height: 42px;
}
.agenda-flatpickr .flatpickr-current-month {
    padding-top: 6px;
    font-size: 16px;
    font-weight: 700;
}
.agenda-flatpickr .flatpickr-current-month .flatpickr-monthDropdown-months,
.agenda-flatpickr .flatpickr-current-month input.cur-year {
    font-weight: 700;
}
.agenda-flatpickr .flatpickr-prev-month,
.agenda-flatpickr .flatpickr-next-month {
    top: 10px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #ffffff;
    color: var(--primary);
}
.agenda-flatpickr .flatpickr-weekdays {
    background: transparent;
    padding: 8px 10px 0;
}
.agenda-flatpickr span.flatpickr-weekday {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.agenda-flatpickr .flatpickr-days {
    padding: 6px 10px 12px;
}
.agenda-flatpickr .dayContainer {
    gap: 4px 0;
}
.agenda-flatpickr .flatpickr-day {
    border-radius: 12px;
    border: 0;
    max-width: 38px;
    height: 38px;
    line-height: 38px;
    color: var(--gray-700);
    font-weight: 600;
}
.agenda-flatpickr .flatpickr-day:hover {
    background: #eef6ff;
    color: var(--primary);
}
.agenda-flatpickr .flatpickr-day.today {
    border: 1px solid rgba(0, 90, 158, .18);
    background: #f8fbff;
    color: var(--primary);
}
.agenda-flatpickr .flatpickr-day.selected,
.agenda-flatpickr .flatpickr-day.startRange,
.agenda-flatpickr .flatpickr-day.endRange {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 8px 18px rgba(0, 90, 158, .24);
}
.agenda-flatpickr .flatpickr-day.flatpickr-disabled,
.agenda-flatpickr .flatpickr-day.prevMonthDay,
.agenda-flatpickr .flatpickr-day.nextMonthDay {
    color: #c0c7d1;
}
.flatpickr-calendar.agenda-flatpickr.agenda-flatpickr-time {
    width: 310px;
}
.agenda-flatpickr-time .flatpickr-time {
    border-top: 0;
    padding: 12px;
    height: auto;
    max-height: none;
}
.agenda-flatpickr-time .flatpickr-time .numInputWrapper,
.agenda-flatpickr-time .flatpickr-time input {
    height: 48px;
}
.agenda-flatpickr-time .flatpickr-time input {
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-900);
}
.agenda-flatpickr-time .flatpickr-am-pm,
.agenda-flatpickr-time .flatpickr-time-separator {
    height: 48px;
    line-height: 48px;
    font-size: 22px;
    font-weight: 700;
    color: var(--gray-500);
}
.agenda-flatpickr-time .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--primary);
}
.agenda-flatpickr-time .numInputWrapper span.arrowDown:after {
    border-top-color: var(--primary);
}
.agenda-timepicker-toggle {
    border: 1px solid var(--border);
    border-left: 0;
    min-width: 46px;
    color: var(--primary);
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}
.agenda-timepicker-toggle:hover {
    background: #eef6ff;
    color: var(--primary-dark);
}
.agenda-timepicker-toggle:focus {
    box-shadow: none;
}

.agenda-grid {
    display: grid;
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    background: white;
}
.agenda-grid-shell {
    max-height: calc(100vh - 200px);
    overflow: hidden;
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
}
.agenda-header {
    display: grid;
    background: var(--gray-50);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}
.agenda-header-cell {
    padding: 10px 8px;
    text-align: center;
    border-right: 1px solid var(--border);
    font-size: 13px;
    color: var(--gray-700);
}
.agenda-header-cell:last-child { border-right: none; }
.agenda-header-cell .emp-name { font-size: 13px; }
.agenda-header-cell .emp-day { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.agenda-body {
    display: grid;
    position: relative;
    overflow-y: auto;
    max-height: calc(100vh - 240px);
    padding-bottom: 0;
    scroll-padding-bottom: 0;
}
.time-col {
    border-right: 1px solid var(--border);
    position: relative;
}
.time-slot {
    height: 40px;
    border-bottom: 1px solid var(--gray-100);
    font-size: 10.5px;
    color: var(--text-muted);
    text-align: right;
    padding-right: 8px;
    padding-top: 2px;
    font-weight: 500;
}
.emp-col { position: relative; border-right: 1px solid var(--border); }
.emp-col:last-child { border-right: none; }
.emp-slot {
    height: 40px;
    border-bottom: 1px solid var(--gray-100);
    cursor: pointer;
    transition: background .1s;
}
.emp-slot:hover { background: var(--primary-light); }
.emp-slot.half { border-bottom: 1px dashed var(--gray-200); }

/* Agenda rendering classes (JS-generated) */
.agenda-grid-wrap { border: 1px solid #dbe2ea; border-radius: 12px; overflow: hidden; background: #ffffff; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04); }
.agenda-grid { overflow-x: auto; }
.agenda-header-row {
    display: grid;
    background: #ffffff;
    border-bottom: 1px solid #e6ebf1;
    position: sticky;
    top: 0;
    z-index: 3;
}
.agenda-time-col {
    background: #fbfcfe;
    border-right: 1px solid #e6ebf1;
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 68px;
}
.agenda-employee-header {
    padding: 7px 5px;
    text-align: center;
    border-right: 1px solid #eef2f6;
    background: #ffffff;
}
.agenda-employee-header:last-child { border-right: none; }
.agenda-employee-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin: 0 auto 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 11px;
    box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08);
}
.agenda-time-label {
    font-size: 12px;
    color: #64748b;
    text-align: right;
    padding-right: 8px;
    padding-top: 3px;
    border-bottom: 1px solid #eef2f6;
    font-weight: 600;
    box-sizing: border-box;
    letter-spacing: -0.01em;
}
.agenda-cell {
    border-bottom: 1px solid #eef2f6;
    cursor: pointer;
    transition: background .08s;
}
.agenda-cell:hover { background: #f5f8ff; }
.agenda-cell.agenda-cell-disabled {
    cursor: not-allowed;
    background: rgba(148, 163, 184, 0.06);
}
.agenda-cell.agenda-cell-disabled:hover {
    background: rgba(148, 163, 184, 0.06);
}
.agenda-cell-half-hour { background-image: linear-gradient(to bottom, rgba(255,255,255,0.65), rgba(255,255,255,0.65)); }
.agenda-column.is-drop-target { background: linear-gradient(180deg, rgba(59,130,246,.06), rgba(59,130,246,.02)); }
.appointment-block {
    position: absolute;
    left: 3px;
    right: 3px;
    border-radius: 7px;
    padding: 5px 6px 6px;
    color: #0f172a;
    font-size: 10.5px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1px;
    box-shadow: 0 1px 0 rgba(15,23,42,.04);
    border: 1px solid rgba(15,23,42,.05);
    border-left: 3px solid rgba(0,0,0,.18);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
    z-index: 2;
}
.appointment-block:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(15,23,42,.08); z-index: 5; }
.appointment-block.agenda-draggable { cursor: grab; }
.appointment-block.agenda-draggable:active { cursor: grabbing; }
.appointment-block.is-drag-source { opacity: .28; }
.appointment-block-muted { box-shadow: 0 1px 0 rgba(15,23,42,.03); }
.appointment-block.schedule-label {
    pointer-events: none;
    cursor: default;
    color: #0f172a;
    box-shadow: none;
    border-radius: 999px;
    padding: 4px 10px;
    z-index: 4;
}
.appointment-block.schedule-label:hover { transform: none; box-shadow: none; z-index: 4; }
.appointment-block.schedule-label .schedule-label-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.appointment-block.schedule-label .schedule-label-time {
    flex: 0 0 auto;
    font-weight: 600;
    font-size: 11px;
    opacity: .78;
}
.appointment-block .appt-time {
    font-weight: 800;
    font-size: 10.5px;
    opacity: .9;
    line-height: 1.08;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: .01em;
}
.appointment-block-muted .appt-time {
    margin-bottom: 0;
}
.appointment-block .appt-title {
    font-weight: 800;
    font-size: 12.5px;
    line-height: 1.08;
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.appointment-block .appt-service {
    font-weight: 800;
    font-size: 12.5px;
    line-height: 1.08;
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
}
.appointment-block .appt-service,
.agenda-list-card-service {
    display: flex;
    align-items: center;
    gap: 7px;
}
.agenda-service-dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    border-radius: 999px;
    box-shadow: 0 0 0 2px rgba(255,255,255,.28);
}
.appointment-block .appt-customer,
.appointment-block .appt-employee {
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.08;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: .82;
}
.appointment-block .appt-employee {
    opacity: .72;
}
.agenda-drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 1200;
    opacity: .95;
    transform: rotate(-1deg);
    box-shadow: 0 18px 35px rgba(15,23,42,.2);
}
.agenda-dragging {
    user-select: none;
    cursor: grabbing;
}
.appointment-block-week {
    padding: 5px 6px 6px;
    border-radius: 7px;
}
.appointment-block-week .appt-time {
    font-size: 12.5px;
}
.appointment-block-day {
    padding: 5px 7px 6px;
    border-radius: 7px;
    gap: 2px;
}
.appointment-block-day.appointment-block-parallel {
    padding: 3px 5px 4px;
    gap: 1px;
    min-height: 30px;
    border-radius: 6px;
    box-shadow: 0 3px 8px rgba(15,23,42,.08);
}
.appointment-block-day.appointment-block-parallel .appt-title {
    font-size: 10.5px;
    line-height: 1.02;
    -webkit-line-clamp: 1;
}
.appointment-block-day.appointment-block-parallel .appt-time {
    font-size: 9px;
    line-height: 1;
}
.appointment-block-short {
    padding: 3px 5px;
    gap: 1px;
}
.appointment-block-short .appt-time {
    font-size: 8.6px;
    line-height: 1;
}
.appointment-block-short .appt-service {
    font-size: 10.2px;
    line-height: 1.02;
    -webkit-line-clamp: 1;
}
.appointment-block-short .appt-customer,
.appointment-block-short .appt-employee {
    font-size: 10.2px;
    line-height: 1;
    -webkit-line-clamp: 1;
    opacity: .92;
}
.appointment-block-medium {
    padding: 4px 6px;
    gap: 1px;
}
.appointment-block-medium .appt-time {
    font-size: 12.5px;
}
.appointment-block-medium .appt-service {
    font-size: 12.5px;
}
.appointment-block-medium .appt-customer,
.appointment-block-medium .appt-employee {
    font-size: 12.5px;
}
.appointment-block-readable-short {
    padding: 4px 6px 5px;
    gap: 2px;
    min-height: 44px;
    z-index: 4;
    box-shadow: 0 4px 10px rgba(15,23,42,.06);
}
.appointment-block-readable-short .appt-time {
    font-size: 9.5px;
    line-height: 1.05;
}
.appointment-block-readable-short .appt-title {
    font-size: 11.5px;
    line-height: 1.06;
}
.appointment-block-day.appointment-block-readable-short .appt-title {
    -webkit-line-clamp: 2;
}
.appointment-block-day .appt-time {
    font-size: 10.5px;
    line-height: 1.08;
}
.appointment-block-day .appt-title {
    max-width: 100%;
    -webkit-line-clamp: 2;
}
.appointment-block-day .appt-service,
.appointment-block-day .appt-customer,
.appointment-block-day .appt-employee {
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.appointment-block-day .appt-service {
    -webkit-line-clamp: 2;
}
.appointment-block-day .appt-customer,
.appointment-block-day .appt-employee {
    -webkit-line-clamp: 1;
}
.appointment-block-week .appt-service,
.appointment-block-week .appt-customer,
.appointment-block-week .appt-employee {
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.appointment-block-week .appt-service {
    -webkit-line-clamp: 2;
}
.appointment-block-week .appt-customer,
.appointment-block-week .appt-employee {
    -webkit-line-clamp: 1;
}
.appointment-block.status-pending { background: #f59e0b; border-left-color: #b45309; }
.appointment-block.status-confirmed { background: var(--primary); border-left-color: var(--primary-dark); }
.appointment-block.status-completed { background: #10b981; border-left-color: #047857; }
.appointment-block.status-cancelled { background: #9ca3af; border-left-color: #6b7280; opacity: .7; }
.appointment-block.status-no_show { background: #ef4444; border-left-color: #b91c1c; }
.appointment-block.time-off-block {
    cursor: default;
    border-left-width: 0;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px;
    padding: 4px;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(15,23,42,.12);
}
.appointment-block.time-off-block:hover {
    transform: none;
    box-shadow: 0 4px 10px rgba(15,23,42,.12);
    z-index: 4;
}
.appointment-block-day.time-off-block {
    left: 4px;
    right: 4px;
    border-radius: 9px;
}
.appointment-block-week.time-off-block {
    left: 4px;
    right: 4px;
    border-radius: 9px;
}
.time-off-block-content {
    position: sticky;
    top: 4px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: 100%;
    padding: 5px 7px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.34);
    box-shadow: 0 2px 6px rgba(15,23,42,.04);
}
.time-off-block-label {
    font-size: 11px;
    font-weight: 800;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.time-off-block-time {
    font-size: 8.75px;
    font-weight: 700;
    line-height: 1;
    opacity: .98;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.appointment-block.time-off-block.time-off-block-compact {
    left: 3px;
    right: 3px;
    border-radius: 7px;
}
.appointment-block.time-off-block.time-off-block-compact .time-off-block-content {
    position: static;
    height: 100%;
    justify-content: center;
}
.time-off-block-meta {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    opacity: .82;
}

/* === Verwerkingszone (processing gap) === */
.processing-gap-zone {
    left: 4px;
    right: 4px;
    border-radius: 7px;
    border: 1.5px dashed rgba(148, 163, 184, 0.55);
    background: repeating-linear-gradient(
        135deg,
        rgba(148, 163, 184, 0.08),
        rgba(148, 163, 184, 0.08) 6px,
        rgba(148, 163, 184, 0.16) 6px,
        rgba(148, 163, 184, 0.16) 12px
    );
    cursor: pointer;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: auto;
    transition: background .15s ease, border-color .15s ease;
}
.processing-gap-zone:hover {
    background: repeating-linear-gradient(
        135deg,
        rgba(14, 165, 233, 0.12),
        rgba(14, 165, 233, 0.12) 6px,
        rgba(14, 165, 233, 0.22) 6px,
        rgba(14, 165, 233, 0.22) 12px
    );
    border-color: rgba(14, 165, 233, 0.7);
}
.processing-gap-label {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 3px;
    max-width: 100%;
}
.processing-gap-zone:hover .processing-gap-label {
    color: #0284c7;
}
.processing-gap-time {
    font-size: 9px;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.appointment-block-week .processing-gap-label {
    font-size: 9px;
}

/* === Processing gap: open (vulbaar) vs covered (gevuld) === */
.processing-gap-open {
    cursor: pointer;
}
.processing-gap-fill-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    color: #0284c7;
    background: rgba(14, 165, 233, 0.12);
    border: 1px solid rgba(14, 165, 233, 0.3);
    transition: background .15s ease, border-color .15s ease;
}
.processing-gap-open:hover .processing-gap-fill-pill {
    background: rgba(14, 165, 233, 0.22);
    border-color: rgba(14, 165, 233, 0.55);
}
.processing-gap-covered {
    cursor: default;
    pointer-events: none;
    border-style: solid;
    border-color: rgba(34, 197, 94, 0.45);
    background: repeating-linear-gradient(
        135deg,
        rgba(34, 197, 94, 0.06),
        rgba(34, 197, 94, 0.06) 6px,
        rgba(34, 197, 94, 0.12) 6px,
        rgba(34, 197, 94, 0.12) 12px
    );
}
.processing-gap-covered .processing-gap-label {
    color: #16a34a;
}
.appointment-block-week .processing-gap-fill-pill {
    display: none;
}

.employee-filter-select {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.98);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}
.agenda-mobile-fab {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 60;
    border: none;
    border-radius: 999px;
    background: var(--primary-gradient);
    color: #fff;
    box-shadow: 0 12px 30px rgba(79, 70, 229, .28);
    display: none;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    font-weight: 700;
}
.agenda-list-mobile {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
}
.agenda-list-day {
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.agenda-list-day-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--gray-100);
}
.agenda-list-day-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-900);
    text-transform: capitalize;
}
.agenda-list-day-subtitle,
.agenda-list-empty {
    font-size: 13px;
    color: var(--text-muted);
}
.agenda-list-empty {
    padding: 14px;
}
.agenda-list-cards {
    display: flex;
    flex-direction: column;
}
.agenda-list-card {
    display: flex;
    gap: 12px;
    padding: 14px;
    border-top: 1px solid var(--gray-100);
    cursor: pointer;
}
.agenda-list-card:first-child {
    border-top: 0;
}
.agenda-list-card-time {
    min-width: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 12px;
    background: #f5f8fd;
    padding: 8px 6px;
    color: var(--primary-dark);
    font-size: 12px;
}
.agenda-list-card-main {
    flex: 1;
    min-width: 0;
}
.agenda-list-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.agenda-list-card-customer {
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-900);
}
.agenda-list-card-service {
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 6px;
}
.agenda-list-card-meta {
    color: var(--text-muted);
    font-size: 13px;
}

/* ===== SETTINGS PAGE (Salonized "Instellingen" cards) ===== */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}
.settings-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px;
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    cursor: pointer;
    transition: all .15s;
    box-shadow: var(--shadow-sm);
}
.settings-card:hover {
    border-color: rgba(29, 78, 216, 0.16);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.settings-card-icon {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #eef5fb, #dceaf5);
    color: var(--primary-dark);
}
.settings-card-body { flex: 1; }
.settings-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}
.settings-card-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

.banner-blue {
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.14), transparent 26%),
        linear-gradient(135deg, #0f172a, #1e3a8a 60%, #2563eb 100%);
    border-radius: 22px;
    padding: 24px 28px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    box-shadow: 0 22px 44px rgba(15,23,42,.16);
}
.banner-blue h2 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.banner-blue p { margin: 0; opacity: .92; font-size: 13.5px; }
.banner-blue button {
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.3);
    color: white;
    padding: 8px 18px;
    border-radius: 7px;
    font-weight: 500;
    cursor: pointer;
}
.banner-blue button:hover { background: rgba(255,255,255,.3); }
.settings-banner-eyebrow {
    background: rgba(255,255,255,0.14);
    color: #fff;
    margin-bottom: 12px;
}
.settings-banner-actions {
    margin-top: 12px;
}
.settings-banner-illustration {
    font-size: 80px;
    opacity: .9;
}

.referral-card {
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 24%),
        linear-gradient(135deg, #1e3a8a 0%, #2563eb 62%, #60a5fa 100%);
    border-radius: 22px;
    padding: 24px;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 22px 44px rgba(30,58,138,.18);
}
.referral-card h4 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.referral-card p { margin: 0 0 16px; font-size: 13.5px; opacity: .95; }
.referral-card a { color: white; text-decoration: underline; font-weight: 500; }
.referral-illustration {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 180px;
    height: 110px;
    pointer-events: none;
    opacity: .95;
}

/* ===== BOOKING WIZARD ===== */
.booking-hero {
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 26%),
        linear-gradient(135deg, #0f172a 0%, #1e3a8a 54%, #2563eb 100%);
    color: white;
    padding: 52px 20px 116px;
    position: relative;
    overflow: hidden;
}
.booking-hero::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background: rgba(255,255,255,.06);
    border-radius: 50%;
    top: -200px;
    right: -100px;
}
.booking-hero::after {
    content: '';
    position: absolute;
    inset: auto auto -100px -90px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
}
.booking-hero-badge {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    margin-bottom: 12px;
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.booking-shell {
    margin-top: -58px;
    position: relative;
    z-index: 2;
    max-width: 820px;
}
.booking-card {
    border-radius: 24px;
    box-shadow: 0 26px 60px rgba(15, 23, 42, .1);
    border: 1px solid rgba(148, 163, 184, 0.14);
    font-family: 'Outfit', sans-serif;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.96));
    overflow: hidden;
}
.booking-card-body {
    position: relative;
}
.booking-card-body::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 88px;
    background: linear-gradient(180deg, rgba(245,249,255,.95), rgba(245,249,255,0));
    pointer-events: none;
}
.step-indicator {
    display: flex;
    justify-content: space-between;
    margin-bottom: 36px;
    position: relative;
    padding: 0 10px;
}
.step-indicator::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 38px;
    right: 38px;
    height: 1px;
    background: rgba(148, 163, 184, 0.26);
    z-index: 0;
}
.step-item {
    text-align: center;
    position: relative;
    z-index: 1;
    flex: 1;
}
.step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #d9e4ee;
    background: #fff;
    margin: 0 auto 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: #7a8797;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.step-item.completed .step-number {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}
.step-item.active .step-number {
    background: var(--primary-gradient);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 0 0 4px rgba(29, 78, 216, .12);
}
.step-label {
    font-size: 12px;
    font-weight: 500;
    color: #8a93a3;
}
.step-item.active .step-label { color: var(--primary-dark); font-weight: 600; }

.booking-card .booking-step {
    min-height: 420px;
}
.booking-feedback {
    margin-bottom: 18px;
    border-radius: 12px;
}
.booking-selection-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}
.booking-selection-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    background: #f7faff;
    border: 1px solid rgba(148, 163, 184, 0.18);
    color: #35506b;
    font-size: 13px;
    font-weight: 600;
}
.booking-actions {
    gap: 12px;
}
.booking-time-select {
    display: none;
    max-width: 420px;
    margin: 0 auto 14px;
}

.booking-card .booking-step h4 {
    margin-bottom: 1rem !important;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
}

.booking-card .booking-step > p.text-muted.small {
    line-height: 1.55;
    margin-bottom: 1.25rem;
    text-align: center;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    font-size: .95rem;
    color: #64748b !important;
}

.booking-card .form-control,
.booking-card .form-select {
    min-height: 52px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255,255,255,0.98);
    padding-inline: 16px;
    font-size: 15px;
}

.booking-card textarea.form-control {
    min-height: 96px;
}

.booking-card .btn {
    border-radius: 14px;
    min-height: 46px;
    font-weight: 600;
    padding-inline: 20px;
}

.booking-card .alert {
    border-radius: 14px;
    border: 1px solid rgba(251, 191, 36, .2);
}

.booking-card .card.bg-light {
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    background: #f8fbfd !important;
}

.booking-card .list-group-item {
    border-left: 0;
    border-right: 0;
}

@media (max-width: 767.98px) {
    .booking-card .booking-step {
        min-height: auto;
    }

    .step-indicator {
        margin-bottom: 30px;
        padding: 0;
    }

    .step-label {
        font-size: 11px;
    }
}

.employee-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    justify-content: center;
}

.employee-grid.employee-grid-empty {
    display: block;
}

.employee-grid-placeholder {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #d5e0ea;
    border-radius: 8px;
    background: #fafcfe;
    padding: 20px;
    text-align: center;
    font-size: .95rem;
}

.employee-card {
    width: 148px;
    min-height: 210px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 24px;
    padding: 24px 14px 18px;
    cursor: pointer;
    transition: all .22s cubic-bezier(0.4,0,0.2,1);
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    color: var(--text-color);
    font-family: 'Outfit', sans-serif;
    appearance: none;
    -webkit-appearance: none;
    outline: 0;
    position: relative;
    box-shadow: 0 6px 18px rgba(15,23,42,.05);
}

.employee-card:hover {
    border-color: rgba(29, 78, 216, 0.24);
    background: #fff;
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.employee-card.selected {
    border-color: var(--primary);
    background: linear-gradient(180deg, #f4f8ff 0%, #eef5ff 100%);
    box-shadow: inset 0 0 0 2px rgba(29, 78, 216, .16), 0 16px 34px rgba(29, 78, 216, .16);
    transform: translateY(-3px) scale(1.02);
}

.employee-card.selected::after {
    content: '\f26e';
    font-family: 'bootstrap-icons';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(29, 78, 216, .22);
}

.employee-card.emp-flash {
    border-color: #198754;
    background: linear-gradient(180deg, #e6f6ec 0%, #d4f0dd 100%);
    box-shadow: 0 0 0 4px rgba(25, 135, 84, .25), 0 18px 38px rgba(25, 135, 84, .22);
    transform: scale(1.05);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.employee-card.selected .employee-avatar-booking {
    box-shadow: 0 12px 28px rgba(29, 78, 216, .22);
}

.employee-card.selected .employee-card-name {
    color: var(--primary-dark);
}

.employee-card:focus-visible {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .14);
}

.employee-avatar-booking {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    background: #005a9e;
    box-shadow: 0 10px 24px rgba(15,23,42,.14);
    transition: transform .2s ease, box-shadow .2s ease;
}

.employee-card-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
    margin: 0 0 12px;
}

.employee-card-name {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 600;
    word-break: break-word;
    text-align: center;
    color: var(--gray-800);
}

@media (max-width: 767.98px) {
    .employee-grid {
        gap: 14px;
    }

    .employee-card {
        width: calc(50% - 7px);
        min-height: 192px;
        padding: 20px 12px 16px;
        border-radius: 20px;
    }

    .employee-avatar-booking {
        width: 72px;
        height: 72px;
        font-size: 22px;
    }
}

.booking-datetime {
    max-width: 460px;
    margin: 0 auto;
    text-align: center;
}

.booking-calendar-shell {
    position: relative;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 18px;
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
    box-shadow: var(--shadow-sm);
}

.booking-calendar-loading {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    padding: 6px 14px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.booking-calendar-shell.is-disabled {
    opacity: .55;
}

.booking-calendar-shell.is-disabled::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    cursor: not-allowed;
}

.booking-calendar-shell .flatpickr-calendar.inline {
    box-shadow: none;
    border: 0;
    width: 100%;
    max-width: 420px;
    background: transparent;
    margin: 0 auto;
    font-family: 'Outfit', sans-serif;
}

.booking-calendar-shell .flatpickr-months {
    margin-bottom: 10px;
}

.booking-calendar-shell .flatpickr-month {
    height: 48px;
}

.booking-calendar-shell .flatpickr-current-month {
    left: 0;
    width: 100%;
    padding: 0;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

.booking-calendar-shell .flatpickr-current-month .flatpickr-monthDropdown-months,
.booking-calendar-shell .flatpickr-current-month input.cur-year {
    font-weight: 700;
}

.booking-calendar-shell .flatpickr-prev-month,
.booking-calendar-shell .flatpickr-next-month {
    top: 7px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #f3f7fa;
}

.booking-calendar-shell .flatpickr-weekdays {
    background: #f5f5f5;
    border-radius: 0;
    margin-bottom: 8px;
}

.booking-calendar-shell span.flatpickr-weekday {
    color: #a0a7b4;
    font-weight: 600;
    font-size: 15px;
}

.booking-calendar-shell .dayContainer {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

.booking-calendar-shell .flatpickr-days,
.booking-calendar-shell .dayContainer + .dayContainer {
    width: 100%;
}

.booking-calendar-shell .flatpickr-day {
    max-width: none;
    height: 54px;
    line-height: 54px;
    border-radius: 0;
    border: 0;
    color: #97a0ad;
    position: relative;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0;
}

.booking-calendar-shell .flatpickr-day::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 6px;
    height: 4px;
    border-radius: 999px;
    background: var(--booking-day-indicator, #e8eef4);
}

.booking-calendar-shell .flatpickr-day.has-availability {
    color: #177a33;
    font-weight: 600;
    background: rgba(120, 214, 111, 0.08);
}

.booking-calendar-shell .flatpickr-day.has-availability::after {
    background: #2bb24c;
}

.booking-calendar-shell .flatpickr-day.has-availability:not(.selected):not(.startRange):not(.endRange) {
    box-shadow: inset 0 0 0 1px rgba(43, 178, 76, 0.14);
}

.booking-calendar-shell .flatpickr-day.flatpickr-disabled::after,
.booking-calendar-shell .flatpickr-day.prevMonthDay::after,
.booking-calendar-shell .flatpickr-day.nextMonthDay::after {
    display: none;
}

.booking-calendar-shell .flatpickr-day.today {
    border: 0;
    color: var(--text-color);
    background: transparent;
}

.booking-calendar-shell .flatpickr-day.selected,
.booking-calendar-shell .flatpickr-day.startRange,
.booking-calendar-shell .flatpickr-day.endRange {
    background: #1f1f22;
    color: #fff;
}

.booking-calendar-shell .flatpickr-day.selected::after,
.booking-calendar-shell .flatpickr-day.startRange::after,
.booking-calendar-shell .flatpickr-day.endRange::after {
    background: transparent;
}

.booking-slots-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 18px;
    text-align: center;
}

.booking-slots-title::before,
.booking-slots-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #dfe4ea;
}

.time-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 10px;
    max-width: 420px;
    margin: 0 auto;
}

.time-grid.time-grid-empty {
    display: block;
    max-width: 420px;
    margin: 0 auto;
}

.time-grid-placeholder {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #d5e0ea;
    border-radius: 8px;
    background: #fafcfe;
    padding: 16px;
    text-align: center;
    font-size: .95rem;
}

.time-slot {
    padding: 14px 10px;
    border: 1px solid #d7e4ef;
    background: linear-gradient(180deg, #fff 0%, #f7fbfd 100%);
    border-radius: 14px;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    color: var(--gray-800);
    transition: all .18s cubic-bezier(0.4,0,0.2,1);
    min-height: 50px;
    font-family: 'Outfit', sans-serif;
    box-shadow: 0 4px 12px rgba(15,23,42,.04);
}

#employeeWrapper,
#noSlotsMsg {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.time-slot:hover {
    background: linear-gradient(180deg, #f4f8ff 0%, #eef5ff 100%);
    border-color: var(--primary);
    color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(29, 78, 216, .12);
}

.time-slot.selected {
    background: var(--primary-gradient);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 12px 26px rgba(29, 78, 216, .24);
    transform: translateY(-2px);
}

.booking-wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: 30px 20px;
}
.booking-steps {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 30px;
}
.step-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted);
    position: relative;
}
.step-dot.active { border-color: var(--primary); background: var(--primary); color: white; }
.step-dot.done { border-color: var(--primary); background: var(--primary-light); color: var(--primary-dark); }
.step-dot:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: 30px;
    height: 2px;
    background: var(--border);
}
.step-dot.done:not(:last-child)::after { background: var(--primary); }

.service-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    cursor: pointer;
    transition: all .12s;
    background: white;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.service-card:hover { border-color: var(--primary); background: var(--primary-light); }
.service-card.selected { border-color: var(--primary); background: var(--primary-light); }
.service-card .svc-name { font-weight: 600; font-size: 14px; }
.service-card .svc-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.service-card .svc-meta { font-size: 13px; color: var(--gray-700); font-weight: 500; }

.time-grid-legacy {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
}
.time-slot-btn {
    padding: 10px;
    border: 1px solid var(--border);
    background: white;
    border-radius: 7px;
    text-align: center;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
    transition: all .12s;
}
.time-slot-btn:hover { border-color: var(--primary); color: var(--primary-dark); }
.time-slot-btn.selected { background: var(--primary); color: white; border-color: var(--primary); }

.emp-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    transition: all .12s;
    background: white;
    text-align: center;
    margin-bottom: 10px;
}
.emp-card:hover { border-color: var(--primary); }
.emp-card.selected { border-color: var(--primary); background: var(--primary-light); }
.emp-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 22px;
}

/* Toast */
.toast-notif {
    position: fixed;
    top: 84px;
    right: 24px;
    color: white;
    padding: 14px 18px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
    z-index: 2000;
    animation: slideIn .25s ease-out;
    font-size: 14px;
    font-weight: 600;
    max-width: min(360px, calc(100vw - 32px));
}
.toast-success { background: #10b981; }
.toast-danger { background: #ef4444; }
.toast-warning { background: #f59e0b; color: #fff; }
.toast-info { background: #3b82f6; }
@keyframes slideIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ===== Dashboard widgets ===== */
.dashboard-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: rgba(29, 78, 216, 0.08);
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.dashboard-subtitle {
    max-width: 580px;
}
.stat-icon {
    box-shadow: 0 14px 26px rgba(15,23,42,0.08);
}
.stat-icon-appointments { background: linear-gradient(135deg, #1d4ed8, #3b82f6); }
.stat-icon-occupancy { background: linear-gradient(135deg, #059669, #10b981); }
.stat-icon-revenue { background: linear-gradient(135deg, #d97706, #f59e0b); }
.stat-icon-customers { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.stat-icon-followup { background: linear-gradient(135deg, #d97706, #f59e0b); }
.stat-icon-lapsed { background: linear-gradient(135deg, #dc2626, #ef4444); }
.stat-icon-new-customer { background: linear-gradient(135deg, #2563eb, #60a5fa); }
.stat-icon-action-customers { background: linear-gradient(135deg, #059669, #34d399); }
.stat-icon-cancelled { background: linear-gradient(135deg, #be185d, #ec4899); }
.stat-icon-archived { background: linear-gradient(135deg, #4b5563, #6b7280); }
.occupancy-ring { position: relative; display: inline-block; }
.occupancy-ring svg { transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--gray-100); stroke-width: 10; }
.ring-fill { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1s ease-out; stroke: var(--primary); }
.occupancy-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.occupancy-label .pct { font-size: 26px; font-weight: 700; color: var(--gray-900); line-height: 1; }
.occupancy-label .lbl { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }

.emp-occ-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--gray-100);
}
.emp-occ-row:last-child { border-bottom: none; }
.emp-occ-bar {
    height: 6px;
    background: var(--gray-100);
    border-radius: 3px;
    overflow: hidden;
}
.emp-occ-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #004578);
    border-radius: 3px;
    transition: width .4s;
}

.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
}
.empty-state i { font-size: 48px; margin-bottom: 12px; color: var(--gray-300); }
.dashboard-category-group {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.94));
}
.dashboard-category-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
}
.dashboard-category-title { letter-spacing: .08em; }
.dashboard-appointment-row { border-radius: 14px; }
.dashboard-appointment-time { min-width: 62px; }
.dashboard-appointment-start { font-size: 14px; line-height: 1; }
.dashboard-appointment-end { font-size: 11px; }
.dashboard-appointment-avatar {
    width: 34px;
    height: 34px;
    font-size: 12px;
    flex-shrink: 0;
}
.dashboard-quick-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dashboard-quick-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    color: var(--gray-700);
    border: 1px solid transparent;
    background: transparent;
    font-weight: 600;
}
.dashboard-quick-link:hover {
    color: var(--text);
    background: #f8fbff;
    border-color: rgba(148, 163, 184, 0.14);
}
.dashboard-quick-link i {
    width: 20px;
    text-align: center;
    color: var(--primary);
}

.bg-primary-light { background-color: var(--primary-light) !important; }

/* Booking page category cards */
.cat-card {
    cursor: pointer;
    border: 1px solid rgba(148, 163, 184, 0.14) !important;
    border-radius: 18px !important;
    transition: all .15s ease;
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%) !important;
    box-shadow: var(--shadow-sm);
}
.cat-card:hover {
    border-color: rgba(29, 78, 216, 0.16) !important;
    background: #fff !important;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.cat-thumb {
    width: 112px;
    min-width: 112px;
    height: 80px;
    border-radius: 16px;
    background: #eef5fb;
    overflow: hidden;
    border: 1px solid #e5edf4;
    position: relative;
}
.cat-thumb-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cat-thumb-fallback {
    width: 100%;
    height: 100%;
    background: #eef5fb;
    color: #8a9db6;
    font-size: 26px;
}
.cat-chevron {
    font-size: 20px;
    transition: transform .2s ease;
}
.cat-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}
.cat-desc {
    font-size: .94rem;
    color: #64748b;
    line-height: 1.4;
    margin-top: 2px;
}
.cat-meta {
    font-size: .85rem;
    color: #64748b;
}
.cat-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}
.cat-meta-item i {
    color: var(--primary);
    font-size: .9rem;
}
.min-width-0 { min-width: 0 !important; }
.cat-services { display: none; }
.cat-services.show { display: block; }
.booking-service-list {
    border-color: rgba(148, 163, 184, 0.16) !important;
    border-radius: 16px !important;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.service-option {
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
    border-left: 3px solid transparent;
    background: #fff;
}
.service-option:hover {
    background: #f8fbfe;
}
.service-option.bg-primary-light {
    border-left-color: var(--primary) !important;
    background: #d8e9ff !important;
    box-shadow: inset 0 0 0 2px var(--primary) !important;
    border-color: var(--primary) !important;
}
.service-option .form-check-input:checked { background-color: var(--primary) !important; border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(29, 78, 216, .25) !important; }
.booking-service-summary {
    background: linear-gradient(180deg, #f4f8ff 0%, #eef5ff 100%) !important;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.08);
}
.booking-service-summary-icon {
    font-size: 20px;
}
.booking-success-icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    box-shadow: 0 16px 40px rgba(16, 185, 129, .28);
    animation: successPop .5s cubic-bezier(0.34,1.56,0.64,1);
}
.booking-success-icon i {
    font-size: 52px;
    color: #fff;
}
@keyframes successPop {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.booking-success-card {
    min-width: 0;
    width: min(100%, 460px);
    max-width: 460px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(148,163,184,.14);
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    text-align: left;
}
.booking-success-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
    border-bottom: 1px solid rgba(148,163,184,.1);
    font-weight: 700;
    color: var(--gray-900);
}
.booking-success-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--primary-gradient);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.booking-success-body {
    padding: 18px 22px;
}
.booking-confirm-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
    align-items: flex-start;
}
.booking-confirm-row:last-child { border-bottom: 0; padding-bottom: 0; }
.booking-confirm-row:first-child { padding-top: 0; }
.booking-confirm-label {
    font-size: .85rem;
    color: var(--text-muted);
    font-weight: 500;
    flex-shrink: 0;
    min-width: 90px;
}
.booking-confirm-value {
    font-size: .95rem;
    color: var(--gray-900);
    font-weight: 600;
    text-align: right;
}
.booking-confirm-value i { color: var(--primary); }
.booking-success-actions .btn { min-height: 46px; border-radius: 14px; }

.month-overview-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}
.month-overview-filter-card {
    border-radius: 22px;
}
.month-overview-toolbar-main {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.month-overview-picker {
    min-width: 220px;
    flex: 1;
}
.month-overview-picker .form-control {
    min-height: 50px;
}
.month-overview-filter-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(160px, 1fr)) auto;
    gap: 14px;
    align-items: end;
}
.month-filter-item {
    min-width: 0;
}
.month-filter-search {
    min-width: 220px;
}
.month-filter-actions {
    display: flex;
    align-items: end;
    gap: 10px;
}
.month-filter-actions .btn {
    min-height: 46px;
}
.month-overview-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.month-overview-subtitle {
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-muted);
}
.month-overview-table-wrap {
    overflow-x: auto;
}
.month-overview-table thead th {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: #f8fafc;
    border-bottom-width: 1px;
    white-space: nowrap;
}
.month-overview-table td {
    padding-top: 14px;
    padding-bottom: 14px;
}
.month-overview-table tbody tr:hover {
    background: linear-gradient(180deg, rgba(248,251,255,0.96), rgba(255,255,255,0.98));
}
.month-table-service {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 220px;
}
.month-table-service-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    margin-top: 6px;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}
.month-table-primary {
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.25;
}
.month-table-secondary {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}
.month-table-price {
    font-weight: 700;
    color: var(--gray-900);
    white-space: nowrap;
}
.month-appointment-delete-form {
    margin: 0;
}
.month-appointment-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}
.customer-profile-card {
    border: 1px solid var(--gray-100);
}
.customer-profile-contact {
    min-width: 220px;
}
.customer-followup-card {
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    background: linear-gradient(180deg, #fff 0%, #f8fbfe 100%);
    box-shadow: var(--shadow-sm);
}
.customer-retention-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.customer-retention-scheduled {
    background: rgba(16, 185, 129, .12);
    color: #047857;
}
.customer-retention-followup {
    background: rgba(245, 158, 11, .12);
    color: #b45309;
}
.customer-retention-lapsed {
    background: rgba(239, 68, 68, .12);
    color: #b91c1c;
}
.customer-retention-new {
    background: rgba(79, 70, 229, .12);
    color: #4338ca;
}
.customer-signal-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.customer-signal-risk {
    background: rgba(239, 68, 68, .12);
    color: #b91c1c;
}
.customer-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.customer-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(29, 78, 216, .10);
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}
.customers-search-form {
    max-width: 400px;
}
.customer-avatar {
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    width: 38px;
    height: 38px;
    box-shadow: 0 10px 20px rgba(29, 78, 216, 0.18);
}
.settings-email-test-group {
    max-width: 360px;
}
.settings-stat-block + .settings-stat-block {
    padding-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}
.settings-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}
.settings-stat-label {
    letter-spacing: .5px;
    font-size: 11px !important;
}
.service-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    flex: 0 0 auto;
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.08);
}
.service-special-price-panel {
    border-color: rgba(148, 163, 184, 0.14) !important;
    background: linear-gradient(180deg, rgba(248,251,255,0.96), rgba(255,255,255,0.94)) !important;
    box-shadow: var(--shadow-sm);
}
.service-color-picker {
    height: 38px;
    padding: 4px;
}
.staff-owner-card {
    border-left: 4px solid #ef4444;
}
.staff-owner-avatar {
    width: 48px;
    height: 48px;
    font-size: 18px;
    flex-shrink: 0;
}
.staff-owner-badge {
    font-size: 11px;
}
.staff-avatar {
    width: 54px;
    height: 54px;
    font-size: 20px;
    flex-shrink: 0;
}
.opening-hours-col-day {
    width: 150px;
}
.opening-hours-col-open {
    width: 110px;
}
.opening-hours-col-action {
    width: 140px;
}
.online-booking-alert {
    border-radius: 16px;
    border: 1px solid rgba(16, 185, 129, 0.16);
    background: linear-gradient(180deg, rgba(236,253,245,0.98), rgba(255,255,255,0.96));
}
.online-feature-card {
    border-radius: 20px;
}
.online-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 16px;
}
.online-feature-availability {
    background: rgba(40, 167, 69, 0.12);
    color: #1f8a45;
}
.online-feature-confirmation {
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
}
.online-feature-protection {
    background: rgba(29, 78, 216, 0.12);
    color: var(--primary);
}
.category-list {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.category-list-item {
    padding: 16px 18px;
    border-color: rgba(148, 163, 184, 0.12);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.94));
}
.category-grip {
    color: var(--text-muted);
    cursor: grab;
}
.admin-entity-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    box-shadow: 0 10px 20px rgba(29, 78, 216, 0.18);
}
.admin-entity-avatar-sm {
    width: 36px;
    height: 36px;
    font-size: 14px;
}
.admin-user-avatar {
    width: 36px;
    height: 36px;
}
.admin-copy-input,
.admin-copy-btn {
    min-height: 40px;
}
.stat-icon-admin-salons { background: linear-gradient(135deg, #1d4ed8, #1e3a8a); }
.stat-icon-admin-today { background: linear-gradient(135deg, #059669, #16a34a); }
.stat-icon-admin-customers { background: linear-gradient(135deg, #d97706, #f59e0b); }
.stat-icon-admin-staff { background: linear-gradient(135deg, #2563eb, #0f766e); }
.staff-availability-avatar {
    width: 56px;
    height: 56px;
    font-size: 22px;
}
.pday-chip {
    min-width: 40px;
    padding: 4px 8px;
}
.availability-service-check {
    cursor: pointer;
    border-color: rgba(148, 163, 184, 0.14) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.94));
}
.availability-service-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    box-shadow: none;
}
.availability-service-check .form-check-input:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}
.availability-service-check:has(.svc-check:checked) {
    background: #f5f8ff;
}
.availability-service-check:has(.svc-check:checked) .availability-service-dot {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.8), 0 0 0 4px currentColor;
    transform: scale(1.2);
}
.customer-insight-block + .customer-insight-block {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--gray-100);
}
.booking-intake-list {
    display: grid;
    gap: 14px;
}
.booking-intake-item {
    padding: 14px;
    border: 1px solid var(--gray-100);
    border-radius: 14px;
    background: #fff;
}
.agenda-intake-box {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--gray-100);
    border-radius: 14px;
    background: #f8fafc;
}
.agenda-intake-item {
    display: grid;
    gap: 4px;
}
.agenda-intake-item strong {
    font-size: 13px;
    color: var(--dark);
}
.agenda-intake-item span {
    font-size: 13px;
    color: var(--gray-600);
}
.customer-insight-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.customer-insight-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-900);
}
.customer-insight-meta {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 14px;
}
.customer-insight-text {
    color: var(--gray-800);
    line-height: 1.65;
}
.customer-top-services {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.customer-top-service-item {
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, #fff 0%, #f8fbfe 100%);
    border: 1px solid var(--gray-100);
}
.dashboard-insight-card {
    border: 1px solid rgba(148, 163, 184, 0.14);
}
.dashboard-trend-value {
    font-size: 28px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--gray-900);
}
.dashboard-kpi-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-100);
}
.dashboard-kpi-row:last-child {
    border-bottom: 0;
}
.dashboard-top-services {
    display: flex;
    flex-direction: column;
}
.month-overview-mobile-list {
    display: none;
}
.month-overview-days {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.month-day-group + .month-day-group {
    border-top: 1px solid var(--gray-100);
}
.month-day-heading {
    padding: 18px 20px 10px;
}
.month-day-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
}
.month-day-meta {
    font-size: 13px;
    color: var(--text-muted);
}
.month-appointment-list {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.month-appointment-card {
    display: flex;
    gap: 14px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--gray-200);
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
    box-shadow: var(--shadow-sm);
}
.month-appointment-time {
    min-width: 64px;
    text-align: center;
    border-radius: 12px;
    background: #f4f8fb;
    padding: 10px 8px;
    align-self: flex-start;
}
.month-appointment-start {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-dark);
    line-height: 1.1;
}
.month-appointment-end {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}
.month-appointment-main {
    flex: 1;
    min-width: 0;
}
.month-appointment-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.month-appointment-customer {
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-900);
}
.month-appointment-service {
    color: var(--gray-700);
    font-weight: 600;
    margin-bottom: 8px;
}
.month-appointment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    color: var(--text-muted);
    font-size: 13px;
}
.month-appointment-card.status-cancelled,
.month-appointment-card.status-no_show {
    background: #fafafa;
}

/* Text-primary override to use new primary */
.text-primary { color: var(--primary) !important; }
.agenda-modal-content {
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 0 28px 64px rgba(15,23,42,.18);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.96));
}
.mobile-form-modal .modal-content {
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 0 28px 64px rgba(15,23,42,.18);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.96));
}
.agenda-quick-actions .btn {
    min-height: 40px;
}

/* Responsive */
@media (max-width: 900px) {
    .sidebar {
        width: min(86vw, 320px);
        transform: translateX(-100%);
        box-shadow: 18px 0 40px rgba(15, 23, 42, 0.16);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.open { display: block; }
    .main-area { margin-left: 0; min-width: 0; }
    .mobile-toggle { display: flex; }
    .page-content { padding: 14px; }
    .topbar {
        padding: 0 14px;
        gap: 10px;
    }
    .topbar-title {
        font-size: 17px;
        min-width: 0;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .topbar-actions { gap: 4px; flex-shrink: 0; }
    .topbar-action-secondary,
    .topbar-primary-action { display: none !important; }
    .topbar-user-menu { margin-left: 0 !important; }
    .card,
    .stat-card { border-radius: 14px; }
    .card-header,
    .card-body,
    .stat-card { padding-left: 16px; padding-right: 16px; }
    .settings-grid { grid-template-columns: 1fr; }

    .dashboard-header {
        align-items: stretch !important;
        margin-bottom: 1rem !important;
    }
    .dashboard-header,
    .page-toolbar-mobile {
        gap: 12px !important;
    }
    .dashboard-header-actions {
        width: 100%;
        flex-direction: column;
    }
    .dashboard-header-actions .btn {
        width: 100%;
        justify-content: center;
    }
    .card-footer {
        flex-direction: column;
        gap: 10px;
        align-items: stretch !important;
    }
    .card-footer .btn,
    .card-footer .btn-link {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    .dashboard-card-header {
        align-items: flex-start !important;
        gap: 10px;
        flex-direction: column;
    }
    .dashboard-card-header .btn {
        width: 100%;
        justify-content: center;
    }

    .agenda-toolbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 12px;
    }
    .agenda-date-label {
        grid-column: 1 / -1;
        min-width: 0;
        order: -1;
        text-align: left;
        font-size: 16px;
    }
    .agenda-toolbar-group,
    .employee-filter-select,
    .agenda-toolbar-actions {
        width: 100%;
    }
    .agenda-toolbar-actions {
        grid-column: 1 / -1;
        margin-left: 0 !important;
    }
    .agenda-toolbar-actions .btn,
    .employee-filter-select {
        width: 100%;
    }
    .agenda-grid-wrap {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        max-height: none !important;
    }
    .agenda-day-picker-wrap {
        padding: 10px;
    }
    .agenda-day-picker {
        grid-auto-columns: minmax(78px, 78px);
        gap: 8px;
    }
    .agenda-day-pill {
        min-height: 84px;
        padding: 9px 9px 7px;
    }
    .agenda-day-pill-date {
        font-size: 24px;
    }
    .agenda-grid {
        min-width: max-content;
    }
    .agenda-employee-header {
        min-width: 148px;
        padding: 9px 7px;
    }
    .agenda-time-col {
        min-width: 80px;
    }
    .agenda-time-label {
        font-size: 13px;
        padding-right: 10px;
    }
    .appointment-block {
        left: 4px;
        right: 4px;
        padding: 8px 9px;
    }
    .appointment-block .appt-customer,
    .appointment-block .appt-service {
        white-space: normal;
        overflow: hidden;
        text-overflow: clip;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .agenda-modal-dialog {
        margin: 0;
        max-width: none;
        width: 100vw;
        min-height: 100vh;
        min-height: 100dvh;
    }
    .agenda-modal-dialog .modal-content {
        min-height: 100vh;
        min-height: 100dvh;
        border-radius: 0 !important;
    }
    .agenda-modal-dialog .modal-body {
        overflow-y: auto;
        max-height: calc(100dvh - 138px);
    }
    .agenda-modal-dialog .modal-footer {
        flex-direction: column-reverse;
    }
    .agenda-modal-dialog .modal-footer .btn {
        width: 100%;
    }
    .agenda-mobile-fab {
        display: inline-flex;
    }
    .mobile-form-modal {
        margin: 0;
        max-width: none;
        width: 100vw;
        min-height: 100vh;
        min-height: 100dvh;
    }
    .mobile-form-modal .modal-content {
        min-height: 100vh;
        min-height: 100dvh;
        border-radius: 0 !important;
    }
    .mobile-form-modal .modal-header,
    .mobile-form-modal .modal-body,
    .mobile-form-modal .modal-footer {
        padding-left: 16px;
        padding-right: 16px;
    }
    .mobile-form-modal .modal-body {
        overflow-y: auto;
        max-height: calc(100dvh - 144px);
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
    .mobile-form-modal .modal-footer {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 10px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
    .mobile-form-modal .modal-footer .btn {
        width: 100%;
        justify-content: center;
    }

    .banner-blue {
        padding: 18px;
        align-items: flex-start;
        gap: 12px;
        flex-direction: column;
    }
    .settings-card {
        gap: 14px;
        padding: 16px;
        align-items: flex-start;
    }
    .settings-card-icon {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }
    .settings-save-bar,
    .settings-save-bar .btn {
        width: 100%;
    }
    .page-toolbar-mobile {
        align-items: stretch !important;
    }
    .page-toolbar-mobile > div:first-child {
        width: 100%;
    }
    .page-toolbar-mobile > .btn,
    .page-toolbar-mobile > a.btn {
        width: 100%;
        margin-left: 0 !important;
        justify-content: center;
    }
    .customers-search-form {
        max-width: none !important;
        width: 100%;
        flex-direction: column;
    }
    .opening-hours-actions .btn {
        width: 100%;
        justify-content: center;
    }
    .month-overview-toolbar-main,
    .month-overview-filter-grid {
        grid-template-columns: 1fr;
    }
    .month-overview-toolbar-main > .btn,
    .month-overview-picker,
    .month-filter-actions,
    .month-filter-actions .btn {
        width: 100%;
    }
    .month-filter-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .customer-profile-contact {
        width: 100%;
        text-align: left !important;
    }
    .customer-followup-card .btn {
        width: 100%;
    }
    .dashboard-kpi-row {
        align-items: flex-start;
    }
    .month-appointment-card {
        flex-direction: column;
    }
    .month-appointment-time {
        min-width: 0;
        width: fit-content;
    }

    .mobile-stack-table thead {
        display: none;
    }
    .mobile-stack-table,
    .mobile-stack-table tbody,
    .mobile-stack-table tr,
    .mobile-stack-table td {
        display: block;
        width: 100%;
    }
    .mobile-stack-table tr {
        padding: 14px;
        border-bottom: 1px solid var(--gray-100);
    }
    .mobile-stack-table tr:last-child {
        border-bottom: 0;
    }
    .mobile-stack-table td {
        border: 0 !important;
        padding: 8px 0 !important;
        text-align: left !important;
    }
    .mobile-stack-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: var(--text-muted);
    }
    .mobile-stack-table td[data-label="Acties"] {
        padding-top: 12px !important;
    }
    .mobile-stack-table td[data-label="Acties"]::before {
        margin-bottom: 8px;
    }
    .mobile-stack-table td[data-label="Acties"] .btn,
    .mobile-stack-table td[data-label="Acties"] form {
        display: inline-flex;
    }
    .mobile-form-table td {
        padding-top: 12px !important;
    }
    .mobile-form-table td .form-control,
    .mobile-form-table td .form-select {
        width: 100%;
    }
    .input-group {
        flex-wrap: wrap;
    }
    .input-group > .form-control,
    .input-group > .form-select,
    .input-group > .btn {
        width: 100%;
        border-radius: 12px !important;
    }
}
@media (max-width: 991.98px) {
    .month-overview-mobile-list {
        display: block;
    }
}

@media (max-width: 767.98px) {
    .topbar {
        height: 64px;
    }
    .toast-notif {
        top: auto;
        bottom: calc(16px + env(safe-area-inset-bottom));
        right: 16px;
        left: 16px;
        max-width: none;
    }
    .sidebar-brand {
        height: 64px;
        padding: 0 12px;
    }
    .salon-switcher {
        padding: 12px;
    }
    .sidebar-nav {
        padding: 8px 8px 24px;
    }
    .sidebar-link {
        padding: 10px 12px;
        font-size: 14px;
    }
    .card-header {
        padding-top: 14px;
        padding-bottom: 14px;
    }
    .card-body,
    .stat-card {
        padding: 14px;
    }
    .stat-card {
        gap: 12px !important;
    }
    .stat-value {
        font-size: 22px;
    }

    .booking-hero {
        padding: 32px 0 72px;
    }
    .booking-shell {
        margin-top: -40px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .booking-card .card-body {
        padding: 20px 16px !important;
    }
    .booking-selection-summary {
        position: static;
        padding: 6px 0 12px;
        margin-top: 0;
        background: transparent;
        backdrop-filter: none;
    }
    .step-indicator {
        justify-content: flex-start;
        gap: 10px;
        overflow-x: auto;
        padding: 0 2px 4px;
        margin-bottom: 22px;
        scrollbar-width: none;
    }
    .step-indicator::-webkit-scrollbar {
        display: none;
    }
    .step {
        min-width: 68px;
    }
    .step-label {
        font-size: 12px;
        line-height: 1.3;
        word-break: normal;
    }
    .booking-card .booking-step > .mt-4.d-flex {
        flex-direction: column-reverse;
        gap: 10px;
    }
    .booking-card .booking-step > .mt-4.d-flex .btn {
        width: 100%;
        justify-content: center;
    }
    .booking-actions {
        position: sticky;
        bottom: 0;
        z-index: 5;
        padding-top: 12px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.96) 28%, rgba(255,255,255,.99) 100%);
        box-shadow: 0 -12px 30px rgba(15, 23, 42, .06);
    }
    .booking-time-select {
        display: block;
    }
    .service-option {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    .cat-card {
        align-items: center !important;
        gap: 14px !important;
        padding: 16px !important;
    }
    .cat-icon {
        flex: 0 0 42px;
        width: 42px;
        min-width: 42px;
        max-width: 42px;
        height: 42px;
        min-height: 42px;
        max-height: 42px;
    }
    .cat-icon-image {
        width: 42px;
        height: 42px;
    }
    .cat-card .fs-4 {
        font-size: 1.05rem !important;
    }
    .cat-card .text-muted {
        font-size: .92rem;
        line-height: 1.35;
    }
    .employee-card {
        width: auto;
        min-height: 164px;
        padding: 16px 10px 14px;
        border-radius: 14px;
        position: relative;
        z-index: 1;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    .employee-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }
    .employee-grid.employee-grid-empty {
        display: block;
    }
    .employee-avatar-booking {
        width: 56px;
        height: 56px;
        margin-bottom: 10px;
        font-size: 48px;
    }
    .employee-card-name {
        font-size: 13px;
        line-height: 1.35;
    }
    #employeeWrapper,
    #noSlotsMsg {
        max-width: none;
    }
    #employeeWrapper {
        position: relative;
        padding-bottom: calc(92px + env(safe-area-inset-bottom));
    }
    .booking-calendar-shell {
        padding: 10px 8px;
        border-radius: 14px;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
    }
    .booking-calendar-shell .flatpickr-months {
        margin-bottom: 8px;
    }
    .booking-calendar-shell .flatpickr-current-month {
        font-size: 18px;
    }
    .booking-calendar-shell .flatpickr-day {
        height: 44px;
        line-height: 44px;
        font-size: 14px;
        border-radius: 10px;
        margin-bottom: 3px;
    }
    .booking-calendar-shell .flatpickr-day::after {
        left: 6px;
        right: 6px;
        bottom: 4px;
        height: 5px;
    }
    .booking-calendar-shell .flatpickr-day.has-availability {
        color: #15803d;
        background: rgba(43, 178, 76, .12);
    }
    .booking-calendar-shell .flatpickr-day.has-availability::after {
        background: #22c55e;
    }
    .booking-calendar-shell .flatpickr-day.selected,
    .booking-calendar-shell .flatpickr-day.startRange,
    .booking-calendar-shell .flatpickr-day.endRange {
        background: #2bb24c;
        color: #fff;
    }
    .booking-slots-title {
        font-size: 16px;
        margin-bottom: 14px;
    }
    .booking-slots-title::before,
    .booking-slots-title::after {
        display: none;
    }
    .time-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
        gap: 12px;
    }
    .time-slot {
        min-height: 48px;
        padding: 13px 8px;
        font-size: 15px;
        border-radius: 12px;
    }
    .month-day-heading {
        padding: 16px 16px 10px;
    }
    .month-appointment-list {
        padding: 0 12px 12px;
    }
    .month-appointment-title-row {
        align-items: flex-start;
        flex-direction: column;
    }
    .agenda-list-day-header,
    .agenda-list-card-top {
        flex-direction: column;
    }
    .agenda-list-day-header .btn {
        width: 100%;
    }

    .mobile-stack-table tr {
        border-radius: 12px;
        margin: 0 10px 10px;
        background: var(--gray-50);
        border: 1px solid var(--gray-200);
    }
    .mobile-stack-table tbody {
        display: block;
        padding: 10px 0;
    }
    .auth-page {
        align-items: flex-start;
        padding: 10px;
    }
    .auth-page::before {
        width: 320px;
        height: 320px;
        top: -140px;
        right: -140px;
    }
    .auth-page::after {
        width: 220px;
        height: 220px;
        bottom: -80px;
        left: -80px;
    }
    .auth-card {
        max-width: none;
        border-radius: 16px;
        box-shadow: 0 16px 34px rgba(15, 23, 42, .14);
    }
    .auth-card-top {
        padding: 16px 14px 8px;
    }
    .auth-card .card-body {
        padding: 10px 12px 12px;
    }
    .auth-heading-wrap {
        margin-top: 6px;
    }
    .auth-title {
        font-size: 1.3rem;
        line-height: 1.08;
    }
    .auth-subtitle {
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.3;
    }
    .auth-logo-image {
        max-height: 40px;
        max-width: 154px;
    }
    .auth-switcher {
        margin-bottom: 10px !important;
        padding: 3px;
    }
    .auth-switcher-link {
        padding: 9px 8px;
        font-size: 13px;
    }
    .auth-meta-row {
        flex-direction: column;
        align-items: stretch !important;
        gap: 6px;
    }
    .auth-meta-row .form-check,
    .auth-meta-row a {
        width: 100%;
    }
    .auth-meta-row a {
        text-align: left;
    }
    .auth-card .form-label {
        margin-bottom: 4px;
        font-size: 12px;
    }
    .auth-card .btn {
        min-height: 44px;
    }
    .auth-panel {
        display: none;
    }
    .auth-section-title {
        margin-bottom: 6px;
        font-size: 10px;
        letter-spacing: 0.07em;
    }
    .auth-signup-name-row > [class*="col-"],
    .auth-signup-contact-row > [class*="col-"] {
        width: 100%;
    }
    .auth-form .mb-3,
    .auth-form .mb-4 {
        margin-bottom: 8px !important;
    }
    .auth-form .form-control,
    .auth-form .form-select,
    .auth-form .input-group-text {
        min-height: 42px;
        font-size: 16px;
    }
    .auth-form .form-text {
        font-size: 12px;
        margin-top: 4px;
    }
    .auth-trial-alert {
        margin-bottom: 10px !important;
        padding: 8px 10px !important;
        font-size: 12px !important;
        line-height: 1.4;
    }
    .auth-primary-btn {
        min-height: 46px;
    }
    .auth-footer-note {
        margin-top: 10px !important;
    }
    .auth-card .input-group {
        flex-wrap: nowrap;
        align-items: stretch;
    }
    .auth-card .input-group > .input-group-text:first-child {
        display: none;
    }
    .auth-card .input-group > .form-control {
        width: 100% !important;
        min-width: 0;
        flex: 1 1 auto;
        border-radius: 14px !important;
        border-right-width: 1px !important;
    }
    .auth-card .input-group > .form-control.border-end-0 {
        border-radius: 14px 0 0 14px !important;
    }
    .auth-card .input-group > .btn,
    .auth-card .input-group > .auth-password-toggle {
        width: 42px !important;
        min-width: 42px;
        flex: 0 0 42px;
        padding: 0;
        justify-content: center;
        border-radius: 0 14px 14px 0 !important;
        margin-left: -1px;
    }
    .auth-card .input-group > .form-control + .auth-password-toggle,
    .auth-card .input-group > .form-control + .btn {
        border-left: 0;
    }
    .auth-card-signup .auth-card-top {
        padding-bottom: 4px;
    }
    .auth-card-signup .auth-title {
        font-size: 1.15rem;
        line-height: 1.05;
    }
    .auth-card-signup .auth-subtitle {
        display: none;
    }
    .auth-card-signup .auth-switcher {
        margin-bottom: 8px !important;
    }
    .auth-card-signup .auth-trial-alert {
        margin-bottom: 8px !important;
        padding: 7px 10px !important;
    }
    .auth-card-signup .auth-trial-extra {
        display: none;
    }
    .auth-card-signup .auth-section-title {
        margin-bottom: 4px;
        font-size: 9px;
    }
    .auth-card-signup .auth-form .mb-3,
    .auth-card-signup .auth-form .mb-4 {
        margin-bottom: 6px !important;
    }
    .auth-card-signup .auth-form .row.g-3 {
        --bs-gutter-y: 0.4rem;
    }
}

/* ===== BOOKING PREMIUM REDESIGN 2026 ===== */
.booking-hero {
    padding: 30px 20px 86px;
    min-height: 210px;
}
.booking-hero .container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: left !important;
}
.booking-hero-badge {
    width: 58px;
    height: 58px;
    margin: 0;
    font-size: 26px;
    flex: 0 0 auto;
}
.booking-hero-copy h1 { font-size: clamp(1.55rem, 3vw, 2.15rem); letter-spacing: -.03em; }
.booking-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.78);
}
.booking-hero-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: rgba(255,255,255,.78); font-size: 14px; }
.booking-shell { margin-top: -48px; max-width: 940px; }
.booking-card { border-radius: 28px; box-shadow: 0 28px 70px rgba(15,23,42,.14); }
.booking-card-body { padding-top: 30px !important; }
.booking-progress-copy {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin: 0 4px 12px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}
.booking-progress-copy span:first-child { color: var(--primary-dark); }
.step-indicator { margin-bottom: 30px; }
.step-indicator::before { height: 4px; top: 16px; border-radius: 999px; background: #e8eef6; }
.step-number { width: 36px; height: 36px; border-width: 3px; }
.step-item.completed .step-number { font-size: 0; }
.step-item.completed .step-number::before { content: '\f26e'; font-family: 'bootstrap-icons'; font-size: 14px; }
.step-label { font-size: 11px; }
.booking-selection-summary {
    position: sticky;
    top: 10px;
    z-index: 20;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(148,163,184,.18);
    box-shadow: 0 10px 28px rgba(15,23,42,.08);
}
.booking-selection-chip { flex: 1 1 170px; justify-content: center; background: #f8fbff; }
.booking-card .booking-step h4 { font-size: clamp(1.35rem, 2.5vw, 1.65rem); letter-spacing: -.025em; }
.cat-card {
    min-height: 132px;
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 22px;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(15,23,42,.055);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cat-card:hover { transform: translateY(-3px); border-color: rgba(29,78,216,.35); box-shadow: 0 18px 38px rgba(15,23,42,.1); }
.cat-thumb { width: 112px; height: 96px; border-radius: 16px; overflow: hidden; }
.cat-thumb-image { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.cat-card:hover .cat-thumb-image { transform: scale(1.05); }
.cat-title { font-size: 19px; font-weight: 750; color: var(--gray-900); }
.cat-desc { color: var(--text-muted); font-size: 14px; }
.cat-meta-item { padding: 5px 9px; border-radius: 999px; background: #f1f6fd; color: #47617a; font-size: 12px; }
.cat-chevron { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #f3f7fc; }
.booking-service-list { overflow: hidden; border-radius: 18px !important; }
.service-option { min-height: 88px; cursor: pointer; transition: background .18s ease, transform .18s ease; }
.service-option:hover { background: #f7faff; }
.service-option:has(.svc-radio:checked) { background: #d8e9ff !important; box-shadow: inset 0 0 0 2px var(--primary) !important; border-color: var(--primary) !important; }
.booking-service-price [data-price-amount] { font-size: 18px; }
.employee-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); max-width: 760px; margin: 0 auto; }
.employee-card { width: 100%; min-height: 230px; }
.employee-card-name { font-size: 17px; }
.booking-datetime { max-width: 760px; }
.booking-calendar-shell { padding: 18px; border-radius: 22px; }
.time-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; }
.time-slot { min-height: 48px; border-radius: 14px; font-size: 15px; font-weight: 700; }
.booking-actions .btn-primary { min-width: 150px; box-shadow: 0 10px 24px rgba(29,78,216,.2); }
.booking-step:not(.d-none) { animation: bookingStepIn .28s ease both; }
@keyframes bookingStepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 767.98px) {
    .booking-hero { padding: 22px 16px 68px; min-height: 170px; }
    .booking-hero .container { justify-content: flex-start; gap: 12px; }
    .booking-hero-badge { width: 48px; height: 48px; font-size: 22px; }
    .booking-eyebrow { font-size: 10px; }
    .booking-hero-meta { display: grid; gap: 2px; font-size: 12px; }
    .booking-shell { margin-top: -38px; padding-inline: 10px; }
    .booking-card { border-radius: 22px; }
    .booking-card-body { padding: 22px 16px !important; }
    .booking-progress-copy span:last-child { display: none; }
    .step-label { display: none; }
    .step-indicator { margin-bottom: 24px; }
    .step-indicator::before { left: 18px; right: 18px; }
    .booking-selection-summary { top: 6px; gap: 6px; }
    .booking-selection-chip { flex-basis: 100%; justify-content: flex-start; padding: 7px 10px; }
    .cat-card { min-height: 104px; padding: 12px !important; gap: 12px !important; }
    .cat-thumb { width: 82px; height: 80px; }
    .cat-title { font-size: 17px; }
    .cat-desc { display: none; }
    .cat-meta { gap: 5px !important; flex-wrap: wrap; }
    .cat-meta-item { font-size: 11px; padding: 3px 7px; }
    .employee-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .employee-card { min-height: 184px; padding: 18px 10px 14px; }
    .booking-calendar-shell { padding: 8px; }
    .time-grid { grid-template-columns: repeat(3, 1fr); gap: 9px; }
    .time-slot { min-height: 46px; }
    .booking-actions { position: sticky; bottom: 8px; z-index: 15; padding: 10px; margin-inline: -6px; border-radius: 16px; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(15,23,42,.12); }
    .booking-actions .btn { flex: 1; padding-inline: 12px; }
}

/* ===== BOOKING VISUAL FINISH 2026 — premium salon experience ===== */
body:has(.booking-shell) {
    background:
        radial-gradient(circle at 12% 8%, rgba(37,99,235,.08), transparent 26rem),
        linear-gradient(180deg, #f5f8fc 0%, #eef3f8 100%);
}
body:has(.booking-shell) .public-navbar { display: none; }
.booking-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 80% 15%, rgba(255,255,255,.16), transparent 18rem),
        linear-gradient(135deg, #0f2747 0%, #173d6c 58%, #245a96 100%);
}
.booking-hero::before,
.booking-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.booking-hero::before { width: 230px; height: 230px; right: -70px; top: -130px; border: 1px solid rgba(255,255,255,.12); }
.booking-hero::after { width: 150px; height: 150px; right: 35px; top: -78px; border: 1px solid rgba(255,255,255,.09); }
.booking-hero-badge {
    color: #fff;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 28px rgba(2,12,27,.18);
    backdrop-filter: blur(10px);
}
.booking-hero-copy h1 { color: #fff; font-weight: 760; }
.booking-card {
    overflow: visible;
    border: 1px solid rgba(255,255,255,.9);
    background: rgba(255,255,255,.98);
    box-shadow: 0 30px 85px rgba(15,39,71,.15), 0 2px 5px rgba(15,23,42,.04);
}
.booking-card-body { background: transparent; border-radius: inherit; }
.booking-progress-copy { text-transform: uppercase; letter-spacing: .055em; }
.step-indicator::before { box-shadow: inset 0 1px 2px rgba(15,23,42,.05); }
.step-number {
    color: #718096;
    background: #fff;
    border-color: #dce5ef;
    box-shadow: 0 3px 9px rgba(15,23,42,.06);
}
.step-item.active .step-number,
.step-item.completed .step-number {
    color: #fff;
    border-color: var(--primary);
    background: var(--primary);
    box-shadow: 0 7px 18px rgba(29,78,216,.25);
}
.step-item.active .step-label { color: #102a4c; font-weight: 750; }
.booking-card .booking-step h4 { color: #132f52; }
.booking-card .booking-step > p.text-muted { max-width: 620px; line-height: 1.65; }
.booking-selection-summary { border-color: rgba(57,83,115,.13); }
.booking-selection-chip {
    min-height: 38px;
    color: #294766;
    border: 1px solid #e5edf5;
    font-weight: 650;
}
.cat-block { border-radius: 23px; }
.cat-card {
    border-color: #e4ebf2;
    box-shadow: 0 9px 26px rgba(15,39,71,.055);
}
.cat-card:hover {
    border-color: rgba(37,99,235,.42);
    box-shadow: 0 20px 42px rgba(15,39,71,.12);
}
.cat-card:focus-visible { outline: 3px solid rgba(37,99,235,.24); outline-offset: 3px; }
.cat-thumb { box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 6px 16px rgba(15,23,42,.12); }
.cat-title { letter-spacing: -.015em; }
.cat-chevron { color: #34597e !important; transition: transform .2s ease, background .2s ease; }
.cat-card:hover .cat-chevron { transform: translateX(3px); background: #e9f2ff; }
.cat-services { padding: 0 10px 12px; }
.booking-service-list { border: 1px solid #e5edf5 !important; box-shadow: 0 8px 20px rgba(15,39,71,.04); }
.service-option { border-color: #edf1f6; }
.service-option:hover { transform: translateX(2px); }
.service-option:has(.svc-radio:checked) { background: #d8e9ff !important; box-shadow: inset 0 0 0 2px var(--primary) !important; border-color: var(--primary) !important; }
.employee-card {
    border: 1px solid #e3ebf3;
    border-radius: 22px;
    background: linear-gradient(180deg, #fff, #fbfdff);
    box-shadow: 0 9px 25px rgba(15,39,71,.06);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.employee-card:hover { transform: translateY(-4px); border-color: rgba(37,99,235,.4); box-shadow: 0 19px 38px rgba(15,39,71,.12); }
.employee-card.selected { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12), 0 18px 38px rgba(15,39,71,.12); }
.employee-avatar-booking { box-shadow: 0 7px 18px rgba(15,39,71,.13); }
.booking-calendar-shell {
    border: 1px solid #e1eaf3;
    background: #fff;
    box-shadow: 0 11px 32px rgba(15,39,71,.07);
}
.booking-slots-title { color: #183759; font-weight: 750; }
.time-slot {
    color: #234565;
    background: #fff;
    border: 1px solid #dce7f1;
    box-shadow: 0 4px 12px rgba(15,39,71,.045);
    transition: transform .15s ease, box-shadow .15s ease, color .15s ease, background .15s ease;
}
.time-slot:hover { transform: translateY(-2px); border-color: var(--primary); color: var(--primary); box-shadow: 0 8px 18px rgba(29,78,216,.11); }
.time-slot.selected { color: #fff; background: var(--primary); border-color: var(--primary); box-shadow: 0 9px 20px rgba(29,78,216,.25); }
.booking-step .form-control,
.booking-step .form-select {
    min-height: 50px;
    border-radius: 13px;
    border-color: #dbe5ef;
    background-color: #fbfdff;
}
.booking-step textarea.form-control { min-height: auto; }
.booking-step .form-control:focus,
.booking-step .form-select:focus { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(37,99,235,.1); }
.booking-step .card.bg-light { border: 1px solid #e0e9f2; border-radius: 18px; background: #f7faff !important; }
.booking-actions .btn { min-height: 48px; border-radius: 13px; font-weight: 700; }
.booking-actions .btn-light { color: #34506d; border: 1px solid #dfe8f1; background: #f8fafc; }
.booking-actions .btn-primary { background: linear-gradient(135deg, var(--primary), #174a91); border: 0; }
.booking-actions .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 13px 28px rgba(29,78,216,.25); }
.booking-success-icon { box-shadow: 0 0 0 10px rgba(34,197,94,.08); }
.booking-success-card { border-radius: 21px; box-shadow: 0 17px 45px rgba(15,39,71,.1); }
.booking-shell + * { color: #708197; }

@media (min-width: 768px) {
    .booking-card-body { padding-inline: clamp(34px, 5vw, 62px) !important; }
    .booking-card .booking-step { min-height: 390px; }
}
@media (max-width: 767.98px) {
    body:has(.booking-shell) { background: #f2f6fa; }
    .booking-hero::before { right: -120px; }
    .booking-card { box-shadow: 0 18px 45px rgba(15,39,71,.13); }
    .booking-progress-copy { margin-bottom: 9px; }
    .cat-card { box-shadow: 0 6px 17px rgba(15,39,71,.055); }
    .cat-chevron { width: 30px; height: 30px; }
    .employee-card { border-radius: 18px; }
    .booking-selection-summary { box-shadow: 0 8px 23px rgba(15,39,71,.1); }
    .booking-actions { border: 1px solid rgba(214,225,236,.9); }
}

/* ===== AgendaTotaal luxury booking concept – image mockup implementation ===== */
body:has(.booking-shell){
    --booking-gold:#b8892d;
    --booking-gold-dark:#8f661d;
    --booking-ink:#171717;
    --booking-cream:#f7f3ec;
    background:linear-gradient(180deg,#f7f3ec 0,#fbfaf8 560px,#f5f2ec 100%);
    color:var(--booking-ink);
}
.booking-hero{
    min-height:300px;
    padding:44px 20px 105px;
    position:relative;
    background:
      linear-gradient(90deg,rgba(8,7,5,.93) 0%,rgba(8,7,5,.78) 45%,rgba(8,7,5,.50) 100%),
      url('../img/booking-heren.jpg') center 34%/cover no-repeat;
    overflow:hidden;
}
.booking-hero::before{inset:0; width:auto;height:auto;right:auto;top:auto;border:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.35));border-radius:0}
.booking-hero::after{display:none}
.booking-hero .container{max-width:1180px;display:block;text-align:left!important;position:relative;z-index:2}
.booking-hero-badge{display:none}
.booking-eyebrow{background:transparent;border:0;padding:0;color:#fff;text-transform:uppercase;letter-spacing:.19em;font-size:13px;font-weight:700;margin-bottom:22px}
.booking-hero-copy h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(2.35rem,5vw,4.4rem);font-weight:500!important;letter-spacing:-.035em;max-width:760px;line-height:1.03}
.booking-hero-subtitle{color:rgba(255,255,255,.85);font-size:16px;margin:13px 0 16px;max-width:620px}
.booking-hero-meta{gap:12px 24px;color:rgba(255,255,255,.9);font-size:14px}
.booking-hero-meta i{color:#d6aa52}
.booking-rating small{color:rgba(255,255,255,.67)}
.booking-shell{max-width:1180px;margin-top:-72px;position:relative;z-index:5}
.booking-card{border:1px solid rgba(74,55,25,.10);border-radius:22px;box-shadow:0 24px 65px rgba(42,31,14,.14);background:rgba(255,255,255,.98)}
.booking-card-body{padding:30px clamp(22px,4vw,50px) 42px!important}
.booking-secure-note{position:absolute;right:28px;top:-86px;display:flex;gap:10px;align-items:center;color:#fff;text-align:left;font-size:12px;z-index:7}
.booking-secure-note i{font-size:22px;color:#d7ab55}.booking-secure-note span{display:grid}.booking-secure-note strong{font-size:12px}.booking-secure-note small{color:rgba(255,255,255,.7)}
.booking-progress-copy{display:none}
.step-indicator{margin:-30px -50px 34px;padding:20px 34px 17px;background:#fff;border-radius:22px 22px 0 0;border-bottom:1px solid #eee7dd}
.step-item::before{background:#e9e3da!important;height:1px!important}
.step-number{width:30px!important;height:30px!important;background:#f5f2ec!important;border:1px solid #e5ddd1!important;color:#5c554d!important;font-weight:700}
.step-item.active .step-number,.step-item.completed .step-number{background:linear-gradient(135deg,#c89a3c,#a97822)!important;border-color:#b8892d!important;color:#fff!important;box-shadow:0 7px 18px rgba(184,137,45,.26)}
.step-label{font-size:12px!important;color:#605a53!important}
.booking-selection-summary{background:#fbf8f2;border:1px solid #e9dfd0;box-shadow:none}
.booking-selection-chip{background:#fffaf0;border-color:#eadfcf;color:#4c4439}
.booking-card .booking-step h4{font-family:Georgia,'Times New Roman',serif;color:#1d1a16;font-size:clamp(1.5rem,2.5vw,2rem);font-weight:600!important}
.cat-card{border:1px solid #e6dfd5!important;background:#fff!important;border-radius:16px!important;box-shadow:0 7px 20px rgba(35,27,17,.055)!important;transition:.22s ease}
.cat-card:hover{transform:translateY(-3px);border-color:#c59a4a!important;box-shadow:0 13px 28px rgba(35,27,17,.10)!important}
.cat-card.is-active{border-color:#b8892d!important;box-shadow:0 0 0 2px rgba(184,137,45,.13),0 15px 30px rgba(35,27,17,.10)!important}
.cat-thumb{width:118px!important;height:90px!important;border-radius:12px!important}.cat-thumb-image{width:100%;height:100%;object-fit:cover}
.cat-title{font-family:Georgia,'Times New Roman',serif;font-size:21px!important;color:#191714!important}.cat-meta-item i,.cat-chevron{color:#b8892d!important}
.booking-service-list{border-color:#e7dfd5!important;border-radius:16px!important}
.service-option{border-color:#eee8df!important;transition:.18s ease}.service-option:hover{background:#fcfaf6!important}.service-option:has(.svc-radio:checked){background:#ffe6c2!important;box-shadow:inset 0 0 0 2px #b8892d!important;border-color:#b8892d!important}
.booking-shell .form-check-input:checked{background-color:#b8892d;border-color:#b8892d}
.text-primary{color:#9b701f!important}
.employee-card{border-color:#e6dfd5!important;border-radius:16px!important;background:#fff!important}.employee-card:hover,.employee-card.selected{border-color:#b8892d!important;box-shadow:0 12px 28px rgba(35,27,17,.10)!important}.employee-card.selected{background:#fffaf0!important}
.employee-avatar-booking{border:3px solid #f5ead4;box-shadow:0 6px 18px rgba(47,34,14,.15)}
.booking-calendar-shell{background:#fff;border:1px solid #e6dfd5;box-shadow:none}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange{background:#b8892d!important;border-color:#b8892d!important}.booking-calendar-shell .flatpickr-day.has-availability::after{background:#b8892d!important}
.time-slot{border-color:#ded6ca!important;background:#fff!important;border-radius:10px!important;color:#28231d!important}.time-slot:hover,.time-slot.active{background:linear-gradient(135deg,#c79a3e,#a97822)!important;border-color:#b8892d!important;color:#fff!important;box-shadow:0 8px 18px rgba(184,137,45,.22)}
.booking-step .form-control,.booking-step .form-select{border-color:#ded7cd;background:#fff;border-radius:11px}.booking-step .form-control:focus,.booking-step .form-select:focus{border-color:#b8892d;box-shadow:0 0 0 4px rgba(184,137,45,.10)}
.booking-actions .btn{border-radius:10px;min-height:50px}.booking-actions .btn-primary{background:linear-gradient(135deg,#c79a3e,#a97822)!important;color:#fff;border:0;box-shadow:0 9px 22px rgba(184,137,45,.23)}.booking-actions .btn-primary:hover{background:linear-gradient(135deg,#b8892d,#8f661d)!important;box-shadow:0 12px 26px rgba(184,137,45,.30)}
.booking-actions .btn-light{background:#f7f4ef;border-color:#e6ded3;color:#494139}
.booking-service-summary{background:#fffaf0!important;border:1px solid #eadfcf!important}
.booking-success-icon{background:#b8892d!important}
@media (min-width:900px){
  #catList{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}.cat-card{display:block!important;padding:0!important;overflow:hidden}.cat-thumb{width:100%!important;height:150px!important;border-radius:0!important}.cat-card>.flex-grow-1{padding:17px}.cat-services{grid-column:1/-1}.cat-meta{justify-content:space-between}.cat-chevron{position:absolute;right:16px;bottom:18px}
}
@media(max-width:767px){
 .booking-hero{min-height:260px;padding:30px 18px 94px;background-position:58% center}.booking-hero-copy h1{font-size:2.35rem}.booking-hero-subtitle{font-size:14px}.booking-secure-note{display:none}.booking-shell{margin-top:-52px}.booking-card-body{padding:18px 14px 30px!important}.step-indicator{margin:-18px -14px 24px;padding:16px 8px 13px}.step-label{font-size:9px!important}.cat-thumb{width:90px!important;height:76px!important}.cat-title{font-size:18px!important}.booking-actions{background:rgba(255,252,247,.96)!important;border-color:#e7ded2!important}
}

/* ===== BOOKING IMAGE 1 DESIGN — AgendaTotaal 2026 ===== */
body:has(.booking-layout){
  --booking-blue:#0b4edb;
  --booking-blue-dark:#0739a5;
  --booking-text:#111827;
  --booking-muted:#667085;
  background:#f7f9fc!important;
  color:var(--booking-text);
}
body:has(.booking-layout) .public-navbar{display:none}
.booking-hero{
  min-height:198px!important;
  padding:22px 20px 28px!important;
  background:
    linear-gradient(90deg,rgba(3,12,25,.98) 0%,rgba(3,12,25,.88) 36%,rgba(3,12,25,.28) 72%,rgba(3,12,25,.18) 100%),
    url('../img/booking-heren.jpg') center 35%/cover no-repeat!important;
}
.booking-hero .container{max-width:1440px!important;margin:auto!important;display:block!important}
.booking-brandline{display:flex;align-items:center;gap:14px;color:#fff;margin-bottom:22px;text-transform:uppercase}
.booking-brand-icon{width:52px;height:52px;display:grid;place-items:center;color:#f4b84b;font-size:34px}
.booking-brandline>span:last-child{display:grid;line-height:1.05}
.booking-brandline strong{font-size:26px;letter-spacing:.045em;font-weight:800}
.booking-brandline small{font-size:13px;color:#f4b84b;letter-spacing:.22em;margin-top:8px;font-weight:700}
.booking-hero-copy h1{font-family:inherit!important;font-size:clamp(2.15rem,4vw,3.2rem)!important;font-weight:800!important;letter-spacing:-.035em!important;line-height:1.05!important}
.booking-hero-subtitle{font-size:17px!important;color:rgba(255,255,255,.9)!important;margin:13px 0 0!important}
.booking-progress-wrap{background:#fff;border-bottom:1px solid #e7ebf2;box-shadow:0 4px 20px rgba(15,23,42,.035)}
.booking-progress-wrap .container{max-width:1440px;padding-inline:32px}
.booking-progress-wrap .step-indicator{margin:0!important;padding:16px 0 18px!important;background:transparent!important;border:0!important;border-radius:0!important}
.booking-progress-wrap .step-indicator::before{left:8%;right:8%;top:34px;height:2px;background:#dfe5ee!important}
.booking-progress-wrap .step-number{width:38px!important;height:38px!important;background:#fff!important;border:1px solid #dbe2ec!important;color:#172033!important;font-size:15px!important}
.booking-progress-wrap .step-item.active .step-number,.booking-progress-wrap .step-item.completed .step-number{background:var(--booking-blue)!important;border-color:var(--booking-blue)!important;color:#fff!important;box-shadow:0 7px 18px rgba(11,78,219,.2)!important}
.booking-progress-wrap .step-label{font-size:13px!important;color:#344054!important;margin-top:7px}
.booking-progress-wrap .step-item.active .step-label{color:var(--booking-blue)!important;font-weight:700}
.booking-shell{max-width:1440px!important;margin:0 auto!important;padding:32px!important}
.booking-layout{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:32px;align-items:start}
.booking-card{border-radius:12px!important;border:1px solid #e4e8ef!important;background:#fff!important;box-shadow:0 8px 24px rgba(16,24,40,.05)!important;overflow:hidden!important}
.booking-card-body{padding:18px 28px 14px!important}
.booking-card-body::before{display:none!important}
.booking-progress-copy,.booking-selection-summary{display:none!important}
.booking-card .booking-step{min-height:0!important}
.booking-card .booking-step h4{text-align:left!important;font-family:inherit!important;font-size:20px!important;color:#101828!important;margin:0 0 4px!important}
.booking-card .booking-step h4::before{content:attr(data-step-title)}
.booking-card .booking-step>p.text-muted.small{text-align:left!important;margin:0 0 18px!important;max-width:none!important;color:#667085!important}
#catList{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px!important;align-items:start}
.cat-block{min-width:0}
.cat-card{display:block!important;padding:0!important;overflow:hidden!important;min-height:0!important;border-radius:10px!important;border:1px solid #e4e7ec!important;box-shadow:0 3px 10px rgba(16,24,40,.05)!important;background:#fff!important;position:relative}
.cat-card:hover{transform:translateY(-2px)!important;border-color:#b9c9ef!important;box-shadow:0 10px 24px rgba(16,24,40,.09)!important}
.cat-thumb{width:100%!important;height:108px!important;border-radius:0!important;box-shadow:none!important}
.cat-card>.flex-grow-1{padding:20px 14px 14px!important}
.cat-title{font-family:inherit!important;font-size:17px!important;font-weight:750!important;color:#101828!important}
.cat-desc{font-size:13px!important;color:#667085!important;margin-top:3px}
.cat-meta{margin-top:9px!important;display:block!important}
.cat-meta-item{padding:0!important;background:transparent!important;color:var(--booking-blue)!important;font-size:13px!important;font-weight:700}
.cat-meta-item:first-child{display:none}
.cat-chevron{position:absolute;right:14px;bottom:14px;background:transparent!important;color:#101828!important;width:auto!important;height:auto!important}
.cat-services{grid-column:1/-1;padding:0!important}
.booking-service-list{border-radius:10px!important;border:1px solid #e4e7ec!important;box-shadow:none!important}
.service-option{min-height:62px!important;padding:11px 14px!important;border-color:#eaecf0!important}
.service-option:has(.svc-radio:checked){background:#d8e9ff!important;box-shadow:inset 0 0 0 2px var(--booking-blue)!important;border-color:var(--booking-blue)!important}
.booking-layout .form-check-input:checked{background-color:var(--booking-blue)!important;border-color:var(--booking-blue)!important}
.text-primary{color:var(--booking-blue)!important}
.booking-actions{margin-top:14px!important}
.booking-actions .btn{border-radius:7px!important;min-height:46px!important}
.booking-actions .btn-primary,.booking-side-next{background:linear-gradient(135deg,#0d50e2,#0842c5)!important;border:0!important;color:#fff!important;box-shadow:0 8px 18px rgba(11,78,219,.2)!important}
.booking-sidebar{display:grid;gap:20px;position:sticky;top:20px}
.booking-side-card,.booking-safe-card{background:#fff;border:1px solid #e4e8ef;border-radius:12px;box-shadow:0 8px 24px rgba(16,24,40,.045)}
.booking-side-card{padding:24px 28px 28px;min-height:390px;display:flex;flex-direction:column}
.booking-side-title{display:flex;align-items:center;gap:15px}
.booking-side-title h3{font-size:19px;margin:0;font-weight:750;color:#162033}
.booking-side-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--booking-blue);color:#fff;font-size:20px}
.booking-side-intro{font-size:14px;color:#667085;line-height:1.55;margin:22px 0 14px}
.booking-side-empty{flex:1;min-height:150px;display:grid;place-items:center;position:relative;color:#d7dde7;font-size:112px}
.booking-side-empty>span{position:absolute;left:57%;top:56%;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#465065;color:#fff;font-size:24px;border:4px solid #fff}
.booking-side-details{display:grid;gap:14px;margin:6px 0 24px}
.booking-side-details>div{padding-bottom:12px;border-bottom:1px solid #eef1f5;display:grid;gap:3px}
.booking-side-details small{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#98a2b3;font-weight:700}
.booking-side-details strong{font-size:14px;color:#1d2939}
.booking-side-next{margin-top:auto;width:100%;min-height:52px;border-radius:7px;font-weight:750;display:flex;align-items:center;justify-content:center;gap:12px}
.booking-side-next:disabled{background:#c8d4ed!important;color:#fff!important;box-shadow:none!important}
.booking-safe-card{padding:22px 28px;display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,#f8fbff,#f4f7fd)}
.booking-safe-icon{font-size:50px;color:var(--booking-blue);line-height:1}
.booking-safe-card strong{display:block;color:var(--booking-blue);font-size:15px;margin-bottom:5px}
.booking-safe-card p{font-size:13px;color:#667085;margin:0;line-height:1.45}
.booking-benefits{margin-top:18px;background:#fff;border:1px solid #e4e8ef;border-radius:10px;display:grid;grid-template-columns:repeat(4,1fr);padding:15px 20px}
.booking-benefits>div{display:flex;align-items:center;gap:14px;padding:0 18px;border-right:1px solid #e8ecf2}
.booking-benefits>div:last-child{border-right:0}
.booking-benefits i{width:43px;height:43px;border:1px solid #dce6fb;border-radius:50%;display:grid;place-items:center;color:var(--booking-blue);font-size:20px}
.booking-benefits span{display:grid;gap:2px}.booking-benefits strong{font-size:13px;color:#1d2939}.booking-benefits small{font-size:11px;color:#667085}
.employee-card{border-radius:10px!important}.booking-calendar-shell{border-radius:10px!important}.time-slot{border-radius:8px!important}
@media(max-width:1100px){.booking-layout{grid-template-columns:1fr 330px}.booking-shell{padding:24px}.booking-benefits{grid-template-columns:repeat(2,1fr);gap:18px}.booking-benefits>div:nth-child(2){border-right:0}}
@media(max-width:900px){.booking-layout{grid-template-columns:1fr}.booking-sidebar{position:static;grid-template-columns:1fr 1fr}.booking-side-card{min-height:330px}.booking-benefits{grid-template-columns:repeat(2,1fr)}#catList{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){
 .booking-hero{min-height:180px!important;padding:20px 16px 24px!important;background-position:60% center!important}.booking-brandline{margin-bottom:18px}.booking-brandline strong{font-size:19px}.booking-brandline small{font-size:10px}.booking-brand-icon{width:38px;height:38px;font-size:26px}.booking-hero-copy h1{font-size:2rem!important}.booking-hero-subtitle{font-size:14px!important}.booking-progress-wrap .container{padding-inline:12px}.booking-progress-wrap .step-indicator{overflow:visible!important;gap:0!important;padding:12px 0 13px!important}.booking-progress-wrap .step-indicator::before{top:28px}.booking-progress-wrap .step-number{width:32px!important;height:32px!important}.booking-progress-wrap .step-label{display:block!important;font-size:9px!important;white-space:nowrap}.booking-shell{padding:14px 10px 28px!important}.booking-card-body{padding:16px 12px 18px!important}#catList{grid-template-columns:1fr!important;gap:12px!important}.cat-card{display:flex!important}.cat-thumb{width:108px!important;height:96px!important;flex:0 0 108px}.cat-card>.flex-grow-1{padding:13px!important}.cat-desc{display:block!important}.booking-sidebar{grid-template-columns:1fr}.booking-side-card{min-height:300px}.booking-benefits{grid-template-columns:1fr;padding:8px 16px}.booking-benefits>div{border-right:0!important;border-bottom:1px solid #e8ecf2;padding:12px 0}.booking-benefits>div:last-child{border-bottom:0}.booking-actions{position:static!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}.booking-card .booking-step h4{font-size:18px!important}}

/* ====== Nieuwe-afspraak notificatie (real-time polling) ====== */
#new-appt-notif-container {
    position: fixed;
    top: 88px;
    right: 24px;
    z-index: 2100;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}
.new-appt-notif {
    pointer-events: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .22);
    border: 1px solid rgba(29, 78, 216, .12);
    border-left: 4px solid var(--primary, #1d4ed8);
    overflow: hidden;
    opacity: 0;
    transform: translateX(120%);
    transition: opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.new-appt-notif.show {
    opacity: 1;
    transform: translateX(0);
}
.new-appt-notif-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 14px 14px;
}
.new-appt-notif-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--primary-light, #e8efff);
    color: var(--primary, #1d4ed8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.new-appt-notif-body {
    flex: 1;
    min-width: 0;
}
.new-appt-notif-title {
    font-weight: 700;
    font-size: 15px;
    color: #0f172a;
    margin-bottom: 2px;
}
.new-appt-notif-text {
    font-size: 13px;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
.new-appt-notif-time {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
}
.new-appt-notif-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.new-appt-notif-btn {
    font-size: 11px;
    font-weight: 600;
    padding: 6px 12px;
    white-space: nowrap;
}
.new-appt-notif-close {
    background: transparent;
    border: 0;
    color: #94a3b8;
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
    line-height: 1;
    border-radius: 4px;
    transition: color .15s ease, background .15s ease;
}
.new-appt-notif-close:hover {
    color: #475569;
    background: #f1f5f9;
}
@media (max-width: 767px) {
    #new-appt-notif-container {
        top: auto;
        bottom: calc(16px + env(safe-area-inset-bottom));
        right: 12px;
        left: 12px;
        max-width: none;
    }
    .new-appt-notif {
        transform: translateY(120%);
    }
    .new-appt-notif.show {
        transform: translateY(0);
    }
    .new-appt-notif-text {
        white-space: normal;
    }
}

/* ===== Promiss Clinic booking theme (only for slug promiss-clinic) ===== */
body .salon-promiss-clinic { --primary:#0a0a0a; --primary-dark:#000; --primary-light:#f8f7f6; --primary-gradient:linear-gradient(135deg,#1a1a1a 0%,#000 100%); }
body .salon-promiss-clinic .booking-hero { background:radial-gradient(circle at top right,rgba(245,215,195,.35),transparent 28%),linear-gradient(135deg,#f8f7f6 0%,#f8f7f6 50%,#f5d7c3 100%); color:#000; }
body .salon-promiss-clinic .booking-hero::before { background:rgba(245,215,195,.25); }
body .salon-promiss-clinic .booking-hero::after { background:rgba(245,215,195,.18); }
body .salon-promiss-clinic .booking-hero a.text-white { color:#000 !important; }
body .salon-promiss-clinic .booking-hero-subtitle { color:#000 !important; }
body .salon-promiss-clinic .booking-brandline--logo { flex-direction:column; align-items:flex-start; gap:6px; }
body .salon-promiss-clinic .booking-brand-logo { height:52px; width:auto; display:block; background:#fff; padding:8px 12px; border-radius:14px; box-shadow:0 4px 14px rgba(0,0,0,.08); }
body .salon-promiss-clinic .booking-brand-name { font-size:1.15rem; font-weight:700; color:#000; }
body .salon-promiss-clinic .booking-brand-name strong { font-weight:800; }
body .salon-promiss-clinic .booking-brand-addr { color:#000; }
body .salon-promiss-clinic .booking-card { background:linear-gradient(180deg,rgba(248,247,246,.98),rgba(245,215,195,.20)); }
body .salon-promiss-clinic .booking-card-body::before { background:linear-gradient(180deg,rgba(248,247,246,.95),rgba(245,215,195,0)); }
body .salon-promiss-clinic .btn-primary { background:#0a0a0a; border:none; box-shadow:0 10px 22px rgba(0,0,0,.18); color:#fff; }
body .salon-promiss-clinic .btn-primary:hover { background:#000; color:#fff; box-shadow:0 14px 28px rgba(0,0,0,.22); transform:translateY(-1px); }
body .salon-promiss-clinic .btn-outline-primary { border-color:#0a0a0a; color:#0a0a0a; background:#fff; }
body .salon-promiss-clinic .btn-outline-primary:hover { background:#0a0a0a; border-color:#0a0a0a; color:#fff; box-shadow:0 12px 24px rgba(0,0,0,.18); }
body .salon-promiss-clinic .text-primary { color:#0a0a0a !important; }
body .salon-promiss-clinic .cat-thumb-fallback { background:#f2f2f2; color:#0a0a0a; }
body .salon-promiss-clinic .step-item.active .step-number { box-shadow:0 0 0 4px rgba(0,0,0,.12); }