/**
 * Workshop Planner V2 Styles
 * Matches the Figma design specifications
 */

/* ========== Reset ========== */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

* {
    box-sizing: border-box;
}

/* ========== Variables ========== */
:root {
    /* Text scale fallbacks — compact for tool-density UI */
    --text-display: 1.25rem;   /* 20px */
    --text-h1: 1rem;           /* 16px */
    --text-h2: 0.875rem;       /* 14px */
    --text-h3: 0.8125rem;      /* 13px */
    --text-h4: 0.75rem;        /* 12px */
    --text-body: 0.75rem;      /* 12px */
    --text-ui: 0.6875rem;      /* 11px */
    --text-small: 0.6875rem;   /* 11px */
    --text-meta: 0.625rem;     /* 10px */
    --text-caption: 0.5625rem; /* 9px */
    --text-micro: 0.5rem;      /* 8px */
    --text-nano: 0.5rem;       /* 8px */

    /* Spacing scale fallbacks */
    --space-0-5: 2px;
    --space-1: 4px;
    --space-1-5: 6px;
    --space-2: 8px;
    --space-2-5: 10px;
    --space-3: 12px;
    --space-3-5: 14px;
    --space-4: 16px;
    --space-4-5: 18px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    --planner-red: var(--planner-primary);
    --planner-red-dark: var(--planner-dark);
    --planner-red-light: var(--planner-very-light);
    --planner-green: var(--color-success);
    --planner-green-light: var(--color-success-very-light);
    --planner-yellow: var(--color-warning);
    --planner-yellow-light: var(--color-warning-very-light);
    --planner-blue: var(--planner-primary);
    --planner-blue-light: var(--planner-very-light);
    --planner-purple: var(--color-purple, #9B59B6);
    --planner-purple-light: var(--color-purple-very-light, #F3E8F7);
    --planner-orange: var(--planner-exercise-color);
    --planner-orange-light: var(--planner-exercise-bg);

    /* Activity type colors - Yellow for exercises, Orange for icebreakers, Grey for breaks */
    --planner-exercise-color: var(--planner-exercise-color);
    --planner-exercise-light: var(--planner-exercise-bg);
    --planner-icebreaker-color: var(--planner-icebreaker-color);
    --planner-icebreaker-light: var(--planner-icebreaker-bg);
    --planner-break-color: var(--planner-break-color);
    --planner-break-light: var(--planner-break-bg);
    --planner-gray-50: var(--gray-50);
    --planner-gray-100: var(--gray-100);
    --planner-gray-200: var(--gray-200);
    --planner-gray-300: var(--gray-300);
    --planner-gray-400: var(--gray-400);
    --planner-gray-500: var(--gray-500);
    --planner-gray-600: var(--gray-600);
    --planner-gray-700: var(--gray-700);
    --planner-gray-800: var(--gray-800);
    --planner-gray-900: var(--gray-900);
    --planner-border: rgba(44, 36, 22, 0.12);  /* Matching Tips border */
    --planner-shadow: var(--shadow-sm);
    --planner-shadow-lg: var(--shadow-lg);
    --planner-radius: var(--radius-lg);
    --planner-radius-lg: var(--radius-xl);
    --planner-radius-xl: var(--radius-2xl);
}

/* ========== Main Layout ========== */
.workshop-planner {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px); /* Account for unified header */
    background: var(--planner-gray-50);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Compact type scale — scoped to planner only */
    --text-display: 1.25rem;    /* 20px (was 46px) */
    --text-h1: 1rem;            /* 16px (was 32px) */
    --text-h2: 0.875rem;        /* 14px (was 24px) */
    --text-h3: 0.8125rem;       /* 13px (was 20px) */
    --text-h4: 0.75rem;         /* 12px (was 18px) */
    --text-body: 0.75rem;       /* 12px (was 16px) */
    --text-ui: 0.6875rem;       /* 11px (was 15px) */
    --text-small: 0.6875rem;    /* 11px (was 14px) */
    --text-meta: 0.625rem;      /* 10px (was 13px) */
    --text-caption: 0.5625rem;  /* 9px  (was 12px) */
    --text-micro: 0.5rem;       /* 8px  (was 11px) */
    --text-nano: 0.5rem;        /* 8px  (was 10px) */
}

/* Grid background pattern - Matching Tips design */
.workshop-planner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(44, 36, 22, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(44, 36, 22, 0.12) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.workshop-planner > * {
    position: relative;
    z-index: 1;
}

/* ========== Top Header Bar ========== */
.planner-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background: linear-gradient(135deg, var(--planner-red) 0%, var(--planner-red-dark) 100%);
    color: white;
    flex-shrink: 0;
    overflow: visible;
    z-index: var(--planner-z-dropdown);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.topbar-logo {
    width: 30px;
    height: 30px;
    background: white;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.topbar-logo .icon {
    color: var(--planner-red);
    width: 16px; height: 16px;
}

.topbar-title {
    font-size: var(--text-body);
    font-weight: 500;
    color: white;
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    border-radius: 4px;
    transition: background-color 0.2s ease;
    letter-spacing: -0.01em;
}

.topbar-title:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.topbar-title.editable::after {
    display: none;
}

.topbar-title-edit {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-1);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.topbar-title-edit:hover {
    opacity: 1;
}

.topbar-title-edit-icon {
    width: 16px;
    height: 16px;
    color: white;
}

.topbar-title-input {
    font-size: var(--text-body);
    font-weight: 600;
    color: white;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    padding: var(--space-1) var(--space-2);
    outline: none;
    min-width: 200px;
    max-width: 300px;
}

.topbar-title-input:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Topbar Logo Dropdown */
.topbar-logo-dropdown {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    position: relative;
    cursor: pointer;
}

.topbar-dropdown-arrow {
    color: white;
    font-size: 16px;
    opacity: 0.8;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.topbar-logo-dropdown:hover .topbar-dropdown-arrow {
    opacity: 1;
}

.topbar-logo-dropdown:hover .topbar-dropdown-menu,
.topbar-logo-dropdown:focus-within .topbar-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.topbar-logo-dropdown:hover .topbar-dropdown-arrow {
    transform: rotate(180deg);
}

.topbar-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: white;
    border-radius: var(--planner-radius);
    box-shadow: var(--shadow-lg);
    min-width: 280px;
    z-index: var(--planner-z-modal);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    padding: var(--space-2);
}

.topbar-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3-5);
    color: var(--planner-gray-800);
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.15s ease;
    font-size: var(--text-small);
    font-weight: 500;
}

.topbar-dropdown-menu a:hover {
    background: var(--planner-gray-100);
}

.topbar-dropdown-menu a.active {
    background: var(--planner-red-light);
    color: var(--planner-red);
}

.topbar-dropdown-menu a .icon {
    width: 20px; height: 20px;
    color: var(--planner-gray-500);
}

.topbar-dropdown-menu a.active .icon {
    color: var(--planner-red);
}

.topbar-dropdown-menu a .nav-icon-bg {
    background: linear-gradient(135deg, var(--planner-red) 0%, var(--planner-red-dark) 100%);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-small);
}

.topbar-dropdown-text {
    flex: 1;
}

/* Right section wrapper - groups action buttons with user/auth */
.topbar-right-section {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    overflow: visible;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    overflow: visible;
}

/* Topbar Auth Section */
.topbar-auth {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.topbar-signin-btn {
    padding: var(--space-2) var(--space-5);
    background: white;
    border: none;
    border-radius: 50px;
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--planner-red);
    cursor: pointer;
    transition: all 0.2s;
}

.topbar-signin-btn:hover {
    background: var(--planner-gray-100);
    transform: translateY(-1px);
}

/* Hide auth button when workshop is loaded (topbar-right is visible) */
.topbar-right:not([style*="display: none"]) ~ .topbar-auth {
    display: none;
}

/* Hide auth button when user is authenticated */
body[data-authenticated="true"] .topbar-auth {
    display: none;
}

/* ========== User Avatar & Dropdown ========== */
.topbar-user {
    position: relative !important;
    display: flex;
    align-items: center;
}

.topbar-avatar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.topbar-avatar-btn:hover {
    transform: scale(1.05);
}

.topbar-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: white;
    color: var(--planner-red);
    font-size: var(--text-caption);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: border-color 0.2s ease;
}

.topbar-avatar-btn:hover .topbar-avatar {
    border-color: rgba(255, 255, 255, 0.6);
}

.topbar-user-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    width: 220px;
    background: white;
    border-radius: var(--planner-radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    z-index: var(--planner-z-modal);
    overflow: hidden;
    display: none !important;
}

.topbar-user-dropdown.open {
    display: block !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.dropdown-user-info {
    padding: var(--space-4);
    background: var(--planner-gray-50);
}

.dropdown-user-name {
    display: block;
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--planner-gray-900);
    margin-bottom: var(--space-0-5);
}

.dropdown-user-email {
    display: block;
    font-size: var(--text-caption);
    color: var(--planner-gray-500);
}

.dropdown-divider {
    height: 1px;
    background: var(--planner-gray-200);
    margin: 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-small);
    color: var(--planner-gray-700);
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.dropdown-item:hover {
    background: var(--planner-gray-50);
}

.dropdown-item .icon {
    width: 20px; height: 20px;
    color: var(--planner-gray-500);
}

.dropdown-item--danger {
    color: var(--planner-red);
}

.dropdown-item--danger .icon {
    color: var(--planner-red);
}

.dropdown-item--danger:hover {
    background: var(--planner-red-light);
}

.topbar-action-btn {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: none;
    border-radius: 6px;
    color: var(--planner-gray-600);
    cursor: pointer;
    transition: all 0.2s;
    overflow: visible;
}

.topbar-action-btn:hover {
    background: var(--planner-gray-100);
}

.topbar-action-btn:hover .icon {
    color: var(--planner-red);
}

.topbar-action-btn.primary {
    background: var(--planner-red-dark);
    color: white;
    border: 1px solid white;
}

.topbar-action-btn.primary:hover {
    background: var(--planner-red);
}

.topbar-action-btn.primary:hover .icon {
    color: white;
}

.topbar-action-btn .icon {
    width: 16px; height: 16px;
}

/* Schedule Workshop button - match Share Workshop exactly */
#calendarBtn {
    width: 32px !important;
    height: 32px !important;
    background: white !important;
    border: none !important;
    border-radius: 6px !important;
    color: var(--planner-gray-600) !important;
}

#calendarBtn:hover {
    background: var(--planner-gray-100) !important;
}

#calendarBtn:hover .icon {
    color: var(--planner-red) !important;
}

/* Topbar Button Tooltips */
.topbar-tooltip {
    position: absolute;
    bottom: -36px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--planner-gray-800);
    color: white;
    font-size: var(--text-caption);
    font-weight: 500;
    padding: var(--space-1-5) var(--space-2-5);
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: none;
    z-index: var(--planner-z-toast);
}

.topbar-tooltip::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid var(--planner-gray-800);
}

.topbar-action-btn:hover .topbar-tooltip {
    opacity: 1;
    visibility: visible;
}

/* ========== Main Body Layout ========== */
.planner-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ========== Agenda Main Area ========== */
.agenda-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    padding: var(--space-6);
}

/* ========== Agenda Header Bar ========== */
.agenda-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    flex-shrink: 0;
}

.agenda-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.agenda-title {
    font-size: var(--text-h3);
    font-weight: 600;
    color: var(--planner-gray-900);
    margin: 0;
    letter-spacing: -0.02em;
}

.agenda-duration-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-2-5);
    background: var(--planner-gray-200);
    border-radius: 16px;
    font-size: var(--text-meta);
    font-weight: 500;
    color: var(--planner-gray-700);
}

.agenda-remaining {
    font-size: var(--text-meta);
    font-weight: 500;
    color: var(--planner-red);
}

.clear-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: white;
    border: 1px solid var(--planner-gray-300);
    border-radius: 6px;
    color: var(--planner-gray-600);
    cursor: pointer;
    transition: all 0.2s;
}

.clear-all-btn .icon {
    width: 16px; height: 16px;
}

.clear-all-btn:hover {
    background: var(--planner-gray-50);
    border-color: var(--planner-interactive);
    color: var(--planner-interactive);
}

/* ========== Suggest Button ========== */
.suggest-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: white;
    border: 1px solid var(--planner-gray-300);
    border-radius: 6px;
    color: var(--planner-gray-600);
    cursor: pointer;
    transition: all 0.2s;
}

.suggest-btn .icon {
    width: 16px; height: 16px;
}

.suggest-btn:hover {
    background: var(--planner-gray-50);
    border-color: var(--planner-red);
    color: var(--planner-red);
}

.suggest-btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

.suggest-btn.loading .icon {
    animation: sparkle 1s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.9); }
}

