/* ============================================
   Panel2 - Modern Design System
   CSS Variables, Flexbox/Grid, Animations
   ============================================ */

/* --- CSS Custom Properties (Theme) --- */
:root {
    /* Primary palette */
    --primary: #186FBB;
    --primary-light: #7fb3e3;
    --primary-dark: #0f5a9a;
    --primary-50: #e8f2fc;
    --primary-100: #d3e6f8;

    /* Accent */
    --accent: #06b6d4;
    --accent-light: #67e8f9;
    --accent-dark: #0891b2;

    /* Success / Warning / Danger / Info */
    --success: #22c55e;
    --success-light: #dcfce7;
    --success-dark: #16a34a;
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --warning-dark: #d97706;
    --danger: #ef4444;
    --danger-light: #fef2f2;
    --danger-dark: #dc2626;
    --info: #3b82f6;
    --info-light: #eff6ff;
    --info-dark: #2563eb;

    /* Neutrals */
    --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;

    /* Layout */
    --sidebar-width: 264px;
    --sidebar-collapsed-width: 68px;
    --topbar-height: 64px;
    --border-radius: 10px;
    --border-radius-lg: 14px;
    --border-radius-xl: 20px;

    /* Shadows – softer, more layered */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 8px -2px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.04);
    --shadow-lg: 0 12px 24px -4px rgba(0,0,0,0.08), 0 4px 8px -2px rgba(0,0,0,0.03);
    --shadow-xl: 0 24px 48px -8px rgba(0,0,0,0.1), 0 8px 16px -4px rgba(0,0,0,0.04);

    /* Colored glow */
    --shadow-primary: 0 4px 14px rgba(24, 111, 187, 0.25);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(.4,0,.2,1);
    --transition-base: 250ms cubic-bezier(.4,0,.2,1);
    --transition-slow: 350ms cubic-bezier(.4,0,.2,1);

    /* Font */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Background */
    --bg-body: #f4f6fb;
    --bg-card: #ffffff;
    --border-color: var(--gray-200);

    /* --- .nd huisstijl-tokens (fpcoding.nl), additief --- */
    --ink: #101013;
    --dark: #0C0C0E;
    --dark-2: #17171A;
    --muted: #6C6C74;
    --line: #E6E6E2;
    --line-d: rgba(255,255,255,.14);

    --ok: #1F9D57;
    --ok-soft: #E7F5EC;
    --warn: #B9770B;
    --warn-soft: #FBF1DF;
    --down: #C8382F;
    --down-soft: #FBE9E7;

    --radius: 10px;
    --radius-sm: 6px;

    --font-display: 'Space Grotesk', system-ui, sans-serif;

    --shadow-glow: 0 8px 40px rgba(24,111,187,.18);
}

/* --- Reset & Base --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 15px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family);
    background: var(--bg-body);
    color: var(--gray-700);
    line-height: 1.6;
    min-height: 100vh;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-dark);
}

img {
    max-width: 100%;
    height: auto;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}

h1 { font-size: 1.75rem; font-weight: 700; }
h2 { font-size: 1.5rem; font-weight: 700; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.eyebrow {
    display: block;
    font-family: var(--font-family);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0 0 6px;
}

/* --- Layout: Sidebar + Main --- */
.app-layout {
    display: flex;
    min-height: 100vh;
}

/* --- Sidebar --- */
.sidebar {
    width: var(--sidebar-width);
    background: var(--dark);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    transition: transform var(--transition-base), width var(--transition-base);
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid var(--line-d);
}

.sidebar::-webkit-scrollbar {
    width: 4px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: var(--gray-600);
    border-radius: 4px;
}

.sidebar-header {
    padding: 22px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--line-d);
    flex-shrink: 0;
}

.sidebar-header img {
    width:auto;
}

.sidebar-header .brand-text {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.sidebar-user {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--line-d);
    flex-shrink: 0;
}

.sidebar-user .avatar {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--line-d);
}

.sidebar-user .user-info {
    overflow: hidden;
}

