/**
 * Privacy Settings Tab Styles
 * Condensed privacy + view mode controls with teal accent
 */

/* ============================================
   PRIVACY PANEL CONTAINER
   ============================================ */
.privacy-settings-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ============================================
   SECTION BLOCKS
   ============================================ */
.privacy-section-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.privacy-section-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.privacy-section-label > i {
    font-size: 1rem;
    color: #14b8a6;
    width: 20px;
    text-align: center;
}

.privacy-section-label .section-title {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary, #1e293b);
}

.privacy-section-label .section-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary, #64748b);
}

/* ============================================
   COMPACT PRESET CARDS (teal)
   ============================================ */
.privacy-presets.compact {
    display: flex;
    gap: 8px;
}

.privacy-presets.compact .privacy-preset-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 10px 8px;
    border: 2px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    background: var(--bg-secondary, #f8fafc);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
    text-align: center;
}

.privacy-presets.compact .privacy-preset-card i {
    font-size: 0.85rem;
    color: var(--text-secondary, #64748b);
}

.privacy-presets.compact .privacy-preset-card:hover {
    border-color: #14b8a6;
    background: rgba(20, 184, 166, 0.04);
}

.privacy-presets.compact .privacy-preset-card.active {
    border-color: #14b8a6;
    background: rgba(20, 184, 166, 0.08);
    color: #0d9488;
}

.privacy-presets.compact .privacy-preset-card.active i {
    color: #0d9488;
}

.preset-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: inherit;
}

