* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* macOS System Colors */
    --macos-blue: #007AFF;
    --macos-blue-hover: #0056CC;
    --macos-green: #30D158;
    --macos-green-hover: #28CD41;
    --macos-red: #FF3B30;
    --macos-red-hover: #E6342A;
    --macos-orange: #FF9500;
    --macos-purple: #AF52DE;
    --macos-purple-hover: #9A42C8;
    
    /* macOS Gray Scale */
    --macos-gray-1: #8E8E93;
    --macos-gray-2: #AEAEB2;
    --macos-gray-3: #C7C7CC;
    --macos-gray-4: #D1D1D6;
    --macos-gray-5: #E5E5EA;
    --macos-gray-6: #F2F2F7;
    
    /* macOS Background Colors */
    --macos-bg-primary: #FFFFFF;
    --macos-bg-secondary: #F2F2F7;
    --macos-bg-tertiary: #FFFFFF;
    
    /* macOS Text Colors */
    --macos-text-primary: #000000;
    --macos-text-secondary: #3C3C43;
    --macos-text-tertiary: #3C3C4399;
    
    /* macOS Shadows */
    --macos-shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
    --macos-shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.1);
    --macos-shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.15);
    
    /* macOS Border Radius */
    --macos-radius-small: 6px;
    --macos-radius-medium: 8px;
    --macos-radius-large: 12px;
    --macos-radius-button: 6px;
    
    /* Softer Color Palette for UI Elements */
    --soft-blue: #007AFF;
    --soft-blue-hover: #0056CC;
    --soft-blue-bg: #E5F4FF;
    --soft-green: #85C39A;
    --soft-green-hover: #75B38A;
    --soft-green-bg: #EDF5F0;
    --soft-neutral: #E8E9F3;
    --soft-neutral-hover: #D8DAE8;
    --soft-beige: #F5F3F0;
    --soft-beige-hover: #EBE8E3;
    
    /* Toast Notification Colors */
    --toast-success: #30D158;
    --toast-success-bg: #30D15820;
    --toast-error: #FF3B30;
    --toast-error-bg: #FF3B3020;
    --toast-info: #007AFF;
    --toast-info-bg: #007AFF20;
    --toast-warning: #FF9500;
    --toast-warning-bg: #FF950020;
    
    /* Priority Colors - Subtle macOS Blue Theme */
    --priority-primary: #007AFF;
    --priority-primary-hover: #0056CC;
    --priority-bg: #E3F2FD;
    --priority-bg-hover: #BBDEFB;
    --priority-border: #90CAF9;
    --priority-border-hover: #64B5F6;
    --priority-text: #1565C0;
    --priority-shadow: rgba(0, 122, 255, 0.2);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
    background: linear-gradient(180deg, #F2F2F7 0%, #E5E5EA 100%);
    color: var(--macos-text-primary);
    font-size: 13px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

#app {
    width: 100%;
    height: 100vh;
    overflow: hidden; /* Prevent scrollbars on main app */
}

.app-layout {
    display: flex;
    width: 100%;
    height: 100%;
}

/* ===== SIDEBAR ===== */
.sidebar {
    width: 450px;
    background: var(--macos-bg-secondary);
    border-right: 1px solid var(--macos-gray-4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0; /* Prevent sidebar from shrinking unexpectedly */
}

.sidebar-header {
    padding: 24px 20px 16px 20px;
    border-bottom: 1px solid var(--macos-gray-4);
    background: var(--macos-bg-primary);
}

.app-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-image {
    height: 60px;
    width: auto;
    object-fit: contain;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.logo-image:hover {
    transform: scale(1.02);
    opacity: 0.9;
}

.version-info {
    margin-top: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.version-number {
    font-size: 11px;
    color: var(--macos-gray-1);
    font-weight: 500;
    letter-spacing: 0.3px;
}

.changelog-link {
    font-size: 11px;
    color: var(--macos-blue);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.3px;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

.changelog-link:hover {
    background-color: var(--macos-blue);
    color: white;
}

/* Search Block - bovenaan sidebar */
.sidebar-search-block {
    padding: 12px 20px;
    background: #7BC4FF;
    /* Medium blauw - tussen licht en donker voor optimaal contrast */
}

.sidebar-search-input {
    width: 100%;
    padding: 8px 12px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 122, 255, 0.2);
    border-radius: 8px;
    font-size: 13px;
    color: var(--macos-text-primary);
    transition: all 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.sidebar-search-input::placeholder {
    color: #6B6B70;
    opacity: 1.0;
}

.sidebar-search-input:focus {
    outline: none;
    border-color: var(--macos-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}


.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 0;
}

.lijst-sectie {
    margin-bottom: 24px;
}

.sectie-header {
    padding: 8px 20px;
    color: var(--macos-text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.dropdown-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
    border-radius: var(--macos-radius-button);
    margin: 0 12px;
}

.dropdown-header:hover {
    background: var(--macos-gray-6);
}

.dropdown-arrow {
    font-size: 10px;
    margin-right: 8px;
    transition: transform 0.2s ease;
    color: var(--macos-text-secondary);
}

.dropdown-arrow.rotated {
    transform: rotate(90deg);
}

.dropdown-content {
    overflow: hidden;
    transition: max-height 0.2s ease;
}

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

.lijst-item {
    display: flex;
    align-items: center;
    padding: 8px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 0;
    margin: 0 12px;
    border-radius: var(--macos-radius-button);
}

.lijst-item:hover {
    background: var(--macos-gray-6);
}

.lijst-item.actief {
    background: var(--soft-blue-bg);
    color: var(--macos-text-primary);
    border: 1px solid var(--soft-blue);
}

.lijst-item.actief .lijst-telling {
    background: var(--soft-blue);
    color: white;
}

/* Extra ruimte tussen Afgewerkt en Dagelijkse Planning - Feature 009 */
.lijst-item[data-lijst="dagelijkse-planning"] {
    margin-top: 20px;
}

/* Extra ruimte tussen Search en Settings - Feature 056 */
.lijst-item.nav-section-gap {
    margin-top: 20px;
}

.lijst-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-right: 12px;
}

.lijst-naam {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
}

/* Sidebar task counters - Feature 022 */
.task-count {
    color: #888;
    font-size: 0.9em;
    margin-left: 6px;
    font-weight: normal;
    opacity: 0.8;
}

.lijst-telling {
    background: var(--macos-gray-4);
    color: var(--macos-text-secondary);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
}

/* ===== MAIN CONTENT ===== */
.main-content {
    flex: 1;
    background: var(--macos-bg-primary);
    display: flex;
    flex-direction: column;
    overflow: visible;
    min-height: 0;
}

.main-header {
    padding: 24px 32px 16px;
    border-bottom: 1px solid var(--macos-gray-5);
    display: flex;
    align-items: center;
}

.main-header h1 {
    color: var(--macos-text-primary);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0;
}

.content-area {
    flex: 1;
    padding: 24px 32px 40px 32px; /* Bottom padding matches shortcuts footer height */
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.taak-input-container {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

/* Feature 023: Disabled state for Toevoegen button during submission */
#toevoegBtn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.taken-container {
    min-height: 200px;
    overflow-y: auto;
    max-height: calc(100vh - 200px); /* Viewport height minus footer, header and padding */
}

#takenLijst {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ===== ACTIES TABLE STYLING ===== */
.acties-filters {
    display: flex;
    align-items: end;
    gap: 12px;
    margin-bottom: 20px;
    padding: 12px;
    background: var(--macos-gray-6);
    border-radius: var(--macos-radius-medium);
    border: 1px solid var(--macos-gray-5);
    flex-shrink: 0; /* Don't shrink filters */
    flex-wrap: wrap; /* Allow wrapping on narrow screens */
    justify-content: flex-start; /* Normal alignment for most filters */
}

/* Acties lijst container */
#acties-lijst {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    max-height: calc(100vh - 220px); /* Account for header, filters, and padding */
}

.taak-lijst {
    overflow-y: auto;
    max-height: calc(100vh - 220px);
}

/* Compact filters for daily planning */
.dagelijkse-planning-layout .acties-filters {
    padding: 8px;
    margin-bottom: 8px;
    gap: 8px;
    flex-wrap: wrap; /* Allow wrapping in planning layout */
}

/* Make filter groups more compact in planning */
.dagelijkse-planning-layout .filter-groep {
    min-width: 100px;
    max-width: 120px;
}

.dagelijkse-planning-layout .filter-groep select,
.dagelijkse-planning-layout .filter-groep input {
    max-width: 100px;
    min-width: 80px;
    font-size: 11px;
    padding: 4px 6px;
    height: 28px;
}

.filter-groep {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-groep label {
    font-size: 11px;
    font-weight: 600;
    color: var(--macos-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-groep select,
.filter-groep input {
    padding: 6px 8px;
    border: 1px solid var(--macos-gray-4);
    border-radius: var(--macos-radius-small);
    background: var(--macos-bg-primary);
    font-size: 12px;
    height: 32px;
    box-sizing: border-box;
    max-width: 140px; /* Limit width to prevent overflow */
    min-width: 80px; /* Ensure minimum usability */
}

.acties-table-container {
    border: 1px solid var(--macos-gray-5);
    border-radius: var(--macos-radius-medium);
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 400px);
    background: var(--macos-bg-primary);
}

.acties-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
}

.acties-table th:nth-child(1), /* Checkbox */
.acties-table td:nth-child(1) {
    width: 40px;
    text-align: center;
    padding: 10px 4px;
}

.acties-table th:nth-child(2), /* Taak */
.acties-table td:nth-child(2) {
    width: auto;
    min-width: 200px;
}

.acties-table th:nth-child(3), /* Project */
.acties-table td:nth-child(3) {
    width: 120px;
}

.acties-table th:nth-child(4), /* Context */
.acties-table td:nth-child(4) {
    width: 100px;
}

.acties-table th:nth-child(5), /* Datum */
.acties-table td:nth-child(5) {
    width: 90px;
}

.acties-table th:nth-child(6), /* Duur */
.acties-table td:nth-child(6) {
    width: 70px;
}

.acties-table th:nth-child(7), /* Acties */
.acties-table td:nth-child(7) {
    width: 100px;
}

.acties-table th {
    background: var(--macos-gray-6);
    padding: 12px 8px;
    text-align: left;
    font-weight: 600;
    color: var(--macos-text-primary);
    border-bottom: 1px solid var(--macos-gray-5);
    font-size: 12px;
}

.acties-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.acties-table th.sortable:hover {
    background: var(--macos-gray-5);
}

.acties-table th.sorted-asc,
.acties-table th.sorted-desc {
    background: var(--macos-blue);
    color: white;
}

.sort-arrow {
    font-size: 10px;
    margin-left: 4px;
}

.acties-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--macos-gray-5);
    vertical-align: middle;
}

.actie-row {
    transition: background-color 0.2s ease;
}

.actie-row:hover {
    background: var(--macos-gray-6);
}

.taak-naam-cell {
    cursor: pointer;
    font-weight: 500;
    color: var(--macos-blue);
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 0; /* Force text to use available space */
}

.taak-naam-cell:hover {
    text-decoration: underline;
}

/* Andere kolommen met text overflow */
.acties-table td:nth-child(3), /* Project */
.acties-table td:nth-child(4)  /* Context */ {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.actie-buttons {
    display: flex;
    align-items: center;
    gap: 2px;
    position: relative;
}

.bewerk-btn,
.verplaats-btn-small,
.verwijder-btn {
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: var(--macos-radius-small);
    font-size: 14px;
    transition: all 0.2s ease;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--macos-text-secondary);
}

.bewerk-btn:hover {
    background: var(--macos-gray-5);
    color: var(--macos-blue);
    transform: scale(1.1);
}

.verplaats-btn-small:hover {
    background: var(--macos-gray-5);
    color: var(--macos-green);
    transform: scale(1.1);
}


.verwijder-btn:hover {
    background: var(--macos-gray-5);
    color: var(--macos-red);
    transform: scale(1.1);
}

.terugzet-btn {
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: var(--macos-radius-small);
    font-size: 14px;
    transition: all 0.2s ease;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--macos-text-secondary);
}

.terugzet-btn:hover {
    background: var(--macos-gray-5);
    color: var(--macos-green);
    transform: scale(1.1);
}

.verplaats-dropdown {
    position: relative;
    display: inline-block;
}

.verplaats-menu {
    position: fixed;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--macos-gray-4);
    border-radius: var(--macos-radius-large);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    min-width: 120px;
    backdrop-filter: blur(20px);
    padding: 4px;
}

.verplaats-menu button {
    display: block;
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: none;
    text-align: left;
    font-size: 13px;
    cursor: pointer;
    color: var(--macos-text-primary);
    transition: all 0.15s ease;
    border-radius: var(--macos-radius-button);
    margin: 1px 0;
}

.verplaats-menu button:hover {
    background: var(--macos-blue);
    color: white;
    transform: none;
}

.verplaats-menu button:first-child {
    border-radius: var(--macos-radius-button);
    margin-top: 0;
}

.verplaats-menu button:last-child {
    border-radius: var(--macos-radius-button);
    margin-bottom: 0;
}

/* ===== DATUM STATUS INDICATORS ===== */
.datum-indicator {
    margin-right: 6px;
    font-size: 14px;
}

.taak-overtijd {
    background-color: #fee;
    border-left: 3px solid #ff3b30;
}

.taak-toekomst {
    background-color: #fffbf0;
    color: #666;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
}

.simple-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    color: var(--macos-text-primary);
}

.simple-checkbox input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.filter-checkbox label {
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    color: var(--macos-text-primary);
    font-weight: normal;
}

.filter-checkbox input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0; /* Prevent checkbox from shrinking */
}

/* Checkbox wrapper styling */
.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    white-space: nowrap;
    height: 32px;
}

.checkbox-wrapper input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.checkbox-wrapper label {
    cursor: pointer;
    user-select: none;
}

/* ===== PROJECTEN LIJST STYLING ===== */
.projecten-container {
    width: 100%;
}

.projecten-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--macos-gray-5);
}

.nieuw-btn {
    background: var(--macos-green) !important;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: var(--macos-radius-button);
}

.nieuw-btn:hover {
    background: var(--macos-green-hover) !important;
}

.projecten-lijst {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.project-wrapper {
    border-radius: var(--macos-radius-medium);
    overflow: hidden;
}

.project-item {
    background: var(--macos-bg-primary);
    padding: 16px 20px;
    border: 1px solid var(--macos-gray-5);
    border-left: 4px solid var(--macos-blue);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--macos-shadow-light);
    transition: all 0.2s ease;
    cursor: pointer;
}

.project-item:hover {
    background: var(--macos-gray-6);
    border-color: var(--macos-gray-4);
    transform: translateY(-1px);
    box-shadow: var(--macos-shadow-medium);
}

.project-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.project-naam {
    font-weight: 600;
    color: var(--macos-text-primary);
    font-size: 15px;
    line-height: 1.3;
}

.project-info {
    font-size: 12px;
    color: var(--macos-text-secondary);
    font-weight: 500;
}

.project-acties {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bewerk-project-btn {
    background: none !important;
    border: none !important;
    padding: 6px !important;
    cursor: pointer;
    border-radius: var(--macos-radius-small);
    font-size: 16px;
    transition: all 0.2s ease;
    box-shadow: none !important;
}

.bewerk-project-btn:hover {
    background: var(--macos-blue) !important;
    transform: scale(1.1);
}

.project-naam-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.project-expand-arrow {
    font-size: 12px;
    color: var(--macos-text-secondary);
    transition: transform 0.2s ease;
    user-select: none;
}

.project-expand-arrow.expanded {
    transform: rotate(90deg);
}

/* Project taken styling */
.project-taken-container {
    background: var(--macos-gray-6);
    border: 1px solid var(--macos-gray-5);
    border-top: none;
}

.project-taken-lijst {
    padding: 16px 20px;
}

.project-taken-sectie {
    margin-bottom: 16px;
}

.project-taken-sectie:last-child {
    margin-bottom: 0;
}

.project-taken-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--macos-text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.project-actie-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--macos-gray-4);
}

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

.project-actie-item.afgewerkt {
    opacity: 0.6;
}

.actie-status {
    padding-top: 2px;
}

.actie-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.actie-naam {
    font-weight: 500;
    color: var(--macos-blue);
    cursor: pointer;
    font-size: 14px;
    line-height: 1.3;
}

.actie-naam:hover {
    text-decoration: underline;
}

.actie-naam.afgewerkt {
    color: var(--macos-text-secondary);
    text-decoration: line-through;
    cursor: default;
}

.actie-naam.afgewerkt:hover {
    text-decoration: line-through;
}

.actie-details {
    font-size: 12px;
    color: var(--macos-text-secondary);
    font-weight: 400;
}

.project-geen-acties {
    text-align: center;
    color: var(--macos-text-secondary);
    font-style: italic;
    padding: 20px 0;
}

.project-taken-loading,
.project-taken-error {
    text-align: center;
    color: var(--macos-text-secondary);
    padding: 16px;
    font-style: italic;
}

.project-taken-error {
    color: var(--macos-red);
}

/* ===== PROJECT MODAL STYLING ===== */
.project-modal-content {
    width: 450px;
    max-width: 90vw;
}

.project-modal-content .form-groep {
    margin-bottom: 16px;
}

.project-modal-content label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--macos-text-primary);
}

.project-modal-content input[type="text"],
.project-modal-content input[type="date"],
.project-modal-content textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--macos-gray-4);
    border-radius: var(--macos-radius-small);
    font-size: 14px;
    background: var(--macos-bg-primary);
    color: var(--macos-text-primary);
    box-sizing: border-box;
}

.project-modal-content input:focus,
.project-modal-content textarea:focus {
    outline: none;
    border-color: var(--macos-blue);
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
}

.project-modal-content textarea {
    resize: vertical;
    min-height: 80px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ===== DUE DATE BADGES ===== */
.due-date-badge {
    display: inline-block;
    padding: 3px 8px;
    margin-left: 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.due-date-badge.overdue {
    background: var(--macos-red);
    color: white;
}

.due-date-badge.today {
    background: var(--macos-orange);
    color: white;
}

.due-date-badge.tomorrow {
    background: var(--macos-orange);
    color: white;
}

.due-date-badge.soon {
    background: var(--macos-yellow);
    color: var(--macos-text-primary);
}

.due-date-badge.future {
    background: var(--macos-gray-5);
    color: var(--macos-text-secondary);
}

/* ===== PROJECT DETAILS SECTION ===== */
.project-details-sectie {
    background: var(--macos-gray-6);
    border-radius: var(--macos-radius-medium);
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--macos-gray-5);
}

.project-details-header {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--macos-text-primary);
    border-bottom: 1px solid var(--macos-gray-5);
    padding-bottom: 8px;
}

.project-details-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.project-detail-item {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: var(--macos-text-primary);
}

.project-detail-item strong {
    margin-right: 8px;
    min-width: 70px;
}

.project-opmerkingen {
    background: var(--macos-bg-primary);
    border: 1px solid var(--macos-gray-4);
    border-radius: var(--macos-radius-small);
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--macos-text-primary);
    margin-top: 4px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Flexbox layout aanpassing voor project naam row */
.project-naam-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.project-naam {
    flex: 1;
    min-width: 0; /* Allows text truncation */
}

/* ===== UITGESTELD LIJSTEN STYLING ===== */
.uitgesteld-item {
    border-left-color: var(--macos-orange);
}

.verplaats-btn-uitgesteld {
    background: none !important;
    border: none !important;
    padding: 4px !important;
    cursor: pointer;
    border-radius: var(--macos-radius-small);
    font-size: 14px;
    transition: all 0.2s ease;
    box-shadow: none !important;
}

.verplaats-btn-uitgesteld:hover {
    background: var(--macos-green) !important;
    transform: scale(1.1);
}




#taakInput {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--macos-gray-4);
    border-radius: var(--macos-radius-medium);
    font-size: 13px;
    background: var(--macos-bg-primary);
    color: var(--macos-text-primary);
    transition: all 0.2s ease;
}

#taakInput:focus {
    outline: none;
    border-color: var(--macos-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

/* General form controls - exclude table buttons */
select:not(.acties-table select):not(.actie-buttons button),
button:not(.acties-table button):not(.actie-buttons button):not(.bewerk-btn):not(.verplaats-btn-small):not(.plan-btn) {
    padding: 6px 12px;
    border: 1px solid var(--macos-gray-4);
    border-radius: var(--macos-radius-button);
    background: var(--macos-bg-primary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 400;
    transition: all 0.2s ease;
}

/* General button styling - exclude table buttons and specific buttons */
button:not(.acties-table button):not(.actie-buttons button):not(.bewerk-btn):not(.verplaats-btn-small):not(.plan-btn):not(.btn-logout):not(.btn-copy):not(.btn-help):not(.verwijder-btn):not(.delete-btn):not(.delete-planning):not(.acties-btn) {
    background: var(--soft-blue);
    color: white;
    border: none;
    font-weight: 500;
    box-shadow: var(--macos-shadow-light);
}

/* General button hover - exclude table buttons and specific buttons */
button:not(.acties-table button):not(.actie-buttons button):not(.bewerk-btn):not(.verplaats-btn-small):not(.plan-btn):not(.btn-logout):not(.btn-copy):not(.btn-help):not(.verwijder-btn):not(.delete-btn):not(.delete-planning):not(.acties-btn):hover {
    background: var(--soft-blue-hover);
    transform: translateY(-1px);
    box-shadow: var(--macos-shadow-medium);
}

/* General button active - exclude table buttons */
button:not(.acties-table button):not(.actie-buttons button):not(.bewerk-btn):not(.verplaats-btn-small):not(.plan-btn):not(.verwijder-btn):not(.delete-btn):not(.delete-planning):not(.acties-btn):active {
    transform: translateY(0);
    box-shadow: var(--macos-shadow-light);
}


.lijst-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.taken-container {
    min-height: 200px;
    overflow-y: auto;
    max-height: calc(100vh - 200px); /* Viewport height minus footer, header and padding */
}

#takenLijst {
    list-style: none;
}

.taak-item {
    background: var(--macos-bg-primary);
    margin-bottom: 8px;
    padding: 12px 16px;
    border-radius: var(--macos-radius-medium);
    border: 1px solid var(--macos-gray-5);
    border-left: 3px solid var(--macos-blue);
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--macos-shadow-light);
    transition: all 0.2s ease;
}