.sidebar-user .user-name {
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user .user-role {
    font-size: 0.75rem;
    color: var(--gray-400);
}

.online-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    display: inline-block;
    margin-left: auto;
    flex-shrink: 0;
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

/* Sidebar Navigation */
.sidebar-nav {
    flex: 1;
    padding: 12px 0;
}

.sidebar-nav .nav-section {
    padding: 8px 18px 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-500);
    margin-top: 8px;
}

.sidebar-nav a,
.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 20px;
    margin: 1px 8px;
    color: var(--gray-400);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--border-radius);
    transition: all var(--transition-fast);
    position: relative;
    text-decoration: none;
    cursor: pointer;
}

.sidebar-nav a:hover,
.sidebar-nav .nav-link:hover {
    background: rgba(255,255,255,0.07);
    color: #fff;
}

.sidebar-nav a.active,
.sidebar-nav .nav-link.active {
    background: var(--primary);
    color: #fff;
    border-right: none;
    box-shadow: inset 3px 0 0 #fff;
}

.sidebar-nav a i,
.sidebar-nav .nav-link i {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.sidebar-nav .nav-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Badge in sidebar */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--dark);
}

.nav-badge.badge-danger { background: var(--danger); color: #fff; }
.nav-badge.badge-success { background: var(--success); color: #fff; }
.nav-badge.badge-warning { background: var(--warning); color: #fff; }
.nav-badge.badge-info { background: var(--info); color: #fff; }
.nav-badge.badge-primary { background: var(--primary); color: #fff; }
.nav-badge.badge-accent { background: var(--accent-dark); color: #fff; }

/* Ticket-statusbolletjes in de navbar — 5 duidelijk onderscheidende kleuren */
.nav-badge.nav-tkt-open        { background: #64748b; color: #fff; }  /* Ingediend — neutraal/grijs */
.nav-badge.nav-tkt-behandeling { background: #f59e0b; color: #fff; }  /* In behandeling — amber (= badge-warning) */
.nav-badge.nav-tkt-wacht       { background: #3b82f6; color: #fff; }  /* Wacht op klant — blauw (= badge-info) */
.nav-badge.nav-tkt-offerte     { background: #0891b2; color: #fff; }  /* Offerte verstuurd — teal */
.nav-badge.nav-tkt-reply       { background: #16a34a; color: #fff; }  /* Nieuwe klant-reactie — groen */

/* Chat-badges. Wachtend is bewust rood en pulseert: dit is het enige
   onderdeel waar op dit moment iemand op een antwoord zit te wachten. */
.nav-badge.nav-chat-wacht { background: #ef4444; color: #fff; animation: navChatPuls 1.8s ease-in-out infinite; }
.nav-badge.nav-chat-live  { background: #16a34a; color: #fff; }

@keyframes navChatPuls {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); }
    70%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .nav-badge.nav-chat-wacht { animation: none; }
}

/* Notification dot in sidebar */
.nav-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--danger, #ef4444);
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
    animation: navDotPulse 1.8s ease-in-out infinite;
}
@keyframes navDotPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25); }
    50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.05); }
}

.sidebar-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--line-d);
    flex-shrink: 0;
}

.sidebar-footer a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gray-400);
    font-size: 0.85rem;
    padding: 8px 0;
    transition: color var(--transition-fast);
}

.sidebar-footer a:hover {
    color: var(--danger-light);
}

/* --- Main Content Area --- */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--transition-base);
}

/* Topbar */
.topbar {
    height: var(--topbar-height);
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 900;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.topbar-left h1 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hamburger-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--gray-600);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--border-radius);
    transition: background var(--transition-fast);
}

.hamburger-btn:hover {
    background: var(--gray-100);
}

/* Page Content */
.page-content {
    flex: 1;
    padding: 28px;
}

/* --- Cards --- */
.card {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-100);
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.card-header h2,
.card-header h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.card-body {
    padding: 20px;
}

.card-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--gray-100);
    background: var(--gray-50);
}