.preset-desc {
    font-size: 0.7rem;
    color: var(--text-secondary, #64748b);
    line-height: 1.35;
    font-weight: 400;
    max-width: 140px;
}

.privacy-presets.compact .privacy-preset-card.active .preset-desc {
    color: #0d9488;
}

/* Legacy preset styles kept for backwards compat */
.privacy-presets:not(.compact) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.privacy-presets:not(.compact) .privacy-preset-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    border: 2px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    background: var(--bg-secondary, #f8fafc);
    cursor: pointer;
    transition: all 0.2s ease;
}

.privacy-presets:not(.compact) .privacy-preset-card:hover {
    border-color: #14b8a6;
}

.privacy-presets:not(.compact) .privacy-preset-card.active {
    border-color: #14b8a6;
    background: rgba(20, 184, 166, 0.08);
}

/* ============================================
   SMART SUGGESTIONS TOGGLE
   ============================================ */
.privacy-smart-section {
    background: var(--bg-secondary, #f8fafc);
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border-color, #e2e8f0);
}

.smart-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.smart-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.smart-toggle-label > i {
    font-size: 1rem;
    color: #14b8a6;
    width: 20px;
    text-align: center;
}

.smart-toggle-label > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toggle-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary, #1e293b);
}

.toggle-hint {
    font-size: 0.75rem;
    color: var(--text-secondary, #64748b);
}

/* Toggle Switch - Premium Style */
.toggle-switch {
    position: relative;
    display: inline-block;
    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: #cbd5e1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 24px;
}

.toggle-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--primary-500, #14b8a6);
}

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

.toggle-switch input:focus + .toggle-slider {
    box-shadow: var(--focus-ring-shadow);
}

.toggle-switch:hover .toggle-slider {
    background-color: #94a3b8;
}

.toggle-switch:hover input:checked + .toggle-slider {
    background: var(--primary-500, #14b8a6);
}

/* Dark Mode Toggle */
body.dark-mode .toggle-slider {
    background-color: #475569;
}

body.dark-mode .toggle-switch:hover .toggle-slider {
    background-color: #64748b;
}

body.dark-mode .toggle-switch input:checked + .toggle-slider {
    background: var(--primary-400, #2dd4bf);
}

body.dark-mode .toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.25);
}

/* ============================================
   MORE OPTIONS EXPANDABLE
   ============================================ */
.privacy-more-options {
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
}

.more-options-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
    background: var(--bg-secondary, #f8fafc);
    user-select: none;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    transition: all 0.2s ease;
}

.more-options-toggle:hover {
    background: var(--bg-hover, #f1f5f9);
    color: var(--text-primary, #1e293b);
}

.more-options-toggle i {
    transition: transform 0.2s ease;
}

.privacy-more-options[open] .more-options-toggle i {
    transform: rotate(180deg);
}

.more-options-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

/* Options Groups */
.options-group h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.options-group h4 i {
    font-size: 0.8rem;
}

.options-group-desc {
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
    margin: 0 0 12px 0;
    line-height: 1.4;
}

/* Calendar Defaults */
.calendar-defaults {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.calendar-default-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg-secondary, #f8fafc);
    border-radius: 8px;
    gap: 12px;
}

.cal-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-primary, #1e293b);
}

.cal-name i {
    color: var(--text-secondary, #64748b);
    width: 16px;
}

.visibility-select {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: white;
    font-size: 0.85rem;
    color: var(--text-primary, #1e293b);
    cursor: pointer;
    min-width: 100px;
}

.visibility-select:focus {
    outline: none;
    border-color: #14b8a6;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

/* Auto-Rules List */
.auto-rules-list,
.team-access-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rule-checkbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-secondary, #f8fafc);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.rule-checkbox:hover {
    background: var(--bg-hover, #f1f5f9);
}

.rule-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #14b8a6;
    cursor: pointer;
}

.rule-text {
    font-size: 0.9rem;
    color: var(--text-primary, #1e293b);
    display: flex;
    align-items: center;
    gap: 8px;
}

.rule-text i {
    font-size: 0.7rem;
    color: var(--text-secondary, #64748b);
}

.rule-hint {
    width: 100%;
    font-size: 0.75rem;
    color: var(--text-secondary, #64748b);
    line-height: 1.35;
    padding-left: 28px;
    margin-top: -4px;
}

/* ============================================
   SAVE BUTTON
   ============================================ */
.privacy-actions {
    padding-top: 8px;
}

.privacy-actions .btn {
    width: 100%;
    padding: 12px 16px;
    font-weight: 600;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.privacy-actions .btn:hover {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}

/* ============================================
   DARK MODE
   ============================================ */
.dark-mode .privacy-section-label .section-title {
    color: #f1f5f9;
}

.dark-mode .privacy-section-label .section-hint {
    color: #94a3b8;
}

.dark-mode .privacy-preset-card,
.dark-mode .privacy-presets.compact .privacy-preset-card {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

.dark-mode .privacy-preset-card:hover,
.dark-mode .privacy-presets.compact .privacy-preset-card:hover {
    border-color: #2dd4bf;
    background: rgba(20, 184, 166, 0.1);
}

.dark-mode .privacy-preset-card.active,
.dark-mode .privacy-presets.compact .privacy-preset-card.active {
    background: rgba(20, 184, 166, 0.15);
    border-color: #2dd4bf;
    color: #2dd4bf;
}

.dark-mode .privacy-presets.compact .privacy-preset-card.active i {
    color: #2dd4bf;
}

.dark-mode .preset-label {
    color: inherit;
}

.dark-mode .privacy-smart-section {
    background: #1e293b;
    border-color: #334155;
}

.dark-mode .toggle-title {
    color: #f1f5f9;
}

.dark-mode .toggle-hint {
    color: #94a3b8;
}

.dark-mode .toggle-slider {
    background-color: #475569;
}

.dark-mode .privacy-more-options {
    border-color: #334155;
}

.dark-mode .more-options-toggle {
    background: #1e293b;
    color: #94a3b8;
}

.dark-mode .more-options-toggle:hover {
    background: #334155;
    color: #f1f5f9;
}

.dark-mode .more-options-content {
    border-top-color: #334155;
}

.dark-mode .options-group h4 {
    color: #94a3b8;
}

.dark-mode .calendar-default-row {
    background: #1e293b;
}

.dark-mode .cal-name {
    color: #f1f5f9;
}

.dark-mode .visibility-select {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

.dark-mode .rule-checkbox {
    background: #1e293b;
}

.dark-mode .rule-checkbox:hover {
    background: #334155;
}

.dark-mode .rule-text {
    color: #f1f5f9;
}

.dark-mode .preset-desc {
    color: #94a3b8;
}

.dark-mode .privacy-presets.compact .privacy-preset-card.active .preset-desc {
    color: #2dd4bf;
}

.dark-mode .options-group-desc {
    color: #94a3b8;
}

.dark-mode .rule-hint {
    color: #94a3b8;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 480px) {
    .privacy-presets {
        gap: 8px;
    }

    .privacy-preset-card {
        padding: 12px 8px;
    }

    .preset-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    .preset-label {
        font-size: 0.85rem;
    }

    .preset-desc {
        font-size: 0.65rem;
        max-width: 100px;
    }

    .rule-hint {
        font-size: 0.7rem;
        padding-left: 28px;
    }

    .options-group-desc {
        font-size: 0.75rem;
    }

    .calendar-default-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .visibility-select {
        width: 100%;
    }
}

/* ============================================
   SETTINGS BUTTON WITH PRIVACY INDICATOR
   ============================================ */
/* Settings button with relative positioning for indicator */
.settings-btn-with-indicator {
    position: relative;
}

.settings-btn-with-indicator > i:first-child {
    color: #14b8a6;
    transition: color 0.2s ease;
}

.settings-btn-with-indicator:hover > i:first-child {
    color: #0d9488;
}

/* Privacy indicator icon - small icon at bottom-right of button */
.privacy-indicator-icon {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 8px;
    color: var(--text-tertiary, #94a3b8);
    pointer-events: none;
    transition: color 0.2s ease;
}

/* Privacy mode colors - Canonical colors from PrivacyVisualConfig
   View modes: indigo=all, blue=work, pink=personal, slate=private, slate-light=busy-only */
.privacy-indicator-icon[data-mode="all"] { color: #6366f1; }       /* Indigo-500 */
.privacy-indicator-icon[data-mode="team"] { color: #3b82f6; }      /* Blue-500 */
.privacy-indicator-icon[data-mode="work"] { color: #3b82f6; }      /* Blue-500 */
.privacy-indicator-icon[data-mode="personal"] { color: #f472b6; }  /* Pink-400 */
.privacy-indicator-icon[data-mode="private"] { color: #64748b; }   /* Slate-500 (was red) */
.privacy-indicator-icon[data-mode="hidden"] { color: #64748b; }    /* Slate-500 (was red) */
.privacy-indicator-icon[data-mode="busy-only"] { color: #94a3b8; } /* Slate-400 */

/* Dark mode adjustments */
.dark-mode .settings-btn-with-indicator > i:first-child {
    color: #2dd4bf;
}

.dark-mode .settings-btn-with-indicator:hover > i:first-child {
    color: #5eead4;
}

/* Dark mode canonical colors */
.dark-mode .privacy-indicator-icon[data-mode="all"] { color: #818cf8; }       /* Indigo-400 */
.dark-mode .privacy-indicator-icon[data-mode="team"] { color: #60a5fa; }      /* Blue-400 */
.dark-mode .privacy-indicator-icon[data-mode="work"] { color: #60a5fa; }      /* Blue-400 */
.dark-mode .privacy-indicator-icon[data-mode="personal"] { color: #f9a8d4; }  /* Pink-300 */
.dark-mode .privacy-indicator-icon[data-mode="private"] { color: #94a3b8; }   /* Slate-400 (was red) */
.dark-mode .privacy-indicator-icon[data-mode="hidden"] { color: #94a3b8; }    /* Slate-400 (was red) */
.dark-mode .privacy-indicator-icon[data-mode="busy-only"] { color: #cbd5e1; } /* Slate-300 */

/* ============================================
   EVENT VISIBILITY INLINE CHIP ENHANCEMENTS
   Team Visibility (what others see): Purple=Private, Amber=Busy, Green=Shared
   ============================================ */

/* Private/Hidden - Purple (#8b5cf6) - Canonical from PrivacyVisualConfig */
.visibility-inline-chip[data-visibility="hidden"],
.visibility-inline-chip[data-visibility="private"] {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
    color: #7c3aed;
}

.visibility-inline-chip[data-visibility="hidden"]:hover,
.visibility-inline-chip[data-visibility="private"]:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.5);
}

/* Busy - Amber */
.visibility-inline-chip[data-visibility="busy"] {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
    color: #d97706;
}

.visibility-inline-chip[data-visibility="busy"]:hover {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.5);
}

/* Open/Full - Green */
.visibility-inline-chip[data-visibility="full"] {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    color: #16a34a;
}

.visibility-inline-chip[data-visibility="full"]:hover {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.5);
}

/* Dark mode for visibility chip */
.dark-mode .visibility-inline-chip[data-visibility="hidden"],
.dark-mode .visibility-inline-chip[data-visibility="private"] {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.4);
    color: #a78bfa;
}

.dark-mode .visibility-inline-chip[data-visibility="busy"] {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fbbf24;
}

.dark-mode .visibility-inline-chip[data-visibility="full"] {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.4);
    color: #4ade80;
}

/* ============================================
   EVENT VISIBILITY PANEL ENHANCEMENTS
   ============================================ */

/* Level button colors in panel */
.event-visibility-panel .level-btn[data-level="hidden"].active {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%);
    border-color: #ef4444;
    color: #dc2626;
}

.event-visibility-panel .level-btn[data-level="busy"].active {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
    border-color: #f59e0b;
    color: #d97706;
}

.event-visibility-panel .level-btn[data-level="full"].active {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
    border-color: #22c55e;
    color: #16a34a;
}

/* Level button icons */
.event-visibility-panel .level-btn[data-level="hidden"] i {
    color: #ef4444;
}

.event-visibility-panel .level-btn[data-level="busy"] i {
    color: #f59e0b;
}

.event-visibility-panel .level-btn[data-level="full"] i {
    color: #22c55e;
}

/* Dark mode panel */
.dark-mode .event-visibility-panel .level-btn[data-level="hidden"].active {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.08) 100%);
    color: #f87171;
}

.dark-mode .event-visibility-panel .level-btn[data-level="busy"].active {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.08) 100%);
    color: #fbbf24;
}

.dark-mode .event-visibility-panel .level-btn[data-level="full"].active {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.08) 100%);
    color: #4ade80;
}

/* Board Visibility Section in Event Visibility Panel */
.board-visibility-section {
    padding: 8px 0;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

.board-visibility-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.evp-board-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--bg-secondary, #f8fafc);
    border-radius: 6px;
    font-size: 0.8rem;
}

.evp-board-name {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary, #1e293b);
    font-weight: 500;
}

.evp-board-name i {
    color: var(--text-secondary, #94a3b8);
    font-size: 0.75rem;
}

.evp-board-vis {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary, #64748b);
    font-size: 0.75rem;
}

.evp-board-vis .fa-lock {
    color: #f59e0b;
    font-size: 0.65rem;
}

.dark-mode .evp-board-row {
    background: rgba(255, 255, 255, 0.04);
}

.dark-mode .evp-board-name {
    color: #e2e8f0;
}

.dark-mode .evp-board-vis {
    color: #94a3b8;
}

.dark-mode .evp-board-vis .fa-lock {
    color: #fbbf24;
}

/* Board remove button */
.evp-board-remove-btn {
    background: none;
    border: none;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 0.7rem;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
    margin-left: 6px;
    flex-shrink: 0;
}
.evp-board-row:hover .evp-board-remove-btn {
    opacity: 1;
}
.evp-board-remove-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}
.dark-mode .evp-board-remove-btn:hover {
    color: #f87171;
    background: rgba(239, 68, 68, 0.15);
}

/* Board assign section */
.evp-board-assign {
    padding: 8px 0;
    border-top: 1px solid var(--border-color, #e2e8f0);
}
.evp-board-assign .section-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    margin-bottom: 6px;
    display: block;
}
.evp-board-assign-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.evp-board-select {
    flex: 1;
    padding: 5px 8px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    font-size: 0.8rem;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #1e293b);
    cursor: pointer;
}
.evp-board-select:focus {
    border-color: var(--primary-color, #3b82f6);
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
#evp-assign-btn {
    padding: 5px 12px;
    font-size: 0.8rem;
    white-space: nowrap;
}
#evp-assign-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Dark mode board assign */
.dark-mode .evp-board-assign {
    border-top-color: rgba(255, 255, 255, 0.08);
}
.dark-mode .evp-board-assign .section-label {
    color: #e2e8f0;
}
.dark-mode .evp-board-select {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}
.dark-mode .evp-board-select:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.15);
}

/* ============================================
   CONTACT TYPE BADGE (on timezone cards)
   ============================================ */
.contact-type-badge { font-size: 0.6rem; margin-left: 4px; margin-right: 2px; opacity: 0.7; vertical-align: middle; }
.contact-type-badge.work { color: #3b82f6; }
.contact-type-badge.personal { color: var(--category-personal, #f472b6); }
.dark-mode .contact-type-badge.work { color: #60a5fa; }
.dark-mode .contact-type-badge.personal { color: var(--category-personal-light, #f9a8d4); }

/* ============================================
   CONTACT TYPE SECTION (edit modal)
   ============================================ */
.contact-type-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-color, #e2e8f0); }
.contact-type-label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; color: var(--text-primary, #1e293b); margin-bottom: 10px; }
.contact-type-label i { color: var(--primary-color, #6366f1); font-size: 0.85rem; }
.contact-type-chips { display: flex; gap: 8px; margin-bottom: 6px; }
.contact-type-chips .mode-chip {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 12px; border: 2px solid var(--border-color, #e2e8f0); border-radius: 10px;
    background: transparent; color: var(--text-secondary, #64748b); font-size: 0.82rem;
    font-weight: 500; cursor: pointer; transition: all 0.2s ease;
}
.contact-type-chips .mode-chip:hover { border-color: var(--primary-color, #6366f1); color: var(--primary-color, #6366f1); background: rgba(99, 102, 241, 0.05); }
.contact-type-chips .mode-chip.active { border-color: var(--primary-color, #6366f1); background: rgba(99, 102, 241, 0.1); color: var(--primary-color, #6366f1); font-weight: 600; }
.contact-type-chips .mode-chip[data-contact-type="work"].active { border-color: #3b82f6; background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.contact-type-chips .mode-chip[data-contact-type="personal"].active { border-color: var(--category-personal, #f472b6); background: rgba(244, 114, 182, 0.1); color: var(--category-personal, #f472b6); }
.contact-type-hint { font-size: 0.75rem; color: var(--text-tertiary, #94a3b8); margin: 0; }
.dark-mode .contact-type-section { border-top-color: rgba(255, 255, 255, 0.1); }
.dark-mode .contact-type-label { color: #e2e8f0; }
.dark-mode .contact-type-chips .mode-chip { border-color: rgba(255, 255, 255, 0.15); color: #94a3b8; }
.dark-mode .contact-type-chips .mode-chip:hover { border-color: #818cf8; color: #818cf8; background: rgba(99, 102, 241, 0.1); }
.dark-mode .contact-type-chips .mode-chip.active { border-color: #818cf8; background: rgba(99, 102, 241, 0.15); color: #a5b4fc; }
.dark-mode .contact-type-chips .mode-chip[data-contact-type="work"].active { border-color: #60a5fa; background: rgba(59, 130, 246, 0.15); color: #93bbfd; }
.dark-mode .contact-type-chips .mode-chip[data-contact-type="personal"].active { border-color: var(--category-personal-light, #f9a8d4); background: rgba(244, 114, 182, 0.15); color: var(--category-personal-lighter, #fbcfe8); }

/* ============================================
   PRIVACY OVERRIDE GROUP (event modal)
   ============================================ */
.privacy-override-group { margin-top: 8px; }
.privacy-override-group label { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 0.85rem; color: var(--text-primary, #1e293b); margin-bottom: 6px; }
.privacy-override-group label i { color: #14b8a6; }
.privacy-override-group .form-select {
    width: 100%; padding: 8px 12px; border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px; background: var(--card-bg, #ffffff); color: var(--text-primary, #1e293b);
    font-size: 0.85rem; cursor: pointer;
}
.privacy-override-group .form-hint { font-size: 0.72rem; color: var(--text-tertiary, #94a3b8); margin: 4px 0 0 0; }
.dark-mode .privacy-override-group label { color: #e2e8f0; }
.dark-mode .privacy-override-group .form-select { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.15); color: #e2e8f0; }

/* ============================================
   PRIVACY MODE BODY STATES
   ============================================
   NOTE: These CSS rules are COMPLEMENTARY to JavaScript filtering.
   Primary privacy enforcement happens in PrivacyViewModeService which
   REMOVES data from DOM. These styles provide visual polish only.
   ============================================ */

/* Privacy mode notice (shown when team members are hidden) */
.privacy-mode-notice {
    display: flex; align-items: center; justify-content: center;
    padding: 24px 16px; margin: 12px 0;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(99, 102, 241, 0.08));
    border: 1px dashed rgba(20, 184, 166, 0.3);
    border-radius: 16px;
}
.privacy-notice-content {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    text-align: center; color: var(--text-secondary, #64748b);
}
.privacy-notice-content i {
    font-size: 1.5rem; color: #14b8a6; margin-bottom: 4px;
}
.privacy-notice-content span {
    font-weight: 600; font-size: 0.9rem; color: var(--text-primary, #1e293b);
}
.privacy-notice-content small {
    font-size: 0.78rem; color: var(--text-tertiary, #94a3b8);
}
.dark-mode .privacy-notice-content span { color: #e2e8f0; }
.dark-mode .privacy-notice-content small { color: #64748b; }
.dark-mode .privacy-mode-notice {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(99, 102, 241, 0.12));
    border-color: rgba(20, 184, 166, 0.25);
}

/* Sanitized event indicator (events with stripped data) */
.buddy-event-item.privacy-sanitized {
    border-left-color: #94a3b8 !important;
    background: rgba(148, 163, 184, 0.05);
}
.buddy-event-item.privacy-sanitized .buddy-event-title {
    font-style: italic; color: var(--text-secondary, #64748b);
}

/* Visual fallback for private mode (JS handles actual removal) */
body.privacy-mode-private .timezone-section:not([data-timezone-id="current"]):not(.privacy-mode-notice) {
    display: none; /* Hide any that slip through JS filtering */
}

/* Busy-only mode visual polish (data already sanitized by JS) */
body.privacy-mode-busy-only .buddy-event-item:not(.privacy-sanitized) .buddy-event-description,
body.privacy-mode-busy-only .buddy-event-item:not(.privacy-sanitized) .buddy-event-detail {
    display: none; /* Extra safety for non-sanitized events */
}

/* Calendar day override indicator */
.calendar-day.has-privacy-override { position: relative; }
.calendar-day.has-privacy-override::after {
    content: ''; position: absolute; top: 2px; right: 2px; width: 6px; height: 6px;
    border-radius: 50%; background: #14b8a6; box-shadow: 0 0 4px rgba(20, 184, 166, 0.4);
}
.calendar-day.has-month-override::before {
    content: ''; position: absolute; bottom: 2px; right: 2px; width: 5px; height: 5px;
    border-radius: 50%; background: #f59e0b; opacity: 0.7;
}

/* ============================================
   PRIVACY CONTEXT MENU (calendar overrides)
   ============================================ */
.privacy-context-menu {
    position: fixed; z-index: var(--z-popover); min-width: 220px; background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); padding: 8px;
}
.privacy-context-menu .context-header {
    font-size: 0.75rem; font-weight: 600; color: var(--text-tertiary, #94a3b8);
    text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 8px 6px;
}
.privacy-context-menu .context-option {
    display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: none;
    border-radius: 8px; background: transparent; cursor: pointer; width: 100%; text-align: left;
    font-size: 0.82rem; color: var(--text-primary, #1e293b); transition: background 0.15s;
}
.privacy-context-menu .context-option:hover { background: rgba(20, 184, 166, 0.08); }
.privacy-context-menu .context-option i { width: 20px; text-align: center; font-size: 0.8rem; }
.privacy-context-menu .context-option.active { background: rgba(20, 184, 166, 0.1); color: #14b8a6; font-weight: 600; }
.privacy-context-menu .context-divider { height: 1px; background: var(--border-color, #e2e8f0); margin: 6px 0; }
.privacy-context-menu .context-option.clear-option { color: #ef4444; }
.privacy-context-menu .context-option.clear-option:hover { background: rgba(239, 68, 68, 0.08); }
.dark-mode .privacy-context-menu { background: var(--card-bg, #1e293b); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); }
.dark-mode .privacy-context-menu .context-option { color: #e2e8f0; }
.dark-mode .privacy-context-menu .context-option:hover { background: rgba(255, 255, 255, 0.06); }
.dark-mode .privacy-context-menu .context-divider { background: rgba(255, 255, 255, 0.1); }

/* PCM (Privacy Context Menu) inner elements */
.privacy-context-menu .pcm-header {
    font-size: 0.78rem; font-weight: 700; color: #14b8a6;
    padding: 6px 10px 4px; display: flex; align-items: center; gap: 6px;
    border-bottom: 1px solid var(--border-color, #e2e8f0); margin-bottom: 6px; padding-bottom: 8px;
}
.privacy-context-menu .pcm-section { padding: 2px 0; }
.privacy-context-menu .pcm-section-title {
    font-size: 0.72rem; font-weight: 600; color: var(--text-tertiary, #94a3b8);
    text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 10px 6px;
    display: flex; align-items: center; gap: 6px;
}
.privacy-context-menu .pcm-active-badge {
    font-size: 0.65rem; background: rgba(20, 184, 166, 0.15); color: #14b8a6;
    padding: 1px 6px; border-radius: 4px; text-transform: none; letter-spacing: 0; font-weight: 500;
}
.privacy-context-menu .pcm-options { display: flex; flex-direction: column; gap: 1px; }
.privacy-context-menu .pcm-option {
    display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: none;
    border-radius: 8px; background: transparent; cursor: pointer; width: 100%; text-align: left;
    font-size: 0.82rem; color: var(--text-primary, #1e293b); transition: background 0.15s;
}
.privacy-context-menu .pcm-option:hover { background: rgba(20, 184, 166, 0.08); }
.privacy-context-menu .pcm-option i { width: 20px; text-align: center; font-size: 0.8rem; }
.privacy-context-menu .pcm-option.active {
    background: rgba(20, 184, 166, 0.1); color: #14b8a6; font-weight: 600;
}
.privacy-context-menu .pcm-divider { height: 1px; background: var(--border-color, #e2e8f0); margin: 6px 0; }
.privacy-context-menu .pcm-clear {
    display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: none;
    border-radius: 8px; background: transparent; cursor: pointer; width: 100%; text-align: left;
    font-size: 0.78rem; color: #ef4444; transition: background 0.15s; margin-top: 2px;
}
.privacy-context-menu .pcm-clear:hover { background: rgba(239, 68, 68, 0.08); }
.privacy-context-menu .pcm-clear i { font-size: 0.7rem; }

/* Dark mode PCM */
.dark-mode .privacy-context-menu .pcm-header { color: #2dd4bf; border-bottom-color: rgba(255, 255, 255, 0.1); }
.dark-mode .privacy-context-menu .pcm-option { color: #e2e8f0; }
.dark-mode .privacy-context-menu .pcm-option:hover { background: rgba(255, 255, 255, 0.06); }
.dark-mode .privacy-context-menu .pcm-option.active { background: rgba(20, 184, 166, 0.2); color: #2dd4bf; }
.dark-mode .privacy-context-menu .pcm-divider { background: rgba(255, 255, 255, 0.1); }
.dark-mode .privacy-context-menu .pcm-active-badge { background: rgba(20, 184, 166, 0.25); color: #2dd4bf; }
.dark-mode .privacy-context-menu .pcm-clear { color: #f87171; }
.dark-mode .privacy-context-menu .pcm-clear:hover { background: rgba(239, 68, 68, 0.12); }

/* ============================================
   HIDE CONTACT BADGES (body toggle)
   ============================================ */
body.hide-contact-badges .contact-type-badge { display: none !important; }

/* ============================================
   OVERRIDE HIERARCHY INFO
   ============================================ */
.override-hierarchy-info {
    display: flex; flex-direction: column; gap: 6px; padding: 4px 0;
}
.hierarchy-step {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    background: rgba(20, 184, 166, 0.04); border-radius: 10px;
    font-size: 0.82rem; color: var(--text-primary, #1e293b);
}
.hierarchy-step i {
    width: 20px; text-align: center; font-size: 0.8rem; color: var(--text-tertiary, #94a3b8);
}
.hierarchy-rank {
    width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--primary-color, #14b8a6); color: #fff;
    font-size: 0.7rem; font-weight: 700; flex-shrink: 0;
}
.hierarchy-step:first-child .hierarchy-rank { background: #14b8a6; }
.hierarchy-step:nth-child(2) .hierarchy-rank { background: #3b82f6; }
.hierarchy-step:nth-child(3) .hierarchy-rank { background: #8b5cf6; }
.hierarchy-step:nth-child(4) .hierarchy-rank { background: #94a3b8; }

/* Dark mode hierarchy */
.dark-mode .hierarchy-step { background: rgba(255, 255, 255, 0.04); color: #e2e8f0; }
.dark-mode .hierarchy-step i { color: #64748b; }

/* ============================================
   WEEK PRIVACY BUTTON & DROPDOWN
   ============================================ */
.week-privacy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8rem;
}

.week-privacy-btn:hover {
    border-color: #14b8a6;
    background: rgba(20, 184, 166, 0.08);
    color: #14b8a6;
}

.week-privacy-btn.has-override {
    background: rgba(20, 184, 166, 0.12);
    border-color: #14b8a6;
}

/* Week Privacy Dropdown */
.week-privacy-dropdown {
    min-width: 280px;
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.wpd-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary, #1e293b);
}

.wpd-header i {
    color: #14b8a6;
}

.wpd-active-badge {
    margin-left: auto;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    background: #14b8a6;
    color: white;
    border-radius: 10px;
}

.wpd-section {
    padding: 12px 16px;
}

.wpd-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.wpd-divider {
    height: 1px;
    background: var(--border-color, #e2e8f0);
}

.wpd-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wpd-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary, #1e293b);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.85rem;
    text-align: left;
}

.wpd-option:hover {
    background: var(--bg-secondary, #f8fafc);
}

.wpd-option.active {
    background: rgba(20, 184, 166, 0.1);
    color: #0d9488;
}

.wpd-option i {
    width: 18px;
    text-align: center;
}

.wpd-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px;
    margin-top: 8px;
    border: 1px dashed var(--border-color, #e2e8f0);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary, #64748b);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.wpd-clear:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

/* A6 (plan 2026-07-14): week-view toolbar + bulk team-visibility actions. */
.cal-week-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 6px 8px;
    gap: 8px;
}
.cal-week-privacy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-full, 9999px);
    background: var(--surface-primary, #fff);
    color: var(--text-secondary, #475569);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.cal-week-privacy-btn:hover {
    border-color: var(--primary-400, #2dd4bf);
    color: var(--primary-700, #0f766e);
}
.cal-week-privacy-btn:focus-visible {
    outline: 2px solid var(--primary-500, #14b8a6);
    outline-offset: 2px;
}
.wpd-section--bulk {
    border-top: 1px solid var(--border-color, #e2e8f0);
    margin-top: 8px;
    padding-top: 8px;
}
.wpd-bulk-options {
    display: flex;
    gap: 8px;
}
.wpd-bulk {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary, #475569);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.wpd-bulk:hover {
    border-color: var(--visibility-blocked, #d97706);
    color: var(--visibility-blocked, #d97706);
    background: color-mix(in srgb, var(--visibility-blocked, #d97706) 8%, transparent);
}
body.dark-mode .cal-week-privacy-btn {
    background: var(--surface-primary, #0f172a);
    border-color: var(--border-color, #334155);
    color: var(--slate-200, #e2e8f0);
}

.wpd-default-options {
    display: flex;
    gap: 8px;
}

.wpd-default-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary, #64748b);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.wpd-default-btn i {
    font-size: 1rem;
}

.wpd-default-btn:hover {
    border-color: #14b8a6;
    background: rgba(20, 184, 166, 0.05);
}

.wpd-default-btn.active {
    border-color: #14b8a6;
    background: rgba(20, 184, 166, 0.1);
    color: #0d9488;
}

.wpd-clear-default {
    text-align: center;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--text-tertiary, #94a3b8);
    cursor: pointer;
}

.wpd-clear-default:hover {
    color: #ef4444;
    text-decoration: underline;
}

.wpd-bulk-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wpd-bulk-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-primary, #1e293b);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.wpd-bulk-btn:hover {
    background: rgba(20, 184, 166, 0.1);
    color: #0d9488;
}

.wpd-bulk-btn i {
    width: 16px;
    text-align: center;
    color: var(--text-secondary, #64748b);
}

/* ============================================
   UNIFIED PRIVACY SETTINGS PANEL
   ============================================ */
#privacy-settings-panel.privacy-settings-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-elevated, 3500);
}

.psp-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
}

.psp-content {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    background: var(--bg-primary, #ffffff);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.psp-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    color: white;
}

.psp-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
}

.psp-period {
    margin-left: auto;
    font-size: 0.85rem;
    opacity: 0.9;
}

.psp-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-full, 9999px);
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

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

.psp-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.psp-section {
    margin-bottom: 20px;
}

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

.psp-section-header h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

.psp-section-header h4 i {
    color: #14b8a6;
}

.psp-help-text {
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
    margin-bottom: 12px;
}

.psp-subsection {
    margin-top: 16px;
}

.psp-subsection-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-tertiary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.psp-visibility-options {
    display: flex;
    gap: 10px;
}

.psp-vis-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    border: 2px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    background: var(--bg-secondary, #f8fafc);
    cursor: pointer;
    transition: all 0.2s ease;
}

.psp-vis-btn i {
    font-size: 1.2rem;
    color: var(--text-secondary, #64748b);
}

.psp-vis-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary, #1e293b);
}

.psp-vis-desc {
    font-size: 0.7rem;
    color: var(--text-tertiary, #94a3b8);
    text-align: center;
}

.psp-vis-btn:hover {
    border-color: #14b8a6;
    background: rgba(20, 184, 166, 0.05);
}

.psp-vis-btn.active {
    border-color: #14b8a6;
    background: rgba(20, 184, 166, 0.1);
}

.psp-vis-btn.active i {
    color: #14b8a6;
}

.psp-vis-btn[data-visibility="hidden"].active i { color: #8b5cf6; }
.psp-vis-btn[data-visibility="busy"].active i { color: #f59e0b; }
.psp-vis-btn[data-visibility="full"].active i { color: #22c55e; }

.psp-event-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--bg-secondary, #f8fafc);
    border-radius: 8px;
}

.psp-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
}

.psp-stat.hidden i { color: #8b5cf6; }
.psp-stat.busy i { color: #f59e0b; }
.psp-stat.full i { color: #22c55e; }

.psp-bulk-actions {
    display: flex;
    gap: 8px;
}

.psp-bulk-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary, #64748b);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.psp-bulk-btn:hover {
    border-color: #14b8a6;
    background: rgba(20, 184, 166, 0.05);
    color: #0d9488;
}

.psp-divider {
    height: 1px;
    background: var(--border-color, #e2e8f0);
    margin: 20px 0;
}

.psp-view-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.psp-view-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.psp-view-btn i {
    font-size: 1rem;
}

.psp-view-label {
    font-size: 0.75rem;
    color: var(--text-secondary, #64748b);
}

.psp-view-btn:hover {
    border-color: #14b8a6;
    background: rgba(20, 184, 166, 0.05);
}

.psp-view-btn.active {
    border-color: #14b8a6;
    background: rgba(20, 184, 166, 0.1);
}

.psp-view-btn.active .psp-view-label {
    color: #0d9488;
    font-weight: 600;
}

.psp-clear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px;
    margin-top: 12px;
    border: 1px dashed var(--border-color, #e2e8f0);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary, #64748b);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.psp-clear-btn:hover {
    border-color: #ef4444;
    color: #ef4444;
}

.psp-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-secondary, #f8fafc);
}

.psp-done-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.psp-done-btn:hover {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}

/* ============================================
   TIMELINE EVENT PRIVACY TOGGLE
   Always visible in top-right corner
   ============================================ */
.event-privacy-toggle {
    position: absolute;
    right: 3px;
    top: 3px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    font-size: 8px;
    cursor: pointer;
    opacity: 1;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    z-index: 20;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.event-privacy-toggle:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* Privacy toggle colors - canonical purple/amber/green */
.event-privacy-toggle[data-visibility="hidden"] { background: #8b5cf6; }
.event-privacy-toggle[data-visibility="busy"] { background: #f59e0b; }
.event-privacy-toggle[data-visibility="full"] { background: #22c55e; }
.event-privacy-toggle i { color: white; }

/* ============================================
   PRIVACY DAY ICON (INTERACTIVE)
   ============================================ */
.privacy-day-icon {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: all 0.2s ease;
  z-index: 5;
}

.privacy-day-icon i {
  font-size: 10px;
}

.calendar-day:hover .privacy-day-icon,
.privacy-day-icon:focus {
  opacity: 1;
}

.privacy-day-icon:hover {
  transform: scale(1.2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.privacy-day-icon.has-day-override {
  opacity: 1;
  background: #f0fdfa;
  border: 1px solid #14b8a6;
}

.privacy-day-icon.has-week-override {
  opacity: 1;
  background: #eef2ff;
  border: 1px solid #6366f1;
}

.privacy-day-icon.has-month-override {
  opacity: 1;
  background: #f5f3ff;
  border: 1px solid #8b5cf6;
}

.privacy-day-icon.privacy-icon-changed {
  animation: privacy-icon-pulse 0.3s ease;
}

@keyframes privacy-icon-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Privacy day icon mode colors - Canonical from PrivacyVisualConfig */
.privacy-day-icon[data-mode="all"] i { color: #6366f1; }       /* Indigo-500 */
.privacy-day-icon[data-mode="work"] i { color: #3b82f6; }      /* Blue-500 */
.privacy-day-icon[data-mode="personal"] i { color: #f472b6; }  /* Pink-400 */
.privacy-day-icon[data-mode="private"] i { color: #64748b; }   /* Slate-500 (was red) */
.privacy-day-icon[data-mode="busy-only"] i { color: #94a3b8; } /* Slate-400 (was orange) */

/* ============================================
   PRIVACY MODE ACTIVE BANNER
   ============================================ */
.privacy-mode-banner {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin: 8px 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  animation: slideDown 0.3s ease;
}

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

.privacy-mode-banner.active {
  display: flex;
}

.privacy-mode-banner.mode-private {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #991b1b;
}

.privacy-mode-banner.mode-private i {
  color: #ef4444;
}

.privacy-mode-banner .banner-text {
  flex: 1;
}

.privacy-mode-banner .banner-text strong {
  display: block;
  margin-bottom: 2px;
}

.privacy-mode-banner .banner-text small {
  opacity: 0.8;
  font-weight: 400;
}

.privacy-mode-banner .banner-dismiss {
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  color: inherit;
  transition: background 0.2s ease;
}

.privacy-mode-banner .banner-dismiss:hover {
  background: rgba(0, 0, 0, 0.15);
}

/* ============================================
   PRIVACY LEGEND/KEY
   ============================================ */
.privacy-legend {
  padding: 12px;
  background: var(--card-bg, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  margin-top: 12px;
}

.privacy-legend-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.privacy-legend-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.privacy-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: white;
  border-radius: 6px;
  font-size: 12px;
}

.privacy-legend-item i {
  width: 16px;
  text-align: center;
}

.privacy-legend-item span {
  color: var(--text-primary, #1e293b);
}

/* Dark mode for privacy day icon and banner */
.dark-mode .privacy-day-icon {
  background: rgba(30, 41, 59, 0.9);
}

.dark-mode .privacy-day-icon:hover {
  background: rgba(51, 65, 85, 1);
}

.dark-mode .privacy-day-icon.has-day-override {
  background: rgba(20, 184, 166, 0.2);
  border-color: rgba(20, 184, 166, 0.5);
}

.dark-mode .privacy-mode-banner.mode-private {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.dark-mode .privacy-mode-banner.mode-busy-only {
  background: rgba(249, 115, 22, 0.15);
  border-color: rgba(249, 115, 22, 0.4);
  color: #fdba74;
}

.dark-mode .privacy-legend {
  background: var(--card-bg-dark, #1e293b);
  border-color: var(--border-dark, #334155);
}

.dark-mode .privacy-legend-item {
  background: rgba(51, 65, 85, 0.5);
}

.dark-mode .privacy-legend-item span {
  color: var(--text-primary-dark, #f1f5f9);
}

/* ============================================
   CALENDAR DAY PRIVACY OVERRIDE INDICATORS
   ============================================ */
.calendar-day.has-day-override {
    position: relative;
}

.calendar-day.has-day-override::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #14b8a6;
    border-radius: 2px 0 0 2px;
}

.calendar-day.has-week-override:not(.has-day-override) {
    position: relative;
}

.calendar-day.has-week-override:not(.has-day-override)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #6366f1;
    border-radius: 2px 0 0 2px;
}

.calendar-day.has-month-override:not(.has-week-override):not(.has-day-override) {
    position: relative;
}

.calendar-day.has-month-override:not(.has-week-override):not(.has-day-override)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #8b5cf6;
    border-radius: 2px 0 0 2px;
}

/* ============================================
   PRIVACY STATUS BAR
   ============================================ */
.privacy-status-bar {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(20, 184, 166, 0.05) 100%);
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: 8px;
}

.psb-content {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.psb-content > i {
    font-size: 0.9rem;
}

.psb-label {
    flex: 1;
    font-size: 0.8rem;
    color: var(--text-primary, #1e293b);
}

.psb-label strong {
    color: #0d9488;
}

.psb-clear {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-tertiary, #94a3b8);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.psb-clear:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* ============================================
   MONTH PRIVACY DROPDOWN (shield button)
   ============================================
   Replaces the PRIVACY ONBOARDING TOOLTIP block, removed 2026-08-17 along
   with the 1s timer that popped it. Its .pot-* rules had no markup left.

   The dropdown itself had NEVER been styled - showMonthPrivacyDropdown built
   .mpd-* markup that matched no stylesheet in the repo, so it rendered as bare
   inline-flow text over the calendar. Styling it here, next to the rest of the
   privacy surfaces, so the help section it now carries is legible. */
.month-privacy-dropdown {
    width: 260px;
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
    padding: 10px;
    font-size: 0.875rem;
}
.mpd-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
    padding: 2px 4px 8px;
}
.mpd-header i { color: var(--primary-600, #0d9488); }
.mpd-active-badge {
    margin-left: auto;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.12);
    color: var(--primary-700, #0f766e);
}
.mpd-section-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #6b7280);
    padding: 4px;
}
.mpd-options { display: flex; flex-direction: column; gap: 2px; }
.mpd-option {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 9px;
    border: 1.5px solid transparent;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    text-align: left;
    color: var(--text-primary, #1f2937);
    font-size: 0.875rem;
}
.mpd-option:hover { background: var(--hover-bg, #f3f4f6); }
.mpd-option.active {
    border-color: var(--primary-200, #99f6e4);
    background: rgba(20, 184, 166, 0.10);
    font-weight: 650;
}
.mpd-clear {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    margin-top: 6px;
    padding: 7px 9px;
    border: none;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    font-size: 0.8125rem;
}
.mpd-clear:hover { background: var(--hover-bg, #f3f4f6); }

/* Collapsed by default: the four facts the old popup forced on first-time
   users, now reached by choice from the control they describe. */
.mpd-help {
    margin-top: 8px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    padding-top: 8px;
}
.mpd-help > summary {
    cursor: pointer;
    list-style: none;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary-700, #0f766e);
    padding: 3px 4px;
    border-radius: 6px;
}
.mpd-help > summary::-webkit-details-marker { display: none; }
.mpd-help > summary::before {
    content: 'ƒA';
    display: inline-block;
    margin-right: 7px;
    transition: transform 0.15s ease;
}
.mpd-help[open] > summary::before { transform: rotate(90deg); }
.mpd-help > summary:hover { background: var(--hover-bg, #f3f4f6); }
.mpd-help-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0 4px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.mpd-help-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-secondary, #6b7280);
}
.mpd-help-list i {
    color: var(--primary-600, #0d9488);
    margin-top: 2px;
    flex-shrink: 0;
    width: 13px;
}
.mpd-help-list strong { color: var(--text-primary, #1f2937); }

body.dark-mode .month-privacy-dropdown {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
body.dark-mode .mpd-header { color: #f1f5f9; }
body.dark-mode .mpd-header i,
body.dark-mode .mpd-help > summary,
body.dark-mode .mpd-help-list i { color: #5eead4; }
body.dark-mode .mpd-active-badge {
    background: rgba(20, 184, 166, 0.18);
    color: #5eead4;
}
body.dark-mode .mpd-option { color: #e2e8f0; }
body.dark-mode .mpd-option:hover,
body.dark-mode .mpd-clear:hover,
body.dark-mode .mpd-help > summary:hover { background: rgba(255, 255, 255, 0.06); }
body.dark-mode .mpd-option.active {
    border-color: rgba(20, 184, 166, 0.45);
    background: rgba(20, 184, 166, 0.16);
}
body.dark-mode .mpd-help { border-top-color: #334155; }
body.dark-mode .mpd-help-list li { color: #94a3b8; }
body.dark-mode .mpd-help-list strong { color: #f1f5f9; }

/* ============================================
   DARK MODE FOR NEW COMPONENTS
   ============================================ */
.dark-mode .week-privacy-btn {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

.dark-mode .week-privacy-btn:hover {
    border-color: #2dd4bf;
    background: rgba(20, 184, 166, 0.15);
    color: #2dd4bf;
}

.dark-mode .week-privacy-dropdown {
    background: #1e293b;
    border-color: #334155;
}

.dark-mode .wpd-header {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

.dark-mode .wpd-section-title {
    color: #64748b;
}

.dark-mode .wpd-option {
    color: #e2e8f0;
}

.dark-mode .wpd-option:hover {
    background: rgba(255, 255, 255, 0.05);
}

.dark-mode .wpd-option.active {
    background: rgba(20, 184, 166, 0.15);
    color: #2dd4bf;
}

.dark-mode .wpd-default-btn {
    border-color: #334155;
    color: #94a3b8;
}

.dark-mode .wpd-default-btn:hover {
    border-color: #2dd4bf;
}

.dark-mode .wpd-default-btn.active {
    border-color: #2dd4bf;
    background: rgba(20, 184, 166, 0.15);
    color: #2dd4bf;
}

.dark-mode .wpd-bulk-btn {
    background: #0f172a;
    color: #e2e8f0;
}

.dark-mode .wpd-bulk-btn:hover {
    background: rgba(20, 184, 166, 0.15);
    color: #2dd4bf;
}

.dark-mode .psp-overlay {
    background: rgba(0, 0, 0, 0.6);
}

.dark-mode .psp-content {
    background: #1e293b;
}

.dark-mode .psp-section-header h4 {
    color: #f1f5f9;
}

.dark-mode .psp-help-text {
    color: #94a3b8;
}

.dark-mode .psp-vis-btn {
    background: #0f172a;
    border-color: #334155;
}

.dark-mode .psp-vis-label {
    color: #e2e8f0;
}

.dark-mode .psp-vis-btn:hover {
    border-color: #2dd4bf;
}

.dark-mode .psp-vis-btn.active {
    border-color: #2dd4bf;
    background: rgba(20, 184, 166, 0.15);
}

.dark-mode .psp-event-stats {
    background: #0f172a;
}

.dark-mode .psp-stat {
    color: #94a3b8;
}

.dark-mode .psp-view-btn {
    border-color: #334155;
}

.dark-mode .psp-view-label {
    color: #94a3b8;
}

.dark-mode .psp-view-btn:hover {
    border-color: #2dd4bf;
}

.dark-mode .psp-view-btn.active {
    border-color: #2dd4bf;
    background: rgba(20, 184, 166, 0.15);
}

.dark-mode .psp-view-btn.active .psp-view-label {
    color: #2dd4bf;
}

.dark-mode .psp-footer {
    background: #0f172a;
    border-color: #334155;
}

/* Dark mode: privacy toggle keeps visibility-based colors, just adjust shadow */
.dark-mode .event-privacy-toggle {
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.dark-mode .event-privacy-toggle:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

.dark-mode .privacy-status-bar {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.15) 0%, rgba(20, 184, 166, 0.08) 100%);
    border-color: rgba(45, 212, 191, 0.3);
}

.dark-mode .psb-label {
    color: #e2e8f0;
}

.dark-mode .psb-label strong {
    color: #2dd4bf;
}

/* The .privacy-onboarding-tooltip / .pot-* dark-mode rules were removed
   2026-08-17 along with the timed popup itself. Its replacement - the shield
   button's collapsed help section - carries its own dark-mode rules in the
   MONTH PRIVACY DROPDOWN block above. */

/* ============================================
   ORGANIZED PRIVACY SETTINGS TAB
   ============================================ */

.privacy-settings-organized {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Settings Sections */
.privacy-settings-section {
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid rgba(20, 184, 166, 0.15);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 1px 3px rgba(20, 184, 166, 0.04);
}

.privacy-settings-section-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.privacy-settings-section-header > i {
    font-size: 1.1rem;
    color: #14b8a6;
    width: 24px;
    text-align: center;
    margin-top: 2px;
}

.privacy-settings-section-header > div {
    flex: 1;
}

.privacy-settings-section-header h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    margin: 0;
}

.privacy-settings-section-header .section-hint {
    font-size: 0.75rem;
    color: var(--text-secondary, #64748b);
    margin-top: 2px;
    display: block;
}

/* Help Button */
.privacy-help-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.privacy-help-btn:hover {
    color: #14b8a6;
    background: rgba(20, 184, 166, 0.1);
}

/* Setting Groups */
.privacy-setting-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.privacy-setting-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.setting-description {
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
    margin: 0 0 8px 0;
    line-height: 1.4;
}

/* DEPRECATED: Reveal Mode Options — replaced by board-privacy-summary UI.
   Kept temporarily for any remaining compat references. */
.reveal-mode-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.reveal-mode-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 6px;
    background: var(--bg-primary, #fff);
    border: 2px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.75rem;
    color: var(--text-secondary, #64748b);
}

.reveal-mode-btn i {
    font-size: 1rem;
}

.reveal-mode-btn span {
    font-weight: 500;
    text-align: center;
}

.reveal-mode-btn:hover {
    border-color: #14b8a6;
    background: rgba(20, 184, 166, 0.05);
}

.reveal-mode-btn.active {
    border-color: #14b8a6;
    background: rgba(20, 184, 166, 0.1);
    color: #0d9488;
}

.reveal-mode-btn.active i {
    color: #14b8a6;
}

.reveal-mode-description {
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
    margin: 4px 0 0 0;
    padding: 8px 12px;
    background: var(--bg-primary, #fff);
    border-radius: 6px;
    border-left: 3px solid #14b8a6;
}

/* Board Privacy Summary */
.board-privacy-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.board-privacy-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.board-privacy-row:hover {
    border-color: var(--primary, #14b8a6);
    background: rgba(20, 184, 166, 0.04);
}

.board-privacy-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.board-privacy-info i {
    color: var(--text-secondary, #94a3b8);
    font-size: 0.85rem;
}

.board-privacy-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-privacy-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.board-preset-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
}

.board-preset-badge.preset-open {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
}

.board-preset-badge.preset-standard {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
}

.board-preset-badge.preset-privacy_first {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

.board-policy-badge {
    font-size: 0.65rem;
    color: var(--text-secondary, #94a3b8);
    padding: 2px 6px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
}

.board-privacy-gear {
    color: var(--text-secondary, #c0c8d4);
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.board-privacy-row:hover .board-privacy-gear {
    color: var(--primary, #14b8a6);
}

/* Collapsible Settings */
.privacy-setting-group.collapsible {
    background: var(--bg-primary, #fff);
    border-radius: 8px;
    overflow: hidden;
}

.privacy-setting-collapse-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-secondary, #64748b);
    transition: all 0.2s ease;
}

.privacy-setting-collapse-btn:hover {
    background: var(--bg-hover, #f1f5f9);
    color: var(--text-primary, #1e293b);
}

.privacy-setting-collapse-btn i:first-child {
    color: var(--text-secondary, #94a3b8);
}

.privacy-setting-collapse-btn span {
    flex: 1;
    text-align: left;
    font-weight: 500;
}

.collapse-icon {
    transition: transform 0.2s ease;
}

.privacy-setting-group.collapsible.open .collapse-icon {
    transform: rotate(180deg);
}

.privacy-setting-collapse-content {
    display: none;
    padding: 0 12px 12px 12px;
}

.privacy-setting-group.collapsible.open .privacy-setting-collapse-content {
    display: block;
}

/* Compact Auto Rules List */
.auto-rules-list.compact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.auto-rules-list.compact .rule-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-primary, #fff);
    border-radius: 6px;
    border: 1px solid var(--border-color, #e2e8f0);
    cursor: pointer;
    transition: all 0.2s ease;
}

.auto-rules-list.compact .rule-checkbox:hover {
    border-color: #14b8a6;
}

.auto-rules-list.compact .rule-checkbox input:checked ~ .rule-text {
    color: #0d9488;
}

.auto-rules-list.compact .rule-text {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
}

/* Action Buttons */
.privacy-action-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-primary, #1e293b);
    transition: all 0.2s ease;
}

.privacy-action-btn:hover {
    border-color: #14b8a6;
    background: rgba(20, 184, 166, 0.05);
}

.privacy-action-btn i:first-child {
    color: #14b8a6;
    width: 18px;
    text-align: center;
}

.privacy-action-btn span {
    flex: 1;
    text-align: left;
    font-weight: 500;
}

.privacy-action-btn i:last-child {
    color: var(--text-secondary, #94a3b8);
    font-size: 0.8rem;
}

/* Approval Badge */
.approval-badge {
    background: #ef4444;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* Member Defaults List */
.member-defaults-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 150px;
    overflow-y: auto;
}

.member-default-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-primary, #fff);
    border-radius: 6px;
    gap: 10px;
}

.member-default-row .member-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-primary, #1e293b);
}

.member-default-row .member-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
}

.no-members-hint {
    font-size: 0.8rem;
    color: var(--text-secondary, #94a3b8);
    margin: 0;
    padding: 12px;
    text-align: center;
    font-style: italic;
}

/* Audit Log Actions */
.audit-log-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Team Access Options in Settings */
.privacy-settings-section .team-access-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.privacy-settings-section .team-access-options .rule-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-primary, #fff);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.privacy-settings-section .team-access-options .rule-checkbox:hover {
    background: var(--bg-hover, #f1f5f9);
}

.privacy-settings-section .team-access-options .rule-text {
    font-size: 0.85rem;
    color: var(--text-primary, #1e293b);
}

/* Visibility Select in Settings */
.visibility-select {
    padding: 6px 10px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #1e293b);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.visibility-select:hover {
    border-color: #14b8a6;
}

.visibility-select:focus {
    outline: none;
    border-color: var(--focus-ring);
    box-shadow: var(--focus-ring-shadow);
}

/* Dark Mode for Organized Settings */
.dark-mode .privacy-settings-section {
    background: #1e293b;
    border-color: rgba(45, 212, 191, 0.2);
    box-shadow: 0 1px 3px rgba(45, 212, 191, 0.05);
}

.dark-mode .privacy-settings-section-header h4 {
    color: #f1f5f9;
}

.dark-mode .reveal-mode-btn {
    background: #0f172a;
    border-color: #334155;
    color: #94a3b8;
}

.dark-mode .reveal-mode-btn:hover {
    border-color: #2dd4bf;
    background: rgba(45, 212, 191, 0.1);
}

.dark-mode .reveal-mode-btn.active {
    border-color: #2dd4bf;
    background: rgba(45, 212, 191, 0.15);
    color: #2dd4bf;
}

.dark-mode .reveal-mode-description {
    background: #0f172a;
    border-color: #2dd4bf;
    color: #e2e8f0;
}

/* Dark mode: Board Privacy Summary */
.dark-mode .board-privacy-row {
    background: #0f172a;
    border-color: #334155;
}

.dark-mode .board-privacy-row:hover {
    border-color: #2dd4bf;
    background: rgba(45, 212, 191, 0.08);
}

.dark-mode .board-privacy-name {
    color: #e2e8f0;
}

.dark-mode .board-privacy-info i {
    color: #64748b;
}

.dark-mode .board-preset-badge.preset-open {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
}

.dark-mode .board-preset-badge.preset-standard {
    background: rgba(59, 130, 246, 0.18);
    color: #60a5fa;
}

.dark-mode .board-preset-badge.preset-privacy_first {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
}

.dark-mode .board-policy-badge {
    color: #64748b;
    border-color: #334155;
}

.dark-mode .board-privacy-gear {
    color: #475569;
}

.dark-mode .board-privacy-row:hover .board-privacy-gear {
    color: #2dd4bf;
}

.dark-mode .privacy-setting-group.collapsible {
    background: #0f172a;
}

.dark-mode .privacy-setting-collapse-btn:hover {
    background: #334155;
}

.dark-mode .auto-rules-list.compact .rule-checkbox {
    background: #0f172a;
    border-color: #334155;
}

.dark-mode .auto-rules-list.compact .rule-checkbox:hover {
    border-color: #2dd4bf;
}

.dark-mode .auto-rules-list.compact .rule-checkbox input:checked ~ .rule-text {
    color: #2dd4bf;
}

.dark-mode .privacy-action-btn {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

.dark-mode .privacy-action-btn:hover {
    border-color: #2dd4bf;
    background: rgba(45, 212, 191, 0.1);
}

.dark-mode .privacy-action-btn i:first-child {
    color: #2dd4bf;
}

.dark-mode .member-default-row {
    background: #0f172a;
}

.dark-mode .member-default-row .member-name {
    color: #f1f5f9;
}

.dark-mode .privacy-settings-section .team-access-options .rule-checkbox {
    background: #0f172a;
}

.dark-mode .privacy-settings-section .team-access-options .rule-checkbox:hover {
    background: #334155;
}

.dark-mode .privacy-settings-section .team-access-options .rule-text {
    color: #f1f5f9;
}

.dark-mode .visibility-select {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

.dark-mode .visibility-select:hover {
    border-color: #2dd4bf;
}

/* Responsive for smaller screens */
@media (max-width: 480px) {
    .reveal-mode-options {
        grid-template-columns: repeat(2, 1fr);
    }

    .auto-rules-list.compact {
        flex-direction: column;
    }

    .auto-rules-list.compact .rule-checkbox {
        width: 100%;
    }
}

/* ============================================
   BOARD PRIVACY PRESET SELECTOR
   Used in board creation and board settings
   ============================================ */

.privacy-preset-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}

.privacy-preset-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary, #f8fafc);
    border: 2px solid var(--border-light, #e2e8f0);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    text-align: left;
}

.privacy-preset-card:hover {
    border-color: var(--primary-400, #2dd4bf);
    background: var(--bg-hover, #f1f5f9);
}

.privacy-preset-card.selected {
    border-color: var(--primary-500, #14b8a6);
    background: rgba(20, 184, 166, 0.05);
}

.privacy-preset-card .preset-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.03);
    flex-shrink: 0;
}

.privacy-preset-card .preset-icon i {
    font-size: 1.2rem;
}

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

.privacy-preset-card .preset-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    font-size: 0.95rem;
}

.privacy-preset-card .preset-badge {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 2px 6px;
    background: var(--primary-500, #14b8a6);
    color: white;
    border-radius: 4px;
    text-transform: uppercase;
}

.privacy-preset-card .preset-description {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
    margin-top: 2px;
}

.privacy-preset-card .preset-check {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    color: var(--primary-500, #14b8a6);
    transition: opacity 0.2s ease;
}

.privacy-preset-card.selected .preset-check {
    opacity: 1;
}

/* Dark mode */
.dark-mode .privacy-preset-card {
    background: var(--bg-secondary-dark, #1e293b);
    border-color: var(--border-dark, #334155);
}

.dark-mode .privacy-preset-card:hover {
    background: var(--bg-hover-dark, #334155);
    border-color: var(--primary-400, #2dd4bf);
}

.dark-mode .privacy-preset-card.selected {
    background: rgba(45, 212, 191, 0.08);
    border-color: var(--primary-500, #14b8a6);
}

.dark-mode .privacy-preset-card .preset-label {
    color: var(--text-primary-dark, #f1f5f9);
}

.dark-mode .privacy-preset-card .preset-description {
    color: var(--text-secondary-dark, #94a3b8);
}

.dark-mode .privacy-preset-card .preset-icon {
    background: rgba(255, 255, 255, 0.05);
}

/* ============================================
   VISIBILITY LEVEL SELECTOR (Event Modal)
   Card-based selector for privacy visibility
   ============================================ */

.privacy-visibility-selector {
    display: flex;
    gap: 8px;
    padding: 4px 0;
}

.privacy-level-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    background: var(--bg-secondary, #f8fafc);
    border: 2px solid var(--border-light, #e2e8f0);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.privacy-level-card:hover {
    border-color: var(--primary-400, #2dd4bf);
}

.privacy-level-card.active {
    border-color: var(--primary-500, #14b8a6);
    background: rgba(20, 184, 166, 0.05);
}

.privacy-level-card i {
    font-size: 1.3rem;
}

.privacy-level-card .level-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

.privacy-level-card .level-hint {
    font-size: 0.7rem;
    color: var(--text-secondary, #64748b);
}

/* Dark mode */
.dark-mode .privacy-level-card {
    background: var(--bg-secondary-dark, #1e293b);
    border-color: var(--border-dark, #334155);
}

.dark-mode .privacy-level-card:hover {
    border-color: var(--primary-400, #2dd4bf);
}

.dark-mode .privacy-level-card.active {
    background: rgba(45, 212, 191, 0.08);
    border-color: var(--primary-500, #14b8a6);
}

.dark-mode .privacy-level-card .level-label {
    color: var(--text-primary-dark, #f1f5f9);
}

.dark-mode .privacy-level-card .level-hint {
    color: var(--text-secondary-dark, #94a3b8);
}

/* Locked preset indicator */
.privacy-preset-locked {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 8px;
    color: #7c3aed;
    font-size: 0.85rem;
}

.privacy-preset-locked i {
    color: #8b5cf6;
}

.dark-mode .privacy-preset-locked {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.4);
    color: #a78bfa;
}