.taak-item:hover {
    background: var(--macos-gray-6);
    border-color: var(--macos-gray-4);
    transform: translateY(-1px);
    box-shadow: var(--macos-shadow-medium);
}

.drag-handle {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: var(--macos-text-secondary);
    font-size: 16px;
    border-radius: var(--macos-radius-small);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.drag-handle:hover {
    background: var(--macos-gray-5);
    color: var(--macos-blue);
    cursor: grab;
}

.drag-handle:active {
    cursor: grabbing;
}

.drag-dots {
    line-height: 1;
    user-select: none;
}

.taak-checkbox {
    display: flex;
    align-items: center;
}

.taak-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.taak-content {
    flex: 1;
}

.taak-titel {
    font-weight: 500;
    margin-bottom: 2px;
    color: var(--macos-text-primary);
    font-size: 13px;
    line-height: 1.3;
}

.taak-acties {
    display: flex;
    gap: 5px;
}

.taak-acties button {
    padding: 4px 8px;
    font-size: 12px;
}


/* Acties knop styling */
.acties-btn {
    background: transparent !important;
    color: var(--macos-text-secondary) !important;
    font-size: 14px;
    padding: 6px;
    border-radius: var(--macos-radius-small);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.acties-btn:hover {
    background: var(--macos-gray-5) !important;
    color: var(--macos-text-primary) !important;
    transform: scale(1.1);
}

/* Acties menu overlay - Full blur for cool effect */
.acties-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    animation: fadeIn 0.2s ease;
}


.acties-menu-content {
    animation: slideUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 2;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.acties-menu {
    background: var(--macos-bg-primary);
    border-radius: var(--macos-radius-large);
    box-shadow: var(--macos-shadow-heavy);
    border: 1px solid var(--macos-gray-4);
    width: 300px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 20px;
    position: relative;
    z-index: 2;
}

.acties-menu h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--macos-text-primary);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--macos-gray-5);
}

.acties-menu h3:not(:first-child) {
    margin-top: 20px;
}

.menu-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.menu-item {
    background: var(--macos-bg-secondary);
    border: 1px solid var(--macos-gray-5);
    border-radius: var(--macos-radius-medium);
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--macos-text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.menu-item:hover {
    background: var(--soft-blue-bg);
    color: var(--macos-text-primary);
    border-color: var(--soft-blue);
    transform: translateX(2px);
}

.menu-item.opvolgen {
    background: var(--macos-purple);
    color: white;
    border-color: var(--macos-purple);
}

.menu-item.opvolgen:hover {
    background: var(--macos-purple-hover);
    border-color: var(--macos-purple-hover);
    color: white !important;
}

.menu-item.inbox-item {
    background: var(--macos-green);
    color: white;
    border-color: var(--macos-green);
    font-weight: 600;
}

.menu-item.inbox-item:hover {
    background: var(--macos-green-hover);
    border-color: var(--macos-green-hover);
    color: white !important;
}

.menu-item.menu-delete {
    background: var(--macos-red) !important;
    color: white !important;
    border-color: var(--macos-red) !important;
    font-weight: 600;
}

.menu-item.menu-delete:hover {
    background: var(--macos-red-hover) !important;
    border-color: var(--macos-red-hover) !important;
    color: white !important;
}

.menu-close {
    width: 100%;
    padding: 10px;
    background: var(--macos-gray-5);
    border: none;
    border-radius: var(--macos-radius-medium);
    font-size: 13px;
    font-weight: 500;
    color: var(--macos-text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 16px;
}

.menu-close:hover {
    background: var(--macos-gray-4);
}

/* Context Menu Highlighted Task */
.context-menu-highlighted {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 0 2px rgba(0, 122, 255, 0.4) !important;
    border-radius: 8px !important;
    backdrop-filter: none !important;
    position: fixed !important;
    z-index: 1 !important;
    pointer-events: none !important;
    transition: none !important;
}

/* Subtle glow animation for highlighted task */
@keyframes contextHighlightGlow {
    0% { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(0, 122, 255, 0.4); }
    50% { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 122, 255, 0.6); }
    100% { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(0, 122, 255, 0.4); }
}

.context-menu-highlighted {
    animation: contextHighlightGlow 2s ease-in-out infinite;
}

/* Zoek interface styling */
.zoek-interface {
    padding: 20px;
}

.zoek-container {
    max-width: 800px;
    margin: 0 auto;
}

.zoek-container h2 {
    font-size: 24px;
    font-weight: 600;
    color: var(--macos-text-primary);
    margin-bottom: 8px;
}

.zoek-container p {
    color: var(--macos-text-secondary);
    margin-bottom: 24px;
}

.zoek-form {
    background: var(--macos-bg-secondary);
    border-radius: var(--macos-radius-large);
    padding: 20px;
    border: 1px solid var(--macos-gray-5);
    margin-bottom: 24px;
}

.zoek-input-container {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.zoek-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--macos-gray-4);
    border-radius: var(--macos-radius-medium);
    font-size: 14px;
    background: var(--macos-bg-primary);
    color: var(--macos-text-primary);
}

.zoek-input:focus {
    outline: none;
    border-color: var(--macos-blue);
    box-shadow: 0 0 0 3px var(--macos-blue-alpha);
}

.zoek-btn {
    padding: 12px 20px;
    background: var(--macos-blue);
    color: white;
    border: none;
    border-radius: var(--macos-radius-medium);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.zoek-btn:hover {
    background: var(--macos-blue-hover);
    transform: translateY(-1px);
}

.zoek-filters {
    border-top: 1px solid var(--macos-gray-5);
    padding-top: 16px;
}

.filter-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--macos-text-primary);
    margin-bottom: 12px;
    display: block;
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--macos-text-primary);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    margin: 0;
}

.zoek-resultaten {
    background: var(--macos-bg-primary);
    border-radius: var(--macos-radius-large);
    border: 1px solid var(--macos-gray-5);
    overflow: hidden;
}

.zoek-resultaten h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--macos-text-primary);
    padding: 20px 20px 0 20px;
    margin: 0;
}

.resultaten-summary {
    padding: 8px 20px 16px 20px;
    color: var(--macos-text-secondary);
    font-size: 13px;
}

.resultaten-groep {
    border-top: 1px solid var(--macos-gray-5);
}

.resultaten-groep:first-child {
    border-top: none;
}

.groep-header {
    font-size: 14px;
    font-weight: 600;
    color: var(--macos-text-primary);
    padding: 16px 20px 8px 20px;
    margin: 0;
    background: var(--macos-gray-6);
}

.groep-taken {
    padding: 0 20px 16px 20px;
}

.zoek-resultaat-item {
    padding: 12px;
    border-radius: var(--macos-radius-medium);
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.zoek-resultaat-item:hover {
    background: var(--macos-blue-alpha);
    border-color: var(--macos-blue);
    transform: translateX(4px);
}

.resultaat-hoofdtekst {
    font-size: 14px;
    font-weight: 500;
    color: var(--macos-text-primary);
    margin-bottom: 4px;
    line-height: 1.3;
}

.resultaat-details {
    font-size: 12px;
    color: var(--macos-text-secondary);
    margin-bottom: 4px;
}

.resultaat-opmerkingen {
    font-size: 12px;
    color: var(--macos-text-secondary);
    font-style: italic;
    margin-top: 6px;
    padding: 6px 8px;
    background: var(--macos-gray-6);
    border-radius: var(--macos-radius-small);
}

.geen-resultaten {
    padding: 40px 20px;
    text-align: center;
}

.geen-resultaten p {
    color: var(--macos-text-secondary);
    margin-bottom: 8px;
}

.geen-resultaten .sub-text {
    font-size: 12px;
    color: var(--macos-text-tertiary);
}

.loading {
    padding: 20px;
    text-align: center;
    color: var(--macos-text-secondary);
}

.search-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 16px;
    color: var(--macos-text-secondary);
    font-size: 14px;
}

.error {
    padding: 20px;
    text-align: center;
    color: var(--macos-red);
    background: var(--macos-red-alpha);
    border-radius: var(--macos-radius-medium);
    margin: 20px;
}

mark {
    background: var(--macos-yellow);
    color: var(--macos-text-primary);
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 500;
}

/* Responsive adjustments voor zoeken */
@media (max-width: 768px) {
    .zoek-interface {
        padding: 16px;
    }

    .checkbox-group {
        gap: 12px;
    }

    .checkbox-label {
        font-size: 12px;
    }

    .zoek-input-container {
        flex-direction: column;
    }

    .zoek-btn {
        align-self: flex-start;
    }
}

/* ============================================================================
   Settings interface styling - Feature 056-je-mag-een
   ============================================================================ */

.settings-wrapper {
    max-width: 700px;
}

.settings-description {
    font-size: 14px;
    color: var(--macos-text-secondary);
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.settings-placeholder-box {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--macos-bg-secondary);
    border-radius: var(--macos-radius-medium);
    padding: 40px 20px;
    margin-bottom: 24px;
}

.settings-placeholder {
    text-align: center;
    color: var(--macos-text-tertiary);
    font-size: 15px;
    font-style: italic;
}

.settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.btn-primary-settings {
    background: var(--macos-blue);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: var(--macos-radius-button);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
}

.btn-primary-settings:hover {
    background: var(--macos-blue-hover);
    transform: translateY(-1px);
}

.btn-primary-settings:active {
    background: var(--macos-blue-hover);
    transform: translateY(0);
}

.btn-primary-settings:disabled {
    background: var(--macos-gray-5);
    color: var(--macos-gray-2);
    cursor: not-allowed;
    opacity: 0.5;
}

/* Responsive adjustments for settings */
@media (max-width: 768px) {
    .settings-wrapper {
        max-width: 100%;
    }

    .settings-placeholder-box {
        min-height: 200px;
        padding: 30px 16px;
    }

    .settings-placeholder {
        font-size: 14px;
    }
}

/* Editable planning item names */
.planning-naam.editable-naam {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 1px 3px;
}

.planning-naam.editable-naam:hover {
    background-color: var(--macos-blue-alpha);
    border-color: var(--macos-blue);
}

.planning-naam-edit {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* Popup styling */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    justify-content: center;
    align-items: center;
    z-index: 2000;
    animation: fadeIn 0.2s ease;
}

/* Keyboard help modal should be above planning popup */
#keyboardHelpModal {
    z-index: 1500;
}

/* Onboarding Video Popup (Feature 014) - Between standard popup (1000) and keyboard help (1500) */
#onboardingVideoPopup {
    z-index: 1200;
}

.onboarding-video-content {
    max-width: 700px;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    margin-bottom: 16px;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--macos-radius-medium);
}

.close-video-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 32px;
    cursor: pointer;
    color: var(--macos-text-secondary);
    z-index: 10;
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.close-video-btn:hover {
    color: var(--macos-text-primary);
    transform: scale(1.1);
}

.fallback-message {
    text-align: center;
    padding: 40px 20px;
    color: var(--macos-text-secondary);
    font-size: 14px;
}

/* Mobile responsive styles for onboarding video */
@media (max-width: 768px) {
    .onboarding-video-content {
        width: 95%;
        max-width: 95%;
        padding: 16px;
    }

    .onboarding-video-content h2 {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .close-video-btn {
        top: 8px;
        right: 8px;
        font-size: 28px;
    }
}

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

.popup-content {
    background: var(--macos-bg-primary);
    padding: 24px;
    border-radius: var(--macos-radius-large);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--macos-shadow-heavy);
    border: 1px solid var(--macos-gray-5);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    from { 
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    to { 
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.keyboard-help {
    background: var(--macos-blue);
    background: linear-gradient(135deg, var(--macos-blue), #5AC8FA);
    color: white;
    padding: 12px 16px;
    border-radius: var(--macos-radius-medium);
    margin-bottom: 20px;
    font-size: 12px;
    font-weight: 500;
    box-shadow: var(--macos-shadow-light);
    border: none;
}

.taak-preview {
    background: var(--macos-gray-6);
    padding: 12px 16px;
    border-radius: var(--macos-radius-medium);
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 13px;
    color: var(--macos-text-primary);
    border: 1px solid var(--macos-gray-5);
    border-left: 3px solid var(--macos-blue);
}

.planning-opties {
    display: flex;
    gap: 30px;
}

.optie-groep {
    flex: 1;
}

.optie-groep h4 {
    margin-bottom: 15px;
    color: var(--macos-text-primary);
    border-bottom: 1px solid var(--macos-gray-5);
    padding-bottom: 8px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.24px;
}

.form-groep {
    margin-bottom: 15px;
}

.form-groep label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--macos-text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-groep label .required {
    color: var(--macos-red);
    font-weight: bold;
    margin-left: 2px;
}

.form-groep input,
.form-groep select,
.form-groep textarea {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--macos-gray-4);
    border-radius: var(--macos-radius-button);
    background: var(--macos-bg-primary);
    color: var(--macos-text-primary);
    font-size: 13px;
    transition: all 0.2s ease;
}

.form-groep textarea {
    resize: vertical;
    min-height: 60px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
    line-height: 1.4;
}

.form-groep input:focus,
.form-groep select:focus,
.form-groep textarea:focus,
button:focus {
    outline: none;
    border-color: var(--macos-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

.form-groep input.invalid,
.form-groep select.invalid,
.form-groep textarea.invalid,
.form-groep input[data-touched="true"]:invalid,
.form-groep textarea[data-touched="true"]:invalid {
    border-color: var(--macos-red);
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.15);
}

#validationMessage {
    text-align: right;
    font-size: 11px;
    color: var(--macos-red);
    margin-top: 4px;
}

#validationMessage:empty {
    display: none;
}

/* Focus state heeft altijd prioriteit over invalid state */
.form-groep input:focus,
.form-groep select:focus,
.form-groep textarea:focus {
    border-color: var(--macos-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3) !important;
}

/* Checkbox + Input wrapper - horizontal layout voor Planning Popup */
.checkbox-input-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.checkbox-input-wrapper input[type="checkbox"] {
    flex-shrink: 0;
    margin: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.checkbox-input-wrapper input[type="text"] {
    flex: 1;
    width: auto; /* override default 100% width from .form-groep */
}

.select-met-toevoeg button:focus {
    outline: 2px solid #3498db;
    outline-offset: 2px;
}

.select-met-toevoeg {
    display: flex;
    gap: 5px;
}

.select-met-toevoeg select {
    flex: 1;
}

.select-met-toevoeg button {
    width: 28px;
    padding: 6px;
    background: var(--macos-blue);
    color: white;
    border: none;
    border-radius: var(--macos-radius-button);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--macos-shadow-light);
    transition: all 0.2s ease;
}

.select-met-toevoeg button:hover {
    background: var(--macos-blue-hover);
    transform: translateY(-1px);
    box-shadow: var(--macos-shadow-medium);
}

.actie-btn {
    width: 100%;
    padding: 10px 16px;
    background: var(--macos-green);
    color: white;
    border: none;
    border-radius: var(--macos-radius-button);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    margin-top: 12px;
    box-shadow: var(--macos-shadow-light);
    transition: all 0.2s ease;
}

.actie-btn:hover:not(:disabled) {
    background: var(--macos-green-hover);
    transform: translateY(-1px);
    box-shadow: var(--macos-shadow-medium);
}

.actie-btn:disabled {
    background: var(--macos-gray-3);
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

/* Create Action button - primary blue style */
.create-action-btn {
    background: var(--macos-blue) !important;
    font-weight: 500;
}

.create-action-btn:hover:not(:disabled) {
    background: var(--macos-blue-hover) !important;
}

.create-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Ensure buttons in popup-acties are properly spaced */
#planningPopup .popup-acties button {
    margin-left: 8px;
}

#planningPopup .popup-acties button:first-child {
    margin-left: 0;
}

.verplaats-knoppen {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.verplaats-btn {
    padding: 8px 12px;
    background: var(--macos-blue);
    color: white;
    border: none;
    border-radius: var(--macos-radius-button);
    cursor: pointer;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    box-shadow: var(--macos-shadow-light);
    transition: all 0.2s ease;
}

.verplaats-btn:hover {
    background: var(--macos-blue-hover);
    transform: translateY(-1px);
    box-shadow: var(--macos-shadow-medium);
}

.verplaats-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3);
}

.popup-acties {
    margin-top: 20px;
    text-align: right;
}

.popup-acties button {
    padding: 8px 16px;
}

/* Forgot password link */
.forgot-password-wrapper {
    margin-top: 12px;
    margin-bottom: 8px;
    text-align: right;
}

.forgot-password-link {
    font-size: 13px;
    color: var(--macos-blue);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.forgot-password-link:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* Recurring task indicator */
.recurring-indicator {
    display: inline-block;
    font-size: 0.8em;
    opacity: 0.7;
    margin-left: 4px;
    transition: opacity 0.2s ease;
}

.recurring-indicator:hover {
    opacity: 1;
}

.taak-naam-cell .recurring-indicator,
.actie-naam .recurring-indicator,
.taak-titel .recurring-indicator {
    color: var(--macos-blue);
    font-weight: 500;
}

/* Herhaling selectie interface */
.herhaling-selectie {
    display: flex;
    gap: 8px;
    align-items: center;
}

.herhaling-selectie input[type="text"] {
    flex: 1;
    cursor: pointer;
    background: var(--macos-bg-primary);
}

.herhaling-selectie button {
    padding: 8px 12px;
    background: var(--macos-blue);
    color: white;
    border: none;
    border-radius: var(--macos-radius-button);
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s ease;
}

.herhaling-selectie button:hover {
    background: var(--macos-blue-hover);
}

/* Herhaling configuratie interface */
.herhaling-configuratie {
    padding: 16px 0;
}

.herhaling-optie-groep {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.herhaling-optie-groep:last-child {
    margin-bottom: 0;
}

.herhaling-optie-groep input[type="radio"] {
    margin-right: 4px;
}

.herhaling-optie-groep label {
    font-weight: 500;
    color: var(--macos-text-primary);
    white-space: nowrap;
}

.herhaling-optie-groep input[type="number"] {
    width: 60px;
    padding: 4px 8px;
    border: 1px solid var(--macos-gray-4);
    border-radius: var(--macos-radius-small);
    font-size: 14px;
}

.herhaling-optie-groep select {
    padding: 4px 8px;
    border: 1px solid var(--macos-gray-4);
    border-radius: var(--macos-radius-small);
    font-size: 14px;
    background: var(--macos-bg-primary);
}

.herhaling-optie-groep span {
    color: var(--macos-text-secondary);
    font-size: 14px;
}

.weekdag-checkboxes {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.weekdag-checkboxes label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: normal;
    font-size: 13px;
}

.weekdag-checkboxes input[type="checkbox"] {
    margin: 0;
}

/* Disabled state styling */
.herhaling-optie-groep input:disabled,
.herhaling-optie-groep select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--macos-gray-6);
}

/* Active radio button styling */
.herhaling-optie-groep input[type="radio"]:checked + label {
    color: var(--macos-blue);
    font-weight: 600;
}

/* Herhaling popup */
.herhaling-popup {
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
}

.herhaling-popup .popup-acties {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

.herhaling-popup .popup-acties button {
    padding: 12px 24px;
    border-radius: var(--macos-radius-button);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 0 0 auto;
}

.herhaling-popup .popup-acties .actie-btn {
    background: var(--soft-blue);
    border: 1px solid var(--soft-blue);
    color: white;
    width: auto;
    margin-top: 0;
}

.herhaling-popup .popup-acties .actie-btn:hover {
    background: var(--soft-blue-hover);
    border-color: var(--soft-blue-hover);
}

.herhaling-popup .popup-acties button:not(.actie-btn) {
    background: var(--macos-bg-primary) !important;
    border: 1px solid var(--macos-gray-4) !important;
    color: var(--macos-text-primary) !important;
    box-shadow: none !important;
}

.herhaling-popup .popup-acties button:not(.actie-btn):hover {
    background: var(--macos-gray-6) !important;
    border-color: var(--macos-gray-3) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Planning popup button styling */
#planningPopup .popup-acties {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

#planningPopup .popup-acties button {
    padding: 12px 24px;
    border-radius: var(--macos-radius-button);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 0 0 auto;
    min-width: 120px;
}

#planningPopup .popup-acties .actie-btn {
    background: var(--soft-blue);
    border: 1px solid var(--soft-blue);
    color: white;
    width: auto;
    margin-top: 0;
}

#planningPopup .popup-acties .actie-btn:hover {
    background: var(--soft-blue-hover);
    border-color: var(--soft-blue-hover);
}

#planningPopup .popup-acties button:not(.actie-btn) {
    background: var(--macos-bg-primary) !important;
    border: 1px solid var(--macos-gray-4) !important;
    color: var(--macos-text-primary) !important;
    box-shadow: none !important;
}

#planningPopup .popup-acties button:not(.actie-btn):hover {
    background: var(--macos-gray-6) !important;
    border-color: var(--macos-gray-3) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Subtaken Styling */
.subtaken-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.subtaken-header label {
    margin: 0 !important;
    flex: 1;
}
.subtaken-header .select-met-toevoeg {
    flex: none;
}

.subtaken-progress {
    font-size: 12px;
    color: var(--macos-text-secondary);
    background: var(--macos-gray-6);
    padding: 2px 8px;
    border-radius: 8px;
    font-weight: 500;
}

.subtaak-add-btn {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    background: var(--macos-blue) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    transition: all 0.2s ease !important;
}

.subtaak-add-btn:hover {
    background: var(--macos-blue-dark) !important;
    transform: scale(1.05) !important;
}