/* Stat Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}

.stat-card {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: 22px;
    border: 1px solid var(--gray-100);
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-xs);
}

.stat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.stat-icon.primary { background: var(--primary-50); color: var(--primary); }
.stat-icon.success { background: var(--success-light); color: var(--success-dark); }
.stat-icon.warning { background: var(--warning-light); color: var(--warning-dark); }
.stat-icon.danger { background: var(--danger-light); color: var(--danger-dark); }
.stat-icon.info { background: var(--info-light); color: var(--info-dark); }
.stat-icon.accent { background: #cffafe; color: var(--accent-dark); }

.stat-info h4 {
    font-family: var(--font-family);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.stat-info .stat-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
}

.stat-info .stat-desc {
    font-size: 0.75rem;
    color: var(--gray-400);
    margin-top: 2px;
}

/* --- Tables --- */
.table-container {
    overflow-x: auto;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--gray-200);
    background: #fff;
}

table.modern-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

table.modern-table thead {
    background: var(--gray-50);
}

table.modern-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-400);
    border-bottom: 1px solid var(--gray-200);
    white-space: nowrap;
}

table.modern-table tbody tr {
    border-bottom: 1px solid var(--gray-100);
    transition: background var(--transition-fast);
}

table.modern-table tbody tr:hover {
    background: var(--gray-50);
}

table.modern-table tbody tr:last-child {
    border-bottom: none;
}

table.modern-table tbody td {
    padding: 12px 16px;
    color: var(--gray-700);
    vertical-align: middle;
}

table.modern-table td a {
    font-weight: 500;
}

/* --- Badges / Status --- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1.4;
}

.badge-success { background: var(--success-light); color: var(--success-dark); }
.badge-danger { background: var(--danger-light); color: var(--danger-dark); }
.badge-warning { background: var(--warning-light); color: var(--warning-dark); }
.badge-info { background: var(--info-light); color: var(--info-dark); }
.badge-primary { background: var(--primary-50); color: var(--primary-dark); }
.badge-accent { background: #cffafe; color: var(--accent-dark); }
.badge-slate { background: #e2e8f0; color: #475569; }
.badge-gray { background: var(--gray-100); color: var(--gray-600); }

.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 6px;
    flex: 0 0 auto;
}

/* Status Pill (nieuw, opt-in — .nd-patroon met kleurenbolletje) */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.status-pill::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}
.status-pill[data-state="operational"] { background: var(--ok-soft);   color: var(--ok); }
.status-pill[data-state="degraded"]    { background: var(--warn-soft); color: var(--warn); }
.status-pill[data-state="down"]        { background: var(--down-soft); color: var(--down); }

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.4;
    font-family: inherit;
    letter-spacing: 0.01em;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 1px 3px rgba(24,111,187,0.2);
}
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; box-shadow: 0 4px 12px rgba(24,111,187,0.3); transform: translateY(-1px); }

.btn-success {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
    box-shadow: 0 1px 3px rgba(34,197,94,0.2);
}
.btn-success:hover { background: var(--success-dark); border-color: var(--success-dark); color: #fff; box-shadow: 0 4px 12px rgba(34,197,94,0.3); transform: translateY(-1px); }

.btn-danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
    box-shadow: 0 1px 3px rgba(239,68,68,0.2);
}
.btn-danger:hover { background: var(--danger-dark); border-color: var(--danger-dark); color: #fff; box-shadow: 0 4px 12px rgba(239,68,68,0.3); transform: translateY(-1px); }

.btn-warning {
    background: var(--warning);
    color: #fff;
    border-color: var(--warning);
}
.btn-warning:hover { background: var(--warning-dark); border-color: var(--warning-dark); color: #fff; transform: translateY(-1px); }

.btn-info {
    background: var(--info);
    color: #fff;
    border-color: var(--info);
}
.btn-info:hover { background: var(--info-dark); border-color: var(--info-dark); color: #fff; transform: translateY(-1px); }

.btn-outline {
    background: transparent;
    color: var(--gray-600);
    border-color: var(--gray-200);
}
.btn-outline:hover { background: var(--gray-50); border-color: var(--gray-300); color: var(--gray-800); }

.btn-outline-primary {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}
.btn-outline-primary:hover { background: var(--primary-50); color: var(--primary-dark); border-color: var(--primary-dark); }

.btn-ghost {
    background: transparent;
    color: var(--gray-500);
    border-color: transparent;
}
.btn-ghost:hover { background: var(--gray-100); color: var(--gray-700); }

.btn-sm {
    padding: 5px 12px;
    font-size: 0.8rem;
}

.btn-lg {
    padding: 12px 24px;
    font-size: 1rem;
}

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--border-radius);
}

.btn-icon.btn-sm {
    width: 30px;
    height: 30px;
}

/* Button Group */
.btn-group {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* --- Forms --- */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 6px;
}

.form-group label .required {
    color: var(--danger);
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--gray-800);
    background: #fff;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    line-height: 1.5;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(24, 111, 187, 0.08);
}

