@media (max-width: 900px) {
    /* Sidebar search is hidden on mobile too, so keep the workspace search visible */
}

/* Flex Animation */
@keyframes muscle-flex {
    0% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(-10deg); }
    50% { transform: scale(1.2) rotate(5deg); }
    75% { transform: scale(1.1) rotate(-5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.flex-emoji { display: inline-block; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: default; }

.logo:hover .flex-emoji, .flex-emoji:hover { 
    animation: muscle-flex 0.4s ease-out;
    transform: scale(1.2);
}

/* Sidebar toggle adjustment */
.btn-icon-subtle.is-active {
    background: var(--color-bg-alpha-10);
    color: var(--color-brand);
    border-color: var(--color-brand);
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    color: var(--color-text-dim);
    text-decoration: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
    transition: background-color 0.15s, color 0.15s, opacity 0.15s;
    margin-bottom: 2px;
    overflow: visible;
}

@media (min-width: 1024px) {
    .sidebar-nav-item {
        padding: 8px 12px;
        font-size: 13px;
        border-radius: 8px;
        margin-bottom: 2px;
    }
}

.sidebar-nav-item:hover { color: var(--color-text-main); background: var(--color-bg-card); }

.sidebar-nav-item.active { background: var(--color-brand); color: #000; font-weight: 800; }

/* Zelfde icon-vak voor alle items: fa-i en bubble-SVG hadden anders te verschillend hoogte
   (SVG was 24–26px in layout, scale() verandert de ritme-breedte/hoogte niet) */
.sidebar-nav-item i {
    font-size: 18px;
    opacity: 0.4;
    width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.sidebar-nav-item svg:not(.sidebar-nav-bubble) {
    font-size: 18px;
    opacity: 0.4;
    width: 24px;
    min-height: 24px;
    display: block;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: all 0.2s;
}

/* Kaart-nav: NL-landssilhouet (static/icons/NL.svg). Iets verkleind (t.o.v. 24px-vak) zodat
   het qua visuele massa aansluit op fa-icoontjes; SVG-paden zijn donker: invert op donker thema. */
.sidebar-nav-item .sidebar-nav-klic-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    object-fit: contain;
    opacity: 0.4;
    display: block;
    transform: scale(0.8);
    transform-origin: center center;
    transition: opacity 0.2s, filter 0.2s, transform 0.2s;
}

/* Invert maakt zwart → wit: zelfde opacity als fa geeft een te licht silhouet; iets lagere opacity + hover */
body:not(.light-mode) .sidebar-nav-item .sidebar-nav-klic-icon {
    filter: invert(1);
    opacity: 0.32;
}
body:not(.light-mode) .sidebar-nav-item:hover .sidebar-nav-klic-icon {
    opacity: 0.64;
}

body.light-mode .sidebar-nav-item .sidebar-nav-klic-icon {
    filter: none;
}

.sidebar-nav-item .sidebar-nav-bubble {
    /* Zelfde vak als font-awesome iconen; overflow hidden voorkomt dat geschaalde bubble extra verticale ruimte oogt */
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    flex-shrink: 0;
    opacity: 0.4;
    align-self: center;
    display: block;
    overflow: hidden;
    transform: scale(0.66);
    transform-origin: center center;
    transition: transform 0.2s, opacity 0.2s;
}

.sidebar-nav-item:hover .sidebar-nav-bubble { opacity: 0.95; }

.sidebar-nav-item.active .sidebar-nav-bubble { opacity: 1; }

.sidebar-nav-item:hover i, .sidebar-nav-item:hover svg:not(.sidebar-nav-bubble) { opacity: 0.8; }

.sidebar-nav-item:hover .sidebar-nav-klic-icon { opacity: 0.8; }

.sidebar-nav-item.active i, .sidebar-nav-item.active svg:not(.sidebar-nav-bubble) { opacity: 1; color: #000; }

/* Actief: op donker = zwart silhouet op brand (na invert); op licht = zwart op witte actieve balk */
body:not(.light-mode) .sidebar-nav-item.active .sidebar-nav-klic-icon {
    opacity: 1;
    filter: invert(1) brightness(0);
}

body.light-mode .sidebar-nav-item.active .sidebar-nav-klic-icon {
    opacity: 1;
    filter: none;
}

/* KLIC Drive signature icon: invert helm to black on active (green bg) */
.sidebar-nav-item.active .klic-helm { fill: #000 !important; }

/* Support Agent - chat bubble icon goed zichtbaar */
.sidebar-nav-support i {
    opacity: 0.7;
    font-size: 16px;
    width: 22px;
}

.sidebar-nav-support:hover i { opacity: 0.95; }

@media (min-width: 1024px) {
    .sidebar-nav-item.active { background: var(--color-brand); }
    .sidebar-nav-item i,
    .sidebar-nav-item svg:not(.sidebar-nav-bubble) {
        font-size: 14px;
        width: 26px;
        min-height: 26px;
    }
    .sidebar-nav-item i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .sidebar-nav-item .sidebar-nav-bubble {
        width: 26px;
        height: 26px;
        transform: scale(0.64);
    }
    .sidebar-nav-item .sidebar-nav-klic-icon {
        width: 26px;
        height: 26px;
        transform: scale(0.78);
    }
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width); /* φ-based: ~232px */
    min-width: var(--sidebar-width);
    /* Zelfde mat zwart als hoofdveld (#121212); één visuele massa t.o.v. view-body. */
    background: var(--color-bg-deep);
    border-right: 1px solid var(--color-border);
    padding: 0 var(--sidebar-padding-x) var(--space-xl);
    height: 100%;
    text-align: left;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 60000;
    position: relative;
}

.sidebar-header {
    height: var(--top-bar-height);
    display: flex;
    align-items: center;
    padding: 0;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

/* Horizontale lijnen tot aan de rechter zijlijn (geen gat t.o.v. border-right) */
@media (min-width: 1024px) {
    .sidebar-header {
        margin-left: calc(-1 * var(--sidebar-padding-x));
        margin-right: calc(-1 * var(--sidebar-padding-x));
        padding-left: var(--sidebar-padding-x);
        padding-right: var(--sidebar-padding-x);
    }
}

@media (max-width: 1023px) {
    html, body {
        overflow: visible;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        height: auto;
        min-height: 100%;
        /* Prevent iOS/Chrome overscroll white bounce */
        overscroll-behavior: none;
        background-color: var(--color-bg-deep);
    }
    .app-container {
        flex-direction: column;
        /* Let body be the sole scroll container - prevents double-scroll and
           iOS/Chrome overscroll white flash from app-container's own scroll */
        overflow: visible;
        min-height: 100vh;
        min-height: 100dvh;
        padding-left: 0;
        padding-right: 0;
    }
    .sidebar-nav {
        display: none !important;
    }
    .main-content {
        overflow-y: visible;
        height: auto;
        min-height: 0;
        padding-top: calc(64px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
    .search-header {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        height: calc(64px + env(safe-area-inset-top, 0px));
        padding-top: env(safe-area-inset-top, 0px);
        --mobile-header-height: calc(64px + env(safe-area-inset-top, 0px));
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        z-index: 2000 !important;
        display: flex !important;
        align-items: center;
        background: var(--color-bg-deep) !important;
        border-bottom: 1px solid var(--color-border);
        box-shadow: none;
    }
    .view-body-wrapper {
        overflow: visible !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }
    .view-header {
        padding: 40px 32px 0; /* More generous padding for mobile headers to avoid topbar overlap */
        margin-bottom: 24px;
    }
}

/* DESKTOP REFINEMENTS */
@media (min-width: 1024px) {
    .team-switcher {
        padding: 10px 12px;
        background: var(--color-bg-surface);
        border: 1px solid var(--color-border);
        border-radius: 8px;
        margin: var(--dash-title-pad-top, 12px) 0 var(--dash-title-pad-top, 12px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        transition: all 0.2s;
        text-align: left;
    }
    .team-switcher:hover { border-color: var(--color-border-hover); background: #111; }
    .team-label { 
        font-size: 10px; 
        font-weight: 700; 
        color: var(--color-text-dim); 
        text-transform: none; 
        letter-spacing: 0.05em; 
        display: block;
    }
    .team-name { font-size: 13px; font-weight: 600; color: var(--color-text-main); }

    .nav-group { margin-bottom: var(--space-xl); } /* 28px */
    .nav-group-label { font-size: 10px; font-weight: 700; color: var(--color-text-muted); text-transform: none; padding: 0 var(--space-md) var(--space-sm); letter-spacing: 0.05em; } /* 0 11px 7px */

    .view-container.active {
        display: flex !important;
        flex-direction: column !important;
        flex: 1;
        min-height: 0;
        background: var(--color-bg-deep);
    }

    .split-view {
        display: grid !important;
        /* file tree panel - compact for readability */
        grid-template-columns: 260px 1fr !important;
        flex: 1;
        min-height: 0;
        height: 100%;
        max-height: 100%; /* Dennis: Voorkom dat container groter wordt dan parent */
        gap: 0;
        padding: 0;
        width: 100%;
        max-width: none;
        overflow: hidden; /* Dennis: Voorkom dubbele scrollbars op split-view niveau */
    }

    /* Responsive refinements for smaller desktops (13" laptops) */
    @media (max-width: 1440px) {
        .sidebar-nav {
            width: 200px;
            min-width: 200px;
            padding: 0 var(--sidebar-padding-x) var(--space-xl) !important;
        }
        .sidebar-nav-item {
            padding: 7px 10px !important;
            font-size: 12px !important;
            gap: 8px !important;
        }
        .sidebar-nav-item i,
        .sidebar-nav-item svg:not(.sidebar-nav-bubble) {
            font-size: 14px !important;
            width: 22px !important;
            min-height: 22px !important;
        }
        .sidebar-nav-item .sidebar-nav-bubble {
            width: 22px !important;
            height: 22px !important;
            flex-basis: 22px !important;
            transform: scale(0.62) !important;
        }

        .split-view {
            grid-template-columns: 235px 1fr !important;
            gap: 0 !important;
            padding: 0 !important;
        }
        .desktop-preview-pane {
            --preview-pad: var(--space-xl); /* 28px */
            padding: var(--preview-pad) !important;
        }
        .top-bar-desktop {
            padding: 0 var(--space-lg) !important; /* 0 17px */
            height: var(--top-bar-height) !important;
        }
        .item-main {
            padding: var(--space-lg) !important; /* 17px */
            gap: var(--space-md) !important; /* 11px */
        }
        .item-avatar {
            width: 36px !important;
            height: 36px !important;
            font-size: 18px !important;
        }
        .item-title {
            font-size: 13px !important;
        }
        .item-snippet {
            font-size: 11px !important;
        }
        .item-sub {
            font-size: 10px !important;
        }
    }

    .inbox-list-wrapper {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        max-height: 100%; /* Dennis: Voorkom dat container groter wordt dan parent */
        background: var(--color-bg-surface);
        border-right: 1px solid var(--color-border);
        border-radius: 0;
        overflow: hidden;
        box-shadow: none;
    }

    .desktop-preview-pane {
        display: flex !important;
        flex-direction: column;
        background: var(--color-bg-surface);
        border: none;
        border-radius: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* Dennis: Smooth scroll voor iOS */
        --preview-pad: var(--space-xl); /* 28px - φ-based */
        padding: 0; /* Dennis the Dev: No padding on pane, headers handle their own alignment */
        /* Ensure last sections can scroll fully into view */
        padding-bottom: 120px;
        scroll-padding-bottom: 120px;
        height: 100%;
        min-height: 0;
        box-shadow: none;
    }

    /* Project detail should be a split layout: header fixed, content scrolls under meta divider. */
    .desktop-preview-pane.has-project-detail {
        overflow: hidden; /* prevent outer scroll; inner detail body handles scrolling */
        padding: 0;
        padding-bottom: 0;
        scroll-padding-bottom: 0;
        --preview-pad: 0px;
    }
    .desktop-preview-pane.has-project-detail #workspace-project-view {
        /* Critical: make this a flex column with height context,
           otherwise inner flex/overflow scrolling won't work. */
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }
    .desktop-preview-pane.has-project-detail #workspace-project-detail {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .desktop-preview-pane.has-project-detail .project-detail-container {
        height: 100%;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    /* The injected project detail sits inside #preview-content/#workspace-project-detail; those must stretch too. */
    .desktop-preview-pane.has-project-detail #preview-content,
    .desktop-preview-pane.has-project-detail #workspace-project-detail {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .desktop-preview-pane.has-project-detail .detail-header {
        flex: 0 0 auto;
        position: sticky;
        top: 0;
        z-index: 4000;
    }
    /* Zelfde breadcrumb als op de maplijst: .workspace-backbar blijft zichtbaar; geen tweede trail in .detail-top-row */
    .desktop-preview-pane.has-project-detail .detail-top-row {
        display: none !important;
    }
    .desktop-preview-pane.has-project-detail .detail-scroll-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Small breathing room so the last card never feels clipped, without creating a visible "bar". */
        padding-bottom: 48px;
        scroll-padding-bottom: 48px;
    }

    .top-bar-desktop {
        height: var(--top-bar-height);
        border-bottom: 1px solid var(--color-border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 var(--dash-page-gutter-x);
        background: var(--color-bg-deep);
        flex-shrink: 0;
        position: sticky;
        top: 0;
        z-index: 60000;
    }
    
    /* Breadcrumbs removed - replaced with demo banner */
    .demo-banner {
        display: flex;
        align-items: center;
        gap: 8px;
        background: rgba(204, 255, 0, 0.1);
        border: 1px solid rgba(204, 255, 0, 0.2);
        padding: 4px 12px;
        border-radius: 8px;
        color: var(--color-brand);
        font-size: 10px;
        font-weight: 900;
        text-transform: none;
        letter-spacing: 0.1em;
    }
    .demo-banner i { font-size: 12px; }
}

.card-header h3 i,
.card-header h3 svg,
.card h3 i,
.card h3 svg,
.card-x h3 i,
.card-x h3 svg,
.map-card-header h3 i,
.map-card-header h3 svg,
.detail-section-header h3 i,
.detail-section-header h3 svg,
.detail-section-title i,
.detail-section-title svg,
.label i,
.label svg,
.team-label i,
.team-label svg {
    color: var(--color-text-muted) !important;
    fill: currentColor !important;
    opacity: 0.85;
}

@media (min-width: 1024px) {
    .bottom-nav { display: none !important; }
    .search-header { display: none !important; }
}

@media (max-width: 1023px) {
    .sidebar-nav { display: none !important; }
    .top-bar-desktop { display: none !important; }
    
    /* Ensure the main project view is visible and takes space */
    .desktop-preview-pane { 
        display: flex !important; 
        flex-direction: column !important;
        flex: 1 !important;
        width: 100% !important;
        min-height: 0;
        /* Ruimte voor de fixed breadcrumb-bar (36px) direct onder de topbar */
        padding-top: 36px !important;
    }

    /* Force parent containers to provide height */
    .view-container.active {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        overflow: visible !important; /* allow sticky breadcrumb to use body as scroll context */
    }

    .view-body.projects-view-body {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        overflow: visible !important;
    }

    .split-view {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        height: 100% !important;
    }
}

.klic-package-row .folder-icon-stack {
    width: 36px;
    height: 36px;
}

.klic-package-row .folder-icon-stack i:first-child {
    font-size: 28px;
}

.klic-package-row .folder-icon-stack i:last-child {
    width: 16px;
    height: 16px;
    right: -3px;
    bottom: -3px;
    font-size: 10px;
}

.workspace-folder-row.placeholder-card .workspace-folder-name {
    color: var(--color-text-dim);
    font-weight: 500;
}

.folder-icon-stack {
    position: relative;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.folder-icon-stack i:first-child {
    font-size: 18px;
    color: var(--color-text-dim);
}

.folder-icon-stack i:last-child {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: var(--color-text-main);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
}

.workspace-folder-name {
    font-weight: 700;
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
}

.workspace-folder-count {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.6;
    background: var(--color-bg-alpha-10);
    padding: 2px 8px;
    border-radius: 6px;
    margin-left: 8px; /* Added margin */
}

.folder-actions-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--color-text-dim);
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.4;
}

@media (hover: hover) {
    .workspace-folder-row:hover .folder-actions-btn,
    .list-item:hover .folder-actions-btn {
        opacity: 1;
    }
}

.folder-actions-btn:hover {
    background: var(--color-bg-alpha-10);
    color: var(--color-text-main);
}

#workspace-pane.is-tiles .list-item .folder-actions-btn {
    position: static !important;
    transform: none !important;
    opacity: 0.5;
    background: transparent !important;
    flex-shrink: 0;
}

#workspace-pane.is-tiles .item-main-finder .folder-actions-btn-mobile {
    display: none !important;
}

/* MOBILE NAV OVERLAY */
.mobile-nav-overlay {
    position: fixed; top: 0; left: 0; bottom: 0; width: 300px; 
    background: #050505;
    z-index: 99999; 
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
    border-right: 1px solid var(--color-border); padding: 0; display: flex; flex-direction: column;
    box-shadow: 4px 0 32px rgba(0,0,0,0.6);
}

.mobile-nav-header {
    padding: 24px;
    padding-top: calc(24px + env(safe-area-inset-top, 0px));
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 20px;
}

.mobile-nav-body {
    padding: 0 24px 24px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    flex: 1;
    overflow-y: auto;
}

.mobile-nav-overlay.open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.92); 
    z-index: 99998; 
    opacity: 0; pointer-events: none;
    visibility: hidden;
}

.mobile-nav-backdrop.open {
    opacity: 1; pointer-events: auto;
    visibility: visible;
    transition: opacity 0.3s;
}

@media (min-width: 1024px) {
    .mobile-nav-overlay, .mobile-nav-backdrop, .search-header, .bottom-nav { display: none !important; }
    
    /* Shared mode specific styles (handled via body class in production usually) */
    body.is-shared .split-view {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    body.is-shared .inbox-list-wrapper {
        display: none !important;
    }
    body.is-shared .desktop-preview-pane {
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;
        border-left: none !important;
    }
    body.is-shared .main-content {
        height: 100vh !important;
        height: 100dvh !important;
    }
    body.is-shared .view-body-wrapper {
        padding: 0 !important;
    }
}

@media (max-width: 1023px) {
    .sidebar-nav, .top-bar-desktop { display: none !important; visibility: hidden !important; pointer-events: none !important; }
}

@media (max-width: 1023px) {
    .search-header .hamburger-btn,
    .search-header .mobile-logo-link {
        transition: width 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
        flex-shrink: 0;
    }
    .search-header .header-right-icons {
        transition: width 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
        flex-shrink: 0;
    }
    .search-header.is-searching .hamburger-btn,
    .search-header.is-searching .mobile-logo-link {
        width: 0 !important;
        opacity: 0;
        overflow: hidden;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none;
    }
    .search-header.is-searching .header-right-icons {
        width: 0 !important;
        opacity: 0;
        overflow: hidden;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none;
    }
    .search-header.is-searching .search-bar {
        flex: 1;
        width: 100% !important;
    }
}

/* LOGO ANIMATION */
@keyframes logoBubbleReveal {
    0% { transform: translateX(-82%); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes logoTextReveal {
    0% { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); opacity: 0; }
    15% { opacity: 1; }
    100% { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); opacity: 1; }
}

.logo-animated-svg { 
    overflow: visible; 
    height: 24px;
    width: auto;
}

.logo-animated-svg .logo-bubble {
    animation: logoBubbleReveal 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transform-origin: center;
}

.logo-animated-svg .logo-text {
    animation: logoTextReveal 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.logo-animated-svg:hover .logo-bubble {
    animation: logoBubbleReveal 0.96s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.logo-animated-svg:hover .logo-text {
    animation: logoTextReveal 0.96s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@media (hover: none) {
    @keyframes logoBubbleRevealTouch {
        0% { transform: translate3d(-70%, 0, 0); opacity: 0.8; }
        15% { opacity: 1; }
        100% { transform: translate3d(0, 0, 0); opacity: 1; }
    }
    .logo-animated-svg .logo-bubble {
        animation: logoBubbleRevealTouch 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    }
}

/* Sidebar folder tree chevrons (Cursor-style) */
.sidebar-folder-item {
    position: relative;
}

.sidebar-folder-item .folder-icon {
    display: none !important;
}

.folder-chevron {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-dim);
    margin-right: 6px;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.18s ease;
}

.folder-chevron:hover {
    background: var(--color-bg-alpha-05);
    border-color: var(--color-border);
    color: var(--color-text-main);
}

.folder-chevron i {
    font-size: 10px;
    transition: transform 0.18s ease;
    opacity: 0.85;
}

.sidebar-folder-item.is-collapsed .folder-chevron i {
    transform: rotate(0deg);
}

.sidebar-folder-item.is-parent:not(.is-collapsed) .folder-chevron i {
    transform: rotate(90deg);
}

.folder-chevron-spacer {
    width: 22px;
    height: 22px;
    display: inline-block;
    margin-right: 6px;
    flex-shrink: 0;
}

.team-access-tree .folder-icon {
    color: var(--color-text-dim) !important;
    font-size: 12px !important;
    opacity: 0.85;
}

/* BOTTOM NAV */
.bottom-nav {
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    width: 100%; 
    /* Total height = nav content (56px) + safe area inset */
    height: calc(56px + env(safe-area-inset-bottom, 0px)); 
    background-color: var(--color-bg-deep); 
    border-top: 1px solid var(--color-border); 
    display: flex; 
    justify-content: space-around; 
    align-items: stretch;
    padding-bottom: env(safe-area-inset-bottom, 0px); 
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    z-index: 1000;
}

.nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--color-text-dim); text-decoration: none; position: relative; flex: 1; height: 56px; justify-content: center; }

.nav-item.active { color: var(--color-brand); }

.nav-item i { font-size: 20px; }

.nav-item span { font-size: 10px; font-weight: 700; text-transform: none; letter-spacing: 0.5px; }

.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 10px;
    color: var(--color-text-main);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    opacity: 0.6; /* Dennis the Dev: Lower opacity for inactive items */
    transition: all 0.2s;
}

.settings-nav-item:hover {
    background: var(--color-bg-alpha-05);
    opacity: 1;
}

.settings-nav-item.active {
    background: var(--color-bg-alpha-10);
    color: var(--color-brand);
    opacity: 1;
}

.settings-nav-item i { width: 16px; opacity: 0.85; }

@media (max-width: 1023px) {
    .view-body {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .settings-shell {
        flex-direction: column;
        gap: 12px;
    }
    .settings-nav {
        width: 100%;
        flex: 0 0 auto;
        position: relative;
        top: 0;
        display: flex;
        flex-wrap: wrap;
        padding: 8px;
        gap: 4px;
    }
    .settings-nav-title {
        width: 100%;
    }
    .settings-nav-item {
        flex: 1 1 auto;
        justify-content: center;
        padding: 10px 12px !important;
        font-size: 11px !important;
    }
    .settings-content {
        width: 100%;
    }
    .settings-section {
        max-width: 100%;
    }
    .settings-section input,
    .settings-section select,
    .settings-section textarea {
        width: 100% !important;
        max-width: 100% !important;
    }
    .settings-section .card-content > div[style*="display: flex"][style*="align-items: center"] {
        flex-direction: column;
        align-items: flex-start !important;
    }
    .settings-section .card-content > div[style*="justify-content: flex-end"] {
        justify-content: stretch !important;
    }
    .settings-section .card-content button.btn {
        width: 100%;
    }
}

/* Project Folders Sidebar Styles */
.sidebar-section-label {
    font-size: 10px;
    font-weight: 800;
    color: var(--color-text-muted);
    letter-spacing: 0.1em;
    padding: 24px 20px 12px 20px;
    text-transform: none;
}

.sidebar-folders-wrapper {
    margin-bottom: 16px;
}

.sidebar-folders-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-dim);
    cursor: pointer;
    transition: all 0.2s;
}

.sidebar-folders-header:hover {
    color: var(--color-text-main);
}

.sidebar-folders-header i {
    margin-right: 8px;
    font-size: 14px;
    opacity: 0.7;
}

.add-folder-btn {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.add-folder-btn:hover {
    background: var(--color-bg-alpha-10);
    color: var(--color-brand);
}

.sidebar-folders-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 12px;
}

.sidebar-folder-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-text-dim);
    font-size: 13px;
    transition: all 0.2s;
    position: relative;
    min-height: 44px;
}

.sidebar-folder-item.is-child {
    padding-left: 28px;
    opacity: 0.95;
}

.sidebar-folder-item.is-child .folder-icon {
    opacity: 0.85;
}

.sidebar-folder-item:hover {
    background: var(--color-bg-alpha-05);
    color: var(--color-text-main);
}

.sidebar-folder-item.active {
    background: var(--color-bg-alpha-10);
    color: var(--color-text-main);
    font-weight: 600;
}

.sidebar-folder-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    background: var(--color-text-main);
    border-radius: 0 4px 4px 0;
}

.folder-icon {
    font-size: 14px;
    width: 20px;
    text-align: center;
}

.folder-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2;
    padding: 2px 0;
}

.folder-count {
    font-size: 10px;
    font-weight: 700;
    background: var(--color-bg-alpha-10);
    color: var(--color-text-muted);
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 4px; /* Added margin */
}

.sidebar-empty-state {
    padding: 12px 20px;
    font-size: 11px;
    color: var(--color-text-muted);
    font-style: italic;
}

.folder-actions {
    opacity: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
    cursor: pointer;
    color: var(--color-text-muted);
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}

.sidebar-folder-item:hover .folder-actions,
.folder-actions:focus,
.folder-actions:active {
    opacity: 1;
}

.folder-actions:hover {
    background: var(--color-bg-alpha-10);
    color: var(--color-brand);
}

/* Full-width team content - no sidebar */
.team-content-full {
    padding: 0 var(--dash-page-gutter-x) 40px;
}

/* SIDEBAR REFINEMENTS */
.sidebar-nav {
    padding: 0 14px var(--space-xl) !important;
}

.sidebar-logo-link {
    height: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.sidebar-logo-svg {
    height: 100%;
    width: auto;
    filter: drop-shadow(0 0 8px rgba(204, 255, 0, 0.1));
}

/* Tier badge - animated neon entrance */
@keyframes tierSlideIn {
    0%   { opacity: 0; transform: translateX(-8px) scale(0.8); filter: blur(4px); }
    60%  { opacity: 1; transform: translateX(2px) scale(1.05); filter: blur(0); }
    80%  { transform: translateX(-1px) scale(0.98); }
    100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}

@keyframes tierGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(204, 255, 0, 0.2), 0 0 2px rgba(204, 255, 0, 0.4) inset; }
    50%      { box-shadow: 0 0 16px rgba(204, 255, 0, 0.35), 0 0 4px rgba(204, 255, 0, 0.5) inset; }
}

@keyframes tierShine {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.sidebar-tier-badge {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.14em;
    padding: 3px 8px;
    border-radius: 5px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    animation: tierSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.sidebar-tier-badge::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.15) 45%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.15) 55%, transparent 60%);
    background-size: 200% 100%;
    animation: tierShine 3s ease-in-out 1.2s infinite;
    border-radius: inherit;
    pointer-events: none;
}

/* PLUS tier */
.sidebar-tier-badge.tier-silver {
    background: linear-gradient(135deg, rgba(204, 255, 0, 0.12), rgba(204, 255, 0, 0.06));
    border: 1px solid rgba(204, 255, 0, 0.2);
    color: #CCFF00;
    animation: tierSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both,
               tierGlow 4s ease-in-out 1s infinite;
}

/* PRO tier */
.sidebar-tier-badge.tier-gold {
    background: rgba(204, 255, 0, 0.9);
    border: 1px solid #CCFF00;
    color: #000;
    text-shadow: 0 0 1px rgba(0,0,0,0.1);
    animation: tierSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both,
               tierGlow 3s ease-in-out 1s infinite;
}

.sidebar-tier-badge.tier-gold::after {
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.3) 45%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.3) 55%, transparent 65%);
    background-size: 200% 100%;
}

/* API/Enterprise tier */
.sidebar-tier-badge.tier-diamond {
    background: linear-gradient(135deg, rgba(204, 255, 0, 0.95), rgba(180, 230, 0, 0.9));
    border: 1px solid #CCFF00;
    color: #000;
    text-shadow: 0 0 1px rgba(0,0,0,0.1);
    animation: tierSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both,
               tierGlow 2.5s ease-in-out 1s infinite;
    box-shadow: 0 0 12px rgba(204, 255, 0, 0.3), 0 0 4px rgba(204, 255, 0, 0.5) inset;
}

.sidebar-tier-badge.tier-diamond::after {
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.35) 42%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.35) 58%, transparent 70%);
    background-size: 200% 100%;
    animation: tierShine 2.5s ease-in-out 1s infinite;
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-tier-badge,
    .sidebar-tier-badge::after { animation: none !important; }
    .sidebar-tier-badge { opacity: 1; transform: none; filter: none; }
    .logo-tier-text { animation: none !important; opacity: 1; transform: none; filter: none; }
    .logo-tier-text::before { animation: none !important; }
}

/* Animated tier text next to logo (replaces chat bubble for PRO/Enterprise) */
@keyframes proTextReveal {
    0%   { opacity: 0; transform: translateX(-12px) scale(0.7); filter: blur(6px); }
    40%  { opacity: 0.7; filter: blur(1px); }
    70%  { transform: translateX(3px) scale(1.04); filter: blur(0); }
    85%  { transform: translateX(-1px) scale(0.99); }
    100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}

@keyframes proGlowPulse {
    0%, 100% { text-shadow: 0 0 8px rgba(204, 255, 0, 0.3), 0 0 20px rgba(204, 255, 0, 0.1); }
    50%      { text-shadow: 0 0 14px rgba(204, 255, 0, 0.5), 0 0 30px rgba(204, 255, 0, 0.2); }
}

@keyframes proShineSwipe {
    0%   { left: -60%; }
    100% { left: 130%; }
}

.logo-tier-text {
    font-family: 'Work Sans', system-ui, sans-serif;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
    position: relative;
    overflow: hidden;
    display: inline-block;
    animation: proTextReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both,
               proGlowPulse 4s ease-in-out 1.5s infinite;
}

.logo-tier-text::before {
    content: '';
    position: absolute;
    top: -20%; bottom: -20%;
    width: 40%;
    background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.08) 35%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.08) 65%, transparent 100%);
    transform: skewX(-15deg);
    animation: proShineSwipe 3.5s ease-in-out 2s infinite;
    pointer-events: none;
}

/* Tier neon brand text: plastic → metallic → diamond facets, all #CCFF00 */
@keyframes tier-shine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.logo-tier-text.tier-pro {
    background: linear-gradient(135deg, #ffffff 0%, #CCFF00 20%, #CCFF00 80%, #e8ff80 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 10px rgba(204, 255, 0, 0.5)) drop-shadow(0 0 4px rgba(204, 255, 0, 0.3));
    animation: tier-shine 4s ease-in-out infinite 0.5s;
    font-size: 19px;
    font-weight: 900;
}

.logo-tier-text.tier-plus {
    color: rgba(204, 255, 0, 0.6);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.logo-tier-text.tier-api {
    color: #CCFF00;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.logo-has-tier-text .logo-bubble { display: none; }

/* PRO/API tier text: match logo height per context */
.sidebar-header .logo .logo-tier-text.tier-pro,
.sidebar-logo-link .logo-tier-text.tier-pro { font-size: 19px; }

.mobile-nav-header .logo .logo-tier-text.tier-pro { font-size: 24px; }

.team-switcher {
    position: relative;
    margin: var(--dash-title-pad-top, 12px) 0 var(--dash-title-pad-top, 12px) !important;
    padding: 10px 12px !important;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}

.team-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.team-name-wrap {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    mask-image: linear-gradient(to right, black 0%, black calc(100% - 40px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - 40px), transparent 100%);
}

.team-name {
    white-space: nowrap;
    overflow: hidden;
    display: block;
}

.team-dropdown-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    color: var(--color-text-dim);
    transition: all 0.2s;
}

.team-switcher:hover .team-dropdown-btn {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
    color: var(--color-text-main);
}

.team-dropdown-btn i {
    font-size: 10px;
}

.org-dropdown-menu {
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.org-dropdown-menu .dropdown-item {
    white-space: nowrap;
    font-size: 12px;
}

.org-dropdown-menu .dropdown-item i,
.org-dropdown-menu .dropdown-item .org-dropdown-item-svg {
    width: 18px;
    min-width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.org-dropdown-header {
    display: none;
}

.org-dropdown-item-svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
    margin-right: 4px;
}

.nav-group-padded {
    padding: 2px 0;
}

@media (min-width: 1024px) {
    .nav-group-padded {
        padding: 0;
    }
}

.compliance-svg-icon {
    width: 22px;
    height: 22px;
}

.sidebar-footer {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: var(--space-md, 11px);
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.sidebar-footer-content {
    padding: 0;
    border-top: none;
}

/* Enterprise-style legal block (sidebar + mobile sheet) */
/* Zelfde tekst-uitlijning als .sidebar-nav-item labels: pl item + icoon + gap (≈ 12+24+10) */
.sidebar-legal {
    margin-top: 2px;
    padding: 12px 14px 16px;
    padding-left: calc(12px + 24px + 10px);
    box-sizing: border-box;
    max-width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 65%);
    border-radius: 0 0 10px 10px;
}

@media (min-width: 1024px) {
    .sidebar-legal {
        padding-left: calc(12px + 26px + 10px);
    }
}

.sidebar-legal__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    line-height: 1.3;
}

.sidebar-legal__link {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #a1a1aa;
    text-decoration: none;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.sidebar-legal__link:hover {
    color: #e4e4e7;
}

.sidebar-legal__sep {
    color: rgba(255, 255, 255, 0.22);
    font-size: 10px;
    font-weight: 500;
    padding: 0 6px;
    user-select: none;
    pointer-events: none;
}

.sidebar-legal__copy {
    margin: 10px 0 0;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.32);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

body.light-mode .sidebar-legal {
    border-top-color: rgba(0, 0, 0, 0.08);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.03) 0%, transparent 65%);
}

body.light-mode .sidebar-legal__link {
    color: #71717a;
}

body.light-mode .sidebar-legal__link:hover {
    color: #18181b;
}

body.light-mode .sidebar-legal__sep {
    color: rgba(0, 0, 0, 0.2);
}

body.light-mode .sidebar-legal__copy {
    color: rgba(0, 0, 0, 0.38);
}

body.light-mode .mobile-nav-footer {
    border-top-color: rgba(0, 0, 0, 0.08);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, transparent 60%);
}

body.light-mode .mobile-nav-footer .sidebar-legal__copy {
    color: rgba(0, 0, 0, 0.36);
}

/* MOBILE HEADER REFINEMENTS */
.mobile-logo-normal {
    height: 20px;
    width: auto;
}

.mobile-logo-shared {
    height: 22px;
    width: auto;
}

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

.mobile-nav-trigger {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-alpha-05);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
}

.mobile-nav-trigger i {
    font-size: 14px;
    opacity: 0.7;
}

.mobile-org-dropdown {
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    margin-top: 8px !important;
}

/* Mobile nav team-switcher - styled inline since desktop styles are in min-width:1024 */
.mobile-team-switcher {
    position: relative;
    margin: 0 0 16px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.mobile-team-switcher .team-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-dim);
    text-transform: none;
    letter-spacing: 0.05em;
    display: block;
}

.mobile-team-switcher .team-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: hidden;
    display: block;
}

.mobile-team-switcher .team-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mobile-team-switcher .team-dropdown-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--color-text-dim);
    font-size: 10px;
}

.team-switcher-chevron {
    font-size: 10px;
    opacity: 0.5;
}

.mobile-nav-footer {
    padding: 20px 20px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: auto;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 60%);
}

.mobile-nav-footer.sidebar-legal {
    border-radius: 0;
    margin-top: auto;
    padding: 20px 22px calc(24px + env(safe-area-inset-bottom, 0px));
}

.mobile-nav-footer .sidebar-legal__link {
    font-size: 11px;
}

.mobile-nav-footer .sidebar-legal__sep {
    font-size: 11px;
    padding: 0 7px;
}

.mobile-nav-footer .sidebar-legal__copy {
    font-size: 10px;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.28);
}

@media (max-width: 1024px) {
    .project-detail-container {
        height: auto !important;
        display: block !important;
        overflow: visible !important;
        padding-top: 0 !important;
        /* Extra bottom padding to clear bottom-nav + safe area on mobile */
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .detail-scroll-body {
        overflow: visible !important;
        flex: none !important;
        height: auto !important;
    }
    .detail-breadcrumb {
        margin-right: 0 !important;
        flex: 1;
        min-width: 0;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
    }
    .detail-breadcrumb::-webkit-scrollbar { display: none; }

    .folder-move-wrap {
        flex-shrink: 0;
    }
    .btn-folder-move {
        padding: 4px 8px !important;
        font-size: 9px !important;
        background: var(--color-bg-alpha-05) !important;
        border-radius: 6px !important;
    }
    .detail-header {
        position: relative !important;
        top: auto !important;
        z-index: auto !important;
        padding: 6px 16px 12px !important;
        gap: 4px !important;
        margin-bottom: 0 !important;
    }
    .detail-top-row {
        height: auto !important;
        min-height: 0 !important;
        gap: 8px !important;
        margin-bottom: 4px !important;
    }
    .detail-bottom-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        margin-top: 0 !important;
        margin-bottom: 2px !important;
        min-height: 0 !important;
    }
    .detail-title {
        font-size: 17px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        width: 100%;
    }
    .detail-meta-row {
        width: 100%;
        flex-wrap: wrap !important;
        white-space: normal !important;
        gap: 4px 8px !important;
        font-size: 11px;
        margin-bottom: 0 !important;
    }
    .detail-meta-row:first-of-type { margin-bottom: 0 !important; }
    .detail-meta-row.detail-meta-status-row { margin-bottom: 2px !important; }
    .detail-meta-row .detail-meta-divider { display: none !important; }
    .detail-meta-row .detail-meta-item {
        font-size: 11px !important;
        gap: 5px !important;
    }
    .metadata-row-preview {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .metadata-badge-preview {
        padding: 4px 10px !important;
        font-size: 10px !important;
    }
    /* Verleng + Viewer + Delen: één rij, drie gelijke kolommen; grote tikvlakken */
    .metadata-row-preview .metadata-actions-group {
        flex-basis: 100% !important;
        width: 100% !important;
        order: 50 !important;
        margin-top: 8px !important;
        padding-top: 8px !important;
        border-top: 1px solid var(--color-border) !important;
    }
    .metadata-actions-group {
        margin-left: 0 !important;
        padding-left: 0 !important;
        border-left: none !important;
        width: 100%;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .metadata-actions-group > .renew-split-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        border-radius: 8px !important;
    }
    .metadata-actions-group > .metadata-action-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        justify-content: center !important;
        min-height: 44px !important;
        padding: 10px 8px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
    }
    .metadata-actions-group .renew-split-main {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        justify-content: center !important;
        min-height: 44px !important;
        padding: 10px 8px !important;
        font-size: 10px !important;
        border-radius: 8px 0 0 8px !important;
    }
    .metadata-actions-group .renew-split-chevron {
        flex: 0 0 auto !important;
        min-height: 44px !important;
        padding: 10px 10px !important;
        border-radius: 0 8px 8px 0 !important;
    }
    /* Alleen AUTO + dropdown: vul hele breedte van de split-knop (tikvlak) */
    .metadata-actions-group .renew-split-chevron.renew-split-chevron-only {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
        gap: 10px !important;
        border-radius: 8px !important;
    }
    .auto-renew-preview-wrap {
        border-left: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
}

/* PROJECTS SIDEBAR TOGGLE */
.split-view.sidebar-hidden {
    grid-template-columns: 1fr !important;
}

.split-view.sidebar-hidden .inbox-list-wrapper {
    display: none !important;
}

/* ================================================
   LOGO WORDMARK - pure bold text, no SVG sizing
   KLICBOT (white) + PRO/API (neon), perfectly even
   ================================================ */

.logo-wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: 'Work Sans', system-ui, -apple-system, sans-serif;
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
    user-select: none;
    text-decoration: none;
}

.wm-klicbot {
    font-size: 16px;
    color: #ffffff;
    letter-spacing: -0.04em;
}

.wm-tier {
    font-size: 16px;
    letter-spacing: -0.02em;
}

.wm-pro {
    color: var(--color-brand);
    filter: drop-shadow(0 0 8px rgba(204, 255, 0, 0.5));
    animation: wmProGlow 4s ease-in-out infinite;
}

.wm-api {
    color: var(--color-brand);
    letter-spacing: 0.04em;
}

@keyframes wmProGlow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(204, 255, 0, 0.4)); }
    50%       { filter: drop-shadow(0 0 14px rgba(204, 255, 0, 0.7)); }
}

/* Mobile: slightly larger for header readability */
.mobile-logo-link .logo-wordmark .wm-klicbot,
.mobile-logo-link .logo-wordmark .wm-tier {
    font-size: 18px;
}

/* Also suppress default browser focus for sidebar folder links on click */
.sidebar-folder-item:focus:not(:focus-visible),
.project-folder-item:focus:not(:focus-visible),
.folder-chevron:focus:not(:focus-visible),
.folder-actions:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Child folders - indented with tree connector line */
.sidebar-folder-item.is-child {
    margin-left: 10px;
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,0.07);
    border-radius: 0 8px 8px 0 !important;
}

.sidebar-folder-item.is-child:hover {
    border-left-color: rgba(255,255,255,0.18);
}

.sidebar-folder-item.is-child.active {
    border-left-color: var(--color-brand);
}

/* Parent folders that have children - slightly bolder indicator */
.sidebar-folder-item.is-parent {
    font-weight: 600;
}

/* Folder count badge - compact */
.folder-count {
    font-size: 9px !important;
    padding: 1px 5px !important;
    border-radius: 8px !important;
    opacity: 0.6;
    flex-shrink: 0;
}

/* Folder name - single line in compact tree */
.folder-name {
    -webkit-line-clamp: 1 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
}

/* Active folder item - brand-colored left accent */
.sidebar-folder-item.active {
    background: rgba(204, 255, 0, 0.05) !important;
    color: var(--color-text-main) !important;
}

.sidebar-folder-item.active::before {
    background: var(--color-brand) !important;
}

/* SHIMMER LOADING EFFECTS */
.shimmer {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.03) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s infinite linear;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-item {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    height: 76px;
    position: relative;
    overflow: hidden;
}

.skeleton-project-row::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.015) 40%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0.015) 60%, transparent 100%);
    background-size: 300% 100%;
    animation: skeletonSweep 2s ease-in-out infinite;
}

/* === PROJECT SKELETON: TILE VIEW (legacy, kept for folder skeletons) === */
.skeleton-project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 12px 16px;
}

@media (max-width: 1100px) { .skeleton-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 600px)  { .skeleton-project-grid { grid-template-columns: 1fr; } }

.skeleton-project-card {
    height: 96px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    overflow: hidden;
    position: relative;
}

.skeleton-project-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.02) 40%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.02) 60%, transparent 100%);
    background-size: 300% 100%;
    animation: skeletonSweep 2s ease-in-out infinite;
}

@keyframes skeletonSweep {
    0% { background-position: 150% 0; }
    100% { background-position: -150% 0; }
}

.skeleton-project-card .skel-icon {
    width: 44px; height: 44px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    flex-shrink: 0;
}

.skeleton-project-card .skel-content { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.skeleton-project-card .skel-header { display: flex; align-items: center; gap: 8px; }

.skeleton-project-card .skel-title { height: 13px; border-radius: 4px; background: rgba(255,255,255,0.07); }

.skeleton-project-card .skel-badge { width: 40px; height: 16px; border-radius: 6px; background: rgba(255,255,255,0.04); flex-shrink: 0; }

.skeleton-project-card .skel-sub { height: 10px; border-radius: 4px; background: rgba(255,255,255,0.04); }

.skeleton-project-card:nth-child(1) .skel-title { width: 65%; }

.skeleton-project-card:nth-child(2) .skel-title { width: 80%; }

.skeleton-project-card:nth-child(3) .skel-title { width: 50%; }

.skeleton-project-card:nth-child(4) .skel-title { width: 72%; }

.skeleton-project-card:nth-child(5) .skel-title { width: 58%; }

.skeleton-project-card:nth-child(6) .skel-title { width: 85%; }

.skeleton-project-card:nth-child(7) .skel-title { width: 45%; }

.skeleton-project-card:nth-child(8) .skel-title { width: 68%; }

.skeleton-project-card:nth-child(1) .skel-sub { width: 40%; }

.skeleton-project-card:nth-child(2) .skel-sub { width: 55%; }

.skeleton-project-card:nth-child(3) .skel-sub { width: 35%; }

.skeleton-project-card:nth-child(4) .skel-sub { width: 48%; }

.skeleton-project-card:nth-child(5) .skel-sub { width: 42%; }

.skeleton-project-card:nth-child(6) .skel-sub { width: 50%; }

.skeleton-project-card:nth-child(7) .skel-sub { width: 30%; }

.skeleton-project-card:nth-child(8) .skel-sub { width: 45%; }

.skeleton-project-card:nth-child(2)::after { animation-delay: 0.1s; }

.skeleton-project-card:nth-child(3)::after { animation-delay: 0.2s; }

.skeleton-project-card:nth-child(4)::after { animation-delay: 0.3s; }

.skeleton-project-card:nth-child(5)::after { animation-delay: 0.15s; }

.skeleton-project-card:nth-child(6)::after { animation-delay: 0.25s; }

.skeleton-project-card:nth-child(7)::after { animation-delay: 0.35s; }

.skeleton-project-card:nth-child(8)::after { animation-delay: 0.05s; }

/* Folder skeletons - zelfde structuur als workspace-folder-row, geen shimmer */
.skel-folder-row {
    pointer-events: none;
}

.skel-folder-row .skel-folder-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--color-bg-alpha-05);
    flex-shrink: 0;
}

.skel-folder-row .skel-folder-name {
    height: 13px;
    border-radius: 4px;
    background: var(--color-bg-alpha-05);
    min-width: 60px;
}

/* Folder skeletons - legacy (skeleton-folder-grid), kept for backwards compat */
.skeleton-folder-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 0;
}

@media (max-width: 1100px) { .skeleton-folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 600px) { .skeleton-folder-grid { grid-template-columns: 1fr; } }

.skeleton-folder-card {
    height: 96px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    display: flex;
    align-items: center;
    padding: 14px;
    gap: 14px;
    overflow: hidden;
    position: relative;
}

.skeleton-folder-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.02) 40%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.02) 60%, transparent 100%);
    background-size: 300% 100%;
    animation: skeletonSweep 2s ease-in-out infinite;
}

.skeleton-folder-card:nth-child(2)::after { animation-delay: 0.12s; }

.skeleton-folder-card:nth-child(3)::after { animation-delay: 0.24s; }

.skeleton-folder-card:nth-child(4)::after { animation-delay: 0.08s; }

.skeleton-folder-card:nth-child(5)::after { animation-delay: 0.2s; }

.skeleton-folder-card .skel-icon { width: 28px; height: 28px; background: rgba(255,255,255,0.05); border-radius: 8px; flex-shrink: 0; }

.skeleton-folder-card .skel-name { height: 13px; background: rgba(255,255,255,0.05); border-radius: 4px; }

.skeleton-folder-card:nth-child(1) .skel-name { width: 45%; }

.skeleton-folder-card:nth-child(2) .skel-name { width: 60%; }

.skeleton-folder-card:nth-child(3) .skel-name { width: 35%; }

.skeleton-folder-card:nth-child(4) .skel-name { width: 55%; }

.skeleton-folder-card:nth-child(5) .skel-name { width: 40%; }

.skeleton-folder-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.skeleton-folder-list .skeleton-folder-card { height: 48px; }

/* KLIC DOCUMENT ICONS */
.klic-document-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.klic-document-icon .doc-main {
    font-size: 20px;
}

.klic-document-icon img.klic-graaf-icon {
    width: 20px;
    height: 25px;
    object-fit: contain;
    display: block;
}

/* Fix for icons in light mode */
body.light-mode .klic-document-icon {
    --color-brand: #FF5F1F;
}

.dashboard-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 16px;
}

@media (min-width: 1024px) {
    .dashboard-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: start;
        gap: 24px;
        padding: 32px;
        width: 100%;
    }
}

.dashboard-grid > div { position: relative; z-index: 1; }

.dashboard-grid > div:hover { 
    z-index: 10001; 
}

/* Lift card above all others when it has an active tooltip */
.card:has(.info-hover-container.active),
.card:has(.info-hover-container:hover),
.card-x:has(.info-hover-container.active),
.card-x:has(.info-hover-container:hover),
.detail-section-card:has(.info-hover-container.active),
.detail-section-card:has(.info-hover-container:hover),
.dashboard-grid > div:has(.info-hover-container.active),
.dashboard-grid > div:has(.info-hover-container:hover) { 
    z-index: 10002 !important; 
    overflow: visible !important;
}

.detail-section-card:has(.info-hover-container.active) .card-content,
.detail-section-card:has(.info-hover-container:hover) .card-content,
.detail-section-card:has(.info-hover-container.active) .detail-section-content,
.detail-section-card:has(.info-hover-container:hover) .detail-section-content {
    overflow: visible !important;
}

#workspace-pane.is-tiles .klic-document-icon {
    width: 72px;
    height: 72px;
}

#workspace-pane.is-tiles .klic-document-icon img.klic-graaf-icon {
    width: 56px;
    height: 70px;
}

#workspace-pane.is-tiles .klic-document-icon .doc-main {
    font-size: 34px;
}

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

/* Make settings pages less "cardy" (stacked sections, flatter look) */
.settings-shell .dashboard-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important; /* Dennis the Dev: More space between sections */
    padding: 0 !important;
}

/* Project detail skeleton - map placeholder, geen shimmer; DOM sluit aan op project_detail.html */
.project-detail-skeleton .map-preview-card.skel-map {
    background: var(--color-bg-alpha-05);
    background-image: none;
}
.project-detail-skeleton .map-preview-card.skel-map .map-canvas {
    align-self: stretch;
    min-height: 0;
    width: 100%;
}
.project-detail-skeleton .safety-notice-item { cursor: default; pointer-events: none; }
.project-detail-skeleton .collaborators-summary { cursor: default; pointer-events: none; }
.project-detail-skeleton .detail-title-status { display: inline-flex; align-items: center; }

.team-map-skeleton {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--color-bg-card);
    border-top: 1px solid var(--color-border);
    z-index: 5;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.team-map-skeleton.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.team-map-skeleton-header {
    display: flex;
    gap: 8px;
}

.team-map-skeleton-pill {
    height: 22px;
    width: 80px;
    border-radius: 999px;
    background: var(--color-bg-alpha-10);
}

.team-map-skeleton-body {
    flex: 1;
    border-radius: 16px;
    background: var(--color-bg-alpha-05);
}

.team-map-skeleton-footer {
    display: flex;
    gap: 8px;
}

.team-map-skeleton-chip {
    height: 18px;
    width: 120px;
    border-radius: 8px;
    background: var(--color-bg-alpha-10);
}

/* === PROJECT SKELETON: LIST VIEW === */
.skeleton-project-list { display: flex; flex-direction: column; width: 100%; }

.skeleton-project-row {
    height: 44px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    display: grid;
    grid-template-columns: 34px 34px 1fr 0.55fr 0.75fr 0.65fr 0.65fr 0.45fr 0.45fr 0.4fr 0.4fr 40px;
    gap: 8px;
    align-items: center;
    padding: 0 16px;
    position: relative;
    overflow: hidden;
}

.skeleton-project-row:nth-child(2)::after { animation-delay: 0.1s; }

.skeleton-project-row:nth-child(3)::after { animation-delay: 0.2s; }

.skeleton-project-row:nth-child(4)::after { animation-delay: 0.15s; }

.skeleton-project-row:nth-child(5)::after { animation-delay: 0.25s; }

.skeleton-project-row:nth-child(6)::after { animation-delay: 0.05s; }

.skeleton-project-row:nth-child(7)::after { animation-delay: 0.3s; }

.skeleton-project-row:nth-child(8)::after { animation-delay: 0.12s; }

.skeleton-project-row:nth-child(9)::after { animation-delay: 0.22s; }

.skeleton-project-row:nth-child(10)::after { animation-delay: 0.08s; }

.skeleton-project-row > div {
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
}

.skeleton-project-row .skel-warn  { width: 14px; height: 14px; border-radius: 50%; justify-self: center; }

.skeleton-project-row .skel-name  { height: 12px; width: 85%; }

.skeleton-project-row .skel-meld  { height: 10px; width: 70%; }

.skeleton-project-row .skel-addr  { height: 10px; width: 80%; }

.skeleton-project-row .skel-work  { height: 10px; width: 65%; }

.skeleton-project-row .skel-type  { height: 10px; width: 55%; }

.skeleton-project-row .skel-status { height: 18px; border-radius: 6px; width: 50px; }

.skeleton-project-row .skel-date  { height: 10px; width: 70px; }

.skeleton-project-row .skel-dot   { width: 4px; height: 14px; border-radius: 2px; justify-self: center; }

.skeleton-project-row:nth-child(odd) > div { opacity: 0.6; }

.skeleton-project-row:nth-child(1) .skel-name { width: 70%; }

.skeleton-project-row:nth-child(2) .skel-name { width: 90%; }

.skeleton-project-row:nth-child(3) .skel-name { width: 55%; }

.skeleton-project-row:nth-child(4) .skel-name { width: 80%; }

.skeleton-project-row:nth-child(5) .skel-addr { width: 60%; }

.skeleton-project-row:nth-child(6) .skel-addr { width: 90%; }

.skeleton-project-row:nth-child(7) .skel-name { width: 65%; }

.skeleton-project-row:nth-child(8) .skel-addr { width: 75%; }

@media (max-width: 1023px) {
    .skeleton-project-list {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px 16px;
    }
    .skeleton-project-row {
        display: flex !important;
        height: 72px !important;
        border-bottom: none !important;
        background: var(--color-bg-card);
        border: 1px solid var(--color-border);
        border-radius: 14px;
        padding: 14px !important;
        gap: 14px !important;
        align-items: center;
    }
    .skeleton-project-row .skel-warn  { width: 36px !important; height: 36px !important; border-radius: 10px !important; flex-shrink: 0; }
    .skeleton-project-row .skel-name  { flex: 1; width: auto !important; height: 13px !important; }
    .skeleton-project-row .skel-meld,
    .skeleton-project-row .skel-addr,
    .skeleton-project-row .skel-work,
    .skeleton-project-row .skel-type,
    .skeleton-project-row .skel-status,
    .skeleton-project-row .skel-date,
    .skeleton-project-row .skel-dot { display: none !important; }
}

/* === LOADING TILES - full-scale placeholders in same grid as real tiles === */
.list-item.loading-tile {
    pointer-events: none;
    opacity: 0.9;
}

.list-item.loading-tile .loading-tile-icon {
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
}

.list-item.loading-tile .loading-tile-bar {
    display: block;
    background: rgba(255,255,255,0.06);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

/* Subtiele shimmer - zelfde familie als .skel-block */
.list-item.loading-tile .loading-tile-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.07) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: skelSweep 1.6s ease-in-out infinite;
}

/* List view: kolommen gecentreerd + bars vullen cel */
.list-item.loading-tile .finder-col {
    display: flex;
    align-items: center;
    min-height: 22px;
    overflow: hidden;
}
.list-item.loading-tile .finder-col .loading-tile-bar {
    min-width: 0;
}
.list-item.loading-tile .finder-status-skel {
    gap: 6px;
    flex-wrap: nowrap;
}

/* Titelbreedte varieert per tegel - 3-koloms drive */
#workspace-project-items .list-item.loading-tile:nth-child(3n+1) .skel-title-line { max-width: 72%; }
#workspace-project-items .list-item.loading-tile:nth-child(3n+2) .skel-title-line { max-width: 88%; }
#workspace-project-items .list-item.loading-tile:nth-child(3n) .skel-title-line { max-width: 58%; }

/* Skeleton shimmer blocks */
.skel-block {
    background: rgba(255,255,255,0.07);
    position: relative;
    overflow: hidden;
}
.skel-block::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: skelSweep 1.6s ease-in-out infinite;
}
@keyframes skelSweep {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Skeleton icon wrapper matches tile-avatar-wrap (40×40, no box) */
.skel-icon-wrap {
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Workspace Search (Header) */
.workspace-search-wrap {
    margin-right: 8px;
    flex: 1;
    max-width: 320px;
    min-width: 200px;
}

@media (max-width: 1200px) {
    .workspace-search-wrap {
        max-width: 200px;
    }
}

.workspace-view-toggle {
    display: flex;
    gap: 0;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-bg-alpha-05);
    height: 34px;
    padding: 2px;
}

.workspace-view-toggle .workspace-view-btn {
    border: none !important;
    border-radius: 8px !important;
    width: 32px !important;
    height: 30px !important;
    font-size: 11px !important;
    background: transparent;
}

.workspace-view-toggle .workspace-view-btn.is-active {
    background: var(--color-bg-surface) !important;
    color: var(--color-brand) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}

/* DRIVE FILTERS BAR */
.inbox-filters-bar {
    padding: 0 20px 16px;
    background: transparent;
    border-bottom: none;
    position: relative;
    z-index: 100;
}

.filter-chips-scroll {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 1023px) {
    .filter-chips-scroll {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        margin-bottom: -4px;
        scrollbar-width: none; /* Firefox */
    }
    .filter-chips-scroll::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
    /* Dropdowns use position:fixed on mobile (set by JS) to escape overflow clipping */
    .filter-chip-group {
        overflow: visible;
    }
    .filter-dropdown.open {
        /* Fixed positioning is applied inline by JS on mobile; ensure it is always on top */
        z-index: 99999 !important;
    }
}

.filter-chip-group {
    position: relative;
    z-index: 10;
}

.filter-chip {
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-dim);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition:
        background-color 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
        gap 0.2s ease,
        padding 0.2s ease;
    height: 32px;
    flex-shrink: 0;
}

.filter-chip:hover {
    background: var(--color-bg-alpha-05);
    border-color: var(--color-text-dim);
    color: var(--color-text-main);
}

.filter-chip:active:not(.is-active) {
    transform: scale(0.97);
}

.filter-chip.is-active {
    background: var(--color-bg-alpha-10);
    border-color: var(--color-brand);
    color: var(--color-text-main);
    padding-right: 4px;
    cursor: default;
    gap: 4px;
    box-shadow: 0 0 0 1px rgba(204, 255, 0, 0.22);
}

.filter-chip.is-active span strong {
    color: var(--color-brand);
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .filter-chip:active {
        transform: none;
    }
}

.filter-chip i {
    font-size: 10px;
    opacity: 0.6;
}

.btn-filter-remove-inline {
    background: transparent;
    border: none;
    color: var(--color-text-dim);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 10px;
}

.btn-filter-remove-inline:hover {
    background: var(--color-bg-alpha-10);
    color: var(--color-text-main);
}

.filter-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    min-width: 180px;
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.filter-dropdown.open {
    display: block;
}

.filter-dropdown-item {
    padding: 10px 16px;
    font-size: 13px;
    color: var(--color-text-main);
    cursor: pointer;
    transition: background 0.2s;
}

.filter-dropdown-item:hover {
    background: var(--color-bg-alpha-05);
}

.filter-chip-active-pill {
    background: var(--color-bg-alpha-10);
    color: var(--color-text-main);
    border: 1px solid var(--color-brand);
    border-radius: 18px;
    display: flex;
    align-items: center;
    padding: 0 4px 0 12px;
    height: 32px;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

.btn-filter-remove {
    background: transparent;
    border: none;
    color: var(--color-text-dim);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-filter-remove:hover {
    background: var(--color-bg-alpha-10);
    color: var(--color-text-main);
}

.btn-filter-clear {
    background: transparent;
    border: none;
    color: var(--color-brand);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-filter-clear:hover {
    text-decoration: underline;
    background: var(--color-bg-alpha-05);
}

.workspace-backbar,
.workspace-breadcrumb-bar {
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 3000;
    background: var(--color-bg-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-lg) var(--dash-page-gutter-x);
    display: flex;
    align-items: center;
    min-height: 44px;
}

@media (max-width: 1023px) {
    .workspace-backbar,
    .workspace-breadcrumb-bar {
        position: fixed !important;
        /* Gebruik vaste 64px waarde voor maximale browser-compatibiliteit */
        top: calc(64px + env(safe-area-inset-top, 0px)) !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1999 !important;
    }
}

.workspace-backbar .workspace-breadcrumb {
    flex: 1;
    min-width: 0;
}

.workspace-folder-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#workspace-pane.is-tiles .workspace-folder-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1100px) {
    #workspace-pane.is-tiles .workspace-folder-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    #workspace-pane.is-tiles .workspace-folder-list {
        grid-template-columns: 1fr;
    }
}

.workspace-folder-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

#workspace-pane.is-tiles .workspace-folder-row {
    min-height: 96px;
    align-items: center;
}

.workspace-folder-row:hover {
    background: var(--color-bg-alpha-05);
    border-color: var(--color-brand);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* PLACEHOLDER CARD (New Folder) */
.workspace-folder-row.placeholder-card {
    background: transparent;
    border: 1px dashed var(--color-border);
    opacity: 0.6;
    transition: all 0.2s ease;
}

.workspace-folder-row.placeholder-card:hover {
    background: var(--color-bg-alpha-05);
    border-style: solid;
    border-color: var(--color-text-dim);
    opacity: 1;
}

.workspace-folder-row.placeholder-card .workspace-folder-left i {
    color: var(--color-text-dim);
}

.workspace-folder-row.placeholder-card:hover .workspace-folder-name,
.workspace-folder-row.placeholder-card:hover .workspace-folder-left i {
    color: var(--color-text-main);
}

/* PLACEHOLDER CARD (New Project) */
#workspace-pane.is-tiles .list-item.placeholder-card {
    background: transparent !important;
    border: 1px dashed var(--color-border) !important;
    opacity: 0.6;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
}

#workspace-pane.is-tiles .list-item.placeholder-card:hover {
    background: var(--color-bg-alpha-05) !important;
    border-style: solid !important;
    border-color: var(--color-text-dim) !important;
    opacity: 1;
}

#workspace-pane.is-tiles .list-item.placeholder-card .item-avatar i {
    color: var(--color-text-dim) !important;
}

#workspace-pane.is-tiles .list-item.placeholder-card .item-title {
    color: var(--color-text-dim) !important;
    font-weight: 500 !important;
}

#workspace-pane.is-tiles .list-item.placeholder-card:hover .item-title,
#workspace-pane.is-tiles .list-item.placeholder-card:hover .item-avatar i {
    color: var(--color-text-main) !important;
}

/* Hide project placeholder in list view for now to keep it clean (except on mobile) */
#workspace-pane:not(.is-tiles) .list-item.placeholder-card {
    display: none !important;
}

@media (max-width: 1023px) {
    #workspace-pane:not(.is-tiles) .list-item.placeholder-card {
        display: flex !important;
        margin-top: 8px !important;
        border: 1px dashed var(--color-border) !important;
        background: transparent !important;
        min-height: 60px !important;
        box-shadow: none !important;
    }

    #workspace-pane:not(.is-tiles) .list-item.placeholder-card .item-avatar {
        width: 32px !important;
        height: 32px !important;
        opacity: 0.5;
    }

    #workspace-pane:not(.is-tiles) .list-item.placeholder-card .item-title {
        font-size: 13px !important;
        font-weight: 500 !important;
        opacity: 0.6;
    }
}

.workspace-folder-row.is-pending {
    opacity: 0.7;
    border-style: dashed;
}

/* === LIST VIEW GRID - defined in dashboard_v2.css (after @import) === */
/* Grid templates, column visibility, and tile-view hiding are all
   in dashboard_v2.css so they win over this @import. */

.list-item.bulk-mode .item-main-finder .bulk-checkbox-wrapper {
    margin-right: 0 !important;
    justify-self: center;
    align-self: center;
}

.item-main-finder .finder-col {
    min-width: 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-main-finder .finder-col.finder-warn,
.item-main-finder .finder-col.finder-nalevering {
    white-space: normal;
    text-align: center;
    overflow: visible;
}

.item-main-finder .finder-name .title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.item-main-finder .finder-name .item-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-main-finder .finder-name .item-snippet {
    font-size: 12px;
    color: var(--color-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.item-main-finder .finder-city {
    font-size: 12px;
    color: var(--color-text-dim);
    /* Smalle kolom (iframe/embed): nowrap + ellipsis voorkomt breken per letter */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    overflow-wrap: normal;
}

.item-main-finder .finder-type {
    display: flex;
    align-items: center;
}

.item-main-finder .finder-type-text {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-main-finder .klic-pill {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: none;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-alpha-05);
    color: var(--color-text-dim);
    flex-shrink: 0;
}

.item-main-finder .warn-ico { color: #FF6B00; font-size: 12px; flex-shrink: 0; }

.item-main-finder .finder-status {
    display: flex;
    align-items: center;
    justify-self: start;
}

.item-main-finder .finder-address {
    font-size: 12px;
    color: var(--color-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
}

.item-main-finder .finder-meldnummer {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

.item-main-finder .finder-work {
    font-size: 12px;
    color: var(--color-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-main-finder .finder-warn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}

.item-main-finder .finder-actions {
    display: flex;
    justify-content: flex-end;
}

.item-main-finder .finder-status .status-badge {
    line-height: 1;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 6px;
    opacity: 0.8;
}

.item-main-finder .finder-requested,
.item-main-finder .finder-start,
.item-main-finder .finder-end,
.item-main-finder .finder-work {
    font-size: 12px;
    color: var(--color-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

/* Default: hide "cardy" elements in list view, show finder columns */
.item-main-finder .item-avatar,
.item-main-finder .item-content,
.item-main-finder .item-sub {
    display: none !important;
}

/* Tile View: show card layout, hide table columns */
#workspace-pane.is-tiles .item-main-finder {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important; /* Matched with folders */
    align-items: center !important;
    padding-right: 40px !important; /* Make room for the dots */
}

#workspace-pane.is-tiles .item-main-finder {
    /* Base reset for tile view */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

#workspace-pane.is-tiles .item-main-finder .item-avatar {
    display: flex !important;
    width: 44px;
    height: 44px;
    font-size: 30px;
    flex-shrink: 0;
    color: var(--color-text-dim);
    justify-content: center;
    align-items: center;
}

/* Modern tile selection (Google Photos / Apple style) */
#workspace-pane.is-tiles .list-item {
    position: relative;
}

@media (hover: hover) {
    #workspace-pane.is-tiles .list-item:hover .bulk-checkbox-wrapper {
        opacity: 1;
    }
}

#workspace-pane.is-tiles .list-item.is-selected .bulk-checkbox-wrapper {
    opacity: 1;
}

#workspace-pane.is-tiles .list-item.is-selected {
    outline: 2px solid rgba(255, 255, 255, 0.2);
    outline-offset: -2px;
    background: rgba(204, 255, 0, 0.04);
}

#workspace-pane.is-tiles .item-main-finder .item-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1;
    min-width: 0;
    gap: 10px !important;
    justify-content: center !important;
}

#workspace-pane.is-tiles .item-main-finder .item-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100%;
    margin: 0 !important;
    padding: 2px 0 0 !important;
    line-height: 1.3 !important;
}

#workspace-pane.is-tiles .item-main-finder .item-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

#workspace-pane.is-tiles .item-main-finder .item-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto;
}

#workspace-pane.is-tiles .item-main-finder .item-sub {
    display: block !important;
    font-size: 11px;
    color: var(--color-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.7;
    line-height: 1.2;
    margin: 0 !important;
    padding: 0 !important;
}

/* Add date after subtext */
#workspace-pane.is-tiles .item-main-finder .item-sub::after {
    content: attr(data-date);
    display: inline-block;
    margin-left: 8px;
    font-size: 10px;
    opacity: 0.6;
}

#workspace-pane.is-tiles .item-main-finder .item-meta .item-date {
    display: none !important; /* Move date/dots in tile view */
}

/* REMOVED GRID RULES */
#workspace-pane.is-tiles .item-main-finder .item-snippet {
    display: block !important;
    font-size: 11px;
    color: var(--color-text-dim);
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 1px 0 0;
    padding: 0;
    font-family: 'SF Mono', 'Roboto Mono', monospace;
    letter-spacing: 0.02em;
}

#workspace-pane.is-tiles .item-main-finder .finder-col {
    display: none !important;
}

/* Desktop tile view: adem tussen titelregel en meta */
#workspace-pane.is-tiles .item-main-finder .item-content {
    gap: 8px !important;
    justify-content: center !important;
}

#workspace-pane.is-tiles .item-main-finder .item-header-mobile {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
}

#workspace-pane.is-tiles .item-main-finder .item-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    overflow: hidden !important;
    min-height: 1.25em;
}

#workspace-pane.is-tiles .item-main-finder .item-meld-chip {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--color-text-dim) !important;
    opacity: 0.95 !important;
}
#workspace-pane.is-tiles .item-main-finder .item-meld-chip i {
    font-size: 11px !important;
    opacity: 0.9 !important;
    color: var(--color-text-dim) !important;
}

#workspace-pane.is-tiles .item-main-finder .item-sub-row {
    padding: 0 0 2px !important;
    margin-top: 0 !important;
    gap: 6px !important;
}
#workspace-pane.is-tiles .item-main-finder .tile-addr,
#workspace-pane.is-tiles .item-main-finder .tile-date {
    font-size: 12px !important;
    color: var(--color-text-dim) !important;
    font-weight: 500 !important;
}
#workspace-pane.is-tiles .item-main-finder .tile-sep {
    font-size: 10px !important;
    color: var(--color-text-dim) !important;
    opacity: 0.5 !important;
}

#workspace-pane.is-tiles .item-main-finder .item-meta-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

#workspace-pane.is-tiles .item-main-finder .item-city-compact,
#workspace-pane.is-tiles .item-main-finder .item-date-compact {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    color: var(--color-text-dim) !important;
    white-space: nowrap !important;
    opacity: 0.7;
}

#workspace-pane.is-tiles .item-main-finder .status-badge-compact {
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 5px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

#workspace-pane.is-tiles .item-main-finder .item-address-mobile {
    display: none !important;
}

#workspace-pane.is-tiles .item-main-finder .item-footer-mobile {
    display: none !important;
}

#workspace-pane.is-tiles .item-main-finder .item-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
    min-width: 0 !important;
}

#workspace-pane.is-tiles .item-main-finder .warn-ico {
    font-size: 11px !important;
    color: #FF6B00 !important;
    flex-shrink: 0 !important;
}

/* Trace melding badge - meerdere deelgebieden */
.trace-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 700;
    color: #6366f1;
    background: rgba(99, 102, 241, 0.10);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 5px;
    padding: 2px 6px;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0.03em;
}
.trace-badge i {
    font-size: 8px;
}
.trace-badge-list {
    margin-left: 6px;
    font-size: 8px;
}

/* Trace parts deelgebieden sectie in project detail */
.trace-parts-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.trace-part-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 7px;
}
.trace-part-index {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99,102,241,0.15);
    border: 1px solid rgba(99,102,241,0.3);
    border-radius: 50%;
}
.trace-part-num {
    font-size: 10px;
    font-weight: 800;
    color: #6366f1;
}
.trace-part-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.trace-part-meldnummer {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.trace-part-date {
    font-size: 10px;
    color: var(--color-text-dim);
}
.trace-part-status {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.trace-part-status-label {
    font-size: 11px;
    font-weight: 600;
}
.trace-progress-bar {
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 6px;
}
.trace-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #22c55e);
    border-radius: 2px;
    transition: width 0.4s ease;
}
.trace-progress-label {
    font-size: 10px;
    color: var(--color-text-dim);
    text-align: right;
}

/* EV pill - lijst: volledige term; elders compact “EV” */
.ev-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: none;
    color: #FF6B00;
    background: rgba(255, 107, 0, 0.13);
    border: 1px solid rgba(255, 107, 0, 0.38);
    border-radius: 4px;
    padding: 2px 5px;
    white-space: nowrap;
    line-height: 1;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(255, 107, 0, 0.22);
}

#workspace-project-items .finder-warn .ev-pill--list {
    max-width: 100%;
    min-width: 0;
    max-height: 3.6em;
    padding: 3px 5px;
    font-size: 8px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.02em;
    white-space: normal;
    text-align: center;
    text-transform: none;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    box-sizing: border-box;
}

/* Eis Voorzorg badge - tile: driehoek + “EIS” (compact) */
.eis-voorzorg-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-left: auto;
    flex-shrink: 0;
    font-size: 8px;
    font-weight: 900;
    color: #FF6B00;
    background: rgba(255, 107, 0, 0.13);
    border: 1px solid rgba(255, 107, 0, 0.38);
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0.04em;
    line-height: 1;
    box-shadow: 0 0 6px rgba(255, 107, 0, 0.22);
}
.eis-voorzorg-badge .fa-triangle-exclamation,
.eis-voorzorg-badge .fas.fa-triangle-exclamation {
    font-size: 7px;
    line-height: 1;
    flex-shrink: 0;
}
.eis-voorzorg-badge__txt {
    letter-spacing: 0.1em;
}

/* finder-warn: Eis Voorzorg aantal (lijst) */
.finder-col.finder-warn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    text-align: center;
    white-space: normal;
}

/* finder-nalevering: aantal documenten, rechts uitgelijnd onder kop “Nalevering” */
.finder-col.finder-nalevering {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    text-align: center;
    white-space: normal;
}
/* Eis Voorzorg + Nalevering: getallen in een omlijnd blokje (lijst) */
.finder-col.finder-nalevering .nalevering-count,
.finder-col.finder-warn .eis-voorzorg-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    padding: 3px 8px;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #b8c0cc;
}
.finder-col.finder-nalevering .nalevering-count.nalevering-count--on {
    color: #6eb0ff;
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.12);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.08);
}
.finder-col.finder-warn .eis-voorzorg-count.eis-voorzorg-count--on {
    color: #ff7a1a;
    border-color: rgba(255, 107, 0, 0.5);
    background: rgba(255, 107, 0, 0.1);
    box-shadow: 0 0 0 1px rgba(255, 107, 0, 0.06);
}

/* status: colored text only, no dot */
.item-main-finder .finder-status {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}
.item-main-finder .finder-status .status-dot { display: none !important; }
.item-main-finder .finder-status-label {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.finder-status-label.status-text-gereed   { color: #22c55e; }
.finder-status-label.status-text-ingediend { color: #f59e0b; }
.finder-status-label.status-text-draft    { color: #6b7280; }
.finder-status-label.status-text-mislukt,
.finder-status-label.status-text-afgekeurd,
.finder-status-label.status-text-error { color: #ef4444; }

.finder-status-label.status-text-geannuleerd { color: #6b7280; }
.finder-status-label                      { color: var(--color-text-dim); }

/* Drive-lijst: iets lichter dan standaard --color-text-dim (betere leesbaarheid) */
#workspace-pane:not(.is-tiles) #workspace-project-items .item-main-finder .finder-meldnummer,
#workspace-pane:not(.is-tiles) #workspace-project-items .item-main-finder .finder-city,
#workspace-pane:not(.is-tiles) #workspace-project-items .item-main-finder .finder-work,
#workspace-pane:not(.is-tiles) #workspace-project-items .item-main-finder .finder-type-text,
#workspace-pane:not(.is-tiles) #workspace-project-items .item-main-finder .finder-requested,
#workspace-pane:not(.is-tiles) #workspace-project-items .item-main-finder .finder-start,
#workspace-pane:not(.is-tiles) #workspace-project-items .item-main-finder .finder-end,
#workspace-pane:not(.is-tiles) #workspace-project-items .item-main-finder .finder-address,
#workspace-pane:not(.is-tiles) #workspace-project-items .item-main-finder .klic-pill {
    color: #c8ced8;
    opacity: 1;
}
#workspace-pane:not(.is-tiles) #workspace-project-items .item-main-finder .finder-meldnummer {
    opacity: 1;
}

/* Grid and column visibility is handled entirely in dashboard_v2.css */

/* Finder-like separators + compact hover (list view only) */
#workspace-pane:not(.is-tiles) #workspace-project-items .list-item {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    border-radius: 0;
}

@media (hover: hover) {
    #workspace-pane:not(.is-tiles) #workspace-project-items .list-item:hover {
        background: rgba(255,255,255,0.02);
    }
}

#workspace-pane:not(.is-tiles) #workspace-project-items .list-item.active {
    background: rgba(255,255,255,0.03);
}

@media (max-width: 1023px) {
    /* Mobile keeps the existing layout; hide finder header */
    .workspace-project-columns { display: none !important; }
    
    /* Ensure drive items are visible on mobile */
    .item-main-finder { 
        display: flex !important; 
        padding: 12px 14px !important; 
        gap: 12px !important; 
        width: 100% !important;
    }
    .item-main-finder .item-avatar,
    .item-main-finder .item-content,
    .item-main-finder .item-sub { 
        display: flex !important; 
    }
    .item-main-finder .finder-col { 
        display: none !important; 
    }

    /* Force list items to be visible on mobile regardless of view state */
    #workspace-pane #workspace-project-items .list-item {
        display: flex !important;
        min-height: auto !important;
        margin-bottom: 16px !important;
        border: 1px solid var(--color-border) !important;
        border-radius: 12px !important;
        background: var(--color-bg-card) !important;
        padding: 0 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
        overflow: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #workspace-pane #workspace-project-items .list-item .item-main {
        padding: 12px 14px !important;
        gap: 12px !important;
        align-items: center !important;
        overflow: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .item-avatar {
        width: 40px !important;
        height: 40px !important;
        background: var(--color-bg-alpha-05);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .klic-document-icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .klic-document-icon .doc-main {
        font-size: 22px !important;
    }

    .item-content {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }

    .item-header-mobile {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .item-title-row {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        overflow: hidden;
    }

    .item-title {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--color-text-main);
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
    }

    .folder-actions-btn-mobile {
        background: transparent;
        border: none;
        color: var(--color-text-dim);
        padding: 4px;
        font-size: 12px;
        opacity: 0.5;
    }

    .item-meta-row {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
        overflow: hidden;
        white-space: nowrap;
        margin-top: 2px;
    }

    .status-badge-compact {
        font-size: 10px;
        font-weight: 800;
        text-transform: none;
        padding: 2px 8px;
        border-radius: 5px;
        letter-spacing: 0.02em;
    }

    .status-badge-compact.status-gereed { background: rgba(34, 197, 94, 0.10); color: #22c55e; }
    .status-badge-compact.status-ingediend { background: rgba(59, 130, 246, 0.1); color: #3B82F6; }
    .status-badge-compact.status-in-behandeling { background: rgba(245, 158, 11, 0.1); color: #F59E0B; }
    .status-badge-compact.status-geannuleerd,
    .status-badge-compact.status-draft { background: rgba(107, 114, 128, 0.12); color: #6b7280; }

    .item-date-compact, .item-type-compact, .item-id-compact, .item-city-compact {
        font-size: 11px;
        color: var(--color-text-dim);
        opacity: 0.7;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .item-address-mobile {
        font-size: 12px;
        color: var(--color-text-dim);
        opacity: 0.7;
        line-height: 1.4;
        margin-top: 4px;
    }

    .item-footer-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(255,255,255,0.03);
        width: 100%;
    }

    .item-work-compact {
        font-size: 10px;
        font-weight: 600;
        color: var(--color-brand);
        opacity: 0.8;
        max-width: 60%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Adjust inbox header padding for mobile */
    .inbox-header {
        padding: 12px 16px !important;
        overflow: visible !important;
        min-height: auto !important;
    }

    .inbox-header-row,
    .workspace-toolbar-aligned {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        grid-template-columns: none !important;
    }

    .header-actions-right {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        margin-bottom: 0;
    }

    .workspace-search-wrap {
        flex: 1 !important;
        max-width: none !important;
        margin-right: 8px;
    }

    .header-folder-group {
        display: flex !important;
        gap: 6px !important;
    }

    .btn-icon-subtle {
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
        background: var(--color-bg-alpha-05) !important;
        font-size: 14px !important;
    }

    .mobile-hide { display: none !important; }

    /* Ensure filters bar is scrollable on mobile */
    .inbox-filters-bar {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        border-bottom: none !important;
        background: transparent !important;
    }

    /* Hide sidebar by default on mobile */
    .inbox-list-wrapper {
        display: none !important;
    }
    
    /* Hide redundant desktop elements on mobile */
    .header-actions .header-action-divider,
    .header-actions .workspace-view-toggle,
    .header-actions #projects-sidebar-toggle {
        display: none !important;
    }

    .workspace-search-wrap {
        flex: 1 !important;
        max-width: none !important;
    }
}

#workspace-pane.is-tiles #workspace-project-items .list-item {
    min-height: 96px; /* Match folders; drive default 3-col */
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    overflow: hidden;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    padding: 0 !important;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
    #workspace-pane.is-tiles #workspace-project-items .list-item:hover {
        background: var(--color-bg-alpha-05);
        border-color: var(--color-brand);
        box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    }
}

#workspace-pane.is-tiles #workspace-project-items .list-item .item-main {
    width: 100%;
    height: 100%;
    display: flex !important;
    align-items: center !important;
    padding: 14px 16px !important;
    gap: 12px !important;
}

#workspace-pane.is-tiles #workspace-project-items .list-item .item-details {
    display: none !important;
}

.workspace-breadcrumb {
    position: relative; /* Dennis the Dev: Back to relative to stay in flow and push content down */
    display: flex !important;
    align-items: center;
    gap: 4px;
    font-size: 14px; /* Dennis the Dev: Unified size for smooth transition */
    font-weight: 500;
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: visible;
    margin-bottom: 0; /* Dennis the Dev: Header handles margin */
    min-height: 32px;
    z-index: 10;
}

.workspace-breadcrumb .crumb {
    opacity: 0.6;
    transition: all 0.2s;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.workspace-breadcrumb .crumb.is-link {
    color: var(--color-text-main);
}

.workspace-breadcrumb .crumb.is-link:hover {
    opacity: 1;
    background: var(--color-bg-alpha-10);
}

.workspace-breadcrumb .crumb.is-current {
    opacity: 1;
    font-weight: 600;
    color: var(--color-text-main);
    cursor: default;
}

.workspace-breadcrumb .sep {
    opacity: 0.3;
    font-size: 16px;
    margin: 0 4px;
}

.workspace-breadcrumb .crumb {
    opacity: 0.8;
}

.workspace-breadcrumb .crumb.is-link {
    cursor: pointer;
    pointer-events: auto !important;
    display: inline-flex;
    align-items: center;
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: 4px;
    transition: all 0.2s;
}

.workspace-breadcrumb .crumb.is-link:hover {
    opacity: 1;
    color: var(--color-brand) !important;
    background: var(--color-bg-alpha-05);
    text-decoration: none;
}

.workspace-breadcrumb .crumb.is-current {
    opacity: 1;
    color: var(--color-text-main);
    font-weight: 700;
}

.workspace-breadcrumb .sep {
    opacity: 0.5;
}

/* selection + dnd - geen neon-rand; leesbaar op donker */
.list-item.is-selected {
    outline: 2px solid rgba(255, 255, 255, 0.22);
    outline-offset: 2px;
}

.list-item:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.3);
    outline-offset: 2px;
}

.search-input {
    background: none;
    border: none;
    color: var(--color-text-main);
    font-size: 13px;
    flex: 1;
    outline: none;
    width: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-family: inherit;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.search-bar.active .search-input { width: 100%; opacity: 1; }

/* LIST VIEW */
.inbox-list { 
    display: flex;
    flex-direction: column;
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 1024px) {
    .inbox-list {
        flex: 1; 
    }
}

.list-item { 
    border-bottom: 1px solid var(--color-border); 
    cursor: pointer; 
    transition: background 0.2s; 
    position: relative; 
    background: transparent;
}

@media (hover: hover) { .list-item:hover { background: rgba(255,255,255,0.01); } }

.list-item.active { 
    background: var(--color-bg-card); 
    box-shadow: inset 2px 0 0 0 var(--color-brand);
}

.list-item.filtered-out {
    display: none;
}

/* Mobile/tile rules use `display: flex !important` on #workspace-project-items .list-item;
   without this, client-side search cannot hide non-matching cards. */
#workspace-pane #workspace-project-items .list-item.filtered-out {
    display: none !important;
}

.item-main { display: flex; padding: 20px var(--dash-page-gutter-x); gap: 20px; align-items: center; }

.item-avatar { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; transition: transform 0.2s; }

@media (hover: hover) { .list-item:hover .item-avatar { transform: scale(1.05); } }

.item-title { font-size: 15px; font-weight: 700; color: var(--color-text-main); line-height: 1.3; margin-bottom: 2px; }

.item-title span.start-date { font-size: 10px; color: var(--color-text-muted); font-weight: 500; margin-left: 6px; white-space: nowrap; background: var(--color-bg-alpha-05); padding: 2px 6px; border-radius: 4px; }

.item-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; margin-left: 12px; }

.item-date { font-size: 9px; font-weight: 600; color: var(--color-text-dim); white-space: nowrap; text-transform: none; letter-spacing: 0.5px; }

.item-snippet { font-size: 13px; font-weight: 400; color: var(--color-text-dim); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.item-sub { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.8; }

.item-meldnummer {
    font-family: 'SF Mono', 'Roboto Mono', 'Fira Code', monospace;
    font-weight: 600;
    color: var(--color-text-dim);
    letter-spacing: 0.04em;
    font-size: 11px;
}

.item-meldnummer-inline {
    font-family: 'SF Mono', 'Roboto Mono', 'Fira Code', monospace;
    font-weight: 500;
    color: var(--color-text-dim);
    letter-spacing: 0.03em;
    font-size: 0.85em;
    opacity: 0.85;
}

.list-item.active .item-details { max-height: 2000px; border-bottom: 1px solid var(--color-surface-hover); overflow: visible !important; }

@media (min-width: 1024px) {
    .list-item.active .item-details { max-height: 0; border-bottom: none; overflow: hidden !important; visibility: hidden; }
    .list-item.active { background-color: rgba(255, 255, 255, 0.05); border-left: 2px solid var(--color-brand); }
    .list-item { border-left: 2px solid transparent; transition: all 0.2s; }
}

/* PERMISSION TOGGLES */
.permission-row {  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.03); }

.permission-row:last-child { border-bottom: none; }

/* USER DROPDOWN */
.user-dropdown { position: relative; }

.user-trigger { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 8px; border-radius: 12px; transition: all 0.2s; border: none; background: transparent; }

.user-trigger:hover { background: var(--color-bg-alpha-05); }

.user-avatar-small { width: 32px; height: 32px; background: var(--color-bg-alpha-05); border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--color-border); flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--color-brand); position: relative; z-index: 10; }

.user-avatar-small img { width: 100%; height: 100%; object-fit: cover; }

.user-avatar-small--photo { background: #0a0a0a; }

/* Standaard: zwarte cirkel + geel helm-icoon (i.p.v. ui-avatars) */
.user-avatar-helm-default {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0a0a;
    color: var(--color-brand);
    font-size: 14px;
    line-height: 1;
}

/* Alleen helm-icoon, geen cirkel/ring (topbar + mobiel) */
.user-avatar-small.user-avatar-small--helm-icon {
    width: auto;
    min-width: 0;
    height: 32px;
    padding: 0;
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}

.user-avatar-small--helm-icon .user-avatar-helm-default {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    background: transparent;
    color: var(--color-brand);
}

.user-avatar-small--helm-icon .user-avatar-helm-default i {
    font-size: 16px;
    display: block;
    line-height: 1;
}

.user-avatar-small--helm-icon.user-avatar-small--header {
    height: 40px;
}

.user-avatar-small--helm-icon.user-avatar-small--header .user-avatar-helm-default i {
    font-size: 20px;
}

body.light-mode .user-avatar-small.user-avatar-small--helm-icon {
    background: transparent !important;
    border: none !important;
}

body.light-mode .user-avatar-small--helm-icon .user-avatar-helm-default,
body.light-mode .user-avatar-small--helm-icon .user-avatar-helm-default i {
    color: var(--color-brand) !important;
}

.user-avatar-small .user-avatar-helm-default {
    font-size: 13px;
}

/* Grotere avatar in mobiel account-paneel */
.user-avatar-small--header {
    width: 40px;
    height: 40px;
    font-size: 14px;
}

.user-info-mini { display: none; flex-direction: column; text-align: left; }

@media (min-width: 600px) { .user-info-mini { display: flex; } }

.user-name-mini { font-size: 12px; font-weight: 700; color: var(--color-text-main); line-height: 1.2; }

/* TEAM MANAGEMENT — data table (SaaS-style, sentence-case headers) */
.team-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.team-table thead {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.01) 100%);
}

body.light-mode .team-table thead {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0) 100%);
}

.team-table th {
    padding: 12px 20px 11px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-dim);
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.01em;
    line-height: 1.35;
    vertical-align: bottom;
}

.team-table td {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: middle;
    transition: background 0.15s ease;
}

body.light-mode .team-table td {
    border-bottom-color: var(--color-border);
}

.team-table tr:last-child td {
    border-bottom: none;
}

.team-member-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

.team-member-row:hover {
    background: rgba(204, 255, 0, 0.02);
}

.team-member-row:hover .btn-precision-small {
    background: rgba(204, 255, 0, 0.08);
    border-color: rgba(204, 255, 0, 0.15);
}

.team-member-row:hover .btn-precision-small i {
    opacity: 1;
    color: var(--color-brand);
}

/* Inline member accordion */
.team-member-row.is-expanded {
    background: rgba(204, 255, 0, 0.03);
}

.team-member-row.is-expanded td {
    border-bottom-color: transparent;
}

.team-member-expand-row td {
    padding: 0 20px 20px 20px;
    border-bottom: 1px solid var(--color-border);
}

.team-member-accordion {
    border: 1px solid rgba(204, 255, 0, 0.08);
    background: linear-gradient(135deg, rgba(204, 255, 0, 0.02) 0%, rgba(0,0,0,0.15) 100%);
    border-radius: 16px;
    padding: 20px;
    animation: teamAccordionIn 0.2s ease;
}

.team-member-accordion-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    cursor: pointer;
}

.team-member-accordion-head:hover {
    filter: brightness(0.98);
}

.team-member-accordion-head:active {
    transform: translateY(1px);
}

.team-member-accordion-identity {
    display: flex;
    align-items: center;
    gap: 14px;
}

.team-member-accordion-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.team-member-accordion-section {
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 14px;
    padding: 16px;
    background: rgba(0,0,0,0.15);
}

.team-inline-project-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.04);
    background: rgba(0,0,0,0.10);
    transition: all 0.15s ease;
}

.team-inline-project-row:hover {
    background: rgba(255,255,255,0.03);
    border-color: var(--color-border);
}

.team-member-accordion-actions {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.04);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

@media (max-width: 1023px) {
    .team-member-accordion-grid {
        grid-template-columns: 1fr;
    }
    .team-member-expand-row td {
        padding: 0 12px 16px 12px;
    }
}

/* Light mode: inline accordion cards */
body.light-mode .team-member-accordion {
    background: linear-gradient(135deg, rgba(204, 255, 0, 0.02) 0%, var(--color-bg-card) 100%) !important;
    border-color: var(--color-border) !important;
}

.search-input-wrapper {
    position: relative;
    flex: 1;
}

.search-input-wrapper i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: 13px;
    transition: color 0.2s;
}

.search-input-wrapper:focus-within i {
    color: var(--color-brand);
}

.search-input-wrapper input {
    width: 100%;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 11px 14px 11px 40px;
    color: var(--color-text-main);
    font-size: 13px;
    outline: none;
    transition: all 0.2s ease;
}

.search-input-wrapper input:focus {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(204, 255, 0, 0.06);
}

.search-input-wrapper input::placeholder {
    color: var(--color-text-muted);
    font-size: 12px;
}

/* Role badges - distinct visual hierarchy */
.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.03em;
    border: 1px solid transparent;
    white-space: nowrap;
}

.role-badge.owner {
    background: rgba(204, 255, 0, 0.12);
    color: var(--color-brand);
    border-color: rgba(204, 255, 0, 0.2);
}

.role-badge.admin {
    background: rgba(204, 255, 0, 0.06);
    color: var(--color-brand);
    border-color: rgba(204, 255, 0, 0.12);
}

.role-badge.co_owner {
    background: rgba(204, 255, 0, 0.06);
    color: var(--color-brand);
    border-color: rgba(204, 255, 0, 0.12);
}

.role-badge.member,
.role-badge.editor {
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-dim);
    border-color: rgba(255, 255, 255, 0.08);
}

.role-badge.safety {
    background: rgba(0, 200, 255, 0.08);
    color: #00c8ff;
    border-color: rgba(0, 200, 255, 0.15);
}

.role-badge.viewer {
    background: rgba(100, 180, 255, 0.06);
    color: #64b4ff;
    border-color: rgba(100, 180, 255, 0.12);
}

/* Subtabs - segmented control */
.team-subtabs {
    display: flex;
    gap: 4px;
    margin: 4px 0 20px;
    padding: 4px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: rgba(255,255,255,0.015);
    width: fit-content;
}

/* Subtabs + leden-werkbalk (zoek | seats+knop | rol) - één visuele sectie */
.team-toolbar-combined {
    margin: 0 0 4px;
}

.team-toolbar-combined .team-subtabs {
    margin: 4px 0 10px;
}

/* Werkbalk: zoek | rolfilter | actie (Nieuw lid) */
.team-leden-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    width: 100%;
    margin: 0 0 8px;
}

.team-leden-toolbar__search {
    flex: 1 1 200px;
    min-width: 0;
    max-width: min(380px, 100%);
}

.team-leden-toolbar__search .search-input-wrapper,
.team-leden-toolbar__search .team-search-input {
    flex: 0 1 auto;
    width: 100%;
    max-width: 100%;
}

.team-leden-toolbar__role {
    flex: 0 0 auto;
    width: auto;
    min-width: 10.5rem;
    max-width: 200px;
}

.team-leden-toolbar__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

#view-team .team-leden-toolbar__role select.team-role-select,
#view-team .team-leden-toolbar__role select.form-input-chic {
    width: 100%;
    min-height: 42px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 14px;
    /* Native pijl: rechter inset = platform-token */
    padding-inline-end: var(--select-native-pad-r, 5rem) !important;
    -webkit-padding-end: var(--select-native-pad-r, 5rem) !important;
    box-sizing: border-box;
}

.team-subtab {
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    background: transparent;
    color: var(--color-text-dim);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: all 0.18s ease;
    position: relative;
}

.team-subtab i {
    font-size: 11px;
    opacity: 0.7;
}

.team-subtab:hover {
    background: rgba(255,255,255,0.04);
    color: var(--color-text-main);
}

.team-subtab.is-active {
    background: rgba(204, 255, 0, 0.10);
    color: var(--color-brand);
    box-shadow: 0 0 0 1px rgba(204, 255, 0, 0.14) inset;
}

.team-subtab.is-active i {
    opacity: 1;
}

.team-tab-pill {
    margin-left: 2px;
    font-size: 9px;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--color-brand);
    color: #000;
    min-width: 20px;
    text-align: center;
}

/* Approvals list - pro cards */
.team-approvals-list {
    padding: 20px;
    display: grid;
    gap: 10px;
}

.team-approval-item {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-bg-alpha-02);
    transition: all 0.15s ease;
}

.team-approval-item:hover {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
}

.team-approval-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--color-text-main);
}

.team-approval-sub {
    font-size: 11px;
    color: var(--color-text-dim);
    margin-top: 4px;
}

.team-approval-meta {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.team-status-pill.status-pending,
.team-approval-item[data-status="pending_approval"] .team-status-pill {
    background: rgba(255, 200, 0, 0.08);
    color: #FFD000;
    border-color: rgba(255, 200, 0, 0.15);
}

.team-approval-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* Team access tree - compact hierarchy */
.team-access-tree {
    padding: 12px 16px;
    display: grid;
    gap: 2px;
}

.team-access-project-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-main);
}

@media (max-width: 1023px) {
    .team-subtabs { width: 100%; }
    .team-subtab { flex: 1; justify-content: center; padding: 10px 12px; font-size: 11px; }
    .team-leden-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .team-leden-toolbar__search { max-width: none; }
    .team-leden-toolbar__role { max-width: none; width: 100%; }
    .team-leden-toolbar__actions { width: 100%; justify-content: stretch; }
    .team-leden-toolbar__actions .team-add-btn { width: 100%; justify-content: center; }
    .team-approval-item { flex-direction: column; }
    .team-approval-actions { justify-content: flex-start; }
    .team-access-node.is-child { margin-left: 14px; }
    .team-access-node.is-child::before { display: none; }
    .team-access-actions { opacity: 1; }
}

.user-identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar-role {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, rgba(204, 255, 0, 0.06), rgba(255,255,255,0.03));
    border: 1px solid rgba(204, 255, 0, 0.08);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-dim);
    flex-shrink: 0;
    font-size: 13px;
    transition: all 0.15s ease;
}

.team-member-row:hover .user-avatar-role {
    border-color: rgba(204, 255, 0, 0.15);
    background: linear-gradient(135deg, rgba(204, 255, 0, 0.1), rgba(255,255,255,0.04));
}

@media (max-width: 1023px) {
    .team-table thead { display: none; }
    .team-table td { display: block; padding: 10px 20px; border: none; }
    .team-table tr.team-member-row { display: block; border-bottom: 1px solid var(--color-border); padding: 8px 0; }
    .permission-grid-pro { grid-template-columns: 1fr; }
}

.empty-state {
    padding: 60px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.empty-state-icon {
    width: 64px;
    height: 64px;
    background: var(--color-bg-alpha-05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: var(--color-brand);
    font-size: 28px;
    opacity: 0.6;
}

.empty-state-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.empty-state-desc {
    font-size: 13px;
    color: var(--color-text-dim);
    max-width: 320px;
    line-height: 1.6;
    margin: 0 auto 24px;
}

.empty-state-action {
    display: inline-flex;
    gap: 12px;
}

.team-list-card {
    padding: 0;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 14px);
    min-height: 500px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Teamlid detail - compact, aligned met facturatie / ksh-x-card (data-dicht) ── */
#team-member-detail.member-detail-root {
    padding: 0 0 32px;
    box-sizing: border-box;
    animation: memberDetailIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes memberDetailIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

#team-member-detail .member-detail-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--dash-page-gutter-x);
    box-sizing: border-box;
}

#team-member-detail .member-detail-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md, 11px);
    flex-wrap: wrap;
    padding: 8px 0 14px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 16px;
    background: transparent;
}

#team-member-detail .member-detail-breadcrumb {
    min-width: 0;
    flex: 1;
    font-size: var(--text-caption);
    font-weight: 500;
    color: var(--color-text-dim);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 0;
}

#team-member-detail .member-detail-breadcrumb .sep {
    opacity: 0.4;
    font-weight: 400;
    margin: 0 6px;
    user-select: none;
    color: var(--color-text-muted);
}

#team-member-detail .member-detail-breadcrumb .crumb.is-current {
    font-weight: 600;
    color: var(--color-text-main);
    max-width: min(48vw, 400px);
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}

#team-member-detail button.member-detail-crumb-back {
    margin: 0;
    padding: 6px 10px 6px 7px;
    background: var(--color-bg-alpha-02);
    border: 1px solid var(--color-border);
    font: inherit;
    color: var(--color-text-main);
    cursor: pointer;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

#team-member-detail button.member-detail-crumb-back i {
    font-size: 12px;
    opacity: 0.75;
}

#team-member-detail button.member-detail-crumb-back:hover {
    background: var(--color-bg-alpha-05);
    border-color: var(--color-border-hover);
}
#team-member-detail button.member-detail-crumb-back:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

#team-member-detail .member-detail-topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

#team-member-detail .member-detail-save-indicator {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    min-height: 1.2em;
}

#team-member-detail .member-detail-btn-danger {
    font-size: 12px;
    font-weight: 600;
    min-height: 34px;
    padding: 0 12px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-dim);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#team-member-detail .member-detail-btn-danger i { font-size: 13px; opacity: 0.85; }

#team-member-detail .member-detail-btn-danger:hover {
    border-color: rgba(239, 68, 68, 0.4);
    color: var(--color-error);
    background: var(--color-bg-card);
}

#team-member-detail .member-detail-btn-save {
    font-size: 12px;
    font-weight: 700;
    min-height: 34px;
    padding: 0 14px;
    background: var(--color-brand);
    border: none;
    border-radius: 8px;
    color: #0a0a0a;
    cursor: pointer;
    letter-spacing: 0.01em;
    box-shadow: none;
    transition: filter var(--transition-fast), transform 0.1s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#team-member-detail .member-detail-btn-save i { font-size: 12px; }

#team-member-detail .member-detail-btn-save:hover { filter: brightness(1.06); }
#team-member-detail .member-detail-btn-save:active { transform: translateY(1px); }
#team-member-detail .member-detail-btn-danger:focus-visible,
#team-member-detail .member-detail-btn-save:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

body.light-mode #team-member-detail .member-detail-btn-save { color: #fff; }

/* Hero: profiel + metriek-rij */
#team-member-detail .member-detail-hero {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 1px 0 var(--color-bg-alpha-02) inset;
    margin-bottom: 16px;
}

#team-member-detail .member-detail-hero-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

#team-member-detail .member-detail-avatar {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    flex-shrink: 0;
    box-shadow: none;
}
body:not(.light-mode) #team-member-detail .member-detail-avatar {
    box-shadow: none;
}

#team-member-detail .member-detail-profile-info {
    flex: 1;
    min-width: 0;
}

#team-member-detail .member-detail-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 0 0 10px 0;
    min-width: 0;
}

#team-member-detail .member-detail-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-main);
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.25;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#team-member-detail .member-detail-role-select {
    display: none;
    max-width: min(220px, 100%);
    flex: 0 1 auto;
    margin-top: 0;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: rgba(0, 0, 0, 0.35);
    color: var(--color-text-main);
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    outline: none;
}
#team-member-detail .member-detail-role-select:focus {
    border-color: rgba(204, 255, 0, 0.35);
}
body.light-mode #team-member-detail .member-detail-role-select {
    background-color: var(--color-bg-surface);
    border-color: var(--color-border);
    color: var(--color-text-main);
}
#team-member-detail .member-detail-contact-email {
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
}
#team-member-detail .member-detail-email-input {
    display: none;
    flex: 0 1 auto;
    width: auto;
    min-width: 11rem;
    max-width: min(300px, 100%);
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.35);
    color: var(--color-text-main);
    font-size: 13px;
    font-family: inherit;
    outline: none;
}
#team-member-detail .member-detail-email-input::placeholder {
    color: var(--color-text-muted);
}
#team-member-detail .member-detail-email-input:focus {
    border-color: rgba(204, 255, 0, 0.35);
}
body.light-mode #team-member-detail .member-detail-email-input {
    background: var(--color-bg-surface);
    border-color: var(--color-border);
}
#team-member-detail .member-detail-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 0;
    flex: 0 1 auto;
    min-width: 0;
}

#team-member-detail .member-detail-meta .role-badge {
    padding: 2px 8px;
    font-size: 10px;
    border-radius: 5px;
    flex-shrink: 0;
}

#team-member-detail .member-detail-contact {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#team-member-detail .member-detail-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-caption);
    color: var(--color-text-dim);
}

#team-member-detail .member-detail-contact-item > i {
    width: 16px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 12px;
    opacity: 0.9;
}

#team-member-detail .member-detail-phone,
#team-member-detail .member-detail-email {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-main);
    font-weight: 500;
}

#team-member-detail .member-detail-email:empty { opacity: 0.45; }

/* Metrieken */
#team-member-detail .member-detail-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
@media (max-width: 700px) {
    #team-member-detail .member-detail-metrics {
        grid-template-columns: 1fr;
    }
}

#team-member-detail .member-detail-metric {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    min-width: 0;
}

#team-member-detail .member-detail-metric-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-alpha-02);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    flex-shrink: 0;
    font-size: 13px;
}
body:not(.light-mode) #team-member-detail .member-detail-metric-icon {
    color: var(--color-text-dim);
}

#team-member-detail .member-detail-metric-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

#team-member-detail .member-detail-metric-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-main);
    letter-spacing: -0.01em;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#team-member-detail .member-detail-metric-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Grid + cards */
#team-member-detail .member-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0;
}

#team-member-detail .member-detail-section.member-detail-card,
#team-member-detail .member-detail-section {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 1px 0 var(--color-bg-alpha-02) inset;
    overflow: hidden;
}

#team-member-detail .member-detail-section-head {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    padding: 12px 18px 10px;
    border-bottom: none;
    background: transparent;
}

#team-member-detail .member-detail-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-main);
    letter-spacing: 0.02em;
    margin: 0;
    flex: 0 1 auto;
}

#team-member-detail .member-detail-section-lead {
    font-size: 11px;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.35;
    font-weight: 500;
    flex: 1 1 120px;
    min-width: 0;
}

#team-member-detail .member-detail-section-lead::before {
    content: '·';
    margin-right: 8px;
    font-weight: 700;
    color: var(--color-text-dim);
    opacity: 0.45;
}

#team-member-detail .member-detail-section-wide {
    grid-column: 1 / -1;
}

#team-member-detail .member-detail-field-list {
    padding: 4px 0;
}

#team-member-detail .member-detail-field {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 9px 18px;
    border-bottom: 1px solid var(--color-border);
}
#team-member-detail .member-detail-field:last-child { border-bottom: none; }

#team-member-detail .member-detail-field label {
    font-size: var(--text-caption);
    font-weight: 500;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

#team-member-detail .member-detail-field span {
    font-size: var(--text-body);
    font-weight: 500;
    color: var(--color-text-main);
    text-align: right;
    line-height: 1.4;
}

#team-member-detail .member-detail-hint {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 8px);
    font-size: 11px;
    color: var(--color-text-dim);
    margin: 0 18px 10px;
    padding: 8px 12px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

#team-member-detail .member-detail-perm-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 0 4px;
}

#team-member-detail .perm-desc {
    color: var(--color-text-muted);
    font-size: 11px;
    line-height: 1.35;
    font-weight: 500;
}

#team-member-detail .member-detail-perm-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 10px 18px;
    border-radius: 0;
    cursor: pointer;
    transition: background var(--transition-fast);
    border: none;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
}

#team-member-detail .member-detail-perm-row:hover {
    background: var(--color-bg-alpha-02);
}

#team-member-detail .member-detail-perm-row:last-child {
    border-bottom: none;
}

#team-member-detail .perm-checkbox-custom {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

#team-member-detail .perm-checkbox:checked + .perm-checkbox-custom::after {
    width: 4px;
    height: 7px;
    border-width: 0 1.5px 1.5px 0;
    margin-bottom: 1px;
}

#team-member-detail .member-detail-perm-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#team-member-detail .perm-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-main);
}

#team-member-detail .member-detail-projects {
    min-height: 80px;
    padding: 0 0 8px;
}

#team-member-detail .member-detail-projects-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 18px 20px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 11px;
    line-height: 1.45;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}
#team-member-detail .member-detail-projects-empty i {
    font-size: 22px;
    opacity: 0.25;
    color: var(--color-text-dim);
}
#team-member-detail .member-detail-projects-empty span {
    max-width: 300px;
    font-weight: 500;
}

#team-member-detail .member-detail-project-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 18px;
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition-fast);
}
#team-member-detail .member-detail-project-row:hover {
    background: var(--color-bg-surface);
}
#team-member-detail .member-detail-project-row:last-child { border-bottom: none; }

#team-member-detail .member-detail-project-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-caption);
    color: var(--color-text-main);
    font-weight: 500;
    min-width: 0;
}
#team-member-detail .member-detail-project-left span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#team-member-detail .member-detail-project-left i {
    font-size: 12px;
    color: var(--color-brand);
    flex-shrink: 0;
    opacity: 0.9;
}
body.light-mode #team-member-detail .member-detail-project-left i { color: var(--color-brand); }

#team-member-detail .member-detail-project-status {
    font-size: var(--text-badge);
    color: var(--color-text-dim);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    margin-left: 12px;
}

@media (max-width: 1023px) {
    #team-member-detail .member-detail-hero { padding: 14px 16px; }
    #team-member-detail .member-detail-hero-main { flex-direction: row; }
    #team-member-detail .member-detail-grid {
        grid-template-columns: 1fr;
    }
    #team-member-detail .member-detail-topbar {
        flex-direction: column;
        align-items: stretch;
    }
    #team-member-detail .member-detail-topbar-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
    }
}

.folder-inspector-member-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--color-bg-alpha-05);
    border-radius: 12px;
    padding: 10px 10px;
    background: rgba(0,0,0,0.10);
}

.folder-inspector-member-meta {
    min-width: 0;
}

.super-search-input {
    width: 100%;
    background: var(--color-bg-deep);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0;
    color: var(--color-text-main);
    font-size: 13px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    height: 38px;
    outline: none;
    opacity: 0;
    pointer-events: none;
}

.super-search-wrapper.is-expanded .super-search-input {
    padding: 0 44px 0 40px;
    opacity: 1;
    pointer-events: auto;
}

.super-search-input:focus {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 4px rgba(204, 255, 0, 0.05);
}

#workspace-pane.is-tiles .item-title {
    display: flex;
    align-items: center;
}

/* Tile view: colored left border as status indicator */
#workspace-pane.is-tiles .list-item {
    border-left: 3px solid transparent;
}

#workspace-pane.is-tiles .list-item[data-status="gereed"] {
    border-left-color: #22c55e;
}

#workspace-pane.is-tiles .list-item[data-status="ingediend"],
#workspace-pane.is-tiles .list-item[data-status="in behandeling"] {
    border-left-color: #f59e0b;
}

#workspace-pane.is-tiles .list-item[data-status="mislukt"],
#workspace-pane.is-tiles .list-item[data-status="afgekeurd"],
#workspace-pane.is-tiles .list-item[data-status="error"] {
    border-left-color: #ef4444;
}

/* Team table card (legacy compat) */
.team-table-card,
.team-list-card {
    padding: 0;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 14px);
    min-height: 500px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.team-table-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-card);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

.team-table-scroll-wrap {
    flex: 1;
    overflow-x: auto;
}

.user-identity-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.team-member-row .btn-precision-small i {
    transition: transform 0.2s ease, opacity 0.15s ease, color 0.15s ease;
}

.team-member-row.is-expanded .btn-precision-small {
    background: rgba(204, 255, 0, 0.08);
    border-color: rgba(204, 255, 0, 0.12);
}

.team-member-row.is-expanded .btn-precision-small i {
    color: var(--color-brand);
    opacity: 1;
}

.detail-meldnummer {
    font-family: 'SF Mono', 'Roboto Mono', 'Fira Code', monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-dim);
    letter-spacing: 0.05em;
    background: var(--color-bg-alpha-05, rgba(255,255,255,.05));
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 3px 10px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* MEMBER FILTER DROPDOWN ENHANCEMENTS */
.filter-dropdown-member {
    min-width: 320px !important;
    max-height: 480px;
    display: none;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden !important; /* Changed back to hidden for sliding effect */
    position: absolute;
}

.filter-dropdown-member.open {
    display: flex;
}

.member-filter-search-input {
    width: 100%;
    background: var(--color-bg-alpha-05);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 12px 10px 36px;
    color: var(--color-text-main);
    font-size: 14px;
    outline: none;
    transition: all 0.2s;
}

.member-filter-search-input:focus {
    border-color: var(--color-brand);
    background: var(--color-bg-surface);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.member-item,
.member-role-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    gap: 12px;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
}

.member-item:hover,
.member-role-item:hover {
    background: var(--color-bg-alpha-05);
}

#workspace-folder-view .inbox-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-bg-surface);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 16px;
}

@media (max-width: 1023px) {
    /* Fixed toolbar directly below the fixed breadcrumb bar (topbar 64px + breadcrumb 48px = 112px) */
    #workspace-folder-view .inbox-header {
        position: fixed !important;
        top: calc(64px + 48px + env(safe-area-inset-top, 0px)) !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1997 !important;
        background: var(--color-bg-surface) !important;
        border-bottom: 1px solid var(--color-border) !important;
        padding-left: var(--space-lg) !important;
        padding-right: var(--space-lg) !important;
    }
}

/* FIX: Mobile Tile View Overrides & Grid Consistency */
@media (max-width: 1023px) {
    /* Force 1-column grid for everything on mobile/tablet portrait */
    #workspace-pane.is-tiles #workspace-project-items,
    #workspace-pane.is-tiles .workspace-folder-list,
    #workspace-pane.is-tiles .skeleton-project-grid,
    #workspace-pane.is-tiles .skeleton-folder-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Project Tile Layout */
    #workspace-pane.is-tiles #workspace-project-items .list-item {
        overflow: hidden !important;
        min-height: 96px !important;
        height: auto !important;
        margin-bottom: 0 !important;
        border-radius: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important; /* Reset to column for wrapper, but main is flex row */
    }

    #workspace-pane.is-tiles #workspace-project-items .list-item .item-main {
        padding: 14px 16px !important;
        align-items: center !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Icon fixed width */
    #workspace-pane.is-tiles .item-avatar,
    #workspace-pane.is-tiles .klic-document-icon {
        width: 72px !important;
        height: 72px !important;
        flex-shrink: 0 !important;
        font-size: 24px !important;
    }
    #workspace-pane.is-tiles .klic-document-icon img.klic-graaf-icon {
        width: 56px !important;
        height: 70px !important;
    }

    /* Content Wrapper */
    #workspace-pane.is-tiles .item-content {
        flex: 1 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    /* Header Row (Title + Status + Menu) */
    #workspace-pane.is-tiles .item-header-mobile {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 6px !important;
        margin: 0 !important;
    }

    /* Title Wrapper */
    #workspace-pane.is-tiles .item-title-row {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        overflow: hidden !important;
    }

    /* Title Text */
    #workspace-pane.is-tiles .item-title {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        color: var(--color-text-main) !important;
        display: block !important;
        flex: 1 !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Status Dot */
    #workspace-pane.is-tiles .status-dot {
        display: inline-block !important;
        width: 8px !important;
        height: 8px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    /* Meta Row (Date + Status Text) */
    #workspace-pane.is-tiles .item-meta-row {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin-top: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    /* Allow city to shrink so badge stays visible */
    #workspace-pane.is-tiles .item-city-compact {
        flex-shrink: 1 !important;
        min-width: 0 !important;
        max-width: 110px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #workspace-pane.is-tiles .eis-voorzorg-badge {
        font-size: 8px !important;
        padding: 2px 5px !important;
    }

    #workspace-pane.is-tiles .item-date-compact {
        font-size: 11px !important;
        color: var(--color-text-dim) !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    #workspace-pane.is-tiles .status-badge-compact {
        font-size: 9px !important;
        padding: 1px 6px !important;
        border-radius: 4px !important;
        text-transform: none !important;
        font-weight: 700 !important;
    }

    /* Hide redundant type info on mobile tiles (user request) */
    #workspace-pane.is-tiles .item-type-compact {
        display: none !important;
    }

    /* Ensure folder row matches project tile width */
    #workspace-pane.is-tiles .workspace-folder-row {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Hide unnecessary mobile elements in tile view */
    #workspace-pane.is-tiles .item-address-mobile,
    #workspace-pane.is-tiles .item-footer-mobile {
        display: none !important;
    }

    /* Menu Button */
    #workspace-pane.is-tiles .folder-actions-btn-mobile {
        padding: 8px !important;
        margin: -8px !important; /* Increase hit area */
        color: var(--color-text-dim) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

.team-member-row:hover .btn-member-edit {
    opacity: 1;
}

/* Remove container styling for the toggle group */
.header-folder-group .workspace-view-toggle {
    border: none !important;
    background: transparent !important;
    height: auto !important;
    padding: 0 !important;
    gap: 4px !important;
}

/* Adjust active state for view toggle buttons */
.header-folder-group .workspace-view-toggle .workspace-view-btn.is-active {
    background: var(--color-bg-alpha-10) !important;
    color: var(--color-brand) !important;
    box-shadow: none !important;
}

/* Geen "haakjes" / dubbele boog: oude .workspace-view-btn.is-active had inset box-shadow;
   + globale :focus-visible met outline-offset gaf na tab-wissel een extra ring die als zijborders oogt. */
.header-folder-group .workspace-view-toggle .workspace-view-btn:focus {
    outline: none !important;
}
.header-folder-group .workspace-view-toggle .workspace-view-btn:focus-visible,
.header-folder-group .workspace-view-toggle .workspace-view-btn.is-active:focus-visible {
    outline: none !important;
    /* Geen outline-offset: voorkomt "haakje"-effect; toetsenbord: zachte ring op de knop */
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22) !important;
}

/* Desktop 4-column alignment */
@media (min-width: 1024px) {
    .workspace-toolbar-aligned {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 12px !important;
        align-items: center;
        width: 100%;
    }

    /* Column 1: Search bar fills the tile width */
    .workspace-toolbar-aligned .workspace-search-wrap {
        grid-column: 1;
        max-width: none !important;
        min-width: 0 !important;
        margin-right: 0 !important;
        flex: none !important;
        width: 100% !important;
    }

    /* Column 2: Icon buttons, left-aligned */
    .workspace-toolbar-aligned .header-folder-group {
        grid-column: 2;
        justify-content: flex-start !important;
        margin-left: 0 !important;
    }

    /* Columns 3-4: Filter chips with left border as divider */
    .workspace-toolbar-aligned .filter-chips-scroll {
        grid-column: 3 / span 2;
        border-left: 1px solid var(--color-border);
        padding-left: 14px;
        /* overflow: visible - required so .filter-dropdown (position:absolute) is not clipped */
        overflow: visible;
        flex-wrap: nowrap !important;
    }
    /* Individual chip groups need overflow visible too for dropdown to escape */
    .workspace-toolbar-aligned .filter-chip-group {
        overflow: visible;
    }
}

/* 3-column breakpoint (matches tile grid at ≤1300px) */
@media (min-width: 1024px) and (max-width: 1300px) {
    .workspace-toolbar-aligned {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .workspace-toolbar-aligned .filter-chips-scroll {
        grid-column: 3;
    }
}

/* 2. Left panel search header - fixed height, aligned with breadcrumb bar */
@media (min-width: 1024px) {
    .inbox-list-wrapper .inbox-header {
        flex: 0 0 auto;
        min-height: 56px;
        display: flex;
        align-items: center;
        padding: 8px 12px;
        background: var(--color-bg-surface);
        border-bottom: 1px solid var(--color-border);
    }
    /* Breadcrumb bar - match exact height of left search bar */
    .workspace-breadcrumb-bar {
        min-height: 56px !important;
        padding: 0 20px !important;
    }
    /* ai-search-container inside left header - full width, no extra margin */
    .inbox-list-wrapper .inbox-header .ai-search-container {
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }
    .inbox-list-wrapper .inbox-header .ai-search-inner {
        height: 36px;
    }
}

/* 3. Folder tree - minimalist hierarchy lines + anchoring */
.projects-folder-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 8px 8px;
}

/* "Alle Meldingen" root item - subtle separator below */
.projects-folder-list > .project-folder-item:first-child {
    margin-bottom: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* LIGHT MODE OVERRIDES FOR HARDCODED DARK STYLES */
body.light-mode .notification-item-title,
body.light-mode .label,
body.light-mode .status-badge,
body.light-mode .item-sub,
body.light-mode .item-title,
body.light-mode .card-header h3,
body.light-mode .compliance-title,
body.light-mode .nav-group-label,
body.light-mode .checklist-input,
body.light-mode .checklist-question-input,
body.light-mode .checklist-name-input-inner,
body.light-mode .safety-item-title,
body.light-mode .safety-item-desc,
body.light-mode .placeholder-text,
body.light-mode .item-snippet,
body.light-mode .item-date,
body.light-mode .support-value,
body.light-mode .support-label,
body.light-mode .team-name,
body.light-mode .role-option div,
body.light-mode .role-option.active div,
body.light-mode .safety-notice-item div,
body.light-mode .infra-type-label,
body.light-mode .btn-secondary-text,
body.light-mode .hamburger-btn,
body.light-mode .user-avatar-small,
body.light-mode .user-name-mini,
body.light-mode #new-project-name,
body.light-mode #new-project-address,
body.light-mode .notification-item-desc,
body.light-mode .geometry-hud-root .hud-title,
body.light-mode #hud-area,
body.light-mode .bulk-export-title,
body.light-mode .checklist-input,
body.light-mode .checklist-question-input,
body.light-mode .checklist-name-input-inner,
body.light-mode .dropdown-item,
body.light-mode .team-share-item,
body.light-mode .link-copy-input,
body.light-mode .modal-header h2,
body.light-mode .modal-header h3,
body.light-mode .share-option span,
body.light-mode .dropdown-header div {
    color: #000 !important;
}

/* Tekstkleur niet mee laten kleuren bij actieve rol */
body.light-mode .role-option.active div {
    color: #000 !important;
}

/* Override the specific "VIA WHATSAPP" delegation button */
body.light-mode button[onclick="shareDelegationWA()"] {
    background: rgba(255, 95, 31, 0.05) !important;
    color: var(--color-brand) !important;
    border-color: rgba(255, 95, 31, 0.2) !important;
}

/* MODAL REFINEMENTS */
.modal-header-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Modal shell: zelfde taal als #view-settings (Instellingen) / pf-* ───── */
.modal-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #f4f4f5;
    margin: 0;
    line-height: 1.25;
    text-transform: none;
}

.modal-subtitle {
    font-size: 12px;
    font-weight: 500;
    color: #9ca3af;
    margin: 6px 0 0 0;
    line-height: 1.45;
    text-transform: none;
    letter-spacing: 0;
}

.modal-header,
.modal-header-responsive {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    align-items: center;
    padding: 20px 24px;
}

.modal-header-responsive {
    flex-shrink: 0;
}

.modal-icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.modal-icon-circle.brand-bg {
    background: rgba(204, 255, 0, 0.1);
    border: 1px solid rgba(204, 255, 0, 0.18);
    color: var(--color-brand);
}

.modal-body {
    padding: 24px 28px 28px;
    padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.modal-body .form-group {
    margin-bottom: 22px;
}

.modal-body .form-group:last-child {
    margin-bottom: 0;
}

.modal-body .form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #d4d4d8;
    text-transform: none;
    margin-bottom: 10px;
    padding-left: 0;
}

.modal-body .form-help-text {
    font-size: 12px;
    font-weight: 500;
    color: #a1a1aa;
    line-height: 1.55;
    margin: 10px 0 0 0;
}

.modal-body .form-input-chic,
.modal-body select.form-input-chic,
.modal-body textarea.form-input-chic {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.32) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    min-height: 48px;
    color: var(--color-text-main) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    outline: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.modal-body textarea.form-input-chic {
    min-height: 80px;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    font-family: inherit;
    resize: vertical;
    line-height: 1.5;
}

.modal-body .form-input-chic:focus,
.modal-body select.form-input-chic:focus,
.modal-body textarea.form-input-chic:focus {
    border-color: rgba(204, 255, 0, 0.35) !important;
    box-shadow: 0 0 0 3px rgba(204, 255, 0, 0.1) !important;
}

.modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px 24px;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
    margin-top: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-footer:has(.footer-info) {
    justify-content: space-between;
}

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

.modal-footer .btn-danger:first-child {
    margin-right: auto;
}

.modal-footer .btn,
.modal-footer .btn-primary,
.modal-footer .btn-secondary {
    min-height: 48px;
    padding: 0 1.35rem;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-transform: none;
}

.modal-footer .btn-primary,
.modal-footer .btn-submit {
    font-weight: 600;
}

.btn-submit {
    flex: 0 1 auto;
    min-width: 8rem;
    min-height: 48px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-transform: none;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.form-row .form-group {
    margin-bottom: 0;
}

body.light-mode .modal-title {
    color: var(--color-text-main, #111318) !important;
}

body.light-mode .modal-subtitle {
    color: var(--color-text-dim, #3d424a) !important;
}

body.light-mode .modal-body .form-label {
    color: #374151 !important;
}

body.light-mode .modal-body .form-help-text {
    color: #6b7280 !important;
}

body.light-mode .modal-body .form-input-chic,
body.light-mode .modal-body select.form-input-chic,
body.light-mode .modal-body textarea.form-input-chic {
    background-color: #fff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: var(--color-text-main) !important;
}

body.light-mode .modal-body .form-input-chic:focus,
body.light-mode .modal-body select.form-input-chic:focus,
body.light-mode .modal-body textarea.form-input-chic:focus {
    border-color: rgba(255, 95, 31, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(255, 95, 31, 0.12) !important;
}

body.light-mode .modal-footer,
body.light-mode .modal-header,
body.light-mode .modal-header-responsive {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

body.light-mode .modal-icon-circle.brand-bg {
    background: rgba(255, 95, 31, 0.08) !important;
    border-color: rgba(255, 95, 31, 0.22) !important;
}

/* ── Gedeelde modal-blocks (import / new project / add member) ───────────── */
.modal-callout {
    background: rgba(204, 255, 0, 0.03);
    border: 1px solid rgba(204, 255, 0, 0.1);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.modal-callout > i.modal-callout__icon {
    color: var(--color-brand);
    margin-top: 2px;
    flex-shrink: 0;
}

.modal-callout__text {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-main);
    line-height: 1.55;
    margin: 0;
}

.modal-field-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.modal-divider {
    margin: 8px 0;
    height: 1px;
    background: var(--color-border);
    opacity: 0.5;
    border: none;
}

.modal-back-link {
    background: none;
    border: none;
    color: var(--color-brand);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.new-project-flow-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #a1a1aa;
    text-transform: none;
    margin: 0;
}

.new-project-option-card {
    padding: 20px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

.new-project-option-card--wa {
    border-color: rgba(204, 255, 0, 0.2) !important;
    background: rgba(204, 255, 0, 0.02) !important;
}

.new-project-option-card--direct {
    border-color: var(--color-brand) !important;
    background: rgba(204, 255, 0, 0.05) !important;
}

.new-project-option-card__row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.new-project-option-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.new-project-option-card__icon--wa {
    background: #ccff00;
    color: #000;
    font-size: 20px;
}

.new-project-option-card__icon--direct {
    background: var(--color-brand);
    color: #000;
}

.new-project-option-card__icon--neutral {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
}

.new-project-option-card__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.new-project-option-card__badge {
    font-size: 8px;
    font-weight: 800;
    background: var(--color-brand);
    color: #000;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: none;
    margin-left: 8px;
    vertical-align: middle;
}

.new-project-option-card__desc {
    font-size: 11px;
    color: var(--color-text-dim);
    line-height: 1.45;
    margin: 0;
}

.new-project-step2-note {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
}

.new-project-step2-note p {
    font-size: 12px;
    color: var(--color-text-dim);
    line-height: 1.5;
    margin: 0;
}

.modal-input-icon-wrap {
    position: relative;
}

.modal-input-icon-wrap > .modal-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: 14px;
    opacity: 0.5;
    pointer-events: none;
}

.modal-input-icon-wrap .form-input-chic {
    padding-left: 40px !important;
}

.modal-body .form-group.is-muted {
    opacity: 0.6;
}

.btn-modal-block {
    width: 100%;
    min-height: 50px;
    margin: 0;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-modal-block:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.new-project-footer-actions {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.new-project-legal-note {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.45;
    margin: 0;
}

.new-project-legal-note a {
    color: var(--color-brand);
    text-decoration: underline;
}

/* Import modal */
.modal-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.import-drop-zone {
    position: relative;
    border: 2px dashed var(--color-border);
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: rgba(255, 255, 255, 0.02);
}

.import-drop-zone:hover,
.import-drop-zone.import-drop-zone--active {
    border-color: rgba(204, 255, 0, 0.45);
    background: rgba(204, 255, 0, 0.04);
}

.import-drop-zone__icon-wrap {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: var(--color-text-dim);
    font-size: 20px;
}

.import-drop-zone__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-main);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.import-drop-zone__hint {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-dim);
}

.import-file-info {
    display: none;
    margin-top: 12px;
    padding: 12px;
    background: rgba(204, 255, 0, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(204, 255, 0, 0.1);
    align-items: center;
    gap: 12px;
}

.import-file-info.is-visible {
    display: flex;
}

.import-file-info__meta {
    flex: 1;
    min-width: 0;
}

.import-file-info__icon {
    width: 32px;
    height: 32px;
    background: var(--color-brand);
    color: #000;
    border-radius: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.import-file-info__name {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.import-file-info__status {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-brand);
}

.import-file-info__clear {
    margin-left: auto;
    background: var(--color-bg-alpha-05);
    border: none;
    color: var(--color-text-dim);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.import-file-info__clear:hover {
    background: var(--color-bg-alpha-10);
    color: var(--color-text-main);
}

#import-submit-import {
    width: 100%;
    min-height: 50px;
    margin-top: 8px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#import-submit-import:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.import-footnote {
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-top: 16px;
    line-height: 1.45;
}

@keyframes import-shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.import-shimmer-bar {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 400px 100%;
    animation: import-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
}

#import-processing-body {
    padding: 40px 28px 48px;
}

.import-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
}

body.light-mode .modal-callout {
    background: rgba(255, 95, 31, 0.04);
    border-color: rgba(255, 95, 31, 0.15);
}

body.light-mode .import-drop-zone {
    background: rgba(0, 0, 0, 0.02);
}

/* Add member modal */
#add-member-modal .modal-content.add-member-modal {
    max-width: 560px;
    padding: 0;
    overflow: hidden;
}

.add-member-header-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.add-member-header-icon .add-member-header-icon__plus {
    position: absolute;
    top: -3px;
    right: -5px;
    font-size: 8px;
    color: var(--color-brand);
    background: rgba(204, 255, 0, 0.12);
    border-radius: 50%;
    padding: 1px;
}

.pick-contact-btn {
    width: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--color-bg-deep);
    border: 1px dashed var(--color-border);
    border-radius: 12px;
    padding: 13px 16px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    color: var(--color-text-dim);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.pick-contact-btn.is-visible {
    display: flex;
}

.pick-contact-btn:hover {
    border-color: rgba(204, 255, 0, 0.35);
    background: rgba(204, 255, 0, 0.03);
}

.pick-contact-btn__hint {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-left: auto;
}

.add-member-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.add-member-grid__full {
    grid-column: span 2;
}

.modal-input-phone {
    position: relative;
}

.modal-input-phone__prefix {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: 700;
    pointer-events: none;
}

.modal-input-phone .form-input-chic {
    padding-left: 48px !important;
}

#add-member-modal .role-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.01);
}

#add-member-modal .role-option.active {
    border-color: var(--color-brand);
    background: rgba(204, 255, 0, 0.02);
}

#add-member-modal .role-option__icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

#add-member-modal .role-option.active .role-option__icon-wrap {
    background: rgba(204, 255, 0, 0.08);
    border-color: rgba(204, 255, 0, 0.12);
}

#add-member-modal .role-option__body {
    flex: 1;
    min-width: 0;
}

#add-member-modal .role-option__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-main);
    letter-spacing: -0.01em;
}

#add-member-modal .role-option__desc {
    font-size: 10px;
    color: var(--color-text-dim);
    line-height: 1.4;
    margin: 2px 0 0;
}

#add-member-modal .role-radio {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.15s;
}

#add-member-modal .role-option.active .role-radio {
    border-color: var(--color-brand);
}

#add-member-modal .role-radio .inner {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: none;
    background: var(--color-brand);
}

#add-member-modal .role-option.active .role-radio .inner {
    display: block;
}

#add-member-modal .add-member-modal__helm {
    position: relative;
}

#add-member-modal .add-member-modal__helm .fa-helmet-safety {
    font-size: 15px;
}

.add-member-seat-block {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 14px 16px;
}

.add-member-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}

.add-member-btn-primary {
    width: 100%;
    min-height: 48px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-transform: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}

.add-member-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 0;
}

.add-member-divider::before,
.add-member-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.add-member-divider span {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: 0.04em;
}

.add-member-link-btn {
    width: 100%;
    min-height: 44px;
    background: rgba(204, 255, 0, 0.06);
    border: 1px solid rgba(204, 255, 0, 0.15);
    color: var(--color-brand);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s;
}

.add-member-link-btn:hover {
    background: rgba(204, 255, 0, 0.1);
}

.invite-link-result {
    display: none;
    background: var(--color-bg-deep);
    border: 1px solid rgba(204, 255, 0, 0.15);
    border-radius: 12px;
    padding: 14px 16px;
}

.invite-link-result.is-visible {
    display: block;
}

.invite-link-result__label {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: 0.06em;
    margin: 0 0 8px;
}

.invite-link-result__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.invite-link-result__url {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-brand);
    word-break: break-all;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.invite-link-result__copy {
    flex-shrink: 0;
    background: rgba(204, 255, 0, 0.08);
    border: 1px solid rgba(204, 255, 0, 0.15);
    border-radius: 8px;
    padding: 6px 10px;
    color: var(--color-brand);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0.04em;
}

.invite-link-result__note {
    font-size: 10px;
    color: var(--color-text-muted);
    margin: 8px 0 0;
    line-height: 1.45;
}

.add-member-cancel {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px;
    letter-spacing: -0.01em;
}

.add-member-cancel:hover {
    color: var(--color-text-main);
}

/* Export Modal Styles */
.export-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 32px;
    min-height: 400px;
}

.export-options-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.export-type-selector {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.export-type-card {
    background: var(--color-bg-alpha-02);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.export-type-card:hover {
    border-color: var(--color-border-hover);
    background: var(--color-bg-alpha-05);
}

.export-type-card.active {
    border-color: var(--color-brand);
    background: rgba(204, 255, 0, 0.05);
}

.export-type-card i {
    font-size: 20px;
    color: var(--color-text-dim);
    width: 24px;
    text-align: center;
}

.export-type-card.active i {
    color: var(--color-brand);
}

.export-type-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.type-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-main);
}

.type-desc {
    font-size: 11px;
    color: var(--color-text-dim);
}

.type-check {
    margin-left: auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-brand);
    color: #000;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.export-type-card.active .type-check {
    display: flex;
}

.export-list-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-left: 1px solid var(--color-border);
    padding-left: 32px;
}

.export-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#export-count-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.01em;
    color: var(--color-text-dim);
}

.btn-text-only {
    background: none;
    border: none;
    color: var(--color-brand);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
}

.export-project-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
}

.export-project-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--color-bg-alpha-02);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.export-project-item:hover {
    background: var(--color-bg-alpha-05);
}

.export-project-item.checked {
    border-color: var(--color-brand);
    background: rgba(204, 255, 0, 0.05);
}

.export-project-item input {
    accent-color: var(--color-brand);
}

.export-project-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.export-project-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-main);
}

.export-project-meta {
    font-size: 10px;
    color: var(--color-text-dim);
}

.footer-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--color-text-muted);
}

.footer-info i {
    color: var(--color-brand);
}

.footer-actions {
    display: flex;
    gap: 12px;
}

.section-help-text {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-dim);
    margin-bottom: 12px;
    line-height: 1.45;
}

.templates-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 180px;
    overflow-y: auto;
    padding: 4px;
}

.checkbox-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--color-bg-deep);
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all 0.2s;
}

.checkbox-card:hover {
    border-color: var(--color-border-hover);
    background: var(--color-bg-alpha-02);
}

.checkbox-card input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.checkbox-card input[type="checkbox"]:checked {
    background: var(--color-brand);
    border-color: var(--color-brand);
}

.checkbox-card input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-card input[type="checkbox"]:hover {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
}

.checkbox-card span {
    font-size: 13px;
    color: var(--color-text-main);
}

.checkbox-card.small {
    padding: 8px 12px;
    background: var(--color-bg-alpha-02);
}

.checkbox-card.small span {
    font-size: 12px;
}

.empty-state-small {
    font-size: 11px;
    color: var(--color-text-muted);
    text-align: center;
    padding: 20px;
    background: var(--color-bg-deep);
    border-radius: 8px;
    border: 1px dashed var(--color-border);
}

.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: var(--color-bg-alpha-02);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    margin-bottom: 24px;
}

.toggle-label {
    font-size: 13px;
    color: var(--color-text-main);
}

.folder-access-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: 0.1em;
    margin: 0;
}

.add-access-row {
    display: flex;
    gap: 12px;
}

.btn-icon-square {
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--color-bg-alpha-05);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    cursor: pointer;
}

.btn-icon-square:hover {
    background: var(--color-bg-alpha-10);
    border-color: var(--color-border-hover);
}

.color-picker-wrap {
    height: 48px;
    background: var(--color-bg-deep);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 6px;
    display: flex;
    align-items: center;
    transition: all 0.2s;
}

.color-picker-wrap:focus-within {
    border-color: var(--color-brand);
}

.color-picker-wrap input[type="color"] {
    width: 100%;
    height: 100%;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 6px;
    padding: 0;
}

.color-picker-wrap input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-picker-wrap input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

/* EIS voorzorgsmaatregelen overlay op avatar icoon */
.tile-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.renew-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    background: var(--color-bg-elevated, #1a1a1a);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
    z-index: 4000;
    padding: 4px;
}

.renew-dropdown-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    color: var(--color-text-main);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.1s;
}

@media (hover: hover) { .renew-dropdown-item:hover { background: var(--color-bg-alpha-05); } }

.renew-dropdown-item > i { font-size: 12px; color: var(--color-text-dim); width: 14px; text-align: center; flex-shrink: 0; }

.renew-dropdown-toggle { cursor: default; }

.renew-dropdown-divider { height: 1px; background: var(--color-border); margin: 3px 4px; }

.card-header,
.detail-section-header {
    height: 48px !important; /* Dwingt een smalle, egale hoogte af */
    padding: 0 20px !important;
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative;
    z-index: 10;
    transition: all 0.2s;
}

/* Verberg border-bottom als de card is ingeklapt */
.card-collapsible:not(.open) .card-header,
.detail-section-card.card-collapsible:not(.open) .detail-section-header {
    border-bottom-color: transparent !important;
}

/* Ensure no pseudo-element lines exist in headers */
.card-header::after,
.detail-section-header::after,
.map-card-header::after,
.inbox-header::after {
    display: none !important;
    content: none !important;
}

.workspace-section-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--color-text-dim);
    margin: 24px 0 12px 0; /* Dennis the Dev: Consistent spacing for sections */
}

#workspace-pane.is-tiles .bulk-checkbox-wrapper .bulk-check {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    cursor: pointer;
    transition: all 0.15s ease;
    margin: 0;
    padding: 0;
}

/* Folder access drawer (so it doesn't feel like team management in workspace) */
.folder-access-backdrop {
    position: fixed;
    top: var(--folder-access-header-offset, var(--top-bar-height));
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.55);
    z-index: 90000;
}

.folder-access-drawer {
    position: fixed;
    top: var(--folder-access-header-offset, var(--top-bar-height));
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: calc(100vw - 48px);
    background: var(--color-bg-surface);
    border-left: 1px solid var(--color-border);
    z-index: 90001;
    overflow: visible; /* Break out! */
    display: flex;
    flex-direction: column;
}

/* Mobiel: .search-header staat boven Drive-content in dezelfde stacking context met z-60000 */
@media (max-width: 1023px) {
    .folder-access-backdrop,
    .folder-access-drawer {
        top: calc(56px + env(safe-area-inset-top, 0px));
    }
}

.folder-access-drawer-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: visible;
}

.folder-access-drawer-inner .folder-inspector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-bg-surface);
    border-bottom: 1px solid var(--color-border);
}

/* When mobile nav is open: push search-header fully below backdrop & overlay */
@media (max-width: 1023px) {
    body.mobile-nav-open .search-header {
        z-index: 1 !important;
    }
}

/* Specific overrides for tooltips in headers to appear BELOW the icon */
.card-header .info-tooltip,
.modal-header .info-tooltip,
.card-x .card-header .info-tooltip {
    bottom: auto !important;
    top: calc(100% + 15px) !important;
}

.card-header .info-tooltip::after,
.modal-header .info-tooltip::after,
.card-x .card-header .info-tooltip::after {
    bottom: auto !important;
    top: -12px !important;
    border-top-color: transparent !important;
    border-bottom-color: var(--color-border) !important;
}

/* Mobile adjustment for tooltips */
@media (max-width: 1023px) {
    #add-member-body { display: none; }
    .info-hover-container:hover .info-tooltip {
        opacity: 0;
        visibility: hidden;
    }
    .info-hover-container.active .info-tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
    .card-header .info-hover-container.active .info-tooltip,
    .modal-header .info-hover-container.active .info-tooltip,
    .label .info-hover-container.active .info-tooltip {
        transform: translateX(-50%) translateY(5px) !important;
    }
}

/* Responsive Modal Adjustments */
@media (max-width: 768px) {
    .modal-backdrop {
        align-items: flex-end !important;
        padding: 0 10px 10px !important;
        overflow: hidden !important;
    }

    .modal-content {
        max-height: 92dvh !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px !important;
        position: relative !important;
        bottom: auto !important;
        margin: 0 !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        background: var(--color-bg-card) !important;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.5) !important;
        padding-bottom: env(safe-area-inset-bottom, 16px) !important;
    }

    .modal-header,
    .modal-header-responsive {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        padding: 16px 20px 12px !important;
        flex-shrink: 0 !important;
    }

    .modal-header-responsive h3,
    .modal-header h3 {
        font-size: 18px !important;
    }

    .modal-body {
        padding: 12px 20px 32px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
    
    .pdf-footer-actions {
        padding: 12px 20px 32px !important;
        gap: 8px !important;
    }
    .pdf-footer-actions button, .pdf-footer-actions a {
        height: 48px !important;
        font-size: 10px !important;
    }
}

.team-inline-section-title {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: none;
    color: var(--color-text-muted);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.team-inline-section-title::before {
    content: '';
    width: 3px;
    height: 12px;
    background: var(--color-brand);
    border-radius: 2px;
    flex-shrink: 0;
}

/* .toast error/warning/success: zie components/notifications.css */

/* BODY LOCK FOR MODALS */
body.modal-open {
    overflow: hidden !important;
}

/* OVERLAYS & MODALS — premium shell: blur fade + pane lift (open én dicht) */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(5, 8, 12, 0.56);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.34s,
        backdrop-filter 0.45s ease,
        -webkit-backdrop-filter 0.45s ease;
}

.modal-backdrop.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    backdrop-filter: blur(14px) saturate(1.12);
    -webkit-backdrop-filter: blur(14px) saturate(1.12);
    transition:
        opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s,
        backdrop-filter 0.48s ease,
        -webkit-backdrop-filter 0.48s ease;
}

.modal-content {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 22px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.045) inset,
        0 28px 64px -18px rgba(0, 0, 0, 0.62),
        0 12px 28px -14px rgba(0, 0, 0, 0.35);
}

/* Motion alleen binnen dashboard overlay-modals (homepage gebruikt .modal-content zonder .modal-backdrop) */
.modal-backdrop .modal-content {
    transform: translateY(14px) scale(0.982);
    opacity: 0;
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.modal-backdrop.open .modal-content {
    transform: translateY(0) scale(1);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .modal-backdrop,
    .modal-backdrop.open {
        transition-duration: 0.01ms;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .modal-backdrop .modal-content {
        transform: translateY(8px);
        opacity: 0.96;
        transition-duration: 0.01ms;
    }
    .modal-backdrop.open .modal-content {
        transform: translateY(0);
        opacity: 1;
    }
}

.share-option {
    display: flex; align-items: center; gap: 12px; padding: 12px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--color-border);
    border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: all 0.2s;
    text-decoration: none; color: inherit;
}

.share-option:hover { background: rgba(255,255,255,0.06); border-color: var(--color-border-hover); }

.share-option i { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 14px; }

.team-share-list { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }

.team-share-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    border-radius: 8px; background: var(--color-bg-card); border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); border: 1px solid transparent;
    cursor: pointer; transition: all 0.2s;
}

.team-share-item:hover { background: var(--color-bg-alpha-05); border-color: var(--color-border); }

.team-share-avatar { width: 28px; height: 28px; background: var(--color-bg-surface); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; border: 1px solid var(--color-border); }

.link-copy-box {
    display: flex; gap: 8px; background: var(--color-bg-deep); border: 1px solid var(--color-border);
    border-radius: 8px; padding: 8px 12px; margin-top: 16px; align-items: center;
}

.link-copy-input { background: none; border: none; color: var(--color-text-dim); font-size: 11px; flex: 1; outline: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.role-option:hover {
    background: var(--color-bg-alpha-05);
    border-color: var(--color-bg-alpha-10);
}

.role-option.active {
    background: rgba(255,255,255,0.08);
    border-color: var(--color-brand);
    box-shadow: none;
}

.role-option.active div {
    color: var(--color-text-main);
}

/* Sectietitels: typografie, geen icon-clutter */
.member-detail-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-main);
    text-transform: none;
    letter-spacing: 0.01em;
    margin: 0 0 var(--space-lg, 17px) 0;
    padding-bottom: var(--space-sm, 7px);
    border-bottom: 1px solid var(--color-border);
}

/* Legacy: oude header structuur (voor modals e.d.) */
.member-detail-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.member-detail-section-header i { font-size: 14px; color: var(--color-brand); opacity: 0.8; }

.member-detail-section-header h3 { font-size: 14px; font-weight: 800; color: var(--color-text-main); margin: 0; }

/* Viewer buttons overlay on map */
.map-viewer-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* Much lighter gradient, just enough for contrast */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.4) 100%
    );
    padding: 24px 16px 24px;
    z-index: 1100;
    pointer-events: none;
    display: flex;
    justify-content: flex-start;
}

/* Secondary button (Share) - standalone */
.map-viewer-btn-delen {
    background: rgba(15, 23, 42, 0.75) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    font-weight: 500;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

/* Light mode */
body.light-mode .map-viewer-overlay {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.5) 40%,
        rgba(0, 0, 0, 0.8) 100%
    );
}

/* Mobile */
@media (max-width: 480px) {
    .map-viewer-overlay {
        padding: 24px 12px 12px;
    }
    .map-viewer-buttons {
        gap: 2px;
        padding: 4px;
        border-radius: 12px;
    }
    .map-viewer-btn {
        height: 34px;
        font-size: 10px;
        gap: 6px;
        padding: 0 14px;
        border-radius: 8px;
    }
    .map-viewer-btn i {
        font-size: 12px;
    }
    .map-viewer-btn-large {
        height: 34px !important;
        font-size: 10px !important;
        padding: 0 14px !important;
    }
    .map-viewer-btn-delen {
        padding: 0 12px !important;
    }
    .map-viewer-btn-large i {
        font-size: 18px !important;
    }
}

.detail-section-header .chevron {
    font-size: 10px;
    color: var(--color-text-muted);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.5;
    flex-shrink: 0;
    margin-left: 12px;
}

.folder-inspector-section-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--color-text-main);
    margin-bottom: 10px;
}

.folder-inspector-files-muted {
    font-size: 12px;
    opacity: 0.65;
}

.folder-inspector-drive-file-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.folder-inspector-drive-file-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
    background: var(--color-bg-alpha-02, rgba(255, 255, 255, 0.03));
}

.folder-inspector-drive-file-meta {
    flex: 1;
    min-width: 0;
}

.folder-inspector-drive-file-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.folder-inspector-drive-file-sub {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.folder-inspector-drive-file-row a {
    flex-shrink: 0;
    color: #ccff00;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.folder-inspector-drive-file-row a:hover {
    text-decoration: underline;
}

/* Project / modal sectieheaders - afgestemd op “Beheerders” panel-titel */
.detail-section-title {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.01em;
    color: var(--color-text-main);
    text-transform: none;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    font-weight: 600;
    white-space: normal;
    line-height: 1.3;
    min-width: 0;
}

.export-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.modal-content.medium-width {
    max-width: 480px;
}

.modal-content.small-width {
    max-width: 450px;
}

.empty-state-small-pad { padding: 40px 20px; text-align: center; opacity: 0.4; display: flex; flex-direction: column; align-items: center; gap: 12px; }

.empty-state-small-pad i { font-size: 24px; }

.empty-state-small-pad span { font-size: 11px; }

/* Modal specific share styling */
.invite-box {
    background: var(--color-bg-alpha-02);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

.role-select-wrap {
    flex: 1.2;
    min-width: 100px;
}

.role-select {
    height: 38px;
    font-size: 13px;
    padding: 0 10px;
}

.team-share-item {
    background: var(--color-bg-alpha-02);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
}

.team-share-item:hover {
    background: var(--color-bg-alpha-05);
}

.share-link-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.link-copy-box {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--color-bg-deep);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 4px 4px 4px 12px;
    height: 44px;
}

.link-copy-input {
    flex: 1;
    background: transparent;
    border: none;
    font-size: 12px;
    color: var(--color-text-dim);
    outline: none;
    min-width: 0;
}

/* ===== SHARE MODAL — SaaS / KLICBOT dashboard polish ===== */
.share-modal-content {
    max-width: min(680px, 94vw) !important;
    width: 100%;
    /* Eén radius-set voor knoppen/inputs in dit modal */
    --share-control-radius: 12px;
    border-radius: 18px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 24px 64px rgba(0, 0, 0, 0.55);
}

.share-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 32px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

.share-modal-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.share-modal-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: linear-gradient(145deg, rgba(204, 255, 0, 0.12), rgba(204, 255, 0, 0.04));
    border: 1px solid rgba(204, 255, 0, 0.22);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: var(--color-brand);
    box-shadow: 0 0 24px rgba(204, 255, 0, 0.08);
}

.share-modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-main);
    letter-spacing: -0.03em;
    line-height: 1.25;
    margin: 0;
    text-transform: none;
}

.share-modal-subtitle {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    color: #9ca3af;
    margin: 6px 0 0 0;
    text-transform: none;
}

.share-modal-body {
    padding: 0 0 28px 0 !important;
}

#share-modal.modal-backdrop {
    padding: max(20px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
    align-items: center;
}

/* Secties: luchtiger, duidelijke scheiding (alleen in dit modal) */
#share-modal .share-section {
    padding: 26px 32px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#share-modal .share-section:last-child {
    border-bottom: none;
}

#share-modal .share-section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--color-text-dim);
    margin-bottom: 16px;
}

#share-modal .share-section-label i {
    font-size: 13px;
    color: var(--color-brand);
    opacity: 0.95;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

#share-modal .share-section-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    margin: 0 32px;
}

/* Tussenstuk: “of deel zelf” */
.share-modal-hairline {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 20px 0 16px;
}

.share-modal-hairline::before,
.share-modal-hairline::after {
    content: "";
    flex: 1 1 0;
    min-width: 0;
    height: 1px;
    background: var(--color-border);
    opacity: 0.9;
}

.share-modal-hairline__label {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted, var(--color-text-dim));
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Uitnodigingslink (WhatsApp-stijl outline) - zelfde hoeken als Kopiëren / Sturen via WhatsApp */
.share-deel-uitnodigingslink-btn {
    width: 100%;
    min-height: 44px;
    height: auto;
    padding: 10px 14px;
    background: rgba(37, 211, 102, 0.08);
    border: 1px solid rgba(37, 211, 102, 0.2);
    color: #25d366;
    border-radius: var(--share-control-radius);
    font-size: 11px;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0.04em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s;
}

.share-deel-uitnodigingslink-btn:hover {
    background: rgba(37, 211, 102, 0.12);
}

.share-deel-uitnodigingslink-btn i {
    font-size: 15px;
    flex-shrink: 0;
}

/* Kleine kopieerknop bij gegenereerde uitnodigingslink */
.share-invite-link-copy-btn {
    flex-shrink: 0;
    background: rgba(37, 211, 102, 0.1);
    border: 1px solid rgba(37, 211, 102, 0.2);
    border-radius: var(--share-control-radius);
    padding: 5px 9px;
    color: #25d366;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: 0.06em;
}

.share-invite-link-copy-btn:hover {
    background: rgba(37, 211, 102, 0.16);
}

.share-invite-link-result {
    background: var(--color-bg-deep, #141414);
    border: 1px solid rgba(37, 211, 102, 0.28);
    border-radius: var(--share-control-radius);
    padding: 14px 16px;
    margin-top: 8px;
}

.share-invite-link-result__label {
    font-size: 10px;
    font-weight: 800;
    color: var(--color-text-muted, var(--color-text-dim));
    letter-spacing: 0.08em;
    text-transform: none;
    margin: 0 0 10px;
}

.share-invite-link-result__row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.share-invite-link-result__url {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    color: #25d366;
    word-break: break-all;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.share-invite-link-result__url:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.share-invite-link-result__hint {
    font-size: 11px;
    line-height: 1.5;
    color: var(--color-text-muted, var(--color-text-dim));
    margin: 10px 0 0;
}

.share-role-select {
    width: 120px !important;
    height: 42px;
    font-size: 13px;
    flex-shrink: 0;
}

#share-modal .team-share-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--share-control-radius);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

#share-modal .team-share-item:hover {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(204, 255, 0, 0.15);
    box-shadow: 0 0 0 1px rgba(204, 255, 0, 0.06);
}

/* Link block */
.share-link-block {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.share-link-input-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.share-link-copy-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0 12px;
    height: 44px;
    min-width: 0;
}

.share-link-icon {
    font-size: 11px;
    color: var(--color-text-dim);
    opacity: 0.5;
    flex-shrink: 0;
}

.share-link-input {
    flex: 1;
    background: transparent;
    border: none;
    font-size: 12px;
    color: var(--color-text-dim);
    outline: none;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

/* Link info */
.share-link-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 11px;
    color: var(--color-text-dim);
    line-height: 1.55;
    padding: 14px 16px;
    border-radius: var(--share-control-radius);
    margin-top: 4px;
}

.share-link-info i {
    font-size: 11px;
    flex-shrink: 0;
    margin-top: 1px;
}

.share-link-info-pro {
    background: rgba(204,255,0,0.04);
    border: 1px solid rgba(204,255,0,0.1);
    color: var(--color-text-dim);
}

.share-link-info-pro i { color: var(--color-brand); }

.share-link-info-basis {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
}

.share-link-info-basis i { color: var(--color-text-dim); opacity: 0.5; }

/* Textarea Font Fix */
textarea.form-input-chic {
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

/* FOLDER CONTEXT MENU (Drive-style) */
.folder-context-menu {
    position: fixed;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    border-radius: 12px;
    z-index: 10000;
    min-width: 260px;
    padding: 6px;
    display: none;
    animation: menuFadeIn 0.12s cubic-bezier(0, 0, 0.2, 1);
    backdrop-filter: blur(12px);
    /* Submenu (absolute) mag niet door backdrop-filter/WebKit achter afgesneden worden */
    overflow: visible;
}

.folder-context-menu .context-menu-has-submenu {
    overflow: visible;
}

/* ================================================================
   MOBILE: Project Detail - Map Preview & File List
   ================================================================ */
@media (max-width: 1023px) {

    /* --- CONTAINMENT: prevent horizontal overflow --- */
    .project-detail-container,
    .detail-scroll-body,
    .detail-grid {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    #workspace-project-detail,
    #workspace-project-view {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* --- Detail Grid: flatten columns for mobile reorder --- */
    .detail-grid {
        display: flex !important;
        flex-direction: column !important;
        padding: 10px !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .detail-main-col,
    .detail-side-col {
        display: contents !important;
    }

    /* --- Mobile card order ---
       With display:contents the DOM order is:
       Map → Files → (Guest banner) → Safety → Collaborators → Compliance → Export
       We only need to push Files to the very end.
    */
    .files-under-map {
        order: 99 !important;
    }

    /* Ensure all direct children of flattened grid have proper sizing */
    .detail-grid > *,
    .detail-main-col > *,
    .detail-side-col > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* --- Map Preview Card --- */
    .map-preview-card {
        aspect-ratio: 4/3 !important;
        border-radius: 8px !important;
        min-height: 180px !important;
        max-height: 280px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .map-controls-floating {
        top: 8px !important;
        right: 8px !important;
    }
    .map-controls-floating .map-mode-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }

    .map-viewer-overlay {
        padding: 32px 8px 8px !important;
    }

    .map-viewer-buttons {
        flex-direction: row !important;
        gap: 4px !important;
        justify-content: center !important;
        padding: 4px !important;
        border-radius: 12px !important;
    }

    .map-viewer-btn {
        flex: 0 0 auto !important;
        height: 34px !important;
        font-size: 9px !important;
        gap: 6px !important;
        border-radius: 8px !important;
        letter-spacing: 0.05em !important;
        padding: 0 14px !important;
    }

    .map-viewer-btn i {
        font-size: 11px !important;
    }

    .map-viewer-btn:disabled {
        height: 34px !important;
        font-size: 9px !important;
    }

    /* --- KLIC File List --- */
    .files-under-map {
        border-radius: 8px !important;
        margin-top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .files-under-map-header {
        padding: 10px 12px !important;
    }

    .files-under-map-title {
        font-size: 10px !important;
        gap: 6px !important;
    }

    .files-under-map-body {
        padding: 2px 4px 6px !important;
    }

    .file-cat-header {
        padding: 10px 8px !important;
        min-height: 40px !important;
    }

    .file-cat-left {
        font-size: 10px !important;
        gap: 6px !important;
    }

    .file-cat-left i {
        font-size: 12px !important;
        width: 16px !important;
    }

    .file-cat-count {
        font-size: 9px !important;
        min-width: 18px !important;
        height: 18px !important;
        line-height: 18px !important;
    }

    .file-cat-chevron {
        font-size: 9px !important;
    }

    .file-row-compact {
        padding: 8px 8px 8px 24px !important;
        min-height: 38px !important;
        gap: 8px !important;
        border-radius: 6px !important;
    }

    .file-row-icon {
        font-size: 11px !important;
    }

    .file-row-name {
        font-size: 12px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .file-row-arrow {
        opacity: 0.3 !important;
        font-size: 9px !important;
    }

    .file-badge-eis {
        font-size: 9px !important;
        padding: 2px 6px !important;
        gap: 4px !important;
    }
    .file-badge-eis i { font-size: 8px !important; }

    .btn-precision-sm {
        font-size: 9px !important;
        padding: 4px 8px !important;
        min-height: 28px !important;
    }

    /* --- Section Cards --- */
    .detail-section-card {
        border-radius: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .detail-section-header {
        height: auto !important;
        min-height: 38px !important;
        padding: 8px 12px !important;
    }

    .detail-section-title {
        font-size: 11px !important;
        letter-spacing: 0.01em !important;
    }

    .detail-section-title i {
        font-size: 10px !important;
    }

    .detail-section-content {
        padding: 8px 10px !important;
    }

    /* --- Export Grid (compact) --- */
    .export-grid {
        gap: 6px !important;
    }

    .export-item {
        padding: 8px 12px !important;
        min-height: 40px !important;
        height: auto !important;
        white-space: normal !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }

    .export-item.btn-precision {
        font-size: 9px !important;
        height: auto !important;
    }

    .export-icon-box {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
        margin-right: 8px !important;
        border-radius: 6px !important;
    }

    .export-icon-box i {
        font-size: 12px !important;
    }

    .export-title {
        font-size: 10px !important;
        font-weight: 700 !important;
    }

    .export-desc {
        font-size: 8px !important;
    }

    /* --- Buttons (compact on mobile) --- */
    .btn-precision {
        height: 34px !important;
        font-size: 9px !important;
        padding: 0 10px !important;
        letter-spacing: 0.08em !important;
    }

    .btn-precision i {
        font-size: 11px !important;
        width: 14px !important;
    }

    .btn-precision-brand {
        height: 32px !important;
        font-size: 8px !important;
    }

    /* --- Safety notices --- */
    .safety-notice-item {
        padding: 8px 10px !important;
        min-height: 40px !important;
        align-items: center !important;
    }

    .safety-notice-item .safety-checkbox {
        width: 20px !important;
        height: 20px !important;
    }

    .btn-action-row {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .btn-action-row .btn-precision {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* --- Collaborators --- */
    .collaborators-summary {
        padding: 8px !important;
    }

    .avatar-circle {
        width: 28px !important;
        height: 28px !important;
        font-size: 10px !important;
    }

    /* --- Pending map hero --- */
    .pending-map-hero {
        aspect-ratio: 4/3 !important;
        max-height: 280px !important;
    }

    .pending-title {
        font-size: 14px !important;
    }

    .pending-subtitle {
        font-size: 10px !important;
    }

    .pending-timeline {
        gap: 4px !important;
    }

    .pending-step span {
        font-size: 9px !important;
    }

    .pending-eta {
        font-size: 10px !important;
    }

    /* --- Metadata badges --- */
    .metadata-row-preview {
        gap: 4px !important;
    }

    .metadata-badge-preview {
        padding: 3px 8px !important;
        font-size: 9px !important;
    }

    .metadata-action-btn {
        padding: 4px 8px !important;
        font-size: 9px !important;
    }

    .auto-renew-preview-wrap {
        font-size: 10px !important;
    }

    .auto-renew-preview-wrap .switch-chic {
        transform: scale(0.8) !important;
    }
}

/* === MEMBER PANEL (CRM-style side panel) === */
.member-panel-backdrop { padding: 0 !important; }

.member-panel-backdrop.open .member-panel-content {
    animation: memberPanelSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.member-panel-content {
    background: var(--color-bg-card);
    box-shadow: -8px 0 32px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.member-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px 24px 20px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.member-panel-identity { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }

.member-panel-avatar {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    background: var(--color-bg-alpha-05);
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}

.member-panel-identity-text { flex: 1; min-width: 0; }

.member-panel-name {
    font-size: 17px; font-weight: 800;
    color: var(--color-text-main);
    margin: 0; letter-spacing: -0.02em;
    line-height: 1.3;
}

.member-panel-meta {
    display: flex; align-items: center; gap: 8px; margin-top: 6px;
    font-size: 11px;
}

.member-panel-save-indicator {
    font-size: 10px; font-weight: 600;
    color: var(--color-text-muted);
}

.member-panel-close {
    width: 36px; height: 36px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-alpha-05);
    color: var(--color-text-dim);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.member-panel-close:hover {
    background: var(--color-bg-alpha-10);
    color: var(--color-text-main);
    border-color: var(--color-border-hover);
}

.member-panel-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.member-panel-sections { display: flex; flex-direction: column; gap: 28px; }

.member-panel-section { }

.member-panel-section-title {
    font-size: 10px; font-weight: 800;
    text-transform: none; letter-spacing: 0.12em;
    color: var(--color-text-dim);
    margin: 0 0 14px 0;
}

.member-panel-hint {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: var(--color-text-muted);
    margin-bottom: 14px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.member-panel-hint i { font-size: 10px; opacity: 0.7; }

.member-panel-stats {
    display: flex; gap: 12px; margin-bottom: 16px;
}

.member-panel-stat {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 16px 20px;
    min-width: 100px;
}

.member-panel-stat-value {
    display: block;
    font-size: 22px; font-weight: 800;
    color: var(--color-text-main);
    letter-spacing: -0.02em;
}

.member-panel-stat-label {
    font-size: 10px; font-weight: 600;
    color: var(--color-text-dim);
    text-transform: none;
    letter-spacing: 0.06em;
    margin-top: 4px;
    display: block;
}

.member-panel-recent {
    font-size: 12px;
    color: var(--color-text-muted);
}

.member-panel-recent .team-inline-project-row,
.member-panel-recent .team-inline-project-left {
    display: flex; align-items: center; gap: 8px;
}

.member-panel-actions {
    display: flex; gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

.member-panel-btn-danger {
    flex: 1;
    font-size: 11px; font-weight: 500;
    padding: 12px 16px;
}

.member-panel-btn-save {
    flex: 2;
    font-size: 11px; font-weight: 500;
    padding: 12px 20px;
}

.pf-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 28px;
}

.pf-section-header > i {
    font-size: 15px;
    color: var(--color-brand);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.pf-section-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0;
    flex: 1;
    letter-spacing: -0.01em;
}

.pf-section-header p {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 0;
    text-align: right;
}

.pf-danger-zone .pf-section-header { border-bottom-color: rgba(255, 77, 77, 0.15); }

.pf-danger-zone .pf-section-header h3 { color: #f87171; }

.pf-danger-zone .pf-section-header > i { color: #f87171; }

/* --- Mobile responsive --- */
@media (max-width: 1023px) {
    .profile-hero-body { padding: 28px 24px 24px; gap: 18px; }
    .profile-hero-avatar { width: 64px; height: 64px; font-size: 26px; }
    .profile-hero-avatar.company { border-radius: 16px; }
    .profile-hero-info h1 { font-size: 20px; margin-bottom: 10px; }
    .profile-tab-nav { padding: 0 20px; }
    .profile-tab-btn { padding: 13px 14px; font-size: 12px; }
    .profile-tab-panels { padding: 24px 20px 48px; }
    .pf-grid-2 { grid-template-columns: 1fr; }
    .pf-section-header p { display: none; }
    .pf-danger-zone { padding: 20px; }
    .pf-referral-card { padding: 20px; }
}

/* Mobile-only elements: hidden by default on desktop.
   !important needed to override .btn-icon-subtle { display: flex } from dashboard_v2.css */
.mobile-only-flex { display: none !important; }

/* ============================================================
   MOBILE UI FIXES (≤ 1023px)
   ============================================================ */
@media (max-width: 1023px) {

    /* ── 1. Breadcrumb: sticky directly under mobile topbar, zero gap ── */
    .workspace-breadcrumb-bar {
        position: fixed !important;
        top: calc(64px + env(safe-area-inset-top, 0px)) !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1999 !important;
        /* Match topbar background - eliminates any color-difference "gap" */
        background: var(--color-bg-deep) !important;
        border-top: none !important;
        border-bottom: 1px solid var(--color-border) !important;
        /* box-shadow vult elke resterende pixel-gap boven de balk */
        box-shadow: 0 -20px 0 20px var(--color-bg-deep) !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        min-height: 36px !important;
        height: 48px !important;
        padding: 0 16px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    .workspace-breadcrumb-bar::-webkit-scrollbar { display: none; }

    /* Breadcrumb row: optisch gecentreerd in de 48px balk (icoon + tekst op één middenlijn) */
    .workspace-breadcrumb-bar .workspace-breadcrumb {
        min-height: 0 !important;
        height: 100%;
        align-items: center !important;
        align-self: stretch;
        line-height: 1.2;
    }
    .workspace-breadcrumb-bar .workspace-breadcrumb .crumb {
        display: inline-flex !important;
        align-items: center !important;
        line-height: 1.2 !important;
    }
    .workspace-breadcrumb-bar .workspace-breadcrumb .crumb i {
        line-height: 1;
        font-size: 0.95em;
    }
    .workspace-breadcrumb-bar .workspace-breadcrumb .sep {
        display: inline-flex !important;
        align-items: center !important;
        line-height: 1 !important;
    }

    /* ── 2. Scroll-inhoud begint ÓNder beide vaste balken ── */
    /* topbar: 64px + breadcrumb: 48px + toolbar: ~56px = 168px totaal */
    #workspace-folder-view {
        padding-top: calc(48px + 56px) !important; /* breadcrumb + fixed toolbar */
    }
    /* Project detail: only breadcrumb offset (toolbar not applicable here) */
    #workspace-project-view {
        padding-top: 48px !important;
    }

    /* Breadcrumb text: compact on mobile */
    .workspace-breadcrumb {
        font-size: 12px !important;
        min-height: 24px !important;
        gap: 2px !important;
    }
    .workspace-breadcrumb .crumb {
        padding: 2px 4px !important;
    }
    .workspace-breadcrumb .sep {
        font-size: 12px !important;
        margin: 0 1px !important;
    }

    /* Breadcrumb inside detail header: truncate overflow, never clip */
    .detail-breadcrumb,
    .workspace-breadcrumb {
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .detail-breadcrumb::-webkit-scrollbar,
    .workspace-breadcrumb::-webkit-scrollbar { display: none; }

    /* Collapsed crumb (JS adds .is-collapsed for truncated middle items) */
    .crumb.is-collapsed {
        opacity: 0.45;
        font-style: normal;
        pointer-events: none;
        flex-shrink: 0;
    }

    /* ── 2. Icon row (mobile) ── */
    .workspace-toolbar-aligned {
        display: flex !important;
        flex-direction: row !important;  /* explicitly row - counters tables.css column override */
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: center !important;
    }

    /* Row 1: action icon bar - full width, no horizontal scroll (prevents jump on filter open) */
    .workspace-toolbar-aligned .header-folder-group {
        order: 1;
        flex: 1 1 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        flex-wrap: nowrap !important;
        overflow-x: visible !important; /* no scroll = no position jump when filter opens */
        scrollbar-width: none;
    }
    .workspace-toolbar-aligned .header-folder-group::-webkit-scrollbar { display: none; }

    /* Compress icon buttons on narrow screens so all fit without scrolling */
    .workspace-toolbar-aligned .header-folder-group .btn-icon-subtle {
        flex-shrink: 1;
        min-width: 32px !important;
        width: 34px !important;
        height: 34px !important;
        font-size: 13px !important;
    }

    /* Search toggle pushed to the right, filter toggle immediately next to it */
    #workspace-search-toggle {
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }
    #workspace-filter-toggle {
        flex-shrink: 0 !important;
        margin-left: 0 !important;
    }

    /* Row 2: search bar - hidden by default, shown via toggle */
    .workspace-toolbar-aligned .workspace-search-wrap {
        order: 2;
        display: none !important;
        flex: 1 1 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-right: 0 !important;
    }
    .workspace-toolbar-aligned .workspace-search-wrap.mobile-open {
        display: flex !important;
    }

    /* Row 3: filter pills - hidden by default, shown via toggle */
    .workspace-toolbar-aligned .filter-chips-scroll {
        order: 3;
        display: none !important;
        flex: 1 1 100% !important;
        grid-column: unset !important;
        border-left: none !important;
        padding-left: 0 !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
    }
    .workspace-toolbar-aligned .filter-chips-scroll.mobile-open {
        display: flex !important;
    }
    .workspace-toolbar-aligned .filter-chips-scroll::-webkit-scrollbar { display: none; }

    /* Mobile toggle buttons: show on mobile */
    .mobile-only-flex {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    /* Active state for toggle buttons */
    #workspace-search-toggle.is-active,
    #workspace-filter-toggle.is-active {
        background: var(--color-bg-alpha-10) !important;
        color: var(--color-brand) !important;
        border: 1px solid rgba(204,255,0,0.2) !important;
    }

    /* ── 3. Company/Profile settings: allow vertical scroll ── */
    #view-company .view-body,
    #view-profile .view-body {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        height: auto !important;
    }
    .profile-tab-panels {
        padding: 24px 20px 120px !important;
    }

    /* ── 4. Modal: enforce dark grayscale on mobile (override iOS autofill) ── */
    .modal-content {
        color-scheme: dark;
        background: var(--color-bg-card, #1e1e1e) !important;
    }
    .modal-content input,
    .modal-content textarea {
        background: var(--color-bg-deep, #141414) !important;
        color: var(--color-text-main, #e5e7eb) !important;
        border-color: var(--color-border, #262626) !important;
        -webkit-text-fill-color: var(--color-text-main, #e5e7eb) !important;
    }
    .modal-content select {
        background-color: var(--color-bg-deep, #141414) !important;
        color: var(--color-text-main, #e5e7eb) !important;
        border-color: var(--color-border, #262626) !important;
        -webkit-text-fill-color: var(--color-text-main, #e5e7eb) !important;
    }
    /* iOS autofill background override */
    .modal-content input:-webkit-autofill,
    .modal-content input:-webkit-autofill:hover,
    .modal-content input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 40px var(--color-bg-deep, #141414) inset !important;
        -webkit-text-fill-color: var(--color-text-main, #e5e7eb) !important;
        caret-color: var(--color-text-main, #e5e7eb) !important;
    }

    /* ── 5. Project Detail: mobile layout fixes ── */

    /* Geen dubbele top-marge: vaste breadcrumb + 48px offset is genoeg; verwijdert lege band */
    .project-detail-container {
        padding-top: 0 !important;
    }

    /* Eén breadcrumb op mobiel: de vaste .workspace-breadcrumb-bar onder de topbar.
       De header-regel #detail-breadcrumb verbergen - anders dubbel (zelfde trail als vaste balk). */
    #workspace-pane.has-project-detail .project-detail-container .detail-top-row {
        display: none !important;
    }

    /* Compact detail-header on mobile: tighter padding, no extra sticky (workspace-backbar handles it) */
    .project-detail-container .detail-header {
        position: relative !important;
        padding: 6px 16px 12px !important;
        margin-bottom: 0 !important;
    }

    /* Compact title on mobile */
    .project-detail-container .detail-title {
        font-size: 16px !important;
    }

    /* Tighter bottom row on mobile (margin-top 0: geen .detail-top-row bij open detail) */
    .project-detail-container .detail-bottom-row {
        min-height: 28px !important;
        margin-top: 0 !important;
        margin-bottom: 6px !important;
        gap: 8px !important;
    }

    /* Reorder detail-grid on mobile: side-col (viewer button) before main-col (map) */
    .detail-grid {
        gap: 12px !important;
        padding: 12px 16px !important;
    }
    .detail-main-col { order: 2; }
    .detail-side-col { order: 1; }

    /* Compact map on mobile so viewer button stays above fold */
    .map-preview-card {
        aspect-ratio: 16 / 6 !important;
    }
}

/* - Upload formats info (chat + overzicht KLICbot) - */
.kchat-drop-hint-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
}

.kchat-upload-formats-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 6px 14px;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.kchat-upload-formats-trigger i {
    font-size: 0.8rem;
    opacity: 0.85;
}

.kchat-upload-formats-trigger:hover {
    color: var(--color-text-main);
    background: var(--color-bg-alpha-10);
    border-color: var(--color-border-hover);
}

.kchat-upload-formats-trigger:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

body.light-mode .kchat-upload-formats-trigger,
[data-theme="light"] .kchat-upload-formats-trigger {
    color: rgba(0, 0, 0, 0.58);
    background: transparent;
    border-color: rgba(0, 0, 0, 0.18);
}

body.light-mode .kchat-upload-formats-trigger:hover,
[data-theme="light"] .kchat-upload-formats-trigger:hover {
    color: #111318;
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.28);
}

#klicbot-upload-formats-modal .klicbot-upload-formats-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 24px 12px 28px;
    border-bottom: 1px solid var(--color-border);
    position: relative;
}

#klicbot-upload-formats-modal .klicbot-upload-formats-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--color-bg-alpha-10);
    border: 1px solid var(--color-border);
    color: var(--color-brand);
    font-size: 16px;
}

#klicbot-upload-formats-modal .klicbot-upload-formats-title {
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text-main);
    margin: 0 40px 0 0;
    line-height: 1.2;
}

#klicbot-upload-formats-modal .klicbot-upload-formats-sub {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-text-dim);
    margin: 6px 40px 0 0;
}

#klicbot-upload-formats-modal .klicbot-upload-formats-sub strong {
    color: var(--color-text-main);
    font-weight: 600;
}

#klicbot-upload-formats-modal .klicbot-upload-formats-close {
    position: absolute;
    top: 16px;
    right: 16px;
    margin: 0;
}

#klicbot-upload-formats-modal .klicbot-upload-formats-body {
    padding: 20px 28px 28px 28px;
}

#klicbot-upload-formats-modal .klicbot-upload-formats-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

#klicbot-upload-formats-modal .klicbot-upload-formats-item {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
}

#klicbot-upload-formats-modal .klicbot-upload-formats-item--last {
    border-bottom: none;
    padding-bottom: 0;
}

#klicbot-upload-formats-modal .klicbot-upload-formats-tile {
    flex-shrink: 0;
    width: 3.1rem;
    min-height: 2.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-main);
    background: var(--color-bg-alpha-10);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

#klicbot-upload-formats-modal .klicbot-upload-formats-copy {
    min-width: 0;
    flex: 1;
}

#klicbot-upload-formats-modal .klicbot-upload-formats-name {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 4px;
    letter-spacing: 0.01em;
}

#klicbot-upload-formats-modal .klicbot-upload-formats-copy p {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--color-text-dim);
}

#klicbot-upload-formats-modal .klicbot-upload-formats-copy p strong {
    color: var(--color-text-main);
    font-weight: 600;
}

.retention-badge {
    font-weight: 700;
    cursor: help;
    font-size: var(--text-badge);
    line-height: 1.2;
}

.retention-badge.retention-ok {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--color-text-dim);
}

.retention-badge.retention-ok i { color: rgba(255,255,255,0.85); opacity: 0.9; }

.retention-badge.retention-warning {
    background: rgba(255, 170, 0, 0.08);
    border-color: rgba(255, 170, 0, 0.2);
    color: #FFAA00;
}

.retention-badge.retention-warning i { color: #FFAA00; }

.retention-badge.retention-critical {
    background: rgba(255, 68, 0, 0.1);
    border-color: rgba(255, 68, 0, 0.25);
    color: #FF4400;
    animation: retention-pulse 2s ease-in-out infinite;
}

.retention-badge.retention-critical i { color: #FF4400; }

@keyframes retention-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.retention-upsell-card {
    border-color: rgba(255, 170, 0, 0.2) !important;
    background: rgba(255, 170, 0, 0.04) !important;
}

/* === NALEVERING ALERT BANNER === */
.nalevering-banner-wrap {
    padding: var(--space-lg) var(--space-xl) 0;
}

.nalevering-alert-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(0, 150, 255, 0.06);
    border: 1px solid rgba(0, 150, 255, 0.15);
    border-radius: 12px;
    transition: background 0.2s, border-color 0.2s;
    overflow: hidden;
}

.nalevering-alert-banner:hover {
    background: rgba(0, 150, 255, 0.10);
    border-color: rgba(0, 150, 255, 0.3);
}

.nalevering-alert-icon {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 150, 255, 0.12);
    border-radius: 8px;
    flex-shrink: 0;
    color: #0096FF;
    font-size: 13px;
}

.nalevering-alert-content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 5px;
    overflow: hidden;
}

.nalevering-alert-count {
    font-size: 12px;
    font-weight: 800;
    color: var(--color-text-main);
    white-space: nowrap;
    flex-shrink: 0;
}

.nalevering-alert-label {
    font-size: 12px;
    color: var(--color-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nalevering-alert-action {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: rgba(0, 150, 255, 0.12);
    border: 1px solid rgba(0, 150, 255, 0.2);
    border-radius: 7px;
    color: #4DC8FF;
    font-size: 11px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    transition: background 0.2s;
}

.nalevering-alert-banner:hover .nalevering-alert-action {
    background: rgba(0, 150, 255, 0.2);
}

.nalevering-alert-dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 11px;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}

.nalevering-alert-dismiss:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
}

/* Nalevering indicators in project list */
.item-main-finder .nalev-ico {
    color: #0096FF;
    font-size: 11px;
    animation: nalevBell 2s ease-in-out infinite;
}

.nalev-tile-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: none;
    background: rgba(0, 150, 255, 0.12);
    color: #4DC8FF;
    border: 1px solid rgba(0, 150, 255, 0.2);
}

.nalev-tile-badge i { font-size: 8px; }

.tile-eis-overlay {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 107, 0, 0.12);
    border: 1.5px solid rgba(245, 158, 11, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.tile-eis-overlay i {
    font-size: 8px;
    color: #F59E0B;
}

.folder-status-pill {
    font-size: 9px;
    font-weight: 700;
    text-transform: none;
    padding: 3px 6px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    color: var(--color-text-dim);
    background: var(--color-bg-alpha-05);
}

.folder-status-pill.pending {
    border-color: rgba(245, 158, 11, 0.4);
    color: #f59e0b;
}

#workspace-pane.is-tiles .status-badge {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    flex-shrink: 0;
}

/* Notifications */
.notification-trigger {
    position: relative;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-dim);
    transition: all 0.2s;
    border-radius: 50%;
    background: transparent;
    border: none;
}

/* <button> variant (o.a. topbar zoek-icoon): geen browser-default padding */
button.notification-trigger {
    padding: 0;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.notification-trigger:hover {
    background: var(--color-bg-alpha-05);
    color: var(--color-text-main);
}

/*
 * Bel-teller: diagonale slide + lichte overshoot (notification-badge pattern).
 * Geen oneindige pulse meer op de counter — alleen entrance bij eerste paint.
 */
@keyframes notification-badge-pop {
    0% {
        opacity: 0;
        transform: translate(10px, -10px) scale(0.42);
    }
    58% {
        opacity: 1;
        transform: translate(-3px, 3px) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

.notification-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: #CCFF00;
    border-radius: 50%;
    border: 2px solid var(--color-bg-deep);
    animation: pulse-yellow 2s infinite;
}

.notification-badge.notification-badge-count {
    width: auto;
    height: 16px;
    min-width: 16px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: #000;
    background: var(--color-brand);
    border: 2px solid var(--color-bg-deep);
    animation: pulse-yellow 2s infinite;
}

/* Bel + teller: stack met badge op schouder */
.notification-bell-stack {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.notification-bell-icon {
    font-size: 16px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.2s;
}

/* Topbar: bel iets groter zodat hij optisch in verhouding is met 32px helm-avatar */
.top-bar-desktop .notification-bell-icon {
    font-size: 15px;
}
.top-bar-desktop .notification-bell-stack {
    width: 20px;
    height: 20px;
}

/* Zelfde beeld als bel: command palette (zoek) - icoon + hover */
.topbar-cmd-palette-icon {
    font-size: 15px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.2s;
}

body.light-mode .topbar-cmd-palette-icon {
    color: rgba(0, 0, 0, 0.42);
}

.top-bar-desktop .topbar-cmd-palette-btn:hover .topbar-cmd-palette-icon,
.top-bar-desktop .topbar-cmd-palette-btn:focus-visible .topbar-cmd-palette-icon {
    color: rgba(255, 255, 255, 0.6);
}

body.light-mode .top-bar-desktop .topbar-cmd-palette-btn:hover .topbar-cmd-palette-icon,
body.light-mode .top-bar-desktop .topbar-cmd-palette-btn:focus-visible .topbar-cmd-palette-icon {
    color: rgba(0, 0, 0, 0.58);
}

body.light-mode .notification-bell-icon {
    color: rgba(0, 0, 0, 0.42);
}

.notification-trigger:hover .notification-bell-icon,
.notification-bell-trigger:focus-visible .notification-bell-icon {
    color: rgba(255, 255, 255, 0.6);
}

body.light-mode .notification-trigger:hover .notification-bell-icon,
body.light-mode .notification-bell-trigger:focus-visible .notification-bell-icon {
    color: rgba(0, 0, 0, 0.58);
}

.notification-bell-stack .notification-badge.notification-badge-count {
    position: absolute;
    top: -5px;
    right: -7px;
    left: auto;
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0 4px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 900;
    color: #000;
    background: var(--color-brand);
    /* Zelfde als donkere topbar (geen witte ring) */
    border: 2px solid var(--color-bg-deep);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
    animation: notification-badge-pop 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
    transform-origin: center center;
    line-height: 1;
    z-index: 2;
}

body.light-mode .notification-bell-stack .notification-badge.notification-badge-count {
    border-color: rgba(255, 255, 255, 0.94);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* Desktop trigger: ronde kliktarget rond de bel */
.notification-bell-trigger {
    position: relative;
    border-radius: 50%;
}

/* Mobiele header: vaste 36×36 knop; vierkant met afgeronde hoeken wint t.o.v. cirkel hierboven */
.mobile-nav-trigger.notification-bell-trigger {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
}

.mobile-nav-trigger.notification-bell-trigger .notification-bell-stack {
    width: 22px;
    height: 22px;
}

.notification-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 340px;
    max-width: calc(100vw - 32px);
    background: #1e1e1e;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (max-width: 1023px) {
    .notification-dropdown {
        position: fixed;
        top: calc(64px + env(safe-area-inset-top, 0px));
        right: 16px;
        left: 16px;
        width: auto;
        max-width: none;
    }
}

.notification-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    display: flex; /* Maintain flex from base class */
}

.notification-list {
    max-height: 420px;
    overflow-y: auto;
    scrollbar-width: none;
}

.notification-list::-webkit-scrollbar {
    display: none;
}

.notification-header {
    padding: 16px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-header h3 {
    font-size: 13px;
    font-weight: 700;
    margin: 0;
    text-transform: none;
    letter-spacing: 0.05em;
}

.notification-item {
    padding: 16px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    gap: 12px;
    transition: all 0.2s;
    cursor: pointer;
    background: transparent;
    position: relative;
}

.notification-item:hover {
    background: var(--color-bg-card); border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg);
}

.notification-item.unread {
    background: rgba(204, 255, 0, 0.02);
}

.notification-item.unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-brand);
}

.notification-item-content {
    flex: 1;
}

.notification-item-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.notification-item.unread .notification-item-title {
    color: var(--color-brand);
    font-weight: 800;
}

.notification-item-desc {
    font-size: 11px;
    color: var(--color-text-dim);
    line-height: 1.4;
}

.notification-item-time {
    font-size: 10px;
    color: var(--color-text-muted);
    margin-top: 6px;
}

.notification-footer {
    padding: 12px;
    text-align: center;
    background: rgba(255,255,255,0.01);
    cursor: pointer;
    transition: background 0.2s;
}

.notification-footer:hover {
    background: rgba(255,255,255,0.03);
}

.notification-footer a {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-dim);
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0.05em;
}

.status-badge { 
    font-size: 9px; 
    font-weight: 700; 
    padding: 3px 8px; 
    border-radius: 6px; 
    text-transform: none; /* Changed from uppercase */
    color: var(--color-text-dim);
    background: var(--color-bg-alpha-05);
    border: 1px solid var(--color-border);
    line-height: 1;
    letter-spacing: 0.02em;
}

.wibon-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; color: var(--color-brand); background: rgba(255, 255, 255, 0.05); padding: 4px 12px; border-radius: 100px; margin-bottom: 12px; border: 1px solid rgba(255, 255, 255, 0.1); }

.notification-dot { position: absolute; top: -5px; right: -5px; width: 10px; height: 10px; background: var(--color-text-main); border-radius: 50%; border: 2px solid var(--color-bg-deep); animation: pulse-yellow 2s infinite; z-index: 10; }

.notification-dot-red { background: var(--color-text-main) !important; animation: pulse-yellow 2s infinite !important; }

.team-status-pill {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: none;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    color: var(--color-text-dim);
}

.team-status-pill.status-approved,
.team-approval-item[data-status="approved"] .team-status-pill {
    background: rgba(204, 255, 0, 0.08);
    color: var(--color-brand);
    border-color: rgba(204, 255, 0, 0.15);
}

.team-status-pill.status-submitted,
.team-approval-item[data-status="submitted"] .team-status-pill {
    background: rgba(100, 180, 255, 0.08);
    color: #64b4ff;
    border-color: rgba(100, 180, 255, 0.15);
}

.team-status-pill.status-failed,
.team-approval-item[data-status="failed"] .team-status-pill {
    background: rgba(255, 68, 68, 0.08);
    color: #ff5555;
    border-color: rgba(255, 68, 68, 0.15);
}

.team-status-pill.status-rejected,
.team-approval-item[data-status="rejected"] .team-status-pill {
    background: rgba(255, 68, 68, 0.06);
    color: #ff6666;
    border-color: rgba(255, 68, 68, 0.1);
}

.offline-badge { 
    position: fixed; top: 0; left: 0; right: 0; background: var(--color-warning); color: #000; 
    padding: 4px 0; text-align: center; font-size: 10px; font-weight: 800; z-index: 3000; 
    display: none; letter-spacing: 0.1em;
}

/* TOAST - flat gray surface; status = colored icon only (no side stripe) */
.toast-container {
    position: fixed;
    bottom: max(24px, env(safe-area-inset-bottom, 0px));
    right: max(24px, env(safe-area-inset-right, 0px));
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    align-items: flex-end;
    max-width: calc(100vw - 32px);
}

.toast {
    --toast-in: cubic-bezier(0.22, 1, 0.36, 1);
    --toast-out: cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    background: #2b2b30;
    color: #e4e4e7;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.45;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.98);
    filter: none;
    transition:
        opacity 0.4s var(--toast-in),
        transform 0.45s var(--toast-in);
    pointer-events: auto;
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
    word-wrap: normal;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    align-items: center;
    gap: 12px;
}

.toast__icon {
    flex-shrink: 0;
    margin-top: 0;
    font-size: 15px;
    line-height: 1;
}

.toast.success .toast__icon {
    color: #4ade80;
}

.toast.error .toast__icon {
    color: #f87171;
}

.toast.warning .toast__icon {
    color: #fb923c;
}

.toast.info .toast__icon {
    color: #7dd3fc;
}

.toast__text {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
}

.toast.show {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.toast:not(.show) {
    transition:
        opacity 0.32s var(--toast-out),
        transform 0.4s var(--toast-out);
}

.toast.success,
.toast.error,
.toast.warning,
.toast.info {
    background: #2b2b30;
    border-color: rgba(255, 255, 255, 0.09);
    color: #e4e4e7;
}

body.light-mode .toast,
body.light-mode .toast.success,
body.light-mode .toast.error,
body.light-mode .toast.warning,
body.light-mode .toast.info {
    background: #f4f4f5;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #18181b;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
}

body.light-mode .toast.success .toast__icon {
    color: #16a34a;
}

body.light-mode .toast.error .toast__icon {
    color: #dc2626;
}

body.light-mode .toast.warning .toast__icon {
    color: #ea580c;
}

body.light-mode .toast.info .toast__icon {
    color: #0284c7;
}

@media (prefers-reduced-motion: reduce) {
    .toast {
        transform: none !important;
        transition: opacity 0.2s ease !important;
    }
    .toast.show {
        transform: none !important;
    }
    .notification-bell-stack .notification-badge.notification-badge-count {
        animation: none !important;
    }
}

@media (max-width: 640px) {
    .toast-container {
        bottom: max(100px, env(safe-area-inset-bottom, 0px));
        right: 16px;
        left: auto;
        align-items: flex-end;
    }
    .toast {
        border-radius: 12px;
        padding: 12px 14px;
    }
}

/* LARGE GUEST BANNER */
.guest-access-banner-large {
    padding: 24px;
    background: rgba(204, 255, 0, 0.05);
    border: 1px solid rgba(204, 255, 0, 0.1);
    border-radius: 12px;
    text-align: center;
}

.banner-icon { color: var(--color-brand); font-size: 32px; margin-bottom: 16px; display: block; }

.banner-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 8px; }

.banner-desc { font-size: 12px; color: var(--color-text-dim); line-height: 1.6; margin: 0 auto 16px; max-width: 400px; }

.banner-cta { display: inline-flex !important; width: auto !important; padding: 10px 20px !important; font-size: 11px !important; }

.demo-banner-shrink {
    flex-shrink: 0;
}

/* STATUS DOTS */
.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 0;
    margin-right: 6px;
    flex-shrink: 0;
    cursor: help;
    border: 1.5px solid rgba(255,255,255,0.1);
}

.status-dot.status-gereed { 
    background-color: #22c55e !important; 
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

.status-dot.status-ingediend, 
.status-dot.status-in-behandeling { background-color: #f59e0b !important; }

.status-dot.status-afgekeurd, 
.status-dot.status-mislukt,
.status-dot.status-error { background-color: #ef4444 !important; }

.status-dot.status-draft,
.status-dot.status-concept { background-color: rgba(255,255,255,0.25) !important; }

.status-dot.status-geannuleerd { background-color: #6b7280 !important; }

#workspace-pane.is-tiles .status-badge {
    display: none !important;
}

#workspace-pane:not(.is-tiles) .status-dot {
    display: inline-block !important;
}

/* Upgrade banner (o.a. in Delen-modal) */
.share-upgrade-banner {
    margin: 8px 32px 0;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(204, 255, 0, 0.08), rgba(204, 255, 0, 0.02));
    border: 1px solid rgba(204, 255, 0, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 16px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}

.detail-header .status-badge {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-badge);
    border-radius: var(--radius-md);
    line-height: 1.2;
    font-weight: 700;
}


.workspace-search-wrap .search-input-inner {
    position: relative;
    width: 100%;
}

.workspace-search-wrap .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--color-text-muted);
    pointer-events: none;
}

.workspace-search-wrap input {
    width: 100%;
    height: 32px;
    background: var(--color-bg-alpha-05);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0 12px 0 32px;
    font-size: 12px;
    color: var(--color-text-main);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.workspace-search-wrap input:focus {
    background: var(--color-bg-alpha-10);
    border-color: var(--color-brand);
    outline: none;
    box-shadow: 0 0 0 2px rgba(204, 255, 0, 0.1);
}

.workspace-search-wrap input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.6;
}

:root {
    --base: 8px;
    --phi: 1.618;
    
    /* Matte canvas - zelfde als KLIC Drive (#121212) */
    --color-bg-deep: #121212;
    --color-bg-surface: #1a1a1a;
    --color-bg-card: #1e1e1e;
    --color-border: #2a2a2a;
    --color-border-hover: #444444;
    --color-text-main: #E5E7EB;
    --color-text-dim: #9CA3AF;
    --color-text-muted: #6B7280;
    --color-brand: #CCFF00;
    --color-success: #CCFF00;
    --color-success-bg: rgba(204, 255, 0, 0.1);
    --color-success-border: rgba(204, 255, 0, 0.2);
    --color-warning: #FF6B00;
    
    /* Top Bar Height */
    --top-bar-height: 48px;
    --mobile-top-bar-height: 64px;
    
    /* Radii - Precision first */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-control: 18px;
    /* Project header: Delen / Verleng - strakke hoeken, geen pill-vorm */
    --radius-action-btn: 8px;

    /* Alpha backgrounds - Dark Mode */
    --color-bg-alpha-02: rgba(255,255,255,0.02);
    --color-bg-alpha-05: rgba(255,255,255,0.05);
    --color-bg-alpha-10: rgba(255,255,255,0.1);
}

/* PRO BADGE - Legacy small label */
.pro-badge {
    background: linear-gradient(135deg, #CCFF00 0%, #99FF00 100%);
    color: #000;
    font-size: 9px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    text-transform: none;
    box-shadow: 0 4px 12px rgba(204, 255, 0, 0.3);
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    line-height: 1;
    flex-shrink: 0;
    animation: proPulse 2s infinite ease-in-out;
}

@keyframes proPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(204, 255, 0, 0.3); }
    50% { transform: scale(1.05); box-shadow: 0 6px 16px rgba(204, 255, 0, 0.5); }
}

.btn-coming-soon {
    filter: grayscale(1) opacity(0.5);
    pointer-events: none !important;
    position: relative;
    cursor: not-allowed !important;
}

.btn-coming-soon::after {
    content: "COMING SOON";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-5deg);
    background: #FF5F1F;
    color: var(--color-text-main);
    font-size: 8px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    z-index: 10;
    box-shadow: none;
    white-space: nowrap;
    filter: none !important;
    opacity: 1 !important;
}

/* Chic Toggle Switch */
.switch-chic {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.switch-chic input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-chic {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-bg-alpha-10);
    transition: .4s;
    border-radius: 20px;
    border: 1px solid var(--color-border);
}

.slider-chic:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: var(--color-text-dim);
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider-chic {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
}

input:checked + .slider-chic:before {
    transform: translateX(16px);
    background-color: #000;
}

@media (max-width: 1023px) {
    .mobile-only { display: flex !important; }
}

.file-drop-overlay { position: absolute; inset: 0; background: rgba(204, 255, 0, 0.1); border: 3px dashed var(--color-brand); z-index: 100; display: none; align-items: center; justify-content: center; }

.file-drop-overlay.active { display: flex; }

body.light-mode {
    /* Light mode: duidelijk contrast tussen grijstinten + oranje merk (geen lime) */
    --color-bg-deep: #E8EAEF;
    --color-bg-surface: #DCDEE5;
    --color-bg-card: #FFFFFF;
    --color-border: #B8BDC8;
    --color-border-hover: #9DA3AE;
    --color-text-main: #111318;
    --color-text-dim: #3D424A;
    --color-text-muted: #5C6169;
    --color-brand: #FF5F1F;
    --color-success: #FF5F1F;
    --color-success-bg: rgba(255, 95, 31, 0.08);
    --color-success-border: rgba(255, 95, 31, 0.22);

    --color-bg-alpha-02: rgba(0,0,0,0.03);
    --color-bg-alpha-05: rgba(0,0,0,0.06);
    --color-bg-alpha-10: rgba(0,0,0,0.09);

    color: var(--color-text-main);
}

/* Light mode: geen lime-accenten; oranje + hover-states die nog op #CCFF00 stonden */
body.light-mode .text-klicbot-green { color: var(--color-brand) !important; }

body.light-mode .package-file-row:hover .file-icon {
    color: var(--color-brand);
    background: rgba(255, 95, 31, 0.08);
    border-color: rgba(255, 95, 31, 0.22);
}

body.light-mode .file-row-compact:hover .file-row-icon {
    color: var(--color-brand);
}

body.light-mode .btn-precision:hover i {
    color: var(--color-brand);
}

body.light-mode .btn-precision-brand {
    background: rgba(255, 95, 31, 0.06);
    border-color: rgba(255, 95, 31, 0.2);
    color: var(--color-brand);
}

body.light-mode .btn-precision-brand:hover {
    background: rgba(255, 95, 31, 0.11);
    border-color: rgba(255, 95, 31, 0.35);
}

body.light-mode .btn-precision-brand i {
    color: var(--color-brand) !important;
}

body.light-mode .btn-precision-primary {
    background: var(--color-brand);
    color: #000 !important;
    border-color: var(--color-brand);
}

body.light-mode .btn-precision-primary:hover {
    background: #e5551c;
    border-color: #e5551c;
    box-shadow: 0 0 20px rgba(255, 95, 31, 0.25);
}

body.light-mode .btn-precision-primary i {
    color: #000 !important;
}

body.light-mode .renew-split-btn[data-auto-renew="true"] {
    border-color: rgba(255, 95, 31, 0.35);
}

body.light-mode .renew-split-btn[data-auto-renew="true"] .renew-split-chevron {
    background: rgba(255, 95, 31, 0.08);
    color: var(--color-brand);
    border-left-color: rgba(255, 95, 31, 0.2);
}

body.light-mode .renew-split-btn[data-auto-renew="true"] .renew-split-chevron:hover {
    background: rgba(255, 95, 31, 0.14);
}

body.light-mode .map-viewer-btn:hover:not(:disabled) {
    background: #ff7a45;
    filter: brightness(1.02);
}

body.light-mode .workspace-search-wrap input:focus {
    box-shadow: 0 0 0 2px rgba(255, 95, 31, 0.22);
    border-color: rgba(255, 95, 31, 0.45);
}

body.light-mode #preview-map-3d,
body.light-mode #preview-3d-skeleton {
    background: #E4E6EB !important;
}

body.light-mode #preview-3d-progress {
    background: rgba(255, 95, 31, 0.88) !important;
}

body.light-mode #project-3d-btn.active {
    background: rgba(255, 95, 31, 0.14) !important;
    color: var(--color-brand) !important;
    border-color: rgba(255, 95, 31, 0.4) !important;
}

body.light-mode .role-badge-pill.owner,
body.light-mode .role-badge-pill.eigenaar {
    background: rgba(255, 95, 31, 0.12) !important;
}

body.light-mode .role-badge-pill.co-owner,
body.light-mode .role-badge-pill.mede-eigenaar {
    background: rgba(255, 95, 31, 0.08) !important;
}

.beta-badge {
    font-size: 8px;
    font-weight: 900;
    background: #CCFF00;
    color: #000;
    padding: 1px 4px;
    border-radius: 3px;
    letter-spacing: 0.05em;
    line-height: 1;
    margin-left: 4px;
    text-transform: none;
}

body.light-mode .beta-badge {
    background: #FF5F1F !important;
    color: var(--color-text-main) !important;
}

.card-info-icon {
    font-size: 15px;
    line-height: 1;
    opacity: 0.7;
    cursor: pointer;
    transition: color 0.2s ease, opacity 0.2s ease;
    margin: 0;
    color: var(--color-text-dim, var(--color-text-muted));
    vertical-align: middle;
    flex-shrink: 0;
    padding: 6px;
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
}

.card-info-icon:hover,
.card-info-icon:focus-visible {
    opacity: 1;
    color: var(--color-text-main);
    background: transparent;
    outline: none;
}

body.light-mode .card-info-icon:hover,
body.light-mode .card-info-icon:focus-visible {
    background: transparent;
}

body.light-mode .logo-animated-svg .logo-bubble path {
    fill: #FF5F1F !important;
}

body.light-mode .user-avatar-small,
body.light-mode #new-project-name,
body.light-mode #new-project-address,
body.light-mode .map-mode-btn:hover,
body.light-mode .card-header,
body.light-mode .item-avatar,
body.light-mode .team-switcher,
body.light-mode .notification-trigger:hover,
body.light-mode .sidebar-nav-item.active,
body.light-mode .role-option {
    background: #FFFFFF !important;
    border-bottom-color: #E5E7EB !important;
}

body.light-mode .role-option.active {
    background: rgba(255, 95, 31, 0.05) !important;
    border-color: var(--color-brand) !important;
    box-shadow: 0 0 0 1px var(--color-brand) !important;
}

body.light-mode .safety-notice-item,
body.light-mode .dropdown-menu,
body.light-mode .modal-content,
body.light-mode .share-option,
body.light-mode .team-share-item,
body.light-mode .team-share-avatar,
body.light-mode .link-copy-box,
body.light-mode .notification-dropdown {
    background: #FFFFFF !important;
}

body.light-mode .dropdown-item:hover,
body.light-mode .share-option:hover,
body.light-mode .team-share-item:hover,
body.light-mode .notification-item:hover,
body.light-mode .sidebar-nav-item:hover,
body.light-mode .btn-pdf:hover,
body.light-mode .btn-share:hover,
body.light-mode .map-mode-btn:hover,
body.light-mode .user-trigger:hover,
body.light-mode .role-option:hover,
body.light-mode .team-switcher:hover {
    background: #F2F2F7 !important;
    color: #000 !important;
}

body.light-mode .team-dropdown-btn {
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.08) !important;
    color: rgba(0,0,0,0.6) !important;
}

body.light-mode .team-switcher:hover .team-dropdown-btn {
    background: rgba(0,0,0,0.08) !important;
    border-color: rgba(0,0,0,0.12) !important;
    color: #000 !important;
}

body.light-mode .sidebar-nav-item:hover i,
body.light-mode .dropdown-item:hover i,
body.light-mode .btn-pdf:hover i,
body.light-mode .btn-share:hover i,
body.light-mode .share-option:hover span,
body.light-mode .team-share-item:hover div {
    color: #000 !important;
}

body.light-mode .item-avatar,
body.light-mode .notification-item,
body.light-mode .card,
body.light-mode .top-bar-desktop,
body.light-mode .search-header,
body.light-mode .role-option,
body.light-mode .safety-notice-item,
body.light-mode .dropdown-menu,
body.light-mode .modal-content,
body.light-mode .dropdown-divider,
body.light-mode .share-option,
body.light-mode .link-copy-box,
body.light-mode .modal-header,
body.light-mode .notification-dropdown,
body.light-mode .dropdown-header {
    border-color: #E5E5EA !important;
}

body.light-mode .dropdown-menu,
body.light-mode .modal-content,
body.light-mode .notification-dropdown {
    box-shadow: none !important;
}

body.light-mode .modal-backdrop {
    background: rgba(255, 255, 255, 0.5) !important;
}

body.light-mode .modal-backdrop:not(.open) {
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}

body.light-mode .modal-backdrop.open {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.light-mode .share-option i {
    background: #F2F2F7 !important;
    color: #000 !important;
}

body.light-mode .link-copy-box {
    background: #F9FAFB !important;
}

body.light-mode .btn-share {
    background-color: transparent !important;
    color: #000 !important;
    border-color: #D1D1D6 !important;
}

body.light-mode .btn-2d {
    background-color: #F2F2F7 !important;
    color: #000 !important;
    border-color: #D1D1D6 !important;
}

body.light-mode .btn-primary {
    background: var(--color-brand) !important;
    color: #FFFFFF !important;
}

body.light-mode .floating-map-btn {
    background: #FFFFFF !important;
    color: var(--color-brand) !important;
    border: 1px solid var(--color-border) !important;
}

body.light-mode .btn-precision {
    background: #F2F2F7 !important;
    color: #000 !important;
    border-color: #D1D1D6 !important;
}

body.light-mode .btn-precision i {
    color: #666 !important;
}

body.light-mode .safety-notice-item.checked {
    border-color: var(--color-brand) !important;
    background: rgba(255, 95, 31, 0.1) !important;
}

body.light-mode .notification-dot,
body.light-mode .notification-dot-red {
    background: var(--color-brand) !important;
}

body.light-mode .wibon-badge {
    color: var(--color-brand) !important;
    border-color: rgba(255, 95, 31, 0.2) !important;
    background: rgba(255, 95, 31, 0.05) !important;
}

body.light-mode .btn-secondary-text {
    color: var(--color-text-main) !important;
}

body.light-mode .card-action-btn {
    background: #F2F2F7 !important;
    color: #000 !important;
}

body.light-mode .demo-banner {
    background: #FFF9E5 !important;
    color: #856404 !important;
    border-color: #FFEEBA !important;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    justify-content: flex-end;
}

.header-ui-group, .header-folder-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-action-divider {
    width: 1px;
    height: 24px;
    background: var(--color-border);
    margin: 0 4px;
    opacity: 0.6;
}

.btn-icon-subtle {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-dim);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon-subtle:hover {
    background: var(--color-bg-alpha-05);
    color: var(--color-text-main);
    border-color: var(--color-border-hover);
}

.btn-icon-subtle i {
    font-size: 12px;
}

/* Header action: alleen pictogrammen, geen kader - merkgeel (o.a. Genodigden + helmpje) */
.btn-header-icon-only {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 4px 6px;
    margin: 0;
    color: var(--color-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s ease, transform 0.12s ease;
}
.btn-header-icon-only:hover,
.btn-header-icon-only:focus-visible {
    background: none !important;
    border: none !important;
    color: var(--color-brand);
    opacity: 0.9;
    outline: none;
}
.btn-header-icon-only__stack {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-brand);
}
.btn-header-icon-only__helmet {
    font-size: 16px;
    color: var(--color-brand);
}
.btn-header-icon-only__plus {
    position: absolute;
    top: -4px;
    right: -5px;
    font-size: 8px;
    line-height: 1;
    color: var(--color-brand) !important;
    -webkit-text-stroke: 0.55px var(--color-brand);
    text-shadow: 0.4px 0 0 var(--color-brand);
    background: none !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    font-weight: 900;
}

.form-input-chic {
    width: 100%;
    background-color: var(--color-bg-deep);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 12px 16px;
    color: var(--color-text-main);
    font-size: 14px;
    outline: none;
    transition: all 0.2s;
}

select.form-input-chic:not([multiple]):not([size]) {
    padding-inline-end: var(--select-native-pad-r, 5rem);
    -webkit-padding-end: var(--select-native-pad-r, 5rem);
}

.flex-1 { flex: 1; }

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { 
    height: 100%; 
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; 
    background-color: var(--color-bg-deep); 
    color: var(--color-text-main); 
    overflow: hidden; 
    transition: background-color 0.2s, color 0.2s; 
    letter-spacing: 0.01em; 
}

/* Typography adjustments */
h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; }

/* APP LAYOUT */
.app-container { 
    display: flex; 
    flex-direction: row; 
    height: 100vh; 
    height: 100dvh; /* Safari dynamic viewport support */
    width: 100%;
    background-color: var(--color-bg-deep); 
    position: relative; 
    overflow: hidden;
    /* Fill safe-area insets so no black bars appear on notched devices */
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* Dashboard: native <select> — custom chevron, géén OS-styling (lijnt met sidebar org-switcher) */
select:not([multiple]):not([size]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: var(--select-chic-chevron);
    background-repeat: no-repeat;
    background-position: right max(12px, 0.85rem) center;
    background-size: 0.625rem 0.375rem;
    padding-inline-end: var(--select-native-pad-r, 2.75rem) !important;
    -webkit-padding-end: var(--select-native-pad-r, 2.75rem) !important;
    cursor: pointer;
}

select:not([multiple]):not([size])::-ms-expand {
    display: none;
}

body.light-mode select:not([multiple]):not([size]) {
    background-image: var(--select-chic-chevron-lm);
}

.view-header {
    padding: var(--space-xl) var(--dash-page-gutter-x) 0; /* zelfde inset als .team-header / Drive */
    margin-bottom: var(--space-xl); /* 28px */
}
/* Desktop: bovenkant titel = bovenkant org-dropdown (topbar + --dash-title-pad-top) */
@media (min-width: 1024px) {
    .view-header {
        padding-top: var(--dash-title-pad-top, 12px);
    }
}

/* Page title + subtitle - align with Instellingen (settings hub): compact, high contrast */
.dash-page-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0 0 4px;
    padding: 0 2px 0 0;
    line-height: 1.25;
}
.dash-page-sub {
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-dim, #6b7280);
    margin: 0;
    max-width: 46rem;
}
body.light-mode .dash-page-title {
    color: var(--color-text-main, #111318);
}
body.light-mode .dash-page-sub {
    color: var(--color-text-dim, #3d424a);
}

/* PROJECT PREVIEW METADATA - φ-based rhythm */
.metadata-row-preview {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-top: 14px;
    width: 100%;
    flex-wrap: wrap;
}

@media (min-width: 1024px) {
    .metadata-row-preview {
        flex-wrap: nowrap;
        gap: var(--space-md);
    }
}

.metadata-badge-preview {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
    white-space: nowrap;
    font-size: var(--text-badge);
    line-height: 1.3;
    font-weight: 600;
}

.metadata-badge-preview i {
    font-size: 0.9em;
    opacity: 0.7;
}

.metadata-badge-preview.type-badge {
    background: var(--color-bg-alpha-05);
}

.metadata-badge-preview.type-badge span {
    font-weight: 700;
    color: var(--color-text-main);
    text-transform: none;
    letter-spacing: 0.05em;
}

.metadata-badge-preview.type-badge i {
    color: var(--color-text-dim);
    opacity: 0.8;
}

.metadata-badge-preview.info-badge {
    background: var(--color-bg-alpha-02);
    font-weight: 500;
}

.metadata-badge-preview.info-badge span {
    color: var(--color-text-dim);
}

.metadata-badge-preview.info-badge i {
    color: var(--color-text-dim);
    opacity: 0.5;
}

.metadata-badge-preview.info-badge .label-text {
    opacity: 0.6;
}

.metadata-badge-preview.end-date-badge i {
    opacity: 0.7;
}

/* Volgorde: destruction-day pill | divider | verleng button */
.metadata-row-preview .metadata-divider { order: 2; }

.metadata-row-preview .metadata-actions-group { order: 3; }

.metadata-row-preview .retention-badge { order: 1; }

.metadata-actions-group {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-shrink: 0;
    padding-left: var(--space-md);
    border-left: 1px solid var(--color-border);
}

.metadata-action-btn {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-action-btn);
    border: 1px solid var(--color-border-hover);
    background: var(--color-bg-alpha-05);
    color: var(--color-text-main);
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-badge);
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.2;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.metadata-action-btn i {
    font-size: 0.9em;
    opacity: 1;
    color: inherit;
}

.metadata-action-btn:hover {
    background: var(--color-success-bg);
    border-color: var(--color-brand);
}

.metadata-action-btn:active {
    transform: translateY(1px);
}

a.metadata-action-btn {
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.metadata-action-btn--viewer {
    border-color: rgba(204, 255, 0, 0.35);
    background: rgba(204, 255, 0, 0.07);
}

.metadata-action-btn--viewer:hover {
    background: rgba(204, 255, 0, 0.14);
    border-color: var(--color-brand);
}

.project-risk-card {
    margin-top: 0;
}

.project-risk-card.card-collapsible .detail-section-header {
    height: auto !important;
    min-height: 48px;
    cursor: pointer;
    align-items: flex-start !important;
    /* Zelfde visuele inset boven/onder als enkelregel headers (48px hoog, inhoud gecentreerd ≈ 14px) */
    padding: 14px 20px !important;
}

.project-risk-card.card-collapsible .detail-section-header .chevron {
    align-self: center;
    margin-top: 0;
}

.project-risk-card .detail-section-title.project-risk-card-title {
    white-space: normal !important;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
}

.project-risk-card .project-risk-card-title-label {
    font-weight: 600;
    color: var(--color-text-main);
}

.project-risk-card .project-risk-card-title-cluster {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}

.project-risk-card .project-risk-card-title-meta {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: none;
    line-height: 1.25;
}

.project-risk-card .detail-section-content.project-risk-card-body {
    padding-top: 20px;
}

.project-risk-score-block {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 4px;
}

.project-risk-score-ring {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid var(--risk-color, #6b7280);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.02);
}

.project-risk-score-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--risk-color, var(--color-text-main));
    line-height: 1;
}

.project-risk-score-details {
    flex: 1;
    min-width: 0;
}

.project-risk-score-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-dim);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.project-risk-component-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.project-risk-component {
    display: grid;
    grid-template-columns: 72px 1fr 28px;
    align-items: center;
    gap: 8px;
}

.project-risk-component-name {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--color-text-dim);
}

.project-risk-info-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
    z-index: 2;
}

.project-risk-info-tip.active {
    z-index: 100050;
}

.project-risk-info-tip .card-info-icon {
    font-size: 10px;
    opacity: 0.55;
}

.project-risk-info-tip:hover .card-info-icon,
.project-risk-info-tip.active .card-info-icon {
    opacity: 1;
}

/* Onder het icoon (niet boven) — blijft binnen de card, geen clip door overflow:hidden */
.project-risk-info-tip .info-tooltip.project-risk-info-tooltip {
    top: calc(100% + 8px);
    bottom: auto;
    left: 0;
    width: min(300px, calc(100vw - 48px));
    z-index: 100050;
    transform: translateX(0) translateY(-4px);
}

.project-risk-info-tip:hover .info-tooltip.project-risk-info-tooltip,
.project-risk-info-tip.active .info-tooltip.project-risk-info-tooltip {
    transform: translateX(0) translateY(0);
}

.project-risk-info-tip .info-tooltip.project-risk-info-tooltip::after {
    top: -12px;
    bottom: auto;
    left: 10px;
    transform: none;
    border-top-color: transparent;
    border-bottom-color: var(--color-border);
}

.project-risk-card:has(.project-risk-info-tip:hover),
.project-risk-card:has(.project-risk-info-tip.active) {
    overflow: visible !important;
    z-index: 10003 !important;
}

.project-risk-card:has(.project-risk-info-tip:hover) .project-risk-card-body,
.project-risk-card:has(.project-risk-info-tip.active) .project-risk-card-body {
    overflow: visible !important;
}

.project-risk-bar-track {
    height: 5px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.project-risk-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.project-risk-bar-hist {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.project-risk-bar-imkl {
    background: linear-gradient(90deg, #f97316, #fb923c);
}

.project-risk-component-val {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-main);
    text-align: right;
}

.project-risk-section-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--color-text-dim);
    margin: 12px 0 6px;
}

.project-risk-score-block + .project-risk-flags-mount .project-risk-section-label,
.project-risk-score-block + .project-risk-history-block .project-risk-section-label {
    margin-top: 10px;
}

.project-risk-flags-list,
.project-risk-factors-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.project-risk-flag {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11px;
    line-height: 1.35;
    padding: 2px 0;
    color: var(--color-text-dim);
}

.project-risk-flag i {
    margin-top: 1px;
    flex-shrink: 0;
    width: 12px;
    text-align: center;
}

.project-risk-flag-critical {
    color: #fca5a5;
}

.project-risk-flag-warning {
    color: #fdba74;
}

.project-risk-flag-info {
    color: var(--color-text-dim);
}

.project-risk-history-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
}

.project-risk-stat {
    min-width: 72px;
}

.project-risk-stat-val {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-main);
    line-height: 1.2;
}

.project-risk-stat-label {
    display: block;
    font-size: 9px;
    color: var(--color-text-dim);
    margin-top: 1px;
}

.project-risk-trend-stijgend { color: #f97316; }
.project-risk-trend-dalend { color: #22c55e; }
.project-risk-trend-stabiel { color: var(--color-text-dim); }

.project-risk-data-note {
    margin: 8px 0 0;
    font-size: 9px;
    color: var(--color-text-dim);
    opacity: 0.75;
    line-height: 1.4;
}

.project-risk-heatmap-toggle {
    margin-top: 8px;
}

.project-risk-heatmap-btn {
    width: 100%;
    font-size: 11px;
    padding: 8px 12px;
}

.project-risk-heatmap-btn.active {
    background: rgba(249, 115, 22, 0.15);
    border-color: rgba(249, 115, 22, 0.4);
    color: #fdba74;
}

.project-risk-factors-list li {
    font-size: 11px;
    color: var(--color-text-dim);
    line-height: 1.45;
    padding-left: 14px;
    position: relative;
}

.project-risk-factors-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-text-muted);
}

.project-risk-research-note {
    margin: 8px 0 0;
    font-size: 10px;
    color: var(--color-text-dim);
    opacity: 0.75;
    font-style: italic;
}

@media (max-width: 1023px) {
    .project-risk-score-block {
        flex-wrap: wrap;
    }
    .project-risk-history-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.auto-renew-preview-wrap {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-shrink: 0;
}

.auto-renew-preview-wrap span {
    font-size: var(--text-badge);
    font-weight: 700;
    color: var(--color-text-main);
    text-transform: none;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

/* === RENEW SPLIT BUTTON === */
.renew-split-btn {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    border-radius: var(--radius-action-btn);
    border: 1px solid var(--color-border-hover);
    overflow: visible;
    flex-shrink: 0;
}

.renew-split-main {
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-alpha-05);
    color: var(--color-text-main);
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-badge);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.08em;
    border: none;
    border-radius: var(--radius-action-btn) 0 0 var(--radius-action-btn);
    cursor: pointer;
    transition: background 0.15s;
}

@media (hover: hover) { .renew-split-main:hover { background: var(--color-success-bg); } }

.renew-split-main i { font-size: 0.9em; opacity: 1; color: inherit; }

.renew-split-chevron {
    padding: var(--space-md) 9px;
    background: var(--color-bg-alpha-05);
    border: none;
    border-left: 1px solid var(--color-border-hover);
    border-radius: 0 var(--radius-action-btn) var(--radius-action-btn) 0;
    color: var(--color-text-main);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
}

@media (hover: hover) { .renew-split-chevron:hover { background: var(--color-success-bg); color: var(--color-text-main); } }

.renew-split-chevron i { font-size: 9px; transition: transform 0.2s; opacity: 1; color: inherit; }

.renew-split-btn.dropdown-open .renew-split-chevron i { transform: rotate(180deg); }

.renew-auto-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-brand);
    flex-shrink: 0;
    box-shadow: 0 0 6px var(--color-brand);
}

/* Active auto-renew state: green border + tinted chevron half */
.renew-split-btn[data-auto-renew="true"] {
    border-color: rgba(204, 255, 0, 0.35);
}

.renew-split-btn[data-auto-renew="true"] .renew-split-chevron {
    background: rgba(204, 255, 0, 0.08);
    color: var(--color-brand);
    border-left-color: rgba(204, 255, 0, 0.2);
    gap: 5px;
}

/* Als Verleng-knop wegvalt (auto aan): chevron wordt volledige button */
.renew-split-chevron.renew-split-chevron-only {
    border-left: none;
    border-radius: var(--radius-action-btn);
    padding: var(--space-md) var(--space-lg);
}

.renew-split-btn[data-auto-renew="true"] .renew-split-chevron:hover {
    background: rgba(204, 255, 0, 0.15);
}

.renew-chevron-auto-icon {
    font-size: 9px;
    animation: renewSpin 3s linear infinite;
}

.renew-chevron-auto-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: none;
}

.renew-chevron-arrow {
    font-size: 9px;
    transition: transform 0.2s;
}

.renew-split-btn.dropdown-open .renew-chevron-arrow { transform: rotate(180deg); }

@keyframes renewSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.renew-split-btn.dropdown-open .renew-dropdown { display: block; }

/* Scaling for smaller desktops - keep φ rhythm */
@media (max-width: 1366px) {
    .metadata-row-preview { gap: var(--space-md); }
    .metadata-badge-preview { padding: var(--space-sm) var(--space-md); font-size: 10px; }
    .metadata-actions-group { padding-left: var(--space-md); gap: var(--space-md); }
    .metadata-action-btn { padding: var(--space-sm) var(--space-md); }
    .auto-renew-preview-wrap span { font-size: 10px; }
}

@media (max-width: 1200px) {
    .metadata-row-preview { gap: var(--space-sm); }
    .metadata-badge-preview { padding: var(--space-sm) var(--space-md); font-size: 10px; }
    .metadata-actions-group { padding-left: var(--space-md); gap: var(--space-sm); }
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0; /* Prevent flex items from overflowing */
    overflow-y: auto;
    background: var(--color-bg-deep);
    position: relative;
}
/* Kaart: geen verticale scroll in main; voorkomt dat kaart+HUD onder sticky topbar (z-60000) wegrollen */
.main-content:has(#view-map.view-container.active) {
    overflow: hidden !important;
    min-height: 0;
}
.dashboard-map-page .main-content {
    overflow: hidden !important;
    min-height: 0;
}
.main-content:has(#view-map.view-container.active) .view-body-wrapper,
.dashboard-map-page .view-body-wrapper {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
}

/* Hoofdvlak: vlak canvas (geen bewegende neon-blobs); eerste paint = HTML/CSS skeleton tot boot */
.view-body-wrapper {
    position: relative;
    isolation: isolate;
    background-color: var(--color-bg-deep);
    min-height: 0;
}
.view-body-wrapper > * {
    position: relative;
    z-index: 1;
}

/* Eerste paint: statische skeleton (zelfde tokens als .skeleton-static), verdwijnt na klic-dashboard-booted */
.view-body-wrapper > .dashboard-initial-skeleton,
#dashboard-initial-skeleton.dashboard-initial-skeleton {
    z-index: 2;
}
.dashboard-initial-skeleton {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 10px 12px 14px;
    box-sizing: border-box;
    background: var(--color-bg-deep);
    pointer-events: none;
    transition:
        opacity 0.22s ease,
        visibility 0.22s ease;
}
/* ── Overview-eerste paint: zelfde grid + KPI + cards als #view-overview ── */
.dashboard-initial-skeleton--overview .dis-ov-skel {
    padding-left: max(var(--dash-page-gutter-x), env(safe-area-inset-left, 0px));
    padding-right: max(var(--dash-page-gutter-x), env(safe-area-inset-right, 0px));
    padding-top: var(--space-xl, 28px);
    padding-bottom: var(--space-xl);
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    flex: 1;
    overflow: hidden;
}
@media (min-width: 1024px) {
    .dashboard-initial-skeleton--overview .dis-ov-skel {
        padding-left: max(32px, var(--dash-page-gutter-x), env(safe-area-inset-left, 0px));
        padding-right: max(32px, var(--dash-page-gutter-x), env(safe-area-inset-right, 0px));
        padding-top: calc(var(--dash-title-pad-top, 12px) + var(--space-md, 11px));
    }
}
.dashboard-initial-skeleton--overview .dis-ov-skel .dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: stretch;
    padding: 0 0 16px 0;
    box-sizing: border-box;
}
@media (min-width: 1024px) {
    .dashboard-initial-skeleton--overview .dis-ov-skel .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 0 22px 0;
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}
.dashboard-initial-skeleton--overview .dis-ov-skel-kpi {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 0;
}
.dashboard-initial-skeleton--overview .dis-ov-skel-tile {
    flex: 1;
    min-width: 100px;
    min-height: 72px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: transparent;
    padding: 8px 11px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-sizing: border-box;
}
.dashboard-initial-skeleton--overview .dis-ov-skel-tile--narrow {
    min-width: 88px;
}
.dashboard-initial-skeleton--overview .dis-ov-ico {
    display: block;
    width: 22px;
    height: 10px;
    border-radius: 3px;
    opacity: 0.4;
    margin-bottom: 2px;
}
.dashboard-initial-skeleton--overview .dis-ov-val {
    display: block;
    width: 48%;
    min-width: 40px;
    max-width: 64px;
    height: 18px;
    border-radius: 4px;
}
.dashboard-initial-skeleton--overview .dis-ov-val--sm {
    max-width: 52px;
    height: 16px;
}
.dashboard-initial-skeleton--overview .dis-ov-lbl {
    display: block;
    width: 56%;
    height: 8px;
    border-radius: 2px;
    opacity: 0.5;
    margin-top: 2px;
}
/* LED-lichtkrant skeleton: zeer subtiele balk - ticker zelf is card-loos */
.dashboard-initial-skeleton--overview .dis-ov-skel-ticker {
    grid-column: 1 / -1;
    margin: 0 0 4px;
}
.dashboard-initial-skeleton--overview .dis-ov-skel-ticker-bar {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
    opacity: 0.6;
}
.dashboard-initial-skeleton--overview .dis-ov-skel-quad {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: 0;
    align-items: stretch;
}
.dashboard-initial-skeleton--overview .dis-ov-skel-q {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}
.dashboard-initial-skeleton--overview .dis-ov-skel-q--map {
    order: 1;
}
.dashboard-initial-skeleton--overview .dis-ov-skel-q--recent {
    order: 2;
}
.dashboard-initial-skeleton--overview .dis-ov-skel-q--activity {
    order: 3;
}
.dashboard-initial-skeleton--overview .dis-ov-skel-q--tools {
    order: 4;
}
@media (min-width: 1024px) {
    .dashboard-initial-skeleton--overview .dis-ov-skel-quad {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        /* Skeleton spiegelt de echte overview-quadrant-grid: rij-hoogte
         * content-driven (sinds Spoed-card weg en activity = top-5). */
        grid-template-rows: auto auto;
        gap: 20px;
        min-height: 0;
    }
    .dashboard-initial-skeleton--overview .dis-ov-skel-q--map,
    .dashboard-initial-skeleton--overview .dis-ov-skel-q--recent,
    .dashboard-initial-skeleton--overview .dis-ov-skel-q--activity,
    .dashboard-initial-skeleton--overview .dis-ov-skel-q--tools {
        order: 0;
    }
}
.dashboard-initial-skeleton--overview .dis-ov-skel-tools-stack {
    gap: 18px;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
@media (min-width: 1024px) {
    .dashboard-initial-skeleton--overview .dis-ov-skel-tools-stack {
        gap: 20px;
    }
}
.dashboard-initial-skeleton--overview .dis-ov-skel-card--spoed {
    display: none;
}
@media (min-width: 1024px) {
    .dashboard-initial-skeleton--overview .dis-ov-skel-card--spoed {
        display: flex;
    }
}
.dashboard-initial-skeleton--overview .dis-ov-skel-spoed-btns {
    padding: 10px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dashboard-initial-skeleton--overview .dis-ov-spoed-pill {
    display: block;
    width: 100%;
    height: 44px;
    border-radius: 10px;
    opacity: 0.28;
}
.dashboard-initial-skeleton--overview .dis-ov-spoed-pill--short {
    max-width: 92%;
}
.dashboard-initial-skeleton--overview .dis-ov-skel-recent {
    padding: 12px 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    flex: 1;
    min-height: 0;
}
.dashboard-initial-skeleton--overview .dis-ov-line--narrow {
    max-width: 160px;
    opacity: 0.35;
}
.dashboard-initial-skeleton--overview .dis-ov-skel-col {
    gap: 18px;
    min-height: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}
@media (min-width: 1024px) {
    .dashboard-initial-skeleton--overview .dis-ov-skel-col {
        gap: 20px;
    }
}
.dashboard-initial-skeleton--overview .dis-ov-skel-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.dashboard-initial-skeleton--overview .dis-ov-skel-ch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    min-height: 40px;
    border-bottom: 1px solid var(--color-border);
}
.dashboard-initial-skeleton--overview .dis-ov-ch-ico {
    width: 14px;
    height: 12px;
    border-radius: 2px;
    opacity: 0.35;
    flex-shrink: 0;
}
.dashboard-initial-skeleton--overview .dis-ov-ch-t {
    height: 11px;
    width: 38%;
    min-width: 72px;
    max-width: 120px;
    border-radius: 2px;
}
.dashboard-initial-skeleton--overview .dis-ov-ch-t--long {
    max-width: 200px;
    width: 60%;
}
.dashboard-initial-skeleton--overview .dis-ov-ch-t--chat {
    max-width: 100px;
    width: 32%;
}
.dashboard-initial-skeleton--overview .dis-ov-ch-i {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 4px;
    opacity: 0.25;
}
.dashboard-initial-skeleton--overview .dis-ov-skel-map {
    min-height: 160px;
    background: rgba(0, 0, 0, 0.22);
    margin: 0 12px 12px 12px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
}
@media (min-width: 1024px) {
    .dashboard-initial-skeleton--overview .dis-ov-skel-map {
        min-height: 200px;
    }
}
.dashboard-initial-skeleton--overview .dis-ov-skel-q--map .dis-ov-skel-card--map {
    flex: 1;
    min-height: 0;
}
@media (min-width: 1024px) {
    .dashboard-initial-skeleton--overview .dis-ov-skel-q--map .dis-ov-skel-map {
        flex: 1;
    }
}
.dashboard-initial-skeleton--overview .dis-ov-skel-q--recent .dis-ov-skel-card {
    flex: 1;
    min-height: 0;
}
@media (min-width: 1024px) {
    .dashboard-initial-skeleton--overview .dis-ov-skel-q--activity .dis-ov-skel-card--tall {
        flex: 1;
        min-height: 0;
    }
    .dashboard-initial-skeleton--overview .dis-ov-skel-q--tools .dis-ov-skel-card--chat {
        flex: 1;
        min-height: 0;
    }
}
.dashboard-initial-skeleton--overview .dis-ov-skel-body {
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}
.dashboard-initial-skeleton--overview .dis-ov-line {
    display: block;
    width: 100%;
    max-width: 200px;
    height: 11px;
    border-radius: 4px;
    opacity: 0.4;
}
.dashboard-initial-skeleton--overview .dis-ov-line--btn {
    max-width: 200px;
    height: 34px;
    border-radius: 8px;
    margin-top: 4px;
    opacity: 0.3;
}
.dashboard-initial-skeleton--overview .dis-ov-skel-card--tall {
    flex: 1 1 auto;
    min-height: 280px;
}
.dashboard-initial-skeleton--overview .dis-ov-skel-feed {
    padding: 8px 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 200px;
}
.dashboard-initial-skeleton--overview .dis-ov-skel-activity {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.dashboard-initial-skeleton--overview .dis-ov-ac-ico {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex-shrink: 0;
    opacity: 0.3;
}
.dashboard-initial-skeleton--overview .dis-ov-ac-txt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dashboard-initial-skeleton--overview .dis-ov-ac-u {
    display: block;
    width: 40%;
    height: 9px;
    border-radius: 2px;
    opacity: 0.5;
}
.dashboard-initial-skeleton--overview .dis-ov-ac-a {
    display: block;
    width: 100%;
    height: 8px;
    border-radius: 2px;
    opacity: 0.35;
}
.dashboard-initial-skeleton--overview .dis-ov-skel-invoice {
    padding: 6px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.dashboard-initial-skeleton--overview .dis-ov-skel-inv-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-bg-alpha-02, rgba(255, 255, 255, 0.04));
    gap: 8px;
}
.dashboard-initial-skeleton--overview .dis-ov-skel-inv-row:last-of-type {
    border-bottom: none;
}
.dashboard-initial-skeleton--overview .dis-ov-skel-inv-l {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.dashboard-initial-skeleton--overview .dis-iv-n {
    display: block;
    width: 100px;
    height: 9px;
    border-radius: 2px;
}
.dashboard-initial-skeleton--overview .dis-iv-d {
    display: block;
    width: 64px;
    height: 8px;
    border-radius: 2px;
    opacity: 0.45;
}
.dashboard-initial-skeleton--overview .dis-iv-amt {
    width: 44px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}
.dashboard-initial-skeleton--overview .dis-ov-cta {
    display: block;
    width: 100%;
    height: 32px;
    border-radius: 8px;
    margin-top: 8px;
    opacity: 0.28;
}
.dashboard-initial-skeleton--overview .dis-ov-skel-chat {
    padding: 12px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dashboard-initial-skeleton--overview .dis-ov-bubble {
    display: block;
    width: 88%;
    height: 12px;
    border-radius: 4px;
    opacity: 0.3;
}
.dashboard-initial-skeleton--overview .dis-ov-bubble--short {
    width: 55%;
}
body.light-mode .dashboard-initial-skeleton--overview .dis-ov-skel-card,
body.light-mode .dashboard-initial-skeleton--overview .dis-ov-skel-tile {
    background: rgba(255, 255, 255, 0.58);
    border-color: rgba(0, 0, 0, 0.08);
}
body.light-mode .dashboard-initial-skeleton--overview .dis-ov-skel-map {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

/* ── Instellingen (?tab=…):zelfde twee kolommen als .ksh-layout ── */
.dashboard-initial-skeleton--settings {
    display: block;
    padding: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.dashboard-initial-skeleton--settings .dis-set-skel {
    --dis-ksh-side: 260px;
    --dis-ksh-gap: 32px;
    min-height: calc(100vh - 100px);
    width: 100%;
    box-sizing: border-box;
}
.dashboard-initial-skeleton--settings .dis-set-skel-layout {
    display: flex;
    align-items: stretch;
    gap: var(--dis-ksh-gap);
    padding: var(--dash-title-pad-top, 12px) var(--dash-page-gutter-x) 40px;
    box-sizing: border-box;
    min-height: min(100vh, 900px);
}
.dashboard-initial-skeleton--settings .dis-set-skel-side {
    width: var(--dis-ksh-side);
    flex-shrink: 0;
    border-right: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
    padding: 0 20px 8px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}
.dashboard-initial-skeleton--settings .dis-set-skel-bars {
    display: block;
    margin-bottom: 2px;
}
.dashboard-initial-skeleton--settings .dis-set-skel-titlebar {
    display: block;
    width: 160px;
    height: 20px;
    border-radius: 6px;
    margin: 0 0 6px 0;
}
.dashboard-initial-skeleton--settings .dis-set-skel-subbar {
    display: block;
    width: 88%;
    max-width: 200px;
    height: 10px;
    border-radius: 4px;
    opacity: 0.65;
}
.dashboard-initial-skeleton--settings .dis-set-skel-search {
    margin: 4px 4px 8px 4px;
}
.dashboard-initial-skeleton--settings .dis-set-skel-search-fake {
    display: block;
    width: 100%;
    height: 36px;
    border-radius: 9999px;
    opacity: 0.45;
}
.dashboard-initial-skeleton--settings .dis-set-skel-nav {
    list-style: none;
    margin: 0;
    padding: 4px 0 0 0;
    flex: 1;
    min-height: 0;
}
.dashboard-initial-skeleton--settings .dis-set-skel-sep {
    margin: 0 0 4px 12px;
}
.dashboard-initial-skeleton--settings .dis-set-skel-sep-txt {
    display: block;
    width: 96px;
    height: 8px;
    border-radius: 2px;
    opacity: 0.4;
}
.dashboard-initial-skeleton--settings .dis-set-skel-navrow {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    border-radius: 8px;
    padding: 8px 10px 8px 12px;
    box-sizing: border-box;
    margin: 0 0 2px 0;
}
.dashboard-initial-skeleton--settings .dis-nr1 { width: 40%; min-width: 100px; height: 13px; border-radius: 4px; display: block; margin: 0 0 2px 0; }
.dashboard-initial-skeleton--settings .dis-nr1b { width: 55%; min-width: 100px; height: 13px; border-radius: 4px; display: block; margin: 0 0 2px 0; }
.dashboard-initial-skeleton--settings .dis-nr1c { width: 50%; min-width: 100px; height: 13px; border-radius: 4px; display: block; margin: 0 0 2px 0; }
.dashboard-initial-skeleton--settings .dis-nr1d { width: 48%; min-width: 100px; height: 13px; border-radius: 4px; display: block; margin: 0 0 2px 0; }
.dashboard-initial-skeleton--settings .dis-nr1e { width: 50%; min-width: 100px; height: 13px; border-radius: 4px; display: block; margin: 0 0 2px 0; }
.dashboard-initial-skeleton--settings .dis-nr2 {
    width: 72%;
    height: 11px;
    border-radius: 4px;
    display: block;
    opacity: 0.55;
}
.dashboard-initial-skeleton--settings .dis-set-skel-main {
    flex: 1 1 auto;
    min-width: 0;
    max-width: min(640px, 100%);
    padding: 4px 0 0 0;
    box-sizing: border-box;
}
.dashboard-initial-skeleton--settings .dis-set-skel-back {
    display: none;
    width: 100%;
    height: 20px;
    border-radius: 4px;
    margin-bottom: 4px;
    opacity: 0.4;
}
@media (max-width: 1023px) {
    .dashboard-initial-skeleton--settings .dis-set-skel-back {
        display: block;
    }
    .dashboard-initial-skeleton--settings .dis-set-skel-side {
        display: none;
    }
    .dashboard-initial-skeleton--settings .dis-set-skel-layout {
        flex-direction: column;
        gap: 12px;
        padding-top: 8px;
    }
    .dashboard-initial-skeleton--settings .dis-set-skel-main {
        max-width: 100%;
        padding: 8px 0 0 0;
    }
}
.dashboard-initial-skeleton--settings .dis-set-skel-pretitle {
    margin: 0 0 6px 0;
    line-height: 0;
    font-size: 0;
}
.dashboard-initial-skeleton--settings .dis-set-skel-h2 {
    display: inline-block;
    width: 140px;
    height: 22px;
    border-radius: 5px;
}
.dashboard-initial-skeleton--settings .dis-set-skel-pretext {
    margin: 0 0 18px 0;
}
.dashboard-initial-skeleton--settings .dis-set-skel-lead {
    display: block;
    width: 100%;
    max-width: 400px;
    height: 12px;
    border-radius: 4px;
    opacity: 0.6;
}
.dashboard-initial-skeleton--settings .dis-set-skel-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    margin-bottom: 20px;
    border-radius: 12px;
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
    background: rgba(255, 255, 255, 0.02);
}
.dashboard-initial-skeleton--settings .dis-set-skel-hero-av {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0.5;
}
.dashboard-initial-skeleton--settings .dis-set-skel-hero-txt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dashboard-initial-skeleton--settings .dis-hline1 { width: 45%; min-width: 100px; height: 16px; border-radius: 4px; display: block; }
.dashboard-initial-skeleton--settings .dis-hline2 { width: 200px; height: 10px; border-radius: 4px; display: block; margin: 0; opacity: 0.6; }
.dashboard-initial-skeleton--settings .dis-hline3 { width: 140px; height: 10px; border-radius: 4px; display: block; margin: 0; opacity: 0.45; }
.dashboard-initial-skeleton--settings .dis-set-skel-section {
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    padding: 16px 18px;
    margin-bottom: 16px;
    max-width: 100%;
}
.dashboard-initial-skeleton--settings .dis-set-skel-sechead {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.dashboard-initial-skeleton--settings .dis-ic {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    flex-shrink: 0;
    opacity: 0.35;
}
.dashboard-initial-skeleton--settings .dis-sec-t {
    display: block;
    width: 160px;
    height: 12px;
    border-radius: 4px;
}
.dashboard-initial-skeleton--settings .dis-sec-t--sm {
    width: 120px;
}
.dashboard-initial-skeleton--settings .dis-set-skel-field {
    margin-bottom: 14px;
}
.dashboard-initial-skeleton--settings .dis-set-skel-field:last-of-type {
    margin-bottom: 0;
}
.dashboard-initial-skeleton--settings .dis-flab {
    display: block;
    width: 60px;
    height: 8px;
    border-radius: 2px;
    margin: 0 0 4px 0;
    opacity: 0.4;
}
.dashboard-initial-skeleton--settings .dis-fbox {
    display: block;
    width: 100%;
    height: 36px;
    border-radius: 8px;
    opacity: 0.4;
}
.dashboard-initial-skeleton--settings .dis-fbox--soft {
    opacity: 0.35;
}
.dashboard-initial-skeleton--settings .dis-set-skel-tog {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dashboard-initial-skeleton--settings .dis-tog-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
}
.dashboard-initial-skeleton--settings .dis-tog-lbl {
    display: block;
    width: 55%;
    min-width: 0;
    height: 12px;
    border-radius: 4px;
}
.dashboard-initial-skeleton--settings .dis-tog-lbl--b {
    width: 48%;
}
.dashboard-initial-skeleton--settings .dis-tog-pill {
    width: 36px;
    height: 20px;
    border-radius: 9999px;
    flex-shrink: 0;
    opacity: 0.4;
}
body.klic-dashboard-booted .dashboard-initial-skeleton {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
body.klic-dashboard-booted .dashboard-initial-skeleton[role='status'] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

body.light-mode .dashboard-initial-skeleton {
    background: var(--color-bg-surface, #fafafa);
}

/* Verberg header actions als de card is ingeklapt */
.card-collapsible:not(.open) .header-actions {
    display: none !important;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 0;
    flex-shrink: 0;
}

.header-actions .btn-icon-subtle {
    width: 28px;
    height: 28px;
    font-size: 11px;
}

/* Card header titels: zelfde toon als map-operators “Beheerders” - leesbaar, geen all-caps */
.card-header h3 {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-main);
    text-transform: none;
    letter-spacing: 0.01em;
    margin: 0;
    display: flex;
    align-items: center;
    flex: 1;
    gap: 10px;
    white-space: normal;
    line-height: 1.3;
    min-width: 0;
}

.card-x {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 0; /* Remove padding to allow header to touch edges */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    /* overflow: hidden; -- Verwijderd om tooltips niet af te kappen */
}

/* Alleen verbergen bij specifieke containers zoals de kaart */
.overview-map-card, .mobile-map-container {
    overflow: hidden !important;
}

.card-x:hover { border-color: var(--color-border-hover); background: rgba(255,255,255,0.01); }

/* Card Content Padding */
.recent-projects-list,
.activity-feed-list,
.chat-placeholder-body,
.team-stats-card-content,
.card-content {
    padding: 24px;
}

.overview-map-card {
    overflow: hidden;
}

@media (max-width: 1023px) {
    .overview-map-card {
        width: 100%;
        aspect-ratio: 16/10;
        height: auto !important;
        min-height: 0;
    }
    #view-map .overview-map-card,
    .dashboard-map-page .overview-map-card {
        aspect-ratio: unset !important;
    }
}

@media (min-width: 1024px) {
    .urgent-btns-compact .btn-urgent {
        padding: 10px 12px !important;
        gap: 10px !important;
    }
}

/* 2-pane Projects workspace */
#workspace-pane-old {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Dennis the Dev: Parent must be hidden to allow internal scroll */
    height: 100%;
}

#workspace-pane.is-tiles #workspace-contents {
    padding-bottom: 16px;
}

#workspace-pane {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#workspace-folder-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.workspace-subfolders {
    padding: 0;
    margin-bottom: 4px;
}

#workspace-contents {
    flex: 1;
    padding: 16px var(--dash-page-gutter-x) 100px;
}

.klic-package-row {
    background: var(--color-bg-alpha-02);
}

.klic-package-row .workspace-folder-left {
    gap: 12px;
}

.klic-package-row .workspace-folder-left > i {
    font-size: 28px;
}

/* Tile view: KLIC icon - same footprint & color as folder icon (18px FA) */

/* Folder icon: fixed 24px width so text always starts at same x as project tiles */
#workspace-pane.is-tiles .workspace-folder-left > i,
#workspace-pane.is-tiles .workspace-folder-left > .folder-icon-stack {
    width: 24px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    font-size: 20px !important;
}

/* Project icon: same 24px width, centered, no box */
#workspace-pane.is-tiles .item-avatar.tile-avatar-wrap {
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#workspace-pane.is-tiles .klic-document-icon {
    width: 24px !important;
    height: 24px !important;
    background: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* KLIC SVG: same visual height as folder icon, greyed out to match */
#workspace-pane.is-tiles .klic-document-icon img.klic-graaf-icon {
    height: 22px !important;
    width: auto !important;
    object-fit: contain !important;
    filter: grayscale(1) brightness(0.68) opacity(0.9) !important;
}
#workspace-pane.is-tiles .klic-document-icon .doc-main {
    font-size: 20px !important;
    color: var(--color-text-dim) !important;
}

.klic-folder-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.klic-folder-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.klic-folder-meta,
.workspace-folder-sub {
    font-size: 11px;
    color: var(--color-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.klic-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.klic-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-alpha-05);
    color: var(--color-text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.klic-action-btn:hover {
    background: var(--color-bg-alpha-10);
    color: var(--color-text-main);
    border-color: var(--color-text-dim);
}

.workspace-folder-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.workspace-folder-left i {
    font-size: 18px;
    color: var(--color-text-dim);
    opacity: 0.9;
}

.package-file-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.package-file-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.package-file-row:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateX(2px);
}

.file-badge-important {
    font-size: 8px;
    font-weight: 900;
    background: #ff4400;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    display: inline-block;
    margin-top: 2px;
}

.category-group {
    border-left: 2px solid var(--color-bg-alpha-10);
    padding-left: 12px;
}

.package-file-row .file-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s;
}

.package-file-row:hover .file-icon {
    color: #CCFF00;
    background: rgba(204, 255, 0, 0.08);
    border-color: rgba(204, 255, 0, 0.2);
}

.package-file-row .file-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.package-file-row .file-name {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.package-file-row .file-sub {
    font-size: 10px;
    color: var(--color-text-dim);
}

/* Compact file list for Kadaster Bestanden */
.file-list-compact {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.file-cat-group {
    border-radius: 8px;
    overflow: hidden;
}

.file-cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
    user-select: none;
}

.file-cat-header:hover {
    background: rgba(255, 255, 255, 0.04);
}

.file-cat-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-main);
    text-transform: none;
    letter-spacing: 0.01em;
    line-height: 1.3;
    min-width: 0;
}

.file-cat-left i {
    font-size: 11px;
    width: 16px;
    text-align: center;
}

.file-cat-count {
    font-size: 10px;
    font-weight: 800;
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 6px;
    border-radius: 8px;
    min-width: 18px;
    text-align: center;
}

.file-cat-chevron {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.2);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.file-cat-group:not(.collapsed) .file-cat-chevron {
    transform: rotate(180deg);
}

.file-cat-items {
    display: flex;
    flex-direction: column;
    max-height: 500px;
    transition: max-height 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
    overflow: hidden;
}

.file-cat-group.collapsed .file-cat-items {
    max-height: 0;
    opacity: 0;
}

.file-row-compact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 34px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
    min-height: 38px;
}

@media (hover: hover) {
    .file-row-compact:hover {
        background: rgba(255, 255, 255, 0.04);
    }
    .file-row-compact:hover .file-row-arrow {
        opacity: 0.5;
    }
    .file-row-compact:hover .file-row-icon {
        color: #CCFF00;
    }
}

.file-row-compact:active {
    background: rgba(255, 255, 255, 0.04);
}

.file-row-icon {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    transition: color 0.15s;
}

.file-row-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.file-row-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
    min-width: 0;
}

/* Direct child fallback (rows without file-row-main wrapper) */
.file-row-compact > .file-row-name {
    flex: 1;
}

.file-badge-eis {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(255, 68, 0, 0.1);
    color: #ff6633;
    border: 1px solid rgba(255, 68, 0, 0.28);
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1.4;
}

.file-badge-eis i { font-size: 9px; }

.file-row-arrow {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}

.btn-precision-sm {
    font-size: 9px !important;
    padding: 4px 8px !important;
    letter-spacing: 0.05em;
}

/* Files list directly under preview map */
.files-under-map {
    background: var(--color-bg-card);
    border: 1px solid var(--color-bg-alpha-05);
    border-radius: var(--radius-lg);
    margin-top: 12px;
    overflow: hidden;
    box-shadow: none;
}

.files-under-map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-bg-alpha-05);
}

.files-under-map-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-main);
    text-transform: none;
    letter-spacing: 0.01em;
}

.files-under-map-title i {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
}

.files-under-map-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.files-under-map-body {
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.workspace-folder-right {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-dim);
    flex-shrink: 0;
}

.workspace-project-items {
    padding: 12px 0 0;
}

/* === LIST VIEW GRID - 12 columns
   name | meldnr | address | work | type | aangevraagd | start | eind | status | EV | nalevering | acties */

/* Tile view: hide column header bar */
#workspace-pane.is-tiles .workspace-project-columns { display: none !important; }

/* Hide tile-only elements in list view - they would steal grid tracks 1+2 */
#workspace-project-items .item-main-finder .item-avatar,
#workspace-project-items .item-main-finder .item-content {
    display: none !important;
}
/* Restore in tile view (higher specificity via #workspace-pane.is-tiles) */
#workspace-pane.is-tiles #workspace-project-items .item-main-finder .item-avatar { display: flex !important; }
#workspace-pane.is-tiles #workspace-project-items .item-main-finder .item-content { display: block !important; }

/* List rows - target directly by container ID, no :not() needed */
/* Col: … status(100) eisVzm(88) nalev(76) actions(40) - EV+nalevering compacter zodat Start/Eind minder knippen */
#workspace-project-items .item-main-finder {
    display: grid !important;
    grid-template-columns: minmax(100px, 0.88fr) 120px minmax(10rem, 0.62fr) minmax(72px, 0.55fr) minmax(72px, 0.55fr) 94px 76px 76px 100px 88px 76px 40px !important;
    gap: 8px !important;
    align-items: center;
    padding: 7px 16px !important;
}

/* Header - grid-template-columns; display:grid set by JS on view-switch */
.workspace-project-columns {
    grid-template-columns: minmax(100px, 0.88fr) 120px minmax(10rem, 0.62fr) minmax(72px, 0.55fr) minmax(72px, 0.55fr) 94px 76px 76px 100px 88px 76px 40px !important;
    gap: 8px !important;
}

/* Bulk: eerste kolom (checkbox) + zelfde spoorvolgorde als datarijen */
.workspace-project-columns.is-bulk {
    grid-template-columns: 36px minmax(100px, 0.88fr) 120px minmax(10rem, 0.62fr) minmax(72px, 0.55fr) minmax(72px, 0.55fr) 94px 76px 76px 100px 88px 76px 40px !important;
}

/* Tile view override - ID selector beats #workspace-project-items */
#workspace-pane.is-tiles #workspace-project-items .item-main-finder {
    display: flex !important;
    grid-template-columns: none !important;
}

/* Bulk mode: prepend checkbox column */
#workspace-project-items .list-item.bulk-mode .item-main-finder {
    grid-template-columns: 36px minmax(100px, 0.88fr) 120px minmax(10rem, 0.62fr) minmax(72px, 0.55fr) minmax(72px, 0.55fr) 94px 76px 76px 100px 88px 76px 40px !important;
}

/* ─── Header bar: geen afzonderlijke “lichte balk” - zelfde vlak als de lijst, hoger contrast ─── */
.workspace-project-columns {
    position: sticky;
    top: 0;
    z-index: 400;
    padding: 8px 16px !important;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    color: #c8ced8;
}

.workspace-project-columns .col-select { display: none !important; }

.workspace-project-columns.is-bulk .col-select {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    padding: 0;
    cursor: default;
    pointer-events: none;
}

.workspace-project-columns .col-select .col-select-icon {
    font-size: 12px;
    opacity: 0.35;
    color: var(--color-text-dim);
}

.workspace-project-columns .col {
    user-select: none;
    cursor: pointer;
    opacity: 1;
    justify-self: start;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Eis Voorzorg + Nalevering: korte kop, gelijk met Nalevering */
.workspace-project-columns .col-warn {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-transform: none;
    color: #aeb6c2;
    white-space: nowrap;
    word-break: normal;
    hyphens: none;
    opacity: 1;
}

.workspace-project-columns .col-warn,
.workspace-project-columns .col-nalevering {
    text-align: center;
    justify-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    padding: 0 2px;
    box-sizing: border-box;
}

.workspace-project-columns .col-nalevering {
    font-size: 11px;
    font-weight: 600;
    color: #aeb6c2;
    white-space: nowrap;
}

/* Work + type: explicit left-align to match row data */
.workspace-project-columns .col-work,
.workspace-project-columns .col-type {
    text-align: left;
    justify-self: start;
}

.workspace-project-columns .col:hover { opacity: 1; color: var(--color-text-main); }

.workspace-project-columns .col.is-sorted::after {
    content: attr(data-sort-dir);
}

.workspace-project-columns .col.is-asc::after { content: " ↑"; }

.workspace-project-columns .col.is-desc::after { content: " ↓"; }

.tile-warn-badge {
    display: inline-flex;
    align-items: center;
    color: #F59E0B;
    font-size: 12px;
    flex-shrink: 0;
}

#workspace-pane.is-tiles .bulk-checkbox-wrapper {
    display: flex !important;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    width: 22px;
    height: 22px;
    margin: 0 !important;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: auto;
}

@media (hover: hover) {
    #workspace-pane.is-tiles .bulk-checkbox-wrapper .bulk-check:hover {
        border-color: rgba(255,255,255,0.6);
        background: rgba(0,0,0,0.6);
        transform: scale(1.1);
    }
}

#workspace-pane.is-tiles .bulk-checkbox-wrapper .bulk-check:checked {
    background: var(--color-brand);
    border-color: var(--color-brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}

/* Add date to bottom left in tiles */

#workspace-pane.is-tiles .workspace-project-items {
    padding: 12px 0 0;
}

#workspace-pane.is-tiles #workspace-project-items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1100px) {
    #workspace-pane.is-tiles #workspace-project-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    #workspace-pane.is-tiles #workspace-project-items {
        grid-template-columns: 1fr;
    }
}

.workspace-header {
    position: relative;
    padding: 16px var(--dash-page-gutter-x) 12px; /* Gelijk aan #workspace-contents / sidebarnav */
    margin-bottom: 16px;
}

.detail-breadcrumb {
    margin-left: -4px;
}

.detail-breadcrumb .crumb {
    opacity: 0.55;
    font-size: 10px;
    font-weight: 500;
}

.detail-breadcrumb .crumb.is-link {
    color: var(--color-text-dim);
    opacity: 0.55;
    background: transparent;
    border: none;
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: 500;
}

.detail-breadcrumb .crumb.is-link:hover {
    opacity: 1;
    color: var(--color-brand) !important;
    background: var(--color-bg-alpha-05);
    text-decoration: none;
}

.detail-breadcrumb .crumb.is-current {
    opacity: 0.75;
    font-weight: 600;
    color: var(--color-text-dim);
}

.workspace-bulkbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    row-gap: 6px;
    flex-wrap: nowrap;
    padding: 6px var(--dash-page-gutter-x);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    box-sizing: border-box;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.workspace-bulk-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 0 1 auto;
}

.workspace-bulk-selectall {
    flex: 0 0 auto;
    min-width: 0;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-text-main);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.workspace-bulk-selectall:hover {
    background: rgba(204, 255, 0, 0.08);
    border-color: rgba(204, 255, 0, 0.25);
    color: var(--color-text-main);
}

.workspace-bulk-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-main);
    opacity: 0.9;
    white-space: nowrap;
}

.workspace-bulk-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: nowrap;
    justify-content: flex-end;
    flex: 0 1 auto;
    min-width: 0;
}

/* Drive bulk: .btn heeft globaal width:100% - hier één strakke rij, compact */
#workspace-bulkbar .workspace-bulk-action-btn {
    width: auto !important;
    margin-bottom: 0 !important;
    padding: 5px 11px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    white-space: nowrap;
}

#workspace-bulkbar select.workspace-bulk-move-select.form-input-chic {
    width: auto !important;
    height: 30px;
    min-width: min(200px, 32vw);
    max-width: 240px;
    padding: 4px 8px 4px 10px !important;
    padding-inline-end: var(--select-native-pad-r, 5rem) !important;
    -webkit-padding-end: var(--select-native-pad-r, 5rem) !important;
    font-size: 11px !important;
    font-weight: 600;
    border-radius: 6px;
    flex: 0 1 auto;
    line-height: 1.2;
}

#workspace-bulkbar .workspace-bulk-close {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px;
    min-height: 30px;
    border-radius: 6px;
    flex-shrink: 0;
    font-size: 12px;
}

@media (max-width: 700px) {
    .workspace-bulkbar {
        flex-wrap: wrap;
    }
    .workspace-bulk-right {
        flex-wrap: wrap;
        width: 100%;
        justify-content: flex-start;
    }
    #workspace-bulkbar .workspace-bulk-move-select {
        min-width: 0;
        flex: 1 1 140px;
        max-width: none;
    }
}

/* Lijstweergave: geselecteerde rijen - geen neon outline, subtiele achtergrond */
#workspace-pane:not(.is-tiles) #workspace-project-items .list-item.is-selected {
    outline: none !important;
    background: rgba(204, 255, 0, 0.07);
    box-shadow: none;
}

#workspace-pane:not(.is-tiles) #workspace-project-items .list-item.is-selected:hover {
    background: rgba(204, 255, 0, 0.1);
}

#workspace-pane:not(.is-tiles) #workspace-project-items .list-item.is-selected:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.3) !important;
    outline-offset: 2px;
}

body.light-mode #workspace-pane:not(.is-tiles) #workspace-project-items .list-item.is-selected {
    background: rgba(204, 255, 0, 0.14);
}

body.light-mode #workspace-pane:not(.is-tiles) #workspace-project-items .list-item.is-selected:hover {
    background: rgba(204, 255, 0, 0.2);
}

.projects-layout-toggle {
    position: absolute;
    right: 16px;
    top: 12px;
    z-index: 30;
}

.folder-inspector-body {
    padding: 16px 18px 18px;
    overflow-y: auto; /* Only one scrollbar here */
    flex: 1;
}

.is-drop-target {
    outline: 2px dashed rgba(255, 255, 255, 0.38) !important;
    outline-offset: 2px;
}

.is-dragging {
    opacity: 0.65;
}

.dnd-insert-before {
    position: relative;
}

.dnd-insert-before::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: -6px;
    height: 2px;
    background: var(--color-brand);
    border-radius: 999px;
    opacity: 0.9;
}

/* SEARCH BAR HEADER */
.search-header { 
    height: 56px;
    padding: 0 16px; 
    position: sticky; 
    top: 0; 
    z-index: 60000; 
    background: var(--color-bg-deep); 
    border-bottom: 1px solid var(--color-border); 
    flex-shrink: 0; 
    display: flex;
    align-items: center;
}

.header-grid { 
    display: flex !important; 
    align-items: center; 
    justify-content: space-between;
    gap: 12px; 
    width: 100%;
}

.hamburger-btn { 
    background: none; 
    border: none; 
    color: var(--color-text-main); 
    font-size: 20px; 
    padding: 0; 
    width: 40px;
    height: 40px;
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    opacity: 0.8; 
    flex-shrink: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.hamburger-btn:active { transform: scale(0.9); }

.logo { 
    text-decoration: none; 
    display: flex; 
    align-items: center; 
    white-space: nowrap; 
    gap: 8px; 
    opacity: 0.9; 
    flex-shrink: 0;
}

.logo span { line-height: 1; }

.logo-emoji { font-size: 0.7em; display: flex; align-items: center; }

/* Logo font size removed to avoid interference with SVG scaling */

/* SEARCH BAR ANIMATION */

.search-bar {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0;
    gap: 0;
    width: 40px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.search-bar i.fa-search { 
    width: 40px; 
    height: 40px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: var(--color-text-dim); 
    font-size: 14px; 
    flex-shrink: 0;
}

.search-bar.active { 
    background: var(--color-bg-surface); 
    border-color: var(--color-border); 
    width: 100%; 
    padding: 0 12px;
    gap: 8px;
    cursor: default;
    flex: 1;
}

.search-bar.active i.fa-search { width: auto; }

#searchClose {
    font-size: 12px;
    color: var(--color-text-muted);
    padding: 8px;
    margin-right: -4px;
    display: none;
}

.search-bar.active #searchClose { display: block; }

.btn-new-circle { background-color: #333333; color: #FFFFFF; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: none; transition: transform 0.1s; }

.btn-new-circle:active { transform: scale(0.92); }

/* SECTION LABEL / CARD HEADERS */

/* Collapsible Cards */
.card-collapsible .card-header {
    cursor: pointer;
}

.card-collapsible .card-header:hover {
    background: var(--color-bg-surface) !important;
}

.card-collapsible .card-content {
    display: none; /* Hidden by default */
}

.card-collapsible.open .card-content {
    display: block;
}

.card-collapsible .card-header .chevron {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.3;
}

.card-collapsible.open .card-header .chevron {
    transform: rotate(180deg);
    opacity: 0.7;
}

.info-hover-container.active { z-index: 10001; }

.info-hover-container:hover .info-tooltip,
.info-hover-container.active .info-tooltip { 
    opacity: 1; 
    visibility: visible; 
    transform: translateX(-50%) translateY(0); 
    pointer-events: auto;
}

.info-tooltip { 
    position: absolute; 
    bottom: calc(100% + 10px); 
    left: 50%; 
    transform: translateX(-50%) translateY(0); 
    background: var(--color-bg-surface); 
    border: 1px solid var(--color-border); 
    padding: 12px 16px; 
    border-radius: 10px; 
    white-space: normal; 
    width: 240px;
    z-index: 999999; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.5), 0 0 1px rgba(255,255,255,0.1); 
    opacity: 0; 
    visibility: hidden; 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    /* Reset inherited styles from .label */
    text-transform: none !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    font-size: 12px !important;
    color: var(--color-text-main) !important;
    line-height: 1.5;
    text-align: left;
}

.card-header .info-hover-container.active .info-tooltip,
.card-x .card-header .info-hover-container.active .info-tooltip {
    transform: translateX(-50%) translateY(5px) !important;
}

.info-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--color-border);
}

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

.item-content { flex: 1; min-width: 0; }

.item-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2px; }

.status-ingediend { border-color: rgba(0, 200, 255, 0.15); background: rgba(0, 200, 255, 0.03); color: #00c8ff; opacity: 0.9; }

.status-gereed { 
    background: rgba(34, 197, 94, 0.10) !important; 
    color: #22c55e !important; 
    border-color: rgba(34, 197, 94, 0.25) !important; 
    font-weight: 700;
}

.status-in-behandeling { border-color: rgba(255, 204, 0, 0.15); background: rgba(255, 204, 0, 0.03); color: #ffcc00; opacity: 0.9; }

/* EXPANDED CONTENT (ACCORDION) */
.item-details { max-height: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); background-color: #161616; }

.details-inner { padding: 20px; }

.card { 
    background-color: var(--color-bg-card); 
    border-radius: var(--radius-lg); 
    padding: 0; /* Remove padding to allow header to touch edges */
    border: 1px solid var(--color-border); 
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
    position: relative;
    /* overflow: hidden; -- Verwijderd om tooltips niet af te kappen */
}

.card:hover { border-color: var(--color-border-hover); }

.label { 
    font-size: 10px; 
    font-weight: 700; 
    color: var(--color-text-dim); 
    text-transform: none; 
    margin-bottom: 10px; 
    letter-spacing: 0.15em; 
    opacity: 0.7; 
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.value { font-size: 13px; font-weight: 500; color: var(--color-text-main); }

/* BUTTONS */
.btn { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    width: 100%; 
    padding: 12px 18px; 
    border-radius: var(--radius-control); 
    font-size: 13px; 
    font-weight: 500; 
    text-decoration: none; 
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); 
    margin-bottom: 8px; 
    border: 1px solid transparent;
    cursor: pointer;
}

.btn:active { transform: scale(0.97); }

.btn-ar { background-color: var(--color-brand); color: #000; }

.btn-ar:hover { opacity: 0.9; }

.btn-primary { 
    background-color: var(--color-brand) !important; 
    color: #000 !important; 
    border: none !important;
    box-shadow: none;
}

.btn-primary:hover { 
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: none;
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
}

/* Brand/lime knoppen: zwarte tekst + iconen (overschrijft o.a. .btn-precision i) */
.btn-primary i,
.btn-primary .fa,
.btn-ar i {
    color: #000 !important;
}

.btn-precision[style*="background:var(--color-brand)"] i,
.btn-precision[style*="background: var(--color-brand)"] i {
    color: #000 !important;
}

.btn-secondary {
    background-color: var(--color-bg-alpha-05) !important;
    color: var(--color-text-main) !important;
    border: 1px solid var(--color-border) !important;
}

.btn-secondary:hover {
    background-color: var(--color-bg-alpha-10) !important;
    border-color: var(--color-border-hover) !important;
}

.btn-2d { background-color: var(--color-bg-surface); color: var(--color-text-main); border: 1px solid var(--color-border); }

.btn-2d:hover { background-color: var(--color-bg-card); border-color: var(--color-border-hover); }

.btn-pdf { background-color: var(--color-bg-surface); color: rgba(255,255,255,0.9); border: 1px solid var(--color-border); }

.btn-pdf:hover { background-color: var(--color-bg-card); color: #fff; }

.btn-precision {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-control);
    color: var(--color-text-main);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    text-decoration: none;
    width: 100%;
    margin: 0;
    white-space: nowrap;
}

.btn-precision:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-precision:active {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.04);
}

.btn-precision i {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    width: 18px;
    text-align: center;
    transition: color 0.2s;
}

.btn-precision:hover i {
    color: #CCFF00;
}

.btn-precision-warning {
    background: rgba(255, 102, 0, 0.05);
    border-color: rgba(255, 102, 0, 0.15);
    color: #FF6600;
}

.btn-precision-warning:hover {
    background: rgba(255, 102, 0, 0.1);
    border-color: rgba(255, 102, 0, 0.3);
    color: #FF8533;
}

.btn-precision-warning i {
    color: #FF6600 !important;
    opacity: 0.7;
}

.btn-precision-warning:hover i {
    color: #FF8533 !important;
}

.btn-precision-brand {
    background: rgba(204, 255, 0, 0.05);
    border-color: rgba(204, 255, 0, 0.15);
    color: #CCFF00;
}

.btn-precision-brand:hover {
    background: rgba(204, 255, 0, 0.1);
    border-color: rgba(204, 255, 0, 0.3);
}

.btn-precision-brand i {
    color: #CCFF00 !important;
    opacity: 0.7;
}

.btn-precision-primary {
    background: #CCFF00;
    color: #000;
    border-color: #CCFF00;
}

.btn-precision-primary:hover {
    background: #D9FF33;
    border-color: #D9FF33;
    box-shadow: 0 0 20px rgba(204, 255, 0, 0.2);
}

.btn-precision-primary i {
    color: #000 !important;
}

.btn-precision .btn-text-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.btn-precision .btn-subtitle {
    font-size: 9px;
    font-weight: 500;
    opacity: 0.6;
    display: block;
    margin-top: 2px;
    letter-spacing: 0;
    text-transform: none;
}

/* ACTION BUTTONS GRID */
.btn-action-row {
    display: flex;
    gap: 12px;
    flex-direction: column;
}

@media (min-width: 1024px) {
    .btn-action-row {
        flex-direction: row !important;
    }
    .btn-action-row .btn-precision {
        flex: 1;
        min-width: 0;
    }
}

.btn-precision-brand i { color: var(--color-brand); }

.btn-precision-warning i { color: var(--color-text-muted); }

.text-klicbot-green { color: #CCFF00 !important; }

.fa-triangle-exclamation { color: #FF6B00; }

.btn-precision-warning i.fa-triangle-exclamation { color: var(--color-text-muted) !important; }

.btn-share { background-color: transparent; color: rgba(255,255,255,0.85); border: 1px solid var(--color-border); font-size: 11px; }

.btn-share:hover { background-color: rgba(255,255,255,0.03); color: var(--color-text-main); }

.btn-report { background-color: transparent; color: #5F6368; border: 1px solid var(--color-bg-alpha-05); font-size: 11px; font-weight: 500; padding: 10px; margin-top: 8px; }

.btn-report i { font-size: 10px; opacity: 0.5; }

/* BOTTOM AREA */
.bottom-container {
    background-color: var(--color-dark-bg);
    border-top: 1px solid var(--color-surface);
    margin-top: 32px;
}

.support-pre-footer { padding: 16px 20px; text-align: center; }

.support-agent-box {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    border-radius: var(--radius-lg);
    text-decoration: none;
    border: 1px solid var(--color-bg-alpha-10);
    transition: all 0.2s;
}

.support-agent-box:active { transform: scale(0.98); border-color: rgba(255,255,255,0.3); }

.support-label { font-size: 9px; font-weight: 600; color: var(--color-text-dim); text-transform: none; letter-spacing: 0.5px; }

.support-value { color: var(--color-text-main); font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px; }

.support-value i { color: var(--color-brand); font-size: 14px; }

.legal-footer { padding: 24px var(--dash-page-gutter-x) calc(24px + env(safe-area-inset-bottom)); text-align: center; border-top: 1px solid rgba(255,255,255,0.03); background-color: var(--color-dark-bg); }

.language-flags { display: flex; justify-content: center; gap: 12px; margin-bottom: 16px; font-size: 18px; }

.flag-link { text-decoration: none; transition: transform 0.2s; display: inline-block; }

.flag-link:active { transform: scale(1.2); }

.legal-links { display: flex; justify-content: center; gap: 16px; margin-bottom: 12px; }

.legal-links a { font-size: 9px; color: var(--color-text-dim); text-decoration: none; font-weight: 600; text-transform: none; letter-spacing: 0.5px; }

.legal-text { font-size: 8px; color: rgba(154, 160, 166, 0.3); line-height: 1.5; max-width: 400px; margin: 0 auto; }

/* COLLAPSIBLE CARDS */
.collapsible-card { transition: all 0.3s ease; }

.card-header-toggle {  cursor: pointer; }

.card-body-collapsible { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease; opacity: 0; }

.collapsible-card.expanded .card-body-collapsible { max-height: 500px; opacity: 1; margin-top: 12px; }

.toggle-icon { font-size: 10px; opacity: 0.3; transition: transform 0.3s ease; }

.collapsible-card.expanded .toggle-icon { transform: rotate(180deg); opacity: 0.6; }

.permission-label { font-size: 13px; color: var(--color-text-main); font-weight: 500; }

.switch-small { position: relative; display: inline-block; width: 44px; height: 24px; }

.switch-small input { opacity: 0; width: 0; height: 0; }

.slider-small { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--color-bg-alpha-10); transition: .4s; border-radius: 24px; }

.slider-small:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: var(--color-text-main); transition: .4s; border-radius: 50%; }

input:checked + .slider-small { background-color: var(--color-brand); }

input:checked + .slider-small:before { transform: translateX(20px); background-color: #000; }

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

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

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--color-bg-alpha-10);
    border-radius: 10px;
}

.team-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding-top: 16px;
}

@media (max-width: 768px) {
    .team-details-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .team-settings-column {
        border-left: none !important;
        padding-left: 0 !important;
        border-top: 1px solid var(--color-bg-alpha-05);
        padding-top: 24px;
    }
}

.switch { 
    position: relative; 
    display: inline-block; 
    width: 42px; 
    height: 24px; 
    flex-shrink: 0;
}

.switch input { opacity: 0; width: 0; height: 0; }

.slider { 
    position: absolute; 
    cursor: pointer; 
    top: 0; left: 0; right: 0; bottom: 0; 
    background-color: rgba(255,255,255,0.08); 
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1); 
    border-radius: 24px; 
    border: 1px solid var(--color-bg-alpha-05); 
}

.slider:before { 
    position: absolute; 
    content: ""; 
    height: 18px; 
    width: 18px; 
    left: 2px; 
    bottom: 2px; 
    background-color: #FFFFFF; 
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1); 
    border-radius: 50%; 
    box-shadow: none;
}

.switch input:checked + .slider { 
    background-color: var(--color-brand) !important; 
    border-color: var(--color-brand) !important; 
}

/* Schuifknop beweegt - zonder deze regel lijken alle toggles “uit” */
.switch input:checked + .slider:before {
    transform: translateX(20px);
    background-color: #0a0a0a;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.checklist-question-row.dragging {
    opacity: 0.5;
    background: rgba(204, 255, 0, 0.05) !important;
    border: 1px dashed var(--color-brand) !important;
}

.checklist-question-row.drag-over {
    border-top: 2px solid var(--color-brand) !important;
}

.drag-handle {
    cursor: grab;
    padding: 8px;
    color: rgba(255,255,255,0.2);
    transition: all 0.2s;
}

.drag-handle:hover {
    color: var(--color-text-main);
}

.drag-handle:active {
    cursor: grabbing;
}

.user-phone-mini { font-size: 9px; color: var(--color-text-dim); }

.dropdown-menu { 
    position: absolute; 
    top: calc(100% + 8px); 
    right: 0; 
    width: 200px; 
    background: #161616; 
    border: 1px solid var(--color-border); 
    border-radius: 12px; 
    box-shadow: none; 
    display: flex; 
    flex-direction: column; 
    padding: 8px; 
    z-index: 2000; 
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown-menu.open { 
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--color-text-dim); text-decoration: none; border-radius: 8px; font-size: 13px; font-weight: 500; transition: all 0.15s; }

.dropdown-item:hover { color: var(--color-text-main); background: var(--color-bg-alpha-05); }

.dropdown-item i { font-size: 14px; opacity: 0.7; width: 18px; text-align: center; flex-shrink: 0; }

.dropdown-header--user {
    padding: 10px 12px;
    box-sizing: border-box;
    text-align: left;
}
.dropdown-header--user .dropdown-header__name {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    color: var(--color-text-main, #f4f4f5);
    letter-spacing: -0.01em;
}
.dropdown-header--user .dropdown-header__phone {
    font-size: 12px;
    color: var(--color-text-dim, #9ca3af);
    font-weight: 500;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.dropdown-header--user .dropdown-header__company {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}
.dropdown-header--user .dropdown-header__company-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-dim, #a1a1aa);
    letter-spacing: 0.01em;
}
.dropdown-header--user .dropdown-header__tier {
    font-size: 10px;
    font-weight: 800;
    background: var(--color-brand, #d4ff00);
    color: #0a0a0a;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1.2;
    letter-spacing: 0.04em;
}

.dropdown-divider { height: 1px; background: var(--color-border); margin: 8px 4px; }

/* FOLDER MOVE DROPDOWN */

@media (max-width: 768px) {
    .btn-folder-move span {
        max-width: 150px;
    }
}

.btn-folder-move:hover {
    border-color: var(--color-brand);
    color: var(--color-text-main);
    background: var(--color-bg-alpha-10);
}

.btn-folder-move i.fa-folder-open {
    color: var(--color-brand);
    font-size: 10px;
}

.btn-folder-move .chevron-sub {
    font-size: 8px;
    opacity: 0.5;
}

.folder-move-dropdown {
    right: 0;
    left: auto !important;
    top: calc(100% + 8px) !important;
    min-width: 220px;
    display: none;
    z-index: 5000;
}

.folder-move-dropdown.open {
    display: block !important;
}

.dropdown-header-sm {
    padding: 10px 14px;
    font-size: 9px;
    font-weight: 800;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--color-bg-alpha-05);
}

.folder-move-list {
    max-height: 240px;
    overflow-y: auto;
}

.folder-move-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: var(--color-text-dim);
    font-size: 12px;
    text-decoration: none;
    transition: all 0.2s;
}

.folder-move-dropdown .dropdown-item:hover {
    background: var(--color-bg-alpha-05);
    color: var(--color-text-main);
}

.folder-move-dropdown .dropdown-item i {
    width: 16px;
    text-align: center;
    font-size: 13px;
    opacity: 0.7;
}

.folder-move-dropdown .dropdown-item.item-action {
    color: var(--color-text-main);
    font-weight: 600;
}

/* Verplaats project: schuifpaneel met mapstructuur (zelfde hiërarchie als Drive-zijbalk) */
.project-move-folder-panel {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: none;
    align-items: stretch;
    justify-content: flex-start;
    pointer-events: none;
    visibility: hidden;
}

.project-move-folder-panel.is-open {
    display: flex;
    pointer-events: auto;
    visibility: visible;
}

.project-move-folder-panel__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-move-folder-panel.is-open .project-move-folder-panel__backdrop {
    opacity: 1;
}

.project-move-folder-panel__sheet {
    position: relative;
    z-index: 1;
    width: min(100%, 360px);
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-deep, #0f0f0f);
    border-right: 1px solid var(--color-border, #2a2a2a);
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.5);
    transform: translateX(-100%);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

.project-move-folder-panel.is-open .project-move-folder-panel__sheet {
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .project-move-folder-panel__backdrop {
        opacity: 1;
        transition: none;
    }
    .project-move-folder-panel__sheet {
        transition-duration: 0.01ms;
    }
}

.project-move-folder-panel__head {
    position: relative;
    padding: 20px 20px 12px 48px;
    border-bottom: 1px solid var(--color-border, #2a2a2a);
    flex-shrink: 0;
}

.project-move-folder-panel__title {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text-main, #fff);
}

.project-move-folder-panel__sub {
    margin: 0;
    font-size: 12px;
    color: var(--color-text-dim, #888);
}

.project-move-folder-panel__close {
    position: absolute;
    top: 16px;
    left: 12px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--color-text-dim, #888);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-move-folder-panel__close:hover {
    background: var(--color-bg-alpha-10, rgba(255, 255, 255, 0.08));
    color: var(--color-text-main, #fff);
}

.project-move-folder-panel__list {
    flex: 1;
    min-height: 0;
    max-height: min(70vh, 600px);
    overflow-y: auto;
    padding: 8px 10px 16px;
    -webkit-overflow-scrolling: touch;
}

button.project-move-folder-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--color-text-dim, #b0b0b0);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

button.project-move-folder-row i {
    width: 20px;
    text-align: center;
    color: var(--color-brand, #ccff00);
    opacity: 0.85;
    flex-shrink: 0;
}

button.project-move-folder-row:hover {
    background: var(--color-bg-alpha-10, rgba(255, 255, 255, 0.08));
    color: var(--color-text-main, #fff);
}

button.project-move-folder-row.is-child .project-move-folder-row__name {
    font-size: 13px;
}

/* ANIMATIONS */
@keyframes seismo-pulse { 0% { stroke-dashoffset: 100; opacity: 0.3; } 50% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0.3; } }

.seismograph-loader { display: flex; justify-content: center; margin: 0 auto 16px; }

.seismo-path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: seismo-pulse 2s ease-in-out infinite; }

@keyframes pulse-yellow { 0% { transform: scale(0.9); opacity: 0.8; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.8; } }

@keyframes pulse-green { 0% { background: var(--color-success-bg); } 50% { background: rgba(204, 255, 0, 0.3); } 100% { background: var(--color-bg-alpha-05); } }

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

.avatar-warning { border: 2px solid var(--color-warning) !important; box-shadow: 0 0 10px rgba(242, 139, 130, 0.2); }

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

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

.team-inline-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(204, 255, 0, 0.06);
    border: 1px solid rgba(204, 255, 0, 0.1);
}

.team-inline-name {
    font-size: 15px;
    font-weight: 900;
    color: var(--color-text-main);
    letter-spacing: -0.01em;
}

.team-inline-sub {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    color: var(--color-text-dim);
    flex-wrap: wrap;
}

.team-inline-dot { opacity: 0.3; }

.member-inline-save-indicator {
    margin-left: 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.team-inline-hint {
    font-size: 11px;
    color: var(--color-text-dim);
    margin: -2px 0 12px 0;
    padding: 8px 12px;
    background: rgba(255,165,0,0.05);
    border: 1px solid rgba(255,165,0,0.1);
    border-radius: 8px;
}

.team-inline-recent-projects {
    display: grid;
    gap: 6px;
}

.team-inline-project-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.team-inline-project-left i {
    font-size: 10px;
    color: var(--color-brand);
    opacity: 0.7;
}

.team-inline-project-left span {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-inline-project-status {
    font-size: 9px;
    text-transform: none;
    color: var(--color-text-dim);
    white-space: nowrap;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.team-inline-danger {
    border-color: rgba(255,60,60,0.15) !important;
    color: #ff5555 !important;
    background: rgba(255,60,60,0.04) !important;
}

.team-inline-danger:hover {
    border-color: rgba(255,60,60,0.3) !important;
    background: rgba(255,60,60,0.08) !important;
}

body.light-mode .team-member-accordion-section,
body.light-mode .team-inline-project-row {
    background: var(--color-bg-card) !important;
    border-color: var(--color-border) !important;
}

body.light-mode .team-inline-project-left span {
    color: var(--color-text-main) !important;
}

body.light-mode .team-inline-project-status,
body.light-mode .team-inline-sub,
body.light-mode .team-inline-hint,
body.light-mode .team-inline-section-title {
    color: var(--color-text-dim) !important;
}

.search-filter-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    align-items: center;
}

/* Bulk action bar */
.team-bulkbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid rgba(204, 255, 0, 0.08);
    border-bottom: 1px solid rgba(204, 255, 0, 0.08);
    background: rgba(204, 255, 0, 0.03);
    animation: teamAccordionIn 0.15s ease;
}

.team-bulk-count {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--color-brand);
}

.team-bulkbar-actions {
    display: flex;
    gap: 10px;
}

/* Minimalist Dark Checkbox */
.team-checkbox,
.bulk-check,
.checkbox-minimal {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    display: inline-block;
    vertical-align: middle;
}

.team-checkbox:checked,
.bulk-check:checked,
.checkbox-minimal:checked {
    background: var(--color-brand);
    border-color: var(--color-brand);
}

.team-checkbox:checked::after,
.bulk-check:checked::after,
.checkbox-minimal:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.team-checkbox:hover,
.bulk-check:hover,
.checkbox-minimal:hover {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
}

.team-meta-kv {
    font-size: 10px;
    color: var(--color-text-dim);
}

.team-meta-kv b {
    color: var(--color-text-main);
    font-weight: 700;
}

.team-meta-error {
    font-size: 10px;
    color: #ff5555;
    background: rgba(255,68,68,0.06);
    padding: 2px 8px;
    border-radius: 4px;
}

.team-access-node {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg-alpha-02);
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.team-access-node:hover {
    border-color: rgba(255,255,255,0.08);
}

.team-access-node.is-child {
    margin-left: 20px;
    border-color: rgba(255,255,255,0.05);
    position: relative;
}

.team-access-node.is-child::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    width: 8px;
    height: 1px;
    background: rgba(255,255,255,0.06);
}

.team-access-node-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.team-access-actions {
    margin-left: auto;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.team-access-node-head:hover .team-access-actions {
    opacity: 1;
}

.team-access-node-head:hover {
    background: rgba(255,255,255,0.02);
}

.team-access-chevron {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid transparent;
    color: var(--color-text-dim);
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.team-access-node-head:hover .team-access-chevron {
    background: rgba(255,255,255,0.04);
}

.team-access-chevron i {
    font-size: 10px;
    transition: transform 0.2s ease;
}

.team-access-node:not(.is-collapsed) .team-access-chevron i {
    transform: rotate(90deg);
}

.team-access-node.is-collapsed .team-access-chevron i {
    transform: rotate(0deg);
}

.team-access-title {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.team-access-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-access-meta {
    font-size: 10px;
    color: var(--color-text-dim);
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.team-access-node-body {
    padding: 6px 10px 10px;
    border-top: 1px solid rgba(255,255,255,0.04);
}

.team-access-projects {
    display: grid;
    gap: 2px;
    margin-bottom: 6px;
}

.team-access-project {
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,0.03);
    border-radius: 4px;
    background: rgba(0,0,0,0.08);
    transition: all 0.15s ease;
}

.team-access-project:hover {
    background: rgba(255,255,255,0.02);
    border-color: var(--color-border);
}

.team-access-project-sub {
    font-size: 10px;
    color: var(--color-text-dim);
    margin-top: 1px;
}

.team-access-empty {
    font-size: 10px;
    color: var(--color-text-muted);
    padding: 6px 4px;
    text-align: center;
}

.team-access-children {
    display: grid;
    gap: 2px;
}

/* Permission grid - elegant toggle cards */
.permission-grid-pro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.permission-card-pro {
    background: rgba(0,0,0,0.08);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.15s ease;
}

.permission-card-pro:hover {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.06);
}

.permission-card-pro div {
    font-size: 11px !important;
    font-weight: 600 !important;
}

.loading-bar {
    width: 100%;
    height: 2px;
    background: var(--color-bg-alpha-05);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.loading-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    background: var(--color-brand);
    border-radius: 2px;
    animation: loading-slide 1.5s infinite ease-in-out;
}

@keyframes loading-slide {
    0% { left: -30%; }
    100% { left: 100%; }
}

.btn-urgent {
    width: 100%;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px;
    padding: 14px 18px;
    border-radius: var(--radius-control);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    border: 1px solid var(--color-border);
    margin-bottom: 4px;
}

.btn-urgent-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.btn-urgent-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 2px;
}

.btn-urgent:hover {
    transform: translateY(-2px);
    filter: brightness(1.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Rest of current styles */

/* Satellite Layer Filtering */
.satellite-layer {
    filter: saturate(0.6) brightness(0.9) contrast(1.1);
}

body.light-mode .satellite-layer {
    filter: brightness(1.15) saturate(0.9) contrast(1.05);
}

.loading-spinner { width: 16px; height: 16px; border: 2px solid #3C4043; border-top-color: var(--color-blue); border-radius: 50%; animation: spin 1s linear infinite; }

/* PROJECT IMAGE & PLACEHOLDER */
.project-image-container {
    aspect-ratio: 16/9;
    background: var(--color-bg-deep); border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    margin-bottom: 24px;
    position: relative;
}

.project-image-placeholder {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, #111 0%, #050505 100%);
}

.project-image-container.show-placeholder .project-image-placeholder {
    display: flex;
}

.placeholder-content {
    text-align: center;
    opacity: 0.3;
}

.placeholder-emoji {
    font-size: 40px;
    margin-bottom: 12px;
    filter: grayscale(1);
}

.placeholder-text {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--color-text-main);
    text-transform: none;
}

/* Decorative lines for placeholder */
.project-image-placeholder::before, .project-image-placeholder::after {
    content: '';
    position: absolute;
    width: 141%;
    height: 1px;
    background: rgba(255,255,255,0.03);
    top: 50%;
    left: 50%;
}

.project-image-placeholder::before { transform: translate(-50%, -50%) rotate(29deg); }

.project-image-placeholder::after { transform: translate(-50%, -50%) rotate(-29deg); }

/* VIEW CONTAINERS - één matte canvaskleur op alle tabbladen (Drive / Overzicht / Instellingen / …) */
.view-container {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    min-height: 0;
    background: var(--color-bg-deep);
}

.view-container.active { display: flex; }

.view-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 100px;
    min-height: 0;
    background: var(--color-bg-deep);
}

/* Drive-style lichtere canvas op Agenda / Checklist / Team — matcht
   .desktop-preview-pane + .inbox-list-wrapper achtergrond op Drive
   (var(--color-bg-surface)). Logboek + Overzicht houden bg-deep. */
#view-checklist,
#view-team {
    background: var(--color-bg-surface);
}

#view-checklist > .view-body,
#view-team > .view-body {
    background: var(--color-bg-surface);
}

/* Overzicht: mobiel = gutter + safe-area; desktop ≥32px horizontaal (gelijk aan .top-bar-desktop padding)
   zodat KPI/strips niet dichter op de viewportrand zitten dan de topbar-acties. */
#view-overview .view-body {
    padding-left: max(var(--dash-page-gutter-x), env(safe-area-inset-left, 0px));
    padding-right: max(var(--dash-page-gutter-x), env(safe-area-inset-right, 0px));
    /* Mobiel: ruim onder vaste header; desktop: uitlijnen met .team-switcher (sidebar: --top-bar-height + margin = zelfde offset) */
    padding-top: var(--space-xl, 28px);
    box-sizing: border-box;
}
@media (min-width: 1024px) {
    #view-overview .view-body {
        padding-left: max(32px, var(--dash-page-gutter-x), env(safe-area-inset-left, 0px));
        padding-right: max(32px, var(--dash-page-gutter-x), env(safe-area-inset-right, 0px));
        padding-top: calc(var(--dash-title-pad-top, 12px) + var(--space-md, 11px));
    }
}

/* Medewerkers: tabel zelfde inset als .view-header (voorkomt “breed” blok onder de titel) */
#view-collaborators .collaborators-table-wrap {
    padding: 0 var(--dash-page-gutter-x) var(--space-xl);
    box-sizing: border-box;
}

@media (max-width: 1023px) {
    #view-overview .view-body {
        padding-left: max(var(--dash-page-gutter-x), env(safe-area-inset-left, 0px));
        padding-right: max(var(--dash-page-gutter-x), env(safe-area-inset-right, 0px));
    }
    #view-collaborators .collaborators-table-wrap {
        padding: 0 var(--dash-page-gutter-x) var(--space-xl);
    }
}

/* -------------------------
   Cursor-like Settings Shell
   ------------------------- */
.settings-shell {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    min-height: 0;
}

.settings-nav {
    width: 240px;
    flex: 0 0 240px;
    position: sticky;
    top: calc(var(--top-bar-height, 56px) + 16px);
    align-self: flex-start;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-bg-surface);
    padding: 10px;
}

.settings-nav-title {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: none;
    color: var(--color-text-dim);
    padding: 8px 10px 10px;
}

.settings-content {
    flex: 1 1 auto;
    min-width: 0;
}

.settings-shell .card,
.settings-shell .card-x {
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    overflow: visible;
    box-shadow: none !important;
}

.settings-shell .card-header {
    background: transparent !important;
    padding: 0 0 16px 0 !important;
    border-bottom: 1px solid var(--color-border) !important;
    margin-bottom: 24px;
}

.settings-shell .card-header h3 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--color-text-main) !important;
    letter-spacing: normal !important;
}

.settings-shell .card-content {
    padding: 0 !important;
}

.settings-section {
    display: none;
    scroll-margin-top: calc(var(--top-bar-height, 56px) + 20px);
    max-width: 800px; /* Dennis the Dev: Keep content readable on full screen */
}

.settings-section.active {
    display: block; /* Show only active section */
    animation: fadeIn 0.3s ease-out;
}

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

@media (max-width: 1100px) {
    .settings-shell { flex-direction: column; }
    .settings-nav { width: 100%; flex: 0 0 auto; position: relative; top: 0; }
}

/* OFFLINE INDICATOR (Refined) */
.mobile-hidden {
    display: none !important;
}

@media (min-width: 1024px) {
    .mobile-hidden {
        display: flex !important;
    }
}

/* UTILITIES */
.mobile-only { display: block; }

.desktop-only { display: none; }

.mobile-only-dropdown-header { display: flex; }

@media (min-width: 1024px) {
    .mobile-only { display: none !important; }
    .desktop-only { display: block !important; }
    .mobile-only-dropdown-header { display: none !important; }
}

/* MAP ENHANCEMENTS - generic fallback; glass-panel uses overview.css for light icons on dark bg */
.map-mode-btn { background: none; border: none; width: 32px; height: 32px; border-radius: 6px; color: rgba(255,255,255,0.85); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

.map-mode-btn:hover { color: #fff; background: var(--color-bg-alpha-05); }

.map-mode-btn.active { color: #000; background: #fff; }

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

/* Map Animations (ANIMATION REMOVED) */
.pulsating-poly {
    stroke-opacity: 0.6;
    fill-opacity: 0.1;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.3));
}

/* Hover animation for markers and polygons */
@keyframes marker-highlight-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.7; }
}

.marker-highlight {
    animation: marker-highlight-pulse 1.2s ease-in-out 3 !important;
    z-index: 9999 !important;
    transform-origin: center !important;
    transform-box: fill-box !important;
    stroke: #fff !important;
    stroke-width: 2px !important;
}

.poly-highlight {
    stroke-width: 5 !important;
    fill-opacity: 0.6 !important;
    stroke: #fff !important;
    transition: all 0.3s ease;
}

/* SEARCHABLE DROPDOWN */
.searchable-dropdown {
    position: relative;
    width: 100%;
    overflow: visible !important; /* Zorg dat resultaten niet worden afgekapt */
}

.searchable-dropdown input {
    width: 100%;
    background: #000;
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    border-radius: 8px;
    font-size: 13px;
    padding: 12px 32px 12px 12px;
    outline: none;
    transition: all 0.2s;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

.searchable-dropdown input:focus {
    border-color: var(--color-brand);
    background: #050505;
    box-shadow: 0 0 0 2px rgba(204, 255, 0, 0.1), inset 0 2px 4px rgba(0,0,0,0.5);
}

.searchable-dropdown-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 999999; /* Extreem hoog om clipping te voorkomen */
    display: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.searchable-dropdown-results.open {
    display: block;
}

.searchable-result-item {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--color-bg-alpha-02);
}

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

.searchable-result-item:hover {
    background: var(--color-bg-alpha-05);
}

.searchable-result-item .result-role {
    font-size: 9px;
    text-transform: none;
    color: var(--color-text-dim);
    opacity: 0.7;
}

.searchable-dropdown i.chevron {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    opacity: 0.3;
    pointer-events: none;
}

.searchable-dropdown i.clear-btn {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    opacity: 0.5;
    cursor: pointer;
    display: none;
}

.searchable-dropdown i.clear-btn:hover {
    opacity: 1;
    color: #ff4d4d;
}

.mobile-map-container {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
    contain: layout paint;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.safety-notice-item.checked {
    border-color: rgba(255,255,255,0.2) !important;
    background: var(--color-bg-alpha-05) !important;
}

body.light-mode .safety-notice-item.checked {
    border-color: var(--color-brand) !important;
    background: rgba(204, 255, 0, 0.1) !important;
}

/* TEAM TAB - HEADER & LAYOUT (title/subtitle: same as Instellingen) */
.team-header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xl) var(--dash-page-gutter-x) 0;
    margin-bottom: var(--space-xl);
    gap: 20px;
}
@media (min-width: 1024px) {
    .team-header-wrap {
        padding-top: var(--dash-title-pad-top, 12px);
    }
}

.team-header-text .dash-page-title {
    margin: 0 0 4px;
}

.team-header-text .dash-page-sub {
    max-width: 40rem;
}

.team-add-btn {
    margin: 0;
    padding: 0 22px;
    height: 42px;
    width: auto !important;
    font-size: 11px;
    font-weight: 800;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(204, 255, 0, 0.15);
    transition: all 0.2s ease;
}

.team-add-btn:hover {
    box-shadow: 0 4px 16px rgba(204, 255, 0, 0.25);
    transform: translateY(-1px);
}

.team-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.team-cell-email {
    font-size: 12px;
    color: var(--color-text-dim);
    opacity: 0.7;
}

.team-cell-phone {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-main);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.team-cell-count {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-main);
}

.team-cell-muted {
    font-size: 11px;
    color: var(--color-text-dim);
    opacity: 0.6;
}

@media (max-width: 1023px) {
    .team-header-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 24px 20px 20px;
    }
    .team-header-actions {
        width: 100%;
        justify-content: space-between;
    }
    .team-add-btn {
        width: auto !important;
    }
    .team-content-full {
        padding: 0 var(--space-lg) 40px;
    }

    /* Mobile-friendly team table - card-like rows instead of cramped table */
    .team-table {
        display: block;
        width: 100%;
        border-collapse: collapse;
    }

    .team-table thead {
        display: none; /* Hide headers on mobile; use data-label instead */
    }

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

    .team-member-row {
        margin-bottom: 16px;
        background: var(--color-bg-card);
        border: 1px solid var(--color-border);
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: all 0.2s ease;
        position: relative;
    }

    .team-member-row:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        border-color: var(--color-brand);
    }

    .team-member-row td {
        padding: 8px 0;
        border: none;
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 13px;
    }

    .team-member-row td:before {
        content: attr(data-label);
        font-size: 10px;
        font-weight: 700;
        color: var(--color-text-dim);
        text-transform: none;
        letter-spacing: 0.5px;
        min-width: 80px;
        opacity: 0.7;
    }

    .team-member-row td[data-label="Naam"]:before {
        display: none;
    }

    /* Make name row prominent */
    .team-member-row td[data-label="Naam"] {
        padding-bottom: 12px;
        border-bottom: 1px solid var(--color-border);
        margin-bottom: 8px;
    }

    .team-cell-email,
    .team-cell-phone,
    .team-cell-count,
    .team-cell-muted {
        font-size: 13px;
    }

    .role-badge {
        font-size: 11px;
        padding: 2px 10px;
    }

    /* Hide checkbox column on very small screens */
    .team-member-row td:first-child {
        display: none;
    }
}

/* ===== MEMBER DETAIL (inline WordPress-style) ===== */

.perm-desc {
    font-size: 11px;
    color: var(--color-text-dim);
    opacity: 0.6;
    line-height: 1.4;
}

/* PROJECT DETAIL REFINEMENTS */

.detail-meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    opacity: 0.9;
    min-width: 0;
    word-break: break-word;
}

.detail-meta-item i {
    opacity: 0.5;
    font-size: 0.75em;
    flex-shrink: 0;
}

.detail-meta-divider {
    opacity: 0.15;
    flex-shrink: 0;
    font-weight: 300;
}

.detail-grid {
    display: grid;
    /* φ-ratio: side col ≈ 1/φ of main col width */
    grid-template-columns: 1fr 320px;
    gap: var(--space-xl); /* 28px */
    align-items: start;
    width: 100%;
    padding: var(--space-lg) var(--space-xl);
}

@media (max-width: 1024px) {
    .detail-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg); /* 17px */
        padding: var(--space-md) var(--space-lg);
    }
}

.detail-main-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg); /* 17px */
}

.detail-side-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg); /* 17px */
    position: relative;
    z-index: 2000;
}

.map-preview-card {
    padding: 0;
    overflow: hidden;
    aspect-ratio: 16/9;
    height: auto;
    background: var(--color-bg-deep);
    border-color: var(--color-border);
    position: relative;
    display: flex;
    flex-direction: row;
    /* Placeholder pattern to show it's a map area */
    background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Kaart canvas - neemt resterende breedte naast de sidebar */
.map-canvas {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}

/* Button row - two standalone buttons, no dock wrapper */
.map-viewer-buttons {
    display: inline-flex;
    gap: 10px;
    pointer-events: auto;
    align-items: center;
}

/* Primary CTA button (Inside Dock) */
.map-viewer-btn {
    flex: 0 0 auto;
    height: 36px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--color-brand);
    color: #000;
    border: none;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.map-viewer-btn:hover:not(:disabled) {
    background: #d4ff00;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.map-viewer-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.map-viewer-btn-delen:hover:not(:disabled) {
    background: rgba(30, 40, 60, 0.9) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-1px) !important;
}

/* Disabled state */
.map-viewer-btn:disabled {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.3);
    cursor: not-allowed;
    box-shadow: none;
}

.map-viewer-btn i {
    font-size: 13px;
    line-height: 1;
}

.map-viewer-btn:disabled i {
    opacity: 0.4;
}

/* Retail variant adjustments */
.map-viewer-buttons-retail {
    gap: 4px;
}

.map-viewer-btn-large {
    height: 36px !important;
    font-size: 11px !important;
    padding: 0 20px !important;
    gap: 8px !important;
}

.map-viewer-btn-large i {
    font-size: 14px !important;
}

body.light-mode .map-viewer-btn {
    background: var(--color-brand);
    color: #000;
}

body.light-mode .map-viewer-btn:disabled {
    background: rgba(255, 255, 255, 0.85);
    color: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.detail-section-card {
    padding: 0;
    position: relative;
    background: var(--color-bg-card);
    border: 1px solid var(--color-bg-alpha-05);
    border-radius: var(--radius-lg);
    margin-bottom: 0;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
}

.detail-section-card.open .chevron {
    transform: rotate(180deg);
}

/* Folder inspector (Drive-like) */
#folder-inspector {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.folder-inspector-header {
    padding: 18px 18px 12px;
    border-bottom: 1px solid var(--color-bg-alpha-05);
}

.folder-inspector-title {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: var(--color-text-main);
}

.folder-inspector-title i {
    margin-top: 2px;
    font-size: 14px;
    opacity: 0.7;
}

.folder-inspector-name {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.folder-inspector-sub {
    margin-top: 4px;
    font-size: 11px;
    color: var(--color-text-dim);
    line-height: 1.4;
}

.folder-inspector-body {
    padding: 16px 18px 120px; /* Extra bottom padding for dropdowns */
    overflow-y: auto;
}

.folder-inspector-desc {
    font-size: 11px;
    color: var(--color-text-dim);
    line-height: 1.5;
    padding: 10px 12px;
    border: 1px solid var(--color-bg-alpha-05);
    border-radius: 12px;
    background: rgba(0,0,0,0.10);
    margin-bottom: 12px;
}

.folder-inspector-root-card {
    padding: 14px 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--color-bg-alpha-05);
    background: linear-gradient(165deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
}
.folder-inspector-root-kicker {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: none;
    color: var(--color-brand);
    margin-bottom: 8px;
}
.folder-inspector-root-lead {
    font-size: 12px;
    color: var(--color-text-main);
    line-height: 1.55;
    margin: 0 0 12px;
}
.folder-inspector-root-steps {
    margin: 0;
    padding-left: 18px;
    font-size: 11px;
    color: var(--color-text-dim);
    line-height: 1.6;
}
.folder-inspector-root-steps li {
    margin-bottom: 4px;
}

.folder-inspector-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.folder-inspector-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-main);
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--color-bg-alpha-05);
    border: 1px solid var(--color-bg-alpha-10);
}
.folder-inspector-pill i {
    font-size: 10px;
    opacity: 0.75;
    color: var(--color-brand);
}
.folder-inspector-settings-btn {
    width: 100%;
    margin: 0 0 14px !important;
    padding: 12px 16px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.folder-inspector-settings-btn i {
    font-size: 13px;
}

.folder-inspector-loading,
.folder-inspector-empty {
    font-size: 11px;
    color: var(--color-text-dim);
    padding: 12px 0;
}

.folder-inspector-member-list {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.folder-inspector-member-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.folder-inspector-avatar {
    width: 26px;
    height: 26px;
    border-radius: 9px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-alpha-05);
    color: var(--color-brand);
    font-size: 11px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.folder-inspector-member-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.folder-inspector-member-phone {
    margin-top: 2px;
    font-size: 10px;
    color: var(--color-text-dim);
}

.folder-inspector-add {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}

.collapsible-header {
    cursor: pointer;
    border-bottom-color: transparent !important; /* No border when closed */
}

.card-x.open .collapsible-header,
.card.open .collapsible-header {
    border-bottom-color: var(--color-border) !important;
}

.card-header .chevron {
    font-size: 10px;
    color: var(--color-text-muted);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.5;
    flex-shrink: 0;
    margin-left: 12px;
}

.card-x.open .chevron,
.card.open .chevron {
    transform: rotate(180deg);
}

.detail-section-content {
    padding: var(--space-lg); /* 17px - φ-based */
}

.safety-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.safety-notice-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--color-bg-alpha-02);
    border-radius: 8px;
    border: 1px solid var(--color-bg-alpha-05);
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .safety-notice-item:hover {
        border-color: var(--color-border-hover);
        background: var(--color-bg-alpha-05);
    }
}

.safety-notice-item:active {
    background: var(--color-bg-alpha-05);
}

.safety-notice-item.checked {
    background: rgba(204, 255, 0, 0.1) !important;
    border-color: var(--color-brand) !important;
}

.safety-checkbox {
    width: 18px;
    height: 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 5px;
    flex-shrink: 0;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.safety-notice-item.checked .safety-checkbox {
    border-color: var(--color-brand);
    background: var(--color-brand);
}

.assignment-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.assignment-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--color-bg-alpha-02);
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

.assignment-avatar {
    width: 32px;
    height: 32px;
    background: var(--color-bg-alpha-10);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.export-item {
    height: auto;
    padding: 10px 14px 10px 14px;
    justify-content: start;
    text-align: left;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 0;
    white-space: normal;
    text-transform: none;
    letter-spacing: 0;
}

.export-item:disabled, .export-item.disabled {
    pointer-events: none;
    filter: grayscale(1);
    opacity: 0.5;
}

.export-icon-box {
    width: 28px;
    height: 28px;
    background: var(--color-bg-alpha-05);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    flex-shrink: 0;
}

.export-info {
    flex: 1;
    min-width: 0;
}

.export-title {
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    word-break: break-word;
}

.export-desc {
    font-size: 9px;
    color: var(--color-text-dim);
    line-height: 1.3;
    margin-top: 1px;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    word-break: break-word;
}

/* BGT verrijkte exports */
.export-item-bgt {
    border-color: rgba(34, 197, 94, 0.2);
}

.export-item-bgt:hover:not(:disabled) {
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.05);
}

.export-icon-bgt {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

.export-badge-new {
    display: inline-block;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.04em;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    border-radius: 3px;
    padding: 1px 4px;
    vertical-align: middle;
    margin-left: 4px;
    text-transform: none;
}

/* IFC/BIM exports */
.export-item-ifc {
    border-color: rgba(99, 102, 241, 0.25);
}

.export-item-ifc:hover:not(:disabled) {
    border-color: rgba(99, 102, 241, 0.5);
    background: rgba(99, 102, 241, 0.06);
}

.export-icon-ifc {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

.export-item-landxml {
    border-color: rgba(234, 179, 8, 0.25);
}

.export-item-landxml:hover:not(:disabled) {
    border-color: rgba(234, 179, 8, 0.5);
    background: rgba(234, 179, 8, 0.06);
}

.export-icon-landxml {
    background: rgba(234, 179, 8, 0.12);
    color: #eab308;
}

@media (max-width: 1023px) {
    .detail-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg); /* 17px */
    }
    .map-preview-card {
        aspect-ratio: 16/7;
    }
}

/* MISC UTILITIES */
.brand-color { color: var(--color-brand) !important; }

.btn-icon-only { background: none; border: none; color: rgba(255,255,255,0.8); cursor: pointer; padding: 4px; transition: color 0.2s; }

.btn-icon-only:hover { color: #fff; }

.opacity-muted { opacity: 0.5; }

/* PROJECT TITLE & HEADERS - see .detail-title in detail header section */

/* TOP BAR REFINEMENTS */
.top-bar-desktop {
    height: var(--top-bar-height);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    background: var(--color-bg-deep);
}

.top-bar-desktop.is-shared {
    justify-content: space-between;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
}

.top-bar-right {
    display: flex;
    align-items: center;
    /* Gelijke ruis tussen zoek-icoon, bel en account (flex-items) */
    gap: 12px;
}

/* Bel (32px target) + helm-avatar: zelfde midden, helm optisch gecentreerd in cirkel */
.top-bar-right .notification-trigger {
    flex-shrink: 0;
}
.top-bar-right .user-avatar-small {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    flex-shrink: 0;
}
.top-bar-right .user-avatar-small.user-avatar-small--helm-icon {
    width: auto;
    min-width: 0;
    height: 32px;
    min-height: 32px;
}
.top-bar-right .user-avatar-helm-default {
    line-height: 0;
    align-items: center;
    justify-content: center;
}
.top-bar-right .user-avatar-helm-default i {
    display: block;
    font-size: 14px;
    line-height: 1;
    transform: translateY(0.5px);
}
.top-bar-right .user-trigger {
    display: flex;
    gap: 8px;
    align-items: center;
    min-height: 32px;
    /* Genoeg lucht links van de helm; oude 2px links was te krap t.o.v. bel */
    padding: 5px 10px 5px 10px;
    border-radius: 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    box-sizing: border-box;
    /* Geen padding-wijziging op :hover: die deed de hele rechterbalk breed krimpen/uitbreiden
       en schoof zoek-icoon + bel opzichtbaar naar links. */
    transition: background 0.2s ease;
}
.top-bar-right .user-trigger:hover,
.top-bar-right .user-trigger:focus-visible {
    background: var(--color-bg-alpha-05);
}
body.light-mode .top-bar-right .user-trigger:hover,
body.light-mode .top-bar-right .user-trigger:focus-visible {
    background: #F2F2F7 !important;
}

.top-bar-right .user-name-mini--full {
    min-width: 0;
    max-width: min(240px, 42vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Zelfde helm-centrering op mobiele header */
.search-header .user-avatar-small .user-avatar-helm-default {
    line-height: 0;
    align-items: center;
    justify-content: center;
}
.search-header .user-avatar-small .user-avatar-helm-default i {
    display: block;
    font-size: 14px;
    line-height: 1;
    transform: translateY(0.5px);
}

/* Profiel-trigger mobiele header: alleen helm — naam staat in dropdown */
.search-header .user-dropdown .search-header-user-trigger {
    display: flex;
    gap: 0;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    min-width: 32px;
    padding: 4px;
    border-radius: 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.2s ease;
    max-width: none;
}
.search-header .user-dropdown .search-header-user-trigger:hover,
.search-header .user-dropdown .search-header-user-trigger:focus-visible {
    background: var(--color-bg-alpha-05);
}
body.light-mode .search-header .user-dropdown .search-header-user-trigger:hover,
body.light-mode .search-header .user-dropdown .search-header-user-trigger:focus-visible {
    background: #f2f2f7 !important;
}
.search-header .user-dropdown .search-header-user-trigger__name,
.search-header .user-dropdown .search-header-user-trigger__chevron {
    display: none !important;
}

/* SUPER SEARCH (Expandable) */
.super-search-wrapper {
    position: relative;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-right: 8px;
}

.super-search-wrapper.is-expanded {
    width: 400px;
    max-width: calc(100vw - 300px);
}

.super-search-inner {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

.super-search-trigger {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-dim);
    font-size: 14px;
    border-radius: 8px;
    transition: all 0.2s;
    flex-shrink: 0;
    z-index: 10;
}

.super-search-trigger:hover {
    background: var(--color-bg-alpha-05);
    color: var(--color-text-main);
}

.super-search-wrapper.is-expanded .super-search-trigger {
    position: absolute;
    left: 12px;
    pointer-events: none;
    opacity: 0.6;
}

.super-search-shortcut {
    position: absolute;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-muted);
    font-size: 9px;
    font-weight: 700;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.super-search-wrapper.is-expanded .super-search-shortcut {
    opacity: 0.5;
}

.shortcut-key {
    border: 1px solid var(--color-border);
    padding: 1px 4px;
    border-radius: 4px;
    background: var(--color-bg-surface);
}

.search-header .logo .logo-tier-text.tier-pro { font-size: 20px; }

.search-header .mobile-logo-link,
.mobile-nav-header .logo {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* OVERVIEW TAB REFINEMENTS */
.team-map-container {
    width: 100%;
    height: 100%;
    z-index: 1;
}

.team-map-wrap {
    position: relative;
    width: 100%;
    height: 320px;
}

@media (min-width: 1024px) {
    .team-map-wrap { height: 360px; }
}

/* --- Full-screen project map (/user/map) --- */
.dashboard-map-page .view-body-wrapper {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    overflow: hidden;
}

.map-fullscreen-root {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 var(--dash-page-gutter-x) 16px;
    gap: 12px;
}

/* Kaart: geen page-gutter - edge-to-edge in hoofdvlak */
#view-map .map-fullscreen-root,
.dashboard-map-page .map-fullscreen-root {
    padding: 0;
    gap: 0;
}

@media (min-width: 1024px) {
    .map-fullscreen-root {
        padding: 0 var(--dash-page-gutter-x) 24px;
    }
    #view-map .map-fullscreen-root,
    .dashboard-map-page .map-fullscreen-root {
        padding: 0;
    }
}

.map-fullscreen-header .map-fullscreen-title.dash-page-title {
    display: block;
    text-transform: none;
    font-weight: 700;
    letter-spacing: -0.03em;
    font-size: 18px;
    margin: 8px 0 4px;
    color: #fff;
}
body.light-mode .map-fullscreen-header .map-fullscreen-title.dash-page-title {
    color: var(--color-text-main, #111318);
}

.map-fullscreen-sub.dash-page-sub {
    margin: 0 0 6px;
}

.map-fullscreen-card {
    flex: 1;
    min-height: 280px;
    display: flex;
    flex-direction: column;
}

.map-fullscreen-card .team-map-wrap--fullscreen {
    flex: 1;
    min-height: 50vh;
    height: calc(100vh - 220px);
}

/* Map tab (SPA) + /user/map: randloze kaart, vult hoogte onder topbar */
#view-map.view-container {
    overflow: hidden;
}
#view-map .map-fullscreen-dashboard {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.dashboard-map-page .map-fullscreen-dashboard {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}
#view-map .map-fullscreen-card,
.dashboard-map-page .map-fullscreen-card {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    overflow: hidden !important;
}
#view-map .map-fullscreen-card:hover,
.dashboard-map-page .map-fullscreen-card:hover {
    border-color: transparent !important;
    background: transparent !important;
}
#view-map .map-fullscreen-card .team-map-wrap--fullscreen,
.dashboard-map-page .map-fullscreen-card .team-map-wrap--fullscreen {
    flex: 1 1 auto;
    min-height: 0;
    height: 100% !important;
}

@media (min-width: 1024px) {
    .main-content:has(#view-map.view-container.active) {
        min-height: 0;
        overflow: hidden !important;
    }
    .main-content:has(#view-map.view-container.active) .view-body-wrapper {
        flex: 1 1 0%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    #view-map.view-container.active {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        width: 100%;
        overflow: hidden !important;
    }
}

@media (max-width: 1023px) {
    #view-map.view-container.active {
        display: flex !important;
        flex-direction: column;
        flex: none !important;
        min-height: calc(100dvh - 120px);
        overflow: hidden !important;
    }
    #view-map .map-fullscreen-dashboard,
    #view-map .map-fullscreen-root {
        flex: 1 1 auto;
        min-height: 0;
    }
    #view-map .map-fullscreen-card .team-map-wrap--fullscreen,
    .dashboard-map-page .map-fullscreen-card .team-map-wrap--fullscreen {
        min-height: 280px;
        height: calc(100dvh - 180px) !important;
    }
}

.overview-map-cta-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Compacte preview-kaart op dashboard (onder intro-tekst) */
.overview-map-preview-wrap {
    margin: 0;
    border-top: 1px solid var(--color-border);
    overflow: hidden;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.overview-map-preview-wrap .team-map-wrap {
    height: 300px;
}

@media (min-width: 1024px) {
    .overview-map-preview-wrap .team-map-wrap {
        height: 380px;
    }
}

@media (max-width: 1023px) {
    .map-fullscreen-card .team-map-wrap--fullscreen {
        height: calc(100vh - 200px);
        min-height: 260px;
    }

    .dashboard-map-page.app-container {
        height: 100dvh !important;
        min-height: 100dvh;
        overflow: hidden !important;
    }

    .dashboard-map-page .main-content {
        flex: 1;
        min-height: 0;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
    }

    .dashboard-map-page .view-body-wrapper {
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .map-fullscreen-root {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.btn-urgent-icon-brand {
    background: var(--color-bg-alpha-10);
    color: var(--color-brand);
}

.btn-urgent-icon-danger {
    background: rgba(255, 77, 77, 0.1);
    color: #ff4d4d;
}

.column-flex-tall {
    height: 440px;
}

.column-flex-medium {
    height: 280px;
}

.chat-icon-brand {
    color: var(--color-brand) !important;
}

/* TEAM STATS CARDS */
.team-stats-card-content {
    padding: 20px;
}

.seat-usage-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 14px;
}

.seat-count-display {
    font-size: 36px;
    font-weight: 900;
    color: var(--color-text-main);
    line-height: 1;
    letter-spacing: -0.02em;
}

.seat-count-total {
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: 500;
    margin-left: 2px;
}

.seat-usage-percent {
    font-size: 11px;
    font-weight: 800;
    color: var(--color-brand);
    padding: 3px 8px;
    background: rgba(204, 255, 0, 0.06);
    border-radius: 6px;
}

.seat-usage-percent.over-capacity {
    color: #ff5555;
    background: rgba(255, 68, 68, 0.08);
}

.usage-progress-track {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.04);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 16px;
}

.usage-progress-bar {
    height: 100%;
    background: var(--color-brand);
    border-radius: 3px;
    transition: width 0.6s ease;
}

.usage-progress-bar.over-capacity {
    background: linear-gradient(90deg, var(--color-brand) 0%, #ff5555 100%);
}

.seat-info-box {
    background: rgba(204, 255, 0, 0.02);
    border: 1px solid rgba(204, 255, 0, 0.06);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 10px;
    color: var(--color-text-dim);
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.seat-info-box i {
    color: var(--color-brand);
    font-size: 11px;
    margin-top: 1px;
    flex-shrink: 0;
}

/* Distribution card */
.distribution-stack {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.distribution-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.distribution-row:last-child {
    border-bottom: none;
}

.distribution-label-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dot-indicator {
    width: 8px;
    height: 8px;
    border-radius: 3px;
}

.dot-admin { background: var(--color-brand); }

.dot-member { background: var(--color-text-muted); }

.dot-safety { background: #00c8ff; }

.dot-viewer { background: #64b4ff; }

.distribution-count {
    font-size: 13px;
    font-weight: 800;
    color: var(--color-text-main);
    min-width: 24px;
    text-align: right;
}

.user-full-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-main);
    letter-spacing: -0.01em;
}

.user-phone-sub {
    font-size: 10px;
    color: var(--color-text-dim);
    opacity: 0.6;
    font-variant-numeric: tabular-nums;
}

.user-activity-main {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-main);
}

.user-business-unit {
    font-size: 10px;
    color: var(--color-text-dim);
}

.btn-precision-small {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-precision-small:hover {
    background: rgba(204, 255, 0, 0.08);
    border-color: rgba(204, 255, 0, 0.15);
}

.btn-precision-small i {
    font-size: 12px;
    opacity: 0.9;
    color: inherit;
    transition: all 0.15s ease;
}

.btn-precision-small:hover i {
    opacity: 1;
    color: var(--color-brand);
}

/* EXTRA UTILITIES FOR TEMPLATES */
.cursor-pointer { cursor: pointer; }

.danger-text { color: #ff4d4d !important; }

.btn-text-brand { background: none; border: none; color: var(--color-brand); font-size: 10px; font-weight: 500; cursor: pointer; text-transform: none; }

/* Alle knoppen: medium - overschrijft inline font-weight op <button> / .btn */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.btn,
a.btn {
    font-weight: 500 !important;
}

.success-icon { font-size: 11px; }

.warning-icon { font-size: 11px; }

/* BOX-INSPIRED SHARE & COLLABORATORS STYLING */
.collaborators-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-bg-alpha-02);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.collaborators-summary:hover {
    background: var(--color-bg-alpha-05);
    border-color: var(--color-brand);
}

.collaborator-avatars {
    display: flex;
    align-items: center;
}

.avatar-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-bg-alpha-10);
    border: 2px solid var(--color-bg-card);
    margin-left: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: var(--color-text-main);
    position: relative;
    z-index: 1;
}

.avatar-circle:first-child {
    margin-left: 0;
}

.avatar-circle i {
    font-size: 12px;
    color: var(--color-brand);
}

.avatar-circle.plus-more {
    background: var(--color-bg-surface);
    color: var(--color-text-dim);
    font-size: 9px;
    font-weight: 600;
}

.no-collaborators {
    font-size: 11px;
    color: var(--color-text-muted);
    font-weight: 500;
}

.collaborator-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-dim);
}

.collaborator-count {
    font-size: 11px;
    font-weight: 600;
}

.collaborator-info i.fa-chevron-right {
    font-size: 10px;
    opacity: 0.5;
}

.invite-input-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    align-items: center;
}

.invite-search-wrap {
    flex: 3; /* Increased space for search input */
    position: relative;
    min-width: 0;
}

.invite-search-wrap .searchable-dropdown input {
    height: 38px;
    padding: 0 32px 0 12px;
}

.btn-invite {
    height: 38px;
    width: auto;
    padding: 0 16px;
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    margin-bottom: 0;
}

.share-list-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: min(240px, 38vh);
    overflow-y: auto;
    padding: 2px 8px 2px 2px;
    margin: 0 -2px;
}

.btn-copy-sm {
    height: 32px;
    width: auto;
    padding: 0 12px;
    font-size: 11px;
    margin-bottom: 0;
}

.btn-whatsapp-standard {
    height: 44px;
    width: auto;
    padding: 0 16px;
    background: #25D366 !important;
    color: #000 !important;
    border: none !important;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-bottom: 0;
    transition: all 0.2s;
}

.share-section {
    padding: 20px var(--dash-page-gutter-x);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.share-section:last-child {
    border-bottom: none;
}

.share-section-divider {
    height: 1px;
    background: rgba(255,255,255,0.05);
    margin: 0 var(--dash-page-gutter-x);
}

.share-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0.1em;
    color: var(--color-text-dim);
    margin-bottom: 14px;
}

.share-section-label i {
    font-size: 11px;
    color: var(--color-brand);
    opacity: 0.8;
    width: 14px;
    text-align: center;
}

/* Tier badges */
.share-tier-badge {
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: auto;
}

.share-tier-pro {
    background: rgba(204,255,0,0.12);
    color: var(--color-brand);
    border: 1px solid rgba(204,255,0,0.2);
}

.share-tier-enterprise {
    background: rgba(59,130,246,0.12);
    color: #60a5fa;
    border: 1px solid rgba(59,130,246,0.2);
}

/* Invite row */
.share-invite-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.share-invite-search {
    width: 100%;
}

.share-invite-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.share-invite-btn {
    flex: 1;
    height: 42px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    /* Zelfde hoeken als inputs / Kopiëren / WhatsApp (geen .btn pill18px) */
    border-radius: var(--share-control-radius, 10px) !important;
    margin-bottom: 0 !important;
}

.share-copy-btn {
    height: 44px;
    padding: 0 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--color-border);
    border-radius: var(--share-control-radius, 10px);
    color: var(--color-text-main);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    white-space: nowrap;
}

.share-copy-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--color-brand);
    color: var(--color-brand);
}

.share-copy-btn i { font-size: 11px; }

.share-wa-btn {
    width: 100%;
    height: 46px;
    background: #25D366;
    border: none;
    border-radius: var(--share-control-radius, 10px);
    color: #000;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.01em;
}

.share-wa-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.share-wa-btn i { font-size: 17px; }

/* Audit block */
.share-audit-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.share-audit-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-text-dim);
}

.share-audit-row i { font-size: 12px; flex-shrink: 0; margin-top: 2px; }

.share-audit-row__icon {
    color: var(--color-brand) !important;
}

.share-upgrade-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.share-upgrade-icon {
    width: 36px;
    height: 36px;
    background: rgba(204,255,0,0.1);
    border-radius: var(--share-control-radius, 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--color-brand);
    flex-shrink: 0;
}

.share-upgrade-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--color-text-main);
}

.share-upgrade-desc {
    font-size: 11px;
    color: var(--color-text-dim);
    margin-top: 2px;
    line-height: 1.4;
}

.share-upgrade-btn {
    font-size: 11px;
    font-weight: 700;
    padding: 8px 16px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: var(--share-control-radius, 10px) !important;
    width: auto !important;
    margin-bottom: 0 !important;
}

.btn-whatsapp-standard:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.btn-whatsapp-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #25D366;
    color: #000;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-whatsapp-icon:hover {
    filter: brightness(1.1);
}

.share-info-text {
    font-size: 10px;
    color: var(--color-text-muted);
    margin-top: 12px;
    line-height: 1.5;
}

.warning-text {
    color: var(--color-warning);
    opacity: 0.8;
    font-weight: 600;
}

/* PROJECT DETAIL HEADER (Unifies with Inbox Header rhythm) */
.project-detail-container {
    padding-top: 16px !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; /* Important for nested flex scrolling */
}

.detail-scroll-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0; /* Important for nested flex scrolling */
    display: flex;
    flex-direction: column;
}

.detail-header {
    padding: 0 var(--dash-page-gutter-x) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    margin: 0;
    margin-bottom: var(--space-xl);
    position: sticky;
    top: 0;
    z-index: 3000;
}

.detail-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 32px;
    margin-bottom: 4px;
}

/* Breadcrumb (backbar) + projecttitel visueel één blok */
#workspace-pane.has-project-detail .workspace-backbar,
#workspace-pane.has-project-detail .workspace-breadcrumb-bar {
    border-bottom: none;
    padding-bottom: 4px;
    min-height: 0;
}

#workspace-pane.has-project-detail .project-detail-container {
    padding-top: 0 !important;
}

#workspace-pane.has-project-detail .detail-header {
    padding-top: 0;
    margin-top: 0;
}

#workspace-pane.has-project-detail .detail-bottom-row {
    margin-top: 0;
}

.detail-meta-row:first-of-type {
    margin-top: 0;
    margin-bottom: 10px;
}

.parse-quality-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.28);
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-text-dim);
}

.parse-quality-banner__icon {
    color: #f59e0b;
    margin-top: 2px;
    flex-shrink: 0;
}

.parse-quality-banner__text strong {
    color: var(--color-text-main);
    font-weight: 700;
}

.parse-quality-banner__hints {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--color-text-dim);
}

.parse-quality-banner__hint code {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
    color: var(--color-text-main);
}

.detail-meta-row.detail-meta-status-row {
    margin-bottom: var(--space-md);
}

/* Breadcrumb inside sticky project header */
.detail-breadcrumb {
    min-width: 0;
    flex: 1;
    margin-right: 12px;
    margin-left: 0;
}

.detail-breadcrumb .crumb {
    opacity: 0.55;
}

.detail-bottom-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg);
    min-height: 38px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.detail-title-cluster {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Title + naked icon trio: desktop = icons flush after title (left group); mobile = trio pinned right on same line */
.detail-title-leading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    width: 100%;
}

.detail-title-actions-trio {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

/* Same visual language as the old inline pen: no box, muted until hover */
.detail-title-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--color-text-dim);
    opacity: 0.35;
    cursor: pointer;
    font-size: calc(var(--text-title) * 0.48);
    line-height: 1;
    vertical-align: middle;
    transition: opacity 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.detail-title-icon-btn i {
    font-size: 1em;
    pointer-events: none;
}

.detail-title-icon-btn:hover {
    opacity: 1;
    color: var(--color-brand);
}

.detail-title-icon-btn:active {
    opacity: 0.85;
    transform: scale(0.96);
}

.detail-title-icon-btn--danger:hover {
    color: #ef4444;
    opacity: 1;
}

@media (min-width: 1024px) {
    .detail-title-leading .detail-title {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 1023px) {
    .detail-title-leading .detail-title {
        flex: 1 1 0%;
        min-width: 0;
    }

    .detail-title-actions-trio {
        margin-left: auto;
    }
}

body.light-mode .detail-title-icon-btn {
    color: var(--color-text-muted);
    opacity: 0.45;
}

body.light-mode .detail-title-icon-btn:hover {
    opacity: 1;
    color: var(--color-brand);
}

body.light-mode .detail-title-icon-btn--danger:hover {
    color: #dc2626;
}

.detail-title {
    font-size: var(--text-title);
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-text-main);
    letter-spacing: -0.02em;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.detail-title-status {
    flex-shrink: 0;
    font-size: 11px;
    padding: 3px 10px;
    white-space: nowrap;
}

.detail-meta-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-shrink: 0;
    font-size: var(--text-caption);
    line-height: 1.35;
    color: var(--color-text-dim);
}

.detail-top-bar {
    display: none; /* Removed in favor of unified header rows */
}

.folder-move-wrap {
    display: flex;
    align-items: center;
}

.btn-folder-move {
    background: transparent;
    border: none;
    padding: 4px 12px;
    height: 32px;
    color: var(--color-text-muted);
    font-weight: 800;
    font-size: 10px;
    text-transform: none;
    letter-spacing: 0.12em;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-folder-move:hover {
    color: var(--color-text-main);
    background: var(--color-bg-alpha-05);
    border-radius: 8px;
}

.btn-folder-move i.fa-folder {
    color: var(--color-brand);
    font-size: 13px;
    opacity: 0.9;
}

.btn-icon-subtle.is-active {
    background: var(--color-text-main);
    color: var(--color-bg-deep);
}

.btn-icon-subtle.is-active:hover {
    background: var(--color-text-main);
    opacity: 0.8;
}

.folder-context-menu.open {
    display: block;
}

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

.context-menu-item {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.1s;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-main);
}

.context-menu-item:hover {
    background: var(--color-text-main);
    color: var(--color-bg-deep);
}

.context-menu-item i {
    width: 20px;
    font-size: 14px;
    color: var(--color-text-dim);
    text-align: center;
}

.context-menu-item:hover i {
    color: #000;
}

.context-menu-divider {
    height: 1px;
    background: var(--color-border);
    margin: 4px;
    opacity: 0.6;
}

.context-menu-item .shortcut {
    margin-left: auto;
    color: var(--color-text-muted);
    font-size: 10px;
    opacity: 0.6;
    font-weight: 400;
}

.context-menu-item:hover .shortcut {
    color: #000;
    opacity: 0.7;
}

.context-menu-item .chevron {
    margin-left: auto;
    font-size: 9px;
    opacity: 0.3;
}

.context-menu-item:hover .chevron {
    color: #000;
    opacity: 0.5;
}

.context-menu-item.danger:hover {
    background: #ff4d4d;
    color: #fff;
}

.context-menu-item.danger:hover i,
.context-menu-item.danger:hover .shortcut {
    color: #fff;
}

/* Project context menu: export flyout */
.context-menu-has-submenu {
    position: relative;
}
.context-menu-has-submenu > .context-menu-submenu-trigger .chevron {
    margin-left: auto;
}
.context-menu-submenu {
    display: none;
    position: absolute;
    left: calc(100% + 6px);
    top: -6px;
    min-width: 252px;
    padding: 6px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    z-index: 10001;
    backdrop-filter: blur(12px);
}
.context-menu-has-submenu.submenu-open .context-menu-submenu {
    display: block;
    animation: menuFadeIn 0.12s cubic-bezier(0, 0, 0.2, 1);
}
.context-menu-submenu .context-menu-divider {
    margin: 4px 0;
}
@media (max-width: 520px) {
    .context-menu-submenu {
        left: auto;
        right: calc(100% + 6px);
        top: -6px;
    }
}
@media (max-width: 400px) {
    .context-menu-submenu {
        left: 0;
        right: auto;
        top: calc(100% + 4px);
        min-width: min(252px, calc(100vw - 24px));
    }
}

/* Sliding Container */
.member-filter-sliding-wrap {
    display: flex;
    width: 200%; /* Two screens wide */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}

.member-filter-sliding-wrap.show-roles {
    transform: translateX(-50%);
}

.member-filter-main-screen,
.member-filter-roles-screen {
    width: 50%;
    display: flex;
    flex-direction: column;
}

.member-filter-search-wrap {
    padding: 12px;
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    background: var(--color-bg-surface);
    z-index: 5;
}

/* Roles Screen Header */
.member-roles-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-bg-surface);
}

.btn-back-to-members {
    background: transparent;
    border: none;
    color: var(--color-text-dim);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    width: auto;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-back-to-members:hover {
    background: var(--color-bg-alpha-10);
    color: var(--color-text-main);
}

.member-roles-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-main);
}

.member-filter-search-inner {
    position: relative;
    display: flex;
    align-items: center;
}

.member-filter-search-inner i {
    position: absolute;
    left: 12px;
    color: var(--color-text-dim);
    font-size: 14px;
}

.member-filter-list,
.member-roles-list {
    overflow-y: auto;
    flex: 1;
    padding: 4px 0;
}

.member-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-brand);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    text-transform: none;
    overflow: hidden;
}

.member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-avatar.color-0 { background-color: #ef4444; }

.member-avatar.color-1 { background-color: #3b82f6; }

.member-avatar.color-2 { background-color: #10b981; }

.member-avatar.color-3 { background-color: #f59e0b; }

.member-avatar.color-4 { background-color: #8b5cf6; }

.member-avatar.color-5 { background-color: #ec4899; }

.member-info {
    flex: 1;
    min-width: 0;
}

.member-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-main);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-subtext {
    font-size: 12px;
    color: var(--color-text-dim);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-arrow {
    color: var(--color-text-dim);
    font-size: 12px;
    opacity: 0.5;
    transition: transform 0.2s;
}

.member-role-item i {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--color-text-dim);
    background: var(--color-bg-alpha-05);
    border-radius: 50%;
}

.member-role-info {
    flex: 1;
}

.member-role-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-main);
    display: block;
}

.member-role-desc {
    font-size: 11px;
    color: var(--color-text-dim);
    display: block;
}

.member-filter-empty {
    padding: 24px;
    text-align: center;
    color: var(--color-text-dim);
    font-size: 14px;
}

/* STICKY HEADER & SCROLL FIX */
#workspace-pane {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    position: relative;
}

.drive-file-drop-overlay {
    position: absolute;
    inset: 0;
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.45);
    border: 2px dashed rgba(204, 255, 0, 0.35);
    border-radius: 16px;
    margin: 8px;
}

#workspace-pane.is-drive-file-drag .drive-file-drop-overlay {
    display: flex;
    animation: drive-drop-overlay-in 0.22s ease-out both;
}

@keyframes drive-drop-overlay-in {
    from { opacity: 0; transform: scale(0.985); }
    to { opacity: 1; transform: scale(1); }
}

.drive-file-drop-overlay-inner {
    text-align: center;
    padding: 24px 20px;
    max-width: 380px;
}

.drive-file-drop-overlay-inner i {
    font-size: 36px;
    color: #ccff00;
    margin-bottom: 12px;
    filter: drop-shadow(0 0 8px rgba(204, 255, 0, 0.35));
    animation: drive-drop-icon-pulse 1.1s ease-in-out infinite;
}

@keyframes drive-drop-icon-pulse {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(-4px); opacity: 0.88; }
}

.drive-file-drop-title {
    display: block;
    font-weight: 700;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 6px;
}

.drive-file-drop-hint {
    display: block;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.6);
}

.workspace-folder-row.is-file-drop-target,
.sidebar-folder-item.is-file-drop-target {
    outline: 2px solid #ccff00 !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(204, 255, 0, 0.12), 0 8px 28px rgba(204, 255, 0, 0.08);
    animation: drive-folder-drop-pulse 0.85s ease-in-out infinite;
}

@keyframes drive-folder-drop-pulse {
    0%, 100% { outline-color: rgba(204, 255, 0, 0.95); }
    50% { outline-color: rgba(204, 255, 0, 0.45); }
}

body.light-mode #workspace-pane.is-drive-file-drag .drive-file-drop-overlay,
[data-theme="light"] #workspace-pane.is-drive-file-drag .drive-file-drop-overlay {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(120, 140, 0, 0.45);
}

body.light-mode .drive-file-drop-title,
[data-theme="light"] .drive-file-drop-title {
    color: rgba(20, 20, 22, 0.95);
}

body.light-mode .drive-file-drop-hint,
[data-theme="light"] .drive-file-drop-hint {
    color: rgba(20, 20, 22, 0.55);
}

#workspace-folder-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#workspace-folder-view .workspace-project-columns {
    position: sticky;
    top: 0;
    z-index: 99;
    background: transparent;
}

#workspace-folder-view .workspace-project-items {
    padding-bottom: 120px;
}

/* Drive lijst (smalle iframe / embed): horizontaal scrollen als kolom-minima breder zijn dan pane */
#workspace-pane:not(.is-tiles) .inbox-list-wrapper .inbox-list {
    overflow-x: auto;
}

#workspace-contents {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 100px;
}

@media (max-width: 1023px) {
    #workspace-contents {
        padding-left: var(--space-lg) !important;
        padding-right: var(--space-lg) !important;
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
    .workspace-subfolders {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #workspace-pane.is-tiles .workspace-project-items {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* FIX: Mobile Scrolling & Map Cutoff */
@media (max-width: 1023px) {
    /* html/body: body is the ONE scroll container - must have a fixed height so
       content can overflow it. sidebar.css sets height:auto which prevents scroll. */
    html {
        height: 100vh !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }
    body {
        height: 100vh !important;
        height: 100dvh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Allow the view container to grow with content.
       Must stay a flex column (not `display: block`): nested shells like
       #view-agenda .view-body--edge + .agenda-layout rely on flex; `block`
       drops flex-item sizing and breaks agenda / split layouts. Sidebar mobile
       rules already use flex; this block must not override with block. */
    .view-container.active {
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
        height: auto !important;
        flex: none !important;
        min-height: 100vh; /* Ensure it fills screen at minimum */
    }

    /* Disable internal scrolling, let the window/body scroll */
    .view-body {
        overflow: visible !important;
        height: auto !important;
        padding-bottom: 120px !important; /* Space for bottom nav */
    }

    /* Ensure map card has proper spacing */
    .overview-map-card {
        height: 400px !important;
        margin-bottom: 24px;
        flex: none !important;
    }

    #view-map .overview-map-card,
    .dashboard-map-page .overview-map-card {
        height: auto !important;
        min-height: 280px !important;
        flex: 1 1 auto !important;
        margin-bottom: 0 !important;
        aspect-ratio: unset !important;
    }
    
    /* app-container is NOT a scroll container on mobile - body handles scroll */
    .app-container {
        height: auto !important;
        overflow: visible !important;
    }
    
    .main-content {
        height: auto !important;
        overflow: visible !important;
    }

    /* view-body-wrapper and split-view must NOT be height-constrained */
    .view-body-wrapper {
        height: auto !important;
        flex: none !important;
        overflow: visible !important;
    }

    .split-view {
        height: auto !important;
        overflow: visible !important;
    }

    .desktop-preview-pane {
        height: auto !important;
        overflow: visible !important;
        flex: none !important;
    }
}

/* ============================================================
   PENDING KLIC - Elegant "in behandeling" hero
   ============================================================ */
.pending-map-hero {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #141414 0%, #1a1a1a 40%, #161616 100%);
    overflow: hidden;
}

.pending-map-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pending-grid-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(204, 255, 0, 0.04) 30%, rgba(204, 255, 0, 0.06) 50%, rgba(204, 255, 0, 0.04) 70%, transparent 100%);
}

.pending-grid-line.vertical {
    top: 0;
    bottom: 0;
    left: auto;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, transparent 0%, rgba(204, 255, 0, 0.04) 30%, rgba(204, 255, 0, 0.06) 50%, rgba(204, 255, 0, 0.04) 70%, transparent 100%);
}

.pending-pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(204, 255, 0, 0.08);
    animation: pendingPulse 3s ease-in-out infinite;
}

.pending-pulse-ring::before {
    content: '';
    position: absolute;
    inset: -40px;
    border-radius: 50%;
    border: 1px solid rgba(204, 255, 0, 0.04);
    animation: pendingPulse 3s ease-in-out infinite 0.5s;
}

@keyframes pendingPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.2; }
}

.pending-map-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 20px 16px;
}

.pending-icon-wrap {
    margin-bottom: 12px;
}

.pending-icon-ring {
    width: 48px;
    height: 48px;
    margin: 0 auto;
    border-radius: 50%;
    background: rgba(204, 255, 0, 0.08);
    border: 1.5px solid rgba(204, 255, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--color-brand);
    animation: pendingIconSpin 8s linear infinite;
}

@keyframes pendingIconSpin {
    0% { box-shadow: 0 0 0 0 rgba(204,255,0,0.15); }
    50% { box-shadow: 0 0 24px 4px rgba(204,255,0,0.08); }
    100% { box-shadow: 0 0 0 0 rgba(204,255,0,0.15); }
}

.pending-title {
    font-size: 14px;
    font-weight: 900;
    text-transform: none;
    letter-spacing: 0.12em;
    color: #fff;
    margin: 0 0 6px;
}

.pending-subtitle {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    line-height: 1.5;
    margin: 0 0 16px;
    font-weight: 500;
}

.pending-timeline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 12px;
}

.pending-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.pending-step span {
    font-size: 9px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.25);
}

.pending-step.done span { color: #3B82F6; }

.pending-step.active span { color: #fff; }

.step-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 1.5px solid rgba(255,255,255,0.15);
}

.pending-step.done .step-dot {
    background: #3B82F6;
    border-color: #3B82F6;
    box-shadow: 0 0 8px rgba(59,130,246,0.4);
}

.pending-step.active .step-dot {
    background: transparent;
    border-color: #fff;
    animation: activeDotPulse 1.5s ease-in-out infinite;
}

@keyframes activeDotPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.3); }
    50% { box-shadow: 0 0 8px 3px rgba(255,255,255,0.15); }
}

.pending-step-line {
    width: 40px;
    height: 1.5px;
    background: rgba(255,255,255,0.1);
    margin: 0 8px;
    margin-bottom: 20px;
}

.pending-step-line.done {
    background: linear-gradient(90deg, #3B82F6, rgba(255,255,255,0.3));
}

.pending-eta {
    font-size: 11px;
    color: rgba(255,255,255,0.3);
    font-weight: 500;
}

.pending-eta strong {
    color: rgba(255,255,255,0.6);
}

@keyframes memberPanelSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Elegant permission checkboxes (CRM-style, no 1992 toggles) */
.member-perm-list { display: flex; flex-direction: column; gap: 2px; }

.member-perm-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    border: 1px solid transparent;
}

.member-perm-row:hover {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.04);
}

.perm-checkbox {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
}

.perm-checkbox-custom {
    width: 18px; height: 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}

.perm-checkbox:checked + .perm-checkbox-custom {
    background: var(--color-brand);
    border-color: var(--color-brand);
}

.perm-checkbox:checked + .perm-checkbox-custom::after {
    content: '';
    width: 5px; height: 9px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

.perm-checkbox:disabled + .perm-checkbox-custom {
    opacity: 0.5;
    cursor: not-allowed;
}

.perm-label {
    font-size: 13px; font-weight: 500;
    color: var(--color-text-main);
    display: flex; align-items: center; gap: 8px;
}

.perm-label i {
    font-size: 11px;
    color: var(--color-brand);
    opacity: 0.8;
    width: 16px;
}

.btn-member-edit {
    opacity: 0.6;
    transition: opacity 0.2s;
}

/* User request: Remove bounding box and make icons bigger in the header folder group */
.header-folder-group .btn-icon-subtle {
    border: none !important;
    background: transparent !important;
    width: 40px !important;
    height: 40px !important;
}

.header-folder-group .btn-icon-subtle i {
    font-size: 18px !important;
    color: var(--color-text-dim);
}

.header-folder-group .btn-icon-subtle:hover {
    background: var(--color-bg-alpha-05) !important;
    color: var(--color-text-main) !important;
}

/* ================================================
   PROFILE PAGE - Font Awesome inspired layout
   Hero header + horizontal tabs + flat panels
   ================================================ */

.profile-page {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}

/* --- Hero Header --- */
.profile-hero {
    background: var(--color-bg-deep);
    border-bottom: 1px solid var(--color-border);
    position: relative;
    overflow: hidden;
}

.profile-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 15% 60%, rgba(204, 255, 0, 0.05) 0%, transparent 55%);
    pointer-events: none;
}

.profile-hero-body {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 44px 48px 36px;
    position: relative;
    max-width: 1100px;
}

/* Profiel: helm-icoon zonder cirkel (vast merkbeeld) */
.profile-hero-helm {
    flex-shrink: 0;
    line-height: 0;
    color: var(--color-brand);
    font-size: 56px;
}
.profile-hero-helm i {
    display: block;
    line-height: 1;
}

.profile-hero-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--color-brand);
    color: #0a0a0a;
    font-size: 34px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 5px rgba(204, 255, 0, 0.12), 0 4px 24px rgba(204, 255, 0, 0.1);
    letter-spacing: -0.02em;
}

.profile-hero-avatar.company {
    border-radius: 22px;
}

.profile-hero-info h1 {
    font-size: 26px;
    font-weight: 800;
    color: var(--color-text-main);
    letter-spacing: -0.03em;
    margin: 0 0 12px;
    line-height: 1.1;
}

.profile-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.profile-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    background: var(--color-bg-alpha-05);
    color: var(--color-text-dim);
    border: 1px solid var(--color-border);
}

.profile-hero-badge i { font-size: 11px; }

.profile-hero-badge.verified {
    background: rgba(37, 211, 102, 0.08);
    color: #4ade80;
    border-color: rgba(37, 211, 102, 0.2);
}

.profile-hero-badge.plan {
    background: rgba(204, 255, 0, 0.08);
    color: var(--color-brand);
    border-color: rgba(204, 255, 0, 0.2);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.06em;
    font-size: 10px;
}

/* --- Horizontal Tab Navigation --- */
.profile-tab-nav {
    display: flex;
    padding: 0 44px;
    background: var(--color-bg-surface);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 0;
}

.profile-tab-nav::-webkit-scrollbar { display: none; }

.profile-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 15px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-dim);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
    letter-spacing: -0.01em;
}

.profile-tab-btn i { font-size: 12px; opacity: 0.65; transition: opacity 0.15s; }

.profile-tab-btn:hover { color: var(--color-text-main); }

.profile-tab-btn:hover i { opacity: 0.9; }

.profile-tab-btn.active {
    color: var(--color-brand);
    border-bottom-color: var(--color-brand);
}

.profile-tab-btn.active i { opacity: 1; }

/* --- Tab Panels Container --- */
.profile-tab-panels {
    padding: 36px 48px 60px;
    max-width: 860px;
    flex: 1;
}

/* --- Individual Tab Panel --- */
.profile-tab-panel {
    display: none;
}

.profile-tab-panel.active {
    display: block;
    animation: pfFadeIn 0.2s ease-out;
}

@keyframes pfFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Section within a panel --- */
.pf-section {
    margin-bottom: 44px;
}

.pf-section:last-child { margin-bottom: 0; }

/* --- Form fields --- */
.pf-field { margin-bottom: 20px; }

.pf-field:last-child { margin-bottom: 0; }

.pf-field label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}

.pf-field input,
.pf-field select,
.pf-field textarea {
    width: 100%;
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 11px 14px;
    color: var(--color-text-main);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* Enkele regel <select>: extra inset voor systeempijl (wint t.o.v. korte padding) */
.pf-field select:not([multiple]):not([size]) {
    padding-inline-end: var(--select-native-pad-r, 5rem);
    -webkit-padding-end: var(--select-native-pad-r, 5rem);
}

.pf-field input:focus,
.pf-field select:focus,
.pf-field textarea:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(204, 255, 0, 0.08);
}

.pf-field .pf-field-note {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 7px;
    line-height: 1.5;
}

.pf-field-readonly {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    background: var(--color-bg-alpha-02);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    color: var(--color-text-dim);
    font-size: 14px;
}

.pf-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.pf-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 20px;
    margin-top: 24px;
    border-top: 1px solid var(--color-border);
}

/* --- Toggle rows --- */
.pf-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--color-bg-alpha-02);
    border: 1px solid var(--color-border);
    margin-bottom: 10px;
    transition: background 0.15s;
}

.pf-toggle-row:last-child { margin-bottom: 0; }

.pf-toggle-row:hover { background: var(--color-bg-alpha-05); }

.pf-toggle-info { flex: 1; min-width: 0; }

.pf-toggle-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-main);
}

.pf-toggle-desc {
    font-size: 11px;
    color: var(--color-text-dim);
    margin-top: 3px;
    line-height: 1.4;
}

/* --- Subsection label (within a panel) --- */
.pf-sub-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 800;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: 0.12em;
    margin: 24px 0 14px;
}

.pf-sub-label i { font-size: 11px; color: var(--color-brand); }

/* --- Referral card --- */
.pf-referral-card {
    background: rgba(204, 255, 0, 0.03);
    border: 1px solid rgba(204, 255, 0, 0.18);
    border-radius: 14px;
    padding: 28px;
}

/* --- Danger zone --- */
.pf-danger-zone {
    border: 1px solid rgba(255, 77, 77, 0.2);
    border-radius: 14px;
    padding: 24px 28px;
    background: rgba(255, 77, 77, 0.02);
}

@media (max-width: 600px) {
    .profile-hero-body { flex-direction: column; align-items: flex-start; gap: 14px; }
    .profile-hero-badge { font-size: 11px; }
}

/* ================================================
   WORKSPACE TOOLBAR - aligned to 4-col tile grid
   Search=col1, Icons=col2, Filters=col3-4
   ================================================ */

/* Base (mobile): flex row, same as before */
.workspace-toolbar-aligned {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* ============================================================
   FILE TREE & BREADCRUMB ALIGNMENT FIXES
   ============================================================ */

/* 1. Suppress focus rings on mouse-click (keep for keyboard nav) */
*:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Touch hover side-effects handled per-rule with @media (hover: hover) wrappers */

/* Operators Panel - sidebar op desktop, floating overlay op mobiel */
.map-operators-panel {
    /* Desktop: geïntegreerde sidebar, edge-to-edge aan de linker kant */
    position: relative;
    flex-shrink: 0;
    width: 260px;
    background: rgba(37, 37, 37, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    z-index: 2;
    overflow: hidden;
    pointer-events: auto;
}

.map-operators-panel .panel-header {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.02);
    flex-shrink: 0;
}

.map-operators-panel .panel-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-main);
    letter-spacing: 0.01em;
    flex: 1;
}

.map-operators-panel .panel-count {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 5px;
    border-radius: 4px;
}

/* Inklap-knop - alleen op mobiel */
.operators-panel-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: color 0.15s;
    flex-shrink: 0;
    touch-action: manipulation;
}
.operators-panel-toggle:hover { color: rgba(255, 255, 255, 0.8); }

/* FAB (ingeklapte staat) */
.operators-panel-fab {
    position: absolute;
    bottom: 16px;
    left: 16px;
    width: 44px;
    height: 44px;
    background: rgba(26, 26, 26, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    cursor: pointer;
    z-index: 50;
    pointer-events: auto;
    touch-action: manipulation;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    transition: background 0.15s, color 0.15s;
}
.operators-panel-fab:hover { color: #fff; background: rgba(38, 38, 38, 0.95); }

.map-operators-panel .panel-content {
    overflow-y: auto;
    padding: 6px 0;
    flex: 1;
    min-height: 0; /* nodig zodat flex-child kan krimpen en scrollt */
}

.map-operators-panel .panel-content::-webkit-scrollbar {
    width: 3px;
}

.map-operators-panel .panel-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

/* Mobiel: panel floating (absolute) over de kaart, inklap-knop zichtbaar */
@media (max-width: 1023px) {
    .map-preview-card {
        display: block; /* geen flex op mobiel */
    }
    .map-canvas {
        position: absolute;
        inset: 0;
    }
    .map-operators-panel {
        /* Floating overlay - zoals voor de sidebar refactor */
        position: absolute;
        top: 8px;
        bottom: 8px;
        left: 8px;
        width: min(260px, calc(100% - 32px));
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-right: none;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
        z-index: 50;
    }
    .operators-panel-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .operators-panel-fab {
        bottom: 8px;
        left: 8px;
    }
}

.operator-item {
    padding: 8px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: background 0.15s;
}

.operator-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.operator-info {
    flex: 1;
    min-width: 0;
}

.operator-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.operator-meta {
    font-size: 10px;
    color: var(--color-text-dim);
    display: flex;
    align-items: center;
    gap: 6px;
}

.operator-dots {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.operator-dot {
    width: 8px;
    height: 8px;
    border-radius: 3px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

/* ═══════════════════════════════════════════════
   COMMAND PALETTE - globaal zoeken (minimaal: alleen zoekbalk tot je typt)
   ═══════════════════════════════════════════════ */

/* Topbar: AI command palette = los zoekicoon (styling: notifications.css, zelfde als bel) */
.topbar-cmd-palette-btn { flex-shrink: 0; }

/* Backdrop */
.cmd-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9000;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.cmd-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Panel */
.cmd-panel {
    position: fixed;
    top: 14vh;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    width: min(480px, 92vw);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
    z-index: 9001;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    max-height: 76vh;
    display: flex;
    flex-direction: column;
}
.cmd-panel.is-open {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
@media (max-width: 1023px) {
    .cmd-panel { top: 6vh; width: 95vw; max-height: 88vh; }
}

/* Input row */
.cmd-input-row {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 16px;
    border-bottom: 1px solid var(--color-border);
    min-height: 52px;
    flex-shrink: 0;
}
.cmd-input-row:has(+ .cmd-body:empty) {
    border-bottom: none;
}
.cmd-input-icon {
    font-size: 16px;
    color: var(--color-text-dim);
    flex-shrink: 0;
    margin-right: 14px;
    opacity: 0.6;
}
.cmd-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-main);
    font-family: inherit;
    padding: 0;
    line-height: 1;
}
.cmd-input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.5;
    font-weight: 400;
}
.cmd-esc-hint {
    font-size: 9px;
    font-weight: 700;
    color: var(--color-text-muted);
    opacity: 0.45;
    letter-spacing: 0.05em;
    border: 1px solid var(--color-border);
    padding: 3px 6px;
    border-radius: 5px;
    flex-shrink: 0;
    background: var(--color-bg-surface);
    margin-left: 10px;
}

/* Scrollable results body */
.cmd-body {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 6px 0;
    min-height: 0;
}
.cmd-body:empty {
    display: none;
    padding: 0;
}

/* Section label */
.cmd-section-label {
    font-size: 9px;
    font-weight: 900;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: 0.12em;
    padding: 10px 20px 6px;
    opacity: 0.45;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cmd-section-label i { font-size: 8px; }

/* Result item */
.cmd-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px;
    cursor: pointer;
    user-select: none;
    border-left: 2px solid transparent;
    transition: background 0.1s, border-color 0.1s;
}
.cmd-result-item:hover { background: var(--color-bg-alpha-05); }
.cmd-result-item.is-focused {
    background: rgba(204, 255, 0, 0.04);
    border-left-color: var(--color-brand);
}

.cmd-result-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--color-bg-alpha-05);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
    color: var(--color-text-dim);
}
.cmd-result-content { flex: 1; min-width: 0; }
.cmd-result-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
}
.cmd-result-title mark {
    background: rgba(204, 255, 0, 0.18);
    color: var(--color-brand);
    border-radius: 2px;
    padding: 0 2px;
    font-style: normal;
}
.cmd-result-meta {
    font-size: 11px;
    color: var(--color-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
    opacity: 0.65;
}
.cmd-result-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Status dots */
.cmd-status-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.cmd-status-dot.gereed   { background: #22c55e; box-shadow: 0 0 4px rgba(34,197,94,0.5); }
.cmd-status-dot.ingediend { background: #f59e0b; }
.cmd-status-dot.draft    { background: #6b7280; }
.cmd-status-dot.mislukt  { background: #ef4444; }
.cmd-status-dot.geannuleerd { background: #6b7280; }

/* Recent chips */
.cmd-recent-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 20px 14px;
}
.cmd-recent-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--color-bg-alpha-05);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 11px;
    color: var(--color-text-dim);
    cursor: pointer;
    transition: all 0.15s;
}
.cmd-recent-chip:hover {
    background: var(--color-bg-alpha-10);
    color: var(--color-text-main);
    border-color: rgba(255,255,255,0.2);
}
.cmd-recent-chip i { font-size: 9px; opacity: 0.5; }

/* Empty state */
.cmd-empty-state {
    padding: 36px 20px;
    text-align: center;
    color: var(--color-text-muted);
    opacity: 0.55;
    font-size: 13px;
    line-height: 1.5;
}
.cmd-empty-state.cmd-empty-state--bare {
    padding: 10px 16px 14px;
    font-size: 12px;
    text-align: left;
    opacity: 0.5;
}
.cmd-empty-state i { font-size: 22px; display: block; margin-bottom: 10px; }
.cmd-results-block {
    padding: 0;
}

/* AI loading */
.cmd-loading {
    padding: 24px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--color-text-dim);
    opacity: 0.7;
}
.cmd-loading-spinner {
    width: 16px; height: 16px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-brand);
    border-radius: 50%;
    animation: cmdSpin 0.65s linear infinite;
    flex-shrink: 0;
}
@keyframes cmdSpin { to { transform: rotate(360deg); } }

/* Footer */
.cmd-footer {
    border-top: 1px solid var(--color-border);
    padding: 9px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: var(--color-bg-surface);
}
.cmd-footer-hints {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 10px;
    color: var(--color-text-muted);
    opacity: 0.55;
}
.cmd-footer-hint { display: flex; align-items: center; gap: 5px; }
.cmd-kbd {
    font-size: 9px;
    font-weight: 700;
    border: 1px solid var(--color-border);
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--color-bg-deep);
    color: var(--color-text-dim);
}
.cmd-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-weight: 800;
    color: var(--color-brand);
    background: rgba(204, 255, 0, 0.08);
    border: 1px solid rgba(204, 255, 0, 0.2);
    border-radius: 6px;
    padding: 3px 8px;
    letter-spacing: 0.04em;
    text-transform: none;
}

/* Prevent body scroll when palette open */
body.cmd-open { overflow: hidden; }

/* ── Donkere basemap: Carto light_all + inversie → houtskoolgrijs (minder “OLED-zwart”) ── */
img.klic-dark-base {
  filter: brightness(0.9) invert(1) hue-rotate(220deg) saturate(0.9) contrast(0.96) !important;
}
img.klic-basemap-mb-tile {
  filter: brightness(1.14) contrast(0.9) saturate(0.9) !important;
}
body:not(.light-mode) .klic-mapbox-dark-soft .mapboxgl-canvas {
  filter: brightness(1.1) contrast(0.9) saturate(0.9);
}

/* EIS gate: geojson API 403 → scroll highlight on safety section */
.detail-section-card.eis-geojson-attention {
    animation: eisGeojsonAttention 1.1s ease-in-out 2;
    outline: 2px solid rgba(255, 107, 0, 0.55);
    outline-offset: 3px;
    border-radius: 12px;
}
@keyframes eisGeojsonAttention {
    0%,
    100% {
        outline-color: rgba(255, 107, 0, 0.25);
    }
    50% {
        outline-color: rgba(255, 107, 0, 0.95);
    }
}

/*
 * Overview mobiel — laatste cascade (dit stylesheet laadt ná main.css).
 * iOS WebKit: extra -webkit-flex + grid voor activiteit vangt gevallen waar
 * standaard flex-row op .activity-item of de ticker-track niet wordt toegepast.
 */
@media (max-width: 1023px) {
    #view-overview .kpi-ticker__track {
        -webkit-flex-direction: row;
        flex-direction: row !important;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap !important;
    }
    #view-overview .kpi-ticker__seg {
        -webkit-flex-direction: row;
        flex-direction: row !important;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap !important;
    }
    #view-overview .activity-item {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: start;
        column-gap: 10px;
    }
}