.subtaken-container {
    min-height: 50px;
    border: 1px solid var(--macos-gray-4);
    border-radius: 8px;
    background: var(--macos-gray-6);
    padding: 8px;
}

.subtaken-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--macos-text-secondary);
    font-size: 13px;
    padding: 20px 10px;
    text-align: center;
}

.subtaken-empty i {
    font-size: 18px;
    margin-bottom: 8px;
    opacity: 0.6;
}

.subtaken-lijst {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
}

.subtaak-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 1px solid var(--macos-gray-3);
    border-radius: 6px;
    padding: 8px;
    transition: all 0.2s ease;
    cursor: grab;
}

.subtaak-item:hover {
    border-color: var(--macos-blue);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.subtaak-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.subtaak-drag-handle {
    color: var(--macos-text-tertiary);
    cursor: grab;
    padding: 2px;
    font-size: 12px;
}

.subtaak-drag-handle:hover {
    color: var(--macos-text-secondary);
}

.subtaak-checkbox {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    cursor: pointer !important;
    accent-color: var(--macos-blue) !important;
}

.subtaak-text {
    flex: 1;
    font-size: 13px;
    line-height: 1.3;
    color: var(--macos-text-primary);
    word-wrap: break-word;
}

.subtaak-text.completed {
    text-decoration: line-through;
    color: var(--macos-text-secondary);
    opacity: 0.7;
}

.subtaak-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.subtaak-item:hover .subtaak-actions {
    opacity: 1;
}

.subtaak-edit-btn,
.subtaak-delete-btn {
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    transition: all 0.2s ease !important;
}

.subtaak-edit-btn {
    background: var(--macos-gray-5) !important;
    color: var(--macos-text-secondary) !important;
}

.subtaak-edit-btn:hover {
    background: var(--macos-blue) !important;
    color: white !important;
}

.subtaak-delete-btn {
    background: var(--macos-gray-5) !important;
    color: var(--macos-text-secondary) !important;
}

.subtaak-delete-btn:hover {
    background: #ff3b30 !important;
    color: white !important;
}

.subtaak-input-container {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 2px solid var(--macos-blue);
    border-radius: 6px;
    padding: 8px;
    margin-top: 6px;
}

.subtaak-input-container input {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    font-size: 13px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

.subtaak-input-acties {
    display: flex;
    gap: 4px;
}

.subtaak-save-btn,
.subtaak-cancel-btn {
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    transition: all 0.2s ease !important;
}

.subtaak-save-btn {
    background: var(--macos-green) !important;
    color: white !important;
}

.subtaak-save-btn:hover {
    background: #28a745 !important;
}

.subtaak-cancel-btn {
    background: var(--macos-gray-5) !important;
    color: var(--macos-text-secondary) !important;
}

.subtaak-cancel-btn:hover {
    background: #ff3b30 !important;
    color: white !important;
}

/* Scrollbar styling voor subtaken lijst */
.subtaken-lijst::-webkit-scrollbar {
    width: 6px;
}

.subtaken-lijst::-webkit-scrollbar-track {
    background: var(--macos-gray-6);
    border-radius: 3px;
}

.subtaken-lijst::-webkit-scrollbar-thumb {
    background: var(--macos-gray-4);
    border-radius: 3px;
}

.subtaken-lijst::-webkit-scrollbar-thumb:hover {
    background: var(--macos-gray-3);
}

.herhaling-categorieën {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.herhaling-categorie h4 {
    color: var(--macos-text-secondary);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--macos-gray-5);
}

.herhaling-opties {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.herhaling-optie {
    background: var(--macos-bg-primary);
    border: 1px solid var(--macos-gray-4);
    border-radius: var(--macos-radius-button);
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    color: var(--macos-text-primary);
    transition: all 0.2s ease;
}

.herhaling-optie:hover {
    background: var(--macos-gray-6);
    border-color: var(--macos-blue);
    transform: translateY(-1px);
}

.herhaling-optie.selected {
    background: var(--macos-blue);
    color: white;
    border-color: var(--macos-blue);
}

.herhaling-optie:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .herhaling-categorieën {
        grid-template-columns: 1fr;
    }
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 320px;
    max-width: 400px;
    padding: 16px 20px;
    margin-bottom: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--macos-radius-large);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    backdrop-filter: blur(20px);
    box-shadow: var(--macos-shadow-medium);
    pointer-events: all;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: toast-slide-in 0.3s ease;
}

.toast:hover {
    transform: translateY(-2px);
    box-shadow: var(--macos-shadow-heavy);
}

.toast.toast-exit {
    animation: toast-slide-out 0.3s ease forwards;
}

.toast-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: white;
}

.toast-message {
    flex: 1;
    word-wrap: break-word;
}

/* Toast Types */
.toast.success {
    background: var(--toast-success-bg);
    border-color: var(--toast-success);
    color: var(--macos-text-primary);
}

.toast.success .toast-icon {
    background: var(--toast-success);
}

.toast.success .toast-icon::after {
    content: "✓";
}

.toast.error {
    background: var(--toast-error-bg);
    border-color: var(--toast-error);
    color: var(--macos-text-primary);
}

.toast.error .toast-icon {
    background: var(--toast-error);
}

.toast.error .toast-icon::after {
    content: "✕";
}

.toast.info {
    background: var(--toast-info-bg);
    border-color: var(--toast-info);
    color: var(--macos-text-primary);
}

.toast.info .toast-icon {
    background: var(--toast-info);
}

.toast.info .toast-icon::after {
    content: "i";
}

.toast.warning {
    background: var(--toast-warning-bg);
    border-color: var(--toast-warning);
    color: var(--macos-text-primary);
}

.toast.warning .toast-icon {
    background: var(--toast-warning);
}

.toast.warning .toast-icon::after {
    content: "⚠";
}

/* Toast Animations */
@keyframes toast-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toast-slide-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Tip Toast System - Centered long-duration tips */
.tip-toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001; /* Above normal toasts */
    pointer-events: none;
}

.tip-toast {
    position: relative;
    min-width: 400px;
    max-width: 600px;
    padding: 16px 20px;
    background: #E3F2FD; /* Light blue */
    border: 1px solid #90CAF9;
    border-radius: var(--macos-radius-large);
    box-shadow: var(--macos-shadow-medium);
    pointer-events: all;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease;
}

.tip-toast-show {
    opacity: 1;
    transform: translateY(0);
}

/* Progress bar that counts down */
.tip-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: #1976D2;
    border-radius: 0 0 var(--macos-radius-large) var(--macos-radius-large);
    animation: shrinkWidth linear forwards;
    animation-play-state: running;
}

@keyframes shrinkWidth {
    from { width: 100%; }
    to { width: 0%; }
}

.tip-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tip-content i {
    color: #1976D2;
    font-size: 20px;
    flex-shrink: 0;
}

.tip-message {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #0D47A1;
    line-height: 1.4;
}

.tip-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #1976D2;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.6;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.tip-close:hover {
    opacity: 1;
}

/* Duration cycle indicator */
.duration-cycle-indicator {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: var(--macos-radius-medium);
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10002;
}

.duration-cycle-indicator.show {
    opacity: 1;
}

.duration-cycle-indicator .current {
    font-weight: bold;
    color: #4CAF50;
}

/* ===== SIMPLE DAILY PLANNING ===== */
.dagelijkse-planning-layout {
    display: flex;
    gap: 0; /* Remove gap - splitter will handle spacing */
    height: calc(100vh - 140px); /* Full viewport height minus header and offset */
    margin: 0 -32px -24px 0; /* No top margin to make space for header, no left margin */
    padding: 16px 16px 0 16px; /* Remove bottom padding to eliminate gap */
    position: relative; /* For absolute positioned splitter */
}

.planning-sidebar {
    width: 35%; /* Default 35% - better balance for sidebar content */
    flex-shrink: 0; /* Don't shrink */
    background: #f0f0f0; /* Simple gray background */
    border-radius: 8px;
    padding: 15px 15px 40px 25px; /* Larger bottom padding for visual balance */
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%; /* Full height */
    box-sizing: border-box; /* Include padding in height calculation */
}

/* Resizable splitter between planning columns */
.planning-splitter {
    width: 8px;
    background: transparent;
    cursor: ew-resize;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.planning-splitter:hover {
    background: rgba(var(--macos-blue-rgb, 0, 122, 255), 0.1);
}

.planning-splitter.resizing {
    background: rgba(var(--macos-blue-rgb, 0, 122, 255), 0.2);
}

.splitter-handle {
    width: 2px;
    height: 40px;
    background: var(--macos-gray-3);
    border-radius: 1px;
    transition: all 0.2s ease;
}

.planning-splitter:hover .splitter-handle {
    background: var(--macos-blue);
    height: 60px;
}

.planning-splitter.resizing .splitter-handle {
    background: var(--macos-blue);
    height: 80px;
    width: 3px;
}

/* Touch-friendly splitter voor tablets */
@media (min-width: 769px) and (max-width: 1400px) and (pointer: coarse) {
    .planning-splitter {
        width: 20px !important;
        background: rgba(var(--macos-blue-rgb, 0, 122, 255), 0.05);
        border-radius: 4px;
    }
    
    .planning-splitter:hover,
    .planning-splitter:active {
        background: rgba(var(--macos-blue-rgb, 0, 122, 255), 0.15);
    }
    
    .planning-splitter.resizing {
        background: rgba(var(--macos-blue-rgb, 0, 122, 255), 0.25);
    }
    
    .splitter-handle {
        display: none; /* Vervangen door grip pattern */
    }
    
    /* Grip pattern voor touch feedback */
    .planning-splitter::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 6px;
        height: 60px;
        background-image: 
            radial-gradient(circle at 50% 20%, var(--macos-gray-4) 2px, transparent 2px),
            radial-gradient(circle at 50% 50%, var(--macos-gray-4) 2px, transparent 2px),
            radial-gradient(circle at 50% 80%, var(--macos-gray-4) 2px, transparent 2px);
        background-size: 6px 20px;
        background-repeat: no-repeat;
    }
    
    .planning-splitter:hover::before,
    .planning-splitter:active::before,
    .planning-splitter.resizing::before {
        background-image: 
            radial-gradient(circle at 50% 20%, var(--macos-blue) 2px, transparent 2px),
            radial-gradient(circle at 50% 50%, var(--macos-blue) 2px, transparent 2px),
            radial-gradient(circle at 50% 80%, var(--macos-blue) 2px, transparent 2px);
    }
}

/* Voor tablets - zorg dat sidebar resizable blijft */
@media (min-width: 769px) and (max-width: 1200px) {
    .planning-sidebar {
        width: 35% !important; /* Consistent 35% for tablets */
        flex: none !important;
    }
}

/* Collapsible sections styling */
.collapsible {
    transition: all 0.3s ease;
}

.collapsible .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    padding: 10px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: var(--macos-radius-small);
    transition: all 0.2s ease;
}

.collapsible .section-header:hover {
    background: rgba(0, 0, 0, 0.05);
}

.collapsible .section-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.collapsible .chevron {
    color: var(--macos-gray-2);
    transition: transform 0.3s ease;
}

.collapsible .section-content {
    overflow: hidden;
    transition: all 0.3s ease;
    opacity: 1;
}

.collapsible.collapsed .section-content {
    max-height: 0 !important;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
}

/* Extra compact styling for collapsed sections */
.collapsible.collapsed {
    margin-bottom: 4px !important; /* Minimal space between collapsed sections */
}

.collapsible.collapsed .section-header {
    padding: 4px 8px !important; /* Much smaller padding when collapsed */
    margin-bottom: 0 !important;
    border-radius: var(--macos-radius-small);
    background: rgba(0, 0, 0, 0.03);
}

.collapsible.collapsed .section-header h3 {
    font-size: 12px !important; /* Smaller text when collapsed */
}

/* Make the section containers themselves compact when collapsed */
.templates-sectie.collapsed,
.tijd-sectie.collapsed {
    margin-bottom: 2px !important;
    padding: 0 !important;
    min-height: auto !important;
}

.templates-sectie.collapsed .section-header,
.tijd-sectie.collapsed .section-header {
    margin: 0 !important;
    padding: 4px 8px !important;
}

/* Completely minimize collapsed containers - only header visible */
.templates-sectie.collapsed,
.tijd-sectie.collapsed {
    /* Remove ALL spacing and sizing */
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    margin-bottom: 2px !important; /* Only tiny gap between collapsed sections */
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    flex-shrink: 1 !important;
    /* Container becomes just the header height */
}

/* Header becomes the entire visible element */
.templates-sectie.collapsed .section-header,
.tijd-sectie.collapsed .section-header {
    margin: 0 !important;
    padding: 3px 8px !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid var(--macos-gray-4) !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    /* Header is now the only visible part */
    line-height: 1.2 !important;
}

/* Time section - bit higher */
.tijd-sectie {
    background: white;
    border-radius: 6px;
    border: 1px solid #ddd;
    margin-bottom: 10px;
}

.tijd-sectie .section-content {
    padding: 10px;
}

/* Compact sections for daily planning */
.dagelijkse-planning-layout .tijd-instellingen {
    padding: 12px;
}

.dagelijkse-planning-layout .templates-sectie {
    padding: 12px;
}

.tijd-instellingen h3 {
    margin-bottom: 10px;
    color: var(--macos-text-secondary);
    font-size: 14px;
    font-weight: 600;
}

.tijd-inputs {
    display: flex;
    gap: 15px;
}

.tijd-inputs label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--macos-text-secondary);
}

.tijd-inputs input {
    width: 60px;
    padding: 4px 8px;
    border: 1px solid var(--macos-gray-4);
    border-radius: var(--macos-radius-small);
    font-size: 12px;
}

.templates-sectie {
    background: var(--macos-bg-primary);
    border-radius: var(--macos-radius-medium);
    border: 1px solid var(--macos-gray-5);
    flex-shrink: 0; /* Don't shrink templates */
    margin-bottom: 10px;
}

.templates-sectie .section-content {
    padding: 15px;
    max-height: 200px;
    overflow-y: auto; /* Allow scrolling if too many templates */
}

.templates-sectie h4 {
    margin: 10px 0 8px 0;
    font-size: 13px;
    color: var(--macos-text-secondary);
    font-weight: 600;
}

.templates-sectie h4:first-child {
    margin-top: 0;
}

.templates-sectie h3 {
    margin-bottom: 10px;
    color: var(--macos-text-secondary);
    font-size: 14px;
    font-weight: 600;
}

.template-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
    padding-bottom: 10px;
}

.template-item {
    padding: 8px 12px;
    background: var(--macos-gray-6);
    border: 2px dashed var(--macos-gray-3);
    border-radius: var(--macos-radius-small);
    cursor: grab;
    font-size: 12px;
    font-weight: 500;
    color: var(--macos-text-secondary);
    user-select: none;
    transition: all 0.2s ease;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.template-item::before {
    content: "⋮⋮";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--macos-gray-2);
    line-height: 0.8;
}

.template-item::after {
    content: "Sleep naar planning →";
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    color: var(--macos-gray-1);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.template-item:hover {
    background: var(--soft-neutral-hover);
    border-color: var(--soft-blue);
    color: var(--macos-text-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 155, 240, 0.2);
}

.template-item:hover::before {
    color: rgba(255, 255, 255, 0.7);
}

.template-item:hover::after {
    opacity: 1;
    color: var(--macos-text-tertiary);
}

.template-item:active {
    cursor: grabbing;
    transform: scale(0.95) translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4);
}

.template-item.dragging {
    opacity: 0.02;
    background: var(--macos-gray-6);
    border-color: var(--macos-gray-3);
    color: var(--macos-text-secondary);
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.template-item.dragging::before {
    color: var(--macos-gray-2);
}

.template-item.dragging::after {
    opacity: 0;
}

.acties-sectie {
    flex: 1; /* Take remaining space in sidebar */
    background: var(--macos-bg-primary);
    padding: 15px;
    border-radius: var(--macos-radius-medium);
    border: 1px solid var(--macos-gray-5);
    display: flex;
    flex-direction: column;
    min-height: 200px; /* Minimum height for usability */
    overflow: hidden; /* Prevent this container from scrolling */
}

.acties-sectie h3 {
    margin-bottom: 15px;
    color: var(--macos-text-secondary);
    font-size: 14px;
    font-weight: 600;
}

.acties-lijst {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 15px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    min-height: 0; /* Allow flex shrinking */
}

/* Specific height constraints for daily planning */
.dagelijkse-planning-layout .acties-lijst {
    /* Let flex handle the height within the constrained parent */
    flex: 1; /* Take remaining space in actions section */
    min-height: 0; /* Allow flex shrinking */
    overflow-y: auto;
    overflow-x: hidden;
}

.planning-actie-item {
    padding: 12px 12px 12px 45px;
    border: 2px dashed var(--macos-gray-4);
    border-radius: var(--macos-radius-small);
    cursor: default; /* Default cursor for scrolling */
    background: var(--macos-bg-tertiary);
    transition: all 0.2s ease;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    user-select: none;
}

.planning-actie-item[draggable="true"] {
    cursor: grab; /* Only show grab cursor when actually draggable */
}

.planning-actie-item::before {
    content: "⋮⋮";
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--macos-gray-2);
    line-height: 0.8;
}

.planning-actie-item::after {
    content: "Sleep naar tijdslot →";
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    color: var(--macos-gray-1);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

/* Removed hover effects for planning-actie-item - no color change on hover */

.planning-actie-item:active {
    cursor: grabbing;
    transform: scale(0.95) translateY(-1px);
    box-shadow: 0 6px 20px rgba(48, 209, 88, 0.4);
}

.planning-actie-item.dragging {
    opacity: 0.02;
    background: var(--macos-bg-tertiary);
    border-color: var(--macos-gray-3);
    color: var(--macos-text-secondary);
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.planning-actie-item.dragging::before {
    color: var(--macos-gray-2);
}

.planning-actie-item.dragging::after {
    opacity: 0;
}

.planning-actie-item.dragging .actie-tekst,
.planning-actie-item.dragging .actie-meta {
    color: var(--macos-text-secondary);
}

/* Horizontal layout for planning actions */
.actie-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
}

.planning-actie-item .actie-checkbox {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
}

.planning-actie-item .actie-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
}

.actie-tekst {
    font-weight: 500;
    color: var(--macos-text-primary);
    font-size: 13px;
    flex: 1;
    min-width: 0; /* Allow text truncation */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.actie-meta {
    display: flex;
    gap: 6px;
    font-size: 11px;
    align-items: center;
    flex-shrink: 0; /* Prevent meta info from shrinking */
}

.actie-details {
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: var(--macos-text-tertiary);
}

/* Meta info styling for horizontal layout */
.meta-project,
.meta-context,
.meta-datum,
.meta-duur {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
}

.meta-project {
    background: var(--macos-blue);
    color: white;
}

.meta-context {
    background: var(--macos-orange);
    color: white;
}

.meta-datum {
    background: var(--macos-gray-5);
    color: var(--macos-text-secondary);
}

.meta-duur {
    background: var(--macos-gray-4);
    color: var(--macos-text-secondary);
}

/* Legacy styling for other lists that still use actie-details */
.actie-details .project {
    background: var(--macos-blue);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
}

.actie-details .context {
    background: var(--macos-orange);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
}

.actie-details .duur {
    background: var(--macos-gray-4);
    color: var(--macos-text-secondary);
    padding: 2px 6px;
    border-radius: 3px;
}

.dag-kalender {
    width: 65%; /* Default 65% - more room for calendar content */
    flex-shrink: 0; /* Don't shrink */
    background: var(--macos-bg-primary);
    border-radius: var(--macos-radius-large);
    padding: 20px;
    overflow-y: auto;
}

.kalender-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--macos-gray-5);
    gap: 20px;
}