/* Progress Header Button Tooltips */
.suggest-btn,
.clear-all-btn {
    position: relative;
}

.progress-header-tooltip {
    position: absolute;
    bottom: -36px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--planner-gray-800);
    color: white;
    font-size: var(--text-caption);
    font-weight: 500;
    padding: var(--space-1-5) var(--space-2-5);
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: none;
    z-index: var(--planner-z-dropdown);
}

.progress-header-tooltip::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid var(--planner-gray-800);
}

.suggest-btn:hover .progress-header-tooltip,
.clear-all-btn:hover .progress-header-tooltip {
    opacity: 1;
    visibility: visible;
}

/* ========== Prepare Button ========== */
.prepare-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: linear-gradient(135deg, #E54D4D 0%, #C73E3E 100%);
    border: none;
    border-radius: var(--planner-radius);
    color: white;
    font-size: var(--text-small);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(229, 77, 77, 0.25);
}

.prepare-btn .icon {
    width: 20px; height: 20px;
}

.prepare-btn:hover {
    background: linear-gradient(135deg, #C73E3E 0%, #A33131 100%);
    box-shadow: 0 4px 12px rgba(229, 77, 77, 0.35);
    transform: translateY(-1px);
}

.prepare-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(229, 77, 77, 0.25);
}

/* ========== Time to Plan CTA (Sidebar) ========== */
.sidebar-plan-cta {
    padding: var(--space-4);
    border-bottom: 1px solid var(--planner-border);
    background: linear-gradient(135deg, rgba(229, 77, 77, 0.05) 0%, rgba(199, 62, 62, 0.08) 100%);
}

.time-to-plan-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2-5);
    width: 100%;
    padding: var(--space-3) var(--space-5);
    background: linear-gradient(135deg, #E54D4D 0%, #C73E3E 100%);
    border: none;
    border-radius: var(--planner-radius);
    color: white;
    font-size: var(--text-ui);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(229, 77, 77, 0.3);
}

.time-to-plan-btn .icon {
    width: 22px; height: 22px;
}

.time-to-plan-btn:not(:disabled):hover {
    background: linear-gradient(135deg, #C73E3E 0%, #A33131 100%);
    box-shadow: 0 4px 12px rgba(229, 77, 77, 0.4);
    transform: translateY(-1px);
}

.time-to-plan-btn:not(:disabled):active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(229, 77, 77, 0.3);
}

.time-to-plan-btn:disabled {
    background: var(--planner-gray-300);
    color: var(--planner-gray-500);
    cursor: not-allowed;
    box-shadow: none;
}

.plan-cta-hint {
    margin: var(--space-2) 0 0 0;
    font-size: var(--text-caption);
    color: var(--planner-gray-500);
    text-align: center;
    line-height: 1.4;
}

.plan-cta-hint.hidden {
    display: none;
}

/* ========== AI Suggestions Modal ========== */
.suggestions-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

.suggestions-intro {
    font-size: var(--text-meta);
    line-height: 1.5;
    color: var(--planner-gray-500);
    margin: 0 0 8px 0;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--planner-border);
}

/* Suggestions Loading - skeleton shimmer */
.suggestions-loading-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-2-5);
}

.suggestions-loading-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2-5);
    padding: var(--space-5) var(--space-6) var(--space-3);
    color: var(--planner-gray-500);
    font-size: var(--text-small);
}

.suggestions-loading-sparkle .icon {
    width: 24px; height: 24px;
    animation: suggestion-pulse 1.2s ease-in-out infinite;
}

@keyframes suggestion-pulse {
    0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
    50% { opacity: 0.4; transform: scale(0.85) rotate(15deg); }
}

.suggestion-skeleton {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--planner-gray-50);
    border: 1px solid var(--planner-border);
    border-radius: var(--planner-radius);
    overflow: hidden;
    position: relative;
}

.suggestion-skeleton::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
    animation: suggestion-shimmer 1.5s ease-in-out infinite;
}

@keyframes suggestion-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.suggestion-skeleton__icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--planner-gray-200, #e5e7eb);
    flex-shrink: 0;
}

.suggestion-skeleton__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.suggestion-skeleton__line {
    border-radius: 4px;
    background: var(--planner-gray-200, #e5e7eb);
}

.suggestion-skeleton__line--title {
    height: 14px;
    width: 65%;
}

.suggestion-skeleton__line--meta {
    height: 10px;
    width: 40%;
}

.suggestion-skeleton__btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--planner-gray-200, #e5e7eb);
    flex-shrink: 0;
}

.suggestions-empty {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    color: var(--planner-gray-500);
}

.suggestions-empty .icon {
    width: 48px; height: 48px;
    color: var(--planner-gray-300);
    margin-bottom: var(--space-3);
}

.suggestions-empty p {
    margin: 0;
    font-size: var(--text-small);
}

/* Suggestion Card */
.suggestion-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--planner-gray-50);
    border: 1px solid var(--planner-border);
    border-radius: var(--planner-radius);
    transition: all 0.2s;
    overflow: visible;
}

.suggestion-card > * {
    visibility: visible;
}

/* Icon container - colored per type */
.suggestion-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    flex-shrink: 0;
}

.suggestion-card__icon .icon-mask {
    display: block;
    width: 20px;
    height: 20px;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Exercise type colors */
.suggestion-card--exercise .suggestion-card__icon {
    background: var(--planner-exercise-bg);
}
.suggestion-card--exercise .suggestion-card__icon .icon-mask {
    background-color: var(--planner-exercise-color);
}
.suggestion-card--exercise:hover {
    border-color: var(--planner-exercise-color);
    background: white;
}

/* Icebreaker type colors */
.suggestion-card--icebreaker .suggestion-card__icon {
    background: var(--planner-icebreaker-bg);
}
.suggestion-card--icebreaker .suggestion-card__icon .icon-mask {
    background-color: var(--planner-icebreaker-color);
}
.suggestion-card--icebreaker:hover {
    border-color: var(--planner-icebreaker-color);
    background: white;
}

/* Break type colors */
.suggestion-card--break .suggestion-card__icon {
    background: var(--planner-break-bg);
}
.suggestion-card--break .suggestion-card__icon .icon-mask {
    background-color: var(--planner-break-color);
}
.suggestion-card--break:hover {
    border-color: var(--planner-break-color);
    background: white;
}

.suggestion-card__content {
    flex: 1;
    min-width: 0;
}

.suggestion-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.suggestion-card__name {
    font-weight: 600;
    font-size: var(--text-small);
    color: var(--planner-gray-900);
}

.suggestion-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-caption);
    color: var(--planner-gray-500);
}

/* Type badge - colored by type */
.suggestion-card__type {
    padding: var(--space-0-5) var(--space-1-5);
    border-radius: 4px;
    font-size: var(--text-micro);
    font-weight: 500;
    text-transform: capitalize;
}

.suggestion-card--exercise .suggestion-card__type {
    background: var(--planner-exercise-bg);
    color: var(--planner-exercise-color);
}

.suggestion-card--icebreaker .suggestion-card__type {
    background: var(--planner-icebreaker-bg);
    color: var(--planner-icebreaker-color);
}

.suggestion-card--break .suggestion-card__type {
    background: var(--planner-break-bg);
    color: var(--planner-break-color);
}

.suggestion-card__reason {
    font-size: var(--text-meta);
    color: var(--planner-gray-600);
    line-height: 1.4;
    margin-top: var(--space-1-5);
}

/* Add button - white + icon */
.suggestion-card__add {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    background: var(--planner-red);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    align-self: center;
    transition: all 0.2s;
}

.suggestion-card__add:hover {
    background: var(--planner-red-dark);
    transform: scale(1.05);
}

.suggestion-card__add .icon-mask--white {
    display: block;
    width: 20px;
    height: 20px;
    background-color: white;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* ========== Day Navigation ========== */
.day-navigation {
    background: white;
    border: 1px solid var(--planner-border);
    border-radius: var(--planner-radius-lg);
    padding: var(--space-2);
    margin-bottom: var(--space-4);
}

.day-nav-tabs {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
}

.day-nav-tab {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2-5) var(--space-5);
    background: var(--planner-gray-100);
    border: 1px solid transparent;
    border-radius: var(--planner-radius);
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--planner-gray-600);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.day-nav-tab:hover {
    background: var(--planner-gray-200);
    color: var(--planner-gray-800);
}

.day-nav-tab.active {
    background: var(--planner-red);
    color: white;
    border-color: var(--planner-red);
}

.day-nav-tab .icon {
    width: 18px; height: 18px;
}

.day-nav-tab-label {
    font-weight: 600;
}

.day-nav-tab-date {
    font-size: var(--text-caption);
    opacity: 0.8;
}

/* ========== Agenda Container ========== */
.agenda-container {
    flex: 1;
    background: white;
    border: 1px solid var(--planner-border);
    border-radius: var(--planner-radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ========== Empty State ========== */
.agenda-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
    text-align: center;
}

.empty-icon {
    width: 48px;
    height: 48px;
    background: #EBF5FB;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.empty-icon .icon {
    width: 22px; height: 22px;
    color: #2471A3;
}

.empty-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--text-display);
    font-weight: 600;
    color: var(--planner-gray-900);
    margin: 0 0 6px 0;
    letter-spacing: -0.025em;
}

.empty-subtitle {
    font-size: var(--text-small);
    color: var(--planner-gray-500);
    margin: 0 0 24px 0;
}

.get-started-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-8);
    background: var(--planner-red);
    color: white;
    border: none;
    border-radius: 24px;
    font-size: var(--text-ui);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    margin-bottom: var(--space-3);
}

.get-started-btn:hover {
    background: var(--planner-red-dark);
}

.empty-divider {
    margin: var(--space-5) 0;
    color: var(--planner-gray-400);
    font-size: var(--text-meta);
}

.ask-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2-5) var(--space-5);
    background: white;
    color: var(--planner-gray-700);
    border: 1px solid var(--planner-border);
    border-radius: 24px;
    font-size: var(--text-small);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.ask-ai-btn:hover {
    border-color: var(--planner-red);
    color: var(--planner-red);
}

.ask-ai-btn .icon {
    width: 18px; height: 18px;
}

/* ========== Agenda Items ========== */
.agenda-items {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
}

/* ========== Day Containers ========== */
.agenda-day-container {
    margin-bottom: var(--space-6);
}

.agenda-day-container:last-child {
    margin-bottom: 0;
}

.agenda-day-header {
    display: flex;
    align-items: center;
    padding: var(--space-3) 0;
    margin-bottom: var(--space-2);
}

.agenda-day-title {
    font-size: var(--text-h4);
    font-weight: 600;
    color: var(--planner-gray-900);
    letter-spacing: -0.01em;
}

.agenda-day-content {
    background-image: radial-gradient(circle, var(--planner-gray-300) 1px, transparent 1px);
    background-size: 16px 16px;
    background-color: var(--planner-gray-50);
    border: 1px solid var(--planner-gray-200);
    border-radius: var(--planner-radius-lg);
    padding: var(--space-4);
    min-height: 120px;
}

.agenda-day-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    color: var(--planner-gray-400);
    text-align: center;
}

.agenda-day-empty .icon {
    width: 32px; height: 32px;
    margin-bottom: var(--space-2);
    opacity: 0.5;
}

.agenda-day-empty p {
    margin: 0;
    font-size: var(--text-small);
}

.agenda-item {
    display: flex;
    align-items: flex-start;
    padding: var(--space-3);
    border: 1px solid var(--planner-gray-300);
    border-left: 3px solid var(--planner-gray-400);
    border-radius: 8px;
    margin-bottom: var(--space-2);
    gap: var(--space-2-5);
    cursor: pointer;
    transition: all 0.15s ease;
    background: white;
}

.agenda-item[data-type="exercise"] {
    border-color: var(--color-exercise);
    background: var(--color-exercise-bg);
}

.agenda-item[data-type="icebreaker"] {
    border-color: var(--color-icebreaker);
    background: var(--color-icebreaker-bg);
}

.agenda-item[data-type="break"] {
    border-color: var(--planner-gray-300);
    background: var(--planner-gray-50);
}

.agenda-item[data-type="custom"] {
    border-color: var(--color-custom);
    background: var(--color-custom-bg);
}

.agenda-item:hover {
    box-shadow: var(--planner-shadow-lg);
}

.agenda-item.expanded {
    flex-wrap: wrap;
    box-shadow: var(--planner-shadow);
}

.item-drag-handle {
    color: var(--planner-gray-400);
    cursor: grab;
    padding: var(--space-1) 0;
    flex-shrink: 0;
}

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

.item-drag-handle .icon {
    width: 20px; height: 20px;
}