.form-control::placeholder {
    color: var(--gray-400);
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

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

/* --- Alerts / Messages --- */
.alert {
    padding: 14px 18px;
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: slideDown 0.3s ease;
}

.alert-success {
    background: var(--success-light);
    color: var(--success-dark);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.alert-danger {
    background: var(--danger-light);
    color: var(--danger-dark);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.alert-warning {
    background: var(--warning-light);
    color: var(--warning-dark);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.alert-info {
    background: var(--info-light);
    color: var(--info-dark);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Pagination --- */
.pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 20px;
    justify-content: center;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    color: var(--gray-600);
    background: #fff;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.pagination a:hover {
    background: var(--primary-50);
    border-color: var(--primary);
    color: var(--primary);
}

.pagination .active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 600;
}

/* --- Modal --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15,23,42,0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.modal-overlay.active {
    display: flex;
}

.modal {
    background: var(--bg-card);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-xl);
    width: 90%;
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
    animation: scaleIn 0.25s cubic-bezier(.4,0,.2,1);
    border: 1px solid var(--gray-100);
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h3 {
    font-size: 1.1rem;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--gray-400);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.modal-close:hover {
    color: var(--gray-700);
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--gray-100);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* --- Utility Classes --- */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--gray-500); }
.text-small { font-size: 0.8rem; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-info { color: var(--info) !important; }
.text-primary { color: var(--primary) !important; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.p-0 { padding: 0; }
.p-2 { padding: 16px; }
.p-3 { padding: 24px; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }

.d-flex { display: flex; }
.d-grid { display: grid; }
.flex-wrap { flex-wrap: wrap; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }

.w-100 { width: 100%; }
.hidden { display: none !important; }

/* --- Grid Layouts --- */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* --- Search / Filter Bar --- */
.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.search-box {
    position: relative;
    flex: 1;
    max-width: 360px;
}

.search-box input {
    width: 100%;
    padding: 9px 14px 9px 38px;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    font-family: inherit;
    background: var(--gray-50);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.search-box input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(24, 111, 187, 0.08);
    background: #fff;
}

.search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 0.9rem;
}

/* --- Empty State --- */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--gray-500);
}

.empty-state h3 {
    font-size: 1.1rem;
    color: var(--gray-600);
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.empty-state .btn {
    font-size: 0.9rem;
    padding: 10px 20px;
}

/* --- Tabs --- */
.tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 20px;
}

.tab-link {
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-400);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all var(--transition-fast);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: inherit;
}

.tab-link:hover {
    color: var(--gray-600);
}

.tab-link.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

/* --- Priority badges --- */
.priority-low { background: var(--success-light); color: var(--success-dark); }
.priority-normal { background: var(--info-light); color: var(--info-dark); }
.priority-high { background: var(--warning-light); color: var(--warning-dark); }
.priority-urgent { background: var(--danger-light); color: var(--danger-dark); }

/* --- Birthday icon bounce --- */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.birthday-icon {
    animation: bounce 1s infinite alternate;
    display: inline-block;
}

/* --- File Upload Area --- */
.file-upload-area {
    border: 2px dashed var(--gray-200);
    border-radius: var(--border-radius-lg);
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    background: var(--gray-50);
}

.file-upload-area:hover {
    border-color: var(--primary);
    background: var(--primary-50);
}

/* --- Login Page --- */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gray-900) 0%, #0a3a6b 100%);
    padding: 24px;
}

.login-card {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--border-radius-xl);
    box-shadow: 0 24px 48px rgba(0,0,0,0.15);
    width: 100%;
    max-width: 420px;
    padding: 44px;
    border: 1px solid rgba(255,255,255,0.2);
}

.login-card .login-logo {
    text-align: center;
    margin-bottom: 32px;
}