.kalender-header h2 {
    color: var(--macos-text-primary);
    font-weight: 600;
    font-size: 20px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.totaal-tijd {
    background: var(--macos-gray-6);
    padding: 12px 40px;
    border-radius: var(--macos-radius-medium);
    font-weight: 500;
    color: var(--macos-text-secondary);
    min-width: 200px;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-clear-planning {
    background: var(--macos-red);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: var(--macos-radius-button);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-clear-planning:hover {
    background: #D70015;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3);
}

.btn-clear-planning:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(255, 59, 48, 0.2);
}

.kalender-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kalender-uur {
    display: flex;
    min-height: 80px;
    border: 1px solid var(--macos-gray-5);
    border-radius: var(--macos-radius-small);
    background: var(--macos-bg-tertiary);
}

.kalender-uur.overboekt {
    border-color: var(--macos-orange);
    background: rgba(255, 149, 0, 0.08);
}

/* Current hour indicator styling */
.kalender-uur.current-hour {
    border-left: 4px solid var(--macos-blue);
    box-shadow: 0 0 12px rgba(0, 122, 255, 0.15);
    background: rgba(0, 122, 255, 0.03);
}

.kalender-uur.current-hour .uur-tijd {
    background: var(--macos-blue);
    color: white;
    padding: 3px 8px;
    border-radius: var(--macos-radius-small);
    font-weight: 700;
}


.uur-label {
    width: 160px;
    min-width: 160px;
    padding: 10px 15px;
    background: var(--macos-gray-6);
    border-right: 1px solid var(--macos-gray-5);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    font-weight: 600;
    color: var(--macos-text-secondary);
    font-size: 12px;
    line-height: 1.3;
}

.uur-tijd {
    font-weight: 600;
    margin-bottom: 4px;
}

.uur-totaal-tijd {
    font-size: 11px;
    color: var(--macos-text-tertiary);
    font-weight: 500;
}

.kalender-uur.overboekt .uur-label {
    background: rgba(255, 149, 0, 0.15);
    color: var(--macos-text-primary);
    border-right-color: var(--macos-orange);
}

.kalender-uur.overboekt .uur-totaal-tijd {
    color: var(--macos-red);
    font-weight: 600;
}

.uur-content {
    flex: 1;
    padding: 10px;
    position: relative;
    min-height: 60px;
}

.uur-content.drag-over {
    background: rgba(0, 122, 255, 0.1);
    border: 2px dashed var(--macos-blue);
}

.uur-planning {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.planning-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--macos-bg-primary);
    border: 1px solid var(--macos-gray-4);
    border-radius: var(--macos-radius-small);
    font-size: 12px;
    position: relative;
}

.planning-item[data-type="geblokkeerd"] {
    background: var(--soft-blue-bg);
    border-color: var(--soft-blue);
}

.planning-item[data-type="pauze"] {
    background: var(--soft-green-bg);
    border-color: var(--soft-green);
}

.planning-item[data-type="taak"] {
    background: rgba(0, 122, 255, 0.1);
    border-color: var(--macos-blue);
}

/* Priority task styling - subtle macOS blue theme */
.planning-item.priority-task {
    background: linear-gradient(135deg, var(--priority-bg), var(--macos-bg-primary)) !important;
    border: 2px solid var(--priority-border) !important;
    box-shadow: 0 2px 8px var(--priority-shadow);
    position: relative;
}

.planning-item.priority-task:hover {
    border-color: var(--priority-border-hover) !important;
    box-shadow: 0 4px 12px var(--priority-shadow);
    transform: translateY(-1px);
}

.priority-indicator {
    color: var(--priority-primary);
    font-size: 14px;
    text-shadow: 0 1px 2px var(--priority-shadow);
    filter: drop-shadow(0 0 2px var(--priority-primary));
}

/* Removed gentle-glow animation for subtler design */

.task-checkbox {
    margin-right: 8px;
    transform: scale(1.65);
    cursor: pointer;
}

/* Expandable planning items */
.planning-item.expandable {
    cursor: pointer;
    transition: all 0.3s ease;
    flex-direction: column;
    align-items: stretch;
}

.planning-item.expandable:hover {
    background-color: rgba(0, 122, 255, 0.15);
}

.planning-item-header {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
}

.expand-chevron {
    font-size: 10px;
    color: var(--macos-text-tertiary);
    transition: transform 0.3s ease;
    margin-right: 4px;
}

.planning-item.expanded .expand-chevron {
    transform: rotate(90deg);
}

.planning-item-details {
    display: none;
    padding: 0 0 4px 32px; /* Align with task content, indent from left */
    animation: slideDown 0.3s ease-out;
}

.planning-item.expanded .planning-item-details {
    display: block;
}

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

/* Action list style layout for planning items */
.planning-taak-titel {
    font-weight: 500;
    color: var(--macos-text-primary);
    font-size: 12px;
    line-height: 1.3;
}

.planning-extra-info {
    font-size: 11px;
    color: var(--macos-text-secondary);
    margin-top: 3px;
    line-height: 1.3;
}

.planning-opmerkingen {
    font-size: 11px;
    color: var(--macos-text-primary);
    margin-top: 4px;
    line-height: 1.4;
    font-style: italic;
    background: rgba(0, 122, 255, 0.05);
    padding: 4px 8px;
    border-radius: 4px;
    border-left: 2px solid var(--macos-blue);
}

/* Clickable links in opmerkingen */
.detail-value a,
.planning-opmerkingen a {
    color: var(--macos-blue);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.detail-value a:hover,
.planning-opmerkingen a:hover {
    border-bottom-color: var(--macos-blue);
}

.detail-value a:active,
.planning-opmerkingen a:active {
    opacity: 0.8;
}

/* Planning subtaken styling */
.planning-subtaken {
    margin-top: 6px;
    padding: 6px 8px;
    background: rgba(0, 122, 255, 0.03);
    border-radius: 4px;
    border-left: 2px solid var(--macos-blue);
}

.planning-subtaken-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.subtaken-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--macos-text-primary);
}

.subtaken-progress-small {
    font-size: 9px;
    color: var(--macos-text-secondary);
    background: rgba(0, 122, 255, 0.1);
    padding: 1px 4px;
    border-radius: 8px;
    font-weight: 500;
}

.planning-subtaken-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.planning-subtaak {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    line-height: 1.2;
}

.planning-subtaak.checked {
    opacity: 0.6;
}

.planning-subtaak.checked .subtaak-text {
    text-decoration: line-through;
    color: var(--macos-text-secondary);
}

.subtaak-checkbox {
    cursor: pointer;
    user-select: none;
    font-size: 9px;
    color: var(--macos-blue);
    min-width: 12px;
    text-align: center;
    transition: transform 0.1s ease;
}

.subtaak-checkbox:hover {
    transform: scale(1.1);
}

.subtaak-text {
    color: var(--macos-text-primary);
    flex: 1;
    word-break: break-word;
}

/* Ensure dag-kalender is positioned for dynamic drag containment */
.dag-kalender {
    position: relative;
}

/* Dynamic Drag & Drop System - Modern Push-Apart Interface */

/* Ghost Preview - Semi-transparent preview of dragged item */
.drag-ghost-preview {
    opacity: 0.6 !important;
    background: rgba(0, 122, 255, 0.2) !important;
    border: 2px dashed var(--macos-blue) !important;
    transform: scale(0.98);
    pointer-events: none;
    animation: ghostPulse 1.5s ease-in-out infinite;
}

@keyframes ghostPulse {
    0%, 100% { opacity: 0.6; transform: scale(0.98); }
    50% { opacity: 0.8; transform: scale(1.0); }
}

/* Enhanced Planning Item Transitions for Smooth Push Animations */
.planning-item {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.2s ease,
                box-shadow 0.2s ease;
}

/* Push Animation Classes */
.planning-item.push-down {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.planning-item.push-up {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Enhanced Dragging State */
.planning-item.dragging {
    opacity: 0.3;
    transform: rotate(3deg) scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

/* Dynamic Spacer for Smooth Height Transitions */
.dynamic-spacer {
    height: 0;
    overflow: hidden;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 122, 255, 0.1) 50%, 
        transparent 100%);
    border-radius: 4px;
    margin: 2px 0;
}

.dynamic-spacer.active {
    height: 60px; /* Approximate height of a planning item */
}

/* Hover State During Drag Operations */
.kalender-uur.drag-hover {
    background: rgba(0, 122, 255, 0.05);
    border-radius: 8px;
    transition: background 0.2s ease;
}

/* Spring-like Animation for Natural Movement */
@keyframes springIn {
    0% { transform: scale(0.8) translateY(-20px); opacity: 0; }
    50% { transform: scale(1.05) translateY(5px); opacity: 0.8; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}


.planning-icon {
    font-size: 14px;
}

.planning-naam {
    flex: 1;
    font-weight: 500;
    color: var(--macos-text-primary);
}

.planning-duur {
    font-weight: 500;
    color: var(--macos-text-tertiary);
}

.delete-planning {
    background: transparent;
    color: var(--macos-text-secondary);
    border: none;
    width: 24px;
    height: 24px;
    border-radius: var(--macos-radius-small);
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.2s ease;
}

.delete-planning:hover {
    background: var(--macos-gray-5);
    color: var(--macos-red);
    transform: scale(1.1);
}

.uur-totaal {
    position: absolute;
    bottom: 5px;
    right: 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--macos-text-tertiary);
    background: var(--macos-gray-6);
    padding: 2px 6px;
    border-radius: 3px;
}

.kalender-uur.overboekt .uur-totaal {
    color: var(--macos-orange);
    background: rgba(255, 149, 0, 0.1);
}

/* Hide collapsible blocks in daily planning - Feature 007 */
#tijd-sectie {
    display: none;
}

#templates-sectie {
    display: none;
}

/* Tablet and iPad responsive */
@media (max-width: 1400px) {
    /* Show sidebar toggle on narrow screens */
    .sidebar-toggle {
        display: block !important;
        position: absolute;
        top: 20px;
        right: 15px;
        background: none;
        border: none;
        color: var(--macos-text-secondary);
        cursor: pointer;
        padding: 8px;
        border-radius: var(--macos-radius-small);
        transition: all 0.2s ease;
        z-index: 10;
    }

    .sidebar-toggle:hover {
        background: var(--macos-gray-5);
        color: var(--macos-blue);
    }

    .app-layout {
        flex-direction: row; /* Keep row for slide effect */
        position: relative;
    }
    
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 350px;
        height: 100vh;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        border-right: 1px solid var(--macos-gray-4);
        border-bottom: none;
        overflow-y: auto;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }
    
    .sidebar.sidebar-open {
        transform: translateX(0);
    }
    
    .main-content {
        width: 100%;
        transition: transform 0.3s ease;
    }
    
    .main-content.sidebar-open {
        transform: translateX(350px);
    }
    
    /* Overlay when sidebar is open */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        display: none;
        transition: opacity 0.3s ease;
    }
    
    .sidebar-overlay.active {
        display: block;
        opacity: 1;
    }
    
    .sidebar-content {
        padding: 10px 20px;
    }
    
    .main-content {
        flex: 1;
        overflow-y: auto;
    }
    
    .lijst-sectie {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    
    .lijst-item {
        flex: none;
        width: 100%;
        padding: 8px 20px;
        text-align: left;
        border-radius: var(--macos-radius-button);
        background: transparent;
    }
    
    .lijst-item.actief {
        background: var(--soft-blue-bg);
        color: var(--macos-text-primary);
        border: 1px solid var(--soft-blue);
    }
    
    .dropdown-content {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 8px;
    }
    
    .dropdown-header {
        width: 100%;
        margin-bottom: 8px;
    }
    
    /* Daily planning responsive - only for mobile portrait */
    .dagelijkse-planning-layout {
        flex-direction: column;
        height: auto;
        gap: 15px;
    }
    
    .planning-sidebar {
        width: 100%;
        height: auto;
        max-height: 50vh;
        order: 1;
        overflow-y: auto;
    }
    
    .dag-kalender {
        order: 2;
        overflow-y: auto;
    }
    
    .planning-acties .acties-lijst {
        max-height: 300px;
        overflow-y: auto;
    }
}

/* Tablet landscape - behoud 2-kolommen layout voor dagelijkse planning */
@media (min-width: 769px) and (max-width: 1200px) and (orientation: landscape) {
    .dagelijkse-planning-layout {
        flex-direction: row !important;
        height: calc(100vh - 140px) !important;
        gap: 0 !important;
    }
    
    .planning-sidebar {
        width: 35% !important;
        height: 100% !important;
        max-height: none !important;
        order: 1 !important;
        flex: none !important;
    }
    
    .planning-splitter {
        order: 2 !important;
    }
    
    .dag-kalender {
        width: 65% !important;
        flex: none !important;
        order: 3 !important;
        height: 100% !important;
    }
}

/* Laptop - collapsible sidebar */
@media (min-width: 1201px) and (max-width: 1599px) {
    .sidebar {
        display: flex !important;
        width: 300px !important;
        flex-shrink: 0 !important;
        position: relative;
        transition: width 0.3s ease;
    }
    
    /* Ensure main content uses remaining space correctly */
    .main-content {
        flex: 1 !important;
        display: flex;
        flex-direction: column;
    }
    
    /* Force splitter layout in daily planning for laptop */
    .dagelijkse-planning-layout {
        flex-direction: row !important;
        height: calc(100vh - 140px) !important;
        gap: 0 !important;
    }
    
    /* Compacter collapsible sections on laptop */
    .collapsible .section-header {
        padding: 8px !important;
    }
    
    .collapsible .section-header h3 {
        font-size: 13px !important;
    }
    
    /* Extra compact collapsed sections on laptop */
    .collapsible.collapsed {
        margin-bottom: 2px !important;
    }
    
    .collapsible.collapsed .section-header {
        padding: 3px 6px !important;
    }
    
    .collapsible.collapsed .section-header h3 {
        font-size: 11px !important;
    }
    
    /* Responsive filter layout for laptop */
    .acties-filters {
        gap: 8px !important;
        padding: 8px !important;
    }
    
    .filter-groep {
        max-width: 110px !important;
    }
    
    /* Force checkbox to new line on smaller screens */
    .filter-checkbox {
        flex-basis: 100% !important;
        margin-left: 0 !important;
        margin-top: 8px !important;
        justify-content: flex-end !important;
    }
    
    /* Compact bulk controls on smaller screens */
    .bulk-controls-container {
        padding: 6px 8px !important;
        margin-bottom: 12px !important;
    }
    
    .bulk-mode-toggle {
        padding: 6px 12px !important;
        font-size: 13px !important;
    }
    
    /* Maximum space efficiency on laptop */
    .templates-sectie.collapsed,
    .tijd-sectie.collapsed,
    .top-prioriteiten-sectie.collapsed {
        margin: 0 !important;
        margin-bottom: 1px !important; /* Absolute minimum gap */
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        min-height: 0 !important;
        height: auto !important;
        flex-shrink: 1 !important;
    }
    
    .templates-sectie.collapsed .section-header,
    .tijd-sectie.collapsed .section-header,
    .top-prioriteiten-sectie.collapsed .section-header {
        padding: 2px 6px !important;
        margin: 0 !important;
        background: rgba(0, 0, 0, 0.03) !important;
        border: 1px solid var(--macos-gray-5) !important;
        border-radius: 3px !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
    }
    
    .tijd-sectie .section-content,
    .templates-sectie .section-content {
        padding: 10px !important;
    }
    
    /* Smaller margins between sections */
    .tijd-sectie,
    .templates-sectie {
        margin-bottom: 8px !important;
    }
    
    .planning-sidebar {
        width: 35% !important;
        flex-shrink: 0 !important;
        height: 100% !important;
        order: 1 !important;
    }
    
    .planning-splitter {
        order: 2 !important;
    }
    
    .dag-kalender {
        width: 65% !important;
        flex-shrink: 0 !important;
        order: 3 !important;
        height: 100% !important;
    }
    
    .sidebar.collapsed {
        width: 40px !important;
        overflow: hidden;
    }
    
    /* Hide ALL content in collapsed state - completely empty sidebar */
    .sidebar.collapsed .sidebar-content,
    .sidebar.collapsed .app-logo,
    .sidebar.collapsed .user-section,
    .sidebar.collapsed .version-info {
        display: none !important;
    }
    
    /* Only toggle button remains visible */
    .sidebar.collapsed .sidebar-toggle {
        display: block !important;
        position: absolute;
        top: 15px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
    }
    
    .app-layout {
        flex-direction: row !important;
    }
    
    .main-content {
        flex: 1 !important;
    }
}

/* Large Desktop - sidebar always visible */
@media (min-width: 1600px) {
    .sidebar {
        display: flex !important;
        width: 450px !important;
        flex-shrink: 0 !important;
    }
    
    .app-layout {
        flex-direction: row !important;
    }
    
    .main-content {
        flex: 1 !important;
        display: flex;
        flex-direction: column;
    }
    
    /* Force splitter layout in daily planning for large desktop */
    .dagelijkse-planning-layout {
        flex-direction: row !important;
        height: calc(100vh - 140px) !important;
        gap: 0 !important;
    }
    
    .planning-sidebar {
        width: 35% !important;
        flex-shrink: 0 !important;
        height: 100% !important;
        order: 1 !important;
    }
    
    .planning-splitter {
        order: 2 !important;
    }
    
    .dag-kalender {
        width: 65% !important;
        flex-shrink: 0 !important;
        order: 3 !important;
        height: 100% !important;
    }
    
    /* Hide toggle button on large desktop */
    .sidebar-toggle {
        display: none;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .sidebar-header {
        padding: 16px 20px 12px 20px;
    }
    
    .logo-image {
        height: 28px;
    }
    
    .toast-container {
        top: 10px;
        right: 10px;
        left: 10px;
    }
    
    .toast {
        min-width: auto;
        max-width: none;
    }
    
    @keyframes toast-slide-in {
        from {
            transform: translateY(-100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    @keyframes toast-slide-out {
        from {
            transform: translateY(0);
            opacity: 1;
        }
        to {
            transform: translateY(-100%);
            opacity: 0;
        }
    }
    
    .dagelijkse-planning-layout {
        flex-direction: column;
        height: auto;
    }
    
    .planning-sidebar {
        width: 100%;
        min-width: auto;
        order: 2;
    }
}

/* SIMPLE CSS FOR PLANNING LAYOUT */
.tijd-sectie h3 {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: #666;
}

.tijd-inputs {
    display: flex;
    gap: 10px;
}

.tijd-inputs label {
    font-size: 11px;
    color: #888;
}

.tijd-inputs input {
    width: 40px;
    padding: 3px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 11px;
}

/* Templates section - enough space for all content */
.templates-sectie {
    background: white;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ddd;
    height: 140px; /* More height for all templates */
    overflow-y: auto; /* Scroll if needed */
}

.templates-sectie h3 {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: #666;
}

.template-items {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

.template-item {
    background: var(--soft-neutral);
    color: var(--macos-text-primary);
    border: 1px solid var(--macos-gray-4);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: grab;
    white-space: nowrap;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.template-item:hover {
    background: var(--soft-neutral-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.template-item[data-type="pauze"] {
    background: var(--soft-beige);
    border-color: var(--soft-green);
}

.template-item[data-type="pauze"]:hover {
    background: var(--soft-beige-hover);
    border-color: var(--soft-green-hover);
}

/* Top Priority Star Checkbox Styling */
.actie-star {
    display: flex;
    align-items: center;
    margin-right: 4px;
    position: relative;
}

.actie-star .star-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 24px;
    height: 24px;
    z-index: 2;
}

.actie-star .star-label {
    font-size: 20px;
    cursor: pointer;
    filter: grayscale(100%);
    opacity: 0.5;
    transition: all 0.2s ease;
    user-select: none;
    pointer-events: none;
}

.actie-star .star-checkbox:hover ~ .star-label {
    opacity: 0.8;
    filter: grayscale(50%);
}

.actie-star .star-checkbox:checked ~ .star-label {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.15);
}

/* Edit icon in Actions sidebar (Daily Planning) */
.actie-edit {
    display: flex;
    align-items: center;
    margin-right: 4px;
}

.actie-edit .edit-button,
.actie-edit button.edit-button {
    -webkit-appearance: none;
    appearance: none;
    background: transparent !important;
    background-color: transparent !important;
    border: none;
    cursor: pointer;
    font-size: 16px;
    opacity: 0.5;
    transition: all 0.2s ease;
    padding: 0;
}

.actie-edit .edit-button:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Edit button in Calendar view (Daily Planning) */
.edit-planning {
    background: transparent;
    color: var(--macos-text-secondary);
    border: none;
    width: 24px;
    height: 24px;
    border-radius: var(--macos-radius-small);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.edit-planning:hover {
    background: var(--macos-gray-5);
    color: var(--macos-blue);
    transform: scale(1.1);
}

/* Actions section - takes remaining space */
.acties-sectie {
    background: white;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ddd;
    flex: 1; /* Takes remaining space */
    display: flex;
    flex-direction: column;
    min-height: 0; /* Allow flex shrinking */
}

.acties-sectie h3 {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: #666;
}

.acties-container {
    flex: 1; /* Takes remaining space in actions section */
    overflow-y: auto; /* Simple scrolling */
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 10px;
    /* No min-height needed - flex will handle it */
}

/* Planning actions filters */
.planning-acties-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px;
    background: #f9f9f9;
    border-radius: 4px;
    border: 1px solid #eee;
}

.planning-acties-filters .filter-input {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
}

.planning-acties-filters .filter-select {
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    background: white;
}

.planning-acties-filters .filter-input-number {
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    width: 100px;
}

/* ===== UPDATE NOTIFICATIONS ===== */

/* Version indicator states */
.version-number.update-available {
    background: linear-gradient(135deg, #48bb78, #38a169);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    cursor: pointer;
    animation: pulse-green 2s infinite;
    position: relative;
}

.version-number.update-available::after {
    content: '✨';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 12px;
    animation: bounce 1s infinite;
}

.version-number.update-pending {
    background: linear-gradient(135deg, #ed8936, #dd6b20);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    cursor: help;
    animation: pulse-orange 2s infinite;
}

@keyframes pulse-green {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.7);
    }
    50% { 
        box-shadow: 0 0 0 6px rgba(72, 187, 120, 0);
    }
}

@keyframes pulse-orange {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(237, 137, 54, 0.7);
    }
    50% { 
        box-shadow: 0 0 0 6px rgba(237, 137, 54, 0);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-3px);
    }
    60% {
        transform: translateY(-2px);
    }
}

/* Update toast notification */
.update-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    transform: translateX(400px);
    transition: transform 0.3s ease;
}

.update-toast.show {
    transform: translateX(0);
}

.update-toast-content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    border: 1px solid #e2e8f0;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 320px;
    position: relative;
}

.update-toast-icon {
    font-size: 24px;
    animation: bounce 2s infinite;
}

.update-toast-text {
    flex: 1;
}

.update-toast-title {
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 2px;
}

.update-toast-subtitle {
    font-size: 14px;
    color: #718096;
}

.update-toast-changelog {
    margin-top: 8px;
}

.changelog-link {
    color: var(--macos-blue);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
}

.changelog-link:hover {
    color: var(--macos-blue-hover);
    text-decoration: underline;
}

.update-toast-actions {
    display: flex;
    gap: 8px;
}

.update-btn-refresh {
    background: linear-gradient(135deg, #48bb78, #38a169);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.update-btn-refresh:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(72, 187, 120, 0.3);
}

.update-btn-later {
    background: #f7fafc;
    color: #4a5568;
    border: 1px solid #e2e8f0;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.update-btn-later:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
}

.update-toast-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    font-size: 18px;
    color: #a0aec0;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.update-toast-close:hover {
    background: #edf2f7;
    color: #4a5568;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .update-toast {
        right: 10px;
        left: 10px;
        top: 10px;
        transform: translateY(-400px);
    }
    
    .update-toast.show {
        transform: translateY(0);
    }
    
    .update-toast-content {
        min-width: auto;
        padding: 12px;
    }
    
    .update-toast-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .update-btn-refresh,
    .update-btn-later {
        width: 100%;
        text-align: center;
    }
}

/* ===== LOADING INDICATORS ===== */

/* Global loading overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--macos-gray-4);
    border-top: 3px solid var(--macos-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-progress-text {
    font-size: 13px;
    color: var(--macos-text-secondary);
    text-align: center;
    min-height: 18px;
    opacity: 0;
    transition: all 0.4s ease;
    transform: translateY(5px);
    margin-top: 15px;
    font-weight: 500;
}

.loading-progress-text.active {
    opacity: 1;
    transform: translateY(0);
}

/* Entertainment message animation */
.loading-progress-text.entertainment {
    animation: entertainmentPulse 0.8s ease-in-out;
}

@keyframes entertainmentPulse {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-2px) scale(1.02); opacity: 0.8; }
    100% { transform: translateY(0) scale(1); }
}