.item-time {
    font-size: var(--text-ui);
    font-weight: 500;
    color: var(--planner-gray-900);
    min-width: 48px;
    padding-top: var(--space-0-5);
    font-variant-numeric: tabular-nums;
}

.item-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--color-break-light);
    color: var(--color-break);
}

.agenda-item[data-type="exercise"] .item-icon {
    background: var(--color-exercise-bg);
    color: var(--color-exercise);
}

.agenda-item[data-type="icebreaker"] .item-icon {
    background: var(--color-icebreaker-light);
    color: var(--color-icebreaker);
}

.agenda-item[data-type="break"] .item-icon {
    background: var(--planner-gray-100);
    border: 1px solid var(--planner-gray-300);
    color: var(--planner-gray-600);
}

.agenda-item[data-type="custom"] .item-icon {
    background: var(--color-custom-light);
    color: var(--color-custom);
}


/* Day 1 icons: white */
.agenda-day-container[data-day="1"] .agenda-item .item-icon {
    color: white !important;
}

.item-icon .icon {
    width: 14px; height: 14px;
}

.item-details {
    flex: 1;
    min-width: 0;
}

.item-title-row {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-1);
}

.item-title {
    font-size: var(--text-body);
    font-weight: 500;
    color: var(--planner-gray-900);
    margin: 0;
    letter-spacing: -0.01em;
}

.item-title-link {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    text-decoration: none;
    color: inherit;
}

.item-title-link:hover .item-title {
    color: var(--planner-red);
}

.item-title-link .item-link-icon {
    font-size: var(--text-small);
    color: var(--planner-gray-400);
    opacity: 0;
    transition: opacity 0.2s;
}

.item-title-link:hover .item-link-icon {
    opacity: 1;
    color: var(--planner-red);
}

/* Duration badge in title row */
.item-duration-badge {
    display: inline-block;
    padding: 3px var(--space-2-5);
    border-radius: 12px;
    font-size: var(--text-caption);
    font-weight: 500;
    background: var(--planner-gray-100);
    color: var(--planner-gray-600);
    margin-left: var(--space-2);
}

/* Type badge */
.item-type-badge {
    display: inline-block;
    padding: 3px var(--space-2-5);
    border-radius: 12px;
    font-size: var(--text-caption);
    font-weight: 500;
    background: var(--color-exercise-light);
    color: var(--color-exercise);
    margin-left: var(--space-1);
    text-transform: capitalize;
}

/* Type badge variants */
.item-type-badge.break {
    background: var(--color-break-light);
    color: var(--color-break);
}

.item-type-badge.exercise {
    background: var(--color-exercise-light);
    color: var(--color-exercise);
}

.item-type-badge.icebreaker {
    background: var(--color-icebreaker-light);
    color: var(--color-icebreaker);
}

.item-description {
    font-size: var(--text-small);
    color: var(--planner-gray-500);
    margin: 0 0 8px 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hide description if empty */
.item-description:empty {
    display: none;
}

/* Show full description when item is expanded */
.agenda-item.expanded .item-description {
    -webkit-line-clamp: unset;
}

.item-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: auto;
    flex-shrink: 0;
}

.item-delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: none;
    border: none;
    border-radius: 5px;
    color: var(--planner-gray-400);
    cursor: pointer;
    transition: all 0.15s ease;
}

.item-delete-btn:hover {
    background: var(--planner-interactive-bg);
    color: var(--planner-interactive);
}

.item-delete-btn .icon {
    width: 14px; height: 14px;
}

.item-notes-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: none;
    border: none;
    border-radius: 5px;
    color: var(--planner-gray-400);
    cursor: pointer;
    transition: all 0.15s ease;
}

.item-notes-btn.has-notes {
    color: var(--planner-primary, #4A90D9);
}

.item-notes-btn:hover {
    background: var(--planner-interactive-bg);
    color: var(--planner-primary, #4A90D9);
}

.item-notes-btn .icon {
    width: 14px; height: 14px;
}

.item-meta {
    display: none;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Show duration controls only when expanded */
.agenda-item.expanded .item-meta {
    display: flex;
}

.item-duration {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-meta);
    color: var(--planner-gray-500);
}

.item-duration .icon {
    width: 14px; height: 14px;
}

.item-tag {
    display: inline-block;
    padding: var(--space-0-5) var(--space-2);
    border-radius: 12px;
    font-size: var(--text-micro);
    font-weight: 500;
    border: 1px solid var(--planner-border);
    color: var(--planner-gray-600);
    background: white;
}

.item-status-badge {
    display: none;
    padding: var(--space-0-5) var(--space-2);
    border-radius: 12px;
    font-size: var(--text-nano);
    font-weight: 600;
    margin-left: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.item-status-badge.shortened,
.item-status-badge.lengthened {
    display: inline-block;
}

.item-status-badge.shortened {
    background: rgba(34, 197, 94, 0.15);
    color: var(--planner-green);
}

.item-status-badge.lengthened {
    background: rgba(59, 130, 246, 0.15);
    color: var(--planner-primary);
}

/* ========== Expanded Edit Panel ========== */
.item-edit-panel {
    display: none;
    width: 100%;
    padding: var(--space-4) 0 0 0;
    margin-top: var(--space-3);
    border-top: 1px solid var(--planner-border);
    flex-basis: 100%;
}

.agenda-item.expanded .item-edit-panel {
    display: block;
}

.edit-row {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.edit-row:last-child {
    margin-bottom: 0;
}

.edit-field {
    flex: 1;
}

.edit-field.duration-field {
    flex: 0 0 120px;
}

.edit-field.full {
    flex: 1;
}

.edit-field label {
    display: block;
    font-size: var(--text-caption);
    font-weight: 500;
    color: var(--planner-gray-600);
    margin-bottom: var(--space-1-5);
}

.edit-title-input,
.edit-duration-input,
.edit-notes-input {
    width: 100%;
    padding: var(--space-2-5) var(--space-3);
    border: 1px solid var(--planner-border);
    border-radius: var(--planner-radius);
    font-size: var(--text-small);
    font-family: inherit;
    transition: border-color 0.2s;
}

.edit-title-input:focus,
.edit-duration-input:focus,
.edit-notes-input:focus {
    outline: none;
    border-color: var(--planner-red);
}

.edit-notes-input {
    resize: vertical;
    min-height: 60px;
}

.type-row {
    flex-direction: column;
    gap: var(--space-2);
}

.type-row > label {
    font-size: var(--text-caption);
    font-weight: 500;
    color: var(--planner-gray-600);
}

.type-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.type-option {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1-5) var(--space-3);
    border: 1px solid var(--planner-border);
    border-radius: 20px;
    font-size: var(--text-meta);
    color: var(--planner-gray-700);
    cursor: pointer;
    transition: all 0.2s;
}

.type-option:hover {
    border-color: var(--planner-gray-400);
}

.type-option input[type="radio"] {
    display: none;
}

.type-option input[type="radio"]:checked + .type-dot + span {
    font-weight: 500;
}

.type-option:has(input:checked) {
    border-color: var(--planner-red);
    background: var(--planner-red-light);
}

.type-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.type-dot.exercise { background: var(--planner-exercise-color); }
.type-dot.icebreaker { background: var(--planner-icebreaker-color); }
.type-dot.break { background: var(--planner-break-color); }

.edit-actions-row {
    margin-top: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--planner-border);
    justify-content: flex-end;
    gap: var(--space-2);
}

.edit-delete-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    margin-left: auto;
    padding: var(--space-2) var(--space-4);
    background: none;
    border: 1px solid var(--planner-interactive);
    border-radius: var(--planner-radius);
    color: var(--planner-interactive);
    font-size: var(--text-meta);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.edit-delete-btn:hover {
    background: var(--planner-interactive);
    color: white;
}

.edit-delete-btn .icon {
    width: 16px; height: 16px;
}

/* ========== Library Cards ========== */
.library-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2-5);
    background: white;
    border: 1px solid var(--planner-border);
    border-radius: 6px;
    margin-bottom: var(--space-1-5);
    cursor: grab;
    transition: all 0.15s ease;
}

.library-card:hover {
    box-shadow: var(--planner-shadow);
    border-color: var(--planner-gray-300);
}

.library-card:active {
    cursor: grabbing;
}

.library-card:last-child {
    margin-bottom: 0;
}

.card-drag-handle {
    color: var(--planner-gray-400);
    padding-top: var(--space-0-5);
    flex-shrink: 0;
}

.card-drag-handle .icon {
    width: 18px; height: 18px;
}

.card-icon {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(220, 38, 38, 0.2);
    color: var(--planner-red);
}

/* Card icon colors now come from _cards.css per-type rules — no override needed */

.card-icon .icon {
    width: 14px; height: 14px;
}

.card-content {
    flex: 1;
    min-width: 0;
}

.card-title {
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--planner-gray-900);
    margin: 0 0 3px 0;
    letter-spacing: -0.01em;
}

.card-meta {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
    margin-bottom: var(--space-1);
}

.card-tag {
    display: inline-block;
    padding: 1px var(--space-1-5);
    border-radius: 10px;
    font-size: var(--text-nano);
    font-weight: 500;
    border: 1px solid var(--planner-border);
    color: var(--planner-gray-600);
    background: white;
}

.card-description {
    font-size: var(--text-caption);
    color: var(--planner-gray-500);
    margin: 0 0 4px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-duration {
    font-size: var(--text-caption);
    color: var(--planner-gray-500);
}

/* ========== Create Custom Activity Section ========== */
.sidebar-custom-activity {
    padding: var(--space-4);
    border-top: 1px solid var(--planner-border);
    text-align: center;
    background: transparent;
    flex-shrink: 0;
}

.custom-activity-label {
    font-size: var(--text-meta);
    color: var(--planner-gray-500);
    margin: 0 0 12px 0;
}

.create-custom-btn {
    width: 100%;
    padding: var(--space-3) var(--space-6);
    background: var(--planner-red);
    color: white;
    border: none;
    border-radius: 24px;
    font-size: var(--text-small);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.create-custom-btn:hover {
    background: var(--planner-red-dark);
}

/* Inline Custom Activity (inside sections) */
.sidebar-custom-activity.inline {
    border-top: none;
    padding: var(--space-3) 0 0 0;
    margin-top: var(--space-3);
    border-top: 1px dashed var(--planner-gray-300);
    background: transparent;
}

.sidebar-custom-activity.inline .custom-activity-label {
    font-size: var(--text-caption);
    margin-bottom: var(--space-2);
}

.sidebar-custom-activity.inline .create-custom-btn {
    padding: var(--space-2-5) var(--space-5);
    font-size: var(--text-meta);
}

/* ========== Modal Overlay ========== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--planner-z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;

    /* Compact type scale for modals (outside .workshop-planner) */
    --text-display: 1.25rem;
    --text-h1: 1rem;
    --text-h2: 0.875rem;
    --text-h3: 0.8125rem;
    --text-h4: 0.75rem;
    --text-body: 0.75rem;
    --text-ui: 0.6875rem;
    --text-small: 0.6875rem;
    --text-meta: 0.625rem;
    --text-caption: 0.5625rem;
    --text-micro: 0.5rem;
    --text-nano: 0.5rem;
}

.modal-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* ========== AI Modal ========== */
.ai-modal {
    background: white;
    border-radius: var(--planner-radius-xl);
    width: 100%;
    max-width: 520px;
    margin: var(--space-5);
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.2s;
}

.modal-overlay.open .ai-modal {
    transform: scale(1);
}

.ai-modal-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    background: linear-gradient(135deg, var(--planner-red) 0%, var(--planner-red-dark) 100%);
    color: white;
    position: relative;
    border-bottom: none;
}

.ai-modal-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ai-modal-icon .icon {
    width: 24px; height: 24px;
    color: white;
}

.ai-modal-title-wrap {
    flex: 1;
}

.ai-modal-title {
    font-size: 0.75rem;
    font-weight: 600;
    margin: 0;
    color: white;
    letter-spacing: -0.01em;
}

.ai-modal-subtitle {
    font-size: 0.625rem;
    opacity: 0.9;
    margin: var(--space-0-5) 0 0 0;
    color: white;
    line-height: 1.4;
}

.ai-modal-close {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.ai-modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}

.ai-modal-close:active {
    transform: rotate(90deg) scale(0.9);
}

.ai-modal-close .icon {
    width: 18px; height: 18px;
}

.ai-modal-body {
    padding: var(--space-6);
}

.ai-input-textarea {
    width: 100%;
    padding: var(--space-3-5) var(--space-4);
    border: 1px solid var(--planner-border);
    border-radius: var(--planner-radius);
    font-size: var(--text-small);
    font-family: inherit;
    resize: vertical;
    min-height: 100px;
    transition: border-color 0.2s;
}