.login-card .login-logo img {
    height: 40px;
}

.login-card h2 {
    text-align: center;
    margin-bottom: 8px;
}

.login-card .login-subtitle {
    text-align: center;
    color: var(--gray-500);
    font-size: 0.9rem;
    margin-bottom: 28px;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }

    .hamburger-btn {
        display: block;
    }

    /* Overlay behind sidebar on mobile */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.3);
        z-index: 999;
    }

    .sidebar-overlay.active {
        display: block;
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }

    .grid-3 {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }

    .page-content {
        padding: 16px;
    }

    .topbar {
        padding: 0 16px;
    }

    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box {
        max-width: none;
    }

    .btn-group {
        width: 100%;
    }

    .btn-group .btn {
        flex: 1;
        justify-content: center;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .login-card {
        padding: 24px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Print Styles --- */
@media print {
    .sidebar,
    .topbar,
    .hamburger-btn,
    .sidebar-overlay,
    .btn,
    .toolbar {
        display: none !important;
    }

    .main-content {
        margin-left: 0;
    }

    .page-content {
        padding: 0;
    }
}

/* --- Scrollbar styling --- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* --- Loading Spinner --- */
.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--gray-200);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* --- Searchable Select Dropdown --- */
.ss-wrapper {
    position: relative;
    width: 100%;
}

.ss-wrapper select {
    display: none !important;
}

.ss-trigger {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--gray-800);
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    line-height: 1.5;
    min-height: 40px;
}

.ss-trigger:hover {
    border-color: var(--gray-300);
}

.ss-trigger.ss-open {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(24, 111, 187, 0.08);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.ss-trigger-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ss-trigger-text.ss-placeholder {
    color: var(--gray-400);
}

.ss-trigger-arrow {
    margin-left: 8px;
    font-size: 0.7rem;
    color: var(--gray-500);
    transition: transform 0.2s ease;
}

.ss-trigger.ss-open .ss-trigger-arrow {
    transform: rotate(180deg);
}

.ss-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--primary);
    border-top: none;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 300px;
    overflow: hidden;
    display: none;
    flex-direction: column;
}

.ss-dropdown.ss-open {
    display: flex;
}

.ss-search-wrap {
    padding: 8px;
    border-bottom: 1px solid var(--gray-200);
    position: sticky;
    top: 0;
    background: #fff;
}

.ss-search-wrap input {
    width: 100%;
    padding: 7px 12px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    color: var(--gray-800);
    background: var(--gray-50);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.ss-search-wrap input:focus {
    border-color: var(--primary);
    background: #fff;
}

.ss-search-wrap input::placeholder {
    color: var(--gray-400);
}

.ss-options {
    overflow-y: auto;
    max-height: 240px;
}

.ss-option {
    padding: 8px 14px;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--gray-700);
    transition: background 0.1s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ss-option:hover,
.ss-option.ss-highlighted {
    background: var(--primary-50);
    color: var(--primary-dark);
}

.ss-option.ss-selected {
    background: var(--primary-100);
    color: var(--primary);
    font-weight: 500;
}

.ss-no-results {
    padding: 12px 14px;
    color: var(--gray-400);
    font-size: 0.85rem;
    text-align: center;
}

/* --- Tooltip --- */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: var(--gray-800);
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
    z-index: 100;
}

[data-tooltip]:hover::after {
    opacity: 1;
}

/* ── Mobiel: nooit automatisch inzoomen op invoervelden ──────────────
   iOS Safari zoomt de pagina in zodra je een veld aantikt dat kleiner is
   dan 16px. Dat gebeurt ook met user-scalable=no in de viewport, dus dit
   is de enige echte oplossing. Alleen op smalle schermen, zodat de
   compactere 14px op desktop blijft staan. */
@media (max-width: 820px) {
    .form-control,
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="search"], input[type="tel"],
    input[type="url"], input[type="date"], input[type="datetime-local"],
    input[type="time"], select, textarea {
        font-size: 16px;
    }
}

/* Dubbeltik-zoom weghalen bij dingen waar je op tikt. Dit haalt meteen
   de 300 ms vertraging weg die browsers aanhouden om op die tweede tik
   te wachten, dus knoppen voelen sneller. */