/* Inline loading spinner (smaller) */
.loading-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--macos-text-secondary);
    font-size: 13px;
}

.loading-spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid var(--macos-gray-4);
    border-top: 2px solid var(--macos-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Button loading state */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Section loading indicator */
.section-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: var(--macos-text-secondary);
    font-size: 13px;
    gap: 8px;
}

/* Loading pulse animation for placeholder content */
.loading-placeholder {
    background: linear-gradient(90deg, var(--macos-gray-5) 25%, var(--macos-gray-4) 50%, var(--macos-gray-5) 75%);
    background-size: 200% 100%;
    animation: loading-pulse 1.5s infinite;
    border-radius: var(--macos-radius-small);
}

/* Progress bar for longer operations */
.loading-progress {
    width: 100%;
    height: 4px;
    background: var(--macos-gray-5);
    border-radius: 2px;
    overflow: hidden;
    margin: 10px 0;
}

.loading-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--macos-blue), var(--macos-blue-hover));
    border-radius: 2px;
    transition: width 0.3s ease;
    min-width: 0;
}

.loading-progress-indeterminate {
    position: relative;
    background: var(--macos-gray-5);
}

.loading-progress-indeterminate::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--macos-blue), transparent);
    animation: loading-progress 2s infinite;
}

/* Loading skeleton for list items */
.loading-skeleton {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
}

.loading-skeleton-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.loading-skeleton-text {
    flex: 1;
    height: 16px;
    border-radius: 8px;
}

.loading-skeleton-text-short {
    width: 60px;
    height: 14px;
    border-radius: 7px;
}

/* Keyframe animations */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

@keyframes loading-progress {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Loading states for specific components */
.taken-container.loading {
    position: relative;
    min-height: 200px;
}

.planning-sidebar.loading .planning-acties {
    opacity: 0.6;
    pointer-events: none;
}

.dag-kalender.loading {
    opacity: 0.8;
    pointer-events: none;
}

/* ===== AUTHENTICATION UI ===== */
.user-section {
    margin: 16px 0;
    padding: 12px;
    background: var(--macos-bg-primary);
    border-radius: var(--macos-radius-medium);
    border: 1px solid var(--macos-gray-4);
}

.auth-buttons {
    display: flex;
    gap: 8px;
    flex-direction: column;
}

.btn-auth {
    padding: 10px 20px;
    border: 1px solid var(--macos-gray-4);
    border-radius: var(--macos-radius-button);
    background: var(--macos-bg-primary);
    color: var(--macos-text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-auth:hover {
    background: var(--macos-gray-6);
    border-color: var(--macos-gray-3);
}

.btn-login {
    background: var(--soft-blue);
    color: white;
    border-color: var(--soft-blue);
}

.btn-login:hover {
    background: var(--soft-blue-hover);
    border-color: var(--soft-blue-hover);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--macos-gray-5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.user-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--macos-text-primary);
}

.user-email {
    font-size: 11px;
    color: var(--macos-text-secondary);
}

.btn-logout {
    padding: 4px 8px;
    border: 1px solid var(--macos-gray-4);
    border-radius: var(--macos-radius-button);
    background: var(--macos-bg-primary);
    color: var(--macos-text-secondary);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-logout:hover {
    background: var(--macos-red);
    color: white;
    border-color: var(--macos-red);
}

/* Auth Modal Styles */
.auth-modal {
    width: 400px;
    max-width: 90vw;
}

.auth-modal .form-group {
    margin-bottom: 16px;
}

.auth-modal label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--macos-text-primary);
}

.auth-modal input[type="text"],
.auth-modal input[type="email"],
.auth-modal input[type="password"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--macos-gray-4);
    border-radius: var(--macos-radius-button);
    font-size: 13px;
    background: var(--macos-bg-primary);
    color: var(--macos-text-primary);
    transition: border-color 0.2s ease;
}

.auth-modal input[type="text"]:focus,
.auth-modal input[type="email"]:focus,
.auth-modal input[type="password"]:focus {
    outline: none;
    border-color: var(--macos-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.auth-modal .popup-acties {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

.auth-modal .popup-acties button {
    padding: 12px 24px;
    border-radius: var(--macos-radius-button);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.auth-modal .popup-acties button[type="button"] {
    background: var(--macos-bg-primary);
    border: 1px solid var(--macos-gray-4);
    color: var(--macos-text-primary);
    flex: 0 0 auto;
    min-width: 120px;
}

.auth-modal .popup-acties button[type="button"]:hover {
    background: var(--macos-gray-6);
    border-color: var(--macos-gray-3);
}

.auth-modal .popup-acties .actie-btn {
    background: var(--soft-blue);
    border: 1px solid var(--soft-blue);
    color: white;
    width: auto;
    margin-top: 0;
    flex: 0 0 auto;
    min-width: 120px;
}

.auth-modal .popup-acties .actie-btn:hover {
    background: var(--soft-blue-hover);
    border-color: var(--soft-blue-hover);
}

/* Custom Confirm Modal button styling */
#confirmModal .popup-acties {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

#confirmModal .popup-acties button {
    padding: 12px 24px;
    border-radius: var(--macos-radius-button);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 0 0 auto;
}

#confirmModal .popup-acties .actie-btn {
    background: var(--soft-blue);
    border: 1px solid var(--soft-blue);
    color: white;
    width: auto;
    margin-top: 0;
}

#confirmModal .popup-acties .actie-btn:hover {
    background: var(--soft-blue-hover);
    border-color: var(--soft-blue-hover);
}

#confirmModal .popup-acties button:not(.actie-btn) {
    background: var(--macos-bg-primary) !important;
    border: 1px solid var(--macos-gray-4) !important;
    color: var(--macos-text-primary) !important;
    box-shadow: none !important;
}

#confirmModal .popup-acties button:not(.actie-btn):hover {
    background: var(--macos-gray-6) !important;
    border-color: var(--macos-gray-3) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Custom Input Modal button styling - copy from feedback modal */
#inputModal .popup-acties {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

#inputModal .popup-acties button {
    padding: 12px 24px;
    border-radius: var(--macos-radius-button);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 0 0 auto;
}

#inputModal .popup-acties .actie-btn {
    background: var(--soft-blue);
    border: 1px solid var(--soft-blue);
    color: white;
    width: auto;
    margin-top: 0;
}

#inputModal .popup-acties .actie-btn:hover {
    background: var(--soft-blue-hover);
    border-color: var(--soft-blue-hover);
}

#inputModal .popup-acties button:not(.actie-btn) {
    background: var(--macos-bg-primary) !important;
    border: 1px solid var(--macos-gray-4) !important;
    color: var(--macos-text-primary) !important;
    box-shadow: none !important;
}

#inputModal .popup-acties button:not(.actie-btn):hover {
    background: var(--macos-gray-6) !important;
    border-color: var(--macos-gray-3) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Project Modal button styling */
#projectModal .popup-acties {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

#projectModal .popup-acties button {
    padding: 12px 24px;
    border-radius: var(--macos-radius-button);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 0 0 auto;
    min-width: 120px;
}

#projectModal .popup-acties .actie-btn {
    background: var(--soft-blue);
    border: 1px solid var(--soft-blue);
    color: white;
    width: auto;
    margin-top: 0;
}

#projectModal .popup-acties .actie-btn:hover {
    background: var(--soft-blue-hover);
    border-color: var(--soft-blue-hover);
}

#projectModal .popup-acties button:not(.actie-btn) {
    background: var(--macos-bg-primary);
    border: 1px solid var(--macos-gray-4);
    color: var(--macos-text-primary);
}

#projectModal .popup-acties button:not(.actie-btn):hover {
    background: var(--macos-gray-6);
    border-color: var(--macos-gray-3);
}

/* Event Date Popup z-index fix - moet boven loading indicator (9999) staan */
#eventDatePopup {
    z-index: 10001 !important;
}

/* Event Date Popup button styling */
#eventDatePopup .popup-acties {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

#eventDatePopup .popup-acties button {
    padding: 12px 24px;
    border-radius: var(--macos-radius-button);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 0 0 auto;
    min-width: 120px;
}

#eventDatePopup .popup-acties .actie-btn {
    background: var(--soft-blue);
    border: 1px solid var(--soft-blue);
    color: white;
}

#eventDatePopup .popup-acties .actie-btn:hover {
    background: var(--soft-blue-hover);
    border-color: var(--soft-blue-hover);
}

#eventDatePopup .popup-acties button:not(.actie-btn) {
    background: var(--macos-bg-primary);
    border: 1px solid var(--macos-gray-4);
    color: var(--macos-text-primary);
}

#eventDatePopup .popup-acties button:not(.actie-btn):hover {
    background: var(--macos-gray-6);
    border-color: var(--macos-gray-3);
}

/* Keyboard Help Modal button styling */
#keyboardHelpModal .popup-acties {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
}

#keyboardHelpModal .popup-acties button {
    padding: 12px 24px;
    border-radius: var(--macos-radius-button);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--soft-blue);
    border: 1px solid var(--soft-blue);
    color: white;
    min-width: 120px;
}

#keyboardHelpModal .popup-acties button:hover {
    background: var(--soft-blue-hover);
    border-color: var(--soft-blue-hover);
}

/* ===== WELCOME MESSAGE ===== */
.welcome-message {
    padding: 20px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.welcome-content {
    text-align: center;
    max-width: 350px;
    padding: 40px 20px;
}

.welcome-content h2 {
    font-size: 24px;
    font-weight: 600;
    color: var(--macos-text-primary);
    margin-bottom: 12px;
}

.welcome-content p {
    font-size: 14px;
    color: var(--macos-text-secondary);
    line-height: 1.5;
    margin-bottom: 24px;
}

.features-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--macos-bg-primary);
    border-radius: var(--macos-radius-medium);
    border: 1px solid var(--macos-gray-5);
    font-size: 13px;
    color: var(--macos-text-primary);
}

.feature-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.login-prompt {
    font-size: 14px;
    color: var(--macos-text-primary);
    font-weight: 500;
}

/* Extra info styling for actions and deferred lists */
.taak-extra-info {
    font-size: 12px;
    color: var(--macos-text-secondary);
    margin-top: 4px;
    line-height: 1.3;
}

/* Bijlagen indicator styling */
.bijlagen-indicator {
    color: var(--macos-blue);
    font-weight: 500;
}

.bijlagen-indicator i {
    margin-right: 2px;
    font-size: 11px;
}

.taak-item.overdue {
    border-left: 3px solid var(--macos-red);
    background-color: rgba(255, 59, 48, 0.05);
}

.taak-item.today {
    border-left: 3px solid var(--macos-blue);
    background-color: rgba(0, 122, 255, 0.05);
}

.taak-item.future {
    border-left: 3px solid var(--macos-gray-2);
}

.toggle-filters-btn {
    padding: 10px 20px;
    background: var(--macos-bg-secondary);
    color: var(--macos-text-primary);
    border: 1px solid var(--macos-gray-4);
    border-radius: var(--macos-radius-medium);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    margin-top: 16px;
    align-self: flex-start;
    width: auto;
}

.toggle-filters-btn:hover {
    background: var(--macos-gray-5);
    border-color: var(--macos-gray-3);
}

.filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    cursor: pointer;
    user-select: none;
}

.filters-header h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--macos-text-primary);
    margin: 0;
}

.filters-toggle {
    font-size: 12px;
    color: var(--macos-text-secondary);
    transition: transform 0.2s ease;
}

.filters-toggle.expanded {
    transform: rotate(90deg);
}

.filters-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    margin-top: 8px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.filter-group label {
    font-size: 12px;
    font-weight: 500;
    color: var(--macos-text-primary);
}

.filter-group select,
.filter-group input {
    padding: 8px 12px;
    border: 1px solid var(--macos-gray-4);
    border-radius: var(--macos-radius-button);
    font-size: 13px;
    background: var(--macos-bg-primary);
    color: var(--macos-text-primary);
    margin-bottom: 4px;
}

.filter-group select:focus,
.filter-group input:focus {
    outline: none;
    border-color: var(--macos-blue);
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1);
}

.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--macos-gray-5);
}

.results-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--macos-text-primary);
    margin: 0;
}

.results-count {
    font-size: 12px;
    color: var(--macos-text-secondary);
    background: var(--macos-gray-6);
    padding: 4px 8px;
    border-radius: var(--macos-radius-button);
}

.result-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--macos-text-primary);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.result-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 11px;
}

.result-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: var(--macos-radius-button);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.result-badge.status-inbox {
    background: var(--macos-gray-6);
    color: var(--macos-text-secondary);
}

.result-badge.status-acties {
    background: var(--macos-blue);
    color: white;
}

.result-badge.status-afgewerkt {
    background: var(--macos-green);
    color: white;
}

.result-badge.status-opvolgen {
    background: var(--macos-orange);
    color: white;
}

.result-badge.status-uitgesteld {
    background: var(--macos-purple);
    color: white;
}

.result-badge.recurring {
    background: var(--macos-green);
    color: white;
}

.result-project {
    color: var(--macos-text-secondary);
    font-weight: 500;
}

.result-context {
    color: var(--macos-blue);
    font-weight: 500;
}

.result-date {
    color: var(--macos-text-tertiary);
}

.result-notes {
    color: var(--macos-text-secondary);
    font-style: italic;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.3;
    max-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.no-results {
    text-align: center;
    padding: 40px 20px;
    color: var(--macos-text-secondary);
    font-style: italic;
}

.no-results .icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--macos-bg-secondary);
    border: 1px solid var(--macos-gray-5);
    border-radius: var(--macos-radius-button);
    cursor: pointer;
    transition: all 0.2s ease;
}

.history-item:hover {
    background: var(--macos-gray-6);
    border-color: var(--macos-gray-3);
}

.history-query {
    font-size: 12px;
    color: var(--macos-text-primary);
    flex: 1;
}

.history-time {
    font-size: 10px;
    color: var(--macos-text-tertiary);
}

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

.stat-item {
    text-align: center;
    padding: 8px;
    background: var(--macos-bg-primary);
    border-radius: var(--macos-radius-button);
}

.stat-number {
    font-size: 18px;
    font-weight: 600;
    color: var(--macos-blue);
    display: block;
}

.stat-label {
    font-size: 10px;
    color: var(--macos-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.skeleton-result {
    background: var(--macos-bg-primary);
    border: 1px solid var(--macos-gray-5);
    border-radius: var(--macos-radius-medium);
    padding: 12px 16px;
    margin-bottom: 8px;
}

.skeleton-line {
    height: 14px;
    background: linear-gradient(90deg, var(--macos-gray-6) 25%, var(--macos-gray-5) 50%, var(--macos-gray-6) 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: loading-shimmer 1.5s infinite;
    margin-bottom: 8px;
}

.skeleton-line.short {
    width: 60%;
}

.skeleton-line.medium {
    width: 80%;
}

.skeleton-line.long {
    width: 100%;
}

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

.login-prompt strong {
    color: var(--soft-blue);
}

/* User section styling */
.user-section {
    margin-top: 16px;
}

.auth-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-login {
    background: var(--soft-blue);
    border-color: var(--soft-blue);
    color: white;
}

.btn-login:hover {
    background: var(--soft-blue-hover);
    border-color: var(--soft-blue-hover);
}

.user-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 12px;
    background: var(--macos-bg-primary);
    border-radius: var(--macos-radius-medium);
    border: 1px solid var(--macos-gray-4);
}

.user-info-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--macos-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px; /* Align with first line of text */
}

.user-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0; /* Allow content to shrink */
}

.user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--macos-text-primary);
}

.user-email {
    font-size: 11px;
    color: var(--macos-text-secondary);
}

/* Import Email Styling */
.user-import-email {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--macos-gray-5);
    width: 100%;
}

.import-label {
    font-size: 11px;
    color: var(--macos-text-secondary);
    font-weight: 500;
    white-space: nowrap;
    margin-right: 6px;
    flex-shrink: 0;
}

.import-email-container {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.import-email-link {
    font-size: 11px;
    color: var(--macos-blue);
    text-decoration: none;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    padding: 3px 6px;
    background: var(--macos-gray-6);
    border-radius: var(--macos-radius-small);
    transition: all 0.2s ease;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.import-email-link:hover {
    background: var(--macos-blue);
    color: white;
}

.btn-copy {
    background: transparent;
    border: none;
    border-radius: var(--macos-radius-small);
    padding: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--macos-text-secondary);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.btn-copy:hover {
    background: var(--macos-gray-5);
    color: var(--macos-text-primary);
}

.btn-copy:active {
    background: var(--macos-gray-4);
}

.btn-help {
    background: transparent;
    border: none;
    border-radius: var(--macos-radius-small);
    padding: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--macos-text-secondary);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.btn-help:hover {
    background: var(--macos-gray-5);
    color: var(--macos-blue);
}

.btn-help:active {
    background: var(--macos-gray-4);
}

.btn-logout {
    padding: 4px 8px;
    border-radius: var(--macos-radius-small);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--macos-gray-4);
    background: var(--macos-bg-primary);
    color: var(--macos-text-secondary);
    align-self: flex-start;
    margin-top: 2px; /* Align with first line of text */
}

.btn-logout:hover {
    background: var(--macos-red);
    border-color: var(--macos-red);
    color: white;
}

/* ===== CONTEXTENBEHEER STYLING ===== */
.contexten-beheer {
    max-width: 800px;
}

.beheer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--macos-gray-5);
}

.beheer-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--macos-text-primary);
}

.primary-btn {
    background: var(--soft-blue);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: var(--macos-radius-button);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.primary-btn:hover {
    background: var(--soft-blue-hover);
    transform: translateY(-1px);
}

.contexten-lijst {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.context-item {
    background: var(--macos-bg-primary);
    border: 1px solid var(--macos-gray-5);
    border-radius: var(--macos-radius-medium);
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

.context-item:hover {
    background: var(--macos-gray-6);
    border-color: var(--macos-gray-4);
    transform: translateY(-1px);
    box-shadow: var(--macos-shadow-medium);
}

.context-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.context-naam {
    font-size: 15px;
    font-weight: 600;
    color: var(--macos-text-primary);
}

.context-info {
    font-size: 12px;
    color: var(--macos-text-secondary);
}

.context-acties {
    display: flex;
    gap: 8px;
}

.edit-btn, .delete-btn {
    background: transparent;
    border: none;
    padding: 6px;
    border-radius: var(--macos-radius-small);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--macos-text-secondary);
}

.edit-btn:hover {
    background: var(--macos-gray-5);
    color: var(--macos-blue);
    transform: scale(1.1);
}

.delete-btn:hover {
    background: var(--macos-gray-5);
    color: var(--macos-red);
    transform: scale(1.1);
}

.geen-items {
    text-align: center;
    color: var(--macos-text-secondary);
    font-style: italic;
    padding: 40px 20px;
    background: var(--macos-bg-secondary);
    border-radius: var(--macos-radius-medium);
    border: 1px solid var(--macos-gray-5);
}

/* ===== WEKELIJKSE OPTIMALISATIE STYLES ===== */
.wekelijkse-optimalisatie-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.optimalisatie-sectie {
    background: var(--macos-bg-secondary);
    border-radius: var(--macos-radius-large);
    margin-bottom: 20px;
    padding: 20px;
    box-shadow: var(--macos-shadow-light);
}

.sectie-titel {
    font-size: 18px;
    font-weight: 600;
    color: var(--macos-orange);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sectie-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.optimalisatie-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--macos-bg-primary);
    border-radius: var(--macos-radius-button);
    border: 1px solid var(--macos-gray-5);
    transition: all 0.2s ease;
}

.optimalisatie-item:hover {
    border-color: var(--macos-gray-4);
    box-shadow: var(--macos-shadow-light);
}

.optimalisatie-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
}

.optimalisatie-item label {
    flex: 1;
    font-size: 14px;
    color: var(--macos-text-primary);
    cursor: pointer;
}

.optimalisatie-item .actie-knop {
    padding: 6px 12px;
    background: var(--soft-blue);
    color: white;
    border: none;
    border-radius: var(--macos-radius-button);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.optimalisatie-item .actie-knop:hover {
    background: var(--soft-blue-hover);
}

.voortgang-sectie {
    margin-top: 30px;
    padding: 20px;
    background: var(--macos-bg-secondary);
    border-radius: var(--macos-radius-large);
    box-shadow: var(--macos-shadow-light);
}

.voortgang-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--macos-text-secondary);
}

#voortgang-percentage {
    font-weight: 600;
    color: var(--macos-blue);
    font-size: 16px;
}