.ai-input-textarea:focus {
    outline: none;
    border-color: var(--planner-red);
}

.ai-input-textarea::placeholder {
    color: var(--planner-gray-400);
}

.ai-modal-footer {
    padding: 0 24px 24px;
}

.ai-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3) var(--space-6);
    background: var(--planner-gray-100);
    border: 1px solid var(--planner-border);
    border-radius: var(--planner-radius);
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--planner-gray-700);
    cursor: pointer;
    transition: all 0.2s;
}

.ai-submit-btn:hover {
    background: var(--planner-gray-200);
}

.ai-submit-btn .icon {
    width: 18px; height: 18px;
}

/* ========== Share Modal ========== */
.share-modal {
    background: white;
    border-radius: var(--planner-radius-xl);
    width: 100%;
    max-width: 480px;
    margin: var(--space-5);
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.2s;
}

.modal-overlay.open .share-modal {
    transform: scale(1);
}

.share-modal-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    background: linear-gradient(135deg, var(--planner-red) 0%, var(--planner-red-dark) 100%);
    color: white;
    position: relative;
    border-bottom: none;
}

.share-modal-header > .icon {
    width: 24px; height: 24px;
    margin-top: var(--space-0-5);
}

.share-modal-title-wrap {
    flex: 1;
}

.share-modal-title {
    font-size: var(--text-body);
    font-weight: 600;
    margin: 0 0 2px 0;
    letter-spacing: -0.01em;
}

.share-modal-subtitle {
    font-size: var(--text-meta);
    opacity: 0.9;
    margin: 0;
}

.share-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-modal-close:hover {
    background: rgba(255,255,255,0.3);
}

.share-modal-body {
    padding: var(--space-6);
}

.share-section {
    margin-bottom: var(--space-6);
}

.share-section:last-child {
    margin-bottom: 0;
}

.share-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--planner-gray-900);
    margin-bottom: var(--space-3);
}

.share-section-header .icon {
    width: 20px; height: 20px;
    color: var(--planner-gray-600);
}

.invite-input-wrap {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.invite-email-input {
    flex: 1;
    padding: var(--space-2-5) var(--space-3-5);
    border: 1px solid var(--planner-border);
    border-radius: var(--planner-radius);
    font-size: var(--text-small);
}

.invite-email-input:focus {
    outline: none;
    border-color: var(--planner-red);
}

.invite-btn {
    padding: var(--space-1-5) var(--space-5);
    background: var(--planner-red);
    color: white;
    border: none;
    border-radius: var(--planner-radius);
    font-size: var(--text-small);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
}

.invite-btn:hover {
    background: var(--planner-red-dark);
}

.invite-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.invite-btn .icon.spin {
    animation: spin 1s linear infinite;
}

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

.share-divider-text {
    display: block;
    text-align: center;
    font-size: var(--text-micro);
    color: var(--planner-gray-400);
    letter-spacing: 0.5px;
}

.share-link-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--planner-gray-50);
    border: 1px solid var(--planner-border);
    border-radius: var(--planner-radius);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
}

.share-link-url {
    flex: 1;
    font-size: var(--text-small);
    color: var(--planner-gray-700);
    margin: 0;
    word-break: break-all;
    font-family: monospace;
}

.share-link-note {
    font-size: var(--text-caption);
    color: var(--planner-gray-500);
    margin: 0;
    line-height: 1.5;
}

.copy-link-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-2) var(--space-3-5);
    background: var(--planner-red);
    border: none;
    border-radius: var(--planner-radius);
    font-size: var(--text-meta);
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.copy-link-btn:hover {
    background: var(--planner-primary-dark);
}

.export-excel-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: #217346;
    border: none;
    border-radius: var(--planner-radius);
    font-size: var(--text-small);
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    justify-content: center;
}

.export-excel-btn:hover {
    background: #1a5c38;
}

.export-excel-btn .icon {
    width: 20px; height: 20px;
}

.copy-link-btn .icon {
    width: 16px; height: 16px;
}

/* ========== Simple Modal Styles ========== */
.custom-activity-modal,
.get-started-modal {
    background: white;
    border-radius: var(--planner-radius-xl);
    width: 100%;
    max-width: 480px;
    margin: var(--space-5);
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.2s;
}

.modal-overlay.open .custom-activity-modal,
.modal-overlay.open .get-started-modal {
    transform: scale(1);
}

.modal-header-simple {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--planner-border);
}

.modal-header-simple h2 {
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--planner-gray-900);
    margin: 0;
}

.modal-close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--planner-gray-500);
    cursor: pointer;
}

.modal-close-btn:hover {
    background: var(--planner-gray-100);
    color: var(--planner-gray-700);
}

.modal-body-simple {
    padding: var(--space-6);
}

.form-group {
    margin-bottom: var(--space-4);
}

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

.form-group label {
    display: block;
    font-size: var(--text-meta);
    font-weight: 500;
    color: var(--planner-gray-700);
    margin-bottom: var(--space-1-5);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: var(--space-2-5) var(--space-3);
    border: 1px solid var(--planner-border);
    border-radius: var(--planner-radius);
    font-size: var(--text-small);
    font-family: inherit;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--planner-red);
}

.form-row {
    display: flex;
    gap: var(--space-4);
}

.form-row .form-group {
    flex: 1;
}

.modal-footer-simple {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--planner-border);
}

.cancel-btn {
    padding: var(--space-2-5) var(--space-5);
    background: white;
    border: 1px solid var(--planner-border);
    border-radius: var(--planner-radius);
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--planner-gray-700);
    cursor: pointer;
    transition: all 0.2s;
}

.cancel-btn:hover {
    background: var(--planner-gray-50);
}

.add-activity-btn,
.primary-btn {
    padding: var(--space-2-5) var(--space-5);
    background: var(--planner-red);
    border: none;
    border-radius: var(--planner-radius);
    font-size: var(--text-small);
    font-weight: 500;
    color: white;
    cursor: pointer;
    transition: background 0.2s;
}

.add-activity-btn:hover,
.primary-btn:hover {
    background: var(--planner-red-dark);
}

/* ========== Red Header Modal (Reusable) ========== */
.red-header-modal {
    background: white;
    border-radius: var(--planner-radius-xl);
    width: 100%;
    max-width: 520px;
    margin: var(--space-5);
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.2s;
}

.red-header-modal.compact {
    max-width: 480px;
}

.modal-overlay.open .red-header-modal {
    transform: scale(1);
}

.red-header-modal-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    background: linear-gradient(135deg, var(--planner-red) 0%, var(--planner-red-dark) 100%);
    color: white;
    position: relative;
    border-bottom: none;
}

.red-header-modal-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.red-header-modal-icon .icon {
    width: 24px; height: 24px;
    color: white;
}

.red-header-modal-title-wrap {
    flex: 1;
}

.red-header-modal-title {
    font-size: 0.75rem;
    font-weight: 600;
    margin: 0;
    color: white;
    letter-spacing: -0.01em;
}

.red-header-modal-subtitle {
    font-size: 0.625rem;
    opacity: 0.9;
    margin: var(--space-0-5) 0 0 0;
    color: white;
    line-height: 1.4;
}

.red-header-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.red-header-modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}

.red-header-modal-close:active {
    transform: rotate(90deg) scale(0.9);
}

.red-header-modal-close .icon {
    width: 18px; height: 18px;
}

.red-header-modal-body {
    padding: var(--space-6);
}

.red-header-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--planner-border);
}

.red-header-modal-footer.single-btn {
    border-top: none;
    padding-top: 0;
}

/* Modal buttons now use ws-btn from design system */

.label-optional {
    color: var(--planner-gray-400);
    font-weight: 400;
}

/* ========== Export Modal ========== */
.export-label {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--planner-gray-900);
    margin: 0 0 16px 0;
}

.export-format-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.export-format-option {
    cursor: pointer;
}

.export-format-option input {
    display: none;
}

.export-format-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 2px solid var(--planner-border);
    border-radius: var(--planner-radius-lg);
    transition: all 0.2s;
}

.export-format-card:hover {
    border-color: var(--planner-gray-300);
}

.export-format-option input:checked + .export-format-card {
    border-color: var(--planner-red);
    background: var(--planner-red-light);
}

.export-format-option input:checked + .export-format-card .icon {
    color: var(--planner-red);
}

.export-format-card .icon {
    width: 32px; height: 32px;
    color: var(--planner-gray-500);
}

.export-format-name {
    font-size: var(--text-meta);
    font-weight: 500;
    color: var(--planner-gray-700);
    text-align: center;
}

/* ========== Cleanup Modal ========== */
.cleanup-body {
    padding: var(--space-4) var(--space-6) !important;
}

#cleanupModal .red-header-modal {
    position: relative;
}

.cleanup-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--planner-border);
    border-radius: var(--planner-radius-lg);
    margin-bottom: var(--space-2-5);
    cursor: pointer;
    transition: all 0.2s;
}

.cleanup-option:last-child {
    margin-bottom: 0;
}

.cleanup-option:hover {
    border-color: var(--planner-gray-300);
}

.cleanup-option.highlight {
    border-color: var(--planner-gray-200);
    background: transparent;
}

.cleanup-option-content {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.cleanup-option-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--planner-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cleanup-option-icon.blue,
.cleanup-option-icon.orange,
.cleanup-option-icon.purple,
.cleanup-option-icon.green,
.cleanup-option-icon.red {
    background: rgba(37, 99, 235, 0.12);
    color: var(--planner-primary);
}

.cleanup-option-icon .icon {
    width: 20px; height: 20px;
}

.cleanup-option-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
}

.cleanup-option-title {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--planner-gray-900);
}

.cleanup-option.highlight .cleanup-option-title {
    color: #000;
}

.cleanup-option-desc {
    font-size: var(--text-caption);
    color: var(--planner-gray-500);
}

.cleanup-option.highlight .cleanup-option-desc {
    color: #000;
}

/* Cleanup Results */
.cleanup-results {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--planner-green-light, #dcfce7);
    border: 1px solid var(--planner-green, #22c55e);
    border-radius: var(--planner-radius);
}

.cleanup-results-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--planner-green-dark, #16a34a);
    margin-bottom: var(--space-3);
}

.cleanup-results-header .icon {
    width: 20px; height: 20px;
    color: var(--planner-green, #22c55e);
}

.cleanup-results-list {
    margin: 0;
    padding: 0 0 0 24px;
    list-style: none;
}

.cleanup-results-list li {
    position: relative;
    font-size: var(--text-meta);
    color: var(--planner-gray-700);
    padding: var(--space-1) 0;
    padding-left: var(--space-2);
}

.cleanup-results-list li::before {
    content: '✓';
    position: absolute;
    left: -16px;
    color: var(--planner-green, #22c55e);
    font-weight: bold;
}

/* Cleanup Results Overlay */
.cleanup-results-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.98);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 16px;
}

.cleanup-results-overlay.visible {
    display: flex;
}

.cleanup-results-overlay-content {
    text-align: center;
    padding: var(--space-6);
    max-width: 320px;
}

.cleanup-results-overlay-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--planner-green-light, #dcfce7);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.cleanup-results-overlay-icon .icon {
    width: 28px; height: 28px;
    color: var(--planner-green, #22c55e);
}

.cleanup-results-overlay-title {
    font-size: var(--text-h4);
    font-weight: 600;
    color: var(--planner-gray-900);
    margin: 0 0 16px 0;
}

.cleanup-results-overlay-list {
    margin: 0 0 20px 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.cleanup-results-overlay-list li {
    position: relative;
    font-size: var(--text-meta);
    color: var(--planner-gray-700);
    padding: var(--space-1-5) 0 var(--space-1-5) var(--space-6);
    border-bottom: 1px solid var(--planner-border);
}

.cleanup-results-overlay-list li:last-child {
    border-bottom: none;
}

.cleanup-results-overlay-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--planner-green, #22c55e);
    font-weight: bold;
}