a, button, .btn, .nav-link, .tab-link, input, select, textarea, label,
[role="button"], .stat-card, .modern-table tr {
    touch-action: manipulation;
}

/* ============================================================
   MOBIEL — tabellen als kaarten
   ------------------------------------------------------------
   Een brede tabel schoof op telefoon horizontaal weg, waardoor de
   actiekolom buiten beeld viel: je moest eerst naar rechts scrollen
   voordat je iets kon doen. Op smalle schermen wordt elke rij daarom
   een kaart, met de knoppen onderaan over de volle breedte.

   De klasse .kaarten wordt door assets/js/mobile-tables.js gezet, en
   alleen op tabellen die veilig om te zetten zijn. Zonder JavaScript,
   of bij bewerk-tabellen met invoervelden, blijft alles zoals het was.
   ============================================================ */
@media (max-width: 768px) {

    .table-container.kaarten-houder {
        border: 0;
        background: none;
        overflow: visible;
        border-radius: 0;
    }

    .modern-table.kaarten,
    .modern-table.kaarten tbody,
    .modern-table.kaarten tfoot,
    .modern-table.kaarten tr,
    .modern-table.kaarten td {
        display: block;
        width: 100%;
    }

    /* De kop is overbodig: elk label staat nu in de cel zelf. */
    .modern-table.kaarten thead { display: none; }

    .modern-table.kaarten tbody tr {
        background: #fff;
        border: 1px solid var(--gray-200);
        border-radius: var(--border-radius-lg);
        box-shadow: var(--shadow-xs);
        margin-bottom: 12px;
        padding: 4px 0;
        overflow: hidden;
    }
    .modern-table.kaarten tbody tr:last-child { margin-bottom: 0; }
    .modern-table.kaarten tbody tr:hover { background: #fff; }

    /* Label links, waarde rechts.
       De !important-regels zijn nodig omdat de pagina's inline breedtes op
       hun cellen zetten (bv. style="width:120px" op de actiekolom). Die zijn
       bedoeld voor de tabelweergave op desktop, maar drukken hier de kaart
       scheef: de knoppenbalk werd 120px breed in plaats van de volle kaart. */
    .modern-table.kaarten tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        padding: 9px 16px;
        border: 0;
        text-align: left !important;
        font-size: 0.9rem;
        min-height: 0;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .modern-table.kaarten tbody td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        color: var(--gray-500);
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding-top: 2px;
    }

    /* Waardekant mag afbreken en uitlijnen naar rechts. */
    .modern-table.kaarten tbody td > * { max-width: 100%; }
    .modern-table.kaarten tbody td {
        overflow-wrap: anywhere;
    }

    /* De eerste kolom is de titel van de kaart: groter, zonder label. */
    .modern-table.kaarten tbody td:first-child:not([data-acties]):not([data-kies]) {
        display: block;
        padding: 12px 16px 8px;
        font-size: 1rem;
        font-weight: 600;
        color: var(--gray-900);
        border-bottom: 1px solid var(--gray-100);
        margin-bottom: 4px;
    }
    .modern-table.kaarten tbody td:first-child::before { display: none; }

    /* Selectievakje rechtsboven in de kaart in plaats van als eigen regel. */
    .modern-table.kaarten tbody td[data-kies] {
        display: block;
        padding: 12px 16px 0;
    }
    .modern-table.kaarten tbody td[data-kies]::before { display: none; }

    /* Lege cellen kosten alleen ruimte. */
    .modern-table.kaarten tbody td[data-leeg] { display: none; }

    /* ── Knoppen: onderaan, volle breedte, altijd bereikbaar ─────── */
    .modern-table.kaarten tbody td[data-acties] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 16px;
        margin-top: 4px;
        border-top: 1px solid var(--gray-100);
        background: var(--gray-50);
    }
    .modern-table.kaarten tbody td[data-acties]::before { display: none; }

    .modern-table.kaarten tbody td[data-acties] > * {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        justify-content: stretch !important;  /* overschrijft inline centrering */
    }

    /* Een ghost-knop is op wit nauwelijks te zien; in de knoppenbalk krijgt
       hij daarom wel een rand, zodat duidelijk is dat je erop kunt tikken. */
    .modern-table.kaarten tbody td[data-acties] .btn-ghost {
        border: 1px solid var(--gray-200);
        background: #fff;
    }

    .modern-table.kaarten tbody td[data-acties] .btn {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
        padding: 9px 14px;
    }

    /* Icoonknoppen krijgen op mobiel hun title als tekst erbij, anders
       staat er een rij naamloze icoontjes. */
    .modern-table.kaarten tbody td[data-acties] .btn-icon {
        width: auto;
        height: auto;
        gap: 7px;
    }
    .modern-table.kaarten .btn-mobiel-label { display: inline; font-size: 0.82rem; }

    /* Rijen die de volle breedte gebruiken (subtotalen, "geen resultaten"). */
    .modern-table.kaarten tbody tr[data-vol] {
        border: 0;
        box-shadow: none;
        background: none;
        padding: 0;
        margin-bottom: 8px;
    }
    .modern-table.kaarten tbody tr[data-vol] td {
        display: block;
        text-align: center !important;
        padding: 14px 16px;
        color: var(--gray-500);
    }
    .modern-table.kaarten tbody tr[data-vol] td::before { display: none; }

    .modern-table.kaarten tfoot td {
        padding: 10px 16px;
        font-weight: 600;
        border-top: 1px solid var(--gray-200);
    }
}