.voortgang-balk {
    width: 100%;
    height: 20px;
    background: var(--macos-gray-5);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.voortgang-vulling {
    height: 100%;
    background: linear-gradient(90deg, var(--macos-blue) 0%, var(--macos-green) 100%);
    transition: width 0.3s ease;
    border-radius: 10px;
}

.mind-dump-buttons {
    display: flex;
    gap: 8px;
}

.optimalisatie-item .actie-knop.secondary {
    background: var(--macos-gray-4);
    color: var(--macos-text-primary);
}

.optimalisatie-item .actie-knop.secondary:hover {
    background: var(--macos-gray-3);
}

/* ===== MIND DUMP MODAL ===== */
.mind-dump-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mind-dump-container {
    background: var(--macos-bg-primary);
    border-radius: var(--macos-radius-large);
    padding: 40px;
    max-width: 800px;
    width: 90%;
    max-height: 90%;
    position: relative;
    box-shadow: var(--macos-shadow-heavy);
}

.mind-dump-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--macos-text-secondary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.mind-dump-close:hover {
    background: var(--macos-gray-5);
    color: var(--macos-text-primary);
}

.mind-dump-content {
    text-align: center;
    margin-bottom: 30px;
}

.mind-dump-word {
    font-size: 48px;
    font-weight: 700;
    color: var(--macos-blue);
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.mind-dump-input-section {
    margin-bottom: 30px;
}

.mind-dump-input {
    width: 100%;
    max-width: 500px;
    padding: 15px 20px;
    font-size: 18px;
    border: 2px solid var(--macos-gray-4);
    border-radius: var(--macos-radius-medium);
    margin-bottom: 15px;
    text-align: center;
}

.mind-dump-input:focus {
    outline: none;
    border-color: var(--macos-blue);
}

.mind-dump-add-btn {
    padding: 12px 24px;
    background: var(--macos-green);
    color: white;
    border: none;
    border-radius: var(--macos-radius-button);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.mind-dump-add-btn:hover {
    background: var(--macos-green-hover);
}

.mind-dump-next-btn {
    padding: 12px 30px;
    background: var(--macos-blue);
    color: white;
    border: none;
    border-radius: var(--macos-radius-button);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.mind-dump-next-btn:hover {
    background: var(--macos-blue-hover);
}

.mind-dump-progress {
    border-top: 1px solid var(--macos-gray-4);
    padding-top: 20px;
}

.progress-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 16px;
    color: var(--macos-text-secondary);
}

.progress-bar {
    width: 100%;
    height: 10px;
    background: var(--macos-gray-5);
    border-radius: 5px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--macos-blue);
    transition: width 0.3s ease;
    border-radius: 5px;
}

/* ===== MIND DUMP CONFIG MODAL ===== */
.mind-dump-config-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10001;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.mind-dump-config-container {
    background: var(--macos-bg-primary);
    border-radius: var(--macos-radius-large);
    padding: 30px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--macos-shadow-heavy);
}

.mind-dump-config-container h2 {
    margin-bottom: 10px;
    color: var(--macos-text-primary);
    text-align: center;
}

.mind-dump-config-container p {
    margin-bottom: 20px;
    color: var(--macos-text-secondary);
    text-align: center;
}

.config-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.config-btn {
    padding: 8px 16px;
    border: 1px solid var(--macos-gray-4);
    border-radius: var(--macos-radius-button);
    background: var(--macos-bg-secondary);
    color: var(--macos-text-primary);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.config-btn:hover {
    background: var(--macos-gray-5);
    border-color: var(--macos-gray-3);
}

.config-btn.primary {
    background: var(--macos-blue);
    color: white;
    border-color: var(--macos-blue);
}

.config-btn.primary:hover {
    background: var(--macos-blue-hover);
}

.words-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
    margin-bottom: 30px;
    max-height: 400px;
    overflow-y: auto;
    padding: 15px;
    border: 1px solid var(--macos-gray-5);
    border-radius: var(--macos-radius-medium);
    background: var(--macos-bg-secondary);
}

.word-checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--macos-radius-small);
    background: var(--macos-bg-primary);
    border: 1px solid var(--macos-gray-5);
    cursor: pointer;
    transition: all 0.2s ease;
}

.word-checkbox-item:hover {
    border-color: var(--macos-blue);
    box-shadow: var(--macos-shadow-light);
}

.word-label {
    font-size: 13px;
    color: var(--macos-text-primary);
    line-height: 1.2;
}

.add-word-section {
    border-top: 1px solid var(--macos-gray-4);
    padding-top: 20px;
}

.add-word-section h3 {
    margin-bottom: 10px;
    color: var(--macos-text-primary);
}

.add-word-form {
    display: flex;
    gap: 10px;
    align-items: center;
}

#new-word-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--macos-gray-4);
    border-radius: var(--macos-radius-button);
    font-size: 14px;
}

#new-word-input:focus {
    outline: none;
    border-color: var(--macos-blue);
}

/* ===== KEYBOARD SHORTCUTS FOOTER ===== */
.shortcuts-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(242, 242, 247, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--macos-gray-4);
    padding: 8px 16px;
    z-index: 1000;
    transition: opacity 0.3s ease, transform 0.3s ease;
    height: 40px; /* Exact height for padding calculations */
}

.shortcuts-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.shortcut-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--macos-text-secondary);
    font-weight: 500;
}

.shortcuts-footer kbd {
    background: var(--macos-bg-primary);
    border: 1px solid var(--macos-gray-3);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--macos-text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.shortcuts-footer.hidden {
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
}

/* ===== QUICK ADD MODAL ===== */
.quick-add-overlay {
    z-index: 2000;
}

.quick-add-content {
    max-width: 400px;
    min-width: 350px;
}

.quick-add-content h3 {
    margin-bottom: 16px;
    color: var(--macos-text-primary);
    font-size: 18px;
    font-weight: 600;
}

.quick-add-content .form-groep {
    margin-bottom: 20px;
}

.quick-add-content input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--macos-gray-4);
    border-radius: var(--macos-radius-medium);
    font-size: 14px;
    background: var(--macos-bg-primary);
    color: var(--macos-text-primary);
    transition: border-color 0.2s ease;
}

.quick-add-content input:focus {
    outline: none;
    border-color: var(--soft-blue);
    box-shadow: 0 0 0 3px rgba(139, 155, 240, 0.15);
}

.quick-add-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* ===== KEYBOARD HELP MODAL ===== */
.keyboard-help-content {
    max-width: 700px;
    min-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
}

.keyboard-help-content h3 {
    margin-bottom: 24px;
    color: var(--macos-text-primary);
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

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

.shortcuts-category h4 {
    margin-bottom: 12px;
    color: var(--macos-text-primary);
    font-size: 14px;
    font-weight: 600;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--macos-gray-4);
}

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

.shortcut-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.shortcut-keys {
    min-width: 70px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.shortcut-keys kbd {
    background: var(--macos-gray-6);
    border: 1px solid var(--macos-gray-3);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--macos-text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.shortcut-desc {
    font-size: 13px;
    color: var(--macos-text-secondary);
    flex: 1;
}

/* Mobile responsive voor shortcuts */
@media (max-width: 768px) {
    .shortcuts-footer {
        padding: 6px 12px;
    }
    
    .shortcuts-content {
        gap: 16px;
        flex-wrap: wrap;
    }
    
    .shortcut-item {
        font-size: 11px;
    }
    
    .shortcuts-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .keyboard-help-content {
        min-width: auto;
        max-width: 90vw;
    }
    
    .quick-add-content {
        min-width: auto;
        max-width: 90vw;
    }
}

/* ===== EMAIL IMPORT HELP MODAL ===== */
.email-help-content {
    max-width: 900px;
    min-width: 700px;
    max-height: 85vh;
    overflow-y: auto;
}

.email-help-content h3 {
    margin-bottom: 24px;
    color: var(--macos-text-primary);
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

.markdown-content {
    font-size: 14px;
    line-height: 1.6;
    color: var(--macos-text-primary);
    max-height: 60vh;
    overflow-y: auto;
    padding: 0 8px;
    margin-bottom: 24px;
}

.markdown-content h1,
.markdown-content h2 {
    color: var(--macos-text-primary);
    font-weight: 600;
    margin-top: 32px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--macos-gray-4);
}

.markdown-content h1 {
    font-size: 24px;
}

.markdown-content h2 {
    font-size: 20px;
}

.markdown-content h3 {
    color: var(--macos-text-primary);
    font-weight: 600;
    font-size: 16px;
    margin-top: 24px;
    margin-bottom: 12px;
}

.markdown-content p {
    margin-bottom: 12px;
}

.markdown-content ul,
.markdown-content ol {
    margin-left: 24px;
    margin-bottom: 12px;
}

.markdown-content li {
    margin-bottom: 6px;
}

.markdown-content code {
    background: var(--macos-gray-6);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 13px;
    color: var(--macos-text-primary);
}

.markdown-content pre {
    background: var(--macos-gray-6);
    padding: 12px;
    border-radius: var(--macos-radius-medium);
    overflow-x: auto;
    margin-bottom: 12px;
}

.markdown-content pre code {
    background: transparent;
    padding: 0;
}

.markdown-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.markdown-content table th,
.markdown-content table td {
    border: 1px solid var(--macos-gray-4);
    padding: 8px;
    text-align: left;
}

.markdown-content table th {
    background: var(--macos-gray-6);
    font-weight: 600;
}

.markdown-content strong {
    font-weight: 600;
    color: var(--macos-text-primary);
}

.markdown-content a {
    color: var(--macos-blue);
    text-decoration: none;
}

.markdown-content a:hover {
    text-decoration: underline;
}

.markdown-content blockquote {
    border-left: 3px solid var(--macos-gray-4);
    padding-left: 16px;
    margin-left: 0;
    margin-bottom: 12px;
    color: var(--macos-text-secondary);
}

@media (max-width: 768px) {
    .email-help-content {
        min-width: auto;
        max-width: 95vw;
    }

    .markdown-content {
        font-size: 13px;
    }
}

/* Clear Planning Modal Styles */
.clear-planning-popup {
    max-width: 400px;
    width: 90%;
}

.clear-planning-popup h2 {
    color: var(--macos-text-primary);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.clear-planning-popup p {
    color: var(--macos-text-secondary);
    margin-bottom: 20px;
    font-size: 14px;
}

.clear-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--macos-gray-6);
    border-radius: var(--macos-radius-medium);
}

.checkbox-option {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--macos-text-primary);
}

.checkbox-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.checkbox-option span {
    user-select: none;
}

.clear-planning-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.btn-cancel {
    padding: 10px 20px;
    background: var(--macos-gray-5);
    color: var(--macos-text-primary);
    border: none;
    border-radius: var(--macos-radius-button);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover {
    background: var(--macos-gray-4);
}

.btn-danger {
    padding: 10px 20px;
    background: var(--macos-red);
    color: white;
    border: none;
    border-radius: var(--macos-radius-button);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-danger:hover {
    background: #D70015;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3);
}

.btn-danger:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(255, 59, 48, 0.2);
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1400px) {
    .kalender-header {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    
    .header-actions {
        gap: 10px;
    }
    
    .header-actions .btn {
        padding: 8px 16px;
        font-size: 14px;
        min-width: 80px;
        flex-shrink: 0;
    }
    
    .totaal-tijd {
        flex-shrink: 0;
        min-width: 140px;
        font-size: 13px;
    }
}

/* Responsive adjustments for tablet/smaller laptops */
@media (max-width: 1000px) {
    .kalender-header {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .kalender-header h2 {
        font-size: 18px;
        text-align: center;
        margin-bottom: 5px;
    }
    
    .header-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    
    .header-actions .btn {
        padding: 6px 12px;
        font-size: 13px;
        min-width: 70px;
    }
    
    .totaal-tijd {
        flex: 1;
        min-width: 120px;
        font-size: 12px;
        text-align: center;
    }
}

/* Responsive adjustments for clear planning button */
@media (max-width: 768px) {
    .kalender-header {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .kalender-header h2 {
        font-size: 18px;
        text-align: center;
    }
    
    .header-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .totaal-tijd {
        text-align: center;
        min-width: auto;
        padding: 10px 20px;
    }
    
    .btn-clear-planning {
        width: 100%;
        justify-content: center;
    }
}

/* ===== FONT AWESOME ICONS STYLING ===== */

/* General icon styling */
.fas, .far, .fab {
    font-size: 16px;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

/* Sidebar navigation icons */
.lijst-icon .fas {
    font-size: 18px;
    color: var(--macos-text-secondary);
}

.lijst-item.actief .lijst-icon .fas {
    color: var(--macos-blue);
}

/* Feature icons */
.feature-icon .fas {
    font-size: 20px;
    color: var(--macos-blue);
}

/* Menu button icons */
.acties-btn .fas {
    font-size: 14px;
    color: inherit;
}

/* User interface icons */
.user-avatar .fas {
    font-size: 20px;
    color: var(--macos-text-secondary);
}

.btn-copy .fas {
    font-size: 14px;
    color: inherit;
}

/* Dropdown arrow icons */
.dropdown-arrow .fas {
    font-size: 12px;
    color: var(--macos-text-secondary);
    transition: transform 0.2s ease;
}

.dropdown-header.expanded .dropdown-arrow .fas {
    transform: rotate(90deg);
}

/* Toast notification icons */
.toast .fas {
    font-size: 16px;
    margin-right: 8px;
}

/* Keyboard help icons */
.keyboard-help .fas {
    color: var(--macos-blue);
    margin-right: 4px;
}

/* Calendar and planning icons */
.kalender-content .fas {
    font-size: 14px;
}

/* Responsive icon sizes */
@media (max-width: 768px) {
    .lijst-icon .fas {
        font-size: 16px;
    }
    
    .feature-icon .fas {
        font-size: 18px;
    }
}

/* Bulk Controls Container */
.bulk-controls-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 8px 12px;
    background: var(--macos-gray-6);
    border-radius: var(--macos-radius-medium);
    border: 1px solid var(--macos-gray-5);
    position: relative;
}

/* Bulk Mode Styles */
.bulk-mode-toggle {
    background: var(--macos-blue);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bulk-mode-toggle:hover {
    background: #005ec1;
}

.bulk-mode-toggle.active {
    background: #dc3545;
}

.bulk-mode-toggle.active:hover {
    background: #c82333;
}

/* Feature 069: Select All checkbox in bulk mode */
.bulk-select-all-checkbox {
    width: 20px;
    height: 20px;
    accent-color: #007aff;
    cursor: pointer;
    position: absolute;
    left: 50px;
    vertical-align: middle;
}

.bulk-select-all-checkbox:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Bulk mode container styling */
.main-content.bulk-modus {
    background-color: #f0f4ff;
    transition: background-color 0.3s ease;
}

/* Add margin for bulk toolbar when bulk mode is active */
.bulk-modus .taken-container,
.bulk-modus #acties-lijst,
.bulk-modus .acties-lijst {
    margin-bottom: 100px; /* Space for bulk toolbar */
    transition: margin-bottom 0.3s ease;
}

/* Bulk selection circles */
.selectie-circle {
    width: 20px;
    height: 20px;
    border: 2px solid #007aff;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-block;
    position: relative;
}

.selectie-circle:hover {
    background-color: rgba(0, 122, 255, 0.1);
}

.selectie-circle.geselecteerd {
    background-color: #007aff;
}

.selectie-circle.geselecteerd::after {
    content: '✓';
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: bold;
}

/* Bulk selected task styling */
.taak-item.bulk-selected {
    background-color: rgba(0, 122, 255, 0.1);
    border-left: 3px solid #007aff;
}

/* Bulk toolbar */
.bulk-toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid #e5e5e7;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding-top: 24px;
    padding-bottom: 48px;
    padding-left: 24px;
    padding-right: 24px;
}

.bulk-toolbar-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
}

.bulk-selection-info {
    font-weight: 500;
    color: #333;
}

.bulk-actions {
    display: flex;
    gap: 8px;
    flex: 1;
}

.bulk-action-btn {
    background: white;
    border: 1px solid #d1d5db;
    color: #374151;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bulk-action-btn:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.bulk-cancel-btn {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    color: #6b7280;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bulk-cancel-btn:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}

/* Bulk uitgesteld dropdown */
.bulk-uitgesteld-dropdown {
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    max-width: 200px;
    padding: 8px 0;
    backdrop-filter: blur(10px);
}

.bulk-uitgesteld-dropdown .dropdown-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 14px;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
}

.bulk-uitgesteld-dropdown .dropdown-item:last-child {
    border-bottom: none;
}

.bulk-uitgesteld-dropdown .dropdown-item:hover {
    background-color: #f9fafb;
}

/* Overdue task indicator adjustments for bulk mode */
.bulk-modus .taak-item.overdue {
    background-color: rgba(255, 59, 48, 0.05);
}

.bulk-modus .taak-item.overdue.bulk-selected {
    background-color: rgba(0, 122, 255, 0.1);
    border-left: 3px solid #007aff;
}
}
/* Test button styling */
.test-button {
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--macos-orange) 0%, #ff6b35 100%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--macos-radius-medium);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(255, 149, 0, 0.3);
    margin-left: 8px;
}

.test-button:hover {
    background: linear-gradient(135deg, #ff6b35 0%, var(--macos-orange) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(255, 149, 0, 0.4);
}

/* Uitgesteld Accordion Styling - Apple Native Style */
.uitgesteld-accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: var(--macos-bg-primary);
}

.uitgesteld-sectie {
    background: var(--macos-bg-primary);
    border: none;
    box-shadow: none;
    overflow: hidden;
    border-bottom: 1px solid var(--macos-gray-5);
}

.uitgesteld-sectie:last-child {
    border-bottom: none;
}

.uitgesteld-sectie .sectie-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    cursor: pointer;
    background: var(--macos-bg-primary);
    border: none;
    transition: background-color 0.15s ease;
    margin-bottom: 0;
    text-transform: none !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--macos-text-primary) !important;
    letter-spacing: normal !important;
    min-height: 44px;
}

.uitgesteld-sectie .sectie-header:hover {
    background: var(--macos-gray-6);
}

.sectie-titel {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    color: var(--macos-text-primary) !important;
}

.sectie-titel span {
    color: var(--macos-text-primary) !important;
}

.uitgesteld-sectie .sectie-titel,
.uitgesteld-sectie .sectie-titel span,
.uitgesteld-accordion .sectie-titel,
.uitgesteld-accordion .sectie-titel span {
    color: var(--macos-text-primary) !important;
}

.sectie-titel i {
    color: var(--macos-text-secondary);
    width: 16px;
    text-align: center;
    font-size: 12px;
}

.taken-count {
    color: var(--macos-text-secondary);
    font-weight: 400;
    font-size: 12px;
    margin-left: 4px;
}

.sectie-chevron {
    transition: transform 0.15s ease;
}

.sectie-chevron i {
    color: var(--macos-text-secondary);
    font-size: 10px;
}

.uitgesteld-sectie .sectie-content {
    padding: 0;
    border-top: none;
    background: var(--macos-bg-primary);
    max-height: 400px;
    overflow-y: auto;
    position: relative; /* Voor absolute positioned scroll indicators */
    
}

/* Scroll indicators now handled via JavaScript with position:fixed */

.uitgesteld-sectie .sectie-content[style*="block"] {
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 400px;
    }
}

/* Native macOS List Styling */
.uitgesteld-lijst-container {
    padding: 0;
    background: var(--macos-bg-primary);
    /* Removed overflow and max-height - parent handles scrolling */
}

.uitgesteld-taken-lijst {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.uitgesteld-taak-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
    background: var(--macos-bg-primary);
    border: none;
    border-bottom: 1px solid var(--macos-gray-5);
    transition: background-color 0.15s ease;
    min-height: 32px;
}

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

.uitgesteld-taak-item:hover {
    background: var(--macos-gray-6);
}

.taak-content {
    flex: 1;
    min-width: 0;
}

.taak-tekst {
    font-size: 13px;
    color: var(--macos-text-primary);
    line-height: 1.3;
    cursor: pointer;
    word-wrap: break-word;
    font-weight: 400;
}

.taak-acties {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    opacity: 1;
}

.verplaats-btn-small {
    padding: 4px 6px;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: background-color 0.15s ease;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--macos-text-secondary);
}

.verplaats-btn-small:hover {
    background: var(--macos-gray-4);
    color: var(--macos-text-primary);
}

.delete-btn-small {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--macos-red);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: white;
    transition: all 0.15s ease;
    padding: 0;
}

.delete-btn-small:hover {
    background: #d70015;
    transform: scale(1.1);
}

/* Drag & Drop Visual Feedback */
.uitgesteld-taak-item[draggable="true"] {
    cursor: grab;
}

.uitgesteld-taak-item[draggable="true"]:active {
    cursor: grabbing;
}

.drop-target-header {
    background: var(--macos-blue) !important;
    color: white !important;
    transition: all 0.15s ease;
}

.drop-target-header .sectie-titel,
.drop-target-header .sectie-titel span {
    color: white !important;
}

.drop-target-header .sectie-titel i {
    color: rgba(255, 255, 255, 0.8) !important;
}

.drop-target-content {
    background: rgba(0, 122, 255, 0.1) !important;
    border: 2px dashed var(--macos-blue) !important;
    transition: all 0.15s ease;
}

.loading-placeholder,
.loading-state,
.empty-state {
    padding: 40px 0;
    text-align: center;
    color: var(--macos-text-secondary);
    font-style: italic;
}

.loading-state {
    color: var(--macos-blue);
}

.empty-state {
    color: var(--macos-text-tertiary);
}

/* Inbox Empty State Styling */
.inbox-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    min-height: 300px;
}

.inbox-empty-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    animation: gentle-pulse 2s ease-in-out infinite;
}

.inbox-empty-title {
    color: var(--macos-text-primary);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 12px 0;
    letter-spacing: -0.02em;
}

.inbox-empty-subtitle {
    color: var(--macos-text-secondary);
    font-size: 1rem;
    margin: 0;
    opacity: 0.8;
}

/* Inbox Celebration Animation */
.inbox-celebration-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(2px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: none;
}

.inbox-celebration-container.celebration-active {
    opacity: 1;
    transform: scale(1);
}

.inbox-celebration-container.celebration-exit {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.5s ease-out;
}

.inbox-celebration {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 40px 50px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 400px;
    transform: translateY(20px);
    transition: transform 0.3s ease-out;
}

.inbox-celebration-container.celebration-active .inbox-celebration {
    transform: translateY(0);
}

.celebration-animation {
    font-size: 5rem;
    margin-bottom: 20px;
    animation: celebration-bounce 0.6s ease-out, celebration-rotate 2s ease-in-out 0.6s;
}

.celebration-text h2 {
    color: var(--macos-text-primary);
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 12px 0;
    letter-spacing: -0.02em;
}