.cleanup-results-overlay-btn {
    background: var(--planner-red);
    color: white;
    border: none;
    padding: var(--space-2-5) var(--space-8);
    border-radius: var(--planner-radius);
    font-size: var(--text-small);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.cleanup-results-overlay-btn:hover {
    background: var(--planner-red-dark, #b91c1c);
}

/* Cleanup Footer */
.cleanup-footer {
    display: flex;
    align-items: center;
    justify-content: space-between !important;
}

.cleanup-footer-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.cleanup-clear-all-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    background: transparent;
    border: 1px solid var(--planner-gray-300);
    color: var(--planner-gray-600);
    padding: var(--space-2) var(--space-3-5);
    border-radius: var(--planner-radius);
    font-size: var(--text-meta);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.cleanup-clear-all-btn:hover {
    border-color: var(--planner-red);
    color: var(--planner-red);
    background: rgba(220, 38, 38, 0.05);
}

.cleanup-clear-all-btn .icon {
    width: 18px; height: 18px;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(37, 99, 235, 0.25);
    transition: 0.3s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--planner-primary);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

/* ========== Create Workshop Modal ========== */
.create-workshop-modal {
    background: white;
    border-radius: var(--planner-radius-xl);
    width: 100%;
    max-width: 520px;
    margin: var(--space-5);
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.2s;
}

.modal-overlay.open .create-workshop-modal {
    transform: scale(1);
}

.create-workshop-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    background: linear-gradient(135deg, var(--planner-red) 0%, var(--planner-red-dark) 100%);
    color: white;
    position: relative;
    border-bottom: none;
}

.create-workshop-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.create-workshop-icon .icon {
    width: 24px; height: 24px;
    color: white;
}

.create-workshop-title-wrap {
    flex: 1;
}

.create-workshop-title {
    font-size: 0.75rem;
    font-weight: 600;
    margin: 0;
    color: white;
    letter-spacing: -0.01em;
}

.create-workshop-subtitle {
    font-size: 0.625rem;
    opacity: 0.9;
    margin: var(--space-1) 0 0 0;
    color: white;
    line-height: 1.4;
}

.create-workshop-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.create-workshop-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}

.create-workshop-close:active {
    transform: rotate(90deg) scale(0.9);
}

.create-workshop-close .icon {
    width: 18px; height: 18px;
}

.create-workshop-body {
    padding: var(--space-6);
}

.create-workshop-body .form-group input::placeholder,
.create-workshop-body .form-group textarea::placeholder {
    color: var(--planner-gray-400);
}

/* Duration Options Grid */
.duration-options-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.duration-option {
    cursor: pointer;
}

.duration-option input {
    display: none;
}

.duration-option-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-2);
    background: var(--planner-gray-50);
    border: 2px solid var(--planner-border);
    border-radius: var(--planner-radius);
    text-align: center;
    transition: all 0.2s;
}

.duration-option input:checked + .duration-option-card {
    background: var(--planner-red-light);
    border-color: var(--planner-red);
}

.duration-option-card:hover {
    border-color: var(--planner-gray-400);
    background: white;
}

.duration-option input:checked + .duration-option-card:hover {
    border-color: var(--planner-red);
    background: var(--planner-red-light);
}

.duration-option-label {
    font-size: var(--text-meta);
    font-weight: 600;
    color: var(--planner-gray-800);
    display: block;
    margin-bottom: var(--space-0-5);
}

.duration-option input:checked + .duration-option-card .duration-option-label {
    color: var(--planner-red);
}

.duration-option-time {
    font-size: var(--text-micro);
    color: var(--planner-gray-500);
    display: block;
}

/* Create Workshop Checkboxes */
.create-workshop-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: var(--space-2);
}

.create-workshop-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-2);
    background: var(--planner-gray-50, #f9fafb);
    border: 1px solid var(--planner-border);
    border-radius: var(--planner-radius);
    cursor: pointer;
    transition: all 0.2s;
}

.create-workshop-checkbox:hover {
    background: var(--planner-gray-100, #f3f4f6);
    border-color: var(--planner-gray-300);
}

.create-workshop-checkbox input[type="checkbox"] {
    display: none;
}

.create-workshop-checkbox .checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--planner-gray-300);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.create-workshop-checkbox input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--planner-red);
    border-color: var(--planner-red);
}

.create-workshop-checkbox input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '✓';
    color: white;
    font-size: var(--text-caption);
    font-weight: bold;
}

.create-workshop-checkbox .checkbox-label {
    font-size: var(--text-small);
    color: var(--planner-gray-700);
}

/* Create workshop buttons now use ws-btn from design system */

/* ========== Topbar Controls (Loaded State) ========== */
.planner-topbar.workshop-loaded {
    justify-content: space-between;
}

.topbar-center {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.topbar-control-group {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    background: rgba(255, 255, 255, 0.15);
    padding: var(--space-1-5) var(--space-3);
    border-radius: var(--planner-radius);
}

.topbar-control-icon {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

.topbar-dropdown,
.topbar-date-input,
.topbar-time-input {
    padding: var(--space-1) var(--space-2);
    border: none;
    border-radius: 4px;
    font-size: var(--text-meta);
    font-weight: 500;
    color: white;
    background: transparent;
    cursor: pointer;
    transition: background 0.2s;
}

.topbar-dropdown {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: var(--space-5);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
}

.topbar-dropdown option {
    color: var(--planner-gray-900);
    background: white;
}

.topbar-dropdown:hover,
.topbar-date-input:hover,
.topbar-time-input:hover {
    background: rgba(255, 255, 255, 0.1);
}

.topbar-dropdown:focus,
.topbar-date-input:focus,
.topbar-time-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.2);
}

.topbar-date-input {
    min-width: 130px;
}

.topbar-date-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

.topbar-time-input {
    min-width: 80px;
}

.topbar-time-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/* ========== Disabled Topbar Buttons ========== */
.topbar-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.topbar-action-btn:disabled:hover {
    background: white;
    color: var(--planner-gray-600);
}

.topbar-action-btn.primary:disabled {
    background: var(--planner-green);
    opacity: 0.5;
}

.topbar-action-btn.primary:disabled:hover {
    background: var(--planner-green);
}

/* Coach Button Styles */
.topbar-action-btn.coach-btn {
    background: var(--planner-green);
    color: white;
    border: 1px solid white;
}

.topbar-action-btn.coach-btn:hover:not(:disabled) {
    background: var(--planner-green-dark, #047857);
}

.topbar-action-btn.coach-btn:hover:not(:disabled) .icon {
    color: white;
}

.topbar-action-btn.coach-btn:disabled {
    background: var(--planner-gray-300);
    color: var(--planner-gray-500);
    border-color: var(--planner-gray-300);
    opacity: 0.6;
}

.topbar-action-btn.coach-btn:disabled:hover {
    background: var(--planner-gray-300);
}

/* ========== Drag States ========== */
.library-card.dragging,
.agenda-item.dragging {
    opacity: 0.5;
}

.agenda-items.drag-over {
    background: var(--planner-gray-50);
}

.sortable-ghost {
    opacity: 0.4;
}

.sortable-chosen {
    box-shadow: var(--planner-shadow-lg);
}

/* ========== Responsive ========== */
@media (max-width: 1024px) {
    .activity-sidebar {
        width: 280px;
    }

    .agenda-main {
        padding: var(--space-5);
    }
}

@media (max-width: 768px) {
    .planner-body {
        flex-direction: column;
    }

    .activity-sidebar {
        width: 100%;
        height: 300px;
        border-left: none;
        border-top: 1px solid var(--planner-border);
    }

    .agenda-main {
        padding: var(--space-4);
    }

    .agenda-header-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .clear-all-btn {
        align-self: flex-end;
    }
}

/* ========== Load Workshop Modal ========== */
.load-workshop-modal {
    background: white;
    border-radius: var(--planner-radius-xl);
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.load-workshop-modal-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    background: linear-gradient(135deg, var(--planner-red) 0%, var(--planner-red-dark) 100%);
    color: white;
    border-bottom: none;
}

.load-workshop-modal-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.load-workshop-modal-icon .icon {
    width: 24px; height: 24px;
    color: white;
}

.load-workshop-modal-title-wrap {
    flex: 1;
}

.load-workshop-modal-title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    letter-spacing: -0.01em;
}

.load-workshop-modal-subtitle {
    margin: var(--space-0-5) 0 0 0;
    font-size: 0.625rem;
    opacity: 0.9;
    color: white;
}

.load-workshop-modal-close {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.load-workshop-modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}

.load-workshop-modal-close:active {
    transform: rotate(90deg) scale(0.9);
}

.load-workshop-modal-close .icon {
    width: 18px; height: 18px;
}

.load-workshop-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-6);
}

.saved-workshops-search {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-3) var(--space-4);
    background: var(--planner-gray-50);
    border: 1px solid var(--planner-border);
    border-radius: var(--planner-radius);
    margin-bottom: var(--space-4);
}

.saved-workshops-search input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--text-small);
    outline: none;
}

.saved-workshops-search input::placeholder {
    color: var(--planner-gray-400);
}

.saved-workshops-search .icon {
    color: var(--planner-gray-400);
    width: 20px; height: 20px;
}

.saved-workshops-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12);
    color: var(--planner-gray-500);
    gap: var(--space-3);
}

.saved-workshops-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.saved-workshop-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: white;
    border: 1px solid var(--planner-border);
    border-radius: var(--planner-radius);
    cursor: pointer;
    transition: all 0.2s;
}

.saved-workshop-card:hover {
    border-color: var(--planner-red);
    box-shadow: var(--planner-shadow);
}

.saved-workshop-icon {
    width: 48px;
    height: 48px;
    background: var(--planner-red-light);
    border-radius: var(--planner-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.saved-workshop-icon .icon {
    width: 24px; height: 24px;
    color: var(--planner-red);
}

.saved-workshop-content {
    flex: 1;
    min-width: 0;
}

.saved-workshop-name {
    font-size: var(--text-ui);
    font-weight: 600;
    color: var(--planner-gray-900);
    margin: 0 0 4px;
}

.saved-workshop-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-meta);
    color: var(--planner-gray-500);
}

.saved-workshop-meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.saved-workshop-meta-item .icon {
    width: 16px; height: 16px;
}

.saved-workshop-actions {
    display: flex;
    gap: var(--space-1);
}

.saved-workshop-action-btn {
    width: 36px;
    height: 36px;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--planner-radius);
    color: var(--planner-gray-400);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.saved-workshop-action-btn:hover {
    background: var(--planner-gray-100);
    color: var(--planner-gray-600);
}

.saved-workshop-action-btn.delete:hover {
    background: var(--planner-red-light);
    color: var(--planner-red);
}

.saved-workshop-action-btn.coach {
    text-decoration: none;
}

.saved-workshop-action-btn.coach:hover {
    background: var(--planner-accent-light, #E8F4EC);
    color: var(--planner-accent, #2D8A4E);
}

.saved-workshops-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12);
    text-align: center;
    color: var(--planner-gray-500);
}

.saved-workshops-empty .icon {
    width: 48px; height: 48px;
    color: var(--planner-gray-300);
    margin-bottom: var(--space-4);
}

.saved-workshops-empty p {
    margin: 0 0 8px;
    font-size: var(--text-body);
    font-weight: 500;
    color: var(--planner-gray-600);
}

.saved-workshops-empty-hint {
    font-size: var(--text-small);
    color: var(--planner-gray-400);
}

/* ========== Templates Modal ========== */
.templates-modal {
    background: white;
    border-radius: var(--planner-radius-xl);
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.templates-modal-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    background: linear-gradient(135deg, var(--planner-red) 0%, var(--planner-red-dark) 100%);
    color: white;
    border-bottom: none;
}

.templates-modal-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.templates-modal-icon .icon {
    width: 24px; height: 24px;
    color: white;
}

.templates-modal-title-wrap {
    flex: 1;
}

.templates-modal-title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    letter-spacing: -0.01em;
}

.templates-modal-subtitle {
    margin: var(--space-0-5) 0 0 0;
    font-size: 0.625rem;
    opacity: 0.9;
    color: white;
    line-height: 1.4;
}

.templates-modal-close {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.templates-modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}

.templates-modal-close:active {
    transform: rotate(90deg) scale(0.9);
}

.templates-modal-close .icon {
    width: 18px; height: 18px;
}

.templates-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-6);
}

.templates-search {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--planner-gray-100);
    border: 1px solid var(--planner-gray-400);
    border-radius: var(--planner-radius);
    margin-bottom: var(--space-5);
}

.templates-search .icon {
    color: var(--planner-gray-500);
    width: 20px; height: 20px;
}

.templates-search input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--text-ui);
    outline: none;
    color: var(--planner-gray-800);
}

.templates-search input::placeholder {
    color: var(--planner-gray-500);
}

.templates-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px var(--space-5);
    gap: var(--space-4);
    color: var(--planner-gray-500);
}

.templates-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--planner-gray-200);
    border-top-color: var(--planner-red);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Generic spinner class */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--planner-gray-200);
    border-top-color: var(--planner-red);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5);
}

.templates-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px var(--space-5);
    color: var(--planner-gray-500);
}

.templates-empty .icon {
    width: 48px; height: 48px;
    margin-bottom: var(--space-3);
    opacity: 0.5;
}

.templates-empty p {
    margin: 0;
    font-size: var(--text-ui);
}

/* Template Card - Matches main site card style */
.template-card {
    background: white;
    border: 1px solid var(--planner-border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.template-card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-6px) scale(1.01);
    border-color: var(--planner-gray-300);
}