/* Buiten mobiel blijft het label van een icoonknop verborgen: daar is de
   tooltip genoeg en zouden de knoppen anders veel breder worden. */
.btn-mobiel-label { display: none; }

/* ============================================================
   MOBIEL — overige knelpunten in het panel
   ============================================================ */
@media (max-width: 768px) {

    /* Paginakop: titel boven, knoppen eronder over de volle breedte. */
    .page-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 12px;
    }
    .page-header h1 { font-size: 1.35rem; }
    .page-header .btn-group { width: 100%; flex-wrap: wrap; }
    .page-header .btn-group .btn { flex: 1 1 auto; justify-content: center; }

    /* Filtertabs horizontaal schuifbaar in plaats van afgekapt. */
    .tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tab-link { white-space: nowrap; flex: 0 0 auto; }

    /* Kaarten: minder binnenruimte, meer inhoud in beeld. */
    .card-body { padding: 16px; }
    .card-header { padding: 12px 16px; }

    /* Twee statistiekblokken naast elkaar leest prettiger dan één brede. */
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .stat-card { padding: 14px; gap: 12px; }
    .stat-icon { width: 38px; height: 38px; font-size: 1rem; }
    .stat-info .stat-value { font-size: 1.25rem; }

    /* Knoppen groot genoeg om te raken (44px is de richtlijn van Apple). */
    .btn { min-height: 42px; }
    .btn-sm { min-height: 38px; }

    /* Modals passend op een telefoonscherm. */
    .modal .card, .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 88vh;
        overflow-y: auto;
    }
}

@media (max-width: 480px) {
    /* Op de smalste schermen toch één statistiekblok per rij. */
    .stats-grid { grid-template-columns: 1fr; }

    /* Label boven de waarde: naast elkaar wordt het te krap. */
    .modern-table.kaarten tbody td:not([data-acties]):not([data-kies]) {
        flex-direction: column;
        gap: 2px;
    }
    .modern-table.kaarten tbody td::before { flex-basis: auto; }
}

/* ============================================================
   iOS: veilige zones in de geïnstalleerde webapp
   ------------------------------------------------------------
   Draait het panel als PWA op het beginscherm, dan loopt de weergave
   door tot achter de home-indicator onderaan. Zonder deze ruimte
   vallen knoppen en tabelrijen daar deels achter.

   Alleen in standalone-modus: in een gewone browsertab regelt Safari
   dit zelf en zou de extra ruimte alleen maar wegvallende hoogte zijn.
   ============================================================ */
@media (display-mode: standalone) {
    .page-content {
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }
    .sidebar {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    /* Zijkanten meenemen voor liggend gebruik, waar de notch aan de zijkant zit. */
    .topbar {
        padding-left: calc(28px + env(safe-area-inset-left, 0px));
        padding-right: calc(28px + env(safe-area-inset-right, 0px));
    }
}