.celebration-text p {
    color: var(--macos-text-secondary);
    font-size: 1.1rem;
    margin: 0;
    opacity: 0.9;
}

/* Celebration Keyframes */
@keyframes gentle-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

@keyframes celebration-bounce {
    0% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-20px) scale(1.2);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes celebration-rotate {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(-10deg) scale(1.1);
    }
    75% {
        transform: rotate(10deg) scale(1.1);
    }
}

/* Mobile Responsive Celebration */
@media (max-width: 768px) {
    .inbox-celebration {
        padding: 30px 35px;
        margin: 20px;
    }
    
    .celebration-animation {
        font-size: 4rem;
    }
    
    .celebration-text h2 {
        font-size: 1.5rem;
    }
    
    .celebration-text p {
        font-size: 1rem;
    }
}

/* Preview Modal */
.preview-modal {
    z-index: 2000; /* Above other modals */
}

.preview-modal-content {
    background: var(--macos-bg-primary);
    border-radius: var(--macos-radius-large);
    width: 95vw;
    height: 90vh;
    max-width: 1200px;
    max-height: 800px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--macos-shadow-heavy);
    border: 1px solid var(--macos-gray-5);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--macos-gray-5);
    flex-shrink: 0;
}

.preview-filename {
    font-weight: 600;
    font-size: 16px;
    color: var(--macos-text-primary);
    truncate: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: calc(100% - 60px);
}

.preview-close {
    background: none;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--macos-text-secondary);
    transition: all 0.2s ease;
}

.preview-close:hover {
    background: var(--macos-gray-5);
    color: var(--macos-text-primary);
}

.preview-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.preview-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: auto;
}

.preview-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--macos-radius-medium);
    box-shadow: var(--macos-shadow-light);
}

.preview-container iframe,
.preview-container embed {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--macos-radius-medium);
}

.preview-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-top: 1px solid var(--macos-gray-5);
    gap: 16px;
    flex-shrink: 0;
}

.preview-nav-btn {
    background: var(--macos-gray-6);
    border: 1px solid var(--macos-gray-5);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--macos-text-primary);
    transition: all 0.2s ease;
}

.preview-nav-btn:hover:not(:disabled) {
    background: var(--macos-blue);
    color: white;
    border-color: var(--macos-blue);
}

.preview-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.preview-counter {
    color: var(--macos-text-secondary);
    font-size: 14px;
    font-weight: 500;
    min-width: 60px;
    text-align: center;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
    .preview-modal-content {
        width: 98vw;
        height: 95vh;
        max-width: none;
        max-height: none;
    }
    
    .preview-header {
        padding: 12px 16px;
    }
    
    .preview-filename {
        font-size: 14px;
    }
    
    .preview-container {
        padding: 16px;
    }
    
    .preview-navigation {
        padding: 12px;
    }
}

/* Click to preview styling for supported file types */
.bijlage-item.preview-supported {
    cursor: pointer;
}

.bijlage-item.preview-supported:hover {
    background: rgba(var(--macos-blue-rgb), 0.05);
}

.bijlage-item.preview-supported:hover .bijlage-icon {
    color: var(--macos-blue);
}

/* Floating Drop Panel */
.floating-drop-panel {
    position: fixed;
    top: -300px; /* Hidden by default */
    right: 30px;
    width: 280px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), 
                0 0 1px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.floating-drop-panel.active {
    top: 30px;
}

.drop-panel-content {
    padding: 20px;
}

.drop-panel-header {
    text-align: center;
    margin-bottom: 20px;
    color: var(--macos-text-secondary);
    font-size: 14px;
    font-weight: 500;
}

.drop-zones {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.drop-zone-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--macos-bg-secondary);
    border: 2px dashed var(--macos-gray-3);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    pointer-events: auto; /* Zorg dat drop zones interactief blijven */
}

.drop-zone-item:hover {
    background: var(--macos-bg-primary);
    border-color: var(--macos-gray-2);
    transform: translateY(-1px);
}

.drop-zone-item.drag-over {
    background: rgba(0, 122, 255, 0.1);
    border-color: var(--macos-blue);
    border-style: solid;
    transform: scale(1.02);
}

.drop-zone-item i {
    font-size: 20px;
    color: var(--macos-gray-1);
    transition: color 0.2s ease;
}

.drop-zone-item.drag-over i {
    color: var(--macos-blue);
}

.drop-zone-item span {
    font-size: 16px;
    font-weight: 500;
    color: var(--macos-text-primary);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .floating-drop-panel {
        right: 20px;
        left: 20px;
        width: auto;
    }
    
    .drop-zones {
        flex-direction: row;
        gap: 8px;
    }
    
    .drop-zone-item {
        flex: 1;
        padding: 12px 16px;
        justify-content: center;
    }
    
    .drop-zone-item span {
        font-size: 14px;
    }
}

/* ===== ACTIES DRAG & DROP OVERLAY ===== */
.acties-drag-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10001; /* HOGERE Z-INDEX dan floating panel */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    /* POINTER-EVENTS NONE WEGGEHAALD - was de root cause van onzichtbaarheid! */
}

.acties-drag-overlay.active {
    opacity: 1;
    pointer-events: auto; /* Expliciet auto bij active state voor zekerheid */
}

.acties-drop-panel {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
                0 0 2px rgba(0, 0, 0, 0.1);
    max-width: 700px;
    min-width: 550px;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9) translateY(20px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: auto; /* Drop panel zelf blijft interactief */
}

.acties-drag-overlay.active .acties-drop-panel {
    transform: scale(1) translateY(0);
}

.acties-drop-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.drop-section {
    background: var(--macos-bg-secondary);
    border-radius: 12px;
    padding: 15px;
    border: 1px solid var(--macos-gray-5);
}

.drop-section h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--macos-text-primary);
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.drop-zones-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.drop-zones-row.week-days {
    justify-content: space-between;
}

/* Week day drop zones styling */
.week-day-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    background: var(--macos-bg-primary);
    border: 2px dashed var(--macos-gray-4);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 55px;
    text-align: center;
    pointer-events: auto; /* Week dag zones blijven klikbaar voor drops */
}

.week-day-zone:hover {
    background: rgba(0, 122, 255, 0.05);
    border-color: var(--macos-blue);
    transform: translateY(-1px);
}

.week-day-zone.drag-over {
    background: rgba(0, 122, 255, 0.1);
    border-color: var(--macos-blue);
    border-style: solid;
    transform: scale(1.05) translateY(-2px);
}

.week-day-zone .day-abbr {
    font-size: 11px;
    font-weight: 500;
    color: var(--macos-text-secondary);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.week-day-zone .day-number {
    font-size: 20px;
    font-weight: 600;
    color: var(--macos-text-primary);
    line-height: 1;
}

.week-day-zone.drag-over .day-abbr,
.week-day-zone.drag-over .day-number {
    color: var(--macos-blue);
}

/* Current day styling */
.week-day-zone.current-day {
    background: rgba(0, 122, 255, 0.08);
    border-color: rgba(0, 122, 255, 0.4);
    border-style: solid;
}

.week-day-zone.current-day .day-name {
    color: var(--macos-blue);
    font-weight: 700;
}

.week-day-zone.current-day .day-date {
    color: var(--macos-blue);
    font-weight: 600;
}

/* Uitgesteld section styling */
.uitgesteld-section .drop-zones-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}

/* Responsive design */
@media (max-width: 900px) {
    .acties-drop-panel {
        min-width: 90vw;
        max-width: 90vw;
        margin: 15px;
        padding: 15px;
    }
    
    .acties-drop-grid {
        gap: 12px;
    }
    
    .drop-section {
        padding: 12px;
    }
    
    .week-day-zone {
        min-width: 50px;
        padding: 8px;
    }
    
    .week-day-zone .day-number {
        font-size: 18px;
    }
    
    .uitgesteld-section .drop-zones-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .acties-drop-panel {
        min-width: 95vw;
        max-width: 95vw;
        margin: 10px;
        padding: 15px;
    }
    
    .drop-zones-row.week-days {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
    
    .week-day-zone {
        min-width: auto;
        padding: 8px 4px;
    }
    
    .week-day-zone .day-number {
        font-size: 16px;
    }
    
    .week-day-zone .day-abbr {
        font-size: 10px;
    }
}

/* ===== DAGKALENDER FOCUS MODUS ===== */

/* Fullscreen dagkalender styling */
.dag-kalender-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999;
    width: 100vw !important;
    height: 100vh !important;
    padding: 30px;
    margin: 0 !important;
    background: var(--macos-bg-primary) !important;
    background-color: #FFFFFF !important; /* Fallback for better coverage */
    box-shadow: none;
    border-radius: 0;
    flex-shrink: unset !important;
    /* Ensure complete coverage */
    min-width: 100vw !important;
    min-height: 100vh !important;
}

/* Header styling in fullscreen */
.dag-kalender-fullscreen .kalender-header {
    position: relative;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--macos-gray-5);
}

.dag-kalender-fullscreen .kalender-header h2 {
    font-size: 24px;
    font-weight: 700;
}

/* Grid takes full available height in fullscreen */
.dag-kalender-fullscreen .kalender-grid {
    height: calc(100vh - 150px) !important; /* Full height minus header and padding */
    overflow-y: auto;
    max-height: none !important;
}

/* Ensure hour blocks maintain their normal layout in focus mode */
.dag-kalender-fullscreen .kalender-uur {
    position: relative !important;
    display: flex !important;
    min-height: 80px !important;
    height: auto !important;
    max-height: none !important;
    flex-shrink: 0 !important;
}

.dag-kalender-fullscreen .uur-content {
    position: relative !important;
    flex: 1 !important;
    min-height: 60px !important;
    height: auto !important;
    max-height: none !important;
    flex-shrink: 0 !important;
}

.dag-kalender-fullscreen .uur-planning {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
}