/* Colored header section */
.template-card-header {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(135deg, var(--cat-header-bg, rgba(37, 99, 235, 0.08)) 0%, var(--cat-header-bg2, rgba(37, 99, 235, 0.14)) 100%);
}

/* Centered icon in header */
.template-card-icon {
    width: 64px;
    height: 64px;
    background: white;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.template-card:hover .template-card-icon {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

/* Masked icon using category color */
.template-card-icon .icon-mask {
    display: block;
    width: 36px;
    height: 36px;
    background-color: var(--cat-color, #2563eb);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Category badge - uses category color from inline custom property */
.template-card-category {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: var(--text-nano);
    font-weight: 600;
    padding: var(--space-1) var(--space-2-5);
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cat-color, #2563eb);
    background: var(--cat-color-bg, rgba(37, 99, 235, 0.12));
}

.template-card-body {
    padding: var(--space-5);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.template-card-title {
    margin: 0 0 8px;
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--planner-gray-900);
    line-height: 1.35;
}

.template-card-overview {
    margin: 0 0 16px;
    font-size: var(--text-small);
    color: var(--planner-gray-500);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.template-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: auto;
}

.template-meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-caption);
    color: var(--planner-gray-500);
}

.template-meta-item .icon {
    width: 16px; height: 16px;
    color: var(--planner-gray-400);
}

.template-card-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--planner-border);
    background: var(--planner-gray-50);
}

.use-template-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    width: 100%;
    padding: var(--space-2-5) var(--space-4);
    background: var(--planner-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: var(--text-meta);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.use-template-card-btn:hover {
    background: var(--planner-primary-dark);
}

.use-template-card-btn .icon {
    width: 16px; height: 16px;
    filter: brightness(0) invert(1);
}

/* ========== Toast Notification ========== */
.planner-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--planner-primary);
    color: white;
    padding: var(--space-3-5) var(--space-6);
    border-radius: var(--planner-radius);
    font-size: var(--text-small);
    font-weight: 500;
    box-shadow: var(--planner-shadow);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: var(--planner-z-toast);
}

.planner-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.planner-toast.error {
    background: var(--planner-error, #dc2626);
    box-shadow: var(--mainsite-shadow);
}

/* ========== Templates Modal Responsive ========== */
@media (max-width: 640px) {
    .templates-modal {
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .templates-modal-header {
        padding: var(--space-5);
    }

    .templates-modal-body {
        padding: var(--space-4);
    }

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

    .template-card-header {
        padding: var(--space-4);
    }

    .template-card-body {
        padding: 0 16px 12px;
    }

    .template-card-footer {
        padding: var(--space-2-5) var(--space-4);
    }
}

/* ========================================================================
   PHASE 1 & 2 IMPROVEMENTS - NEW STYLES
   ======================================================================== */

/* ========== Activity Type Colors ========== */
:root {
    /* Activity Type Colors - aliased from canonical --planner-* tokens in _variables.css */
    --color-exercise: var(--planner-exercise-color);
    --color-exercise-light: var(--planner-exercise-light);
    --color-exercise-bg: var(--planner-exercise-bg);
    --color-icebreaker: var(--planner-icebreaker-color);
    --color-icebreaker-light: var(--planner-icebreaker-light);
    --color-icebreaker-bg: var(--planner-icebreaker-bg);
    --color-break: var(--planner-break-color);
    --color-break-light: var(--planner-break-light);
    --color-break-bg: var(--planner-break-bg);
    --color-custom: var(--planner-custom-color);
    --color-custom-light: var(--planner-custom-light);
    --color-custom-bg: var(--planner-custom-bg);

    /* Duration Status Colors */
    --color-on-track: var(--color-error-dark, #991b1b);
    --color-warning: var(--color-error-dark, #991b1b);
    --color-overtime: var(--color-error);
}

/* ========== LEFT SIDEBAR (Moved from Right) ========== */
.activity-sidebar {
    width: 300px;
    background: var(--planner-gray-50);
    border-right: 1px solid var(--planner-border);
    border-left: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
    order: -1; /* Move to left */
}

/* Sidebar Search Section */
.sidebar-search-section {
    padding: var(--space-4);
    border-bottom: 1px solid var(--planner-border);
    background: white;
}

.sidebar-search {
    position: relative;
    display: flex;
    align-items: center;
}

.sidebar-search__icon {
    position: absolute;
    left: 10px;
    color: var(--planner-gray-400);
    font-size: 18px;
    pointer-events: none;
}

.sidebar-search__input {
    width: 100%;
    padding: var(--space-2) var(--space-3) var(--space-2) 34px;
    font-size: var(--text-small);
    border: 1px solid var(--planner-border);
    border-radius: 6px;
    background: var(--planner-gray-50);
    color: var(--planner-gray-800);
    transition: all 0.15s ease;
}

.sidebar-search__input:focus {
    outline: none;
    border-color: var(--planner-red);
    background: white;
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.1);
}

.sidebar-search__input::placeholder {
    color: var(--planner-gray-400);
}

/* Create Custom Activity CTA */
.sidebar-cta {
    padding: var(--space-3) var(--space-4);
    background: white;
    border-bottom: 1px solid var(--planner-border);
}

.create-custom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--planner-red);
    color: white;
    border: none;
    border-radius: var(--planner-radius);
    font-size: var(--text-small);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.create-custom-btn:hover {
    background: var(--planner-red-dark);
    transform: translateY(-1px);
    box-shadow: var(--planner-shadow-lg);
}

.create-custom-btn .icon {
    width: 20px; height: 20px;
}

/* Instructions Section */
.instructions-content {
    padding: var(--space-2) 0;
}

.instruction-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2-5) var(--space-3);
    border-radius: var(--planner-radius);
    transition: background 0.15s ease;
}

.instruction-item:hover {
    background: var(--planner-gray-50);
}

.instruction-item .icon {
    width: 18px; height: 18px;
    color: var(--planner-red);
    flex-shrink: 0;
    margin-top: 1px;
}

.instruction-item p {
    margin: 0;
    font-size: var(--text-meta);
    color: var(--planner-gray-700);
    line-height: 1.4;
}

/* Quick Add Section */
.sidebar-quick-add {
    padding: var(--space-4);
    border-bottom: 1px solid var(--planner-border);
    background: white;
}

.section-title-row {
    margin-bottom: var(--space-3);
}

.section-title-row .section-title {
    font-size: var(--text-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--planner-gray-500);
}

.quick-add-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}

.quick-add-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-3) var(--space-2);
    background: white;
    border: 1px solid var(--planner-border);
    border-radius: var(--planner-radius);
    cursor: pointer;
    transition: all 0.15s ease;
}

.quick-add-btn:hover {
    border-color: var(--planner-red);
    background: #FEF2F2;
    transform: translateY(-1px);
}

.quick-add-btn__icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-add-btn__icon .icon {
    width: 16px; height: 16px;
}

.quick-add-btn--exercise .quick-add-btn__icon {
    background: var(--color-exercise-light);
    color: var(--color-exercise);
}

.quick-add-btn--icebreaker .quick-add-btn__icon {
    background: var(--color-icebreaker-light);
    color: var(--color-icebreaker);
}

.quick-add-btn--break .quick-add-btn__icon {
    background: var(--color-break-light);
    color: var(--color-break);
}

.quick-add-btn--custom .quick-add-btn__icon {
    background: var(--color-custom-light);
    color: var(--color-custom);
}

.quick-add-btn__label {
    font-size: var(--text-caption);
    font-weight: 500;
    color: var(--planner-gray-700);
}

/* AI Assistant Section at Bottom */
.sidebar-ai-section {
    padding: var(--space-4);
    border-top: 1px solid var(--planner-border);
    background: white;
    margin-top: auto;
}

.sidebar-ai-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    color: white;
    border: none;
    border-radius: var(--planner-radius);
    font-size: var(--text-small);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sidebar-ai-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.sidebar-ai-btn .icon {
    width: 20px; height: 20px;
}

/* ========== AGENDA MAIN AREA (Updated) ========== */
.agenda-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    padding: 0;
    background: white;
}

/* Duration Progress Header (Sticky) */
.agenda-progress-header {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2-5) var(--space-5);
    background: white;
    border-bottom: 1px solid var(--planner-border);
    box-shadow: var(--shadow-xs);
}

.progress-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.progress-header-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.progress-header-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Duration Progress Bar */
.duration-progress {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
    padding: var(--space-2-5) var(--space-5);
    background: var(--planner-gray-50);
    border-radius: var(--planner-radius-lg);
    border: 1px solid var(--planner-border);
}

.duration-progress__row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.duration-progress__status-row {
    display: flex;
    justify-content: center;
}

.duration-progress__info {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    min-width: 100px;
}

.duration-progress__used {
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--planner-gray-900);
    font-variant-numeric: tabular-nums;
}

.duration-progress__separator {
    font-size: var(--text-small);
    color: var(--planner-gray-400);
}

.duration-progress__total {
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--planner-gray-500);
}

.duration-progress__bar {
    position: relative;
    width: 200px;
    height: 6px;
    background: var(--planner-gray-200);
    border-radius: 3px;
    overflow: hidden;
}

.duration-progress__fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease, background 0.3s ease;
    background: linear-gradient(90deg, var(--color-on-track) 0%, #34D399 100%);
}

.duration-progress__fill--warning {
    background: linear-gradient(90deg, var(--color-warning) 0%, #FBBF24 100%);
}

.duration-progress__fill--overtime {
    background: linear-gradient(90deg, var(--color-overtime) 0%, #F87171 100%);
}

.duration-progress__status {
    font-size: var(--text-meta);
    font-weight: 500;
    min-width: 80px;
}

.duration-progress__status--on-track {
    color: var(--color-on-track);
}

.duration-progress__status--warning {
    color: var(--color-warning);
}

.duration-progress__status--overtime {
    color: var(--color-overtime);
}

/* ========== TIMELINE RULER ========== */
.timeline-ruler {
    display: none; /* Hidden - time labels removed */
}

.timeline-ruler__track {
    display: flex;
    min-width: 100%;
    height: 100%;
    position: relative;
}

.timeline-ruler__hour {
    flex: 1;
    min-width: 100px;
    position: relative;
    border-left: 1px solid var(--planner-gray-300);
}

.timeline-ruler__hour:last-child {
    border-right: 1px solid var(--planner-gray-300);
}

.timeline-ruler__label {
    position: absolute;
    top: 6px;
    left: 8px;
    font-size: var(--text-micro);
    font-weight: 600;
    color: var(--planner-gray-500);
}

.timeline-ruler__now {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--planner-red);
    z-index: 10;
}

.timeline-ruler__now::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    width: 10px;
    height: 10px;
    background: var(--planner-red);
    border-radius: 50%;
}

/* ========== AGENDA CONTAINER (Updated) ========== */
.agenda-container {
    flex: 1;
    background: white;
    border: none;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
}

/* ========== COLOR-CODED ACTIVITY CARDS ========== */
.agenda-item {
    position: relative;
    display: flex;
    align-items: stretch;
    padding: 0;
    border: 1px solid var(--planner-border);
    border-radius: var(--planner-radius-lg);
    margin-bottom: var(--space-3);
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    overflow: hidden;
}

.agenda-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* Type Bar (Left Color Indicator) - Hidden, using badge instead */
.item-type-bar {
    display: none;
}

/* Item Content Wrapper */
.item-content-wrapper {
    flex: 1;
    display: flex;
    align-items: flex-start;
    padding: var(--space-4);
    gap: var(--space-3);
}

/* Updated Tag Colors */
.item-tag.type {
    font-weight: 600;
}

.agenda-item[data-type="exercise"] .item-tag.type {
    background: var(--color-exercise-light);
    color: var(--color-exercise);
    border-color: transparent;
}

.agenda-item[data-type="icebreaker"] .item-tag.type {
    background: var(--color-icebreaker-light);
    color: var(--color-icebreaker);
    border-color: transparent;
}

.agenda-item[data-type="break"] .item-tag.type {
    background: var(--color-break-light);
    color: var(--color-break);
    border-color: transparent;
}

.agenda-item[data-type="custom"] .item-tag.type {
    background: var(--color-custom-light);
    color: var(--color-custom);
    border-color: transparent;
}

/* ========== QUICK DURATION CONTROLS ========== */
.item-duration-controls {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.duration-btn {
    width: 24px;
    height: 24px;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    background: var(--planner-gray-100);
    border: none;
    border-radius: 4px;
    color: var(--planner-gray-500);
    cursor: pointer;
    opacity: 0;
    transition: all 0.15s ease;
}

/* Show duration buttons when item is expanded */
.agenda-item.expanded .duration-btn {
    display: flex;
    opacity: 1;
}

.duration-btn:hover {
    background: var(--planner-red);
    color: white;
}

.duration-btn .icon {
    width: 16px; height: 16px;
}

.item-duration {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-meta);
    color: var(--planner-gray-600);
    font-weight: 500;
    padding: 0 4px;
}

