/* ===================================
   GLOBAL STYLES & RESET
   =================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Subtle thin scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}

/* Firefox scrollbar styling */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

/* Docs and Sheets specific ultra-thin scrollbars */
.doc-panel-body,
.doc-editor-container,
.spreadsheet-panel-body,
.spreadsheet-table-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
}

.doc-panel-body::-webkit-scrollbar,
.doc-editor-container::-webkit-scrollbar,
.spreadsheet-panel-body::-webkit-scrollbar,
.spreadsheet-table-container::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.doc-panel-body::-webkit-scrollbar-thumb,
.doc-editor-container::-webkit-scrollbar-thumb,
.spreadsheet-panel-body::-webkit-scrollbar-thumb,
.spreadsheet-table-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 3px;
}

.doc-panel-body::-webkit-scrollbar-thumb:hover,
.doc-editor-container::-webkit-scrollbar-thumb:hover,
.spreadsheet-panel-body::-webkit-scrollbar-thumb:hover,
.spreadsheet-table-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.15);
}

/* Hide scrollbar but allow scrolling */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

html {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

:root {
    /* ===================================
       APPLE-STYLE DESIGN SYSTEM
       =================================== */
    
    /* Mobile Navigation Height (used for safe bottom padding) */
    --bottom-nav-height: 70px;
    
    /* Background Colors */
    --bg-body: #F5F5F7;
    --bg-surface: #FFFFFF;
    --bg-surface-soft: rgba(255, 255, 255, 0.82);
    
    /* Accent Colors */
    --accent: #0070F3;
    --accent-soft: rgba(0, 112, 243, 0.12);
    --accent-hover: #0051CC;
    
    /* Text Colors */
    --text-main: #111111;
    --text-muted: #6E6E73;
    --text-light: #86868B;
    
    /* Border & Divider Colors */
    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-medium: rgba(0, 0, 0, 0.12);
    
    /* Semantic Colors */
    --success: #34C759;
    --success-soft: rgba(52, 199, 89, 0.12);
    --warning: #FF9500;
    --warning-soft: rgba(255, 149, 0, 0.12);
    --danger: #FF3B30;
    --danger-soft: rgba(255, 59, 48, 0.12);
    --info: #0070F3;
    --info-soft: rgba(0, 112, 243, 0.12);
    
    /* Status Colors */
    --online: #34C759;
    --offline: #D1D1D6;
    
    /* Border Radius */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    
    /* Shadows */
    --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.12);
    --shadow-subtle: 0 8px 24px rgba(15, 23, 42, 0.06);
    --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.08);
    
    /* Glass Morphism */
    --glass-bg: rgba(255, 255, 255, 0.82);
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-blur: 18px;
    
    /* Motion */
    --transition-fast: 150ms ease-out;
    --transition-medium: 220ms ease-out;
    --transition-slow: 350ms ease-out;
    
    /* Spacing (keeping for backward compatibility) */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* Legacy color aliases (for backward compatibility until components are updated) */
    --primary-blue: var(--accent);
    --primary-dark: var(--accent-hover);
    --white: #FFFFFF;
    --light-gray: var(--bg-body);
    --gray: var(--text-muted);
    --dark-gray: var(--text-main);
    --shadow-sm: var(--shadow-subtle);
    --shadow-md: var(--shadow-card);
    --shadow-lg: var(--shadow-soft);
}

/* ===================================
   DARK MODE
   =================================== */
body.dark-mode {
    /* Background Colors */
    --bg-body: #000000;
    --bg-surface: #1C1C1E;
    --bg-surface-soft: rgba(28, 28, 30, 0.95);
    
    /* Text Colors */
    --text-main: #F5F5F7;
    --text-muted: #98989D;
    --text-light: #636366;
    
    /* Border & Divider Colors */
    --border-subtle: rgba(255, 255, 255, 0.1);
    --border-medium: rgba(255, 255, 255, 0.15);
    
    /* Semantic Colors - slightly brighter for dark mode */
    --success: #32D74B;
    --success-soft: rgba(50, 215, 75, 0.15);
    --warning: #FF9F0A;
    --warning-soft: rgba(255, 159, 10, 0.15);
    --danger: #FF453A;
    --danger-soft: rgba(255, 69, 58, 0.15);
    --info: #0A84FF;
    --info-soft: rgba(10, 132, 255, 0.15);
    
    /* Accent Colors */
    --accent: #0A84FF;
    --accent-soft: rgba(10, 132, 255, 0.15);
    --accent-hover: #0070F3;
    
    /* Status Colors */
    --offline: #3A3A3C;
    
    /* Shadows - more subtle in dark mode */
    --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.6);
    --shadow-subtle: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.7);
    
    /* Glass Morphism */
    --glass-bg: rgba(28, 28, 30, 0.95);
    --glass-border: rgba(255, 255, 255, 0.1);
}

/* Dark mode scrollbars */
body.dark-mode ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18);
}

body.dark-mode * {
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

/* Dark mode docs/sheets scrollbars */
body.dark-mode .doc-panel-body::-webkit-scrollbar-thumb,
body.dark-mode .doc-editor-container::-webkit-scrollbar-thumb,
body.dark-mode .spreadsheet-panel-body::-webkit-scrollbar-thumb,
body.dark-mode .spreadsheet-table-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.06);
}

body.dark-mode .doc-panel-body::-webkit-scrollbar-thumb:hover,
body.dark-mode .doc-editor-container::-webkit-scrollbar-thumb:hover,
body.dark-mode .spreadsheet-panel-body::-webkit-scrollbar-thumb:hover,
body.dark-mode .spreadsheet-table-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.12);
}

body.dark-mode .doc-panel-body,
body.dark-mode .doc-editor-container,
body.dark-mode .spreadsheet-panel-body,
body.dark-mode .spreadsheet-table-container {
    scrollbar-color: rgba(255, 255, 255, 0.06) transparent;
}

/* Dark Mode Specific Overrides */

body.dark-mode .week-time-slot::after {
    background: var(--border-subtle);
}

body.dark-mode .week-day-column {
    border-right-color: var(--border-light);
    background: var(--bg-surface);
}

body.dark-mode .week-day-header {
    border-bottom-color: var(--border-subtle);
}

body.dark-mode .week-time-cell {
    border-bottom-color: var(--border-light);
}

body.dark-mode .week-time-cell::before {
    background: var(--border-light);
}

body.dark-mode .week-time-cell:hover {
    background: rgba(255, 255, 255, 0.03);
}

body.dark-mode .week-event-block {
    background: var(--bg-body);
    border-color: var(--border-subtle);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .week-event-block:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

body.dark-mode .week-task-block {
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.15) 0%, rgba(255, 149, 0, 0.08) 100%);
    border-color: rgba(255, 149, 0, 0.4);
}

body.dark-mode .calendar-day:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .calendar-day.today {
    background-color: var(--accent);
    color: white;
}

body.dark-mode .week-day-column.today-column {
    background: transparent;
}

body.dark-mode .week-day-column.today-column .week-time-cell {
    background: transparent;
}

/* Ensure icons have proper contrast in dark mode */
body.dark-mode .activity-icon,
body.dark-mode .stat-icon,
body.dark-mode .notification-icon {
    opacity: 1;
}

/* Dark mode input fields */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="date"],
body.dark-mode input[type="time"],
body.dark-mode input[type="number"],
body.dark-mode textarea,
body.dark-mode select {
    background: var(--bg-body);
    border-color: var(--border-subtle);
    color: var(--text-main);
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background: var(--bg-body);
    border-color: var(--border-subtle);
    color: var(--text-main);
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    background: var(--bg-surface);
    border-color: var(--accent);
    color: var(--text-main);
}

body.dark-mode input[type="file"] {
    background: var(--bg-body);
    border-color: var(--border-subtle);
    color: var(--text-main);
}

body.dark-mode input[type="checkbox"],
body.dark-mode input[type="radio"] {
    accent-color: var(--accent);
    background: var(--bg-body);
    border-color: var(--border-subtle);
}

body.dark-mode .custom-dropdown-selected,
body.dark-mode .custom-dropdown-options,
body.dark-mode .custom-dropdown-option {
    background: var(--bg-body);
    color: var(--text-main);
    border-color: var(--border-subtle);
}

body.dark-mode .form-group input,
body.dark-mode .form-group textarea,
body.dark-mode .form-group select {
    background: var(--bg-body);
    color: var(--text-main);
    border-color: var(--border-subtle);
}

body.dark-mode .modal-content input,
body.dark-mode .modal-content textarea,
body.dark-mode .modal-content select {
    background: var(--bg-body);
    color: var(--text-main);
    border-color: var(--border-subtle);
}

body.dark-mode input[type="file"] {
    background: var(--bg-body);
    border-color: var(--border-subtle);
    color: var(--text-main);
}

body.dark-mode .profile-avatar-large,
body.dark-mode #avatarSettingsPreview,
body.dark-mode .avatar-settings-preview {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
}


body.dark-mode input[type="text"]:focus,
body.dark-mode input[type="email"]:focus,
body.dark-mode input[type="date"]:focus,
body.dark-mode input[type="time"]:focus,
body.dark-mode input[type="number"]:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    background: var(--bg-surface);
    border-color: var(--accent);
}

/* Dark mode buttons */
body.dark-mode .btn-secondary {
    background: var(--bg-body);
    border-color: var(--border-subtle);
    color: var(--text-main);
}

body.dark-mode .btn-secondary:hover {
    background: var(--bg-surface);
    border-color: var(--border-medium);
}

/* Dark mode chat input */
body.dark-mode .chat-input-container {
    background: rgba(0, 0, 0, 0.4);
}

body.dark-mode .chat-input {
    background: var(--bg-body);
    border-color: var(--border-subtle);
    color: var(--text-main);
}

/* Dark mode event items */
body.dark-mode .event-item {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
}

/* Dark mode task items */
body.dark-mode .task-item {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
}

/* Dark mode dropdown/select custom styles */
body.dark-mode .custom-dropdown-selected {
    background: var(--bg-body);
    border-color: var(--border-subtle);
}

body.dark-mode .custom-dropdown-options {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
}

body.dark-mode .dropdown-option:hover {
    background: rgba(10, 132, 255, 0.15);
}

/* ===================================
   DISABLE ANIMATIONS
   =================================== */
/* When user disables animations, override all transitions and animations */
.no-animations *,
.no-animations *::before,
.no-animations *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
}

/* Typography */
body,
button,
input,
textarea,
select {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: var(--bg-body);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    min-height: 100vh;
    padding: 0;
    margin: 0;
}

/* ===================================
   APP CONTAINER & LAYOUT
   =================================== */
.app-container {
    display: flex;
    max-width: calc(100vw - 48px);
    height: calc(100vh - 48px);

    margin: 24px auto;
    background: var(--glass-bg);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    position: relative;
}

/* ===================================
   SIDEBAR
   =================================== */
.sidebar {
    width: 200px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-right: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    overflow: hidden;
    padding: 20px 12px;
}

.sidebar-header {
    padding: 0 8px 24px 8px;
    margin-bottom: 16px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -0.02em;
}

.logo-img {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: contain;
    flex-shrink: 0;
}

.logo-t {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, #0078d4, #0061b0);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.logo i {
    font-size: 28px;
    opacity: 0.95;
}

/* Sidebar Navigation */
.sidebar-nav {
    flex: 1;
    padding: 0 4px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: none;
    background: transparent;
    border-radius: 999px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
    transition: all var(--transition-fast);
    position: relative;
    letter-spacing: -0.01em;
}

.nav-item:hover {
    background-color: var(--accent-soft);
    color: var(--text-main);
    transform: translateY(-1px);
}

.nav-item.active {
    background-color: transparent;
    color: var(--accent);
    font-weight: 600;
    border: 1px solid var(--accent);
}

.nav-item i {
    font-size: 18px;
    width: 20px;
    text-align: center;
    opacity: 0.85;
    transition: opacity var(--transition-fast);
}

.nav-item:hover i,
.nav-item.active i {
    opacity: 1;
}

/* Hide sidebar icons when disabled */
.hide-sidebar-icons .nav-item i {
    display: none;
}

.hide-sidebar-icons .nav-item {
    justify-content: flex-start;
    padding-left: 20px;
}

.notification-badge {
    margin-left: auto;
    background: var(--danger);
    color: white;
    font-size: 11px;
    padding: 3px 7px;
    border-radius: 999px;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3);
}

/* Sidebar Footer */
.sidebar-footer {
    padding: 16px 8px 0 8px;
    margin-top: 16px;
}

/* Team Section */
.team-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-md);
    overflow: hidden;
}

/* Team Management Section */
.team-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px 8px;
    background: var(--bg-surface-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-subtle);
}

.team-header h3 {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.btn-icon-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-subtle);
}

.btn-icon-small:hover {
    background: #0066dd;
    transform: scale(1.05);
    box-shadow: var(--shadow-card);
}

/* Create Team Button */
#createTeamBtn:hover {
    background: #0066dd;
    transform: translateY(-1px);
    box-shadow: var(--shadow-card);
}

#createTeamBtn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.team-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.teammate-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-subtle);
}

body.dark-mode .teammate-card {
    background: var(--bg-surface);
    border-color: var(--border-medium);
    box-shadow: 0 2px 16px rgba(0,0,0,0.32);
}

body.dark-mode .teammate-card {
    background: var(--bg-body);
    border-color: var(--border-medium);
    box-shadow: 0 2px 12px rgba(0,0,0,0.32);
}

body.dark-mode .teammate-card:hover {
    background: var(--bg-surface);
    border-color: var(--accent);
    box-shadow: 0 2px 16px rgba(0,112,243,0.12);
}

.teammate-card:hover {
    background: var(--accent-soft);
    box-shadow: var(--shadow-card);
    border-color: rgba(0, 112, 243, 0.2);
}

.teammate-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8E8E93 0%, #636366 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.teammate-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.teammate-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.teammate-occupation {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* Role Badge (Pill Style) */
.role-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.role-badge.owner {
    background: rgba(255, 204, 0, 0.15);
    color: #996600;
    border: 1px solid rgba(255, 204, 0, 0.25);
}

.role-badge.admin {
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid rgba(0, 112, 243, 0.25);
}

.role-badge.member {
    background: rgba(142, 142, 147, 0.12);
    color: #636366;
    border: 1px solid rgba(142, 142, 147, 0.2);
}

/* Sidebar Footer */
.sidebar-footer {
    padding: var(--spacing-md);
    border-top: 1px solid var(--border-subtle);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.2rem;
}

.user-info {
    flex: 1;
}

.user-name {
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 2px;
    line-height: 1.2;
}

.user-status {
    display: none; /* Hidden - no need to show user they are online */
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-indicator.online {
    background-color: var(--online);
}

/* ===================================
   MAIN CONTENT AREA
   =================================== */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-surface);
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
    min-height: 0; /* Critical: allows flex children to shrink properly */
}

/* Top Bar - UX Polish: Proper stacking context for dropdowns */
.top-bar {
    background-color: var(--bg-surface);
    padding: var(--spacing-md) var(--spacing-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    z-index: 500;
}

.search-wrapper {
    flex: 1;
    max-width: 600px;
    position: relative;
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-surface);
    padding: 10px 18px;
    border-radius: 999px;
    border: 1.5px solid var(--border-subtle);
    transition: all var(--transition-fast);
}

.search-bar:focus-within {
    background: var(--bg-surface);
    border-color: var(--accent);
}

body.dark-mode .search-bar {
    background: transparent;
    border-color: var(--border-subtle);
}

body.dark-mode .search-bar:focus-within {
    background: transparent;
    border-color: var(--accent);
}

.search-bar i.fa-search {
    color: var(--text-muted);
    font-size: 16px;
}

.search-bar input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 15px;
    color: var(--text-main);
    font-family: var(--font-family);
}

.search-bar input::placeholder {
    color: var(--text-muted);
}

body.dark-mode .search-bar input {
    color: var(--text-main);
}

body.dark-mode .search-bar input::placeholder {
    color: var(--text-muted);
}

.search-clear {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: var(--neutral-200);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    padding: 0;
}

.search-clear:hover {
    background: var(--neutral-300);
    color: var(--text-main);
}

/* ===================================
   GLOBAL SEARCH DROPDOWN
   Command palette-style search results
   =================================== */
.search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 380px;
    overflow-y: auto;
    z-index: 10001; /* Above notifications dropdown */
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

.search-results.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.search-results::-webkit-scrollbar {
    width: 6px;
}

.search-results::-webkit-scrollbar-track {
    background: transparent;
}

.search-results::-webkit-scrollbar-thumb {
    background: var(--neutral-300);
    border-radius: 3px;
}

.search-results-section {
    padding: 12px 8px;
    border-bottom: 1px solid var(--border-subtle);
}

.search-results-section:last-child {
    border-bottom: none;
}

.search-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.search-section-title i {
    font-size: 10px;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.1s ease;
    margin: 2px 0;
}

.search-result-item:hover,
.search-result-item.active {
    background: var(--accent-soft);
}

.search-result-item.active {
    background: var(--accent);
}

.search-result-item.active .search-result-title,
.search-result-item.active .search-result-description {
    color: white;
}

.search-result-item.active .search-result-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.search-result-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
    transition: all 0.1s ease;
}

.search-result-item:hover .search-result-icon {
    background: var(--accent);
    color: white;
}

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

.search-result-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-breadcrumb {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 13px;
}

.search-result-item.active .search-result-breadcrumb {
    color: rgba(255, 255, 255, 0.7);
}

.search-result-description {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Command tag in search results */
.search-result-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--accent);
    background: rgba(0, 122, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 6px;
    vertical-align: middle;
}

.search-result-item.active .search-result-tag {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Command icon styling */
.search-result-command .command-icon {
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.15), rgba(88, 86, 214, 0.15));
}

.search-result-command.active .command-icon {
    background: rgba(255, 255, 255, 0.2);
}

/* Keyboard hint */
.search-result-hint {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--light-gray);
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.search-result-item.active .search-result-hint {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.search-no-results {
    padding: 32px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

/* Search navigation highlight effect */
.search-highlight {
    animation: searchHighlightPulse 1.5s ease-out;
}

@keyframes searchHighlightPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.4);
    }
    30% {
        box-shadow: 0 0 0 8px rgba(0, 122, 255, 0.2);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 122, 255, 0);
    }
}

body.dark-mode .search-highlight {
    animation: searchHighlightPulseDark 1.5s ease-out;
}

@keyframes searchHighlightPulseDark {
    0% {
        box-shadow: 0 0 0 0 rgba(100, 160, 255, 0.4);
    }
    30% {
        box-shadow: 0 0 0 8px rgba(100, 160, 255, 0.2);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(100, 160, 255, 0);
    }
}

.top-bar-actions {
    display: flex;
    gap: var(--spacing-md);
}

.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background-color: transparent;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                transform var(--transition-fast);
}

.icon-btn:hover {
    background-color: var(--light-gray);
    color: var(--accent);
    transform: scale(1.05);
}

.notification-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background-color: var(--danger);
    border-radius: 50%;
}

/* Settings Dropdown - UX Polish: Fixed z-index and solid background */
.settings-dropdown {
    position: absolute;
    top: 50px;
    right: 0;
    background: var(--bg-surface);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    min-width: 200px;
    padding: 8px;
    display: none;
    z-index: 10000;
    animation: slideDown 0.2s ease;
}

.settings-dropdown.active {
    display: block;
}

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

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-main);
    font-size: 14px;
    font-weight: 500;
    background: var(--bg-surface);
    border: 1px solid transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.dropdown-item:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(0, 112, 243, 0.12);
}

.dropdown-item i {
    width: 18px;
    text-align: center;
    color: var(--accent);
    font-size: 16px;
}

.dropdown-divider {
    height: 1px;
    background-color: var(--border-subtle);
    margin: var(--spacing-sm) 0;
}

/* Notifications Dropdown - Compact & Simple */
.notifications-dropdown {
    position: absolute;
    top: 50px;
    right: 0;
    background: var(--bg-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    width: 320px;
    max-height: 380px;
    display: none;
    z-index: 10000;
    animation: slideDown 0.2s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.notifications-dropdown[style*="display: block"],
.notifications-dropdown[style*="display:block"],
.notifications-dropdown.active {
    display: flex !important;
}

.notifications-header {
    padding: 16px 20px;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notifications-header h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    letter-spacing: -0.02em;
}

.notifications-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.filter-btn {
    background: var(--bg-surface-soft);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 14px;
    border-radius: 999px;
    transition: all var(--transition-fast);
}

.filter-btn:hover {
    background-color: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.filter-btn.active {
    background-color: var(--accent);
    border-color: var(--accent);
    color: white;
}

.mark-read-btn {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    margin-left: auto;
}

.mark-read-btn:hover {
    background-color: var(--accent-soft);
}

.notifications-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    max-height: 280px;
}

.notification-item {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.notification-item:hover {
    background-color: var(--bg-surface-soft);
}

.notification-item.unread {
    background: rgba(0, 112, 243, 0.04);
    border-left: 2px solid var(--accent);
}

/* Compact notification icons */
.notification-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
}

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

.notification-text {
    font-size: 0.85rem;
    color: var(--text-main);
    line-height: 1.35;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-text strong {
    font-weight: 600;
}

.notification-time {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Staggered animation for notifications */
.notification-item {
    animation: notificationFadeIn var(--transition-medium) ease forwards;
}

@keyframes notificationFadeIn {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.notification-icon.task-icon {
    background-color: rgba(52, 199, 89, 0.12);
    color: var(--success);
}

.notification-icon.message-icon {
    background: rgba(0, 112, 243, 0.12);
    color: var(--accent);
}

.notification-icon.team-icon {
    background-color: rgba(255, 204, 0, 0.12);
    color: var(--warning);
}

.notification-icon.calendar-icon {
    background: rgba(175, 82, 222, 0.12);
    color: #af52de;
}

.notification-content {
    flex: 1;
}

.notification-text {
    font-size: 14px;
    color: var(--text-main);
    margin-bottom: 6px;
    line-height: 1.4;
}

.notification-text strong {
    font-weight: 600;
}

.notification-time {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.no-notifications {
    padding: 40px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: var(--danger);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 999px;
    min-width: 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(255, 59, 48, 0.3);
}

/* ===================================
   CONTENT SECTIONS
   =================================== */
.content-section {
    display: none;
    flex: 1;
    min-height: 0; /* Critical: allows flex container to shrink and enable scrolling */
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--spacing-xl);
    padding-bottom: 120px; /* Extra padding for calendar scrolling */
    min-height: 0; /* Critical: allows flex child to shrink and scroll properly */
}

.content-section.active {
    display: flex;
    flex-direction: column;
    animation: fadeSlideIn var(--transition-medium) ease forwards;
}

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

.section-header {
    margin-bottom: var(--spacing-xl);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.section-header-content {
    flex: 1;
    min-width: 250px;
}

.section-header-actions {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.section-header h1 {
    font-size: 2rem;
    color: var(--text-main);
    font-weight: 600;
}

.section-subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
    width: 100%;
}

/* Responsive header */
@media (max-width: 768px) {
    .section-header {
        flex-direction: column;
    }
    
    .section-header-actions {
        width: 100%;
        justify-content: stretch;
    }
    
    .section-header-actions button {
        flex: 1;
    }
}

/* ===================================
   ACTIVITY FEED (OVERVIEW SECTION)
   =================================== */

/* Activity Feed Container - Clean, minimal surface */
.activity-feed {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Activity Items - Simple flat rows */
.activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    transition: background 0.15s ease;
}

.activity-item:hover {
    background: var(--bg-surface-soft);
}

/* Activity Icons - Compact circles */
.activity-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    background: var(--accent-soft);
    color: var(--accent);
}

/* Remove individual icon color variants - keeping monochrome */
.activity-icon.task-icon,
.activity-icon.message-icon,
.activity-icon.calendar-icon,
.activity-icon.team-icon {
    background: var(--accent-soft);
    color: var(--accent);
}

/* Activity Content - Tighter layout */
.activity-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.activity-header {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    line-height: 1.4;
}

.activity-time {
    font-size: 12px;
    color: var(--text-muted);
}

.highlight {
    color: var(--accent);
    font-weight: 600;
}

/* ===================================
   CHAT SECTION
   =================================== */
.chat-container {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-subtle);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 200px);
    min-height: 400px;
    overflow: hidden; /* Clip scrollbar to rounded corners */
}

.chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.message {
    display: flex;
    gap: 12px;
    animation: messageSlideIn var(--transition-medium) ease;
}

/* Add spacing between different senders */
.message + .message[data-sender-changed="true"] {
    margin-top: 20px;
}

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

.message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 13px;
    background: linear-gradient(135deg, #8E8E93 0%, #636366 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    letter-spacing: 0.5px;
}

.message-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    position: relative;
}

.message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.message-author {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-main);
    letter-spacing: -0.01em;
}

.message-time {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.message-text {
    background: var(--bg-surface-soft);
    border: 2px solid var(--border-subtle);
    padding: 12px 18px;
    border-radius: 18px;
    line-height: 1.5;
    max-width: 70%;
    width: fit-content;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    color: var(--text-main);
    font-size: 14px;
}

/* Sent messages with accent background */
.message.sent .message-text {
    background: var(--accent-soft);
    border: none;
    margin-left: auto;
}

/* Date Separator */
.date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 24px 0;
}

.date-separator span {
    padding: 6px 14px;
    background: rgba(142, 142, 147, 0.12);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Chat Input */
.chat-input-container {
    padding: 20px 24px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    gap: 12px;
    background: rgba(245, 245, 247, 0.6);
}

.chat-input {
    flex: 1;
    padding: 14px 20px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    outline: none;
    font-size: 14px;
    background: var(--bg-surface);
    color: var(--text-main);
    transition: all var(--transition-fast);
}

.chat-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.1);
}

.send-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-subtle);
}

.send-btn:hover {
    background: #0066dd;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 112, 243, 0.3);
}

.send-btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-subtle);
}

/* Chat Emoji Button */
.chat-emoji-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.chat-emoji-btn:hover {
    background: var(--bg-surface-soft);
    color: var(--text-main);
    border-color: var(--border-medium);
}

.chat-emoji-btn:active {
    transform: scale(0.95);
}

/* Chat Emoji Popover */
.chat-emoji-popover {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    width: 320px;
    max-height: 360px;
    z-index: 10002;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.dark-mode .chat-emoji-popover {
    background: var(--bg-elevated);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ===================================
   @MENTION SYSTEM STYLES
   =================================== */

/* Chat input wrapper for positioning mention dropdown */
.chat-input-wrapper {
    position: relative;
}

/* ===================================
   TYPING INDICATOR
   Shows when other users are typing
   =================================== */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
    animation: fadeIn 0.2s ease;
}

.typing-indicator .typing-dots {
    display: flex;
    gap: 3px;
}

.typing-indicator .typing-dots span {
    width: 6px;
    height: 6px;
    background: var(--text-muted);
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-indicator .typing-dots span:nth-child(1) {
    animation-delay: 0s;
}

.typing-indicator .typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator .typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBounce {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.typing-indicator .typing-text {
    flex: 1;
}

/* Dark mode typing indicator */
body.dark-mode .typing-indicator {
    color: var(--text-light);
}

body.dark-mode .typing-indicator .typing-dots span {
    background: var(--text-light);
}

/* ===================================
   THEME SELECTOR
   System/Light/Dark toggle buttons
   =================================== */
.theme-selector {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding: 4px;
    background: var(--bg-secondary);
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
}

.theme-option {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.theme-option i {
    font-size: 16px;
    transition: transform 0.15s ease;
}

.theme-option:hover {
    background: var(--bg-surface);
    color: var(--text-main);
}

.theme-option:hover i {
    transform: scale(1.1);
}

.theme-option.active {
    border-color: var(--accent);
    background: var(--accent-soft, rgba(0, 120, 212, 0.1));
    color: var(--accent);
}

.theme-option.active i {
    color: var(--accent);
}

/* Dark mode theme selector */
body.dark-mode .theme-option {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
    color: var(--text-secondary);
}

body.dark-mode .theme-option:hover {
    border-color: var(--accent);
    background: var(--bg-tertiary);
}

body.dark-mode .theme-option.active {
    border-color: var(--accent);
    background: rgba(100, 160, 255, 0.15);
    color: var(--accent);
}

/* Mention dropdown - appears above input */
.mention-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 24px;
    right: 24px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    max-height: 240px;
    overflow-y: auto;
    z-index: 100;
}

.mention-dropdown-header {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-subtle);
    background: rgba(245, 245, 247, 0.5);
}

.mention-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.mention-item:hover,
.mention-item.selected {
    background: rgba(0, 122, 255, 0.08);
}

.mention-item.selected {
    background: rgba(0, 122, 255, 0.12);
}

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

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

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

.mention-item-role {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mention-dropdown-empty {
    padding: 16px 14px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

/* Mention pill in messages */
.mention-pill {
    display: inline-block;
    background: rgba(0, 122, 255, 0.15);
    color: var(--accent);
    padding: 2px 10px;
    border-radius: 999px;
    font-weight: 500;
    font-size: 0.9em;
    cursor: pointer;
    transition: all var(--transition-fast);
    vertical-align: baseline;
}

.mention-pill:hover {
    background: rgba(0, 122, 255, 0.25);
    transform: translateY(-1px);
}

.mention-pill:active {
    transform: translateY(0);
}

.mention-pill.mention-me {
    background: rgba(0, 122, 255, 0.22);
    font-weight: 600;
}

/* Chat filter toggle - pill shaped */
.chat-filter-toggle {
    display: flex;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

.chat-filter-toggle .filter-btn {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.chat-filter-toggle .filter-btn:hover {
    color: var(--text-main);
}

.chat-filter-toggle .filter-btn.active {
    background: var(--accent);
    color: white;
    box-shadow: 0 2px 6px rgba(0, 122, 255, 0.3);
}

/* Dark mode adjustments */
body.dark-mode .mention-dropdown {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

body.dark-mode .mention-dropdown-header {
    background: rgba(255, 255, 255, 0.03);
}

body.dark-mode .mention-item:hover,
body.dark-mode .mention-item.selected {
    background: rgba(0, 122, 255, 0.15);
}

body.dark-mode .mention-pill {
    background: rgba(0, 122, 255, 0.2);
}

body.dark-mode .mention-pill:hover {
    background: rgba(0, 122, 255, 0.3);
}

body.dark-mode .chat-filter-toggle {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .chat-filter-toggle .filter-btn.active {
    background: var(--accent);
    color: white;
}

/* ===================================
   CHAT REPLY SYSTEM STYLES
   Polished Apple-style reply UI with consistent alignment
   =================================== */

/* 
 * Reply Preview - Clean, compact pill above input
 * Modern design with accent indicator bar
 */
.reply-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-surface);
    border-radius: 16px;
    margin: 0 12px 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-subtle);
    animation: replySlideIn 0.2s ease-out;
}

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

.reply-preview-indicator {
    width: 3px;
    height: 32px;
    background: var(--accent);
    border-radius: 2px;
    flex-shrink: 0;
}

.reply-preview-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.reply-preview-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.reply-preview-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    line-height: 1.2;
}

.reply-preview-text {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    max-width: 300px;
}

.reply-preview-close {
    width: 26px;
    height: 26px;
    border: none;
    background: var(--bg-surface-soft);
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
    font-size: 11px;
}

.reply-preview-close:hover {
    background: rgba(255, 59, 48, 0.1);
    color: rgb(255, 59, 48);
    transform: scale(1.1);
}

/* Legacy class support */
.reply-preview-bar {
    display: none;
}

/*
 * Message Action Buttons Container
 * Groups Reply and Delete buttons with consistent alignment
 * Positioned at top-right of message content
 */
.message-actions {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: 5;
    padding: 4px;
}

.message:hover .message-actions,
.message.show-actions .message-actions {
    opacity: 1;
}

/* Base action button style - applies to both Reply and Delete */
.message-action-btn {
    height: 26px;
    padding: 0 8px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.message-action-btn i {
    font-size: 10px;
}

/* Reply button specific styles */
.message-reply-btn {
    background: var(--bg-surface);
    color: var(--text-secondary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-subtle);
}

.message-reply-btn:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
}

.message-reply-btn:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Delete button specific styles */
.message-delete-btn {
    background: rgba(255, 59, 48, 0.08);
    color: rgb(255, 59, 48);
    border: 1px solid rgba(255, 59, 48, 0.15);
}

.message-delete-btn:hover {
    background: rgba(255, 59, 48, 0.15);
    border-color: rgba(255, 59, 48, 0.3);
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.2);
}

/* ===================================
   MESSAGE REACTIONS (WhatsApp/Instagram style)
   =================================== */

/* Reactions bar - floating pill above message */
.reactions-bar {
    position: fixed;
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 28px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 10001;
    opacity: 0;
    transform: scale(0.8) translateY(10px);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.reactions-bar.active {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.reaction-emoji-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.reaction-emoji-btn:hover {
    background: var(--accent-soft);
    transform: scale(1.2);
}

.reaction-emoji-btn:active {
    transform: scale(0.9);
}

/* Reactions display on messages - WhatsApp style chips */
.message-reactions-display {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    min-height: 0;
}

.message-reactions-display:empty {
    display: none;
}

.reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 12px;
    -webkit-tap-highlight-color: transparent;
}

.reaction-chip:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.reaction-chip.user-reacted {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.reaction-emoji {
    font-size: 13px;
    line-height: 1;
}

.reaction-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

.reaction-chip.user-reacted .reaction-count {
    color: var(--accent);
}

/* Make message content relative for positioning action buttons */
.message-content {
    position: relative;
}

/*
 * Reply Context Block - shown inside message bubbles for replies
 * Compact card with sender name and message preview
 * Clickable to scroll to original message
 */
.message-reply-context {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: rgba(0, 122, 255, 0.06);
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
    overflow: hidden;
    max-width: 100%;
}

.message-reply-context:hover {
    background: rgba(0, 122, 255, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.12);
}

/* Accent bar on left side of reply context */
.reply-context-bar {
    width: 3px;
    background: var(--accent);
    flex-shrink: 0;
    border-radius: 3px 0 0 3px;
}

/* Reply context content area */
.reply-context-content {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Author name with @ prefix */
.reply-context-author {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 4px;
}

.reply-context-author i {
    font-size: 9px;
    opacity: 0.8;
}

/* Preview text - single line with ellipsis */
.reply-context-text {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.reply-context-unavailable {
    font-style: italic;
    color: var(--text-tertiary);
}

/*
 * Highlight Animation - when scrolling to replied message
 * Uses rounded corners matching message bubble
 * Soft glow effect that fades out
 */
.message.reply-highlight {
    animation: replyHighlightPulse 2s ease-out;
    border-radius: var(--radius-lg);
}

.message.reply-highlight .message-text {
    animation: replyTextHighlight 2s ease-out;
}

@keyframes replyHighlightPulse {
    0% {
        background: rgba(0, 122, 255, 0.08);
    }
    20% {
        background: rgba(0, 122, 255, 0.12);
    }
    100% {
        background: transparent;
    }
}

@keyframes replyTextHighlight {
    0%, 25% {
        box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.4), 0 4px 16px rgba(0, 122, 255, 0.2);
        transform: scale(1.005);
    }
    100% {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        transform: scale(1);
    }
}

/* Dark mode reply styles */
body.dark-mode .reply-preview-bar {
    background: var(--bg-elevated);
    border-color: var(--border-subtle);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
}

body.dark-mode .reply-preview-bar .reply-icon {
    background: rgba(0, 122, 255, 0.15);
}

body.dark-mode .reply-cancel-btn {
    background: rgba(255, 255, 255, 0.06);
}

body.dark-mode .reply-preview-close:hover {
    background: rgba(255, 59, 48, 0.15);
}

body.dark-mode .reply-preview {
    background: var(--bg-elevated);
    border-color: var(--border-subtle);
}

body.dark-mode .message-reply-btn {
    background: var(--bg-elevated);
    border-color: var(--border-subtle);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

body.dark-mode .message-delete-btn {
    background: rgba(255, 59, 48, 0.12);
}

body.dark-mode .message-reply-context {
    background: rgba(0, 122, 255, 0.1);
}

body.dark-mode .message-reply-context:hover {
    background: rgba(0, 122, 255, 0.15);
}

body.dark-mode .message.reply-highlight {
    animation: replyHighlightPulseDark 2s ease-out;
}

/* Dark mode reactions */
body.dark-mode .reactions-bar {
    background: var(--bg-elevated);
    border-color: var(--border-subtle);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.dark-mode .reaction-emoji-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .reaction-chip {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border-subtle);
}

body.dark-mode .reaction-chip:hover,
body.dark-mode .reaction-chip.user-reacted {
    background: rgba(0, 122, 255, 0.2);
    border-color: var(--accent);
}

@keyframes replyHighlightPulseDark {
    0% {
        background: rgba(0, 122, 255, 0.12);
    }
    20% {
        background: rgba(0, 122, 255, 0.18);
    }
    100% {
        background: transparent;
    }
}

/* Responsive adjustments for reply UI */
@media (max-width: 768px) {
    .reply-preview {
        padding: 8px 12px;
        margin: 0 8px 6px;
        gap: 10px;
        border-radius: 12px;
    }
    
    .reply-preview-indicator {
        height: 28px;
    }
    
    .reply-preview-label {
        font-size: 10px;
    }
    
    .reply-preview-name {
        font-size: 12px;
    }
    
    .reply-preview-text {
        font-size: 11px;
        max-width: 200px;
    }
    
    .reply-preview-close {
        width: 24px;
        height: 24px;
    }
    
    .message-actions {
        gap: 3px;
        padding: 3px;
    }
    
    .message-action-btn {
        height: 24px;
        padding: 0 6px;
        font-size: 10px;
    }
    
    .message-reply-context {
        border-radius: 8px;
    }
    
    .reply-context-content {
        padding: 6px 8px;
    }
    
    .reply-context-author {
        font-size: 10px;
    }
    
    .reply-context-text {
        font-size: 11px;
    }
    
    /* Reactions mobile */
    .reactions-bar {
        padding: 4px 6px;
        border-radius: 20px;
    }
    
    .reaction-emoji-btn {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
    
    .message-reactions-display {
        gap: 4px;
        margin-top: 6px;
    }
    
    .reaction-chip {
        padding: 3px 8px;
        border-radius: 12px;
        font-size: 12px;
    }
    
    .reaction-emoji {
        font-size: 12px;
    }
    
    .reaction-count {
        font-size: 11px;
    }
}

/* ===================================
   CHAT APPEARANCE CUSTOMIZATION
   =================================== */

/* Hide Avatars Option */
.chat-hide-avatars .message-avatar {
    display: none;
}

.chat-hide-avatars .message {
    gap: 0;
}

/* Compact Mode - Condensed Layout */
.chat-compact .chat-messages {
    gap: 6px;
}

.chat-compact .message {
    gap: 10px;
}

.chat-compact .message + .message[data-sender-changed="true"] {
    margin-top: 12px;
}

.chat-compact .message-avatar {
    width: 28px;
    height: 28px;
    font-size: 11px;
    flex-shrink: 0;
}

.chat-compact .message-header {
    margin-bottom: 3px;
    gap: 6px;
}

.chat-compact .message-author {
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.chat-compact .message-time {
    font-size: 11px;
    line-height: 1;
}

.chat-compact .message-text {
    padding: 8px 14px;
    font-size: 13px;
    line-height: 1.45;
    border-radius: 14px;
    max-width: 75%;
}

.chat-compact .date-separator {
    margin: 14px 0;
}

.chat-compact .date-separator span {
    padding: 4px 10px;
    font-size: 10px;
}

.chat-compact .message-content {
    gap: 0;
}

/* Legacy delete button styles - merged into .message-action-btn above */
/* Kept for backwards compatibility, prefer using .message-actions container */
.message-delete-btn.legacy {
    position: absolute;
    top: 4px;
    right: 70px;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(255, 59, 48, 0.1);
    color: rgb(255, 59, 48);
    border: 1px solid rgba(255, 59, 48, 0.2);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    transition: all 0.2s ease;
    z-index: 10;
}

.message.show-delete .message-delete-btn.legacy {
    display: flex;
}

/* Compact mode adjustments */
.chat-compact .message-actions {
    padding: 2px;
    gap: 3px;
}

.chat-compact .message-action-btn {
    height: 22px;
    padding: 0 6px;
    font-size: 10px;
}

/* Timestamp Style: Inline (default) */
.timestamp-inline .message-time {
    display: inline;
}

/* Timestamp Style: Subtle */
.timestamp-subtle .message-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.timestamp-subtle .message-time {
    font-size: 11px;
    opacity: 0.7;
    margin-top: 2px;
}

/* Bubble Style: Minimal */
.bubble-style-minimal .message-text {
    background: transparent;
    border: 1px solid var(--border-subtle);
    box-shadow: none;
}

.bubble-style-minimal .message.sent .message-text {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--text-main);
}

/* ===================================
   CALENDAR SECTION - Polished Modern Design
   Apple/Notion-inspired clean aesthetic
   =================================== */
.calendar-container {
    background: var(--bg-surface);
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    border: none;
    height: auto;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: visible;
    padding-bottom: 120px; /* Ensure bottom rows are visible */
}

body.dark-mode .calendar-container {
    background: var(--bg-surface);
    border-color: transparent;
    box-shadow: none;
}

/* Calendar Header - macOS Style */
.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-subtle);
    gap: 16px;
    background: var(--bg-surface);
}

.calendar-title-section {
    flex: 1;
}

.calendar-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.02em;
    margin: 0;
}

.calendar-title span {
    font-weight: 700;
}

/* View Toggle - macOS Segmented Control */
.calendar-view-toggle {
    display: inline-flex;
    width: fit-content;
    background: var(--bg-surface);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
    border: 1px solid var(--border-subtle);
}

body.dark-mode .calendar-view-toggle {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
}

.view-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-toggle-btn:hover {
    color: var(--text-main);
    background: var(--bg-body);
}

.view-toggle-btn.active {
    background: rgb(183, 183, 183);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
}

body.dark-mode .view-toggle-btn.active {
    background: var(--accent);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}

/* Navigation Buttons */
.calendar-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    font-size: 14px;
}

.calendar-nav-btn:hover {
    background: var(--light-gray);
    color: var(--text-main);
}

.calendar-nav-btn:active {
    transform: scale(0.95);
}

body.dark-mode .calendar-nav-btn {
    color: var(--text-secondary);
}

body.dark-mode .calendar-nav-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-main);
}

/* Add Event Button - Blue square like subscription button */
.calendar-add-btn {
    width: 36px;
    height: 36px;
    border-radius: 50px;
    background: var(--accent);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all var(--transition-fast);
}

.calendar-add-btn:hover {
    background: #0066dd;
    transform: scale(1.05);
}

.calendar-add-btn:active {
    transform: scale(0.95);
}

/* ===================================
   MONTH VIEW - macOS Clean Grid
   =================================== */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    flex: 1;
    border: none;
    border-radius: 0;
    overflow: visible;
    min-height: calc(100vh - 280px); /* Ensure full month grid is visible */
    background: transparent;
    gap: 0px;
    padding-bottom: 80px; /* Extra breathing room below calendar */
}

body.dark-mode .calendar-grid {
    background: transparent;
    border-color: transparent;
}

/* Hide default grid when week view is active */
.calendar-grid:has(.week-colview) {
    display: block;
    border: none;
    background: transparent;
    gap: 0;
}

.calendar-day-header {
    background: var(--bg-surface);
    padding: 12px 8px;
    text-align: center;
    font-weight: 500;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: capitalize;
    letter-spacing: 0;
}

body.dark-mode .calendar-day-header {
    background: var(--bg-body);
    color: var(--text-muted);
}

/* Weekend headers - subtle gray background */
.calendar-day-header:nth-child(6),
.calendar-day-header:nth-child(7) {
    background: rgba(0, 0, 0, 0.02);
}

body.dark-mode .calendar-day-header:nth-child(6),
body.dark-mode .calendar-day-header:nth-child(7) {
    background: rgba(255, 255, 255, 0.02);
}

#calendarDays {
    display: contents;
}

#calendarDays:has(.week-colview) {
    display: block;
}

/* Calendar Day Cell - Month View - macOS Style */
.calendar-day {
    background: var(--bg-surface);
    min-height: 100px;
    padding: 4px 8px;
    cursor: pointer;
    transition: background 0.1s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    border: 1px solid var(--border-subtle);
    border-radius: 0px;
    background-clip: padding-box;
    overflow: hidden;
    position: relative;
}

/* Weekend columns - subtle gray background */
.calendar-day:nth-child(7n-1),
.calendar-day:nth-child(7n) {
    background: rgba(0, 0, 0, 0.015);
}

body.dark-mode .calendar-day:nth-child(7n-1),
body.dark-mode .calendar-day:nth-child(7n) {
    background: rgba(255, 255, 255, 0.015);
}

body.dark-mode .calendar-day {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
}

.calendar-day:hover {
    background: rgba(0, 0, 0, 0.04);
}

body.dark-mode .calendar-day:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Today - Red circle on number */
.calendar-day.today {
    background: var(--bg-surface);
}

.calendar-day.today:nth-child(7n-1),
.calendar-day.today:nth-child(7n) {
    background: rgba(0, 0, 0, 0.015);
}

body.dark-mode .calendar-day.today {
    background: var(--bg-surface);
}

.calendar-day.today .day-number {
    background: var(--accent);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 13px;
}

.calendar-day.other-month {
    background: var(--bg-surface);
}

.calendar-day.other-month .day-number {
    color: var(--text-muted);
    opacity: 0.4;
}

body.dark-mode .calendar-day.other-month {
    background: var(--bg-surface);
}

.day-number {
    font-weight: 400;
    font-size: 13px;
    color: var(--text-main);
    margin-bottom: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Month Event Pills - Clean Style */
.month-events {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    margin-top: 4px;
    align-items: flex-start;
}

.month-event-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: rgba(0, 122, 255, 0.1);
    border-left: 3px solid var(--accent);
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.12s ease;
    overflow: hidden;
    width: 100%;
    min-height: 20px;
}

.month-event-item:hover {
    background: rgba(0, 122, 255, 0.18);
}

body.dark-mode .month-event-item {
    background: rgba(10, 132, 255, 0.12);
}

body.dark-mode .month-event-item:hover {
    background: rgba(10, 132, 255, 0.18);
}

.month-event-time {
    font-weight: 600;
    color: var(--accent);
    font-size: 8px;
    flex-shrink: 0;
}

.month-event-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-main);
    font-weight: 500;
    font-size: 10px;
    flex: 1;
}

/* Lock icon for private events */
.month-event-lock,
.month-event-repeat {
    font-size: 7px;
    color: var(--text-muted);
    opacity: 0.7;
    flex-shrink: 0;
    margin-left: 2px;
}

.month-event-lock {
    color: var(--warning);
}

.month-event-repeat {
    color: var(--accent);
}

.month-event-more {
    font-size: 9px;
    color: var(--text-muted);
    padding: 2px 5px;
    cursor: pointer;
    font-weight: 500;
}

.month-event-more:hover {
    color: var(--accent);
}

/* Upcoming Events */
.upcoming-events {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--border-subtle);
}

.upcoming-events h3 {
    margin-bottom: var(--spacing-md);
    color: var(--text-main);
}

.event-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.event-item {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-body);
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    transition: all 0.12s ease;
}

.event-item:hover {
    background: var(--bg-surface);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

body.dark-mode .event-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--border-subtle);
}

body.dark-mode .event-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.event-date {
    text-align: center;
    min-width: 40px;
}

.event-day {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--accent);
}

.event-month {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.event-details {
    flex: 1;
}

.event-title {
    font-weight: 600;
    margin-bottom: 3px;
    color: var(--text-main);
    font-size: 0.9rem;
}

.event-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ===================================
   WEEK VIEW - Modern Apple-Style Redesign
   CSS Variables for consistent sizing
   =================================== */
:root {
    --week-header-h: 60px;
    --week-allday-h: 44px;
    --week-slot-h: 48px;
    --week-time-col-w: 56px;
}

@media (max-width: 768px) {
    :root {
        --week-header-h: 52px;
        --week-allday-h: 40px;
        --week-slot-h: 44px;
        --week-time-col-w: 48px;
    }
}

/* Vertical scroll container for 24h week view */
.week-view-scroll-container {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: auto; /* Changed from hidden to auto - allows horizontal scroll */
    border-radius: 12px;
    border: 1px solid var(--border-medium);
    background: var(--bg-surface);
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.week-view-scroll-container::-webkit-scrollbar {
    width: 8px;
}

.week-view-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}

.week-view-scroll-container::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 4px;
}

.week-view-scroll-container::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

body.dark-mode .week-view-scroll-container {
    background: var(--bg-body);
    border-color: var(--border-subtle);
}

/* ===================================
   ACTIVE COLUMN-BASED WEEK VIEW
   =================================== */

/* Desktop: Column-based week view container */
.week-colview {
    display: flex;
    gap: 0;
    width: 100%;
    min-height: calc((22 - 6) * 60px); /* 16 hours at 60px per hour */
    min-width: calc(64px + 7 * 140px); /* Time scaffold (64px) + 7 days at 140px each */
    position: relative;
}

/* Time scaffold (left column with hour labels) */
.week-time-scaffold {
    width: 64px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-medium);
    background: var(--bg-surface);
    position: sticky;
    left: 0;
    z-index: 10;
}

body.dark-mode .week-time-scaffold {
    background: var(--bg-body);
    border-right-color: var(--border-subtle);
}

.week-time-header {
    height: var(--week-header-h); /* Match day header height (60px) */
    border-bottom: 1px solid var(--border-medium);
    background: var(--bg-surface);
}

body.dark-mode .week-time-header {
    background: var(--bg-body);
    border-bottom-color: var(--border-subtle);
}

.week-time-label {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    border-bottom: 1px solid var(--border-subtle);
}

/* Day columns */
.week-day-column {
    flex: 1 0 140px; /* Grow if space available, don't shrink, minimum 140px */
    min-width: 140px; /* Prevent collapse - always at least 140px wide */
    position: relative;
    border-right: 1px solid var(--border-subtle);
}

.week-day-column:last-child {
    border-right: none;
}

.week-day-column.today-column {
    background: transparent;
}

body.dark-mode .week-day-column.today-column {
    background: transparent;
}

/* Day header (sticky top) */
.week-day-header {
    height: var(--week-header-h);
    padding: 8px 4px;
    text-align: center;
    border-bottom: 1px solid var(--border-medium);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: var(--bg-surface);
    position: sticky;
    top: 0;
    z-index: 12;
}

body.dark-mode .week-day-header {
    background: var(--bg-body);
    border-bottom-color: var(--border-subtle);
}

.week-day-name {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.week-day-header.today .week-day-name {
    color: var(--accent);
}

.week-day-number {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.12s ease;
}

.week-day-header.today .week-day-number {
    background: var(--accent);
    color: white;
    font-size: 16px;
    font-weight: 700;
}

/* All-day / Tasks strip */
.week-allday-strip {
    height: var(--week-allday-h);
    border-bottom: 1px solid var(--border-medium);
    background: rgba(0, 0, 0, 0.01);
    display: flex;
    align-items: center;
    padding: 4px 3px;
    gap: 3px;
    overflow: visible;
    position: sticky;
    top: var(--week-header-h);
    z-index: 11;
    cursor: pointer;
}

.week-allday-strip:hover .week-task-dropdown {
    display: block;
}

body.dark-mode .week-allday-strip {
    background: rgba(255, 255, 255, 0.015);
    border-bottom-color: var(--border-subtle);
}

.week-allday-task {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    background: rgba(255, 149, 0, 0.12);
    border-left: 2px solid var(--warning);
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    white-space: nowrap;
    max-width: calc(50% - 8px);
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.week-allday-task:hover {
    background: rgba(255, 149, 0, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(255, 149, 0, 0.2);
}

body.dark-mode .week-allday-task {
    background: rgba(255, 149, 0, 0.15);
}

body.dark-mode .week-allday-task:hover {
    background: rgba(255, 149, 0, 0.25);
}

.week-allday-task i {
    font-size: 8px;
    color: var(--warning);
    flex-shrink: 0;
}

.week-allday-more {
    font-size: 9px;
    font-weight: 700;
    color: var(--accent);
    padding: 4px 9px;
    background: var(--accent-soft);
    border-radius: 10px;
    flex-shrink: 0;
    transition: all 0.15s ease;
    letter-spacing: 0.02em;
}

/* Hover dropdown for all tasks */
.week-task-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: -10px;
    right: -10px;
    min-width: 320px;
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 100;
    padding: 8px;
    max-height: 300px;
    overflow-y: auto;
}

body.dark-mode .week-task-dropdown {
    background: rgba(30, 30, 30, 0.98);
    border-color: var(--border-subtle);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.week-task-dropdown-header {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    padding: 6px 10px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-subtle);
}

.week-task-dropdown-header i {
    color: var(--accent);
    font-size: 10px;
}

.week-task-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 4px;
}

.week-task-dropdown-item:last-child {
    margin-bottom: 0;
}

.week-task-dropdown-item:hover {
    background: var(--accent-soft);
    transform: translateX(3px);
}

body.dark-mode .week-task-dropdown-item:hover {
    background: rgba(10, 132, 255, 0.15);
}

.task-dropdown-checkbox {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.task-dropdown-checkbox i {
    font-size: 16px;
    color: var(--warning);
}

.task-dropdown-content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-dropdown-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
    flex: 1;
    word-wrap: break-word;
    line-height: 1.4;
}

.task-dropdown-priority {
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.task-dropdown-priority.priority-high {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

.task-dropdown-priority.priority-medium {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.task-dropdown-priority.priority-low {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

/* Highlight row animation */
@keyframes highlight-pulse {
    0%, 100% {
        background: var(--bg-surface);
    }
    25%, 75% {
        background: var(--accent-soft);
        box-shadow: 0 0 0 2px var(--accent);
    }
    50% {
        background: var(--accent-soft);
        box-shadow: 0 0 0 3px var(--accent);
    }
}

.highlight-row {
    animation: highlight-pulse 1.5s ease-in-out 2;
    scroll-margin-top: 120px; /* Account for sticky headers */
}

/* Time cells - clean grid */
.week-time-cell {
    height: var(--week-slot-h);
    border-bottom: 1px solid var(--border-light);
    position: relative;
    transition: background-color 0.1s ease;
}

body.dark-mode .week-time-cell {
    border-bottom-color: var(--border-subtle);
}

.week-time-cell:hover {
    background: rgba(0, 122, 255, 0.03);
}

body.dark-mode .week-time-cell:hover {
    background: rgba(255, 255, 255, 0.025);
}

.week-time-cell.current-hour {
    background: rgba(0, 122, 255, 0.04);
}

body.dark-mode .week-time-cell.current-hour {
    background: rgba(10, 132, 255, 0.08);
}

/* Drag over highlight */
.week-time-cell.drag-over {
    background: rgba(0, 122, 255, 0.12) !important;
    box-shadow: inset 0 0 0 2px var(--accent);
}

/* Current time indicator line - spans all days */
.week-current-time-line {
    position: absolute;
    left: var(--week-time-col-w);
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #FF3B30 0%, rgba(255, 59, 48, 0.8) 100%);
    z-index: 20;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(255, 59, 48, 0.3);
}

.week-current-time-line::before {
    content: attr(data-time);
    position: absolute;
    left: -56px;
    top: -9px;
    background: #FF3B30;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.25);
}

.week-current-time-line::after {
    content: '';
    position: absolute;
    left: 0;
    top: -4px;
    width: 10px;
    height: 10px;
    background: #FF3B30;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.2);
    animation: pulse-current-time 2s ease-in-out infinite;
}

@keyframes pulse-current-time {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.2);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(255, 59, 48, 0.1);
    }
}

body.dark-mode .week-current-time-line {
    background: linear-gradient(90deg, #FF453A 0%, rgba(255, 69, 58, 0.8) 100%);
    box-shadow: 0 1px 3px rgba(255, 69, 58, 0.4);
}

body.dark-mode .week-current-time-line::before {
    background: #FF453A;
    box-shadow: 0 2px 8px rgba(255, 69, 58, 0.3);
}

body.dark-mode .week-current-time-line::after {
    background: #FF453A;
    box-shadow: 0 0 0 3px rgba(255, 69, 58, 0.25);
}

/* ===================================
   EVENT CARDS - Premium Modern Style
   =================================== */
.week-event-block {
    position: absolute;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--accent);
    color: var(--text-main);
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 10px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.12s ease;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.week-event-block:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
    z-index: 20;
    border-color: var(--border-medium);
}

.week-event-block:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

body.dark-mode .week-event-block {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

body.dark-mode .week-event-block:hover {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.week-event-block.dragging {
    opacity: 0.75;
    cursor: grabbing;
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 100;
}

.week-event-block.short-event {
    padding: 2px 5px;
}

.week-event-block.short-event .week-event-title {
    -webkit-line-clamp: 1;
    line-clamp: 1;
    margin-bottom: 0;
    font-size: 9px;
}

.week-event-block.short-event .week-event-time {
    display: none;
}

.week-event-title {
    font-weight: 600;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--text-main);
    font-size: 11px;
    line-height: 1.3;
}

/* Lock and repeat icons in week event */
.week-event-lock,
.week-event-repeat {
    font-size: 8px;
    margin-left: 4px;
    opacity: 0.8;
}

.week-event-lock {
    color: var(--warning);
}

.week-event-repeat {
    color: var(--accent);
}

.week-event-block.private-event {
    border-left-style: dashed;
}

.week-event-time {
    font-size: 9px;
    color: var(--text-muted);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.week-event-time i {
    font-size: 8px;
    opacity: 0.6;
}

/* Event visibility tag */
.week-event-tag {
    font-size: 8px;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 600;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.week-event-tag.private {
    background: rgba(255, 149, 0, 0.15);
    color: var(--warning);
}

.week-event-tag.admins {
    background: rgba(175, 82, 222, 0.15);
    color: #AF52DE;
}

.week-event-tag i {
    font-size: 7px;
}

/* ===================================
   TASK BLOCKS - Removed from grid
   Tasks now render in all-day strip only
   =================================== */
.week-task-block {
    display: none; /* Deprecated - use .week-allday-task instead */
}

/* Dragging state */
.week-event-pill.dragging,
.week-task-badge.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

/* ===================================
   NEW COLUMN-BASED WEEK VIEW
   =================================== */

/* Desktop: Column-based week view */
.week-colview {
    display: flex;
    gap: 0;
    width: 100%;
    min-height: calc((22 - 6) * 60px); /* 16 hours at 60px per hour */
    min-width: calc(64px + 7 * 140px); /* Time scaffold (64px) + 7 days at 140px each */
    position: relative;
}

/* Time scaffold (left column with hour labels) */
.week-time-scaffold {
    width: 64px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-medium);
    background: var(--bg-surface);
    position: sticky;
    left: 0;
    z-index: 10;
}

body.dark-mode .week-time-scaffold {
    background: var(--bg-body);
    border-right-color: var(--border-subtle);
}

.week-time-label {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    border-bottom: 1px solid var(--border-subtle);
}

/* Day columns */
.week-day-column {
    flex: 1 0 140px; /* Grow if space available, don't shrink, minimum 140px */
    min-width: 140px; /* Prevent collapse - always at least 140px wide */
    position: relative;
    border-right: 1px solid var(--border-subtle);
}

.week-day-column:last-child {
    border-right: none;
}

.week-day-column.today-column {
    background: transparent;
}

body.dark-mode .week-day-column.today-column {
    background: transparent;
}

/* Day header (sticky top) */
.week-day-header {
    position: sticky;
    top: 0;
    z-index: 9;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-medium);
    padding: 12px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.dark-mode .week-day-header {
    background: var(--bg-body);
    border-bottom-color: var(--border-subtle);
}

.week-day-header.is-today {
    background: rgba(0, 122, 255, 0.08);
}

body.dark-mode .week-day-header.is-today {
    background: rgba(10, 132, 255, 0.12);
}

.week-day-name {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.week-day-header.is-today .week-day-name {
    color: var(--accent);
    font-weight: 600;
}

.week-day-number {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.week-day-header.is-today .week-day-number {
    color: var(--accent);
}

/* Time grid (visual rows) */
.week-day-grid {
    position: relative;
    z-index: 1;
}

.week-grid-cell {
    height: 60px;
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.week-grid-cell:hover {
    background: var(--accent-soft);
}

/* Events container (holds absolutely positioned events) */
.week-events-container {
    position: absolute;
    top: var(--week-header-h);
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 4px;
    pointer-events: none;
    z-index: 2;
}

/* Individual event in column view */
.week-col-event {
    position: absolute;
    width: calc(100% - 8px);
    background: var(--bg-surface);
    border-radius: 6px;
    pointer-events: auto;
    padding: 6px 8px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

body.dark-mode .week-col-event {
    background: var(--bg-elevated);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.week-col-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 5;
}

body.dark-mode .week-col-event:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.week-col-event.short-event {
    padding: 4px 6px;
}

.week-event-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.week-event-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
    word-wrap: break-word;
}

.week-col-event.short-event .week-event-title {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.week-event-time-inline {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
}

.week-event-icons {
    display: flex;
    gap: 4px;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Hover details (shown on hover) */
.week-event-hover-details {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    padding: 6px 8px;
    margin-top: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

body.dark-mode .week-event-hover-details {
    background: var(--bg-surface);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.week-col-event:hover .week-event-hover-details {
    display: flex;
}

.hover-time {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-primary);
}

.hover-badge {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.hover-badge.private-badge {
    background: rgba(255, 149, 0, 0.15);
    color: var(--warning);
}

.hover-badge.admins-badge {
    background: rgba(175, 82, 222, 0.15);
    color: #AF52DE;
}

/* Current time line (now indicator) */
.week-now-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #FF3B30;
    z-index: 8;
    pointer-events: none;
}

.week-now-line::before {
    content: attr(data-time);
    position: absolute;
    left: 4px;
    top: -10px;
    background: #FF3B30;
    color: white;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

/* ===================================
   MOBILE DAY AGENDA VIEW
   =================================== */

.day-agenda {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Day strip (horizontal day selector) */
.day-strip {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    overflow-x: auto;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-medium);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.day-strip::-webkit-scrollbar {
    display: none;
}

body.dark-mode .day-strip {
    background: var(--bg-body);
    border-bottom-color: var(--border-subtle);
}

.day-strip-item {
    flex-shrink: 0;
    width: 48px;
    padding: 8px;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
}

body.dark-mode .day-strip-item {
    background: var(--bg-elevated);
}

.day-strip-item:hover {
    transform: translateY(-2px);
}

.day-strip-item.selected {
    background: var(--accent);
    border-color: var(--accent);
}

.day-strip-item.is-today:not(.selected) {
    border-color: var(--accent);
    border-width: 2px;
}

.day-strip-name {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.day-strip-item.selected .day-strip-name {
    color: white;
}

.day-strip-number {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.day-strip-item.selected .day-strip-number {
    color: white;
}

/* Day event list (vertical agenda) */
.day-agenda-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.day-agenda-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-muted);
    padding: 60px 20px;
}

.day-agenda-empty i {
    font-size: 48px;
    opacity: 0.4;
}

.day-agenda-empty p {
    font-size: 14px;
    font-weight: 500;
}

/* Individual event row in mobile agenda */
.day-event-row {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--bg-surface);
    border-radius: 12px;
    border-left: 4px solid var(--accent);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

body.dark-mode .day-event-row {
    background: var(--bg-elevated);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.day-event-row:active {
    transform: scale(0.98);
}

.day-event-time {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    padding: 4px 8px;
    background: rgba(0, 122, 255, 0.1);
    border-radius: 8px;
    height: fit-content;
}

body.dark-mode .day-event-time {
    background: rgba(10, 132, 255, 0.2);
}

.day-event-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.day-event-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
}

.day-event-duration {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.day-event-badges {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
}

.event-badge {
    font-size: 11px;
    padding: 4px 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-badge.private-badge {
    background: rgba(255, 149, 0, 0.15);
    color: var(--warning);
}

.event-badge.admins-badge {
    background: rgba(175, 82, 222, 0.15);
    color: #AF52DE;
}

.event-badge.repeat-badge {
    background: rgba(0, 122, 255, 0.15);
    color: var(--accent);
}

/* Responsive: Show mobile view on small screens */
@media (max-width: 899px) {
    .week-colview {
        display: none;
    }
    
    .day-agenda {
        display: flex;
    }
}

@media (min-width: 900px) {
    .day-agenda {
        display: none;
    }
    
    .week-colview {
        display: flex;
    }
}

/* Dragging state */
.week-event-pill.dragging,
.week-task-badge.dragging,
.week-col-event.dragging {
    opacity: 0.5;
    cursor: grabbing;
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 100;
}

.week-day-column.drag-over {
    background: rgba(0, 122, 255, 0.08) !important;
}

.week-day-column.drag-over::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px dashed var(--accent);
    border-radius: 6px;
    pointer-events: none;
    z-index: 5;
}

/* Grid cell drag-over state */
.week-grid-cell.drag-over {
    background: rgba(0, 122, 255, 0.15) !important;
    position: relative;
}

.week-grid-cell.drag-over::after {
    content: '';
    position: absolute;
    inset: 2px;
    border: 2px dashed var(--accent);
    border-radius: 4px;
    pointer-events: none;
}

/* ===================================
   CALENDAR RESPONSIVE STYLES
   =================================== */
@media (max-width: 768px) {
    .calendar-container {
        padding: 0;
        border-radius: 0;
        min-height: calc(100vh - 100px);
    }
    
    .calendar-header {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
    }
    
    .calendar-title-section {
        order: 1;
        width: 100%;
    }
    
    .calendar-title {
        font-size: 1.2rem;
    }
    
    .calendar-nav-section {
        order: 2;
    }
    
    .calendar-nav-btn {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }
    
    .calendar-today-btn {
        padding: 4px 10px;
        font-size: 11px;
    }
    
    .calendar-add-btn {
        width: 28px;
        height: 28px;
    }
    
    .calendar-view-toggle {
        order: 3;
        flex: 1;
        justify-content: center;
    }
    
    .view-toggle-btn {
        flex: 1;
        justify-content: center;
        padding: 6px 8px;
        font-size: 11px;
    }
    
    .calendar-day {
        min-height: 70px;
        padding: 4px;
    }
    
    .day-number {
        font-size: 11px;
        width: 20px;
        height: 20px;
    }
    
    .calendar-day.today .day-number {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }
    
    .month-event-item {
        padding: 2px 4px;
        font-size: 9px;
    }
    
    .month-event-time {
        display: none;
    }
    
    .calendar-day-header {
        padding: 8px 4px;
        font-size: 9px;
    }
    
    .week-time-allday {
        font-size: 8px;
    }
    
    .week-day-header {
        height: var(--week-header-h);
        padding: 6px 2px;
    }
    
    .week-day-name {
        font-size: 9px;
    }
    
    .week-day-number {
        font-size: 16px;
        width: 26px;
        height: 26px;
    }
    
    .week-day-header.today .week-day-number {
        font-size: 13px;
    }
    
    .week-time-cell {
        height: var(--week-slot-h);
    }
    
    .week-allday-strip {
        height: var(--week-allday-h);
        padding: 3px 2px;
    }
    
    .week-allday-task {
        font-size: 9px;
        padding: 2px 6px;
    }
    
    .week-event-block {
        padding: 3px 4px;
        font-size: 9px;
    }
    
    .week-event-title {
        font-size: 9px;
    }
    
    .week-event-time {
        display: none;
    }
}

@media (max-width: 480px) {
    .calendar-container {
        padding: 12px;
    }
    
    .calendar-day {
        min-height: 60px;
    }
    
    .month-events {
        gap: 1px;
    }
    
    .month-event-item {
        padding: 1px 3px;
        border-left-width: 2px;
    }
    
    .month-event-title {
        font-size: 9px;
    }
}

/* ===================================
   TASKS SECTION
   =================================== */

/* Task Metrics */
.task-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.metric-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    box-shadow: var(--shadow-subtle);
}

.metric-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 300;
    margin-bottom: 8px;
}

.metric-value {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

.tasks-container {
    overflow-x: auto;
}

.task-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    min-width: 900px;
}

.task-column {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow-subtle);
}

.task-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 8px 0;
}

.column-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.status-indicator.status-todo {
    background: var(--accent);
}

.status-indicator.status-in-progress {
    background: var(--warning);
}

.status-indicator.status-done {
    background: var(--success);
}

.task-column-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.01em;
}

.task-count {
    background-color: var(--text-muted);
    color: var(--white);
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
}

.task-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-height: 200px;
}

.task-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 0;
    box-shadow: var(--shadow-subtle);
    transition: all var(--transition-fast);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.task-card:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
    border-color: var(--border-subtle);
}

.task-card.status-done {
    opacity: 0.85;
    background: rgba(52, 199, 89, 0.03);
}

.task-card.status-done .task-header h4 {
    text-decoration: line-through;
    opacity: 0.6;
}

.task-card.status-in-progress {
    background: rgba(255, 204, 0, 0.04);
}

.task-card.status-in-progress .task-status-bar {
    animation: progress-pulse 2s ease-in-out infinite;
}

@keyframes progress-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

.task-status-bar {
    height: 2px;
    width: 100%;
    background: var(--border-subtle);
}

.task-card.status-todo .task-status-bar {
    background: var(--accent);
}

.task-card.status-in-progress .task-status-bar {
    background: var(--warning);
}

.task-card.status-done .task-status-bar {
    background: var(--success);
}

.task-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 22px 14px 22px;
}

.task-header h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.task-status-dropdown {
    padding: 6px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background: var(--bg-surface);
    color: var(--text-main);
    transition: all var(--transition-fast);
    outline: none;
}

.task-status-dropdown:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.task-status-dropdown:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.1);
}

.task-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.task-action-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.task-action-btn:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

.task-action-btn.delete:hover {
    background: rgba(255, 59, 48, 0.1);
    color: var(--danger);
}

.task-description {
    font-size: 14px;
    color: var(--text-muted);
    padding: 0 22px 18px 22px;
    line-height: 1.6;
}

.task-description-expandable {
    transition: all var(--transition-fast);
    overflow: hidden;
}

.task-card.expanded {
    box-shadow: var(--shadow-card);
}

.task-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 22px;
    background: rgba(245, 245, 247, 0.5);
    border-top: 1px solid var(--border-subtle);
}

.task-assignee {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-main);
    font-weight: 500;
}

.task-assignee-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
}

.task-priority {
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.task-priority.high {
    background: rgba(255, 59, 48, 0.08);
    color: #d62a2a;
    border: 1px solid rgba(255, 59, 48, 0.15);
}

.task-priority.medium {
    background: rgba(255, 204, 0, 0.08);
    color: #b37700;
    border: 1px solid rgba(255, 204, 0, 0.15);
}

.task-priority.low {
    background: rgba(0, 112, 243, 0.08);
    color: #0070f3;
    border: 1px solid rgba(0, 112, 243, 0.15);
}

/* Task Due Date Styles */
.task-due-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 600;
    margin-top: 12px;
    background: rgba(245, 245, 247, 0.8);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

.task-due-date i {
    font-size: 13px;
    opacity: 0.8;
}

.task-due-date.overdue {
    background: rgba(255, 59, 48, 0.1);
    color: #c91f1f;
    border: 1px solid rgba(255, 59, 48, 0.3);
    animation: pulse-red 2s ease-in-out infinite;
}

.task-due-date.due-today {
    background: rgba(255, 204, 0, 0.1);
    color: #996600;
    border: 1px solid rgba(255, 204, 0, 0.3);
}

.task-due-date.due-soon {
    background: rgba(0, 112, 243, 0.1);
    color: #0066dd;
    border: 1px solid rgba(0, 112, 243, 0.3);
}

.task-due-date.completed-task {
    background: rgba(52, 199, 89, 0.1);
    color: #1d7a3c;
    border: 1px solid rgba(52, 199, 89, 0.3);
}

@keyframes pulse-red {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(252, 129, 129, 0.7);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(252, 129, 129, 0);
    }
}

/* Drag and Drop States */
.task-card {
    cursor: grab;
}

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

.task-card.dragging {
    opacity: 0.5;
    transform: rotate(2deg);
}

.task-list.drag-over {
    background: rgba(0, 112, 243, 0.05);
    border: 2px dashed var(--accent);
    border-radius: var(--radius-lg);
}

/* Task Details Modal */
.task-details-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.task-details-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--border-subtle);
}

.task-details-meta {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.task-details-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.task-detail-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.task-detail-item.full-width {
    grid-column: 1 / -1;
}

.detail-label {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.detail-label i {
    color: var(--accent);
    width: 14px;
}

.detail-value {
    font-size: 15px;
    color: var(--text-main);
    font-weight: 500;
}

.task-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.task-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 13px;
}

.status-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
}

.status-badge.status-todo {
    background: rgba(0, 112, 243, 0.1);
    color: var(--accent);
}

.status-badge.status-inprogress {
    background: rgba(255, 204, 0, 0.1);
    color: #996600;
}

.status-badge.status-done {
    background: rgba(52, 199, 89, 0.1);
    color: #1d7a3c;
}

.priority-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
}

.priority-badge.priority-low {
    background: rgba(142, 142, 147, 0.1);
    color: #636366;
}

.priority-badge.priority-medium {
    background: rgba(255, 149, 0, 0.1);
    color: #cc7a00;
}

.priority-badge.priority-high {
    background: rgba(255, 59, 48, 0.1);
    color: #d62a21;
}

.task-details-description {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.detail-description {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    padding: 16px;
    background: var(--bg-surface-soft);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
}

/* ===================================
   SPREADSHEET SYSTEM - Apple Style
   =================================== */

/* Spreadsheet Header */
.spreadsheet-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 28px;
}
.header-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    width: 100%;
}


.spreadsheet-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.spreadsheet-header h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.02em;
}

.spreadsheet-header h3 i {
    color: var(--accent);
    font-size: 22px;
}

.spreadsheet-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

/* ===================================
   Spreadsheet Cards Grid - Apple Style
   =================================== */
.spreadsheet-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

.spreadsheet-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 160px;
    position: relative;
    overflow: hidden;
}

.spreadsheet-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    border-color: var(--border-medium);
}

.spreadsheet-card.create-new {
    border: 2px dashed var(--border-subtle);
    background: transparent;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    min-height: 160px;
}

.spreadsheet-card.create-new::before {
    display: none;
}

.spreadsheet-card.create-new:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 112, 243, 0.15);
}

/* 3-dot menu button on spreadsheet cards */
.spreadsheet-card-menu-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0;
    transition: all 0.15s ease;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
}

.spreadsheet-card:hover .spreadsheet-card-menu-btn {
    opacity: 1;
}

.spreadsheet-card-menu-btn:hover {
    background: var(--bg-body);
    color: var(--text-main);
}

.spreadsheet-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: all 0.2s ease;
}

.spreadsheet-card.create-new .spreadsheet-card-icon {
    width: 56px;
    height: 56px;
    background: var(--bg-surface-soft);
    border-radius: 50%;
    font-size: 20px;
}

.spreadsheet-card.create-new:hover .spreadsheet-card-icon {
    background: var(--accent);
    color: white;
    transform: scale(1.05);
}

.spreadsheet-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.spreadsheet-card-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
    letter-spacing: -0.01em;
}

.spreadsheet-card-meta {
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 16px;
}

.spreadsheet-card-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.spreadsheet-card-meta i {
    font-size: 11px;
    opacity: 0.7;
}

/* Card Progress Bar */
.spreadsheet-card-progress {
    height: 4px;
    background: var(--bg-surface-soft);
    border-radius: 2px;
    overflow: hidden;
    margin-top: auto;
}

.spreadsheet-card-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #34C759);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* ===================================
   Spreadsheet Panel - Inline View
   =================================== */

/* Hide cards when panel is open */
#tasks-section.spreadsheet-open .spreadsheet-header,
#tasks-section.spreadsheet-open .spreadsheet-cards {
    display: none;
}

/* Remove padding from tasks section when spreadsheet is open for full use of space */
#tasks-section.spreadsheet-open {
    padding: 0;
    overflow: hidden;
    height: 100%;
    min-height: calc(100vh - 80px);
}

/* Show panel only when section has spreadsheet-open class */
.spreadsheet-panel {
    display: none;
    flex-direction: column;
    height: 100%;
    min-height: calc(100vh - 80px);
    background: var(--bg-main);
    animation: panelFadeIn 0.25s ease;
    overflow: hidden;
}

@keyframes panelFadeIn {
    from {
        opacity: 0;
        transform: scale(0.99);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

#tasks-section.spreadsheet-open .spreadsheet-panel {
    display: flex;
}

/* Panel Header */
.spreadsheet-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    gap: 12px;
    flex-shrink: 0;
}

.panel-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.panel-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Icon Button - compact style */
.icon-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s ease;
    font-size: 14px;
    flex-shrink: 0;
}

.icon-btn:hover {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

.icon-btn.primary {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.icon-btn.primary:hover {
    background: var(--accent-hover);
}

/* Toggle Completed Button - with text label */
#toggleCompletedBtn {
    width: auto;
    padding: 0 12px;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}

#toggleCompletedBtn.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

#toggleCompletedBtn:hover {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

#toggleCompletedText {
    white-space: nowrap;
}

.back-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--bg-surface-soft);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s ease;
    font-size: 14px;
    flex-shrink: 0;
}

.back-btn:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

.spreadsheet-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.spreadsheet-icon-preview {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: var(--accent-soft);
    color: var(--accent);
    flex-shrink: 0;
}

.spreadsheet-title-input {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 6px 10px;
    outline: none;
    transition: all 0.2s ease;
    min-width: 120px;
    max-width: 250px;
}

.spreadsheet-title-input:hover {
    background: var(--bg-surface-soft);
}

.spreadsheet-title-input:focus {
    border-color: var(--accent);
    background: var(--bg-surface);
}

/* Filter Dropdown */
.filter-dropdown-container {
    position: relative;
}

.filter-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 16px;
    min-width: 220px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 100;
    animation: dropdownFadeIn 0.2s ease;
}

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

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

.filter-section {
    margin-bottom: 14px;
}

.filter-section label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-section select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--bg-surface-soft);
    color: var(--text-main);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-section select:focus {
    outline: none;
    border-color: var(--accent);
}

.filter-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
}

.btn-sm {
    padding: 8px 14px;
    font-size: 13px;
}

/* Panel Action Buttons */
.panel-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.panel-action-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

.panel-action-btn.primary {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.panel-action-btn.primary:hover {
    background: #0066dd;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 112, 243, 0.3);
}

/* Batch Actions Bar */
.batch-actions-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: var(--accent);
    color: white;
    animation: slideDown 0.2s ease;
}

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

.batch-actions-bar.active {
    display: flex;
}

.batch-info {
    font-size: 14px;
    font-weight: 500;
}

.batch-buttons {
    display: flex;
    gap: 8px;
}

.batch-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.batch-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.batch-btn.danger:hover {
    background: #FF3B30;
}

.batch-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

/* Panel Body with Sidebar - Full Height */
.spreadsheet-panel-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Column Toggle Sidebar - Clean & Compact */
.column-toggle-sidebar {
    width: 160px;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width 0.25s ease, opacity 0.25s ease;
    overflow: hidden;
}

.column-toggle-sidebar.collapsed {
    width: 0;
    opacity: 0;
    overflow: hidden;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface-soft);
    flex-shrink: 0;
}

.sidebar-header h4 {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-toggle {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 5px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 12px;
}

.sidebar-toggle:hover {
    background: var(--bg-surface);
    color: var(--text-main);
}

.sidebar-section {
    padding: 6px 4px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Custom scrollbar for sidebar */
.sidebar-section::-webkit-scrollbar {
    width: 4px;
}

.sidebar-section::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-section::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
}

.sidebar-section::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* ===================================
   COLUMN TOGGLE SIDEBAR - Clean Rebuild
   Toggle BEFORE label, draggable items
   =================================== */
.sidebar-section-title {
    display: none;
}

/* ===================================
   CLEAN COLUMN SIDEBAR
   =================================== */
.column-toggle-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin: 1px 0;
    border-radius: 8px;
    cursor: default;
    transition: background 0.15s ease;
    position: relative;
}

.column-toggle-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.column-toggle-item.active {
    background: rgba(0, 112, 243, 0.06);
}

.column-toggle-item.dragging {
    opacity: 0.5;
    background: rgba(0, 112, 243, 0.1);
}

/* Drag Handle */
.column-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    color: var(--text-muted);
    font-size: 10px;
    cursor: grab;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.column-toggle-item:hover .column-drag-handle {
    opacity: 0.4;
}

.column-drag-handle:hover {
    opacity: 0.8 !important;
}

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

/* Toggle Label */
.column-toggle-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
    flex: 1;
}

/* Hide checkbox */
.column-toggle-item input[type="checkbox"] {
    display: none;
}

/* Toggle Switch - Clean iOS style */
.column-toggle-switch {
    width: 34px;
    height: 20px;
    background: #e0e0e0;
    border-radius: 10px;
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s ease;
    cursor: pointer;
}

.column-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
}

.column-toggle-item.active .column-toggle-switch {
    background: var(--accent);
}

.column-toggle-item.active .column-toggle-switch::after {
    transform: translateX(14px);
}

/* Drag Indicator Lines */
.column-toggle-item.drag-over-top::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 10px;
    right: 10px;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
}

.column-toggle-item.drag-over-bottom::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 10px;
    right: 10px;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
}

/* Context Menu */
.column-context-menu {
    position: fixed;
    z-index: 10000;
    min-width: 140px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 4px;
    animation: menuFadeIn 0.12s ease;
}

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

.column-context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-main);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s ease;
}

.column-context-menu-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.column-context-menu-item i {
    width: 14px;
    font-size: 11px;
    color: var(--text-muted);
}

.column-context-menu-item.danger {
    color: #EF4444;
}

.column-context-menu-item.danger i {
    color: #EF4444;
}

.column-context-menu-item.danger:hover {
    background: rgba(239, 68, 68, 0.08);
}

.column-context-menu-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 4px 6px;
}

/* Label - Single line, no wrap */
.column-toggle-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* Spreadsheet Table Area - Full Height */
.spreadsheet-table-area {
    position: relative; /* For absolute positioned dropdowns */
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 20px;
    overflow-y: auto;
    overflow-x: auto;
    background: var(--bg-main);
}

.table-container {
    background: var(--bg-surface);
    border-radius: 12px;
    overflow-x: auto;
    overflow-y: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-subtle);
    min-height: 400px;
    max-height: calc(100vh - 300px);
}

/* ===================================
   Spreadsheet Table - Apple Style
   Enhanced spacing & hover states
   =================================== */
.spreadsheet-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    table-layout: auto;
    min-width: max-content; /* Allow table to expand beyond container width */
}

.spreadsheet-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-surface-soft);
}

.spreadsheet-table th {
    padding: 10px 14px;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    position: relative;
    user-select: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--border-subtle);
}

/* Icon-only headers with tooltips */
.spreadsheet-table th i {
    font-size: 13px;
    opacity: 0.7;
}

.spreadsheet-table th:hover {
    background: var(--bg-surface);
    color: var(--text-main);
}

.spreadsheet-table th:hover i {
    opacity: 1;
}

.spreadsheet-table th .sort-icon {
    margin-left: 4px;
    font-size: 9px;
    opacity: 0.4;
    transition: all 0.2s ease;
}

.spreadsheet-table th:hover .sort-icon {
    opacity: 0.8;
}

.spreadsheet-table th.sorted .sort-icon {
    opacity: 1;
    color: var(--accent);
}

.spreadsheet-table th.sorted-asc .sort-icon {
    transform: rotate(180deg);
}

/* Table Body - Enhanced rows */
.spreadsheet-table tbody tr {
    transition: all 0.15s ease;
}

.spreadsheet-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.015);
}

.spreadsheet-table tbody tr:hover {
    background: rgba(0, 112, 243, 0.06);
}

.spreadsheet-table tbody tr.selected {
    background: rgba(0, 112, 243, 0.1);
}

.spreadsheet-table tbody tr.selected:hover {
    background: rgba(0, 112, 243, 0.14);
}

.spreadsheet-table td {
    padding: 14px 16px;
    vertical-align: middle;
    color: var(--text-main);
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}

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

/* Checkbox Column */
.spreadsheet-table .cell-checkbox {
    width: 40px;
    text-align: center;
    padding: 12px 8px 12px 12px;
}

.spreadsheet-table .cell-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent);
    border-radius: 3px;
}

/* Title Cell */
.spreadsheet-table .cell-title {
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease;
    max-width: 300px;
    min-width: 150px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
}

.spreadsheet-table .cell-title:hover {
    color: var(--accent);
}

.spreadsheet-table .row-completed .cell-title {
    text-decoration: line-through;
    opacity: 0.5;
}

/* Status Badge - Refined */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.status-badge .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.status-badge.todo {
    background: rgba(0, 112, 243, 0.1);
    color: var(--accent);
}

.status-badge.todo .dot {
    background: var(--accent);
}

.status-badge.inprogress {
    background: rgba(255, 149, 0, 0.12);
    color: #D97706;
}

.status-badge.inprogress .dot {
    background: #F59E0B;
}

.status-badge.done {
    background: rgba(52, 199, 89, 0.12);
    color: #059669;
}

.status-badge.done .dot {
    background: #10B981;
}

/* Priority Badge - Refined */
.priority-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.priority-badge::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.priority-badge.high {
    background: rgba(239, 68, 68, 0.1);
    color: #DC2626;
}

.priority-badge.high::before {
    background: #EF4444;
}

.priority-badge.medium {
    background: rgba(245, 158, 11, 0.1);
    color: #D97706;
}

.priority-badge.medium::before {
    background: #F59E0B;
}

.priority-badge.low {
    background: rgba(107, 114, 128, 0.1);
    color: #6B7280;
}

.priority-badge.low::before {
    background: #9CA3AF;
}

/* Assignee Cell - Refined */
.assignee-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.assignee-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.assignee-name {
    font-size: 13px;
    color: var(--text-main);
    font-weight: 500;
}

/* Progress Cell - Refined */
.progress-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 100px;
}

.progress-bar-mini {
    flex: 1;
    height: 6px;
    background: var(--bg-surface-soft);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar-mini .fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #5AC8FA);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-bar-mini .fill.complete {
    background: linear-gradient(90deg, #10B981, #34D399);
}

.progress-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    min-width: 36px;
}

/* Date Cell */
.date-cell {
    font-size: 13px;
    font-weight: 500;
}

.date-cell.overdue {
    color: #DC2626;
    font-weight: 600;
}

.date-cell.today {
    color: #D97706;
    font-weight: 600;
}

/* Budget Cell */
.budget-cell {
    font-weight: 600;
    font-family: 'SF Mono', 'Menlo', monospace;
    font-size: 13px;
}

/* Action Buttons - Refined */
.row-actions {
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.spreadsheet-table tbody tr:hover .row-actions {
    opacity: 1;
}

.row-action-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--bg-surface-soft);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s ease;
    font-size: 13px;
}

.row-action-btn:hover {
    background: var(--accent-soft);
    color: var(--accent);
    transform: translateY(-1px);
}

.row-action-btn.delete:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #DC2626;
}

/* Add Row Button */
.add-row-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    margin: 20px;
    margin-bottom: 100px; /* Extra padding to allow scrolling past button */
    border: 2px dashed var(--border-subtle);
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.add-row-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

/* Empty State */
.spreadsheet-empty-wrapper {
    position: relative;
    min-height: 400px;
}

.empty-state-add-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    margin: 0;
}

.spreadsheet-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 40px;
    text-align: center;
}

.spreadsheet-empty i {
    font-size: 72px;
    color: var(--border-subtle);
    margin-bottom: 24px;
}

.spreadsheet-empty h4 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 10px 0;
}

.spreadsheet-empty p {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0 0 28px 0;
}

/* Empty State Icon Wrapper */
.empty-state-icon-wrapper {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-soft) 0%, rgba(0, 112, 243, 0.08) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    position: relative;
}

.empty-state-icon-wrapper::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px dashed var(--border-subtle);
    animation: rotate 20s linear infinite;
}

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

.empty-state-icon-wrapper i {
    font-size: 36px;
    color: var(--accent);
}

/* Empty State CTA Button - Modern Style */
.empty-state-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--accent) 0%, #0051CC 100%);
    color: white;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 4px 16px rgba(0, 112, 243, 0.35);
    position: relative;
    overflow: hidden;
}

.empty-state-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.4s ease;
}

.empty-state-cta:hover::before {
    transform: translateX(100%);
}

.empty-state-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 112, 243, 0.45);
}

.empty-state-cta:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0, 112, 243, 0.35);
}

.empty-state-cta .cta-icon {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.empty-state-cta .cta-text {
    letter-spacing: -0.01em;
}

/* Legacy Empty State Buttons (keep for backward compatibility) */
.empty-state-btn {
    padding: 14px 28px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
}

.empty-state-btn i {
    font-size: 14px;
}

/* ===================================
   INLINE EDITING STYLES
   Draggable progress, priority & assignee dropdowns
   =================================== */

/* Editable Cell Indicator */
.cell-editable {
    position: relative;
}

.cell-editable:hover::after {
    content: '';
    position: absolute;
    inset: 2px;
    border: 2px solid var(--accent);
    border-radius: 8px;
    opacity: 0.3;
    pointer-events: none;
}

/* Inline Progress Bar - Draggable */
.progress-cell-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 120px;
    cursor: pointer;
}

/* ===================================
   PROGRESS SLIDER - Gradient Colors
   Red → Orange → Yellow → Green
   =================================== */
.progress-cell-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 130px;
}

.progress-range-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 6px;
    background: linear-gradient(to right, #FF3B30, #FF9500, #FFCC00, #34C759);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    position: relative;
}

/* Overlay to show unfilled portion */
.progress-range-slider::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: calc(100% - var(--progress, 0%));
    background: #e5e5ea;
    border-radius: 0 3px 3px 0;
    pointer-events: none;
}

.progress-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    z-index: 2;
    margin-top: -2px;
}

.progress-range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.progress-range-slider::-webkit-slider-thumb:active {
    background: white;
    transform: scale(1.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.progress-range-slider::-moz-range-thumb {
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.progress-range-slider::-moz-range-thumb:active {
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.progress-range-slider::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
    border-radius: 3px;
}

.progress-range-slider::-moz-range-track {
    height: 6px;
    background: linear-gradient(to right, #FF3B30, #FF9500, #FFCC00, #34C759);
    border-radius: 3px;
}

.progress-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    min-width: 32px;
    text-align: right;
}

/* Inline Priority Badge - Clickable */
.priority-badge-inline {
    cursor: pointer;
    transition: all 0.15s ease;
}

.priority-badge-inline:hover {
    opacity: 0.8;
    transform: scale(1.02);
}

.priority-badge-inline:active {
    transform: scale(0.98);
}

/* Inline Assignee Cell - Clickable */
.assignee-cell-inline {
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    margin: -6px -10px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.assignee-cell-inline:hover {
    background: var(--accent-soft);
    transform: translateY(-1px);
}

.assignee-cell-inline:active {
    transform: translateY(0) scale(0.98);
}

/* Assignee avatar hover effect */
.assignee-cell-inline:hover .avatar-circle {
    box-shadow: 0 0 0 2px var(--accent-soft), 0 2px 8px rgba(0, 112, 243, 0.15);
}

/* Inline Edit Dropdown - Apple Style */
.inline-edit-dropdown {
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-subtle);
    min-width: 160px;
    max-height: 280px;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
    transition: all 0.15s ease;
}

.inline-edit-dropdown.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.inline-dropdown-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.1s ease;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
}

.inline-dropdown-option:first-child {
    border-radius: 12px 12px 0 0;
}

.inline-dropdown-option:last-child {
    border-radius: 0 0 12px 12px;
}

.inline-dropdown-option:hover {
    background: rgba(0, 112, 243, 0.08);
}

.inline-dropdown-option.active {
    background: var(--accent-soft);
    color: var(--accent);
}

.inline-dropdown-option i {
    margin-left: auto;
    font-size: 12px;
    color: var(--accent);
}

/* Priority Dropdown Dots */
.priority-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.priority-dot.low {
    background: #9CA3AF;
}

.priority-dot.medium {
    background: #F59E0B;
}

.priority-dot.high {
    background: #EF4444;
}

/* Assignee Dropdown Avatar */
.assignee-option-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

/* Inline Save Feedback */
.inline-save-indicator {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: var(--success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    opacity: 0;
    transform: translateY(-50%) scale(0.5);
    transition: all 0.2s ease;
    pointer-events: none;
}

.inline-save-indicator.visible {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

/* ===================================
   INLINE TEXT EDITING STYLES
   Text input fields for title, date, budget, time
   =================================== */
.inline-edit-input {
    width: 100%;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    border: 2px solid var(--accent);
    border-radius: 6px;
    background: white;
    color: var(--text-main);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.15);
    transition: all 0.15s ease;
}

.inline-edit-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(0, 112, 243, 0.2);
}

.inline-edit-date {
    min-width: 130px;
}

.inline-edit-number {
    width: 70px;
    min-width: 50px;
    max-width: 80px;
    text-align: right;
}

.inline-edit-text {
    min-width: 120px;
}

/* Cell editing state */
.cell-editable.editing {
    padding: 8px 10px;
    background: var(--accent-soft);
}

/* Clickable cell indicators */
.cell-title-editable,
.cell-date-editable,
.cell-budget-editable,
.cell-time-editable {
    cursor: pointer;
    transition: all 0.15s ease;
}

.cell-title-editable:hover,
.cell-date-editable:hover,
.cell-budget-editable:hover,
.cell-time-editable:hover {
    background: rgba(0, 112, 243, 0.06);
    color: var(--accent);
}

/* Title cell special styling */
.cell-title-editable {
    font-weight: 500;
    max-width: 300px;
    min-width: 150px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
}

/* Dark Mode: Inline Text Editing */
body.dark-mode .inline-edit-input {
    background: #2c2c2e;
    border-color: var(--accent);
    color: #f5f5f7;
}

body.dark-mode .cell-editable.editing {
    background: rgba(10, 132, 255, 0.15);
}

body.dark-mode .cell-title-editable:hover,
body.dark-mode .cell-date-editable:hover,
body.dark-mode .cell-budget-editable:hover,
body.dark-mode .cell-time-editable:hover {
    background: rgba(10, 132, 255, 0.1);
}

/* Dark Mode: Progress Slider - Gradient */
body.dark-mode .progress-range-slider {
    background: linear-gradient(to right, #FF3B30, #FF9500, #FFCC00, #34C759);
}

body.dark-mode .progress-range-slider::before {
    background: #2c2c2e;
}

body.dark-mode .progress-range-slider::-webkit-slider-thumb {
    background: #f5f5f7;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Mention Pill Styling */
.mention {
    background: rgba(10, 132, 255, 0.1);
    color: #0078D4;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

body.dark-mode .mention {
    background: rgba(10, 132, 255, 0.2);
    color: #2EA0F0;
}

/* Dark Mode: Column Drag Handle */
body.dark-mode .column-drag-handle {
    color: rgba(255, 255, 255, 0.4);
}

body.dark-mode .column-toggle-item:hover .column-drag-handle {
    color: rgba(255, 255, 255, 0.7);
}

body.dark-mode .column-toggle-item.dragging {
    background: rgba(10, 132, 255, 0.2);
}

/* Dark Mode: Inline Edit Dropdown */
body.dark-mode .inline-edit-dropdown {
    background: #2c2c2e;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

body.dark-mode .inline-dropdown-option:hover {
    background: rgba(10, 132, 255, 0.15);
}

body.dark-mode .inline-dropdown-option.active {
    background: rgba(10, 132, 255, 0.2);
}

/* ===================================
   TABLE ROW HOVER - Subtle lift effect
   =================================== */
.spreadsheet-table tbody tr {
    transition: all 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.spreadsheet-table tbody tr:hover {
    background: rgba(0, 112, 243, 0.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    position: relative;
    z-index: 1;
}

body.dark-mode .spreadsheet-table tbody tr:hover {
    background: rgba(10, 132, 255, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Responsive Spreadsheet Panel */
@media (max-width: 1100px) {
    .panel-header-center {
        display: none;
    }
    
    .spreadsheet-panel-header {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .panel-header-right {
        flex-wrap: wrap;
    }
}

@media (max-width: 900px) {
    .column-toggle-sidebar {
        display: none;
    }
    
    .spreadsheet-table-area {
        padding: 16px;
    }
}

@media (max-width: 600px) {
    .spreadsheet-panel-header {
        padding: 12px 16px;
    }
    
    .panel-header-right .panel-action-btn span {
        display: none;
    }
    
    .spreadsheet-table-area {
        padding: 12px;
    }
}



/* Form Row for inline groups */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Progress Input */
.progress-input-container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.progress-slider {
    flex: 1;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg-surface-soft);
    border-radius: 4px;
    outline: none;
    border: 1px solid var(--border-subtle);
}

.progress-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 112, 243, 0.3);
    transition: transform 0.15s;
}

.progress-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.progress-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 112, 243, 0.3);
}

.progress-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    min-width: 40px;
    text-align: right;
}

/* Color Picker Row */
.color-picker-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.color-picker-row input[type="color"] {
    width: 50px;
    height: 40px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0;
}

.color-preview {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-subtle);
}

/* ===================================
   BUTTONS
   =================================== */
.btn-primary {
    background: var(--accent);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-subtle);
    letter-spacing: -0.01em;
}

.btn-primary:hover {
    background: #0066dd;
    transform: scale(1.01);
    box-shadow: var(--shadow-card);
}

.btn-primary i,
.btn-primary .fas,
.btn-primary .far,
.btn-primary .fab {
    outline: none;
    border: none;
    box-shadow: none;
}

.btn-secondary {
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
    padding: 12px 24px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    letter-spacing: -0.01em;
}

.btn-secondary:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.btn-danger {
    padding: 12px 24px;
    background: var(--danger);
    color: white;
    border: none;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-subtle);
    letter-spacing: -0.01em;
}

.btn-danger:hover {
    background: #e6342a;
    transform: scale(1.01);
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3);
}

/* ===================================
   MODALS
   =================================== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.2s ease;
}

.modal.active {
    display: flex;
}

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

.modal-content {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-soft);
    animation: slideUp 0.3s ease;
}

/* Custom scrollbar for modal content */
.modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 10px;
    margin: 20px 0; /* Inset from rounded borders */
}

.modal-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* Dark mode scrollbar */
body.dark-mode .modal-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .modal-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

body.dark-mode .modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

.modal-content-wide {
    max-width: 700px;
    width: 95%;
}

/* ===================================
   TASK MODAL - Clean Rebuild
   Compact, single-column responsive layout
   =================================== */
.task-modal-content {
    max-width: 480px;
    width: 94%;
    max-height: 90vh;
    background: white;
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
}

body.dark-mode .task-modal-content {
    background: #2c2c2e;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

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

.task-modal-content .modal-header h2 {
    font-size: 17px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.task-modal-content .modal-header h2 i {
    color: var(--accent);
    font-size: 16px;
}

.task-modal-form {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.task-modal-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.task-modal-form label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

.task-modal-form label .optional {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 12px;
}

.task-modal-form input[type="text"],
.task-modal-form input[type="number"],
.task-modal-form input[type="date"],
.task-modal-form select,
.task-modal-form textarea {
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--bg-surface);
    color: var(--text-main);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}

.task-modal-form input:focus,
.task-modal-form select:focus,
.task-modal-form textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.1);
}

.task-modal-form textarea {
    resize: vertical;
    min-height: 60px;
}

/* Two-column row */
.form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Progress slider in modal */
.task-progress-input {
    display: flex;
    align-items: center;
    gap: 12px;
}

.task-progress-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 6px;
    background: #e5e5ea;
    border-radius: 3px;
    outline: none;
}

.task-progress-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 112, 243, 0.3);
    transition: transform 0.15s ease;
}

.task-progress-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.task-progress-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--accent);
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

.task-progress-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    min-width: 36px;
    text-align: right;
}

/* Modal actions */
.task-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border-subtle);
    margin-top: auto;
    flex-wrap: nowrap;
}

.task-modal-actions .btn-primary i {
    margin-right: 6px;
}

/* Dark mode adjustments */
body.dark-mode .task-modal-form input,
body.dark-mode .task-modal-form select,
body.dark-mode .task-modal-form textarea {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f5f5f7;
}

body.dark-mode .task-progress-slider {
    background: rgba(255, 255, 255, 0.15);
}

/* Mobile responsive */
@media (max-width: 500px) {
    .task-modal-content {
        max-height: 95vh;
        border-radius: 12px 12px 0 0;
        margin-top: auto;
    }
    
    .form-row-2col {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   CUSTOM DROPDOWN COMPONENTS (Modal)
   Apple-like dropdowns for task modal
   =================================== */

/* Word counter */
.word-counter {
    font-weight: 400;
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 8px;
}

.word-counter.warning {
    color: #F59E0B;
}

.word-counter.limit {
    color: #EF4444;
    font-weight: 500;
}

/* Custom Dropdown Container */
.custom-dropdown-container {
    position: relative;
    width: 100%;
}

.custom-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    min-height: 40px;
}

.custom-dropdown-trigger:hover {
    border-color: var(--text-muted);
}

.custom-dropdown-trigger.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.1);
}

.dropdown-trigger-content {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-main);
}

.dropdown-trigger-content .dropdown-placeholder {
    color: var(--text-muted);
}

.dropdown-trigger-content .dropdown-icon {
    font-size: 12px;
    color: var(--text-muted);
}

.dropdown-arrow {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.custom-dropdown-trigger.active .dropdown-arrow {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.custom-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: white;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-subtle);
    z-index: 1000;
    max-height: 220px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.15s ease;
}

.custom-dropdown-menu.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.1s ease;
    font-size: 14px;
    color: var(--text-main);
}

.dropdown-menu-option:first-child {
    border-radius: 10px 10px 0 0;
}

.dropdown-menu-option:last-child {
    border-radius: 0 0 10px 10px;
}

.dropdown-menu-option:only-child {
    border-radius: 10px;
}

.dropdown-menu-option:hover {
    background: rgba(0, 112, 243, 0.08);
}

.dropdown-menu-option.active {
    background: var(--accent-soft);
    color: var(--accent);
}

.dropdown-menu-option i.fa-check {
    margin-left: auto;
    font-size: 11px;
    color: var(--accent);
}

/* Status dots for dropdown */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.todo {
    background: #8E8E93;
}

.status-dot.inprogress {
    background: #0070F3;
}

.status-dot.done {
    background: #34C759;
}

/* Assignee avatar in dropdown */
.dropdown-assignee-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

/* Modal Progress Container - bigger version of table slider */
.modal-progress-container {
    display: flex;
    align-items: center;
    gap: 14px;
}

.modal-progress-container .progress-range-slider {
    flex: 1;
    height: 10px;
    border-radius: 5px;
}

.modal-progress-container .progress-range-slider::before {
    border-radius: 0 5px 5px 0;
}

.modal-progress-container .progress-range-slider::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: -3px;
}

.modal-progress-container .progress-range-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
}

.modal-progress-container .progress-range-slider::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: 5px;
}

.modal-progress-container .progress-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--accent);
    min-width: 44px;
    text-align: right;
}

/* Dark mode for custom dropdowns */
body.dark-mode .custom-dropdown-trigger {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .custom-dropdown-trigger:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .custom-dropdown-menu {
    background: #2c2c2e;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

body.dark-mode .dropdown-menu-option:hover {
    background: rgba(10, 132, 255, 0.15);
}

body.dark-mode .dropdown-menu-option.active {
    background: rgba(10, 132, 255, 0.2);
}

/* ===================================
   COMPACT EVENT MODAL
   Space-efficient layout for add/edit event
   =================================== */
.event-modal-compact {
    max-width: 480px;
    width: 95%;
}

.event-form-compact {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.event-form-compact .form-group {
    margin-bottom: 0;
}

/* Date and Time Row - All inline */
.event-datetime-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: end;
}

.event-date-group {
    min-width: 140px;
}

.event-date-group input[type="date"] {
    width: 100%;
    padding: 10px 12px;
}

.event-time-group {
    min-width: 100px;
}

.event-time-group label {
    font-size: 12px;
}

/* Compact time input */
.time-input-compact {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 8px 10px;
    transition: all var(--transition-fast);
}

.time-input-compact:hover {
    border-color: var(--accent);
}

.time-input-compact:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.time-input-compact input[type="number"] {
    width: 32px;
    height: 28px;
    padding: 2px;
    font-size: 15px;
    font-weight: 600;
    color: var(--accent);
    background: transparent;
    border: none;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.time-input-compact input[type="number"]::-webkit-outer-spin-button,
.time-input-compact input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.time-input-compact input[type="number"]:focus {
    outline: none;
    background: var(--accent-soft);
    border-radius: 4px;
}

.time-input-compact span {
    font-size: 15px;
    font-weight: 700;
    color: var(--accent);
}

/* Compact color picker */
.event-form-compact .event-color-picker {
    gap: 8px;
}

.event-form-compact .event-color-option {
    width: 28px;
    height: 28px;
}

/* Auto-expanding textarea */
.auto-expand-textarea {
    min-height: 60px;
    max-height: 200px;
    resize: none;
    overflow-y: hidden;
    transition: height 0.15s ease;
}

.auto-expand-textarea:focus {
    min-height: 80px;
}

/* Optional label styling */
.label-optional {
    font-weight: 400;
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 4px;
}

/* Responsive for smaller screens */
@media (max-width: 500px) {
    .event-datetime-row {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .event-date-group {
        grid-column: 1 / -1;
    }
}

.modal-form-horizontal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    padding: 24px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    align-content: start;
}

.form-column {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.form-group.full-height {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-group.full-height textarea {
    flex: 1;
    min-height: 200px;
    resize: vertical;
}

.modal-actions-full {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
    margin-top: 8px;
}

/* Responsive modal for smaller screens */
@media (max-width: 768px) {
    .modal-form-horizontal {
        grid-template-columns: 1fr;
        padding: 20px;
    }
    
    .form-group.full-height textarea {
        min-height: 120px;
    }
    
    .modal-actions-full {
        grid-column: 1;
        flex-direction: column-reverse;
    }
    
    .modal-actions-full button {
        width: 100%;
    }

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

    /* Task Table Responsive */
    .task-view-toggle {
        width: 100%;
    }

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

    .section-header-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .section-header-actions button {
        flex: 1;
        min-width: 120px;
    }

    .task-table {
        font-size: 13px;
    }

    .task-table th,
    .task-table td {
        padding: 10px 12px;
    }

    /* Hide some columns on mobile */
    .col-progress,
    .col-budget,
    .col-time {
        display: none;
    }

    .col-title {
        min-width: 150px;
    }

    .todo-list-header {
        flex-wrap: wrap;
        gap: 12px;
    }

    .todo-list-header-left {
        flex: 1;
        min-width: 200px;
    }

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

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

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

.modal-header h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.02em;
    margin: 0;
}

/* Modal Body & Footer Base Styles */
.modal-body {
    padding: 24px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.modal-footer {
    padding: 20px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
    background: var(--bg-surface);
}

/* Spreadsheet Modal Specific */
.spreadsheet-modal-content {
    max-width: 520px;
}

.spreadsheet-modal-content .modal-body {
    padding: 24px;
}

.spreadsheet-modal-content .modal-footer {
    padding: 20px 24px;
}

.spreadsheet-modal-content .form-group {
    margin-bottom: 20px;
}

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

/* Form Row Half */
.form-row-half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 20px;
}

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

/* Icon Select Grid */
.icon-select-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.icon-option {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--bg-surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 16px;
}

.icon-option:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.icon-option.active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

/* Type Select Row */
.type-select-row {
    display: flex;
    gap: 12px;
}

.type-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: 2px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--bg-surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 14px;
    font-weight: 500;
}

.type-option i {
    font-size: 16px;
}

.type-option:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.type-option.active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

/* Color Select Grid */
.color-select-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.color-option {
    aspect-ratio: 1;
    border-radius: 10px;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.color-option:hover {
    transform: scale(1.1);
}

.color-option.active {
    border-color: var(--text-main);
    box-shadow: 0 0 0 2px var(--bg-surface);
}

.color-option.active::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Visibility Options */
.visibility-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.visibility-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 2px solid var(--border-subtle);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--bg-surface);
}

.visibility-option:hover {
    border-color: var(--accent);
}

.visibility-option.active {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.visibility-option input {
    display: none;
}

.visibility-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--bg-surface-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.visibility-option.active .visibility-icon {
    background: var(--accent);
    color: white;
}

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

.visibility-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-main);
}

.visibility-desc {
    font-size: 12px;
    color: var(--text-muted);
}

/* Lead Modal Dropdowns */
.lead-dropdown {
    position: relative;
}

.lead-dropdown-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-main);
    transition: all 0.15s ease;
}

.lead-dropdown-btn:hover {
    border-color: var(--accent);
}

.lead-dropdown-btn .status-dot,
.lead-dropdown-btn .source-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lead-dropdown-btn i.fa-chevron-down {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.lead-dropdown.open .lead-dropdown-btn i.fa-chevron-down {
    transform: rotate(180deg);
}

.lead-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
    z-index: 100;
    display: none;
    overflow: hidden;
}

.lead-dropdown.open .lead-dropdown-menu {
    display: block;
}

.lead-dropdown-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-main);
    transition: background 0.1s ease;
}

.lead-dropdown-option:hover {
    background: var(--bg-surface-soft);
}

.lead-dropdown-option .status-dot,
.lead-dropdown-option .source-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Lead Status Colors */
.status-dot.new { background: #3B82F6; }
.status-dot.contacted { background: #F59E0B; }
.status-dot.qualified { background: #8B5CF6; }
.status-dot.won { background: #10B981; }
.status-dot.lost { background: #EF4444; }

/* Lead Source Colors */
.source-dot { background: #6B7280; }

/* Lead Modal Value Input */
.lead-value-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.lead-value-wrapper .currency-prefix {
    position: absolute;
    left: 16px;
    color: var(--text-muted);
    font-size: 14px;
    pointer-events: none;
}

.lead-value-wrapper input {
    padding-left: 32px;
}

.modal-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.btn-edit-grey {
    background: var(--text-muted);
    color: white;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-subtle);
}

.btn-edit-grey:hover {
    background: #5a5a5f;
    transform: scale(1.01);
    box-shadow: var(--shadow-card);
}

.btn-edit-grey i {
    font-size: 0.85rem;
}

.modal-close {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--text-muted);
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: var(--accent-soft);
    color: var(--text-main);
    transform: scale(1.05);
}

.modal-form {
    padding: 24px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-main);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.01em;
}

.form-group label i {
    color: var(--accent);
    width: 16px;
}

.form-hint {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
    font-style: normal;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: 15px;
    font-family: var(--font-family);
    background: var(--bg-surface);
    color: var(--text-main);
    transition: all var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.1);
}

/* Time inputs styling */
.time-inputs-group {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: end;
    margin-bottom: 16px;
    padding: 16px;
    background: var(--accent-soft);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

/* Responsive time inputs for smaller widths */
@media (max-width: 500px) {
    .time-inputs-group {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .time-arrow {
        transform: rotate(90deg);
        padding: 0;
        margin: -4px 0;
    }
}

.time-input-wrapper {
    margin-bottom: 0 !important;
}

.time-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-surface);
    padding: 10px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.time-input-row:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-subtle);
}

.time-input-row:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.1);
}

.time-input-row input[type="number"] {
    width: 45px;
    height: 36px;
    padding: 4px;
    font-size: 18px;
    font-weight: 600;
    color: var(--accent);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    text-align: center;
    transition: all var(--transition-fast);
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Hide spinner arrows */
.time-input-row input[type="number"]::-webkit-outer-spin-button,
.time-input-row input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.time-input-row input[type="number"]:hover {
    background: var(--accent-soft);
}

.time-input-row input[type="number"]:focus {
    outline: none;
    background: var(--accent-soft);
}

.time-input-row .time-colon {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent);
    margin: 0 -4px;
}

.time-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 18px;
    padding-bottom: 10px;
    opacity: 0.7;
}

/* Color Presets Styling */
.event-color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 0;
}

.event-color-option {
    width: 36px;
    height: 36px;
    border: 3px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    box-shadow: var(--shadow-subtle);
    flex-shrink: 0;
}

.event-color-option:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-card);
}

.event-color-option.selected {
    border-color: white;
    box-shadow: 0 0 0 2px var(--text-main), var(--shadow-card);
}

.event-color-option.selected::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.duration-display {
    padding: 14px 16px;
    background: rgba(52, 199, 89, 0.1);
    border: 1px solid rgba(52, 199, 89, 0.3);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: 14px;
    color: #1d7a3c;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.duration-display i {
    color: var(--success);
}

.duration-display.error {
    background: rgba(255, 59, 48, 0.1);
    border: 1px solid rgba(255, 59, 48, 0.3);
    color: #c91f1f;
}

.duration-display.error i {
    color: var(--danger);
}

.time-input-wrapper label i {
    margin-right: 6px;
    color: var(--accent);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: auto;
    padding-top: 20px;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

/* Security Warning Box */
.security-warning-box {
    display: flex;
    gap: 20px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 59, 48, 0.05) 0%, rgba(255, 59, 48, 0.02) 100%);
    border: 2px solid rgba(255, 59, 48, 0.15);
    border-radius: var(--radius-lg);
}

.warning-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 59, 48, 0.1);
    border-radius: 50%;
    color: #FF3B30;
    font-size: 24px;
}

.warning-content {
    flex: 1;
}

.warning-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 12px 0;
    letter-spacing: -0.02em;
}

.warning-text {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.warning-text:last-child {
    margin-bottom: 0;
}

/* ===================================
   SCROLLBAR STYLING
   =================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--light-gray);
}

::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 4px;
}

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

/* ===================================
   RESPONSIVE DESIGN
   =================================== */
/* ===================================
   TABLET LAYOUT (1024px and below)
   =================================== */
@media (max-width: 1024px) {
    .task-columns {
        grid-template-columns: 1fr;
        min-width: auto;
    }
    
    .sidebar {
        width: 70px;
    }
    
    .sidebar-header .logo span,
    .nav-item span:not(.notification-badge),
    .user-info {
        display: none;
    }
    
    .nav-item {
        justify-content: center;
        padding: 12px;
    }
    
    .user-avatar {
        margin: 0 auto;
    }
}

/* ===================================
   MOBILE LAYOUT (768px and below)
   =================================== */
@media (max-width: 768px) {
    /* Full width app container - remove all margins and rounded corners */
    .app-container {
        flex-direction: column;
        border-radius: 0;
        margin: 0;
        max-width: 100%;
        width: 100%;
        height: 100dvh; /* Use dynamic viewport height for mobile browsers */
        height: 100vh; /* Fallback for older browsers */
        overflow: hidden; /* Prevent body scroll, sections scroll internally */
        border: none;
        box-shadow: none;
    }
    
    /* Body adjustments for mobile */
    body {
        padding: 0;
        margin: 0;
        padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    }
    
    /* Mobile bottom navigation - always visible with safe area support */
    .sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: var(--bottom-nav-height);
        flex-direction: row;
        border-right: none;
        border-top: 1px solid var(--border-subtle);
        border-radius: 0;
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom); /* iOS home indicator safe area */
        z-index: 1200;
        background: var(--bg-surface-soft);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
        /* Always visible on mobile - no scroll-triggered visibility */
        display: flex !important;
    }
    
    /* Hide sidebar header on mobile */
    .sidebar-header {
        display: none;
    }
    
    /* Mobile bottom navigation - accessible touch targets */
    .sidebar-nav {
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding: 8px 4px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .sidebar-nav::-webkit-scrollbar {
        display: none;
    }
    
    .nav-item {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        padding: 8px 6px;
        min-width: 48px; /* Minimum 48px touch target */
        min-height: 48px;
        flex: 1;
        max-width: 80px;
        font-size: 11px;
        border-radius: 12px;
        white-space: nowrap;
        position: relative;
    }
    
    .nav-item i {
        font-size: 20px;
        margin: 0;
    }
    
    .nav-item span:not(.notification-badge) {
        display: block;
        font-size: 10px;
        font-weight: 600;
        text-align: center;
    }
    
    .nav-item.active {
        background-color: var(--accent-soft);
        color: var(--accent);
        border: none;
    }
    
    /* Position notification badges for mobile */
    .nav-item .notification-badge {
        position: absolute;
        top: 4px;
        right: 4px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 9px;
        line-height: 16px;
    }
    
    /* Hide sidebar footer on mobile */
    .sidebar-footer {
        display: none;
    }
    
    /* Main content - full width with flex layout for proper scrolling */
    .main-content {
        padding: 0;
        border-radius: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0; /* Critical: allows flex children to shrink and scroll */
        overflow: hidden; /* Container doesn't scroll, children do */
    }
    
    /* Top bar - full width */
    .top-bar {
        padding: 12px 16px;
        border-radius: 0;
        align-items: flex-start;
    }
    
    /* Content sections - full width with proper scrolling and bottom nav clearance */
    .content-section {
        padding: 0;
        width: 100%;
        flex: 1;
        min-height: 0; /* Critical: allows scrolling */
        overflow-y: auto;
        overflow-x: hidden; /* Prevent horizontal scroll except in specific containers */
        -webkit-overflow-scrolling: touch;
        /* Bottom padding ensures content is never hidden behind fixed nav */
        /* Formula: 70px (nav height) + iOS safe area + breathing room */
        padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 24px);
    }
    
    /* Section headers - full width edge to edge */
    .section-header {
        padding: 16px;
        margin: 0 0 16px 0;
        background: var(--bg-surface);
        flex-direction: row;
        align-items: flex-start;
    }
    
    .section-header h1 {
        font-size: 24px;
    }
    
    .section-header-actions {
        flex-wrap: nowrap;
        gap: 8px;
        margin-left: auto;
        justify-content: flex-end;
    }
    
    /* Search bar */
    .search-bar {
        max-width: none;
        width: 100%;
    }
    
    /* Cards and grids */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .task-columns {
        grid-template-columns: 1fr;
    }
    
    /* Calendar mobile optimizations */
    .calendar-container {
        padding: 16px;
        border-radius: 16px;
    }
    
    .calendar-header {
        margin-bottom: 16px;
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .calendar-title {
        font-size: 1.25rem;
        flex: 1 1 100%;
        text-align: center;
        order: 1;
    }
    
    .calendar-nav {
        display: flex;
        gap: 8px;
        width: 100%;
        justify-content: center;
        order: 2;
    }
    
    .calendar-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .calendar-grid {
        gap: 4px;
        margin-bottom: 20px;
    }
    
    .calendar-day-header {
        font-size: 11px;
        padding: 8px 4px;
        font-weight: 700;
    }
    
    .calendar-day {
        font-size: 14px;
        min-height: 44px;
        aspect-ratio: 1;
        border-radius: 8px;
    }
    
    .calendar-day.has-event::after {
        bottom: 4px;
        width: 4px;
        height: 4px;
    }
    
    /* Upcoming events mobile */
    .upcoming-events {
        margin-top: 20px;
        padding-top: 20px;
    }
    
    .upcoming-events h3 {
        font-size: 18px;
        margin-bottom: 12px;
    }
    
    .event-item {
        padding: 14px;
        flex-direction: column;
        gap: 12px;
    }
    
    .event-date {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: auto;
        text-align: left;
    }
    
    .event-day {
        font-size: 1.25rem;
    }
    
    .event-month {
        font-size: 0.8rem;
    }
    
    /* Task columns mobile */
    .task-column {
        margin-bottom: 20px;
        border-radius: 16px;
    }
    
    .task-header {
        padding: 16px;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .task-header h4 {
        flex: 1;
        font-size: 16px;
    }
    
    .task-status-dropdown {
        font-size: 11px;
        padding: 6px 10px;
    }
    
    .task-actions {
        flex: 0 0 100%;
        margin-left: 0;
        justify-content: flex-end;
        margin-top: 8px;
    }
    
    .task-list {
        padding: 12px;
        gap: 10px;
    }
    
    .task-item {
        padding: 14px;
        border-radius: 12px;
    }
    
    .task-item-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .task-title {
        flex: 1 1 100%;
        font-size: 14px;
    }
    
    .task-priority,
    .task-assignee {
        font-size: 11px;
        padding: 4px 8px;
    }
    
    .task-description {
        font-size: 13px;
        line-height: 1.5;
    }
    
    .task-footer {
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
    }
    
    .task-due-date {
        font-size: 11px;
    }
    
    .task-item-actions {
        gap: 6px;
    }
    
    .week-day-header {
        padding: 8px;
        font-size: 12px;
    }
    
    /* Calendar section mobile scroll */
    #calendar-section {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 240px; /* Extra scroll room to avoid cutoff */
    }
    
    #calendar-section .calendar-container {
        overflow: visible;
        height: auto;
        max-height: none;
        min-height: auto;
    }
    
    /* Calendar view toggle mobile */
    .calendar-view-toggle {
        margin-bottom: 16px;
        gap: 8px;
    }
    
    .view-toggle-btn {
        padding: 10px 16px;
        font-size: 13px;
        border-radius: 10px;
    }
    
    /* Modal adjustments */
    .modal-content {
        width: 95%;
        max-width: 95%;
        max-height: 85vh;
        border-radius: 20px;
    }
    
    .modal-content-wide {
        max-width: 95%;
    }
    
    .modal-header {
        padding: 16px 20px;
    }
    
    .modal-body {
        padding: 20px;
    }
    
    .modal-footer {
        padding: 16px 20px;
        flex-direction: column-reverse;
        gap: 8px;
    }
    
    .modal-footer button {
        width: 100%;
    }
    
    /* Form adjustments */
    .form-group {
        margin-bottom: 16px;
    }
    
    /* Settings cards */
    .settings-container {
        padding: 0 16px;
        box-sizing: border-box;
        width: 100%;
    }
    .settings-card {
        border-radius: 14px;
        margin: 0 0 16px 0;
    }
    
    .settings-card-header,
    .settings-card-body {
        padding: 20px;
    }
    
    /* Chat adjustments */
    .chat-messages {
        padding: 12px;
    }
    
    .message-text {
        max-width: 85%;
        font-size: 14px;
    }
    
    .chat-input-container {
        padding: 12px 16px;
    }
    
    /* Compact event/task items */
    .event-item,
    .task-item,
    .activity-item {
        padding: 12px;
        font-size: 14px;
    }
    
    /* Buttons - minimum touch target 44x44 */
    .btn-primary,
    .btn-secondary,
    .btn-danger {
        padding: 12px 20px;
        font-size: 14px;
        min-height: 44px;
    }
    
    /* Hide non-essential UI on mobile */
    .section-subtitle {
        font-size: 13px;
    }
    
    /* ===================================
       MOBILE FULL-WIDTH CONTAINERS
       =================================== */
    
    /* Activity feed - full width */
    .activity-feed {
        border-radius: 0;
        padding: 16px;
        margin: 0;
        border-left: none;
        border-right: none;
    }
    
    .activity-item {
        margin: 0 -16px;
        padding: 16px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    /* Chat container - full width with flexible height */
    .chat-container {
        border-radius: 0;
        border-left: none;
        border-right: none;
        display: flex;
        flex-direction: column;
        height: 100%;
        max-height: none; /* Remove fixed max-height that causes clipping */
    }
    
    /* Calendar - full width */
    .calendar-container {
        border-radius: 0;
        margin: 0;
        padding: 16px;
        border-left: none;
        border-right: none;
    }
    
    /* Upcoming events - full width */
    .upcoming-events {
        padding: 16px;
        margin: 0 -16px;
    }
    
    /* Team section - full width */
    .team-section {
        padding: 0;
    }
    
    .team-header {
        margin: 0 0 16px 0;
        padding: 16px;
        border-radius: 0;
    }
    
    .team-list {
        padding: 0 16px;
    }
    
    .teammate-card {
        border-radius: 12px;
    }
    
    /* Settings - keep side padding and soft corners */
    .settings-card {
        border-radius: 14px;
        margin: 0 0 16px 0;
        border-left: 1px solid var(--border-subtle);
        border-right: 1px solid var(--border-subtle);
    }
    
    .settings-card:first-child {
        border-top-left-radius: 14px;
        border-top-right-radius: 14px;
    }
    
    .settings-card:last-child {
        border-bottom-left-radius: 14px;
        border-bottom-right-radius: 14px;
    }
    
    /* ===================================
       SPREADSHEET MOBILE LAYOUT
       =================================== */
    
    /* Spreadsheet header - stack controls */
    .spreadsheet-header {
        flex-direction: column;
        gap: 12px;
        padding: 12px 16px;
        align-items: stretch;
    }
    
    .spreadsheet-tabs {
        order: 1;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    
    .spreadsheet-controls {
        order: 2;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: space-between;
    }
    
    .spreadsheet-controls button,
    .spreadsheet-controls select {
        flex: 1;
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Spreadsheet wrapper - ONLY container that horizontally scrolls on mobile */
    .spreadsheet-wrapper {
        overflow-x: auto; /* Horizontal scroll allowed here */
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding: 0;
    }
    
    .spreadsheet-table {
        min-width: 800px; /* Force horizontal scroll on narrow screens */
    }
    
    /* Spreadsheet empty state - full width */
    .spreadsheet-empty {
        padding: 40px 16px;
        margin: 0;
        border-radius: 0;
    }
    
    /* ===================================
       METRICS MOBILE LAYOUT
       =================================== */
    
    /* Metrics section - full width */
    #metrics .section-header {
        padding: 16px;
        margin: 0 0 16px 0;
    }
    
    .metrics-stats-row {
        padding: 0 16px;
        gap: 12px;
    }
    
    .metrics-stat-card {
        border-radius: 12px;
    }
    
    .metrics-section-title {
        padding: 0 16px;
    }
    
    .metrics-charts-container {
        padding: 0 16px;
    }
    
    /* ===================================
       MODAL MOBILE IMPROVEMENTS
       =================================== */
    
    .modal-content {
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
        margin: 0;
    }
    
    .modal-header {
        padding: 16px;
        position: sticky;
        top: 0;
        background: var(--bg-surface);
        z-index: 10;
    }
    
    .modal-body {
        padding: 16px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .modal-footer {
        padding: 16px;
        position: sticky;
        bottom: 0;
        background: var(--bg-surface);
        flex-direction: column-reverse;
        gap: 8px;
        border-top: 1px solid var(--border-subtle);
    }
    
    .modal-footer button {
        width: 100%;
        min-height: 48px;
    }
    
    /* ===================================
       DROPDOWN MOBILE IMPROVEMENTS
       =================================== */
    
    .settings-dropdown {
        position: fixed;
        top: auto;
        bottom: 80px;
        left: 8px;
        right: 8px;
        max-height: 60vh;
        border-radius: 16px;
    }
    
    /* ===================================
       TOUCH ACCESSIBILITY
       =================================== */
    
    /* Ensure all interactive elements have 44px minimum touch target */
    button,
    .btn-icon,
    .btn-icon-small,
    .icon-btn,
    .nav-item,
    input[type="checkbox"],
    input[type="radio"],
    select {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Form inputs - larger touch targets */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    textarea,
    select {
        min-height: 48px;
        font-size: 16px; /* Prevents iOS zoom on focus */
        padding: 12px 16px;
    }
    
    /* Action buttons with proper spacing */
    .task-item-actions,
    .event-actions,
    .message-actions {
        gap: 8px;
    }
    
    .task-item-actions button,
    .event-actions button,
    .message-actions button {
        min-width: 44px;
        min-height: 44px;
        padding: 8px;
    }
    
    /* ===================================
       SEARCH MOBILE
       =================================== */
    
    .search-wrapper {
        max-width: none;
        width: 100%;
    }
    
    .search-results {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        max-height: calc(100vh - 140px);
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    /* ===================================
       TOP BAR MOBILE
       =================================== */
    
    .top-bar-actions {
        gap: 4px;
        margin-left: auto;
    }
    
    .top-bar-actions .icon-btn {
        width: 44px;
        height: 44px;
    }

    .header-toggle-row {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 12px;
    }
}

/* ===================================
   SMALL MOBILE (480px and below)
   =================================== */
@media (max-width: 480px) {
    .nav-item span:not(.notification-badge) {
        display: none;
    }
    
    .nav-item {
        padding: 10px 8px;
        max-width: 56px;
    }
    
    .section-header h1 {
        font-size: 22px;
    }
    
    .section-header-actions {
        width: 100%;
    }
    
    .section-header-actions button {
        flex: 1;
    }
    
    /* Even smaller padding on very small screens */
    .section-header,
    .activity-feed,
    .chat-messages,
    .calendar-container,
    .team-header,
    .team-list {
        padding-left: 12px;
        padding-right: 12px;
    }
    
    /* Stack buttons vertically on very small screens */
    .spreadsheet-controls {
        flex-direction: column;
    }
    
    .spreadsheet-controls button,
    .spreadsheet-controls select {
        width: 100%;
    }
    
    /* Adjust chart sizes */
    .metrics-stat-value {
        font-size: 1.25rem;
    }
    
    .metrics-stat-icon {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

/* ===================================
   UTILITY CLASSES
   =================================== */
.text-center {
    text-align: center;
}

.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }

.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }

/* Event Details Modal - Clean Minimal Design */
.event-details-modal {
    max-width: 480px;
}

/* Clean header */
.event-modal-header-clean {
    padding: 28px 28px 24px 28px !important;
    border-bottom: 1px solid #f0f0f0;
}

.event-header-text {
    flex: 1;
    min-width: 0;
}

.event-header-text h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.event-subtitle {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0;
    font-weight: 500;
}

/* Clean icon buttons */
.btn-icon-clean {
    width: 38px;
    height: 38px;
    border: none;
    background: #f3f4f6;
    border-radius: 10px;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-icon-clean:hover {
    background: #e5e7eb;
    color: #0070f3;
}

.btn-close-clean {
    width: 38px;
    height: 38px;
    background: transparent !important;
    color: #9ca3af !important;
}

.btn-close-clean:hover {
    background: #f3f4f6 !important;
    color: #1a1a1a !important;
}

/* Clean body */
.event-modal-body-clean {
    padding: 24px 28px !important;
}

/* Clean info rows - simple list style */
.event-info-row-clean {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid #f3f4f6;
}

.event-info-row-clean:last-of-type {
    border-bottom: none;
}

.event-icon-clean {
    width: 20px;
    flex-shrink: 0;
    color: #9ca3af;
    font-size: 16px;
    text-align: center;
}

.event-info-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.event-label-clean {
    font-size: 0.75rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.event-value-clean {
    font-size: 0.95rem;
    color: #1a1a1a;
    font-weight: 600;
    line-height: 1.4;
}

.visibility-badge-clean {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #f3f4f6;
    color: #6b7280;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    width: fit-content;
}

.visibility-badge-clean i {
    font-size: 0.75rem;
}

/* Description - cleaner */
.event-description-clean {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #f3f4f6;
}

.event-desc-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 12px;
}

.event-desc-label i {
    font-size: 14px;
}

.event-desc-text {
    padding: 16px;
    background: #fafafa;
    border-radius: 12px;
    color: #4b5563;
    font-size: 0.9rem;
    line-height: 1.6;
    min-height: 60px;
    white-space: pre-wrap;
}

.event-desc-text:empty::before {
    content: 'No description provided';
    color: #9ca3af;
    font-style: italic;
}

/* Clean footer */
.event-modal-footer-clean {
    padding: 20px 28px !important;
    border-top: 1px solid #f0f0f0;
    gap: 12px;
}

.btn-clean {
    border-radius: 12px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
}

/* Dark mode */
body.dark-mode .event-modal-header-clean {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .event-header-text h2 {
    color: #f3f4f6;
}

body.dark-mode .event-subtitle {
    color: #9ca3af;
}

body.dark-mode .btn-icon-clean {
    background: rgba(255, 255, 255, 0.08);
    color: #9ca3af;
}

body.dark-mode .btn-icon-clean:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #60a5fa;
}

body.dark-mode .btn-close-clean {
    background: transparent !important;
}

body.dark-mode .btn-close-clean:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f3f4f6 !important;
}

body.dark-mode .event-info-row-clean {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .event-icon-clean {
    color: #6b7280;
}

body.dark-mode .event-label-clean {
    color: #6b7280;
}

body.dark-mode .event-value-clean {
    color: #f3f4f6;
}

body.dark-mode .visibility-badge-clean {
    background: rgba(255, 255, 255, 0.08);
    color: #9ca3af;
}

body.dark-mode .event-description-clean {
    border-top-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .event-desc-text {
    background: rgba(255, 255, 255, 0.04);
    color: #d1d5db;
}

body.dark-mode .event-modal-footer-clean {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Event modal header actions - ensure buttons stay side-by-side */
.unified-modal-header-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .event-info-grid {
        grid-template-columns: 1fr;
    }
    
    .event-header-content {
        gap: 12px;
    }
    
    .event-color-indicator {
        width: 40px;
        height: 40px;
    }
}

/* Legacy event details support - kept for backwards compatibility */
.event-details-layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.event-details-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.event-detail-row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--light-gray);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.event-detail-row:hover {
    background: var(--neutral-100);
}

.event-detail-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-soft), var(--accent-lighter));
    border-radius: var(--radius-sm);
    color: var(--accent);
    font-size: 16px;
    flex-shrink: 0;
}

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

.event-detail-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.event-detail-value {
    font-size: 1rem;
    color: var(--text-main);
    font-weight: 500;
}

.event-color-display {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 0 0 1px var(--border-subtle), var(--shadow-subtle);
    margin-top: 4px;
}

.event-details-description {
    display: flex;
    flex-direction: column;
}

.event-description-box {
    padding: var(--spacing-lg);
    background: var(--light-gray);
    border-radius: var(--radius-md);
    color: var(--text-main);
    font-size: 0.95rem;
    line-height: 1.6;
    min-height: 100px;
    white-space: pre-wrap;
}

@media (max-width: 768px) {
    .event-detail-row {
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }
    
    .event-detail-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}

/* ===================================
   TEAM MANAGEMENT SECTION
   =================================== */

/* Team Overview Card */
.team-overview-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-subtle);
}

.team-overview-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-subtle);
}

/* ===================================
   TEAM NAME - Editable (Owner-only)
   =================================== */
.team-name-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.team-name-text {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1;
}

.btn-edit-team-name {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    font-size: 12px;
    opacity: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.team-name-wrapper:hover .btn-edit-team-name {
    opacity: 1;
}

.btn-edit-team-name:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

/* Team Name Edit Mode */
.team-name-edit-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.team-name-input {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
    background: var(--bg-surface);
    border: 2px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 8px 14px;
    width: 280px;
    max-width: 100%;
    outline: none;
    letter-spacing: -0.02em;
}

.team-name-input:focus {
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

.btn-save-team-name,
.btn-cancel-team-name {
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 14px;
}

.btn-save-team-name {
    color: var(--success);
    border-color: var(--success);
}

.btn-save-team-name:hover {
    background: var(--success);
    color: white;
}

.btn-cancel-team-name {
    color: var(--text-muted);
}

.btn-cancel-team-name:hover {
    background: var(--light-gray);
    color: var(--text-main);
}

/* ===================================
   LEAVE TEAM BUTTON - Fixed Icon Alignment
   =================================== */
.btn-leave-team {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    line-height: 1;
    transition: all var(--transition-fast);
}

.btn-leave-team:hover {
    border-color: var(--danger) !important;
    color: var(--danger);
    background: rgba(255, 59, 48, 0.05);
}

.btn-leave-team i {
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-leave-team span {
    line-height: 1;
}

/* ===================================
   PENDING LEAVE REQUESTS SECTION
   =================================== */
.pending-requests-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-subtle);
}

.pending-requests-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.leave-request-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    gap: 16px;
}

.leave-request-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.leave-request-name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leave-request-time {
    font-size: 12px;
    color: var(--text-muted);
}

.leave-request-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.btn-approve-leave,
.btn-deny-leave {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
}

.btn-approve-leave {
    background: var(--success);
    color: white;
}

.btn-approve-leave:hover {
    background: #2d9042;
    transform: translateY(-1px);
}

.btn-deny-leave {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
}

.btn-deny-leave:hover {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
}

/* Mobile responsive */
@media (max-width: 480px) {
    .leave-request-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .leave-request-actions {
        width: 100%;
        margin-top: 12px;
    }
    
    .btn-approve-leave,
    .btn-deny-leave {
        flex: 1;
        justify-content: center;
    }
}

/* ===================================
   TEAM ROLES CARD - Collapsible Dropdown
   =================================== */
.role-info-card {
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}

.role-info-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    transition: all var(--transition-fast);
    list-style: none;
}

.role-info-summary::-webkit-details-marker {
    display: none;
}

.role-info-summary:hover {
    color: var(--text-secondary);
}

.role-info-summary i.fa-chevron-down {
    font-size: 10px;
    transition: transform var(--transition-fast);
    margin-left: auto;
}

.role-info-card[open] .role-info-summary i.fa-chevron-down {
    transform: rotate(180deg);
}

.role-info-summary i.fa-shield-alt {
    font-size: 12px;
}

.role-info-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 16px 16px;
}

.role-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.role-info-item:hover {
    background: var(--light-gray);
}

.role-info-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}

.role-info-icon.owner {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #5c4d00;
}

.role-info-icon.admin {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
}

.role-info-icon.member {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    color: white;
}

.role-info-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.role-info-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

.role-info-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.3;
}

/* Dark mode adjustments for team section */
body.dark-mode .role-info-card {
    background: var(--bg-surface);
}

body.dark-mode .role-info-item {
    background: rgba(255, 255, 255, 0.03);
}

body.dark-mode .role-info-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .team-name-input {
    background: var(--bg-body);
    color: var(--text-main);
}

.team-overview-info h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.team-meta {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 12px;
}

.team-code-display {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--accent-soft);
    padding: 10px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    font-weight: 700;
    color: var(--accent);
    font-size: 16px;
    letter-spacing: 0.5px;
}

.btn-copy-code {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.btn-copy-code:hover {
    background: var(--bg-surface);
    color: var(--accent);
}

.team-member-count {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 14px;
}

.team-member-count i {
    color: var(--accent);
}

/* Team Members Grid */
.section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 30px 0 20px;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-main);
}

.section-title .badge {
    background: var(--danger);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}

.team-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.team-member-card {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    position: relative;
}

.team-member-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: #d0d0d0;
}

.team-member-card.owner {
    border-color: #ffd700;
    background: var(--bg-surface);
}

.team-member-card.owner::before {
    content: '👑';
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
}

.member-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.member-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    flex-shrink: 0;
}

.member-info {
    flex: 1;
    min-width: 0;
}

.member-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-email {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.member-detail-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.member-detail-row i {
    width: 16px;
    color: var(--accent);
}

.member-role-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.member-role-badge.owner {
    background: rgba(255, 204, 0, 0.15);
    color: #996600;
    border: 1px solid rgba(255, 204, 0, 0.3);
}

.member-role-badge.admin {
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid rgba(0, 112, 243, 0.3);
}

.member-role-badge.member {
    background: rgba(52, 199, 89, 0.15);
    color: var(--success);
    border: 1px solid rgba(52, 199, 89, 0.3);
}

/* Role Management Actions */
.member-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
}

.btn-role-action {
    flex: 1;
    min-width: 100px;
    padding: 8px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--bg-surface);
    color: var(--text-main);
}

.btn-role-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.btn-role-action:active {
    transform: translateY(0);
}

.btn-role-action.promote {
    background: rgba(0, 112, 243, 0.08);
    color: var(--accent);
    border-color: rgba(0, 112, 243, 0.2);
}

.btn-role-action.promote:hover {
    background: rgba(0, 112, 243, 0.12);
    border-color: var(--accent);
}

.btn-role-action.demote {
    background: rgba(255, 193, 7, 0.15);
    color: #d68200;
    border-color: rgba(255, 193, 7, 0.4);
}

.btn-role-action.demote:hover {
    background: rgba(255, 193, 7, 0.25);
    border-color: #ff9800;
}

.btn-role-action.remove {
    background: rgba(255, 59, 48, 0.08);
    color: #d62a2a;
    border-color: rgba(255, 59, 48, 0.2);
}

.btn-role-action.remove:hover {
    background: rgba(255, 59, 48, 0.12);
    border-color: var(--danger);
}

/* Join Requests Section */
.join-requests-section {
    background: linear-gradient(135deg, rgba(0, 112, 243, 0.06), rgba(0, 112, 243, 0.02));
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 30px;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-subtle);
}

.join-requests-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 12px;
}

.join-request-item {
    background: var(--bg-surface);
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-card);
}

.join-request-item:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-soft);
    transform: translateY(-2px);
}

.join-request-info {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.join-request-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    box-shadow: 0 8px 18px rgba(0, 112, 243, 0.25);
}

.join-request-details .name {
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 4px;
    font-size: 15px;
}

.join-request-details .email {
    font-size: 13px;
    color: var(--text-muted);
}

.join-request-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.btn-accept {
    background: var(--success);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.2s;
    box-shadow: var(--shadow-card);
}

.btn-accept:hover {
    background: #0d6e0d;
    transform: translateY(-1px);
}

.btn-reject {
    background: var(--danger);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.2s;
    box-shadow: var(--shadow-card);
}

.btn-reject:hover {
    background: #b02a37;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .join-request-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .join-request-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* No Team State */
.no-team-card {
    background: white;
    border-radius: 12px;
    padding: 60px 40px;
    text-align: center;
    box-shadow: var(--shadow-md);
}

.no-team-illustration {
    font-size: 120px;
    color: #e9ecef;
    margin-bottom: 30px;
}

.no-team-card h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 12px;
}

.no-team-card > p {
    font-size: 16px;
    color: var(--text-muted);
    margin-bottom: 40px;
}

.no-team-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.action-card {
    background: var(--bg-surface);
    padding: 30px;
    border-radius: 12px;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

.action-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent);
}

.action-icon {
    font-size: 48px;
    color: var(--accent);
    margin-bottom: 20px;
}

.action-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 10px;
}

.action-card p {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.join-team-form {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.join-team-form input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 2px;
}

.join-team-form input:focus {
    outline: none;
    border-color: var(--accent);
}

.join-team-form button {
    padding: 12px 24px;
}

@media (max-width: 768px) {
    .team-members-grid {
        grid-template-columns: 1fr;
    }
    
    .no-team-actions {
        grid-template-columns: 1fr;
    }
    
    .team-overview-header {
        flex-direction: column;
        gap: 20px;
    }
}

/* ===================================
   SETTINGS SECTION
   =================================== */

.settings-container {
    max-width: 1000px;
    margin: 0;
    width: 100%;
}

.settings-card {
    background: var(--bg-surface-soft);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-subtle);
    overflow: visible;
    border: 1px solid var(--border-subtle);
}

body.dark-mode .settings-card {
    background: var(--bg-surface);
    border-color: var(--border-medium);
    box-shadow: 0 2px 16px rgba(0,0,0,0.32);
}

body.dark-mode .settings-card-header,
body.dark-mode .settings-card-body {
    background: transparent;
    border-color: var(--border-medium);
}

body.dark-mode .profile-preview,
body.dark-mode .form-group {
    background: transparent;
    border-radius: 0;
    border-color: var(--border-medium);
}

.settings-card-header {
    background: transparent;
    padding: 28px 40px;
    border-bottom: 1px solid var(--border-subtle);
}

.settings-card-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-card-header h2 i {
    color: var(--accent);
}

.settings-card-header p {
    color: var(--text-muted);
    font-size: 14px;
    margin: 0;
}

.settings-card-body {
    padding: 32px 40px;
    overflow: visible;
}

/* Profile Preview */
.profile-preview {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 32px;
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    margin-bottom: 32px;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.profile-avatar-large {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 112, 243, 0.3);
    transition: all 0.3s ease;
}

.profile-preview-info h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 6px;
}

.profile-preview-info p {
    color: var(--text-muted);
    font-size: 15px;
}

/* Settings Form */
.settings-form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.form-section {
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 30px;
}

.form-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.form-section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-group {
    margin-bottom: 24px;
    overflow: visible;
}

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

.form-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 8px;
    font-size: 14px;
}

.form-group label i {
    color: var(--accent);
    width: 18px;
}

.form-group input[type="text"],
.form-group input[type="email"] {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    font-size: 15px;
    transition: all var(--transition-fast);
    font-family: var(--font-family);
    color: var(--text-main);
}

.form-group input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.08);
    background: var(--bg-surface);
}

.form-group input:disabled {
    background: var(--bg-body);
    color: var(--text-muted);
    cursor: not-allowed;
}

.form-group small {
    display: block;
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 6px;
}

/* Custom Dropdown */
.custom-dropdown {
    position: relative;
    width: 100%;
    overflow: visible;
}

.custom-dropdown-selected {
    width: 100%;
    padding: 14px 16px;
    padding-right: 45px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    border-radius: 14px;
    font-size: 15px;
    font-family: var(--font-family);
    color: var(--text-main);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.custom-dropdown-selected:hover {
    border-color: var(--accent);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.custom-dropdown.active .custom-dropdown-selected {
    background: var(--bg-surface);
    border-color: var(--accent);
    box-shadow: 0 6px 20px rgba(0, 112, 243, 0.12), 0 0 0 3px var(--accent-soft);
}

.dropdown-arrow {
    font-size: 12px;
    color: var(--text-secondary);
    transition: transform var(--transition-fast);
}

.custom-dropdown.active .dropdown-arrow {
    transform: rotate(90deg);
    color: var(--accent);
}

.custom-dropdown-options {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-fast);
    z-index: 9999;
    overflow: hidden;
    max-height: 300px;
    overflow-y: auto;
}

.custom-dropdown.active .custom-dropdown-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-option {
    padding: 12px 16px;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 15px;
    color: var(--text-main);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface);
}

.dropdown-option:last-child {
    border-bottom: none;
}

.dropdown-option:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

.dropdown-option.selected {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

/* Old settings-select kept for backwards compatibility if needed elsewhere */
.settings-select {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    border-radius: 14px;
    font-size: 15px;
    transition: all var(--transition-fast);
    font-family: var(--font-family);
    color: var(--text-main);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23666' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

.settings-select:hover {
    background: white;
    border-color: var(--accent);
}

.settings-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.08);
    background: white;
}

/* Avatar Color Picker */
.avatar-color-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 14px;
    margin-bottom: 8px;
}

.color-option {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 3px solid transparent;
    position: relative;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.color-option:hover {
    transform: scale(1.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), inset 0 1px 2px rgba(255, 255, 255, 0.3);
    z-index: 2;
}

.color-option.selected {
    border-color: white;
    transform: scale(1.08);
    z-index: 2;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.color-option.selected::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.color-option.selected::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 5px;
    height: 10px;
    border: solid rgba(0, 0, 0, 0.8);
    border-width: 0 2px 2px 0;
    z-index: 1;
    margin-top: -2px;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 20px;
    border-top: 1px solid var(--border-subtle);
}

.form-actions button {
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* =============================================
   COMPACT ACCOUNT SETTINGS - Modern Layout
   ============================================= */

.settings-card-compact .settings-card-body {
    padding: 20px;
}

.settings-form-compact {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Profile Card: Avatar + Basic Info */
.account-profile-card {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 20px;
    background: var(--bg-surface-soft);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
}

.account-avatar-section {
    position: relative;
    flex-shrink: 0;
}

.account-avatar-section .profile-avatar-large {
    width: 72px;
    height: 72px;
    font-size: 1.5rem;
}

.avatar-upload-compact {
    position: absolute;
    bottom: -4px;
    right: -4px;
}

.btn-avatar-upload {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--bg-surface);
    background: var(--accent);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: all 0.15s ease;
    padding: 0;
}

.btn-avatar-upload:hover {
    background: var(--accent-hover);
    transform: scale(1.1);
}

.account-basic-info {
    flex: 1;
    min-width: 0;
}

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

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

.form-group-compact label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.form-group-compact input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    background: var(--bg-surface);
    color: var(--text-main);
    transition: all 0.15s ease;
}

.form-group-compact input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);
}

.form-group-compact input:disabled {
    background: var(--bg-body);
    color: var(--text-muted);
    cursor: not-allowed;
}

.form-group-email {
    max-width: 280px;
}

/* Color Picker Card - Flat Style */
.account-color-card {
    padding: 16px 20px;
    background: var(--bg-surface-soft);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
}

.color-card-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.avatar-color-picker-flat {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.color-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 2px solid transparent;
}

.color-circle:hover {
    transform: scale(1.15);
}

.color-circle.selected {
    border-color: var(--text-muted);
    box-shadow: 0 0 0 2px var(--bg-surface);
}

/* Compact Form Actions */
.form-actions-compact {
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
}

.form-actions-compact .btn-sm {
    padding: 8px 20px;
    font-size: 13px;
}

/* Dark mode for compact account */
body.dark-mode .account-profile-card,
body.dark-mode .account-color-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--border-medium);
}

body.dark-mode .form-group-compact input {
    background: var(--bg-body);
    border-color: var(--border-medium);
}

body.dark-mode .form-group-compact input:focus {
    border-color: var(--accent);
}

body.dark-mode .color-circle.selected {
    border-color: var(--text-light);
}

/* ===================================
   MINIMAL SETTINGS UI
   =================================== */

/* Main Settings Layout */
.settings-page-layout {
    max-width: 800px;
    margin: 0;
}

.settings-main-content {
    padding: 0;
}

/* Settings Header */
.settings-page-header {
    margin-bottom: 32px;
}

.settings-page-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

/* Tab Navigation */
.settings-tabs-nav {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 32px;
}

.settings-tab {
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s;
    margin-bottom: -1px;
}

.settings-tab:hover {
    color: var(--text-main);
}

.settings-tab.active {
    color: var(--text-main);
    border-bottom-color: var(--text-main);
}

/* Tab Panes */
.settings-tab-pane {
    display: none;
}

.settings-tab-pane.active {
    display: block;
}

/* Minimal Form */
.settings-minimal-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Profile Header - Avatar + Name Row */
.settings-profile-header {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    margin-bottom: 32px;
}

.settings-avatar-compact {
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
}

.settings-avatar-compact .profile-avatar-large {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    font-size: 32px;
}

.avatar-edit-overlay {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 28px;
    height: 28px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--text-muted);
    transition: all 0.15s;
}

.settings-avatar-compact:hover .avatar-edit-overlay {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.dropzone-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.settings-name-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Minimal Inputs */
.settings-input-minimal {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    font-size: 15px;
    color: var(--text-main);
    background: var(--bg-surface);
    transition: border-color 0.15s;
}

.settings-input-minimal:focus {
    outline: none;
    border-color: var(--text-muted);
}

.settings-input-minimal::placeholder {
    color: var(--text-muted);
}

.settings-input-minimal.settings-input-lg {
    font-size: 18px;
    font-weight: 500;
    padding: 14px 16px;
}

.settings-input-minimal.settings-input-disabled {
    background: var(--bg-body);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Minimal Field */
.settings-field-minimal {
    margin-bottom: 24px;
}

.settings-field-minimal > label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Avatar Color Picker */
.avatar-color-picker-minimal {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.avatar-color-picker-minimal .color-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s;
    border: 2px solid transparent;
}

.avatar-color-picker-minimal .color-dot:hover {
    transform: scale(1.15);
}

.avatar-color-picker-minimal .color-dot.selected {
    border-color: var(--text-main);
}

/* Minimal Actions */
.settings-actions-minimal {
    padding-top: 24px;
    margin-top: 12px;
}

/* Right-align actions for specific settings sections */
.settings-actions-minimal.settings-actions-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.settings-btn-save {
    background: var(--accent);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-subtle);
    letter-spacing: -0.01em;
}

.settings-btn-save:hover {
    background: #0066dd;
    transform: scale(1.01);
    box-shadow: var(--shadow-card);
}

/* Theme Selector Minimal */
.theme-selector-minimal {
    display: flex;
    gap: 10px;
}

.theme-btn {
    flex: 1;
    padding: 14px 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.theme-btn:hover {
    border-color: var(--text-muted);
}

.theme-btn.active {
    background: #e8e8ed;
    border-color: #d1d1d6;
    color: var(--text-main);
}

.theme-btn i {
    font-size: 14px;
}

/* Accent Color Picker Minimal */
.accent-color-picker-minimal {
    display: flex;
    gap: 10px;
}

.accent-color-picker-minimal .accent-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s;
    border: 2px solid transparent;
}

.accent-color-picker-minimal .accent-dot[data-accent="blue"] { background: #0070F3; }
.accent-color-picker-minimal .accent-dot[data-accent="purple"] { background: #AF52DE; }
.accent-color-picker-minimal .accent-dot[data-accent="green"] { background: #34C759; }
.accent-color-picker-minimal .accent-dot[data-accent="orange"] { background: #FF9500; }
.accent-color-picker-minimal .accent-dot[data-accent="pink"] { background: #FF2D55; }
.accent-color-picker-minimal .accent-dot[data-accent="teal"] { background: #00C7BE; }

.accent-color-picker-minimal .accent-dot:hover {
    transform: scale(1.15);
}

.accent-color-picker-minimal .accent-dot.selected {
    border-color: var(--text-main);
}

/* Settings Row Minimal - For toggles */
.settings-row-minimal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-subtle);
}

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

.settings-row-minimal > span {
    font-size: 15px;
    color: var(--text-main);
}

/* Group Labels */
.settings-group-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 32px 0 12px 0;
}

.settings-group-label:first-child {
    margin-top: 0;
}

.settings-group-label.danger {
    color: #FF3B30;
}

/* Minimal Toggle */
.toggle-minimal {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

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

.toggle-track {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #e5e5ea;
    transition: background 0.2s;
    border-radius: 26px;
}

.toggle-track::before {
    content: "";
    position: absolute;
    height: 22px;
    width: 22px;
    left: 2px;
    top: 2px;
    background: white;
    transition: transform 0.2s;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.toggle-minimal input:checked + .toggle-track {
    background: var(--accent);
}

.toggle-minimal input:checked + .toggle-track::before {
    transform: translateX(22px);
}

/* Mini Radio Group - Inline radios */
.mini-radio-group {
    display: flex;
    gap: 12px;
}

.mini-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.mini-radio input {
    width: 14px;
    height: 14px;
    accent-color: var(--accent);
}

.mini-radio span {
    font-size: 13px;
    color: var(--text-muted);
}

.mini-radio input:checked + span {
    color: var(--text-main);
}

/* Settings Select Minimal */
.settings-select-minimal select {
    width: 100%;
    padding: 10px 44px 10px 14px; /* space for custom arrow */
    border: 1px solid var(--border-subtle);
    border-radius: 999px; /* pill shape on-brand */
    font-size: 14px;
    color: var(--text-main);
    background: var(--bg-surface);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: all 0.18s ease;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23808AFC" d="M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
}

.settings-select-minimal select:focus,
.settings-select-minimal select:active,
.settings-select-minimal select:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 6px 20px rgba(0, 112, 243, 0.12), 0 0 0 6px var(--accent-soft);
    background-color: var(--bg-base);
}

/* Specific on-brand tweaks for the two settings selects */
#metricsVisibilitySelect,
#financesVisibilitySelect {
    padding-right: 48px;
}

/* Custom select replacement (styled children/options) */
.custom-select {
    position: relative;
}

.custom-select-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    font-size: 14px;
    color: var(--text-main);
    cursor: pointer;
}

.custom-select-button .arrow {
    width: 12px;
    height: 12px;
    display: inline-block;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23808AFC" d="M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z"/></svg>');
    background-repeat: no-repeat;
    background-size: 12px;
}

.custom-select-list {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(6, 30, 63, 0.12);
    z-index: 40;
    display: none;
    max-height: 220px;
    overflow: auto;
}

.custom-select-list.show {
    display: block;
}

.custom-select-item {
    padding: 10px 14px;
    font-size: 14px;
    color: var(--text-main);
    cursor: pointer;
}

.custom-select-item:hover {
    background: var(--bg-body);
}

.custom-select-item.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

/* Dark mode tweaks */
body.dark-mode .custom-select-button,
body.dark-mode .custom-select-list {
    background: var(--bg-body);
    border-color: var(--border-medium);
}

.settings-select-minimal select:focus {
    outline: none;
    border-color: var(--text-muted);
}

/* Action Rows - For Security/Advanced */
.settings-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    border-bottom: 1px solid var(--border-subtle);
    flex-wrap: nowrap; /* keep action button on the right */
}

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

.action-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Ensure the text block can shrink so the button stays on one line */
.action-info {
    flex: 1 1 auto;
    min-width: 0;
}

.action-desc {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* keep description on single line to avoid pushing button down */
}

/* Delete Chat History row - aligned with other security tab buttons */
#deleteChatHistorySection {
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

#deleteChatHistorySection .settings-btn-outline {
    order: 0; /* button on the right, aligned with other buttons */
    margin: 0;
    flex-shrink: 0;
}

#deleteChatHistorySection .action-info {
    flex: 1 1 auto;
    min-width: 0;
}

.action-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-main);
}

.action-title.danger {
    color: #FF3B30;
}

.action-desc {
    font-size: 13px;
    color: var(--text-muted);
}

.action-desc.danger {
    color: #FF3B30;
}

.settings-footer {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-muted);
    font-size: 14px;
}

.settings-footer .footer-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-footer .heart-icon {
    color: #FF4D67;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.settings-footer a {
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
}

.settings-footer a:hover {
    color: var(--accent);
}

.settings-footer .footer-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-footer .footer-links a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
    color: var(--text-main);
    transition: all 0.15s ease;
}

.settings-footer .footer-links a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

body.dark-mode .settings-footer .footer-links a {
    background: var(--bg-body);
    border-color: var(--border-medium);
}

.settings-btn-outline {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid var(--border-medium);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.15s;
}

.settings-btn-outline:hover {
    background: var(--bg-surface-soft);
}

.settings-btn-outline.danger {
    color: white;
    background: #FF3B30;
    border-color: #FF3B30;
}

.settings-btn-outline.danger:hover {
    background: #E02020;
    border-color: #E02020;
}

/* Dark Mode - Minimal Settings */
body.dark-mode .settings-input-minimal {
    background: var(--bg-body);
    border-color: var(--border-medium);
}

body.dark-mode .theme-btn {
    background: #1c1c1e;
    border-color: #38383a;
    color: #98989d;
}

body.dark-mode .theme-btn.active {
    background: #1c1c1e;
    border-color: #48484a;
    color: #ffffff;
}

body.dark-mode .settings-btn-save {
    background: #1c1c1e;
    border-color: #48484a;
    color: #ffffff;
}

body.dark-mode .toggle-track {
    background: #48484a;
}

body.dark-mode .avatar-edit-overlay {
    background: var(--bg-body);
    border-color: var(--border-medium);
}

body.dark-mode .settings-select-minimal select {
    background-color: var(--bg-body);
    border-color: var(--border-medium);
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23EBEBF5" d="M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
}

body.dark-mode .color-dot.selected,
body.dark-mode .accent-dot.selected {
    border-color: #fff;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .settings-page-layout {
        max-width: 100%;
    }
    
    .settings-tabs-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .settings-tabs-nav::-webkit-scrollbar {
        display: none;
    }
    
    .settings-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .settings-profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .settings-name-fields {
        width: 100%;
    }
    
    .theme-selector-minimal {
        flex-direction: column;
    }
    
    .theme-btn {
        justify-content: center;
    }

    .settings-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* End Minimal Settings UI */

/* Mobile responsive for compact account */
@media (max-width: 600px) {
    .account-profile-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 16px;
    }
    
    .account-avatar-section {
        margin-bottom: 8px;
    }
    
    .account-basic-info {
        width: 100%;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .form-group-email {
        max-width: 100%;
    }
    
    .avatar-color-picker-flat {
        justify-content: center;
    }
    
    .color-circle {
        width: 36px;
        height: 36px;
    }
    
    .form-actions-compact {
        flex-direction: column;
    }
    
    .form-actions-compact button {
        width: 100%;
        justify-content: center;
    }
}

/* End Compact Account Styles */

.btn-secondary {
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

.btn-secondary:hover {
    background: var(--bg-surface-soft);
    border-color: var(--accent);
    transform: translateY(-1px);
}

.btn-danger {
    background: #FF3B30;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-danger:hover {
    background: #d62a21;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3);
}

.btn-danger:active {
    transform: translateY(0);
}

/* ===================================
   TOGGLE SWITCHES
   =================================== */
.toggle-group {
    margin-bottom: 20px;
}

.toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    background: var(--light-gray);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 2px solid var(--neutral-200);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.toggle-label:hover {
    background: white;
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.12);
    transform: translateY(-1px);
}

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

.toggle-label-text {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--text-main);
    font-size: 15px;
}

.toggle-label-text i {
    color: var(--accent);
    width: 18px;
}

.toggle-label small {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0;
}

.toggle-switch {
    position: relative;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

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

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e5e5ea;
    transition: all 0.3s ease;
    border-radius: 28px;
    border: none;
}

.toggle-slider::before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    top: 3px;
    background: white;
    transition: all 0.3s ease;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background: #34c759;
}

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

.toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.25);
}

.toggle-label:hover .toggle-slider {
    background: #d1d1d6;
}

.toggle-label:hover input:checked + .toggle-slider {
    background: #30b855;
}

/* Compact toggle for notification preferences */
.toggle-label.compact {
    padding: 14px 16px;
    margin-bottom: 0;
    border-radius: 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}

.toggle-label.compact .toggle-label-text {
    font-size: 14px;
}

.toggle-label.compact small {
    font-size: 12px;
}

.toggle-label.compact .toggle-switch {
    width: 46px;
    height: 26px;
}

.toggle-label.compact .toggle-slider::before {
    height: 18px;
    width: 18px;
    left: 4px;
    top: 4px;
}

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

/* ===================================
   NOTIFICATION PREFERENCES
   =================================== */
.notification-prefs-section {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
    margin-bottom: 20px;
}

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

.notification-prefs-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: var(--light-gray);
    border-bottom: 1px solid var(--border-subtle);
    font-weight: 600;
    font-size: 15px;
    color: var(--text-main);
}

.notification-prefs-header i {
    color: var(--accent);
    width: 20px;
    text-align: center;
    font-size: 16px;
}

.notification-prefs-toggles {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--border-subtle);
}

.notification-prefs-toggles .toggle-label {
    border: none;
    border-radius: 0;
    background: var(--card-bg);
    box-shadow: none;
}

.notification-prefs-toggles .toggle-label:hover {
    background: var(--light-gray);
    border: none;
    box-shadow: none;
    transform: none;
}

/* Dark mode support for notification preferences */
body.dark-mode .notification-prefs-section {
    background: var(--dark-card-bg);
    border: none;
}

body.dark-mode .notification-prefs-header {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--dark-border);
}

body.dark-mode .notification-prefs-toggles {
    background: var(--dark-border);
}

body.dark-mode .notification-prefs-toggles .toggle-label {
    background: var(--dark-card-bg);
}

body.dark-mode .notification-prefs-toggles .toggle-label:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* ===================================
   RADIO BUTTONS
   =================================== */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.radio-option {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    background: var(--light-gray);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 2px solid var(--neutral-200);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.radio-option:hover {
    background: white;
    border-color: var(--accent);
    box-shadow: 0 2px 6px rgba(0, 122, 255, 0.1);
    transform: translateX(2px);
}

.radio-option input[type="radio"]:checked ~ * {
    color: inherit;
}

.radio-option input[type="radio"]:checked {
    background: var(--accent-lighter);
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.15);
}

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

.radio-custom {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    position: relative;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    margin-top: 1px;
    background: white;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.radio-option:hover .radio-custom {
    border-color: var(--accent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 2px rgba(0, 122, 255, 0.1);
}

.radio-option input[type="radio"]:checked + .radio-custom {
    border-color: var(--accent);
    background: var(--accent-lighter);
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
}

.radio-option input[type="radio"]:checked + .radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.radio-label {
    font-weight: 600;
    color: var(--text-main);
    font-size: 15px;
    flex: 1;
}

.radio-option small {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.4;
}

.radio-option input[type="radio"]:checked + .radio-custom + .radio-label {
    color: var(--accent);
    font-weight: 700;
}

/* User Profile Hover Effect */
.user-profile:hover {
    background: var(--accent-soft);
}

.user-profile {
    transition: all 0.2s;
    border-radius: 8px;
    padding: 8px;
    margin: -8px;
}

/* Settings Dropdown (duplicate styling for consistency) */
.settings-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    min-width: 200px;
    padding: 8px;
    z-index: 1000;
    overflow: hidden;
}

.dropdown-divider {
    height: 1px;
    background: #e9ecef;
    margin: 4px 0;
}

/* ===================================
   OVERVIEW/DASHBOARD STYLES
   =================================== */
.overview-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    padding: 20px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-subtle);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all var(--transition-fast);
}

.stat-card:hover {
    transform: scale(1.01);
    box-shadow: var(--shadow-card);
}

.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
}

.stat-content {
    flex: 1;
}

.stat-number {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1;
    letter-spacing: -0.02em;
}

.stat-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 500;
}

/* ===================================
   OVERVIEW TWO-COLUMN LAYOUT
   Tasks + Events side-by-side
   =================================== */
.overview-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.overview-two-col .overview-section {
    margin-bottom: 0;
}

.overview-two-col .overview-card {
    min-height: 280px;
    display: flex;
    flex-direction: column;
}

.overview-two-col .overview-tasks,
.overview-two-col .overview-events {
    flex: 1;
    overflow-y: auto;
    max-height: 320px;
}

/* Responsive: stack on mobile/narrow */
@media (max-width: 900px) {
    .overview-two-col {
        grid-template-columns: 1fr;
    }
}

/* Mobile: disable internal scrolling in Overview cards for natural page scroll */
@media (max-width: 768px) {
    .overview-two-col .overview-card {
        min-height: auto; /* Remove fixed height */
    }
    
    .overview-two-col .overview-tasks,
    .overview-two-col .overview-events {
        overflow-y: visible; /* Let page scroll naturally */
        max-height: none; /* Remove scroll trap */
    }
    
    .overview-notifications-list {
        overflow-y: visible; /* Let page scroll naturally */
        max-height: none; /* Remove scroll trap */
    }
}

.overview-section {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    padding: 24px;
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    box-shadow: var(--shadow-subtle);
}

.overview-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-subtle);
}

.overview-section-header h2 {
    font-size: 1.25rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 10px;
}

.overview-section-header h2 i {
    color: var(--accent);
}

.btn-link {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background 0.2s;
}

.btn-link:hover {
    background: rgba(0, 112, 243, 0.1);
}

/* ===================================
   OVERVIEW NOTIFICATIONS INBOX
   =================================== */
.overview-notifications-section {
    max-height: 400px;
    display: flex;
    flex-direction: column;
}

.overview-notifications-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.overview-notifications-list {
    flex: 1;
    overflow-y: auto;
    max-height: 320px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.overview-notification-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s ease;
    border-left: 3px solid transparent;
}

.overview-notification-row:hover {
    background: var(--bg-surface-soft);
}

.overview-notification-row.unread {
    background: rgba(0, 112, 243, 0.04);
    border-left-color: var(--accent);
}

.overview-notification-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}

.overview-notification-icon.task-icon {
    background: rgba(52, 199, 89, 0.12);
    color: var(--success);
}

.overview-notification-icon.message-icon {
    background: rgba(0, 112, 243, 0.12);
    color: var(--accent);
}

.overview-notification-icon.team-icon {
    background: rgba(255, 204, 0, 0.12);
    color: var(--warning);
}

.overview-notification-icon.calendar-icon {
    background: rgba(175, 82, 222, 0.12);
    color: #AF52DE;
}

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

.overview-notification-text {
    font-size: 0.9rem;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.overview-notification-text strong {
    font-weight: 600;
}

.overview-notification-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.no-notifications-overview {
    text-align: center;
    color: var(--text-muted);
    padding: 40px 20px;
    font-size: 0.95rem;
}

/* Dark mode for overview notifications */
body.dark-mode .overview-notification-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .overview-notification-row.unread {
    background: rgba(0, 112, 243, 0.08);
}

/* Overview Tasks & Events Containers - Prevent horizontal scroll */
.overview-tasks,
.overview-events {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-x: hidden;
    max-width: 100%;
}

/* Empty state styling */
.ov-empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 32px 20px;
    font-size: 0.95rem;
}

/* ===================================
   OVERVIEW TASKS - Clean Clickable Design
   =================================== */
.ov-task-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.ov-task-row:first-child {
    margin-top: 4px;
}

.ov-task-row:hover {
    border-color: #8e8e93;
    background: var(--bg-surface-soft);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.ov-task-content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ov-task-title {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 15px;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ov-task-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.2s ease;
    pointer-events: none;
}

.ov-task-row:hover .ov-task-meta {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.ov-task-priority {
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid;
    white-space: nowrap;
}

.ov-priority-low {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
    border-color: rgba(34, 197, 94, 0.3);
}

.ov-priority-medium {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    border-color: rgba(245, 158, 11, 0.3);
}

.ov-priority-high {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.3);
}

.ov-task-date {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    background: var(--bg-surface-soft);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
    white-space: nowrap;
}

/* Dark mode for tasks */
body.dark-mode .ov-task-row {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-medium);
}

body.dark-mode .ov-task-row:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #8e8e93;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* ===================================
   OVERVIEW EVENTS - New Modern Design
   =================================== */
.ov-event-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    max-width: 100%;
    min-width: 0;
    outline: none;
}

.ov-event-row:hover,
.ov-event-row:focus-within {
    background: #fafafa;
    border-color: #d1d5db;
}

.ov-event-row:focus {
    border-color: #0070f3;
    box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.1);
}

/* Date pill - blue pill on left */
.ov-event-date {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 50px;
    background: #0070f3;
    color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
}

.ov-event-day {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.ov-event-month {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
}

/* Event title - middle section with ellipsis */
.ov-event-title {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 0.95rem;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Time pill - hidden by default, shows on hover */
.ov-event-time {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #4b5563;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateX(8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

/* Show time pill on row hover or focus */
.ov-event-row:hover .ov-event-time,
.ov-event-row:focus-within .ov-event-time {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

.ov-tag {
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ov-tag-private {
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
}

.ov-tag-private i {
    font-size: 0.6rem;
}

/* Dark mode for events */
body.dark-mode .ov-event-row {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .ov-event-row:hover,
body.dark-mode .ov-event-row:focus-within {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .ov-event-row:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

body.dark-mode .ov-event-title {
    color: #f3f4f6;
}

body.dark-mode .ov-event-time {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    color: #d1d5db;
}

/* Responsive adjustments for overview rows */
@media (max-width: 600px) {
    .ov-task-row {
        padding: 12px 16px;
        gap: 8px;
    }
    
    .ov-task-title {
        font-size: 0.9rem;
    }
    
    .ov-task-priority,
    .ov-task-date {
        padding: 4px 10px;
        font-size: 0.7rem;
    }
    
    .ov-event-row {
        padding: 10px 16px;
        gap: 12px;
    }
    
    .ov-event-date {
        padding: 6px 12px;
        gap: 4px;
    }
    
    .ov-event-day {
        font-size: 1.1rem;
    }
    
    .ov-event-month {
        font-size: 0.75rem;
    }
    
    .ov-event-time {
        padding: 5px 10px;
        font-size: 0.75rem;
    }
}

/* ===== LEGACY TASK ITEMS (keeping for backward compatibility) ===== */
.overview-task-item {
    background: var(--bg-surface);
    padding: 16px 18px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.overview-task-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--border-subtle);
    transition: all 0.25s ease;
}

.overview-task-item.priority-high::before {
    background: linear-gradient(180deg, var(--danger) 0%, rgba(239, 68, 68, 0.7) 100%);
}

.overview-task-item.priority-medium::before {
    background: linear-gradient(180deg, var(--warning) 0%, rgba(245, 158, 11, 0.7) 100%);
}

.overview-task-item.priority-low::before {
    background: linear-gradient(180deg, var(--success) 0%, rgba(34, 197, 94, 0.7) 100%);
}

.overview-task-item:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.overview-task-item:hover::before {
    width: 6px;
}

body.dark-mode .overview-task-item {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

body.dark-mode .overview-task-item:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.overview-task-checkbox {
    width: 24px;
    height: 24px;
    border: 2.5px solid var(--border-medium);
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--bg-body);
}

.overview-task-item.priority-high .overview-task-checkbox {
    border-color: var(--danger);
}

.overview-task-item.priority-medium .overview-task-checkbox {
    border-color: var(--warning);
}

.overview-task-item.priority-low .overview-task-checkbox {
    border-color: var(--success);
}

.overview-task-checkbox:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: scale(1.1);
}

.overview-task-checkbox i {
    color: var(--accent);
    font-size: 13px;
}

.overview-task-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.overview-task-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-main);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.overview-task-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.overview-task-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.overview-task-meta i {
    font-size: 0.7rem;
    opacity: 0.8;
}

/* Priority chip styling - Apple design */
.overview-task-meta .priority-chip {
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.overview-task-meta .priority-chip.high {
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger);
}

.overview-task-meta .priority-chip.medium {
    background: rgba(245, 158, 11, 0.12);
    color: var(--warning);
}

.overview-task-meta .priority-chip.low {
    background: rgba(34, 197, 94, 0.12);
    color: var(--success);
}

/* Due chip styling - Apple design */
.overview-task-meta .due-chip {
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.7rem;
    background: rgba(128, 128, 128, 0.12);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.overview-task-meta .due-chip::before {
    content: '\f017';
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    font-size: 0.65rem;
}

/* Priority badge styling - legacy */
.overview-task-meta span:first-child {
    padding: 3px 8px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: capitalize;
}

.overview-task-item.priority-high .overview-task-meta span:first-child {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.overview-task-item.priority-medium .overview-task-meta span:first-child {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.overview-task-item.priority-low .overview-task-meta span:first-child {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
}

/* ===== EVENT ITEMS - Apple-like Design ===== */
.overview-event-item {
    background: var(--bg-surface);
    padding: 0;
    border-radius: 14px;
    display: flex;
    gap: 0;
    align-items: stretch;
    border: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.overview-event-item:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

body.dark-mode .overview-event-item {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

body.dark-mode .overview-event-item:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.overview-event-date {
    background: linear-gradient(135deg, var(--accent) 0%, rgba(10, 132, 255, 0.85) 100%);
    color: white;
    padding: 18px 16px;
    text-align: center;
    min-width: 68px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.overview-event-date::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
    pointer-events: none;
}

.overview-event-day {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

.overview-event-month {
    font-size: 0.65rem;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0.95;
    letter-spacing: 0.08em;
    margin-top: 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

.overview-event-content {
    flex: 1;
    min-width: 0;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}

.overview-event-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-main);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.overview-event-time {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.overview-event-time::before {
    content: '';
    width: 4px;
    height: 4px;
    background: var(--text-muted);
    border-radius: 50%;
    opacity: 0.5;
}

/* Empty state styling */
.overview-tasks p,
.overview-events p {
    padding: 30px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    border: 1px dashed var(--border-subtle);
}

/* ===================================
   LINK LOBBY - Apple-style Design
   =================================== */
.link-lobby-section {
    margin-top: 24px;
}

.link-lobby-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Empty State */
.link-lobby-empty {
    text-align: center;
    padding: 48px 24px;
    background: var(--bg-surface);
    border: 2px dashed var(--border-subtle);
    border-radius: var(--radius-lg);
}

.link-lobby-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: var(--accent-soft);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 24px;
}

.link-lobby-empty h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 8px 0;
}

.link-lobby-empty p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0 0 20px 0;
}

/* Link Group Card */
.link-group {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: visible; /* Allow menu to overflow */
    transition: all 0.2s ease;
    position: relative;
}

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

.link-group.dragging {
    opacity: 0.5;
    transform: scale(0.98);
}

.link-group.drag-over {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

/* Group Header */
.link-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--bg-surface-soft);
    border-bottom: 1px solid var(--border-subtle);
    cursor: default;
}

.link-group-drag-handle {
    cursor: grab;
    color: var(--text-muted);
    padding: 4px;
    border-radius: 4px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
}

.link-group-drag-handle:hover {
    color: var(--text-main);
    background: var(--bg-body);
}

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

.link-group-title {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.link-group-title .group-count {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-body);
    padding: 2px 8px;
    border-radius: 99px;
}

.link-group-title .auto-domain-badge {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 3px 8px;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.link-group-title .group-private-badge {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(128, 128, 128, 0.1);
    padding: 3px 8px;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.link-group-title .group-private-badge i {
    font-size: 0.6rem;
}

.link-group-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.link-group-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    font-size: 13px;
}

.link-group-btn:hover {
    background: var(--bg-body);
    color: var(--text-main);
}

.link-group-btn.add-link-btn {
    color: var(--accent);
}

.link-group-btn.add-link-btn:hover {
    background: var(--accent-soft);
}

/* Group Menu Dropdown */
.link-group-menu {
    position: relative;
    z-index: 10;
}

.link-group-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    min-width: 180px;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transition: all 0.15s ease;
    transform-origin: top right;
    pointer-events: none;
}

.link-group-menu-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.link-group-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text-main);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.link-group-menu-item:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

.link-group-menu-item.danger {
    color: var(--danger);
}

.link-group-menu-item.danger:hover {
    background: var(--danger-soft);
    color: var(--danger);
}

.link-group-menu-item i {
    width: 16px;
    text-align: center;
    font-size: 13px;
}

.link-group-menu-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 4px 0;
}

/* Links List */
.link-group-content {
    padding: 8px 12px 12px;
}

.link-group-empty {
    text-align: center;
    padding: 20px 16px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

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

/* Domain Subgroup */
.domain-subgroup {
    background: var(--bg-body);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 8px;
}

.domain-subgroup:last-child {
    margin-bottom: 0;
}

.domain-subgroup-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.02);
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: background 0.15s ease;
}

.domain-subgroup-header:hover {
    background: rgba(0, 0, 0, 0.04);
}

.domain-subgroup-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: contain;
}

.domain-subgroup-title {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.domain-subgroup-count {
    font-size: 0.75rem;
    color: var(--text-light);
    background: var(--bg-surface);
    padding: 2px 8px;
    border-radius: 99px;
}

.domain-subgroup-toggle {
    color: var(--text-muted);
    font-size: 12px;
    transition: transform 0.2s ease;
}

.domain-subgroup.collapsed .domain-subgroup-toggle {
    transform: rotate(-90deg);
}

.domain-subgroup-content {
    padding: 8px;
}

.domain-subgroup.collapsed .domain-subgroup-content {
    display: none;
}

/* Individual Link Item - Collapsible tile design */
.link-item {
    display: flex;
    flex-direction: column;
    background: transparent;
    border-radius: var(--radius-md);
    transition: background 0.15s ease;
    overflow: hidden;
}

.link-item:hover {
    background: var(--bg-body);
}

/* Collapsed state - the always-visible row */
.link-item-collapsed {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    cursor: pointer;
    flex: 1;
    min-width: 0;
    transition: background 0.15s ease;
    border-radius: var(--radius-md);
}

.link-item-collapsed:hover {
    background: rgba(var(--accent-rgb), 0.08);
}

.link-item-collapsed:active {
    background: rgba(var(--accent-rgb), 0.12);
}

/* Collapsed row layout: favicon + name + expand button */
.link-item > .link-item-collapsed {
    flex: 1;
}

/* Link item row wrapper */
.link-item {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

/* Link item drag handle */
.link-item-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 28px;
    cursor: grab;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
    margin-left: 4px;
}

.link-item:hover .link-item-drag-handle {
    opacity: 1;
}

.link-item-drag-handle:hover {
    color: var(--text-main);
}

.link-item-drag-handle:active {
    cursor: grabbing;
    color: var(--accent-color);
}

/* Link item dragging state */
.link-item.dragging {
    opacity: 0.5;
    background: var(--bg-component);
}

/* Link item drag-over state */
.link-item.drag-over {
    border-top: 2px solid var(--accent-color);
    margin-top: -2px;
}

.link-name {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.link-favorite-indicator {
    color: #E8A500;
    font-size: 11px;
    margin-left: 4px;
    flex-shrink: 0;
}

/* Collapsed state star button - clickable favorite toggle */
.link-collapsed-star {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--text-light);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    font-size: 12px;
    flex-shrink: 0;
    opacity: 0.4;
}

.link-item:hover .link-collapsed-star {
    opacity: 1;
}

.link-collapsed-star:hover {
    color: #E8A500;
    background: rgba(232, 165, 0, 0.1);
}

.link-collapsed-star.active {
    color: #E8A500;
    opacity: 1;
}

.link-collapsed-star.active:hover {
    color: #cc9000;
}

/* Expand/collapse toggle button */
.link-expand-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 11px;
    flex-shrink: 0;
    margin-right: 4px;
}

.link-expand-btn:hover {
    background: var(--bg-body);
    color: var(--text-main);
}

.link-expand-btn i {
    transition: transform 0.2s ease;
}

.link-item.expanded .link-expand-btn i {
    transform: rotate(180deg);
}

/* Expanded details section - hidden by default */
.link-item-expanded {
    display: none;
    width: 100%;
    padding: 0 10px 10px 10px;
    animation: linkExpandIn 0.2s ease;
}

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

.link-item.expanded .link-item-expanded {
    display: block;
}

.link-expanded-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-body);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}

.link-expanded-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.link-favicon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: contain;
    flex-shrink: 0;
}

.link-favicon-fallback {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
}

.link-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.link-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    cursor: text;
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.link-label:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Inline edit input for link name - compact size */
.link-label-input {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-main);
    line-height: 1.3;
    padding: 2px 6px;
    margin: -2px -4px;
    border: none;
    border-bottom: 1.5px solid var(--accent);
    border-radius: 2px;
    background: transparent;
    outline: none;
    width: auto;
    min-width: 60px;
    max-width: 160px;
}

.link-domain {
    font-size: 0.7rem;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    padding-left: 4px;
}

.link-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Star Button - Minimal, icon-only */
.link-star-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
    font-size: 13px;
    padding: 0;
}

.link-star-btn:hover {
    color: #E8A500;
}

.link-star-btn.active {
    color: #E8A500;
}

/* Use outline star for inactive, solid for active */
.link-star-btn .fa-star {
    font-weight: 400;
}

.link-star-btn.active .fa-star {
    font-weight: 900;
}

/* Open Button - Minimal outline style */
.link-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--border-subtle);
    border-radius: 5px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
}

.link-open-btn:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.link-open-btn i {
    font-size: 9px;
    opacity: 0.7;
}

/* Delete Button - Minimal, appears on hover */
.link-delete-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    font-size: 13px;
    padding: 0;
    opacity: 0;
}

.link-item:hover .link-delete-btn {
    opacity: 1;
}

.link-delete-btn:hover {
    color: var(--danger);
    background: var(--danger-soft);
}

/* Link Preview in Modal */
.link-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-body);
    border-radius: var(--radius-md);
    margin-top: 8px;
}

.link-favicon-preview {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: contain;
}

/* Small button variant */
.btn-sm {
    padding: 8px 14px;
    font-size: 0.85rem;
}

/* Checkbox label styling */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 500;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}

.form-hint {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 6px;
    margin-left: 28px;
}

/* Modal small variant */
.modal-sm {
    max-width: 420px;
}

/* Dark mode adjustments for Link Lobby */
body.dark-mode .link-group {
    background: var(--bg-surface);
    border-color: var(--border-medium);
}

body.dark-mode .link-group-header {
    background: rgba(255, 255, 255, 0.03);
}

body.dark-mode .link-group-drag-handle:hover {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .link-group-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .link-group-menu-dropdown {
    background: var(--bg-surface);
    border-color: var(--border-medium);
}

body.dark-mode .link-group-menu-item:hover {
    background: rgba(10, 132, 255, 0.15);
}

body.dark-mode .domain-subgroup {
    background: rgba(255, 255, 255, 0.03);
}

body.dark-mode .domain-subgroup-header:hover {
    background: rgba(255, 255, 255, 0.06);
}

body.dark-mode .link-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .link-item.favorite {
    background: transparent;
}

body.dark-mode .link-item.favorite:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .link-label:hover {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .link-label-input {
    background: var(--bg-body);
    border-color: var(--accent);
}

body.dark-mode .link-group-menu-dropdown {
    background: var(--bg-surface);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    border-color: var(--border-medium);
}

body.dark-mode .link-lobby-empty {
    background: rgba(255, 255, 255, 0.02);
    border-color: var(--border-medium);
}

body.dark-mode .activity-item {
    background: rgba(255, 255, 255, 0.03);
}

body.dark-mode .activity-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Link Lobby Mobile Responsive */
@media (max-width: 768px) {
    .link-lobby-section {
        margin: 0;
        padding: 16px;
    }
    
    .link-group-header {
        padding: 14px 16px;
    }
    
    .link-group-title {
        font-size: 0.95rem;
    }
    
    .link-group-content {
        padding: 8px;
    }
    
    .link-item-collapsed {
        padding: 10px 8px;
    }
    
    .link-name {
        font-size: 0.85rem;
    }
    
    .link-label {
        font-size: 0.85rem;
    }
    
    .link-expand-btn {
        width: 32px;
        height: 32px;
    }
    
    .link-expanded-content {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .link-actions {
        justify-content: flex-end;
    }
    
    .link-open-btn {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    .link-group-menu-dropdown {
        right: -8px;
    }
}

@media (max-width: 480px) {
    .link-lobby-empty {
        padding: 32px 16px;
    }
    
    .link-lobby-empty-icon {
        width: 56px;
        height: 56px;
        font-size: 20px;
    }
    
    .link-expanded-info .link-domain {
        display: none;
    }
    
    .link-group-actions {
        gap: 4px;
    }
    
    .link-open-btn span {
        display: none;
    }
}

@media (max-width: 768px) {
    .profile-preview {
        flex-direction: column;
        text-align: center;
    }
    
    .avatar-color-picker {
        grid-template-columns: repeat(5, 1fr);
    }
    
    .color-option {
        width: 50px;
        height: 50px;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .form-actions button {
        width: 100%;
        justify-content: center;
    }
    
    .overview-stats {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   TOAST NOTIFICATIONS - UX Polish: Highest z-index
   =================================== */
#toastContainer {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
}

.toast {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    animation: slideInRight 0.3s ease-out;
    border-left: 4px solid;
}

.toast.success {
    border-left-color: #107C10;
}

.toast.error {
    border-left-color: #D13438;
}

.toast.warning {
    border-left-color: #F59E0B;
}

.toast.info {
    border-left-color: #0078D4;
}

.toast-icon {
    font-size: 24px;
    flex-shrink: 0;
}

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

.toast-title {
    font-weight: 600;
    color: #323130;
    font-size: 14px;
}

.toast-message {
    font-size: 13px;
    color: #605E5C;
}

.toast-close {
    background: none;
    border: none;
    font-size: 18px;
    color: #8A8886;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.toast-close:hover {
    background-color: #F3F4F6;
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

.toast.closing {
    animation: slideOutRight 0.3s ease-in;
}

@media (max-width: 768px) {
    #toastContainer {
        right: 10px;
        left: 10px;
        bottom: 10px;
        max-width: none;
    }
    
    .toast {
        min-width: 0;
    }
}

/* ===================================
   CUSTOM TOOLTIPS (Reusable)
   =================================== */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--bg-surface);
    color: var(--text-main);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.15s ease;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
}

[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Tooltip below variant */
[data-tooltip-pos="bottom"]::after {
    bottom: auto;
    top: calc(100% + 6px);
}

/* ===================================
   DELETE CONFIRM POPUP
   =================================== */
.delete-confirm-popup {
    position: fixed;
    z-index: 10000;
    animation: popupFadeIn 0.15s ease;
}

.delete-popup-content {
    background: var(--bg-surface);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    min-width: 200px;
}

.delete-popup-content p {
    margin: 0 0 14px 0;
    font-size: 14px;
    color: var(--text-main);
}

.delete-popup-content strong {
    color: var(--text-main);
}

.delete-popup-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.delete-popup-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
}

.delete-popup-btn.cancel {
    background: var(--bg-surface-soft);
    color: var(--text-main);
}

.delete-popup-btn.cancel:hover {
    background: var(--bg-main);
}

.delete-popup-btn.confirm {
    background: #ff3b30;
    color: white;
}

.delete-popup-btn.confirm:hover {
    background: #e0352b;
}

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

/* ===================================
   ACCESSIBILITY: REDUCED MOTION
   =================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    
    /* Keep essential layout transitions but make them instant */
    .content-section.active {
        animation: none;
        opacity: 1;
        transform: none;
    }
    
    .message {
        animation: none;
    }
    
    /* Remove scale transforms for activity items */
    .activity-item:hover {
        transform: none;
    }
}

/* ===================================
   UX POLISH: PRIVATE SPREADSHEET TAG
   Apple-style pill badge for private spreadsheets
   =================================== */
.spreadsheet-card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding-right: 36px; /* Make space for the 3-dot menu button */
}

.spreadsheet-private-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(142, 142, 147, 0.12);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 100px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    position: absolute;
    bottom: 32px;
    right: 20px;
    z-index: 2;
}

.spreadsheet-private-tag i {
    font-size: 9px;
}

body.dark-mode .spreadsheet-private-tag {
    background: rgba(142, 142, 147, 0.2);
    color: var(--text-light);
}

/* ===================================
   UX POLISH: Z-INDEX HIERARCHY FIX
   Global layering system - highest priority elements
   =================================== */

/* Z-Index Scale (for reference):
   - Base content: 1-10
   - Sticky headers: 100
   - Dropdowns/popovers: 5000
   - Modals: 9000
   - Notifications/Settings dropdowns: 10000
   - Toast notifications: 99999
*/

/* Settings Dropdown - Highest priority popover */
.settings-dropdown {
    z-index: 10000 !important;
    background: var(--bg-surface) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

body.dark-mode .settings-dropdown {
    background: var(--bg-surface) !important;
    border-color: var(--border-medium);
}

/* Notifications Dropdown - Highest priority popover */
.notifications-dropdown {
    z-index: 10000 !important;
    background: var(--bg-surface) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

body.dark-mode .notifications-dropdown {
    background: var(--bg-surface) !important;
    border-color: var(--border-medium);
}

/* Dark mode: Search dropdown */
body.dark-mode .search-results {
    background: var(--dark-card-bg);
    border-color: var(--dark-border);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .search-result-item:hover,
body.dark-mode .search-result-item.active {
    background: rgba(0, 122, 255, 0.15);
}

body.dark-mode .search-result-item.active {
    background: var(--accent);
}

body.dark-mode .search-result-icon {
    background: rgba(0, 122, 255, 0.15);
}

body.dark-mode .search-result-hint {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .search-result-tag {
    background: rgba(100, 160, 255, 0.2);
    color: #6fa8ff;
}

body.dark-mode .search-result-item.active .search-result-tag {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

body.dark-mode .search-result-command .command-icon {
    background: linear-gradient(135deg, rgba(100, 160, 255, 0.2), rgba(138, 136, 255, 0.2));
}

/* Ensure dropdowns appear above spreadsheet panel header */
.top-bar {
    position: relative;
    z-index: 500;
}

/* Icon buttons in top bar should not change z-index on hover */
.top-bar .icon-btn {
    position: relative;
    z-index: 1;
}

.top-bar .icon-btn:hover {
    z-index: 1; /* Prevent z-index change on hover */
}

/* ===================================
   UX POLISH: SETTINGS PAGE WIDTH & LAYOUT
   Wider, more spacious settings layout
   =================================== */
.settings-container {
    max-width: 1000px;
    margin: 0;
    padding: 0;
}

#settings-section {
    padding: 30px 50px;
    overflow-x: hidden;
    overflow-y: auto;
}

#settings-section .section-header {
    max-width: 1000px;
    margin: 0 0 30px 0;
    padding: 0;
}

/* Profile Picture Card - Make it consistent with other cards */
#settings-profile-section {
    max-width: 1000px;
    margin: 0 0 24px 0;
}

.settings-card {
    margin-bottom: 24px;
    overflow: visible;
}

.settings-card-body {
    padding: 32px 40px;
    overflow: visible;
}

.settings-card-header {
    padding: 28px 40px;
}

/* Form sections spacing improvement */
.form-section {
    padding-bottom: 32px;
    margin-bottom: 32px;
}

.form-group {
    margin-bottom: 24px;
}

/* ===================================
   UX POLISH: AVATAR UPLOAD UI REDESIGN
   Move upload button below color picker
   =================================== */

/* Hide the separate avatar settings card */
#settings-profile-section {
    display: none !important;
}

/* Style for avatar upload button below color picker */
.avatar-upload-inline {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-subtle);
}

.avatar-upload-inline .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: 10px;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.avatar-upload-inline .btn-secondary:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.avatar-upload-inline .btn-secondary i {
    font-size: 14px;
}

.avatar-upload-hint {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-muted);
}

/* ===================================
   UX POLISH: GLOBAL OVERFLOW & CLIPPING FIX
   Ensure no elements get cut off
   =================================== */

/* Fix content sections overflow - must scroll internally for consistent height */
.content-section {
    overflow: hidden; /* Default hidden, active state handles scrolling */
}

.content-section.active {
    overflow-x: hidden;
    overflow-y: auto;
}

/* Fix spreadsheet panel overflow for dropdowns */
.spreadsheet-panel {
    overflow: visible;
}

.spreadsheet-panel-header {
    overflow: visible;
    position: relative;
    z-index: 100;
}

/* Note: Panel body overflow handled in main styles */

.spreadsheet-table-area {
    overflow-x: auto;
    overflow-y: auto;
}

/* Modal overflow handling - let individual elements control their overflow */
.modal {
    overflow: hidden;
}

/* Modal body scrolling is handled in base styles above */

/* Fix dropdown positioning in table cells */
.spreadsheet-table td {
    overflow: visible;
}

/* Avatar color picker overflow fix */
.avatar-color-picker {
    overflow: visible;
}

/* Form group overflow for dropdowns */
.form-group {
    overflow: visible;
}

/* ===================================
   UX POLISH: RESPONSIVE DROPDOWN REPOSITIONING
   Ensure dropdowns don't overflow viewport
   =================================== */
@media (max-width: 768px) {
    .settings-dropdown,
    .notifications-dropdown {
        position: fixed !important;
        top: 60px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        max-width: none !important;
    }
    
    .notifications-dropdown {
        max-height: calc(100vh - 80px);
    }
    
    /* Settings container on mobile */
    .settings-container {
        max-width: 100%;
        padding: 0 16px;
    }
    
    #settings-section {
        padding: 20px 10px;
    }
    
    .settings-card-body {
        padding: 20px;
    }
    
    .settings-card-header {
        padding: 20px;
    }
}

/* ===================================
   UX POLISH: TOOLTIP CLIPPING FIX
   Prevent tooltips from being cut off
   =================================== */
[data-tooltip]::after {
    z-index: 99999;
    pointer-events: none;
}

/* Remove tooltips from elements that clip (spreadsheet panel buttons) */
.spreadsheet-panel [data-tooltip]::after {
    display: none;
}

/* ===================================
   UX POLISH: DARK MODE POPOVER FIXES
   Solid backgrounds instead of semi-transparent
   =================================== */
body.dark-mode .settings-dropdown,
body.dark-mode .notifications-dropdown {
    background: #2c2c2e !important;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

body.dark-mode .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .notification-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .notification-item.unread {
    background: rgba(10, 132, 255, 0.1);
}

/* ===================================
   DARK MODE: COMPREHENSIVE FIXES
   Solid opaque backgrounds for all dropdowns and cards
   =================================== */

/* Search Results Dropdown - Solid Dark Background */
body.dark-mode .search-results {
    background: #2c2c2e !important;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4);
}

body.dark-mode .search-results::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

body.dark-mode .search-results-section {
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .search-section-title {
    color: #8e8e93;
}

body.dark-mode .search-result-item {
    color: #f5f5f7;
}

body.dark-mode .search-result-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .search-result-item.active {
    background: var(--accent);
    color: white;
}

body.dark-mode .search-result-title {
    color: #f5f5f7;
}

body.dark-mode .search-result-meta {
    color: #8e8e93;
}

/* Notifications Dropdown - Solid Dark Background */
body.dark-mode .notifications-dropdown {
    background: #2c2c2e !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4);
}

body.dark-mode .notifications-header {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .notifications-header h3 {
    color: #f5f5f7;
}

body.dark-mode .filter-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f5f5f7;
}

body.dark-mode .filter-btn:hover {
    background: rgba(10, 132, 255, 0.15);
    border-color: var(--accent);
    color: var(--accent);
}

body.dark-mode .filter-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

body.dark-mode .mark-read-btn {
    color: var(--accent);
}

body.dark-mode .mark-read-btn:hover {
    background: rgba(10, 132, 255, 0.15);
}

body.dark-mode .notifications-list {
    background: transparent;
}

body.dark-mode .notification-item {
    background: transparent;
    color: #f5f5f7;
}

body.dark-mode .notification-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

body.dark-mode .notification-item.unread {
    background: rgba(10, 132, 255, 0.12);
    border-left-color: var(--accent);
}

body.dark-mode .notification-content h4 {
    color: #f5f5f7;
}

body.dark-mode .notification-content p {
    color: #8e8e93;
}

body.dark-mode .notification-time {
    color: #636366;
}

/* Team Member Cards - Full Dark Mode Support */
body.dark-mode .team-member-card {
    background: #2c2c2e;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .team-member-card:hover {
    background: #3a3a3c;
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

body.dark-mode .team-member-card.owner {
    background: #2c2c2e;
    border-color: rgba(255, 215, 0, 0.5);
}

body.dark-mode .team-member-card.owner:hover {
    border-color: rgba(255, 215, 0, 0.7);
}

body.dark-mode .member-name {
    color: #f5f5f7;
}

body.dark-mode .member-email {
    color: #8e8e93;
}

body.dark-mode .member-role {
    background: rgba(255, 255, 255, 0.08);
    color: #f5f5f7;
}

body.dark-mode .member-detail-item {
    color: #8e8e93;
}

body.dark-mode .member-detail-item i {
    color: #636366;
}

body.dark-mode .member-actions .btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f5f5f7;
}

body.dark-mode .member-actions .btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .member-actions .btn-danger {
    background: rgba(255, 69, 58, 0.15);
    border-color: rgba(255, 69, 58, 0.3);
    color: #ff453a;
}

body.dark-mode .member-actions .btn-danger:hover {
    background: rgba(255, 69, 58, 0.25);
    border-color: rgba(255, 69, 58, 0.5);
}

/* Settings Toggle Labels - Fix White Background When Selected */
body.dark-mode .toggle-label {
    background: #2c2c2e;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .toggle-label:hover {
    background: #3a3a3c;
    border-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .toggle-label-text {
    color: #f5f5f7;
}

body.dark-mode .toggle-label-text small {
    color: #8e8e93;
}

body.dark-mode .toggle-slider {
    background: #39393d;
}

body.dark-mode input:checked + .toggle-slider {
    background: #34c759;
}

body.dark-mode .toggle-slider::before {
    background: #f5f5f7;
}

body.dark-mode .toggle-label:hover .toggle-slider {
    background: #48484a;
}

body.dark-mode .toggle-label:hover input:checked + .toggle-slider {
    background: #30b855;
}

/* Settings Cards - Ensure Solid Background */
body.dark-mode .settings-card {
    background: #2c2c2e !important;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .settings-card-header {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .settings-card-header h2 {
    color: #f5f5f7;
}

body.dark-mode .settings-card-header p {
    color: #8e8e93;
}

body.dark-mode .settings-card-body {
    background: transparent;
}

/* Settings Dropdown Menu */
body.dark-mode .settings-dropdown {
    background: #2c2c2e !important;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

body.dark-mode .dropdown-item {
    color: #f5f5f7;
}

body.dark-mode .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .dropdown-item i {
    color: #8e8e93;
}

/* Notification Preferences Sections */
body.dark-mode .notification-prefs-toggles .toggle-label {
    background: #2c2c2e;
    border-color: transparent;
}

body.dark-mode .notification-prefs-toggles .toggle-label:hover {
    background: #3a3a3c;
}

/* Modal Dark Mode Styles */
body.dark-mode .modal-content {
    background: #2c2c2e;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .modal-header {
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .modal-header h2 {
    color: #f5f5f7;
}

body.dark-mode .modal-footer {
    background: #2c2c2e;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .modal-actions-full {
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .visibility-option {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .visibility-option:hover {
    border-color: var(--accent);
}

body.dark-mode .visibility-option.active {
    background: rgba(10, 132, 255, 0.15);
    border-color: var(--accent);
}

body.dark-mode .visibility-icon {
    background: rgba(255, 255, 255, 0.08);
    color: #8e8e93;
}

body.dark-mode .visibility-option.active .visibility-icon {
    background: var(--accent);
    color: white;
}

body.dark-mode .visibility-title {
    color: #f5f5f7;
}

body.dark-mode .visibility-desc {
    color: #8e8e93;
}

body.dark-mode .icon-option {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.1);
    color: #8e8e93;
}

body.dark-mode .icon-option:hover {
    border-color: var(--accent);
    color: var(--accent);
}

body.dark-mode .icon-option.active {
    border-color: var(--accent);
    background: rgba(10, 132, 255, 0.15);
    color: var(--accent);
}

/* Dark Mode: Table Enhancements */
body.dark-mode .spreadsheet-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

body.dark-mode .spreadsheet-table tbody tr:hover {
    background: rgba(10, 132, 255, 0.1);
}

body.dark-mode .spreadsheet-table tbody tr.selected {
    background: rgba(10, 132, 255, 0.15);
}

/* Dark mode empty state CTA */
body.dark-mode .empty-state-icon-wrapper {
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.2) 0%, rgba(10, 132, 255, 0.08) 100%);
}

body.dark-mode .empty-state-icon-wrapper::before {
    border-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .empty-state-cta {
    background: linear-gradient(135deg, #0A84FF 0%, #0066CC 100%);
    box-shadow: 0 4px 16px rgba(10, 132, 255, 0.4);
}

body.dark-mode .empty-state-cta:hover {
    box-shadow: 0 8px 24px rgba(10, 132, 255, 0.5);
}

body.dark-mode .cell-editable:hover::after {
    border-color: var(--accent);
}

body.dark-mode .assignee-cell-inline:hover {
    background: rgba(10, 132, 255, 0.15);
}

body.dark-mode .column-toggle-sidebar {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .sidebar-header {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

body.dark-mode .column-toggle-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .column-toggle-item.active {
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.15) 0%, rgba(102, 126, 234, 0.1) 100%);
}

body.dark-mode .column-toggle-item.locked:hover {
    background: rgba(255, 255, 255, 0.03);
}

body.dark-mode .column-icon {
    color: rgba(255, 255, 255, 0.5);
}

body.dark-mode .column-toggle-item.active .column-icon {
    color: #0A84FF;
}

body.dark-mode .column-toggle-label {
    color: #f5f5f7;
}

body.dark-mode .column-menu-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .column-drag-handle:hover {
    background: rgba(10, 132, 255, 0.2);
    color: #0A84FF;
}

/* Dark mode toggle switch */
body.dark-mode .column-toggle-switch {
    background: rgba(255, 255, 255, 0.2);
}

body.dark-mode .column-toggle-switch::after {
    background: #2c2c2e;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.dark-mode .column-toggle-item.active .column-toggle-switch {
    background: linear-gradient(135deg, #0A84FF 0%, #667eea 100%);
}

body.dark-mode .column-toggle-item.active .column-toggle-switch::after {
    background: white;
}

/* Dark mode context menu */
body.dark-mode .column-context-menu {
    background: #2c2c2e;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

body.dark-mode .column-context-menu-item {
    color: #f5f5f7;
}

body.dark-mode .column-context-menu-item:hover {
    background: rgba(10, 132, 255, 0.15);
}

body.dark-mode .column-context-menu-item i {
    color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .column-context-menu-item.danger {
    color: #FF453A;
}

body.dark-mode .column-context-menu-item.danger i {
    color: #FF453A;
}

body.dark-mode .column-context-menu-item.danger:hover {
    background: rgba(255, 69, 58, 0.15);
}

body.dark-mode .column-context-menu-divider {
    background: rgba(255, 255, 255, 0.1);
}

/* Dark mode scrollbar for sidebar */
body.dark-mode .sidebar-section::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

body.dark-mode .sidebar-section::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ===================================
   ADD COLUMN BUTTON
   Plus button in sidebar header
   =================================== */
.add-column-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 10px;
    flex-shrink: 0;
}

.add-column-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
    transform: scale(1.05);
}

.add-column-btn:active {
    transform: scale(0.95);
}

/* ===================================
   CUSTOM COLUMN MODAL
   Apple-style create column popup
   =================================== */
.custom-column-modal {
    max-width: 420px;
    width: 94%;
    max-height: 85vh;
    background: white;
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.custom-column-modal .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.custom-column-modal .modal-header h2 {
    font-size: 17px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.custom-column-modal .modal-header h2 i {
    color: var(--accent);
    font-size: 16px;
}

.custom-column-form {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.custom-column-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.custom-column-form label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

.custom-column-form input[type="text"],
.custom-column-form input[type="number"] {
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--bg-surface);
    color: var(--text-main);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}

.custom-column-form input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.1);
}

.field-error {
    font-size: 12px;
    color: #EF4444;
    min-height: 16px;
}

/* Input Type Selector - Segmented Control */
.input-type-selector {
    display: flex;
    gap: 8px;
    background: var(--bg-surface-soft);
    padding: 4px;
    border-radius: 10px;
}

.type-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--text-muted);
}

.type-option i {
    font-size: 16px;
}

.type-option span {
    font-size: 11px;
    font-weight: 500;
}

.type-option:hover {
    color: var(--text-main);
    background: rgba(0, 112, 243, 0.05);
}

.type-option.active {
    background: white;
    color: var(--accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Dropdown Options List */
.dropdown-options-group {
    transition: opacity 0.2s ease, max-height 0.2s ease;
}

.dropdown-options-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.dropdown-option-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dropdown-option-input {
    flex: 1;
    padding: 8px 12px !important;
    font-size: 13px !important;
    min-width: 0;
}

/* Option Color Picker - compact inline color swatches */
.option-color-picker,
.range-color-picker {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.color-swatch {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.color-swatch:hover {
    transform: scale(1.15);
}

.color-swatch.active {
    border-color: var(--text-main);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.remove-option-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 10px;
    flex-shrink: 0;
}

.remove-option-btn:hover {
    background: #FEE2E2;
    border-color: #EF4444;
    color: #EF4444;
}

.add-option-btn,
.add-range-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-surface-soft);
    border: 1px dashed var(--border-subtle);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-option-btn:hover,
.add-range-btn:hover {
    background: rgba(0, 112, 243, 0.05);
    border-color: var(--accent);
    color: var(--accent);
}

.add-option-btn i,
.add-range-btn i {
    font-size: 10px;
}

/* Slider Color Ranges */
.slider-color-ranges {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.color-range-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.color-range-item .range-min-input,
.color-range-item .range-max-input {
    width: 50px;
    padding: 6px 8px !important;
    font-size: 12px !important;
    text-align: center;
}

.range-separator {
    color: var(--text-muted);
    font-size: 12px;
}

.remove-range-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 5px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 9px;
    flex-shrink: 0;
}

.remove-range-btn:hover {
    background: #FEE2E2;
    border-color: #EF4444;
    color: #EF4444;
}

/* Slider Config */
.slider-config-group {
    transition: opacity 0.2s ease;
}

.slider-range-inputs {
    display: flex;
    gap: 12px;
}

.range-input {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.range-input span {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.range-input input {
    padding: 8px 10px !important;
    text-align: center;
}

/* Icon Picker */
.icon-picker {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.icon-option {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface-soft);
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--text-muted);
    font-size: 14px;
}

.icon-option:hover {
    background: rgba(0, 112, 243, 0.08);
    color: var(--accent);
}

.icon-option.active {
    background: rgba(0, 112, 243, 0.1);
    border-color: var(--accent);
    color: var(--accent);
}

/* Modal Actions */
.custom-column-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
    margin-top: auto;
}

/* ===================================
   COLORED DROPDOWN PILL IN TABLE
   Shows custom dropdown values with color
   =================================== */
.custom-dropdown-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    background: var(--bg-surface-soft);
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.15s ease;
}

.custom-dropdown-pill .pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.custom-dropdown-pill:hover {
    filter: brightness(0.95);
}

/* Colored slider value badge */
.custom-slider-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: white;
}

/* Clickable column header for editing */
.column-header-clickable {
    cursor: pointer;
    transition: background 0.15s ease;
}

.column-header-clickable:hover {
    background: rgba(0, 112, 243, 0.08);
}

.column-header-clickable .column-header-icon {
    transition: transform 0.15s ease;
}

.column-header-clickable:hover .column-header-icon {
    transform: scale(1.1);
    color: var(--accent);
}

/* Dropdown option color dot in inline dropdown */
.inline-dropdown-option .option-color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Custom slider with color support */
.custom-slider-cell .custom-slider-input {
    --slider-color: #9CA3AF;
}

.custom-slider-cell .progress-range-slider::-webkit-slider-thumb {
    background: var(--slider-color, #0070F3);
}

.custom-slider-cell .progress-range-slider::-moz-range-thumb {
    background: var(--slider-color, #0070F3);
}

/* Custom slider badge - replaces text value */
.custom-slider-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

/* Dark Mode - Custom Column Modal */
body.dark-mode .custom-column-modal {
    background: #2c2c2e;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

body.dark-mode .custom-column-form input[type="text"],
body.dark-mode .custom-column-form input[type="number"] {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f5f5f7;
}

body.dark-mode .input-type-selector {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .type-option:hover {
    background: rgba(10, 132, 255, 0.1);
}

body.dark-mode .type-option.active {
    background: #3a3a3c;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

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

body.dark-mode .icon-option:hover {
    background: rgba(10, 132, 255, 0.15);
}

body.dark-mode .icon-option.active {
    background: rgba(10, 132, 255, 0.2);
}

body.dark-mode .add-option-btn,
body.dark-mode .add-range-btn {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .color-swatch.active {
    border-color: #f5f5f7;
}

body.dark-mode .add-option-btn:hover {
    background: rgba(10, 132, 255, 0.1);
}

body.dark-mode .remove-option-btn {
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .remove-option-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #EF4444;
}

body.dark-mode .add-column-btn {
    border-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .add-column-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
}

/* ===================================
   CUSTOM COLUMN CELLS
   Dropdown, Slider, Number in table
   =================================== */

/* Custom column dropdown cell */
.custom-dropdown-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--bg-surface-soft);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 13px;
    min-width: 80px;
}

.custom-dropdown-cell:hover {
    background: rgba(0, 112, 243, 0.08);
}

.custom-dropdown-cell .custom-dropdown-icon {
    margin-left: auto;
    font-size: 8px;
    color: var(--text-muted);
}

/* Custom column slider cell */
.custom-slider-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 100px;
}

.custom-slider-cell .progress-range-slider {
    flex: 1;
    height: 5px;
}

.custom-slider-cell .custom-slider-value {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    min-width: 28px;
    text-align: right;
}

/* Custom column number input */
.custom-number-input {
    width: 60px;
    padding: 4px 8px;
    font-size: 13px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-main);
    text-align: center;
    transition: all 0.15s ease;
}

.custom-number-input:hover {
    background: var(--bg-surface-soft);
    border-color: var(--border-subtle);
}

.custom-number-input:focus {
    outline: none;
    background: white;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(0, 112, 243, 0.1);
}

/* Dark mode custom cells */
body.dark-mode .custom-dropdown-cell {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .custom-dropdown-cell:hover {
    background: rgba(10, 132, 255, 0.12);
}

body.dark-mode .custom-number-input:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .custom-number-input:focus {
    background: #1c1c1e;
    border-color: var(--accent);
}

/* ===================================
   CUSTOM TEXT COLUMN
   =================================== */
.custom-text-cell {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    min-height: 28px;
    border-radius: 6px;
    cursor: text;
    transition: background 0.15s ease;
}

.custom-text-cell:hover {
    background: var(--bg-surface-soft);
}

.custom-text-value {
    font-size: 13px;
    color: var(--text-main);
    line-height: 1.4;
    word-break: break-word;
    max-width: 200px;
}

.custom-text-value .text-placeholder {
    color: var(--text-muted);
}

.custom-text-input {
    width: 100%;
    padding: 4px 8px;
    font-size: 13px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    background: white;
    color: var(--text-main);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 112, 243, 0.1);
}

/* ===================================
   CUSTOM LINK COLUMN
   =================================== */
.custom-link-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.custom-link-cell:hover {
    background: var(--bg-surface-soft);
}

.custom-link-cell.empty {
    cursor: pointer;
}

.custom-link-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
    color: white;
    text-decoration: none;
    transition: all 0.2s ease;
    max-width: 150px;
    overflow: hidden;
}

.custom-link-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.custom-link-pill i {
    font-size: 10px;
    opacity: 0.9;
}

.custom-link-pill span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.link-edit-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: var(--bg-surface-soft);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.custom-link-cell:hover .link-edit-btn {
    display: flex;
}

.link-edit-btn:hover {
    background: var(--accent);
    color: white;
}

.link-placeholder {
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 8px;
}

.link-placeholder:hover {
    color: var(--accent);
}

/* Link input popup */
.link-input-popup {
    position: absolute;
    z-index: 1000;
    background: white;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    min-width: 280px;
}

.link-input-popup input {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.15s ease;
}

.link-input-popup input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(0, 112, 243, 0.1);
}

.link-input-popup .link-input-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.link-input-popup button {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.link-input-popup .link-cancel-btn {
    background: var(--bg-surface-soft);
    color: var(--text-muted);
}

.link-input-popup .link-save-btn {
    background: var(--accent);
    color: white;
}

.link-input-popup .link-save-btn:hover {
    background: #0062d6;
}

/* ===================================
   IMPROVED DRAG INDICATOR FOR COLUMNS
   =================================== */
.column-toggle-item.drag-over-top::before,
.column-toggle-item.drag-over-bottom::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, #667eea 100%);
    border-radius: 2px;
    animation: dragIndicatorPulse 1s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(0, 112, 243, 0.5);
}

.column-toggle-item.drag-over-top::before {
    top: -2px;
}

.column-toggle-item.drag-over-bottom::after {
    bottom: -2px;
}

@keyframes dragIndicatorPulse {
    0%, 100% {
        opacity: 1;
        transform: scaleX(1);
    }
    50% {
        opacity: 0.7;
        transform: scaleX(0.98);
    }
}

/* Drag handle improvements */
.column-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    opacity: 0.3;
    cursor: grab;
    transition: all 0.15s ease;
    border-radius: 4px;
    flex-shrink: 0;
}

.column-toggle-item:hover .column-drag-handle {
    opacity: 0.7;
}

.column-drag-handle:hover {
    opacity: 1 !important;
    background: var(--bg-surface-soft);
    color: var(--accent);
}

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

.column-toggle-item.dragging {
    opacity: 0.5;
    background: var(--bg-surface-soft);
    transform: scale(0.98);
}

/* Toggle switch styling */
.column-toggle-switch {
    position: relative;
    width: 36px;
    height: 20px;
    background: #e5e5e5;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.column-toggle-switch::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.column-toggle-item.active .column-toggle-switch {
    background: var(--accent);
}

.column-toggle-item.active .column-toggle-switch::after {
    transform: translateX(16px);
}

/* Dark mode for new column types */
body.dark-mode .custom-text-cell:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .custom-text-input {
    background: #1c1c1e;
    border-color: var(--accent);
    color: #f5f5f7;
}

body.dark-mode .custom-link-cell:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .link-edit-btn {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .link-input-popup {
    background: #2c2c2e;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

body.dark-mode .link-input-popup input {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f5f5f7;
}

body.dark-mode .column-toggle-switch {
    background: #3a3a3c;
}

body.dark-mode .column-drag-handle:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ===================================
   DOCS FEATURE - SHEETS/DOCS TOGGLE
   =================================== */

/* Sheets/Docs Toggle (now inside headers) */
.sheets-docs-toggle {
    display: inline-flex;
    background: var(--bg-surface);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
    border: 1px solid var(--border-subtle);
}

.sheets-docs-toggle .toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sheets-docs-toggle .toggle-btn:hover {
    color: var(--text-main);
    background: var(--bg-body);
}

.sheets-docs-toggle .toggle-btn.active {
    background: var(--accent);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
}

.sheets-docs-toggle .toggle-btn i {
    font-size: 14px;
}

/* Hide Sheets/Docs toggle when a panel is open */
#tasks-section.spreadsheet-open .spreadsheet-header .sheets-docs-toggle,
#tasks-section.spreadsheet-open .docs-header .sheets-docs-toggle,
#tasks-section.doc-open .spreadsheet-header .sheets-docs-toggle,
#tasks-section.doc-open .docs-header .sheets-docs-toggle {
    display: none;
}

/* ===================================
   DOCS HEADER
   =================================== */
.docs-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 28px;
}

.docs-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.docs-header h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.02em;
}

.docs-header h3 i {
    color: var(--accent);
    font-size: 22px;
}

.docs-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

/* Hide docs header when doc panel is open */
#tasks-section.doc-open .docs-header {
    display: none;
}

/* ===================================
   DOC CARDS GRID
   =================================== */
.doc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

/* Hide doc cards when doc panel is open */
#tasks-section.doc-open .doc-cards {
    display: none;
}

.doc-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 140px;
    position: relative;
    overflow: hidden;
}

.doc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    border-color: var(--border-medium);
}

.doc-card.create-new {
    border: 2px dashed var(--border-subtle);
    background: transparent;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    min-height: 140px;
}

.doc-card.create-new:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 112, 243, 0.15);
}

.doc-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.doc-card.create-new .doc-card-icon {
    background: var(--bg-surface-soft);
    border-radius: 50%;
    width: 56px;
    height: 56px;
    color: var(--text-muted);
    border: none;
    transition: all 0.2s ease;
}

.doc-card.create-new:hover .doc-card-icon {
    background: var(--accent);
    color: white;
    transform: scale(1.05);
}

.doc-card-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.doc-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.doc-card-preview {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.doc-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: auto;
}

.doc-card-meta i {
    font-size: 11px;
    opacity: 0.7;
}

/* 3-dot menu button on doc cards */
.doc-card-menu-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0;
    transition: all 0.15s ease;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
}

.doc-card:hover .doc-card-menu-btn {
    opacity: 1;
}

.doc-card-menu-btn:hover {
    background: var(--bg-body);
    color: var(--text-main);
}

/* ===================================
   DOC PANEL - Full Screen Editor
   =================================== */
.doc-panel {
    display: none;
    flex-direction: column;
    height: 100%;
    min-height: calc(100vh - 80px);
    background: var(--bg-main);
    animation: panelFadeIn 0.25s ease;
    overflow: hidden;
}

#tasks-section.doc-open .doc-panel {
    display: flex;
}

/* Doc Panel Header */
.doc-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    gap: 12px;
    flex-shrink: 0;
}

.doc-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.doc-icon-preview {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.doc-title-input {
    flex: 1;
    min-width: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
    background: transparent;
    border: none;
    padding: 6px 0;
    outline: none;
}

.doc-title-input:focus {
    border-bottom: 2px solid var(--accent);
}

.doc-title-input::placeholder {
    color: var(--text-muted);
}

.doc-save-status {
    font-size: 13px;
    color: var(--text-muted);
    padding: 6px 12px;
    background: var(--bg-surface-soft);
    border-radius: 6px;
    white-space: nowrap;
}

.doc-save-status.saving {
    color: var(--accent);
}

.doc-save-status.error {
    color: #EF4444;
}

.doc-save-status.read-only {
    color: var(--text-muted);
    background: transparent;
}

/* Doc Read-Only Badge */
.doc-readonly-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.doc-readonly-badge i {
    font-size: 11px;
}

/* Doc Editor Read-Only State */
.doc-editor.read-only {
    background: var(--bg-surface-soft);
    cursor: default;
}

.doc-editor.read-only:focus {
    outline: none;
    box-shadow: none;
}

/* Doc Read-Only Toggle in Visibility Modal */
.doc-readonly-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--bg-surface-soft);
    border-radius: var(--radius-md);
    margin-top: 12px;
}

.toggle-switch-label {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.toggle-label-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
}

.toggle-label-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Pill Toggle Switch (compact version) */
.pill-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.pill-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.pill-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e5e5ea;
    transition: all 0.3s ease;
    border-radius: 24px;
}

.pill-toggle-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    top: 3px;
    background: white;
    transition: all 0.3s ease;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.pill-toggle input:checked + .pill-toggle-slider {
    background: var(--accent);
}

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

.pill-toggle:hover .pill-toggle-slider {
    background: #d1d1d6;
}

.pill-toggle:hover input:checked + .pill-toggle-slider {
    background: var(--accent-hover);
}

/* Dark mode for pill toggle */
body.dark-mode .pill-toggle-slider {
    background: #48484a;
}

body.dark-mode .pill-toggle-slider::before {
    background: #f5f5f5;
}

body.dark-mode .pill-toggle:hover .pill-toggle-slider {
    background: #5a5a5c;
}

/* ===================================
   DOC TOOLBAR
   =================================== */
.doc-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px 20px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 2px;
}

.toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--border-subtle);
    margin: 0 8px;
}

.toolbar-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 14px;
}

.toolbar-btn:hover {
    background: var(--bg-surface-soft);
    color: var(--text-main);
}

.toolbar-btn.active {
    background: var(--accent-soft);
    color: var(--accent);
}

/* ===================================
   DOC EDITOR
   =================================== */
.doc-panel-body {
    position: relative;
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: var(--bg-main);
}

.doc-editor-container {
    max-width: 800px;
    margin: 0 auto;
    background: var(--bg-surface);
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    min-height: 400px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.doc-editor {
    padding: 32px 40px;
    min-height: 400px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-main);
    outline: none;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.doc-editor:empty:before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    pointer-events: none;
}

/* Editor content styling */
.doc-editor p {
    margin: 0 0 16px 0;
}

.doc-editor p:last-child {
    margin-bottom: 0;
}

/* Heading styles - make them visually distinct */
.doc-editor h1 {
    font-size: 2em !important;
    font-weight: 700 !important;
    margin: 24px 0 16px 0 !important;
    line-height: 1.3 !important;
    color: var(--text-main) !important;
    letter-spacing: -0.02em;
    display: block !important;
}

.doc-editor h2 {
    font-size: 1.5em !important;
    font-weight: 600 !important;
    margin: 20px 0 12px 0 !important;
    line-height: 1.35 !important;
    color: var(--text-main) !important;
    display: block !important;
}

.doc-editor h3 {
    font-size: 1.25em !important;
    font-weight: 600 !important;
    margin: 16px 0 10px 0 !important;
    line-height: 1.4 !important;
    color: var(--text-main) !important;
    display: block !important;
}

.doc-editor h1:first-child,
.doc-editor h2:first-child,
.doc-editor h3:first-child {
    margin-top: 0;
}

.doc-editor ul,
.doc-editor ol {
    margin: 0 0 16px 0;
    padding-left: 24px;
}

.doc-editor li {
    margin-bottom: 4px;
}

.doc-editor a {
    color: var(--accent);
    text-decoration: underline;
}

.doc-editor a:hover {
    text-decoration: none;
}

/* ===================================
   DOC EMPTY STATE
   =================================== */
.doc-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--text-muted);
}

.doc-empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.doc-empty-state h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 8px 0;
}

.doc-empty-state p {
    font-size: 14px;
    margin: 0;
}

/* ===================================
   DOC LINK MODAL (inline prompt)
   =================================== */
.doc-link-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-surface);
    border-radius: 12px;
    padding: 20px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    z-index: 10001;
    border: 1px solid var(--border-subtle);
}

.doc-link-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.doc-link-modal-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
}

.doc-link-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
}

.doc-link-modal-close:hover {
    background: var(--bg-surface-soft);
    color: var(--text-main);
}

.doc-link-modal input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg-body);
    color: var(--text-main);
    margin-bottom: 16px;
    outline: none;
}

.doc-link-modal input:focus {
    border-color: var(--accent);
}

.doc-link-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Link modal overlay */
#linkModalOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10000;
}

/* Doc private badge */
.doc-private-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    padding: 2px 6px;
    background: var(--bg-surface-soft);
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-muted);
}

.doc-private-badge i {
    font-size: 10px;
}

body.dark-mode .doc-private-badge {
    background: rgba(255, 255, 255, 0.1);
}

/* ===================================
   DOC FORMAT DROPDOWN (Heading Selector)
   =================================== */
.doc-format-dropdown-wrapper {
    position: relative;
}

.doc-format-trigger {
    display: flex !important;
    align-items: center;
    gap: 4px;
    padding: 6px 10px !important;
    min-width: 100px;
    justify-content: space-between;
}

#docFormatLabel {
    font-size: 13px;
    font-weight: 500;
}

.doc-format-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 160px;
    padding: 4px;
    z-index: 100;
    display: none;
}

.doc-format-dropdown.visible {
    display: block;
}

.doc-format-option {
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.doc-format-option:hover {
    background: var(--bg-body);
}

.doc-format-option span {
    color: var(--text-primary);
}

body.dark-mode .doc-format-dropdown {
    background: var(--bg-elevated);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

body.dark-mode .doc-format-option:hover {
    background: var(--bg-surface);
}

/* ===================================
   DOC COMMAND POPOVER
   =================================== */
.doc-command-popover {
    position: fixed;
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    min-width: 280px;
    padding: 4px;
    z-index: 10001;
}

body.dark-mode .doc-command-popover {
    background: var(--bg-elevated);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.command-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.command-option:hover {
    background: var(--accent-soft);
}

.command-option i {
    font-size: 16px;
    color: var(--accent);
    width: 20px;
    text-align: center;
}

.command-option-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.command-option-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.command-option-desc {
    font-size: 11px;
    color: var(--text-muted);
}

/* ===================================
   DOC EMOJI POPOVER
   =================================== */
.doc-emoji-popover {
    position: fixed;
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    width: 320px;
    max-height: 360px;
    z-index: 10002;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.dark-mode .doc-emoji-popover {
    background: var(--bg-elevated);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.emoji-popover-header {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.emoji-search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--bg-input);
    font-size: 13px;
    color: var(--text-main);
    outline: none;
    transition: border-color 0.2s ease;
}

.emoji-search-input:focus {
    border-color: var(--accent);
}

.emoji-search-input::placeholder {
    color: var(--text-muted);
}

.emoji-category-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-subtle);
    overflow-x: auto;
    scrollbar-width: none;
}

.emoji-category-tabs::-webkit-scrollbar {
    display: none;
}

.emoji-tab {
    padding: 6px 8px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.emoji-tab:hover {
    background: var(--bg-surface-soft);
    opacity: 0.8;
}

.emoji-tab.active {
    background: var(--accent-soft);
    opacity: 1;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: 10px;
    overflow-y: auto;
    flex: 1;
    max-height: 220px;
}

.emoji-item {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.emoji-item:hover {
    background: var(--accent-soft);
    transform: scale(1.1);
}

.emoji-grid-label {
    grid-column: 1 / -1;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    padding: 8px 4px 4px;
    letter-spacing: 0.5px;
}

.emoji-grid-label:first-child {
    padding-top: 0;
}

/* ===================================
   DOC CHIPS (Task/Sheet References)
   =================================== */
.doc-chip {
    display: inline;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    vertical-align: baseline;
    margin: 0 2px;
    user-select: text;
    white-space: nowrap;
    line-height: 1.4;
}

.doc-chip[data-chip-type="task"] {
    background: rgba(52, 199, 89, 0.12);
    color: #34C759;
    border: 1px solid rgba(52, 199, 89, 0.2);
}

.doc-chip[data-chip-type="sheet"] {
    background: rgba(0, 122, 255, 0.12);
    color: #007AFF;
    border: 1px solid rgba(0, 122, 255, 0.2);
}

.doc-chip[data-chip-type="link"] {
    background: #ffffff;
    color: var(--text-main);
    border: 1px solid rgba(0, 0, 0, 0.08);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 16px;
    display: inline;
    vertical-align: baseline;
}

.doc-chip[data-chip-type="link"] .chip-favicon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 4px;
}

body.dark-mode .doc-chip[data-chip-type="link"] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--text-main);
}

.doc-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.doc-chip[data-chip-type="link"]:hover {
    background: #f8f8f8;
    border-color: rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

body.dark-mode .doc-chip[data-chip-type="link"]:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
}

body.dark-mode .doc-chip[data-chip-type="task"] {
    background: rgba(52, 199, 89, 0.18);
    border-color: rgba(52, 199, 89, 0.3);
}

body.dark-mode .doc-chip[data-chip-type="sheet"] {
    background: rgba(10, 132, 255, 0.18);
    border-color: rgba(10, 132, 255, 0.3);
}

.chip-icon {
    font-size: 11px;
}

.chip-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.chip-status-dot.todo {
    background: #8E8E93;
}

.chip-status-dot.done {
    background: #34C759;
}

.chip-status-dot.in-progress {
    background: #FF9500;
}

.doc-chip.unavailable {
    background: rgba(142, 142, 147, 0.12);
    color: var(--text-muted);
    border-color: var(--border-subtle);
    cursor: not-allowed;
}

/* Chip/Embed selection and delete affordance */
.doc-chip {
    position: relative;
}

.doc-chip:focus,
.doc-chip.selected {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.doc-chip .chip-delete-btn {
    display: none;
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #FF3B30;
    color: white;
    font-size: 10px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.doc-chip:hover .chip-delete-btn {
    display: flex;
}

/* Chip drag-and-drop styles */
.doc-chip[draggable="true"] {
    cursor: grab;
}

.doc-chip[draggable="true"]:active {
    cursor: grabbing;
}

.doc-chip.dragging {
    opacity: 0.4;
    cursor: grabbing;
}

.chip-drop-indicator {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background: var(--accent, #007AFF);
    vertical-align: middle;
    margin: 0 1px;
    border-radius: 1px;
    pointer-events: none;
}

@keyframes chip-drop-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ===================================
   DOC EMBEDS (Sheet Preview - Compact)
   =================================== */
.doc-embed {
    position: relative;
    margin: 16px auto;
    max-width: 420px;
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.doc-embed:focus,
.doc-embed.selected {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.doc-embed .embed-delete-btn {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--danger);
    color: white;
    font-size: 11px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease;
}

.doc-embed .embed-delete-btn:hover {
    transform: scale(1.1);
}

.doc-embed:hover .embed-delete-btn {
    display: flex;
}

.doc-embed-header,
.doc-embed-header-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-body);
    border-bottom: 1px solid var(--border-subtle);
}

.doc-embed-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.doc-embed-title i {
    font-size: 12px;
    color: var(--accent);
}

.doc-embed-open-btn {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-soft);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.doc-embed-open-btn:hover {
    background: var(--accent);
    color: white;
}

.doc-embed-footer {
    display: flex;
    justify-content: center;
    padding: 12px 16px;
    background: var(--bg-body);
    border-top: 1px solid var(--border-subtle);
}

.doc-embed-see-all {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.doc-embed-see-all:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}

.doc-embed-see-all i {
    font-size: 10px;
}

.doc-embed-table-wrapper,
.doc-embed-table-wrapper-compact {
    max-height: 220px;
    overflow: auto;
}

.doc-embed-table,
.doc-embed-table-compact {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.doc-embed-table th,
.doc-embed-table td,
.doc-embed-table-compact th,
.doc-embed-table-compact td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
}

.doc-embed-table th,
.doc-embed-table-compact th {
    background: var(--bg-surface);
    font-weight: 600;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.doc-embed-table td,
.doc-embed-table-compact td {
    color: var(--text-main);
}

.doc-embed-table tr:last-child td,
.doc-embed-table-compact tr:last-child td {
    border-bottom: none;
}

.doc-embed-table tr:hover td,
.doc-embed-table-compact tr:hover td {
    background: var(--bg-body);
}

/* Embed status pills */
.embed-status-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}

.embed-status-todo {
    background: rgba(142, 142, 147, 0.15);
    color: #8e8e93;
}

.embed-status-in-progress {
    background: rgba(0, 122, 255, 0.12);
    color: var(--accent);
}

.embed-status-done {
    background: rgba(52, 199, 89, 0.12);
    color: #34c759;
}

.embed-status-complete {
    background: rgba(52, 199, 89, 0.12);
    color: #34c759;
}

/* Embed priority pills */
.embed-priority-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}

.embed-priority-high {
    background: rgba(255, 59, 48, 0.12);
    color: #ff3b30;
}

.embed-priority-medium {
    background: rgba(255, 149, 0, 0.12);
    color: #ff9500;
}

.embed-priority-low {
    background: rgba(52, 199, 89, 0.12);
    color: #34c759;
}

.embed-priority-none {
    background: transparent;
    color: var(--text-muted);
}

.doc-embed.unavailable {
    padding: 32px 20px;
    text-align: center;
    color: var(--text-muted);
}

.doc-embed.unavailable i {
    font-size: 28px;
    margin-bottom: 10px;
    opacity: 0.4;
}

body.dark-mode .doc-embed {
    background: var(--bg-elevated);
    border-color: var(--border-medium);
}

body.dark-mode .doc-embed-header,
body.dark-mode .doc-embed-header-compact {
    background: var(--bg-surface);
}

/* ===================================
   SHEET PREVIEW DRAWER (from chip click)
   =================================== */
.sheet-preview-drawer {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sheet-preview-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.sheet-preview-content {
    position: relative;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    background: var(--bg-surface);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sheet-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-medium);
    background: var(--bg-body);
}

.sheet-preview-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.sheet-preview-title i {
    color: var(--accent);
}

.sheet-preview-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sheet-preview-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.sheet-preview-open-btn:hover {
    background: var(--accent-hover);
}

.sheet-preview-close-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.sheet-preview-close-btn:hover {
    background: var(--bg-surface-soft);
    color: var(--text-main);
}

.sheet-preview-body {
    flex: 1;
    overflow: auto;
    padding: 0;
}

.sheet-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.sheet-preview-table th,
.sheet-preview-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
}

.sheet-preview-table th {
    background: var(--bg-body);
    font-weight: 600;
    color: var(--text-primary);
    position: sticky;
    top: 0;
    z-index: 1;
}

.sheet-preview-table td {
    color: var(--text-main);
}

.sheet-preview-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

.sheet-preview-row:hover td {
    background: var(--accent-soft);
}

body.dark-mode .sheet-preview-content {
    background: var(--bg-elevated);
}

body.dark-mode .sheet-preview-header {
    background: var(--bg-surface);
}

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

/* ===================================
   DOC MAIN LAYOUT (Editor + Sidebar)
   =================================== */
.doc-main-layout {
    display: flex;
    gap: 20px;
}

.doc-editor-container {
    flex: 1;
    min-width: 0;
}

/* ===================================
   REFERENCE PICKER MODAL
   =================================== */
.reference-picker-search {
    position: relative;
    margin-bottom: 16px;
}

.reference-picker-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 14px;
}

.reference-picker-search input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg-body);
    color: var(--text-primary);
    outline: none;
}

.reference-picker-search input:focus {
    border-color: var(--accent);
}

.reference-picker-list {
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.reference-picker-item {
    padding: 12px;
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.reference-picker-item:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.reference-item-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.reference-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.reference-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 12px;
    margin-right: 8px;
}

.reference-item-icon.task {
    background: rgba(52, 199, 89, 0.12);
    color: #34C759;
}

.reference-item-icon.sheet {
    background: rgba(0, 122, 255, 0.12);
    color: #007AFF;
}

/* ===================================
   TASK CONVERSION MODAL
   =================================== */
.task-conversion-preview {
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 12px;
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 16px;
}

.task-conversion-item {
    padding: 10px;
    background: var(--bg-surface);
    border-radius: 6px;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.task-conversion-item:last-child {
    margin-bottom: 0;
}

.task-conversion-checkbox {
    margin-top: 2px;
}

.task-conversion-input {
    flex: 1;
    border: none;
    background: none;
    font-size: 13px;
    color: var(--text-primary);
    outline: none;
}

/* Task conversion input mode (when no selection) */
.task-conversion-input-mode {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.task-conversion-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.task-conversion-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    min-height: 120px;
}

.task-conversion-textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.task-conversion-parse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
    align-self: flex-start;
}

.task-conversion-parse-btn:hover {
    background: var(--accent-hover);
}

body.dark-mode .task-conversion-textarea {
    background: var(--bg-elevated);
    border-color: var(--border-subtle);
}

.toggle-option {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

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

.toggle-option span {
    font-size: 14px;
    color: var(--text-primary);
}

body.dark-mode .task-conversion-preview {
    background: var(--bg-surface);
}

body.dark-mode .task-conversion-item {
    background: var(--bg-elevated);
}

/* ===================================
   DOCS RESPONSIVE - Mobile
   =================================== */
@media (max-width: 768px) {
    .sheets-docs-toggle {
        width: 100%;
    }
    
    .sheets-docs-toggle .toggle-btn {
        flex: 1;
        justify-content: center;
        padding: 12px 16px;
    }
    
    .doc-cards {
        grid-template-columns: 1fr;
    }
    
    .doc-panel-header {
        padding: 12px 16px;
    }
    
    .doc-toolbar {
        padding: 10px 16px;
    }
    
    .toolbar-divider {
        display: none;
    }
    
    .doc-panel-body {
        padding: 16px;
        padding-bottom: 100px; /* Space for bottom nav */
    }
    
    .doc-editor-container {
        border-radius: 8px;
    }
    
    .doc-editor {
        padding: 20px;
    }
    
    .doc-title-input {
        font-size: 16px;
    }
}

/* ===================================
   DOCS DARK MODE
   =================================== */
body.dark-mode .sheets-docs-toggle {
    background: var(--bg-elevated);
    border-color: var(--border-medium);
}

body.dark-mode .sheets-docs-toggle .toggle-btn:hover {
    background: var(--bg-surface);
}

body.dark-mode .sheets-docs-toggle .toggle-btn.active {
    background: var(--accent);
    color: white;
}

body.dark-mode .doc-card {
    background: #2a2a2c;
    border-color: #3a3a3c;
}

body.dark-mode .doc-card:hover {
    border-color: #4a4a4c;
}

body.dark-mode .doc-panel-header,
body.dark-mode .doc-toolbar {
    background: #2a2a2c;
    border-color: #3a3a3c;
}

body.dark-mode .doc-editor-container {
    background: #2a2a2c;
    border-color: #3a3a3c;
}

body.dark-mode .toolbar-btn:hover {
    background: #3a3a3c;
}

body.dark-mode .doc-link-modal {
    background: #2a2a2c;
    border-color: #3a3a3c;
}

body.dark-mode .doc-link-modal input {
    background: #1c1c1e;
    border-color: #3a3a3c;
}

/* ===================================
   METRICS SECTION - APPLE-INSPIRED REDESIGN
   Clean, minimal, precision-crafted design
   =================================== */

/* Section container with refined spacing */
#metrics-section {
    background: transparent;
}

#metrics-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 32px;
}

#metrics-section .section-header h1 {
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--text-main);
}

#metrics-section .section-subtitle {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 4px;
}

/* Main layout - airy grid with generous spacing */
.metrics-layout {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Glass-morphism card container */
.metrics-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: metricsCardFadeIn 0.4s ease-out forwards;
    opacity: 0;
}

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

.metrics-card:nth-child(1) { animation-delay: 0.05s; }
.metrics-card:nth-child(2) { animation-delay: 0.1s; }
.metrics-card:nth-child(3) { animation-delay: 0.15s; }
.metrics-card:nth-child(4) { animation-delay: 0.2s; }
.metrics-card:nth-child(5) { animation-delay: 0.25s; }

.metrics-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

/* Card header - minimal with thin divider */
.metrics-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.metrics-card-header h3 {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.metrics-card-header h3 i {
    color: #0A84FF;
    font-size: 0.75rem;
    opacity: 0.9;
}

/* Card body */
.metrics-card-body {
    padding-top: 4px;
}

/* Placeholder state - refined empty state */
.metrics-placeholder-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 32px;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
}

.metrics-placeholder-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
    background: var(--accent-soft);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 28px;
}

.metrics-placeholder-state h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 12px 0;
    letter-spacing: -0.02em;
}

.metrics-placeholder-state p {
    color: var(--text-muted);
    max-width: 380px;
    margin: 0 auto;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Hidden utility class for nav item */
.nav-item.hidden {
    display: none !important;
}

/* Responsive behavior */
@media (max-width: 768px) {
    .metrics-layout {
        gap: 20px;
    }
    
    .metrics-card {
        padding: 20px;
        border-radius: 16px;
    }
    
    #metrics-section .section-header h1 {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .metrics-card {
        padding: 16px;
        border-radius: 14px;
    }
    
    .metrics-placeholder-state {
        padding: 48px 20px;
    }
    
    .metrics-placeholder-icon {
        width: 56px;
        height: 56px;
        font-size: 22px;
    }
}

/* Dark mode adjustments for metrics */
body.dark-mode .metrics-card {
    background: rgba(28, 28, 30, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

body.dark-mode .metrics-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

body.dark-mode .metrics-placeholder-state {
    background: rgba(28, 28, 30, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ===================================
   METRICS - SECTION TITLES & STAT CARDS
   Ultra-clean Instagram-inspired components
   =================================== */

/* Section titles - minimal with accent underline */
.metrics-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0 0 16px 0;
    padding: 0;
    border-bottom: none;
}

.metrics-section-title i {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 132, 255, 0.12);
    color: #0A84FF;
    border-radius: 6px;
    font-size: 0.65rem;
}

.metrics-section-title-team {
    margin-top: 8px;
}

.metrics-section-title-team i {
    background: rgba(52, 199, 89, 0.12);
    color: var(--success);
}

/* Section header with visibility toggle */
.metrics-section-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 8px;
    position: relative;
    height: 0;
    overflow: visible;
}

.metrics-section-subheading {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex: 1;
}

/* Section visibility toggle button */
.section-visibility-toggle {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0.5;
    position: absolute;
    right: 0;
    top: -8px;
    z-index: 5;
}

.section-visibility-toggle:hover {
    opacity: 1;
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

.section-visibility-toggle.section-hidden {
    background: rgba(255, 149, 0, 0.1);
    border-color: rgba(255, 149, 0, 0.3);
    color: var(--warning);
    opacity: 0.8;
}

.section-visibility-toggle.section-hidden:hover {
    opacity: 1;
    background: rgba(255, 149, 0, 0.15);
}

/* Side-by-side charts layout */
.metrics-charts-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.metrics-charts-row .metrics-switchable-graph {
    margin-bottom: 0;
}

/* Empty state mini for inline display */
.metrics-empty-state-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: center;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    min-height: 200px;
}

.metrics-empty-state-mini i {
    font-size: 24px;
    opacity: 0.5;
}

/* Stats row - sleek horizontal grid */
.metrics-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* Individual stat card - minimal glass surface */
.metrics-stat-card {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    animation: statCardFadeIn 0.35s ease-out forwards;
    opacity: 0;
}

@keyframes statCardFadeIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.metrics-stats-row .metrics-stat-card:nth-child(1) { animation-delay: 0.08s; }
.metrics-stats-row .metrics-stat-card:nth-child(2) { animation-delay: 0.12s; }
.metrics-stats-row .metrics-stat-card:nth-child(3) { animation-delay: 0.16s; }
.metrics-stats-row .metrics-stat-card:nth-child(4) { animation-delay: 0.2s; }

.metrics-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 112, 243, 0.15);
}

/* Large stat card variant (completion ring) */
.metrics-stat-card-large {
    padding: 24px 28px;
    grid-column: span 1;
}

/* Stat icon - thin, elegant circle */
.metrics-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 15px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.metrics-stat-card:hover .metrics-stat-icon {
    transform: scale(1.05);
}

.metrics-stat-card.success .metrics-stat-icon {
    background: var(--success-soft);
    color: var(--success);
}

.metrics-stat-card.warning .metrics-stat-icon {
    background: var(--warning-soft);
    color: var(--warning);
}

.metrics-stat-card.danger .metrics-stat-icon {
    background: var(--danger-soft);
    color: var(--danger);
}

/* Stat content - clean typography */
.metrics-stat-content {
    flex: 1;
    min-width: 0;
}

.metrics-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-feature-settings: 'tnum' on, 'lnum' on;
}

.metrics-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 3px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.metrics-stat-subtitle {
    font-size: 0.65rem;
    color: var(--text-light);
    margin-top: 4px;
    opacity: 0.7;
}

/* Stat card color variants */
.metrics-stat-card-success .metrics-stat-icon {
    background: rgba(52, 199, 89, 0.12);
    color: #34C759;
}

.metrics-stat-card-warning .metrics-stat-icon {
    background: rgba(255, 159, 10, 0.12);
    color: #FF9F0A;
}

.metrics-stat-card-danger .metrics-stat-icon {
    background: rgba(255, 59, 48, 0.12);
    color: #FF3B30;
}

body.dark-mode .metrics-stat-card-success .metrics-stat-icon {
    background: rgba(48, 209, 88, 0.15);
    color: #30D158;
}

body.dark-mode .metrics-stat-card-warning .metrics-stat-icon {
    background: rgba(255, 214, 10, 0.15);
    color: #FFD60A;
}

body.dark-mode .metrics-stat-card-danger .metrics-stat-icon {
    background: rgba(255, 69, 58, 0.15);
    color: #FF453A;
}

/* ===================================
   METRICS - THIN PROGRESS RING
   Elegant SVG circular progress
   =================================== */
.metrics-progress-ring-container {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.progress-ring {
    transform: rotate(-90deg);
}

.progress-ring-bg {
    stroke: var(--border-subtle);
    fill: none;
    stroke-width: 4;
}

.progress-ring-progress {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-ring-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.85rem;
    font-weight: 700;
    color: #0A84FF;
    letter-spacing: -0.02em;
}

.progress-ring-text .progress-ring-unit {
    font-size: 0.55rem;
    font-weight: 500;
    opacity: 0.7;
    margin-left: 1px;
}

/* ===================================
   HORIZONTAL BAR CHART - CLEAN DESIGN
   Simple, readable, no gradients, no hover animations
   Bars with value 0 show no bar segment
   =================================== */
.bar-chart-clean {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0;
}

.bar-row-clean {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bar-label-clean {
    width: 90px;
    min-width: 90px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.bar-track-clean {
    flex: 1;
    height: 8px;
    background: var(--bg-body);
    border-radius: 4px;
    overflow: hidden;
    min-width: 60px;
}

.bar-fill-clean {
    height: 100%;
    border-radius: 4px;
    /* No gradients - solid color only, set via inline style */
    /* No transitions/animations */
}

.bar-value-clean {
    width: 45px;
    min-width: 45px;
    text-align: right;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-main);
    flex-shrink: 0;
    font-feature-settings: 'tnum' on;
}

/* Dark mode adjustments for clean bar chart */
[data-theme="dark"] .bar-track-clean {
    background: rgba(255, 255, 255, 0.08);
}

/* ===================================
   CHART EMPTY STATE
   Styled circular placeholder for no-data scenarios
   =================================== */
.chart-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    gap: 12px;
    min-height: 100px;
}

.chart-empty-ring {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-empty-ring svg {
    opacity: 0.6;
}

.chart-empty-ring svg circle:first-child {
    animation: emptyRingRotate 20s linear infinite;
    transform-origin: center;
}

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

.chart-empty-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    opacity: 0.5;
    font-size: 1.1rem;
}

.chart-empty-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    text-align: center;
}

/* Dark mode adjustments for empty state */
[data-theme="dark"] .chart-empty-ring svg circle:first-child {
    stroke: var(--border-card);
}

[data-theme="dark"] .chart-empty-ring svg circle:last-child {
    fill: var(--bg-body);
}

/* ===================================
   X-AXIS LABEL VISIBILITY
   Hide labels when needed for clarity
   =================================== */
.trend-bar-label.hidden {
    visibility: hidden;
}

/* ===================================
   METRICS - TREND CHART V2
   Vertical bars with dual-axis and grid
   =================================== */
.metrics-trend-chart-v2 {
    display: flex;
    position: relative;
    height: 140px;
    gap: 0;
}

.trend-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 32px;
    padding: 4px 0;
    flex-shrink: 0;
}

.trend-y-axis-secondary {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 32px;
    padding: 4px 0;
    flex-shrink: 0;
    text-align: right;
}

.y-axis-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
    font-feature-settings: 'tnum' on;
    line-height: 1;
}

.trend-y-axis-secondary .y-axis-label {
    color: #34C759;
}

.trend-chart-area {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.trend-grid-lines {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
    padding: 4px 0;
}

.grid-line {
    height: 1px;
    background: var(--border-subtle);
    opacity: 0.5;
}

.trend-bars-container {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: calc(100% - 24px);
    padding: 4px 8px 0;
    gap: 4px;
}

.trend-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
    max-width: var(--bar-width, 32px);
    height: 100%;
}

.trend-bar-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    flex: 1;
    width: 100%;
    cursor: pointer;
}

.trend-bar-primary {
    flex: 1;
    max-width: 20px;
    min-width: 6px;
    background: linear-gradient(180deg, var(--accent) 0%, rgba(0, 112, 243, 0.6) 100%);
    border-radius: 4px 4px 1px 1px;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    min-height: 3px;
}

.trend-bar-secondary {
    flex: 1;
    max-width: 16px;
    min-width: 4px;
    border-radius: 4px 4px 1px 1px;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    min-height: 2px;
    opacity: 0.85;
}

.trend-bar-wrapper:hover .trend-bar-primary,
.trend-bar-wrapper:hover .trend-bar-secondary {
    opacity: 1;
    filter: brightness(1.1);
}

.trend-bar-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.2px;
    font-weight: 500;
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
}

/* Legacy trend chart */
.metrics-trend-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 100px;
    gap: 6px;
    padding: 8px 0;
}

.metrics-trend-bar-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    gap: 8px;
    min-width: 0;
}

.metrics-trend-bar {
    width: 100%;
    max-width: 32px;
    background: linear-gradient(180deg, var(--accent) 0%, rgba(0, 112, 243, 0.5) 100%);
    border-radius: 6px 6px 2px 2px;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    min-height: 3px;
    margin-top: auto;
    opacity: 0.85;
}

.metrics-trend-bar:hover {
    opacity: 1;
    transform: scaleX(1.1);
}

.metrics-trend-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 500;
}

/* ===================================
   DARK MODE CHART REFINEMENTS
   Ensure proper contrast and visibility
   =================================== */
[data-theme="dark"] .trend-grid-lines .grid-line {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .pie-segment {
    filter: brightness(1.05);
}

/* ===================================
   GRAPH TYPE MENU - Apple-style dropdown
   =================================== */
.graph-menu-container {
    position: relative;
}

.graph-menu-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.graph-menu-btn:hover {
    background: var(--bg-hover);
    color: var(--text-main);
}

.graph-menu-btn i {
    font-size: 0.9rem;
}

.graph-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.96);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
}

.graph-menu-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.graph-menu-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 10px 10px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 6px;
}

.graph-menu-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.graph-menu-option:hover {
    background: var(--bg-hover);
}

.graph-menu-option.active {
    background: var(--accent-soft);
    color: var(--accent);
}

.graph-menu-option i {
    font-size: 0.9rem;
    width: 18px;
    text-align: center;
    opacity: 0.7;
}

.graph-menu-option.active i {
    opacity: 1;
}

/* ===================================
   GRAPH SETTINGS PANEL
   Inline settings for chart customization (edit mode)
   =================================== */
.graph-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.graph-settings-toggle {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    border: none;
    border-radius: 8px;
    color: var(--accent);
    cursor: pointer;
    transition: all 0.2s ease;
}

.graph-settings-toggle:hover {
    background: var(--accent);
    color: white;
}

.graph-settings-toggle i {
    font-size: 0.85rem;
}

/* Settings Panel */
.graph-settings-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    margin-top: 16px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.graph-settings-panel.open {
    max-height: 600px;
    opacity: 1;
}

.graph-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.graph-settings-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-main);
}

.graph-settings-title i {
    color: var(--accent);
    font-size: 0.9rem;
}

.graph-settings-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.graph-settings-close:hover {
    background: var(--bg-hover);
    color: var(--text-main);
}

.graph-settings-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.settings-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-section-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.settings-row {
    display: flex;
    gap: 12px;
}

.settings-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-field label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
}

.settings-input {
    width: 100%;
    padding: 8px 10px;
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-main);
    transition: all 0.2s ease;
    font-family: inherit;
}

.settings-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.settings-input::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

/* Color options */
.color-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.color-option {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.color-option:hover {
    transform: scale(1.15);
}

.color-option.active {
    border-color: var(--text-main);
    box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--text-main);
}

.color-option.active::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Settings footer */
.graph-settings-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    justify-content: flex-end;
}

.settings-reset-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.settings-reset-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
    color: var(--text-main);
}

.settings-reset-btn i {
    font-size: 0.7rem;
}

/* Edit mode indicator on cards */
.metrics-card.edit-mode {
    border: 2px solid var(--accent-soft);
}

.metrics-card.edit-mode .metrics-card-header h3::after {
    content: 'Editable';
    margin-left: 8px;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Settings section title with toggle group */
.settings-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Auto/Custom toggle group */
.settings-toggle-group {
    display: flex;
    background: var(--bg-body);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}

.settings-toggle {
    padding: 4px 10px;
    font-size: 0.65rem;
    font-weight: 600;
    border: none;
    background: transparent;
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.settings-toggle:hover {
    color: var(--text-main);
}

.settings-toggle.active {
    background: var(--accent);
    color: white;
}

/* Y-axis inputs disabled state */
.y-axis-inputs.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.y-axis-inputs.disabled .settings-input {
    background: var(--bg-hover);
}

/* Settings subsection */
.settings-subsection {
    margin-top: 8px;
}

.settings-label-small {
    display: block;
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* Tick density options */
.density-options {
    display: flex;
    gap: 6px;
}

.density-option {
    flex: 1;
    padding: 6px 8px;
    font-size: 0.7rem;
    font-weight: 500;
    border: 1px solid var(--border-subtle);
    background: var(--bg-body);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.density-option:hover {
    border-color: var(--accent);
    color: var(--text-main);
}

.density-option.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

/* Pie palette options */
.palette-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.palette-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.palette-option:hover {
    border-color: var(--accent);
}

.palette-option.active {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.palette-preview {
    display: flex;
    gap: 3px;
}

.palette-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.palette-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-main);
}

.palette-option.active .palette-label {
    color: var(--accent);
}

/* Graph type options in settings */
.graph-type-options {
    display: flex;
    gap: 8px;
}

.graph-type-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.graph-type-option:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.graph-type-option.active {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.graph-type-option i {
    font-size: 1.1rem;
    color: var(--text-muted);
    transition: color 0.15s ease;
}

.graph-type-option:hover i,
.graph-type-option.active i {
    color: var(--accent);
}

.graph-type-option span {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.graph-type-option.active span {
    color: var(--accent);
}

/* Settings select dropdown */
.settings-select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.15s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.settings-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.settings-select:hover {
    border-color: var(--text-muted);
}

/* Settings hint text */
.settings-hint {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 6px;
    line-height: 1.4;
    opacity: 0.8;
}

/* Dark mode adjustments */
[data-theme="dark"] .graph-settings-panel {
    background: rgba(30, 30, 35, 0.95);
}

[data-theme="dark"] .settings-input {
    background: rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .color-option.active {
    border-color: white;
    box-shadow: 0 0 0 2px rgba(30, 30, 35, 0.95), 0 0 0 4px white;
}

[data-theme="dark"] .settings-toggle-group {
    background: rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .density-option,
[data-theme="dark"] .graph-type-option,
[data-theme="dark"] .palette-option,
[data-theme="dark"] .settings-select {
    background: rgba(0, 0, 0, 0.3);
}

/* ===================================
   LINE CHART V2 - Modern SVG chart
   Clean axes, smooth curves, dual-axis support
   =================================== */
.line-chart-v2 {
    position: relative;
}

.line-chart-v2 svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

/* Grid lines - lighter and more subtle */
.line-chart-grid line {
    stroke: var(--border-light);
    stroke-width: 0.5;
    stroke-dasharray: 0;
    opacity: 0.4;
}

/* Y-axis labels - refined typography */
.line-chart-y-labels text {
    font-size: 9px;
    fill: var(--text-muted);
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
    letter-spacing: 0.2px;
}

.line-chart-y-labels.secondary text {
    fill: #34C759;
}

/* X-axis labels - refined typography */
.line-chart-x-labels text {
    font-size: 9px;
    fill: var(--text-muted);
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Area fill */
.line-chart-area-v2 {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Line strokes - smooth with vibrant glow */
.line-chart-stroke {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 2px 6px rgba(131, 58, 180, 0.35));
}

.line-chart-stroke.secondary {
    stroke-width: 2;
    stroke-dasharray: 6 3;
    opacity: 0.85;
}

/* Dots - appear on hover */
.line-chart-dots .line-dot {
    opacity: 0;
    transition: all 0.2s ease;
    cursor: pointer;
}

.line-chart-v2:hover .line-dot {
    opacity: 1;
}

.line-dot:hover {
    r: 6;
    filter: drop-shadow(0 2px 8px rgba(0, 112, 243, 0.4));
}

.line-dot.secondary:hover {
    filter: drop-shadow(0 2px 8px rgba(52, 199, 89, 0.4));
}

/* Line chart dot tooltip */
.line-chart-v2 {
    position: relative;
}

.line-dot[data-tooltip] {
    position: relative;
}

.line-chart-tooltip {
    position: absolute;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translate(-50%, -100%);
    margin-top: -8px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.line-chart-tooltip.visible {
    opacity: 1;
}

/* Legend */
.line-chart-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Dark mode line chart refinements */
body.dark-mode .line-chart-grid line {
    stroke: var(--border-card);
    opacity: 0.2;
}

body.dark-mode .line-chart-y-labels text,
body.dark-mode .line-chart-x-labels text {
    fill: var(--text-muted);
}

body.dark-mode .line-chart-stroke {
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.3));
}

body.dark-mode .line-dot:hover {
    filter: drop-shadow(0 2px 10px rgba(0, 122, 255, 0.5));
}

/* Legacy line chart support */
.metrics-line-chart {
    position: relative;
    padding-bottom: 24px;
}

.metrics-line-chart svg {
    width: 100%;
    height: 100px;
    overflow: visible;
}

.line-chart-area {
    opacity: 1;
}

.line-chart-line {
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 2px 4px rgba(0, 112, 243, 0.2));
}

.line-chart-dot {
    opacity: 0;
    transition: all 0.2s ease;
    cursor: pointer;
}

.metrics-line-chart:hover .line-chart-dot {
    opacity: 1;
}

.line-chart-dot:hover {
    r: 4;
    filter: drop-shadow(0 2px 6px rgba(0, 112, 243, 0.4));
}

.line-chart-labels {
    position: relative;
    height: 20px;
    margin-top: 8px;
}

.line-chart-label {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ===================================
   PIE CHART - Donut style
   =================================== */
.metrics-pie-chart {
    display: flex;
    align-items: center;
    gap: 24px;
}

.metrics-pie-chart svg {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.pie-segment {
    opacity: 0;
    transform-origin: center;
    animation: pieSegmentIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    cursor: pointer;
    transition: filter 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

@keyframes pieSegmentIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.pie-segment:hover {
    filter: brightness(1.15) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
    transform: scale(1.08);
}

/* Dim other segments when one is hovered */
.metrics-pie-chart:has(.pie-segment:hover) .pie-segment:not(:hover) {
    opacity: 0.5;
    filter: brightness(0.9);
}

.pie-total {
    font-size: 0.9rem;
    font-weight: 700;
    fill: var(--text-main);
}

/* Legend highlight when pie segment hovered */
.pie-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 6px;
    border-radius: 6px;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.pie-legend-item.highlighted {
    background: var(--accent-blue-light, rgba(10, 132, 255, 0.1));
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(10, 132, 255, 0.15);
}

.pie-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.pie-legend-color {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pie-legend-label {
    flex: 1;
    font-size: 0.75rem;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pie-legend-value {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    font-feature-settings: 'tnum' on;
}

.pie-legend-more {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    padding-top: 4px;
}

/* Graph content transition wrapper */
.graph-content {
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Dark mode adjustments for graph menu */
body.dark-mode .graph-menu-dropdown {
    background: rgba(40, 40, 45, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

body.dark-mode .graph-menu-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .graph-menu-option:hover {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .graph-menu-option.active {
    background: rgba(10, 132, 255, 0.2);
}

body.dark-mode .line-chart-line {
    filter: drop-shadow(0 2px 4px rgba(10, 132, 255, 0.3));
}

/* Dark mode for v2 charts */
body.dark-mode .line-chart-stroke {
    filter: drop-shadow(0 2px 4px rgba(10, 132, 255, 0.35));
}

body.dark-mode .line-chart-grid line {
    stroke: rgba(255, 255, 255, 0.08);
}

body.dark-mode .trend-grid-lines .grid-line {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .bar-track-clean {
    background: rgba(255, 255, 255, 0.08);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .metrics-pie-chart {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .metrics-pie-chart svg {
        margin: 0 auto;
    }
    
    .pie-legend {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .pie-legend-item {
        flex: 0 0 auto;
    }
    
    /* Responsive v2 charts */
    .line-chart-v2 svg {
        min-height: 120px;
    }
    
    .metrics-trend-chart-v2 {
        height: 120px;
    }
    
    .trend-y-axis,
    .trend-y-axis-secondary {
        width: 28px;
    }
    
    .y-axis-label {
        font-size: 0.6rem;
    }
    
    .bar-chart-label {
        width: 70px;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .graph-menu-dropdown {
        min-width: 140px;
    }
    
    .graph-menu-option {
        padding: 8px 10px;
        font-size: 0.8rem;
    }
    
    .line-chart-v2 svg {
        min-height: 100px;
    }
    
    .line-chart-y-labels text,
    .line-chart-x-labels text {
        font-size: 9px;
    }
    
    .metrics-trend-chart-v2 {
        height: 100px;
    }
    
    .trend-bar-label {
        font-size: 0.55rem;
    }
    
    .bar-label-clean {
        width: 70px;
        min-width: 70px;
        font-size: 0.7rem;
    }
    
    .bar-value-clean {
        width: 40px;
        min-width: 40px;
        font-size: 0.75rem;
    }
    
    .line-chart-legend {
        gap: 12px;
    }
    
    .legend-item {
        font-size: 0.7rem;
    }
    
    /* Side-by-side charts stack on mobile */
    .metrics-charts-row {
        grid-template-columns: 1fr;
    }
}

/* No data message - legacy support (use .chart-empty-state instead) */
.metrics-no-data {
    text-align: center;
    color: var(--text-muted);
    padding: 24px 16px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* No access state */
.metrics-no-access {
    text-align: center;
    padding: 100px 32px;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
}

.metrics-no-access-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
    background: var(--bg-body);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 28px;
    border: 2px solid var(--border-subtle);
}

.metrics-no-access h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 12px 0;
    letter-spacing: -0.02em;
}

.metrics-no-access p {
    color: var(--text-muted);
    max-width: 360px;
    margin: 0 auto;
    line-height: 1.6;
    font-size: 0.9rem;
}

/* Responsive adjustments for metrics */
@media (max-width: 768px) {
    .metrics-stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .metrics-stat-card {
        padding: 16px 18px;
        border-radius: 14px;
    }
    
    .metrics-stat-card-large {
        grid-column: 1 / -1;
    }
    
    .metrics-stat-value {
        font-size: 1.5rem;
    }
    
    .metrics-stat-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .bar-label-clean {
        width: 80px;
        min-width: 80px;
        font-size: 0.75rem;
    }
    
    .metrics-trend-chart {
        height: 80px;
    }
    
    .metrics-progress-ring-container {
        width: 56px;
        height: 56px;
    }
    
    .progress-ring-text {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .metrics-stats-row {
        grid-template-columns: 1fr;
    }
    
    .metrics-stat-card {
        padding: 14px 16px;
    }
    
    .bar-chart-clean {
        gap: 10px;
    }
    
    .bar-label-clean {
        width: 70px;
        min-width: 70px;
    }
    
    .metrics-trend-chart {
        height: 64px;
        gap: 4px;
    }
}

/* Dark mode for metrics charts */
body.dark-mode .metrics-stat-card {
    background: rgba(28, 28, 30, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .metrics-stat-card:hover {
    border-color: rgba(10, 132, 255, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

body.dark-mode .metrics-bar-container {
    background: rgba(255, 255, 255, 0.06);
}

body.dark-mode .metrics-trend-bar {
    background: linear-gradient(180deg, var(--accent) 0%, rgba(10, 132, 255, 0.4) 100%);
}

body.dark-mode .metrics-no-access {
    background: rgba(28, 28, 30, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .metrics-no-access-icon {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ===================================
   METRICS SETTINGS RADIO GROUP
   =================================== */
.radio-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.radio-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.radio-option:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}

.radio-option input[type="radio"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}

.radio-option-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.radio-option-title {
    font-weight: 600;
    color: var(--text-main);
    font-size: 0.95rem;
}

.radio-option-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.radio-option:has(input:checked) {
    border-color: var(--accent);
    background: rgba(0, 120, 212, 0.05);
}

/* Dark mode for radio options */
body.dark-mode .radio-option {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .radio-option:hover {
    background: rgba(255, 255, 255, 0.06);
}

body.dark-mode .radio-option:has(input:checked) {
    background: rgba(0, 120, 212, 0.15);
    border-color: var(--accent);
}

/* ===================================
   METRICS - REFINED LOADING STATE
   =================================== */
.metrics-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 24px;
    gap: 24px;
}

.metrics-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-subtle);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: metricsSpinner 0.7s linear infinite;
}

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

.metrics-loading-text {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* ===================================
   METRICS - ELEGANT EMPTY STATES
   =================================== */
.metrics-empty-state {
    text-align: center;
    padding: 48px 28px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 18px;
    margin: 16px 0;
    animation: metricsEmptyFadeIn 0.4s ease-out forwards;
    opacity: 0;
}

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

.metrics-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    background: var(--accent-soft);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 22px;
}

.metrics-empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 8px 0;
    letter-spacing: -0.01em;
}

.metrics-empty-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    max-width: 280px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Dark mode empty state */
body.dark-mode .metrics-empty-state {
    background: rgba(28, 28, 30, 0.7);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .metrics-empty-icon {
    background: rgba(10, 132, 255, 0.15);
}

/* ===================================
   METRICS - PILL TIME FILTER
   =================================== */
.metrics-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 0;
}

.metrics-time-filter {
    display: flex;
    align-items: center;
    gap: 10px;
}

.metrics-time-filter-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Custom Metrics Time Dropdown */
.metrics-time-dropdown {
    position: relative;
    display: inline-block;
}

.metrics-time-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid var(--border-subtle);
    border-radius: 99px;
    background: var(--bg-surface);
    color: var(--text-main);
    cursor: pointer;
    min-width: 130px;
    transition: all 0.2s ease;
}

.metrics-time-dropdown-trigger:hover {
    border-color: var(--accent);
    background-color: var(--bg-body);
}

.metrics-time-dropdown.open .metrics-time-dropdown-trigger {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.1);
}

.metrics-time-dropdown-value {
    flex: 1;
    text-align: left;
}

.metrics-time-dropdown-arrow {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.metrics-time-dropdown.open .metrics-time-dropdown-arrow {
    transform: rotate(180deg);
}

.metrics-time-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 160px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.metrics-time-dropdown.open .metrics-time-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.metrics-time-dropdown-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 0.85rem;
    color: var(--text-main);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.metrics-time-dropdown-option:hover {
    background: var(--bg-hover);
}

.metrics-time-dropdown-option i {
    font-size: 10px;
    color: var(--accent);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.metrics-time-dropdown-option.selected i {
    opacity: 1;
}

.metrics-time-dropdown-option.selected {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 500;
}

/* Dark mode time filter */
body.dark-mode .metrics-time-dropdown-trigger {
    background-color: rgba(28, 28, 30, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .metrics-time-dropdown-trigger:hover {
    background-color: rgba(38, 38, 40, 0.95);
    border-color: var(--accent);
}

body.dark-mode .metrics-time-dropdown-menu {
    background-color: rgba(28, 28, 30, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

body.dark-mode .metrics-time-dropdown-option:hover {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .metrics-time-dropdown-option.selected {
    background: rgba(0, 122, 255, 0.2);
}

/* Legacy select styling (kept for fallback) */
.metrics-time-filter select {
    padding: 8px 14px;
    padding-right: 36px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid var(--border-subtle);
    border-radius: 99px;
    background: var(--bg-surface);
    color: var(--text-main);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23666' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    min-width: 130px;
    transition: all 0.2s ease;
}

.metrics-time-filter select:hover {
    border-color: var(--accent);
    background-color: var(--bg-body);
}

.metrics-time-filter select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.1);
}

/* Dark mode time filter */
body.dark-mode .metrics-time-filter select {
    background-color: rgba(28, 28, 30, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23999' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
}

body.dark-mode .metrics-time-filter select:hover {
    background-color: rgba(38, 38, 40, 0.95);
    border-color: var(--accent);
}

/* ===================================
   METRICS - SUBTLE TOOLTIPS
   =================================== */
.metrics-stat-card[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 8px 14px;
    background: var(--text-main);
    color: var(--bg-surface);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 10px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.metrics-stat-card[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 5px solid transparent;
    border-top-color: var(--text-main);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
}

.metrics-stat-card[data-tooltip]:hover::after,
.metrics-stat-card[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Dark mode tooltips */
body.dark-mode .metrics-stat-card[data-tooltip]::after {
    background: #f0f0f0;
    color: #1a1a1a;
}

body.dark-mode .metrics-stat-card[data-tooltip]::before {
    border-top-color: #f0f0f0;
}

/* ===================================
   METRICS - RESPONSIVE POLISH
   =================================== */
@media (max-width: 768px) {
    .metrics-controls {
        flex-direction: row;
        justify-content: flex-end;
    }
    
    .metrics-time-filter select {
        min-width: 120px;
        font-size: 0.8rem;
        padding: 6px 12px;
        padding-right: 32px;
    }
    
    .metrics-stat-card[data-tooltip]::after {
        font-size: 0.7rem;
        padding: 6px 10px;
        max-width: 180px;
        white-space: normal;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .metrics-loading {
        padding: 60px 16px;
    }
    
    .metrics-empty-state {
        padding: 36px 16px;
    }
    
    .metrics-empty-icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
    
    .metrics-empty-title {
        font-size: 0.95rem;
    }
    
    .metrics-empty-desc {
        font-size: 0.8rem;
    }
}

/* ===================================
   CUSTOM METRICS - MODERN APPLE STYLE
   =================================== */

/* Edit Metrics button in header */
.metrics-edit-btn-header {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 99px;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.metrics-edit-btn-header:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.metrics-edit-btn-header.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.metrics-edit-btn-header i {
    font-size: 0.75rem;
}

/* Edit mode badge */
.metrics-edit-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--accent);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-left: 8px;
    animation: metricsBadgePulse 2s ease-in-out infinite;
}

@keyframes metricsBadgePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(0.98); }
}

/* Custom metrics section title */
.metrics-section-title-custom {
    margin-top: 20px;
}

.metrics-section-title-custom i {
    background: rgba(175, 82, 222, 0.12);
    color: #AF52DE;
}

/* Custom metric cards */
.custom-metric-card {
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-metric-card.edit-mode {
    border: 2px dashed var(--accent);
    cursor: default;
}

.custom-metric-card.edit-mode:hover {
    transform: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

/* Edit overlay on cards */
.metric-edit-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 4px;
    z-index: 10;
}

.metric-edit-actions {
    display: flex;
    gap: 4px;
}

.metric-edit-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.7rem;
}

.metric-edit-btn:hover:not(:disabled) {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
    transform: scale(1.05);
}

.metric-edit-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.metric-edit-btn.danger:hover:not(:disabled) {
    background: rgba(255, 59, 48, 0.1);
    border-color: #FF3B30;
    color: #FF3B30;
}

/* Hidden metric state (shown with reduced opacity in edit mode) */
.metric-edit-btn.hidden-state {
    background: rgba(255, 149, 0, 0.1);
    border-color: rgba(255, 149, 0, 0.3);
    color: #FF9500;
}

.metric-edit-btn.hidden-state:hover:not(:disabled) {
    background: rgba(255, 149, 0, 0.2);
    border-color: #FF9500;
}

/* Hidden metric card styling */
.custom-metric-card.metric-hidden,
.metrics-card.metric-hidden {
    opacity: 0.5;
    filter: grayscale(0.3);
    position: relative;
}

.custom-metric-card.metric-hidden::before,
.metrics-card.metric-hidden::before {
    content: 'Hidden';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 5;
    pointer-events: none;
}

/* Graph card hide button */
.metric-graph-hide-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.7rem;
}

.metric-graph-hide-btn:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
    transform: scale(1.05);
}

.metric-graph-hide-btn.hidden-state {
    background: rgba(255, 149, 0, 0.1);
    border-color: rgba(255, 149, 0, 0.3);
    color: #FF9500;
}

.metric-graph-hide-btn.hidden-state:hover {
    background: rgba(255, 149, 0, 0.2);
    border-color: #FF9500;
}

/* Display mode toggle (card/graph) */
.metric-display-toggle {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 132, 255, 0.1);
    border: 1px solid rgba(10, 132, 255, 0.3);
    border-radius: 8px;
    color: #0A84FF;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.7rem;
}

.metric-display-toggle:hover {
    background: rgba(10, 132, 255, 0.2);
    border-color: #0A84FF;
    transform: scale(1.05);
}

/* Add Metric button */
.metrics-add-metric-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 18px 24px;
    margin-top: 20px;
    background: var(--bg-surface);
    border: 2px dashed var(--border-subtle);
    border-radius: 18px;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.metrics-add-metric-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-2px);
}

.metrics-add-metric-btn i {
    font-size: 1rem;
}

/* Add Metric Modal */
.add-metric-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.add-metric-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.add-metric-option:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    transform: translateX(4px);
}

.add-metric-option-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    border-radius: 12px;
    color: var(--accent);
    font-size: 1rem;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.add-metric-option:hover .add-metric-option-icon {
    background: var(--accent);
    color: white;
    transform: scale(1.05);
}

.add-metric-option-content {
    flex: 1;
    min-width: 0;
}

.add-metric-option-name {
    font-weight: 600;
    color: var(--text-main);
    font-size: 0.9rem;
    margin-bottom: 3px;
    letter-spacing: -0.01em;
}

.add-metric-option-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.add-metric-option-action {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 0.8rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.add-metric-option:hover .add-metric-option-action {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* Custom metrics empty state */
.custom-metrics-empty {
    border-style: dashed;
    border-color: var(--border-subtle);
}

.custom-metrics-empty:hover {
    border-color: var(--accent);
}

/* Custom metrics row */
.custom-metrics-row {
    gap: 14px;
}

/* Dark mode for custom metrics */
body.dark-mode .metrics-edit-btn-header {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .metrics-edit-btn-header:hover {
    background: rgba(10, 132, 255, 0.15);
}

body.dark-mode .metrics-edit-btn-header.active {
    background: var(--accent);
    border-color: var(--accent);
}

body.dark-mode .metric-edit-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .metric-edit-btn:hover:not(:disabled) {
    background: rgba(10, 132, 255, 0.2);
}

body.dark-mode .metrics-add-metric-btn {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .metrics-add-metric-btn:hover {
    background: rgba(10, 132, 255, 0.1);
}

body.dark-mode .add-metric-option {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .add-metric-option:hover {
    background: rgba(10, 132, 255, 0.12);
}

body.dark-mode .add-metric-option-action {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Responsive for custom metrics */
@media (max-width: 768px) {
    .metrics-edit-btn-header span {
        display: none;
    }
    
    .metrics-edit-btn-header {
        padding: 10px;
    }
    
    .metric-edit-actions {
        flex-direction: column;
    }
    
    .metrics-add-metric-btn {
        padding: 14px 16px;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .add-metric-option {
        padding: 12px;
    }
    
    .add-metric-option-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    
    .add-metric-option-name {
        font-size: 0.85rem;
    }
}

/* ===================================
   COMPREHENSIVE MOBILE OVERRIDES
   Final overrides for full-width layout
   =================================== */

@media (max-width: 768px) {
    /* ===================================
       SPREADSHEET PANEL MOBILE
       =================================== */
    .spreadsheet-panel {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 70px; /* Above bottom nav */
        z-index: 900;
        border-radius: 0;
    }
    
    .spreadsheet-panel-header {
        padding: 12px 16px;
        gap: 12px;
        flex-wrap: wrap;
    }
    
    .panel-header-left {
        flex: 1;
        gap: 8px;
    }
    
    .spreadsheet-title-input {
        font-size: 16px;
        max-width: 150px;
    }
    
    .panel-header-right {
        gap: 8px;
    }
    
    .back-btn,
    .icon-btn {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Batch actions bar - full width */
    .batch-actions-bar {
        flex-wrap: wrap;
        padding: 12px 16px;
        gap: 12px;
    }
    
    .batch-buttons {
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        justify-content: space-between;
    }
    
    .batch-btn {
        flex: 1;
        min-height: 44px;
        font-size: 13px;
    }
    
    /* Column sidebar - slide from bottom on mobile */
    .column-toggle-sidebar {
        position: fixed;
        top: auto;
        bottom: 70px;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 50vh;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        z-index: 950;
        display: block;
    }
    
    .column-toggle-sidebar.open {
        transform: translateY(0);
    }
    
    /* Table container - horizontal scroll */
    .spreadsheet-table-area {
        padding: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table-container {
        border-radius: 0;
        border-left: none;
        border-right: none;
        overflow-x: auto;
    }
    
    .spreadsheet-table {
        min-width: 600px;
    }
    
    .spreadsheet-table td,
    .spreadsheet-table th {
        padding: 12px;
        font-size: 13px;
    }
    
    /* Spreadsheet empty state */
    .spreadsheet-empty {
        padding: 48px 24px;
        border-radius: 0;
        margin: 0;
    }
    
    /* ===================================
       TEAM SECTION MOBILE
       =================================== */
    .team-section {
        padding: 0;
    }
    
    .team-header {
        border-radius: 0;
        margin: 0;
        padding: 16px;
    }
    
    .team-list {
        padding: 0 16px 16px 16px;
    }
    
    /* Teammate cards - larger touch targets */
    .teammate-card {
        padding: 16px;
        min-height: 72px;
    }
    
    .teammate-avatar {
        width: 48px;
        height: 48px;
        font-size: 14px;
    }
    
    /* ===================================
       OVERVIEW/ACTIVITY MOBILE
       =================================== */
    #activity {
        padding: 0;
    }
    
    #activity .section-header {
        padding: 16px;
        margin: 0 0 16px 0;
        background: var(--bg-surface);
    }
    
    .activity-feed {
        border-radius: 0;
        margin: 0;
        padding: 16px;
        border-left: none;
        border-right: none;
    }
    
    .activity-item {
        border-radius: 12px;
        margin: 0 0 12px 0;
        padding: 16px;
    }
    
    /* ===================================
       CHAT MOBILE
       =================================== */
    #chat {
        padding: 0;
    }
    
    .chat-container {
        border-radius: 0;
        border: none;
        max-height: calc(100vh - 160px);
        min-height: calc(100vh - 200px);
    }
    
    .chat-messages {
        padding: 12px 16px;
    }
    
    .message {
        gap: 10px;
    }
    
    .message-avatar {
        width: 32px;
        height: 32px;
        font-size: 11px;
    }
    
    .message-text {
        max-width: calc(100% - 50px);
        padding: 10px 14px;
    }
    
    .chat-input-container {
        padding: 12px 16px;
        gap: 10px;
    }
    
    .chat-input {
        padding: 12px 16px;
        font-size: 16px;
    }
    
    .send-btn {
        width: 48px;
        height: 48px;
    }
    
    /* Reply preview bar */
    .reply-preview-bar {
        margin: 0 16px;
        border-radius: 12px 12px 0 0;
    }
    
    /* Mention dropdown */
    .mention-dropdown {
        left: 16px;
        right: 16px;
        bottom: calc(100% + 4px);
        max-height: 200px;
    }
    
    /* ===================================
       CALENDAR MOBILE
       =================================== */
    #calendar {
        padding: 0;
    }
    
    #calendar .section-header {
        padding: 16px;
        margin: 0;
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .calendar-container {
        border-radius: 0;
        border-left: none;
        border-right: none;
        margin: 0;
        padding: 12px;
        overflow: hidden;
    }
    
    .calendar-header {
        padding: 0;
        margin-bottom: 12px;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .calendar-title {
        font-size: 1.1rem;
    }
    
    .calendar-view-toggle {
        order: 3;
        width: 100%;
        justify-content: center;
    }
    
    .view-toggle-btn {
        flex: 1;
        justify-content: center;
        padding: 10px 12px;
        font-size: 13px;
    }
    
    /* Month view scroll wrapper */
    .calendar-grid {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--border-subtle) transparent;
        padding-bottom: 8px;
        margin: 0 -12px;
        padding-left: 12px;
        padding-right: 12px;
    }
    
    .calendar-grid::-webkit-scrollbar {
        height: 4px;
    }
    
    .calendar-grid::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .calendar-grid::-webkit-scrollbar-thumb {
        background: var(--border-subtle);
        border-radius: 2px;
    }
    
    /* Month view grid - fixed width for scrolling */
    .calendar-grid:has(.calendar-day-header) {
        min-width: 560px;
        gap: 4px;
    }
    
    .calendar-day-header {
        padding: 8px 4px;
        font-size: 11px;
        min-width: 75px;
    }
    
    .calendar-day {
        font-size: 12px;
        min-height: 80px;
        min-width: 75px;
        padding: 8px;
    }
    
    .day-number {
        font-size: 13px;
    }
    
    .calendar-day.today .day-number {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
    
    /* Month events on mobile */
    .month-events {
        gap: 2px;
        margin-top: 4px;
    }
    
    .month-event-item {
        padding: 3px 6px;
        font-size: 9px;
        border-left-width: 2px;
    }
    
    .month-event-time {
        font-size: 8px;
    }
    
    .month-event-title {
        font-size: 9px;
    }
    
    .month-event-more {
        font-size: 8px;
        padding: 2px 4px;
    }
    
    .week-day-number {
        font-size: 16px;
    }
    
    .week-day-header.today .week-day-number {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
    
    .week-time-slot {
        font-size: 9px;
        padding: 0 4px;
        height: 50px;
    }
    
    .week-time-cell {
        height: 50px;
    }
    
    .week-event-block {
        padding: 4px 6px;
        font-size: 10px;
        left: 2px;
        right: 2px;
        border-left-width: 2px;
    }
    
    .week-event-title {
        font-size: 10px;
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }
    
    .week-event-time {
        font-size: 9px;
    }
    
    /* Scroll hint indicator */
    .calendar-container::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 30px;
        background: linear-gradient(to left, var(--bg-surface), transparent);
        pointer-events: none;
        opacity: 0.8;
    }
    
    .calendar-container {
        position: relative;
    }
    
    /* ===================================
       SETTINGS MOBILE
       =================================== */
    #settings-section {
        padding: 0;
    }
    
    #settings-section .section-header {
        padding: 16px;
        margin: 0 0 8px 0;
    }
    
    .settings-container {
        padding: 0;
    }
    
    .settings-card {
        border-radius: 0;
        border-left: none;
        border-right: none;
        margin: 0 0 8px 0;
    }
    
    .settings-card-header,
    .settings-card-body {
        padding: 16px;
    }
    
    /* Avatar color picker - grid on mobile */
    .avatar-color-picker {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
        justify-items: center;
    }
    
    .color-option {
        width: 44px;
        height: 44px;
    }
    
    /* ===================================
       METRICS MOBILE
       =================================== */
    #metrics-section {
        padding: 0;
    }
    
    #metrics-section .section-header {
        padding: 16px;
        margin: 0 0 16px 0;
    }
    
    .metrics-layout {
        padding: 0 16px 16px 16px;
    }
    
    .metrics-stats-row {
        padding: 0;
        gap: 12px;
    }
    
    .metrics-section-title {
        padding: 0;
        margin-bottom: 12px;
    }
    
    /* ===================================
       FORM ELEMENTS MOBILE
       =================================== */
    .form-group {
        margin-bottom: 16px;
    }
    
    .form-group label {
        font-size: 14px;
        margin-bottom: 8px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    /* ===================================
       NOTIFICATIONS DROPDOWN MOBILE
       =================================== */
    .notifications-dropdown {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 70vh !important;
        border-radius: 20px 20px 0 0 !important;
        border: none !important;
        border-top: 1px solid var(--border-subtle) !important;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2) !important;
        animation: slideUpMobile 0.25s ease-out !important;
    }
    
    @keyframes slideUpMobile {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .notifications-list {
        max-height: calc(70vh - 80px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .notification-item {
        padding: 16px;
    }
    
    .notifications-header {
        padding: 20px;
        border-bottom: 1px solid var(--border-subtle);
    }    /* ===================================
       SAFE AREA INSETS (for notched phones)
       =================================== */
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
        .sidebar {
            padding-bottom: env(safe-area-inset-bottom);
            height: calc(70px + env(safe-area-inset-bottom));
        }
        
        .app-container {
            padding-bottom: calc(70px + env(safe-area-inset-bottom));
        }
        
        .spreadsheet-panel {
            bottom: calc(70px + env(safe-area-inset-bottom));
        }
        
        .column-toggle-sidebar {
            bottom: calc(70px + env(safe-area-inset-bottom));
        }
        
        .notifications-dropdown {
            bottom: calc(70px + env(safe-area-inset-bottom));
        }
    }
}

/* ===================================
   VERY SMALL MOBILE (400px and below)
   =================================== */
@media (max-width: 400px) {
    /* Even more compact navigation */
    .nav-item {
        padding: 8px 4px;
        max-width: 50px;
    }
    
    .nav-item i {
        font-size: 18px;
    }
    
    /* Smaller section headers */
    .section-header h1 {
        font-size: 20px;
    }
    
    /* Compact cards */
    .teammate-card {
        padding: 12px;
        gap: 10px;
    }
    
    .teammate-avatar {
        width: 40px;
        height: 40px;
    }
    
    .teammate-name {
        font-size: 13px;
    }
    
    /* Smaller buttons */
    .btn-primary,
    .btn-secondary {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    /* Compact activity items */
    .activity-item {
        padding: 12px;
    }
    
    .activity-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
}

/* ===================================
   SPREADSHEET CONTEXT MENU
   Right-click menu for sheet actions
   =================================== */
.spreadsheet-context-menu {
    position: fixed;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 6px;
    min-width: 160px;
    z-index: 10000;
    opacity: 0;
    transform: scale(0.95) translateY(-4px);
    transform-origin: top left;
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

.spreadsheet-context-menu.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
    cursor: pointer;
    transition: background 0.15s ease;
}

.context-menu-item:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

.context-menu-item:hover i {
    color: var(--accent);
    opacity: 1;
}

.context-menu-item i {
    width: 16px;
    text-align: center;
    font-size: 13px;
    opacity: 0.7;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.context-menu-item.danger {
    color: #FF3B30;
}

.context-menu-item.danger:hover {
    background: rgba(255, 59, 48, 0.1);
}

.context-menu-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 4px 0;
}

/* Dark mode */
body.dark-mode .spreadsheet-context-menu {
    background: #2c2c2e;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

body.dark-mode .context-menu-item:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

body.dark-mode .context-menu-item:hover i {
    color: var(--accent);
    opacity: 1;
}

body.dark-mode .context-menu-item.danger:hover {
    background: rgba(255, 59, 48, 0.15);
}

/* ===================================
   TASK PROGRESS CONTROL (Modal)
   Clean, minimal progress bar
   =================================== */
.task-progress-control {
    display: flex;
    align-items: center;
    gap: 12px;
}

.task-progress-track {
    flex: 1;
    height: 6px;
    background: var(--bg-surface-soft);
    border-radius: 3px;
    overflow: hidden;
}

.task-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 0.2s ease;
}

.task-progress-value {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 56px;
}

.task-progress-value input {
    width: 40px;
    padding: 6px 8px;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--text-main);
    transition: border-color 0.15s ease;
    -moz-appearance: textfield;
    appearance: textfield;
}

.task-progress-value input::-webkit-inner-spin-button,
.task-progress-value input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.task-progress-value input:focus {
    outline: none;
    border-color: var(--accent);
}

.task-progress-value span {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}

/* Dark mode */
body.dark-mode .task-progress-track {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .task-progress-value input {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.1);
}

/* ===================================
   APPLE-MINIMAL MODAL SYSTEM
   Ultra-clean, calm, simple
   =================================== */

/* Base Modal Overlay - Simple dim layer */
.unified-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 100000;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

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

/* Modal Container - Clean, solid background */
.unified-modal-container {
    background: #ffffff;
    border-radius: 14px;
    width: 100%;
    max-width: 540px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.unified-modal-container.modal-sm {
    max-width: 420px;
}

.unified-modal-container.modal-lg {
    max-width: 640px;
}

/* Wide form modal - for Add Event, Add Task, Add Lead */
.unified-modal-container.modal-form-wide {
    max-width: 720px;
}

body.dark-mode .unified-modal-container {
    background: #1c1c1e;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* Modal Header - Minimal */
.unified-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

body.dark-mode .unified-modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.unified-modal-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.unified-modal-title h2 {
    font-size: 17px;
    font-weight: 600;
    color: #000000;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.01em;
}

body.dark-mode .unified-modal-title h2 {
    color: #ffffff;
}

.unified-modal-title h2 i {
    display: none; /* Hide icons in titles for minimal look */
}

.unified-modal-title .subtitle {
    display: none; /* Hide subtitles for minimal look */
}

/* Close Button - Small, simple × */
.unified-modal-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.unified-modal-close:hover {
    opacity: 0.7;
}

body.dark-mode .unified-modal-close {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

/* Modal Body */
.unified-modal-body {
    padding: 20px 24px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 200px);
}

.unified-modal-body::-webkit-scrollbar {
    width: 6px;
}

.unified-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.unified-modal-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

body.dark-mode .unified-modal-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}

/* Duration display field */
.unified-input.duration-display {
    background: #f0f0f2;
    color: rgba(0, 0, 0, 0.5);
    cursor: default;
}

body.dark-mode .unified-input.duration-display {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
}

/* Modal Footer */
.unified-modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

body.dark-mode .unified-modal-footer {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* ===================================
   MINIMAL FORM SYSTEM
   =================================== */

.unified-form-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.unified-form-grid.two-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.unified-form-field.full-width {
    grid-column: 1 / -1;
}

.unified-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.unified-form-label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 4px;
}

body.dark-mode .unified-form-label {
    color: rgba(255, 255, 255, 0.5);
}

.unified-form-label i {
    display: none; /* Hide label icons for minimal look */
}

.unified-form-label .required {
    color: #ff3b30;
    font-weight: 500;
}

.unified-form-label .optional {
    color: rgba(0, 0, 0, 0.3);
    font-weight: 400;
    font-size: 12px;
}

body.dark-mode .unified-form-label .optional {
    color: rgba(255, 255, 255, 0.3);
}

/* Modern Input Styles - Transaction Row Inspired */
.unified-input,
.unified-select,
.unified-textarea {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    font-family: inherit;
    color: var(--text-main);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: all 0.18s ease;
    box-sizing: border-box;
    outline: none;
}

.unified-input:hover,
.unified-select:hover,
.unified-textarea:hover {
    border-color: var(--border-medium);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.unified-input:focus,
.unified-select:focus,
.unified-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 6px 20px rgba(0, 112, 243, 0.12), 0 0 0 3px var(--accent-soft);
    transform: translateY(-1px);
}

.unified-input::placeholder,
.unified-textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

body.dark-mode .unified-input,
body.dark-mode .unified-select,
body.dark-mode .unified-textarea {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
    color: #ffffff;
}

body.dark-mode .unified-input:hover,
body.dark-mode .unified-select:hover,
body.dark-mode .unified-textarea:hover {
    border-color: var(--border-medium);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

body.dark-mode .unified-input:focus,
body.dark-mode .unified-select:focus,
body.dark-mode .unified-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 6px 20px rgba(10, 132, 255, 0.2), 0 0 0 3px rgba(10, 132, 255, 0.15);
}

body.dark-mode .unified-input::placeholder,
body.dark-mode .unified-textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.unified-textarea {
    resize: vertical;
    min-height: 72px;
}

.unified-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* Custom Dropdown Options Styling */
.unified-select option {
    padding: 12px 16px;
    background: var(--bg-surface);
    color: var(--text-main);
    font-size: 14px;
    font-weight: 500;
    border: none;
}

.unified-select option:hover,
.unified-select option:focus,
.unified-select option:checked {
    background: var(--accent-soft);
    color: var(--accent);
}

body.dark-mode .unified-select option {
    background: #2c2c2e;
    color: #ffffff;
}

body.dark-mode .unified-select option:hover,
body.dark-mode .unified-select option:focus,
body.dark-mode .unified-select option:checked {
    background: rgba(0, 122, 255, 0.25);
    color: var(--accent);
}

/* Input Group */
.unified-input-group {
    display: flex;
    align-items: stretch;
}

.unified-input-group .input-addon {
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    border-right: none;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
}

body.dark-mode .unified-input-group .input-addon {
    background: #2c2c2e;
    border-color: var(--border-subtle);
    color: rgba(255, 255, 255, 0.5);
}

.unified-input-group .input-addon:first-child {
    border-radius: 8px 0 0 8px;
}

.unified-input-group .input-addon:last-child {
    border-radius: 0 8px 8px 0;
}

.unified-input-group .unified-input {
    border-radius: 0;
    flex: 1;
}

.unified-input-group .unified-input:first-child {
    border-radius: 8px 0 0 8px;
}

.unified-input-group .unified-input:last-child {
    border-radius: 0 8px 8px 0;
}

/* ===================================
   MINIMAL DROPDOWN
   =================================== */

.unified-dropdown {
    position: relative;
}

.unified-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: all 0.18s ease;
    min-height: 48px;
}

.unified-dropdown-trigger:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

body.dark-mode .unified-dropdown-trigger {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
}

body.dark-mode .unified-dropdown-trigger:hover {
    background: rgba(10, 132, 255, 0.12);
    border-color: var(--accent);
}

.unified-dropdown-value {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--text-main);
}

body.dark-mode .unified-dropdown-value {
    color: #ffffff;
}

.unified-dropdown-arrow {
    color: var(--text-muted);
    font-size: 12px;
    transition: transform 0.18s ease, color 0.18s ease;
}

body.dark-mode .unified-dropdown-arrow {
    color: rgba(255, 255, 255, 0.4);
}

.unified-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all 0.15s ease;
}

.unified-dropdown-menu.visible,
.unified-dropdown.open .unified-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

body.dark-mode .unified-dropdown-menu {
    background: #2c2c2e;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.unified-dropdown-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.1s ease;
    font-size: 15px;
    color: #000000;
}

body.dark-mode .unified-dropdown-option {
    color: #ffffff;
}

.unified-dropdown-option:first-child {
    border-radius: 9px 9px 0 0;
}

.unified-dropdown-option:last-child {
    border-radius: 0 0 9px 9px;
}

.unified-dropdown-option:hover {
    background: rgba(0, 0, 0, 0.04);
}

body.dark-mode .unified-dropdown-option:hover {
    background: rgba(255, 255, 255, 0.08);
}

.unified-dropdown-option.selected {
    background: rgba(0, 122, 255, 0.08);
}

body.dark-mode .unified-dropdown-option.selected {
    background: rgba(0, 122, 255, 0.2);
}

.unified-dropdown-option .check-icon {
    margin-left: auto;
    color: #007aff;
    opacity: 0;
    font-size: 12px;
}

.unified-dropdown-option.selected .check-icon {
    opacity: 1;
}

/* Status/Priority Dots - Small, flat */
.unified-status-dot,
.unified-priority-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.unified-status-dot.todo { background: #8e8e93; }
.unified-status-dot.inprogress { background: #ff9500; }
.unified-status-dot.done { background: #34c759; }
.unified-status-dot.new { background: #007aff; }
.unified-status-dot.contacted { background: #5856d6; }
.unified-status-dot.qualified { background: #ff9500; }
.unified-status-dot.won { background: #34c759; }
.unified-status-dot.lost { background: #ff3b30; }

.unified-priority-dot.low { background: #34c759; }
.unified-priority-dot.medium { background: #ff9500; }
.unified-priority-dot.high { background: #ff3b30; }

/* Assignee Avatar - Simple */
.unified-assignee-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #007aff;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}

/* ===================================
   MINIMAL BUTTONS
   =================================== */

.unified-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
    white-space: nowrap;
}

.unified-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.unified-btn-primary {
    background: #007aff;
    color: white;
}

.unified-btn-primary:hover:not(:disabled) {
    opacity: 0.85;
}

.unified-btn-secondary {
    background: rgba(0, 0, 0, 0.05);
    color: #000000;
}

body.dark-mode .unified-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.unified-btn-secondary:hover:not(:disabled) {
    opacity: 0.7;
}

.unified-btn-danger {
    background: #ff3b30;
    color: white;
}

.unified-btn-danger:hover:not(:disabled) {
    opacity: 0.85;
}

.unified-btn-warning {
    background: rgba(255, 149, 0, 0.12);
    color: #c77800;
}

body.dark-mode .unified-btn-warning {
    color: #ffb340;
}

.unified-btn-warning:hover:not(:disabled) {
    opacity: 0.7;
}

/* ===================================
   MINIMAL COLOR PICKER
   Flat circles, grey border on selection
   =================================== */

.unified-color-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.unified-color-option {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s ease;
    position: relative;
    box-sizing: border-box;
}

.unified-color-option:hover {
    border-color: rgba(0, 0, 0, 0.15);
}

body.dark-mode .unified-color-option:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.unified-color-option.selected {
    border-color: rgba(0, 0, 0, 0.4);
}

body.dark-mode .unified-color-option.selected {
    border-color: rgba(255, 255, 255, 0.5);
}

/* No checkmark on selection - just border */
.unified-color-option.selected::after {
    display: none;
}

/* ===================================
   VISIBILITY SELECTOR
   Three-option radio with icons
   =================================== */

.visibility-selector {
    display: flex;
    gap: 12px;
}

.visibility-option {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

.visibility-option:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.visibility-option.selected {
    background: var(--accent-soft);
    border-color: var(--accent);
    box-shadow: 0 6px 20px rgba(0, 112, 243, 0.12);
}

.visibility-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    border-radius: var(--radius-sm);
    color: var(--accent);
    font-size: 14px;
    flex-shrink: 0;
}

.visibility-icon.admins {
    background: rgba(255, 59, 48, 0.12);
    color: var(--danger);
}

.visibility-icon.private {
    background: rgba(255, 149, 0, 0.12);
    color: var(--warning);
}

.visibility-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.visibility-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
}

.visibility-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
    text-transform: none;
}

/* Dark mode visibility */
body.dark-mode .visibility-option {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
}

body.dark-mode .visibility-option:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent);
}

body.dark-mode .visibility-option.selected {
    background: rgba(10, 132, 255, 0.15);
    border-color: var(--accent);
}

@media (max-width: 600px) {
    .visibility-selector {
        flex-direction: column;
    }
    
    .visibility-option {
        padding: 10px 12px;
    }
    
    .visibility-desc {
        display: none;
    }
}

/* ===== REPEAT SELECTOR - Minimal segmented pills ===== */
.repeat-selector {
    width: 100%;
}

.repeat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.repeat-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #f5f5f7;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

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

.repeat-chip:hover {
    background: #ebebed;
    color: var(--text-main);
    border-color: var(--border-medium);
}

.repeat-chip.selected {
    background: #007aff;
    border-color: #007aff;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 122, 255, 0.18);
}

.repeat-chip-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #007aff;
    font-size: 13px;
}

.repeat-chip.selected .repeat-chip-icon {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.repeat-chip-title {
    font-weight: 600;
    color: inherit;
    font-size: 13px;
    line-height: 1.2;
}

.repeat-helper {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--accent-soft);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--accent);
    line-height: 1.4;
    box-shadow: var(--shadow-subtle);
}

.repeat-helper i {
    flex-shrink: 0;
}

body.dark-mode .repeat-chip {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
}

body.dark-mode .repeat-chip:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--border-medium);
}

body.dark-mode .repeat-chip.selected {
    background: rgba(0, 122, 255, 0.28);
    border-color: rgba(0, 122, 255, 0.9);
    color: #ffffff;
}

body.dark-mode .repeat-chip-icon {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

body.dark-mode .repeat-chip.selected .repeat-chip-icon {
    background: rgba(255, 255, 255, 0.2);
}

body.dark-mode .repeat-helper {
    background: rgba(0, 122, 255, 0.16);
}

@media (max-width: 640px) {
    .repeat-grid {
        gap: 6px;
    }
    .repeat-chip {
        flex: 1 1 calc(50% - 6px);
        justify-content: center;
    }
}

/* ===================================
   MINIMAL ICON PICKER
   Simple flat grid
   =================================== */

.unified-icon-grid {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.unified-icon-option {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: none;
    background: #f5f5f7;
    color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 14px;
}

body.dark-mode .unified-icon-option {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
}

.unified-icon-option:hover {
    background: #ebebed;
    color: rgba(0, 0, 0, 0.7);
}

body.dark-mode .unified-icon-option:hover {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
}

.unified-icon-option.selected {
    background: rgba(0, 0, 0, 0.08);
    border: 1.5px solid rgba(0, 0, 0, 0.2);
    color: #000000;
}

body.dark-mode .unified-icon-option.selected {
    background: rgba(255, 255, 255, 0.12);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

/* ===================================
   MINIMAL PROGRESS BAR
   Thin, flat, single color
   =================================== */

.unified-progress-control {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Range slider styling */
.unified-progress-slider {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

body.dark-mode .unified-progress-slider {
    background: rgba(255, 255, 255, 0.1);
}

.unified-progress-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #007aff;
    cursor: grab;
    box-shadow: 0 2px 6px rgba(0, 122, 255, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.unified-progress-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 10px rgba(0, 122, 255, 0.5);
}

.unified-progress-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(0.95);
}

.unified-progress-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #007aff;
    cursor: grab;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 122, 255, 0.3);
}

.unified-progress-slider::-moz-range-thumb:hover {
    transform: scale(1.1);
}

.unified-progress-slider::-moz-range-track {
    height: 6px;
    background: transparent;
    border-radius: 3px;
}

/* Legacy track/fill - keep for fallback */
.unified-progress-track {
    flex: 1;
    height: 4px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

body.dark-mode .unified-progress-track {
    background: rgba(255, 255, 255, 0.1);
}

.unified-progress-fill {
    height: 100%;
    background: #007aff;
    border-radius: 2px;
    transition: width 0.2s ease;
}

.unified-progress-value {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 50px;
}

.unified-progress-value input {
    width: 36px;
    padding: 6px 4px;
    font-size: 13px;
    font-weight: 500;
    text-align: right;
    border: none;
    border-radius: 6px;
    background: #f5f5f7;
    color: #000000;
    -moz-appearance: textfield;
    appearance: textfield;
}

body.dark-mode .unified-progress-value input {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.unified-progress-value input::-webkit-inner-spin-button,
.unified-progress-value input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.unified-progress-value input:focus {
    outline: none;
    background: #ebebed;
}

body.dark-mode .unified-progress-value input:focus {
    background: rgba(255, 255, 255, 0.12);
}

.unified-progress-value span {
    font-size: 13px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.4);
}

body.dark-mode .unified-progress-value span {
    color: rgba(255, 255, 255, 0.4);
}

/* ===================================
   MINIMAL TIME INPUT
   =================================== */

.unified-time-input {
    display: flex;
    align-items: center;
    gap: 2px;
    background: #f5f5f7;
    border-radius: 8px;
    padding: 4px;
}

body.dark-mode .unified-time-input {
    background: rgba(255, 255, 255, 0.08);
}

.unified-time-input input {
    width: 36px;
    padding: 6px 2px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    border: none;
    background: transparent;
    color: #000000;
    -moz-appearance: textfield;
    appearance: textfield;
}

body.dark-mode .unified-time-input input {
    color: #ffffff;
}

.unified-time-input input::-webkit-inner-spin-button,
.unified-time-input input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.unified-time-input input:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 4px;
}

body.dark-mode .unified-time-input input:focus {
    background: rgba(255, 255, 255, 0.08);
}

.unified-time-input span {
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.3);
}

body.dark-mode .unified-time-input span {
    color: rgba(255, 255, 255, 0.3);
}

/* ===================================
   CUSTOM TIME PICKER
   =================================== */
.time-picker-wrapper {
    position: relative;
    width: 100%;
}

.time-picker-display {
    display: flex;
    align-items: center;
    gap: 2px;
    background: #f5f5f7;
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--border-subtle);
    width: 100%;
}

.time-picker-display:hover {
    background: #ebebed;
}

.time-picker-wrapper.open .time-picker-display {
    border-color: var(--accent);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}

body.dark-mode .time-picker-display {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .time-picker-display:hover {
    background: rgba(255, 255, 255, 0.12);
}

body.dark-mode .time-picker-wrapper.open .time-picker-display {
    background: rgba(255, 255, 255, 0.1);
}

.time-input-field {
    width: 28px;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    border: none;
    background: transparent;
    color: #000000;
    outline: none;
}

.time-input-field::placeholder {
    color: rgba(0, 0, 0, 0.35);
}

body.dark-mode .time-input-field {
    color: #ffffff;
}

body.dark-mode .time-input-field::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.time-separator {
    font-size: 15px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.4);
    margin: 0 2px;
}

body.dark-mode .time-separator {
    color: rgba(255, 255, 255, 0.4);
}

.time-picker-arrow {
    font-size: 10px;
    color: rgba(0, 0, 0, 0.35);
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.time-picker-wrapper.open .time-picker-arrow {
    transform: rotate(180deg);
}

body.dark-mode .time-picker-arrow {
    color: rgba(255, 255, 255, 0.35);
}

.time-picker-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.time-picker-wrapper.open .time-picker-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

body.dark-mode .time-picker-dropdown {
    background: #2c2c2e;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.time-picker-columns {
    display: flex;
    gap: 0;
}

.time-picker-column {
    flex: 1;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
}

.time-picker-column:last-child {
    border-right: none;
}

body.dark-mode .time-picker-column {
    border-right-color: rgba(255, 255, 255, 0.08);
}

.time-picker-column-header {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(0, 0, 0, 0.4);
    padding: 10px 8px 6px;
    text-align: center;
}

body.dark-mode .time-picker-column-header {
    color: rgba(255, 255, 255, 0.4);
}

.time-picker-options {
    max-height: 200px;
    overflow-y: auto;
    padding: 0 4px 8px;
}

.time-picker-option {
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: #000000;
}

.time-picker-option:hover {
    background: rgba(0, 0, 0, 0.05);
}

.time-picker-option.selected {
    background: var(--accent);
    color: #ffffff;
}

body.dark-mode .time-picker-option {
    color: #ffffff;
}

body.dark-mode .time-picker-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .time-picker-option.selected {
    background: var(--accent);
}

/* ===================================
   MODERN REPEAT PILLS
   =================================== */
.repeat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.repeat-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: #ffffff;
    border: 1px solid #d1d1d6;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    font-weight: 500;
    color: #000000;
}

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

.repeat-pill:hover {
    background: #f5f5f7;
    border-color: #b0b0b5;
}

.repeat-pill.selected {
    background: #ffffff;
    color: var(--accent);
    border-color: var(--accent);
    border-width: 2px;
    padding: 7px 13px;
}

body.dark-mode .repeat-pill {
    background: #2c2c2e;
    border-color: #48484a;
    color: #ffffff;
}

body.dark-mode .repeat-pill:hover {
    background: #3a3a3c;
    border-color: #636366;
}

body.dark-mode .repeat-pill.selected {
    background: #2c2c2e;
    color: var(--accent);
    border-color: var(--accent);
}

/* ===================================
   INLINE TOGGLE ROW (Calendar Toggle)
   =================================== */
.inline-toggle-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.inline-toggle-row:hover {
    background: transparent;
}

body.dark-mode .inline-toggle-row {
    background: transparent;
}

body.dark-mode .inline-toggle-row:hover {
    background: transparent;
}

.inline-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
}

.inline-toggle-label i {
    font-size: 14px;
    color: var(--accent);
}

/* Mini Toggle Switch */
.mini-toggle {
    position: relative;
    width: 44px;
    height: 26px;
}

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

.mini-toggle-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 26px;
    transition: all 0.25s ease;
    cursor: pointer;
}

.mini-toggle-track::before {
    content: '';
    position: absolute;
    height: 22px;
    width: 22px;
    left: 2px;
    bottom: 2px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform 0.25s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.mini-toggle input:checked + .mini-toggle-track {
    background: var(--accent);
}

.mini-toggle input:checked + .mini-toggle-track::before {
    transform: translateX(18px);
}

body.dark-mode .mini-toggle-track {
    background: rgba(255, 255, 255, 0.2);
}

/* ===================================
   UNIFIED VISIBILITY SELECTOR
   =================================== */
.visibility-modal-content {
    position: relative;
    background: var(--bg-surface);
    border-radius: 24px;
    padding: 28px;
    width: 340px;
    max-width: 90vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    text-align: left;
}

.visibility-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    border: none;
    background: var(--bg-body);
    color: var(--text-muted);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.15s ease;
}

.visibility-modal-close:hover {
    background: var(--bg-surface-soft);
    color: var(--text-main);
}

.visibility-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.visibility-modal-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 20px 0;
}

/* Segmented visibility control */
.visibility-segment {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
    background: #f2f3f7;
    border-radius: 14px;
    padding: 4px;
    height: 36px;
    gap: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    overflow: hidden;
}

.visibility-segment .segment-indicator {
    position: absolute;
    top: 4px;
    left: 4px;
    height: calc(100% - 8px);
    width: calc(50% - 4px);
    background: var(--bg-surface);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    transition: transform var(--transition-medium), width var(--transition-fast);
    pointer-events: none;
}

.segment-option {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition-fast);
    user-select: none;
    white-space: nowrap;
}

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

.segment-option i {
    font-size: 13px;
}

.segment-option.selected {
    color: var(--text-main);
}

body.dark-mode .visibility-segment {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.dark-mode .visibility-segment .segment-indicator {
    background: var(--bg-surface);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.doc-readonly-section {
    margin-top: 20px;
}

.doc-readonly-divider {
    height: 1px;
    background: var(--border-subtle);
    margin-bottom: 16px;
}

.doc-readonly-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
}

.doc-readonly-info {
    flex: 1;
}

.doc-readonly-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.doc-readonly-text i {
    color: var(--text-muted);
    margin-right: 6px;
}

.doc-readonly-desc {
    font-size: 12px;
    color: var(--text-muted);
}

.visibility-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

body.dark-mode .visibility-modal-content {
    background: var(--bg-elevated);
}

/* ===================================
   CREATE DOC MODAL
   =================================== */
.create-doc-modal-content {
    position: relative;
    background: var(--bg-surface);
    border-radius: 24px;
    padding: 32px;
    width: 360px;
    max-width: 90vw;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
    text-align: left;
}

.create-doc-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-body);
    color: var(--text-muted);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.15s ease;
}

.create-doc-close:hover {
    background: var(--bg-surface-soft);
    color: var(--text-main);
}

.create-doc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.create-doc-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    border-radius: 12px;
    font-size: 18px;
    color: var(--accent);
    flex-shrink: 0;
}

.create-doc-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.create-doc-input {
    width: 100%;
    padding: 14px 18px;
    border: 1.5px solid var(--border-subtle);
    border-radius: 999px;
    font-size: 15px;
    color: var(--text-primary);
    background: var(--bg-body);
    outline: none;
    transition: all 0.2s ease;
    text-align: center;
}

.create-doc-input:focus {
    border-color: var(--accent);
    background: var(--bg-surface);
}

.create-doc-input::placeholder {
    color: var(--text-muted);
}

.create-doc-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 24px;
}

body.dark-mode .create-doc-modal-content {
    background: var(--bg-elevated);
}

body.dark-mode .create-doc-input {
    background: var(--bg-surface);
}


/* ===================================
   MINIMAL CHECKBOX / TOGGLE
   =================================== */

.unified-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    padding: 12px;
    background: #f5f5f7;
    border-radius: 10px;
    transition: background 0.15s ease;
}

body.dark-mode .unified-checkbox-label {
    background: rgba(255, 255, 255, 0.08);
}

.unified-checkbox-label:hover {
    background: #ebebed;
}

body.dark-mode .unified-checkbox-label:hover {
    background: rgba(255, 255, 255, 0.12);
}

.unified-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid rgba(0, 0, 0, 0.2);
    appearance: none;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    margin-top: 1px;
    background: transparent;
}

body.dark-mode .unified-checkbox-label input[type="checkbox"] {
    border-color: rgba(255, 255, 255, 0.3);
}

.unified-checkbox-label input[type="checkbox"]:checked {
    background: #007aff;
    border-color: #007aff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.unified-checkbox-content {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.unified-checkbox-title {
    font-size: 13px;
    font-weight: 500;
    color: #000000;
}

body.dark-mode .unified-checkbox-title {
    color: #ffffff;
}

.unified-checkbox-desc {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.4);
}

body.dark-mode .unified-checkbox-desc {
    color: rgba(255, 255, 255, 0.4);
}

/* ===================================
   MINIMAL SEGMENTED CONTROL
   =================================== */

.unified-segmented {
    display: flex;
    background: #f5f5f7;
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}

body.dark-mode .unified-segmented {
    background: rgba(255, 255, 255, 0.08);
}

.unified-segmented-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.5);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

body.dark-mode .unified-segmented-option {
    color: rgba(255, 255, 255, 0.5);
}

.unified-segmented-option:hover {
    color: rgba(0, 0, 0, 0.7);
}

body.dark-mode .unified-segmented-option:hover {
    color: rgba(255, 255, 255, 0.7);
}

.unified-segmented-option.active {
    background: #ffffff;
    color: #000000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

body.dark-mode .unified-segmented-option.active {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

/* ===================================
   MINIMAL CONFIRMATION BOXES
   =================================== */

.unified-confirm-box {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: #f5f5f7;
    border-radius: 10px;
    align-items: flex-start;
}

body.dark-mode .unified-confirm-box {
    background: rgba(255, 255, 255, 0.06);
}

.unified-confirm-box.danger {
    background: rgba(255, 59, 48, 0.06);
}

.unified-confirm-box.warning {
    background: rgba(255, 149, 0, 0.06);
}

.unified-confirm-box.info {
    background: rgba(0, 122, 255, 0.06);
}

.unified-confirm-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 16px;
    flex-shrink: 0;
}

.unified-confirm-box.danger .unified-confirm-icon {
    background: rgba(255, 59, 48, 0.1);
    color: #ff3b30;
}

.unified-confirm-box.warning .unified-confirm-icon {
    background: rgba(255, 149, 0, 0.1);
    color: #ff9500;
}

.unified-confirm-box.info .unified-confirm-icon {
    background: rgba(0, 122, 255, 0.1);
    color: #007aff;
}

.unified-confirm-content {
    flex: 1;
}

.unified-confirm-content h3 {
    font-size: 14px;
    font-weight: 600;
    color: #000000;
    margin: 0 0 4px 0;
}

body.dark-mode .unified-confirm-content h3 {
    color: #ffffff;
}

.unified-confirm-content p {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.5);
    margin: 0;
    line-height: 1.4;
}

body.dark-mode .unified-confirm-content p {
    color: rgba(255, 255, 255, 0.5);
}

/* Confirm text utilities */
.unified-confirm-text {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.5);
    margin: 0;
    line-height: 1.4;
}

body.dark-mode .unified-confirm-text {
    color: rgba(255, 255, 255, 0.5);
}

.unified-confirm-text.mt-sm {
    margin-top: 8px;
}

.unified-confirm-text.danger {
    font-weight: 600;
    color: #ff3b30;
}

.unified-confirm-title {
    font-size: 15px;
    font-weight: 500;
    color: #000000;
    margin: 0 0 4px 0;
}

body.dark-mode .unified-confirm-title {
    color: #ffffff;
}

/* Warning Box */
.unified-warning-box {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: rgba(255, 149, 0, 0.06);
    border-radius: 10px;
    align-items: flex-start;
}

body.dark-mode .unified-warning-box {
    background: rgba(255, 149, 0, 0.1);
}

.unified-warning-box i {
    font-size: 18px;
    color: #ff9500;
    flex-shrink: 0;
    margin-top: 2px;
}

.unified-warning-box p {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.6);
    margin: 0;
    line-height: 1.4;
}

body.dark-mode .unified-warning-box p {
    color: rgba(255, 255, 255, 0.6);
}

/* ===================================
   INFO LISTS IN MODALS
   =================================== */

.unified-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.unified-info-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.6);
    padding: 8px 12px;
    background: #f5f5f7;
    border-radius: 8px;
}

body.dark-mode .unified-info-list li {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
}

.unified-info-list li i {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.3);
    width: 16px;
    text-align: center;
}

body.dark-mode .unified-info-list li i {
    color: rgba(255, 255, 255, 0.3);
}

.unified-info-list li strong {
    font-weight: 500;
    color: #000000;
}

body.dark-mode .unified-info-list li strong {
    color: #ffffff;
}

/* Feature list */
.unified-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.unified-feature-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #000000;
}

body.dark-mode .unified-feature-list li {
    color: #ffffff;
}

.unified-feature-list li i {
    font-size: 11px;
    width: 14px;
    text-align: center;
}

.unified-feature-list li i.fa-check {
    color: #34c759;
}

.unified-feature-list li i.fa-times {
    color: rgba(0, 0, 0, 0.3);
}

body.dark-mode .unified-feature-list li i.fa-times {
    color: rgba(255, 255, 255, 0.3);
}

.unified-feature-list li.muted {
    color: rgba(0, 0, 0, 0.4);
}

body.dark-mode .unified-feature-list li.muted {
    color: rgba(255, 255, 255, 0.4);
}

/* ===================================
   RESPONSIVE - Mobile
   =================================== */

@media (max-width: 600px) {
    .unified-modal-container {
        max-width: 100%;
        max-height: calc(100vh - 20px);
        border-radius: 14px 14px 0 0;
        margin-top: auto;
    }
    
    .unified-modal-container.modal-form-wide {
        max-width: 100%;
    }
    
    .unified-modal {
        align-items: flex-end;
        padding: 0;
    }
    
    .unified-form-grid.two-col {
        grid-template-columns: 1fr;
    }
    
    .unified-form-field.full-width {
        grid-column: 1;
    }
    
    .unified-modal-header {
        padding: 16px 20px;
    }
    
    .unified-modal-body {
        padding: 16px 20px;
        max-height: calc(100vh - 180px);
    }
    
    .unified-modal-footer {
        padding: 14px 20px;
    }
    
    .unified-modal-title h2 {
        font-size: 16px;
    }
    
    .unified-btn {
        padding: 12px 16px;
    }
}

/* ===================================
   FINANCES TAB STYLES - Two Column Layout
   =================================== */

/* Top Metrics Row */
.finances-metrics-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.finance-metric-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: all 0.2s ease;
}

.finance-metric-card:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.finance-metric-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.finance-metric-icon.mrr {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.finance-metric-icon.ytd {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.finance-metric-icon.net {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.finance-metric-icon.customer {
    background: rgba(251, 191, 36, 0.15);
    color: #f59e0b;
}

.finance-metric-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.finance-metric-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.finance-metric-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.finance-metric-value.income {
    color: #22c55e;
}

.finance-metric-value.customer-name {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.finance-metric-sub {
    font-size: 11px;
    color: var(--text-muted);
}

/* Two-Column Layout */
.finances-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.finance-column {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Prevent grid blowout */
    /* No overflow hidden - let content determine height naturally */
}

.revenue-column,
.expenses-column {
    flex: 1;
    max-width: 100%;
}

.finance-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle);
    background: transparent;
}

.column-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.column-title h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.column-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.column-icon.income {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.column-icon.expense {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.column-total {
    font-size: 14px;
    font-weight: 700;
    color: #22c55e;
    font-variant-numeric: tabular-nums;
    padding: 4px 10px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 6px;
}

.column-total.expense {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.btn-add-transaction {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-add-transaction.income {
    background: #22c55e;
    color: white;
}

.btn-add-transaction.income:hover {
    background: #16a34a;
    transform: scale(1.05);
}

.btn-add-transaction.expense {
    background: #ef4444;
    color: white;
}

.btn-add-transaction.expense:hover {
    background: #dc2626;
    transform: scale(1.05);
}

/* Transaction Column List */
.transactions-column-list {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: none;
    overflow: visible;
}

.transactions-column-list.expanded {
    max-height: none;
    overflow: visible;
}

/* See All Button */
.see-all-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 16px;
    margin-top: 4px;
    background: transparent;
    border: 1px dashed var(--border-subtle);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.see-all-btn:hover {
    background: var(--bg-body);
    border-color: var(--accent);
    color: var(--accent);
}

.see-all-btn.active {
    border-style: solid;
    background: var(--accent-soft);
    color: var(--accent);
}

.see-all-btn i {
    font-size: 10px;
    transition: transform 0.2s ease;
}

.see-all-btn.active i {
    transform: rotate(180deg);
}

.finance-column-footer {
    padding: 8px 12px 12px;
    border-top: 1px solid var(--border-subtle);
}

/* Individual Transaction Row */
.transaction-row {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    margin: 6px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: all 0.18s ease;
}

.transaction-row:hover {
    border-color: var(--border-medium);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.transaction-row.expanded {
    border-color: var(--border-medium);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
}

/* Clean compact row layout */
.transaction-row-main {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    background: transparent;
    border: none;
    border-radius: 14px;
    transition: all 0.18s ease;
}

/* Column: Amount (highest priority, left) */
.transaction-col-amount {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 90px;
}

.transaction-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background: rgba(0, 122, 255, 0.12);
    color: #0a84ff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.transaction-row-subscription {
    border-style: dashed;
}

/* Column: From/To info (middle) */
.transaction-col-from-to {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    flex: 1;
}

.transaction-from-to {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Column: Actions + expand */
.transaction-col-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* Legacy support - keep old classes working */
.transaction-row-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.transaction-row-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.transaction-date {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 85px;
}

.transaction-description {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.transaction-party {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.transaction-party::before {
    content: "•";
    margin-right: 8px;
    opacity: 0.5;
}

/* Amount styling - visually stronger */
.transaction-amount {
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: left;
}

.transaction-amount.income {
    color: #22c55e;
}

.transaction-amount.expense {
    color: #ef4444;
}

/* Recurring indicator (tiny, inline) */
.transaction-recurring-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: transparent;
    color: #a855f7;
    border-radius: 3px;
    font-size: 9px;
    opacity: 0.8;
}

.transaction-recurring-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
    border-radius: 6px;
    font-size: 11px;
}

/* Hide action buttons on collapsed row - only show when expanded */
.transaction-actions {
    display: none;
}

.transaction-row.expanded .transaction-col-actions .transaction-actions {
    display: flex;
    gap: 6px;
}

.transaction-action-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(128, 128, 128, 0.1);
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s ease;
}

.transaction-action-btn:hover {
    background: var(--primary);
    color: white;
}

.transaction-action-btn.delete:hover {
    background: #ef4444;
}

.expand-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 12px;
    transition: transform 0.2s ease;
}

.transaction-row.expanded .expand-icon i {
    transform: rotate(180deg);
}

/* Expanded Details */
.transaction-row-details {
    display: none;
    padding: 0 14px 12px;
    border-top: 1px solid var(--border-subtle);
    background: transparent;
    animation: slideDown 0.2s ease;
}

.transaction-row.expanded .transaction-row-details {
    display: block;
}

.transaction-row.expanded .transaction-row-details .transaction-detail-grid {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 10px 0;
    margin: 0;
    box-shadow: none;
}

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

.transaction-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding-top: 12px;
}

.transaction-action-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-muted);
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.transaction-action-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.transaction-action-btn.delete:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: white;
}

.transaction-row-actions {
    display: flex;
    gap: 8px;
    padding-top: 10px;
    margin-top: 10px;
    padding-bottom: 4px;
    border-top: 1px solid var(--border-subtle);
    justify-content: flex-end;
}

.transaction-row-actions .btn-sm {
    padding: 8px 16px;
    font-size: 12px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.transaction-row-actions .btn-edit {
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent);
}

.transaction-row-actions .btn-edit:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.transaction-row-actions .btn-delete {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.transaction-row-actions .btn-delete:hover {
    background: #ef4444;
    color: white;
    border-color: #ef4444;
}

/* Recurring Badge */
.recurring-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}

/* Column Empty State */
.column-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
}

.column-empty-state i {
    font-size: 36px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.column-empty-state p {
    font-size: 14px;
    margin-bottom: 16px;
}

.btn-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: 2px dashed var(--border-subtle);
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.btn-text i {
    font-size: 16px;
    line-height: 1;
    position: relative;
    top: 7px;
}

.btn-text.income {
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.4);
}

.btn-text.income:hover {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.08);
}

.btn-text.expense {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
}

.btn-text.expense:hover {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

/* Full-page Placeholder */
.finances-placeholder-state {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-surface);
    border: 1px dashed var(--border-subtle);
    border-radius: 12px;
    margin-top: 24px;
}

.finances-placeholder-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--primary);
    margin-bottom: 20px;
}

.finances-placeholder-state h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.finances-placeholder-state p {
    color: var(--text-muted);
    margin-bottom: 20px;
    max-width: 300px;
}

.placeholder-actions {
    display: flex;
    gap: 12px;
}

.placeholder-actions .btn-primary.income {
    background: #22c55e;
}

.placeholder-actions .btn-primary.income:hover {
    background: #16a34a;
}

.placeholder-actions .btn-secondary.expense {
    color: #ef4444;
    border-color: #ef4444;
}

.placeholder-actions .btn-secondary.expense:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* Transaction Modal Styles */
.transaction-type-toggle {
    display: flex;
    gap: 12px;
}

.transaction-type-toggle .type-btn {
    flex: 1;
    padding: 14px 20px;
    border: 2px solid var(--border-subtle);
    background: var(--bg-surface);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.transaction-type-toggle .type-btn:hover {
    border-color: var(--text-muted);
}

.transaction-type-toggle .type-btn.active[data-type="income"] {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.transaction-type-toggle .type-btn.active[data-type="expense"] {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.amount-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.amount-input-wrapper .currency-symbol {
    position: absolute;
    left: 14px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-muted);
}

.amount-input-wrapper .amount-input {
    padding-left: 36px;
    font-size: 18px;
    font-weight: 600;
}

/* Toggle Switch Wrapper - for transaction form */
.toggle-switch-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Toggle label text in forms */
.toggle-label-form {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Dark Mode Adjustments for Finances */
body.dark-mode .finance-metric-card,
body.dark-mode .finance-column {
    background: var(--bg-surface);
}

body.dark-mode .transaction-row {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .transaction-row-details {
    background: transparent;
}

/* ===================================
   TRANSACTION ROW - MOBILE RESPONSIVE
   =================================== */
@media (max-width: 640px) {
    .transaction-row-main {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 8px 12px;
        padding: 12px 14px;
    }
    
    /* Amount on top left */
    .transaction-col-amount {
        grid-column: 1;
        grid-row: 1;
    }
    
    .transaction-amount {
        font-size: 15px;
        min-width: auto;
    }
    
    /* Date on top right */
    .transaction-col-date {
        grid-column: 2;
        grid-row: 1;
    }
    
    .transaction-date-short {
        font-size: 12px;
    }
    
    /* From/to spans full width on second row */
    .transaction-col-from-to {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    
    .transaction-from-to {
        font-size: 13px;
    }
    
    .transaction-desc-sub {
        font-size: 11px;
    }
    
    /* Actions positioned inline with date */
    .transaction-col-actions {
        grid-column: 2;
        grid-row: 1;
        gap: 4px;
    }
    
    .transaction-actions {
        opacity: 1;
    }
    
    .transaction-action-btn {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }
    
    .expand-icon {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }
    
    /* Expanded details grid on mobile */
    .transaction-detail-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .transaction-detail-item.full-width {
        grid-column: span 1;
    }
}

@media (max-width: 400px) {
    .transaction-row-main {
        padding: 10px 12px;
    }
    
    .transaction-amount {
        font-size: 14px;
    }
    
    .transaction-from-to {
        font-size: 12px;
    }
}

body.dark-mode .transaction-type-toggle .type-btn {
    background: var(--bg-surface);
}

body.dark-mode .toggle-slider {
    background: rgba(255, 255, 255, 0.1);
}

/* Responsive Finances - Two Column Layout */
@media (max-width: 1024px) {
    .finances-metrics-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .finances-metrics-row {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    
    .finance-metric-card {
        padding: 14px 16px;
    }
    
    .finance-metric-value {
        font-size: 18px;
    }
    
    .finances-columns {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .finance-column {
        min-height: auto;
    }
    
    .finance-column-header {
        padding: 12px 16px;
    }
    
    .column-title h2 {
        font-size: 14px;
    }
    
    /* Hide date ranges and decorative elements on mobile */
    .finance-column-header .column-total-label,
    .finance-column-header .date-range {
        display: none;
    }
    
    .transactions-column-list {
        max-height: none;
    }
    
    /* Transaction row - show only amount on collapsed state */
    .transaction-row-main {
        grid-template-columns: 1fr auto;
        padding: 12px 14px;
    }
    
    .transaction-row-main .transaction-date,
    .transaction-row-main .transaction-category {
        display: none;
    }
    
    .transaction-row.expanded .transaction-row-main .transaction-date,
    .transaction-row.expanded .transaction-row-main .transaction-category {
        display: flex;
    }
    
    .transaction-row-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .finances-metrics-row {
        grid-template-columns: 1fr;
    }
    
    .finance-metric-card {
        flex-direction: row;
        align-items: center;
    }
    
    .transaction-type-toggle {
        flex-direction: column;
    }
    
    .placeholder-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .placeholder-actions button {
        width: 100%;
    }
}

/* ===================================
   SUBSCRIPTIONS SECTION
   =================================== */
.subscriptions-section {
    margin-top: 40px;
    padding: 0;
}

.subscriptions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 0 4px;
}

.subscriptions-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.subscriptions-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 16px;
}

.subscriptions-title h2 {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.subscriptions-count {
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    min-width: 24px;
    text-align: center;
}

.btn-add-subscription {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--accent);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all var(--transition-fast);
}

.btn-add-subscription:hover {
    background: #0066dd;
    transform: scale(1.05);
}

/* Subscriptions Tabs */
.subscriptions-tabs {
    display: inline-flex;
    gap: 6px;
    margin-bottom: 16px;
    padding: 4px;
    background: var(--bg-surface);
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
}

.sub-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    background: transparent;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.sub-tab:hover {
    color: var(--text-main);
    background: var(--bg-body);
}

.sub-tab.active {
    background: var(--accent);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
}

.sub-tab-count {
    background: var(--bg-muted);
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.sub-tab.active .sub-tab-count {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* Upcoming Subscriptions Banner */
.upcoming-subscriptions {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
    display: none;
}

.upcoming-subscriptions.has-items {
    display: block;
}

.upcoming-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.upcoming-header i {
    color: #d97706;
    font-size: 14px;
}

.upcoming-header span {
    font-size: 13px;
    font-weight: 600;
    color: #d97706;
}

.upcoming-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.upcoming-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-surface);
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
}

.upcoming-item-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.upcoming-item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

.upcoming-item-date {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.upcoming-item-amount {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
}

/* Subscriptions List */
.subscriptions-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.subscription-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-surface);
    border-radius: 14px;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: all 0.18s ease;
}

.subscription-row:hover {
    border-color: var(--border-medium);
    background: var(--bg-surface);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}


.subscription-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.subscription-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--bg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.subscription-logo.company {
    background: var(--accent-soft);
    color: var(--accent);
}

.subscription-logo.private {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}

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

.subscription-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 6px;
}

.subscription-name .private-badge {
    font-size: 10px;
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}

.subscription-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
    font-weight: 500;
}

.subscription-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.subscription-meta i {
    font-size: 11px;
    opacity: 0.7;
}

.subscription-amount-col {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.subscription-amount {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
}

.subscription-frequency {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: lowercase;
    font-weight: 500;
}

.subscription-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 12px;
}

.subscription-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all var(--transition-fast);
}

.subscription-action-btn:hover {
    background: var(--bg-muted);
    color: var(--text-main);
}

.subscription-action-btn.delete:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.subscription-action-btn.link {
    color: var(--accent);
}

.subscription-action-btn.link:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

/* Subscriptions Empty State */
.subscriptions-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.subscriptions-empty-state i {
    font-size: 40px;
    color: var(--text-muted);
    opacity: 0.5;
    font-size: 12px;
    line-height: 1;
    position: relative;
    top: 1.5px;
}

.subscriptions-empty-state .add-row-btn i {
    font-size: 14px;
    margin: 0;
}

.subscriptions-empty-state p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 14px 0;
}

/* Subscription Type Toggle */
.subscription-type-toggle {
    display: inline-flex;
    background: var(--bg-surface);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
    border: 1px solid var(--border-subtle);
}

.subscription-type-toggle .type-btn {
    flex: 1;
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.subscription-type-toggle .type-btn:hover {
    color: var(--text-main);
    background: var(--bg-body);
}

.subscription-type-toggle .type-btn.active[data-type="company"] {
    background: var(--accent);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
}

.subscription-type-toggle .type-btn.active[data-type="private"] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.form-field-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* Subscription Responsive */
@media (max-width: 768px) {
    .subscriptions-section {
        padding: 16px;
        margin-top: 20px;
    }
    
    .subscription-row {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .subscription-info {
        width: 100%;
    }
    
    .subscription-amount-col {
        margin-left: auto;
    }
    
    .subscription-actions {
        margin-left: auto;
    }
}

/* Dark Mode Subscriptions */
body.dark-mode .subscriptions-section {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
}

body.dark-mode .sub-tab-count {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .subscription-row {
    background: var(--bg-base);
}

body.dark-mode .subscription-type-toggle {
    background: var(--bg-surface);
}

/* ===================================
   ACCENT COLOR PICKER - Style Settings
   =================================== */
.accent-color-picker {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 0;
}

.accent-color-option {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    background: transparent;
    border: 2px solid transparent;
}

.accent-color-option:hover {
    transform: scale(1.08);
}

.accent-color-option.selected {
    border-color: var(--text-muted);
}

.accent-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

body.dark-mode .accent-color-option.selected {
    border-color: rgba(255, 255, 255, 0.4);
}

body.dark-mode .accent-color-swatch {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ===================================
   TASK MODAL PROGRESS BAR (Filled Style)
   =================================== */
.task-modal-progress-control {
    display: flex;
    align-items: center;
    gap: 16px;
}

.task-modal-progress-track {
    flex: 1;
    height: 8px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    position: relative;
    overflow: visible;
}

body.dark-mode .task-modal-progress-track {
    background: rgba(255, 255, 255, 0.1);
}

.task-modal-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 100%);
    border-radius: 4px;
    transition: width 0.15s ease;
    pointer-events: none;
}

.task-modal-progress-slider {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 24px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    margin: 0;
}

.task-modal-progress-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    cursor: grab;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 3px solid white;
}

body.dark-mode .task-modal-progress-slider::-webkit-slider-thumb {
    border-color: var(--bg-surface);
}

.task-modal-progress-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 12px rgba(0, 122, 255, 0.5);
}

.task-modal-progress-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.05);
}

.task-modal-progress-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    cursor: grab;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.4);
}

.task-modal-progress-slider::-moz-range-track {
    height: 8px;
    background: transparent;
    border-radius: 4px;
}

.task-modal-progress-badge {
    min-width: 52px;
    padding: 6px 12px;
    background: var(--accent);
    color: white;
    font-size: 14px;
    font-weight: 600;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 122, 255, 0.3);
}

/* ===================================
   DUE DATE CHIPS (Sheet Cells)
   =================================== */
.date-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.date-chip-overdue {
    background: rgba(255, 59, 48, 0.12);
    color: #DC2626;
    border: 1px solid rgba(255, 59, 48, 0.25);
}

.date-chip-today {
    background: rgba(255, 59, 48, 0.12);
    color: #FF3B30;
    border: 1px solid rgba(255, 59, 48, 0.3);
}

.date-chip-tomorrow {
    background: rgba(255, 149, 0, 0.12);
    color: #D97706;
    border: 1px solid rgba(255, 149, 0, 0.3);
}

.date-chip-soon {
    background: rgba(255, 204, 0, 0.15);
    color: #A16207;
    border: 1px solid rgba(255, 204, 0, 0.35);
}

body.dark-mode .date-chip-overdue {
    background: rgba(255, 69, 58, 0.18);
    color: #FF6B6B;
    border-color: rgba(255, 69, 58, 0.35);
}

body.dark-mode .date-chip-today {
    background: rgba(255, 69, 58, 0.18);
    color: #FF6B6B;
    border-color: rgba(255, 69, 58, 0.35);
}

body.dark-mode .date-chip-tomorrow {
    background: rgba(255, 159, 10, 0.18);
    color: #FFB347;
    border-color: rgba(255, 159, 10, 0.35);
}

body.dark-mode .date-chip-soon {
    background: rgba(255, 214, 10, 0.18);
    color: #FFD93D;
    border-color: rgba(255, 214, 10, 0.35);
}

/* ===================================
   MODAL INPUT REDESIGN - TRANSACTION ROW INSPIRED
   Clean, modern inputs with borders and subtle shadows
   =================================== */

/* Universal Modal Input Overrides */
.unified-modal input[type="text"],
.unified-modal input[type="email"],
.unified-modal input[type="password"],
.unified-modal input[type="number"],
.unified-modal input[type="tel"],
.unified-modal input[type="url"],
.unified-modal input[type="date"],
.unified-modal input[type="time"],
.unified-modal input[type="datetime-local"],
.unified-modal input[type="month"],
.unified-modal input[type="week"],
.unified-modal input[type="search"],
.unified-modal select,
.unified-modal textarea,
.modal-overlay input[type="text"],
.modal-overlay input[type="email"],
.modal-overlay input[type="password"],
.modal-overlay input[type="number"],
.modal-overlay input[type="tel"],
.modal-overlay input[type="url"],
.modal-overlay input[type="date"],
.modal-overlay input[type="time"],
.modal-overlay input[type="datetime-local"],
.modal-overlay select,
.modal-overlay textarea {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    color: var(--text-main) !important;
    transition: all 0.18s ease !important;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Hover State */
.unified-modal input:hover,
.unified-modal select:hover,
.unified-modal textarea:hover,
.modal-overlay input:hover,
.modal-overlay select:hover,
.modal-overlay textarea:hover {
    border-color: var(--border-medium) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-1px) !important;
}

/* Focus State */
.unified-modal input:focus,
.unified-modal select:focus,
.unified-modal textarea:focus,
.modal-overlay input:focus,
.modal-overlay select:focus,
.modal-overlay textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 6px 20px rgba(0, 112, 243, 0.12), 0 0 0 3px var(--accent-soft) !important;
    transform: translateY(-1px) !important;
}

/* Placeholder */
.unified-modal input::placeholder,
.unified-modal textarea::placeholder,
.modal-overlay input::placeholder,
.modal-overlay textarea::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.7 !important;
}

/* Enhanced Select Dropdowns */
.unified-modal select,
.modal-overlay select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px !important;
    padding-right: 44px !important;
    cursor: pointer !important;
}

.unified-modal select:focus,
.modal-overlay select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* Textarea Specific */
.unified-modal textarea,
.modal-overlay textarea {
    min-height: 100px !important;
    resize: vertical !important;
    line-height: 1.6 !important;
}

/* Dark Mode */
body.dark-mode .unified-modal input,
body.dark-mode .unified-modal select,
body.dark-mode .unified-modal textarea,
body.dark-mode .modal-overlay input,
body.dark-mode .modal-overlay select,
body.dark-mode .modal-overlay textarea {
    background: var(--bg-surface) !important;
    border-color: var(--border-subtle) !important;
    color: #fff !important;
}

body.dark-mode .unified-modal input:hover,
body.dark-mode .unified-modal select:hover,
body.dark-mode .unified-modal textarea:hover,
body.dark-mode .modal-overlay input:hover,
body.dark-mode .modal-overlay select:hover,
body.dark-mode .modal-overlay textarea:hover {
    border-color: var(--border-medium) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
}

body.dark-mode .unified-modal input:focus,
body.dark-mode .unified-modal select:focus,
body.dark-mode .unified-modal textarea:focus,
body.dark-mode .modal-overlay input:focus,
body.dark-mode .modal-overlay select:focus,
body.dark-mode .modal-overlay textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 6px 20px rgba(10, 132, 255, 0.2), 0 0 0 3px rgba(10, 132, 255, 0.15) !important;
}

body.dark-mode .unified-modal select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* Form Labels in Modals */
.unified-modal .unified-form-label,
.unified-modal label,
.modal-overlay label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Form Groups */
.unified-modal .unified-form-group,
.unified-modal .form-group,
.modal-overlay .form-group {
    margin-bottom: 18px !important;
}

/* Date/Time Input Pickers */
.unified-modal input[type="date"]::-webkit-calendar-picker-indicator,
.unified-modal input[type="time"]::-webkit-calendar-picker-indicator,
.unified-modal input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.modal-overlay input[type="date"]::-webkit-calendar-picker-indicator,
.modal-overlay input[type="time"]::-webkit-calendar-picker-indicator,
.modal-overlay input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer !important;
    filter: opacity(0.6) !important;
    transition: filter 0.15s ease !important;
}

.unified-modal input[type="date"]:hover::-webkit-calendar-picker-indicator,
.unified-modal input[type="time"]:hover::-webkit-calendar-picker-indicator,
.unified-modal input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
.modal-overlay input[type="date"]:hover::-webkit-calendar-picker-indicator,
.modal-overlay input[type="time"]:hover::-webkit-calendar-picker-indicator,
.modal-overlay input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator {
    filter: opacity(1) !important;
}

body.dark-mode .unified-modal input[type="date"]::-webkit-calendar-picker-indicator,
body.dark-mode .unified-modal input[type="time"]::-webkit-calendar-picker-indicator,
body.dark-mode .unified-modal input[type="datetime-local"]::-webkit-calendar-picker-indicator,
body.dark-mode .modal-overlay input[type="date"]::-webkit-calendar-picker-indicator,
body.dark-mode .modal-overlay input[type="time"]::-webkit-calendar-picker-indicator,
body.dark-mode .modal-overlay input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.6) !important;
}

body.dark-mode .unified-modal input[type="date"]:hover::-webkit-calendar-picker-indicator,
body.dark-mode .unified-modal input[type="time"]:hover::-webkit-calendar-picker-indicator,
body.dark-mode .unified-modal input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
body.dark-mode .modal-overlay input[type="date"]:hover::-webkit-calendar-picker-indicator,
body.dark-mode .modal-overlay input[type="time"]:hover::-webkit-calendar-picker-indicator,
body.dark-mode .modal-overlay input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(1) !important;
}

/* Checkbox & Radio in Modals */
.unified-modal input[type="checkbox"],
.unified-modal input[type="radio"],
.modal-overlay input[type="checkbox"],
.modal-overlay input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    border: 2px solid var(--border-medium) !important;
    border-radius: 6px !important;
    background: var(--bg-surface) !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transform: none !important;
    accent-color: var(--accent) !important;
}

.unified-modal input[type="radio"],
.modal-overlay input[type="radio"] {
    border-radius: 50% !important;
}

.unified-modal input[type="checkbox"]:checked,
.unified-modal input[type="radio"]:checked,
.modal-overlay input[type="checkbox"]:checked,
.modal-overlay input[type="radio"]:checked {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* Color Input */
.unified-modal input[type="color"],
.modal-overlay input[type="color"] {
    padding: 6px !important;
    height: 52px !important;
    cursor: pointer !important;
}

.unified-modal input[type="color"]::-webkit-color-swatch-wrapper,
.modal-overlay input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 4px !important;
}

.unified-modal input[type="color"]::-webkit-color-swatch,
.modal-overlay input[type="color"]::-webkit-color-swatch {
    border-radius: 8px !important;
    border: none !important;
}

/* File Input */
.unified-modal input[type="file"],
.modal-overlay input[type="file"] {
    padding: 12px !important;
    cursor: pointer !important;
}

.unified-modal input[type="file"]::file-selector-button,
.modal-overlay input[type="file"]::file-selector-button {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover)) !important;
    color: white !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    margin-right: 12px !important;
    transition: all 0.18s ease !important;
}

.unified-modal input[type="file"]::file-selector-button:hover,
.modal-overlay input[type="file"]::file-selector-button:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 4px 12px var(--accent-soft) !important;
}

/* Disabled State */
.unified-modal input:disabled,
.unified-modal select:disabled,
.unified-modal textarea:disabled,
.modal-overlay input:disabled,
.modal-overlay select:disabled,
.modal-overlay textarea:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background: var(--bg-muted) !important;
    transform: none !important;
}

/* Error State */
.unified-modal input.error,
.unified-modal select.error,
.unified-modal textarea.error,
.unified-modal .has-error input,
.unified-modal .has-error select,
.unified-modal .has-error textarea,
.modal-overlay input.error,
.modal-overlay select.error,
.modal-overlay textarea.error {
    border-color: #ef4444 !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.08), 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Success State */
.unified-modal input.success,
.unified-modal select.success,
.unified-modal textarea.success,
.modal-overlay input.success,
.modal-overlay select.success,
.modal-overlay textarea.success {
    border-color: #22c55e !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.08), 0 0 0 3px rgba(34, 197, 94, 0.1) !important;
}

/* Input with prefix icon */
.unified-modal .input-with-icon,
.modal-overlay .input-with-icon {
    position: relative !important;
}

.unified-modal .input-with-icon input,
.modal-overlay .input-with-icon input {
    padding-left: 44px !important;
}

.unified-modal .input-with-icon .input-icon,
.modal-overlay .input-with-icon .input-icon {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--text-muted) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Input row (horizontal layout) */
.unified-modal .input-row,
.unified-modal .form-row,
.modal-overlay .input-row,
.modal-overlay .form-row {
    display: flex !important;
    gap: 12px !important;
}

.unified-modal .input-row > *,
.unified-modal .form-row > *,
.modal-overlay .input-row > *,
.modal-overlay .form-row > * {
    flex: 1 !important;
}

/* Required field indicator */
.unified-modal label.required::after,
.modal-overlay label.required::after {
    content: ' *' !important;
    color: #ef4444 !important;
}

/* Helper/hint text */
.unified-modal .form-hint,
.unified-modal .helper-text,
.modal-overlay .form-hint,
.modal-overlay .helper-text {
    font-size: 12px !important;
    color: var(--text-muted) !important;
    margin-top: 6px !important;
}

/* Error message */
.unified-modal .form-error,
.unified-modal .error-message,
.modal-overlay .form-error,
.modal-overlay .error-message {
    font-size: 12px !important;
    color: #ef4444 !important;
    margin-top: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* Focus animation */
@keyframes modalInputFocus {
    0% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04), 0 0 0 0 var(--accent-soft); }
    50% { box-shadow: 0 6px 20px rgba(0, 112, 243, 0.12), 0 0 0 4px var(--accent-soft); }
    100% { box-shadow: 0 6px 20px rgba(0, 112, 243, 0.12), 0 0 0 3px var(--accent-soft); }
}

.unified-modal input:focus,
.unified-modal select:focus,
.unified-modal textarea:focus {
    animation: modalInputFocus 0.3s ease forwards !important;
}

/* ===================================
   MOBILE-FRIENDLY BUTTONS
   Prevent text wrapping to 2 lines
   =================================== */

/* Global button no-wrap rule */
.btn-primary,
.btn-secondary,
.btn-danger,
.btn,
button[class*="btn"],
.panel-action-btn,
.modal-btn,
.batch-btn,
.empty-state-cta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile button adjustments */
@media (max-width: 768px) {
    /* Reduce button padding and font size on mobile */
    .btn-primary,
    .btn-secondary,
    .btn-danger {
        padding: 10px 16px;
        font-size: 13px;
        gap: 6px;
    }
    
    /* Section header button improvements */
    .section-header-actions {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding-bottom: 4px;
    }
    
    .section-header-actions button {
        flex: 0 0 auto;
        min-width: auto;
        white-space: nowrap;
    }
    
    /* Modal button row */
    .modal-actions,
    .task-modal-actions,
    .unified-modal-footer {
        flex-wrap: nowrap;
        gap: 8px;
    }
    
    .modal-actions button,
    .task-modal-actions button,
    .unified-modal-footer button {
        flex: 1;
        min-width: 0;
        padding: 10px 12px;
        font-size: 13px;
    }
    
    /* Panel action buttons */
    .panel-action-btn {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    /* Batch action bar buttons */
    .batch-btn {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    /* Metrics buttons */
    .metrics-add-metric-btn {
        padding: 10px 14px;
        font-size: 12px;
    }
    
    .metrics-edit-btn-header {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    /* Finance tab buttons */
    .finance-add-btn,
    .add-transaction-btn,
    .subscription-add-btn {
        padding: 8px 14px;
        font-size: 12px;
    }
    
    /* Calendar buttons */
    .calendar-add-btn {
        width: 36px;
        height: 36px;
    }
    
    .view-toggle-btn {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    /* Spreadsheet buttons */
    .empty-state-cta {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    /* Toast close button */
    .toast-close {
        padding: 4px;
        min-width: 24px;
    }
    
    /* Icon-only buttons on mobile - hide text */
    .mobile-icon-only span:not(.sr-only) {
        display: none;
    }
    
    .mobile-icon-only {
        padding: 10px;
        gap: 0;
    }
}

@media (max-width: 480px) {
    /* Extra small screens - further reduce */
    .btn-primary,
    .btn-secondary,
    .btn-danger {
        padding: 8px 12px;
        font-size: 12px;
        gap: 4px;
    }
    
    /* Section headers stack vertically with full-width buttons */
    .section-header {
        gap: 12px;
    }
    
    .section-header-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .section-header-actions button {
        width: 100%;
        justify-content: center;
    }
    
    /* Modal buttons full width on very small screens */
    .modal-actions,
    .task-modal-actions {
        flex-direction: column;
    }
    
    .modal-actions button,
    .task-modal-actions button {
        width: 100%;
    }
    
    /* Filter toggle buttons */
    .filter-btn,
    .view-toggle-btn {
        padding: 6px 8px;
        font-size: 11px;
    }
    
    /* Team member action buttons */
    .teammate-actions {
        gap: 4px;
    }
    
    .teammate-actions button {
        padding: 6px 8px;
        font-size: 11px;
    }
}

/* Ensure buttons with icons don't wrap oddly */
button i + span,
button span + i,
.btn i + span,
.btn span + i {
    white-space: nowrap;
}

/* Fix specific problematic buttons */
.pending-requests-btn {
    white-space: nowrap;
    padding: 8px 12px;
}

@media (max-width: 768px) {
    .pending-requests-btn {
        font-size: 12px;
        padding: 6px 10px;
    }
    
    .pending-requests-btn span {
        display: none;
    }
    
    .pending-requests-btn::after {
        content: attr(data-count);
    }
}

/* Settings page buttons */
.settings-section button {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .settings-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .settings-row button {
        width: 100%;
        justify-content: center;
    }
}

/* Join/Leave team buttons */
.team-action-btn {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .team-code-section,
    .join-team-section {
        flex-direction: column;
    }
    
    .team-code-section button,
    .join-team-section button {
        width: 100%;
    }
}