/* Focus mode toggle button styling */
.btn-focus-mode {
    background: var(--macos-blue);
    color: white;
    border: none;
    border-radius: var(--macos-radius-small);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-focus-mode:hover {
    background: var(--macos-blue-dark);
    transform: translateY(-1px);
}

.btn-focus-mode:active {
    transform: translateY(0);
}

/* Exit focus mode button styling */
.btn-exit-focus {
    background: var(--macos-gray-3);
    color: var(--macos-text-primary);
    border: 1px solid var(--macos-gray-4);
}

.btn-exit-focus:hover {
    background: var(--macos-gray-4);
}

/* Hide body scroll when in focus mode */
body.dagkalender-focus-active {
    overflow: hidden !important;
}

/* Responsive adjustments for focus mode */
@media (max-width: 768px) {
    .dag-kalender-fullscreen {
        padding: 15px;
    }
    
    .dag-kalender-fullscreen .kalender-header h2 {
        font-size: 20px;
    }
    
    .dag-kalender-fullscreen .kalender-grid {
        height: calc(100vh - 120px) !important;
    }
    
    /* Ensure mobile focus mode also maintains layout */
    .dag-kalender-fullscreen .kalender-uur {
        position: relative !important;
        display: flex !important;
        min-height: 80px !important;
        height: auto !important;
        max-height: none !important;
        flex-shrink: 0 !important;
    }
    
    .dag-kalender-fullscreen .uur-content {
        position: relative !important;
        flex: 1 !important;
        min-height: 60px !important;
        height: auto !important;
        max-height: none !important;
        flex-shrink: 0 !important;
    }
    
    .dag-kalender-fullscreen .uur-planning {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        max-height: none !important;
    }
}

/* Bijlagen (Attachments) Styling */
.bijlagen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.storage-usage {
    font-size: 12px;
    color: var(--macos-gray-1);
    padding: 4px 8px;
    background: var(--macos-gray-6);
    border-radius: 8px;
    border: 1px solid var(--macos-gray-4);
}

.bijlagen-upload {
    margin-bottom: 15px;
}

.upload-dropzone {
    border: 2px dashed var(--macos-gray-3);
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    background: var(--macos-bg-secondary);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.upload-dropzone:hover {
    border-color: var(--macos-blue);
    background: rgba(0, 122, 255, 0.05);
}

.upload-dropzone.dragover {
    border-color: var(--macos-blue);
    background: rgba(0, 122, 255, 0.1);
    transform: scale(1.02);
}

.upload-dropzone i {
    font-size: 24px;
    color: var(--macos-gray-1);
    margin-bottom: 8px;
    display: block;
}

.upload-dropzone p {
    margin: 0 0 5px 0;
    color: var(--macos-text-primary);
    font-weight: 500;
}

.upload-link {
    color: var(--macos-blue);
    text-decoration: underline;
    cursor: pointer;
}

.upload-link:hover {
    color: var(--macos-blue-hover);
}

.upload-limits {
    color: var(--macos-gray-1);
    font-size: 12px;
    margin: 0;
}

.bijlagen-lijst {
    margin-top: 15px;
}

.bijlage-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: var(--macos-bg-primary);
    border: 1px solid var(--macos-gray-4);
    border-radius: 8px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.bijlage-item:hover {
    background: var(--macos-gray-6);
    border-color: var(--macos-gray-3);
}

.bijlage-icon {
    font-size: 20px;
    margin-right: 12px;
    color: var(--macos-blue);
    flex-shrink: 0;
}

.bijlage-info {
    flex: 1;
    min-width: 0;
}

.bijlage-naam {
    font-weight: 500;
    color: var(--macos-text-primary);
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bijlage-details {
    font-size: 12px;
    color: var(--macos-gray-1);
    margin: 0;
}

.bijlage-acties {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.bijlage-btn {
    background: none;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.bijlage-btn.download {
    color: var(--macos-blue);
    background: rgba(0, 122, 255, 0.1);
}

.bijlage-btn.download:hover {
    background: rgba(0, 122, 255, 0.2);
}

.bijlage-btn.delete {
    color: var(--macos-red);
    background: rgba(255, 59, 48, 0.1);
}

.bijlage-btn.delete:hover {
    background: rgba(255, 59, 48, 0.2);
}

.upload-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.progress-bar {
    width: 200px;
    height: 4px;
    background: var(--macos-gray-5);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--macos-blue);
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 0%;
}

.progress-text {
    font-size: 14px;
    color: var(--macos-text-primary);
    font-weight: 500;
}

/* Premium Upgrade Prompt */
.upgrade-prompt {
    margin-top: 15px;
    padding: 15px;
    background: linear-gradient(135deg, rgba(175, 82, 222, 0.1), rgba(255, 149, 0, 0.1));
    border: 1px solid rgba(175, 82, 222, 0.2);
    border-radius: 12px;
}

.upgrade-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.upgrade-content i {
    font-size: 24px;
    color: var(--macos-purple);
    flex-shrink: 0;
}

.upgrade-text {
    flex: 1;
}

.upgrade-text strong {
    display: block;
    color: var(--macos-text-primary);
    font-size: 14px;
    margin-bottom: 2px;
}

.upgrade-text p {
    margin: 0;
    font-size: 12px;
    color: var(--macos-gray-1);
}

.upgrade-btn {
    background: linear-gradient(135deg, var(--macos-purple), var(--macos-orange));
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.upgrade-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(175, 82, 222, 0.3);
}

/* File type icons */
.bijlage-icon.pdf { color: #E53E3E; }
.bijlage-icon.doc, .bijlage-icon.docx { color: #2B6CB0; }
.bijlage-icon.xls, .bijlage-icon.xlsx { color: #38A169; }
.bijlage-icon.ppt, .bijlage-icon.pptx { color: #D69E2E; }
.bijlage-icon.jpg, .bijlage-icon.jpeg, .bijlage-icon.png, .bijlage-icon.gif { color: #8B5CF6; }
.bijlage-icon.zip, .bijlage-icon.rar { color: #F56565; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .bijlage-item {
        padding: 10px 12px;
    }
    
    .bijlage-acties {
        flex-direction: column;
        gap: 4px;
    }
    
    .bijlage-btn {
        font-size: 11px;
        padding: 4px 8px;
    }
    
    .upload-dropzone {
        padding: 20px 15px;
    }
    
    .upgrade-content {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}

/* =================================================================== */
/* PRIORITEIT INDICATOREN                                             */
/* =================================================================== */

.prioriteit-indicator {
    font-size: 12px;
    margin-right: 8px;
    display: inline-block;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.prioriteit-hoog {
    color: #FF4444 !important;
    text-shadow: 0 0 4px rgba(255, 68, 68, 0.4);
}

.prioriteit-gemiddeld {
    color: #FF9500 !important;
    text-shadow: 0 0 2px rgba(255, 149, 0, 0.3);
}

.prioriteit-laag {
    color: #8E8E93 !important;
}

/* Prioriteit in tabel rijen */
.actie-row .prioriteit-indicator {
    margin-left: 4px;
    margin-right: 6px;
    vertical-align: middle;
}

/* Prioriteit in lijst items */
.taak-item .prioriteit-indicator {
    margin-right: 6px;
    align-self: center;
}

/* Prioriteit tooltips */
.prioriteit-indicator[title]:hover::after {
    content: attr(title);
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 11px;
    padding: 4px 6px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
}

/* Prioriteit dropdown in planning popup */
.prioriteit-selectie {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}

.prioriteit-selectie label {
    font-size: 12px;
    font-weight: 600;
    color: var(--macos-text-secondary);
    min-width: 65px;
}

.prioriteit-dropdown {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--macos-gray-4);
    border-radius: var(--macos-radius-small);
    background: var(--macos-bg-primary);
    font-size: 12px;
    color: var(--macos-text-primary);
}

.prioriteit-dropdown option {
    padding: 4px 8px;
}

/* Prioriteit filter in toolbar */
.prioriteit-filter {
    display: flex;
    align-items: center;
    gap: 6px;
}

.prioriteit-filter label {
    font-size: 11px;
    color: var(--macos-text-secondary);
    font-weight: 500;
}

.prioriteit-filter select {
    padding: 4px 6px;
    border: 1px solid var(--macos-gray-4);
    border-radius: var(--macos-radius-small);
    background: var(--macos-bg-primary);
    font-size: 11px;
    min-width: 80px;
}

/* Planning kalender prioriteit badges */
.planning-item-prioriteit {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
}

.planning-item-prioriteit .prioriteit-indicator {
    width: 10px;
    height: 10px;
    margin-right: 4px;
}

/* Responsive aanpassingen voor prioriteit */
@media (max-width: 768px) {
    .prioriteit-indicator {
        width: 10px;
        height: 10px;
        margin-right: 6px;
    }
    
    .prioriteit-selectie {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }
    
    .prioriteit-selectie label {
        min-width: auto;
        font-size: 11px;
    }
}

/* ===== SIMPLE DRAG & DROP ===== */

/* Draggable taak items - zoals uitgesteld systeem */
.taak-item[draggable="true"] {
    cursor: grab;
}

.taak-item[draggable="true"]:active {
    cursor: grabbing;
}

/* ===== ACTIES FLOATING PANEL ===== */

/* Acties floating panel styling */
.acties-floating-panel {
    position: fixed;
    top: -400px; /* Hidden above screen - exact zoals werkend uitgesteld systeem */
    left: 50%;
    transform: translateX(-50%); /* Alleen horizontal centering */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    padding: 25px;
    z-index: 10000;
    min-width: 550px;
    max-width: 600px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    opacity: 0; /* Verborgen */
    transition: opacity 0.3s ease; /* Fade animatie */
}

.acties-floating-panel.active {
    opacity: 1; /* Zichtbaar */
    max-height: calc(100vh - 50px);
}

.acties-floating-panel .drop-panel-content h4 {
    margin: 0 0 15px 0;
    color: var(--text-color);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

.acties-floating-panel .week-section {
    margin-bottom: 20px;
}

/* Derde week sectie (Ctrl-toets activated) */
#actiesDerdeWeekSection {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-bottom: 0;
    transition: max-height 0.2s ease-out, opacity 0.2s ease-out, margin-bottom 0.2s ease-out;
}

#actiesDerdeWeekSection.visible {
    max-height: 100px;
    opacity: 1;
    margin-bottom: 20px;
}

.acties-floating-panel .week-section h5 {
    margin: 0 0 10px 0;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.acties-floating-panel .week-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}

.acties-floating-panel .week-day-zone {
    padding: 10px 6px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #f8f9fa;
    color: var(--text-color);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
    min-height: 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.acties-floating-panel .week-day-zone:hover,
.acties-floating-panel .week-day-zone.drag-over {
    border-color: var(--macos-blue);
    background: rgba(0, 122, 255, 0.1);
    transform: translateY(-1px);
}

.acties-floating-panel .week-day-zone.current-day {
    border-color: var(--macos-blue);
    background: rgba(0, 122, 255, 0.08);
    border-width: 2px;
}

.acties-floating-panel .week-day-zone.current-day .day-name {
    color: var(--macos-blue);
    font-weight: 700;
}

.acties-floating-panel .week-day-zone.current-day .day-date {
    color: var(--macos-blue);
    font-weight: 600;
}

.acties-floating-panel .week-day-zone .day-name {
    font-weight: 600;
    margin-bottom: 2px;
}

.acties-floating-panel .week-day-zone .day-date {
    font-size: 10px;
    opacity: 0.7;
}

.acties-floating-panel .lists-section {
    border-top: 1px solid #e0e0e0;
    padding-top: 15px;
}

.acties-floating-panel .lists-section h5 {
    margin: 0 0 10px 0;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.acties-floating-panel .drop-zone {
    padding: 10px 14px;
    margin: 6px 0;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: #f8f9fa;
    color: var(--text-color);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
}

.acties-floating-panel .drop-zone:hover,
.acties-floating-panel .drop-zone.drag-over {
    border-color: var(--macos-blue);
    background: rgba(0, 122, 255, 0.1);
    transform: translateY(-1px);
}

/* List separator voor extra ruimte tussen Opvolgen en Uitgesteld */
.acties-floating-panel .list-separator {
    height: 15px;
    margin: 10px 0;
}

/* Password Validation Styles - Feature 017 */
.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.password-input-wrapper input {
    flex: 1;
    padding-right: 40px;
}

#toggle-password-visibility {
    position: absolute;
    right: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px 8px;
    color: #666;
    font-size: 1.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

#toggle-password-visibility:hover {
    color: var(--macos-blue);
    transform: scale(1.1);
}

#toggle-password-visibility:focus {
    outline: 2px solid var(--macos-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

.password-requirements {
    margin-top: 10px;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.password-requirements p {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.95em;
    color: var(--macos-text-secondary);
}

.password-requirements ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.password-requirement {
    font-size: 0.9em;
    padding: 4px 0;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
}

.password-requirement.neutral {
    color: #666;
}

.password-requirement.valid {
    color: #28a745;
    font-weight: 500;
}

.password-requirement.valid::before {
    content: "✓ ";
    font-weight: bold;
    margin-right: 4px;
}

.password-requirement.invalid {
    color: #dc3545;
}

.password-requirement.invalid::before {
    content: "✗ ";
    font-weight: bold;
    margin-right: 4px;
}

/* ===================================================================
   MESSAGE MODAL STYLING
   Feature: 026-lees-messaging-system
   Phase 1: Core Foundation
   =================================================================== */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: overlayFadeIn 0.2s ease-out;
}

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

.message-modal {
  background: #ffffff;
  border-radius: 20px;
  padding: 0;
  max-width: 500px;
  width: 90%;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.2),
    0 12px 30px rgba(0, 0, 0, 0.15);
  animation: modalSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.message-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 24px;
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  color: white;
  text-align: center;
}

.btn-close-modal {
  position: absolute;
  top: 16px;
  right: 16px;
  background-color: transparent !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.8);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
  transition: all 0.2s ease;
  z-index: 10;
  border-radius: 50%;
  outline: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.btn-close-modal:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  transform: scale(1.1);
}

.btn-close-modal:focus {
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.btn-close-modal:active {
  background: transparent !important;
  box-shadow: none !important;
}

.btn-close-modal i {
  display: block;
  color: inherit;
}

.message-icon {
  font-size: 72px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
  color: rgba(255, 255, 255, 0.9);
}

.message-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.carousel-indicator {
  font-size: 11px;
  font-weight: 600;
  color: white;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.message-body {
  padding: 28px;
  line-height: 1.6;
  color: #333;
}

.message-content {
  margin: 0;
  font-size: 14px;
  max-height: 400px;
  overflow-y: auto;
}

/* Markdown styling in message content */
.message-content p {
  margin: 0 0 12px 0;
}

.message-content p:last-child {
  margin-bottom: 0;
}

.message-content h1 {
  font-size: 20px;
  font-weight: 600;
  margin: 16px 0 8px 0;
  color: #1a1a1a;
}

.message-content h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 14px 0 8px 0;
  color: #1a1a1a;
}

.message-content h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 12px 0 6px 0;
  color: #1a1a1a;
}

.message-content strong {
  font-weight: 600;
  color: #1a1a1a;
}

.message-content em {
  font-style: italic;
}

.message-content code {
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 13px;
  color: #e11d48;
}

.message-content mark {
  background: #fef08a;
  padding: 2px 4px;
  border-radius: 3px;
  color: #854d0e;
}

.message-content hr {
  border: none;
  border-top: 2px solid #e5e7eb;
  margin: 16px 0;
}

.message-content ul {
  margin: 8px 0;
  padding-left: 24px;
  list-style: disc;
}

.message-content li {
  margin: 4px 0;
  line-height: 1.6;
}

.message-content a {
  color: #2563eb;
  text-decoration: underline;
}

.message-content a:hover {
  color: #1d4ed8;
}

.message-button {
  padding: 0 28px 16px 28px;
}

.btn-message-action {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 4px 12px rgba(37, 99, 235, 0.3),
    0 2px 4px rgba(37, 99, 235, 0.2);
  position: relative;
  overflow: hidden;
}

.btn-message-action::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-message-action:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 20px rgba(37, 99, 235, 0.4),
    0 4px 8px rgba(37, 99, 235, 0.3);
}

.btn-message-action:hover::before {
  opacity: 1;
}

.btn-message-action:active {
  transform: translateY(0px);
  box-shadow:
    0 2px 8px rgba(37, 99, 235, 0.3),
    0 1px 4px rgba(37, 99, 235, 0.2);
}

.message-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 28px 16px 28px;
}

/* Navigation row at bottom (separate from actions) */
.message-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 16px 28px 28px 28px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.btn-prev,
.btn-next {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.btn-prev:hover,
.btn-next:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.snooze-options {
  display: flex;
  gap: 6px;
}

.btn-snooze {
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.15) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: #92400e;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.1);
}

.btn-snooze:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.25) 0%, rgba(245, 158, 11, 0.25) 100%);
  border-color: rgba(245, 158, 11, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(245, 158, 11, 0.15);
}

.btn-message-dismiss {
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.9) 0%, rgba(29, 78, 216, 0.9) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.btn-message-dismiss:hover {
  background: linear-gradient(135deg, rgba(37, 99, 235, 1) 0%, rgba(29, 78, 216, 1) 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}

.btn-message-dismiss:active {
  transform: translateY(0px);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

/* Mobile responsiveness */
@media (max-width: 600px) {
  .message-modal {
    width: 95%;
    padding: 20px;
    max-width: none;
  }

  .message-title {
    font-size: 16px;
  }

  .message-content {
    font-size: 13px;
  }

  .message-actions {
    flex-direction: column;
  }

  .snooze-options {
    width: 100%;
    justify-content: space-between;
  }

  .btn-message-dismiss,
  .btn-message-action {
    width: 100%;
  }

  .btn-prev,
  .btn-next {
    width: 100%;
  }
}

/* Message Type Specific Styling - Gradient Headers */
.message-modal.message-information .message-header {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.message-modal.message-information .message-icon,
.message-modal.message-information .btn-close-modal,
.message-modal.message-information .btn-close-modal i {
  color: #93c5fd;
}

.message-modal.message-educational .message-header {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.message-modal.message-educational .message-icon,
.message-modal.message-educational .btn-close-modal,
.message-modal.message-educational .btn-close-modal i {
  color: #c4b5fd;
}

.message-modal.message-feature .message-header {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.message-modal.message-feature .message-icon,
.message-modal.message-feature .btn-close-modal,
.message-modal.message-feature .btn-close-modal i {
  color: #6ee7b7;
}

.message-modal.message-tip .message-header {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.message-modal.message-tip .message-icon,
.message-modal.message-tip .btn-close-modal,
.message-modal.message-tip .btn-close-modal i {
  color: #fcd34d;
}

.message-modal.message-warning .message-header {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.message-modal.message-warning .message-icon,
.message-modal.message-warning .btn-close-modal,
.message-modal.message-warning .btn-close-modal i {
  color: #fdba74;
}

.message-modal.message-important .message-header {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.message-modal.message-important .message-icon,
.message-modal.message-important .btn-close-modal,
.message-modal.message-important .btn-close-modal i {
  color: #fca5a5;
}

/* Bulk Edit Modal Styling - Feature 043 */
/* Base modal overlay - CRITICAL for visibility */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}

#bulkEditModal .modal-content {
    background-color: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 90%;
}

#bulkEditModal .form-group {
    margin-bottom: 1rem;
}

#bulkEditModal .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #333;
}

#bulkEditModal .form-group select,
#bulkEditModal .form-group input[type="date"],
#bulkEditModal .form-group input[type="number"] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

#bulkEditModal .button-group {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
    gap: 1rem;
}

#bulkEditModal button {
    flex: 1;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
}

#bulkEditModal button.secondary {
    background-color: #f0f0f0;
    color: #333;
}

#bulkEditModal button.primary {
    background-color: #007bff;
    color: white;
}

#bulkEditModal button.primary:hover {
    background-color: #0056b3;
}

#bulkEditModal button.secondary:hover {
    background-color: #e0e0e0;
}


/* T021: Prullenbak Scherm Styling (Feature 055) */
.prullenbak-scherm {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.prullenbak-info {
    background: #e3f2fd;
    border-left: 4px solid #2196F3;
    padding: 15px;
    margin-bottom: 25px;
    border-radius: 4px;
}

.prullenbak-info p {
    margin: 0;
    color: #1976D2;
    display: flex;
    align-items: center;
    gap: 10px;
}

.prullenbak-lijst {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.prullenbak-taak-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fafafa;
    transition: all 0.2s ease;
}

.prullenbak-taak-item:hover {
    background: #f5f5f5;
    border-color: #bdbdbd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.prullenbak-taak-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prullenbak-taak-tekst {
    font-weight: 500;
    font-size: 15px;
    color: #333;
}

.prullenbak-taak-meta {
    font-size: 13px;
    color: #666;
    display: flex;
    gap: 20px;
    align-items: center;
}

.prullenbak-taak-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.prullenbak-countdown {
    color: #ff9800;
    font-weight: 600;
}

.prullenbak-countdown.warning {
    color: #f44336;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.restore-button {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.restore-button:hover {
    background: #45a049;
    box-shadow: 0 2px 6px rgba(76, 175, 80, 0.3);
    transform: translateY(-1px);
}

.restore-button:active {
    transform: translateY(0);
}

.restore-button:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

.prullenbak-lijst .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.prullenbak-lijst .empty-state i {
    font-size: 48px;
    color: #4CAF50;
    margin-bottom: 15px;
}

.prullenbak-lijst .empty-state p {
    font-size: 16px;
    margin: 0;
}

.prullenbak-lijst .error-message {
    background: #ffebee;
    border-left: 4px solid #f44336;
    padding: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #c62828;
}

.prullenbak-lijst .error-message i {
    font-size: 24px;
}

/* ========================================
   SUBSCRIPTION MANAGEMENT STYLING
   Feature: 057-dan-gaan-we
   ======================================== */

/* T039: Subscription block styling */
/* ========================================
   ACCOUNT SETTINGS BLOCK
   Feature: 058-dan-mag-je (Account Settings Block)
   ======================================== */

.account-block {
    background: linear-gradient(135deg, #f5f7fa 0%, #fff 100%);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 24px;
    margin: 20px 0;
    border-left: 4px solid var(--macos-blue);
}

.account-header h3 {
    margin: 0 0 20px 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.account-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.account-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.account-info-row:last-of-type {
    border-bottom: none;
}

.account-label {
    font-size: 14px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.account-value {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.account-statistics {
    display: flex;
    gap: 24px;
    padding: 20px 0;
    justify-content: center;
    background: rgba(0, 122, 255, 0.05);
    border-radius: 6px;
    margin: 12px 0;
}

.account-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.stat-number {
    font-size: 32px;
    font-weight: 700;
    color: var(--macos-blue);
    line-height: 1;
}

.stat-label {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

.account-actions {
    padding-top: 12px;
    display: flex;
    justify-content: center;
}

.btn-reset-password {
    background: var(--macos-blue);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-reset-password:hover {
    background: #005ecb;
}

.btn-reset-password:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.account-error {
    padding: 20px;
    text-align: center;
    color: #f44336;
}

.account-error p {
    margin: 0 0 16px 0;
    font-size: 14px;
}

.btn-account-retry {
    background: var(--macos-blue);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-account-retry:hover {
    background: #005ecb;
}

/* Responsive adjustments for account block */
@media (max-width: 768px) {
    .account-statistics {
        flex-direction: column;
        gap: 16px;
    }

    .stat-number {
        font-size: 24px;
    }
}

.subscription-block {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 24px;
    margin: 20px 0;
}

.subscription-header h3 {
    margin: 0 0 20px 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.subscription-loading {
    padding: 20px;
    text-align: center;
    color: #666;
}

.subscription-info {
    padding: 16px;
    border-radius: 6px;
    margin-bottom: 16px;
}

.subscription-info.subscription-trial {
    background: #e3f2fd;
    border-left: 4px solid var(--macos-blue);
}

.subscription-info.subscription-active {
    background: #f5f5f5;
    border-left: 4px solid #4caf50;
}

.subscription-info.subscription-canceled {
    background: #fff3e0;
    border-left: 4px solid #ff9800;
}

.subscription-info.subscription-beta {
    background: #f3e5f5;
    border-left: 4px solid #9c27b0;
}

.subscription-info.subscription-expired {
    background: #ffebee;
    border-left: 4px solid #f44336;
}

.subscription-info.subscription-error {
    background: #fff3e0;
    border-left: 4px solid #ff9800;
}

.subscription-status-text {
    font-size: 14px;
    font-weight: 600;
    color: #666;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.subscription-plan-name {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
}

.subscription-pricing {
    font-size: 24px;
    font-weight: 700;
    color: var(--macos-blue);
    margin: 0 0 8px 0;
}

.subscription-renewal,
.subscription-cancels-on {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.subscription-message {
    font-size: 14px;
    color: #666;
    margin: 8px 0 0 0;
}

/* T041: Trial countdown and status indicators */
.subscription-trial-countdown {
    font-size: 32px;
    font-weight: 700;
    color: var(--macos-blue);
    margin: 8px 0;
}

.subscription-scheduled-change {
    background: #e1f5fe;
    border: 1px solid #039be5;
    border-radius: 4px;
    padding: 12px;
    margin-top: 12px;
    font-size: 14px;
    color: #01579b;
}

/* Subscription actions */
.subscription-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-subscription-primary {
    background: var(--macos-blue);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-subscription-primary:hover {
    background: #005fcc;
}

.btn-subscription-secondary {
    background: white;
    color: var(--macos-blue);
    border: 1px solid var(--macos-blue);
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-subscription-secondary:hover {
    background: #e3f2fd;
}

.btn-subscription-cancel {
    background: white;
    color: #d32f2f;
    border: 1px solid #d32f2f;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-subscription-cancel:hover {
    background: #ffebee;
}

/* T040: Plan comparison modal styling */
.modal-subscription-plans {
    max-width: 1000px;
    width: 90%;
}

.modal-subscription-plans h2 {
    margin: 0 0 24px 0;
    font-size: 24px;
    font-weight: 600;
    color: #333;
}

.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.plan-card {
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
}

.plan-card:hover {
    border-color: var(--macos-blue);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.1);
}

.plan-card.current-plan {
    border-color: #4caf50;
    background: #f1f8f4;
}

.plan-card.current-plan::before {
    content: "Current Plan";
    display: inline-block;
    background: #4caf50;
    color: white;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
}

.plan-name {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 0 0 16px 0;
}

.plan-pricing {
    margin: 0 0 8px 0;
}

.plan-price {
    font-size: 32px;
    font-weight: 700;
    color: var(--macos-blue);
}

.plan-cycle {
    font-size: 16px;
    color: #666;
}

.plan-pricing-yearly {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

.plan-savings {
    color: #4caf50;
    font-weight: 600;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    flex-grow: 1;
}

.plan-feature {
    padding: 8px 0;
    font-size: 14px;
    color: #555;
    border-bottom: 1px solid #f0f0f0;
}

.plan-feature:last-child {
    border-bottom: none;
}

.plan-feature::before {
    content: "✓";
    color: #4caf50;
    font-weight: bold;
    margin-right: 8px;
}

.btn-plan-select {
    background: var(--macos-blue);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    width: 100%;
}

.btn-plan-select:hover:not(.disabled) {
    background: #005fcc;
}

.btn-plan-select.disabled {
    background: #9e9e9e;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Confirmation modals */
.modal-confirmation {
    max-width: 500px;
}

.modal-confirmation h2 {
    margin: 0 0 16px 0;
    font-size: 22px;
    color: #333;
}

.modal-confirmation p {
    font-size: 16px;
    color: #555;
    margin: 0 0 12px 0;
}

.modal-confirmation .confirmation-note {
    font-size: 14px;
    color: #666;
    background: #f5f5f5;
    padding: 12px;
    border-radius: 4px;
    margin: 16px 0;
}

.modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    justify-content: flex-end;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .plans-grid {
        grid-template-columns: 1fr;
    }

    .subscription-actions {
        flex-direction: column;
    }

    .subscription-actions button {
        width: 100%;
    }

    .modal-subscription-plans {
        width: 95%;
        max-width: none;
    }
}

/* ========================================
   PAGE HELP SYSTEM - Feature 062
   ======================================== */

/* Help Icon */
.page-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.2s ease;
    vertical-align: middle;
    color: var(--macos-text-secondary, #666);
}

.page-help-icon:hover {
    opacity: 1;
    color: var(--macos-blue, #007AFF);
    transform: scale(1.1);
}

.page-help-icon svg {
    display: block;
}

/* Help Modal */
/* Page Help Modal - Using Information Message Structure */
/* Note: Reuses .modal-overlay and .message-modal classes from message-modal.js */
/* This ensures EXACT visual consistency with information messages */

/* Page Help Modal - Information Blue Theme (matches information message type) */
.page-help-modal .message-header {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.page-help-modal .message-icon,
.page-help-modal .btn-close-modal {
    color: rgba(255, 255, 255, 0.9);
}

.page-help-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Markdown Content Styling */
.page-help-body h1 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 16px 0;
    color: #222;
}

.page-help-body h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 24px 0 12px 0;
    color: #333;
}

.page-help-body h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 20px 0 10px 0;
    color: #444;
}

.page-help-body p {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin: 0 0 12px 0;
}

.page-help-body ul,
.page-help-body ol {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin: 0 0 12px 0;
    padding-left: 24px;
}

.page-help-body li {
    margin: 6px 0;
}

.page-help-body strong {
    font-weight: 600;
    color: #333;
}

.page-help-body em {
    font-style: italic;
    color: #666;
}

.page-help-body code {
    background: #F5F5F5;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    color: #E01E5A;
}

.page-help-body pre {
    background: #F8F8F8;
    border: 1px solid #E5E5E5;
    border-radius: 6px;
    padding: 12px;
    overflow-x: auto;
    margin: 12px 0;
}

.page-help-body pre code {
    background: none;
    padding: 0;
    color: #333;
}

.page-help-body a {
    color: var(--macos-blue, #007AFF);
    text-decoration: none;
}

.page-help-body a:hover {
    text-decoration: underline;
}

.page-help-body hr {
    border: none;
    border-top: 1px solid #E5E5E5;
    margin: 20px 0;
}

/* Custom/Default Indicator */
.help-custom-indicator {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #E5E5E5;
    color: #999;
    font-size: 13px;
}

/* Error State */
.help-error {
    text-align: center;
    padding: 40px 20px;
    color: #999;
}

.help-error strong {
    display: block;
    font-size: 16px;
    color: #666;
    margin-bottom: 8px;
}

/* Loading State */
.loading-text {
    text-align: center;
    color: #999;
    padding: 40px 20px;
    font-size: 15px;
}

/* Responsive Mobile - Page Help Specific */
@media (max-width: 768px) {
    .page-help-body {
        padding: 20px;
    }

    .page-help-body h1 {
        font-size: 20px;
    }

    .page-help-body h2 {
        font-size: 18px;
    }

    .page-help-icon {
        margin-left: 8px;
    }
}

/* ============================================
   VOICE MODE STYLES - Feature 065
   ============================================ */

/* Voice Mode Container */
#voice-mode-container {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-left: 16px;
}

/* Voice Toggle Button - Subtle Design */
.voice-toggle-btn {
    background: var(--macos-bg-secondary);
    border: 1px solid var(--macos-gray-4);
    color: var(--macos-text-secondary);
    padding: 8px 16px;
    border-radius: var(--macos-radius-button);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: none;
}

.voice-toggle-btn:hover {
    background: var(--macos-gray-5);
    border-color: var(--macos-gray-3);
    color: var(--macos-text-primary);
}

.voice-toggle-btn i {
    font-size: 14px;
}

.voice-toggle-text {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
}

/* Active State - Subtle Pulse */
.voice-toggle-btn.active {
    background: var(--macos-blue);
    border-color: var(--macos-blue);
    color: white;
    animation: voicePulse 2s ease-in-out infinite;
}

.voice-toggle-btn.active:hover {
    background: var(--macos-blue-hover);
    border-color: var(--macos-blue-hover);
}

@keyframes voicePulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(0, 122, 255, 0);
        transform: scale(1.02);
    }
}

/* Voice Mode Indicator - Discrete */
.voice-mode-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(0, 122, 255, 0.08);
    border: 1px solid rgba(0, 122, 255, 0.2);
    border-radius: var(--macos-radius-small);
    font-size: 12px;
    color: var(--macos-blue);
}

/* Listening Pulse Animation - Subtle */
.voice-listening-pulse {
    width: 8px;
    height: 8px;
    background: var(--macos-blue);
    border-radius: 50%;
    animation: listeningPulse 1.5s ease-in-out infinite;
}

@keyframes listeningPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}

/* Voice State Variations */
.voice-listening-pulse.listening {
    background: var(--macos-blue);
    animation: listeningPulse 1.5s ease-in-out infinite;
}

.voice-listening-pulse.thinking {
    background: #AF52DE; /* Purple */
    animation: thinkingPulse 1.0s ease-in-out infinite;
}

.voice-listening-pulse.processing {
    background: #FF9500; /* Orange */
    animation: processingPulse 0.8s ease-in-out infinite;
}

.voice-listening-pulse.playing {
    background: #34C759; /* Green */
    animation: playingPulse 0.6s ease-in-out infinite;
}

@keyframes thinkingPulse {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.6);
    }
}

@keyframes processingPulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.5) rotate(180deg);
    }
}

@keyframes playingPulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    25% {
        opacity: 1;
        transform: scale(1.3);
    }
    50% {
        opacity: 0.6;
        transform: scale(1);
    }
    75% {
        opacity: 1;
        transform: scale(1.3);
    }
}

.voice-status-text {
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
}

/* Responsive - Voice Mode Mobile */
@media (max-width: 768px) {
    #voice-mode-container {
        margin-left: 8px;
        gap: 8px;
    }

    .voice-toggle-btn {
        padding: 6px 12px;
        font-size: 12px;
    }

    .voice-toggle-text {
        display: none; /* Hide text on mobile, show icon only */
    }

    .voice-mode-indicator {
        padding: 4px 8px;
        font-size: 11px;
    }

    .voice-status-text {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}