.duration-value {
    font-weight: 600;
}

/* Duration Stepper in Edit Panel */
.duration-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--planner-border);
    border-radius: var(--planner-radius);
    overflow: hidden;
}

.duration-stepper__btn {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--planner-gray-100);
    color: var(--planner-gray-600);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.duration-stepper__btn:hover {
    background: var(--planner-gray-200);
    color: var(--planner-gray-900);
}

.duration-stepper__btn:active {
    background: var(--planner-gray-300);
}

.duration-stepper__btn .icon {
    width: 18px; height: 18px;
}

.duration-stepper__value {
    width: 60px;
    text-align: center;
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--planner-gray-800);
    border: none;
    border-left: 1px solid var(--planner-border);
    border-right: 1px solid var(--planner-border);
    padding: var(--space-2);
    -moz-appearance: textfield;
}

.duration-stepper__value::-webkit-outer-spin-button,
.duration-stepper__value::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ========== TYPE CHIPS (Edit Panel) ========== */
.type-option {
    cursor: pointer;
}

.type-option input[type="radio"] {
    display: none;
}

.type-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-2) var(--space-3-5);
    border: 2px solid var(--planner-border);
    border-radius: 24px;
    font-size: var(--text-meta);
    font-weight: 500;
    color: var(--planner-gray-600);
    transition: all 0.15s ease;
}

.type-chip .icon {
    width: 18px; height: 18px;
}

.type-option:hover .type-chip {
    border-color: var(--planner-gray-400);
}

.type-option--exercise input:checked + .type-chip {
    border-color: var(--color-exercise);
    background: var(--color-exercise-light);
    color: var(--color-exercise);
}

.type-option--icebreaker input:checked + .type-chip {
    border-color: var(--color-icebreaker);
    background: var(--color-icebreaker-light);
    color: var(--color-icebreaker);
}

.type-option--break input:checked + .type-chip {
    border-color: var(--color-break);
    background: var(--color-break-light);
    color: var(--color-break);
}

/* ========== BREAK SUGGESTION ========== */
.break-suggestion {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(90deg, #FEF3C7 0%, #FFFBEB 100%);
    border: 1px dashed var(--color-warning);
    border-radius: var(--planner-radius);
    margin-bottom: var(--space-3);
    animation: breakPulse 2s ease-in-out infinite;
}

@keyframes breakPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

.break-suggestion__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-warning);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.break-suggestion__icon .icon {
    width: 18px; height: 18px;
}

.break-suggestion__content {
    flex: 1;
}

.break-suggestion__text {
    display: block;
    font-size: var(--text-small);
    font-weight: 600;
    color: #92400E;
}

.break-suggestion__reason {
    display: block;
    font-size: var(--text-caption);
    color: #B45309;
}

.break-suggestion__action {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3-5);
    background: var(--color-break);
    color: white;
    border: none;
    border-radius: var(--planner-radius);
    font-size: var(--text-meta);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.break-suggestion__action:hover {
    background: #B45309;
}

.break-suggestion__action .icon {
    width: 16px; height: 16px;
}

.break-suggestion__dismiss {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #B45309;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.break-suggestion__dismiss:hover {
    background: rgba(180, 83, 9, 0.1);
}

.break-suggestion__dismiss .icon {
    width: 18px; height: 18px;
}

/* ========== EXPANDED EDIT PANEL (Updated) ========== */
.agenda-item.expanded {
    box-shadow: var(--shadow-md);
}

.agenda-item.expanded .item-edit-panel {
    display: block;
    padding: var(--space-4);
    margin: 0;
    border-top: 1px solid var(--planner-border);
    background: transparent;
}

/* ========== RESPONSIVE UPDATES ========== */
@media (max-width: 1024px) {
    .activity-sidebar {
        width: 260px;
    }

    .duration-progress__bar {
        width: 140px;
    }

    .quick-add-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-1-5);
    }

    .quick-add-btn {
        padding: var(--space-2) var(--space-1);
    }

    .quick-add-btn__icon {
        width: 28px;
        height: 28px;
    }

    .quick-add-btn__label {
        font-size: var(--text-nano);
    }
}

@media (max-width: 768px) {
    .planner-body {
        flex-direction: column;
    }

    .activity-sidebar {
        order: 1;
        width: 100%;
        height: auto;
        max-height: 50vh;
        border-right: none;
        border-top: 1px solid var(--planner-border);
    }

    .agenda-main {
        order: 0;
        flex: 1;
    }

    .agenda-progress-header {
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
    }

    .progress-header-left,
    .progress-header-center,
    .progress-header-right {
        width: 100%;
        justify-content: center;
    }

    .duration-progress {
        width: 100%;
        justify-content: space-between;
    }

    .duration-progress__bar {
        flex: 1;
        max-width: 200px;
    }

    .timeline-ruler {
        display: none;
    }

    .agenda-container {
        padding: var(--space-4);
    }

    .quick-add-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========== DRAG AND DROP STATES (Enhanced) ========== */
.agenda-container.drag-over {
    background: var(--planner-red-light);
    border: 2px dashed var(--planner-red);
}

.agenda-item.sortable-ghost {
    opacity: 0.4;
    transform: scale(0.98);
}

.agenda-item.sortable-chosen {
    box-shadow: var(--shadow-lg);
    transform: rotate(1deg) scale(1.02);
    z-index: var(--planner-z-dropdown);
}

/* Drop indicator line */
.drop-indicator {
    height: 3px;
    background: var(--planner-red);
    border-radius: 2px;
    margin: var(--space-1) 0;
    animation: dropPulse 1s ease-in-out infinite;
}

@keyframes dropPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ========================================================================
   WORKSHOP PLANNER V2.1 - REDESIGNED COMPONENTS
   ======================================================================== */

/* ========== Header Controls ========== */
.topbar-center {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.topbar-control-group {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    background: rgba(255, 255, 255, 0.15);
    padding: var(--space-1-5) var(--space-3);
    border-radius: var(--planner-radius);
}

.topbar-control-icon {
    font-size: 16px;
    opacity: 0.8;
}

.topbar-dropdown,
.topbar-date-input,
.topbar-time-input {
    background: transparent;
    border: none;
    color: white;
    font-size: var(--text-small);
    font-weight: 500;
    outline: none;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.topbar-dropdown option {
    background: var(--planner-red-dark);
    color: white;
}

.topbar-date-input::-webkit-calendar-picker-indicator,
.topbar-time-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/* ========== Sidebar Sections - No Vertical Space ========== */
.sidebar-sections {
    flex: 1;
    overflow-y: auto;
}

.sidebar-section {
    border-bottom: none;
}

.sidebar-section-divider {
    display: none;
}

.section-header {
    border-top: 1px solid var(--planner-border);
}

.sidebar-section:first-child .section-header {
    border-top: none;
}

/* Remove space between instructions and breaks accordions */
.sidebar-section[data-section="instructions"] .section-content.expanded {
    padding-bottom: 0;
}

/* Add bottom border to exercises section */
.sidebar-section[data-section="exercises"] {
    border-bottom: 1px solid var(--planner-border);
}

/* ========== Instructions Section ========== */
.instructions-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.instruction-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2-5) 0;
    border-bottom: 1px solid var(--planner-gray-200);
}

.instruction-item:last-of-type {
    border-bottom: none;
}

.instruction-item .icon {
    width: 20px; height: 20px;
    color: var(--planner-red);
    flex-shrink: 0;
    margin-top: var(--space-0-5);
}

.instruction-item p {
    margin: 0;
    font-size: var(--text-meta);
    color: var(--planner-gray-700);
    line-height: 1.4;
}

.instructions-show-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    width: 100%;
    padding: var(--space-2-5);
    margin-top: var(--space-2);
    background: transparent;
    border: 1px dashed var(--planner-gray-300);
    border-radius: var(--planner-radius);
    color: var(--planner-red);
    font-size: var(--text-meta);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.instructions-show-more:hover {
    background: var(--planner-red-light);
    border-color: var(--planner-red);
}

.instructions-show-more .icon {
    width: 18px; height: 18px;
}

/* ========== Breaks List (Vertical Layout) ========== */
.breaks-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.library-card--break {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: white;
    border: 1px solid var(--planner-border);
    border-radius: var(--planner-radius);
    cursor: grab;
    transition: all 0.2s;
}

.library-card--break:hover {
    box-shadow: var(--planner-shadow);
    border-color: var(--planner-gray-300);
}

.library-card--break .card-icon {
    width: 36px;
    height: 36px;
    background: rgba(220, 38, 38, 0.2);
    color: var(--planner-red);
    border-radius: var(--planner-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.library-card--break .card-icon .icon {
    width: 20px; height: 20px;
}

.library-card--break .card-content {
    flex: 1;
    min-width: 0;
}

.library-card--break .card-title {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--planner-gray-900);
    margin: 0 0 4px;
}

.library-card--break .card-description {
    font-size: var(--text-caption);
    color: var(--planner-gray-500);
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.library-card--break .card-duration {
    font-size: var(--text-caption);
    color: var(--color-break);
    font-weight: 500;
}

/* ========== Custom Activity CTA Section - Directly Below Accordions ========== */
.sidebar-custom-activity-section {
    padding: var(--space-4);
    margin: calc(-1 * var(--space-3)) var(--space-3) var(--space-6) var(--space-3);
    background: white;
    border: 1px solid var(--planner-border);
    border-radius: var(--planner-radius);
    text-align: center;
    flex-shrink: 0;
}

.custom-activity-label {
    font-size: var(--text-meta);
    color: var(--planner-gray-500);
    margin: 0 0 12px;
}

.create-custom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3) var(--space-5);
    background: var(--planner-red);
    color: white;
    border: none;
    border-radius: 24px;
    font-size: var(--text-small);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.create-custom-btn:hover {
    background: var(--planner-red-dark);
}

.create-custom-btn .icon {
    width: 20px; height: 20px;
}

/* ========== Empty State Redesign ========== */
.agenda-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
    text-align: center;
    background: rgba(52, 152, 219, 0.1);
    border: 2px dashed var(--planner-primary);
    border-radius: var(--planner-radius-lg);
    margin: var(--space-4);
}

.empty-icon {
    width: 80px;
    height: 80px;
    background: #EBF5FB;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-6);
}

.empty-icon .icon {
    width: 36px; height: 36px;
    color: #2471A3;
}

.empty-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: var(--text-display);
    font-weight: 700;
    color: var(--planner-gray-900);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}

.empty-subtitle {
    font-size: var(--text-ui);
    color: var(--planner-gray-500);
    margin: 0 0 32px;
    max-width: 320px;
}

/* ========== Agenda Drop Zone (Empty Workshop State) ========== */
.agenda-drop-zone {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--space-6);
    background: white;
    border: 2px dashed var(--planner-gray-400);
    border-radius: var(--planner-radius-lg);
    min-height: 300px;
}

.drop-zone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-12) var(--space-6);
    max-width: 400px;
}

.drop-zone-icon {
    font-size: var(--text-display);
    color: var(--planner-gray-400);
    margin-bottom: var(--space-4);
}

.drop-zone-title {
    font-size: var(--text-h3);
    font-weight: 600;
    color: var(--planner-gray-700);
    margin: 0 0 12px;
}

.drop-zone-subtitle {
    font-size: var(--text-small);
    color: var(--planner-gray-500);
    margin: 0;
    line-height: 1.5;
}

/* Drop zone hover/drag state */
.agenda-drop-zone.drag-over {
    border-color: var(--planner-red);
    background: var(--planner-red-light);
}

.agenda-drop-zone.drag-over .drop-zone-icon {
    color: var(--planner-red);
}

.get-started-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3-5) var(--space-10);
    background: var(--planner-red);
    color: white;
    border: none;
    border-radius: 28px;
    font-size: var(--text-body);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: var(--space-6);
}

.get-started-btn:hover {
    background: var(--planner-red-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3);
}

.empty-secondary-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.empty-or {
    font-size: var(--text-small);
    color: var(--planner-gray-400);
}

.load-workshop-btn,
.use-template-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-2-5) var(--space-4);
    background: white;
    color: var(--planner-interactive);
    border: 1px solid var(--planner-interactive-border);
    border-radius: 20px;
    font-size: var(--text-small);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.load-workshop-btn:hover,
.use-template-btn:hover {
    border-color: var(--planner-interactive);
    color: #fff;
    background: var(--planner-interactive);
}

.load-workshop-btn .icon,
.use-template-btn .icon {
    width: 18px; height: 18px;
}

/* ========== Activity Card Actions (Expand Button) ========== */
.item-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    margin-left: auto;
    flex-shrink: 0;
}

.item-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: var(--planner-radius);
    color: var(--planner-gray-400);
    cursor: pointer;
    transition: all 0.2s;
}

.item-expand-btn:hover {
    background: var(--planner-gray-100);
    color: var(--planner-gray-600);
}

.item-expand-btn .icon {
    width: 18px; height: 18px;
}

/* ========== Expanded Card Styling ========== */
.agenda-item.expanded {
    box-shadow: var(--planner-shadow-lg);
}

.agenda-item.expanded .item-edit-panel {
    background: transparent;
}

/* ========== New Item Highlight Animation ========== */
@keyframes justAddedPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(229, 77, 77, 0.6);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(229, 77, 77, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(229, 77, 77, 0);
    }
}

.agenda-item.just-added {
    animation: justAddedPulse 0.6s ease-out 2;
}

/* ========== Welcome Intro Modal ========== */
.modal-overlay.open .intro-modal {
    transform: scale(1);
}

.intro-modal {
    background: white;
    border-radius: var(--planner-radius-xl);
    width: 90%;
    max-width: 520px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 60px -12px rgba(26, 39, 68, 0.25);
    transform: scale(0.95);
    transition: transform 0.2s;
}

.intro-modal__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    background: linear-gradient(135deg, var(--planner-red) 0%, var(--planner-red-dark) 100%);
    color: white;
}

.intro-modal__logo {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.intro-modal__logo .icon {
    width: 24px; height: 24px;
    color: white;
}

.intro-modal__header-content {
    flex: 1;
}

.intro-modal__header-content .intro-modal__title {
    font-size: 0.75rem;
    font-weight: 600;
    margin: 0;
    color: white;
    letter-spacing: -0.01em;
}

.intro-modal__header-content .intro-modal__subtitle {
    font-size: 0.625rem;
    opacity: 0.9;
    margin: var(--space-0-5) 0 0 0;
    color: white;
}

.intro-modal__close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.intro-modal__close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}

.intro-modal__close:active {
    transform: rotate(90deg) scale(0.9);
}

.intro-modal__close .icon {
    width: 18px; height: 18px;
}

.intro-modal__body {
    padding: var(--space-6);
}

.intro-modal__features {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.intro-feature {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3-5);
    padding: var(--space-4);
    background: var(--planner-gray-50);
    border-radius: 12px;
    border: 1px solid var(--planner-border);
    transition: all 0.2s ease;
}

.intro-feature:hover {
    border-color: var(--planner-red);
    background: var(--planner-red-light);
}

.intro-feature__icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.intro-feature__icon .icon {
    width: 22px; height: 22px;
    color: var(--planner-primary);
}

.intro-feature__content h3 {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--planner-gray-900);
    margin: 0 0 2px;
    letter-spacing: -0.01em;
}

.intro-feature__content p {
    font-size: 0.625rem;
    color: var(--planner-gray-500);
    margin: 0;
    line-height: 1.5;
}

.intro-modal__footer {
    padding: 0 28px 28px;
    animation: introFadeIn 0.6s ease 0.6s both;
}

.intro-modal__cta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: linear-gradient(135deg, var(--planner-red) 0%, var(--planner-red-dark) 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.intro-modal__cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.intro-modal__cta:hover::before {
    left: 100%;
}

.intro-modal__cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--planner-shadow);
}

.intro-modal__cta:active {
    transform: translateY(0);
}

.intro-modal__cta .icon {
    width: 20px; height: 20px;
    transition: transform 0.2s ease;
}

.intro-modal__cta:hover .icon {
    transform: translateX(4px);
}

.intro-modal__hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    margin: var(--space-4) 0 0;
    font-size: 0.8125rem;
    color: var(--planner-gray-400);
}

.intro-modal__hint .icon {
    width: 16px; height: 16px;
    color: #F59E0B;
}

/* Wide intro modal with video */
.intro-modal--wide {
    max-width: 900px;
}

.intro-modal__body--split {
    display: flex;
    gap: 0;
}

.intro-modal__content {
    flex: 1;
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
}

.intro-modal__content .intro-modal__features {
    flex: 1;
}

.intro-modal__content .intro-modal__footer {
    padding: var(--space-6) 0 0 0;
}

.intro-modal__video {
    width: 380px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-6);
}

.intro-modal__video-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.intro-modal__video-wrapper iframe {
    width: 100%;
    height: 100%;
}

.intro-modal__video-caption {
    margin: var(--space-4) 0 0 0;
    font-size: var(--text-meta);
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

/* Responsive adjustments for wide modal */
@media (max-width: 900px) {
    .intro-modal--wide {
        max-width: 520px;
    }

    .intro-modal__body--split {
        flex-direction: column;
    }

    .intro-modal__video {
        width: 100%;
        padding: var(--space-5);
    }

    .intro-modal__video-wrapper {
        max-width: 400px;
    }
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .intro-modal {
        width: 95%;
        max-height: 95vh;
        border-radius: 16px;
    }

    .intro-modal__body {
        padding: var(--space-5) var(--space-5) var(--space-4);
    }

    .intro-modal__title {
        font-size: 0.75rem;
    }

    .intro-modal__footer {
        padding: 0 20px 20px;
    }

    .intro-feature {
        padding: var(--space-3-5);
    }

    .intro-feature__icon {
        width: 40px;
        height: 40px;
    }

    .intro-feature__icon .icon {
        width: 20px; height: 20px;
    }
}

/* ========== Calendar Scheduling Modal ========== */

/* Connection Status Bar */
.calendar-connection-status {
    padding: var(--space-2-5) var(--space-6);
    background: var(--planner-gray-50);
    border-bottom: 1px solid var(--planner-border);
    margin: -24px -24px 0;
    margin-bottom: var(--space-5);
}

.connection-loading,
.connection-connected,
.connection-not-connected {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
}

.connection-loading {
    justify-content: center;
    padding: var(--space-1) 0;
    color: var(--planner-gray-500);
    font-size: var(--text-meta);
}

.connection-loading .spinner {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.connection-icon {
    font-size: var(--text-h3);
    color: var(--planner-gray-400);
}

.connection-icon.connected {
    color: var(--planner-green);
}

.connection-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.connection-label {
    font-weight: 600;
    font-size: var(--text-meta);
    color: var(--planner-gray-900);
}

.connection-email {
    font-size: var(--text-caption);
    color: var(--planner-gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.connection-hint {
    font-size: var(--text-caption);
    color: var(--planner-gray-500);
}

.connection-disconnect-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--planner-gray-400);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.connection-disconnect-btn:hover {
    background: var(--planner-red-light);
    color: var(--planner-red);
}

.connection-disconnect-btn .icon {
    width: 16px;
    height: 16px;
}

.connection-connect-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: 7px var(--space-4);
    background: var(--planner-blue);
    color: white;
    border: none;
    border-radius: var(--planner-radius);
    font-size: var(--text-meta);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.connection-connect-btn:hover {
    filter: brightness(0.92);
}

.connection-connect-btn .icon {
    width: 16px;
    height: 16px;
}

/* Scrollable form area */
.calendar-form {
    max-height: 460px;
    overflow-y: auto;
}

/* Section headers - matches .share-section-header pattern */
.calendar-section {
    margin-bottom: var(--space-4);
}

.calendar-section:last-child {
    margin-bottom: 0;
}

.calendar-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--planner-gray-900);
    margin-bottom: var(--space-3);
}

.calendar-section-header .icon {
    width: 20px;
    height: 20px;
    color: var(--planner-gray-600);
}

.calendar-section-header .label-optional {
    font-weight: 400;
    font-size: var(--text-caption);
    color: var(--planner-gray-400);
    margin-left: auto;
}

/* Two-column form rows - matches modal ws-form-row */
.calendar-form .ws-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3-5);
    margin-bottom: var(--space-4);
}

.calendar-form .ws-form-row:last-child {
    margin-bottom: 0;
}

.calendar-form .ws-form-row .ws-field {
    margin-bottom: 0;
}

/* Select styling within calendar form */
.calendar-form select.ws-input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: var(--space-8);
}

/* Duration Display */
.duration-display {
    padding: var(--space-2-5) var(--space-3);
    background: var(--planner-gray-50);
    border: 1px solid var(--planner-border);
    border-radius: var(--planner-radius);
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    font-size: var(--text-small);
}

.duration-icon {
    width: 16px;
    height: 16px;
    color: var(--planner-blue);
    flex-shrink: 0;
}

#calendarDurationText {
    font-weight: 600;
    color: var(--planner-gray-900);
}

.duration-hint {
    font-size: var(--text-caption);
    color: var(--planner-gray-400);
    margin-left: auto;
}

/* Attendees Input */
.attendees-input-wrap {
    display: flex;
    gap: var(--space-2);
}

.attendees-input-wrap input {
    flex: 1;
}

.add-attendee-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: 0 14px;
    height: auto;
    width: auto;
    background: white;
    border: 1px solid var(--planner-border);
    border-radius: var(--planner-radius);
    color: var(--planner-gray-700);
    font-size: var(--text-meta);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.add-attendee-btn .icon {
    width: 16px;
    height: 16px;
}

.add-attendee-btn:hover {
    background: var(--planner-gray-50);
    border-color: var(--planner-gray-500);
    color: var(--planner-gray-900);
}

.attendees-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1-5);
    margin-top: var(--space-2);
}

.attendees-list:empty {
    margin-top: 0;
}

.attendee-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: 5px var(--space-1-5) 5px var(--space-3);
    background: var(--planner-gray-50);
    border: 1px solid var(--planner-border);
    border-radius: 50px;
    font-size: var(--text-meta);
    color: var(--planner-gray-700);
}

.attendee-chip .remove-attendee {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: transparent;
    border: none;
    color: var(--planner-gray-400);
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
    transition: all 0.15s;
}

.attendee-chip .remove-attendee:hover {
    background: var(--planner-red-light);
    color: var(--planner-red);
}

.attendee-chip .remove-attendee .icon {
    width: 14px;
    height: 14px;
}

/* Calendar Modal Footer */
.calendar-modal-footer {
    justify-content: space-between;
}

.calendar-modal-footer .footer-right {
    display: flex;
    gap: var(--space-2-5);
}

.modal-secondary-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-2) var(--space-3);
    background: white;
    border: 1px solid var(--planner-border);
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--planner-gray-700);
    cursor: pointer;
    transition: all 0.15s ease;
}

.modal-secondary-btn:hover {
    background: var(--planner-gray-100);
    border-color: var(--planner-gray-400);
}

.modal-secondary-btn .icon {
    width: 18px; height: 18px;
}

/* Text Button (tertiary action) */
.modal-text-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-2) var(--space-2-5);
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--planner-gray-600);
    cursor: pointer;
    transition: all 0.15s ease;
}

.modal-text-btn:hover {
    background: var(--planner-gray-100);
    color: var(--planner-gray-800);
}

.modal-text-btn .icon {
    width: 18px; height: 18px;
}

/* Form Hint Text */
.form-hint {
    display: block;
    margin-top: var(--space-1-5);
    font-size: var(--text-caption);
    color: var(--planner-gray-500);
    line-height: 1.4;
}

/* Calendar Success Toast */
.calendar-success-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: white;
    border-radius: var(--planner-radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: var(--planner-z-toast);
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100px);
    }
}

.calendar-success-toast .success-icon {
    width: 40px;
    height: 40px;
    background: var(--planner-green-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-success-toast .success-icon .icon {
    width: 22px; height: 22px;
    color: var(--planner-green);
}

.calendar-success-toast .toast-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
}

.calendar-success-toast .toast-title {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--planner-gray-900);
}

.calendar-success-toast .toast-message {
    font-size: 0.6875rem;
    color: var(--planner-gray-600);
}

.calendar-success-toast .toast-link {
    color: var(--planner-red);
    text-decoration: none;
    font-weight: 500;
}

.calendar-success-toast .toast-link:hover {
    text-decoration: underline;
}

.calendar-success-toast .toast-close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: var(--planner-gray-400);
    cursor: pointer;
    border-radius: 50%;
}

.calendar-success-toast .toast-close:hover {
    background: var(--planner-gray-100);
    color: var(--planner-gray-600);
}

/* Calendar Responsive */
@media (max-width: 600px) {
    .calendar-form .ws-form-row {
        grid-template-columns: 1fr;
    }

    .calendar-modal-footer {
        flex-direction: column;
        gap: var(--space-3);
    }

    .calendar-modal-footer .footer-right {
        width: 100%;
        justify-content: flex-end;
    }
}